/* site.css — humanbus.com / humantravel.jp 共通CSS 土台: ../design.css(Codexデザイン案01) 補正: DESIGN.md(humanbus.com側=共通部品の正 / humantravel.jp側=travel差分)の数値 - @import 削除(フォントは各ページ の で読む) - 本文16px・最小文字13px(brand.md「Web本文は16px未満禁止」) - dialog関連CSSは削除(トップの「入力画面を見る」は /contact/ へのリンクに変更) - 下層ページ部品(page-head / breadcrumb / prose / spec-table / faq-list / news-list / note-old / card-grid / embed-* / btn-tel / btn-line / news-latest / page-404)を追加 */ :root{ --red:#b52f43;--red-dark:#97263a;--gold:#a88c48;--ink:#262a2b;--muted:#666963; --line:#deded7;--paper:#fff;--tint:#f5f5f0; --body:'Noto Sans JP','Yu Gothic',sans-serif;--serif:'Noto Serif JP','Yu Mincho',serif; --radius:0; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:25px} body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit} button,a{-webkit-tap-highlight-color:transparent} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1e697a;outline-offset:5px} img{max-width:100%;display:block} h1,h2,h3,p,figure{margin:0} h1,h2,h3{font-weight:600} h2{font-size:36px;line-height:1.65;letter-spacing:.04em} h3{font-size:21px;line-height:1.7} .wrap{width:min(1160px,calc(100% - 112px));margin-inline:auto} .eyebrow{font-family:Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.17em;line-height:1.5;color:var(--red);margin-bottom:22px} .topline{display:flex;justify-content:space-between;padding:8px 4.4%;border-top:3px solid var(--red);background:var(--tint);font-size:13px;letter-spacing:.1em;line-height:1.5} .topline span:first-child{font-family:Arial,sans-serif;letter-spacing:.17em} .header{display:flex;align-items:center;justify-content:space-between;padding:23px 4.4%;gap:25px} .brand{display:flex;gap:11px;align-items:center;flex-shrink:0} /* ロゴ画像(human-heart.png=mark / hb-en.png・ht-en.png=wordmark) */ .brand img.mark{height:40px;width:auto;object-fit:contain} .brand img.wordmark{height:22px;width:auto;object-fit:contain;display:block} /* Codex案の文字組みロゴ(.brand b/small)。ロゴ画像に置き換わったため通常は使わないが、互換のため残す */ .brand .mark{height:40px;width:auto;object-fit:contain} .brand b{font-family:Arial,sans-serif;font-size:23px;line-height:1.2;letter-spacing:.02em;display:block;font-weight:700} .brand small{display:block;font-size:13px;letter-spacing:.13em;margin-top:3px;line-height:1.5} .header nav{display:flex;gap:25px;align-items:center;font-size:14px;font-weight:500} .header nav>a:not(.button){position:relative} .header nav>a:not(.button):hover{color:var(--red)} .button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 25px;min-height:56px;font-size:15px;font-weight:600;background:var(--red);color:white;line-height:1.5;transition:background .18s,transform .18s} .button:hover{background:var(--red-dark);transform:translateY(-2px)} .button span{font-size:18px;font-weight:400} .header .button{min-height:44px;padding:11px 18px;font-size:14px} .button.light{background:white;color:var(--red)} .button.light:hover{background:#fff5ee} /* 副CTA(電話・LINE) */ .btn-tel,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 18px;min-height:44px;font-size:14px;font-weight:600;border:1px solid var(--line);background:white;color:var(--ink);transition:background .18s,transform .18s} .btn-tel:hover,.btn-line:hover{background:var(--tint)} .btn-line{color:var(--red);border-color:var(--red)} .text-link{display:block;width:fit-content;margin-top:20px;font-size:13px;border-bottom:1px solid var(--line);padding:0 0 7px} .text-link span{margin-left:38px;color:var(--red)} .lead{font-size:16px;line-height:2;color:var(--muted);margin-bottom:27px} .menu-button{display:none} .mobile-menu[hidden]{display:none} .mobile-menu{display:flex;flex-direction:column;padding:16px 6%;background:var(--tint);gap:15px;font-size:14px} .skip{position:absolute;left:0;top:-100px;padding:15px;background:white;z-index:100} .skip:focus{top:0} .mobile-only{display:none} /* ===== bus トップ(Codex案そのまま・数値だけ補正) ===== */ .bus-hero{display:grid;grid-template-columns:43% 57%;position:relative;padding-left:4.4%;padding-right:2.7%;min-height:555px;margin-top:8px;align-items:center} .hero-copy{padding:45px 15px 48px 0;position:relative;z-index:1} .hero-copy h1{font-size:clamp(38px,4.2vw,61px);font-weight:700;line-height:1.45;letter-spacing:.005em;margin-bottom:25px} .hero-copy h1 em{font-style:normal;color:var(--red)} .bus-hero-photo{align-self:stretch;position:relative;overflow:hidden;min-height:555px;border-bottom:5px solid var(--gold)} .bus-hero-photo>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:88% center} .bus-hero-photo figcaption{position:absolute;bottom:0;background:linear-gradient(transparent,rgba(18,24,26,.75));padding:55px 28px 23px;display:flex;justify-content:space-between;align-items:center;color:white;width:100%;gap:20px;font-size:13px;letter-spacing:.1em} .bus-hero-photo figcaption span:first-child{font:700 13px Arial;letter-spacing:.18em} .hero-side{writing-mode:vertical-rl;font:13px Arial;letter-spacing:.18em;position:absolute;right:9px;bottom:0;transform:rotate(90deg);transform-origin:right bottom;display:none} .purpose{padding-top:83px;padding-bottom:85px;display:grid;grid-template-columns:30% 1fr;gap:30px;align-items:start} .section-intro h2{font-size:26px;margin-bottom:10px} .section-intro>p:last-child{font-size:13px;color:var(--muted)} .purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .purpose-grid>a{border-right:1px solid var(--line);padding:24px 18px 0;position:relative} .purpose-grid>a:first-child{padding-left:0} .purpose-grid>a:last-child{border:0;padding-right:0} .num{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.08em;color:var(--red)} .purpose-grid h3{font-size:18px;margin:12px 0 8px} .purpose-grid p{font-size:15px;color:var(--muted);min-height:44px} .circle-arrow{border:1px solid var(--line);width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:19px;line-height:1;margin-top:20px;color:var(--red);transition:background .2s} .purpose-grid>a:hover .circle-arrow,.journal-story:hover .circle-arrow{background:var(--red);border-color:var(--red);color:white} .section-tint{background:var(--tint);padding:82px 0} .section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px} .section-heading>p{font-size:14px;line-height:2;color:var(--muted);padding-bottom:6px} .fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px} .fleet-grid article{background:white} .fleet-grid img{width:100%;height:210px;object-fit:contain;background:white} .fleet-grid article>div{padding:24px} .fleet-grid small{font:13px Arial;letter-spacing:.14em;color:var(--red)} .fleet-grid h3{margin-top:5px} .fleet-grid p{font-size:14px;color:var(--muted);margin:10px 0 22px} .fleet-grid a{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;font-size:13px} .fleet-grid a span{color:var(--red)} .safety{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-top:100px;padding-bottom:100px} .safety>div>p:last-child{margin-top:27px;color:var(--muted);font-size:14px;line-height:2.2} .safety-list>div{position:relative;padding:25px 0 26px 48px;border-top:1px solid var(--line)} .safety-list>div:last-child{border-bottom:1px solid var(--line)} .safety-list span{position:absolute;left:0;top:31px;color:var(--gold);font:13px Arial} .safety-list p{font-size:14px;color:var(--muted);margin-top:10px} .cross-brand{padding:40px 0 45px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:65px} .cross-brand .eyebrow{margin-bottom:13px} .cross-brand h2{font-size:25px} .cross-brand p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:15px} .cross-brand>a{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--tint);padding:40px;row-gap:12px} .cross-brand>a>span:first-child{font:13px Arial;letter-spacing:.13em;color:var(--red)} .cross-brand strong{font-size:21px;font-weight:500;grid-column:1} .cross-brand .circle-arrow{grid-column:2;grid-row:1/3;margin:0;border-color:var(--red)} .cross-brand>a:hover{background:#eee9e2} .contact{background:var(--red);color:white;padding:70px 0 76px} .contact .eyebrow{color:#f6d5b2} .contact h2{font-size:40px} .contact p:not(.eyebrow){font-size:14px;margin-top:20px;color:#ffe9ed} .contact-actions{display:flex;gap:45px;margin-top:35px;align-items:center;flex-wrap:wrap} .phone small{display:block;font-size:13px} .phone strong{font:27px Arial;letter-spacing:.03em} .phone strong a{color:inherit} /* お知らせ最新3件(トップ用) */ .news-latest{padding-top:80px;padding-bottom:85px} .news-latest .section-heading{margin-bottom:24px} .footer-main{display:flex;justify-content:space-between;gap:30px;padding:45px 4.4%;flex-wrap:wrap} .footer-links{display:flex;gap:28px;font-size:13px;align-items:center;flex-wrap:wrap} .footer-bottom{padding:16px 4.4%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font:13px var(--body);color:var(--muted);letter-spacing:.03em} .mobile-cta{display:none} /* ===== travel トークン上書き(body.travel) ===== */ body.travel{--paper:#faf8f1;--tint:#f0eee4;--red:#9d3446;--red-dark:#822439;--ink:#34372f;--muted:#676a5e;--line:#dcded0;--radius:2px} body.travel h1,body.travel h2,body.travel h3{font-family:var(--serif)} body.travel .header{background:var(--paper)} body.travel .button{border-radius:var(--radius)} body.travel .btn-tel,body.travel .btn-line{border-radius:var(--radius)} .travel-hero{display:grid;grid-template-columns:47% 53%;align-items:center;padding:35px 0 40px} .travel-hero h1{font-size:clamp(40px,4.15vw,60px);line-height:1.65;letter-spacing:.015em;font-weight:500;margin-bottom:24px} .travel-hero h1 em{font-style:normal;color:var(--red)} .travel-hero .lead{font-size:16px;line-height:2} .hero-footnote{font-size:13px;color:var(--muted);margin-top:15px} .travel-hero-copy{padding:25px 25px 25px 0} .travel-hero-photo{position:relative;padding:0 0 0 30px} .travel-hero-photo>img{width:100%;height:545px;object-fit:cover;object-position:50% 54%;border-radius:180px 180px 2px 2px} .travel-hero-photo figcaption{display:flex;justify-content:space-between;gap:15px;padding-top:17px;font-size:13px;color:var(--muted)} .travel-hero-photo figcaption span:first-child{font-family:var(--serif);font-size:15px;color:var(--ink);flex-shrink:0} .photo-index{position:absolute;left:0;bottom:83px;font:13px/1.5 Arial;letter-spacing:.13em;background:var(--paper);padding:17px 14px 17px 0} .photo-index span{font:30px var(--serif);display:block;color:var(--red)} .travel-intro{padding:55px 0 80px;text-align:center} .travel-intro>p{font-family:var(--serif);font-size:22px;line-height:2;letter-spacing:.07em} .decorative-rule{display:block;width:1px;height:40px;background:var(--gold);margin:28px auto 22px} .travel-intro .eyebrow{font-size:13px} .travel-services{padding-bottom:90px} .travel-service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .travel-service-grid>a{padding:30px 30px 35px;border-right:1px solid var(--line)} .travel-service-grid>a:first-child{padding-left:0} .travel-service-grid>a:last-child{border:0} .travel-service-grid h3{font-size:27px;margin:17px 0} .travel-service-grid p{font-size:14px;color:var(--muted);line-height:2} .travel-service-grid .line-arrow{display:block;width:fit-content;font-size:13px;margin-top:28px;border-bottom:1px solid var(--red);padding-bottom:6px;color:var(--red)} .travel-service-grid>a:hover h3{color:var(--red)} .process-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding:0;margin:48px 0 0} .process-grid li>span{display:block;font:40px var(--serif);color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:23px} .process-grid h3{font-size:21px} .process-grid p{font-size:14px;line-height:2.2;color:var(--muted);margin-top:14px} .journal{display:grid;grid-template-columns:42% 1fr;gap:80px;align-items:center;padding-top:95px;padding-bottom:95px} .journal-photo>img{width:100%;height:350px;object-fit:cover;object-position:center 76%} .journal>div>p:not(.eyebrow){margin-top:24px;font-size:14px;line-height:2.2;color:var(--muted)} .journal-story{display:block;margin-top:27px;border-top:1px solid var(--line);padding-top:24px;position:relative;padding-right:60px} .journal-story>span:first-child{font-size:13px;color:var(--red)} .journal-story h3{font-size:19px;margin-top:8px} .journal-story .circle-arrow{position:absolute;right:0;top:28px;margin:0} body.travel .contact{background:#eae8db;color:var(--ink)} body.travel .contact .eyebrow{color:var(--red)} body.travel .contact p:not(.eyebrow){color:var(--muted)} body.travel .contact .light{background:var(--red);color:white} body.travel .contact .light:hover{background:var(--red-dark)} /* ===== 下層ページ部品(DESIGN.md「下層ページ部品」・両サイト共通) ===== */ .page-head{padding:56px 0 32px;border-bottom:1px solid var(--line)} .page-head .eyebrow{font-size:13px} .page-head h1{font-size:34px;font-weight:700;line-height:1.5;margin-bottom:14px} .page-head .lead{margin-bottom:0} .breadcrumb{padding:16px 0 0;font-size:13px;color:var(--muted)} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .breadcrumb li{display:flex;align-items:center;gap:6px} .breadcrumb li+li::before{content:"›";color:var(--line)} .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--red)} .breadcrumb li[aria-current="page"]{color:var(--ink)} .prose{max-width:760px} .prose p{font-size:16px;line-height:2;margin:0 0 1.4em} .prose h2{font-size:26px;line-height:1.6;margin:2.2em 0 .8em;border-top:0} .prose h3{font-size:20px;margin:1.8em 0 .7em} .prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.4em;font-size:16px;line-height:2} .prose img{width:100%;margin:1.6em 0} .prose a{color:var(--red);text-decoration:underline} .spec-table{width:100%;border-collapse:collapse} .spec-table th{text-align:left;background:var(--tint);width:30%;padding:14px 16px 15px;font-weight:500;font-size:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .spec-table td{padding:14px 16px;font-size:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .faq-list{border-top:1px solid var(--line)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{font-size:18px;font-weight:500;padding:20px 40px 20px 0;position:relative;cursor:pointer;list-style:none} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{content:"+";position:absolute;right:0;top:18px;font-size:22px;color:var(--red)} .faq-list details[open] summary::after{content:"−"} .faq-list .faq-answer{padding:0 0 22px;font-size:16px;line-height:2;color:var(--muted)} .news-list{border-top:1px solid var(--line)} .news-list a{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)} .news-list time{font:13px Arial;color:var(--muted);flex-shrink:0} .news-list .cat{font-size:13px;color:var(--red);flex-shrink:0} .news-list .ttl{font-size:17px;flex:1 1 auto} .news-list a:hover .ttl{color:var(--red)} .note-old{background:var(--tint);color:var(--muted);padding:12px 16px 14px;font-size:14px;margin:0 0 24px} .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px} .card-grid article{background:white;border:1px solid var(--line)} .card-grid img{width:100%;aspect-ratio:16/9;object-fit:cover} .card-grid article>div{padding:20px} .card-grid h3{font-size:18px;margin-bottom:8px} .card-grid p{font-size:14px;color:var(--muted)} .embed-map,.embed-form{width:100%;border:0;display:block} .embed-map{height:380px} .embed-form{height:1000px} .embed-video{position:relative;width:100%;aspect-ratio:16/9} .embed-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .page-404{padding:100px 0;text-align:center} .page-404 .actions{display:flex;gap:20px;justify-content:center;margin-top:35px;flex-wrap:wrap} /* ===== Layout / 1500px以上 ===== */ @media(min-width:1500px){ .header,.topline,.footer-main,.footer-bottom{padding-left:calc((100% - 1320px)/2);padding-right:calc((100% - 1320px)/2)} .bus-hero{max-width:1400px;margin-inline:auto;padding-left:40px;padding-right:40px} } @media(max-width:1050px){ .header nav{gap:16px} .header nav>a:not(.button){font-size:13px} .brand b{font-size:20px} .wrap{width:calc(100% - 64px)} .hero-copy h1{font-size:40px} .bus-hero{grid-template-columns:44% 56%;min-height:520px} .bus-hero-photo{min-height:520px} .hero-copy .lead{font-size:14px} .hero-copy .button{font-size:13px;padding:16px} .purpose{grid-template-columns:1fr;gap:30px} .purpose-grid p{min-height:0} .purpose-grid>a{padding-bottom:10px} .travel-hero h1{font-size:40px} .travel-hero-photo>img{height:500px} .travel-hero .button{font-size:13px;padding:16px} .safety{gap:55px} .journal{gap:40px} .travel-service-grid h3{font-size:23px} .footer-links{gap:18px} } @media(max-width:760px){ .wrap{width:calc(100% - 40px)} .topline{padding:7px 20px;font-size:13px} .header{padding:17px 20px} .brand b{font-size:20px} .brand small{font-size:13px} .brand .mark,.brand img.mark{height:32px} .brand img.wordmark{height:18px} .header nav{display:none} .menu-button{display:flex;align-items:center;gap:12px;padding:9px 0 9px 10px;border:0;background:none;font-size:13px;cursor:pointer} .menu-button span{font-size:21px} h2{font-size:29px} .eyebrow{font-size:13px;margin-bottom:18px} .bus-hero{display:flex;flex-direction:column;padding:0 0 0;margin-top:0;min-height:0;align-items:stretch} .hero-copy{padding:28px 24px 32px} .hero-copy h1{font-size:clamp(29px,9.6vw,38px);line-height:1.48;margin-bottom:19px} .hero-copy .lead{font-size:16px;margin-bottom:21px;line-height:2} .hero-copy .button{padding:16px 22px;font-size:13px;min-height:54px;gap:20px} .text-link{margin-top:16px;font-size:13px} .bus-hero-photo{min-height:300px;height:300px;margin-left:24px;border-bottom-width:4px} .bus-hero-photo>img{object-position:64% center} .bus-hero-photo figcaption{font-size:13px;padding:45px 16px 17px;gap:10px} .bus-hero-photo figcaption span:first-child{font-size:13px} .purpose{padding:50px 0;gap:23px} .section-intro h2{font-size:25px} .purpose-grid{grid-template-columns:1fr} .purpose-grid>a,.purpose-grid>a:first-child,.purpose-grid>a:last-child{border-right:0;border-bottom:1px solid var(--line);padding:18px 54px 18px 28px;position:relative} .purpose-grid .num{position:absolute;top:25px;left:0;font-size:13px} .purpose-grid h3{margin:0 0 4px;font-size:17px} .purpose-grid p{font-size:13px} .purpose-grid .circle-arrow{position:absolute;right:0;top:21px;width:32px;height:32px;margin:0;font-size:16px} .section-heading{display:block;margin-bottom:26px} .section-heading>p{margin-top:20px;font-size:13px} .section-tint{padding:50px 0} .fleet-grid{grid-template-columns:1fr;gap:20px} .fleet-grid article{display:grid;grid-template-columns:42% 58%;align-items:center} .fleet-grid img{height:160px} .fleet-grid article>div{padding:20px 16px} .fleet-grid p{font-size:13px;margin:7px 0 15px} .fleet-grid h3{font-size:20px} .fleet-grid a{font-size:13px} .safety{grid-template-columns:1fr;gap:35px;padding:55px 0} .safety-list>div{padding:20px 0 20px 35px} .safety-list span{top:26px} .safety-list h3{font-size:18px} .cross-brand{grid-template-columns:1fr;gap:25px;margin-bottom:45px;padding:32px 0 0} .cross-brand h2{font-size:24px} .cross-brand>a{padding:27px 22px} .cross-brand strong{font-size:19px} .contact{padding:48px 0} .contact h2{font-size:30px} .contact-actions{flex-direction:column;align-items:stretch;gap:24px;margin-top:25px} .contact .button{font-size:13px} .phone strong{font-size:27px} .news-latest{padding:50px 0} .footer-main{display:block;padding:35px 20px} .footer-links{margin-top:26px;flex-wrap:wrap;gap:15px;font-size:13px} .footer-bottom{padding:18px 20px calc(90px + env(safe-area-inset-bottom));display:block;font-size:13px} .footer-bottom span{display:block;margin-top:7px} .mobile-cta{display:grid;grid-template-columns:1fr 1.25fr;position:fixed;z-index:30;left:0;right:0;bottom:0;min-height:60px;padding-bottom:env(safe-area-inset-bottom);background:var(--red);box-shadow:0 -2px 8px #0000000d} .mobile-cta a{display:flex;align-items:center;justify-content:center;font-size:14px;padding:18px 8px;color:white;gap:12px} .mobile-cta a:first-child{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)} .travel-hero{display:flex;flex-direction:column;padding:22px 0 0;align-items:stretch} .travel-hero-copy{padding:0 4px 32px} .travel-hero h1{font-size:clamp(28px,9.2vw,37px);line-height:1.7;letter-spacing:.01em;margin-bottom:20px} .travel-hero .lead{font-size:16px;margin-bottom:21px} .travel-hero .button{font-size:13px;padding:16px 20px} .travel-hero-photo{padding-left:20px} .travel-hero-photo>img{height:360px;border-radius:130px 130px 2px 2px} .travel-hero-photo figcaption{font-size:13px;flex-direction:column;gap:5px;padding-top:13px;padding-left:10px} .photo-index{bottom:87px;font-size:13px;padding-right:8px} .photo-index span{font-size:26px} .travel-intro{padding:48px 0 45px} .travel-intro>p{font-size:17px;line-height:2.05;letter-spacing:.025em} .mobile-only{display:block} .travel-services{padding-bottom:45px} .travel-service-grid{grid-template-columns:1fr} .travel-service-grid>a,.travel-service-grid>a:first-child,.travel-service-grid>a:last-child{border-right:0;border-bottom:1px solid var(--line);padding:25px 0} .travel-service-grid>a:last-child{border-bottom:0} .travel-service-grid h3{font-size:26px;margin:10px 0} .travel-service-grid p{font-size:13px} .travel-service-grid .line-arrow{margin-top:18px} .process-grid{grid-template-columns:1fr;gap:28px;margin-top:28px} .process-grid li{padding-left:55px;position:relative} .process-grid li>span{font-size:26px;border:0;position:absolute;left:0;top:0;padding:0} .process-grid h3{font-size:20px} .process-grid p{margin-top:10px;font-size:13px} .journal{grid-template-columns:1fr;gap:30px;padding:50px 0} .journal-photo>img{height:260px} .journal-story h3{font-size:17px} .journal-story{padding-right:45px} .journal-story>span:first-child{font-size:13px} body.travel .contact h2{font-size:34px} /* 下層ページ部品(SP) */ .page-head{padding:36px 0 24px} .page-head h1{font-size:27px} .spec-table th,.spec-table td{display:block;width:100%} .spec-table th{padding-top:14px} .spec-table td{padding-top:6px} .card-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} } @media(max-width:360px){ .header{gap:8px} .header .brand b{font-size:16px} .header .brand{gap:8px} .menu-button{gap:6px;white-space:nowrap} /* 【提案】DESIGN.mdは「360px以下はロゴ縮小」とのみ指定・具体値未定義のため最小限で縮小 */ .brand img.mark{height:28px} .brand img.wordmark{height:16px} }