@charset "utf-8";


.safariOnly {display:none;}
_::-webkit-full-page-media, _:future, :root .safariOnly {
	display:block;
}

.exceptSafari {display:block;}
_::-webkit-full-page-media, _:future, :root .exceptSafari {
	display:none;
}



/* **********************************************
	TopPage, Josh
*/


:where(.toppage,.josh) h2 {letter-spacing:0;}
:where(.toppage,.josh) h2.jp span.en-sub {
	display:block;
	font-family:var(--eisuuji);
	font-weight:200;
	font-size:0.75em;
	margin-bottom:0.375rem;
	line-height:1.35;
	opacity:0.5;
}

:where(.toppage,.josh) h3 {font-size:150%;}

body:not(.josh):not(.wooc):not(.single):not(.blog):not(.archive):not(#iframed) #main :is(h2,h3) {color:var(--corp-color);}
:where(.toppage) #main :is(h2,h3) {color:var(--corp-color);}
:where(.josh,.wooc,.cart,.checkout,.single,.blog,.archive,.#iframed) #main :is(h2,h3) {color:var(--acc-color);}


@media (max-width:900px) {
	:where(.toppage,.josh) :is(h2, h3) {text-align:center;}
	:where(.toppage,.josh) h2 {text-indent:0.1em;}	
}
@media (max-width:480px) {
	:where(.toppage,.josh) h2 {font-size:250%; letter-spacing:0; text-indent:0;}
	:where(.toppage,.josh) h3 {font-size:135%;}
}



@media (max-width:1314px) {
	:where(.toppage,.josh) #main :not(#blog-intro) .wide-container {padding-inline:1rem;}
}
@media (max-width:1204px) {
	:where(.toppage,.josh) #main :not(#blog-intro) .semi-wide-container {padding-inline:1rem;}
}
@media (max-width:1034px) {
	:where(.toppage,.josh) #main :not(#blog-intro) .container {padding-inline:1rem;}
}
@media (max-width:768px) {
	:where(.toppage,.josh) #main :not(#blog-intro) :is(.container, .semi-wide-container, .wide-container) {padding-inline:1rem;}	
}




@media(min-width:1077px) {
	.josh #common-header {position:relative; background:transparent;}
	.josh #common-header::before {
		position:absolute; top:1.25em; left:0; right:0; 
		content:""; height:2.5em; width:100vw;
		background:rgba(255,255,255,0.7);
		z-index:-1;
	}
	.josh #sticker {background:transparent;}
	.josh #sticker:not(.fixed) .logo {width:auto; margin:0.25em 0 1.25em;}
	#header-navi-btns {margin:0 1em;}
	#header-navi-btns a.btn-slim {
		display:inline-block; width:7em !important; 
		margin:0.25em 0.25em !important; padding:0.125em 0 !important;
		font-size:90%; font-weight:bold;
		text-align:center; font-feature-settings:"palt";
	}
}


:where(.toppage,.josh) #main-visual {
	position:relative;
	top:0; right:0; left:0;
	width:100%; height:90vh;
	background:var(--acc-color);
	z-index:0;
	overflow:hidden !important;
	text-align:center;
}
.toppage #main-visual {
	background:var(--bg-corp);
}


:where(.toppage,.josh) #onslide-logo {
	position:absolute; 
	top:41%; left:50%;
	transform:translateX(calc(0px - 50%));
	margin:0 auto;
	width:auto; height:auto; 
	text-align:left;
	z-index:14; 
}
:where(.toppage,.josh) #onslide-logo a {display:block; text-align:left;}
:where(.toppage,.josh) #onslide-logo .logo {width:auto; height:70px; margin:0;}

.josh #onslide-image {
	display:block;
	position:absolute; top:50%; right:0; left:0; 
	transform:translate(0px, -50%);
	width:auto; height:90%;
	max-width:400px;
	margin:auto;
	opacity:0.3;	
	z-index:3; 
}
.josh #onslide-image .product-image {
	display:block;
	position:absolute; top:0; right:0; bottom:0; left:0;
	width:auto; height:100%;
	margin:auto; 
	z-index:3;
}


:where(.toppage,.josh) #catch-copy-main {
	display:inline-block;
	position:absolute; 
	top:calc(41% + 96px); left:0; right:0; 
	width:auto;
	padding:0 2.5rem 0 calc(2.5rem + 0px);
	text-align:center; 
	z-index:4; 
	font-family: var(--eisuuji); 
	font-size:26px; 
	font-weight:200;
	color:#fff; line-height:1.35; letter-spacing:0;
	font-feature-settings:"palt";
	overflow:hidden;
}
:where(.toppage,.josh) #catch-copy-main span {
	display: inline-block;
	opacity: 0;
	transform: translate(65%, 117.5%) scale(1.75);
	transition: 0.4s ease-in-out;
}
:where(.toppage,.josh) #catch-copy-main span.reveal {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition: 0.4s ease-in-out;
}
.toppage #catch-copy-main {
	color:var(--corp-color);
}


@media (min-width:1520px) {
	:where(.toppage,.josh) #onslide-image {}	
	:where(.toppage,.josh) #catch-copy-main {}
}
@media (min-width:1360px) {

}	
@media (min-width:1360px) and (max-width:1519px) {
	:where(.toppage,.josh) #onslide-image {}	
	:where(.toppage,.josh) #catch-copy-main {}
}
@media (max-width:1359px) {
	:where(.toppage,.josh) #catch-copy-main {}
}
@media (max-width:1200px) {
	:where(.toppage,.josh) #catch-copy-main {}
}
@media (max-width:1169px) {
	:where(.toppage,.josh) #onslide-image {}	
}
@media (min-width:1077px) {
	:where(.toppage,.josh) #main-visual {height:clamp(600px,90vh,51em);} 
}
@media (max-width:1076px) {
	:where(.toppage,.josh) #main-visual {height:clamp(600px,90vh, 47em);}
}
@media (max-width:1024px) {
	:where(.toppage,.josh) #onslide-image {}	
}
@media (min-width:901px) and (max-width:1039px) {

}
@media (max-width:900px) {

}
@media (max-width:839px) {
	:where(.toppage,.josh) #onslide-image {}	
}
@media (max-width:840px) {
	:where(.toppage,.josh) #main-visual {height:clamp(30vmax,110vmin,880px);} 
}
@media (max-width:693px) {
	:where(.toppage,.josh) #main-visual {height:clamp(600px,60vmax,200vmin);} 
}
@media (max-width:600px) {

}
@media (max-width:480px) {
	:where(.toppage,.josh) #main-visual {height:clamp(390px,140vmin,70vmax);} 
	.toppage #onslide-logo {top:31%;}
	.toppage #catch-copy-main {top:52%;}
	.toppage #welcome .solo.pd-side {padding-inline:4px !important;}
	.toppage #welcome h2 {font-size:1.55rem; text-align:left !important;}
}
@media (max-width:359px) {
	:where(.toppage,.josh) #main-visual {height:clamp(424px,140vmin,70vmax);} 
}



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

.toppage #main-visual {background: url(./img/bg/paper02gs.webp) repeat 0 0;}
.is-pc.toppage #main-visual {	background-attachment:fixed;}

.bg-paper {background: url(./img/bg/paper02gs.webp) repeat 0 0;}
.is-pc .bg-paper {background-attachment:fixed;}


#welcome {
	position:relative;
	padding:9em 0 2em;
	background:var(--base-color);
}


.toppage h2.jp {font-size:240%;}

#page-intro.body-menu { 
	padding:0em 0 6em;
	background::var(--base-color); /*var(--bg-corp);	*/
	text-align:center;
}
.body-menu .inner {
	margin:4em auto 1em;
	width:100%; max-width:31em; /*32em;*/
	position:relative;
	padding:0 1.5em 0.5em;
}
.body-menu .inner h2 {
	/*font-size:200%; font-weight:500;*/
	text-align:center; padding:0.5em 0 0;
	margin-bottom:1.75rem;
}
.body-menu .inner p {margin:1.75em auto 0.5em; text-align:center;}

.body-menu .inner .imgframe { 
	position:relative;
	display: grid; place-items: center;	
	margin:1.25em auto;
	width:100%; height:auto;
	aspect-ratio:4 / 3;
	overflow:hidden;
	/*background:var(--bg-slight);*/
	background:#f3f3f3;
}
.body-menu .inner .imgframe img {transition:all 0.28s ease 0s;}
.body-menu .inner .imgframe img.product-image {filter: drop-shadow( 0px 4px 6px rgba(0,0,0,0.5) );}
.body-menu .inner .imgframe img.contain {object-fit:contain; width:90%; height:auto; aspect-ratio:4 / 3;}
.body-menu .inner .imgframe img.cover {object-fit:cover; width:120%; height:auto; aspect-ratio:4 / 3;}
.body-menu .inner .btn-large {margin-inline:0 !important; max-width:100% !important;}
@media (hover: hover) {
	.body-menu .inner .imgframe:hover img {transform:scale(1.03); transition:all 0.1s esae 0s; }
}
@media (max-width:599px) {
	.body-menu .inner {padding-inline:0;}
}
@media (max-width:480px) {
	:is(.toppage,.josh) h2.jp {letter-spacing:0; text-indent:0;}
}
@media (max-width:360px) {
	.toppage .duo:is(.pd-around,.pd-side) {padding-inline:0;}
}



/* **********************************************
	Josh
*/
.josh #main-visual #logo-prefix {
	width:min(100%,400px);
	margin-inline:auto;
	position:absolute; 
	top:34%; left:0; right:0; 
	text-align:center; 
	z-index:4; 
	overflow:hidden;
	color:#fff; font-size:1.35rem; font-weight:500;
}
.josh #main-visual #onslide-circle {
	width:min(100%,400px);
	margin-inline:auto;
	position:absolute; 
	top:calc(41% + 106px); left:0; right:0; 
	text-align:center; 
	z-index:4; 
	overflow:visible;
}
.josh #main-visual #onslide-circle .cell {padding:0.125rem;}
.josh #main-visual #onslide-circle .small-circle {
	width:clamp(1.8rem,92%,7rem);
	margin-inline:auto;
	aspect-ratio:1;
	border:1.5px solid #fff; border-radius:100%;
	display: grid; place-items: center;	
	font-size:clamp(0.75rem,8vw,1.4rem); font-weight:400; line-height:1;	
	color:#fff;
	background:rgba(25,85,179,0.25);
	/*
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);	
	*/
}

.josh #main-visual #onslide-circle .cell:first-child {
	animation-fill-mode:both;
	animation-duration:0.6s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 1.6s; 	
}
.josh #main-visual #onslide-circle .cell:nth-child(2) {
	animation-fill-mode:both;
	animation-duration:0.6s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 1.75s; 
}
.josh #main-visual #onslide-circle .cell:last-child {
	animation-fill-mode:both;
	animation-duration:0.6s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 1.9s; 
}


@media (max-width:530px) {
	.josh #main-visual #logo-prefix {
		width:min(96%,400px);
		top:35%;  
		font-size:1.15rem;
	}	
	.josh #main-visual #onslide-circle {width:min(80%,350px); margin-top:-1rem;}
	.josh #main-visual #onslide-circle .cell {width:33%; padding:0 0.25rem;}
	.josh #main-visual #onslide-circle .small-circle {
		width:clamp(1.8rem,96%,7rem);
		font-size:clamp(0.5rem,5vw,1.2rem); 
	}
}
@media (max-width:480px) {

}





#our-solution {padding:7em 0 4.5em;}
#our-solution * {color:var(--acc-color);}
/* #our-solution .overview {line-break:loose;} */

#our-solution .illust.bio-degradation {width:min(100%,37.5em); margin-inline:auto;}
	
#our-solution .cell {padding:1em;}
#our-solution .circle {
	width:clamp(2rem,95%,16rem);
	margin-inline:auto;
	aspect-ratio:1;
	border:2px solid var(--acc-color); border-radius:100%;
	display: grid; place-items: center;	
	font-size:320%; font-weight:200; line-height:1;
}
#our-solution .circle span {
	display:block; margin-top:-0.125em;
}
#our-solution .caption {
	margin:2rem auto;
	width:min(96%,20em);
	text-align:justify;
	font-feature-settings:"palt";
}

@media (min-width:901px) {
	#our-solution .small-device-only {display:none;}	
}
@media (max-width:900px) {
	#our-solution .small-device-only {
		display:block;
		width:530px;
		margin:2em auto 3.5em;
	}
	#our-solution .small-device-only .cell {width:33%; padding:0.675rem;}
	#our-solution .small-device-only .small-circle {
		width:clamp(2rem,95%,9rem);
		margin-inline:auto;
		aspect-ratio:1;
		border:1.5px solid var(--acc-color); border-radius:100%;
		display: grid; place-items: center;	
		font-size:1.8rem; font-weight:400; line-height:1;		
	}
	#our-solution .solo.pd-side {text-align:justify; padding-bottom:5rem;}
}
@media (min-width:481px) and (max-width:900px) {
	#our-solution .circle {width:clamp(2rem,90%,13.5rem); font-size:clamp(110%,7.7vw,270%); font-weight:300;}	
}
@media (max-width:530px) {
	#our-solution .small-device-only {
		width:min(96%,350px);
		margin:1.5em auto 2em;
	}
	#our-solution .small-device-only .cell {width:33%; padding:0.325rem;}
	#our-solution .small-device-only .small-circle {
		width:clamp(2rem,95%,9rem);
		margin-inline:auto;
		aspect-ratio:1;
		border:1.5px solid var(--acc-color); border-radius:100%;
		display: grid; place-items: center;	
		font-size:1.2rem; font-weight:400; line-height:1;		
	}
	#our-solution .solo.pd-side {padding-inline:0.5em; text-align:justify; padding-bottom:3rem;}
}
@media (max-width:480px) {
	#our-solution .circle {width:clamp(2rem,90%,12rem); font-size:290%; font-weight:300;}
}



#product-intro {padding:3em 0 5em;}
#product-intro .image-side {
	position:relative;
	display: grid; place-items: center;
	aspect-ratio:1;
} 
#product-intro .image-side .inner {
	position:absolute; inset:0; width:100%; height:100%; aspect-ratio:1;
	display: grid; place-items: center;	
	background:var(--bg-slight);
}
#product-intro .product-image {
	width:30%; height:auto;
	/*width:auto; height:80%;*/ 
	/*max-height:72.5vw;*/
	margin-inline:auto;
	filter:drop-shadow( 0px 4px 6px rgba(0,0,0,0.5) );
}
#product-intro ruby.kana rt {font-size:1rem; margin-bottom:-0.8em;}
@media (min-width:1100px) {
	#product-intro .image-side {transform:translateX(4.25em);}
	#product-intro .text-side {transform:translate(-2em,2.5em); text-align:left;}
	#product-intro .text-side .caption {width:80%;}
	#product-intro .text-side .caption .description {}
	#product-intro .text-side .price {font-size:1.35em;}
}
@media (min-width:901px) and (max-width:1099px) {
	#product-intro .image-side {transform:translateX(-1em);}
	#product-intro .image-side .inner {scale:1.2;}
	#product-intro .text-side {transform:translate(-5em,0.5em); text-align:left;}
	#product-intro .text-side .inner {margin-right:-5em;}
	#product-intro h2 span.jp-main {display:inline-block; transform:translateY(-0.8rem);}
	#product-intro .text-side .caption {width:95%;}
	#product-intro .text-side .caption .description {}
	#product-intro .text-side .price {font-size:1.35em;}
}
@media (max-width:900px) {
	#product-intro .text-side .price {font-size:1.5em;}
	#product-intro .inner {max-width:34rem; margin-inline:auto; text-align:left;}	
}
@media (min-width:740px) and (max-width:900px) {
	#product-intro .image-side {max-width:34rem; margin-inline:auto;}
}
@media (min-width:481px) and (max-width:768px) {
	#product-intro h2 {font-size:clamp(245%,8vw,300%);}
}


#data-intro {padding:3em 0;}
#data-intro h2 {margin-bottom:0.5rem;}
#data-intro .headline {font-size:1.6em; margin-block:1em; line-height:1.5;}
#data-intro .image-side {padding:0.75em 1.5em 1em; text-align:left;}
#data-intro .image-side h3 {font-size:1.35rem; font-weight:500; margin:1.5rem 0; text-align:left;}
#data-intro .image-side .fig {width:95%; margin-inline:auto;}
@media (max-width:1169px) {
	#data-intro  :is(.text-side, .image-side) {text-align:center;}
	#data-intro .inner {max-width:36rem; margin-inline:auto; text-align:left;}
}
@media (max-width:530px) {
	#data-intro .headline {text-align:center;}
	#data-intro .image-side {padding:0 0 3em;}
	#data-intro .image-side .fig {width:100%;}
}



#features-intro {padding:3em 0 8em;}
#features-intro .headline {text-align:center; font-size:1.8em; margin:-0.5em 0 1.25em; font-weight:500; line-height:1.5;}
#features-intro h3 {text-align:center; margin:1rem 0 1.75rem; color:var(--moji-color); border-bottom:1px solid #aaa;}
@media (max-width:1169px) {
	#features-intro .inner {max-width:36rem; margin-inline:auto; text-align:left;}	
}



#application-intro {padding:5em 0 3.5em;}

#application-intro .each-app {
	position:relative;
	text-align:center;
	margin-bottom:1.5em;
	cursor:pointer;
}

#application-intro .photo {
	width:90%; height:auto;
	margin:0.5em auto;
	aspect-ratio:1 / 1; object-fit:cover;
	background:rgba(0,0,0,0.2);
	border-radius:100%; overflow:hidden;
	transition:all 0.22s ease-in-out 0s;
}


@media (hover: hover) {
	#application-intro .each-app:hover .photo {
		transform:scale(1.035); box-shadow:0 2px 1.15em 2px rgba(0,0,0,0.25); transition:all 0.14s ease-in-out 0s; 
	}
}


#application-intro .caption {
	position:absolute; top:1.325rem; left:0.25rem;
	padding:0.325em 1em 0.5em;
	background:var(--acc-color);
	color:#fff;
	text-align:left;
	font-feature-settings:"palt";
	border-radius:var(--radius-small);
}

#application-intro .caption :is(.headline, .title) {display:inline-block;}
#application-intro .caption .title {font-size:1rem; line-height:1;}
#application-intro .caption .headline {font-size:1rem; color:#999;}




.modal-window {
	display:none;
	width:min(94%,36em);
	height:90svh;
	/*overflow:hidden !important;*/
	position:relative;
	overflow:hidden;
}



.modal-window.fancybox-content {
	padding:44px 44px 2rem !important;
    overflow-y: scroll;	
	height:auto !important;
	transform: translateZ(0); 
	height: -webkit-fill-available;
	-webkit-overflow-scrolling: touch;
}
.modal-window .text-frame {padding:1rem 2.25rem 0;}


/*
.modal-window .fancybox-slide--html {
    overflow-y: scroll;	
	height:auto !important;
	transform: translateZ(0); 
	height: -webkit-fill-available;
	-webkit-overflow-scrolling: touch;
}
/*
.is-ipad .modal-window.fancybox-content {
	position:relative;
    overflow-y: scroll;	
	height:auto !important;
	transform: translateZ(0); 
	height: -webkit-fill-available;
	-webkit-overflow-scrolling: touch;
}
*/
.modal-window .fancybox-button.fancybox-close-small {background:var(--acc-color); opacity:1 !important;}
.modal-window .fancybox-button.fancybox-close-small svg path {color:#fff;}
/*
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewbox="0 0 24 24">
<path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
*/

.modal-footer {margin:2em 0 3em; text-align:center;}
.close-current-modal {display:inline-block; cursor:pointer; padding:0.5em 1.25em; border-radius:6px; border:1px solid #888; background:#fff; font-family:var(--sans); color:#666; font-size:0.85rem;}


.is-ipad .modal-window.fancybox-content {width:90vw; height:100vh; padding:44px !important;}
@media (min-width:901px) {
	.is-ipad .modal-window .inner {display:flex; gap:1.5rem;}
	.is-ipad .modal-window .photo-frame {width:calc(45% - 0.75rem);}
	.is-ipad .modal-window .caption {width:calc(55% - 0.75rem);;}
	.is-ipad .switch:has(.close-current-modal) {display:none;}	
}
@media (max-width:900px) {
	.is-ipad .modal-window .photo-frame {width:max(50%,440px); margin-inline:auto;}	
}

.modal-window .photo-frame {text-align:center;}
.modal-window .photo-frame .photo {margin:0 auto 1.5em; width:min(100%,1000px);}
.modal-window .photo:has(.no-image) {display:inline-block; width:min(100%,800px); aspect-ratio:1 / 1; background:rgba(0,0,0,0.2);}
.modal-window .photo .no-image {margin-top:30px; width:auto; height:210px;}
.modal-window .caption {text-align:center;}
.modal-window .caption :is(span,div) {display:inline-block; padding:0.5rem;}
.modal-window .caption .title {display:block; font-size:1.6rem; color:var(--acc-color); margin-block:0.375em; font-weight:500;}
.modal-window .caption .headline {display:block; font-size:1.2rem; margin-block:0.5em; color:#888; font-weight:500;}
.modal-window .caption .summary {margin:1rem 0 0; font-size:1rem; line-height:1.7; text-align:left;}
@media (max-width:530px) {
	.modal-window.fancybox-content {padding:0 0 2rem !important;}
	.modal-window .caption {font-feature-settings:"palt"; padding-inline:1rem;}
	.modal-window .caption .title {text-align:left; font-size:1.1rem; font-weight:700;}
	.modal-window .caption .headline {text-align:left; font-size:0.95rem; font-weight:500;}
	.modal-window .caption .summary {margin-top:0; font-size:0.825rem;}
}


@media (min-width:1170px) {
	#application-intro .caption::before {
		position:absolute; bottom:-1.4rem; left:3.5em;
		content:""; width:0; height:0;
		border: 0.75em solid transparent;
		border-top: 0.75em solid var(--acc-color);
		border-right: 0.75em solid var(--acc-color);
	}	
}
@media (max-width:1169px) {
	#application-intro .caption::before {
		position:absolute; bottom:-0.9rem; left:2em;
		content:""; width:0; height:0;
		border: 0.5rem solid transparent;
		border-top: 0.5rem solid var(--acc-color);
		border-right: 0.5rem solid var(--acc-color);
	}		
}
@media (min-width:901px) and (max-width:1399px) {
	#application-intro .caption .headline {font-size:0.95rem; font-feature-settings:"palt";}	
}
@media (min-width:901px) and (max-width:1199px) {
	#application-intro .caption {padding: 0.125em 0.75em 0.25em;}
	#application-intro .caption .title {font-size:clamp(0.825rem,1.5vw,1rem);}
}
@media (max-width:999px) {
	#application-intro #members { justify-content:center; }
}
@media (max-width:900px) {
	#application-intro .each-app {padding-top:1em;}
}
@media (max-width:640px) {
	#application-intro .each-app {padding:0; margin-block:0;}		
	#application-intro .caption .headline {font-size:0.925rem; padding-inline:0;}
}
@media (max-width:480px) {
	#application-intro .each-app .photo {}
	#application-intro .caption {padding:0.25em 0.5em 0.5em; line-height:1; margin-inline:-1em;}
	#application-intro .caption .title {font-size:0.8rem;}
	#application-intro .caption .headline {font-size:0.85rem;}
}







#faq {padding:5em 0 6.5em;}
#faq dl.q-and-a {
	background:var(--acc-color);
	border:2px solid var(--acc-color);
	border-radius:5px;
}
#faq dl.q-and-a :is(dt, dd) {
	position:relative;
	z-index:1;
}
#faq dl.q-and-a :is(dt, dd) span {display:inline-block;}
#faq dl.q-and-a dt {
	padding:calc(1rem - 2px) 1rem 1rem 5.5rem;
	color:#fff;
	min-height:calc(4.5em - 4px);
	font-size:125%; font-weight:500;
	display:flex; align-items:center; 
}
#faq dl.q-and-a dd {
	padding:1rem 1rem 1rem 5.5rem;
	background:#fff;
	min-height:4.5em;
	border-radius:0 0 3px 3px;
}
#faq dl.q-and-a dt::after {
	content:"Q"; 
	position:absolute; top:1.675rem; left:0.875rem;
	font-family:'Racing Sans One'; font-size:4.75rem;
	color:var(--base-color);
	z-index:2;
	opacity:0.5;
}
#faq dl.q-and-a dd::after {
	content:"A"; 
	position:absolute; top:1.675rem; left:1.25rem;
	font-family:'Racing Sans One'; font-size:4.75rem;
	color:var(--acc-color);
	z-index:2;
	opacity:0.5;
}

@media (max-width:530px) {
	#faq dl.q-and-a dt {
		padding:calc(1rem - 2px) 1rem 1rem 3.5rem;
		font-size:105%;
	}	
	#faq dl.q-and-a dd {
		padding:1rem 1rem 1rem 3.5rem;
	}	
	#faq dl.q-and-a dt::after {
		top:1.35rem; left:0.5rem;
		font-size:3.5rem;
	}
	#faq dl.q-and-a dd::after {
		top:1.5rem; left:0.75rem;
		font-size:3.5rem;
	}
}







#blog-intro {padding:5em 0;}





.entry-meta span.row { margin:0 16px 0 0;}
.entry-meta span.post-date { font-family: 'Geosans-L'; font-size:15px; color:#666; }
.entry-meta span.category, .entry-meta span.author,
.entry-meta span.tags { font-family: 'SosaIcon'; font-size:20px; color:#ddd;}
.entry-meta span.commented { font-family: 'SosaIcon'; font-size:20px; color:#fff; }


.post-body section#custom-field {padding:8px 16px;}
.post-body section#custom-field h3.member {border:none; padding-left:0; margin-top:1em; margin-bottom:0.25em; color:#f7f7e7; text-shadow:1px 1px 4px #333,1px 1px 10px #777;}

.recent-post th, .recent-post td {border:none;}  
.recent-post th {width:125px; padding-right:0;}
.recent-post div.post-tn {width:100px; height:100px; background:rgba(0,0,0,0.2); overflow:hidden; border-radius:var(--radius-tn); transition:all 0.18s linear 0s;}
.recent-post td {line-height:1.5em; padding-right:0;}
.recent-post div.post-tn:hover {/*transform:translateX(6px);*/ transform:scale(1.1); transition:all 0.05s ease-in-out;}

.recent-post-small th, .recent-post-small td {border:none;}  
.recent-post-small th {width:100px; padding-right:0;}
.recent-post-small th div.post-tn {width:80px; height:80px; background:rgba(0,0,0,0.2); overflow:hidden; border-radius:var(--radius-tn); transition:all 0.18s linear 0s;}
.recent-post-small td {line-height:1.5em; padding:0.75em 0 0.75em 1em; font-size:90%;}


.blog-sel-trio p {font-size:14px; line-height:1.5em; margin-top:0;}
.blog-sel-trio .post-tn {display:block; float:left; width:64px; height:64px; margin:0 8px 8px 0; background:rgba(0,0,0,0.2); overflow:hidden;}
.blog-sel-trio .post-tn {display:block; float:left; width:64px; height:64px; margin:0 8px 8px 0; background:rgba(0,0,0,0.2); overflow:hidden;}
.rel-one table {margin:0;}
.blog-rel th, .blog-rel td {border:none;} 
.blog-rel th {width:30% !important; min-width:170px !important; max-width:180px !important; padding:10px; text-align:center;}
.blog-rel td {width:auto !important; padding:10px; text-align:left !important; font-size:90% !important;}
.blog-rel .post-tn, .blog-rel .thumb-frame {display:block; width:150px; height:150px; margin:4px auto; background:rgba(0,0,0,0.15); overflow:hidden; border-radius:var(--radius-tn);}

.blog-rel td span:not(.each-cat) {display:block;}
.blog-rel td .post-date {font-size:95%; padding-bottom:2px;}
.blog-rel td .post-title {font-size:130%; font-weight:700; line-height:1.4; font-feature-settings:"palt";} 
.blog-rel td :is(.post-date,.post-title) {color:var(--corp-color); /*var(--moji-color);*/}
/*.toppage .blog-rel td :is(.post-date,.post-title) {color:var(--corp-color);}*/
.blog-rel td .post-cats {font-size:82%; font-weight:500; padding:0.75em 0 0.5em;} 
.blog-rel td .each-cat {
	display:inline-block; margin-right:0.5em; padding:0 0.65em 0.1em; line-height:1.9; 
	background:transparent; color:rgba(83,71,65,0.5); 
	border:1px solid rgba(83,71,65,0.5); border-radius:3px;
	text-shadow:none !important;
	transition:all 0.33s linear 0s;
}



.each-post {margin:0 0.5em; transition:all 0.35s linear 0s;}

@media (hover: hover) {	
	a:hover .blog-rel td span.each-cat {background:rgba(255,255,255,0.7); transition:all 0.14s linear 0s;}
	.each-post:hover {background:rgba(80,60,30,0.08); transition:all 0.14s linear 0s; border-radius:3px;}
}

.blog-rel div.post-tn-100 {width:100px; height:100px; background:rgba(0,0,0,0.2); overflow:hidden; border-radius:100%;}
.blog-rel div.post-tn-150 {width:150px; height:150px; background:rgba(0,0,0,0.2); overflow:hidden; border-radius:100%;}


@media (max-width:599px) {
	.blog-rel th {width:25% !important; min-width:120px !important; max-width:120px !important; padding:5px;}
	.blog-rel .post-tn, .blog-rel .thumb-frame {width:110px; height:110px;}
	.blog-rel td span.post-date {font-size:100%; padding-bottom:4px;}
	.blog-rel td span.post-title {font-size:123%; line-height:1.35; font-feature-settings:"palt";} 
	.blog-rel td span.post-cats {font-size:85%;} 
	.blog-rel td span.each-cat {margin-right:0.75em; padding:0 0.35em 0.1em; line-height:1.6; margin-right:4px; font-feature-settings:"palt";}
}
@media (max-width:480px) {
	.blog-rel td span.post-title {font-size:116%; line-height:1.25;}  	
}







/* **********************************************
	Subpage Common 
*/


#subpage-logo {
	position:absolute;
	top:0px; left:0px;
	width:max(12.5vw, 200px);
	z-index:9990;
	text-align:left;
}
#subpage-logo .logo {
	width:100%; height:auto; margin:1rem 1rem;
}
@media (max-width:800px) {
	#subpage-logo .logo {margin:0.75rem 0.5rem;}
}
@media (max-width:640px) {
	#subpage-logo {width:max(30vw, 180px);}
}
@media (max-width:480px) {
	#subpage-logo {width:max(40vw, 150px);}
	#subpage-logo .logo {margin:0.5rem 0.5rem;}
}



#page-title {
	position:relative; 
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	z-index:5;
}
body:not(.josh):not(.wooc):not(.single):not(.blog):not(.archive) #page-title {
	background-color:rgba(76,70,62,0.75);
	background-blend-mode:color-burn; /*multiply;*/
}
body:where(.josh,.wooc,.single.,.blog,.archive) #page-title {
	background-color:rgba(25,85,179,0.9);
	background-blend-mode:color-burn; /*multiply;*/
}


#title-bg-layer {
	position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
	content: " ";
	z-index:-1; 
	opacity:1;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px); 
}
body:not(.josh):not(.wooc):not(.single):not(.blog):not(.archive) #title-bg-layer {
	background-image: linear-gradient(90deg, rgba(76,70,62,0.5) 0%, rgba(76,70,62,0.5) 100%);
}
body:where(.josh,.wooc,.single.,.blog,.archive) #title-bg-layer {
	background-image: linear-gradient(90deg, rgba(25,85,179,0.5) 0%, rgba(25,85,179,0.5) 100%);
}

#page-title-inner {
	position:absolute; top:0; right:0; bottom:0; left:0; 
	width:100%; height:100%; overflow:hidden;
}


.page-title-sub {
	display:block;
	position:absolute; left:1.5rem; bottom:1.5rem; 
	margin:auto; text-align:center;
	font-family:var(--eisuuji);
	font-size:1.7em; font-weight:500; letter-spacing:0.375em;
	color:#fdfdfd; opacity:0.35; text-shadow:none; z-index:0;
}

@media (max-width:800px) {
	.page-title-sub {left:0.5rem; bottom:0.5rem; font-size:1.75em;}
}
@media (max-width:480px) {
	.page-title-sub {left:0.5rem; bottom:0.25rem; font-size:1.5em;}
}

@media (min-width: 1078px) {
	#page-title {height:280px;}
	#page-title-inner {position:absolute; top:0; right:0; bottom:0; left:0; height:100%;}
}
@media (max-width: 1077px) {
	#page-title {height:260px;}
}
@media (max-width: 768px) {
	#page-title {height:240px;}
}
@media (max-width: 480px) {
	#page-title {height:220px;}
}

#page-title h1 {
	margin:0; padding:0;
	color:#fff; line-height:1.4em;
	text-align:center;
}

/*.subpage.fixed-page #page-title h1,*/
.subpage #page-title h1 {
	font-size:235%;
	letter-spacing:0.5em; text-indent:0.5em;
	font-family:'Noto Sans JP';
	font-weight:500;
}
.subpage:not(.fixed-page):not(.fixed-page) #page-title h1 {
	letter-spacing:0.125em; text-indent:0.125em;
}
.type--post.subpage.single #page-title h1 {font-feature-settings:"palt"; letter-spacing:0; text-indent:0;}

h1 span.h1-en-caption {
	display:inline-block;
	margin:auto; text-align:center; font-family:var(--eisuuji); font-size:0.65em; font-weight:200; color:#cef; opacity:0.7; text-shadow:none; z-index:0;
	padding-left: 0.5em;
}


@media (max-width:800px) {

}
@media (max-width:640px) {
	.subpage #page-title h1 {
		font-size:clamp(160%,6.75vmin,205%);
		letter-spacing:0.175em;
	}
}
@media (max-width:480px) {
	.subpage #page-title-inner h1 {
		padding-left:0.25em;
		font-size:160%; text-align:left; 
	}
	.subpage.single.type--post #page-title h1 {	
		padding-top:1em;
		padding-inline:0.5em;
		font-size:140%; 
		letter-spacing:0; text-indent:0;
		line-height:1.25;
	}
}


.page-std img + p.caption {
	margin:0.5rem 0 1.5rem; padding:0 0.5em;
	font-size:0.85rem; line-height:1.35; text-align:justify;
}


.ancor-link {margin-top:2em;}


.hr.container {margin-top:2.25em; padding-top:2.25em;}





/* **********************************************
　Page has children
*/






/* **********************************************
　Custom Post "item" - Post Card
*/

#cpt-list:has(.post-card-wrapper) {padding:1em 0 3em;}

#cpt-list .inner {padding-inline:var(--flex-gap);}

.page-cpt-index #the-content {padding-bottom:5em;}

.post-card-wrapper {padding:0;}
@media (max-width:600px) {
	.post-card-wrapper {padding:1em 0;}
	.page-cpt-index #the-content h2 {
		font-size: 192.5%; line-height: 1.35;
		letter-spacing:0; font-feature-settings:"palt";
	}
}
.post-card {height:100%;}



.post-card dl {
	height:100%; position:relative;
	padding:0; margin:0; 
	box-shadow:none; transition:all 0.33s linear 0s; 
	background: var(--acc-color);
	font-feature-settings:"palt";
	color:var(--base-color);
} 
@media (hover: hover) {
	a:hover .post-card dl {
		transform:scale(1.025); box-shadow:0 2px 1.15em 2px rgba(0,0,0,0.25); transition:all 0.14s ease-in-out 0s; 
	}
}
.post-card dt h3 {margin:0.5em 0 0.125em; color:#fff; font-size:1.55em; letter-spacing:0.25em;}
.post-card dt {
	width:100%; padding:1rem 1rem 0.75em; margin:0;
	font-family:'Noto Sans JP', sans-serif; font-weight:500;
	font-size:1rem; letter-spacing:0; line-height:1.35; color:inherit; 
}
.post-card dd {width:100%; padding:0.75em 1rem;}
.post-card dd.post-date {padding-bottom:0; font-size:85%; color:rgba(255,255,255,0.6);}
.post-card dd.post-type {width:100%; padding:1rem 1rem 0; font-size:80%; opacity:0.5;}
.post-card :is(dd.post-date,dd.post-type) + dt {padding:0.25em 1rem 1.25rem;}
.post-card dd.excerpt {width:100%; padding:0.75em 1rem; font-size:90%; margin-bottom:1em;}
.post-card dd.eyecatch {position:relative; width:100%; max-width:450px; height:auto;/*200px;*/ background:rgba(243,243,243,1);  overflow:hidden; padding:0; }
.post-card span.imgframe {
	display:block; width:100% !important; min-width:100%; height:auto; margin:0; vertical-align:top; overflow:hidden; 
	background-repeat:no-repeat; background-size:cover; background-position:center 15%;
}
.post-card span.imgframe:after { content:""; display:block; padding-top:100%;}
.post-card dd.eyecatch img {width:auto !important; height:auto !important; vertical-align:middle; margin:0;}
.post-card dd.eyecatch .noimage {position:absolute; top:0; right:0; bottom:0; left:0; margin:0; font-size:28px; text-align:center; padding:2em 0; font-family:'Lexcend Deca';}

.extend .post-card dl {position:relative; padding-bottom:3em; line-height:1.5;}
.search .extend .post-card dl {padding-bottom:0.5em;}

.post-card dd.taxo-terms {
	padding:0 1rem 1rem; 
	line-height:1.35;
}
.post-card dd.taxo-terms .each-term {
	display:inline-block; margin-right:0.25em; padding:0.125em 0.5em 0.25em; 
	border:1px solid rgba(55,55,55,0.55); color:rgba(55,55,55,0.55);
	font-family:'Noto Sans JP', sans-serif; font-weight:400;
	font-size:65%;
	/*
	font-family: Verdana, Helvetica, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif, "Takao Pゴシック", "TakaoPGothic", sans;	*/
}


.search .post-card dt, 
#appendix .post-card dt {font-size:1rem;}


/* + - + - + - + - + - + - + - + - + - +   swiper  + - + - + - + - + - + - + - + - + - + - +*/

.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 { text-align: right; padding: 5px 0;}
.swiper-pagination-bullet {margin-right:8px;}
.swiper-pagination-switch {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	margin: 0 4px;
	background-color: #000;
	border: 1px solid #f4b;/*#188A77;*/
	cursor: pointer;
	transition: all .25s linear;
}
.swiper-active-switch {background-color: #16AC94;}

.swiper-slide > a {display:block; text-align:left;}

.swiper-container {position:relative;}

/*
.swiper-container1.swiper-container {overflow:visible !important;}
*/

.swiper-slide.post-card-wrapper {padding:1.5em 8px;}
.swiper-slide .post-card dl {margin:0 3.5%;}






.taxo-large-button {
	position:relative; 
	display: flex; align-items: center; justify-content:center;
	width:100%; height:80px; 
	background:#fff; border:1px solid #ddd; 
	box-shadow: 0px 3px 5px rgba(20, 20, 20, 0.3);
	font-feature-settings:"pkna";
	transition:all 0.33s linear 0s;
}
.taxo-large-button:hover { transform:translate(2px,2px); transition:all 0.14s linear 0s;}
.taxo-large-button::after {
	content:" "; width:10px; height:10px;
	position:absolute; right:10px; top:50%; margin-top:-5px;
	border-right:2px solid #4bf;	border-top:2px solid #4bf;
	transform:rotate(45deg);
	transition:all 0.14s linear 0s;
}
.taxo-large-button:hover::after {
	content:" "; width:10px; height:10px;
	position:absolute; right:8px; top:50%; margin-top:-5px;
	border-right:2px solid salmon;	border-top:2px solid salmon;
	transform:rotate(45deg);
	transition:all 0.14s linear 0s;
}
.taxo-large-button span {display:block; margin:auto 1.5em; }

.taxo-term-list {
	padding:2em auto; margin-bottom:1rem; font-size:115%;
	text-align:center;
}
.taxo-term-list ul {padding-left:0; margin-top:0;}
.taxo-term-list ul li {margin:0.75rem 0.5rem;}
.taxo-term-list a {
	font-size:0.8em; line-height:1;
	padding:0.5em 0.75em 0.5em; 
	background:rgba(75,75,85,0.45);
	border: 1px solid transparent; 
	color:var(--base-color);
	font-family:'Noto Sans JP', sans-serif; font-weight:400;
}
.taxo-term-list  a:hover {
	background:rgba(75,75,85,0.125);
	border:1px solid var(--moji-color);
	color:var(--moji-color);
	text-shadow:none;
}




.single.type--item #photos {padding-inline:0.5em;}
.single.type--item #photos a {display:inline-block;}
.single.type--item #photos :is(.eyecatch,.item-img-of-size) {
	width:100%; height:auto;
	aspect-ratio:1 / 1;
	object-fit:cover;
	padding:0.25em;
}

.single.type--item .eyecatch {}

.single.type--item h2.item-name {
	margin-top:1.25em;
	font-size:2.25rem; line-height:1.25;
}
.single.type--item h2.item-name span.kakko {display:inline-block; font-size:70%;}

.single.type--item #spec table :is(th,td) {vertical-align:top; border-bottom:1px solid rgba(0,0,0,0.2); border-top:none;}
.single.type--item #spec table th {word-break:keep-all; white-space:nowrap;}
.single.type--item #spec table td hr {clear:both; margin:0.5em 0; border-top:1px solid rgba(0,0,0,0.2); border-bottom:none;}
.single.type--item .btn-ec-small {display:inline-block; color:#FFF; margin:0.5em 0 0.5em 0.75em; padding:0.375em 0.75em 0.5em; border:1px solid transparent; background:var(--link-color); border-radius:var(--radius-small);}
@media (hover: hover) {
	.single.type--item .btn-ec-small:hover {filter:saturate(150%);}
}
@media (max-width:480px) {
	.single.type--item .btn-ec-small {transform:scale(0.85); transform-origin:top right; margin-bottom:1.5px !important;}
	.single.type--item #spec {padding-inline:1em;}
	.single.type--item #spec table th {padding-left:0; padding-right:1.5em;}
	.single.type--item #spec table td {padding-inline:0;}
}

.single.type--item .btn-ec-small span.sosaicon {font-size:200%; vertical-align:-5%;}

.single.type--item .post-body {padding-bottom:1em;}



.page-std #appendix {padding:4em 0 5em;}
.page-std #appendix h3.taxo-label {margin:1rem 0 2rem;} 
.page-std #appendix h3.taxo-label span.term-name {display:inline-block; padding:0 0.75rem;} 
.page-std #appendix .taxo-btn-wrapper {padding-top:1.5rem;}

.page-spl #block-editor-body {padding:6em 0 5em;}
.page-spl #block-editor-body h2:first-child {margin-top:1rem;}

.page-spl #appendix {padding: 4em 0 3em; background:var(--bg-mid);}





/* **********************************************
  Company
*/
.company .company-profile td:first-child {width:25%; max-width:8em;}

.company .wp-block-media-text.alignwide.is-stacked-on-mobile figure {text-align:center;}
.company .wp-block-media-text.alignwide.is-stacked-on-mobile figure img {width:100%; max-width:240px; margin:auto;}

.company #access {
	padding:3.5em 0 4em;
	background:var(--bg-slight);
}
.company #access h2 {
	margin:0.75em 0 0.75em;
	line-height:1.35em;
	position: relative;
	padding:0;
	font-size:265%;
	font-weight:400;
	letter-spacing:0.0.125em;
}




/* **********************************************
  Google map
*/
.map-container {text-align:center; width: 100%;}
.map-container iframe{	display: block; pointer-events: none; position: relative;}
.map-container iframe.clicked{pointer-events: auto;}

@media only screen and (min-width: 900px) {
	.map-container iframe {width:100%; height:100%; margin:0; border:none !important;}
	.access .map-container {text-align:center; height:600px;}
}
@media only screen and (max-width: 899px) {
	.map-container iframe {width:96%; height:75vh; max-height:600px; margin:0 2%; border:1px solid #999;}
}


/* **********************************************
   Recruit
*/
.recruit .fixed-page-post {max-width:800px; margin:auto; padding-bottom:3em;} 




/* **********************************************
   Contact
*/
.contact #page-body {background:var(--slight-gra-corp);}
.contact .post-body .btn-line {padding:0.65rem 2rem 0.5rem; font-size:1.15rem ;line-height:1;}
.contact .post-body .btn-line img {height:40px; margin:0 8px 0 0;}

.contact .wpcf7-form {background:transparent; padding:0;}
.contact .fixed-page-post {max-width:800px; margin:auto; padding-bottom:3em;} 
#contact-form-wrapper {padding-bottom:4em;}

@media (max-width:530px) {
	.contact .post-body .brief-intro br {display:none;}
}


li.chk-xl {
	line-height:1.35em;
	height: auto; font-size:36px;
	list-style:none; 
	background: url(./img/icon/chk.png) no-repeat 0 0;
	background-size:48px 48px;
	padding: 4px 0 6px 1.5em;
	margin: 0.5em 0;
}
li.chk {
	line-height:1.35em;
	height: auto; font-size:120%;
	background: url(./img/icon/chk.png) no-repeat 0 0;
	background-size:1.75em 1.75em;
	padding: 0.25em 0 0.5em 2.25em;
	margin: 0.75em 0;
}



/* **********************************************
   privacy-policy / terms-of-service
*/
.privacy-policy .fixed-page-post {max-width:800px; margin:auto;}
.terms-of-service .fixed-page-post {max-width:770px; margin:auto;}

.privacy-policy h1 span.h1-en-caption,
.terms-of-service h1 span.h1-en-caption {font-size:0.9em;}

.terms-of-service .anchor-links {text-align:center;}
.terms-of-service .anchor-links.at-top {margin:0 0 3em; }
.terms-of-service .anchor-links.at-bottom {margin:3em 0 0; }
.terms-of-service .anchor-link {width:11em; margin:0 0.5em 1em;}

.terms-of-service .kakomi {margin:3em 0 4.5em; border:1px solid #ccc; border-radius:6px; padding:1em 1em 1em;}

/*

*/
.tos-links {text-align:right;}
.tos-links a {display:inline-block; margin:0.25em 0.5em; font-size:0.75rem; text-decoration:underline;}

a.tos-link {display:inline-block; margin:0.25em 0.5em; padding:0 1rem; font-size:0.85rem; text-decoration:underline;}
a.tos-link:hover {color:var(--hover-color);} 

#policy ol {margin:2em 0;}
#policy ol li {	line-height:1.7em; font-size:20px; margin:1em 0;}






/* ****************************************
  Taxonomy -- Common
*/

.taxo-list-wrapper {margin:1em 0; padding:0.5em 1em; font-size:90%;}
.term-list {margin:1em 0; padding-left:1em;}
.term-list li {display:inline-block; margin:0.5em 1.5em 0.5em 0;}

.taxo .browseback {margin-top:1.5rem;}

.taxo a.sub-option.backward {position:relative;}
.taxo a.sub-option.backward::after {
	content: ""; width: 10px; height: 10px; position: absolute; left: 14px; top: 50%; margin-top: -5px;
	border-right: 2px solid var(--moji-color); border-top: 2px solid var(--moji-color); transform: rotate(225deg); transition: all 0.14s linear 0s;
}
.taxo a.sub-option.backward:hover::after {left:11px;}




/* ****************************************
  Search Result
*/

.search #page-body {padding:0 0 4em;}

	
.hits {margin:0 0.25rem;font-size:0.9rem; font-weight:normal; color:#fff; padding:0.25em 0.75em; background:rgba(5,5,5,0.3); border-radius:3px; font-feature-settings:"palt"; }
.bg-ivory .hits{color:#FFF5E4; font-weight:bold;}

.showing {margin:0 0 0 0.5rem; font-size:0.8rem; font-weight:normal; color:rgba(5,5,5,0.45); font-feature-settings:"palt"; }

.bg-ivory .hits-indicator {padding:0.75em 0;}

#not-found {text-align:left;}
#not-found h2 {font-family:'Lexend Deca'; font-size:255%; font-weight:200; color:rgba(5,5,5,0.8); letter-spacing:0.175em;}
.bg-ivory #not-found h2 {color:#7A0910;}
.options {padding:1em 0;}
.main-option, .sub-option {display:inline-block; margin:1rem 0.5rem !important; width:13em !important; text-align:center !important}
.sub-option .searchform {width:12em; margin:auto;}

#search-options {margin: 0 auto; padding: 3em 0; background:var(--bg-lico);}



.face-icon {width:25vw; max-width:72px; margin:0.5em !important; border-radius:7px;}
.face-icon.maru {border-radius:100%;}
.face-icon.kaku {border-radius:0%;}


.bubble {display:inline-block; position:relative; padding:1em; border-radius:6px; background:#fff; max-width:555px; margin-top:0.75em !important; margin-bottom:0.75em !important;}
.bubble.to-right::before {position:absolute; left:-32px; bottom:50%; margin-bottom:-16px; content:""; border:16px solid transparent; border-right:16px solid #fff;} 
.bubble.to-left::before {position:absolute; right:-32px; bottom:50%; margin-bottom:-16px;  content:""; border:16px solid transparent; border-left:16px solid #fff;} 
.bubble.bordered {border:1px solid #bababa;} 
.bubble.bordered.to-right::before {position:absolute; left:-32px; bottom:50%; margin-bottom:-16px; content:""; border:16px solid transparent; border-right:16px solid #bababa;} 
.bubble.bordered.to-right::after {position:absolute; left:-31px; bottom:50%; margin-bottom:-16px; content:""; border:16px solid transparent; border-right:16px solid #fff;} 
.bubble.bordered.to-left::before {position:absolute; right:-32px; bottom:50%; margin-bottom:-16px;  content:""; border:16px solid transparent; border-left:16px solid #bababa;} 
.bubble.bordered.to-left::after {position:absolute; right:-31px; bottom:50%; margin-bottom:-16px;  content:""; border:16px solid transparent; border-left:16px solid #fff;} 





/* **********************************************
	SNS embed
*/
#sns-timeline {padding:3.5em 0 5em; background:var(--bg-slight);}

#sns-timeline h2 {color: var(--acc-color); letter-spacing: 0.1em; text-indent: 0.1em;}

#instagram {}
#instagram .icon {width:64px; height:64px;}
#instagram .inner {width:100%; max-width:600px; margin-inline:auto;}

@media (max-width:768px) {
	#insta-feed {margin-top:1em;}
}
#instagram #sb_instagram {}

#sb_instagram .sb_instagram_header {display:none;}

#sb_instagram div#sbi_images {margin-top:-5px !important; padding:0 !important;}
#sb_instagram div#sbi_images .sbi_item .sbi_photo_wrap {
	padding:5px !important;
}
#sb_instagram div#sbi_images .sbi_item .sbi_photo_wrap a {
	border-radius:0 !important;
	overflow:hidden !important;
}
#sb_instagram div#sbi_load {margin-top:0.75rem !important;}


#sb_instagram .sbi_no_avatar .sbi_header_img {background:#aaa !important;}
#sb_instagram a {color:var(--link-color);}
#sb_instagram .sbi_follow_btn a {background:var(--link-color) !important; border-radius:0 !important; padding:7px 18px !important;}
#sb_instagram .sbi_follow_btn a:hover {box-shadow: inset 0 0 10px 20px var(--link-color) !important; filter:saturate(175%);}

#sb_instagram #sbi_load .sbi_load_btn {background:var(--bg-mid) !important; border-radius:0 !important; padding:7px 18px !important;}
#sb_instagram #sbi_load .sbi_load_btn:hover {box-shadow: inset 0 0 20px 20px var(--alt-color) !important; filter:saturate(175%);}




/* ****************************************
  fancybox 3
*/


.fancybox-button--close {z-index:99999 !important; background:var(--acc-color) !important;}
.fancybox-slide--iframe .fancybox-content {height:auto; max-height:85vh !important;}

.fancybox-active html {overflow:hidden;}

@media (hover: hover) {
	button.fancybox-button--close:hover {color:#fff !important;}
}
@media (min-width:800px) {
	.fancybox-caption {font-size:1em !important;}
}
@media (max-width:480px) {
	.fancybox-slide--iframe {padding-inline:0.75em !important;}
}

/* Close current fancybox instance with JS
parent.jQuery.fancybox.getInstance().close(); */
.close-current-modal {display:inline-block; cursor:pointer; padding:0.5em 1.25em; border-radius:6px; border:1px solid #888; background:#fff; font-size:0.8em;}






/********/

#loading {
  margin: 80px auto;
  font-size: 8px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(132,132,132,0.32);
  border-right: 1.1em solid rgba(132,132,132,0.32);
  border-bottom: 1.1em solid rgba(132,132,132,0.32);
  border-left: 1.1em solid rgba(255,255,255,0.8);
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}
#loading,
#loading::after {
  border-radius: 50%;
  width: 6.5em;
  height: 6.5em;
}
@keyframes load8 {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
#loading{ position:fixed; left:50%; top:40%; margin-left:-3.25em; text-align:center;}



.fuwa-sp {visibility:hidden;}


.chokott {
	animation-fill-mode:both;
	animation-duration:9.5s;
	animation-name: Chokotter;
	visibility: visible !important;
}
@keyframes Chokotter {
	0% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}


.powatt {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
}
@keyframes Powatter {
	0% { opacity: 0; transform: translateY(20px); }
	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-l2r {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-LtoR;
	visibility: visible !important;
    animation-delay: 0.225s; 			
}
@keyframes Fuwatter-LtoR {
	0% { opacity: 0; transform: translateX(-30px); }
	100% { opacity: 1; transform: translateX(0); }
}

.fuwatt-l2r-short-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-LtoR;
	visibility: visible !important;
    animation-delay: 0.8s; 			
}
.fuwatt-l2r-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-LtoR;
	visibility: visible !important;
    animation-delay: 1.6s; 			
}

.fuwatt-r2l {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 0.225s; 		
}
@keyframes Fuwatter-RtoL {
	0% { opacity: 0; transform: translateX(30px); }
	100% { opacity: 1; transform: translateX(0); }
}
.fuwatt-r2l-short-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 0.8s; 		
}
.fuwatt-r2l-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 1.6s; 		
}



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

.fuwatt-short-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter;
	visibility: visible !important;
    animation-delay: 0.4s; 	
}

.fuwatt-mid-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter;
	visibility: visible !important;
    animation-delay: 0.8s; 	
}

.fuwatt-long-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter;
	visibility: visible !important;
    animation-delay: 1.2s; 	
}

.fuwatt-xlong-delay {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter;
	visibility: visible !important;
    animation-delay: 1.6s; 	
}


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







/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   Media Queries
@@@@@@@@@@@@@@@@@@@@@@@@@*/


@media (min-width:1170px) {
	#page-title {height:calc(280px + 4em); padding-top:4em;}
}


@media only screen and (min-width: 1078px) {
	.subpage-eyecatch {background-repeat:no-repeat; background-attachment:scroll; background-size:cover; background-position:center center;}
}
@media only screen and (max-width: 1077px) {
	.subpage-eyecatch {background-repeat:no-repeat; background-attachment:scroll; background-size:cover; background-position:center 10%;}	
}
@media only screen and (min-width: 996px) {

}
@media only screen and (max-width: 995px) {

}

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

}

@media only screen and (max-width: 800px) {
	
	.subpage-eyecatch { background-attachment:scroll; background-size:cover; background-position:center center;}	

	h1 span.blog-post-title {text-align:left !important; line-height:1.5em !important;}
	
}

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

}


/* All Mobile Sizes */
@media only screen and (max-width: 768px) {

	#header-inner {height:auto; min-height:100px;}	
	


	
	/* body-menu etc --- @ front-page, page-menu*/
	.keep-half.smp-waku {border-top:1px solid #ddd; margin-top:1.5em;}
	.keep-half.smp-waku > div { padding:0.5em; } 
	.keep-half.smp-waku > div {border-bottom:1px solid #ddd;}
	.keep-half.smp-waku > div:nth-child(odd) {border-right:1px solid #ddd;}



	.bubble {width:auto; max-width:408px;}

}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 481px) and (max-width: 768px) {

	h1 span.blog-post-title {font-size:77.5%; line-height:1.5em !important;}

}


/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 700px) {


}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 480px) {

	.subpage #page-title h1 {letter-spacing:0.15em;}
	
	.josh #logo { position:absolute; left:0; top:0; max-width:250px; text-align:left;}	


	#page-title h1 { font-size:220%;} 
	.single #page-title h1 { font-size:160%; line-height:1.1; letter-spacing:0 !important; font-feature-settings:"palt";} 
	
	h1 span.h1-en-caption {margin:auto; font-size:0.7em;}
	
	#page-upper a.gbtn-aqua-small {font-size:85%; font-feature-settings:"pkna";}






	#intro-box h2 {font-size:5.2vw; letter-spacing:-0.025em;}

	.keep-half .post-card-wrapper {padding:0.5em 0;}
	.extend .post-card dl {padding-bottom:2.25em; line-height:1.35;}

	.privacy-policy #page-title h1 {font-size:175%;}
	.privacy-policy h1 span.h1-en-caption {font-size:0.95em;}
	.privacy-policy h2.jp {font-size:175%;}
	
	ul.term-list {padding-left:0;}	
	ul.term-list li { font-size:100%; margin-top:0.75em; margin-bottom:0.75em;}
	
	

	.face-icon,
	.face-photo {width:20vw; max-width:80px; margin:0.5em 0;}
	.bubble {padding:0.75em; font-size:90%; max-width:55vw;}
	.bubble.to-right::before {position:absolute; left:-16px; bottom:50%; margin-bottom:-8px; content:""; border:8px solid transparent; border-right:8px solid #fff;} 
	.bubble.to-left::before {position:absolute; right:-16px; bottom:50%; margin-bottom:-8px;  content:""; border:8px solid transparent; border-left:8px solid #fff;} 
	.bubble.bordered {border:1px solid #bababa;} 
	.bubble.bordered.to-right::before {position:absolute; left:-16px; bottom:50%; margin-bottom:-8px; content:""; border:8px solid transparent; border-right:8px solid #bababa;} 
	.bubble.bordered.to-right::after {position:absolute; left:-15px; bottom:50%; margin-bottom:-8px; content:""; border:8px solid transparent; border-right:8px solid #fff;} 
	.bubble.bordered.to-left::before {position:absolute; right:-16px; bottom:50%; margin-bottom:-8px;  content:""; border:8px solid transparent; border-left:8px solid #bababa;} 
	.bubble.bordered.to-left::after {position:absolute; right:-15px; bottom:50%; margin-bottom:-8px;  content:""; border:8px solid transparent; border-left:8px solid #fff;} 	

	
	
}


/* */