@charset "UTF-8";
/* ==========================================================================
   トップページ: メインビジュアルの直下から「お知らせ」の直前まで（2026年10月 確定デザイン）
   テンプレートは content-top.php。トップページでだけ読み込む（functions.php）。
   見出し・ボタン・文字・コンテンツ幅はサイト共通のルール（css/style.css）に合わせ、
   ボタンは共通の .c-button.c-button--orange をそのまま使う。
   ブレイクポイントはサイト共通の 768px（スマホ/PC）と 960px（3列→1列）。
   ========================================================================== */

/* ---------- 共通 ---------- */
.p-top-container,
.p-top-intro__inner{width:calc(100% - 48px);max-width:1248px;margin-right:auto;margin-left:auto}
.p-top-intro figure,
.p-top-story figure{margin:0}
.p-top-center{text-align:center}

/* 見出し: 下層ページの見出しと同じ、文字＋緑のグラデーションの下線（幅は文字に合わせる） */
.p-top-title{display:inline-block;margin:0 0 32px;font-size:1.5rem;font-weight:400;line-height:1.5;color:#212529;-webkit-font-feature-settings:'palt';font-feature-settings:'palt';word-break:keep-all;overflow-wrap:anywhere}
.p-top-title::after{display:block;width:100%;height:8px;margin-top:16px;content:'';border-bottom:8px solid;border-image:linear-gradient(to right,#00773c 0,#26a54d 100%);border-image-slice:1}

/* 本文: 下層ページの本文と同じ文字サイズ・行間・字間 */
.p-top-text p{margin:1em 0 0;letter-spacing:.05em}
.p-top-text .p-top-title+p{margin-top:0}

/* ボタンの並び（ボタン自体はサイト共通の .c-button--orange） */
.p-top-buttons{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.p-top-buttons .c-button{margin-top:0}

/* 矢印付きの文字リンク */
.p-top-link{display:inline-flex;align-items:center;padding:8px 0;font-weight:700;line-height:1.4;color:#00773c;border-bottom:1px solid #00773c}
.p-top-link::after{width:16px;height:16px;margin-left:8px;content:'';background:url(../images/parts/arrow_small_orange_left.svg) center center no-repeat;background-size:contain;flex-shrink:0}
.p-top-link:hover{color:#00773c;opacity:.7}

/* ---------- 医学生・研修医・若手医師の皆さんへ ---------- */
.p-top-intro{padding:56px 0}
.p-top-intro__image img{display:block;width:100%;height:auto;aspect-ratio:1464/932;object-fit:cover}
.p-top-intro__content{margin-top:32px}

/* ---------- 3つの特色 ---------- */
.p-top-features{padding:64px 0;background:#f7f7f7}
.p-top-features__list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:720px;margin:16px auto 0}
.p-top-feature{display:flex;flex-direction:column;min-width:0;padding:24px 24px 32px;background:#fff;border:1px solid #e7e7e7}
.p-top-feature__head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.p-top-feature__num{font-size:3.25rem;font-weight:700;line-height:1;letter-spacing:.08em;padding-left:.08em;color:#00773c}
.p-top-feature__icon{width:96px;height:96px;object-fit:contain}
.p-top-feature__title{margin:0 0 16px;font-size:1.125rem;font-weight:700;line-height:1.6;text-align:center;-webkit-font-feature-settings:'palt';font-feature-settings:'palt'}
.p-top-feature__text{font-size:.9375rem;line-height:1.9}
.p-top-feature__text p{margin:0 0 .75em;letter-spacing:.05em}
.p-top-feature__text p:last-child{margin-bottom:0}

/* ---------- 写真と文章の左右交互（キャリア・教授・専門研修） ---------- */
.p-top-story{padding:64px 0}
.p-top-story--pale{background:#f8fbf9}
.p-top-story__grid{display:flex;flex-direction:column;gap:32px;margin-right:auto;margin-left:auto}
.p-top-story__content{min-width:0}
.p-top-story__image{width:100%}
.p-top-story__image img{display:block;width:100%;height:auto;aspect-ratio:2048/1365;object-fit:cover}

/* 教授からのメッセージ（スマホは 本文 → 写真 → ボタン の順。ボタンは縦並び） */
.p-top-professor .p-top-story__content{order:1}
.p-top-professor .p-top-story__image{order:2}
.p-top-professor__buttons{order:3;margin-top:0;flex-direction:column}
.p-top-professor__lead{margin:0 0 16px!important;font-size:1.375rem;font-weight:700;line-height:1.55;color:#00773c;word-break:keep-all;overflow-wrap:anywhere}
.p-top-professor__quote{margin:0 0 24px;padding:0;font-size:1rem;font-weight:700;line-height:1.9;color:#00773c;word-break:keep-all;overflow-wrap:anywhere}
.p-top-professor__name{margin:0 0 24px!important;font-size:.75rem;line-height:1.75;color:#595959}
.p-top-professor__name strong{font-size:.9375rem;color:#212529}

/* 専門研修と、日々の取り組みを知る */
.p-top-training-new__subtitle{margin:0 0 16px;font-size:1.0625rem;font-weight:700;line-height:1.6}

/* 診療・教育・研究の3つの案内 */
.p-top-disciplines{display:grid;grid-template-columns:minmax(0,1fr);max-width:720px;margin:48px auto 0;border-top:1px solid #e3e7e4}
.p-top-discipline{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:32px 0;border-bottom:1px solid #e8e8e8}
.p-top-discipline:last-child{padding-bottom:0;border-bottom:0}
.p-top-discipline__icon{width:76px;height:76px;margin:0 auto 16px;object-fit:contain}
.p-top-discipline__title{align-self:stretch;margin:0 0 16px;font-size:1.1875rem;font-weight:700;line-height:1.6;text-align:center}
.p-top-discipline__title::after{display:block;width:48px;height:3px;margin:12px auto 0;content:'';background:#00773c}
.p-top-discipline__text{flex:1;margin:0 0 16px;font-size:.9375rem;line-height:1.9;letter-spacing:.05em}

/* ---------- まずは、一度見に来てください。 ---------- */
.p-top-contact{padding:64px 0;background:#f8fbf9;border-top:1px solid #e8efe9}
.p-top-contact__inner{max-width:800px;text-align:center}
.p-top-contact__inner p{margin:0 0 1em;line-height:2;letter-spacing:.05em;text-align:left}
.p-top-contact .p-top-buttons{justify-content:center}

/* ---------- スマホ ---------- */
@media (max-width:767.98px){
/* 最初の写真は画面幅いっぱい、文章は左右に余白 */
.p-top-intro__inner{width:100%}
.p-top-intro__content{padding:0 24px}
/* ボタンは横幅いっぱい。長い文言（見学・専門研修について問い合わせる）が1行に収まるよう、文字と矢印の間を詰める */
.p-top-buttons{flex-direction:column}
.p-top-buttons .c-button{width:100%;font-size:.9375rem}
.p-top-buttons .c-button--orange::after{margin-left:16px}
/* キャリアの見出しを2行に収めるため、少し小さくする */
.p-top-title--career{font-size:1.4rem}
}

/* ---------- 768px 以上（タブレット）: 縦積みのまま、幅を 720px までにして中央に置く ---------- */
@media (min-width:768px){
.p-top-container{width:calc(100% - 80px)}
.p-top-intro__inner,
.p-top-story__grid{max-width:720px}
.p-top-title{font-size:1.75rem}
.p-top-professor__buttons{flex-direction:row}
.p-top-professor__lead{font-size:1.5rem}
.p-top-professor__quote{font-size:1.125rem}

.p-top-intro{padding:88px 0}
.p-top-story{padding:88px 0}
.p-top-features{padding:96px 0 104px}
.p-top-contact{padding:88px 0 96px}
.p-top-contact__inner p{text-align:center;word-break:keep-all;overflow-wrap:anywhere}
}

/* ---------- 960px 以上（PC）: 写真と文章を左右に並べ、特色カードと3つの案内を3列にする ---------- */
@media (min-width:960px){
.p-top-intro__inner{width:calc(100% - 80px)}
.p-top-intro__inner,
.p-top-story__grid{max-width:1248px}
.p-top-intro__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.p-top-intro__content{margin-top:0}
.p-top-intro__content p{max-width:500px}

.p-top-story{padding:104px 0}
.p-top-story__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}

/* 教授: 写真は左、本文とボタン（横並び）は右。右側のまとまりを写真に対して上下中央に置く */
.p-top-professor .p-top-story__grid{grid-template-rows:1fr auto auto 1fr;grid-template-areas:"image ." "image content" "image buttons" "image .";row-gap:0}
.p-top-professor .p-top-story__image{grid-area:image}
.p-top-professor .p-top-story__content{grid-area:content}
.p-top-professor__buttons{grid-area:buttons;margin-top:24px;flex-wrap:nowrap}
/* 2つのボタンは常に横並び。右カラムが狭い幅（960〜1199px）では、ボタンの中の文言を折り返して収める */
.p-top-professor__buttons .c-button{flex:0 1 auto;min-width:0}

.p-top-features__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:none;margin-top:24px}
.p-top-feature{padding:28px 28px 36px}
.p-top-feature__num{font-size:4rem}
.p-top-feature__icon{width:112px;height:112px}
.p-top-feature__title{min-height:3.2em;font-size:1.1875rem}

.p-top-disciplines{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:88px;padding-top:56px}
.p-top-discipline{padding:0 32px;border-bottom:0;border-left:1px solid #e5e8e6}
.p-top-discipline:first-child{padding-left:0;border-left:0}
.p-top-discipline:last-child{padding-right:0}
.p-top-discipline__icon{width:84px;height:84px}
}
@media (min-width:960px) and (max-width:1199.98px){
.p-top-professor__buttons .c-button--orange::after{margin-left:16px}
}