/*
Theme Name: 1osMC
Theme URI: https://web.1os.co.jp/
Author: One OS inc.
Author URI: https://1os.co.jp/
Description: このテーマは株式会社ワンオーエス(サービス名：クオリティWebデザイン)によって作成されました。高品質でカスタマイズ可能なデザインを提供し、ユーザーに素晴らしいエクスペリエンスをもたらします。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 1os_mc
Tags: レスポンシブ, マルチ, 1カラム, 2カラム, 翻訳対応
*/

/**********  カスタマイズCSS **********/

.min_width-05{
	min-width:5em;
}
#header_wrapper::before,
#header_wrapper::after{
	transition:background .4s;
}
.nav_open #header_wrapper::before,
.nav_open #header_wrapper::after{
	background:rgba(255,255,255,0.9)
}
#header_title_logo{
	max-width:192px;
	transition:max-width .6s;
}

#mainview_wrap {
	background:#eee;
}

#breadcrumb_wrapper{
	border-bottom:1px solid #ccc;
}

#footer_bottom{
	background:#eee;
}

#meinview_text{
	z-index:3;
}
@media (max-width: 399px) {

	#meinview_text{
		font-size:.9em;
	}

}

#typo_main_view-01{
	z-index:1;
	bottom:32px;
	right:0;
	transform:rotate(-8deg);
	width:64%;
}

@media (min-width: 768px) {

	#typo_main_view-01{
		width:40%;
		right:20px;
	}

}
@media (min-width: 1024px) {

	#header_title_logo{
		max-width:256px;
	}

	.scroll #header_title_logo{
		max-width:220px;
	}
	#header_contents_wrapper.pos-lg-abs{
		font-size:1em;
		transition:font-size .4s ease;
	}
	.scroll #header_contents_wrapper.pos-lg-abs{
		font-size:.9em;
	}
	#typo_main_view-01{
		z-index:2;
		bottom:auto;
		right:auto;
		top:11vw;
		left:0;
		transform:rotate(-8deg);
		width:26%;
		opacity:.8
	}
	#typo_main_view-02{
		z-index:2;
		top:50%;
		right:0;
		transform:rotate(-8deg) translateY(-50%);
		width:20%;
	}
}
@media (min-width: 1460px) {

	#typo_main_view-02{
	}

}

/** グローバルナビゲーション **/

#global_nav .menu_span{
	font-weight:400;
	font-size:.9em;
}
#global_nav .menu_span::before{
	content:'-';
	margin:0 .5em;
}

@media (min-width: 1024px) {

	#global_nav_wrapper{
		margin-top:2.6em!important;
	}
	#global_nav .menu_span{
		font-size:.7em;
		margin-top:.2em;
	}
	#global_nav .menu_span::after{
		content:'-';
		margin:0 .5em;
	}

}

@media (min-width: 1440px) {

	#mainview_wrap .slide_caption_inner{
		padding:0!important;
	}

}

/* ========================================
	SECTION
======================================== */

.section_flow{
	--section-main:#009fe8;
	--section-text:#34454f;
	--section-text-sub:#667982;
	overflow:hidden;
	color:var(--section-text);
}

.section_header{
	max-width:800px;
	margin-right:auto!important;
	margin-left:auto!important;
}

.section_en{
	color:var(--section-main);
	letter-spacing:.24em;
}

.section_lead{
	color:var(--section-text-sub);
	letter-spacing:.04em;
}


/* ========================================
	FEATURE
======================================== */

.feature_text{
	min-width:0;
}

.feature_number{
	margin:0 0 -.08em!important;
	color:rgba(0,159,232,.12);
	font-size:5.2em;
	font-weight:700;
	line-height:.8;
	letter-spacing:.05em;
}

.feature_label{
	display:flex;
	align-items:center;
	gap:1em;
	color:var(--section-main);
	letter-spacing:.08em;
}

.feature_label:before{
	content:"";
	display:block;
	flex:0 0 auto;
	width:32px;
	height:1px;
	background:currentColor;
}

.feature_body{
	color:var(--section-text-sub);
	letter-spacing:.02em;
}

.feature_body p{
	margin:0;
}

.feature_body p+p{
	margin-top:1em;
}


/* ========================================
	FEATURE IMAGE
======================================== */

.feature_image{
	min-width:0;
	aspect-ratio:4 / 3;
	border-radius:40px 0 40px 0;
	box-shadow:0 0 16px rgba(0,159,232,.18);
}

.feature_image img{
	height:100%;
	object-fit:cover;
}

.feature_image-reverse{
	border-radius:0 40px 0 40px;
}


/* ========================================
	768px～
======================================== */

@media(min-width:768px){

	.section_title{
		letter-spacing:.05em;
	}

	.feature_number{
		font-size:7em;
	}

	.feature_title{
		letter-spacing:.04em;
	}

}


/* ========================================
	1024px～
======================================== */

@media(min-width:1024px){

	.feature_number{
		font-size:8em;
	}

}

/* ========================================
	SECTION WAVE
======================================== */

.section_wave{
	position:relative;
	margin-top:24px;
	margin-bottom:24px;
	overflow:visible;
}

.section_wave:before,
.section_wave:after{
	content:"";
	position:absolute;
	left:0;
	width:100%;
	height:24px;
	background:inherit;
	z-index:0;
}

.section_wave:before{
	top:-23px;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C20 16 20 6 40 6 C60 6 60 16 80 16 C100 16 100 6 120 6 C140 6 140 16 160 16 V24 H0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom / 220px 24px;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C20 16 20 6 40 6 C60 6 60 16 80 16 C100 16 100 6 120 6 C140 6 140 16 160 16 V24 H0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom / 220px 24px;
}

.section_wave:after{
	bottom:-23px;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H160 V8 C140 8 140 18 120 18 C100 18 100 8 80 8 C60 8 60 18 40 18 C20 18 20 8 0 8 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top / 220px 24px;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H160 V8 C140 8 140 18 120 18 C100 18 100 8 80 8 C60 8 60 18 40 18 C20 18 20 8 0 8 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top / 220px 24px;
}

.section_wave>*{
	position:relative;
	z-index:1;
}

/* ========================================
	TREATMENT
======================================== */

.treatment_list{
	max-width:1024px;
}

.treatment_item{
	min-width:0;
}

.treatment_icon{
	width:60%;
}

.treatment_icon img{
	opacity:.7;
	transition:transform .3s ease, opacity.3s ease;
}

.treatment_info{
	min-width:0;
}

.treatment_number{
	color:rgba(0,159,232,.45);
	letter-spacing:.1em;
}

.treatment_title{
	letter-spacing:.02em;
	transition:color .3s ease;
}

.treatment_catch{
	color:var(--section-main);
	letter-spacing:.03em;
}

.treatment_more{
	position:static;
	gap:.6em;
	color:var(--section-main);
	font-size:.7em;
	font-weight:600;
	line-height:1;
	letter-spacing:.08em;
}

.treatment_more:before{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
}

.treatment_more:after{
	content:"";
	display:block;
	width:28px;
	height:1px;
	background:currentColor;
	transition:width .3s ease;
}

@media(hover:hover){

	.treatment_item:hover .treatment_icon img{
		opacity:.9;
		transform:translateY(-3px);
	}

	.treatment_item:hover .treatment_title{
		color:var(--section-main);
	}

	.treatment_item:hover .treatment_more:after{
		width:40px;
	}

}

@media(min-width:768px){

	.treatment_icon{
		width:70%;
	}

}
@media(min-width:1024px){

	.treatment_icon{
		width:40%;
	}

}