@charset "UTF-8";
/*
Theme Name: ocean-temp_responsive-v1
Author: Cross Wish / Ocean System
*/


/*===================================================
	ふわっとロード／ふわっとスクロール
===================================================*/
.load-fade {opacity : 0; transition : all 0.5s;}
.load-up{opacity: 0; transform: translateY(16px);transition : all 0.5s;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}

.load-delay_1{transition: all 0.5s;}
.load-delay_2{transition: all 1.0s;}
.load-delay_3{transition: all 1.5s;}

.scroll-fade{opacity: 0; transition: all 0.5s;}
.scroll-up{opacity: 0; transform: translateY(16px); transition: all 0.5s;}
.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}

/*印刷時*/
@media print{
	.load-up, .load-fade{opacity : 1; transform : translate(0, 0);}
	.scroll-up, .scroll-fade{opacity : 1; transform : translate(0, 0);}
}
/*===================================================
	メインビジュアルエリア
===================================================*/
.sec_mv{
    background-image: url("../images/mv-img_w640.png");
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 42vw 200% 0;
    margin: 0 -200% auto;
    position: relative;
}
.sec_mv .mv-txt{
    position: relative;
    bottom: 6.5vw;
    right: 0;
    left: 0;
    margin: 0 auto;
	width: auto;
}
/*画面サイズ640px以上(Tab)*/
@media print, screen and (min-width:640px) {
	.sec_mv{
		background-image: url("../images/mv-img_w960.png");
    	padding: 95px 200% 0;
	}
	.sec_mv .mv-txt{
		bottom: 50px;
	    left: -5px;
	    width: 60%;
	}
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.sec_mv{
		max-width: 1280px;
		max-width: var(--width_mv_pc);
		padding: 76px 200%!important;
		background-image: url("../images/mv-img_w1280.png");
		background-size: auto;
	}
	.sec_mv .mv-txt{
    	bottom: 0px;
    	left: -100px;
		width: auto;
	}
}
/*===================================================
	お知らせエリア
===================================================*/
.sec_info{
    padding: 0 16px 16px;
}

/*===================================================
	サービス内容エリア
===================================================*/
.sec_service{padding-bottom: calc(var(--white-space) - 3.75vw);}
.sec_service .service-list li {
    position: relative;
    width: 48%;
    height: 40.625vw;
    box-sizing: border-box;
    margin-bottom: 3.75vw;
    padding: 1.25vw;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: var(--box-shadow_button);
    font-size: calc(6px + 3vw);
}
.sec_service .service-list li:hover {
	background-color: var(--second-color_quarter);
    box-shadow: var(--box-shadow_button-on);
}
.sec_service .service-list li a {
    display: table;
    width: 100%;
    height: 100%;
}
.sec_service .service-list li a:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../images/arrow01.svg) 0 0/100% no-repeat;
    position: absolute;
    top: 73%;
    left: calc(1.25vw + 4px);
}
.sec_service .service-list li:nth-child(1) a{background: url(../images/service-img01.png) top center/100% no-repeat;}
.sec_service .service-list li:nth-child(2) a{background: url(../images/service-img02.png) top center/100% no-repeat;}
.sec_service .service-list li:nth-child(3) a{background: url(../images/service-img03.png) top center/100% no-repeat;}
.sec_service .service-list li:nth-child(4) a{background: url(../images/service-img04.png) top center/100% no-repeat;}

.sec_service .service-list li a .service-title {
	display: table-cell;
    padding: 23.4375vw 0 0 calc(6.25vw - 10px);
    height: 2em;
    vertical-align: middle;
    font-size: calc(7.2px + 2.32vw);
    font-weight: bold;
    letter-spacing: -0.5px;
    color: var(--text-color);
    text-align: center;
    line-height: 1.4;
}

/*画面サイズ640px以上(Tab)*/
@media print, screen and (min-width:640px) {
	.sec_service{padding-bottom: calc(var(--white-space) - 24px);}
	.sec_service .service-list li{
		height: 260px;
		font-size: 24px;
	    padding: 8px;
		margin-bottom: 24px;
	}
	.sec_service .service-list li a:before{left: 12px;}
	.sec_service .service-list li a .service-title{
		font-size: 22px;
		padding: 150px 0 0 30px;
	}
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.sec_service{
		padding-bottom: var(--white-space);
	}
	.sec_service .service-list li{
		width: 216px;
		height: 200px;
		margin-bottom:0;
	}
	.sec_service .service-list li a .service-title{
		font-size: 20px;
		padding: 120px 0 0 30px;
	}
}
.sec_service .service-list li a .service-title_small{font-size:0.75em;}
.sec_service .service-list li .service-arrow{
    position: absolute;
    font-size: 75%;
    text-align: right;
    bottom: 4px;
    right: 16px;
}
.sec_service .service-list li .service-arrow::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 2px;
    right: -1.25em;
    width: 4px;
    height: 7px;
    background: url(../images/arrow01.svg) 0 0 /contain no-repeat;
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
}

/*===================================================
	代表あいさつ
===================================================*/
.sps_wide {
	justify-content: space-around;
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.sps_wide {
		max-width: 960px;
		max-width: var(--width_pc);
		justify-content: space-around;
		flex-wrap: nowrap;
	}
	.sps_wide > div{
		width: 69%;
	}
}

/*===================================================
	カテゴリーエリア
===================================================*/
.sec_category{
	padding-top: 0;
}
.sec_category .sec_category_hd{
	margin-bottom: 16px !important;
	background: url(../images/category-img01.png) center left calc(12.5vw - 40px)/contain no-repeat;
    text-align: left !important;
}
.sec_category .sec_category_hd::before{
	content:none !important;
}
.sec_category .sec_category_hd span {
    display: block;
	padding: calc(5vw + 8px) 0 calc(5vw - 16px) 37.5vw;
    font-size: calc(2.5vw + 8px);
}

/*画面サイズ640px以上(PC)*/
@media print, screen and (min-width:640px) {
	.sec_category .sec_category_hd{
		background-position: center left 40px;
	}
	.sec_category .sec_category_hd span{
		font-size: 24px;
    	padding: 40px 0 16px 240px;
	}
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.sec_category .sec_category_hd{
    	width: 70%;
		margin: 0 auto;
	}
}

.category-list {
	align-items: stretch !important;
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.category-list {
		width: 100%;
		margin: 0 auto;
	}
}
.category-list li{
	position: relative;
    width: 48%;
    box-sizing: border-box;
    margin-bottom: 16px;
    border: 2px solid var(--first-color);
	border-radius: 48px;
	box-shadow: var(--box-shadow_button);
}
.category-list li::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 59%;
    left: 10px;
    width: 1.5em;
    height: 1.5em;
    margin-top: -5px;
    background: url("../images/arrow02.svg") 0 0 /100% no-repeat;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.category-list li:hover::after{
/*
	border-left: 0.4em solid var(--first-color);
*/
}
.category-list li a{
	position: relative;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
	display: block;
	padding: 13px 8px 11px 48px;
	color: var(--text-color);
	font-weight: bold;
	font-size: 0.95em;
}
.category-list li a:hover{
	color: var(--second-color);
}

/*画面サイズ369px以下(mobile)*/
@media print, screen and (max-width:369px) {
	.category-list li a{
	    font-size: 0.85em;
    	padding-left: 40px;
	}
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.category-list{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.category-list li{width: 24%;}
}

/* サイトマップ内での表示時 */
/*
.sps > .sec_category{padding: 0;}
.sps > .sec_category > h2 { text-align: center;}
*/
/*===================================================
	身元保証が必要な人は？エリア
===================================================*/
.sec_need .need-list{
	justify-content: center;
	margin-bottom: 24px;
}
.sec_need .need-list li {
	margin: 0 4px 16px;
    width: 47%;
}
.sec_need .need-disc{
	flex-wrap: nowrap;
	align-items: flex-start;
}
.sec_need .need-disc img{
	width: 25%;
	margin-left: 16px;
}
.sec_need .need-balloon{
	position: relative;
	padding: 16px;
	background: #eee;
	border-radius: 8px;
	font-size: 0.8em;
}
.sec_need .need-balloon::before{
	left: 100%;
	top: 15%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(238, 238, 238, 0);
	border-left-color: #eee;
	border-width: 10px;
	margin-top: -10px;
}
/*画面サイズ960px以上(PC)*/
@media print, screen and (min-width:960px) {
	.sec_need .need-list li {
		width: 32%;
	}
	.sec_need .need-disc{
		width: 76%;
    	margin: 0 auto;
	}
	.sec_need .need-balloon{
		font-size: 1.0em;
		padding: 24px;
	}
	.sec_need .need-balloon::before{
		top: 30%;
	}
}
/*===================================================
	事例紹介エリア
===================================================*/
.sec_jirei .jirei-list {
    flex-wrap: wrap;
    max-width: 960px;
	max-width: var(--max-width_PC);
    margin: 0 auto;
	align-items: normal;
	counter-reset: number 0; 
}
.sec_jirei .jirei-list li {
    text-align: center;
    display: flex;
	justify-content: center;
    width: 48%;
    margin: 0 0 16px;
}
.sec_jirei .jirei-list .jirei-card {
	position: relative;
    background: #ffffff;
    box-shadow: var(--box-shadow_button);
    border-radius: 16px;
}
.sec_jirei .jirei-list .jirei-card:hover {
    background-color: var(--second-color_quarter);
}
.sec_jirei .jirei-list .jirei-card::before {
    counter-increment: number;
    content: counter(number,decimal-leading-zero);
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    font-size: 2rem;
	color: #777777;
	color: var(--second-color);
}
.sec_jirei .jirei-list .jirei-card_blank {
	background: url(../images/jirei-card_blank.png) center center no-repeat;
}
.sec_jirei .jirei-list li a {
	display: block;
	padding: 64px 16px 16px;
	font-size: .8rem;
    line-height: 1.2;
}
/*画面サイズ640px以上（Tab)*/
@media print, screen and (min-width: 640px){
	.sec_jirei .jirei-list li {width: 32%;}
	.sec_jirei .jirei-list li a {font-size: 1rem;}
}

/*===================================================
	新着情報エリア
===================================================*/
.sec_news .news-list {
    margin: 0 auto;
    padding: 16px;
	max-width: 608px;
    max-width: var(--width_main);
	box-sizing: border-box;
    list-style: none;
	background:#fff;
}
.sec_news .news-list li:not(:last-child) {
    margin-bottom: 8px;
    border-bottom: 1px dashed #dddddd;	
}
.sec_news .news-list li a {
	display:block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-size: 14.4px;
	line-height: 1.4;
}
.sec_news .news-list li a:hover {
    background: var(--fourth-color_quarter);
}
.sec_news .news-list li .news-date {
	padding: 4px 8px;
    margin-right: 16px;
    white-space: nowrap;
}
.sec_news .news-list li .news-tit {
	padding: 4px 0px;
}

/*===================================================
	セクション説明
===================================================*/
.sec-disc {
    margin-bottom: 16px !important;
	line-height: 1.2;
}
/*画面サイズ960px以上（PC)*/
@media print, screen and (min-width: 960px){
	.sec-disc {
		width: 60%;
		margin: 0 auto;
	}
}