/*
Theme Name: Adventure Hostel う島や CMS
Theme URI: https://ushimaya.com/
Author: Adventure Hostel う島や
Description: 長期運用のための専用コンテンツ管理画面を備えた、Adventure Hostel う島やの公式WordPressテーマです。
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ushimaya-cms
*/

:root { --orange:#E85A1A; --green:#2DB87A; --blue:#29C4E8; --yellow:#FFD600; --navy:#1A1A2E; --cream:#FFF8E7; --ink:#20202d; --line:3px solid var(--navy); --shadow:4px 4px 0 var(--navy); --display:'Boogaloo','Noto Sans JP',sans-serif; --body:'Noto Sans JP','Nunito',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); line-height:1.75; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
.screen-reader-text { clip:rect(1px,1px,1px,1px); clip-path:inset(50%); position:absolute; white-space:nowrap; width:1px; height:1px; overflow:hidden; }
.site-width { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.section { padding:100px 0; position:relative; overflow:hidden; }
.section--cream { background:var(--cream); }.section--white { background:#fff; }.section--navy { background:var(--navy); color:white; }.section--orange { background:var(--orange); color:white; }
.site-header { position:fixed; z-index:100; inset:0 0 auto; height:82px; transition:.25s ease; color:#fff; }.site-header.is-scrolled { background:rgba(255,248,231,.97); box-shadow:0 1px 0 rgba(26,26,46,.16); color:var(--navy); backdrop-filter:blur(14px); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }.brand img { width:auto; height:50px; max-width:150px; object-fit:contain; }.brand-text { font-family:var(--display); font-size:26px; letter-spacing:.02em; }
.primary-nav ul,.footer-nav ul { list-style:none; padding:0; margin:0; display:flex; align-items:center; gap:22px; }.primary-nav a { font-family:var(--display); font-size:17px; letter-spacing:.04em; }.primary-nav a:hover { color:var(--orange); }.header-actions { display:flex; align-items:center; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border:var(--line); border-radius:999px; box-shadow:var(--shadow); font-weight:800; line-height:1.2; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; cursor:pointer; }.button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--navy); }.button--orange { background:var(--orange); color:white; }.button--white { background:white; color:var(--navy); }.button--navy { background:var(--navy); color:white; }.button--green { background:var(--green); color:white; }.button--sm { min-height:40px; padding:9px 17px; font-size:14px; }
.mobile-toggle { display:none; width:44px; height:44px; border:2px solid currentColor; background:transparent; color:inherit; border-radius:10px; font-size:23px; cursor:pointer; }.mobile-menu { display:none; }.mobile-menu ul { margin:0; padding:0; list-style:none; }
.hero { min-height:100svh; display:flex; align-items:flex-end; position:relative; color:white; background:#222; isolation:isolate; }.hero-bg,.hero-overlay { position:absolute; inset:0; }.hero-bg img { width:100%; height:100%; object-fit:cover; }.hero-overlay { background:linear-gradient(180deg,rgba(0,0,0,.28) 15%,rgba(0,0,0,.76) 100%); z-index:1; }.hero-content { position:relative; z-index:2; width:min(1380px,calc(100% - 40px)); margin:0 auto; padding:170px 0 118px; }.eyebrow { display:inline-flex; align-items:center; min-height:36px; padding:6px 16px; margin:0 0 18px; border:var(--line); border-radius:999px; box-shadow:var(--shadow); background:var(--yellow); color:var(--navy); font-weight:800; font-size:14px; }.hero-title { margin:0 0 12px; font-family:var(--display); font-size:clamp(76px,15vw,210px); line-height:.76; letter-spacing:-.025em; text-shadow:5px 5px 0 var(--navy); white-space:nowrap; }.hero-lead { margin:0 0 12px; font-size:clamp(26px,4vw,44px); font-weight:900; letter-spacing:.02em; text-shadow:2px 2px 0 var(--navy); }.hero-text { max-width:760px; margin:0 0 34px; font-size:clamp(16px,1.8vw,21px); font-weight:700; text-shadow:1px 1px 0 var(--navy); }.hero-actions { display:flex; flex-wrap:wrap; gap:18px; }.scroll-cue { position:absolute; z-index:2; bottom:24px; left:50%; width:22px; height:22px; border-right:3px solid white; border-bottom:3px solid white; transform:rotate(45deg) translateX(-50%); animation:floatDown 1.5s infinite; }
@keyframes floatDown { 50% { translate:0 8px; } }
.ticker { overflow:hidden; white-space:nowrap; border-block:var(--line); background:var(--orange); color:white; }.ticker--yellow { border-top:0; background:var(--yellow); color:var(--navy); }.ticker-track { display:flex; width:max-content; animation:marquee 35s linear infinite; }.ticker-track span { display:inline-flex; align-items:center; gap:16px; margin-right:44px; padding:10px 0; font-family:var(--display); font-size:22px; letter-spacing:.04em; }.ticker-track span::before { content:'★'; color:var(--yellow); }.ticker--yellow .ticker-track span::before { content:'◆'; color:var(--orange); }@keyframes marquee { to { transform:translateX(-50%); } }
.section-header { max-width:760px; margin:0 auto 52px; text-align:center; }.section-kicker { display:inline-block; margin:0 0 10px; padding:4px 14px; border:var(--line); border-radius:999px; box-shadow:var(--shadow); background:var(--orange); color:white; font-family:var(--display); font-size:16px; }.section-title { margin:0; color:var(--navy); font-family:var(--display); font-size:clamp(48px,7vw,74px); line-height:.95; letter-spacing:.01em; }.section--navy .section-title,.section--orange .section-title { color:white; }.section-intro { margin:10px auto 0; color:#555; max-width:620px; }.section--navy .section-intro { color:rgba(255,255,255,.74); }
.divider { height:12px; border-bottom:var(--line); background:linear-gradient(90deg,var(--orange) 0 20%,var(--yellow) 20% 40%,var(--green) 40% 60%,var(--blue) 60% 80%,var(--navy) 80%); }.divider--reverse { background:linear-gradient(90deg,var(--navy) 0 20%,var(--blue) 20% 40%,var(--green) 40% 60%,var(--yellow) 60% 80%,var(--orange) 80%); }
.about-grid,.dining-grid,.stars-grid,.access-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.about-copy h2,.dining-copy h2,.stars-copy h2 { margin:0 0 22px; color:var(--navy); font-family:var(--display); font-size:clamp(38px,5vw,62px); line-height:1.08; white-space:pre-line; }.stars-copy h2 { color:white; text-shadow:3px 3px 0 var(--orange); }.about-copy p,.dining-copy p,.stars-copy p { margin:0; color:#4c4c58; font-size:17px; }.stars-copy p { color:rgba(255,255,255,.88); }.facts,.dining-points { margin:26px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; }.facts li { padding:7px 13px; background:white; border:2px solid var(--navy); border-radius:999px; box-shadow:2px 2px 0 var(--navy); font-size:14px; font-weight:800; }.dining-points { display:grid; gap:9px; }.dining-points li { position:relative; padding-left:18px; }.dining-points li::before { content:''; position:absolute; top:.7em; left:0; width:8px; height:8px; border-radius:50%; background:var(--orange); }.collage { min-height:440px; position:relative; }.collage img { position:absolute; object-fit:cover; border:4px solid var(--navy); border-radius:24px; box-shadow:var(--shadow); }.collage img:first-child { width:74%; height:72%; inset:0 auto auto 0; transform:rotate(-2deg); }.collage img:last-child { width:66%; height:62%; right:0; bottom:0; transform:rotate(2deg); }.dining-image { position:relative; }.dining-image > img { width:100%; aspect-ratio:4/3; border:4px solid var(--navy); border-radius:24px; box-shadow:var(--shadow); object-fit:cover; }.food-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }.food-grid img { aspect-ratio:1/1; object-fit:cover; border:3px solid var(--navy); border-radius:16px; box-shadow:var(--shadow); }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:min(840px,100%); margin:0 auto 48px; }.price-card { padding:26px 18px; border:2px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.07); text-align:center; }.price-card.is-featured { background:var(--orange); border-color:var(--orange); box-shadow:0 8px 26px rgba(232,90,26,.35); }.price-card h3 { margin:0 0 7px; color:rgba(255,255,255,.8); font-size:14px; }.price-card strong { display:block; font-family:var(--display); font-size:48px; line-height:1; }.price-card small { color:rgba(255,255,255,.64); }.meal-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.meal-card { overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:22px; background:rgba(255,255,255,.07); }.meal-card__image { display:grid; grid-template-columns:1fr 1fr; height:190px; }.meal-card__image img { width:100%; height:100%; object-fit:cover; }.meal-card__body { padding:30px; }.meal-card h3 { margin:0 0 16px; font-family:var(--display); font-size:30px; }.meal-card ul { margin:0; padding:0; list-style:none; }.meal-card li { padding:10px 0 10px 18px; border-top:1px solid rgba(255,255,255,.12); position:relative; }.meal-card li:first-child { border-top:0; }.meal-card li::before { content:''; position:absolute; top:21px; left:0; width:7px; height:7px; border-radius:50%; background:var(--yellow); }.meal-card__note { margin-top:18px; padding:14px; border-radius:12px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); font-size:13px; }.section-action { margin-top:44px; text-align:center; }.section-note { margin:14px 0 0; text-align:center; color:rgba(255,255,255,.56); font-size:13px; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }.content-card { overflow:hidden; border:var(--line); border-radius:18px; box-shadow:var(--shadow); background:white; transition:transform .2s ease,box-shadow .2s ease; }.content-card:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--navy); }.content-card__image { height:232px; position:relative; overflow:hidden; background:#d6d6d6; }.content-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }.content-card:hover .content-card__image img { transform:scale(1.06); }.card-badge { position:absolute; left:14px; top:14px; padding:5px 10px; border:2px solid var(--navy); border-radius:999px; background:var(--orange); color:white; box-shadow:2px 2px 0 var(--navy); font-size:12px; font-weight:800; }.content-card__body { padding:24px; }.content-card__title { margin:0 0 5px; color:var(--navy); font-family:var(--display); font-size:28px; line-height:1.1; }.content-card__meta { min-height:28px; margin:0 0 17px; color:var(--orange); font-weight:900; }.content-card__body p { margin:0 0 22px; color:#565662; font-size:14px; }.content-card__body .button { width:100%; }
.rental-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.rental-card { overflow:hidden; border:1px solid #e8e8e8; border-radius:22px; background:#fff; box-shadow:0 8px 28px rgba(16,25,40,.08); }.rental-card__image { height:250px; position:relative; }.rental-card__image img { height:100%; width:100%; object-fit:cover; }.rental-card__badge { position:absolute; left:18px; bottom:18px; padding:6px 12px; border-radius:999px; background:var(--green); color:white; font-size:13px; font-weight:800; }.rental-card__body { padding:30px; }.rental-card h3 { margin:0 0 10px; font-family:var(--display); font-size:32px; line-height:1.1; color:var(--navy); }.rental-card p { margin:0 0 24px; color:#5d5d68; font-size:15px; }.guest-discount { margin-top:36px; padding:22px 28px; border-left:5px solid var(--green); border-radius:0 14px 14px 0; background:rgba(45,184,122,.08); }.guest-discount strong { display:block; margin-bottom:4px; color:var(--navy); font-family:var(--display); font-size:24px; }.guest-discount p { margin:0; color:#555; }
.stars-images { position:relative; }.stars-images img { width:100%; aspect-ratio:16/10; object-fit:cover; border:4px solid var(--yellow); border-radius:22px; box-shadow:var(--shadow); }.stars-images img+img { margin-top:20px; border-color:var(--orange); transform:rotate(1deg); }.stars-highlight { margin-top:26px; padding:20px; border:3px solid var(--yellow); border-radius:18px; background:var(--orange); box-shadow:var(--shadow); }.stars-highlight strong { display:block; font-family:var(--display); font-size:25px; }.stars-highlight p { margin:3px 0 0; color:rgba(255,255,255,.88); font-size:14px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.gallery-card { position:relative; overflow:hidden; border:3px solid var(--navy); border-radius:16px; box-shadow:var(--shadow); background:var(--navy); aspect-ratio:1/1; }.gallery-card img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }.gallery-card:hover img { transform:scale(1.08); }.gallery-card span { position:absolute; inset:auto 0 0; padding:28px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:white; font-size:13px; font-weight:700; }
.map-frame { overflow:hidden; min-height:380px; border:4px solid var(--navy); border-radius:22px; box-shadow:var(--shadow); }.map-frame iframe { display:block; width:100%; height:100%; min-height:380px; border:0; }.access-info { display:grid; gap:18px; }.info-card { padding:28px; border:var(--line); border-radius:18px; box-shadow:var(--shadow); }.info-card--cream { background:var(--cream); }.info-card--yellow { background:var(--yellow); }.info-card--orange { background:var(--orange); color:white; }.info-card h3 { margin:0 0 14px; font-family:var(--display); font-size:28px; line-height:1; }.info-card p { margin:0; }.access-steps { margin:0; padding:0; list-style:none; display:grid; gap:14px; }.access-steps li { display:grid; grid-template-columns:26px 1fr; align-items:center; gap:12px; font-size:15px; }.access-steps b { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:white; font-size:12px; line-height:1; }.access-steps li:last-child b { background:var(--orange); }.contact-list { display:grid; gap:8px; margin-bottom:18px!important; }.contact-list span { display:inline-block; min-width:48px; font-size:12px; font-weight:900; letter-spacing:.04em; }
.faq-list { width:min(820px,100%); margin:0 auto; display:grid; gap:14px; }.faq-item { overflow:hidden; border:var(--line); border-radius:16px; background:white; box-shadow:var(--shadow); }.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 22px; color:var(--navy); font-family:var(--display); font-size:22px; line-height:1.25; }.faq-item summary::-webkit-details-marker { display:none; }.faq-item summary::after { content:'+'; flex:0 0 auto; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:white; font-family:var(--body); font-size:20px; line-height:1; }.faq-item[open] summary::after { content:'−'; }.faq-item__answer { padding:0 22px 20px; border-top:1px solid #e6e6e6; color:#595966; }.faq-item__answer p { margin:16px 0 0; }
.updates-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.updates-list { padding:26px; border:var(--line); border-radius:18px; background:white; box-shadow:var(--shadow); }.updates-list h3 { margin:0 0 12px; font-family:var(--display); font-size:32px; color:var(--navy); }.updates-list ul { margin:0; padding:0; list-style:none; }.updates-list li { border-top:1px solid #ddd; }.updates-list li a { display:block; padding:12px 0; font-weight:700; }.updates-list time { display:block; color:#777; font-size:12px; }.archive-page { padding:150px 0 90px; }.archive-page h1 { margin:0 0 30px; font-family:var(--display); font-size:58px; color:var(--navy); }.post-list { display:grid; gap:16px; }.post-list article { padding:24px; border:var(--line); border-radius:16px; background:white; box-shadow:var(--shadow); }.post-list h2 { margin:0 0 5px; font-family:var(--display); font-size:29px; }.post-list p { margin:0; color:#5b5b66; }.site-footer { padding:58px 0 80px; background:var(--navy); color:white; }.footer-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; }.footer-brand img { height:72px; width:auto; max-width:220px; object-fit:contain; }.footer-brand p { color:rgba(255,255,255,.72); }.footer-nav ul { flex-wrap:wrap; gap:12px 18px; }.footer-nav a { font-family:var(--display); font-size:18px; }.footer-meta { margin-top:28px; color:rgba(255,255,255,.55); font-size:13px; }
@media (max-width: 900px) { .primary-nav { display:none; }.mobile-toggle { display:grid; place-items:center; }.mobile-menu { display:none; position:absolute; top:82px; left:0; right:0; padding:16px 20px 22px; background:var(--cream); color:var(--navy); border-top:3px solid var(--navy); border-bottom:3px solid var(--navy); }.mobile-menu.is-open { display:block; }.mobile-menu a { display:block; padding:12px 0; border-bottom:1px solid rgba(26,26,46,.12); font-family:var(--display); font-size:22px; }.mobile-menu .button { margin-top:16px; width:100%; }.about-grid,.dining-grid,.stars-grid,.access-grid { grid-template-columns:1fr; gap:42px; }.dining-grid .dining-image { order:-1; }.card-grid { grid-template-columns:repeat(2,1fr); }.collage { min-height:360px; }.section { padding:80px 0; }.footer-inner { grid-template-columns:1fr; }.updates-grid { grid-template-columns:1fr; } }
@media (max-width: 600px) { .site-width { width:min(100% - 32px,1180px); }.site-header { height:70px; }.brand img { height:42px; max-width:110px; }.header-actions .button { display:none; }.mobile-menu { top:70px; }.hero-content { padding:130px 0 96px; }.hero-title { font-size:clamp(58px,17vw,84px); }.hero-lead { font-size:24px; white-space:normal; }.hero-actions { gap:12px; }.hero-actions .button { padding:12px 17px; }.section { padding:66px 0; }.section-header { margin-bottom:36px; }.section-title { font-size:52px; }.price-grid,.meal-grid,.rental-grid,.card-grid,.gallery-grid { grid-template-columns:1fr; }.price-grid { gap:10px; }.price-card { padding:18px; }.price-card strong { font-size:39px; }.meal-card__body,.rental-card__body { padding:24px; }.food-grid { gap:9px; }.gallery-grid { gap:14px; }.gallery-card { aspect-ratio:4/3; }.map-frame,.map-frame iframe { min-height:300px; }.info-card { padding:23px; }.faq-item summary { padding:17px; font-size:20px; }.footer-nav ul { display:grid; grid-template-columns:repeat(2,1fr); }.collage { min-height:310px; } }