/*
Theme Name: Unitone-KinkowanBay-infoBox
Template: unitone
Author: IOWorld
Version: 1.0.0
Description: Unitone 錦江湾情報BOX
*/

/* 親テーマのスタイルを引き継ぐ場合 */
@import url("../unitone/style.css");

:root{
		--maincolor:#0000c9;
		--maincolor-light:#006aff;
		--subcolor:#eb70a6;
		--hovercolor:#ae0000;
		--dropshadow:drop-shadow(2px 2px 7px rgba(57,57,255,0.75));
		--dropshadow-noedge:drop-shadow(2px 2px 2px rgba(57,57,255,0.75));
		--dropshadow-hover:drop-shadow(0 0 0 rgba(57,57,255,0.75));
			--s-5:clamp(0.33rem, 0.39rem + -0.29vw, 0.18rem);
			--s-4:clamp(0.41rem, 0.47rem + -0.31vw, 0.25rem);
			--s-3:clamp(0.51rem, 0.57rem + -0.31vw, 0.35rem);
			--s-2:clamp(0.64rem, 0.69rem + -0.27vw, 0.5rem);
			--s-1:clamp(0.8rem, 0.84rem + -0.18vw, 0.71rem);
			--s0:clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
			--s1:clamp(1.25rem, 1.19rem + 0.32vw, 1.41rem);
			--s15:clamp(1.05rem, 0.995rem + 0.27vw, 1.2rem);
			--s2:clamp(1.56rem, 1.39rem + 0.85vw, 2rem);
			--s3:clamp(1.95rem, 1.61rem + 1.7vw, 2.83rem);
			--s4:clamp(2.44rem, 1.83rem + 3.04vw, 4rem);
			--s5:clamp(3.05rem, 2.04rem + 5.07vw, 5.65rem);
			/* 1.125rem */
			/* --s1の場合
			 1vw = 幅の１％
			（例）0.32vw＝　ウインドウ幅1200pxの場合　1200px × 0.0032 =3.84px
			最小値が1.25rem　推奨値が1.19rem + 3.84px(画面サイズで変化)　最大値　1.41rem
			*/
			--arrow-r-w:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M7.574,6.306c.392.392.392.995,0,1.387L1.783,13.484c-.362.362-.995.362-1.357,0-.392-.392-.392-.995,0-1.387l5.097-5.097L.426,1.903C.034,1.511.034.908.426.516c.362-.362.995-.362,1.357,0l5.79,5.79h0Z"/></svg>') no-repeat center;
			--roupe:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="%23FFFFFF" d="M28.063,23.875l-5.671-5.674c2.377-4.118,1.94-9.297-1.063-12.954l.053-.042-.803-.801C16.123-.043,8.871-.043,4.414,4.405c-2.157,2.156-3.345,5.026-3.345,8.08s1.188,5.924,3.345,8.081c3.673,3.675,9.348,4.388,13.788,1.822l5.679,5.675c.561.56,1.304.867,2.094.867h.009c.789-.003,1.528-.312,2.079-.868.562-.562.871-1.31.868-2.104-.002-.791-.312-1.532-.868-2.083ZM17.812,17.804c-2.931,2.928-7.699,2.928-10.63,0-2.923-2.928-2.923-7.7,0-10.629,2.931-2.928,7.699-2.928,10.63,0s2.931,7.7,0,10.629Z"/></svg>') no-repeat center / contain;
		}

* {margin: 0;padding: 0;box-sizing: border-box;font-size:1.125rem;letter-spacing:0.031rem;}
html {overflow-y: scroll;overflow-x: hidden;scroll-behavior: smooth;
	/*scroll-padding-top: 60px;*/
}
body{background-image: linear-gradient(0deg, rgba(0, 92, 255, 1), rgba(172, 232, 255, 1));}

/* iOSフォームボタンのデフォルト解除 */
input[type="submit"],
button[type="submit"] {-webkit-appearance: none; appearance: none;}

/* COMMON */
a img{transition:0.3s;}
@media (any-hover: hover) {
	a:hover img{transform:translate(1px,1px);opacity:0.8;}
}
@media (40.063rem < width) {
	.spObj{display:none;}
}
@media (40rem > width) {
	.pcObj{display:none;}
}


.arrow-r a,
.arrow-r-w a,
.arrow-l a,
.arrow-l-w a{text-decoration:none;position:relative;}
.arrow-r a{color:#000;}
.arrow-r-w a{color:#FFF;}
.arrow-r:not(.has-text-align-right) a,
.arrow-r-w:not(.has-text-align-right) a{padding-left:2rem;padding-right:2rem;transition:.3s;position:relative;}
.arrow-l:not(.has-text-align-right) a,
.arrow-l-w:not(.has-text-align-right) a{padding-left:2.5rem;padding-right:2rem;transition:.3s;position:relative;}
.arrow-r:not(.has-text-align-right) a::after,
.arrow-l:not(.has-text-align-right) a::after{background-color:#000;}
.arrow-r-w:not(.has-text-align-right) a::after,
.arrow-l-w:not(.has-text-align-right) a::after{background-color:#FFF;}
.arrow-r:not(.has-text-align-right) a::after,
.arrow-r-w:not(.has-text-align-right) a::after{content:"";mask:var(--arrow-r-w);mask-size: contain;width:0.625rem;height:0.844rem;margin-left:0.5rem;display:inline-block;position:absolute;right:0.3rem;top:50%;transform:translateY(-50%);transition:.3s;}
.arrow-l:not(.has-text-align-right) a::after,
.arrow-l-w:not(.has-text-align-right) a::after{content:"";mask:var(--arrow-r-w);mask-size: contain;width:0.625rem;height:0.844rem;margin-right:0.5rem;display:inline-block;position:absolute;left:1rem;top:50%;transform:translateY(-50%) scale(-1);transition:.3s;}
.arrow-r.has-text-align-right a::after,
.arrow-r-w.has-text-align-right a::after{content:"";mask:var(--arrow-r-w);mask-size: contain;width:0.625rem;height:0.844rem;margin-left:0.5rem;display:inline-block;transition:.3s;background-color:#000;}

.wp-block-button a{transition:.3s;}
figure figcaption {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
}

@media (any-hover: hover) {
	.arrow-r:not(.has-text-align-right) a:hover,
	.arrow-r-w:not(.has-text-align-right) a:hover{background-color:#e6e6e6;}
	.arrow-l a:hover,
	.arrow-l-w a:hover{background-color:#e6e6e6;}
	.arrow-r:not(.has-text-align-right) a:hover::after,
	.arrow-r-w:not(.has-text-align-right) a:hover::after{transform:translate(2px,-50%);}
	/* .arrow-l:not(.has-text-align-right) a:hover::after,
	.arrow-l-w:not(.has-text-align-right) a:hover::after{transform:translate(2px,-50%) scale(-1);} */
	.arrow-r.has-text-align-right a:hover::after,
	.arrow-r-w.has-text-align-right a:hover::after{transform:translateX(2px);background-color:#c50404;}
	.wp-block-button a:hover{transform:translate(1px,1px);}
}
/* ===end COMMON=== */

/* HEADER */
header.site-header nav ul li a {font-size: var(--s15);font-weight: 600;}
@media (any-hover: hover) {
	.wp-block-navigation__container a {z-index: 1;}
	.wp-block-navigation__container span {position: relative;z-index: 2;transition: color 0.3s;white-space:nowrap;}
	.wp-block-navigation__container span::after {content: '';position: absolute;top: 50%;left: 50%;width:var(--s2);height:var(--s2);background-color: #a9eeff;border-radius: 50%;z-index: -1;transform: translate(-50%, -50%) scale(0);transition: transform 0.5s ease-in;opacity:0;}
	.wp-block-navigation__container a:hover span::after {animation: poyon-bounce 1s ease-in-out forwards;opacity:1;}
}
/*バウンド anime*/
@keyframes poyon-bounce {
  0% {transform: translate(-50%, -50%) scale(0);}
  30% {transform: translate(-50%, -50%) scale(1.9);}
  50% {transform: translate(-50%, -50%) scale(1.6);}
  70% {transform: translate(-50%, -50%) scale(1.85);}
  85% {transform: translate(-50%, -50%) scale(1.78);}
  100% {transform: translate(-50%, -50%) scale(1.8);}
}

@media (64.438rem < width) {/*1031px以上*/
	nav.g-nav ul.wp-block-navigation__container {gap: var(--s2) !important;}
}
@media (75rem < width) {/*1200px以上*/
	nav.g-nav ul.wp-block-navigation__container {gap: var(--s3) !important;}
}
@media (64.375rem > width) {/*1030px以下*/
	nav.g-nav ul.wp-block-navigation__container {gap: var(--s1) !important;}
}

/* MENU RESPONSIVE*/
	/* コアのデフォルト 600px ブレイクポイントを無効化 */
	@media (600px < width) {
	  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {display: none;}
	  .wp-block-navigation__responsive-container-open:not(.always-shown) {display: flex;}
	}
	@media (61.313rem < width) {/*981px以上*/
	  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	    background-color: inherit;display: block;position: relative;width: 100%;z-index: auto;}
	  .wp-block-navigation__responsive-container-open:not(.always-shown) {display: none;}
		header.site-header nav {margin-right:var(--s5);padding: var(--s0);border-radius: 5rem;margin-block-start: var(--s3) !important;filter: var(--dropshadow);width:95%;}
	}
	@media (40.063rem < width) {/*641px以上*/
		header.site-header .wp-block-columns .wp-block-column{max-height:220px;}
		.wp-block-navigation__responsive-container.is-menu-open{width: 50%;margin-left: auto;}
	}

	@media (61.312rem > width) {/*980px以下*/
		header.site-header div.wp-block-column.main-title-column{flex-basis:70%!important; }
		header.site-header div.wp-block-column:not(.main-title-column){display: flex;justify-content: flex-end;flex-basis:30%!important;) !important;margin-top:var(--s1);margin-right: var(--s1);width:auto;}
		nav.g-nav.wp-block-navigation.has-unitone-background-background-color {width: 50px;height: 50px;border-radius: 0.3rem;margin-right: 0;border: 2px solid #d1e7ec;background-color:var(--maincolor-light) !important;}
		nav.has-unitone-background-background-color button svg {width: 34px;height: 34px;fill:#FFF;}
		.wp-block-navigation__responsive-container.is-menu-open{background-color:var(--maincolor-light);}
		.wp-block-navigation__responsive-container.is-menu-open ul.g-nav li a{padding: 5px var(--s1) !important;display: block;background-color: #FFF;border-radius: var(--s4);}
		.wp-block-navigation__responsive-container.is-menu-open ul.g-nav li a span {font-size: 1rem;}
	}

	@media (40rem > width) {/*640px以下*/
		.wp-block-navigation__responsive-container.is-menu-open{width: 80%;margin-left: auto;}
	}

.main-title.wp-block-site-logo {transform: translate(-16.5%, -26%);}
.main-title.wp-block-site-logo img{filter: drop-shadow(2px 2px 7px rgba(57,57,255,0.75));}


/* CONTENT COMMON */
#loader {position: fixed;inset: 0;background-image: linear-gradient(0deg, rgba(0, 92, 255, 1), rgba(172, 232, 255, 1));display: flex;justify-content: center;align-items: center;z-index: 9999;opacity: 1;transition: opacity .5s ease;}
#loader.hide {opacity: 0;pointer-events: none;}
/* .spinner {width: 50px;height: 50px;border: 5px solid #ddd;border-top-color: var(--maincolor-light);border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {
  to { transform: rotate(360deg); }
} */
/* .spinner {width:50px;aspect-ratio:1;border-radius:50%;background:
    radial-gradient(farthest-side,#91d2ff 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,#91d2ff);animation:loadspin 1s infinite linear;}
@keyframes loadspin{
  100%{transform:rotate(1turn)}
} */
.spinner {width: 50px;aspect-ratio: 1;box-shadow: 0 0 0 3px #fff inset;border-radius: 50%;position: relative;animation: loadspin 7s infinite;opacity:0.7;}
.spinner:before,
.spinner:after {content: "";position: absolute;top: calc(100% + 3px);left: calc(50% - 12.5px);box-shadow: inherit;width: 25px;aspect-ratio: 1;border-radius: 50%;transform-origin: 50% -28px;animation: loadspin 1.5s infinite;opacity:0.8;}
.spinner:after {animation-delay: -0.75s;}
@keyframes loadspin {
	100% {transform: rotate(360deg);}
}


/* FRONT */
@media (40.063rem < width) {/*641px以上*/
	body.home header{background:url(./img/front-main-image-bg.webp) no-repeat center top / contain;aspect-ratio: 128 / 83;margin-bottom: 80px;}
}
@media (75rem < width) {/*1200px以上*/
	body.home header{background:url(./img/front-main-image-bg-w.webp) no-repeat center top / contain;aspect-ratio: 128 / 70;}
}
@media (40rem > width) {/*640px以下*/
	body.home header{background:url(./img/front-main-image-bg.webp) no-repeat center top 80px / contain;aspect-ratio: 128 / 115;}
}


body.home main .front-about-deco {margin-top: -15%;}
body.home main .front-about-deco div.kame {margin: 10% 0 -5rem;text-align: center;}
body.home main .front-about-deco div.kame figure {margin: auto;}
@media (40.063rem < width) {/*641px以上*/
}
@media (61.25rem > width) {/*980px以下*/
	body.home main .front-about-deco{width: 150%;transform: translateX(-15%);}
}

.front-main-content{position:relative;
	background-image:url('./img/bubble03.webp'), url('./img/bubble02.webp');
  background-repeat: no-repeat, no-repeat;
  background-position:bottom left 7%,bottom right 7%;
}
.front-about {position:relative;background-color: rgba(255,255,255,.5);padding: var(--s2) var(--s3);border-radius: var(--s3);display:flex;flex-direction:column;gap:var(--s2);}
.front-about::before {content: "";position: absolute;display: block;width: 200px;height: 413px;background: url(./img/bubble01.webp) no-repeat left top;left: -20%;top: 5%;}
.front-about .front-about-button a{margin:var(--s15) 0;padding:var(--s0) 0;filter:var(--dropshadow);transition:.3s;display:block;}

	@media (782px < width) {/*782以上*/
	.front-about .front-about-button > div:first-of-type a{transform:translateX(var(--s2));}
	.front-about .front-about-button > div:last-of-type a{transform:translateX(calc(-1 * var(--s2)));}

	.front-split-button .creatures{transform:translateX(var(--s4));}
	.front-split-button .spots{transform:translateX(calc(-1 * var(--s4)));}

	}
.front-split-button{margin-top:var(--s5);}
.front-split-button .wp-block-column figure.wp-block-image{margin-left:auto;margin-right:auto;}
.front-split-button figure a{display:block;background-color:#FFF;border-radius:50%;aspect-ratio:1 / 1;transition:.3s;position:relative;}

.front-split-button figure a::after{position:absolute;content:"";display:block;top:-30px;z-index:-1;}
.front-split-button .creatures figure a{filter: drop-shadow(10px 0px 0px rgba(0,106,255,1));}
.front-split-button .creatures figure a::after{width:125px;height:148px;left:0;background:url(./img/front-button-01-after.svg) no-repeat left top / contain;}
.front-split-button .spots figure a{filter: drop-shadow(10px 0px 0px rgba(235,112,136,1));}
.front-split-button .spots figure a::after{width:200px;height:210px;right:-40px;background:url(./img/front-button-02-after.svg) no-repeat right top / contain;}

.entry-content:has(.front-about){position:relative;}
.entry-content:has(.front-about)::before{content:"";display:block;width:300px;height:200px;position:absolute;background:url(./img/front-creatures-same.webp) no-repeat center / contain;left:2%;z-index:2;}
.entry-content:has(.front-about)::after{position:absolute;content:"";display:block;background:url(./img/front-creatures-utsubo.webp) no-repeat center top / contain;}

body:is(.page,.single,.archive) .footer-image-block{position:relative;}
body:is(.page,.single,.archive):not(.home) .footer-image-block::before{position:absolute;content:"";display:block;background:url(./img/front-creatures-utsubo.webp) no-repeat center top / contain;z-index:2;}
body:is(.page,.single,.archive):not(.home) .footer-image-block::after{content:"";display:block;width:300px;height:200px;position:absolute;background:url(./img/front-creatures-same.webp) no-repeat center / contain;left:50%;z-index:2;}

@media (67.5rem < width) {/*1080px以上*/
	.entry-content:has(.front-about)::after{right:82%;}
}
@media (61.313rem < width) {/*981px以上*/
	.entry-content:has(.front-about)::after{width:400px;height:315px;top:40%;right:80%;}
	body:is(.page,.single,.archive):not(.home) .footer-image-block::before{top:0;left:-90px;width:400px;height:315px;}/*うつぼ*/
}
@media (40.063rem < width) {/*641px以上*/
	.entry-content:has(.front-about)::before{bottom: -25%;left:20%;}
	body:is(.page,.single,.archive):not(.home) .footer-image-block::after{bottom:40%;transform:translate(-50%,-50%) rotate(45deg);}
}
@media (40.063rem < width) and (61.25rem > width){ /*タブレット 640 - 980*/
	body:is(.page,.single,.archive):not(.home) .footer-image-block::before{top:0;left:-90px;width:300px;height:237px;}/*うつぼ*/
	.entry-content:has(.front-about)::after{width:400px;height:315px;right:80%;bottom:20%;}
}
@media (40rem > width) {/*640px以下*/
	.entry-content:has(.front-about)::before{bottom: -11%;}
	.front-split-button{width:70%;gap:var(--s5);}
	.entry-content:has(.front-about)::after{width:300px;height:236px;left:-45%;bottom:100px;}
	.front-about figure.wp-block-image img{max-width:70%;}
	body:is(.page,.single,.archive):not(.home) .footer-image-block::before{top:-20px;left:-90px;width:190px;height:150px;}/*うつぼ*/
	body:is(.page,.single,.archive):not(.home) .footer-image-block::after{bottom:0;transform:translate(-40%,-40%) rotate(45deg) scale(0.6);}
}

@media (any-hover: hover) {
	.front-split-button figure a:hover{transform:translateX(10px);}
	.front-split-button .creatures figure a:hover{filter: drop-shadow(0px 0px 0px rgba(0,106,255,1));}
	.front-split-button .spots figure a:hover{filter: drop-shadow(0px 0px 0px rgba(235,112,136,1));}
	.front-about .front-about-button a:hover{transform:translate(1px,1px);filter:var(--dropshadow-hover);}
}
/* ===end FRONT */

/* SIDEBAR */

/* PAGE COMMON*/
.wp-site-blocks .is-style-accent > div {padding-top: 3rem;padding-bottom: 3rem;}
main .entry-content h2{margin-bottom:1rem;padding:0.5rem;--unitone--font-size:2.5}
main .entry-content h3:not(:has(img)):not(.has-shadow){margin-bottom:1rem;padding:0.5rem;background-color:var(--maincolor);color:#FFF;--unitone--font-size:2}
main .entry-content h4,
main .entry-content h5{--unitone--font-size:2}
main.site-contents,
main[data-unitone-layout~=decorator]{padding-left:var(--s1);padding-right:var(--s1);}
@media (61.25rem > width) {/*980px以下*/
}
h1.page-title {font-size: var(--s2);}
h1.page-title img.page-title-img{margin-left:auto;margin-right:auto;display:block;}

input[type="checkbox"]{margin-right:var(--s0);}
section{max-width:1000px;margin-left:auto;margin-right:auto;}
section.section-has-border + section.section-has-border.dot .border-box{border-top: 6px dotted var(--maincolor-light);position:relative;}

/* ===PAGE=== */
.page-about-deco{position: absolute;top: -3.3%;left: 0;right: 0;margin: 0 auto;z-index: 1;}
.form-box {width:100%;}
.form-box.search-keywords * {font-size: var(--s15);}
.has-shadow img{filter:var(--dropshadow-noedge);}
[type="radio"] + label{margin-left:var(--s0);}

.creatures_lists{width:100%;max-width:61.313rem;display: grid;grid-gap: var(--s1);}
@media (40.063rem < width){ /*641px以上*/
	.creatures_lists{grid-template-columns: repeat(3, 1fr);}
}
@media (40rem > width) {/*640px以下*/
.creatures_lists{grid-template-columns: repeat(2, 1fr);}
}

h3 + .creatures_lists{margin-top:var(--s1);}
.creatures_lists > div{aspect-ratio:205 / 130;overflow:hidden;border-radius: 1rem;}
.creatures_lists > div a{display:flex;align-items:center;justify-content:center;padding: var(--s1);text-decoration:none;aspect-ratio:205 / 130;transition:.3s;position:relative;}
.creatures_lists > div a:not(.list-all-other){background-position: center;background-repeat: no-repeat;}
.creatures_lists > div a.list-all-other{background-color:#FFF!important;background-image:none!important;}
.creatures_lists > div a.list-all-other span{color:var(--maincolor-light);}
.creatures_lists:where(.creatures_lists--gyorui) > div a{background-size: contain;}
.creatures_lists:where(.creatures_lists--musekitsui) > div a{background-size: cover;}



.creatures_lists > div a span{color:#FFF;font-weight:600;font-size:calc(var(--s15) * 1.2);position:relative;z-index:1;text-align:center;font-feature-settings: "palt";letter-spacing:0.03em;}
.creatures_lists > div a:not(.list-all-other) span{filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.7));}

@media (52.563rem < width) {/*841px以上*/
	.creatures_lists > div a span{line-height: var(--s2);}
	.creatures_lists > div a span ruby {font-size:calc(var(--s15) * 1.2);}
}
@media (52.5rem > width) {/*840px以下*/
	.creatures_lists > div a span:has(br){font-size:calc(var(--s0) * 0.6);line-height: var(--s15);}
	.creatures_lists > div a span ruby {font-size:font-size:calc(var(--s0) * 0.9);}
}

.creatures_lists > div a span ruby rt {font-size: 0.5em;}

.creatures_lists.creatures_lists--gyorui > div a.list-all-other {background-color:#0067C0!important;}
.creatures_lists.creatures_lists--gyorui > div a.list-all-other span{color:#FFF!important;}
.creatures_lists.creatures_lists--sekitsui > div a.list-all-other {background-color:#864A2B!important;}
.creatures_lists.creatures_lists--sekitsui > div a.list-all-other span{color:#FFF!important;}
.creatures_lists.creatures_lists--musekitsui > div a.list-all-other {background-color:#F58220!important;}
.creatures_lists.creatures_lists--musekitsui > div a.list-all-other span{color:#FFF!important;}
.creatures_lists.creatures_lists--mo_syokubutsu > div a.list-all-other {background-color:#008000!important;}
.creatures_lists.creatures_lists--mo_syokubutsu > div a.list-all-other span{color:#FFF!important;}


.creatures_lists > div a:not(.list-all-other)::before{position:absolute;content:"";width:100%;height:100%;background-color:rgba(0,0,0,.55);z-index:0;transition:.3s;}
/* .creatures_lists > div a[style] span{color:#FFF!important;} */
.a-linkbutton figure a img{border-radius:var(--s0);}
@media (40rem > width){ /*640以下*/
	.a-linkbutton figure {flex-basis: 45%;}
}

@media (any-hover: hover) {
	.creatures_lists > div a:hover{transform: scale(1.05);}
	.creatures_lists > div a:hover::before{background-color:rgba(0,0,0,.1);}
	/* .creatures_lists > div a.list-all-other:hover {background-color: #006aff !important;}
	.creatures_lists > div a.list-all-other:hover span{color:#FFF !important;} */

	.creatures_lists.creatures_lists--gyorui > div a.list-all-other:hover {background-color:#FFF!important;}
	.creatures_lists.creatures_lists--gyorui > div a.list-all-other:hover span{color:#0067C0!important;}
	.creatures_lists.creatures_lists--sekitsui > div a.list-all-other:hover {background-color:#FFF!important;}
	.creatures_lists.creatures_lists--sekitsui > div a.list-all-other:hover span{color:#864A2B!important;}
	.creatures_lists.creatures_lists--musekitsui > div a.list-all-other:hover {background-color:#FFF!important;}
	.creatures_lists.creatures_lists--musekitsui > div a.list-all-other:hover span{color:#F58220!important;}
	.creatures_lists.creatures_lists--mo_syokubutsu > div a.list-all-other:hover {background-color:#FFF!important;}
	.creatures_lists.creatures_lists--mo_syokubutsu > div a.list-all-other:hover span{color:#008000!important;}
}

/* ===PAGE おすすめスポット=== */
.osusume-spots-wrap-map {width:100%;max-width: 980px;height: auto;margin: 0 auto var(--s3);padding-bottom: var(--s1);border-bottom: 6px dotted var(--maincolor-light);position:relative;overflow:hidden;}
.osusume-spots-wrap-map::after{position:absolute;z-index:1;content:"";background: url(/infobox/wp-content/uploads/2026/02/dolphin.webp) no-repeat center / contain;}
@media (40.063rem < width) {/*641px以上*/
	.osusume-spots-wrap-map::after{width:150px;height:85px;bottom:50px;left:10px;}
}
@media (40rem > width) {/*640px以下*/
	.osusume-spots-wrap-map::after{width:90px;height:51px;bottom:35px;left:0;}
	.osusume-spots-wrap-map svg {overflow: visible;padding: 40px 0;background-color: #b1d8ff;}
	path.area-btn {transform:scale(1.6) translate(55px,70px);transform-origin: right;}
	#spot-map {transform: translate(-50px,-120px);}
}
.osusume-spots-wrap{background-color: #FFF;padding: var(--s3) var(--s1) 100px;border-radius: var(--s3);position:relative;}
.osusume-spots-wrap h3{max-width:300px;margin:0 auto var(--s-4);}
.osusume-spots-wrap::after{content:"";width:180px;height:90px;display:block;clip-path: polygon(0 0, 50% 100%, 100% 0);background-color:#FFF;position:absolute;bottom:0;left:50%;z-index:-1;transition:.5s;transform:translateX(-50%);}
.osusume-spots-wrap.result::after{bottom:-50px;transition:.5s;}

.section-osusume-spots {border-radius: var(--s2);}
.kensakai4, .kensakai5, .kensakai7, .kensakai3, .kensakai6, .kensakai1, .kensakai2 {stroke: #b1d8ff;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px;}
.kensakai4, .kensakai5, .kensakai7, .kensakai3, .murasaki-area, .kensakai6, .kensakai1, .kimidori-area, .kensakai2, .aomidori-area, .daidai-area {fill: none;}
.kensakai2 {stroke-dasharray: .096 9.626;}
.kensakai3 {stroke-dasharray: .104 10.411;}
.kensakai4 {stroke-dasharray: .097 9.721;}
.kensakai5 {stroke-dasharray: .087 8.66;}
.kensakai6 {stroke-dasharray: .089 8.937;}
.kensakai7 {stroke-dasharray: .101 10.139;}

.murasaki-area, .kimidori-line, .murasaki-line, .kimidori-area, .daidai-line, .aomidori-line, .aomidori-area, .daidai-area, .momo-line {stroke-miterlimit: 10;stroke-width: 7px;}
.momo-line,.kimidori-line, .murasaki-line, .daidai-line, .aomidori-line {fill: #fff;}
.kagoshima {fill: #e5eff4;}
.momo {fill: #ff438b;}
.momo-line {stroke: #ff438b;}
.momo-line {filter: url(#drop-shadow-1);}
.momo-area {mix-blend-mode: multiply;stroke: #ff438b;fill: #fff;stroke-miterlimit: 10;stroke-width: 7px;}
.momo-area.active {fill: #ff438b;}

.daidai{fill: #ff9e00;}
.daidai-line {filter: url(#drop-shadow-2);}
.daidai-line, .daidai-area {stroke: #ff9e00;}
.daidai-area.active{fill:#ff9e00;}

.kimidori {fill: #8cc63f;}
.kimidori-line {filter: url(#drop-shadow-3);}
.kimidori-line, .kimidori-area {stroke: #8cc63f;}
.kimidori-area.active{fill:#8cc63f;}

.aomidori {fill: #00a99d;}
.aomidori-line {filter: url(#drop-shadow-4);}
.aomidori-line, .aomidori-area {stroke: #00a99d;}
.aomidori-area.active{fill:#00a99d;}

.murasaki {fill: #ab8cde;}
.murasaki-line {filter: url(#drop-shadow-5);}
.murasaki-area {opacity: .75;}
.murasaki-area, .murasaki-line {stroke: #ab8cde;}
.murasaki-area.active{fill:#ab8cde;}

.st26 {fill: #d3f2ff;}
.miyazaki {fill: #f9fdfb;}
.bg-blue {fill: #b1d8ff;}

/* 目的ボタン（チップ）の反転アニメーション */
.purpose-filter-group,.kind-filter-group{ display: flex; flex-wrap: wrap; gap: var(--s0);}
.hidden-check { display: none; }
.chip-text {display: inline-block;padding: 8px 20px;border-radius: 50px;border: 2px solid #8e9fff;cursor: pointer;background: #fff;transition: 0.3s;}
@media (any-hover: hover) {
	.chip-text:hover{transform: translate(2px,2px);}
}
@media (40rem > width) {/*640px以下*/
	.purpose-filter-group,.kind-filter-group{gap:var(--s-2);}
	.chip-text{padding:4px var(--s-1);}
}
.hidden-check:checked + .chip-text {background: #3875ff;color: #fff;}

.spot-list{width:100%;display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); /*3カラム*/
		grid-gap: var(--s1);
		padding:var(--s1)
	}
	.filter-section {margin: 0 0 var(--s0);}

	.spot-card {background-color:#FFF;border-radius: var(--s0);overflow: hidden;padding: var(--s-1);}
	.spot-card a{text-decoration:none;color:var(--maincolor);}
	.spot-image img {border-radius:var(--s-2);width: 100%;aspect-ratio: 1/0.84;object-fit: cover;}
	.spot-content{line-height:var(--s0);}
	h4.spot-title{font-size:var(--s15);}
	.spot-description {color: #0000cc;font-weight: 600;line-height: var(--s1);}

	.spot-card .spot-content .spot-tags{display:flex;flex-wrap:wrap;gap:var(--s-4);padding:var(--s0) 0 0;}
	.spot-card .spot-content .spot-tags span{font-size:var(--s-1);border:2px solid var(--maincolor);border-radius:var(--s4);padding: 2px 15px;font-weight: 600;}
	.spot-card .spot-content .spot-tags span.tag-filled{color:#FFF;}
	.spot-card .spot-content .spot-tags span.tag-filled.area-spot_area_kagoshima{background-color:#ff438b;}
	.spot-card .spot-content .spot-tags span.tag-filled.area-spot_area_sakurajima{background-color:#ff9e00;}
	.spot-card .spot-content .spot-tags span.tag-filled.area-spot_area_airakirishima{background-color:#8cc63f;}
	.spot-card .spot-content .spot-tags span.tag-filled.area-spot_area_ohsumi{background-color:#00a99d;}
	.spot-card .spot-content .spot-tags span.tag-filled.area-spot_area_ibusuki{background-color:#ab8cde;}

/* 地図のアクティブ表現 */
.area-path.active, .area-btn.active {
    fill: #ec407a !important; /* ピンク色に反転 */
}
/* 地図（パス）がアクティブな時の色 */
.area-path.active {
    fill: #ec407a !important; /* 1枚目の画像のようなピンク */
    stroke-width: 2px;
}

/* 右側のボタンがアクティブ */
.area-btn.active.kagoshima-line {fill: #ff438b !important;}
.area-btn.active.sakurajima-line {fill: #ff9e00 !important;}
.area-btn.active.airakirishima-line {fill: #8cc63f !important;}
.area-btn.active.ohsumi-line {fill: #00a99d !important;}
.area-btn.active.ibusuki-line {fill: #ab8cde !important;}
.area-btn.active :is(.momo,.daidai,.kimidori,.aomidori,.murasaki,.momo-line,.daidai-line,.kimidori-line,.aomidori-line,.murasaki-line){fill:#FFF!important;}
:is(.momo-line,.daidai-line,.kimidori-line,.aomidori-line,.murasaki-line).active{stroke:rgb(255,255,255)!important;}
.osusume-spots-purpose-notes{color: #2c6aff;text-align: center;display: block;font-weight: 600;}

#no-results-message{text-align: center;padding: var(--s2) 0 5rem;color: #FFF;font-weight: 600;font-size: var(--s15);background: url(./img/no-results-message.png) no-repeat center bottom;background-size: 100px;}

p.filter-label {text-align: center;font-size: var(--s15);padding: var(--s0);font-weight: 600;color: #3875ff;position:relative;letter-spacing:var(--s-2);}
p.filter-label::before,p.filter-label::after{content: '';position: absolute;top: 50%;display: inline-block;width: 45px;height: 2px;background-color: #3875ff;}
p.filter-label::before{left: 50%;transform: translateX(-200%);}
p.filter-label::after{right: 50%;transform:translateX(200%);}

div#spot-search-app {margin-top: var(--s5);display:none;opacity:0;transition:.5s;}
div#spot-search-app.result{display:block;opacity:1;transition:.5s;}
div#spot-search-app h3{text-align:center;}
.has-d-line img {filter: drop-shadow(3px 3px 0 #FFF);}

.filter-actions{display:flex;gap:var(--s1);flex-wrap:wrap;justify-content:center;margin-top:var(--s4);}
.filter-actions button{padding: calc(var(--s1) / 2) var(--s1);border-radius: var(--s2);font-weight: 600;border: none;cursor: pointer;transition:.3s;}
.filter-actions button#js-search-submit{background-color: #fc418c;color: #FFF;}
.filter-actions button#js-search-reset{background-color:#ddd;}
	/* 詳細ページ */
.spot-single-wrap {background-color: #FFF;border-radius: var(--s2);padding-top:var(--s2);padding-bottom:var(--s5);}
.spot-single-wrap .spot-title-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s0);padding-left:var(--s0);padding-right:var(--s0);}
.spot-single-wrap .spot-title-wrap + .spot-detail-wrap{margin-top:var(--s5);}
.spot-single-wrap .spot-title-wrap .spot-single-title-area{padding:5px var(--s0);border:2px solid var(--maincolor);border-radius:var(--s2);font-size:var(--s15);font-weight:600;color:#FFF;}
.spot-single-wrap .spot-title-wrap h2{border-bottom: 2px solid var(--maincolor);font-size: var(--s2);display: flex;justify-content: center;flex-direction: column;color:var(--maincolor);width:100%;text-align:center;}
@media (40rem > width) {/*640px以下*/
	.spot-single-wrap .spot-title-wrap h2{line-height: var(--s3);padding-bottom: var(--s-1);}
	.spot-single-wrap .spot-title-wrap .spot-single-area{flex-wrap:wrap;}
	.spot-single-wrap .spot-title-wrap .spot-single-area span{white-space: nowrap;}
}
.spot-single-wrap .spot-title-wrap .spot-single-area{display:flex;column-gap:var(--s0);row-gap:calc(var(--s0) / 2);}
.spot-single-wrap .spot-title-wrap .spot-single-area span{padding:0 var(--s0);border:2px solid var(--maincolor);color:var(--maincolor);border-radius:var(--s2);font-weight:600;}

.spot-single-gallery{margin-top:var(--s3);margin-bottom:var(--s3);}
.spot-single-gallery .swiper-slide img {width: 100%;aspect-ratio: 16 / 9;object-fit: contain;height: auto;}

.spot-single-wrap .return-button{}
.spot-single-wrap .return-button{text-align:center;margin:var(--s5) 0 0;}
.spot-single-wrap .return-button a{background-color:#fc418c;padding: calc(var(--s1) / 2) var(--s2) calc(var(--s1) / 2) var(--s3);border-radius: var(--s3);font-weight: 600;border: none;transition: .3s;color:#FFF;display:inline-block;}

.spot-detail-wrap{}
.spot-detail-wrap :is(h3,h4){text-align:center;margin-bottom:var(--s0);}
.spot-detail-wrap .spot-content{margin-bottom:var(--s3);}
.spot-detail-wrap .spot-content p{color:var(--maincolor);}
.spot-detail-wrap .spot-single-column{display:flex;gap:var(--s2);}
@media (40rem > width) {/*640px以下*/
	.spot-detail-wrap .spot-single-column{flex-direction:column;}
}
.spot-detail-wrap .spot-single-column > div {flex: 1;}
.spot-detail-wrap .spot-single-column .spot-single-column-detail {display: flex;flex-direction: column;justify-content: space-between;}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-area{display:flex;flex-wrap:wrap;column-gap:var(--s0);row-gap:calc(var(--s0) / 2);justify-content:center;margin-bottom:var(--s1);}
.spot-detail-wrap .spot-single-column .spot-single-column-detail iframe{vertical-align:bottom;border-radius:var(--s1);}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-area span{padding:0 var(--s0);border:2px solid var(--maincolor);color:var(--maincolor);border-radius:var(--s2);font-weight:600;}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table{width:100%;border-collapse:collapse;border-top:3px solid var(--maincolor);border-bottom:3px solid var(--maincolor);}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table :is(th,td){text-align:center;}
@media (40.063rem < width) {/*641px以上*/
	.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table :is(th,td):not(:last-of-type){width:30%;}
	.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table :is(th,td):last-of-type{width:40%;}
}
@media (40rem > width) {/*640px以下*/
	.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table :is(th,td):not(:last-of-type){width:25%;}
	.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table :is(th,td):last-of-type{width:50%;}
}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table thead{border-bottom:3px solid var(--maincolor);}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table th{padding:5px 0;color:var(--maincolor);}
@media (40rem > width) {/*640px以下*/
	.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table th{font-size:1rem;}
}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table td{padding:8px 0;}
.spot-detail-wrap .spot-single-column .spot-single-column-detail .spot-single-column-facility table td img {vertical-align: top;}
.spot-single-wrap .spot-title-wrap .spot-single-title-area.kagoshima{background-color:#ff438b;}
.spot-single-wrap .spot-title-wrap .spot-single-title-area.sakurajima{background-color:#ff9e00;}
.spot-single-wrap .spot-title-wrap .spot-single-title-area.aira{background-color:#8cc63f;}
.spot-single-wrap .spot-title-wrap .spot-single-title-area.osumi{background-color:#00a99d;}
.spot-single-wrap .spot-title-wrap .spot-single-title-area.ibusuki{background-color:#ab8cde;}
.spot-map-link{display:none;}

.swiper-button-prev,
.swiper-button-next {height: 50px;width: 50px;}
.swiper-button-prev::after,
.swiper-button-next::after {background-repeat: no-repeat;background-size: contain;content: "";height: 50px;margin: auto;width: 50px;font-size:0!important;}
.swiper-button-prev::after {background-image: url(./img/swiper-button-prev-org.svg);}
.swiper-button-next::after {background-image: url(./img/swiper-button-next-org.svg);}

@media (40.063rem < width) {/*641px以上*/
	.spot-single-wrap .spot-title-wrap{padding-left:var(--s3);padding-right:var(--s3);}
	.spot-single-wrap .spot-detail-wrap{padding-left:var(--s4);padding-right:var(--s4);}
	.spot-single-gallery.swiper{padding-left:var(--s3);padding-right:var(--s3);}
	.swiper-button-prev{left:var(--s3)!important;}
	.swiper-button-next{right:var(--s3)!important;}
}
@media (40rem > width) {/*640px以下*/
.spot-single-wrap :is(.spot-title-wrap.spot-single-area,.spot-detail-wrap){padding-left:var(--s1);padding-right:var(--s1);}
}
@media (any-hover: hover) {
	.area-path:hover, .area-btn:hover {cursor: pointer;opacity: 0.8;}
	.filter-actions button:hover,
	.spot-single-wrap .return-button a:hover{opacity:0.8;transform:translate(1px,1px);}
}

/* === ／END  PAGE おすすめスポット／=== */

@media (40.063rem < width) {/*641px以上*/
	.split{display:flex;justify-content:space-between;}
	.form-box {padding-left: var(--s5);padding-right: var(--s5);}
	.form-box.search-keywords {max-width:}
}
@media (61.313rem < width) {/*980px以上*/
	.page-about-deco{gap:20rem;}
}
@media (75rem < width) {/*1200px以上*/
}
@media (40.063rem < width) and (61.25rem > width){ /*タブレット*/
	.page-about-deco{width: 140dvw;margin-left: -20dvw;gap: 15rem;}
}
@media (40rem > width) {/*640px以下*/
	section.alignfull > div{padding-left:var(--s1);padding-right:var(--s1);}
	.form-box {padding-left:var(--s1);padding-right:var(--s1);}
	.form-box span:has([type="radio"]){display:block;}
	.form-box span:has([type="radio"]) + span:has([type="radio"]){margin-top:var(--s-1);}
	.unitone-section > [data-unitone-layout~="gutters"] > [data-unitone-layout~="container"] {padding: 0;margin: 0;width: 100%;}
	.page-about-deco{width: 130dvw;margin-left: -20dvw;gap: 7rem;top:0;margin-top:-40px;}
	.wp-block-column.same{flex-basis: calc(60% - 3rem)!important;}
	.wp-block-column.kame{flex-basis: calc(40% - 4rem)!important;}
	.page-about-deco .wp-block-column.kame figure{margin-top:20%;}
}
.page-about-deco .wp-block-column.kame figure{margin:10% 0 0 auto;}
/* ===PAGE===*/

/* FORM */
.form-box input[type="text"]{width:100%;border-color:var(--maincolor-light);border-radius:2rem;border-width: 2px;padding-left:var(--s-1);padding-right:var(--s-1);}
.form-box form{display:flex;flex-direction:column;gap:var(--s1);color:var(--maincolor-light);font-weight:600;}
.form-box.search-keywords form div:has(input[type="text"]) label{display:block;}
.form-box form .submit-button-wrap{text-align:center;}
.form-box form .submit-button{padding: var(--s-1) var(--s3);font-size:var(--s1);letter-spacing:var(--s-1);color: #FFF;font-weight: 600;background-color: var(--maincolor-light);filter: var(--dropshadow);border-radius: var(--s5);display: flex;justify-content: center;align-items: center;margin: 0 auto;transition:.3s;}
.form-box form .submit-button::before{content:"";width:30px;height:30px;display:inline-block;margin-right:var(--s0);background:var(--roupe);}
input[type="radio"],
input[type="checkbox"]{height:var(--s1);width:var(--s1);margin-right:var(--s-2);}
label:has(input[type="radio"],input[type="checkbox"]){display:flex;align-items:center;}

@media (any-hover: hover) {
	.form-box form .submit-button:hover{filter: drop-shadow(0px 0px 0px rgba(255,255,255,0));cursor:pointer;transform:translate(1px,1px); }
}


/* FOOTER */
footer.site-footer {position: relative;background: #0000c9;}
footer.site-footer::before {content: "";position: absolute;top: -80px;left: 0;width: 100%;height: 80px;
  background-image: url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'>\
	<path d='M0,40 \
	C150,80 150,0 300,40 \
	C450,80 450,0 600,40 \
	C750,80 750,0 900,40 \
	C1050,80 1050,0 1200,40 \
	L1200,80 L0,80 Z' fill='%230000c9'/>\
	</svg>");
  background-size: 100% 100%;background-repeat: no-repeat;
}
footer.site-footer figure img{filter:drop-shadow(0 0 10px rgba(255,255,255,1));position:relative;z-index:1;}
footer.site-footer figure::after{position:absolute;top:0;left:0;right:0;margin: 0 auto;z-index:0;content:"";width:226px;height:40px;display:block;background:url(./img/io-world-logo-w.svg) no-repeat center / contain;filter:blur(3px);}

.unitone-div.footer-image-block {width: 100dvw;margin: 0 calc(50% - 50dvw);position:relative;}
.unitone-div.footer-image-block * {width:100dvw;}
.unitone-div.footer-image-block + footer{margin-top:-80px;}
@media (40rem > width) {/*640px以下*/
	.footer-image-block{width:100dvw;margin:0 calc(50% - 50dvw);}
}
/* ===end FOOTER=== */

#page-top {position: fixed;bottom: -100%;right: 1rem;z-index: 10; }
#page-top.UpMove {animation: UpAnime 0.5s forwards; }
#page-top.DownMove {animation: DownAnime 0.5s forwards; }
#page-top img{transform:scale(0.8);}
@keyframes UpAnime {
  from {opacity: 0;transform: translateY(100px); }
  to {opacity: 1;transform: translateY(0); } }
@keyframes DownAnime {
  from {opacity: 1;transform: translateY(0); }
  to {opacity: 1;transform: translateY(100px); }
	}

@media (40.063rem < width) {/*641px以上*/
	.wp-block-column.footer-location span{margin-right:1rem;}
}
@media (40rem > width) {/*640px以下*/
	footer div {padding-top: 0 !important;}
	.wp-block-column.footer-location span{display:block;}
	[data-unitone-layout~="cover__content"][data-unitone-layout~="-valign:center"]:has(main){margin-bottom: 20px;}
	[data-unitone-layout~="cover__content"]:has(main) + [data-unitone-layout~="cover__content"]:has(footer){}
	/* .footer-button a{padding:1rem 0.5rem;}
	.footer-button a:after{right:0;}
	.wp-block-columns.footer-column-wrapper {flex-wrap: nowrap !important;} */
}



/* =====泡===== */
.sea {position: absolute;left: 0;width: 100vw;height: 70%;display: block;right: 0;margin:calc(50% - 50vw);z-index:-1;}
.bubble-wrap {position: absolute;bottom: -50px;animation: rise linear forwards;}
.bubble {width: 100%;height: 90%;border-radius: 50%;background: rgba(255, 255, 255, 0.8);animation: sway ease-in-out infinite;}
@media (40.063rem < width) {
	.sea{bottom:15%;}
}
@media (40rem > width) {/*640px以下*/
	.sea{bottom:5%;}
}
/* 上昇＋拡大 */
@keyframes rise {
  0% {transform: translateY(0) scale(0.3);opacity: 0.5;}
  20% {transform: translateY(0) scale(0.5);opacity: 1.0;}
  80% {opacity: 1.0;}
  100% {transform: translateY(-80dvh) scale(1);opacity: 0;}
}
/* 横揺れ */
@keyframes sway {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(var(--sway)); }
  100% { transform: translateX(0); }
}

/* PAGE TOP BUTTON */
#page-top {position: fixed;bottom: -100%;right: calc(var(--s0) / 2);z-index: 10;}
@media (40.063rem < width) {/*640px以下*/
	#page-top.UpMove {animation: UpAnime 0.5s forwards;}
	#page-top.DownMove {animation: DownAnime 0.5s forwards;}
}
@media (40rem > width) {/*640px以下*/
	/* #page-top {bottom: 90px !important;} */
}
@keyframes UpAnime {
	from {opacity: 0;transform: translateY(100px);}
	to {opacity: 1;transform: translateY(0);}
}
@keyframes DownAnime {
	from {opacity: 1;transform: translateY(0);}
	to {opacity: 1;transform: translateY(100px);}
}

.footer-image-block figure img{}

.fishmov{position:absolute;z-index: -1;bottom:20%;left:0;width:100%;height:auto;mix-blend-mode: screen;}
.fish-container {position: absolute;bottom: 20%;left: -500px;z-index:-1;opacity:0.4;filter:blur(3px);
	animation: swim-across 15s linear infinite;
}
.fish-container .fish-image {animation: bobbing 15s ease-in-out infinite;}
.fish-container.f1 .fish-image{width:200px;height:auto;}
.fish-container.f2 .fish-image{width:100px;height:auto;}
.fish-container.f3 .fish-image{width:200px;height:auto;}

/* 魚　横移動 */
@keyframes swim-across {
  0% { left: -500px; }
  50% { left: 200%;}
  100% { left: -500px; }
}

@keyframes bobbing {
  0%, 100% { transform: translateY(0) rotate(0deg) scaleX(-1); }
  25% { transform: translateY(-20px) rotate(0deg) scaleX(-1); }
  50% { transform: translateY(0) rotate(0deg) scaleX(-1); }
  51% { transform: translateY(5px) rotate(5deg) scaleX(1); }
  99% { transform: translateY(15px) rotate(0deg) scaleX(1); }
}
.f1 { animation-delay: 0s; }
.f1 .fish-image { animation-delay: 0s; }
.f2 { animation-delay: -1.5s; }
.f2 .fish-image { animation-delay: -1.5s; }
.f3 { animation-delay: -4s; }
.f3 .fish-image { animation-delay: -4s; }

/* #canvas { position: relative; bottom: 0; left: 0; width: 100dvw; height:calc(100dvw * 0.578);aspect-ratio:64 / 37;overflow:hidden;}
.plane { width: 100%; height: 100%; margin: 0; }
.plane img { display: none; } */

@media (any-hover: hover) {

}

.samekame-wrap::before{content:"";display:block;position:absolute;background:url('/infobox/wp-content/uploads/2026/02/front-about-zinbei02.webp') no-repeat center / contain;width:500px;height:200px;z-index:3;}/*サメ*/
.samekame-wrap::after{content:"";display:block;position:absolute;background:url('/infobox/wp-content/uploads/2026/02/front-about-kame02.webp') no-repeat center / contain;width:426px;height:307px;z-index:3;}/*カメ*/
@media (75rem < width) {/*1200px以上*/
}

@media (48.875rem > width) {/*782px以下*/
}


@media (61.313rem < width) {/*980px以上*/
	/* サメカメ */
	.samekame-wrap{padding-bottom:100px;}
	.samekame-wrap:not(.site-header)::before{left:-200px;bottom:0;}
	.samekame-wrap:not(.site-header)::after{right:-200px;bottom:-130px;}
	.samekame-wrap.site-header::before{left:10px;bottom:-100px;}
	.samekame-wrap.site-header::after{right:-60px;bottom:-230px;}
}

@media (75.063rem > width) {/*1200px以下*/
}

@media (40.063rem < width) and (61.25rem > width){ /*タブレット*/
	/* サメカメ */
	.samekame-wrap{padding-bottom:100px;}
	.samekame-wrap:not(.site-header)::before{left:-250px;bottom:-40px;}
	.samekame-wrap:not(.site-header)::after{right:-250px;bottom:-130px;scale(0.8);}
	.samekame-wrap.site-header::before{left:-90px;bottom:-110px;transform: scale(0.8);}
	.samekame-wrap.site-header::after{right:-100px;bottom:-210px;transform: scale(0.7);}
}

@media (40rem > width) {/*640px以下*/
	/* サメカメ */
	.samekame-wrap{padding-bottom:100px;}
	.samekame-wrap:not(.site-header)::before{left:-250px;bottom:-40px;transform: scale(0.7);}
	.samekame-wrap:not(.site-header)::after{right:-200px;bottom:-130px;transform: scale(0.6);}
	.samekame-wrap.site-header::before{left:-210px;bottom:-70px;transform: scale(0.5);}
	.samekame-wrap.site-header::after{right:-180px;bottom:-160px;transform: scale(0.4);}

	.entry-content:has(.front-about)::before{transform:translate(50px,50px) scale(0.7);}
}