/* ==================================================================================================== */
/* 汎用 */
/* ==================================================================================================== */

/* トップボタン */
div.top-fixed-button { display:block; position:fixed; right:0; top:202px; z-index:40; }
div.top-fixed-button a { aspect-ratio:122/123; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url('../img/fixed/top-button.png'); display:inline-block; height:123px; width:122px; }
div.top-fixed-button a:hover { background-image:url('../img/fixed/top-button-ov.png'); opacity:1; }

@media(min-width:960px) {

/* ベース */
main { position:relative; z-index:1; }
main div.main-deco { background-color:var(--bl); border-radius:50% 50% 0 0; display:block; position:absolute; bottom:0; height:300px; width:100%; z-index:0; }

/* トップボタン */
div.top-fixed-button { display:block; position:fixed; right:41px; top:80px; z-index:200; }
div.top-fixed-button a { aspect-ratio:283/286; height:286px; width:283px; }

}

/* ==================================================================================================== */
/* スライダー */
/* ==================================================================================================== */

/* ベース */
div.top-slide ul.splide__list { background-color:var(--wh); }
div.top-slide ul.splide__list li { aspect-ratio:390/284; background-size:cover; background-position:center; background-repeat:no-repeat; height:auto; width:100%; }

/* スライド画像設定 */
div.top-slide ul.splide__list li:nth-child(1) { background-image:url(../img/top/slider/slide01-sp.jpg); }
div.top-slide ul.splide__list li:nth-child(2) { background-image:url(../img/top/slider/slide02-sp.jpg); }
div.top-slide ul.splide__list li:nth-child(3) { background-image:url(../img/top/slider/slide03-sp.jpg); }
div.top-slide ul.splide__list li:nth-child(4) { background-image:url(../img/top/slider/slide04-sp.jpg); }

/* ページネーション */
ul.splide__pagination.splide__pagination--ltr { background-color:var(--wh); gap:8px; margin:0 20px; }
ul.splide__pagination.splide__pagination--ltr li button { aspect-ratio:1/1; background-color:#d9d9d9; border-radius:50%; height:8px; width:8px; }
ul.splide__pagination.splide__pagination--ltr li button.is-active { background-color:#81c2e0; }

@container(min-width:960px) {

/* ベース */
div.top-slide ul.splide__list li { aspect-ratio:1440/831; }

/* スライド画像設定 */
div.top-slide ul.splide__list li:nth-child(1) { background-image:url(../img/top/slider/slide01-pc.jpg); }
div.top-slide ul.splide__list li:nth-child(2) { background-image:url(../img/top/slider/slide02-pc.jpg); }
div.top-slide ul.splide__list li:nth-child(3) { background-image:url(../img/top/slider/slide03-pc.jpg); }
div.top-slide ul.splide__list li:nth-child(4) { background-image:url(../img/top/slider/slide04-pc.jpg); }

/* ページネーション */
ul.splide__pagination.splide__pagination--ltr { margin:0 100px; }

}

/* ==================================================================================================== */
/* 事業所紹介 */
/* ==================================================================================================== */

/* ベース */
ul.syoukai-area { align-items:center; background-color:var(--ye-02); flex-wrap:wrap; justify-content:space-between; border-radius:20px; padding:24px 8px; }
ul.syoukai-area li { aspect-ratio:2/3; width:50%; }
ul.syoukai-area li a { background-position:center; background-size:contain; background-repeat:no-repeat; display:block; height:100%; width:100%; }
ul.syoukai-area li:nth-child(1) { order:1; }
ul.syoukai-area li:nth-child(1) a { background-image:url('../img/top/syokai/syokai-1.png'); }
ul.syoukai-area li:nth-child(1) a:active, ul.syoukai-area li:nth-child(1) a:hover { background-image:url('../img/top/syokai/syokai-1ov.png'); } 
ul.syoukai-area li:nth-child(2) { order:2; }
ul.syoukai-area li:nth-child(2) a { background-image:url('../img/top/syokai/syokai-2.png'); } 
ul.syoukai-area li:nth-child(2) a:active, ul.syoukai-area li:nth-child(2) a:hover { background-image:url('../img/top/syokai/syokai-2ov.png'); } 
ul.syoukai-area li:nth-child(3) { order:4; }
ul.syoukai-area li:nth-child(3) a { background-image:url('../img/top/syokai/syokai-3.png'); }
ul.syoukai-area li:nth-child(3) a:active, ul.syoukai-area li:nth-child(3) a:hover { background-image:url('../img/top/syokai/syokai-3ov.png'); } 
ul.syoukai-area li:nth-child(4) { order:3; }
ul.syoukai-area li:nth-child(4) a { background-image:url('../img/top/syokai/syokai-4.png'); }
ul.syoukai-area li:nth-child(4) a:active, ul.syoukai-area li:nth-child(4) a:hover { background-image:url('../img/top/syokai/syokai-4ov.png'); } 
ul.syoukai-area li:nth-child(5) { order:5; }
ul.syoukai-area li:nth-child(5) a { background-image:url('../img/top/syokai/syokai-5.png'); }
ul.syoukai-area li:nth-child(5) a:active, ul.syoukai-area li:nth-child(5) a:hover { background-image:url('../img/top/syokai/syokai-5ov.png'); } 
ul.syoukai-area li:nth-child(6) { order:6; }
ul.syoukai-area li:nth-child(6) a { background-image:url('../img/top/syokai/syokai-6.png'); } 
ul.syoukai-area li:nth-child(6) a:active, ul.syoukai-area li:nth-child(6) a:hover { background-image:url('../img/top/syokai/syokai-6ov.png'); } 

@container(min-width:960px) {

/* ベース */
ul.syoukai-area { gap:24px; padding:40px 66px 60px 66px; margin:auto; max-width:1000px; width:100%; }
ul.syoukai-area li { width:calc( 33.33333% - 48px ); }
ul.syoukai-area li:nth-child(3) { order:3; }
ul.syoukai-area li:nth-child(4) { order:4; }

}

/* ==================================================================================================== */
/* お知らせ */
/* ==================================================================================================== */

/* タブリスト */
ul.tab-list { justify-content:space-around; gap:5px; margin-bottom:24px; }
ul.tab-list li { align-items:center; border-radius:10px; background-color:var(--wh); border:1px solid var(--ye); box-sizing:border-box; cursor:pointer; color:var(--ye); font-size:14px; font-weight:800; flex:1; justify-content:center; text-align:center; line-height:100%; letter-spacing:-2px; padding:4px 10px; }
ul.tab-list li.active { background-color:var(--ye); color:var(--wh); }

/* コンテンツ表示制御 */
.news-content { display:none; }
.news-content.active { display:block; }

/* 新着リスト */
section.content-block div.news-content.active { width:100%; }
ul.news-list { flex-direction:column; gap:16px; width:100%; }
ul.news-list li { width:100%; }
ul.news-list li div.news-txt p { font-size:16px; font-weight:400; line-height:200%; letter-spacing:-0.8px; }
ul.news-list li a { align-items:center; border-radius:10px; border:1px solid var(--bk); box-sizing:border-box; gap:10px; justify-content:flex-start; padding:16px; max-width:100%; width:100%; }

/* お知らせサムネイル */
div.news-ph { aspect-ratio:1/1; overflow:hidden; height:90px; width:90px; }
div.news-ph img { object-fit:cover; object-position:center; height:90px; width:90px; }

/* お知らせテキスト */
div.news-txt div.flex { align-items:center; justify-content:space-between; width:100%; }
ul.news-list time { font-size:12px; font-weight:400; line-height:160%; }
ul.news-list div.news-txt { max-width:calc( 100% - 100px ); width:100%; }
ul.news-list div.news-txt p.category { align-items:center; background-color:var(--gren); color:var(--wh); border-radius:40px; font-size:12px; font-weight:400; display:flex; justify-content:center; line-height:160%; padding:4px 10px; }
p.title-text { display:-webkit-box; text-overflow: ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

/* もっと見るボタン */
p.oshirase-link a { aspect-ratio:108/48; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url('../img/top/oshirase-link.png'); display:inline-block; margin-top:40px; margin-right:0; height:48px; width:108px; }
p.oshirase-link a:active, p.oshirase-link a:hover { background-image:url('../img/top/oshirase-link-ov.png'); }

@container(max-width:370px) {

/* お知らせテキスト */
ul.news-list div.news-txt p.category { font-size:8px; }

}

@container(min-width:960px) {

/* タブリスト */
ul.tab-list { gap:24px; margin:auto; margin-bottom:40px; max-width:800px; width:100%; }
ul.tab-list li { font-size:20px; line-height:160%; letter-spacing:0; padding:5px 10px; }

/* 新着リスト */
ul.news-list { align-items:stretch; flex-direction:row; gap:24px; width:100%; }
ul.news-list li { box-sizing:border-box; flex:1 1 calc( 25% - 24px ); max-width:calc( 25% - 24px ); }
ul.news-list li a { flex-direction:column; height:100%; width:100%; }

/* お知らせサムネイル */
div.news-ph { aspect-ratio:3/2; height:auto; width:100%; }
div.news-ph img { height:100%; width:100%; }

/* お知らせテキスト */
ul.news-list div.news-txt { max-width:100%; width:100%; }

}

/* ==================================================================================================== */
/* ご寄付のお願い */
/* ==================================================================================================== */

/* 見出し */
div.contact-box h3 { font-size:18px; font-weight:800; line-height:30px; margin-bottom:8px; }
h2.law { align-items:center; background-color:var(--wh); color:var(--bl-02); font-size:16px; font-weight:800; gap:8px; justify-content:center; text-align:center; line-height:160%; position:relative; margin:auto; margin-bottom:16px; z-index:1; }
h2.law span { padding:0 8px; white-space:nowrap; }
h2.law::before, h2.law::after { border-top:2px solid var(--bl-02); content:''; flex-grow:1; margin:0 8px; }
h2.law::before { right:50%; left:0; }
h2.law::after { right:0; left:50%; }

/* テキスト */
section.donation-block p.read { font-size:16px; font-weight:800; line-height:200%; letter-spacing:-0.64px; }
section.donation-block p.read.last-row { margin-bottom:24px; }

/* お問い合わせフォーム */
div.contact-box { align-items:center; border-radius:40px; border:4px solid var(--ye); box-sizing:border-box; flex-direction:column; gap:24px; justify-content:center; padding:24px; margin:0 auto 56px auto;  }
div.title-link-item img { margin:auto; max-width:250px; width:100%; }
p.tel-nmb { align-items:center; font-size:28px; font-weight:800; display:flex; justify-content:center; }
p.tel-nmb::before { aspect-ratio:1/1; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url(../img/top/donation/tel-icon.svg); content:''; display:inline-block; vertical-align:middle; height:32px; width:32px; }
p.law-txt { font-size:16px; font-weight:800; line-height:200%; margin:auto; }

/* 罫線 */
div.contact-box hr { border:none; border-bottom:4px solid var(--ye); width:100%; }

@container(min-width:960px) {

/* 見出し */
h2.law { font-size:20px; max-width:700px; width:100%; }
h2.law br { display:none; }

/* テキスト */
section.donation-block p.read { font-size:18px; line-height:32px; }

/* お問い合わせフォーム */
div.contact-box { align-items:center; flex-direction:row; justify-content:center; padding:40px; gap:40px; min-height:250px; height:250px; max-width:870px; width:100%; }
div.title-link-item, div.tel-item { align-items:center; flex:1; flex-direction:column; display:flex; justify-content:center; }
p.law-txt { font-size:18px; line-height:32px; }

/* 罫線 */
div.contact-box hr { background-color:var(--ye); border-bottom:none; display:block; width:4px; height:100%;; }

}

/* ==================================================================================================== */
/* SNS */
/* ==================================================================================================== */

/* 汎用 */
div.item-x, div.item-inst { background-size:contain; background-position:center; background-repeat:no-repeat; }
section.sns-block div.flex { flex-direction:column; }

/* x */
div.item-x { aspect-ratio:1000/1162; background-image:url(../img/top/sns/bg-x.png); position:relative; height:auto; width:100%; z-index:1; }

/* インスタ */
div.item-inst { aspect-ratio:997/837; background-image:url(../img/top/sns/bg-inst.png); position:relative; height:auto; width:100%; z-index:1; }

/* タイムライン調整 */
div.item-x div.timeline { aspect-ratio:1000/1162; background-color:var(--wh); border-radius:10px; overflow:scroll; position:absolute; top:35%; left:40%; transform:translate(-40%,0); height:auto; width:50%; }
div.item-inst div.timeline { aspect-ratio:997/837; background-color:var(--wh); border-radius:10px; overflow:scroll; position:absolute; top:30%; left:35%; transform:translate(-35%,0); height:auto; width:50%; }
div.item-x div.timeline iframe { max-height:100% !important; max-width:100% !important; min-width:auto !important;}
div.item-inst div.timeline iframe { max-height:100% !important; max-width:100% !important; min-width:auto !important; }
div.item-x div.timeline img, div.item-inst div.timeline img { aspect-ratio:1000/1162; height:auto; max-width:100%; width:100%; }
div.item-inst div.timeline img { aspect-ratio:997/837; }

@container(min-width:960px) {

/* 汎用 */
section.sns-block div.flex { flex-direction:row; margin:auto; max-width:1000px; width:100%; }
div.item-x, div.item-inst { width:50%; }

/* タイムライン調整 */
div.item-inst div.timeline { top:35%; }

.fade-up-section {
  opacity: 0;               /* 初期は非表示 */
  transform: translateY(50px); /* 下から50pxスタート */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up-section.active {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}

}

/* ==================================================================================================== */
/* 連携医療機関 */
/* ==================================================================================================== */

/* リスト */
ul.cooperation-list { align-items:center; flex-direction:column; gap:24px; justify-content:center; }
ul.cooperation-list li img { height:auto; max-width:200px; width:auto; }

@container(min-width:960px) {

/* リスト */
ul.cooperation-list { flex-direction:row; margin:auto; margin-bottom:500px; max-width:1000px; width:100%; }
ul.cooperation-list li { width:33.33333%; }
ul.cooperation-list li img { object-fit:cover; height:100%; max-width:100%; width:100%; }

}

/* ==================================================================================================== */
/* フッター */
/* ==================================================================================================== */

/* トップフッターは別処理 */
footer { position:relative; z-index:1; }
footer::before, footer::after { display:none; }

/* トップフッター処理 */
footer h2 { position:relative; z-index:1; }
footer h2::after { aspect-ratio:1000/1204;; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url(../img/footer/footer-illust.png); content:''; display:inline-block; position:absolute; top:-100px; right:10px; height:auto; width:100px; z-index:1; }

/* マップ */
div.map-container, div.map-container iframe { aspect-ratio:390/192; height:auto; width:100%; }
div.map-container { overflow:hidden; position:relative; margin-bottom:38px; max-width:100%; z-index:1; }
div.map-container::before { background-color:var(--bl); content:''; clip-path:ellipse(49% 50% at 50% 50%); display:inline-block; position:absolute; bottom:-120px; right:-100px; height:212px; width:269px; }

@media(min-width:960px) {

/* ベース */
footer { padding:0 100px 70px 100px; }
footer div.footer-flex { align-items:flex-end; flex-direction:row; flex-wrap:nowrap; max-width:100%; width:100%; }

/* トップフッター処理 */
footer h2::after { top:-250px; right:50%; transform:translateX(50%); width:180px; }

/* マップ */
div.map-container { aspect-ratio:857/440; border-radius:20px; overflow:hidden; margin-bottom:0; }
div.map-container iframe { aspect-ratio:auto; height:100%; width:100%; }

/* アクセス */
div.top-access { box-sizing:border-box; width:65%; }
div.map-container::before { display:none; }

/* 住所とか */
div.item-content { box-sizing:border-box; width:35%; }
div.footer-item div.footer-content { flex-direction:column; gap:16px; }

/* コピーライト */
p.copy { text-align:left; margin-top:0; }

}

/* ==================================================================================================== */
/* 下部動くところ */
/* ==================================================================================================== */

/* ベース */
div.scroll-item { overflow-x:hidden; margin-top:40px; height:auto; max-width:100%; }
div.scroll-item div.comment img, div.scroll-item div.character img { height:auto; max-width:100%; width:100%; }
div.scroll-item div.comment { text-align:center; width:100%; }
div.scroll-item div.comment img { transform:translateY(25px); margin:auto; max-width:50%; }

@media(min-width:960px) {

/* ベース */
div.scroll-item { position:relative; margin-top:0; overflow:visible; margin:auto; height:250px; max-width:1500px; width:100%; z-index:50; }

  div.scroll-item div.character,
  div.scroll-item div.comment {
    opacity: 0;
    transform: translateY(-50px);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    overflow:visible;
    position:relative;
    z-index:51;
  }

/* character は少し早めに出す */
div.scroll-item.active div.character { opacity:1; transform:translateY(-600px); }

/* comment は遅延させて最後に出す */
div.scroll-item.active div.comment { opacity:1; transform:translateY(-500px); transition-delay:0.3s; margin:auto; text-align:center; max-width:500px; width:500px; }

}