@charset "UTF-8";

   /* ============================================================
   1. 全ページ共通設定（Reset & Common）
   どのページでも使う基本的なルール
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* これもここに入れておくと便利です */
}

body {
    width: 100%;
    overflow-x: hidden; /* ★ここで画面全体の揺れを止めます */
    background-color: #fcfce0;
}
main{
    background-color: transparent;
}
/* 英字がメインになる要素（タイトルやメニューの英字部分）に Yomogi を指定 */
h1 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700; /* 少し太めにして視認性を高めるのがおすすめ */
}

h2, .en-text {
    font-family: "Yomogi", "Noto Sans JP", sans-serif;
}

/* リンクの基本設定 */
a {
    text-decoration: none; /* 下線を消す */
    color: inherit;       /* 文字色を親要素に合わせる */
}

/* リストの基本設定 */
ul {
    list-style: none; /* 「・」を消す */
}

/* --- 共通ヘッダーの装飾 --- */
.common-header {
   background-color: #f9f9e3;
    height: 200px; /* ★ロゴとタイトルを大きくするため、少し高さを出します */
    width: 100%;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner {
   width: 100%;
    max-width: 1300px; /* 少し広めに設定 */
    margin: 0 auto;
    height: 100%;      /* 親の高さに合わせる */
    position: relative; /* ★メニューを右下に置くための基準点 */
    display: flex;
    align-items: center; /* 左側要素の中央揃え用 */
    padding-left: 9px;
}
.header-left {
  display: flex;
    align-items: center;
    gap: 15px; /* ロゴとタイトルの間隔 */
   
}
.header-logo img {
   height: 130px; /* ★ロゴをさらに大きく！ */
    width: auto;
    display: block;
    margin-top: 5px; /* 位置の微調整 */
    transition: transform 0.3s; /* おまけ：ホバーで少し動くように */ 
    
}
.header-logo img:hover {
    transform: scale(1.05); /* ロゴにマウスを乗せると少し大きくなる */
}
.page-title {
  font-family: "Yomogi", cursive;
    font-size: 48px; /* ★タイトルを大きく */
    color: #ff99cc;
    margin: 0;
    letter-spacing: 0.03em; /* 少し文字間を広げると可愛くなります */
}
.header-nav {
    font-family: "Yomogi", cursive;
    position: absolute;
    right: 50px;  /* ★右から50px */
    bottom: 10px; /* ★下から10px（ギリギリの位置） */
}
.header-nav ul {
 display: flex;
    list-style: none;
    gap: 40px; /* メニュー間のゆとり */
    margin: 0;
    padding: 0;
}
.header-nav a {
   text-decoration: none;
    color: #1a4a8e;
    font-size: 20px; /* ★メニューを若干大きく */
    font-weight: bold;
    transition: color 0.3s;
}
/* ★現在地のメニューをピンクにする設定 */
.header-nav a.current,
.header-nav a:hover {
    color: #ff99cc;
}
.header-nav a:hover {
    opacity: 0.7;
}

/* --- Privacy Policy Page Styles --- */
.privacy-page .page-title,
.privacy-content .section-title {
    font-family: 'Noto Sans JP', sans-serif !important;
}

/* メインコンテンツの外枠（中央寄せと余白） */
.privacy-content {
    max-width: 800px; /* 読みやすい横幅に制限 */
    margin: 60px auto; /* 上下に余白を持たせる */
    padding: 0 20px;
    color: #1a2a40; /* 濃いめの紺色（共通カラー） */
    line-height: 1.8; /* 行間を広めて読みやすく */
    font-family: "Noto Sans JP", sans-serif; /* 基本はNoto Sans */
}

/* 各セクションの余白 */
.privacy-content section {
    margin-bottom: 40px;
}

/* 中見出し（■の部分） */
.privacy-content h2.section-title {
    font-size: 3rem;
    text-align: center;
    margin-top: auto;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

/* 見出しの下に装飾の線を入れる場合（お好みで） */
.privacy-content h2.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #1a2a40; /* 濃いめの紺色 */
}

.privacy-content h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #d1d8e0; /* 薄い境界線 */
    padding-bottom: 5px;
}

/* 箇条書きのスタイル */
.privacy-content ul {
    margin: 10px 0 20px 20px;
    list-style-type: disc;
}

.privacy-content li {
    margin-bottom: 8px;
}

/* 制定日と運営者名の部分（Yomogiを適用） */
.privacy-footer {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #1a2a40;
    text-align: right;
    font-family: "Yomogi", cursive; /* 英数字や署名にYomogiを適用 */
}

.privacy-footer p {
    margin: 5px 0;
}

/* レスポンシブ対応（スマホで見るとき） */
@media (max-width: 768px) {
    .privacy-content {
        margin: 40px auto;
    }
    
    .privacy-content h2.section-title {
        font-size: 1.6rem;
    }
}


/* --- 共通フッターの装飾 --- */
.common-footer {
   background-color: #f9f9e3;
    height: 80px;
    width: 100%; /* bodyのmarginが0ならこれで端まで届きます */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;     /* これで文字が「本当の中央」に来ます */
    padding-bottom: 10px;    /* 下から10px浮かせます */
}
.copyright {
    font-family: "Yomogi", cursive;
    font-size: 14px;
    color: #1a4a8e;
    margin: 0;               /* 変な余白をゼロに */
}

/* ============================================================
   メディア専用スタイル  （共通header）
   ============================================================ */
   /* ==== PC画面（1024px以上）の時だけの調整 ==== */
@media screen and (min-width: 1024px) {
  
  /* 共通ヘッダーの中身 */
  .header-inner {
    /* 現在の1300pxだと広すぎるので、ポートフォリオと同じ1200px（または1100px）に狭める */
    max-width: 1100px; 
    
    /* ※ここに display: flex や justify-content は書かなくてOKです！ */
    /* position: relative があるので、箱が狭くなれば、右端にあるメニューも自動的に内側に寄ってきます */
  }

}


/* ============================================================
    Works Detailページ
   ============================================================*/
/* --- 1. ベース設定 --- */
body.works-detail-page {
    background-color: #f9f9e3; /* 背景のベージュ */
    color: #1a3a8c;
    position: relative; /* ボタンのストッパーの基準になります */
    min-height: 100vh;
}

/* 全体を包むメインエリア */
.works-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- 2. ページ上部：タイトルエリア --- */
.works-intro {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 60px;
}

.title-badge {
    display: inline-block;
    background: radial-gradient(ellipse at center, #f4ab58b4 0%, #f9f9e300 100%);
    
    padding: 20px 80px;
    border-radius: 60px;
   
}
.title-badge2 {
    display: inline-block;
    background: radial-gradient(ellipse at center, #9dd7f2b4 0%, #f9f9e300 100%);
    
    padding: 20px 80px;
    border-radius: 60px;
   
}

.title-badge h1 {
    font-size: 2.2rem;
    margin: 0;
   
}

.genre {
    font-size: 0.9rem;
    margin: 10px 0 0;
   color: #1a3a8c;
}

/* --- 3. 作品比較エリア（茶色の1400×600コンテナ） --- */
.comparison-visual {
   width: 1400px;
    height: 600px;
    
    /* ▼ 変更: 下のマージンを100pxから30pxに減らす */
    margin: 0 auto 30px; 
    
    background-color: #deb17a;
    border-radius: 30px; 
    position: relative;
    overflow: hidden;
    max-width: 95%; /* 画面幅が狭い時の保険 */
}
.comparison-visual2 {
   width: 1400px;
    height: 1000px;
    
    /* ▼ 変更: 下のマージンを100pxから30pxに減らす */
    margin: 0 auto 30px; 
    
    background-color: #9dd7f2b4;
    border-radius: 30px; 
    position: relative;
    overflow: hidden;
    max-width: 95%; /* 画面幅が狭い時の保険 */
}

/* Before/After共通の配置設定 */
.visual-item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 25px;
}
.visual-item2 {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 25px;
}

/* 画像サイズを固定（重なりを考慮したサイズ） */
.visual-item img {
    width: 1000px; 
    height: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-radius: 4px;
}
.visual-item2 img {
    width: 1000px; 
    height: 450px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-radius: 4px;
}

/* Before / after の文字 */
.label-text {
    font-size: 2.8rem;
    color: rgb(35, 72, 38);
    font-family: "Noto sans JP", serif;
    font-weight: bold;
   
}

/* --- Beforeを「左上」に固定 --- */
.before-box {
    top: 10px;
    left: 20px;
    flex-direction: row-reverse;
}

/* --- Afterを「右下」に固定 --- */
.after-box {
    bottom: 10px;
    right: 20px;
    flex-direction: row;/* HTMLを変えず「ラベルを左」にする */
}

/* --- 4. コンテナ外のテキスト詳細エリア --- */
.works-details-text {
   width: 100%;
    max-width: 1000px;
    
    /* ▼ 変更: 上のマージンを0にして、比較画像にもっと近づける */
    margin: 0 auto 100px; 
    
    padding: 40px 80px; /* パディングも少し調整 */
    background-color: #deb17a8d;
    border-radius: 20px;
    display: block;
    box-sizing: border-box; /* パディングを含めた幅計算にする */
     
}
.works-details-text2 {
   width: 100%;
    max-width: 1000px;
    
    /* ▼ 変更: 上のマージンを0にして、比較画像にもっと近づける */
    margin: 0 auto 100px; 
    
    padding: 40px 80px; /* パディングも少し調整 */
    background-color: #9dd7f2b4;
    border-radius: 20px;
    display: block;
    box-sizing: border-box; /* パディングを含めた幅計算にする */
    
    
}

.detail-group {
   width: 100%;
    max-width: 800px; /* テキストが広がりすぎないように制限 */
   margin: 0 auto 50px;
    
}

.detail-group h2 {
  text-align: center;
    font-size: 36px;
    margin-bottom: 25px;
    color: #1a3a8c; /* 見出しの色も統一感のために指定（必要なければ削除可) */
}

.detail-group dl {
  display: grid;
    align-items: start; /* 上揃えのほうが文章が長くなった時に綺麗です */
    grid-template-columns: 8em 1fr; /* 左側(項目名)の幅を固定 */
    gap: 20px 0; /* 上下の間隔を少し詰める */
}

.detail-group dt {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding-right: 10px;
   color: #10193a; /* 文字色を少し濃く */ 
}

.detail-group dd {
    font-size: 18px;
    margin: 0;
    color: #1a3a8c;
    text-align: left;
    line-height: 1.8; /* 読みやすく行間を広げる */
}

/* --- 5. 戻るボタン --- */

.floating-contact {
   position: fixed !important;  
    left: calc(50% + 450px) !important; 
    bottom: 100px !important;      
    z-index: 100 !important;    /* フッター(9999)よりずっと下に設定 */
    width: fit-content;
    
}

.floating-btn {
   position: relative; 
    z-index: 2;        /* ボタンは「2階」 */
    /* (他の padding や background はそのまま) */
    display: block;
    background-color: rgb(220, 144, 45);
    color: #fff;
    text-align: center;
    padding: 20px 30px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap; /* 文字が勝手に改行されないように */
    min-width: 120px;    /* ボタンとしての最低限の幅を確保 */
}


/* むさし君の固定配置 */
.fixed-musashi {
   position: absolute;
    left: -45px;
    bottom: -30px;
    width: 90px;
    z-index: 3;        /* ムサシ君は通常「3階」にいるので、ボタンより前 */
    pointer-events: none;
    transition: transform 0.2s ease, z-index 0s; /* z-indexは一瞬で変える */
}


.fixed-musashi img {
    width: 100%;
    height: auto;
    /* もし背景が白く残っている場合は、ここで少し加工もできます */
}


.floating-contact:hover .floating-btn {
   transform: scale(1.05); /* ボタンを1.05倍に */
  
}

.floating-contact:hover .fixed-musashi {
    transform: scale(0.8); /* 1.1倍に大きくする */
   z-index: 1; 
}
.comparison-visual {
    position: relative;
    z-index: 10; 
}

/* ==========================================================================
   メディアクエリ（スマホ・タブレット用 768px以下）
   ========================================================================== */
@media screen and (max-width: 1399px) {

    /* --- 全体の余白調整 --- */
    .works-container {
        padding: 0 15px; /* 画面端に少し余白を作る */
        box-sizing: border-box;
    }
     .works-container2 {
        padding: 0 15px; /* 画面端に少し余白を作る */
        box-sizing: border-box;
    }

    /* --- 2. タイトルエリア --- */
    .works-intro {
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .title-badge {
        padding: 15px 40px; /* バッジを少し小さく */
    }
    .title-badge2 {
        padding: 15px 40px; /* バッジを少し小さく */
    }

    .title-badge h1 {
        font-size: 1.5rem; /* タイトル文字サイズ調整 */
    }
    .title-badge2 h1 {
        font-size: 1.5rem; /* タイトル文字サイズ調整 */
    }

    /* --- 3. 作品比較エリア（縦並び・画像重ね文字） --- */
    .comparison-visual {
        width: 100%;       /* 画面幅に合わせる */
        height: auto;      /* 高さを中身に合わせる */
        margin-bottom: 50px;
        padding: 30px 0;   /* 上下の内側余白 */
    }
    .comparison-visual2 {
        width: 100%;       /* 画面幅に合わせる */
        height: auto;      /* 高さを中身に合わせる */
        margin-bottom: 50px;
        padding: 20px 20px;   /* 上下の内側余白 */
    }

    /* Before / After のボックス共通設定 */
    .visual-item {
        position: relative; /* 絶対配置を解除し、相対配置へ */
        display: block;     /* フレックスを解除 */
        width: 90%;         /* 茶色い箱の中で少し小さく */
        margin: 0 auto 30px; /* 中央揃えと下の余白 */
        top: auto; left: auto; right: auto; bottom: auto; /* PCの位置指定をリセット */
    }
    
    /* 最後の要素だけ余白なし */
    .visual-item:last-child {
        margin-bottom: 0;
    }

    /* 画像設定 */
    .visual-item img {
        width: 100%;    /* 親要素に合わせて伸縮 */
        height: auto;   /* 比率を保持 */
        max-width: 100%;
    }
    .visual-item2 {
        position: relative; /* 絶対配置を解除し、相対配置へ */
        display: block;     /* フレックスを解除 */
        width: 100%;        
        margin: 0 auto 30px; /* 中央揃えと下の余白 */
        top: auto; left: auto; right: auto; bottom: auto; /* PCの位置指定をリセット */
    }
    
    /* 最後の要素だけ余白なし */
    .visual-item2:last-child {
        margin-bottom: 0;
    }

    /* 画像設定 */
    .visual-item2 img {
        width: 100%;    /* 親要素に合わせて伸縮 */
        height: auto;   /* 比率を保持 */
        max-width: 100%;
    }

    /* ラベル（Before/After）設定：画像の上に重ねる */
    .label-text {
        position: absolute; /* 画像の上に浮かす */
        top: 10px;          /* 画像の上端からの距離 */
        left: 15px;         /* 画像の左端からの距離 */
        
        font-size: 2rem;    /* 少し小さく調整 */
        color: #ffffff;     /* ★白文字 */
        text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* ★視認性を高める影 */
        z-index: 5;
        margin: 0;
        
        /* PCのorder指定を無効化 */
        order: unset !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- 4. テキスト詳細エリア --- */
    .works-details-text {
        width: 100%;
        padding: 40px 20px; /* 余白をスマホ用に調整 */
        box-sizing: border-box;
    }

    .detail-group {
        margin-bottom: 30px;
    }

    .detail-group h2 {
        font-size: 24px;
    }

    /* 定義リスト（dl）を縦積みにする */
    .detail-group dl {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 10px 0; /* 上下の間隔 */
    }

    .detail-group dt {
        text-align: left;   /* 左揃えに変更 */
        padding-right: 0;
        margin-top: 15px;   /* 項目ごとの区切り */
        border-left: 4px solid #d59b5a; /* 見出しっぽく左線を入れる（お好みで） */
        padding-left: 10px;
    }

    .detail-group dd {
        margin-left: 14px; /* 少しインデント */
        font-size: 16px;
    }

    /* --- 5. 戻るボタン（スマホ配置） --- */
    .floating-contact {
        /* PCのcalc指定を強制リセットして右下配置 */
        left: auto !important;
        right: 20px !important;
        bottom: 20px !important;
        
        /* 誤タップ防止のため少し縮小 */
        transform: scale(0.9);
        transform-origin: bottom right;
    }
    
    /* ホバー時の拡大率をスマホでは控えめに */
    .floating-contact:hover .floating-btn {
        transform: none; 
    }
    
    /* むさし君の位置微調整 */
    .fixed-musashi {
        width: 70px;
        left: -35px;
        bottom: -20px;
    }
}


/* ============================================================
   2. TOPページ専用スタイル (.top-page)
   ============================================================ */
.menu-box a.current,
.menu-box a:hover {
    color: #cf277b;
}
.menu-box a:hover {
    opacity: 0.7;
}

   /* 中身を左側に寄せるためのコンテナ */
.display-container{
padding-left: 7%;           /* 5%から7%へ。この「2%」が絶妙な「気持ち右」になります */
   
width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

   .top-page {
 background-image: url("../images/logo.png") !important;
    background-size: cover; 
    
    /* 1. 位置を「右寄り」に固定する */
    /* center ではなく、右から少し余裕を持たせた位置(例: 85%)に固定 */
    background-position:50% center !important; 
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
}
.top-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* 上から下に、深い青が自然に消えていく設定 */
    background: linear-gradient(to bottom, rgba(26, 74, 142, 0.4) 0%, rgba(26, 74, 142, 0) 50%);
    
    pointer-events: none;
    z-index: 2;
}
/* メインキャッチコピー (h1) */
.catch-copy {
    font-family: "Noto Sans JP", sans-serif; /* または Yomogi */
    font-size: 48px !important;      /* ★ここで好きな大きさにドーンと大きくできます */
    font-weight: bold;
    color: #1a4a8e;
    line-height: 1.3;     /* 行間を詰めると今風でオシャレになります */
    margin-bottom: 100px;
    /* ★これを追加：単語の途中での改行を防ぐ */
  word-break: keep-all; 
  
  /* ★念のためこれも：ボックスからはみ出さないように */
  overflow-wrap: break-word;
}

.menu-box {
     width : fit-content;
     
    padding: 30px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background:  rgba(240, 248, 255, 0.554); 
    backdrop-filter: blur(10px);
    border-radius: 30px;
    /* ...既存のコード... */
    margin-bottom: 120px; /* ★これを追加：フッターとの間に避難路を作る */
    width: fit-content;
    
}

/* MENUのリンク部分：英字（Yomogi）と日本語（Noto）の組み合わせ */
.menu-box h2 {
    font-family: "Yomogi", cursive;
    font-size: 36px !important;      
    text-align: center;
    margin-bottom: 15px !important;
     color: darkblue;      
    letter-spacing: 0.15em;    
}
.menu-box a {
  font-family: "Yomogi", cursive;
    display: flex;         /* 英語と日本語を横に並べる */
    align-items: center;   /* 縦方向の中央 */
    width: fit-content;    /* 文字幅に合わせる */
    margin-bottom: 15px;
    text-decoration: none;
    padding: 8px 15px;     /* ホバー時の白背景のゆとり */
    border-radius: 50px;
    transition: 0.3s;
   font-size: 25px;
}
.menu-box a span {
   font-size: 13px;
    margin-left: 15px;
    margin-top: 4px;       /* 日本語だけ少し下げる指示を反映 */
    white-space: nowrap;   /* 改行防止 */
    opacity: 0;
    transition: 0.3s;
    position: static !important;
}

.menu-box ul {
    list-style: none;
    padding: 0;
    display: inline-block; /* 文字の幅に合わせる */
    text-align: left;
}
.menu-box a:hover {
    background: rgba(255, 255, 255, 0.9);
}
.menu-box a:hover span {
    opacity: 1;           /* 見えるようにする */
}   
    
.arrow {
    margin-left: auto; /* これで右端に寄ります */
    padding-left: 10px;
     position: static !important; 
}


.menu-box ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease; /* 動きをなめらかにする魔法の1行 */
    padding: 10px;            /* クリック範囲を少し広げる */
    border-radius: 10px;      /* 浮き上がったときの背景も丸く */
}


/* 日本語部分は Noto Sans に固定（念のため） */
.menu-box span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.7em;
    margin-left: 15px;
        color:  #ff5e99;
    }

  /* ============================================================
   メディア専用スタイル （Topページ）
   ============================================================ */


    /* --- 一番最後：スマホ用の設定（これを追記） --- */
@media (max-width: 1000px)and (max-width: 1300px) {
    /* ここにスマホの時だけ変えたい内容を書く */
    .top-page {
       /* 背景：草原の高さを出しつつ、看板を右下へ逃がす */
        background-size: cover !important;
        background-position: 80% bottom !important;
        background-repeat: no-repeat;
    }
    .display-container {
     
        /* paddingで上からの位置を決めると、マイナスmarginより挙動が安定します */
        padding-top: 5vh !important; 
        justify-content: flex-start !important;
   }
    .catch-copy {
        font-size: 30px !important; 
     
        /* マイナス調整の代わりにここを微調整 */
        margin-top : 0px; 
        background-color: rgba(240, 248, 255, 0.6);
        /* 二段に戻すための設定 */
        width: auto !important; /* 幅制限を解除 */
        display: inline-block;
        /* 位置調整（必要であれば） */
  
         /* ★ここを追加：箱に余白と丸みをつける */
        padding: 15px 15px;       /* 文字の周りに余白を作る */
         border-radius: 15px;      /* 角を丸くして優しさを出す */
         box-decoration-break: clone; /* (上級者向) 改行した時に箱を綺麗に見せるおまじない */
    }
   
    
    .menu-box {
      /* メニューを少しスリムにして、看板との重なりを最小限に */
        width: 70% !important;
        min-width: 250px;
        padding: 20px 40px;
        background: rgba(236, 219, 152, 0.85) !important; 
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        left: 5px;
        margin-top: 25px !important;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .hamburger { display: none; }

        /* 日本語メニューの位置もスマホ用に微調整 */
    .jp-text {
         left: 30px; /* 英語との重なりをキープ */
    }
    .top-footer {
        /* ★左端から20pxの位置に移動 */
        left: 10px;
        padding-bottom: 40px; 
        
        /* もし看板の下の方すぎたら、ここで高さを微調整できます */
        bottom: 40px; 
    }
    
    .top-footer h3 {
        font-size: 16px; /* スマホだと少し小さくするとスッキリします */
    }
    .top-footer p {
        font-size: 15px !important; /* 13px から +2px */
    }
}
  /* 1. 看板の支柱にぶつかる前にタイトルサイズを落とす設定 */
@media (max-width: 1200px) {
  .catch-copy {
    font-size: 32px ; /* 48pxから少し落とす */
   
    transition: all 0.3s ease; /* 変化を滑らかに */
  }
} 
    /* ============================================================
        メディア専用スタイル  （Topページハンバーガーメニュー）
     ============================================================ */
    /*ハンバーガーメニューの設定*/
    /* スマホ用設定の中に追加 */
@media (max-width: 1050px) {
  /* 1. メニューボックスを画面外へ */
  .menu-box {
    position: fixed;
    top: 0;
    left: -150%;
    width: 150px !important; /* 幅を固定すると扱いやすいです */
    height: 100vh;
    margin: 0 !important;
    z-index: 100;
    transition: 0.4s;
    border-radius: 0;
    /* 看板のデザインと合わせるなら、少し透過した白などが綺麗です */
    background: rgba(236, 219, 152, 0.284) !important; 
  }
  

  /* クラスがついたら表示 */
  .menu-box.is-open {
    left: 20px;
  }

  /* 2. フッターの位置調整（重なりを解消） */
  .top-footer {
    position: fixed; /* absoluteから固定に変えると安定します */
    bottom: 30px;
    left: 5% !important;
  }


    /* PC用ボタン非表示設定も合わせる */
  .hamburger {
    display: none; }

  /* 3. ハンバーガーボタンのデザイン */
  .hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 110;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(232, 215, 127, 0.931);
    border-radius: 5px;
  }

  .hamburger span {
    width: 30px;
    height: 2px;
    background-color: #1a4a8e;
    margin: 4px 0;
    transition: all 0.3s;
  }

  /* ボタンがアクティブな時の三本線の変化（×印） */
  .hamburger.is-active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .hamburger.is-active span:nth-child(2) { opacity: 0; }
  .hamburger.is-active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

}




/* ============================================================
   3. TOPフッター (Footer)
   ============================================================ */
.top-footer {
 position: absolute;
    bottom: 60px;
    left: 150px;   /* margin-leftではなくleftを使うのがabsoluteの正解です */
    margin-top: auto; 
}
.top-footer h3 {
    font-size: 16px; /* さらに一回り小さく控えめに */
    color: #1a3a8c;
    opacity: 0.8;    /* 少し透かして主張を抑える */
}

.top-footer p {
    font-size: 13px;
    color: #4b4b4b;
}
/* --- プライバシーポリシー 共通パーツ --- */

/* 1. フォーム内のチェックボックス周り */
.form-privacy {
    margin: 20px 0;
    text-align: center;
    font-size: 14px; /* 少し小さくしてスッキリ */
}

.form-privacy a {
    color: #1a2a40; /* 以前決めた濃いめの紺色 */
    text-decoration: underline;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-top: 10px;
}

.checkbox-label input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

/* 2. フッターのリンク（かっこよく・さりげなく） */

.privacy-page .page-title, 
.privacy-content .section-title {
    font-family: "Noto Sans JP", sans-serif !important; /* 強制的にNoto Sansを適用 */
    font-weight: 700; /* 必要に応じて太さを調整 */
}
.common-footer {
    padding: 30px 0;
    text-align: center;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin-bottom: 5px; /* コピーライトとの距離を縮める */
}

.footer-nav a {
    font-size: 11px; /* かなり小さくして控えめに */
    color: #1a2a40; /* 濃いめの紺色 */
    text-decoration: none;
    opacity: 0.7; /* 少し透明にして目立たなくする */
}

.footer-nav a:hover {
    opacity: 1; /* マウスを乗せた時だけハッキリさせる */
    text-decoration: underline;
}

.copyright {
    font-size: 10px;
    font-family: "Yomogi", cursive; /* 英字はYomogi */
    color: #1a2a40;
}

/* ============================================================
   4. Portfolioページ専用スタイル 
   ============================================================ */

/* 制作の流れ画像の外枠 */
.production-flow {
    width: 90%;            /* 画面幅の90%に収まるようにします */
    max-width: 900px;      /* PCでもこれ以上大きくならないように制限します */
    margin: 40px auto;     /* 上下に余白、左右は中央寄せ */
    padding: 0;            /* 余計な余白をカット */
    box-sizing: border-box;
}

.flow-img-wrapper img {
    max-width: 100%;       /* 【重要】親の枠からはみ出すのを禁止します */
    height: auto;          /* 縦横比を維持します */
    display: block; 
    margin: 0 auto;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* 作品一覧：ここも追記するとより確実です */
.portfolio-container {
    clear: both;           /* 上の画像の影響をリセットします */
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 60px; 
    max-width: 1200px; 
    margin: 0 auto;
    padding: 50px 20px;
}

/* 「作品をすぐ見る」ボタンのデザイン */
.skip-link-text {
    text-align: center;
    margin: 10px 0 30px; /* 上下の隙間を少し狭く */
}

.skip-link-text a {
    color: #1a4a8e;           /* ロゴと同じ落ち着いた紺色 */
    text-decoration: none;    /* 下線は最初はなし */
    font-size: 14px;          /* 文字を少し小さく */
    border-bottom: 1px solid #eecbab; /* 控えめな細い線を下に引く */
    padding-bottom: 2px;
    transition: 0.3s;
}

/* マウスを乗せた時だけ、少し色を濃くする */
.skip-link-text a:hover {
    color: #d16b70;           /* 優しいピンクにふわっと変わる */
    border-bottom-color: #d16b70;
}

/* 誘導テキストの装飾 */
.scroll-induct {
    margin-top: 40px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    color: #1a4a8e;
    font-size: 20px;
    letter-spacing: 0.1em;
    animation: bounce 2s infinite; /* ふわふわ動かすアニメーション */
}
/* PCではリンクの指マークを出さない、注釈も隠す */
.mobile-link-only {
    pointer-events: none; /* クリックを無効化 */
    cursor: default;
}
.tap-notice {
    display: none; /* PCでは非表示 */
}

/* ふわふわ動くアニメーションの定義 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}
* 図解の詳細説明ボックス */
.work-detail-box {
   max-width: 700px;         /* 幅を絞って読みやすく */
    margin: 30px auto;
    padding: 40px;            /* 余白をたっぷり取って優しさを演出 */
    background-color: #fffaf0; /* より温かみのあるアイボリーに */
    border: 2px dashed #eecbab; /* 枠線を点線にして「手作り感」を出す */
    border-radius: 20px;      /* 角をしっかり丸く */
    text-align: center;
}

.detail-section h4 {
    color: #d16b70;           /* 優しく温かい赤色系に変更 */
    font-size: 20px;
    border-bottom: none;      /* 硬い線を消す */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.detail-section ul {
    list-style: none;
    padding-left: 0;
}
/* 見出しの前に可愛いドットをつける例 */
.detail-section h4::before {
    content: "●";
    margin-right: 8px;
    font-size: 14px;
    color: #eecbab;
}

.detail-section li {
    margin-bottom: 10px;
}
/* --- 誘導テキストのブラッシュアップ --- */
.scroll-induct {
    margin: 50px 0;
    text-align: center;
}

.scroll-induct p {
    display: inline-block;
    padding: 15px 30px;
    background-color: #d16b70; /* アクセントカラー */
    color: #fff;               /* 文字は白抜きで読みやすく */
    border-radius: 50px;       /* 完全に丸いボタン風 */
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* ホバー時の演出：少し浮き上がって色を優しくする */
.scroll-induct p:hover {
    background-color: #e8a7a9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(209, 107, 112, 0.3);
}


   .sub-copy {
  font-size: 56px;      /* PCではドカンと大きく！(60〜80pxくらいがおすすめ) */
  font-family: "Noto Sans JP", sans-serif; 
  /* 以下はそのまま */
  color: #1a4a8e;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 40px;
  font-weight: bold;
  
  /* 【追加】PCでも文字が折り返した時に読みやすくする */
  line-height: 1.4;
}
.sub-copy br {
  display: none;
}
/* 作品一覧を包む箱の設定 */
.portfolio-container {
    display: grid;               /* 「グリッドレイアウトを使います」という宣言 */
    grid-template-columns: 1fr 1fr 1fr; /* 「幅を3等分（1:1:1）して横に並べなさい」という命令 */
    gap: 60px;                   /* 作品と作品のあいだの隙間 */
    max-width: 1200px;           /* PCで広がりすぎないように制限 */
    margin: 0 auto;              /* 全体を真ん中に寄せる */
    padding: 50px 20px;          /* 上下左右の余白 */

}
/* 作品ひとつひとつの箱 */
.portfolio-item {
    width: 100%;                 /* 親（3等分された枠）の幅いっぱいに広がる */
    text-align: center;          /* 中の文字を真ん中に */
}
/* 作品1つ1つの装飾 */
.work-img-wrapper {
    width: 100%;
    margin-bottom: 0;
    aspect-ratio: 4 / 3; /* 画像の大きさを4:3でピシッと揃える */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 柔らかい影 */
    background-color: #fcfce0;
}
/* ▼ 追加: マウスを乗せた時に、ふわっと白くする */
.work-img-wrapper:hover {
  opacity: 0.8;       /* 透明度を80%にする */
  transition: 0.3s;   /* 0.3秒かけてふわっと変化させる */
  cursor: pointer;    /* 指マークを強制的に出す（念のため） */
}

.work-img-wrapper img {
   width: 100%;                 /* 横幅を箱に合わせる */
    height: 100%;               /* 高さを固定して揃える（お好みで調整） */
    object-fit: cover;           /* 画像が歪まないように切り抜く */
    vertical-align: bottom; /* 【重要】下の隙間を強制的に消す */
    border-radius: 10px;         /* 角を丸くする */
}

/* マウスを乗せた時の演出 */
.portfolio-item:hover .work-img-wrapper img {
    transform: scale(1.1); /* 画像が少し拡大する */
}

/* 文字の装飾 */
.work-title {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #1a4a8e;
    text-align: center;
    line-height: 1.2;   /* 行間も詰めるとより「セット感」が出ます */
}

.work-genre {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-top: 5px;
}

/* ============================================================
   メディア専用スタイル  （Portfolioページ）
   ============================================================ */
  /* ==== スマホ画面（幅767px以下）だけの特別ルール ==== */
@media screen and (max-width: 1024px) { 
    .sub-copy {
    /* 56pxだとタブレットでは大きすぎて溢れるので、少しだけ小さくします */
    font-size: 38px; 
    padding: 0 30px; /* 左右に少し余裕を持たせる */
  }
}
@media screen and (max-width: 767px)and (max-width: 1024px) {
  
    /* 1. リンクを有効にする */
    .mobile-link-only {
        pointer-events: auto; /* クリックを有効化 */
        cursor: pointer;
    }

    /* 2. 画像を小さく表示する（ご希望の調整） */
    .flow-img-wrapper {
        width: 70%;       /* PCよりさらに絞って「全体像」として見せる */
        margin: 0 auto;
    }

    /* 3. 注釈を表示 */
    .tap-notice {
        display: block;   /* スマホでだけ表示 */
        font-size: 12px;
        color: #d16b70;
        margin-top: 10px;
        text-align: center;
        animation: flash 1.5s infinite;
    }
    .portfolio-container {
    grid-template-columns: 1fr; /* 1列固定 */
        gap: 100px;                 /* 100pxくらいガバッと空けて「次の作品」への期待感を出す */
        padding: 20px 0;         /* 左右の余白も少し多め（30px）に取って、画像を小さく見せる */
    }
    /* 作品1つ分の塊（ここで大きさを絞る） */
    .portfolio-item {
        width: 60%;                /* 画面幅の70%くらいまで絞って小さく見せる */
        margin: 0 auto;            /* ど真ん中に配置 */
    }
  /* 2. タイトルの上の隙間をギュッと縮める（身内は近くに） */
    .work-title {
        font-size: 18px;
        line-height: 1.3;    /* 行間を少し広げて、2段になっても窮屈に見せない */
        min-height: 2.6em;   /* 【重要】2行分の高さを常に確保する。これで横の作品とガタつかない！ */
        display: flex;
        align-items: center; /* 1行の時も中央に配置される */
        justify-content: center; /* 中央寄せにしている場合 */
    }
    .work-genre {
        text-align: center;
        font-size: 12px;
    }

    /* 3. もし画像の下にも隙間があれば縮める */
    .work-img-wrapper {
    aspect-ratio: 1 / 1;       /* 小さく見せるなら正方形(1/1)にするのも可愛いです */
        border-radius: 8px;        /* 少し角を丸めると収まりが良くなります */
        margin-bottom: 15px;       /* 画像と文字の距離
    }
    .portfolio-container {
        gap: 80px;  /* 60pxでも迷うなら、思い切って80px空ける！ */
    }
    .sub-copy {
        /* スマホではサイズを半分以下に落とす */
        font-size: 28px;    /* 24px〜32pxくらいがスマホの最適サイズ */
    line-height: 1.8; /* 2行になるので、行間を少し広げると読みやすいです */ 
        /* 横に余白を入れて、画面端ギリギリにならないようにする */
        padding: 0 20px;
        
        /* 上下の余白も少し狭めてバランスをとる */
        margin-top: 40px;
        margin-bottom: 30px;
    } 
    .sub-copy br {
       display: block;
    }
}  
  /* ==== スマホ画面（幅767px以下）用の追加調整 ==== */
@media screen and (max-width: 767px) {

  /* 1. 制作の流れ（図解画像）の調整 */
  .production-flow {
    width: 95%;        /* 画面端ギリギリまで広げて視認性を確保 */
    margin: 20px auto; /* 上下の余白を少し詰める */
  }

  /* 2. 図解の詳細説明ボックス（ここを可愛く！） */
  .work-detail-box {
    width: 90%;        /* スマホでは少し幅を広げる */
    padding: 25px 20px; /* 余白をスマホ用に調整 */
    margin: 20px auto;
    /* PC版で提案した「優しいデザイン」を継承 */
    border: 2px dashed #eecbab; 
    background-color: #fffaf0;
  }

  .detail-section h4 {
    font-size: 16px;   /* スマホで見やすいサイズに */
    justify-content: flex-start; /* 左寄せにして読みやすく */
  }

  .detail-section p, 
  .detail-section li {
    font-size: 14px;   /* テキストが大きく感じすぎないように */
    line-height: 1.6;
  }

  /* 3. 誘導テキスト（ノイズを消して可愛くボタン化） */
  .scroll-induct {
    margin: 30px 0 50px;
  }

  .scroll-induct p {
    font-size: 16px;
    padding: 12px 25px;
    background-color: #d16b70; /* アクセントカラー */
    color: #fff;
    border-radius: 50px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(209, 107, 112, 0.2);
    /* ⇓⇓⇓ を整理してスッキリさせる */
  }
}


/* ============================================================
   5. Profileページ専用スタイル 
   ============================================================ */
/* 共通コンテナ */
.content-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px 100px; /* 下部に余白を確保 */
    text-align: center;
}

/* --- メインビジュアル --- */
.main-visual {
    position: relative;
    padding: 60px 10px 60px 50px;
    text-align: center;
    /* 楕円形の背景を作成 */
    z-index: 0;
    margin-top: 50px;
}

/* 疑似要素でオレンジの楕円形を作成 */
.main-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%; /* 画面幅より少し広く */
    max-width: 1200px;
    height: 100%;
    background-color: #fbbea7;
    border-radius: 30% / 90%; /* 楕円形にするための記述 */
    z-index: -1; /* コンテンツの後ろに配置 */
}

.main-visual-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto;
}

.main-copy {
    font-size: 36px;
    line-height: 1.8;
    color: darkblue;
    text-align: left;
    font-weight: bold;
}

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

.profile-img img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    /* 画像には白い枠線はないようなので削除しました */
}

.profile-name {
    font-size: 20px;
    color: rgb(198, 12, 161);
    font-weight: bold;
    margin-top: 15px;
}

/* --- リードテキスト --- */
.lead-text {
    font-size: 22px;
    color: rgb(198, 12, 161);
    line-height: 1.8;
    font-weight: bold;
    margin-bottom: 80px;
    margin-top: 32px;
}

/* --- セクション共通 --- */
.section-title {
    font-size: 40px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 32px;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: #1a3a8c;
}
/* セクション全体のラッパー */
.profile-stance-section {
    padding: 80px 20px;
    background-color: transparent; /* 背景色は全体のベージュ(#f9f9e3)が透けるように */
    margin-bottom: 60px; /* 下のセクションとの余白 */
}

/* コンテンツ幅制限と中央揃え */
.stance-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* --- タイトルエリア --- */
.stance-header {
    margin-bottom: 50px;
}

/* 英語タイトル (Yomogiフォント) */
.stance-title {
    font-family: 'Yomogi', cursive; 
    font-size: 3.5rem; /* インパクトのある大きさ */
    color: #10193a;    /* 既存の紺色系に合わせる */
    margin: 0 0 10px 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* 日本語サブタイトル (Noto Sans JP) */
.stance-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2rem;
    color: #d80ad2;    /* アクセントの茶色 */
    letter-spacing: 0.1em;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}

/* --- 本文エリア --- */
.stance-body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1a4a8e;    /* 既存のテキスト色(#1a3a8c)に統一 */
    line-height: 2.4;  /* ゆったりとした行間（既存の2.0より少し広くして「聴く」余白を表現） */
    font-size: 20px; /* 読みやすいサイズ */
    text-align: center;
    font-weight: 500;  /* 少しだけ太くして誠実さを出す */
}

/* 段落ごとの余白 */
.stance-body p {
    margin-bottom: 40px;
    font-size: 24px;
    
}
.profile-body {
    font-size: 20px;
    color: #1a4a8e;
}
.profile-intro-text{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #1a4a8e;
}

/* 最後の段落は余白なし */
.stance-body p:last-child {
    margin-bottom: 0;
}



.happy-text {
    color:#1a4a8e;
    font-size: 26px;
    background:linear-gradient(to right, #fcfce08f, #f596aa, #fcfce08f);
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px 15px 40px;
    border-radius: 50px; /* 丸みを持たせるとグラデーションが綺麗に見えます */
    font-weight: bold;
    text-decoration: none;
   
}

/* --- 区切り線 --- */
.section-divider {
    border: none;        /* 元々の線を消す */
    height: 4px;         /* 中心の「一番太い部分」の高さ */
    
    /* 左(透明) → 中央(ピンク) → 右(透明) に変化するグラデーション */
    background: linear-gradient(to right, transparent, rgb(167, 45, 169), transparent);
    
    margin: 60px auto;   /* 上下の余白 */
    width: 80%;          /* 画面いっぱいでなく、少し短めにすると上品です */
    max-width: 960px;
    opacity: 0.8;        /* 少し透明度を入れて馴染ませる */
}

/* --- 後半のセクション（できること、ツール、職歴） --- */
.section-content {
    font-size: 20px;
    line-height: 1.8;
    font-weight: bold;
    color: #1a3a8c;
    margin-bottom: 64px;
}

.floating-contact {
    position: fixed;   /* 画面に固定 */
    /* 右端から20px固定をやめて、中央からの位置に変更 */
    left: calc(50% + 300px); 
    /* 画面中央(50%)から右に400px。
       コンテンツの幅に合わせて400〜500の間で調整してみてください */
    bottom: 50px;      /* 下からの距離 */
    z-index: 100;      /* 通常の重なり順 */
    transition: z-index 0s;
}

.floating-btn {
   position: relative; 
    z-index: 2;        /* ボタンは「2階」 */
    /* (他の padding や background はそのまま) */
    display: block;
    background-color: rgb(184, 46, 168);
    color: #fff;
    text-align: center;
    padding: 20px 30px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.4;
    text-decoration: none;
    transition: transform 0.2s ease;
}


/* むさし君の固定配置 */
.fixed-musashi {
   position: absolute;
    left: -45px;
    bottom: -30px;
    width: 90px;
    z-index: 3;        /* ムサシ君は通常「3階」にいるので、ボタンより前 */
    pointer-events: none;
    transition: transform 0.2s ease, z-index 0s; /* z-indexは一瞬で変える */
}


.fixed-musashi img {
    width: 100%;
    height: auto;
    /* もし背景が白く残っている場合は、ここで少し加工もできます */
}


.floating-contact:hover .floating-btn {
   transform: scale(1.05); /* ボタンを1.05倍に */
  
}

.floating-contact:hover .fixed-musashi {
    transform: scale(0.8); /* 1.1倍に大きくする */
   z-index: 1; 
}

        /* ============================================================
            メディアスタイル（Profileページ）
        ============================================================ */
   /* --- スマホでボタンがはみ出さないように、これを追記 --- */
@media (max-width: 1000px) {
    .floating-contact {
        left: auto;    /* 中央寄せを解除 */
        right: 20px;   /* 右端固定に戻す */
    }
}
@media screen and (max-width: 768px){
    
   /* メインビジュアル */
   .main-visual {
        padding: 40px 20px;     /* 上下の余白を少し縮小 */
        position: relative;
        display: flex;          /* 中の要素を整列させる準備 */
        justify-content: center; /* 横方向の中央揃え */
        overflow: hidden;       /* 楕円がはみ出してもOKにする */
    }
    /* スマホでは楕円の形を調整 */
    .main-visual::before {
        width: 92%;             /* 100%から90%に減らし、左右に余白を作る */
        height: 100%;
        left: 50%;
        transform: translateX(-50%); /* 確実に真ん中に配置 */
        border-radius: 70px;    /* 楕円すぎるとスマホでは変に見えるので少し角丸に */
        background-color: #fbbea7;
       
    }
    .main-visual-inner {
      display: flex;
        flex-direction: column; /* 縦並び */
        align-items: center;    /* 中央揃え */
        padding: 0 20px;        /* 左右に少し余白を作る */
    }
    .main-copy {
      width: 100%;            /* 親要素の幅いっぱいに広げる */
        max-width: 320px;       /* ★ここがポイント！幅を制限することで、文字が溢れず改行されます */
        font-size: 24px;        /* 少し文字を小さくして収まりを良くする */
        text-align: center;     /* 中央揃え */
        line-height: 1.6;       /* 行間を少し空けて読みやすく */
        margin: 0 auto;         /* 確実に真ん中に配置 */
        word-break: break-all;  /* 念のため、長い単語があっても改行するように */
    }
    .main-copy br {
        display: none; /* スマホでは改行を無効化して自然な折り返しに */
    }
    .profile-info {
        margin-top: 20px;       /* テキストとの間に隙間を作る */
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 2;               /* 2番目に配置（テキストの下） */
    }
    /* 名前（by. ROCO）の調整 */
    .profile-name {
        font-size: 14px;
        margin-top: 8px;
        
    }
    .profile-img img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
    }
    /* 3. ★追加箇所：My Stance セクションの調整 */
    .profile-stance-section {
        padding: 50px 15px;
        margin-bottom: 40px;
    }

    .stance-title {
        font-size: 2.5rem; /* スマホ用にサイズダウン */
    }

    .stance-subtitle {
        font-size: 1rem;
    }

    .stance-body {
        font-size: 1rem;
        line-height: 2.0;
        text-align: left; /* 読みやすく左揃え */
        padding: 0 10px;
    }
    
    .stance-body p {
        margin-bottom: 30px;
        text-align: center !important; /* 文章の両端を揃える */
    }

    /* 各種テキストサイズ調整 */
    .lead-text {
       font-size: 18px;
        margin: 40px 0;
        
    }
    .section-title {
        font-size: 28px;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .profile-intro-text {
        font-size: 18px;
    }
    .profile-body p {
       font-size: 16px;
       color: #1a4a8e;
        text-align: center; /* 文章は左寄せが読みやすい */
        line-height: 1.9;
    }
   .happy-text {
    font-size: 18px;
    padding: 12px 25px;
   } 
    /* コンテンツ幅 */
    .content-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 区切り線 */
    .section-divider {
        margin: 40px auto;
        width: 90%;
    }

    /* フローティングボタン */
    .floating-btn {
        padding: 12px 20px;
        font-size: 14px;
        right: 15px;
        bottom: 15px;
    }
    .fixed-musashi {
        width: 60px;   /* スマホでは少し小ぶりに */
        right: 120px;  /* スマホのボタン位置に合わせて調整 */
        bottom: 1px;
    }
}


    /* ============================================================
    6. Contactページ専用スタイル 
    ============================================================ */
    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 60px 20px;
    }

    /* タイトルエリア */
    .section-title {
        text-align: center;
        font-size: 56px;
        font-weight: bold;
        margin-bottom: 20px;
        letter-spacing: 1px;
        color: #001f66;
    }


    .intro-text {
        text-align: center;
        font-size: 28px;
        line-height: 1.8;
        margin-bottom: 40px;
        color: darkgreen;
    }

    /* メッセージボックス（白い角丸の箱） */
    .message-box {
        background-color: #fffafb; /* ほんのりピンクがかった白 */
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        margin-bottom: 40px;
        font-weight: bold;
        line-height: 2;
    }
    .message-box p {
        font-size: 24px;
        color: #001f66;
    }

    .highlight-text {
        margin-top: 20px;
        color: #001f66;
        align-items: center;
    }

    /* インフォメーション（2カラム部分） */
    .info-grid {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 60px;
    }

    .info-card {
        background-color: #fffafb;
        border-radius: 15px;
        padding: 30px;
        width: 48%; /* 2つ並べるため */
        box-sizing: border-box;
        text-align: center; /* これを追加すると、中の文章もボタンも全て中央になります */
        
    }

    .info-card h3 {
        color: #2b3d91;
        font-size: 24px;
        text-align: center;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .info-card p {
        font-size: 20px;
        line-height: 1.8;
        font-weight: bold;
         color: #001f66;

    }
    .form-area h3 {
        font-size: 24px;
        color: #ec0396;
    }

    /* フォームエリア（ピンクの背景） */
    .form-area {
        background-color: #ffe6fa; /* 薄いピンク */
        border-radius: 15px;
        padding: 40px;
    }

    .form-title {
        text-align: center;
        color: #001f66;
        font-size: 1rem;
         margin-bottom: 30px;
        font-weight: bold;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        font-weight: bold;
        color: #001f66;
        margin-bottom: 8px;
        margin-left: 10px; /* 少し右にずらす */
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 15px;
        border: none;
        outline: none;
        border-radius: 5px;
        box-sizing: border-box; /* paddingを含めた幅にする */
        font-size: 1rem;
    }

    /* 送信ボタン */
    .form-submit {
        text-align: center;
        margin-top: 30px;
    }

    .form-submit button {
        background-color: #ef85a3; /* ボタンのピンク色 */
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        border: none;
        border-radius: 5px;
        padding: 15px 60px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .form-submit button:hover {
         opacity: 0.8;
    }
    /* お問い合わせフォーム内のプライバシーポリシー部分 */
    .form-privacy {
        margin-bottom: 20px;
        text-align: center; /* 中央寄せ */
         font-size: 0.9rem;
    }

    .form-privacy a {
        color: #1a2a40; /* 濃いめの紺色 */
        text-decoration: underline;
    }   

    .checkbox-label {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: 10px;
    }

    .checkbox-label input {
        margin-right: 10px;
        width: 18px; /* 少し大きめで押しやすく */
        height: 18px;
    }

    /* ============================================================
             メディアスタイル（Contactページ）
    ============================================================ */
    /* スマホ対応：画面が狭いときは縦並びにする */
@media (max-width: 768px) {
    .info-grid {
        flex-direction: column;
    } /* ← これが必要！ */

    .info-card {
        width: 100%;
    }
}