/* Lower page only. All hero styles, typography, assets and motion remain in the original files. */
.yl-page,.yl-footer{--u:calc(100cqw / 1024);color:#082936;font-family:"Noto Sans JP",sans-serif;font-size:calc(12 * var(--u));line-height:1.5;container-type:inline-size;background:#f7f1e3 url('../img/lower/paper.webp?v=3') repeat;background-size:calc(250 * var(--u)) calc(30 * var(--u));}

.yl-page{position:relative;overflow:clip}
.yl-page *,.yl-footer *{box-sizing:border-box}
.yl-page h2,.yl-page h3,.yl-page p,.yl-footer p{margin:0}
.yl-page a,.yl-footer a{color:inherit;text-decoration:none}
.yl-page a:focus-visible,.yl-footer a:focus-visible{outline:3px solid #367666;outline-offset:5px}
.yl-page img{display:block;width:100%;height:100%;object-fit:cover}
.yl-upper{position:relative;overflow:clip;height:calc(1550 * var(--u))}
.yl-ornaments{position:absolute;left:0;right:0;top:calc(-85 * var(--u));height:calc(2048 * var(--u));background:url('../img/lower/ornaments.webp?v=15') 0 0/100% 100% no-repeat;pointer-events:none}
.yl-section{position:relative;scroll-margin-top:90px}
.yl-heading{position:absolute;left:calc(106 * var(--u));top:0}
.yl-eyebrow{font-size:calc(12 * var(--u));font-weight:500;letter-spacing:.12em;line-height:1.2}
.yl-heading h2{font-family:"Noto Sans JP",sans-serif;font-size:calc(26 * var(--u));font-weight:700;line-height:1.25;letter-spacing:-.06em;margin:calc(3 * var(--u)) 0}
.yl-sub{font-size:calc(12 * var(--u));font-weight:500;line-height:1.4}
.yl-more{position:absolute;right:calc(100 * var(--u));font-size:calc(12 * var(--u));font-weight:700;color:#164a46!important}
.yl-more:hover{text-decoration:underline}
.yl-polaroid{display:block;padding:calc(6 * var(--u));background:#fcfaf2;box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) #5d4c3c42;border:1px solid #e9e2d3;position:relative;transform-origin:50% 0%;transition:box-shadow .3s ease}
.yl-polaroid::before{content:"";position:absolute;left:36%;top:calc(-7 * var(--u));width:28%;height:calc(18 * var(--u));background:#b4cfb18c;z-index:1;transform:rotate(-4deg)}
.yl-polaroid:hover{box-shadow:0 10px 22px #5d4c3c33}

/* 国から探す・記事カードは、テープの位置に関係なくふわっと持ち上がるだけのホバー */
.yl-country,.yl-article{transition:transform .3s ease,box-shadow .3s ease}
.yl-country:hover,.yl-article:hover{transform:translateY(-3px)}

/* 動物カードはテープの位置を軸に、少し斜めに動くホバー（元の傾きに上乗せする） */
.yl-animal{transition:rotate .3s ease,translate .3s ease,box-shadow .3s ease}
.yl-animal:hover{rotate:4deg;translate:0 -4px}

.yl-animals{height:calc(270 * var(--u))}
.yl-animals .yl-heading{top:calc(17 * var(--u))}
.yl-animal-script{position:absolute;left:calc(882 * var(--u));top:calc(-3 * var(--u));font:calc(23 * var(--u))/1.1 "Caveat",cursive!important;transform:rotate(-12deg);color:#665746}
.yl-paw{display:none}
.yl-animals-grid{position:absolute;left:calc(162 * var(--u));top:calc(36 * var(--u));display:flex;gap:calc(8 * var(--u));align-items:flex-start}
.yl-animal{width:calc(112 * var(--u));height:calc(139 * var(--u));transform:rotate(-2deg);text-align:center;font-weight:500;font-size:calc(12 * var(--u));padding-bottom:calc(4 * var(--u))}
.yl-animal img{height:calc(106 * var(--u));margin-bottom:calc(4 * var(--u))}
.yl-animal-0{margin-top:calc(70 * var(--u));height:calc(91 * var(--u));transform:rotate(-7deg)}
.yl-animal-0 img{height:calc(61 * var(--u))}
.yl-animal-0::before{display:none}
.yl-animal-1{transform:rotate(-5deg)}
.yl-animal-2{transform:rotate(-4deg)}
.yl-animal-2::before{background:#eeb29c8c}
.yl-animal-3{transform:rotate(-2deg)}
.yl-animal-3::before,.yl-animal-5::before{background:#e8ca7f88}
.yl-animal-4{transform:rotate(-2deg)}
.yl-animal-5{transform:rotate(0deg)}
.yl-animals .yl-more{top:calc(197 * var(--u));right:calc(76 * var(--u))}

.yl-countries{height:calc(330 * var(--u))}
.yl-countries .yl-heading{top:calc(62 * var(--u))}
.yl-countries .yl-more{top:calc(106 * var(--u));right:calc(112 * var(--u))}
.yl-country-grid{position:absolute;left:calc(117 * var(--u));right:calc(118 * var(--u));top:calc(126 * var(--u));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(9 * var(--u))}
.yl-country{height:calc(135 * var(--u));padding:calc(6 * var(--u))}
.yl-country img{height:calc(92 * var(--u))}
.yl-country>span{display:block;line-height:1.4;font-weight:500;font-size:calc(12 * var(--u));margin:calc(3 * var(--u)) calc(3 * var(--u)) 0}
.yl-country b{float:right;font-weight:400}
.yl-country small{display:block;font-size:calc(8 * var(--u));letter-spacing:.06em;margin-left:calc(3 * var(--u));line-height:1.2}
.yl-country::before{display:none}

.yl-journal{height:calc(330 * var(--u))}
.yl-journal .yl-heading{top:calc(37 * var(--u))}
.yl-journal .yl-sub{position:absolute;left:calc(144 * var(--u));top:calc(28 * var(--u));width:calc(220 * var(--u))}
.yl-journal .yl-more{top:calc(59 * var(--u))}
.yl-journal-grid{position:absolute;left:calc(105 * var(--u));right:calc(105 * var(--u));top:calc(94 * var(--u));display:grid;grid-template-columns:repeat(3,1fr);gap:calc(13 * var(--u))}
.yl-article{height:calc(198 * var(--u));padding:calc(6 * var(--u))}
.yl-article::before{display:none}
.yl-article img{height:calc(97 * var(--u))}
.yl-article time{display:block;font-size:calc(10 * var(--u));margin:calc(3 * var(--u)) calc(5 * var(--u)) 0;line-height:1.2}
.yl-article h3{font-family:inherit;font-size:calc(14 * var(--u));font-weight:500;line-height:1.35;margin:calc(2 * var(--u)) calc(5 * var(--u)) calc(8 * var(--u))}
.yl-chips{display:flex;gap:calc(4 * var(--u));margin:0 calc(4 * var(--u));white-space:nowrap}
.yl-chips span{font-size:calc(11 * var(--u));line-height:1.7;font-weight:500;border-radius:999px;background:#d7e9e2;padding:0 calc(8 * var(--u))}

/* 旅のテーマ（動物に会う／旅を組み立てる／泊まる／特典で旅する）のタグ色。
   記事カードのチップ（.yl-chips span）と、記事ページのカテゴリーバッジ（.yt-cat-badge）の両方で使う。 */
.yl-chips span.yl-chip--animal,.yt-cat-badge.yl-chip--animal{background:#617A45;color:#fff}
.yl-chips span.yl-chip--plan,.yt-cat-badge.yl-chip--plan{background:#47789A;color:#fff}
.yl-chips span.yl-chip--stay,.yt-cat-badge.yl-chip--stay{background:#B56F59;color:#fff}
.yl-chips span.yl-chip--perk,.yt-cat-badge.yl-chip--perk{background:#A98732;color:#fff}

.yl-themes{height:calc(335 * var(--u))}
.yl-themes .yl-heading{top:calc(51 * var(--u))}
.yl-theme-grid{position:absolute;top:calc(132 * var(--u));left:calc(92 * var(--u));right:calc(110 * var(--u));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(26 * var(--u))}
.yl-tag{height:calc(183 * var(--u));position:relative;text-align:center;display:flex;align-items:center;flex-direction:column;color:#003f36!important;isolation:isolate;transform-origin:48% calc(8 * var(--u));transition:transform .3s ease}
.yl-tag-paper{position:absolute;inset:0;z-index:-1;background:#d9e7c7;clip-path:polygon(10% 0,90% 0,100% 10%,100% 98%,98% 100%,2% 100%,0 98%,0 10%);border-radius:calc(5 * var(--u))}
.yl-tag-paper::after{content:"";position:absolute;width:calc(9 * var(--u));height:calc(9 * var(--u));background:#f9f4e8;box-shadow:0 0 0 calc(2 * var(--u)) #b29b70;left:48%;top:calc(8 * var(--u));border-radius:50%}
.yl-tag-1 .yl-tag-paper{background:#bae1e9}
.yl-tag-2 .yl-tag-paper{background:#f3d3bf}
.yl-tag-3 .yl-tag-paper{background:#f3e5af}
.yl-string{position:absolute;width:calc(42 * var(--u));height:calc(42 * var(--u));top:calc(-30 * var(--u));left:calc(75 * var(--u));fill:none;stroke:#875427;stroke-width:3.5;stroke-linecap:round;z-index:2}
.yl-tag-3 .yl-string{transform:scaleX(-1);left:calc(60 * var(--u))}
.yl-tag .yl-theme-icon{width:calc(60 * var(--u));height:calc(60 * var(--u));margin-top:calc(20 * var(--u));object-fit:contain}
.yl-theme-en{font-size:calc(12 * var(--u));letter-spacing:.14em;font-weight:500;line-height:1.2}
.yl-tag h3{font-family:inherit;font-size:calc(19 * var(--u));font-weight:700;line-height:1.3;margin:calc(3 * var(--u)) 0}
.yl-tag p{font-size:calc(12 * var(--u));line-height:1.4}
.yl-tag:hover{transform:rotate(-3deg) translateY(-4px)}

.yl-about{height:calc(285 * var(--u))}
.yl-about .yl-heading{left:calc(103 * var(--u));top:calc(74 * var(--u))}
.yl-about-photo{position:absolute;left:calc(281 * var(--u));top:calc(70 * var(--u));width:calc(215 * var(--u));height:calc(163 * var(--u));padding:calc(10 * var(--u));transform:rotate(-4deg)}
.yl-about-photo::before{display:none}
.yl-about-copy{position:absolute;left:calc(532 * var(--u));top:calc(70 * var(--u));width:calc(320 * var(--u))}
.yl-about-copy h3{font-family:inherit;font-size:calc(26 * var(--u));line-height:1.3;margin-bottom:calc(5 * var(--u))}
.yl-about-copy p{font-size:calc(11 * var(--u));line-height:1.45;font-weight:500;letter-spacing:0}
.yl-profile-link{display:inline-block;background:#004f43;color:#fff!important;font-size:calc(12 * var(--u));padding:calc(7 * var(--u)) calc(25 * var(--u));margin-top:calc(10 * var(--u));border-radius:calc(8 * var(--u))}
.yl-about-gap{height:24px}
.yl-beach{height:calc(80 * var(--u));background:url('../img/lower/beach.webp?v=3') center/100% 100% no-repeat}

.yl-journey{height:calc(244 * var(--u));background:url('../img/lower/journey-edges.webp?v=3') center bottom/100% auto no-repeat}
.yl-journey .yl-heading{left:calc(103 * var(--u));top:calc(-1 * var(--u))}
.yl-journey .yl-heading h2{font-size:calc(21 * var(--u));margin:calc(4 * var(--u)) 0}
.yl-journey .yl-sub{font-size:calc(12 * var(--u))}
.yl-map{position:absolute;left:calc(328 * var(--u));top:calc(4 * var(--u));width:calc(289 * var(--u));height:calc(155 * var(--u));mix-blend-mode:normal}
.yl-legend{position:absolute;left:calc(166 * var(--u));top:calc(92 * var(--u));padding:calc(7 * var(--u)) calc(12 * var(--u));background:#fcf9ef;box-shadow:0 1px 3px #5d4c3c33;font-size:calc(12 * var(--u))}
.yl-legend span{display:block;color:#00534d;line-height:1.7}
.yl-legend b{color:#082936;font-weight:500}
.yl-legend span:nth-child(2){color:#84a279}
.yl-legend span:nth-child(3){color:#f57d42}
.yl-country-list{position:absolute;top:calc(17 * var(--u));left:calc(657 * var(--u));width:calc(130 * var(--u))}
.yl-country-list h3{font-family:inherit;font-size:calc(12 * var(--u));text-decoration:underline;text-underline-offset:4px;color:#144d47;margin-bottom:calc(12 * var(--u))}
.yl-country-list ul{list-style:none;margin:0;padding:0;font-size:calc(12 * var(--u));line-height:1.6}
.yl-country-list a:hover{text-decoration:underline}
.yl-coming{left:calc(807 * var(--u))}
.yl-coming details{position:absolute;right:calc(17 * var(--u));bottom:0}
.yl-coming summary{cursor:pointer;list-style:none}
.yl-coming details[open]{background:#fbf7ed;padding:10px;z-index:3;box-shadow:0 2px 8px #21472c30;min-width:180px}
.yl-coming details p{white-space:nowrap}

.yl-footer{height:calc(165 * var(--u));position:relative;background:#1e4939;color:#fffdf0;padding:0}
.yl-footer-logo{position:absolute;left:calc(50 * var(--u));top:calc(26 * var(--u));width:calc(209 * var(--u))}
.yl-footer-logo img{display:block;width:100%;height:auto}
.yl-footer nav{position:absolute;left:calc(326 * var(--u));top:calc(40 * var(--u));display:flex;align-items:center;gap:calc(22 * var(--u));font-size:calc(10 * var(--u))}
.yl-footer-contact{position:absolute;left:calc(787 * var(--u));top:calc(42 * var(--u));font-size:calc(10 * var(--u))}
/* 「お問い合わせ」はナビの中に入れて、他の項目と同じ並び・間隔にする（離して置かない） */
.yl-footer nav .yl-footer-contact{position:static;left:auto;top:auto;margin:0}
.yl-footer-note{position:absolute;left:calc(878 * var(--u));top:calc(25 * var(--u));font:calc(17 * var(--u))/1.1 "Caveat",cursive!important;transform:rotate(-12deg)}
.yl-copyright{position:absolute;top:calc(125 * var(--u));width:100%;text-align:center;font-size:calc(10 * var(--u));letter-spacing:.02em}
.yl-top{position:absolute;right:calc(32 * var(--u));top:calc(58 * var(--u));display:grid;place-items:center;border-radius:50%;background:#fcf8ed;color:#316460!important;width:calc(35 * var(--u));height:calc(35 * var(--u));font-size:calc(25 * var(--u))}

@media(max-width:700px){
.yl-page,.yl-footer{--u:1px;font-size:14px;background-size:250px 30px}
.yl-upper{height:auto}
.yl-ornaments{display:none}
.yl-section{height:auto!important;padding:48px 24px;scroll-margin-top:70px}
.yl-heading,.yl-about .yl-heading,.yl-journey .yl-heading{position:static!important}
.yl-eyebrow{font-size:12px}
.yl-heading h2{font-size:27px}
.yl-sub{font-size:13px;line-height:1.7}
.yl-animal-script{display:none}
.yl-animals-grid,.yl-country-grid,.yl-journal-grid,.yl-theme-grid{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:30px}
.yl-animal{width:auto;height:auto;margin:0;transform:rotate(-2deg);padding:7px;font-size:14px}
.yl-animal img,.yl-animal-0 img{height:120px;aspect-ratio:1.1;object-fit:cover}
.yl-animal-0::before{display:block}
.yl-more,.yl-countries .yl-more,.yl-journal .yl-more{position:static;display:block;margin-top:25px;text-align:right;font-size:13px}
.yl-country{height:auto;padding:6px}
.yl-country img{height:94px}
.yl-country>span{font-size:13px}
.yl-country small{font-size:9px;padding-bottom:4px}
.yl-journal .yl-sub{position:static;width:auto;font-size:13px}
.yl-journal .yl-more{margin:14px 0}
.yl-journal-grid{grid-template-columns:1fr;margin-top:20px}
.yl-article{height:auto;padding:8px}
.yl-article img{height:auto;aspect-ratio:2.5}
.yl-article time{font-size:11px;margin-top:6px}
.yl-article h3{font-size:16px;margin-top:5px}
.yl-chips{margin-bottom:4px}
.yl-chips span{font-size:11px}
.yl-theme-grid{margin-top:48px;gap:50px 18px}
.yl-tag{height:195px}
.yl-tag .yl-theme-icon{width:60px;height:60px}
.yl-tag h3{font-size:17px}
.yl-tag p{font-size:11px}
.yl-string{left:calc(50% - 14px)}
.yl-tag-3 .yl-string{left:calc(50% - 28px)}
.yl-about-photo{position:relative;left:auto;top:auto;width:75%;height:auto;aspect-ratio:1.32;margin:28px auto}
.yl-about-copy{position:static;width:auto}
.yl-about-copy h3{font-size:28px}
.yl-about-copy p{font-size:13px;line-height:1.9;letter-spacing:0}
.yl-about-copy p br{display:none}
.yl-profile-link{font-size:14px;margin-top:20px;border-radius:8px}
.yl-about-gap{height:24px}
.yl-beach{height:60px;background-size:auto 100%;background-position:center}
.yl-journey{background:none;padding-top:20px;padding-bottom:50px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.yl-journey .yl-heading{grid-column:1/-1}
.yl-journey .yl-heading h2{font-size:23px}
.yl-journey .yl-sub{font-size:13px}
.yl-map{position:static;width:100%;height:auto;grid-column:1/-1;grid-row:2}
.yl-legend{position:static;font-size:11px;grid-column:1/-1;box-shadow:none;width:max-content}
.yl-country-list,.yl-coming{position:relative;top:auto;left:auto;width:auto}
.yl-country-list h3,.yl-country-list ul{font-size:13px}
.yl-coming details{right:0}
.yl-footer{height:auto;min-height:290px;padding:32px 24px 60px;text-align:center}
.yl-footer-logo{position:static;display:block;width:210px;margin:0 auto 24px}
.yl-footer nav{position:static;justify-content:center;flex-wrap:wrap;font-size:12px;gap:12px 20px}
.yl-footer-contact{position:static;display:block;margin-top:22px;font-size:12px}
.yl-footer-note{display:none}
.yl-copyright{position:static;font-size:10px;margin-top:24px!important}
.yl-top{right:18px;top:auto;bottom:18px}

}

@media(prefers-reduced-motion:reduce){.yl-tag:hover{transform:none}
}


.yl-map-pin{position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:#07594d;box-shadow:0 0 0 3px #f6f1e280;scale:.45}
.yl-map-pin:hover,.yl-map-pin:focus-visible{scale:1}
.yl-map-pin:focus-visible{outline-offset:3px}
.yl-map img{object-fit:contain}


@media(min-width:701px){.yl-tag-0 .yl-string{top:calc(-17 * var(--u));height:calc(30 * var(--u))}
.yl-tag-1 .yl-string{top:calc(-25 * var(--u));height:calc(37 * var(--u))}
.yl-animals{margin-bottom:20px}
}


@media(max-width:700px){.yl-map{position:relative;left:auto;top:auto}
.yl-map-pin{width:28px;height:28px;scale:.5}
}


/* Preserve the continuous shoreline instead of cutting the palms at the section edge. */
@media(min-width:701px){
 .yl-beach{position:relative;background:none}
 .yl-beach::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(136 * var(--u));background:url('../img/lower/coast-final.webp?v=6') center bottom/100% 100% no-repeat;pointer-events:none}
}