/* リセットと基本設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #F8F5F4;
}

html {
    scroll-behavior: smooth;
    font-family: "Noto Sans JP", Meiryo, sans-serif;
    color: #334155;
    background-color: #F8F5F4;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}
a:hover {
    opacity: 0.8;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ユーティリティクラス */
.text-pink { color: #da91b3 !important; }
.text-center { text-align: center; }
.bg-light { background-color: F8F5F4; }
.bg-green { background-color: #6cbf73; color: F8F5F4; }
.mt-40 { margin-top: 40px; }
.mb-20 { margin-bottom: 20px; }

.section {
    padding: 80px 20px;
    max-width: 1000px;
    margin:0 auto;
    margin-bottom: 60px;
}

.section-title {
 font-size: 60px;
  color: #e582b0;
  text-align: left;
  font-weight: bold;
}

.section-subtitle {
  display: block;
  font-size: 24px;
  color: #333;

  font-weight: normal;
}


/* ボタン類 */

.btn-small {
    border: 1px solid #da91b3;
    color: #da91b3;
    padding: 8px 28px;
    border-radius: 40px;
    font-size: 16px;
    margin-left: 10px;
}

.btn-primary {
    display: inline-block;
    background-color: #da91b3;
    color: #F8F5F4;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 80px;
}

.btn-dark {
    display: inline-block;
    background-color: #3a4856;
    color: #F8F5F4;
    padding: 15px 60px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 18px;
}

.btn-outline-pink {
    display: inline-block;
    border: 2px solid #da91b3;
    color: #da91b3;
    padding: 15px 60px;
    border-radius: 30px;
    font-weight: bold;
    background-color:#F8F5F4;
}


/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 30px 70px;
  box-sizing: border-box; /* パディングによる幅の広がりを防ぐ */
}

.header__logo {
  line-height: 1;
   margin-right: 40px;
  

}

/* 元のロゴが黒文字の場合、CSSで白く反転させることができます（画像自体を白背景用に変える場合は不要です） */

/*--------------------------------
 グローバルナビ
---------------------------------*/
.gnav__list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  column-gap: 35px; /* 右側の画像に合わせて少し間隔を広げています */
  list-style: none; /* ドットを消去 */
  margin: 0;
  padding: 0;
}

.gnav__item {
  font-size: 20px; /* 文字サイズを少し大きく調整 */
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;  
}

/* 通常時のリンクの色を白に変更 */
.gnav__link {
  color: #334155; 
  text-decoration: none;
  transition: color 0.3s;
}

.gnav__link:hover {
  color: #da91b3; /* ホバー時のピンク */
}

/* アクティブ（ホーム）の時のピンク */
.gnav__link--active {
  color: #da91b3; 
}

/* LINEアイコン用のスタイル */
.gnav__item--line {
  margin-left: 10px; /* お問い合わせとLINEの間の余白を調整 */
}

.line-icon {
  width: 70px;  /* 画像のサイズに合わせて数値を調整してください */
  height: auto;
  display: block;
}

.btn-menu {
  display: none;
}

/* ヒーロー */
.hero {
    position: relative;
    height: 180px; 
    background-color: #F8F5F4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px; 
}

.hero-bg {
    background-image: url("works/works-header.png"); 
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-position: center 65%; 
    background-size: cover;
}


#works {
    max-width: 1100px;  
    margin: 0 auto;     
    padding: 60px 20px; 
}

.service-plan{
    border-bottom: 2px solid #DA91B3; 
    margin-bottom: 80px;         
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
   
}

.service-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.service-info {

  scroll-margin-top: 100px; 
  flex: 1;
  padding-right: 40px;
}
.service-num{
    font-size: 20px;
}
.service-header {
    display: flex;
    align-items: center;  /* 縦方向の中央揃え */
    flex-wrap: nowrap;    /* 折り返しなし */
    gap: 15px;            /* button間隔*/
    margin-bottom: 15px;
}

.service-header h3 {
    font-size: 40px;
    margin: 0;            
    white-space: nowrap;  /* タイトルが改行なし*/
}

.btn-small {
    border: 1px solid #da91b3;
    color: #da91b3;
    padding: 8px 24px;    /* 左右のパディングを少し調整 */
    border-radius: 40px;
    font-size: 16px;
    text-decoration: none;
    background: white;  
    white-space: nowrap;  
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* タグ全体のコンテナ（横並びにして、テキストとの間に余白を作る） */
.tags {
    display: flex;
    gap: 10px;          /* タグとタグの間のすき間 */
    margin-top: 25px;   /* 上の文章との間の余白 */
}

/* タグ単体のデザイン */
.tag {
    background-color: #da91b3; 
    color: #fff;     
    font-weight: bold;         /* 文字を太字に */
    padding: 6px 16px;         
    border-radius: 4px;       

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); 
    
    display: inline-block;
}
.circle-img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 丸型からはみ出た画像を切り取る設定を追加 */
    flex-shrink: 0;   /* 画面幅が狭まっても画像が小さく潰れないようにする */
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を保ったまま丸型にフィットさせます */
}

/* 業務フロー全体 */
.workflow {
    text-align: center;
    margin-bottom: 40px;
}

.workflow h4 {
    font-size: 24px;
    font-weight: bold;
    color: #2b3647; /* タイトルの色を少し濃くして引き締め */
    margin-bottom: 24px;
}

.flow-steps {
    display: flex;
    justify-content: space-between;
    gap: 0; /* 重なりをコントロールするため gap は 0 に */
    margin-bottom: 20px;
}

.step {
    flex: 1;
    position: relative;
    /* 左右の padding を均等にし、文字位置のバランスを調整 */
    padding: 30px 10px; 
    font-weight: bold;
    font-size: 18px; /* 文字サイズを少し大きく */
    color: #2b3647;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    /* 前後のステップと綺麗に噛み合わせるため、左側にネガティブマージンを設定（最初の要素以外） */
    margin-left: -15px; 
}

.step span {
    display: block;
    font-size: 18px;
    color: #2b3647;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    font-weight: normal;
}

.step p.step-ja {
    margin: 0;
    line-height: 1.4;
}

/* --- 矢印（リボン型）の背景と枠線設定 --- */
/* 全く同じ polygon を重ねることで、歪みのない綺麗な 4px の枠線（擬似的なborder）を作ります */
.step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #da91b3; /* 枠線の色（ピンク） */
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%);
    z-index: -2;
}

.step::after {
    content: "";
    position: absolute;
    /* 枠線の太さ（4px）分だけ内側に配置 */
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background: #Fff; /* 中の白い背景 */
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%);
    z-index: -1;
}

/* --- STEP1（最初）：左側を平らに＆マージンリセット --- */
.step:first-child {
    margin-left: 0;
    padding-left: 20px; /* 左側が平らになる分、少し左余白を持たせる */
}
.step:first-child::before {
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}
.step:first-child::after {
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}

/* --- STEP5（最後）：右側を平らに --- */
.step:last-child {
    padding-right: 20px; /* 右側が平らになる分、少し右余白を持たせる */
}
.step:last-child::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
}
.step:last-child::after {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
}

/* その他パーツ */
.flow-note {
    font-size: 20px;
    margin-bottom: 24px;
}

.divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}
/* Contact 導線ブロック */

.contact-methods {
    display: flex;
    gap: 24px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* 左右の各ブロックを包むコンテナ */
.contact-method-wrapper {
    flex: 1;                 /* 左右の幅を 1:1 で完全に均等にする */
    display: flex;
    flex-direction: column;
    align-items: center;     /* タイトルと白ボックスを中央寄せ */
}

/* 各タイトルのスタイリング（濃いネイビー、中央寄せ） */
.contact-method-wrapper h4 {
    color: #2b364a;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

/* 白背景のボックス */
.contact-box {
    width: 100%;
    height: 100%;      
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 35px 25px;      /* 上下と左右の余白を調整 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;     /* 中身の上下中央を揃える */
    justify-content: center; /* 中身の左右中央を揃える */
    box-sizing: border-box;
}

.box-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    justify-content: center; /* 中身を中央に寄せる */
}

/* アイコンサイズ固定 */
.icon-line, .icon-mail {
    width: 110px;
    height: 110px;
    flex-shrink: 0;          /* ボックスが縮んでもアイコンサイズをキープ */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-line img, .icon-mail img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* テキスト・ボタンエリア */
.box-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;     /* テキストやボタンを中央寄せにするトリガー */
    text-align: center;      /* テキスト自体を中央寄せ */
    max-width: 320px;        /* ボタンが広がりすぎないように制限 */
}

.box-text p {
    margin: 0 0 6px 0;
    color: #2b364a;         
    font-size: 16px;
}

.box-text p.small {
    font-size: 11px;
    color: #777;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* ボタンを横並びにする設定 */
.btn-group {
    display: flex;
    gap:10px;             
    width: 100%;
    justify-content: center; 
}

/* ボタンの共通スタイル */
.btn-pink-small, .btn-white-small {
    flex: 1;                 /* 2つのボタンの幅を同じにする */
    min-width: 120px;        /* 最低限の幅を確保 */
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* ボタン内の文字・アイコンを中央寄せ */
    gap: 4px;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;     /* 文字の勝手な改行を防ぐ */
}

/* LINE側ボタン */
.btn-pink-small {
    background: #da91b3;
    color: #F8F5F4;
    border: 1px solid #da91b3;
    gap:10px;

}

/* メール側ボタン */
.btn-white-small {
    background: #F8F5F4;
    color: #da91b3;          /* 文字色をピンクに変更（画像参考） */
    border: 1px solid #da91b3; /* 枠線をピンクに変更 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ほんのり影（画像参考） */
}

/* ボタン内アイコンのサイズ調整 */
.btn-pink-small img, .btn-white-small img {
    width: 13px;
    height: auto;
}

/* 右側固定タブ */
.fixed-contact-tab {
    position: fixed;
    right: 0;
    top: 40%;
    background-color: #d47fa6;
    color: #F8F5F4;
    /* 上下左右にしっかり余白を確保 */
    padding: 30px 12px; 
    /* 4つの角すべてを綺麗に丸める */
    border-radius: 20px 0 0 20px; 
    z-index: 999;
    /* 固定幅ではなく、中身（文字や画像）に合わせる */
    width: auto; 
    box-shadow: -2px 2px 8px rgba(0,0,0,0.15);
}

/* リンク全体の共通設定 */
.fixed-contact-tab a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center; /* 横方向（中央）に揃える */
}

/* テキスト部分 */
.fixed-contact-tab span {
    display: block;
    font-size: 20px; 
    writing-mode: vertical-rl;
    margin-bottom: 20px; 
    letter-spacing: 4px; /* 文字の間隔を少し広げてスッキリさせる */
    font-weight: bold;
}

/* LINEアイコン部分 */
.fixed-contact-tab img {
    width: 36px; 
    height: auto;
    display: block;
}
/* フッター */
.footer {
    background-color: #da91b3;
    color: #F8F5F4;
    text-align: center;
    padding: 40px 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo h2 {
    color: #F8F5F4;
    font-weight: normal;
}

.footer-logo .logo-icon {
    background-color: #F8F5F4;
    color: #da91b3;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.copyright {
    font-size: 12px;
    opacity: 0.8;
}

/* ==========================================================================
   スマートフォン用レイアウト (ブレイクポイント: 768px以下)
   ========================================================================== */
@media (max-width: 768px) {
    /* 共通設定・ユーティリティ */
.section {
        padding: 40px 15px;
        margin-bottom: 40px;
        /* margin:0 auto; は不要なので削除、または適切な値に */
    }
    

    .section::after {
        left: 20px;  
        right: 20px;
    }
    
    .section-title {
        font-size: 30px;
        margin-bottom: 4px;
    }
    
    .section-subtitle {
        font-size: 18px;
        margin-bottom: 25px;
    }

    /* ヘッダー */
    .header {
        padding: 15px 20px;
        height: 70px;
        background-color: rgba(248, 245, 244, 0.95);
    }
    
    .header__logo img {
        height: 40px;
        width: auto;
    }
    
    
   /* --- 通常（初期状態）のスタイル --- */
.gnav {
    position: fixed;
    top: 0;
    right: -100%; /* 最初は画面の右側に隠す */
    width: 60%;   /* メニューの横幅（画像のイメージに合わせて調整してください） */
    height: 100vh;
    background-color: #da91b3; /* 画像のピンク色 */
    padding: 80px 20px 20px;   /* 上部にボタンと被らないよう余白を確保 */
    transition: right 0.3s ease;
    z-index: 999; /* 前面に表示 */
    box-sizing: border-box;
}

/* メニュー内のリンク文字の装飾 */
.gnav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px; /* メニュー項目の間隔 */
    align-items: center;
}

.gnav__link {
    color: #F8F5F4; /* 文字色を白に */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.gnav__link:hover {
  color: #333; /* ホバー時のピンク */
}

/* ハンバーガーボタンの配置調整 */
.btn-menu {
    display: block;
    width: 30px;
    height: 24px;
    position: fixed; 
    top: 20px;       /* 設置したい上部位置 */
    right: 20px;     /* 設置したい右側位置 */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;   /* メニュー（z-index: 999）より前面に */
}

.btn-menu__line,
.btn-menu::before,
.btn-menu::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #da91b3; /* 初期状態の三本線はピンク */
    transition: all 0.3s ease;
}

.btn-menu::before { top: 0; }
.btn-menu__line { top: 11px; }
.btn-menu::after { bottom: 0; }

/* --- JavaScriptで「is-active」クラスがついた時のスタイル --- */

/* ① メニューを画面内にスライドイン */
.gnav.is-active {
    right: 0;
}

.btn-menu.is-active .btn-menu__line,
.btn-menu.is-active::before,
.btn-menu.is-active::after {
    background-color: #F8F5F4; /* メニューが開いたら×ボタンは白に変える */
}

.btn-menu.is-active::before {
    transform: translateY(11px) rotate(45deg);
}
.btn-menu.is-active .btn-menu__line {
    opacity: 0; /* 真ん中の線は消す */
}
.btn-menu.is-active::after {
    transform: translateY(-11px) rotate(-45deg);
}
    
    /* PC用固定タブはスマホでは非表示 */
    .fixed-contact-tab {
        display: none;
    }

    

/* ヒーロー（メインビジュアル） */
.hero {
display:none;
}

 
/* --- Worksセクション（スマホ用スタイル） --- */

.services-slider {
    display: flex;
    overflow-x: auto; /* 横スクロールを有効にする */
    white-space: nowrap;
    scroll-snap-type: x mandatory; /* スクロール時にピタッと止まるようにする */
    padding: 0 20px 20px; /* 左右に少し余白を作って最初のカードの位置を調整 */
    gap: 20px; /* カード同士の間隔 */
    
    /* 綺麗にスクロールさせるためのIE/Firefox対策 */
    -webkit-overflow-scrolling: touch; 
}

/* スクリューバー（スクロール用のバー）を非表示にしたい場合は以下を追加（お好みで） */
.services-slider::-webkit-scrollbar {
    display: none;
}

.service-item {
    display: flex; 
    flex-direction: column-reverse; 
    padding-bottom: 40px;
    margin-bottom: 0; 
    flex: 0 0 90%; 
    scroll-snap-align: center;
    box-sizing: border-box;
    background:none; 
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
     border-bottom: none
 
}

.service-info {
    padding-right: 0;
    width: 100%;
    text-align: center;
    white-space: normal; /* 親のnowrapを引き継いで文字が一行にならないようにリセット */
}

.service-num {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}

.service-header {
    display: flex; /* flexを明示 */
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    align-items: center; /* ボタンなどを中央に寄せる */
}

.service-header h3 {
    font-size: 24px;
    white-space: normal;
}

.btn-small {
    margin-left: 0;
    width: 80%;
    max-width: 240px;
    padding: 10px 20px;
    display: inline-block; /* 崩れ防止 */
    text-decoration: none;
}

.service-desc {
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
    padding: 0 10px;
}

.tags {
    display: flex; /* flexを明示 */
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 8px; /* タグ同士の間隔 */
}

.circle-img {
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* ==========================================================
   スマホ表示（②）修正版
   ========================================================== */

/* 業務フロー全体 */
.workflow {
    text-align: center;
    margin-bottom: 40px;
    font-family: sans-serif;
}

.workflow h4 {
    margin-top: 12px;
    font-size: 20px;
    font-weight: bold;
    color: #2b3647;
    margin-bottom: 24px;
}

/* 1. 横並びから縦並び（column）に変更 */
.flow-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* ステップ間の溝 */
    margin-bottom: 30px;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* 2. 各ステップの親要素のスタイル刷新 */
.step {
    flex: none; /* 【追加】PCの flex: 1 をリセット */
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: #F8F5F4;
    border: 3px solid #da91b3; /* ピンクの太枠 */
    border-radius: 12px;       /* 角丸 */
    padding: 20px 30px;
    margin-left: 0 !important; /* 元のネガティブマージンをリセット */
    
    /* 内部要素を横並びにする */
    display: flex;
    flex-direction: row;
    align-items: center;       /* 縦方向中央揃え */
    justify-content: flex-start; /* 左寄せ */
    gap: 40px;                 /* STEPとテキストの間隔 */
    z-index: 1;
}

/* 3. STEP番号テキストの調整 */
.step span {
    display: block;
    font-size: 20px;
    font-weight: light;
    color: #2b3647;
    letter-spacing: 0.05em;
    margin-bottom: 0; /* 元の下マージンをリセット */
}

/* 4. 日本語テキストの調整 */
.step p.step-ja {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #2b3647;
    line-height: 1.4;
    text-align: left;
}

/* 5. 下向き突起（吹き出しの矢印）の作成 */
/* 【重要】PC用 clip-path を打ち消し、不要なbeforeを完全に無効化 */
.step::before {
    display: none !important; 
}

.step::after {
    content: "";
    position: absolute;
    bottom: -13px; /* 枠線の外側に少しはみ出す位置 */
    left: 45px;    /* 左からの位置 */
    width: 18px;
    height: 18px;
    background: #F8F5F4;
    border-top: none;    /* 【追加】PCの初期値をクリア */
    border-left: none;   /* 【追加】PCの初期値をクリア */
    border-right: 3px solid #da91b3;
    border-bottom: 3px solid #da91b3;
    transform: rotate(45deg); /* 45度回転させて下矢印にする */
    z-index: 2;
    clip-path: none !important; /* 【重要】PCのclip-pathを完全リセット */
    top: auto;   /* 【追加】PCの top: 4px をリセット */
}

/* 6. 最初と最後のステップの例外処理 */
/* 【重要】PC側の :first-child / :last-child にかかっている clip-path や padding をすべてリセット */
.step:first-child {
    padding-left: 30px; 
}
.step:first-child::before,
.step:first-child::after {
    clip-path: none !important;
}
.step:first-child::after {
    display: block; 
}

.step:last-child {
    padding-right: 30px;
}
.step:last-child::before,
.step:last-child::after {
    clip-path: none !important;
}
.step:last-child::after {
    display: none; /* 最後のステップは矢印を非表示 */
}

/* その他パーツ（変更なし） */
.flow-note {
    font-size: 14px;
    margin-bottom: 24px;
}

.divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}
.legal-note h4{
    font-size: 20px;
    font-weight:400;
}

.legal-note {
    padding: 20px 15px;
    font-size: 12px;
    margin-top: 30px; 
    text-align: center;
}


   /* Contactセクション *//* Contactセクション */
.contact-methods {
    flex-direction: column;
    gap: 30px;
}

.contact-method-wrapper {
    width: 100%;
    box-sizing: border-box; /* 幅の計算を狂わせないお守り */
}

.contact-method-wrapper h4 {
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.contact-box {
    padding: 20px; /* 左右の余白を少し調整 */
    background-color: #f9f9f9; 
    border-radius: 12px;
    box-sizing: border-box;
    width: 100%; /* 親要素に合わせる */
    overflow: hidden; /* 万が一のはみ出しを防止 */
}

.box-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px; 
    width: 100%;
    box-sizing: border-box;
}

.icon-line, .icon-mail {
    width: 100px; 
    flex-shrink: 0; 
}

.icon-line img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.box-text {
    flex: 1; 
    min-width: 0;
}

.box-text p {
    font-size: 15px;
    margin: 0 0 4px 0;
}

.box-text p.small {
    font-size: 13px;
    color: #666;
}

.btn-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 【重要】画面幅が狭いときにボタンが自動で折り返せるように */
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}

.btn-pink-small, .btn-white-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 20px; 
    font-size: 13px;
    border-radius: 20px;
    text-decoration: none;
    flex: 1; 
    min-width: 140px;
    box-sizing: border-box;
}

.btn-white-small img {
    width: 24px;
    height: auto;
}

.btn-outline-pink {
    width: 80%;
    padding: 12px 30px;
    font-size: 15px;
}


    /* フッター */
    .footer {
        padding: 30px 15px;
    }
    
    .footer-logo img {
        max-width: 200px;
    }
    
    .footer-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 15px;
        font-size: 13px;
        flex: 1; 
    }
}