body {
      font-family: "Poppins", sans-serif;
      color: aliceblue;
      margin: 0;
      padding: 0;
      background-color: #010101;
      width: auto;
    }

    header{
      background-color: #ffffff48;
      height: 113px;
      width: auto;
      
    }
    main{
      width: 70%;
      margin: 0 auto;
      font-size: 18px;
    }

    h2{
      color: #ffb62f;
      font-size: 33px;
    }
    
    h3{
      font-size: 28px;
    }
    .concept .img{
      width: 100%;
    }
  
    .concept .text{
      max-width: 600PX;
      background-color: rgba(253, 248, 248, 0.8);
      color: rgb(56, 50, 50);
      padding: 40px;
      position: absolute;
      top: 600px;
      right: 100px;

    }
    .rght{
      text-align: right;
      font-size: 14px;  
      color: #adadad;    
    }

    footer{
      width: 60%;
      margin: 0 auto; 
    }

    .footer-copy{
      font-size: 14px;
      text-align: right;
    }

    footer h1{
      font-size: 22px;
      width: 50%;
    }

    .sns-icons {
      width: 50%;
      text-align: right;
    }

    footer img{
      width: 25px;
      height: auto;
      margin-right: 10px;
      margin-top: 15px;
    }

    .title{
      display: flex;
    }

    #header{
      width: auto;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      max-width: 1640px;
    }

    #header .logo{
      width: 100%;
      max-width: 100px;
    }

    #header .logo a{
      display: block;
    }
    #header .logo img{
      width: 140%;
      max-width: 150px;
    }

    #header .navi .menu{
      font-family: "Playfair Display", sans-serif;;
      display: flex;
      align-items: center;

    }

    #header .navi .menu li{
      font-size: 20px;
      margin-left: 40px;
      list-style: none;
    }

    .actv{
      border-bottom: 2px solid #c49a6c; /* ゴールドの下線 */
      padding-bottom: 4px;              /* 下線と文字の間に余白 */
    }

    #header .navi .menu a{
      color: #fff;
      text-decoration: none;
    }
    #header .navi .menu a:hover {
      color: #b97878;  /* ホバー時の色 */
      transition: 0.3s;             /* ホバーのアニメーション */
    }



    main {
      padding: 1rem;
    }
    .video-row {
        display: flex;
        gap: 20px;        /* 動画の間に余白 */
    }

    .video-row iframe {
        max-width: 100%;  /* レスポンシブ対応 */
    }
    
    /*パーティー*/
    .party-center img{
      width: 40%;
      height: auto;
      margin-bottom: 20px;
    }
    .party-center{
      text-align: center;
    }
    .party-center a{
      color: #f0ca77;
    }

    .party-menu {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    }

    .party-menu p {
        box-sizing: border-box;
        width: 250px;
        height: 110px;
        margin: 0;

        background-color: #666666;
        color: #ffffff;

        border: 3px solid;
        border-radius: 20px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text-align: center;
        font-size: 18px;
        line-height: 1.2;
    }

    /* ウェディング：水色 */
    .party-menu .wedding {
        border-color: #80c9e0;
    }

    /* ランチ：黄色 */
    .party-menu .lunch {
        border-color: #e2c66b;
    }

    /* ディナー：紫色 */
    .party-menu .dinner {
        border-color: #a065e4;
    }

    /* 価格部分 */
    .party-menu p span {
        display: block;
        margin-top: 8px;
        font-size: 16px;
    }

    .kashikiri{
      font-size: 23px;
    }
    .partner {
      text-align: center;
      margin: 60px 0;
    }

    .partner h3 {
      font-size: 20px;
      letter-spacing: 0.1em;
      margin-bottom: 20px;
      font-weight: 500;
    }

    /* 見出し下のゴールド線 */
    .partner h3::after {
      content: "";
      display: block;
      width: 140px;
      height: 1px;
      background: #c49a6c;
      margin: 10px auto 30px;
    }

    /* グリッド配置（上3つ・下2つ） */
    .partner-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 上3つ */
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    /* 四角カード */
    .partner-card {
      border: 1px solid #c49a6c; /* ゴールド枠 */
      padding: 15px;
      border-radius: 8px;
      background: #fff;
      transition: 0.2s;
    }

    .partner-card:hover {
      background: #f9f4e8; /* ほんのりゴールド系の薄色 */
    }

    .partner-card a {
      text-decoration: none;
      color: #333;
      font-size: 15px;
      letter-spacing: 0.05em;
    }
    .wrapper {
      max-width: 1800px;   /* 好きな最大幅にする */
      margin: 0 auto;      /* 中央寄せ */

    }

    /*カレンダー*/
    /* カレンダーを画面幅に合わせる */
    #calendar {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
    }

    #calendar h2{
      font-size: 26px;
      color: #fff;
    }
    .calendar-wrapper {
      width: 100%;
      box-sizing: border-box;
    }
    #calendar .holiday {
      background-color: #888888 !important;
      border-color: #888888 !important;
      color: #ffffff !important;
    }

    #calendar a.fc-event.lunch {
      background-color: #e9a23b !important;
      border-color: #e9a23b !important;
      color: #ffffff !important;
    }

    #calendar a.fc-event.dinner {
      background-color: #4285f4 !important;
      border-color: #4285f4 !important;
      color: #ffffff !important;
    }

    #calendar a.fc-event.closed {
      background-color: #d9534f !important;
      border-color: #d9534f !important;
      color: #ffffff !important;
    }
    #calendar a.fc-event.allday {
      background-color: #8b4fd9 !important;
      border-color: #8b4fd9 !important;
      color: #ffffff !important;
    }

    #calendar .fc-col-header-cell {
      background-color: #000000 !important;
    }
    
    
        /* ポップアップの背景 */
    .event-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, 0.55);
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    /* 表示状態 */
    .event-modal.is-open {
      display: flex;
    }

    /* ポップアップ本体 */
    .event-modal-content {
      position: relative;
      width: 100%;
      max-width: 450px;
      max-height: 80vh;
      overflow-y: auto;
      background: #333333;
      color: #ffffff;
      padding: 30px;
      border-radius: 8px;
      box-sizing: border-box;
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    }

    /* タイトル */
    .event-modal-content h3 {
      margin: 0 35px 25px 0;
      font-size: 1.3rem;
      line-height: 1.6;
    }

    /* 詳細項目 */
    .event-modal-content strong {
      display: block;
      margin-bottom: 6px;
    }

    .event-modal-content p {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      line-height: 1.7;
      
    }

    .modal-detail {
      margin-top: 20px;
    }

    /* 閉じるボタン */
    .modal-close {
      position: absolute;
      top: 10px;
      right: 12px;
      width: 36px;
      height: 36px;
      border: none;
      background: transparent;
      color: #333;
      font-size: 28px;
      cursor: pointer;
    }

    /* 予定をクリックできることを示す */
    #calendar .fc-event {
      cursor: pointer;
    }
    /*menuのレイアウト*/
    .course-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2列にする */
      gap: 20px; /* カード同士の余白 */
    }
    .course-item {
      border: 2px solid #ccc;
      border-radius: 8px;
      overflow: hidden;
      font-size: 22px;
      text-align: center; 
      max-width: 470px;
      height: auto;
    }

    .course-item span::after {
      content: "";
      display: block;
      width: 120px;
      height: 2px;
      background: #c49a6c;
      margin: 10px auto 0;
    }

    .course-item p{
      text-align: left;
      margin-left: 30%;
      font-size: 18px;
    }
    /*アンカー設定*/
    .Anchor a{
      display: inline-block;        /* ボタン化 */
      padding: 12px 28px;           /* ボタン内の余白 */
      border: 1px solid #fff;       /* 白枠 */
      text-decoration: none;        /* 下線を消す */
      color: #fff;
      border-radius: 6px;           /* 角丸 */
      font-size: 16px;              /* 読みやすいサイズ */
      letter-spacing: 0.03em;       /* 少し上品に */
      margin: 10px;                 /* ボタン同士の間隔 */
      transition: 0.3s;             /* ホバーのアニメーション */
    }

    .Anchor a:hover {
      background-color: #111;       /* 少し明るい黒に */
      border-color: #ddd;           /* 枠を少し薄く */
    }

    .Anchor-grid{
      display: flex;
      align-items: right;
      justify-content: flex-end;
      padding: 0 40px;
    }
    /*menuのメニュー表*/
    .course-menu p{
      text-align: center;
    }

    .course-menu h4{
      text-align: center;
      font-size: 20px;
      color: #e2c66b;
    }

    .course-menu span{
      font-size: 14px;
      color:  #adadad;
    }

    .Dcourse-item {
      border: 2px solid #ccc;
      border-radius: 8px;
      overflow: hidden;
      font-size: 22px;
      text-align: center; 
      max-width: 470px;
      height: auto;
    }

    .Dcourse-item span::after {
      content: "";
      display: block;
      width: 120px;
      height: 2px;
      background: #7449a5;
      margin: 10px auto 0;
    }

    .Dcourse-item p{
      text-align: left;
      margin-left: 30%;
      font-size: 18px;
    }

    /*menuのメニュー表*/
    .Dcourse-menu p{
      text-align: center;
    }

    .Dcourse-menu h4{
      text-align: center;
      font-size: 20px;
      color: #a065e4;
    }

    .Dcourse-menu span{
      font-size: 14px;
      color:  #adadad;
    }

    .another{
      border: 1px solid #ccc;          /* 枠線（薄いグレー） */
      padding: 20px 25px;              /* 内側の余白 */
      margin: 30px 0;                  /* 上下の余白 */
      line-height: 1.8;                /* 行間を広く */
      font-size: 18px;                 /* 読みやすいサイズ */
      border-radius: 6px;              /* 角丸（おしゃれ） */
      max-width: 600px;                /* 横幅を整える（任意） */
      margin: 40px auto;               /* ← これで中央寄せ */
    }

    .back-to-top {
      position: fixed;
      right: 20px;          /* 右からの距離 */
      bottom: 20px;         /* 下からの距離 */
      padding: 12px 18px;
      background: #000;     /* 黒背景 */
      color: #fff;          /* 白文字 */
      border: 1px solid #fff;
      border-radius: 6px;
      text-decoration: none;
      font-size: 14px;
      letter-spacing: 0.05em;
      transition: 0.3s;
      z-index: 999;         /* 最前面に表示 */
    }

    .back-to-top:hover {
      background: #111;
      border-color: #ddd;
    }

    /*info*/
    table{
      margin: 0 auto;
      border-collapse: collapse;
    }
    td{
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        /* 他の線は引かない */
        border-left: none;
        border-right: none;
    }
    .col1{
      width: 20%;
      height: 75px;
      text-align: center;
    }
    .col2{
      width: 80%;
    }

    /*about*/

    .ab-dis{
      display: flex;
    }

    .ab-text{
      margin-left: 20px;
    }

    /*NEWS*/

    .news-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .news-card {
      min-width: 0;
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
    }

    .news-card img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      margin-bottom: 12px;
    }

    .news-card h2 {
      font-size: 1.1rem;
      overflow-wrap: anywhere;
    }

    .news-card a {
      display: inline-block;
      margin-top: 8px;
    }

    .admin {
      max-width: 720px;
      margin: 40px auto;
      padding: 20px;
    }

    .admin label {
      display: block;
      margin: 16px 0;
    }

    .admin input:not([type="checkbox"]),
    .admin textarea {
      display: block;
      box-sizing: border-box;
      width: 100%;
      margin-top: 6px;
      padding: 10px;
    }

    .admin button {
      margin: 4px;
      padding: 10px 16px;
      cursor: pointer;
    }

    [hidden] {
      display: none !important;
    }

    @media (max-width: 700px) {
      .news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .admin {
        margin: 16px auto;
        padding: 16px;
      }
    }

    @media (max-width: 420px) {
      .news-list {
        grid-template-columns: 1fr;
      }
    }
    #news table{
      width: 100%;
    }

    #news td{
       border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        /* 他の線は引かない */
        border-left: none;
        border-right: none;
    }
    .news-date{
      width: 20%;
      text-align: center;
    }


    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
    }

    .modal-content {
      background: #4d4d4d;
      margin: 5% auto;
      padding: 20px;
      width: 90%;
      max-width: 600px;
      border-radius: 8px;
      position: relative;
      white-space: pre-wrap; /* ← スプレッドシートの改行をそのまま表示 */
      color: #fff; /* 読みやすくするために白文字推奨 */
    }

    #modal-close {
      position: absolute;
      right: 15px;
      top: 10px;
      font-size: 28px;
      cursor: pointer;
      color: #fff;
    }

    #modal-body {
      margin-top: 20px;
      font-size: 16px;
      line-height: 1.6;
    }

    /* 改行 */
    .sp-br {
      display: none; /* PCでは非表示 */
    }

    /* ハンバーガーアイコンの初期状態（PCでは非表示） */
    .hamburger {
      display: none;
      width: 35px;
      height: 28px;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
    }

    .hamburger span {
      display: block;
      height: 4px;
      background: #fff;
      border-radius: 2px;
    }

    /* 閉じるボタン */
    .menu-close {
      text-align: right;
      font-size: 22px;
      color: #c49a6c;
      cursor: pointer;
      margin-bottom: 30px;
      font-family: "Playfair Display", serif;
    }

  /* スマホ用（画面幅768px以下） */
@media screen and (max-width: 768px) {

  body {
    font-size: 16px;
  }

  main {
    width: 95%;
    padding: 0 10px;
    font-size: 16px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }
  
  /* ヘッダー */
  #header {
    padding: 0 20px;
  }

  #header .logo img {
    width: 100px;
  }
  .rght{
    font-size: 8px;  
  }

  /* ハンバーガーを右上に固定 */
  .hamburger {
    display: flex;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;              /* 外枠の幅 */
    height: 50px;             /* 外枠の高さ */
    background: #0000004b;         /* 黒背景 */
    border: 2px solid #fff;   /* 白枠 */
    border-radius: 10px;      /* 角丸 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;                 /* 線の間隔 */
    cursor: pointer;
    z-index: 2001;
  }

  /* 3本線のデザイン */
  .hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    position: relative;
  }

  /* メニューを非表示 */
   #header .navi .menu {
    position: fixed;
    top: 0;
    right: -100%; /* ← 70%ではなく100%にして完全に隠す */
    width: 70%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    padding: 60px 20px;
    border-left: 2px solid #c49a6c;
    transition: right 0.35s ease;
    display: block;
    z-index: 1000;
  }

  /* メニュー表示時のスタイル */
   #header .navi .menu.show {
    right: 0;
  }

 #header .navi .menu li {
    margin: 25px 0;
    font-size: 20px;
    text-align: right;
  }

  /* コンセプト部分のテキスト位置調整（絶対配置を解除） */
  .concept .text {
    position: static;
    max-width: 100%;
    margin: 20px 0;
    padding: 20px;
  }

  /*Party*/
  /* 動画を縦並びに */
  img{
    max-width: 100%;
    height: auto;
  }
  .video-row {
    flex-direction: column;
  }

  .party-info {
    text-align: center;
  }

  .video-row iframe {
    width: 400px;
    height: 225px;
  }

  /* パートナーのグリッドを2列→1列に */
  .partner-grid {
    grid-template-columns: 1fr; /* 1列にする */
    gap: 20px;
    max-width: 80%;
    margin: 0 auto;
  }


  /*menuのレイアウト調整*/
  /* コースの2列→1列 */


  .course-item,
  .Dcourse-item {
    max-width: 350px;
    margin: 0 auto;
  }

  .course-item p,
  .Dcourse-item p {
    margin-left: 10%;
    font-size: 14px;
  }
  .course-item span,
  .Dcourse-item span {
    font-size: 15px;
  }

  .another p{
    font-size: 16px;
    text-align: center;
  }

  /* アンカーの横並びを縦並びに */
  .Anchor-grid {
    flex-direction: column;
    gap: 10px;
  }
  .Anchor{
    display: flex;
  }

  .Anchor a {
    width: 40%;
    text-align: center;
  }

 /* カレンダーを画面幅に合わせる */

  #calendar {
    font-size: 12px;
  }

  #calendar .fc-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  #calendar .fc-toolbar-title {
    font-size: 1.15rem;
  }

  #calendar .fc-button {
    padding: 0.35em 0.5em;
    font-size: 0.85rem;
  }

  #calendar .fc-daygrid-day-frame {
    min-height: 65px;
  }

  #calendar .fc-daygrid-day-number {
    padding: 3px;
    font-size: 12px;
  }

  #calendar .fc-event {
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #calendar .fc-daygrid-more-link {
    font-size: 10px;
  }

  #event-modal.event-modal {
    padding: 12px;
  }

  #event-modal .event-modal-content {
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    padding: 24px 20px;
    border-radius: 12px;
  }

  #event-modal .event-modal-content h3 {
    font-size: 1.15rem;
    margin-right: 30px;
  }

  #event-modal .event-modal-content p {
    font-size: 14px;
  }

  #event-modal .modal-close {
    width: 40px;
    height: 40px;
    font-size: 30px;
  }

  #calendar {
    font-size: 14px;
  }

 #calendar .fc-toolbar {
    flex-wrap: wrap;
    gap: 5px;
  }

  #calendar .fc-toolbar-title {
    font-size: 16px;
  }

  #calendar .fc-button {
    padding: 4px 6px;
    font-size: 11px;
  }

  #calendar .fc-list-day-cushion {
    padding: 8px 10px;
  }

  #calendar .fc-list-event td {
    padding: 10px 8px;
  }

  #calendar .fc-list-event-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #calendar .fc-list-event-time {
    white-space: nowrap;
    font-size: 12px;
  }
    #calendar .fc-daygrid-day-frame {
    min-height: 45px;
  }

  #calendar .fc-daygrid-day-number {
    padding: 3px;
    font-size: 11px;
  }

  #calendar .fc-daygrid-event {
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }


      /* 週ごとのリスト表示：曜日の見出しを黒背景にする */
    #calendar .fc-list-day-cushion {
      background-color: #000 !important;
      color: #fff !important;
    }

    /* 曜日の日付リンクも白文字にする */
    #calendar .fc-list-day-text,
    #calendar .fc-list-day-side-text {
      color: #fff !important;
      text-decoration: none;
    }

    /* 曜日見出しの余白 */
    #calendar .fc-list-day-cushion {
      padding: 10px 12px;
    }


  /* NEWSテーブル */
  #news table {
    font-size: 14px;
  }

  .news-date {
    width: 30%;
  }

  /* モーダルの余白調整 */
  .modal-content {
    width: 95%;
    margin-top: 20%;
  }
  /*about*/

  .ab-dis{
    display: block;
  }

  .ab-text{
    text-align: center;
    margin-left: 0px;
  }

  /*info*/
  .col1{
    width: 25%;
    height: 100px;
    text-align: center;
    font-size: 10px;
  }
  .col2{
    width: 75%;
    font-size: 10px;
  }

  .map{
    width: 100%;
    height: auto;
  }
  /* フッター */
  footer {
    width: 90%;
  }

  .sns-icons {
    text-align: center;
  }

  footer img {
    margin: 10px;
  }

  .back-to-top {
    right: 10px;
    bottom: 10px;
    padding: 10px 14px;
  }

  /*改行*/
   .sp-br {
    display: block; /* スマホでは改行として表示 */
  }
}