@charset "UTF-8";

/* =========================================================
   サン美まるごとアートフェス2026  CSS
   ========================================================= */

:root{
  --c-base:#ffffff;   /* ベースカラー   */
  --c-main:#0062B1;   /* メインカラー   */
  --c-text:#221815;   /* テキストカラー */
  --c-accent:#fff462; /* アクセントカラー */
  --c-sub2:#F4AEB5;   /* サブカラー2 */
  --c-sub3:#EE87B4;   /* サブカラー3 */
  --c-sub4:#BFE5F1;   /* サブカラー4 */
  --c-btn-shadow:#d96a98; /* ボタン影（サブ3を濃く） */
  --c-ended:#DEDEDE;  /* 終了時ボタン背景 */
  --c-ended-txt:#E10045; /* 終了バナー文字 */
 }

 /* ---- 既存のCSSを上書き ---- */

 #suntory_contents .breadcrumbs {
    margin-bottom: 22px;
}

#suntory_contents #sma_footer .btn_page_top {
    display: none !important;
}

/* ---- 全体のベース（.af 配下のみ適用） ---- */

.af{
  box-sizing:border-box;
  color:var(--c-text);
  background:var(--c-base);
  line-height:1.7;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

.af *,
.af *::before,
.af *::after{ box-sizing:border-box; }

.af img{ max-width:100%; height:auto; vertical-align:bottom; display:block; }

.af-inner{
  max-width:1164px;
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   ● 共通の丸ドット付き見出し（CSSの::beforeで生成）
   ========================================================= */
.af-dot-ttl{ position:relative; padding-left:1em; }
.af-dot-ttl::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:.4em; height:.4em;
  border-radius:50%;
  background:var(--c-main);
}
.af-dot-ttl.af-dot-ttl--white::before{ background:var(--c-base)}
.af-dot-ttl.af-dot-ttl--pink::before{ background:var(--c-sub3) }

/* =========================================================
   テキストリンク（▶ を ::before で生成）＋ドット下線
   ========================================================= */
.af-textlink{
  color:var(--c-text);
  text-decoration:underline;
  position:relative;
  padding-left:1em;
}

.af-textlink:hover{text-decoration: none;}

.af-textlink::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  border-style:solid;
  border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent var(--c-main);
}
/* 文中の下線のみリンク（三角なし） */
.af-textlink--plain{
  padding-left:0;
  color: var(--c-main);
}
.af-textlink--plain::before{ display:none; }
.af-textlink--white{ color:var(--c-base); background-image:radial-gradient(var(--c-base) 1px,transparent 1.4px); }

/* =========================================================
   リンクボタン（ピンクのパラレログラム＋影）
   掲載期間終了時は .is-ended を付けるだけで
   背景が #DEDEDE になり、矢印が消え「終了しました」に変化
   ========================================================= */
.af-btn-wrap{ margin-top:22px; }
.af-exhibit .af-btn-wrap{margin-top:0;}
.af-btn-wrap--right{ text-align:right; }

.af-btn{
  position:relative;
  display:inline-block;
  min-width:260px;
  padding:17px 56px 17px 32px;
  background:var(--c-sub3);
  color:var(--c-text);
  font-weight:bold;
  font-size:16px;
  text-align:center;
  text-decoration:none;

  clip-path:polygon(0 6%, 100% 0, 94% 100%, 5% 100%);
  filter:drop-shadow(5px 6px 0 var(--c-btn-shadow));
  transition:opacity .2s;
}
.af-btn:hover{   background:var(--c-sub2);}
.af-btn__label{ display:inline-block; }
/* ▶ 矢印（::after で生成） */
.af-btn::after{
  content:"";
  position:absolute;
  right:28px; top:50%;
  transform:translateY(-50%);
  border-style:solid;
  border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent var(--c-ended-txt);
}

/* ▼ 終了状態 ▼ */
.af-btn.is-ended{
  background:var(--c-ended);
  filter:none;
  color:var(--c-text);
  pointer-events:none;
  cursor:default;
}
.af-btn.is-ended::after{ display:none; }          /* 矢印を消す */
.af-btn.is-ended .af-btn__label{ display:none; }   /* 元のラベルを隠す */
.af-btn.is-ended::before{                           /* 「終了しました」を表示 */
  content:"終了しました";
  display:inline-block;
  font-weight:bold;
}

/* =========================================================
   メインビジュアル
   ========================================================= */
.af-mv{ margin:0; }
.af-mv img{ width:100%; }

/* =========================================================
   掲載終了バナー（メインビジュアル直下・通常は非表示／コメントアウト）
   ========================================================= */
.af-ended-banner{
  background:var(--c-sub2);
  color:var(--c-ended-txt);
  text-align:center;
  font-weight:bold;
  font-size:20px;
  padding:5px 16px;
  margin:0;
  letter-spacing: 0.5em;
}

/* =========================================================
   イントロ
   ========================================================= */
.af-intro{ padding:56px 0 64px; }
.af-intro__grid{ display:flex; gap:56px; align-items:flex-start; }
.af-intro__left{ flex:1 1 50%; }
.af-intro__right{ flex:1 1 50%; }

/* イントロ見出し（左側に4つのドット飾り＝ico_circle.svg） */
.af-intro__ttl{
  color:var(--c-main);
  font-size:30px;
  font-weight:bold;
  line-height:1.95;
  margin-bottom:34px;
  padding-left:52px;
  background:url("../img/ico_circle.svg") left top no-repeat;
  background-size:contain;
}

.af-intro__ttl span.font-b{
    font-size:42px;
    line-height:1;
}

.af-intro__lead{ font-size:18px; margin-bottom:34px; line-height: 2; }

/* 開催日時ボックス */
.af-datebox{
  background:var(--c-accent);
  border-radius:0 100px  100px 0;
  padding:24px 36px 32px;
  max-width:540px;
}
.af-datebox__label{ color:var(--c-main); font-weight:bold; font-size:16px; }
.af-datebox__date{
  color:var(--c-main);
  font-weight:bold;
  font-size:40px;
  line-height:1.2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.af-datebox__date .af-num{ font-size:52px; }
.af-sun{
    position: relative;
  display:inline-flex; align-items:center; justify-content:center;
    margin-left:10px;
}

.af-sun span{
    position: relative;
    z-index: 1;
    top:2px;
    color:var(--c-accent); font-size:24px;
}

.af-sun::after{
    content:'';
    position: absolute;
    width:38px; height:38px;
    border-radius:50%; background:var(--c-main); 
}

.af-datebox__time{
  color:var(--c-main); font-weight:bold; font-size:24px; line-height: 1;
}
.af-datebox__small{ font-size:14px; font-weight:normal; }
.af-datebox__note{ font-size:14px; margin-top:6px; color:var(--c-main); }

/* プログラム参加 お知らせボックス */
.af-notice{
  border:4px solid var(--c-main);
  background:var(--c-sub4);
  border-radius:100px;
  padding:22px 28px;
  text-align:center;
  margin-bottom:28px;
}
.af-notice__ttl{ color:var(--c-main); font-weight:bold; font-size:22px; }
.af-notice__sub{ font-size:13px; margin-top:4px; }
.af-notice__link{ margin-top:12px; text-align:center;}
.af-notice__link a{color: var(--c-text);font-weight: bold; }

/* 展覧会ボックス */
.af-exhibit{
  border:4px solid var(--c-main);
  border-radius:100px 100px 20px 20px;
  padding:28px;
  position:relative;
}
.af-exhibit__badge{
   width: fit-content;
   margin:0 auto;
text-align: center;
  background:var(--c-main); color:var(--c-base);
  font-size:13px; font-weight:bold;margin-bottom: 10px;
  padding:2px 22px; border-radius:999px;
}
.af-exhibit__ttl{
  color:var(--c-main); font-weight:bold; font-size:26px;
  text-align:center; margin-bottom:18px;
}
.af-exhibit__body{ display:flex; gap:45px; }
.af-exhibit__figure{ flex:0 0 160px; }
.af-exhibit__img{ width:100%; }
.af-exhibit__info{ flex:1; }
.af-exhibit__feettl{ font-weight:bold; margin-bottom:6px; }
.af-fee__row{ display:flex; justify-content:space-between; border-bottom:1px dotted #bbb; padding:4px 0; font-size:16px; }
.af-fee__row dt{ font-weight:normal; }
.af-fee__row dd{ font-weight:bold; }

.af-fee__note{ font-size:13px; margin:10px 0 5px 0; }

/* =========================================================
   流れるテキスト（マーキー）
   ========================================================= */
.af-marquee{
  background:var(--c-sub4);
  overflow:hidden;
  padding:10px 0;
  white-space:nowrap;
}
.af-marquee__track{
  display:inline-flex;
  list-style:none;
  animation:af-marquee 28s linear infinite;
}
.af-marquee__track li{
  color:var(--c-main);
  font-weight:bold;
  font-size:17px;
  padding:0 38px;
  position:relative;
}
/* ● 区切り（::before で生成） */
.af-marquee__track li::before{
  content:"";
  position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--c-main);
}
@keyframes af-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
/* モーション抑制設定の端末では自動スクロールを停止 */
@media (prefers-reduced-motion:reduce){
  .af-marquee__track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   朝の貸切アートフェス
   ========================================================= */
.af-morning{ background:var(--c-main); color:var(--c-base); padding:48px 0 56px; }
.af-morning__grid{ display:flex; gap:40px; align-items:center; }
.af-morning__main{ flex:1; }
.af-morning__ttl{ font-size:26px; font-weight:bold; margin-bottom:18px; }
.af-morning__txt{ font-size:18px; }
.af-morning__badge{ flex:0 0 auto; }
.af-morning .af-btn-wrap{ text-align:left; }

/* バッジ（黄色のギザギザ＝ico_badge_01.svg を背景に） */
.af-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:200px; height:200px; text-align:center;
  background:url("../img/ico_badge_01.svg") center/contain no-repeat;
  color:var(--c-text); line-height:1.3;
}
.af-badge__lead{ font-size:16px; font-weight:bold; }
.af-badge__big{ font-size:36px; font-weight:bold; letter-spacing:1px; }
.af-badge__foot{ font-size:16px; font-weight:bold; }

/* スカラップ（SVG半円リピート／レスポンシブ） */
.af-scallop{
  background:var(--c-sub4);
  line-height:0;
}
.af-scallop svg{ display:block;  position: relative;    top:-2px; }
/* フッター上部の上向きスカラップ（背景は白＝直前セクションと同色） */
.af-scallop--up{ background:var(--c-base); }
.af-scallop--up svg{ display:block;  position: relative;  top:6px; }

/* =========================================================
   プログラム一覧
   ========================================================= */
.af-programs{ background:var(--c-sub4); padding:0 0 64px; }

/* 波線下線の見出し（path.svg を背景でリピート） */
.af-sec-ttl{
  text-align:center;
  color:var(--c-main);
  font-size:42px;
  font-weight:bold;
  padding:62px 0;
  position:relative;
}
.af-sec-ttl::after{
  content:"";
  display:block;
  width:288px; height:9px;
  margin:0 auto;
  background:url("../img/path.svg") left center repeat-x;
  background-size:auto 9px;
}

/* カード（青ヘッダー＋白ボディ） */
.af-card{
  border:3px solid var(--c-main);
  border-radius:0 60px 20px 20px;
  background:var(--c-base);
  margin-bottom:48px;
}
.af-card__head{
  background:var(--c-main);
  color:var(--c-base);
  text-align:center;
  padding:20px 16px 22px;
  border-radius:0 60px 0 0;
  margin:-3px -3px 0;   /* 枠線とぴったり合わせる */
}
.af-card__sub{ color:var(--c-accent); font-weight:bold; font-size:20px; }
.af-card__note{ color:var(--c-accent); font-size:16px; font-weight:bold; margin-left:8px; }
.af-card__ttl{ font-size:34px; font-weight:bold; margin-top:4px; }
.af-card__body{ padding:36px 40px 40px; }

/* 2カラムのプログラム */
.af-grid2{ display:flex; gap:48px; }
.af-grid2__col{ flex:1; }
.af-grid2__col--bordered{ border-left:2px dotted var(--c-main); padding-left:48px; }

.af-prog__ttl{ color:var(--c-main); font-size:19px; font-weight:bold; margin-bottom:12px; }
.af-prog__txt{ font-size:16px; margin-bottom:10px;}
.af-prog__txt.mr{margin-right: 100px;}
.af-prog__note{ font-size:13px; color:var(--text); margin-bottom: 20px; }
.af-prog__note--inline{ margin-left:14px; }
/* 定義リスト（ラベル：内容）。CSSグリッドで、内容が折り返しても頭（左端）が揃う */
.af-deflist{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:.3em;
  row-gap:10px;
  font-size:16px;
  margin:0 0 14px 0;
  font-weight:bold; 
}
.af-deflist dt{white-space:nowrap; }
.af-deflist dt::after{ content:"："; }   /* コロンはCSSで付与（操作しやすいよう分離） */

/* ドット下線（区切り線） */
.af-dotline{
  border:0;
  border-top:2px dotted var(--c-main);
  margin:24px 0;
}
.af-dotline--full{ margin:36px 0; }

/* 画像＋本文の横並びプログラム */
.af-prog-row{ display:flex; gap:36px; align-items:flex-start; }
.af-prog-row__img{ flex:0 0 320px; }
.af-prog-row__body{ flex:1; }
.af-prog-row__head{ position: relative; }
.af-photo{ width:100%; border:3px solid var(--c-main); border-radius:14px; }

/* Produced by 部分 */
.af-produced{ display:flex; gap:24px; margin:20px 0 4px; }
.af-produced__by{ flex:0 0 auto; color:var(--c-main); font-weight:bold; font-size:16px; text-align:center; }
.af-produced__txt{ font-size:13px; color:#333; padding-left:24px; border-left:2px dotted var(--c-main); }

/* 予約制（小バッジ＝ico_badge_02.svg） */
.af-badge--sm{
    position: absolute;
    top:-10px;
    right:0;
  width:84px; height:84px;
  display:flex; align-items:center; justify-content:center;
  background:url("../img/ico_badge_02.svg") center/contain no-repeat;
  font-size:16px; font-weight:bold; color:var(--c-text);
}

/* =========================================================
   中高生ボランティア募集
   ========================================================= */
.af-volunteer{
    position: relative; 
    background: var(--c-sub4);
}

.af-volunteer-inner{
    background:var(--c-accent);
    padding:56px 0 60px;
    border-radius:0 100px 0 0;
    color: var(--c-main);
}

.af-volunteer-end{
    background:var(--c-sub2);
    color: var(--c-ended-txt);
    text-align: center;
    letter-spacing: 0.2em;
    font-weight: bold;
    width:fit-content;
    margin:-24px auto 50px auto;
    padding: 0 16px;
}

.af-volunteer__sub{ text-align:center; color:var(--c-main); font-weight:bold; font-size:17px; }
.af-volunteer__ttl{ text-align:center; color:var(--c-main); font-size:36px; font-weight:bold; margin-bottom:30px; }
.af-volunteer__grid{ display:flex; gap:48px; align-items:flex-start; }
.af-volunteer__left{ flex:1; }
.af-volunteer__right{ flex:1; }
.af-volunteer__txt{ font-size:16px; margin-bottom:16px; }
.af-volunteer__note{ font-size:14px; margin-top:10px; }
.af-volunteer .af-deflist{ font-size:18px; }
.af-volunteer .af-btn-wrap{ text-align:right; }

/* =========================================================
   ルール / アクセス（2カラム）
   ========================================================= */
.af-twocol{ display:flex; }
.af-rules{ flex:1; background:var(--c-sub4); border-radius:0 0 0 100px; }
.af-access{ flex:1; background:var(--c-main); color:var(--c-base); }
.af-twocol__inner{ max-width:560px; margin:0 auto; padding:56px 28px; }
.af-rules .af-twocol__inner{ margin-left:auto; }
.af-access .af-twocol__inner{ margin-right:auto; }

.af-block-ttl{ color:var(--c-main); font-size:26px; font-weight:bold; margin-bottom:20px; }
.af-block-ttl--white{ color:var(--c-base); }
.af-access__small{ font-size:16px; font-weight:bold; }

/* ・付きリスト（CSSの::beforeで「・」を生成） */
.af-bullet{ list-style:none; }
.af-bullet li{ position:relative; padding-left:1.3em; margin-bottom:8px; font-size:16px; }
.af-bullet li::before{ content:"・"; position:absolute; left:0; top:0; }
.af-access__txt{ font-size:16px; margin-top:18px; }

/* =========================================================
   教育普及活動
   ========================================================= */
.af-edu{ background:var(--c-base); padding:56px 0 72px; }
.af-edu__grid{ display:flex; gap:48px; align-items:flex-start; }
.af-edu__ttl{ flex:0 0 auto; color:var(--c-main); font-size:26px; font-weight:bold; line-height:1.5; }
.af-edu__body{ flex:1; }
.af-edu__txt{ font-size:16px; }

/* =========================================================
   ページトップへ
   ========================================================= */
.af-pagetop{
  position:fixed;
  right:20px; bottom:24px;
  z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:78px; height:72px;
  background:var(--c-accent);
  border-radius:14px;
  font-size:12px; font-weight:bold; text-align:center; text-decoration:none;
  padding-top:14px;
  line-height:1.3;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.af-pagetop::before{
  content:"";
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  border-style:solid;
  border-width:0 6px 8px 6px;
  border-color:transparent transparent var(--c-ended-txt) transparent;
}

/* =========================================================
   SNS（フッターエリア）
   ========================================================= */
.af-sns{ background:var(--c-main); padding:44px 0 52px; }
.af-sns__inner{  display:flex; align-items:center; gap:48px; flex-wrap:wrap;justify-content: space-between;}
.af-sns__lead{
  color:var(--c-accent);
  font-weight:bold;
  font-size:20px;
  line-height:1.5;
  flex:0 0 auto;
}
.af-sns__list{
  list-style:none;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  flex:1 1 auto;
  justify-content: space-between;
}
.af-sns__btn{
  display:flex; align-items:center; gap:12px;
  justify-content: center;
  background:var(--c-base);
  border-radius:999px;
  padding:14px 30px;
  color:var(--c-text);
  font-weight:bold;
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  transition:opacity .2s;
  min-width: 246px;
}
.af-sns__btn:hover{ opacity:.85; }
.af-sns__ico{ display:inline-flex; }
.af-sns__ico img{ width:28px; height:28px; }

/* =========================================================
   レスポンシブ（スマートフォン）
   ========================================================= */

   @media screen and (min-width:769px){
    .pc-none{display: none;}
   }
@media screen and (max-width:768px){
    .sp-none{display: none;}
  .af{ font-size:16px; }
  .af-inner{ padding:0 18px; }
  .af-prog__txt.mr{margin-right: 0;}

  /* イントロ：縦並び */
  .af-intro{ padding:32px 0 36px; }
  .af-intro__grid{ flex-direction:column; gap:36px; }
  .af-intro__ttl{ font-size:24px; padding-left:42px; }
  .af-intro__ttl span.font-b{ font-size:30px; }

  .af-intro__lead{font-size:16px;}
  .af-datebox__small{display: block; line-height: 1.7;}
  .af-sun::after {
    width: 28px;
    height: 28px;
}

.af-notice{border-radius: 60px 60px 60px 0;}
.af-notice__link{text-align: left;}

  .af-sun span{font-size: 20px; top: -0.5px;}
  .af-datebox{  padding:20px 24px 26px; margin-left: -18px;}
  .af-datebox__date{ font-size:20px; }
  .af-datebox__date .af-num{ font-size:38px; }
  .af-datebox__time{ font-size:20px; margin-top: 5px; }
  .af-sun{ width:16px; height:16px;}
  
  .af-exhibit__body{ flex-direction:column; align-items:center;  gap:15px;}
  .af-exhibit__figure{ flex:none; width:200px; margin-bottom:16px; }
  .af-exhibit__info{ width:100%; }
  .af-exhibit .af-btn-wrap {
    margin-top: 20px;
}

  /* マーキー */
  .af-marquee__track{ animation-duration:18s; }
  .af-marquee__track li{ font-size:16px; }

  /* 朝の貸切：バッジを上に */
  .af-morning__grid{ flex-direction:column-reverse; gap:24px; text-align:center; }
  .af-morning__txt{ text-align:left; }
  .af-morning .af-btn-wrap{ text-align:center; }
  .af-morning__ttl{ text-align:left;}
  .af-badge.af-badge--sm{ width: 70px;
    top: -70px;
    right: -18px;
    height: 70px;
}
.af-badge{width:180px; height: 180px;}
.af-badge__lead{font-size: 14px;}
  .af-badge__big{ font-size:30px; }

  /* プログラム */
  .af-sec-ttl{ font-size:26px; }
  .af-card__head{ border-radius:0 36px 0 0; }
  .af-card{ border-radius:0 36px 16px 16px; }
  .af-card__ttl{ font-size:20px; }
  .af-card__note{display: block;}
  .af-card__body{ padding:28px 22px 30px; }
  .af-grid2{ flex-direction:column; gap:0; }
  .af-grid2__col--bordered{ border-left:0; padding-left:0; border-top:2px dotted var(--c-main); padding-top:24px; margin-top:24px; }
  .af-prog-row{ flex-direction:column; gap:18px; }
  .af-prog-row__img{ flex:none; width:100%; }
  .af-produced{ flex-direction:column; gap:8px; }
  .af-produced__txt{ padding-left:0; border-left:0; }

  .af-deflist{ row-gap: 6px; margin-top: 20px;}
.af-produced__by{border-bottom: 2px dashed var(--c-main); margin: 0 0 10px 0; padding:0 0 5px 0;}

  /* ボタンは横幅に合わせる */
  .af-btn{ min-width:0; width:100%; max-width:340px;margin: 0 auto;}
  .af-btn-wrap--right{ text-align:center; }

  /* ボランティア：縦並び＋ドット区切り */
  .af-volunteer-inner{border-radius: 0 80px 0 0;}
  .af-volunteer__ttl{ font-size:26px; }
  .af-volunteer__grid{ flex-direction:column; gap:0; }
  .af-volunteer__right{ border-top:2px dotted #c9c447; padding-top:22px; margin-top:22px; width: 100%; }
  .af-volunteer .af-btn-wrap{ text-align:center; }
  .af-prog__note--inline{margin:0;display: block;}
  /* ルール／アクセス：縦並び */
  .af-twocol{ flex-direction:column; }
  .af-rules{ border-radius:0 0 0 80px ; }
  .af-twocol__inner{ padding:36px 22px; }
  .af-block-ttl{ font-size:22px; }
  .af-access__small{ display:block; font-size:14px; }

  /* 教育普及 */
  .af-edu{ padding:40px 0 48px; }
  .af-edu__grid{ flex-direction:column; gap:20px;  align-items: center;}
  .af-edu__ttl{ text-align:center; }

  .af-pagetop{ width:66px; height:66px; right:14px; bottom:16px; }

  /* SNS：縦並び・中央寄せ */
  .af-sns{ padding:32px 0 40px; margin-bottom: 50px;}
  .af-sns__inner{ flex-direction:column; gap:22px; }
  .af-sns__lead{ text-align:center; font-size:18px; }
  .af-sns__list{ flex-direction:column; align-items:center; gap:18px; width:100%; }
  .af-sns__list li{ width:100%; max-width:300px; }
  .af-sns__btn{ justify-content:center; width:100%; }
}