/* ===============================
   style.css  —  愛のクリスマス2025
  /* =============================== */
/* 0. リセット + 基本設定           */
/* =============================== */
html,body{ margin:0; padding:0; scroll-behavior:smooth; overflow-x: hidden;}
  
}


/* =============================== */
/* 1. 共通レイアウト               */
/* =============================== */
.l-contents{
  margin:0 10px;   /* 横方向 10px 余白 */
  padding-top:0;   /* 上余白なし */
}
a:hover{ font-weight:bold; }

/* =============================== */
/* 2. 基本フォント設定             */
/* =============================== */
.fontmain{ font-family:"Klee One",serif; font-weight:200; }
.fontmain p{ line-height:1.5rem; margin-bottom:.5rem; }
.fontmain h2{
  font-family:"Sedan SC","Klee One",serif;
  font-size:55px; font-weight:bold; color:#1e377d;
  text-align:center; margin:70px 0 30px; line-height:30px;
}
.material-symbols-outlined{
  font-family:"Material Symbols Outlined"; font-weight:normal;
  font-style:normal; font-size:1.2rem; vertical-align:middle;
  font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'48;
}

/* =============================== */
/* 3. ユーティリティ               */
/* =============================== */
.pm05{ margin-bottom:5rem; }
.pad35{ padding:35px; }
img.padbm15{
  max-width:100%;   /* 親の幅に合わせて縮小 */
  height:auto;      /* 縦横比を保持 */
  width:auto;       /* HTML の固定 width を打ち消す */
}
.padbm15{ padding-bottom:15px; }
.padbm50{ padding-bottom:50px; }
.logo{
  display:flex;          /* 親をフレックスに */
  justify-content:center;/* 横方向で中央寄せ   */
  margin:0 auto;         /* ブロック自身も中央 */
}

.logo img{
  display:block;         /* 余計な隙間を消す   */
}
.padtop35{ padding-top:35px; }
.padtop10{ padding-top:10px; }
.center0{ text-align:center; }
.centerblue{
  text-align:center; color:#1e377d; font-size:28px;
  margin:20px 0 30px; line-height:40px; font-family:"Noto Serif JP",serif;
}
@media(max-width:480px){ .centerblue{ font-size:20px; margin:20px 0; } }

/* =============================== */
/* 4. フォントバリエーション       */
/* =============================== */
.notoheader{ font-family:"Noto Serif JP",serif; font-weight:400; color:#5992de; font-size:40px; line-height:35px; }
.fontnoto{ font-family:"Noto Serif JP",serif; font-weight:400; color:#1e377d; }
.name-f{ padding:8px 0 0; font-size:130%; }
.futoji13{ font-size:130%; }
.futoji{ font-weight:bold; }
.futojiblue{ font-weight:bold; color:#1e377d; }
.fontblureb{ color:#1e377d; font-weight:bold; font-size:120%; }
.fontss{ font-size:.8rem; }
.font5{ font-size:45%; padding-right:1rem; }
.pbr{ display:inline-block; }

/* =============================== */
/* 5. フレックス & ボックス        */
/* =============================== */
.container-tune,
.container-f{ display:flex; justify-content:center; flex-wrap:wrap; align-items:center; }
.box-designf{
  margin:20px auto; padding:20px; border:2px solid #4c9ac0; position:relative;
}
.box-designf p{
  background-image:linear-gradient(180deg,rgba(237,119,128,0)0%,rgba(237,119,128,0)95%,#4c9ac0 100%);
  background-size:8px 100%,100% 2.5em; line-height:2.5; margin:0;
}
.q_button{ background-color:#75a5d1; }

/* =============================== */
/* 6. 幅固定ボックス               */
/* =============================== */
.box-500{ width:500px; margin:20px auto ; }
.box-700{ width:700px; margin:20px auto; }
.box-800{ width:840px; margin:20px auto; }
.box-1000{ width:1000px; margin:20px auto; }
@media(max-width:1000px){ .box-1000{ width:100%; } }
@media(max-width:800px){ .box-800,.box-500{ width:100%; } }

/* =============================== */
/* 7. グリッドレイアウト           */
/* =============================== */
.grid-f{ display:grid; gap:10px; grid-template-columns:1fr 2fr; place-content:center; margin-top:35px; }
.grid-f3{ display:grid; gap:10px; grid-template-columns:repeat(3,1fr); margin-top:35px; }
.grid-Art{
  display:grid; gap:10px; grid-template-columns:repeat(3,1fr);
  max-width:1000px; margin:35px auto; padding:0 30px; box-sizing:border-box;
}
.grid-Art img{ width:100%; height:auto; object-fit:cover; display:block; }
@media(max-width:640px){ .grid-Art{ grid-template-columns:1fr; padding:0; width:100%; } }

/* =============================== */
/* 8. アコーディオン               */
/* =============================== */
.accordion-container{ margin:0 auto 20px; overflow:hidden; }
details{ border:none; margin:0 0 20px; }
summary{
  display:block; padding:15px 20px; background:#1e377d; color:#fff;
  cursor:pointer; line-height:1.6; user-select:none;
}
summary .material-symbols-outlined{ float:right; transition:transform .3s ease; }
details[open] summary .material-symbols-outlined{ transform:rotate(180deg); }
.accordion-content{ padding:20px 25px; background:#fff; border-top:1px solid #ccc; }

/* =============================== */
/* 9. HERO                         */
/* =============================== */
.hero{
  width:100%;
  aspect-ratio: 2000 / 763; /* 画像比率そのまま */
  max-height:90vh;          /* 画面高が小さい端末では切り詰める */
  margin:0;
  overflow:hidden;          /* 余計なハミ出しを防止 */
}
.hero picture{ width:100%; height:100%; display:block; }
.hero-img{
  width:100%; height:100%;
  object-fit:contain;       /* 全体を収める */
  object-position:center;   /* 余白が左右均等になる */
}

@media (max-width:640px){
  .hero{
    aspect-ratio: 1000 / 967;   /* ← スマホ用画像の比率に合わせる */
    max-height:none;            /* 90vh 制限を解除（全体表示） */
  }
  .hero-img{
    object-fit:contain;         /* 全体を収める ※帯消えない時は cover に */
    object-position:center;
  }
}

/* =============================== */
/* 10. グローバルナビ              */
/* =============================== */
.global-nav{ position:sticky; top:0; width:100%; background:#1e377d; z-index:1000; }
.global-nav ul{ display:flex; justify-content:center; margin:0; padding:0; list-style:none; }
.global-nav li{ margin:0 1.2rem; }
.global-nav a{ display:block; padding:1rem 0; color:#fff; text-decoration:none; font-family:"Noto Serif JP",serif; }
.global-nav a:hover{ opacity:.8; }
@media (max-width:640px){
  /* ▼ ここを wrap → nowrap に変更 */
  .global-nav ul{
    flex-wrap: nowrap;          /* 1 行固定 */
    justify-content: space-around;
  }

  /* ▼ li を均等伸縮させ、横マージンをなくす */
  .global-nav li{
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
  }

  /* ▼ 既存の padding を少し詰め、フォントも微調整 */
  .global-nav a{
    font-size: .8rem;
  }
}



/* =============================== */
/* 11. スケジュールリスト          */
/* =============================== */
.schedule dl{ padding:15px 0; border-bottom:1px solid #ccc; }
.schedule dt{ padding-bottom:5px; }
@media(min-width:768px){
  .schedule dt{ float:left; width:20%; clear:left; }
  .schedule dd{ margin-left:11%; }
}

/* =============================== */
/* 12. 画像切り替え (PC/SP)        */
/* =============================== */
.img-sp{ display:none; }
@media(max-width:560px){ .img-pc{ display:none; } .img-sp{ display:block; } }

/* =============================== */
/* 13. その他補助                 */
/* =============================== */
.p-info,.p-triangle,.single .l-secondary{ display:none!important; }
.single .l-primary{ width:100%; }
hr{ border:none; height:1px; border-top:1px solid #1e377d; }
.well-top{ margin-bottom:30px; padding:1.1em 2em; background:#fafafa; }
.sample{ margin:16px auto; text-align:center; }
.sample .text{ text-align:left; display:inline-block; }

/* =============================== */
/* 14. フッター                    */
/* =============================== */
.footer{
  background:#1e377d;
  color:#fff;
  text-align:center;
  padding:1.2rem 0;
  font-size:.9rem;
}
.footer a{ color:#fff; text-decoration:none; }

.link-button {
  display: inline-block;
  background-color: #1e377d;
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: "Noto Serif JP", serif;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

.link-button:hover {
  background-color: #3452a1;
  text-decoration: none;
}

/* インフォメーション一覧風リスト表示 */
.info-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
  align-items: flex-start;
}

.info-date {
  color: #1e377d;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 1rem;
  min-width: 130px;
  font-family: "Noto Serif JP", serif;
}

.info-text {
  flex: 1;
  font-family: "Noto Serif JP", serif;
  font-size: 0.95rem;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .info-list li {
    flex-direction: column;
  }

  .info-date {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 640px) {
  .l-contents {
    margin: 0 5vw;
  }
}

/* =============================== */
/* 問い合わせフォーム専用ボックス */
/* =============================== */
.contact-box {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.contact-box input,
.contact-box textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.fontmain .contact-heading {
  font-size: 24px;
  text-align: center;
  color: #1e377d;
  font-family: "Noto Serif JP", serif;
  margin: 2rem 0;
}

@media (max-width: 480px) {
  .fontmain .contact-heading {
    font-size: 20px;
  }
}

@media (max-width: 800px) {
  .contact-box {
    width: 100%;
    padding: 0 10px;
  }
}