@charset "utf-8";


.solid-minimum-header { /* front-page  ONLY */
	height:auto; min-height:24px; position:relative;
	background:#E1E0DE;
}
.toppage h1 {position:absolute; top:4px; right:4px;}
#welcome {padding:5em 0 13em;}
.main-logo {
	position:relative; width:200px; height:200px; border-radius:16px; border:4px solid #fff; margin:1em;
	background:url(./img/bg/wood01-m.webp) no-repeat center top; background-size:auto auto; z-index:-1;
}
.main-logo img.logo-front-page-intro {border-radius:10px;}

.welcome-img {display:block; /*width:296px;*/ height:188px; margin:2em auto 1em;}
.welcome-copy {display:block; height:40px; margin:2em auto 5em;}

@media (min-width:1400px) {
	.main-logo {width:216px; height:216px;}
	.welcome-img {height:196px;}
	.welcome-copy {height:46px; margin:2.5em auto 5.5em;}
}
@media (min-width:1800px) {
	.main-logo {width:232px; height:232px;}
	.welcome-img {height:208px;}
	.welcome-copy {height:52px; margin:2.5em auto 5.5em;}
}
@media only screen and (min-width: 801px) {	
	.solid-minimum-header {background-repeat:no-repeat; background-attachment:fixed; background-size:cover; background-position:center center;}	
	.header-image {background-repeat:no-repeat; background-attachment:fixed; background-size:cover; background-position:center -12vw;}
}
@media only screen and (max-width: 800px) {
	.header-image { background-attachment:scroll; background-size:cover; background-position:center center;}	
	.solid-minimum-header {padding:0; height:auto; min-height:1.35em; background:#D2D2CF; }
	.toppage h1 { height:1.25em; white-space:nowrap; overflow:auto; top:4px; right:auto; bottom:auto; left:2px;}
}

@media only screen and (max-width: 768px) {
	.solid-minimum-header, .solid-minimum-header #header-midlayer { width: 100%; }
	.solid-minimum-header p.catch-copy {margin: 0; padding: 5vh 0 5vh; text-align: center;}	
	.solid-minimum-header {height:auto; position:relative;}
}
@media only screen and (min-width: 481px) and (max-width: 800px) {
	.toppage h1 {padding-left:0.5em;}
}
@media only screen and (max-width: 480px) {
	.solid-minimum-header { 
		padding:0.25em 0; width: 100%; height:auto; min-height:1.35em;
		background:var(--alt-color); /*url(./img/bg/wood01-band-small.webp) no-repeat center center; background-size:cover; */
	}	
	.main-logo { width:160px; height:160px; }
	.toppage h1 {width:100vw; margin:0; padding:0 0 0 0.25em; font-size:11px; text-align:left; font-feature-setting:palt; color:#fff; letter-spacing:-0.075em; overflow:hidden;}
}
.toppage h3:not(.plain) {
	margin-left:-0.125em;
	padding-left:0.25em;
}
.toppage h3.usual {
	border-bottom:var(--border-h3);
}

#first-image, #first-text {position:relative;}
#first-image {z-index:101 !important;}
#first-text {z-index:100 !important; color:#fff;}

#first-text::before {
	content:""; position:absolute; left:-6em; top:-1em; right:0; bottom:-2em;
	width:150%; height:auto; background:url(./img/bg/wood01-m.webp) repeat 0 0; background-size:auto auto; z-index:-10;
}
#first-text::after {
	content:""; position:absolute; left:-18em; top:2em; right:6em; bottom:-5em;
	width:100%; height:auto; background:#E1E0DE; z-index:-20; 
}
@media (max-width:768px) {
	#welcome {padding-bottom:8em; /*1.95em*/}
	#first-text::after {display:none;}
}

#body-menu {text-align:center; color:#fff;}
#body-menu h2 {text-align:center;}
@media (min-width:900px) and (max-width:1199px) {
	#body-menu h2 {font-size:3.35vw;}
}
#body-menu .inner-cell { 
	position:relative; 
	width:100%; max-width:500px; height:100% !important;
	margin:auto; padding:2em 0 1.5em;
}
#body-menu .inner-cell div { 
	width:100%; max-width:480px; margin:auto;
}
#body-menu .imgframe { 
	display:block; margin:1.5em auto;
	width:100%; height:100%; aspect-ratio:10 / 7;
	overflow:hidden;
	background:rgba(255,255,255,0.15);
}
#body-menu img.framed-image {width:120%; max-width:120%; }
#bm-webdeza img.framed-image {margin-left:-8.5%; margin-top:1.5%;} 
#bm-gradeza img.framed-image {margin-left:-3%;} 
#body-menu p {margin:1.5em auto 0.75em; text-align:justify;}
#body-menu .btn-frost {width:9em; text-align:center; padding:0.5em 1em 0.35em 0.125em;}
#body-menu .btn-frost span {font-size:100%;}
@media (hover: hover) {
	#body-menu .imgframe, #body-menu img.framed-image {transition:all 0.33s ease 0s;}
	#body-menu .imgframe:hover {background:rgba(0,0,0,0.15); transition:all 0.14s ease 0s;}
	#body-menu img.framed-image:hover {scale:1.0325; transition:all 0.14s ease 0s;}
}
@media (min-width:1400px) {
	#body-menu .inner-cell {max-width:31em;}
	#body-menu .inner-cell div {max-width:29em;}
}
@media only screen and (max-width: 768px) {
	#body-menu dt {padding:0; font-size:1.1em; line-height:1.35em;}
	#body-menu dd.caption {font-size:0.8em; margin:1em 0 1.5em;}
}



#works-intro {padding:5em 0;}
#works-intro :is(h2, p) {color:#fff;}
#works-intro a.bbd2 {color:#fb4;} 
/* @media (hover: hover) {
	#works-intro a.bbd2:hover {color:#fff;}
	.toppage .works-ss {transition:all 0.28s ease-in-out 0s;}
	.toppage .works-ss:hover {scale: 1.025; transition:all 0.14s ease-in-out 0s;}
} */
#works-intro dt.works-single-link {padding-bottom:0;}
#works-intro dd.bizcat {padding-top:0;}
#works-intro .grid-like .each-item {margin:0; padding-top:2rem; padding-bottom:3rem;}


#objective-solution {}
#objective-solution .cell {text-align:center;}
#objective-solution .cell img.need {width:min(100%,350px); margin-inline:auto;}
#objective-solution .cell .inner { margin-inline:auto; text-align:left;}
#objective-solution .cell.trio .inner {width:min(100%,440px);}
@media (max-width:1169px) {
	#objective-solution .container {padding-inline:1.5em;}
	#objective-solution .cell .inner {}
}





#solution {
	background-image: linear-gradient(135deg, rgba(40,20,0,0.06), rgba(40,20,0,0.06)), url(./img/bg/hanoji.jpg);
	background-repeat: repeat, repeat;
	background-position: 0 0, 0 0;
	background-size: auto auto, auto auto;
}

#kandokoro-menu {padding:3.25rem 0.75rem 0rem;}
#kandokoro-menu .btn-mm0 {display:block; position:relative; margin:auto; width:100%; max-width:15rem; border-radius:4px; overflow:hidden; transition:all 0.18s ease-in-out 0s;}

a .btn-mm0 {}

.odd .btn-mm0, .odd.btn-mm0 {
	background: url(./img/bg/wood01-m.webp) no-repeat center top;
	background-size: cover;
}
.even .btn-mm0, .even.btn-mm0 {
	background: url(./img/bg/wood04-s-r.webp) no-repeat center top;
	background-size: cover;
}

#kandokoro-menu dl.post-card {background:rgba(255,255,255,0.6); padding:0.75rem 0.75rem 1.25rem; border:1px solid transparent; border-radius:6px; transition:all 0.22s ease-in-out 0s;}
#kandokoro-menu dl.post-card dd.image {padding:0;}
#kandokoro-menu dl.post-card dt {margin:0.75em -1em 0.5em; padding:0.5rem 0; font-feature-settings:"palt"; line-height:1.35; color:var(--moji-color); text-shadow:none; font-size:115%; font-weight:bold;}
#kandokoro-menu dl.post-card dd.caption {padding:0 0.5em; text-align:left; font-size:90%; line-height:1.6; font-feature-settings:"palt";  max-width:16em; margin:auto; text-align:justify; color:var(--moji-color); text-shadow:none;}

@media (hover: hover) {
	#solution {background-attachment: fixed, fixed;}
	#kandokoro-menu a:hover .btn-mm0 {transition:all 0.1s ease-in-out 0s; filter:saturate(200%);}
	#kandokoro-menu dl.post-card:hover {background:#fff; border:1px solid var(--alt-color); transition:all 0.11s ease-in-out 0s;}
}


.kandokoro-slider {position:relative; margin-bottom:1.5rem; padding:0; }


.swiper-container2 {
	position:relative; 
	width: 100%; height:100%;
	margin-bottom:3em;
}

.swiper-container2.swiper-container {overflow:visible;}

.is-mobile .swiper-container2 :is(.swiper-button-prev, .swiper-button-next) {display:none;}
.is-pc .swiper-container2 :is(.swiper-button-prev, .swiper-button-next) {
	/* mix-blend-mode: difference;*/
	/* transform: translate3d(0,0,0); /* Safari BugFix */
	opacity:0.75;
	scale: 0.5;
	top:auto !important; 
	bottom:-1.75rem !important;
}
.is-pc .swiper-container2 .swiper-button-prev {
	background-image: url("./img/icon/swiper-next-coffee.svg"); 
	left:50% !important;
	transform: translate3d(16em,0,0); 
	transform-origin:50% 50%;
}
.is-pc .swiper-container2 .swiper-button-next {
	background-image: url("./img/icon/swiper-prev-coffee.svg");
	right:50% !important;
	transform: translate3d(-16em,0,0);
	transform-origin:50% 50%;
}

.swiper-container2 .swiper-button-disabled {opacity:0 !important;}

.swiper-container2 .swiper-pagination-bullet {width:12px; height:12px; margin:0 6px !important; border:1px solid #351f1c; transition:all 0.22s linear 0s; transform:translateY(2em);}
.swiper-container2 .swiper-pagination-bullet-active { width:18px; height:18px; background:#fff; border:1px solid #351f1c; transform:translateY(calc(2em + 3px)); transition:all 0.22s linear 0s;}


@media (min-width:1400px) {	
	#kandokoro-menu .fixed-page-btn {max-width:15em;}
}
@media (min-width:1171px) {
	.for-even {display:block;}
	.for-odd {display:none;}
}
@media (min-width:900px) and (max-width:1279px) {
	.swiper-container2::before {padding-top:80%;}
	.kandokoro-slider {min-height:400px;}	
}
@media only screen and (min-width: 769px) and (max-width: 1077px) {
	#kandokoro-menu dt {font-size:1.8vw;}
}
@media (min-width:769px) and (max-width:899px) {
	.swiper-container2::before {padding-top:112.5%;}
}
@media (min-width:681px) and (max-width:768px) {
	#kandokoro-menu {padding:2.5rem 0 1.5rem;}
	#kandokoro-menu .kandokoro-slider::before {top:0; left:0;}
	#kandokoro-menu .kandokoro-slider::after {top:-0.65rem; left:-0.65rem;}
	#kandokoro-menu .trio { height:400px; margin:0 auto 1.5em; padding:0 0 1rem;}
	#kandokoro-menu dt {font-size:19px;}	
	#kandokoro-menu dd.caption {font-size:15px;}
}
@media (min-width:681px) and (max-width:1170px) {
	#kandokoro-menu .trio {max-width:460px; margin-inline:auto;}
	.for-even {display:none;}
	.for-odd {display:block;}
}
@media (max-width:680px) {
	.for-even {display:block;}
	.for-odd {display:none;}
	#kandokoro-menu {padding:2.5rem 0 2rem;}
	#kandokoro-menu .kandokoro-slider::before {top:0; left:0;}
	#kandokoro-menu .kandokoro-slider::after {top:-0.65rem; left:-0.65rem;}
	#kandokoro-menu .trio {width:440px; height:400px; margin:0 auto 1.5em; padding:0 0 1rem;}
	#kandokoro-menu .trio:last-child {margin-bottom:0; padding:1rem 0 0;}
	#kandokoro-menu dt {font-size:20px;}	
}
@media (max-width:480px) {
	#kandokoro-menu {padding:2rem 0 1rem;}
	#kandokoro-menu .kandokoro-slider::after {top:-0.5rem; left:-0.5rem;}	
	#kandokoro-menu .trio {width:100%; max-width:440px; height:410px;}
	#kandokoro-menu dd.caption {font-size:92.5%;}
}
@media (max-width:369px) {
	#kandokoro-menu .kandokoro-slider {max-width:369px; height:auto;}
	/*.swiper-container2::before {padding-top:125%;}	*/
}





#effectiveness .quarter {padding:1em 0.75em; text-align:center;}
#effectiveness .each-buta {width:auto; vertical-align:bottom;}
#effectiveness .quarter:first-child .each-buta { height:103px; opacity:0.7;}
#effectiveness .quarter:nth-child(2) .each-buta { height:103px; opacity:0.7;}
#effectiveness .quarter:nth-child(3) .each-buta { height:105px; opacity:0.7;}
#effectiveness .quarter:last-child .each-buta { height:107px; opacity:0.7;}
#effectiveness .sixty {padding:0.75em 1.25em; text-align:center;}
#effectiveness .forty {padding:0.75em 0 0; text-align:left;}
#effectiveness .sixty .deka-buta {width:min(100%,320px); height:auto; opacity:0.7;}


 
@media (max-width:900px) {
	#effectiveness .quarter:nth-child(odd) {text-align:right; padding:1em 1em 1em 0;}
	#effectiveness .quarter:nth-child(even) {text-align:left; padding:1em 0 1em 1em;}
}





#credo {
	background:url(./img/bg/7b.webp) no-repeat center center; 
	background-attachment:scroll; background-size:auto 100%;
}
@media (hover: hover) {
	#credo {background-attachment:fixed; background-size:cover;}
}
#credo .wh {text-shadow:0 0 2px rgba(0,0,0,0.75),0 0 5px rgba(0,0,0,0.5);}
#credo :is(.gbtn-black, .gbtn-white) {
	margin-top:0.25em; margin-bottom:1.25em;
	padding:0.75em 1em 0.75em 0.25em;
	font-feature-settings:"palt"; width:14.5em; text-align:center;
}
@media (max-width:480px) {
	#credo :is(.gbtn-black, .gbtn-white) {margin-top:0.5em; margin-bottom:2em;}
}
#credo a img.btn-icon-invert {margin-top:-0.25em;}
.is-mobile #credo, .is-ipad #credo {
	background-attachment:scroll; background-size:auto 100%; background-repeat:no-repeat; background-position:30% 100%;
}

#solo-production {
	position:relative;
	z-index:2;
	border:none;
}
#solo-production > * {position:relative; 	z-index:3; overflow:hidden;}
#solo-production::after {
	position:absolute; inset:0;
	content:"";
	width:100%; height:100%;
	background: rgba(255,255,255,0.55); 
	background-repeat:repeat;
	background-position:0 0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index:1;
}
#solo-production::before {
	position:absolute; inset:0;
	content:"";
	width:100%; height:100%;
	background:url(./img/bg/7b.webp) no-repeat center center; 
	background-size:cover;
	z-index:0;
}
@media (hover: hover) {
	#credo,
	#solo-production::before {background-attachment:fixed;}
}

#solo-production .mid-layer {position:absolute; inset:0; width:100%; height:100%; z-index:2;}
#solo-production .fore-layer {position:relative; z-index:3;}
#solo-production .mid-layer .tiratt-top-left {
	position:absolute; top:-1em; left:-2em; width:clamp(120px,15vw,300px); height:auto; opacity:0.5;
	visibility:visible !important; animation:Tiratt-TopLeft 0.8s ease-in-out 0s;
}
#solo-production .mid-layer .tiratt-bottom-right {
	position:absolute; bottom:-1.5em; right:-2em; width:clamp(120px,15vw,400px); height:auto; opacity:0.5;
	visibility: visible !important; animation:Tiratt-BottomRight 0.8s ease-in-out 0s;
}
@media (max-width:600px) {
	#solo-production .mid-layer .tiratt-top-left {top:-0.75em; left:-1.25em;}
	#solo-production .mid-layer .tiratt-bottom-right {bottom:-0.675em; right:-1.675em; }
}



#noteworthy {}

#says-intro {}



@keyframes Tiratt-TopLeft {
	0% {transform:translate(-100px,-200px);}
	100% {transform:translate(0,0);}
}
@keyframes Tiratt-BottomRight {
	0% {transform:translate(100px,200px);}
	100% {transform:translate(0,0);}
}

.btn-icon-inside.says {transform:scale(1.2); transform-origin:50% 50%;}
.btn-icon-inside.says img {display:inline-block; padding-right:0.5em;}

#blog-intro{position:relative;}
#blog-intro .inner-cell {width:90%; max-width:32em; margin:3em auto;}
#blog-intro #pickup {
	background:url(./img/bg/hanoji-dark.jpg) repeat center center; background-attachment:fixed; background-size:auto;
}
#blog-intro :is(#watznu, #pickup) td {padding-top:0;}
#blog-intro :is(#watznu, #pickup) :is(.post-date, .last-update) {display:inline-block; font-size:85%; padding-bottom:0.25rem;} 
#blog-intro #watznu .last-update {color:#aa9595;}
#blog-intro #pickup .last-update  {color:#fcc;}
span.last-update img.icon.update {width:1.5em; height:1.5em; margin:-0.25em 0.1em 0 0 ;}
a:hover span.post-date, span.last-update {text-shadow:none;}
#blog-intro #pickup table th img.wp-post-image {background:rgba(255,255,255,0.95);}
#blog-intro #pickup h2, #blog-intro #pickup table a {color:#fff;}
#blog-intro #pickup table a:hover { 
	color:#fff;
	text-decoration: none;
	text-shadow:0 0 1px #fff, 0 0 2px #fbc, 0 0 5px #fbc;
	transition: 0.22s linear all;	
}
@media (min-width:900px) {
	#blog-intro #pickup {padding-bottom:8em;}
	#blog-intro .to-blog {display:inline-block; position:absolute; bottom:4em; left:calc(50% - 0.5em); transform:translateX(-50%);} 
}
@media (max-width:899px) {
	#blog-intro #pickup {padding-bottom:5em;}
}
@media only screen and (max-width: 599px) {
	#blog-intro .pd-around {padding-inline:min(0.5em,3%);}
	#blog-intro .inner-cell {width:100%;}	
}
@media only screen and (max-width: 480px) {
	.toppage .recent-post th { width:120px; padding:1em 0.25em 1em 0.125em;}
	.toppage .recent-post td { font-size:0.85rem;}
}


/* +++++++++++++++++++++++++++++++++++++++++++++
	subpage common 
++++++++++++++++++++++++++++++++ */

@media (min-width:801px) {
	.solid-small-header {
		/*
		background:#E1E0DE;
		*/
		background:url(./img/bg/wood01-XLarge-band-curve.webp);
		background-size:100vw auto;
		background-position:center top;
		/*
		background:url(./img/bg/5b.webp);
		background-repeat:no-repeat;
		background-size:300vw auto; 
		animation:sshBgZuzutt 150.0s linear 0s forwards; 
		*/
		/*ease-in-out 0s infinite alternate;*/
	}
	/*
	@keyframes sshBgZuzutt {
		0% {background-position:33% 50%;}
		100% {background-position:90% 40%;}
	}
	.subpage #page-title {
		background:rgba(68,20,0,0.3);
		-webkit-backdrop-filter: blur(13px);
		backdrop-filter: blur(13px);
	}
	*/
}
@media (hover: hover) and (min-width:801px) {
	.solid-small-header {background-attachment:fixed;}
}
.subpage.works.single .header-image {
	background:#666;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	background-position:center center;
}
.subpage.blog.single .header-image {
	background:#fff;
	background-repeat:repeat;
	background-size:cover;
	background-attachment:fixed;
	background-position:center center;
}
:is(.is-ipad, .is-iphone).subpage:is(.works, .blog).single .header-image { 
	background-attachment:scroll;
	background-position:center top;
}
@media (hover: hover) {
	.subpage.works.single .header-image { background-size:cover; background-attachment:scroll;}
	.subpage.blog.single .header-image {background-size:auto; background-attachment:scroll;}
}

.theme-fuzz-layer {position:relative; width:100%; height:100%; min-height:20vh;}
.subpage .theme-fuzz-layer {
	-webkit-backdrop-filter: blur(5px);	
	backdrop-filter: blur(5px);	
}
.blog-single .theme-fuzz-layer {min-height:35vh;}
.works-single .theme-fuzz-layer {min-height:35vh;}

.theme-fuzz-layer h1 {}
.theme-fuzz-layer::before {
	position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
	content: " ";
	background:rgba(18,12,24,0.85) url(./img/bg/pattern.png) repeat 0 0;
	opacity:0.7;
}

.solid-small-header #page-title {padding:1em 0;}
.header-image #page-title {padding:5em 0;}
@media (max-width:480px) {
	.header-image #page-title {padding:2em 0 2.75em;}
}

.solid-small-header #page-title h1 {
	font-size:125%; font-weight:bold; line-height:1.4em; font-feature-settings:"palt";
	color:#fff; /*#171717;*/
	margin:0.25em auto; text-align:left; width:auto;
}
.solid-small-header #page-title h1 .fixed-page-icon {
	width:48px; height:48px; margin:0 0 0 0.5rem; vertical-align:-42%;
}
.solid-small-header #page-title h1 span.page-title-str {display:inline-block; font-size:150%; padding:0.25em 0; margin:0 0.35rem 0 0.75rem;}
.solid-small-header #page-title h1 span.subtitle {display:inline-block; font-size:75%; vertical-align:7.5%;}

.theme-fuzz-layer #page-title h1 {
	font-size:175%; font-weight:600; line-height:1.4em;
	color:#fff; 
	filter:drop-shadow( 0 0 3px rgba(0,0,0,0.55) );
	margin:1.2em auto 1.25em; text-align:left; 
	width:auto; 
}

.theme-fuzz-layer.small-header {min-height:20vh; }
.theme-fuzz-layer.small-header #page-title h1 {margin-top:5vh;}
h1 span.h1-en-caption {
	text-align:center;
	font-size:0.9rem; font-weight:normal; color:#fff;
	text-shadow:none; z-index:0; font-feature-settings:"palt";
	margin-left:0; padding:0.15em 0.5em; 
	line-height:1.5; border-radius:3px; background:rgba(255,255,255,0.2); 
	display:inline-block; vertical-align:30%; 
}
.theme-fuzz-layer h1 span.h1-en-caption {
	color:rgba(255,255,255,0.75);
	border:1px solid rgba(255,255,255,0.65);
	background:rgba(0,0,0,0);
}
.archive .theme-fuzz-layer h1 span.h1-en-caption {margin-top:2rem;}

.blog h1 img.icon.large {width:auto; height:38px; margin-left:3px; margin-right:11px; vertical-align:-15%;}  

@media (min-width:1400px) {
	.solid-small-header #page-title h1 .fixed-page-icon {width:51px; height:51px;}
}
@media (min-width:1171px) {
	.blog-top #page-title h1 {padding:0 0.85rem;}
}
@media (max-width:1170px) {
	#page-title h1 {padding:0 0.5em;}
	#page-title .post-meta { padding:0 1em;}
	#page-title .post-meta.works-header { padding:0 1.25em;}		
}
@media (min-width:1110px) {
	.solid-small-header #page-title h1 .fixed-page-icon {margin:0;}
}
@media only screen and (min-width: 801px) {	
	h1 img.fixed-page-icon { 
		animation:outOfColor 0.4s ease-in-out 1.1s forwards; 
	}
	@keyframes outOfColor {
		0% {filter:opacity(100%);}
		100% {filter:opacity(100%) grayscale(100%);}
	}
}
@media only screen and (max-width: 800px) {
	.header-image { background-attachment:scroll; background-size:cover; background-position:center center;}	
	.solid-small-header {background:url(./img/bg/wood01-Lower-Reverse.webp) no-repeat center center; background-size:cover; }
	.solid-small-header #page-title h1 {color:#fff;}
	h1 img.fixed-page-icon {
		width:185px; top:7.5%; left:0; right:0; margin:0 auto; filter:opacity(100%) grayscale(100%);
	}
	h1 span.blog-post-title {text-align:left !important; line-height:1.5em !important;}
}
@media only screen and (max-width: 768px) {
	#page-title h1 { font-size:180%; margin-top:6.75vmax;}	
	.theme-fuzz-layer {height: 100%; min-height:auto;}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
	h1 span.blog-post-title {font-size:82.5%; line-height:1.5em !important;}
}
@media only screen and (max-width: 480px) {	
	.solid-small-header #page-title h1 {color:#fff;}
	.solid-small-header #page-title h1 .fixed-page-icon {margin: 0 0 0 0.4em; vertical-align: -52%;}
	.solid-small-header #page-title h1 span.page-title-str { font-size:135%; font-feature-settings:"palt"; padding:0.35em 0; }
	#page-title h1 { font-size:160%; margin:2.5vmax 4px;} 
	.theme-fuzz-layer {height: 50%; min-height: 27.5vh !important; }
	h1 span.h1-en-caption {vertical-align:20%;}
	h1 span.blog-post-title {font-size:82.5%; line-height:1.15em !important;}	
	h1 img.fixed-page-icon {width:170px; top:7.5%;}	
}




.fixed-page-content {text-align:left;}

.hr-scrollable {
	position:relative;
	height: auto;
	margin:1em 0;
	width: 100%;
	max-width: 100.5em;
	text-align: center;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.hr-scrollable + .indicator {display:none; margin-top:-1.0em; color:hotpink; font-size:12px; text-align:center;}
.hr-scrollable + .indicator.indicate {display:block; width:100%;}
.hr-scrollable + .indicator img {width:auto; height:0.77em; margin-inline:0.6em; vertical-align:0em;}
.hr-scrollable table {margin-bottom:0; font-size:88%;}
.hr-scrollable table caption {text-align:center;}
.hr-scrollable table th, .hr-scrollable table td {
	border:1px solid #cacaca;/*rgba(0,0,0,0.2);*/
	word-break:keep-all; line-height:1.4;
}
.hr-scrollable table th:not([class]), .hr-scrollable table td:not([class]) {
	min-width:5em !important; max-width:auto !important; 
}
.hr-scrollable table tr th {
	background:rgba(231,231,231,0.875);
}
.hr-scrollable table tr th:first-child:not(.exception) {
	position:sticky !important; left:0; 
}
.hr-scrollable table tr th:first-child:not(.exception)::after {
	position:absolute; left:0; bottom:-1px;
	content:""; width:100%; height:100%;
	border-bottom:1px solid #ccc; border-right:1px solid #ccc;
	z-index:10;
}
table.compare td {text-align:center;}
table.nowrap td {white-space:nowrap;}
table.cell-wrap td {white-space:normal;}
/*.hr-scrollable p {margin-top:0; font-size:80%; color:#888;}*/

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

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

.credit {padding:1em;font-size:0.75rem; color:#999; text-align:right;}
.credit a {color:#999; border-bottom:1px dotted #999;}
.credit a:hover {border-bottom:1px dashed #bbb;}

.webdeza-btn-in-verse1 {margin:auto; width:100%; max-width:17.5em;}
.head-illust-in-verse1 {margin:auto; width:100%; max-width:18em;}

.refer-box {padding-right:1.25em; position:relative;}
.refer-box::after {
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	right: 1em;
	top: 50%;
	margin-top: -5px;
	border-right: 2px solid #67d;
	border-top: 2px solid #67d;
	transform: rotate(45deg);
	transition: all 0.14s linear 0s;	
}
.refer-box:hover::after {
	right: 0.75em;
	transition: all 0.14s linear 0s;	
}
.refer-image span.imgframe {
	display:block; position:relative; 
	width:11.8em; margin:0.5em 0; 
	background:rgba(0,0,0,0.05); border-radius:5px;
	background-size:cover; background-repeat:no-repeat; background-position:center center;
}
.refer-image span.imgframe::before { display: block; content:""; padding-top: 75%; }
@media (max-width:599px) {
	.refer-box {padding-right:1.5em; padding-left:1.5em; }
	.refer-box::after {right: 0.8em;}
	.refer-image span.imgframe {width:100%; margin:0 auto; background-position:center 20%;}
	.refer-image span.imgframe::before { padding-top: 66.66%; }
}
.refer-text {width:calc(100% - 11.8em); padding:0.5em 1em;}
.refer-title {margin:0.75em 0; font-weight:bold; line-height:1.5;}
.refer-lead {margin:0.5em 0; font-size:85%; line-height:1.5; color:#333;}
.wd-link-btn {margin:0; width:224px; height:auto; padding:0.5em 0;}
.wd-link-text {width:calc(100% - 224px);  padding:0.5em 1em;}
@media (max-width:599px) {
	.refer-image {width:100%; padding:1em 0.5em 0.5em;}
	.refer-text {width:100%; padding:0.5em;}
	.hr-scrollable table {font-size:80%;}
}




/* **********************
 webdeza-menu-in-page-template (3x4 navigation menu) 
*/

#webdeza-menu {	
	background-image:linear-gradient(135deg, rgba(40,20,0,0.06), rgba(40,20,0,0.06)), url(./img/bg/hanoji.jpg); 
	background-repeat:repeat, repeat; background-position:0 0, 0 0;
	background-size:auto auto, auto auto; background-attachment:fixed, fixed;
	color:#777;
}
#webdeza-menu a {color:var(--alt-color);}
#webdeza-menu .btn-mm0 {transition:all 0.11s ease-in-out 0s;}

#webdeza-menu nav a {display:block; overflow:hidden;}
#webdeza-menu .page-icon {	width:48px; height:48px; margin:0 0.25em 0 0.5em; vertical-align:-35%;}

#webdeza-menu h2.menu-aid {font-size:110%; font-weight:normal; padding:0.5em 0.5rem;}
#webdeza-menu h3 {margin:2.5em 0 0; color:var(--alt-color);}

#webdeza-menu ul.part {padding-left:0;}
#webdeza-menu ul.part li {
	display: inline-block; text-align: center; 
	width:17em; height:11.19em;
	margin: 7px 11px; padding: 7px;
	background:rgba(255,255,255,0.7);
	border: 1px solid #aaa; border-radius:5px; 
	font-size:16px; text-shadow:none;
	font-feature-settings:"palt";
	transition: 0.28s linear all;
}

#webdeza-menu ul.part li img {width:100%; height:auto; margin-bottom:2px;}
#webdeza-menu ul.part li.current {
	opacity:1.0;
	border:none;
	background: url(img/btn/imakoko2.png) center top no-repeat;
	background-size: cover;
}
#webdeza-menu ul.part li.current img {opacity:0.55;}


@media (hover: hover) {
	#webdeza-menu a:hover {	color:#fff; text-shadow: 0 0 1px #fff, 0 0 2px #fbc, 0 0 5px #fbc;}
	#webdeza-menu a:hover .btn-mm0 {scale: 1.03; transition:all 0.1s ease-in-out 0s; filter:saturate(200%);}
	#webdeza-menu ul.part li:hover {background: rgba(0,0,0,0.3); transition: all 0.24s ease-in-out 0s;}
	#webdeza-menu ul.part li:hover a {display:block;}	
}

@media (min-width:1110px) {
	#webdeza-menu h2.menu-aid {padding:0.5em 0;}
}
@media (min-width:1400px) {
	#webdeza-menu ul.part li {
		margin: 9px 13px; padding: 9px;
		border-radius:6px; 
		font-size:17px;
	}
}
@media (min-width:1800px) {
	#webdeza-menu ul.part li {
		margin: 10px 14px; padding: 10px;
		border-radius:7px; 
		font-size:18px;
	}
}
@media (max-width:640px) {
	#webdeza-menu ul.part li {width:15em; height:9.875em;}
}
@media only screen and (max-width: 530px) {	
	#webdeza-menu h2 {font-size:155%;}
	#webdeza-menu ul.part li {
		width:46%; max-width:15em; height:30%;
		margin: 6px 4px; padding: 3px;
		font-size:13px; font-feature-settings:"palt";
		transition: 0.18s linear all;
	}
}



.qaico {
    display: inline-block; height: 2.5em; width: 8.75em;  margin:0.5em 0.25em 0.75em 0; padding: 0.25em 0.75em;
    color: #666; font-size: 0.8em; background: rgba(214,200,181,0.45); line-height:2;
}
.qaico .icon {height:auto; margin-left:0.1em; margin-right:0.5em; margin-block:0.25em;}
.qaico .icon.question {width:1.2em; transform:translateY(-0.075em);}
.qaico .icon.answer {width:1.3em;}


/* ***********************
  Back Button (Single, Some Child Page)
*/

#browse-back-46 {display:none;}
#browse-back-46.enable {display:block;}
#browse-back-46 a {display:inline-block;}
.btn-back-46 {
	width:auto; height:117px; margin:0;
	animation:SwingBtn46 1.2s ease-in-out 0s infinite alternate;
}
.btn-forward-46 {
	width:auto; height:86px; margin:0;
	animation:SwingBtn46 1.2s ease-in-out 0s infinite alternate;
}
.btn-for-webdeza-46 {
	width:auto; height:108px; margin:0;
	animation:SwingBtn46 1.2s ease-in-out 0s infinite alternate;
}
@keyframes SwingBtn46 {
	0% {transform:translateX(-6px);}
	100% {transform:translateX(6px);}
}
.blog .btn-back-46 {padding-top:0.75rem;}


@media (hover: hover) {
	:is(.btn-back-46,.btn-forward-46,.btn-for-webdeza-46):hover {
		animation:SwingBtn46-Hover 0.6s ease-in-out 0s infinite alternate;
	}
	@keyframes SwingBtn46-Hover {
		0% {transform:translateX(0px) scale(1.0); filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.15));}
		100% {transform:translateX(0px) scale(1.075); filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.35));}
	}
}



/* ***********************
	404
*/
.msg404 {width:92%; max-width:460px; margin:1.5em auto;}


/* ***********************
  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: 901px) {
	.map-container iframe {width:100%; height:75vh; margin:0; border:none !important;}
}
@media only screen and (max-width: 900px) {
	.map-container iframe {width:96%; height:calc(100vh - 120px); margin:0 2%; border:1px solid #999;}
}



/* ***********************
   contact
*/
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;
}


/* ***********************
   About
*/
.about .portrait {width:100%; max-width:268px; margin:auto;}
.about-hobby {width:100%; max-width:220px; margin:auto; aspect-ratio:1 / 1; object-fit:cover;}
@media (max-width:599px) {
	.about .portrait {max-width:250px;}
	.about-hobby {max-width:100%;}
}



/* ***********************
   listed-card
   -- echo Blog Posts on Fiexed Page
*/
.listed-card {position:relative; padding:0 0 3.25em; background:#fff;}
.listed-card dl {height:100%; margin:0; padding:0;}
.listed-card dt { width:100%; padding:1rem; font-size:1.2rem; height:auto; min-height:3.5rem;}
.listed-card dd {padding:0;}
.listed-card dd.eyecatch {position:relative; width:100%; max-width:500px; height:auto;/*200px;*/ background:rgba(255,255,255,0);  overflow:hidden; padding:0; }
.listed-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 center;
}
.listed-card span.imgframe::after { content:""; display:block; padding-top:67%;/*100%;*/}

.listed-card dd.eyecatch img {width:auto !important; height:auto !important; vertical-align:middle; margin:0;}
.listed-card dd.eyecatch .noimage {position:absolute; top:0; right:0; bottom:0; left:0; margin:0; font-size:22px; text-align:center; padding:2em 0; font-family:'Geosans-L';}
.listed-card dd.caption {padding:0 1rem; font-size:0.85rem; line-height:1.65;}
.listed-card dd.caption img {display:none;}
.listed-card dd.caption.summary { 
	padding:1em 0.5em 0; height:105px;
}
.listed-card div.post-date {position:absolute; bottom:1em; right:1em;}




/* ***********************
   Echo Custom Post in Fixed Page
*/
.each-item { position:relative; padding: 0 max(8px, 0.5vw) 1.5em; text-align:center;}

@media only screen and (min-width: 1281px) {
	.each-item {padding:0 calc(14px + 0.5vw) 1.5em;}
}
@media (min-width:601px) and (max-width:899px) {
	.shell.break900 .each-item.trio {width:50%; font-size:85%; padding:0 8px 1.5em;}
}

.each-item dd {width:100%; padding:0.1rem 0 ; line-height:1.5em;}
.each-item .excerpt {font-size:90%;}
.each-item .eyecatch img {
	width:100% !important; height:auto !important; max-width:550px; vertical-align:middle; margin:0 auto;
	filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.45));
}

.works-list .each-item {margin-bottom:0; padding-top:2rem; padding-bottom:3rem;}
.works-list .each-item dt {width:100%; padding:1.25rem 0 0.1rem; font-size:120%; font-weight:bold; line-height:1.5em; color:#fff;}
.works-list .each-item dd {color:#fff;}
.works-list .each-item .eyecatch a {display:inline-block;}
.works-list .each-item .siteurl a {color:#fb4; text-decoration:none;}
.works-list .each-item .siteurl a:hover {color:#fff;}
.works-list .each-item .link {padding-top:0.5em; }
.works-list .each-item .link a {
	display:inline-block; height:2.5em; line-height:1.25; padding:0.5em 0.75em; margin:0 2px 0.35em; 
	border:1px solid transparent; border-radius:3px; color:#fb4; background:rgba(0,0,0,0.5); font-feature-settings:"palt";
	vertical-align:baseline; line-height:1.35; text-decoration:none;
}
.works-list .each-item a:not([class]):hover {color:#fff; text-shadow: 0 0 1px #fff, 0 0 2px #fbc, 0 0 5px #fbc;}
.works-list .each-item .link a:hover {background:rgba(0,0,0,0.75); border:1px solid #fb4;}
.works-list .specico {display:inline-block; font-size:80%; padding:0 0.5em;}
@media (hover: hover) {
	.works-list .each-item .eyecatch a {transition:all 0.28s ease-in-out 0s;}
	.works-list .each-item .eyecatch a:hover {transform:scale(1.025); transition:all 0.12s ease-in-out 0s;}
}


#works-verse1 {padding:0 0 3em;}
#works-verse2 {}

.is-mobile #works-meta-lower .post-date,
.is-mobile a.works-spec {display:inline-block; margin:0 0.5em;}

.term-list ul {padding-left:0;}
.term-list ul li {display:inline-block; margin:0.75em 2em 0.75em 0; font-feature-settings:"palt";}
#taxo-filter-lower .term-list ul li {color:#ddd;}
#taxo-filter-lower .term-list ul li a {color:#fb4;}
#taxo-filter-lower .term-list ul li a:hover {color:#fff; text-shadow: 0 0 1px #fff, 0 0 2px #fbc, 0 0 5px #fbc;}


/* ***********************
   entry-meta
*/
.entry-meta {margin:2.25em 0 1.25em;}
ul.entry-meta li {display:inline-block;}
.entry-meta a {
	display:inline-block; color:#fff; padding:0.35em 0.75em; margin:0.25em 0.4em 0.25em 0 !important; border:1px solid transparent;  background:rgba(101,186,247,1.0);
	font-family: Verdana, Helvetica, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif, "Takao Pゴシック", "TakaoPGothic", sans;
}
.entry-meta span.row { margin:0 16px 0 0;}
.entry-meta span.post-date { font-family: 'Geosans-L'; font-size:15px; color:#666; }

.blog-home .post {background:#fff; padding:8px 0; box-shadow:0 2px 4px rgba(20,20,20,0.2); }
.blog-home .post h2 { margin-left:0.5em; font-weight:normal;
	line-height:1.5em; border-bottom:1px dotted rgba(92,80,74,0.5);
	font-size:1.5em; text-shadow:none;
}

.subpage.blog .post-body {margin:1rem auto;}


/* ***********************
   Recent / Related Posts
*/
.recent-post th, .recent-post td {border:none;}  
.recent-post th {width:130px; padding-right:0;}
.recent-post div.post-tn {width:110px; height:110px; background:rgba(0,0,0,0.2); overflow:hidden; border-radius:12px; transition:all 0s linear 0s; box-shadow:0 1px 3px 0 rgba(0,0,0,0.25);}
.recent-post div.post-tn img {height:100%; aspect-ratio:1; object-fit:cover;}
.recent-post td {line-height:1.5em; padding-right:0;}

.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:100%; transition:all 0.18s linear 0s;}
.recent-post-small td {line-height:1.5em; padding:0.75em 0 0.75em 1em; font-size:90%;}

@media (min-width:1600px) {
	.recent-post th {width:145px;}
	.recent-post div.post-tn {width:125px; height:125px;}
	.recent-post td .post-date {font-size:105%;}
	.recent-post td a {font-size:110%;}
}


.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;}

table.blog-rel {margin:0;}
.blog-rel th, .blog-rel td {border:none;} 
.blog-rel div.post-tn:not(.size-150):not(.of-works) {width:110px; height:110px; background:rgba(255,255,255,0.75); overflow:hidden; border-radius:16px; box-shadow:0 1px 3px 0 rgba(0,0,0,0.25);}
.blog-rel div.post-tn.size-150 {width:150px; height:150px;}
.blog-rel div.post-tn.of-works {width:14.5em; height:auto; background:transparent; overflow:hidden; border-radius:0; filter:drop-shadow( 0 0 3px rgba(0,0,0,0.5) ); margin:0.75em 0;}

.blog-rel :is(.post-tn:not(.of-works), .thumb-frame) {display:block; width:8.5em; height:8.5em; margin:0; background:rgba(0,0,0,0.15); overflow:hidden; border-radius:0.75em; box-shadow:0 1px 3px 0 rgba(0,0,0,0.25);}
.blog-rel :is(.post-tn:not(.of-works), .thumb-frame) img {height:100%; aspect-ratio:1; object-fit:cover;}
.blog-rel .of-works img {width:100%; object-fit:contain;}

	
.blog-rel .post-date {display:inline-block; color:#888; line-height:1; font-size:88%; padding-bottom:0.5rem;}
.blog-rel .last-update {display:inline-block; color:#aa9595; line-height:1; font-size:88%; padding-bottom:0.5rem;}
.blog-rel .post-title {display:inline-block; font-weight:500; line-height:1.4; font-size:108%;}

@media (min-width:531px) and (max-width:768px) {
	.works table.blog-rel {max-width:530px; margin-inline:auto;}	
}
@media (max-width:480px) or ((min-width:769px) and (max-width:1070px)) {
	.works table.blog-rel {width:100%;}
	.works table.blog-rel th {padding-left:0;}
	.works table.blog-rel td {padding-right:0; font-size:95%;}
	table.blog-rel div.post-tn-works {width:160px;} 	
}
@media (min-width:601px) and (max-width:900px) {
	#archive-posts:is(.container, .std-container, .semi-wide-container, .wide-container, .x-wide-container, .xx-wide-container, .xxx-wide-container) {padding:0 1em;}
}
@media (min-width:481px) {
	#archive-posts .blog-rel th {width:10em !important; padding:0.75em;}
	#archive-posts .blog-rel td {width:auto !important; padding:0.0675em 1em 0.75em 0.5em; text-align:left !important; font-size:100%; line-height:1.5;}	
}
@media (max-width:480px) {
	#archive-posts .blog-rel th {width:8em !important; padding:0.75em 0.5em;}
	.blog-rel .post-tn, .blog-rel .thumb-frame {width:7.25em; height:7.25em; border-radius:0.675em; }
	.blog-rel :is(.post-date, .last-update) {font-size:85%;}
	.blog-rel .post-title {font-size:100%;}	
	.works table.blog-rel {margin-left:-1.8em;}	
}

#appendix .blog-rel th {width:7.65em !important; padding:0.6em;}
#appendix .blog-rel td {width:auto !important; padding:0.125em 1.25em 0.6em 0; text-align:left !important; font-size:100%; line-height:1.5;}

@media (min-width:1400px) {
	.blog-rel div.post-tn:not(.size-150):not(.of-works) {width:125px; height:125px;}
	#appendix .blog-rel td {padding-left:0.5em;}
}

@media (max-width:768px) {
	#appendix #sub-column {max-width:600px;}
}
@media (min-width:481px) and (max-width:768px) {
	#appendix .blog-rel td {padding-left:0.5rem;} 
}
@media (max-width:480px) {
	#appendix .blog-rel td {padding-left:0.25rem;} 
}



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


/* 
	pickup_cat-XXXXX.php
*/
#list-inner .item-cell {border-radius:6px; border:2px solid transparent; background:rgba(255,255,255,0.3); transition:all 0.3s linear 0s;}
#list-inner .item-cell:hover {border:2px solid rgba(255,255,255,0.75); background:rgba(255,255,255,0); transition:all 0.3s linear 0s;}

.bg-white #list-inner .item-cell {border-radius:6px; border:2px solid transparent; background:rgba(155,155,155,0.2); transition:all 0.3s linear 0s;}
.bg-white #list-inner .item-cell * {color: #666;} 
.bg-white #list-inner .item-cell:hover {border:2px solid rgba(155,155,155,0.75); background:rgba(255,255,255,0); transition:all 0.3s linear 0s;}


.face-icon {width:25vw; max-width:4.7rem; 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; width:auto; max-width:calc(90% - 10em); 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;} 

.toppage .bubble {max-width:calc(100% - 6em);}
@media (max-width:480px) {
	.toppage .face-icon {margin-left:-1.5em !important;}
	.toppage .bubble {margin-right:-1em !important;}
}



/* ++++++++++++++++++++++++++++++++++++++++
	Animation
*/
@keyframes Powatter {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
.powatt {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
}
.powatt-sd {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 0.4s; 	
}
.powatt-md {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 0.8s; 	
}
.powatt-ld {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: Powatter;
	visibility: visible !important;
    animation-delay: 1.2s; 	
}

@keyframes Fuwatter-LtoR {
	0% { opacity: 0; transform: translateX(-30px); }
	100% { opacity: 1; transform: translateX(0); }
}
.fuwatt-l2r {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-LtoR;
	visibility: visible !important;
    animation-delay: 0.225s; 			
}
.fuwatt-l2r-opening {
	animation-fill-mode:both;
	animation-duration:1.4s;
	animation-name: Fuwatter-LtoR;
	visibility: visible !important;
    animation-delay: 2s; 			
}
@keyframes Fuwatter-RtoL {
	0% { opacity: 0; transform: translateX(30px); }
	100% { opacity: 1; transform: translateX(0); }
}
.fuwatt-r2l {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 0.225s; 		
}
.fuwatt-r2l-sd1 {
	animation-fill-mode:both;
	animation-duration:1.0s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 0.425s; 		
}
.fuwatt-r2l-sd2 {
	animation-fill-mode:both;
	animation-duration:0.85s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 0.675s; 		
}
.fuwatt-r2l-opening {
	animation-fill-mode:both;
	animation-duration:1.4s;
	animation-name: Fuwatter-RtoL;
	visibility: visible !important;
    animation-delay: 2s; 		
}

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

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




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

@media (min-width:1400px) {
	html, body {font-size:18px;}
	.container {max-width:61.67em;}
	.semi-wide-container {max-width:71.11em;}
	.wide-container {max-width:77.22em;}
	.x-wide-container {max-width:84.7em;}
	.xx-wide-container {max-width:94.12em;}
	.xxx-wide-container {max-width:116.47em;}
	.hr-box.pd-top{padding:5em 0 0;}
	.hr-box.pd-btm, .hr-box.pd-bottom {padding:0 0 5em;}
	.hr-box.pd-both {padding:5em 0;}
	
	/*.fixed-page-content h2:is(:not([class]), .wp-block-heading), */
	.post-body h2:is(:not([class]), .wp-block-heading) {margin-left: -1.35em;}
	
	.fixed-page-content .pd-both h2:first-child, .fixed-page-content .pd-top h2:first-child {margin-top: 0.5em;}
	.fixed-page-content .pd-both h3:first-child, .fixed-page-content .pd-top h3:first-child {margin-top: 1.5em;}
	#single-body #main-column, #blog-home .solo, #blog-meta-lower {	max-width:48.33em;}
	span.warrow {font-size:115%; vertical-align:6%;}
	.face-icon {border-radius:8px;}
}
@media (min-width:1800px) {
	html, body {font-size:19px;}
}



/*
.fixed-page-content h2:is(:not([class]), .wp-block-heading)::before,
.post-body h2:is(:not([class]), .wp-block-heading)::before {
	content:""; width:1.4em; height:1.5em;
	position:absolute; top:0.125em; left:-1.5em;
	background:url(./img/illust/36-1000-penguin-note-reverse.svg);
	background-repeat:no-repeat;
	background-size:contain;
}
*/

@media (min-width:1024px) {

}

@media (max-width:1023px) {	
	.post-meta span.row { display:block; margin:0;}
}

@media (min-width:960px) {
	.fixed-page-content h2:is(:not([class]), .wp-block-heading), .post-body h2:is(:not([class]), .wp-block-heading) {margin-inline: -1.25em;}	
}

@media (min-width: 769px) {

}

@media only screen and (max-width: 768px) {
	#header-inner {height:auto; min-height:100px;}	
	ul.duo:first-child, ul.duo:first-child li:last-child {margin-bottom:0;}
	ul.duo:last-child {margin-top:0;}
	.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;}
}


@media only screen and (max-width: 480px) {	
	.welcome-img {margin-top:0;}
	.scroll-down {bottom:1.5vh; width:70px; height:70px;}
	#page-upper a.gbtn-aqua-small {font-size:85%; font-feature-settings:"pkna";}
	:is(ul,ol).kakomi li {margin-inline:0;}
	ol:is(.fs150, .fs150p, .fs145, .fs145p, .fs140, .fs140p) {font-size:130%;}
	ol:is(.fs135, .fs135p, .fs130, .fs130p) {font-size:120%;}
	ol:is( .fs125, .fs125p, .fs120, .fs120p, ) {font-size:115%;}
	ul.term-list {padding-left:0;}	
	ul.term-list li { font-size:85%; margin-top:0.75em; margin-bottom:0.75em; margin-right:1.5em; font-feature-settings:"palt";}
	#works-verse1 {padding: 0;}
	.face-icon,
	.face-photo {width:20vw; max-width:80px; margin:0.5em 0;}
	.bubble {padding:0.75em; font-size:90%; max-width:60vw;}
	.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;} 	
}