@charset "utf-8";

/* =============================================================================
   Each Page Settings
   ========================================================================== */
   

/* **************************************************** 
	TopPage / SubPage  Common
*/ 

#main-visual {
	position:relative;
	top:0; right:0; left:0;
	width:100%; 
	height:clamp(40vh,475px,90vh);
	z-index:0;
	overflow:hidden;
}

.swiper-slide {display:inline-block; height:100% !important; margin:0; text-align:center;}
.swiper-slide img { width:100%; margin:0 auto;} 
.swiper-button-prev, .swiper-button-next {opacity:1; transition:all 0.3s linear 0s;}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {opacity:0 !important; transition:all 0.3s linear 0s;}
.swiper-pagination {display:block; width:100%; text-align: center; padding:1.5rem 0 1.5rem; z-index:10;}
.swiper-pagination-bullet {
	display: inline-block;
	width:32px !important; height:6px !important;
	border-radius:0 !important;
	margin: 0 4px;
	background-color: #000;
	cursor: pointer;
	transition: all .25s linear;
}
.swiper-pagination-bullet-active {background-color:var(--acc-color);}
.swiper-slide > a {display:block; text-align:left;}
.swiper-container {position:relative; pointer-events:none;}




/* **************************************************** 
	TopPage
*/ 

.toppage h1 {margin:0;}
.toppage h2 {color:var(--acc-color); margin-top:0; padding-top:0;}
.toppage h2 span.jp-sub {display:inline-block; font-size:1rem; transform:translateY(-1rem);}
.toppage .btn-accent.btn-bar {width:min(90%,520px); height:60px; margin:0 auto; font-weight:500;}

@media(max-width:900px) {
	.toppage h2 {padding-left:1%; padding-right:1%;}
}
@media (max-width:480px) {
	.toppage h1 {font-size:1.7em;}
	.toppage h2 {line-height:1.25em; font-size:1.95em;}
	.toppage h2 span.jp-sub {transform:translateY(0);}
	.toppage h3 {font-size:1.4em;} 
	.toppage .btn-accent.btn-bar {line-height:2;}
}

.toppage .post-card-yoko dt > span {display:block;}
.toppage .post-card-yoko dt > span > span {display:inline-block;}


.toppage #main-visual {
	height:90vh;
	text-align:left;
}
.toppage #catch-copy-main {
	display:block;
	position:absolute; bottom:27.5%; left:0; 
	width:100%;
	max-width:min(100%,1500px);
	padding:0 2.5rem;
	text-align:left; 
	z-index:4; 
	font-family: CenturyGothic, 'Century Gothic', 'Lexend Deca', sans-serif, sans; 
	font-size:9rem; font-weight:bold;
	color:#fff; line-height:1; letter-spacing:0.125em;
	font-feature-settings:"palt";
	overflow:hidden;
}
.toppage #catch-copy-main span {
	display: inline-block;
	opacity: 0;
	transform: translate(65%, 7.5%) scale(1.75);
	transition: 0.4s ease-in-out;
}
.toppage #catch-copy-main span.reveal {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition: 0.4s ease-in-out;
}

@keyframes Moyatter {
	0% { opacity: 0; filter:blur(20px);}
	100% { opacity: 1; filter:blur(0px);}
}
.toppage #catch-copy-sub {
	display:block;
	position:absolute; bottom:12.5%; left:0; 
	width:min(90%,1000px);
	margin:0;
	padding:0 2.55rem;
	text-align:left; 
	z-index:4; 
	animation-fill-mode: both;
	animation-duration: 2.88s;
	animation-name: Moyatter;
	visibility: visible !important;
	animation-delay: 1.44s;	
}

@media (max-width:1440px) {
	.toppage #catch-copy-main {font-size:min(8.5rem,9.5vw);}
}
@media (max-width:1200px) {
	.toppage #catch-copy-main {font-size:min(8.25rem,9vw); letter-spacing:0.08em; line-height:1.15;}
}
@media (min-width:1077px) {
	.toppage #main-visual {height:clamp(600px,55vw,864px);} 
}
@media (max-width:1076px) {
	.toppage #main-visual {height:clamp(600px,55vw, 800px);}
}
@media (max-width:900px) {
	.toppage #catch-copy-main {font-size:min(8.9rem,9.9vw);}
}
@media (max-width:800px) {
	.toppage #main-visual {height:clamp(30vmax,600px,150vmin);} 
}
@media (max-width:683px) {
	.toppage #main-visual {height:clamp(600px,60vmax,200vmin);} 
	.toppage #catch-copy-main {bottom:16%; font-size:14vw;} /*14vw;*/
	.toppage #catch-copy-sub {bottom:7%;}
}
@media (max-width:480px) {
	.toppage #main-visual {height:clamp(390px,140vmin,70vmax);} 
	.toppage #catch-copy-main {padding-left:1.5rem; font-size:15vw;} /*14.75vw;*/
	.toppage #catch-copy-sub {padding-left:1.55rem; width:100%;}
}
@media (max-width:359px) {
	.toppage #main-visual {height:clamp(424px,140vmin,70vmax);} 
	.toppage #catch-copy-main {bottom:25%; padding-left:1rem; font-size:14.5vw;}
	.toppage #catch-copy-sub {padding-left:1.1rem; width:100%;}
}




#pickup {padding:6em 0; background:var(--bg-color-slight);}
#pickup .quad {padding:0.65rem;}
#pickup p.caption {margin:0; padding:1em 0.75em; font-size:0.9rem; color:var(--moji-color);}
.is-pc #pickup img {
	border-radius:var(--radius-bnr);
	transform:scale(1); transition:all 0.33s ease 0s;
}
.is-pc #pickup img:hover {
	transform:scale(1.025); transition:all 0.14s ease 0s; 
	filter:drop-shadow(0px 2px 9px rgba(0,0,0,0.195));
}
@media (min-width:901px) {
	#pickup .yes-slide {display:none;}
	#pickup .no-slide {display:block;}
}
@media (max-width:900px) {
	#pickup .yes-slide {display:block;}
	#pickup .no-slide {display:none;}
}



#onayami-navi {padding:0 0 10em; background:var(--bg-color-slight);}
.is-pc #onayami-navi img {
	border-radius:var(--radius-bnr);
	transform:scale(1); transition:all 0.33s ease 0s;
}
.is-pc #onayami-navi img:hover {
	transform:scale(1.025); transition:all 0.14s ease 0s; 
	filter:drop-shadow(0px 2px 9px rgba(0,0,0,0.125));
}
#onayami-navi h2 {margin-bottom:1.5rem; text-align:center;}
#onayami-navi h2 + p  {margin-bottom:2.5rem; text-align:center;}




#new-arrival, #pickup-2 {
	position:relative; padding:6em 0 6em;
	background:var(--bg-color-slight);
	background-position:-100% 0;
	transition:all 0.2s ease 0s;
}
:is(#new-arrival, #pickup-2) > .shut-l2r {
	position:absolute; top:0; left:0;
	width:100%; height:360px;
	padding:6em 0 0;
}
:is(#new-arrival, #pickup-2) .shutt-l2r + h2 {
	filter:brightness(0) invert(1);
	transition:all 0s ease 0.3s;
}

@keyframes Shutter-LtoR {
	0% { opacity: 0; transform: translateX(-100%); }
	100% { opacity: 1; transform: translateY(0); }
}
.shutt-l2r {
	background:var(--acc-color);
	animation-fill-mode: both;
	animation-duration: 0.44s;
	animation-name: Shutter-LtoR;
	visibility: visible !important;
	animation-delay: 0.28s;	
}
:is(#new-arrival, #pickup-2) .inner {position:relative;}

:is(#new-arrival, #pickup-2) .btn-wrapper {margin-top:2.5rem;}

:is(#new-arrival, #pickup-2) .post-card-wrapper {padding:0.85em 8px;}

:is(#new-arrival, #pickup-2) .post-card dt span.heading {
	display:block; margin:0; padding:0.5rem 0;
	font-size:1.15rem; font-weight:700; line-height:1.5; 
	text-align:center;
}
:is(#new-arrival, #pickup-2) .post-card dt span.caption {
	display:block; margin:0; padding:0.5rem 0;
	font-size:0.9rem; font-weight:400; line-height:1.5; 
	text-align:center;
}
.is-pc :is(#new-arrival, #pickup-2) a:not(:hover) .post-card dt span.caption {
	color:#7a7a7a;
}



@media (min-width:769px) {
	:is(#new-arrival, #pickup-2) .post-card dl {margin:0 1.5%;}
}
	

@media (max-width:768px) {
	
	:is(#new-arrival, #pickup-2) :is(.trio,.quarter) {width:100% !important;}

	:is(#new-arrival, #pickup-2) .post-card-wrapper {padding:0; text-align:center;}
	:is(#new-arrival, #pickup-2) .post-card-wrapper a {
		display:inline-block; 
		width:min(98%,550px);
		color:var(--link-color);
	}

	:is(#new-arrival, #pickup-2) .post-card {padding:0.75rem 0;}

	:is(#new-arrival, #pickup-2) .post-card dl {
		display:flex; align-items:center;
		width:100%; height:150px;
		min-height:5rem;
		position:relative;
		margin-inline:auto;
		padding:0;
		background:#fff;
		text-align:left;
		border-radius:var(--radius-bnr);
		overflow:hidden;
		box-shadow:none; transition:all 0.18s linear 0s; 
	} 
	.is-pc :is(#new-arrival, #pickup-2) a:hover .post-card dl {
		transform:scale(1); transition:all 0s; 
		box-shadow:none; color:var(--acc-color) !important; 
	}

	:is(#new-arrival, #pickup-2) .post-card dt,
	:is(#new-arrival, #pickup-2) .post-card dd {margin:0; padding:0;}

	:is(#new-arrival, #pickup-2) .post-card dd.eyecatch {width:33%; height:100%; border:none;} 
	:is(#new-arrival, #pickup-2) .post-card dd.eyecatch img {
		aspect-ratio:4 / 3;
		width:100%; height:100%; margin:0;
		object-fit:contain; /*cover;*/
		object-position:50% 50%;
	}
	:is(#new-arrival, #pickup-2) .post-card dt {
		position:relative; 
		width:calc(100% - 7.75em); 
		vertical-align:middle;
		padding:0.5em 2.5em 0.5em 1.5em;
		background:transparent;
		border:none; 
	} 
	:is(#new-arrival, #pickup-2) .post-card dt span.heading {
		display:block; margin:0; padding:0.5rem 0;
		font-size:1.15em; font-weight:700; line-height:1.5; 
		text-align:left;
	}
	:is(#new-arrival, #pickup-2) .post-card dt span.caption {
		display:block; margin:0; padding:0.5rem 0;
		font-size:0.9em; font-weight:400; line-height:1.5; 
		text-align:left;
	}
	:is(#new-arrival, #pickup-2) .post-card dt span.heading span {display:inline-block;}
	
	:is(#new-arrival, #pickup-2) .post-card.external dt::after {
		display:block; content:""; 
		position:absolute; top:0; right:1em; bottom:0;
		width:1em; height:100%;
		background:url(./img/navi/icons/external.svg) no-repeat center center;
		background-size:13px auto;
	} 
	:is(#new-arrival, #pickup-2) .post-card.internal dt::after {
		display:block; content:""; 
		position:absolute; top:50%; right:1em;
		width:8px; height:8px;
		margin-top:-4px;
		border-top:1px solid var(--acc-color); border-right:1px solid var(--acc-color);
		transform:rotate(45deg);
	} 

}

@media (max-width:480px) {
	:is(#new-arrival, #pickup-2) .post-card dl {width:98%; height:120px;}
	:is(#new-arrival, #pickup-2) .post-card dd.eyecatch {width:35%; height:11em;}
	:is(#new-arrival, #pickup-2) .post-card dt {width:65%; padding:0 2em 0 1em; line-height:1.35;}
}




#blog-advice {padding:5em 0 7em; background:var(--base-color);}
#blog-advice p.caption {margin-top:0.5em; text-align:center; font-size:90%; font-weight:400;}
#blog-advice .duo {max-width:540px; margin-inline:auto;}
#blog-advice .duo h2 {margin-top:1em;}
#blog-advice img {
	margin:0.5em auto 1em;
	border-radius:var(--radius-bnr);
	transform:scale(1); transition:all 0.33s ease 0s;
}
#blog-advice dl {margin:0.5em 0 0;}
#blog-advice dl dd {padding-bottom:0; font-size:0.85rem; color:#7a7a7a; text-align:left;}
#blog-advice dl dt {padding-top:0; line-height:1.25; text-align:left;}
@media (hover: hover) {
	#blog-advice img:hover {
		transform:scale(1.025); transition:all 0.14s ease 0s; 
		box-shadow:0 2px 10px rgba(0,0,0,0.375);
	}	
}
@media (max-width:768px) {
	#blog-advice .duo {text-align:center;}
	#blog-advice .duo:first-child h2 {margin-top:1em;}
	#blog-advice .duo:last-child h2 {margin-top:2.25em;}
	#blog-advice img {width:min(98%,550px); margin-inline:auto;}
}





#recent-info {padding:6em 0 0; background:var(--base-color);}
#recent-info .duo {max-width:540px; margin-inline:auto;}
#recent-info :is(.heading, .co-footer) {padding:0.75em 0.125em 0.25em;}
#recent-info a.readmore {
	position:relative; display:block; 
	padding-right:1.25em;
	color:var(--moji-color);
	font-weight:400;
}
#recent-info a.readmore::after {
	display:block; content:""; 
	position:absolute; top:50%; right:0.25em;
	width:8px; height:8px;
	margin-top:-4px;
	border-top:1px solid var(--acc-color); border-right:1px solid var(--acc-color);
	transform:rotate(45deg);
}
@media (hover: hover) {
	#recent-info a.readmore:hover {color:var(--link-color);}
}
#recent-info .duo {}
#recent-info .duo dl {
	margin:0;
	border-bottom:1px solid #ccc;
}
#recent-info .duo .heading + dl {
	border-top:1px solid #ccc;
}
#recent-info .duo dd.post-date {
	padding:0.5rem 0.5rem 0 0;
	color:#7a7a7a; font-size:0.85rem;
}
#recent-info .duo dt {
	position:relative;
	padding:0.125rem 0.5rem 1rem 1.5rem;
	line-height:1.35;
	height:3.75em; 
	overflow:hidden;
}
#recent-info .duo dt::before {
	display:block; content:""; 
	position:absolute; top:0.625em; left:0rem;
	width:8px; height:8px;
	border-top:1px solid var(--acc-color); border-right:1px solid var(--acc-color);
	transform:rotate(45deg);
}
#recent-info .duo dt a {color:var(--moji-color);}
@media (hover: hover) {
	#recent-info .duo dt a:hover {color:var(--link-color);}
}
@media (max-width:768px) {
	#recent-info .duo dl {width:min(98%,600px); margin-inline:auto;}
	#recent-info .duo dt {height:auto;}
}
@media (min-width: 1367px) {
	:root #blog-advice,
	:root #movie-info,
	:root #recent-info {--flex-gap: 2.5rem; }
}
@media (max-width: 1366px) {
	:root #blog-advice, 	
	:root #movie-info,
	:root #recent-info {--flex-gap: 2rem; }
}




#sales-info {padding:5em 0; background:var(--bg-color-slight);}
#sales-info h2 {text-align:center; padding-bottom:1rem;}
#sales-info .post-card-yoko-wrapper {margin:2em auto; text-align:center;}
#sales-info .post-card-yoko-wrapper a { width:min(98%,540px);}
#sales-info .post-card-yoko dd.eyecatch {width:7.75em; height:6.25em;} 
@media (min-width:769px) {	
	#sales-info .post-card-yoko-wrapper a {margin:0;}
}
@media (max-width:768px) {
	#sales-info {padding:4em 0 6em;}
	#sales-info .post-card-yoko-wrapper {text-align:center;}
	#sales-info .post-card-yoko-wrapper a {margin-inline:auto;}
}




#movie-info {padding:6.5em 0; background:var(--base-color);}
#movie-info .container {max-width:calc(433px + 433px + var(--flex-gap));}
.vWrap {
	overflow:hidden;
}
.vWrap iframe {
	aspect-ratio:16 / 9;
	width:100%; height:auto; 
	border-radius:var(--radius-bnr);
}

@media only screen and (max-width: 768px) {
	.vWrap{
		position: relative;
		margin: 0.5em 0 1.2em;
		padding:69px 0 50%;
		overflow: hidden;
	}
	.vWrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}




#external-links {padding:0em 0 6em;}
#external-links h2 {text-align:center;}
ul.text-links-horizontal {padding:0;}
#external-links ul.text-links-horizontal {margin-top:1.5em; text-align:center;}
ul.text-links-horizontal li {
	display:inline-block; position:relative; 
	margin:0 3em 0 0;
	padding-left:1.25em;
}
ul.text-links-horizontal li:last-child {margin-right:0;}
ul.text-links-horizontal li a {color:var(--moji-color);}
ul.text-links-horizontal li a:hover {color:var(--link-color);}
ul.text-links-horizontal li::before {
	display:block; content:""; 
	position:absolute; top:0.525em; left:0rem;
	width:8px; height:8px;
	border-top:1px solid var(--acc-color); border-right:1px solid var(--acc-color);
	transform:rotate(45deg);
}
@media (max-width:899px) {
	#external-links ul.text-links-horizontal {text-align:left;}
	ul.text-links-horizontal li {
		margin:0em 3em 1.25em 0;
	}
}





#call-to-action {
	padding:4em 0 5em;
	background:var(--bg-color-slight);
}
.toppage #call-to-action {padding:5em 0 6em;}

.page-feature-product #call-to-action,
.not-found #call-to-action,
.search-result.site--advice #call-to-action,
.search-result.site--news #call-to-action,
.search-result.site--blog #call-to-action {padding:3em 0 5em; position:relative;}

.page-feature-product #call-to-action::before,
.not-found #call-to-action::before,
.search-result.site--advice #call-to-action::before,
.search-result.site--news #call-to-action::before,
.search-result.site--blog #call-to-action::before {
	position:absolute; top:0; right:0; left:0;
	content:""; margin:auto;
	width:min(90%,1190px); height:1px;
	border-top:1px solid rgba(0,0,0,0.125);
}


#call-to-action h2 {
	margin:0; padding:0 0 0.25em; 
	text-align:center; color:var(--acc-color); 
	font-size:225%; font-weight:500;
}
.not-found #call-to-action h2 {
	font-size:155%; font-weight:700;
}

#call-to-action p {margin:0 0 2.5em; text-align:center;}
#call-to-action h2 + p {margin:1em 0 2.5em;}
#call-to-action .duo {
	padding:0.5em 1em;
	text-align:center;
	background:var(--base-color);
	border-radius:var(--radius-bnr);
}
#call-to-action h3 {
	position:relative;
	margin:0.75rem auto 2rem;
	font-size:1.3rem; font-weight:700;
	color:var(--acc-color);
}
#call-to-action h3::after {
	position:absolute; 
	right:0; bottom:-0.9rem; left:0;
	content:""; 
	width:2em; height:1px;
	margin:auto;
	border-bottom:1px solid var(--acc-color);
}
#call-to-action .by-tel .icon {
	margin-right:0.5rem;
	width:auto; height:1.45em;
}
#call-to-action .by-mail .icon {
	margin-right:0.5rem;
	width:auto; height:1.25em; 
	transform:translateY(-1px);
}
#call-to-action .tel-number  {
	display:inline-block;
	font-size:2rem; font-weight:700;
	vertical-align:-20%;
	margin-left:0.75rem;
	color:var(--acc-color);
}
#call-to-action .duo p {
	margin:1rem 0;
	text-align:center;
}
#call-to-action .btn-accent {
	margin:0 auto 1em;
	width:clamp(240px,80%,300px);
}

@media (max-width:899px) {
	#call-to-action .duo.by-tel {margin-bottom:1em;}	
}





/* **************************************************** 
	SubPage Common
*/ 


.subpage #main-visual {
	height:clamp(450px,50vh,550px);
	text-align:center;
	background:var(--bg-color-slight);
}
.subpage #main-visual h1 {
	position:absolute;
	right:0; left:0;
	top:calc(50% + 2.55rem);
	margin:0;
}
.subpage:not(.front-page) #main-visual.type-photo::after {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	content:""; width:100%; height:100%;
	background:rgba(0,0,0,0.35);
	z-index:7;
}
.subpage #main-visual.type-photo h1 {
	color:var(--base-color);
	z-index:8;
}
.subpage #main-visual.type-illust h1 {
	color:var(--acc-color);
}

@media (max-width:1169px) {
	.subpage #main-visual {
		height:max(40vh,400px);
	}
	.subpage #main-visual h1 {
		top:calc(50% + 32px);
		transform:translateY(-50%);
		margin:auto;
	}
}
@media (max-width:480px) {
	.subpage h1 {font-size:1.8em;}
	.subpage h2 {line-height:1.25em; font-size:1.6em;}
	.subpage h3 {font-size:1.4em;}
	.subpage h1, h2, h3 { font-feature-settings:"palt";}
	.subpage #main-visual {
		height:max(40vh,340px);
	}
	.subpage #main-visual h1 {
		top:calc(50% + 29px);
		font-size:1.5rem;
	}
}

.subpage h2 {color:var(--acc-color); margin-top:1em; padding-top:0; font-size:175%; font-weight:700;}
.subpage h2 span.primary {font-size:120%; font-weight:700; /*text-shadow:1px 1px 1px var(--acc-color);*/}
.subpage h2 span.secondary {font-size:1.2rem; font-weight:500; color:var(--moji-color);}	
.subpage .beside-heading {width:auto; height:3.5em; margin:0 1.5em;}
.subpage .beside-heading.large {height:7em; margin:0 2em;}

.subpage .branches {
	padding:var(--section-padding-narrow) 0;
}
.subpage .branches .inner {
	background:var(--base-color);
	border-radius:var(--radius-bnr);
}


@media (min-width:1170px) {
	
	.subpage.onayami-navi_child .branches,
	.subpage.onayami-navi_grandchild .branches {
		padding-top:calc(var(--section-padding-narrow) + 0.5em);
	}

	.subpage.onayami-navi_child .branches .inner,
	.subpage.onayami-navi_grandchild .branches .inner {
		position:relative;
	}
	.subpage.onayami-navi_child .branches .inner::before,
	.subpage.onayami-navi_grandchild .branches .inner::before {
		position:absolute; display:block; right:0.5em; width:auto; 
		font-size:0.9em; font-weight:500; line-height:1.35; text-align:right;
		z-index:1; pointer-events:none;
	}
	.subpage.onayami-navi_child .branches .inner::after,
	.subpage.onayami-navi_grandchild .branches .inner::after {
		position:absolute; display:block; content:"";
		z-index:1; pointer-events:none;
		background-repeat:no-repeat;
		background-position:right center;
		background-size:contain;
	}

	.subpage.onayami-navi_child .branches .inner::before {
		content:"お悩み・困りごとから探す"; 
		top:-3.75em; height:6em;
	}
	.subpage.onayami-navi_child .branches .inner::after {
		top:-4.675em; height:4em;
		right:11.5em; width:3.25em;
		background-image:url(./img/illust/onayami-kara.svg);
	}

	.subpage.miedurai_child .branches .inner::before {
		content:"字が見えづらい"; 
		top:-3.75em; height:6em;
	}
	.subpage.miedurai_child .branches .inner::after {
		top:-4.5em; height:4em;
		right:7.5em; 	width:3em; 
		background-image:url(./img/illust/miedurai.svg);
	}

	.subpage.tsukareru_child .branches .inner::before {
		content:"目が疲れる・メガネが慣れない"; 
		top:-3.75em; height:6em;
	}
	.subpage.tsukareru_child .branches .inner::after {
		top:-4.55em; height:4em;
		right:13.75em; width:3.25em; 
		background-image:url(./img/illust/tsukareru.svg);
	}

	.subpage.yokushitai_child .branches .inner::before {
		content:"自分にあったレンズが欲しい"; 
		top:-3.75em; height:6em;
	}
	.subpage.yokushitai_child .branches .inner::after {
		top:-4.5em; height:4em;
		right:13em; 	width:3.25em; 		
		background-image:url(./img/illust/yokushitai.svg);
	}

	.subpage.mabushii_child .branches .inner::before {
		content:"光がまぶしい"; 
		top:-3.75em; height:6em;
	}
	.subpage.mabushii_child .branches .inner::after {
		top:-4.75em; height:4.25em;
		right:6.5em; 	width:3em; 
		background-image:url(./img/illust/mabushii.svg);
	}
	
}

@media (max-width:1169px) {
	.subpage .branches {padding:var(--section-padding-thin) 0 var(--section-padding-narrow);}
}


.subpage .branches .inner .cell {
	position:relative;
}
.subpage .branches .inner .cell.solo {
	padding:1.5em;
}
.subpage .branches .inner .cell.solo.gap {
	padding:var(--flex-gap);
}

.subpage .branches .inner >.cell.solo {
	padding:1.5em;
}

.subpage.onayami-navi_child .branches .inner .cell.heading {align-items:center;  flex-wrap:nowrap; }

.subpage .branches .inner .cell.heading h2 {margin:0; padding:0;}
.subpage .branches .inner .cell.heading h2 span {display:inline-block; vertical-align:middle;}

@media (max-width:480px) {
	.subpage .branches .inner .cell.heading .passive {padding:0 1em;}
	.subpage .beside-heading,
	.subpage .beside-heading.large {margin:0;}
}

.subpage .branches .inner .cell.heading::after {
	display:block; content:""; 
	position:absolute; bottom:0; right:1.5em; left:1.5em; 
	width::calc(100% - 3em); height:1px; 
	border-top:1px solid rgba(0,0,0,0.1);
}

.subpage .branches .inner .cell a.destination {
	display:block; width:100%; height:100%;
	aspect-ratio:22 / 10;
	overflow:hidden;
	text-align:center;
	background:rgba(0,0,0,0.25);
}
.subpage .branches .inner .cell img.bg {
	aspect-ratio:22 / 10;
	position:absolute; top:0; right:0; bottom:0; left:0;
	width:100%; height:auto;
	object-fit:cover;
	object-position:50% 50%;
	filter: brightness(70%);
	z-index:10;
	transition:all 0.33s ease 0s;
}
.subpage .branches .inner .cell a:hover img.bg {
	filter: brightness(95%); 
	transition:all 0.22s ease 0s;
}
.subpage .branches .inner .cell span.link-title {
	display:inline-block;
	position:absolute; top:50%; right:0; left:0;
	margin-inline:auto;
	transform:translateY(-50%);
	color:var(--base-color);
	font-size:1.4em;
	font-weight:700;
	z-index:20;
	transition:all 0.33s ease 0s;
}
.subpage .branches .inner .cell a:hover span.link-title {
	text-shadow:0 0 1px rgba(0,0,0,0.8),0 0 6px rgba(0,0,0,0.5);
	transition:all 0.22s ease 0s;
}


.subpage .branches .inner.detail {padding:1em;}
.subpage .branches .inner.detail span.indicator {
	background:var(--bg-color-slight);
	display:inline-block;
	font-size:0.8rem; font-weight:700;
	color:var(--acc-color);
	margin-bottom:1rem;
	padding:0.125rem 0.5rem;
	border-radius:var(--radius-btn);
}
.subpage .branches .inner.detail h2 {color:var(--moji-color);}
.subpage .branches .inner.detail h3 {color:var(--acc-color); font-size:1rem; font-weight:700;}
.subpage .branches .inner.detail h3:not(:first-child) {margin-top:2.5em;}
.subpage .branches .inner.detail dl {margin:2em 0 0; border:1px solid var(--acc-color);}	
.subpage .branches .inner.detail dt {margin:0; padding:0.5em 1em; background:var(--acc-color); color:#fff; font-weight:700;}	
.subpage .branches .inner.detail dd {margin:0; padding:0.5em }	


.subpage .related h2 {
	font-size:135%; 
	margin:0 0 1em;
	padding:0 0.75em; 
	line-height:1.25;
	font-weight:500;
	color:var(--moji-color); border-left:6px solid var(--acc-color);
}
.subpage .product-list {padding:1em 0;}
.subpage .product-list div.tanzaku {
	position:relative;
	display:flex; 
	justify-content:space-between;
	align-items: center;
	margin:1em 0; 
	padding:0.125em 4em 0.125em 1em;
	width:100%; 
	background:var(--base-color);
	border-radius:var(--radius-bnr);
	box-shadow:none; transition:all 0.18s linear 0s; 
}
.subpage .product-list div.tanzaku::after {
	position:absolute;
	top:50%; right:1em;
	width:26px; height:26px; margin-top:-13px;
	content:"";
	background:url(./img/icon/kochira.svg) no-repeat center center;
	background-size:cover;
}
.is-pc.subpage .product-list div.tanzaku:hover {
	transform:scale(1.0125); transition:all 0.09s linear 0s; 
	box-shadow:0 2px 1.05em 2px rgba(83,71,65,0.2); 
}
.subpage .product-list div.tanzaku .disable {opacity:0;}
.subpage .product-list div.tanzaku span.name {
	margin-right:0.5rem;
	font-size:105%; font-weight:700;
}
.subpage .product-list div.tanzaku span.type-wrapper {
	display:inline-block;
}
.subpage .product-list div.tanzaku span.type {
	display:inline-block; 
	margin:0 0.25rem 0 0; padding:4px 8px; transform:translateY(-1px);
	font-size:0.75rem; line-height:1.25;
	border:1px solid var(--acc-color);
}
.subpage .product-list div.tanzaku span.type.fixed-page {
	color:#929292;
	border:1px solid #929292;
}
.subpage .product-list div.tanzaku span.catch-phrase {
	display:block; 
	font-size:0.85em; font-weight:400; 
	color:#888; line-height:1.5;
}
.subpage .product-list div.tanzaku table {width:200px;}
.subpage .product-list div.tanzaku tr:first-child {border-bottom:1px solid #dcdcdc;}
.subpage .product-list div.tanzaku th,
.subpage .product-list div.tanzaku td {
	font-size:0.85rem;
	padding:3px 6px;
	color:var(--moji-color);
	border:none; 
	white-space:nowrap; word-break:keep-all;
}
.subpage .product-list div.tanzaku th {width:84px;}


@media (min-width:641px) and (max-width:839px) {
	.subpage .product-list div.tanzaku span.catch-phrase {padding-right:1em};
}
@media (max-width:640px) {
	.subpage .branches .inner >.cell.solo {padding:1em 0.5em;}
	.subpage .product-list .inner {text-align:center;}
	.subpage .product-list .inner a {
		display:inline-block;
		width:min(100%,550px);
		margin-inline:auto;
	}
	.subpage .product-list div.tanzaku {
		flex-direction: column;
		width:min(100%,550px);
		padding:1em 2em 0 1em;
		margin-inline:auto;
	}
	.subpage .product-list div.tanzaku::after {top:2em;}
	.subpage .product-list div.tanzaku .disable {height:1.5em;}
	.subpage .product-list div.tanzaku th {width:136px;}
	.subpage .product-list div.tanzaku div:first-child {width:100%; text-align:left;}
	.subpage .product-list div.tanzaku div:last-child {width:100%; text-align:right;}
	.subpage .product-list div.tanzaku div table {width:min(94%,380px);}
	.subpage .product-list div.tanzaku span.name {display:block; font-size:115%;}
	.subpage .product-list div.tanzaku span.type {margin-top:0.25em; margin-left:0;}
	.subpage .product-list div.tanzaku span.catch-phrase {margin-top:0.5em; margin-bottom:0; padding-right:0;}
	}	
}
@media (min-width:769px) and (max-width:1279px) {
	.subpage .branches .inner .cell span.link-title {font-size:clamp(1em,2vw,1.4em);}	
}
@media (min-width:481px) and (max-width:768px) {
	.subpage .branches .inner .cell span.link-title {font-size:clamp(1.1em,4vw,1.4em);}	
}
@media (max-width:480px) {
	.subpage .branches .inner >.cell.solo {padding:1em 0em;}
	.subpage .branches .inner .cell span.link-title {font-size:clamp(1.1em,4vw,1.3em);}
}


.subpage .related-blog {padding:3em 0 6em;}

.post-card-wrapper dt {text-align:left; line-height:1.5;}
.post-card-wrapper dt span {display:block;}
.post-card-wrapper dt span.date {color:#aaa; font-size:0.85rem; margin-bottom:0.5em;}
.post-card-wrapper dt span.title {color:var(--moji-color); margin-bottom:0.125rem}


@media (min-width:1170px) {
	.is-pc .post-card-wrapper a:hover dt span.date,
	.is-pc .post-card-wrapper a:hover dt span.title {
		color:#fff; 
	}
	_::-webkit-full-page-media, _:future, :root 	.is-pc a:hover .post-card dl {
		background:var(--base-color); color:var(--hover-color);
	}	
	_::-webkit-full-page-media, _:future, :root .is-pc .post-card-wrapper a:hover dt span.date,
	_::-webkit-full-page-media, _:future, :root .is-pc .post-card-wrapper a:hover dt span.title {
		color:var(--hover-color);
	}
}


/* **************************************************** 
	onayami-navi
*/ 

.onayami-navi #first-branches .cell {padding:1.5em;}

.onayami-navi #first-branches .cell:not(.solo) {text-align:center;}

.onayami-navi #first-branches .cell:nth-child(2)::after,
.onayami-navi #first-branches .cell:nth-child(4)::after {
	display:block; content:""; 
	position:absolute; top:1.5em; right:0; 
	width:1px; height:calc(100% - 3em);
	border-right:1px solid rgba(0,0,0,0.1);
}
.onayami-navi #first-branches .cell:nth-child(4)::before,
.onayami-navi #first-branches .cell:nth-child(5)::before {
	display:block; content:""; 
	position:absolute; top:0; left:1.5em; 
	width:calc(100% - 3em); height:1px;
	border-top:1px solid rgba(0,0,0,0.15);
}

.onayami-navi #first-branches .cell img.illust-moji-set {width:auto; height:256px; margin:1em;}
.onayami-navi #first-branches .cell:first-child img.illust-moji-set {width:auto; height:250px; margin-top:calc(1em + 6px);}
.onayami-navi #first-branches img.link-kochira {display:block; width:auto; height:20px; margin:1em auto;}

@media (min-width:1170px) {
	.is-pc.onayami-navi #first-branches a img {transform:scale(1); transition:all 0.11s ease 0s;}
	.is-pc.onayami-navi #first-branches a img:hover {transform:scale(1.03); filter: saturate(200%); transition:all 0.11s ease 0s;}
}

@media (min-width:641px) and (max-width:900px) {
	.onayami-navi #first-branches .cell.duo {width:50%;}
	.onayami-navi #first-branches .cell img.illust-moji-set {width:auto; height:206px; margin:1em;}
	.onayami-navi #first-branches .cell:first-child img.illust-moji-set {width:auto; height:200px; margin-top:calc(1em + 6px);}	
}

@media (max-width:800px) {
	.onayami-navi #first-branches {padding-left:1em; padding-right:1em;}
}

@media (min-width:641px) {
	.onayami-navi #first-branches a {display:inline-block;}
}

@media (max-width:640px) {

	.onayami-navi #first-branches .shell .passive {width:100%; text-align:center;}
	.onayami-navi #first-branches .beside-heading {margin:1em auto 0;}	
	.onayami-navi #first-branches h2 {text-align:center; margin-bottom:1em;}
	.onayami-navi #first-branches .cell {padding:1em;}
	
	.onayami-navi #first-branches .cell:first-child::after,
	.onayami-navi #first-branches .cell:nth-child(2)::after,
	.onayami-navi #first-branches .cell:nth-child(4)::after {border:none;}
	
	.onayami-navi #first-branches .cell:nth-child(2)::before,
	.onayami-navi #first-branches .cell:nth-child(3)::before,
	.onayami-navi #first-branches .cell:nth-child(4)::before,
	.onayami-navi #first-branches .cell:nth-child(5)::before {
		display:block; content:""; 
		position:absolute; top:0; left:1em; 
		width:calc(100% - 2em); height:1px;
		border-top:1px solid rgba(0,0,0,0.15);
		border-right:none;
	}
	
	.onayami-navi #first-branches .cell img.illust-moji-set {width:100%; height:auto; margin:0;}
	.onayami-navi #first-branches img.link-kochira {display:none;}

}


/* ************************************************
	appendix
*/

#appendix {
	padding:0 0 var(--section-padding);
	background:var(--base-color);
}

#appendix h3 {
	margin-top:3em;
	padding-left:0;
	font-size:160%;
	color:var(--moji-color);
	font-feature-settings:"palt";
}

#appendix img.heading-prefix {width:auto; height:1em; margin-right:0.5em; margin-bottom:0.125em; vertical-align:middle;}

#appendix .inner .cell {position:relative; border-bottom:4px solid transparent}
#appendix .inner .cell.current {border-bottom:4px solid var(--acc-color);}

#appendix .inner .cell:first-child img {width:auto; height:95px; margin-top:-8px;}
#appendix .inner.loop-1 .cell:nth-child(2) img {width:auto; height:85px;}
#appendix .inner.loop-2 .cell:nth-child(2) img {width:auto; height:85px;}
#appendix .inner .cell:nth-child(3) img {width:auto; height:85px; margin-top:-5px;}
#appendix .inner .cell:nth-child(4) img {width:auto; height:100px; margin-top:-20px;}

@media (max-width:480px) {
	#appendix .inner .cell:first-child img {width:auto; height:85px; margin-top:-4px;}
	#appendix .inner.loop-1 .cell:nth-child(2) img {width:auto; height:75px;}
	#appendix .inner.loop-2 .cell:nth-child(2) img {width:auto; height:75px;}
	#appendix .inner .cell:nth-child(3) img {width:auto; height:75px; margin-top:-2px;}
	#appendix .inner .cell:nth-child(4) img {width:auto; height:85px; margin-top:-15px;}	
}


#appendix .inner .cell a.select-by {display:flex; justify-content:center; align-items:center; padding:1em 0.5em;}
#appendix .inner .cell a.select-by div:first-child {padding:0.5em 0.5em 0.5em 0;}
#appendix .inner .cell a.select-by div:last-child {padding:0.5em 0; line-height:1.35; }
#appendix .inner .cell a.select-by div:last-child span {
	color:var(--moji-color); transition:all 0.11s ease 0s;
	font-feature-settings:"palt";
}
#appendix .inner .cell a.select-by div:last-child span.primary {font-size:90%; font-weight:500;}
#appendix .inner .cell a.select-by div:last-child span.secondary {font-size:80%;}

.is-pc #appendix .inner .cell a.select-by img {transform:scale(1); transition:all 0.11s ease 0s;}
.is-pc #appendix .inner .cell a.select-by:hover img {transform:scale(1.05) translateY(-2px); filter: saturate(200%); transition:all 0.11s ease 0s;}
.is-pc #appendix .inner .cell a.select-by:hover div span {color:var(--hover-color); transition:all 0.11s ease 0s;}

#appendix .inner.other-issues {margin-top:1.5em;} 
#appendix .inner.other-issues .cell a.issue {
	position:relative;
	display:block; width:100%; height:100%;
	margin:0;
	aspect-ratio:22 / 10;
	overflow:hidden;
	text-align:center;
	background:rgba(0,0,0,0.25);
}
#appendix .inner.other-issues .cell img.bg {
	aspect-ratio:22 / 10;
	position:absolute; top:0; right:0; bottom:0; left:0;
	width:100%; height:auto;
	margin:0;
	object-fit:cover;
	object-position:50% 50%;
	filter: brightness(70%);
	z-index:10;
	transition:all 0.33s ease 0s;
}
#appendix .inner.other-issues .cell a:hover img.bg {
	filter: brightness(95%); 
	transition:all 0.22s ease 0s;
}
#appendix .inner.other-issues .cell span.link-title {
	display:inline-block;
	position:absolute; top:50%; right:0; left:0;
	margin-inline:auto;
	padding:0.25em;
	transform:translateY(-50%);
	color:var(--base-color);
	font-size:1rem; font-weight:500; line-height:1.35;
	z-index:20;
	transition:all 0.33s ease 0s;
}
#appendix .inner.other-issues .cell a:hover span.link-title {
	text-shadow:0 0 1px rgba(0,0,0,8),0 0 6px rgba(0,0,0,0.6);
	transition:all 0.22s ease 0s;
}

@media (min-width:769px) {
	#appendix .inner .cell::before {
		display:block; content:""; 
		position:absolute; top:1em; left:0; 
		width:1px; height:calc(100% - 2em);
		border-left:1px solid rgba(0,0,0,0.1);
	}
	#appendix .inner .cell:last-child::after {
		display:block; content:""; 
		position:absolute; top:1em; right:0; 
		width:1px; height:calc(100% - 2em);
		border-right:1px solid rgba(0,0,0,0.1);
	}
}
@media (max-width:768px) {
	#appendix .inner .cell:nth-child(1)::after,
	#appendix .inner .cell:nth-child(3)::after {
		display:block; content:""; 
		position:absolute; top:1em; right:0; 
		width:1px; height:calc(100% - 2em);
		border-right:1px solid rgba(0,0,0,0.1);
	}
	#appendix .inner .cell:nth-child(3)::before,
	#appendix .inner .cell:nth-child(4)::before {
		display:block; content:""; 
		position:absolute; top:0; left:1em; 
		width:calc(100% - 2em); height:1px;
		border-top:1px solid rgba(0,0,0,0.1);
	}
}



#appendix #product-search {
	margin:3em auto 2em;
}
#appendix #product-search .inner {
	position:relative;
	padding:3em 1em 4em;
	background:var(--acc-color);
	text-align:center;
}
#appendix #product-search .inner span {
	display:inline-block; margin:0 auto 0.75em;
	color:#fff; font-size:130%; font-weight:700; 
	letter-spacing:0.2em; text-indent:0.2em;
}
#appendix #product-search .inner .mascot {
	position:absolute; right:10%; bottom:-2em;
	width:auto; height:10em;
	pointer-events:none;
	z-index:10;
}

#appendix #product-search #searchform {
	display:flex; 
	justify-content: center;
	align-items: center;
}
#appendix #product-search input#s {
	padding:0.125em 0.5em; margin:0; 
	width:min(90%,450px); height:3em;
	border:none !important;
	border-radius:0 !important;	
}
#appendix #product-search input#searchsubmit {
	padding:0.125em 0 0.125em 2em; margin:0; 
	width:7em; height:3em;
	border-radius:0 !important;
	background:var(--dark-color) url(./img/icon/search-btn.svg) no-repeat;
	background-position:1em center;
	background-size:auto 2em;
	color:var(--base-color);
	border:none !important;
	cursor:pointer;
	transition:all 0.09s ease 0s;
}
.is-pc #appendix #product-search input#searchsubmit:hover {background-size:auto 2.2em; transition:all 0.09s ease 0s;}


@media (min-width:901px) and (max-width:1170px) {
	#appendix #product-search .inner .mascot {
		right:9vw; bottom:-1.5em;
		width:auto; height:7em;
	}
}
@media (min-width:481px) and (max-width:900px) {
	#appendix #product-search .inner .mascot {
		right:5%; bottom:-2.65em;
		width:auto; height:6em;
	}
}
@media (max-width:480px) {
	#appendix  {padding-bottom:4em;}
	#appendix #product-search .inner {padding:3em 1em;}
	#appendix #product-search #searchform {display:block;}
	#appendix #product-search input#s {display:block; margin:0 auto 1em;}
	#appendix #product-search input#searchsubmit {
		display:block; margin:0 auto; 
		padding:0.125em 0 0.125em 2.5em;
		width:8em; height:3em; 
		font-size:110%; font-weight:700; letter-spacing:0.25em;
		background-position:1.5em center;
	}
	#appendix #product-search .inner .mascot {
		right:5%; bottom:-1em;
		width:auto; height:6em;
	}
}


#appendix #complemental-links {padding:0 0 0;}






/* =============================================================================
   Animation Settings
   ========================================================================== */

.fuwa-sp {visibility:hidden;}

.powatt {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
}
@keyframes Powatter {
	0% { opacity: 0; transform: translateY(34px); }
	100% { opacity: 1; transform: translateY(0); }
}

.powatt-short-delay {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 0.8s; 		
}

.powatt-mid-delay {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 1.6s; 		
}

.powatt-mid-delay-2 {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 2.0s; 		
}

.powatt-long-delay {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 2.4s; 		
}



.fuwatt {
	animation-fill-mode:both;
	animation-duration:0.55s;
	animation-name: Fuwatter;
	visibility: visible !important;
    animation-delay: 0.3s;
}
@keyframes Fuwatter {
	0% { opacity: 0; transform: translateY(34px); }
	100% { opacity: 1; transform: translateY(0); }
}

.fuwatt-short-delay {
	animation-fill-mode:both;
	animation-duration:0.55s;
	animation-name: Fuwatter-LD;
	visibility: visible !important;
    animation-delay: 0.5s; 	
}
@keyframes Fuwatter-SD {
	0% { opacity: 0; transform: translateY(34px); }
	100% { opacity: 1; transform: translateY(0); }
}

.fuwatt-mid-delay {
	animation-fill-mode:both;
	animation-duration:0.55s;
	animation-name: Fuwatter-LD;
	visibility: visible !important;
    animation-delay: 0.7s; 	
}
@keyframes Fuwatter-MD {
	0% { opacity: 0; transform: translateY(34px); }
	100% { opacity: 1; transform: translateY(0); }
}

.fuwatt-long-delay {
	animation-fill-mode:both;
	animation-duration:0.55s;
	animation-name: Fuwatter-LD;
	visibility: visible !important;
    animation-delay: 0.9s; 	
}
@keyframes Fuwatter-LD {
	0% { opacity: 0; transform: translateY(34px); }
	100% { opacity: 1; transform: translateY(0); }
}


.guwatt {
	animation-fill-mode:both;
	animation-duration:0.55s;
	animation-name: Guwatter;
	visibility: visible !important;
}
@keyframes Guwatter {
	0% { opacity: 0; transform: translateY(40px); }
	100% { opacity: 1; transform: translateY(0); }
}




/* =============================================================================
   LP_brain_s
   ========================================================================== */
.subpage #main-visual.type-photo.mv-nobg::after{
    background: none!important;
}

.inner_nobg{
    background: none!important;
}
.brain_s_blc{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10%;
}
.brain_s_blc02{
    margin-bottom: 15%;
}
.brain_s_pl{
    flex-direction: row-reverse;
}
.brain_s_blc .img{
    width: 585px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.brain_s_blc .txt{
    width: calc(107% - 585px);
    background: linear-gradient(to right, #243a45, #10222c);
    color: white;
    position: relative;
    z-index: 1;
}
.brain_s_blc .txt .figure{text-align: center;}
.brain_s_blc .txt h2{
    font-size: 170%;
    color: white!important;
}
.brain_s_blc01{
    margin-top: 3%;
}
.brain_s_blc01 .txt{
    padding: 5% 7% 5% 12%;
    margin: 5% 0 0 -7%;
}
.brain_s_blc02,.brain_s_blc04,.brain_s_blc06{align-items: flex-end;}
.brain_s_blc02 .txt{
    padding: 5% 12% 5% 7%;
    margin: 0 -7% 0 0;
}
.brain_s_blc02 .img{ margin-bottom: -5%;}

.brain_s_blc03{align-items: center;}
.brain_s_blc03 .txt{
    padding: 5% 7% 5% 12%;
    margin: 0 0 0 -7%;
}

.brain_s_blc04 .txt{
    padding: 5% 12% 5% 7%;
    margin: 0 -7% 0 0;
}
.brain_s_blc04 .img{ margin-bottom: 5%;}

.brain_s_blc05 .img{ margin-top: 10%;}
.brain_s_blc05 .txt{
    padding: 5% 7% 5% 12%;
    margin: 0 0 0 -7%;
}

.brain_s_blc06 .txt{
    padding: 5% 12% 5% 7%;
    margin: 0 -7% 0 0;
}
.brain_s_blc06 .img{ margin-bottom: -5%;}

.link_list_product{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 10%;
}
.link_list_product li{
    width: 575px;
    margin: 0 20px 2% 0;
    margin-bottom: 2%;
}
.link_list_product li:nth-child(2n){
    margin-right: 0;
    margin-left: 20px;
}
.link_list_product li a{transition: .3s all}
.link_list_product li a:hover{
    opacity: .7;
}
@media (max-width:1260px) {
    .brain_s_blc .img{
        width: 49%;
    }
    .link_list_product li{
        width: 48%;
        margin: 0 2% 2% 0;
        margin-bottom: 2%;
    }
    .link_list_product li:nth-child(2n){
        margin-right: 0;
        margin-left: 2%;
    }

    .brain_s_blc{
        flex-direction:column-reverse;
    }
    .brain_s_blc .txt{
        width: 85%;
        padding: 8% 7% 5%;
    }
    .brain_s_blc03{align-items: flex-start;}
    .brain_s_blc04 .img,.brain_s_blc06 .img{margin-bottom: 0;}
    .brain_s_blc01 .txt,.brain_s_blc03 .txt,.brain_s_blc05 .txt{
        margin: -8% 0 0 0;
        align-self: end;
    }
    .brain_s_blc02 .txt,.brain_s_blc04 .txt,.brain_s_blc06 .txt{
        margin: -8% 0 0 0;
        align-self: flex-start;
    }

}
@media (max-width:959px) {
    .brain_s_blc .img{
        width: 70%;
    }
}
@media (max-width:599px) {
    .brain_s_blc .txt h2{
        margin-top: 1.5em;
    }
    .brain_s_blc .img{
        width: 80%;
    }
    .brain_s_blc .txt{
        width: 90%;
    }
    .brain_s_blc .txt{
        padding-top: 10%;
    }
    .brain_s_blc01 .txt,.brain_s_blc03 .txt,.brain_s_blc05 .txt{
        margin: -10% 0 0 0;
        align-self: end;
    }
    .brain_s_blc02 .txt,.brain_s_blc04 .txt,.brain_s_blc06 .txt{
        margin: -10% 0 0 0;
        align-self: flex-start;
    }
    .brain_s_blc .txt h2{
        font-size: 4.8vw;
        line-height: 1.7;
    }
    .brain_s_blc .txt .figure{
        margin-bottom: 5%;
    }
    .brain_s_blc .txt .figure img{
        width: 100%;
        height: auto;
    }
    .brain_s_blc03 .figure img{
        max-width: 267px;
    }
    .brain_s_blc04 .figure img{
        max-width: 429px;
    }
    .brain_s_blc05 .figure img{
        max-width: 253px;
    }
    .brain_s_blc06 .figure img{
        max-width: 378px;
    }
    .link_list_product{
        flex-direction: column;
        margin-bottom: 20%;        
    }
     .link_list_product li{
        width: 100%;
        margin: 0 0 5% 0;
    }
    .link_list_product li:nth-child(2n){
        margin-left: 0;
    }
}

/* =============================================================================
   LP_176sozai
   ========================================================================== */

.subpage #main-visual h1.mv_copy_176{
    top: 0;
    bottom: 0;
    margin: auto;
}
.subpage #main-visual h1.mv_copy_176 img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.blc_176_01{
    background: url(./img/lp/176_blc01.jpg) no-repeat;
    background-size: cover;
    padding: 120px 20px;
    text-align: center;
    color: white;
    margin-bottom: 7%;
}
.blc_176_01 p{
    text-align: center;
    line-height: 2.5;
    font-size: 120%;
}

.blc_176_02{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-bottom: 7%;
}
.blc_176_03{
    display: flex;
    align-items: center;
    margin-bottom: 7%;
}
.blc_176_02 .img,.blc_176_03 .img{
    width: 540px;
}
.blc_176_02 .txt{
    width: calc(100% - 540px);
    padding-left: 45px;
}
.blc_176_03 .txt{
    width: calc(100% - 540px);
    padding-right: 45px;
}
@media (max-width:1260px) {
    .blc_176_01{
        padding: 14% 4%;
    }
    .blc_176_02 .img, .blc_176_03 .img{
        width: 45.38%;
    }
    .blc_176_02 .txt{
        width: calc(100% - 45.38%);
        padding-left: 6%;
    }
    .blc_176_03 .txt{
        width: calc(100% - 45.38%);
        padding-right: 6%;
    }
}
@media (min-width:1170px) {
    .subpage #main-visual h1.mv_copy_176 img{
		height:calc(100% - 240px);
		top:calc(50% + 124px); transform:translateY(-50%);
	}
}
@media (max-width:1169px) {
    .subpage #main-visual h1.mv_copy_176{
		top:calc(50% + 34px); transform:translateY(-50%);
	}
    .subpage #main-visual h1.mv_copy_176 img{
        width: 41.7%;
        height: auto;
    }
}
@media (max-width:959px) {
    .subpage #main-visual h1.mv_copy_176 img{
        width: 55%;
    }
    .subpage #main-visual h1.mv_copy_176 {

	}
    .blc_176_01 p{
        font-size: 110%;
    }
}
@media (max-width:599px) {
    .subpage #main-visual h1.mv_copy_176 img{
        width: 85%;
    }
    .subpage #main-visual h1.mv_copy_176 {
		
    }
    .blc_176_01{
        padding: 7% 7%;
               line-height: 2;
    }
    .blc_176_01 p{

        text-align: left; 
    }
    .blc_176_01 br{
        display: none;
    }
    .blc_176_02, .blc_176_03{
        flex-direction: column-reverse;
    }
    .blc_176_02 .img, .blc_176_03 .img{
        width: 100%;
        margin-bottom: 4%;
    }
    .blc_176_02 .txt{
        width: 100%;
        padding-left: 0;
    }
    .blc_176_03 .txt{
        width: 100%;
        padding-right: 0;
    }
    .blc_176_01 p{
        font-size: 100%;
    }
    .blc_176_02 p.txt{
        margin-top: .5em;
    }
}


/* =============================================================================
   LP_eyecaredesign
   ========================================================================== */
.subpage #main-visual h1.mv_copy_ecd{
    top: 0;
    bottom: 0;
    margin: auto;
}
.subpage #main-visual h1.mv_copy_ecd img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.ecd_s_blc{
    margin-bottom: 17%;
    position: relative;
}

.ecd_s_blc .img{
    width: 1078px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.ecd_s_blc .txt h2{
    font-size: 170%;
    color: #306080!important;
    margin-top: 0!important;
}
.ecd_s_blc .txt p{margin: 0.5em auto;}

.ecd_s_blc01 .txt,.ecd_s_blc03 .txt,.ecd_s_blc05 .txt{
    position: absolute;
    bottom:-20%;
    right: 0;
    padding: 40px;
    background: var(--bg-color-slight);
    z-index: 2;
}
.ecd_s_blc02 .txt,.ecd_s_blc04 .txt{
    position: absolute;
    bottom:-20%;
    left: 0;
    padding: 40px;
    background: var(--bg-color-slight);
    z-index: 2;
}
.ecd_s_blc02 .img,.ecd_s_blc04 .img{
    margin-left: calc(100% - 1078px);
}

@media (max-width:1260px) {
    .ecd_s_blc .img{
        width: 95%;
    }
    .ecd_s_blc02 .img,.ecd_s_blc04 .img{
        margin-left: 5%;
    }
}

@media (min-width:1170px) {
    .subpage #main-visual h1.mv_copy_ecd img{
		height:calc(100% - 240px);
		top:calc(50% + 110px); transform:translateY(-50%);
	}
}

@media (max-width:1169px) {
    .subpage #main-visual h1.mv_copy_ecd{
		top:calc(50% + 34px); transform:translateY(-50%);
    }
    .subpage #main-visual h1.mv_copy_ecd img{
        width: 30%;
        height: auto;
    }
    .ecd_s_blc{
        margin-bottom: 10%;
    }
    .ecd_s_blc01 .txt, .ecd_s_blc03 .txt, .ecd_s_blc05 .txt{
        position: relative;
        padding: 40px;
        margin-top: -7%;
        margin-left: 30%;
    }
    .ecd_s_blc02 .txt, .ecd_s_blc04 .txt{
        position: relative;
        margin-top: -7%;
        margin-right: 45%;
    }
}


@media (max-width:959px) {
    .subpage #main-visual h1.mv_copy_ecd img{
        width: 38%;
    }
    .subpage #main-visual h1.mv_copy_ecd {

	}
    .ecd_s_blc .txt h2{
        font-size: 3.2vw;
    }
    .ecd_s_blc02 .txt, .ecd_s_blc04 .txt{
        margin-right: 33%;
    }
}
@media (max-width:767px) {
     .subpage #main-visual h1.mv_copy_ecd img{
        width: 48%;
    }
    .subpage #main-visual h1.mv_copy_ecd {

    }
    .ecd_s_blc .txt h2{
        font-size: 3.6vw;
    }
    .ecd_s_blc02 .txt, .ecd_s_blc04 .txt{
        margin-right: 10%;
    }
    .ecd_s_blc01 .txt, .ecd_s_blc03 .txt, .ecd_s_blc05 .txt{
        margin-left: 10%;
    }
}
@media (max-width:599px) {
    .subpage #main-visual h1.mv_copy_ecd img{
        width: 62%;
    }
    .subpage #main-visual h1.mv_copy_ecd {

    }
    .ecd_s_blc .img{
        width: 100%;
    }
    .ecd_s_blc02 .img, .ecd_s_blc04 .img{
        margin-left: 0;
    }

    .ecd_s_blc .txt h2{
        font-size: 4.6vw;
    line-height: 1.8;
    }
    .ecd_s_blc02 .txt, .ecd_s_blc04 .txt{
        margin-right: 5%;
        padding: 6%;
        padding-left: 10%;
    }
    .ecd_s_blc01 .txt, .ecd_s_blc03 .txt, .ecd_s_blc05 .txt{
        margin-left: 5%;
        padding: 6%;
    }

}
@media (max-width:499px) {
    .subpage #main-visual h1.mv_copy_ecd img{
        width: 70%;
    }
    .subpage #main-visual h1.mv_copy_ecd {

    }
    .ecd_s_blc .txt h2 {
        font-size: 4.8vw;
    }
}
@media (max-width:360px) {
    .subpage #main-visual h1.mv_copy_ecd img{
        width: 70%;
    }
    .subpage #main-visual h1.mv_copy_ecd {

    }
}






/* =============================================================================
   Newtwork 5 sub sites Common
   {  Site 2:/advice/   Site 3:/product/   Site 4:/joshikai/   Site 6:/news/   Site 8:/blog/  ::: *number = blog_id }
   ========================================================================== */

.slim-container {width:auto; max-width:calc(854px + 5px + 2em); margin:0 auto; padding:0}

/*
.front-page:not(.site--main) header .inner {
	background:rgba(255,255,255,0.8) !important;
}
*/
.front-page:not(.site--main) #main-visual {
	position:relative;
	top:0; right:0; left:0;
	width:100%; 
	height:clamp(40vh,475px,90vh);
	z-index:0;
	overflow:hidden;
	background:var(--bg-color-slight);
}
.front-page:not(.site--main):not(.site--advice):not(.site--product):not(.site--blog) #main-visual h1 {
	position:absolute; right:0; left:0; top: calc(50% + 2.55rem);
	margin:0; 
	color:#fff; font-size:2em; font-weight:bold; line-height:1.5;
}


#main-visual.type-staying h1,
#main-visual.type-staying span.h1-alt {
	color:var(--base-color);
	z-index:8;
}

#main-visual span.h1-alt {
	display:block;
	position: absolute;  right: 0; left: 0; top: calc(50% + 2.55rem);
	margin: 0;
	color:#fff; font-size:2em; font-weight:bold; line-height:1.5;
}
.site--advice:not(.search-result):not(.not-found) #main-visual h1,
.site--advice #main-visual span.h1-alt {
	position:absolute; right:0; left:0; top:50%; 
	margin:0; transform:translateY(-17.5%);
}
.site--advice #main-visual h1 img.kanban,
.site--advice #main-visual span.h1-alt img.kanban {
	width:clamp(270px,45%,840px); height:auto;
}
.site--blog:not(.search-result):not(.not-found) #main-visual h1,
.site--blog #main-visual span.h1-alt {
	position:absolute; right:0; left:0; top:50%; 
	margin:0; transform:translateY(-38.5%);
}
.site--blog #main-visual h1,
.site--blog #main-visual span.h1-alt {

}
.site--blog #main-visual h1 img.kanban,
.site--blog #main-visual span.h1-alt img.kanban {
	height:auto;
}
.site--blog.front-page .intro-caption {
	font-weight:500; 
	text-align:justify;
	text-align-last:center;
	overflow-wrap: anywhere;
	word-break: auto-phrase; /*normal; */
	line-break: strict;
} 
.site--blog.front-page section.category-posts h2 {
	margin:0;
	padding:0 0 0.5em;
	font-weight: 500;
	line-height: 1.5em;
	font-size: 225%;	
	color:var(--acc-color);
}
.site--blog.front-page section.category-posts .co-footer {
	padding: 0.75em 0.125em 0;
}
.site--blog.front-page section.category-posts a.readmore {
	position:relative; display:block; 
	padding-right:1.25em;
	color:var(--moji-color);
	font-weight:400;
}
.site--blog.front-page section.category-posts a.readmore:hover {
	color:var(--acc-color);
}
.site--blog.front-page section.category-posts a.readmore::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25em;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-top: 1px solid var(--acc-color);
  border-right: 1px solid var(--acc-color);
  transform: rotate(45deg);
}



.search-result #main-visual::after,
.single.subpage:not(.site--main):not(.site--advice):not(.site--news):not(.site--blog):not(.front-page) #main-visual:not(.type-thumbnail)::after {
	-webkit-backdrop-filter: blur(8px);	
	backdrop-filter: blur(8px);
	position:absolute; top:0; right:0; bottom:0; left:0;
	content:""; width:100%; height:100%;
	background:rgba(0,0,0,0.35);
	z-index:7;
}

.type--article #main-visual.type-staying::after {
	position:absolute; top:0; right:0; bottom:0; left:0;
	content:""; width:100%; height:100%;
	background:rgba(0,0,0,0);
	z-index:7;
}
.type--article.site--news #main-visual.type-staying::after {
	background:rgba(0,0,0,0.35);
}

.site--advice #main-visual.type-staying::after {
	position:absolute; bottom:0; left:0;
	content:""; width:clamp(128px,23%,256px); height:100%;
	aspect-ratio:3 / 2;
	background:url(./img/eyecatch/onepoint-advice-corner.svg);
	background-repeat:no-repeat; background-position:left bottom; background-size:contain;
	z-index:7;
}

.site--advice #main-visual.type-photo::after,
.site--blog #main-visual.type-photo::after {
	background:rgba(0,0,0,0);
}
.site--news #main-visual.type-photo {
	color:#fff;
}



@media (min-width:1170px) {
	.site--blog #main-visual h1 img.kanban,
	.site--blog #main-visual span.h1-alt img.kanban {
		width:clamp(225px,80%,525px);
		translate: 0 1rem;
	}
	.site--blog.front-page .intro-caption {margin:0; padding:0.5em 0 0.5em; font-size:135%;} 
	.site--blog.front-page section.category-posts {margin:4em 0 2.5em;}	
}
@media (max-width:1169px) {
	.front-page:not(.site--main) #main-visual {
		height:clamp(40vh,400px,50vh);
	}
	.site--blog #main-visual h1 img.kanban,
	.site--blog #main-visual span.h1-alt img.kanban {
		width:clamp(225px,80%,475px);
	}	
	.site--blog.front-page .intro-caption {margin:0; padding:1.5em 0 0.5em; font-size:120%;} 
	.site--blog.front-page section.category-posts {margin:4em 0 2.5em;}	
	.front-page:not(.site--main):not(.site--advice):not(.site--product):not(.site--blog) #main-visual h1,
	.subpage:not(.site--main):not(.site--advice):not(.site--blog) #main-visual span.h1-alt{
		top: calc(50% + 0.75rem);
	}	
}
@media (max-width:899px) {
	.site--advice #main-visual h1 img.kanban,
	.site--advice #main-visual span.h1-alt img.kanban {
		width:clamp(280px,75%,500px); height:auto;
	}	
}
@media (max-width:600px) {
	.front-page:not(.site--main) #main-visual {
		height:clamp(40vh,300px,50vh);
	}
	.site--blog.front-page .intro-caption {margin:0 0 -0.5em; padding:2.5em 0 0; font-size:115%; text-align-last:left;} 	
	.site--blog.front-page section.category-posts {margin:4.5em 0 2.5em;}
	.site--blog.front-page section.category-posts h2 { font-size:195%;}
}
@media (max-width:480px) {

	.front-page:not(.site--main):not(.site--advice):not(.site--product):not(.site--blog) #main-visual h1,
	.subpage:not(.site--main):not(.site--advice):not(.site--blog) #main-visual span.h1-alt{
		top: calc(50% + 0.25rem);
	}	

	.site--advice #main-visual.type-staying::after {
		width:clamp(64px,28%,128px);
	}
	.site--advice #main-visual h1 img.kanban,
	.site--advice #main-visual span.h1-alt img.kanban {
		width:clamp(280px,85%,410px); height:auto;
	}
	.site--blog #main-visual h1 img.kanban,
	.site--blog #main-visual span.h1-alt img.kanban {
		width:clamp(225px,94%,480px); height:auto;
	}	
}

.front-page:not(.site--main) .branches .inner {
  background: var(--base-color);
  border-radius: var(--radius-bnr);
}


#main-visual span.h1-en-caption {
	display:block;
	position:absolute; right:0; bottom:16%; left:0;
	margin:0.5em auto; text-align:center;
	font-family: 'Lexend Deca', sans-serif;
	font-size:1.65rem; font-weight:200;
	color:rgba(255,255,255,0.85);
	text-shadow: none; letter-spacing:0.375em;
	z-index: 10; 
	padding-left: 0.5em;
}
@media (max-width:768px) {
	#main-visual span.h1-en-caption {bottom:13.5%; font-size:1.4rem;}
}
@media (max-width:480px) {
	#main-visual span.h1-en-caption {bottom:12.5%; font-size:1.3rem;}
}








/**************************************************
	Post styles of sub sites
*/

#archive-posts th {width:22.5%;}
#archive-posts td {width:77.5%;}
#archive-posts th .thumb-frame {
	width:200px; height:auto;
	aspect-ratio: 4 / 3;
	overflow:hidden;
}
#archive-posts th .thumb-frame img {
	width:100%; height:100%;
	aspect-ratio: 4 / 3;
	object-fit:cover;
}

.archive .product-list {padding:5em 0;}

.archive .archive-type {
	padding:0 0 2.75rem;
	text-align:center;
	font-size:2em;
	font-weight:700;
}
.archive .archive-type .cell {text-align:left; line-height:1.35;}
.archive .archive-type .icon {height:1.5rem; margin-right:0.375rem;}
.archive.category .archive-type .icon {transform:translateY(-1px);}
.archive .archive-type span {display:inline-block; margin-right:0.375rem; font-size:0.9rem; transform:translateY(-3px);}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   Author
*/
#author-info {}
#co-author-info {}

.author-info {
	width:100%; max-width:1014px; 
	margin:0 auto 2.5em 0;
	/*
	padding:10px; 
	background:var(--base-color);
	border-left:0.16em solid var(--acc-color);
	*/
}
.author-info .author-avatar {
	width:140px; height:140px; padding:0 10px;
	overflow:hidden;
}
.author-info .author-avatar img {
	width:120px; height:120px; border-radius:var(--radius-btn);
	aspect-ratio:1 / 1; object-fit:cover; object-position:0 0;
}
.author-info .author-description {width:calc(100% - 140px); height:auto; padding:0 10px;}
@media(max-width:480px) {
	.author-info .author-description {width:100%; height:auto; padding:0 10px;}
}
.author-info .nickname {margin:0 0 0.5em; font-size:120%; font-weight:bold;}
.author-info .profile {margin:0.25em 0; font-size:95%; line-height:1.5;}

.single .author-info {
	border:1px solid #ddd;
	border-top:none;
}
.single #author-info.author-info {
	margin:4em 0 0;
}
.single #co-author-info.author-info {
	margin:2em 0 0;
}
.single .author-info .info-header {
	height:2.825rem;
	background: #ddd;
	overflow:hidden;
	font-size: 4rem;
	color:rgba(255,255,255,0.75); font-weight:900;
	letter-spacing:0.2em;
	padding:0 0.35em;
	line-height:0.58;
}
.single .author-info .info-body{
	margin:0;
	padding:2em 1.5em 1.5em;
}
.single .author-info :is(.to-author-archive, .site-url) {
	width:100%;
	margin:0.5em 0 0;
	text-align:right;
}
@media (max-width:480px) {
	.single .author-info .info-body{
		padding:1.5em 0.75em 1.5em;
	}
}



#posts-home {padding:4.5em 0 3em;}
#posts-home .post-card-wrapper dt span.date {font-weight:500;}
#posts-home .post-card-wrapper dt span.title {font-weight:700;}

@media (max-width:1169px) {
	.archive .archive-type .cell {line-height:1.5;}
	#posts-home {padding:2.5em 0 3em;}
}
@media (max-width:600px) {
	.archive .archive-type {padding:0 0 2rem;}
	#posts-home {padding:1.5em 0 3em;}
	#posts-home .post-card {padding:0.5em 0;}
}

#posts-appendix {padding:2em 0 3em; background:var(--base-color);}

#posts-appendix .inner {padding:1.5em 0 0.5em;}
#posts-appendix h2 {color:var(--moji-color); font-size:700; letter-spacing:0.1em; text-align:left;}
#posts-appendix h2 .icon {width:auto; height:1em; margin-right:0.5em;}
#posts-appendix h2 .icon.category {transform:translateY(-3px);}
#posts-appendix h2 .icon.writer {height:1.275em; transform:translateY(-2px);}



#posts-appendix .cat-list {
	display:flex;
	flex-direction:row; flex-wrap:wrap;
	gap:var(--flex-gap);
	padding:0;
}
#posts-appendix .cat-list li {
	width:calc((100% - (var(--flex-gap)) * 2)  / 3);
	margin:0;
}

@media (min-width:1170px) {
	#posts-appendix h2 {padding-bottom:0.5em; font-size:20px; line-height:1.2rem;}
	#posts-appendix .cat-list li {font-size:16px; line-height:1.2rem;}
}
@media (max-width:1169px) {
	#posts-appendix h2 {font-size:16px; line-height:1.2rem;}
	#posts-appendix .cat-list li {font-size:14px;}
}
@media (max-width:899px) {
	#posts-appendix .cat-list li {
		width:calc((100% - (var(--flex-gap))) / 2);
	}
}
@media (max-width:639px) {
	#posts-appendix .cat-list li {
		padding:0.25em 0.5em;
	}
	#posts-appendix .cat-list:not(.author-list) li {
		width:100%;
	}
}


.tagcloud { margin-bottom:40px; text-align:left;}
.tagcloud a { 
    display:inline-block !important;
    line-height:1.2em !important; 
    padding:5px !important;
}


#posts-appendix .cat-list a, 
#posts-appendix .tagcloud a { color:var(--moji-color); }
#posts-appendix .cat-list a:hover, 
#posts-appendix .tagcloud a:hover { color:var(--hover-color); }



#posts-appendix #searchform-wrapper {}
#posts-appendix #searchform {text-align:center;}
#posts-appendix #searchform {display:flex; margin:auto; width:auto; max-width:220px; border:1px solid var(--dark-color); overflow:hidden; border-radius:0;}
#posts-appendix #searchform input#s {width:calc(100% - 36px); height:36px !important; border:none !important; border-radius:0; padding-left: 0.5em;}
#posts-appendix #searchform input#searchsubmit {
	width:36px; height:36px !important; margin:0 !important; padding:6px 12px; border:none !important; 
	background:var(--dark-color) url(./img/icon/search-btn.svg) no-repeat 0 0; background-size:28px 28px; background-position:center center; color:transparent;
	border-radius:0;
}

#posts-appendix #searchform label.screen-reader-text {display:none;}


.single .branches .inner.detail {padding:2em;}
@media (max-width:768px) {
	.single .branches .inner.detail {padding:0.75em 1.5em;}
}
@media (max-width:600px) {
	.single .branches .inner.detail {padding:0.75em 1em;}
}
@media (max-width:480px) {
	
	.single .branches .inner.detail {padding:0.5em 0.75em;}
}


.single .post-meta {
	margin:0 0 2em; padding:0 0 2em;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.single .post-meta h1{
	margin:0.75em 0;
	line-height:1.5; text-align:left;
}
.single .post-meta .element {
	display:inline-block; padding:0 0.5em;
}
.single .post-meta .element .post-category ul {
	display:flex;
	margin:0; padding:0;
} 
.single .post-meta .element .post-category ul li {
	margin:0 0.125em;
}
.single .post-meta .element .post-category ul li a {
	display:inline-block; padding:0.25em 0.75em 0.375em;	
	font-size:0.75rem; line-height:1.25; 
	text-decoration:none;
	border:1px solid var(--acc-color);
	transform:translateY(-2px);
}
.single .post-meta .element .post-category ul li a:hover {
	border:1px solid var(--hover-color);
	background:rgba(120,205,235,0.1);
	transition:all 0.14s ease 0s;	
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   SNS button
*/
.sns-share-btns {
	margin-top:3em;
	display:flex;
}
.sns-share-btns .sns-btn {
	display:block; 
	padding:0.75em 1em;
	width:10em;
	font-size:1rem;
	line-height:1;
	margin-right:0.375em;
	text-align:center;
	font-size:0.95em;
	font-weight:400;
	font-family:'Lexend Deca', sans-serif;
}
.sns-share-btns .sns-btn:last-child {
	margin-right:0;
}
@media (hover: hover) {
	.sns-share-btns .sns-btn:hover {filter: saturate(200%); text-shadow:none;}
	.sns-share-btns .sns-btn:is(.twitter-x-post, .twitter-x-follow):hover {filter: opacity(70%) brightness(170%); text-shadow:none;}
}
.sns-share-btns .sns-btn img.icon{
	display:inline-block; 
	width:1.5em;
	margin: 0 0.5em 0 -0.5em;
	vertical-align:middle;
	line-height:1;
}
.sns-share-btns .sns-btn img.icon.twitter-x{
	width:1.25em;
	margin: 0.125em 0.5em 0.125em -0.5em;
}
.sns-share-btns .sns-btn span {
	display:inline-block;
	vertical-align:middle;
	line-height:1;
}
.sns-share-btns .sns-btn.twitter-x-post {
	background:#000000;
	color:#fff;
	border:1px solid #000000;
}
.sns-share-btns .sns-btn.twitter-x-follow {
	background:#fff;
	color:#000000;
	border:1px solid #000000;
}
.sns-share-btns .sns-btn.facebook-share{
	background:#0082f8;
	color:#fff;
	border:1px solid #0082f8;
}
.sns-share-btns .sns-btn.line-share{
	background:#00c300;
	color:#fff;
	border:1px solid #00c300;
}
@media (max-width:480px) {
	.sns-share-btns .sns-btn img.icon {
		display:block;
		width:1.825em;
		margin:0 auto 0.125em;
	}
	.sns-share-btns .sns-btn img.icon.twitter-x {
		display:block;
		width:1.5em;
		margin:0.15em auto 0.25em;
	}	
	.sns-share-btns .sns-btn img.icon.line {
		display:block;
		width:2.25em;
		margin:-0.2em auto -0.1675em;
	}	
	.sns-share-btns .sns-btn span {
		display:block;
		margin:0 auto 0.25em;
	}
}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
	Gutenberg
*/

.single.type--article .inner.detail .post-body a {
	text-decoration:underline;
}

.single.type--article .inner.detail .post-body h2 {
	color: var(--moji-color);
	margin:2.5em 0 0.5em;
	padding:0.8em 0.4em 0.8em 0.5em; 
	font-size: 155%; 
	background: #f5f5f5;
	font-weight: 700;
	line-height:1.35;
	border-left:0.16em solid var(--acc-color);
}

.single.type--article .inner.detail .post-body h3 {
	color: var(--moji-color);
	margin:2.5em 0 1rem;
	padding:0 0 0.5em;
	font-size: 130%; 
	font-weight: 700;
	line-height:1.35;
	position:relative;
	overflow:hidden;
}
.single.type--article .inner.detail .post-body h3::before,
.single.type--article .inner.detail .post-body h3::after {
	position: absolute; bottom:0;
	content: "";
}
.single.type--article .inner.detail .post-body h3::before {

}
.single.type--article .inner.detail .post-body h3::after {

}
.single.type--article.site--advice .inner.detail .post-body h3::before,
.single.type--article.site--blog .inner.detail .post-body h3::before {
	left:0;
	width:240px;
	height:2px;
	background-image : linear-gradient(to right, var(--acc-color) 2px, transparent 2px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.single.type--article.site--advice .inner.detail .post-body h3::after,
.single.type--article.site--blog .inner.detail .post-body h3::after {
	left:240px;
	width:calc(100% - 240px); 
	height:2px;
	background-image : linear-gradient(to right, #c2c2c2 2px, transparent 2px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.single.type--article.site--news .inner.detail .post-body h3::before {
	left:0;
	width:240px;
	border-bottom:1px solid var(--acc-color);
}
.single.type--article.site--news .inner.detail .post-body h3::after {
	left:240px;
	width:calc(100% - 240px);
	border-bottom:1px solid #e2e2e2;
}

@media (max-width:899px) {
	.single.type--article.site--advice .inner.detail .post-body h3::before,
	.single.type--article.site--blog .inner.detail .post-body h3::before {	
		width:210px;
	}
	.single.type--article.site--advice .inner.detail .post-body h3::after,
	.single.type--article.site--blog .inner.detail .post-body h3::after {	
		left:216px;
		width:calc(100% - 216px); 
	}
	.single.type--article.site--news .inner.detail .post-body h3::before {
		width:210px;
	}
	.single.type--article.site--news .inner.detail .post-body h3::after {
		left:210px; 
		width:calc(100% - 210px); 
	}
}
@media (max-width:639px) {
	.single.type--article.site--advice .inner.detail .post-body h3::before,
	.single.type--article.site--blog .inner.detail .post-body h3::before {	
		width:180px;
	}
	.single.type--article.site--advice .inner.detail .post-body h3::after,
	.single.type--article.site--blog .inner.detail .post-body h3::after {	
		left:184px;
		width:calc(100% - 184px); 
	}
	.single.type--article.site--news .inner.detail .post-body h3::before {
		width:180px;
	}
	.single.type--article.site--news .inner.detail .post-body h3::after {
		left:180px; 
		width:calc(100% - 180px); 
	}
}
@media (max-width:480px) {
	.single.type--article.site--advice .inner.detail .post-body h3::before,
	.single.type--article.site--blog .inner.detail .post-body h3::before {	
		width:100px;
	}
	.single.type--article.site--advice .inner.detail .post-body h3::after,
	.single.type--article.site--blog .inner.detail .post-body h3::after {	
		left:104px;
		width:calc(100% - 104px); 
	}
	.single.type--article.site--news .inner.detail .post-body h3::before {
		width:100px;
	}
	.single.type--article.site--news .inner.detail .post-body h3::after {
		left:100px; 
		width:calc(100% - 100px); 
	}
}


.single.type--article .inner.detail .post-body h4 {
	color: var(--moji-color);
	margin:0 0 0.5em;
	padding:0 0 0.25em;
	font-size: 105%;
	font-weight: 700;
	line-height:1.35;
}

.single.type--article .inner.detail .post-body hr { 
	margin:2.5em 0; 
	height:1px; color:rgba(0,0,0,0.1);
	-moz-box-sizing: content-box; box-sizing: content-box; height: 0;
}


.single.type--article .inner.detail .post-body ul li:not([class]) {
	list-style: square;
	margin: 0.75em 0.5em;
	font-size:1em;
}

.single.type--article .inner.detail .post-body ol:not([class]) {
	padding-left: 1.5em;
}

.single.type--article .inner.detail .post-body ol:not([class]) li {
	list-style-type: decimal;
	padding-left: 0.5em;
	margin: 0.75em 0.5em;
}





/* =============================================================================
   Site 2:/advice/
   ========================================================================== */






/* =============================================================================
   Site 3:/product/
   ========================================================================== */

.subpage.site--product.archive #main-visual::after {
	-webkit-backdrop-filter: blur(0px);	
	backdrop-filter: blur(0px);
}

.site--product.front-page #main-visual h1 {
	position:absolute; top: calc(50% + 2.55rem);
	padding-top:0.75em;
	color:var(--acc-color);
	letter-spacing:0.2em; text-indent:0.2em;
}
.site--product.front-page #main-visual h1::before {
	position:absolute; top:-1.125em; right:0; left:0;
	content:""; width:1.25em; height:1.25em;
	margin:auto;
	background-image:url(./img/icon/lens.svg);
	background-size:contain;
}

/*
.site--product.front-page #pickup {padding:5em 0 0;} 
.site--product.front-page #pickup img.banner {
	width:100%; height:auto;
	aspect-ratio:693 / 404; object-fit:cover;
	border-radius:var(--radius-bnr);
}
*/

#product-home {padding:5em 0;} 

/* 
@media (max-width:900px) {
	#product-home {padding:7em 0 5em;} 
}
*/
@media (max-width:600px) {
	.front-page #product-home .grow-x h2 + p span {display:none;}
}


#product-home .inner .cell span.link-title {
	margin-top:-0.75em;
}
#product-home .inner .cell span.link-caption {
	display:inline-block;
	position:absolute; bottom:33%; right:0; left:0;
	margin-inline:auto;
	color:var(--base-color);
	font-size:0.9em;
	font-weight:400;
	z-index:20;
	transition:all 0.33s ease 0s;
}
#product-home .inner .cell a:hover span.link-caption {
	text-shadow:0 0 1px rgba(0,0,0,0.8),0 0 6px rgba(0,0,0,0.5);
	transition:all 0.22s ease 0s;
}

.site--product.front-page #appendix .outer.row-1 {display:none;}

.site--product.archive .brief-intro {
	margin:0 auto 3em; padding:1em 2em;
	background:var(--base-color);
	border-radius:var(--radius-bnr);
}
.site--product.archive .brief-intro h2 {
	color:var(--acc-color);
	margin:0.75em 0 0.5em; padding:0;
	font-size:175%;
	font-weight:700;
	border:none;
}
.site--product.archive .brief-intro h2 + p {margin-top:0.75em;}



@media (min-width:1170px) {
	
	.site--product.archive #applicable-products {
		padding-top:calc(var(--section-padding-narrow) + 0.5em);
	}

	.site--product.archive .brief-intro {
		position:relative;
	}
	.site--product.archive .brief-intro::before {
		position:absolute; display:block; 
		z-index:2; pointer-events:none;
		font-size:0.9em; font-weight:500; line-height:1.35; text-align:right;
		content:"カタログから探す"; 
		top:-3.5em; right:0em; 
		padding:1.25em 1.75em;
		width:11em; height:3.5em;
		background:var(--base-color);
		border-radius:var(--radius-btn) var(--radius-btn) 0 0;
	}
	.site--product.archive .brief-intro::after {
		position:absolute; display:block;
		z-index:3; pointer-events:none;
		content:"";
		top:-3.75em; height:4em;
		right:9.5em; width:3.25em;
		background-image:url(./img/illust/catalog-kara.svg);
		background-repeat:no-repeat;
		background-position:right center;
		background-size:contain;
	}
	
	.site--product.archive .pagination {margin-bottom:-1.25em;}
	
}

@media (max-width:1169px) {
	.site--product.archive #applicable-products {padding:3.25em 0;}
	.site--product.archive .pagination {margin:0.25em auto 0;}
}
@media (max-width:600px) {
	.site--product.archive #applicable-products {padding:2.5em 0;}	
	.site--product.archive .pagination {margin:-1.25em auto 0;}
}

.pager .reset {margin:1em 0; font-size:90%; text-align:center;}

.site--product.search-result #applicable-products,
.site--joshikai.search-result #applicable-products {padding:5em 0;}

.site--product.search-result .pagination,
.site--joshikai.search-result .pagination {margin:0 auto 0.5em;}
.site--product.search-result .pager .reset,
.site--joshikai.search-result .pager .reset {margin:1em 0 -1.25em; }



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
	site--product.single
*/

.site--product #main-visual.type-thumbnail {
	position:relative;
	overflow:hidden;
}
.site--product #main-visual.type-thumbnail .back-layer {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	width:100%; height:100%;
	background-size:2px 2px;
	background-repeat:repeat;
	z-index:6;	
}
.site--product #main-visual.type-thumbnail .mid-layer {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	width:100%; height:100%;
	-webkit-backdrop-filter: blur(2px) contrast(95%);	
	backdrop-filter: blur(2px) contrast(95%);
	z-index:7;	
}
.site--product #main-visual.type-thumbnail span.product-name {
	display:block; 
	position:absolute;
	right:0; bottom:24px; left:0;
	width:min(100%, 1190px); 
	height:calc(100% - 148px - 24px); 
	margin:auto;
	text-align:center;
	overflow:hidden;
	z-index:8;
}
.site--product #main-visual.type-thumbnail span.product-name img.product-eyecatch {
	width:min(100%, 1190px);
	max-width:1190px;
	height:100%;
	object-fit:cover;
	object-position:50% 50%;
}

@media (max-width:1169px) {
	.site--product #main-visual.type-thumbnail span.product-name {
		right:0; bottom:0; left:0;
		width:100%; 
		height:calc(100% - 68px); 
	}
	.site--product #main-visual.type-thumbnail span.product-name img.product-eyecatch {
		width:100%;
		max-width:100%;
		height:100%;
	}	
}
@media (max-width:480px) {
	.site--product #main-visual.type-thumbnail span.product-name {
		height:calc(100% - 62px); 
	}
}


.site--product.single .post-meta {
	padding-bottom:0.5em; 
}
.site--product.single .post-meta h1{
	margin:0.75em 0 0.5rem;
	color:var(--acc-color);
}
.site--product.single .post-meta .element {
	display:block; padding:0 0.5em 0.5em 0;
	margin-bottom:0.5em;
}
.site--product.single .post-meta .element .post-category ul li {
	margin:0 0.25em 0.25em 0;
}
.site--product.single .post-meta .preface {margin:1em 0 2em;}

.site--product.single .post-meta .catalog dl {margin:2em 0 2em; border:1px solid var(--acc-color);}	
.site--product.single .post-meta .catalog dt {margin:0; padding:0.5em 1em; background:var(--acc-color); color:#fff; font-weight:700;}	
.site--product.single .post-meta .catalog dd {margin:0; padding:0.75em 1em;}	
.site--product.single .post-meta .catalog dd a {color:var(--moji-color);}
.site--product.single .post-meta .catalog dd a:hover {color:var(--hover-color);}

.site--product.single .post-meta .catalog dd ul {padding-left:0;}
.site--product.single .post-meta .catalog dd ul li {
	font-size:1rem; margin:1em 1em 1em 0; 
	list-style:none; 
	line-height:1.35em;
	height: auto;
	background: url(./img/icon/pdf.svg) no-repeat 0 0;
	background-size:1.5em 1.5em;
	padding: 0.125em 0 0.25em 2em;
	margin: 0.75em 0;
}


.site--product.single .post-body.legacy-inside > div:not([class]) {
	display:flex !important; 
	flex-direction:row; flex-wrap:wrap;
	justify-content:center; 
}
.site--product.single .post-body.legacy-inside > div > div.dublewaku,
.site--product.single .post-body.legacy-inside > div > div.float400a,
.site--product.single .post-body.legacy-inside > div > div.float400b,
.site--product.single .post-body.legacy-inside > div > div.floatleft824,
.site--product.single .post-body.legacy-inside > div > div.floatright824 {
	float:none !important;
	width:calc(50% - 0.5em);
	margin:0 !important;
}
.site--product.single .post-body.legacy-inside > div > div.dublewaku:first-child,
.site--product.single .post-body.legacy-inside > div > div.float400b,
.site--product.single .post-body.legacy-inside > div > div.floatleft824 {
	margin-right:1em !important
}

@media (max-width:839px) {
	.site--product.single .post-body.legacy-inside > div {
		flex-direction:column; flex-wrap:wrap;
	}
	.site--product.single .post-body.legacy-inside > div > div.dublewaku,
	.site--product.single .post-body.legacy-inside > div > div.float400b,
	.site--product.single .post-body.legacy-inside > div > div.floatleft824,
	.site--product.single .post-body.legacy-inside > div > div.floatright824 {
		width:100%;
	}
}

.site--product.single .post-body.legacy-inside > div.logobar2,
.site--product.single .post-body.legacy-inside > p:empty {display:none;}

.site--product.single .post-body.legacy-inside > p {margin: 1.5em auto; text-align: left;}
.site--product.single .post-body.legacy-inside > p:not([class]) {
	font-feature-settings:"palt"; font-size:0.95em;
}


.site--product.single .post-body .spectablewaku {
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
}
@media (min-width:893px) {
	.site--product.single .post-body .spectablewaku {
		overflow:hidden;
	}
}
@media (max-width:892px) {
	.site--product.single .post-body .spectablewaku {
		overflow:auto;
	}
}
.site--product.single .post-body .spectablewaku .spectable {
	width:100%;
	max-width:825px;
	margin:1.5em 0;
	border:0;
	font-size:0.88em;
}
.site--product.single .post-body .spectablewaku .spectable tr th, 
.site--product.single .post-body .spectablewaku .spectable tr td {
	width:auto;
	min-width:10em;
	padding:0.75em;
	line-height:1.35;
	position:relative;
	z-index:1;
}
.site--product.single .post-body .spectablewaku .spectable tr > td:first-child {
	position:sticky; 
	left:0;
	white-space:nowrap;
	min-width:8em;
	opacity:0.95;
	z-index:2;
}




/* =============================================================================
   Site 4:/joshikai/
   ========================================================================== */

.site--joshikai.front-page #main-visual h1 {color:#fff; z-index:10;}

.site--joshikai.front-page #main-visual::after {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.site--joshikai.front-page #main-visual.type-photo::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(220,110,180,0.55);
  z-index: 7;
}

.site--joshikai.front-page .brief-intro {
	padding:1em;
	border-radius:var(--radius-bnr);
	background:var(--base-color);
}

@media (max-width:599px) {
	.site--joshikai.front-page .post-card {padding:0.5em 0;}
}

.site--joshikai.front-page #recent-info {padding:6em 0; background:var(--base-color);}

.site--joshikai.front-page .sb_instagram_header {display:none;}

.site--joshikai.front-page .sbi_follow_btn.sbi_custom a {background:var(--acc-color) !important;}

.site--joshikai.front-page div#sbi_images {padding:0 !important;}
.site--joshikai.front-page div#sbi_images .sbi_item .sbi_photo_wrap {
	padding:5px !important;
}
.site--joshikai.front-page div#sbi_images .sbi_item .sbi_photo_wrap a {
	border-radius:var(--radius-btn) !important;
	overflow:hidden !important;
}
.site--joshikai.front-page div#sbi_load {margin-top:10px !important;}




/* =============================================================================
   Site 6:/news/
   ========================================================================== */




/* =============================================================================
   Site 8:/blog/ 
   ========================================================================== */



/* =============================================================================
   Search Across Multisite
   ========================================================================== */

.search-result #anchor-link {
	padding:1em 0.5em 2em;
}
.search-result #anchor-link .gbtn-accent {
	display:inline-block;
	position:relative;
	margin:0.5em 0.25em;
	padding:0.5em 1.25em 1.75em;
	font-size:0.9em;
	border:1px solid var(--acc-color);
	background:var(--base-color);
}
.search-result #anchor-link .gbtn-accent:hover {
	border:1px solid var(--hover-color);
	background:rgba(120,205,235,0.1);
	transition:all 0.14s ease 0s;
}
.search-result #anchor-link .gbtn-accent::after {
    content: "";
    width: 8px; height: 8px;
    position: absolute;
    left: 50%; bottom: 14px; 
    margin-left: -4px;
    border-right: 1px solid var(--acc-color); border-top: 1px solid var(--acc-color);
    transform: rotate(135deg); transition: all 0.14s linear 0s;
}


.search-result .result-subsection {padding:2.5em 0 3em !important;}
.result-subsection h2 {margin-bottom:1rem; text-align:center;}
.result-subsection p {margin:0 0 1.25em; text-align:center;}
.result-subsection.product-list p {margin:0 0 0.375em; text-align:center;}
.result-subsection .not-found {margin:1em 0 0; width:100%; text-align:center;}
.result-subsection .inner {padding:1em 0 2em;}
.result-subsection:nth-child(even) {background:var(--bg-color-slight);}
.result-subsection:nth-child(odd) {background:var(--bg-color-mlight);}

.result-subsection .product-list .tanzaku {width:100%;}
.result-subsection .post-card .title {font-size:0.95rem; line-height:1.4;}