/* ==========================================================================
   Book Section - Partners Styles (High Specificity & Responsive)
   ========================================================================== */

/* --- 1. メニュー背景の徹底上書き --- */
#nav.mobile-open {
    display: flex !important;
    position: fixed !important; /* 画面に固定 */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;    /* 横幅100% */
    height: 100vh !important;   /* 高さ100% */
    background-color: #000000 !important; /* 強制的に真っ黒 */
    z-index: 99999 !important;  /* 他の全コンテンツより前面へ */
    
    /* 中央揃えの設定 */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 2. 文字の周りの「白い箱」や「グレーの影」を完全消去 --- */
#nav.mobile-open .nav-list,
#nav.mobile-open .nav-dropdown,
#nav.mobile-open li {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important; /* 白い影の正体 */
    border: none !important;
    position: static !important; /* 浮遊配置を解除 */
    width: 100% !important;
    text-align: center !important;
}

/* --- 3. メニュー項目の配置と色 --- */
#nav.mobile-open .nav-list > li {
    margin-bottom: 20px !important;
}

#nav.mobile-open .nav-link {
    color: #ffffff !important;
    font-size: 22px !important;
    text-decoration: none !important;
    font-family: 'Cormorant Garamond', serif !important;
    display: inline-block !important;
}

/* 子メニュー（ROOMSなど）の設定 */
#nav.mobile-open .nav-dropdown {
    display: block !important;
    margin-top: 10px !important;
}

#nav.mobile-open .nav-dropdown .nav-link {
    font-size: 16px !important;
    opacity: 0.7;
}

/* --- 4. 閉じるボタン（✕）を黒背景の上に表示 --- */
#menuToggle {
    z-index: 100000 !important; /* 背景よりさらに上 */
}

/* メニューが開いている時、三本線を白くする */
.header-inner:has(#nav.mobile-open) .menu-bar {
    background-color: #ffffff !important;
}

/* --- 5. 背景のスクロールを止める --- */
body:has(#nav.mobile-open) {
    overflow: hidden !important;
}

/* ROOMSセクションのモバイル表示調整 */
@media (max-width: 768px) {
    /* 1. コンテナ全体の余白をリセットして中央に配置 */
    .room-types {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 子要素を水平中央に */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important; /* 左右に少しだけ余白を作る */
        box-sizing: border-box !important;
    }

    /* 2. 各部屋カードの幅を調整して中央寄せ */
    .room-type-item {
        width: 100% !important;
        max-width: 100% !important; /* 親の幅に合わせる */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 60px !important; /* 部屋ごとの間隔 */
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. 画像ギャラリーの中央寄せ */
    .room-type-gallery {
        width: 100% !important;
        margin: 0 auto 20px auto !important;
    }

    .room-gallery-main img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* 4. テキスト類の中央寄せ（お好みで左寄せに戻してもOK） */
    .room-type-title,
    .room-type-description {
        text-align: left; /* 説明文は左寄せの方が見やすいですが、中央にしたい場合は center に */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .btn-room-detail {
        display: block !important;
        width: fit-content !important;
        margin: 20px auto 0 auto !important; /* ボタンのみ中央寄せ */
    }
}

/* 部屋カードの下部余白の調整 */
.room-type-item {
    padding-bottom: 40px !important; /* カードの内側下部にスペースを作る */
    margin-bottom: 60px !important; /* 次のカードとの間のスペース */
    border-bottom: 1px solid #dddddd; /* 下の線とボタンの間に余白が生まれる */
}

/* ボタン自体の配置調整（念のため） */
.btn-room-detail {
    margin-top: 20px !important;
    margin-bottom: 10px !important; /* ボタンの直下にも少しマージンを置く */
    display: inline-block !important;
}      
      
/* Heroエリアの動画再生をコントロール */
.hero-video {
  opacity: 0;
  transition: opacity 0.8s ease; /* 0.8秒かけてじわっと出す */
}

.hero-video.is-visible {
  opacity: 1;
}
      
/* モーダルをグローバルヘッダーより最前面に表示する */
#experienceModal {
    z-index: 99999 !important;
}
      
/* モーダルの閉じるボタンを丸くして、画面右上に固定表示 */
.modal-close {
    position: fixed !important;  
    top: 25px !important;        
    right: 25px !important;      
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 100000 !important;
    border: none !important;
}

.modal-close svg {
    width: 20px !important;
    height: 20px !important;
}
      
/* 外部リンクアイコンの表示調整 */
.external-icon {
    display: inline-block;
    vertical-align: middle;   
    margin-left: 0px;         
    margin-bottom: 3px;       
    opacity: 0.8;             
}

/* 画像の下に余白を追加 */
.about-image-full {
    margin-bottom: 40px; 
}

/* --- EXPERIENCEカードのレイアウト（ボタン下部揃え） --- */
.experience-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 隣のカードと高さを揃える */
}

.experience-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 画像の下の空きスペースをすべてこのエリアで埋める */
}

/* メタ情報のコンテナ（カード用） */
.experience-meta {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 項目間の余白 */
  margin-top: 12px !important; /* タイトルとの余白 */
  margin-bottom: 24px; /* ボタンとの余白 */
  color: #555555; 
  font-family: "Helvetica Neue", Arial, sans-serif; 
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* 各行のレイアウト */
.experience-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px; 
}

/* アイコンのスタイル */
.experience-meta .meta-icon {
  flex-shrink: 0;
  color: #888888; 
}

/* --- EXPERIENCEカードのボタン（ゴーストボタン） --- */
.card-action-button {
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  border: 1px solid #dddddd;
  color: #555555;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: auto !important; /* ★ボタンを最下部に押し付ける */
}

/* カードにマウスが乗った時に背景を反転させる */
.experience-card:hover .card-action-button {
  background-color: #333333;
  color: #ffffff;
  border-color: #333333;
}

/* --- モーダル用メタ情報のコンテナ --- */
.modal-meta {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  gap: 32px; /* 時間と料金の間隔を広めにとる */
  margin-top: 16px; /* タイトルとの余白 */
  margin-bottom: 24px; /* 説明文との余白 */
  color: #555555;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.modal-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px; 
}

.modal-meta .meta-icon {
  flex-shrink: 0;
  color: #888888;
}

/* モバイル対応（画面幅が狭い場合は縦並びに変更） */
@media (max-width: 480px) {
  .modal-meta {
    flex-direction: column;
    align-items: flex-start; /* モバイルの縦並び時も左寄せ */
    gap: 12px; 
  }
}
    
/* 追加：カード内の説明文スタイル */
.experience-card-text {
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
  margin-top: 8px;      /* タイトルとの間隔 */
  margin-bottom: 0;     /* experience-meta側でmargin-topを持っているので0に設定 */
  flex-grow: 1;         /* 文の長さが違ってもボタン位置を揃えるのを助ける */
}

/* ==========================================================================
   Book Section - Partners Styles with Descriptions (Carousel Support)
   ========================================================================== */

/* コンテナ全体の調整 */
section#book div.container div.book-content div.book-partners-container {
    width: 100%;
    max-width: 900px;
    margin: 40px auto 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* リスト全体のスタイル（横スクロール対応） */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex;
    flex-direction: row !important; /* モバイルの縦並びを強制解除 */
    align-items: stretch;
    gap: 30px; /* パートナー間の余白 */
    list-style: none;
    margin: 0;
    padding: 0 0 20px 0; /* 下部にスクロールバー用の余白を確保 */
    
    /* カルーセル（スワイプ）の必須設定 */
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* スクロール時にカードにピタッと吸着させる */
    -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロール */
    scrollbar-width: thin; /* Firefox向けスクロールバー調整 */
}

/* スクロールバーのデザイン（Chrome, Safari, Edge用） */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list::-webkit-scrollbar {
    height: 8px;
}
section#book div.container div.book-content div.book-partners-container ul.book-partners-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); /* うっすらとした背景 */
    border-radius: 4px;
}
section#book div.container div.book-content div.book-partners-container ul.book-partners-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* スクロールバーのつまみ */
    border-radius: 4px;
}
section#book div.container div.book-content div.book-partners-container ul.book-partners-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* 各アイテムの幅（PCでは2枚ずつ表示） */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    flex: 0 0 calc(50% - 15px); /* 50%幅からgap(30px)の半分を引く */
    min-width: 0; 
    scroll-snap-align: start; /* 左端にピタッと合わせる */
}

/* リンクボタン・バナー全体のデザイン（a.book-partner-link から div.book-partner-card に変更） */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 35px 25px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ホバー時のインタラクション */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card:hover,
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card:focus {
    background-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* アイコン・画像ラッパーの調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-icon-wrapper {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* 画像のレスポンシブ対応 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-icon-wrapper img.book-partner-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* パートナー名の調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card span.book-partner-name {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #111111 !important;
}

/* --- 説明文のスタイル設定 --- */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description {
    width: 100%;
    text-align: left;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* ボタンを下揃えにするためのFlexbox設定 */
}

/* 段落（p）とリスト（li）の白飛び対策と左揃え強制 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description p,
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description ul li {
    color: #333333 !important;
    text-align: left !important;
}

/* リストの黒丸（・）の白飛び対策 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description ul {
    color: #333333 !important;
}

/* 段落のマージン調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description p {
    margin: 0 0 12px 0;
}

/* 最後の段落は下余白をなくす */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description p:last-child {
    margin-bottom: 0;
}

/* リスト（箇条書き）のスタイル */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
    list-style-type: disc;
}

section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-description ul li {
    margin-bottom: 6px;
}

/* リンクホバー時の文字色も念のため固定 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card:hover span.book-partner-name,
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card:hover div.book-partner-description p,
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card:hover div.book-partner-description ul li {
    color: #111111 !important;
}

/* ==========================================================================
   Responsive Styles (Mobile & Tablet)
   ========================================================================== */

/* タブレット・スマートフォン向け（ブレイクポイント: 768px以下） */
@media screen and (max-width: 768px) {
    /* モバイル時のリスト調整 */
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        gap: 15px; /* スマホではカード間の隙間を少し狭くする */
        padding-bottom: 25px; /* スクロールバーの余白 */
    }

    /* スマホでは1画面に1枚（85%幅にして「次のカードの端」を見せることでスワイプを促す） */
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85%;
        scroll-snap-align: center; /* スマホでは画面の中央にピタッと合わせる */
    }

    /* モバイル環境では、カード内要素は縦に長く読ませるため一列配置（column）を維持 */
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card {
        flex-direction: column;
        align-items: center;
        padding: 25px 20px;
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card div.book-partner-icon-wrapper {
        width: 120px;
        height: 60px;
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* モバイル時のパートナー名 */
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item div.book-partner-card span.book-partner-name {
        text-align: center;
        font-size: 17px;
        margin-bottom: 15px;
    }
}


/* ==========================================================================
   About Section - Padding Adjustment
   ========================================================================== */

/* PC表示時の下部余白を120pxから60pxに縮小 */
section.section.about {
    padding-bottom: 40px !important;
}

/* モバイル環境（スマホ・タブレット）での表示オプション */
@media screen and (max-width: 768px) {
    section.section.about {
        /* モバイル時にさらに余白を詰めたい場合はここで数値を調整してください */
        padding-bottom: 40px !important; 
    }
}


/* ==========================================================================
   Experience Section - Top Spacing Adjustment (High Specificity)
   ========================================================================== */

/* EXPERIENCEセクション（#experience）の上部余白を小さくする */
section#experience.section.experience {
    /* 元々120px程度設定されていると仮定し、半分程度（60px）に縮小 */
    padding-top: 60px !important;
}

/* モバイル環境（ブレイクポイント: 768px以下）での調整 */
@media screen and (max-width: 768px) {
    section#experience.section.experience {
        /* モバイルではさらに小さく（例えば40px）設定して、コンテンツの密度を高める */
        padding-top: 40px !important;
    }
}


/* ==========================================================================
   Experience Section - Intro Notes Styles
   ========================================================================== */

.experience-intro-notes {
    /* 読者の視線移動が広くなりすぎないよう、最大幅を制限して中央に配置 */
    max-width: 760px;
    margin: 30px auto 50px auto; 
    text-align: left; /* 長文と箇条書きの可読性を高めるための左揃え */
    color: #555555; /* 真っ黒ではなく、少し柔らかいダークグレー */
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

.experience-intro-notes p {
    margin: 0 0 15px 0;
}

/* Notes: のタイトル部分 */
.experience-intro-notes .notes-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333333;
}

/* 箇条書きリストの装飾 */
.experience-intro-notes .notes-list {
    list-style-type: disc;
    margin: 0 0 20px 25px; /* 左側にインデントを設ける */
    padding: 0;
}

.experience-intro-notes .notes-list li {
    margin-bottom: 6px;
}

/* 最後の段落の下余白をリセット */
.experience-intro-notes p:last-child {
    margin-bottom: 0;
}

/* モバイル向け（スマートフォン）のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .experience-intro-notes {
        margin: 25px 20px 40px 20px; /* 画面端に文字がくっつかないよう左右に余白 */
        font-size: 14px;
    }
    
    .experience-intro-notes .notes-list {
        margin-left: 20px;
    }
}


/* リンク部分の下線とホバーアクション */
.experience-intro-notes p a {
    text-decoration: underline;
    text-underline-offset: 3px; /* 下線を文字から少し離して読みやすくします */
    color: inherit; /* 文字色は周りのテキスト（#555555）に合わせる */
    transition: opacity 0.3s ease;
}

/* マウスホバー時（カーソルを合わせた時）の動き */
.experience-intro-notes p a:hover {
    opacity: 0.6; /* 少し薄くしてクリックできることを直感的に伝えます */
}

/* ==========================================================================
   Book Section - Support Description
   ========================================================================== */

.book-support-description {
    font-size: 20px; /* 見出しより一回り小さいサイズ */
    font-weight: normal;
    line-height: 1.6; /* 長文が読みやすい行間 */
    margin-top: 15px; /* H2見出しとの間の余白 */
    letter-spacing: 0.03em;
}

/* モバイル向け（スマートフォン）のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .book-support-description {
        font-size: 14px; /* スマホではさらに少し小さく */
        margin-top: 12px;
        padding: 0 15px; /* 画面端に文字がくっつかないようにする */
    }
}

/* ==========================================================================
   Modal Section - Button Group Styles
   ========================================================================== */

/* ボタンを縦に並べるコンテナ */
.modal-button-group {
    display: flex;
    flex-direction: column;
    gap: 15px; /* ボタン同士の隙間 */
    margin-top: 30px; /* 上の説明文との隙間 */
    width: 100%;
}

/* ボタンの共通ベーススタイル */
.btn-modal-action {
    display: block;
    width: 100%;
    padding: 16px 20px;
    text-align: center;
    text-decoration: none;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
}

/* --- 1. Online booking (プライマリボタン - 黒背景) --- */
.btn-modal-action.btn-online {
    background-color: #222222;
    color: #ffffff;
    border: 1px solid #222222;
}

.btn-modal-action.btn-online:hover {
    background-color: #444444; /* ホバー時は少し明るいグレーに */
    border-color: #444444;
    color: #ffffff;
}

/* --- 2. Consult with an official agent (セカンダリボタン - 白背景・黒枠) --- */
.btn-modal-action.btn-agent {
    background-color: transparent;
    color: #222222;
    border: 1px solid #222222;
}

.btn-modal-action.btn-agent:hover {
    background-color: #222222; /* ホバー時は黒く反転 */
    color: #ffffff;
}


/* ==========================================================================
   About Intro Section - Top Spacing Adjustment
   ========================================================================== */

/* ABOUTセクション（#about）の上部余白を縮小する */
section#about.section.about-intro {
    /* 既存の余白から半分程度（60px）に縮小。好みに合わせて数値を調整してください */
    padding-top: 60px !important; 
    /* 下部の内側余白（緑色の領域）を縮小します */
    padding-bottom: 60px !important; 
}

/* モバイル環境（タブレット・スマートフォン）での表示調整 */
@media screen and (max-width: 768px) {
    section#about.section.about-intro {
        /* モバイルではさらに余白を詰めて、画面の密度を高める */
        padding-top: 40px !important; 
        padding-bottom: 40px !important; 
    }
}


/* h2に変更したことで発生するデフォルトスタイルをリセットし、元のspanと同じ挙動を保つ */
h2.section-label {
    margin: 0;
    font-weight: normal; /* 既存の.section-labelで指定されていれば不要です */
}



/* ==========================================================================
   H2 Title - Alignment and Line Height Adjustment
   ========================================================================== */

/* 対象のh2要素（必要に応じてクラス名を変更してください） */
h2.about-block-title {
    text-align: center !important; /* 中央揃え（センタリング） */
    line-height: 1.3 !important;   /* 行間を詰める（通常1.6〜2.0程度のところを1.3に縮小） */
}

/* もし「ABOUT」の見出し（.about-intro-title）等も同様に調整する場合は以下のようにまとめます */
h2.about-intro-title,
h2.about-block-title {
    text-align: center !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   Partner Cards - Contact Button
   ========================================================================== */

/* ボタンを中央に配置し、上のテキストとの余白を作る */
.card-action {
    margin-top: auto; /* autoに変更することで最下部に押し下げられます */
    padding-top: 40px; /* ここでテキストとの最低限の余白を確保 */
    text-align: center;
}

/* ボタン本体のデザイン */
.btn-partner-contact {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #333333; /* 細いダークグレーの枠線 */
    background-color: transparent;
    color: #333333;
    font-family: "Cormorant Garamond", "Noto Serif JP", serif; /* サイトのセリフ体に合わせる */
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase; /* すべて大文字に変換 */
    text-decoration: none;
    transition: all 0.3s ease; /* ふわっと色が変わるアニメーション */
}

/* マウスホバー時のデザイン（背景を暗く、文字を白に） */
.btn-partner-contact:hover {
    background-color: #333333;
    color: #ffffff;
}


/* PCなどの基本スタイル */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* PCでは左右に20pxの余白 */
}

/* スマホ用のスタイル */
@media screen and (max-width: 768px) {
  .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  /* カード自体の角丸やマージンも調整が必要な場合 */
  .card {
    border-radius: 0; /* 画面幅いっぱいにするなら角丸を無くすことが多いです */
    margin-left: 0;
    margin-right: 0;
  }
}



/* PC表示用のスタイル */
@media screen and (min-width: 769px) {
  /* 親コンテナの横幅制限と余白を解除 */
  .container-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Flexboxで2要素を隙間なく配置 */
  .card-container {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0; /* カード間の隙間をなくす */
  }

  /* 各カードの幅を50%に固定 */
  .card {
    flex: 1; /* または width: 50%; */
    box-sizing: border-box;
    border-radius: 0; /* 端まで広げるため角丸を無効化 */
    /* テキストが端に付きすぎないよう、内側のみ余白を設定 */
    padding: 40px; 
  }
}


/* PC表示で2要素制限を解除し、画面幅に応じて並べる設定 */
@media screen and (min-width: 769px) {
  section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: wrap !important; /* 2つで制限せず、折り返しを許可 */
    overflow-x: visible !important; /* スクロールを解除 */
    scroll-snap-type: none !important; /* スナップを解除 */
  }

  section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    /* 4つ並べたい場合は 25% 、3つなら 33.33% に変更 */
    flex: 0 0 25% !important; 
    max-width: 25% !important;
    scroll-snap-align: none !important;
  }
}


/* ==========================================================================
   Book Section - Optimized Layout
   ========================================================================== */

/* 1. コンテナの制限解除 (全幅対応) */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto;
    padding: 0; /* 左右の余白をなくす */
    box-sizing: border-box;
}

/* 2. リスト本体 (PC/モバイル共通のベース) */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 3. PC表示設定 (min-width: 769px) */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        flex-wrap: wrap !important;
        gap: 0 !important; /* 隙間なし */
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 25% !important; /* 4カラム並び */
        max-width: 25% !important;
        overflow-x: visible !important;
    }
}

/* 4. モバイル表示設定 (max-width: 768px) */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container {
        padding: 0 15px !important; /* スマホのみ左右に余白を復活 */
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important;
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
    }
}

/* 5. カード自体のリセット (重要：ここが崩れの原因) */
section#book .book-partner-card {
    height: 100% !important;
    border-radius: 0 !important; /* PC全幅時は角丸をなくす */
    box-sizing: border-box;
}


/* ==========================================================================
   パートナーリスト：レスポンシブ・カルーセル対応
   ========================================================================== */

/* 親コンテナの全幅設定 */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* リスト全体のスタイル */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 1. 【PC表示】769px以上の時：4枚並びにする */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 25% !important; /* 4つ並び */
        max-width: 25% !important;
    }
}

/* 2. 【モバイル表示】768px以下の時：横スクロール（カルーセル）にする */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        flex-wrap: nowrap !important; /* 折り返しを禁止 */
        overflow-x: auto !important;   /* 横スクロールを許可 */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; /* スクロール時の吸着 */
        padding-bottom: 20px !important;
        padding-left: 15px !important; /* 画面端の余白 */
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-item {
        flex: 0 0 85% !important;      /* カード幅を画面の85%に設定 */
        max-width: 85% !important;
        scroll-snap-align: center;      /* 中央に吸着 */
        margin-right: 15px !important;  /* カード間の隙間 */
    }
}


/* パートナーリストのカード間隔を調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important; /* PCでも必要に応じて調整 */
    gap: 30px !important; /* カード間の隙間を30pxに設定 */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 各カードのスタイル調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    flex: 0 0 calc(25% - 22.5px) !important; /* 4つ並びで隙間を考慮した幅 */
    min-width: 280px; /* カードが小さくなりすぎないよう最小幅を指定 */
    box-sizing: border-box !important;
}

/* モバイル（スマホ）環境での余白調整 */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        gap: 20px !important; /* スマホでは少し狭く */
        padding: 0 20px !important; /* 両端に余白を追加して画面端にくっつくのを防ぐ */
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important; /* スライドしやすく幅を確保 */
    }
}


/* 1. パートナーリストの親コンテナ：全幅表示を強制 */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 0 !important;
    overflow: hidden; /* はみ出しを制御 */
}

/* 2. リスト本体：PCとモバイルで切り替え */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --- PC表示設定 (769px以上) --- */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        flex-wrap: wrap !important;
        justify-content: center; /* 中央に寄せる */
        gap: 30px !important;    /* カード間の隙間 */
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 calc(25% - 30px) !important; /* 4列並び */
        max-width: 300px !important;            /* カードの最大幅を制限 */
    }
}

/* --- モバイル表示設定 (768px以下) --- */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 30px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important;   /* 画面の85%幅 */
        margin-right: 20px !important;
        scroll-snap-align: center;  /* スワイプ時に中央で止まる */
    }
}

/* 3. カード内のレイアウト調整 */
section#book .book-partner-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   Book Section - PC & Mobile Slider Layout
   ========================================================================== */

/* 1. コンテナの制限解除とスライダー用設定 */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 0 20px !important;
    overflow: hidden !important; /* はみ出しを隠す */
}

/* 2. リスト本体：常にスライダーとして動作 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important; /* 改行させない */
    overflow-x: auto !important;  /* 横スクロールを許可 */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 30px 0 !important; /* スクロールバー余白 */
    gap: 30px !important;
}

/* 3. カードの幅調整：PCとモバイルで表示枚数を変える */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
}

/* 【PC表示】769px以上：1画面に3枚〜3.5枚ほど見せる設定 */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 calc(33.33% - 20px) !important; /* 1画面に約3枚 */
    }
}

/* 【モバイル表示】768px以下：1画面に1枚強見せる設定 */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important; /* 1画面に1枚強 */
    }
}

/* 4. カードの均一化 */
section#book .book-partner-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   Book Section - Slider Layout (Fixed Cut-off Issue)
   ========================================================================== */

/* 1. コンテナの制限解除：左右に少しだけ余白を持たせ、スライダーが画面端に張り付かないようにする */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 0 20px !important; /* コンテナ自体に左右の余白を付与 */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 2. リスト本体：スライダーの基盤 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 30px 0 !important; /* スクロールバー用の下部余白 */
    gap: 20px !important; /* カード同士の隙間を明確に定義 */
}

/* 3. カードの幅指定：途切れないための計算 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
}

/* 【PC表示】769px以上：1画面に3枚並ぶように調整 */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        /* gap分を考慮して幅を計算 */
        flex: 0 0 calc(33.33% - 14px) !important; 
    }
}

/* 【モバイル表示】768px以下：1画面に1枚強並ぶように調整 */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important;
    }
}

/* 4. カードの均一化 */
section#book .book-partner-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}



/* ==========================================================================
   Book Section - Slider Layout (Fixed Left/Right Cut-off)
   ========================================================================== */

/* 1. コンテナの制限：左右にしっかり余白を確保 */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 0 20px !important; /* ★ここが重要：コンテナ全体に左右のパディングを追加 */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 2. リスト本体：スライダーとしての挙動 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 30px 0 !important;
    gap: 20px !important; /* カード間の隙間 */
}

/* 3. 各カードの幅調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    flex: 0 0 85% !important; /* スマホ用：画面の85%幅 */
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
}

/* 【PC表示】769px以上：3枚ずつ表示 */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 calc(33.33% - 20px) !important; /* 3枚並び（隙間を考慮） */
    }
}



/* 1. コンテナ：左右のパディングを0にする */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 0 !important; /* 左右パディングを削除 */
    overflow: hidden !important;
}

/* 2. リスト本体：スライダーとしての挙動 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 30px 0 !important;
    gap: 20px !important;
}

/* 3. 重要：最初の要素にだけ左側のマージン（コンテナの余白分）を持たせる */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item:first-child {
    margin-left: 20px !important; /* ここで左端の余白を制御 */
}

/* 4. 各カードの幅調整 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
}

/* 【PC表示】769px以上：3枚ずつ表示 */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 calc(33.33% - 20px) !important;
    }
}

/* 【モバイル表示】768px以下：1枚強表示 */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important;
    }
}



/* ==========================================================================
   Book Section - Final Optimized Slider Layout
   ========================================================================== */

/* 1. コンテナ：左右の余白をリセットし、親の幅を有効活用 */
section#book div.container div.book-content div.book-partners-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. リスト本体：スライダーの共通基盤 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 30px 20px !important; /* 左側に20pxの開始余白 */
    gap: 20px !important;
}

/* 3. 各カードの共通設定 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    /* カード自体の角丸や背景は前述の .book-partner-card に依存 */
}

/* 4. 【PC表示】769px以上：3枚並び */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        padding-left: 0 !important; /* PCでは左詰めにする場合 */
        justify-content: center !important; /* 中央寄せしたい場合 */
    }
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 calc(33.33% - 20px) !important;
    }
}

/* 5. 【モバイル表示】768px以下：1枚強表示 */
@media screen and (max-width: 768px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list li.book-partners-item {
        flex: 0 0 85% !important;
    }
}


/* ==========================================================================
   修正: 全体の余白崩れを解消（bookセクション以外を保護）
   ========================================================================== */

/* 1. 先に設定してしまった「containerの強制padding:0」を解除 */
section:not(#book) .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 2. bookセクション内のコンテナのみ、スライダーのために余白を0にする */
section#book .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. 念のため、他の要素が画面端にくっつかないよう共通の調整 */
@media screen and (max-width: 768px) {
    /* section#book 以外のセクションの共通余白を確保 */
    section:not(#book) .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ==========================================================================
   Book Section - Slider Layout (左側の余白修正)
   ========================================================================== */

/* 1. リスト全体の左側にパディングを確保する */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    margin: 0 !important;
    
    /* 重要：左側に20pxのパディングを設定し、カードが端にくっつかないようにする */
    padding: 0 0 30px 20px !important; 
    
    gap: 20px !important;
}

/* 2. もしPC表示で中央寄せをしている場合は、PC時のみパディングを0に戻す */
@media screen and (min-width: 769px) {
    section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
        padding-left: 0 !important; /* PCでは中央寄せなどのため0にする */
    }
}

/* 1. 親要素（リスト全体）にスナップ用のパディングを追加 */
section#book div.container div.book-content div.book-partners-container ul.book-partners-list {
    /* 既存の設定に加えて、以下を追記・修正 */
    scroll-padding-left: 20px !important; /* ←これが吸い付き位置を調整します */
    
    /* リストそのものにも余白を持たせる */
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 2. もしリストアイテム（カード）にmargin-leftがある場合 */
section#book div.container div.book-partners-list li {
    scroll-snap-align: start;
    /* カード間の隙間が必要な場合はmargin-rightで調整 */
    margin-right: 20px; 
}


/* フッター内のコンテナだけは余白を元に戻す */
footer .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* フッター内の各コンテンツに少し余白を持たせたい場合（お好みで） */
.footer-content {
    margin-bottom: 20px;
}


/* ゴールド系デザイン、左寄せの適用 */
.section-label {
    text-align: left !important;    /* 配置：左寄せ */
    color: #c5a059 !important;      /* フォントカラー：落ち着いたゴールド */
    font-size: 2rem;                /* 必要に応じてサイズ調整 */
    font-weight: 600;               /* 少し太めに設定 */
    letter-spacing: 0.05em;         /* 文字間を少し開ける */
    margin-bottom: 20px;
    margin-top: 0;
}

/* もし左寄せした際に、他の要素とのバランスを調整したい場合 */
.section-header-light, .about-intro-content {
    text-align: left;
}

.section-header-light {
    /* 橙色の領域を制御しているのはこの値です */
    padding-bottom: 0px; /* 例: ここを 0px 〜 10px に減らす */
    margin-bottom: 0px;  /* 例: ここを 0px 〜 10px に減らす */
}



/* 1. experience-intro-notes 全体に about-text-col と同じフォント設定を適用 */
.experience-intro-notes {
    font-size: 1rem;      /* about-text-col と同じフォントサイズ */
    line-height: 1.6;     /* 読みやすい行間 */
    color: #333;          /* テキストカラー（必要に応じて元の about-text-col の色に合わせてください） */
    margin-bottom: 20px;
}

/* 2. リスト部分のデザインを整える */
.experience-intro-notes .notes-list {
    list-style-type: disc; /* リストの点 */
    margin-left: 20px;     /* 左側の余白 */
    padding: 0;
}

.experience-intro-notes .notes-list li {
    margin-bottom: 10px;   /* リスト項目間の隙間 */
}

/* 3. Notes: タイトルを目立たせる（about-text-col に準拠） */
.experience-intro-notes .notes-title {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
}

/* 4. リンク部分の装飾 */
.experience-intro-notes a {
    color: #c5a059;        /* 先ほど指定したゴールド系 */
    text-decoration: underline;
}

/* リスト自体の左パディングをリセット（または縮小） */
.experience-intro-notes .notes-list {
    padding-left: 0px !important; /* 0にすると文字とリストの点が重なるため、15px程度を推奨 */
    margin-left: 0 !important;
}

/* もし全体を少し右に寄せたい場合は、親要素にpaddingを追加 */
.experience-intro-notes {
    padding-left: 0 !important; /* 必要に応じて調整 */
}

/* experienceセクション内のテキストを黒にする */
#experience .about-text-col p {
    color: #000000 !important;
}

/* experienceセクション内のリンクに下線を追加 */
#experience .about-text-col a {
    text-decoration: underline !important;
    color: #c5a059; /* 必要であれば、以前設定したゴールド系に合わせる */
}


/* experienceセクション内のテキストエリアの下部に余白を追加 */
#experience .about-text-col {
    margin-bottom: 60px !important; /* お好みの数値（例: 40px〜80px）に変更してください */
}

/* サイトの各セクションのコンテンツに一括で左余白を設定 */
.section .container, 
#experience .container, 
#book .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box; /* パディングが幅に含まれるように設定 */
}

/* もし見出し（h2）だけをさらに微調整したい場合 */
.section-label {
    margin-left: 0 !important; /* コンテナのパディングで調整するため、marginはリセット */
}


/* For travelers... の見出しだけに左余白を強制適用 */
#book .section-header.section-header-light h2.book-title {
    padding-left: 20px !important; /* 左余白を20px確保 */
    margin-left: 0 !important;
    text-align: left !important;   /* 左寄せを維持 */
}

/* ついでにその下の説明文も揃える場合 */
#book .book-support-description {
    padding-left: 20px !important;
}


/* Inquiries のメールアドレスリンクにだけ下線を表示 */
#book .book-support-description a[href^="mailto:"] {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}


/* Inquiries のコンタクトフォームリンクにだけ下線を表示 */
#book .book-support-description a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}