@charset "UTF-8";
/*
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 **********/

.title_h2{
	font-size:1.8em;
	text-align:center;
	line-height:1.2;
}
.title_h3{
	font-size:1.4em;
	text-align:center;
	line-height:1.2;
}
.title_h4{
	font-size:1.2em;
	text-align:center;
	line-height:1.2;
}
.title_h2.eng_title{
    padding-top: 1.2em;
    position: relative;
}
.title_h2.eng_title::before {
	content: attr(data-en);
    position: absolute;
	display:block;
    top: 0;
	left: 50%;
	transform: translateX(-50%);
    font-size: 1em;
    z-index: -1;
	opacity:.8
}
.title_h2.no_title{
	text-align:left;
	padding-top:1.4em;
}
.title_h3_no{
	margin-top:-.2em;
}
.title_no{
	display:flex;
	align-items:center;
	margin-top:-.2em;
	margin-right: .4em;
	font-size: 1.4em;
	height:1.2em;
	width:1.8em;
	padding-top:.1em;
	padding-right:.2em;
	font-weight: 700;
	line-height: 1;
	border-radius: .2em .4em .4em .2em;
	flex-shrink: 0;
}
.scroll #global_nav_wrapper,
#global_nav_wrapper{
	padding:calc(50px + 1em) 1em 1em;
}

.menu_text{
	display:flex;
	flex-direction:row!important;
	align-items:center;
}
.menu_sub{
	font-weight:400;
	font-size:.9em;
}
.menu_sub::before{
	content:'-';
	margin:0 .4em;
}


.design_box-01 {
	/* 欠けサイズ */
	--cut: 32px;

	clip-path: polygon(
		var(--cut) 0,         /* 左上カット */
		100% 0,
		100% calc(100% - var(--cut)), /* 右下カット */
		calc(100% - var(--cut)) 100%,
		0 100%,
		0 var(--cut)
	);
}

/* カード */
.design_box-02 {
	position: relative;
	padding: 1.4em;
	border-radius: 0 4px 4px 0;
	background: #ffffff;
	border: 1px solid #e5eef5;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* ほんのりアクセントライン */
.design_box-02::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, rgb(242,230,208), rgb(214,169,66));
}
.design_box-02 figure{
	margin:0;
}

/* テキスト */
.design_box-02 p {
	margin: 0!important;
}

hr.gold_bar {
	border: 0;
	height: 2px;
	background: linear-gradient(
		to right,
		transparent,
		#caa64b 25%,
		#f7e08a 50%,
		#caa64b 75%,
		transparent
	);
	box-shadow: 0 0 6px rgba(212, 175, 55, 0.35);
	margin: 2rem 0;
}
#page_title_wrapper::before,
#page_title_wrapper::after,
#mainview_wrap::before,
#mainview_wrap::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 6px;
	z-index: 5;
	background:
		linear-gradient(
			90deg,
			#8a6a1a 0%,
			#c9a94a 20%,
			#f5e6a8 50%,
			#c9a94a 80%,
			#8a6a1a 100%
		);
}
#page_title_wrapper::before,
#mainview_wrap::before {
	top: 0;
}
#page_title_wrapper::after,
#mainview_wrap::after {
	bottom: 0;
}
.more_link{
	min-width:12em;
	background:rgba(255,255,255, .8);
	border:1px solid #aaa;
	color:#111;
	padding:.8em 1.2em;
	text-align:center;
}
.more_link:hover{
	padding:.8em 1.2em;
}

.concept_no,
.concept_no_btm{
	width: 2em;
	height: 2em;
	padding-right:.1em;
	/* 横向きホームベース */
	clip-path: polygon(
		0% 20%,
		70% 0%,
		100% 50%,
		70% 100%,
		0% 80%
	);
}
.concept_no{
	left:0;
	top: 0;
}
.concept_no_btm{
	right:0;
	bottom: 0;
}

/* =========================
   治療の流れ
========================= */

.treatment-flow {
	background: linear-gradient(180deg, #fffefc 0%, #ffffff 100%);
}

/* =========================
   リスト
========================= */

.flow_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flow_item {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding-bottom: .4em;
}

/* 縦ライン */
.flow_item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 48px;
	left: 18px;
	width: 2px;
	height: calc(100% - 24px);
	background: rgb(242,230,208);
}

/* =========================
   番号
========================= */

.flow_num {
	position: relative;
	z-index: 1;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 38px;
	text-align: center;
	box-shadow: 0 4px 10px rgba(47, 128, 195, 0.2);
}

/* =========================
   コンテンツ
========================= */

.flow_content {
	flex: 1;
	background: #fff;
	border: 1px solid rgb(242,230,208);
	border-radius: 4px;
	padding: 16px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.flow_content h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1f2d3d;
}

.flow_content h3::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 1em;
	margin-right: 8px;
	border-radius: .4em;
	background: rgb(214,169,66);
	vertical-align: -0.1em;
}

.flow_content p,
.flow_content li {
	font-size: 0.95rem;
	line-height: 1.8;
	color: #444;
}

.flow_content p:last-child {
	margin-bottom: 0;
}

.flow_content ul {
	margin: .8em 0 0;
	padding-left: 1.4em;
}


/* =========================
   タブレット以上
========================= */

@media screen and (min-width: 768px) {

	.flow_num {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		font-size: 1.1rem;
		line-height: 46px;
	}

}

/* =========================
   PC
========================= */

@media screen and (min-width: 1024px) {

	.flow_num {
		flex: 0 0 48px;
		width: 48px;
		height: 48px;
		font-size: 1.2rem;
		line-height: 48px;
	}

	.flow_content {
		padding: .8em;
	}

}

/* カード */
.merit_item {
	padding: .8em;
	background: #fff;
	border-radius: .4em;
	border: 1px solid #e5eef5;
	box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

/* タイトル */
.merit_ttl {
	margin: 0 0 8px;
	font-size: 1.05em;
	font-weight: 700;
	color: #444;
	position: relative;
	padding-left: 1.6em;
}

/* チェック風アイコン */
.merit_ttl::before {
	content: "✓";
	font-size:1.8em;
	position: absolute;
	left: 0;
	top: -.4em;
	color: #dd9933;
	font-weight: 700;
}


.footer_nav .menu-item{
	padding:0 .4em;
}
.footer_nav > .menu-item{
	width:100%;
}
.footer_nav a{
	display:flex;
	padding:.4em;
}
.footer_nav a::before{
	margin:.2em .2em 0 0;
}
.footer_nav .sub-menu a::before{
	width: .8em;
	height: .8em;
	margin:.3em .2em 0 0;
}

.footer_nav > .menu-item > a{
	border-bottom:1px solid #fff;
}
.footer_nav .sub-menu a{
	border-bottom:1px dotted #fff;
}
.footer_nav .sub-menu{
	display:flex;
	flex-wrap:wrap
}
.footer_nav .sub-menu .menu-item{
	width:50%;
}

.fixed_footer_link{
	height:64px;
}
#fixed_footer_wrapper li:first-child{
	border-right:1px solid #fff;
}

@media (min-width: 768px) {

	.grid_wrap-2_1{
		grid-template-columns: 1fr;
	}
	.grid_wrap-2_1 .item1 {
		grid-column: 1;
		grid-row: 1;
	}

	.grid_wrap-2_1 .item2 {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.grid_wrap-2_1 .item3 {
		grid-column: 1;
		grid-row: 2;
	}

}

@media (min-width: 1024px) {

	.scroll #global_nav_wrapper,
	#global_nav_wrapper{
		padding:0;
	}
	#global_nav .sub-menu.depth-1{
		width:192px!important;
		left: 50%!important;
		transform: translateX(-50%);
	}
	#global_nav #menu-item-110 .sub-menu.depth-1,
	#global_nav #menu-item-32 .sub-menu.depth-1{
		width:320px!important;
		display:flex;
		flex-direction:row!important;
		flex-wrap:wrap;
		left: 50%!important;
		transform: translateX(-50%);
	}
	#global_nav #menu-item-110 .sub-menu.depth-1 .menu-item,
	#global_nav #menu-item-32 .sub-menu.depth-1 .menu-item{
		width:50%!important;
	}
	#global_nav #menu-item-110 .sub-menu.depth-1 .menu-item:nth-child(even),
	#global_nav #menu-item-32 .sub-menu.depth-1 .menu-item:nth-child(even) {
		border-left:1px solid #eaeaea
	}

	#global_nav .menu_text{
		flex-direction:column!important;
		align-items:center;
	}
	.menu_sub{
		font-size:1em;
	}
	.menu_sub::before{
		content:'';
		margin:0;
	}

	.more_link:hover{
		background:#444;
		border:1px solid #222;
		color:#fff;
	}

	.footer_nav > .menu-item > a,
	.footer_nav .sub-menu a{
		border:none;
	}
	.footer_nav .sub-menu a{
		font-size:.9em;
	}

	#fixed_footer_area{
		width:256px;
		left:auto;
		right:12px;
		bottom:18px;
		transition:bottom .4s ease;
	}
	.scroll #fixed_footer_area{
		bottom:12px;
	}

	.fixed_footer_link{
		height:48px;
	}

	#fixed_footer_wrapper{
		border:1px solid #fff;
	}

	#fixed_footer_wrapper li:first-child{
		border-right:none;
		border-bottom:1px solid #fff;
	}

}