/* 記事下・カテゴリ下リンクのデザイン */
.asami-bottom-link {
    text-align: right;    /* 右寄せ */
    margin-top: 30px;     /* 上の余白 */
    margin-bottom: 10px;  /* 下の余白 */
    font-weight: bold;    /* 太字 */
    font-size: 0.95em;    /* 少し小さめ */
}

.asami-bottom-link a {
    color: #03C;          /* リンク色（サイトのメインカラーに合わせる） */
    text-decoration: underline;
}

.asami-bottom-link a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* カテゴリページで説明文の下に余白を作る */
.category-back-link {
    margin-top: 40px;
}

/* --------------------------------------------------
   移動したプロフィールのデザイン調整（修正版）
-------------------------------------------------- */

/* ① プロフィール枠全体のデザイン */
.profile.u-all_show {
    margin: 40px 0 50px 0 !important; /* 上下の余白 */
    padding: 25px !important;         /* 枠内の余白 */
    background-color: #f7f7f7 !important; /* 薄いグレーの背景 */
    border: 1px solid #ddd !important;    /* 薄い枠線 */
    border-radius: 8px !important;        /* 角を丸く */
    box-sizing: border-box;
    box-shadow: none !important; /* 新しい見出しCSSの影を消す */
}

/* ② 見出し「この記事を書いた人」の強制リセットと整形 */
/* .main_content などの影響を受けないように詳細度を上げて指定 */
.profile.u-all_show h2.heading,
.profile.u-all_show .heading {
    /* ステッチデザインなどを完全に打ち消す */
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important; /* シンプルな下線のみ */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 20px 0 !important;
    
    /* 文字の見た目を整える */
    color: #333 !important;
    font-size: 18px !important;
    text-align: center !important; /* 中央寄せ */
}

/* 見出しアイコンやステッチ飾りを消す */
.profile.u-all_show h2.heading::before,
.profile.u-all_show h2.heading::after,
.profile.u-all_show .heading::before,
.profile.u-all_show .heading::after {
    display: none !important;
    content: none !important;
}

/* 英語のサブタイトル (Wrote this article) の調整 */
.profile.u-all_show .heading .heading__title {
    display: block;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    margin-top: 5px;
}

/* ③ プロフィール内部（画像とテキスト）の調整 */
.profile__wrapper {
    background: transparent !important; /* 背景透明化 */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ④ SNSボタン周りの余白調整 */
.profile.u-all_show .sns_list {
    margin-top: 15px !important;
}

/* プロフィール本文の文字サイズ調整 */
.profile.u-all_show .phrase,
.profile.u-all_show p {
    font-size: 14px !important;  
    line-height: 1.8 !important; /* 行間（読みやすさ）の調整 */
}

/* 写真を丸くする（PC・スマホ共通） */
/* 画像の枠と画像自体の両方を丸くします */
.profile.u-all_show .profile__img,
.profile.u-all_show .profile__img img {
    border-radius: 50% !important;
    overflow: hidden !important; /* はみ出し防止 */
}

/* スマホ表示の微調整（Flexboxによる強力センター寄せ） */
@media (max-width: 767px) {
    /* ① 枠全体の余白 */
    .profile.u-all_show {
        padding: 20px 15px !important;
    }

    /* ② ラッパーをFlexbox化して「縦並び・中央揃え」にする */
    .profile.u-all_show .profile__wrapper {
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        align-items: center !important;    /* 左右中央揃え（これが重要） */
        width: 100% !important;
    }

    /* ③ 各アイテム（画像エリア・テキストエリア）の幅を100%にしてリセット */
    .profile.u-all_show .profile__item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        float: none !important; /* フロート解除 */
    }

    /* ④ 画像エリアの設定 */
    .profile.u-all_show .profile__item-is-img {
        text-align: center !important;   /* 中身を中央寄せ */
        margin-bottom: 20px !important;
    }

    /* ⑤ 画像の箱（.profile__img）の強制リセット */
    .profile.u-all_show .profile__img {
        display: inline-block !important; /* インラインブロックにしてtext-alignを効かせる */
        float: none !important;           /* 左寄せ解除 */
        margin: 0 auto !important;        /* 念のためマージンオート */
        width: 120px !important;           /* 固定幅 */
    }
    
    /* ⑥ 画像本体 */
    .profile.u-all_show .profile__img img {
        margin: 0 auto !important;
        display: block !important;
    }
}

/* --------------------------------------------------
   SNSアイコンの位置ズレ修正
-------------------------------------------------- */
.profile.u-all_show .sns_list__link {
    display: flex !important;           /* フレックスボックスを使って配置制御 */
    align-items: center !important;     /* 縦方向のど真ん中にする */
    justify-content: center !important; /* 横方向のど真ん中にする */
    padding: 0 !important;              /* ズレの原因になる余白を消す */
    text-decoration: none !important;   /* 下線が出ないようにする */
}

/* アイコン自体（フォント）の微調整 */
.profile.u-all_show .sns_list__link::before {
    margin: 0 !important;               /* アイコン周りの余白をゼロに */
    line-height: 1 !important;          /* 行間によるズレをなくす */
    display: block !important;          /* ブロック要素として扱う */
    width: auto !important;             /* 幅を自動調整 */
    height: auto !important;            /* 高さを自動調整 */
}

/* --------------------------------------------------
   リンク色の変更（範囲指定版）
   -------------------------------------------------- */

.main_content a {
    color: #03c;
}

/* ホバー時の設定 */
.main_content a:hover {
    color: #03c;
    opacity: 0.7;
    text-decoration: underline; /* リンクだとわかりやすく下線をつける（お好みで） */
}

/* もし「ボタン」のデザインまで青くなってしまうのを防ぐ場合 */
.main_content .btn a,
.main_content .btn-is-preset1 a {
    color: inherit; /* ボタンの色設定を優先する */
}

/* ==================================================
   ヘッダー「ご予約」ボタンにカレンダーアイコン（画像版）を追加
   ================================================== */

/* 1. 既存のアイコンを消す */
.panel_link-is-primary .panel_link__link::before,
.panel_link-is-primary .panel_link__link i {
    display: none !important;
    content: none !important;
}

/* 2. ボタン内の文字位置を整える（Flexboxで中央寄せ） */
.panel_link-is-primary .panel_link__link span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

/* 3. カレンダーアイコンを表示 */
.panel_link-is-primary .panel_link__link span::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;    /* アイコンの幅 */
    height: 22px !important;   /* アイコンの高さ */
    margin-right: 8px !important; /* 文字との間隔 */
    margin-bottom: 2px !important; /* 高さの微調整 */
    
    /* カレンダーのアイコン画像（白） */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* ====================================
   記事タイトル（H1）のデザイン
   ==================================== */

/* --- タイトル文字 --- */
.l-main .keyvisual .heading {
    /* フォントと色 */
    font-family: "Shippori Mincho", "Noto Serif JP", serif !important; /* 明朝体 */
    color: #544848 !important;            /* ココアグレー */
    
    font-size: 2.5rem !important;         /* 文字の大きさ（PC） */
    font-weight: 600 !important;          /* 太すぎない上品な太さ */
    line-height: 1.5 !important;          /* 行間をゆったり */
    
    /* 装飾：下線 */
    border-bottom: 3px solid #CD8585 !important; /* メインカラーの太線 */
    
    /* 余白調整 */
    padding-bottom: 0.5em !important;     /* 文字と線の隙間 */
    margin-bottom: 0.5em !important;      /* 下の要素との隙間 */
    
    /* 元のテーマのリセット */
    background: none !important;
    text-shadow: none !important;
}

/* --- スマホでの見え方調整 --- */
@media (max-width: 768px) {
    .l-main .keyvisual .heading {
        font-size: 1.8rem !important;     /* スマホでは少し小さく */
        line-height: 1.4 !important;
        border-bottom-width: 2px !important; /* 線も少し細く */
    }
}

/* ====================================
   見出しデザイン修正
   ==================================== */

/* --- まず元のデザインを強制リセット --- */
.l-main .main_content h2,
.l-main .main_content h3,
.l-main .main_content h4 {
    background: none !important;      /* 背景を消す */
    border: none !important;          /* 線を消す */
    border-radius: 0 !important;      /* 角丸を消す */
    box-shadow: none !important;      /* 影を消す */
    padding: 0 !important;            /* 余白を消す */
    margin: 0 !important;             /* 余白を消す */
    position: relative !important;    /* 位置情報の基準 */
}

/* 擬似要素（元のアイコンや装飾）も完全に消す */
.l-main .main_content h2::before, .l-main .main_content h2::after,
.l-main .main_content h3::before, .l-main .main_content h3::after,
.l-main .main_content h4::before, .l-main .main_content h4::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

/* --- ここから新しいデザインを適用 --- */

/* H2：メインカラーの帯（背景塗りつぶし） */
.l-main .main_content h2 {
    background-color: #CD8585 !important;  /* ダスティローズ */
    color: #ffffff !important;             /* 白文字 */
    padding: 1.2em 1.5em !important;       /* ゆったりした余白 */
    margin-top: 3.5em !important;          /* 上の余白 */
    margin-bottom: 1.5em !important;       /* 下の余白 */
    border-radius: 3px !important;         /* 少しだけ角丸 */
    font-family: "Shippori Mincho", "Noto Serif JP", serif !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05) !important; /* うっすら影 */
}

/* H3：左線 ＋ 薄ピンク背景 */
.l-main .main_content h3 {
    background-color: #F9F4F4 !important;  /* 薄いスノーピンク */
    border-left: 6px solid #CD8585 !important; /* 左の太線 */
    color: #544848 !important;             /* ココアグレー */
    padding: 1em 1.2em !important;         /* 内側の余白 */
    margin-top: 2.5em !important;
    margin-bottom: 1.2em !important;
    font-family: "Shippori Mincho", "Noto Serif JP", serif !important;
}

/* H4：点線下線 ＋ ゴールドアイコン */
.l-main .main_content h4 {
    color: #544848 !important;             /* ココアグレー */
    border-bottom: 2px dashed #CD8585 !important; /* ピンクの点線 */
    padding: 0.5em 0.5em 0.5em 1.6em !important; /* 左にアイコン分のスペース */
    margin-top: 2em !important;
    margin-bottom: 1em !important;
    font-family: "Shippori Mincho", "Noto Serif JP", serif !important;
}

/* H4の左アイコン（菱形）を再定義 */
.l-main .main_content h4::before {
    content: '' !important;
    display: block !important;       /* 強制的に表示 */
    position: absolute !important;
    left: 0.3em !important;          /* 左端からの位置 */
    top: 50% !important;             /* 上下中央 */
    transform: translateY(-50%) rotate(45deg) !important; /* 菱形にする */
    width: 8px !important;
    height: 8px !important;
    background-color: #C6A87C !important; /* ゴールド */
}

/* ====================================
   【強制適用版】テーブル（表）デザイン
   ==================================== */

/* --- テーブル全体の枠組み --- */
.l-main .main_content table {
    width: 100% !important;
    border-collapse: collapse !important; /* 枠線を重ねる */
    border: 1px solid #CD8585 !important; /* 外枠はメインカラー */
    border-radius: 4px !important; /* 角を少し丸く */
    overflow: hidden !important;   /* 丸みを適用 */
    margin: 2em 0 !important;      /* 上下の余白 */
    font-size: 0.95em !important;  /* 文字を少しだけ小さくしてスッキリ */
}

/* --- 見出しセル（TH） --- */
/* H2と同じく、ダスティローズ背景×白文字で強調 */
.l-main .main_content table th {
    background-color: #CD8585 !important; /* メインカラー */
    color: #ffffff !important;            /* 白文字 */
    padding: 1em !important;              /* ゆったりした余白 */
    font-weight: normal !important;       /* 太字にしすぎない（上品さ） */
    border: 1px solid #ffffff !important; 
    border-bottom: 2px solid #ffffff !important;
    text-align: center !important;        /* 中央揃え */
    vertical-align: middle !important;    /* 上下中央 */
    font-family: "Shippori Mincho", "Noto Serif JP", serif !important; /* 明朝体 */
}

/* --- データセル（TD） --- */
/* 通常の行は白背景 */
.l-main .main_content table td {
    background-color: #ffffff !important;
    color: #544848 !important;            
    padding: 0.8em 1em !important;        
    border: 1px solid #eadddd !important; 
    vertical-align: middle !important;
}

/* --- 偶数行のデザイン（ストライプ） --- */
.l-main .main_content table tr:nth-child(even) td {
    background-color: #F9F4F4 !important; 
}

/* ====================================
   リスト
   ==================================== */

/* --- ベース設定 --- */
.l-main .main_content ul:not(.outline__list):not(.sns_list):not(.date_list) {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5em 0 1.5em 0.5em !important;
}

.l-main .main_content ul:not(.outline__list):not(.sns_list):not(.date_list) li {
    position: relative !important;
    padding-left: 1.8em !important; /* チェックマーク用に少し広めに */
    margin-bottom: 0.8em !important;
    line-height: 1.7 !important;
    color: #544848 !important;
}

/* --- チェックマーク --- */
.l-main .main_content ul:not(.outline__list):not(.sns_list):not(.date_list) li::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0.2em !important;
    top: 0.4em !important;
    width: 6px !important;
    height: 10px !important;
    border-right: 2px solid #CD8585 !important;  /* 線の太さと色 */
    border-bottom: 2px solid #CD8585 !important;
    transform: rotate(45deg) !important; /* 回転させてチェックの形に */
    background-color: transparent !important; /* 背景は透明 */
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ====================================
   サイト全体の文字間調整（カーニング）
   ==================================== */

/* ボディ全体（すべての文字）に適用 */
body {
    letter-spacing: 0.04em !important; /* 文字間を広げる */
    line-height: 1.8 !important;       /* 行間も少しゆったりさせる */
}

/* --- 見出し（H2, H3, H4）はさらに少し広げる --- */
/* タイトル周りはゆったりしている方が高級感が出るため */
h1, h2, h3, h4, h5, h6,
.l-main .main_content h2,
.l-main .main_content h3,
.l-main .main_content h4 {
    letter-spacing: 0.06em !important;
}

/* --- ボタンやメニューなどの短いテキスト --- */
/* 詰まって見えがちな箇所も広げる */
.btn, .global_navi, .breadcrumb {
    letter-spacing: 0.05em !important;
}

/* =========================================
   よくある質問（FAQ）
   ※アイコンを「完全な円」にする修正版
   ========================================= */

/* --- 1. 全体のリセット --- */
.l-main .main_content details.faq,
.l-main .main_content details.faq summary,
.l-main .main_content details.faq .faq__contents,
.l-main .main_content details.faq .faq__inner {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    text-indent: 0 !important;
    box-shadow: none !important;
}
.l-main .main_content details.faq summary::-webkit-details-marker { display: none !important; }
.l-main .main_content details.faq summary::before, 
.l-main .main_content details.faq summary::after { content: none !important; }


/* --- 2. Q（質問）のデザイン --- */
.l-main .main_content details.faq summary {
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important; 
    border: 1px solid #CD8585 !important; /* ピンクの枠線 */
    color: #544848 !important;            /* 文字はグレーで見やすく */
    
    padding: 1em 3em 1em 1.5em !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-bottom: 10px !important;       /* Aとの間隔を少し広げる */
    position: relative !important;
    list-style: none !important;
}

/* Qアイコン（ピンクの丸にする） */
.l-main .main_content details.faq summary::before {
    content: "Q" !important;
    display: flex !important;        /* inline-flexからflexに変更 */
    align-items: center !important;
    justify-content: center !important;
    
    flex-shrink: 0 !important;
    
    /* ▼修正：サイズを「絶対」に固定する設定 */
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;      /* 縮ませない */
    min-height: 30px !important;     /* 縮ませない */
    padding: 0 !important;           /* 変な余白を消す */
    margin-right: 1em !important;
    
    /* アイコン自体をピンクの丸にする */
    background-color: #CD8585 !important; 
    color: #ffffff !important;
    border-radius: 50% !important;   /* まん丸 */
    
    font-family: "Georgia", serif !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* Qのテキスト */
.l-main .main_content details.faq summary p,
.l-main .main_content details.faq summary span {
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: bold !important; 
}


/* --- 3. A（回答）のデザイン --- */
.l-main .main_content details.faq .faq__contents {
    display: flex !important;
    align-items: flex-start !important;
    
    background-color: #F9F4F4 !important; /* 背景：スノーピンク */
    border: 1px solid #efecec !important; /* 枠線は薄く */
    border-radius: 4px !important;
    padding: 1.5em !important;
    margin-bottom: 2em !important;
}

/* Aアイコン（ピンクの丸） */
.l-main .main_content details.faq .faq__contents::before {
    content: "A" !important;
    display: flex !important;        /* inline-flexからflexに変更 */
    align-items: center !important;
    justify-content: center !important;
    
    flex-shrink: 0 !important;
    
    /* ▼修正：サイズを「絶対」に固定する設定 */
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;      /* 縮ませない */
    min-height: 30px !important;     /* 縮ませない */
    padding: 0 !important;           /* 変な余白を消す */
    margin-right: 1.2em !important;
    margin-top: 0.2em !important;
    
    background-color: #CD8585 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    
    font-family: "Georgia", serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* Aのテキストボックス */
.l-main .main_content details.faq .faq__contents .faq__inner {
    flex: 1 !important;
    display: block !important;
    width: 100% !important;
}

/* Aのテキスト */
.l-main .main_content details.faq .faq__contents .faq__inner p {
    margin: 0 0 1em 0 !important;
    padding: 0 !important;
    color: #544848 !important;
    line-height: 1.8 !important;
}
.l-main .main_content details.faq .faq__contents .faq__inner p:last-child {
    margin-bottom: 0 !important;
}


/* --- 4. 開閉アイコン（＋/－） --- */
.l-main .main_content details.faq summary::after {
    content: "+" !important;
    position: absolute !important;
    right: 1em !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    
    font-size: 1.5em !important;
    font-weight: normal !important;
    line-height: 1 !important;
    color: #CD8585 !important; 
}

/* 開いている時はマイナス */
.l-main .main_content details.faq[open] summary::after {
    content: "−" !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}