/* top担当：トップ＋新規固定ページ4本（beginner/staff/report/othertours）の専用CSS。
   新規ページは <article class="asa-pg asa-pg-{slug}"> で囲んで範囲を限定している（他ページの #staff #photo 等に効かないように） */

/* ---- トップ：ナイスミドル箱（モック asa-top-css。.asa-btn の枠線型の指定はモックでも共通CSSに上書きされていたので除外） ---- */
#page_top #asa-nicemiddle{padding:70px 0;background:#f4f7fb}
#page_top #asa-nicemiddle+#about-us{margin-top:0}
#page_top #asa-nicemiddle .inner_sec{width:1000px;max-width:92%;margin:0 auto;text-align:center}
#page_top #asa-nicemiddle .asa-lead{font-size:18px;line-height:2;color:#2b2b2b;margin:24px 0 36px}
#page_top .asa-figs{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-bottom:40px}
#page_top .asa-fig{min-width:180px}
#page_top .asa-fig strong{display:block;font-size:52px;line-height:1.1;color:#0a2463;font-weight:bold}
#page_top .asa-fig strong span{font-size:24px;margin-left:2px}
#page_top .asa-fig em{display:block;font-style:normal;font-size:15px;color:#555;margin-top:6px}
#page_top .asa-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
@media(max-width:768px){#page_top #asa-nicemiddle{padding:12vw 0}
#page_top .asa-fig strong{font-size:40px}}

/* ---- トップ：メインビジュアル（asa-mv） ---- */
#page_top .asa-mv{max-width:1000px;margin:0 auto 22px}
#page_top .asa-mv img{display:block;width:100%;height:auto;border-radius:6px}

/* ---- トップ：ボタン（共通 asa-btn の .asa-btn 分を、この箱の中だけ念のため再掲。共通CSSと同じ値） ---- */
#page_top #asa-nicemiddle .asa-btn{display:flex !important;align-items:center;justify-content:center;box-sizing:border-box;color:#fff !important;font-size:18px;font-weight:bold;line-height:1.4;height:55px;background:#0a2463 !important;border:none !important;border-radius:40px !important;box-shadow:0 0 5px rgba(0,0,0,.2);position:relative;text-decoration:none}
#page_top #asa-nicemiddle .asa-btn:hover{opacity:.8;color:#fff !important;background:#0a2463 !important}
#page_top #asa-nicemiddle .asa-btn.asa-cta{background:#e8710a !important}
#page_top #asa-nicemiddle .asa-btn.asa-cta:hover{background:#c95f06 !important;opacity:1}
#page_top #asa-nicemiddle .asa-btn::after{content:"";position:absolute;right:24px;top:50%;bottom:auto;margin:-3px 0 0;width:37px;height:7px;border:none !important;transform:none;background:url(../images/common/arrow_plan.png) no-repeat center/100%}
#page_top #asa-nicemiddle .asa-btn::before{display:none}
#page_top #asa-nicemiddle .asa-btns .asa-btn{width:auto;min-width:240px;margin:0;padding:0 78px 0 30px !important}
@media(max-width:768px){#page_top #asa-nicemiddle .asa-btn{max-width:100%;font-size:16px}#page_top #asa-nicemiddle .asa-btns .asa-btn{width:100%}}

/* ---- トップ：私たちがサポートします 2x2（asa-top-staff） ---- */
#page_top #staff .inner_sec .contents .inner_contents{display:flex;justify-content:space-between;flex-wrap:wrap}#page_top #staff .inner_sec .contents .inner_contents .box{width:480px;margin:0 0 40px}@media(max-width:750px){#page_top #staff .inner_sec .contents .inner_contents{display:block}#page_top #staff .inner_sec .contents .inner_contents .box{width:100%;margin:0 0 10vw}}

/* ---- トップ：下余白0で背景写真とフッターを繋げる（asa-top-pad） ---- */
#page_top{padding-bottom:0}

/* ---- トップ：02の数字の位置（モックは styles.css 1785行を left:520px→60px。styles.cssは触らずここで上書き） ---- */
@media (min-width:751px){#page_top #reason .inner_sec .contents .box.even .first .data .wrap .number{left:60px}}

/* ---- 初めての方へ（asa-beginner） ---- */
.asa-pg-beginner .bg-hero{max-width:1000px;margin:0 auto 34px}
.asa-pg-beginner .bg-hero img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:8px}
.asa-pg-beginner .bg-table{max-width:1000px;margin:0 auto}
.asa-pg-beginner .bg-head{display:grid;grid-template-columns:180px 150px 1fr 1fr;gap:0 24px;border-bottom:3px solid #0a2463;padding:0 0 10px}
.asa-pg-beginner .bg-head div{font-size:24px;font-weight:bold;color:#0a2463;padding:0 0 0 8px}
.asa-pg-beginner .bg-row{display:grid;grid-template-columns:180px 150px 1fr 1fr;gap:0 24px;align-items:center;padding:22px 0;border-bottom:1px solid #d7dce6}
.asa-pg-beginner .bg-pic{position:relative;width:180px}
.asa-pg-beginner .bg-pic img{width:180px;height:180px;object-fit:cover;border-radius:8px;display:block}
.asa-pg-beginner .bg-pic .bg-tag{position:absolute;top:8px;left:8px;font-size:12px;padding:5px 9px}
.asa-pg-beginner .bg-pic .bg-tag--new{left:auto;right:8px}
.asa-pg-beginner .bg-name{font-size:22px;font-weight:bold;color:#0a2463;line-height:1.4}
.asa-pg-beginner .bg-old,.asa-pg-beginner .bg-new{font-size:17px;line-height:1.8;color:#333;padding:0 8px}
.asa-pg-beginner .bg-old{color:#666}
.asa-pg-beginner .bg-new{font-weight:bold;color:#12213f}
.asa-pg-beginner .bg-old p,.asa-pg-beginner .bg-new p{margin:0;word-break:normal !important}
.asa-pg-beginner .bg-new p+p{margin-top:8px}
.asa-pg-beginner .bg-tag{display:inline-block;font-size:14px;font-weight:bold;line-height:1;padding:6px 12px;border-radius:3px;background:#eceff4;color:#555}
.asa-pg-beginner .bg-tag--new{background:#0a2463;color:#fff}
.asa-pg-beginner .bg-note{font-size:15px !important;color:#e8710a;font-weight:bold}
.asa-pg-beginner .bg-after{max-width:1000px;margin:18px auto 40px;font-size:17px;color:#333}
.asa-pg-beginner .bg-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto 40px}
.asa-pg-beginner .bg-box{border:1px solid #d7dce6;border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.asa-pg-beginner .bg-box img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.asa-pg-beginner .bg-box h3{font-size:22px;font-weight:bold;color:#0a2463;margin:18px 22px 6px}
.asa-pg-beginner .bg-box p{font-size:17px;line-height:1.8;color:#333;margin:6px 22px}
.asa-pg-beginner .bg-box .page_btn{margin:14px 22px 22px;max-width:none}
.asa-pg-beginner .bg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}
.asa-pg-beginner .bg-card{display:flex;flex-direction:column;border:1px solid #d7dce6;border-radius:8px;overflow:hidden;background:#fff;color:#12213f;text-decoration:none}
.asa-pg-beginner .bg-card:hover{border-color:#0a2463}
.asa-pg-beginner .bg-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}
.asa-pg-beginner .bg-card__b{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px;flex:1}
.asa-pg-beginner .bg-card__t{font-size:18px;font-weight:bold;color:#0a2463;line-height:1.5}
.asa-pg-beginner .bg-card__d{font-size:15px;line-height:1.7;color:#333;flex:1}
.asa-pg-beginner .bg-card__m{font-size:14px;font-weight:bold;color:#e8710a}
.asa-pg-beginner .bg-btn--main{margin:34px 0 0}
.asa-pg-beginner #page{padding-bottom:0}
.asa-pg-beginner .asa-reco{margin-top:30px}
@media(max-width:750px){.asa-pg-beginner .bg-hero img{aspect-ratio:16/9;border-radius:0}
.asa-pg-beginner .bg-hero{margin:0 -3vw 24px}
.asa-pg-beginner .bg-head{display:none}
.asa-pg-beginner .bg-row{grid-template-columns:120px 1fr;gap:10px 14px;padding:16px 0}
.asa-pg-beginner .bg-pic{width:120px}
.asa-pg-beginner .bg-pic img{width:120px;height:120px}
.asa-pg-beginner .bg-pic .bg-tag{top:5px;left:5px;font-size:11px;padding:4px 7px}
.asa-pg-beginner .bg-pic .bg-tag--new{left:auto;right:5px}
.asa-pg-beginner .bg-old,.asa-pg-beginner .bg-new{grid-column:1/3;font-size:16px;padding:0}
.asa-pg-beginner .bg-old::before{content:'昔';display:inline-block;font-size:13px;font-weight:bold;line-height:1;padding:5px 10px;border-radius:3px;background:#eceff4;color:#555;margin:0 0 6px}
.asa-pg-beginner .bg-new::before{content:'今';display:inline-block;font-size:13px;font-weight:bold;line-height:1;padding:5px 10px;border-radius:3px;background:#0a2463;color:#fff;margin:0 0 6px}
.asa-pg-beginner .bg-two{grid-template-columns:1fr;gap:16px}
.asa-pg-beginner .bg-cards{grid-template-columns:1fr;gap:14px}}

/* ---- 初めての方へ・添乗員紹介：下余白（asa-pad） ---- */
.asa-pg-beginner section#page,.asa-pg-staff section#page{padding-bottom:70px}

/* ---- 添乗員紹介：全員表示（asa-page-fix） ---- */
.asa-pg-staff #staff .txt-hide{display:block}.asa-pg-staff #staff button.more{display:none}.asa-pg-staff .staff__wrap{max-width:1000px;margin:0 auto}

/* ---- 添乗員紹介：ツアーの記録（asa-staff2-css） ---- */
.asa-pg-staff .sf-diary{max-width:1000px;margin:34px auto 0}
.asa-pg-staff .sf-diary__h{font-size:21px;color:#0a2463;margin:0 0 8px}
.asa-pg-staff .sf-diary__l{font-size:15px;line-height:1.9;color:#333;margin:0 0 16px}
.asa-pg-staff .sf-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.asa-pg-staff .sf-item{display:flex;flex-direction:column;border:1px solid #d7dce6;border-radius:8px;overflow:hidden;background:#fff;text-decoration:none}
.asa-pg-staff .sf-item:hover{border-color:#0a2463;box-shadow:0 4px 14px rgba(10,36,99,.12)}
.asa-pg-staff .sf-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.asa-pg-staff .sf-item span{display:block;padding:12px 14px;font-size:14px;line-height:1.6;color:#12213f;font-weight:bold}
.asa-pg-staff .sf-more{display:inline-block;margin-top:16px;padding:14px 28px;border:2px solid #0a2463;border-radius:6px;color:#0a2463;font-weight:bold;text-decoration:none}
.asa-pg-staff .sf-more:hover{background:#0a2463;color:#fff}
@media(max-width:900px){.asa-pg-staff .sf-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.asa-pg-staff .sf-list{grid-template-columns:1fr}}

/* ---- 添乗員紹介：写真を左カラム幅いっぱい（asa-staff-fit） ---- */
.asa-pg-staff .staff__header{display:flex;flex-direction:column}
.asa-pg-staff .staff__name{width:100%}
.asa-pg-staff .staff__img{position:static;width:100%;margin-top:auto;display:flex;justify-content:center;padding-top:12px}
.asa-pg-staff .staff__img img{position:static;width:min(340px,92%);height:auto;display:block}
@media(min-width:750px){.asa-pg-staff .staff__header{width:40%}
.asa-pg-staff .staff__img{justify-content:flex-end;padding-right:24px}}

/* ---- 添乗員紹介：おすすめの行を薄い紺の箱（asa-staff-reco） ---- */
.asa-pg-staff .staff__reco{display:block;margin-top:14px;padding:14px 18px;background:#eef2f8;border-radius:6px;font-size:16px !important;line-height:1.8 !important}

/* ---- お客様の声（asa-page-fix の #voice 部分） ---- */
.asa-pg-report .review__wrap{max-width:1000px;margin:0 auto}
.asa-pg-report #voice{width:100vw;margin-left:calc(50% - 50vw)}
.asa-pg-report #voice .ttl_special_sec{max-width:1000px;margin-left:auto;margin-right:auto}
@media(max-width:750px){.asa-pg-report #voice .review__cg{margin-left:3vw;margin-right:3vw}}

/* ---- お客様の声：ツアー報告カード（asa-rep-css） ---- */
.asa-pg-report .rp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto 30px}
.asa-pg-report .rp-card{display:flex;flex-direction:column;border:1px solid #d7dce6;border-radius:8px;overflow:hidden;background:#fff;text-decoration:none;transition:.2s}
.asa-pg-report .rp-card:hover{border-color:#0a2463;box-shadow:0 6px 18px rgba(10,36,99,.14);transform:translateY(-2px)}
.asa-pg-report .rp-card__img{display:block;aspect-ratio:4/3;overflow:hidden;background:#e8edf5}
.asa-pg-report .rp-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.asa-pg-report .rp-card__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.asa-pg-report .rp-card__d{font-size:13px;color:#e8710a;font-weight:bold}
.asa-pg-report .rp-card__t{font-size:15px;line-height:1.6;color:#12213f;font-weight:bold;flex:1}
.asa-pg-report .rp-note{max-width:1000px;margin:0 auto 22px;padding:16px 20px;background:#f4f7fb;border-radius:6px;font-size:15px;line-height:1.9;color:#333}
@media(max-width:900px){.asa-pg-report .rp-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.asa-pg-report .rp-cards{grid-template-columns:1fr}}

/* ---- その他のツアー（asa-other-css） ---- */
.asa-pg-othertours .ot-lead{max-width:1000px;margin:0 auto 30px;font-size:16px;line-height:1.9;color:#333}
.asa-pg-othertours .ot-h2{max-width:1000px;margin:34px auto 14px;font-size:21px;font-weight:bold;color:#0a2463}
.asa-pg-othertours .ot-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto}
.asa-pg-othertours .ot-list .ot-card{display:block;border:1px solid #d7dce6;border-radius:6px;background:#fff;color:#12213f;text-decoration:none;overflow:hidden}
.asa-pg-othertours .ot-list .ot-card img,.asa-pg-othertours .ot-list .ot-card .ot-ph{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.asa-pg-othertours .ot-list .ot-card .ot-ph{border-radius:0;border-width:0 0 1px 0}
.asa-pg-othertours .ot-list .ot-card .ot-t{display:block;padding:10px 12px;font-size:14px;line-height:1.5}
.asa-pg-othertours .ot-list .ot-card:hover{border-color:#0a2463}
.asa-pg-othertours .ot-note{max-width:1000px;margin:26px auto 0;padding:22px 24px 26px;text-align:center;background:#f4f7fb;border-radius:6px;font-size:15px;line-height:1.9;color:#333}
.asa-pg-othertours .ot-note a.page_btn{color:#fff}
.asa-pg-othertours .ot-note{margin-bottom:70px}
@media(max-width:900px){.asa-pg-othertours .ot-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.asa-pg-othertours .ot-list{grid-template-columns:repeat(2,1fr)}}