/* --- 基本設定 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*
* { ... } （すべての要素）
    「ユニバーサルセレクタ」と呼ばれ、**ページ内にあるすべての要素（見出し、段落、画像、ボタンなど全部）**にこのルールを適用するという意味。
margin: 0; と padding: 0;
    ブラウザ（ChromeやSafariなど）は、最初から勝手に「見出しの外側にはこれくらい余白を空けよう」といった設定を持っています。
    margin: 0;：要素の「外側」の余白をゼロにする。
    padding: 0;：要素の「内側」の余白をゼロにする。
    これを行うことで、真っ白なキャンバスからデザインを始められるようになります。
box-sizing: border-box;　テキストp85
    これが一番の重要ポイントです。通常、要素の幅（width）を指定しても、あとからパディングや枠線を足すと、その分だけ要素が外側に膨らんでしまいます。　
設定なし（初期状態）：幅100px ＋ 左右パディング10px ＝ 合計120pxになる（計算が面倒！）
border-boxを指定：パディングや枠線を含めて「合計100px」に収めてくれる（計算がラク！）
 */


html {
    scroll-behavior: smooth;
}
/*
影響範囲が広いから: html はページ全体の親玉です。
まずは全体に関わるルール（スムーズスクロールやフォントの基本など）を上に書いておくと、
後から読み返した時に「あ、これはサイト全体の動きだな」と一目でわかります。
読み込みの順番: CSSは上から下に読み込まれます。スクロールの挙動のような「土台」の設定は、
早い段階でブラウザに伝えておくのが定石です。
この一行があるだけで、メニューをクリックした時に「パッ！」と切り替わるのではなく、
「スルスル〜」と目的地まで滑らかに移動するようになり、一気に「作った感」のある高級な仕上がりになります。 */


body {
    /* 游明朝を追加して、明朝体としての表示確率を高めます */
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "serif";
    line-height: 1.7;
    color: #333;
}
/*
「文字の読みやすさ」を整えるための設定。
    Webサイト全体の「文章の雰囲気」を決める非常に重要な部分。
font-family: "Hiragino Mincho ProN", serif;
    「どんなフォント（書体）で表示するか」を決めています。
    "Hiragino Mincho ProN"：日本語の「ヒラギノ明朝」という高級感のある美しい書体です。
    serif：もし指定したフォントがユーザーのパソコンに入っていない場合、代わりの「明朝体（セリフ体）」を使うという予備の設定です。
    印象：ゴシック体（角ばった文字）ではなく明朝体を使うことで、上品、和風、伝統的、あるいは信頼感のある印象になります。
line-height: 1.7;
    「行の高さ（行間）」の設定です。
    これは文字サイズの「1.7倍」の高さを1行分にする、という意味です。
    初期設定のままだと行間が詰まりすぎていて読みづらいため、1.5 〜 2.0 くらいに設定するのがWebデザインのセオリーです。
    効果：適度なスキマが生まれることで、長い文章でも目が疲れにくくなります。
color: #333;
    「文字の色」を濃いグレー（#333333）に設定しています。
    真っ黒（#000）を使わないのがポイントです。真っ白な背景に真っ黒な文字はコントラストが強すぎて、実は目に負担がかかります。
    効果：わずかに柔らかい黒にすることで、読み手に優しい印象を与えます。
webkit-text-size-adjust: 100%;
    「iPhoneなどのスマホ対策」
    iPhone（iOS）のSafariブラウザは、画面を横向きにしたときなどに、親切心で勝手に文字を大きくしてしまうクセがあります。
    効果：これを 100% に固定することで、勝手なサイズ変更を防ぎ、デザイナーが意図した通りの文字サイズを保ちます。
    ↓
    無しに */


/* ---（いけばなの写真4枚）ヘッダーのヒーローヘッダーの基盤調整--- */
    header {
        position: relative;
        /* 子要素を、このヘッダーを基準にして自由に配置できるようにするための「土台」の設定。 */
        /* ここでの position: relative; は、いわば**「背景スライダーを閉じ込めるための檻（おり）」**の役割を果たしています。 */
        height: 100dvh;
        overflow: hidden; /* 画像がはみ出さないように */
        
        color: white;
    }
/*
今回のコードは、Webサイトの「顔」となるメインビジュアル（ヒーローヘッダー）を画面いっぱいに表示させるための設定です。
スマホで見ても崩れず、背景画像がきれいに収まるように工夫されています。1つずつ見ていきましょう。
position: relative;
    「基準点」の設定です。
    この中に入れ子で配置する要素を、自由な位置に配置（position: absolute）したいとき、このヘッダーが「基準の枠」になります。
    子要素（.header-bg-slider）に position: absolute; を指定した場合、その子は「基準になる親」を探します。
    これがある場合： 背景スライダーは、この header の枠内を基準に動きます。
    これがない場合： 背景スライダーは親を見失い、ブラウザの画面全体（body）を基準にしてしまい、ヘッダーから飛び出してしまいます。
height: 100dvh;
    「画面ぴったり」にするための最新の指定です。
    dvh (Dynamic Viewport Height)：iPhoneなどのブラウザで、上下のツールバーが出たり消えたりしても、それを含めた「今見えている画面の高さ」に自動調整してくれます。
    効果：従来の 100vh で起きがちだった「下のボタンがツールバーに隠れて押せない」という問題を防げます。
    表示されている画面いっぱいの高さ（100%）にします。
    なぜ vh ではなく dvh か： スマホでブラウザのメニューバー（URL欄など）が出たり消えたりした際、その変化に合わせて高さを自動調整してくれます。
    「スマホで見た時に下のほうが少し切れる」という問題を解決する魔法の単位です。
画像に関する3つの設定
    これらはセットで使われることが多い「背景画像の鉄板設定」です。
    background-image: url(...);：背景に使う画像を指定します。
    background-size: cover;：画像の縦横比を保ったまま、隙間なく画面を埋め尽くすように拡大縮小します（一番重要な設定です）。テキストp162
    background-position: center;：画像の真ん中を基準に表示します。画面が横長でも縦長でも、大事な被写体が切れにくくなります。
display: flex; と flex-direction: column;
    「中身の並べ方」をコントロールします。
    display: flex;：中にある文字やボタンを、自由自在に配置できるようにします。
    flex-direction: column;：中身を**「上から下へ（垂直）」**並べます。
    ↓
    無し
color: white;
    「文字の色」を白にする。
    背景に写真（IMG_02.jpeg）を敷く場合、黒い文字だと読みにくくなることが多いため、白抜き文字にして視認性を高めています。 */


/* スライダー全体の枠 */
.header-bg-slider {
    position: absolute;/* 絶対配置にします。これを書くことで、他の要素（文字など）の位置を無視して、自由に配置できるようになります。 */
    top: 0;/* 配置のスタート地点を左上の角に固定します。 */
    left: 0;
    width: 100%;/* 横幅を親要素（ヘッダーなど）と同じいっぱいに広げます。 */
    height: 100%;/* 高さも親要素と同じいっぱいに広げます。 */
    z-index: -1; /* 重なりの順序を指定します。マイナスにすることで、文字やボタンよりも「後ろ（奥）」に隠れます。 */
}
/* このCSSコードは、特定の要素（ここでは背景のスライダーなど）を「親要素の枠いっぱいに広げて、一番奥の背面に配置する」ための設定です。
「中身（文字など）の邪魔をしないように、背景として敷き詰める設定」ですね。
それぞれのプロパティが何をしているのか、詳しく解説します。
この設定を使うと、Webサイトのヘッダーなどで「背景画像が動いている上に、タイトル文字が載っている」という状態が作れます。
注意点：親要素に「目印」が必要
このコードを正しく動かすには、この要素を囲っている親要素（例えば .header など）に position: relative; が書かれている必要があります。
親に relative がないと： 画面全体の左上に飛んでいってしまいます。
親に relative があると： その親要素の枠内だけでピッタリ背景になります。 */



/* 各スライドの共通設定 */
.slide {
    position: absolute;/* 絶対配置にします。これを書くことで、他の要素（文字など）の位置を無視して、自由に配置できるようになります。 */
    top: 0;
    left: 0;
    width: 100%;/* 横幅を親要素（ヘッダーなど）と同じいっぱいに広げます。 */
    height: 100%;/* 高さも親要素と同じいっぱいに広げます。 */
    background-size: cover;
    background-position: center;
    opacity: 0; /* 最初は透明 */
    animation: sliderAnime 35s infinite; /* 24秒かけてループ */
}

/* 各スライドの画像と開始タイミングの指定 */
/* 24秒（全体）÷ 4枚 ＝ 1枚あたり6秒の計算 */
.slide:nth-child(1) {
    background-image: url(../img/ikebana\ photo01.JPG);
    animation-delay: 0s;
}
.slide:nth-child(2) {
    background-image: url(../img/ikebana\ photo02.JPG); /* 追加画像1 */
    animation-delay: 7s;
}
.slide:nth-child(3) {
    background-image: url(../img/IMG_02.JPG); /* 追加画像2 */
    animation-delay: 14s;
}
.slide:nth-child(4) {
    background-image: url(../img/P108E0199.JPG); /* 追加画像3 */
    animation-delay: 21s;
}
.slide:nth-child(5) {
    background-image: url(../img/NZDME5911.JPG); /* 追加画像3 */
    animation-delay: 28s;
}

/* フェードイン・アウトのアニメーション フェードアウト時の拡大ありバージョン*/

@keyframes sliderAnime {
    0% { opacity: 0; transform: scale(1.0); } /* 開始：透明 */
    10% { opacity: 1; }                      /* 10%の地点でくっきり表示 */
    25% { opacity: 1; }                      /* 25%まで表示を維持 */
    35% { opacity: 0; transform: scale(1.05); } /* 35%で次の画像へ（少し拡大して動きを出す） */
    100% { opacity: 0; }                     /* 最後まで透明を維持 */
}


/* -------------------------------------------------------------------- */


.scrolldown {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.scrolldown span {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* 矢印部分：擬似要素で「>」を回転させて作成 */
.scrolldown::after {
    content: "";
    width: 12px;
    height: 12px;
    border-bottom: 1px solid #fff; /* 矢印の太さ */
    border-right: 1px solid #fff;
    transform: rotate(45deg); /* 45度回転させてV字にする */
    animation: arrow-move 2s infinite; /* ふわふわ動かす */
}

@keyframes arrow-move {
    0% { transform: translateY(0) rotate(45deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(15px) rotate(45deg); opacity: 0; }
}

/* -------------------------------------------------------------------- */
nav {
    padding: 20px 10px;
}
/* 「ナビゲーション（メニュー）周りの余白」を整えるための設定。
nav タグ（通常は「ホーム」「会社概要」などのメニューを囲む部分）に対して、内側のスペースを作っています。

padding: 20px 10px; の意味
padding に2つの数字を書いた場合、**「上下」と「左右」**をセットで指定したことになります。
    20px（最初の数字）：上下の余白。
        メニューの上下に少しスペースを作ることで、他の要素（ロゴや背景画像など）とくっつきすぎず、スッキリ見せることができます。
    10px（2番目の数字）：左右の余白。
        画面の端ギリギリに文字がこないように、左右にわずかな「あそび」を持たせています。
--------------------------------------------------------------------------- */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px; /* 少し狭める */
    flex-wrap: wrap; /* 画面幅が足りない時に折り返す設定 */
}

/* 今回のコードは、**「箇条書きのリストを、横並びのメニューボタンに変える」**ための非常に重要な設定です。
    HTMLの<ul>（リスト）は、通常だと縦に並んで黒丸（●）がつきますが、それを一気におしゃれなナビゲーションバーの形に整えています。
list-style: none;
    「黒丸（●）を消す」設定。
    デフォルトではリストの各項目の先頭に「・」がつきますが、メニュー画面では不要なため、これをスッキリ削除します。
display: flex;
    「魔法の横並び」設定。
    これ一行書くだけで、縦に並んでいたリスト項目（ホーム、会社概要、お問い合わせなど）が、左から右へピタッと横一列に並びます。
justify-content: center;
    「真ん中に寄せる」設定です。
    横並びになったメニュー全体を、画面の左端ではなく中央に配置します。
    これにより、ロゴの下などにバランスよくメニューが配置されるようになります。
gap: 15px;
    「項目同士のスキマ」の設定。
    コメントにもある通り、隣り合うメニューの間に15pxの空白を作ります。
    メリット：文字同士がくっつきすぎないので読みやすく、スマホで操作するときに「隣のボタンを間違えて押しちゃう！」というミスを防げます。
    ↓
    更に調整と追加
    gap: 10px
    flex-wrap: wrap;

適用前：画面の左側に「● ホーム」「● メニュー」と縦に並んでいる。
適用後：画面の中央に、程よい間隔を空けて「ホーム　メニュー　コンタクト」と綺麗に横に並ぶ。
------------------------------------------------------------------------------------- */

nav a {
    text-decoration: none;
    color: white;
    /* font-size: 0.8rem; */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    font-size: 0.75rem; /* スマホではさらに少し小さく */
    white-space: nowrap; /* 文字が途中で改行されないようにする */
}
/* 今回のコードは、ナビゲーションメニュー内の**「リンク文字（aタグ）」のデザインを仕上げる**ための設定です。
デフォルトの「青くて下線があるリンク」を、背景画像に馴染むおしゃれなデザインに変えています。
text-decoration: none;
    「下線を消す」設定です。
    ブラウザの標準設定では、リンクには必ずアンダーラインがつきますが、これ一行でスッキリ消去します。
    効果：文字がボタンやメニューの一部として、より洗練された見た目になります。
color: white;
    「文字の色を白」にします。
    前回の header の設定と同様、背景に画像があることを想定して、視認性の高い白を選んでいます。
font-size: 0.8rem;
    「少し小さめの文字サイズ」にします。
    1rem が標準サイズ（通常16px）なので、0.8rem はその80%の大きさです。(計算上12.8px）、0.75remだと12px？。
    効果：あえて少し小さめにすることで、主張しすぎない上品で繊細なナビゲーションになります。
text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    「文字の影（ドロップシャドウ）」の設定です。ここが一番のポイント！
    1px 1px：影を右に1px、下に1pxずらします。
    4px：影をどれくらい「ぼかす」か（数字が大きいほどふんわりします）。
    rgba(0,0,0,0.6)：黒色（0,0,0）の、透明度60%（0.6）の影です。
---------------------------------------------------------------------------------- */

/* ★ここを新しく追加：マウスをのせた時の動き */
nav a:hover {
    opacity: 0.7; /* 0.7（70%）の濃さにする（少し薄くなる） */
}

.header-main-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}
/* ヘッダーの中にある「Sogetsu-ryu 草月流　淡青いけばな教室」を、画面のど真ん中に配置するための設定。
flex-grow: 1;
    「余っているスペースを全部占有する」という設定です。
    前回のコードで header を display: flex;（縦並び）にしましたね。
    ナビゲーション（nav）が使っていない残りの画面の高さをすべてこの要素が引き受けるようになります。これによって、コンテンツが上下に広く使えるようになります。
display: flex; と flex-direction: column;
    **「この要素の中身（文字など）も縦に並べる」**という設定です。
    キャッチコピー（大きな文字）と説明文（小さな文字）などが上下にきれいに並ぶようになります。
justify-content: center; と align-items: center;
    **「上下左右、完全に真ん中へ」**寄せる設定です。
    justify-content: center;：縦方向（垂直）の真ん中に配置。
    align-items: center;：横方向（水平）の真ん中に配置。
    これにより、どんな画面サイズでもキャッチコピーが画面のド真ん中に来るようになります。
text-align: center;
    **「テキストを中央揃え」**にします。
    複数行にわたる文章がある場合、すべての行がセンターに揃い、見た目が整います。
padding: 0 20px;
    **「左右に少しだけ隙間を作る」**設定です。
    スマホなどで見たとき、長い文章が画面の端ピッタリにくっついてしまうのを防ぎ、読みやすくします。
------------------------------------------------------------------------------------------------- */
.header-main-text h1 {
    font-size: 1.8rem; /* スマホ向けに少し小さく */
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    line-height: 1.5;
}
/* 今回のコードは、ヘッダーの真ん中にドカンと構える「一番大きな見出し（キャッチコピー）」の装飾。
    パッと見た瞬間のインパクトと、読みやすさ（可読性）を両立させるための工夫が詰まっています。
font-size: 1.8rem;
    「文字の大きさ」の設定です。標準的な文字（16px）の1.8倍の大きさにしています。
    コメントにある通り、スマホの画面幅でもはみ出さず、かつ「タイトル」としてしっかり目立つ絶妙なサイズ感です。
letter-spacing: 0.2em;
    「文字と文字の間の間隔（字間）」を広げています。
    0.2em というのは、文字の高さの20%分、横に隙間を作るという意味です。
    効果：文字をギュッと詰めずにゆとりを持たせることで、高級感やモダンでゆったりとした雰囲気を演出します。
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    「強力な文字の影」の設定。
    前回のナビゲーション（aタグ）よりも、ぼかし具合（10px）を大きく、影の距離（2px）を少し離しています。
    効果：メインのタイトルなので、より深く・柔らかい影を落とすことで、背景画像から文字が浮き上がって見えるような立体感を出しています。
line-height: 1.5;
    「行の高さ」の設定。
    キャッチコピーが2行にわたった時、文字が重なったり詰まったりしないようにします。
    1.5 くらいの適度な隙間があると、短い言葉でもリズムよく読むことができます。
-------------------------------------------------------------------------------------------------------------- */

/* 画像の基本設定 */
.responsive-img {
    width: 100%;     /* 親要素の幅いっぱいに広がる */
    height: auto;    /* 縦横比を維持 */
    border-radius: 4px; /* 角を少し丸くすると今風になります */
}

/* 画像を囲む枠（コンテナ）の設定 */
.image-group {
    display: flex;       /* 横並びにする指示 */
    flex-direction: column; /* 【初期設定】スマホでは縦に並べる */
    gap: 20px;          /* 画像と画像の間隔 */
    margin: 20px 0;     /* 上下の余白 */
}

/* パソコン画面（横幅が768px以上）の場合の設定 */
@media (min-width: 768px) {
    .image-group {
        flex-direction: row; /* 横並びに変更 */
    }
    
    .image-group img {
        width: calc(50% - 10px); /* 2枚を50%ずつ（隙間分を引く）配置 */
    }
}

/* --------------------------------------------------------------- */

.school-name-en {
    font-size: 1rem;
    letter-spacing: 0.3em;
    margin-bottom: 10px;
}
/* 今回のコードは、メインの見出し（h1など）に添える**「英語のサブタイトル」や「補足的な名称」**を整えるための設定です。
    メインの大きな文字の上や下に配置される、少し控えめながらもおしゃれなアクセントを作る役割を持っています。
font-size: 1rem;
    「文字の大きさ」の設定。
    1rem はブラウザの標準的なサイズ（通常16px相当）です。
    メインの見出し（先ほどの1.8rem）よりも一回り小さくすることで、情報の優先順位をはっきりさせ、デザインにメリハリ（ジャンプ率）をつけています。
letter-spacing: 0.3em;
    「文字の間隔（字間）」の設定です。ここがデザインのポイント
    先ほどの見出し（0.2em）よりもさらに広い 0.3em を指定しています。
    効果：英語のテキスト（特に大文字など）は、このようにあえてスカスカに広げることで、洗練された「ロゴっぽい」雰囲気や、高級感を演出できます。
margin-bottom: 10px;
    「下の要素との距離」の設定。
    この要素のすぐ下にある文字（例えば日本語の大きなタイトルなど）との間に、10pxの隙間を作ります。
    効果：文字同士がくっついて読みづらくなるのを防ぎ、それぞれの言葉を独立して認識しやすくします。 */
 /* ---------------------------------------------------------------------------- */


 /* --- コンテンツエリア --- */
/* HTML　class="section-title"　部分の「見出し」「草月とは」「Lesson Info」「Plofile」「Gallery」「access」「Contact」の外枠部分の設定 */
.section-container {
    padding: 100px 20px; /* スマホで見やすい余白 */
    max-width: 1000px;/* 最大幅を1000pxに制限する */
    margin: 0 auto;/* この箱自体を真ん中に置く */
    text-align: center;
}
/* 今回のコードは、ヘッダー（画面の一番上）を抜けた後に出てくる、**「各コンテンツ（セクション）を包む外枠」**の設定です。
中身の文章や画像がバラバラに散らばらないよう、きれいに整列させるための「透明なコンテナ（箱）」を作っています。

padding: 60px 20px;
    「上下と左右の内側の余白」の設定です。
    60px（上下）：前のセクション（ヘッダーなど）と、次のセクションとの間にしっかりとした「間（ま）」を作ります。
    →さらに余裕をもたせて100pxにした。
    20px（左右）：スマホで見たときに、文字が画面の両端ピッタリにくっついて窮屈に見えるのを防ぎます。
max-width: 1000px;
    「最大幅を1000pxに制限する」という設定。
    これが非常に重要です！パソコンのような大きな画面で見ても、コンテンツが横に広がりすぎないようにします。
    効果：横長になりすぎると視線の移動距離が増えて読みづらくなりますが、これによって「読みやすい横幅」が保たれます。
margin: 0 auto;
    「この箱自体を真ん中に置く」という設定。
    上下の余白は 0 にし、左右の余白を auto（自動）にすることで、ブラウザが左右に均等なスペースを空けてくれます。
    効果：どれだけ大きなモニターで見ても、コンテンツが常に画面の中央にどっしりと配置されます。
4. text-align: center;
    「中身を中央揃え」にする設定。
    このコンテナの中にある見出しや文章、画像などがすべてセンターラインに沿って配置されるようになります。
まとめ：このコードでできること
    この .section-container を使うことで、サイト全体に「統一感」が生まれます。
    パソコンで見ると、画面中央にちょうど良い幅でコンテンツが並ぶ。
    スマホで見ると、左右に適切なスキマがあって読みやすい。
    上下にたっぷりと余白があるため、ゆったりとした高級感のあるレイアウトになる。
------------------------------------------------------------------------------------------ */

.section-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #ccc;
    display: inline-block;
}
/* 今回のコードは、各セクションの始まりを示す
    HTML　class="section-title"　部分の「見出し」「草月とは」「Lesson Info」「Plofile」「Gallery」「access」「Contact」のデザイン。
    シンプルながらも、下線を引いたり余白を調整したりすることで、「ここから新しい話題が始まりますよ」という合図を伝えている。
font-size: 1.5rem;
    「見出しの大きさ」設定。
    標準的な文字（1rem）の1.5倍のサイズです。
    ヘッダーのメインタイトル（1.8rem）よりは小さく、本文よりは大きいサイズにすることで、ページ内の情報の階層（優先順位）をはっきりさせています。
margin-bottom: 30px;
    「下の要素（本文など）との距離」。
    タイトルのすぐ下に文章がくっつかないよう、30pxの空きを作ります。
    効果：適度な距離を置くことで、タイトルが際立ち、スッキリとした印象になります。
letter-spacing: 0.1em;
    「文字の間隔」設定。
    わずかに（10%分）文字の間を広げています。
    効果：これまでの設定と同様、少し広げるだけで「ただ打ち込んだだけの文字」から「デザインされたタイトル」へと雰囲気が変わります。
border-bottom: 1px solid #ccc;
    「下線を引く」設定です。
    太さ1pxの、直線（solid）で、薄いグレー（#ccc）の線を表示します。
    効果：文字の下に線があることで、視覚的な区切りが明確になります。
display: inline-block;
    これがこのコードの**「隠れた主役」**です！
    本来、見出し（h2など）は横幅いっぱいまで広がってしまう性質があります。そのまま下線を引くと、文字が短くても画面の端まで線が伸びてしまいます。
    効果：これを指定することで、**「文字の長さに合わせて下線の長さもピッタリ止まる」**ようになります。
まとめ：このコードの狙い
    この .section-title を使うと、以下のような見出しになります。
    文字の長さと同じ長さの下線が、薄いグレーでスッと引かれている。
    文字同士に少しゆとりがあり、誠実で清潔感のある印象。
    下の本文との間に十分なスペースがあり、非常に読みやすい。
---------------------------------------------------------------------------------------------------------------------- */

.bg-light { background-color: #f4f7f9; }
/* .bg-light { background-color: #f9f9f9; } */
/* .bg-light { background-color: #f9f8f4; }
.bg-light { background-color: #f2f2f2; } */
/*
「ほんのりと明るい背景色」をつけるための設定。
    これはWebデザインでよく使われる手法で、ページが単調になるのを防ぐ非常に効果的な「隠し味」のようなもの。
.bg-light（クラス名）
    「Background Light（明るい背景）」の略称として使われています。
    このように、特定の役割を持たせた短いクラス（ユーティリティクラス）を作っておくと、HTML側でこの名前を書き込むだけで、
    どこにでも同じ背景色を使い回せるので便利です。
background-color:
    #f9f9f9;「ごくわずかにグレーがかった白」**を指定しています。
    #ffffff：真っ白
    #f9f9f9：今回の色（非常に薄いグレー）
        ↓更に調整
    #f4f7f9：淡青（アクア）教室名のイメージを視覚的に補完する
        一見すると白に見えますが、真っ白なセクションと並べると、その違いがはっきりと分かります。
まとめ：なぜこの設定が必要なの？
    ずっと白い背景が続くと、ユーザーは「どこまでが一つの話（セクション）なのか」が直感的に分かりづらくなります。
    セクションの切り替えを強調：
        「白いセクション」→「薄いグレーのセクション（.bg-light）」→「白いセクション」と交互に配置することで、スクロールしている最中に**「あ、ここから別の話題だな」**と視覚的にリズムが生まれます。
高級感と安心感：
    真っ白すぎると目が疲れやすいですが、こうした微妙なニュアンスのグレーを挟むことで、サイト全体に落ち着いた、丁寧な作り込み感が出ます。
    これでデザインに「リズム」をつける準備ができましたね！
------------------------------------------------------------------------------------------------------------------- */

/* --- 画像レイアウトのスマホ最適化 --- */

/* 今回のコードは、「複数の画像を並べるための土台」の設定。
    ポイントは、「まずはスマホでの見え方を優先して作っている」という点。
    最近のWeb制作では一般的な「モバイルファースト」という考え方が反映されています。
display: flex;
    「中身を自由に並べる」設定。
    これを指定することで、中にある画像たちを縦や横に自在にコントロールできるようになります。
flex-direction: column;
    「中身を上から下に（垂直に）並べる」設定。
    なぜこれが必要か：スマホの画面は横幅が狭いため、画像を横に並べると一つ一つが小さすぎて見えなくなってしまいます。
    効果：スマホで見るときは、画像が1枚ずつ縦に積み重なるように表示され、画面をスクロールしながらしっかり画像を確認できるようになります。
gap: 15px;
    「画像と画像の間隔」の設定。
    画像同士がピタッとくっつかないよう、15pxの隙間を作ります。
    効果：ほどよい余白があることで、それぞれの画像が独立して見え、スッキリとした清潔感のある印象になります。
まとめ：このコードの役割
    この .image-row は、画像が並ぶエリアの「交通整理」をしています。
    スマホ対策：無理に横に並べず、縦に並べることで見やすさを確保。
    適切な余白：gap を使って、上下の画像がくっつくのを防ぐ。*/
/*------------------------------------------------------------------------------------- */


.image-row {
    display: flex;
    flex-direction: column;
    align-items: center;    /* ★これが重要：子要素を水平方向の真ん中に寄せる */
    gap: 15px;
    margin-top: 30px;       /* 画像との間に少し隙間を作る */
}

/* リンクをボタンらしく装飾する場合（おすすめ） */
.external-link {
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #333; /* 下線でおしゃれに */
    padding-bottom: 5px;
    transition: opacity 0.3s;
}

.external-link:hover {
    opacity: 0.6; /* マウスを乗せた時に少し薄くする */
}

.placeholder-box {
    background-color: #eee;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}
/* 今回のコードは、「まだ写真が決まっていない場所」や「仮の画像を入れる場所」を作るための、いわゆる「プレースホルダー（仮置き箱）」の設定。
    制作途中のサイトで「ここに画像が入りますよ」と分かりやすく示すための便利なパーツ
background-color: #eee;
    「薄いグレー」の背景色です。
    前回の #f9f9f9 よりも少しだけ濃いグレーです。
    効果：真っ白ではない色をつけることで、そこが「何らかのコンテンツが入るエリア」であることを視覚的に示します。
width: 100%; と min-height: 200px;
    「横幅はいっぱいに、高さは最低限確保する」設定。
        width: 100%：親要素（コンテナ）の幅に合わせて、横いっぱいに広がります。
        min-height: 200px：中身が空っぽでも、最低でも200pxの高さは維持します。
    効果：中身（画像など）がまだなくても、レイアウトが潰れずに表示されます。
display: flex; と align-items: center; / justify-content: center;
    「中身の文字を真ん中に置く」ための鉄板セットです。
    これにより、箱の中に書いた「Image」や「Coming Soon」といった文字が、上下左右のど真ん中に配置されます。
color: #999;
    「文字の色を中間のグレー」にします。
    背景の #eee に対して、目立ちすぎず、かつ読める程度の薄いグレーです。
    効果：あくまで「仮」であることを強調し、デザインの邪魔をしない控えめな見た目になります。
まとめ：このコードの使い方
    このクラスは、開発中に以下のような場面で大活躍します。
    写真撮影がまだ終わっていないけれど、全体のレイアウトを確認したいとき。
    画像が読み込めなかったときの予備の箱として。
    広告スペースやバナー位置のシミュレーション。
    これでサイトの「空き地」も綺麗にデザインされました！
----------------------------------------------------------------------------------------*/


/* ギャラリー全体のレイアウト設定 */
.gallery-grid {
    display: grid;
    /* 150px以上の幅で、入る分だけ横に並べる（自動折り返し） */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px; /* 写真の間の隙間 */
    padding: 20px 0;
}

/* 各写真の枠の設定 */
.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden; /* はみ出し防止 */
    border-radius: 4px; /* 角を少し丸くするとおしゃれです（任意） */
}

/* 写真自体のサイズ・切り抜き設定 */
.gallery-item img {
    width: 100%;
    height: 250px;      /* ここで高さを固定します */
    object-fit: cover;  /* 重要：比率を保ったまま枠いっぱいに表示 */
    transition: transform 0.3s ease; /* マウスを乗せた時の動き用 */
    vertical-align: bottom;
}

/* マウスを乗せた時に少し大きくする演出（任意） */
.gallery-item img:hover {
    transform: scale(1.05);
}

/* -----------------------------------------------------------------------*/

/* リスト形式のデザイン例 */
.info-list {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}
.info-list dt {
    font-weight: bold;
    border-left: 4px solid #668ad8; /* アクセントカラー */
    padding-left: 10px;
    margin-top: 20px;
}
.info-list dd {
    margin-left: 0;
    padding: 10px 0 10px 15px;
    border-bottom: 1px dotted #ccc;
}
.info-list dd span {
    font-size: 0.9em;
    color: #666;
}

/* -----------------------------------------------------------------------------*/

/* プロフィール全体のレイアウト */
.profile-flex {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 30px;
    align-items: center;
    margin-top: 20px;
}

.profile-image img {
    width: 100%;
    max-width: 300px; /* 写真の最大幅 */
    border-radius: 5px; /* 角を少し丸く */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽い影でおしゃれに */
}

.profile-text {
    text-align: left;
    flex: 1;
}

.instructor-name {
    font-size: 1.5rem;
    margin-bottom: 5px;
    border-bottom: 1px solid #acc9e8; /* 淡い青色の下線 */
    display: inline-block;
}

.instructor-name span {
    font-size: 0.9rem;
    color: #666;
}

.instructor-title {
    font-weight: bold;
    color: #555;
    margin-bottom: 15px;
}

.biography {
    line-height: 1.8;
    margin-bottom: 20px;
}

.career {
    list-style: square;
    padding-left: 20px;
    font-size: 0.9rem;
    color: #444;
}

/* PCサイズ（768px以上）の設定 */
@media (min-width: 768px) {
    .profile-flex {
        flex-direction: row; /* 横並びにする */
        align-items: flex-start;
    }
    
    .profile-text {
        padding-left: 20px;
    }
}
/* -----------------------------------------------------------------------------*/

.map-container {
    width: 100%;
    max-width: 800px; /* ギャラリーなどの幅に合わせる */
    margin: 0 auto 30px;
    line-height: 0;
    border-radius: 8px; /* 他の画像と同様に角を丸く */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 柔らかな影 */
}

.map-container iframe {
    width: 100%;
    height: 400px; /* PCでの高さ */
    /* ここがポイント：地図の色味を少し抑えて上品に */
    filter: sepia(0.2) grayscale(0.2) contrast(0.9) opacity(0.8);
}




@media (max-width: 768px) {
    .map-container iframe {
        height: 300px; /* スマホでは少し低く */
    }
}

.external-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    border: 1px solid #333;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
}
/*
「草月流公式サイト」の設定です。
    ただの文字リンクではなく、枠線で囲むことで「クリックできるボタン」としての存在感を出している。
display: inline-block;
    「ボタンらしく振る舞わせる」ための設定。
    本来、リンク（aタグ）は「文字」と同じ扱いなので、上下の余白（marginやpadding）が正しく効かないことがあります。
    効果：これを指定することで、幅や高さを持ち、上下の余白もしっかり反映される「一つの部品（ボタン）」として扱えるようになります。
margin-top: 20px;
    「上の要素との距離」。
    地図や説明文のすぐ下にボタンがくっつかないよう、20pxのスペースを空けた。
padding: 10px 20px;
    「ボタンの内側の余白」。
    文字の周りに「上下10px・左右20px」のスペースを作ることで、窮屈ではない、押しやすいサイズのボタンにした。
border: 1px solid #333;
    「枠線」の設定。
    太さ1pxの、直線（solid）で、濃いグレー（#333）の線を引く。
    効果：これによって、背景が白くても「ここがボタンの範囲だ」と一目でわかるようになる。
text-decoration: none; と color: #333;
    「リンク特有の見た目を消す」設定。
text-decoration: none;：リンクの下線を消します。
color: #333;：リンク標準の青色ではなく、枠線と同じ濃いグレーにします。
    効果：サイト全体の落ち着いた雰囲気に合わせた、シンプルなボタンデザインになります。
font-size: 0.9rem;
    「文字サイズ」の設定。
    標準よりわずかに小さくすることで、主張しすぎない上品なボタンになります。
まとめ：
    この設定を適用すると、「シンプルで洗練された、枠線タイプのボタン（ゴーストボタン風）」が完成します。
    清潔感がある：塗りつぶしではなく枠線のみなので、デザインが重くなりません。
    分かりやすい：適切な余白と枠線により、ユーザーが迷わずクリックできる。
------------------------------------------------------------------------------------------- */

/* --- お問い合わせエリア（CTA） --- */
.contact-cta {
    background-color: #f0f4f8; /* 非常に薄い青 */
    padding: 80px 20px;
    text-align: center;
}

.contact-cta p {
    margin-bottom: 30px;
    font-size: 0.95rem;
    color: #555;
}

/* お問い合わせボタン */
.contact-button {
    display: inline-block;
    background-color: #acc9e8; /* 教室のアクセントカラー */
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 2px;
    font-size: 1rem;
    letter-spacing: 0.1em;
    transition: background-color 0.3s;
}

.contact-button:hover {
    background-color: #8fb4d8; /* ホバー時に少し濃く */
}

/* --- フッター内のInstagramアイコン --- */
.footer-sns {
    margin-bottom: 25px;
}


.insta-icon:hover {
    opacity: 1;
}

/* ロゴアイコンのサイズと見た目 */
.insta-icon {
    width: 32px;  /* ロゴの横幅 */
    height: 32px; /* ロゴの高さ */
    transition: opacity 0.3s; /* マウスを乗せた時にふわっとさせる */
    vertical-align: middle;
}

/* マウスを乗せた（ホバー）時の演出 */
.insta-link:hover .insta-icon {
    opacity: 0.7; /* 少し透明にして「押せる」感を出します */
}

/* 以前のfooter-navの調整 */
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin-bottom: 25px;
    flex-wrap: wrap; /* スマホで折り返せるように */
}

footer {
    background-color: #f4f4f4; /* 少し色をつけて区切りを明確に */
    padding: 60px 20px 20px;
    text-align: center;
}

.footer-logo {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    color: #333;
}

.footer-nav a {
    text-decoration: none;
    color: #666;
    font-size: 0.8rem;
}

.footer-nav a:hover {
    color: #acc9e8; /* マウスを乗せた時に淡い青に */
}

/* ----------------------------------------------- */

/* SNSエリア全体の調整 */
.footer-sns {
    margin: 20px 0;
    text-align: center;
}

/* ------------------------------------------------*/

.footer-address {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 30px;
}

.footer-links {
    text-decoration: none;
    color: #666;
    font-size: 0.8rem;
}

.footer-links a:hover {
    color: #acc9e8; 
/* マウスを乗せた時に淡い青に */
}


/* プライバシーポリシーのリンク設定 */
.footer-links a {
    text-decoration: none; /* 下線を消す */
    color: #333;           /* 文字の色（お好みに合わせて調整してください） */
    font-size: 0.8rem;     /* 文字の大きさ */
}

/* マウスをのせた時に少し薄くする（必要であれば） */
.footer-links a:hover {
    opacity: 0.7;
}

/* リンクの下に余白を作る */
.footer-links {
    margin-bottom: 30px; /* 下方向への余白の大きさ */
}






.copyright {
    font-size: 0.6rem;
    color: #aaa;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

/* --- PCなど大きな画面用の調整（タブレット以上） --- */
@media (min-width: 768px) {
    .header-main-text h1 { font-size: 3rem; }
/*     .image-row { flex-direction: row; } 
 */    /* PCでは横に並べる */
    nav a { font-size: 1rem; gap: 30px; }
    .gallery-grid { grid-template-columns: repeat(4, 1fr); } /* PCでは4列 */
}
/* 今回のコードは、Webデザインにおいて欠かせない「レスポンシブ・デザイン（画面サイズに応じた切り替え）」の設定。
    @media (min-width: 768px) というのは、「画面の幅が768px（一般的なタブレットやPC）以上になった時だけ、中身のルールを適用する」という指示。
.header-main-text h1 { font-size: 3rem; }
    「メインタイトルの巨大化」
    スマホでは 1.8rem だった見出しを、PCではドカンと 3rem（約3倍） まで大きくします。
    効果：大きなモニターで見ても見劣りしない、迫力あるメインビジュアルになります。
.image-row { flex-direction: row; }
    「横並びへの切り替え」
    スマホでは縦に積んでいた画像を、PCでは row（横方向） に並べ替えます。
    効果：PCの広い画面幅を有効活用し、1画面で見られる情報量を増やします。
nav a { font-size: 1rem; gap: 30px; }
    「ナビゲーションの調整」
    文字を標準サイズ（1rem）に戻し、項目同士の間隔（gap）を30pxと広めに取ります。
    効果：マウスで操作するPC環境に合わせて、ゆったりとした押しやすいメニューになります。
.gallery-grid { grid-template-columns: repeat(4, 1fr); }
    「4列のタイル表示」
    スマホで2列（1fr 1fr）だったギャラリーを、PCでは 4列 に増やします。
    repeat(4, 1fr) は「同じ幅を4回繰り返す」という便利な書き方です。
    効果：たくさんの写真を一度に綺麗に見せることができ、一気に「ギャラリーサイト」らしいプロっぽい見た目になります。
まとめ：このコードの狙い
    この一塊のコードがあるおかげで、サイトは**「スマホでは見やすく、PCではダイナミックに」**という二つの顔を持つようになります。
    デバイス最適化：画面が広くなった分だけ、文字を大きくし、横並びを活用する。
プロ仕様のレイアウト：単に引き伸ばすのではなく、列の数を変えるなど「構成」そのものを最適化している。
スマホ用の基本設定から、PC用の切り替えまで完璧に網羅されています。
---------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* --- プライバシーポリシーページ専用の調整 --- */

/* ヘッダーの高さを少し低くする */
.policy-header {
    height: 40dvh; /* メインページより低く設定 */
    background-color: #a5c8e0;
    display: flex;
    flex-direction: column;
}

/* 規約文が入る「箱」の調整 */
.policy-content {
    text-align: left; /* 規約なので左揃えにして読みやすく */
    max-width: 700px; /* 横に広がりすぎないように制限 */
    margin: 0 auto;
    line-height: 2;
}

.policy-content h3 {
    font-size: 1.1rem;
    margin: 40px 0 15px;
    border-left: 3px solid #333; /* 見出しの左に縦線を入れてアクセントに */
    padding-left: 15px;
    font-weight: bold;
}

.policy-contact {
    margin-top: 40px;
    padding: 20px;
    background-color: #f4f7f9; /* 教室サイトの薄いグレーと合わせる */
    border-radius: 4px;
}

/* --------------------------------------------------------------------------- */

/* --- お問い合わせフォーム --- */

.sophisticated-form {
    max-width: 800px;
    margin: 40px auto 0;
    text-align: left; /* フォーム内は左揃え */
}

/* フォームの各行の区切り */
.form-row {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee; /* 軽い区切り線 */
    padding-bottom: 20px;
}

/* ラベルのスタイル */
.form-label {
    margin-bottom: 10px;
}

.form-label label {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: #444;
}

/* 必須タグ */
.required-tag {
    font-size: 0.7rem;
    background: #f4f7f9;
    color: #acc9e8; /* 淡青色 */
    padding: 2px 8px;
    margin-left: 10px;
    border-radius: 2px;
    vertical-align: middle;
}

/* 入力欄の共通スタイル */
.form-input input[type="text"],
.form-input input[type="email"],
.form-input input[type="tel"],
.form-input textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 0; /* 角を丸くせずシャープに */
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s;
    outline: none;
}

/* フォーカス時の動き */
.form-input input:focus,
.form-input textarea:focus {
    background-color: #fff;
    border-color: #acc9e8;
    box-shadow: 0 2px 8px rgba(172, 201, 232, 0.2);
}

/* ラジオボタンのグループ */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
}

.radio-label input[type="radio"] {
    margin-right: 10px;
    accent-color: #acc9e8; /* ラジオボタンの色を淡青に */
}

/* プライバシー同意エリア */
.form-privacy-consent {
    text-align: center;
    margin: 50px 0 30px;
    font-size: 0.9rem;
}

.form-privacy-consent a {
    color: #acc9e8;
    text-decoration: underline;
}

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

.checkbox-label input {
    margin-right: 10px;
    accent-color: #acc9e8;
}

/* 送信ボタンの進化版 */
.form-submit-area {
    text-align: center;
}

.sophisticated-btn {
    position: relative;
    display: inline-block;
    background-color: #333; /* 落ち着いた黒 */
    color: #fff;
    padding: 20px 60px;
    border: none;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s;
    overflow: hidden;
}

.sophisticated-btn:hover {
    background-color: #acc9e8; /* ホバーで淡青に */
    padding-right: 80px; /* 少し伸びる演出 */
}

/* --- PC用のレイアウト調整 (768px以上) --- */
@media (min-width: 768px) {
    .form-row {
        display: flex;
        align-items: flex-start;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 40px;
    }

    .form-label {
        width: 30%; /* 左側に30%のスペース */
        padding-top: 12px;
        margin-bottom: 0;
    }

    .form-input {
        width: 70%; /* 右側に70%の入力欄 */
    }

    .radio-group {
        flex-direction: row; /* PCでは横並びに */
        flex-wrap: wrap;
        gap: 20px;
    }
}

/* --- フォーム専用スタイル (style.cssの末尾に追記) --- */

.wpcf7-form {
    max-width: 600px;
    margin: 40px auto 0;
    text-align: left;
}

.form-item {
    margin-bottom: 24px;
}

.form-item label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.form-item .required {
    background: #999;
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 6px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 2px;
}

/* 入力フィールドの調整 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
    background: #fdfdfd;
    transition: border-color 0.3s;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #333;
}

/* 同意チェックボックス */
.form-policy {
    text-align: center;
    margin: 40px 0;
    font-size: 0.85rem;
}

.form-policy a {
    color: #333;
    text-decoration: underline;
}

/* 送信ボタン（淡青さんの世界観に合わせてシンプルに） */
.form-submit {
    text-align: center;
}

.submit-button {
    background: #333;
    color: #fff;
    padding: 18px 60px;
    border: none;
    cursor: pointer;
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    letter-spacing: 0.2em;
    transition: background-color 0.3s, opacity 0.3s;
}

.submit-button:hover {
    background: #000;
    opacity: 0.8;
}

/* PC向け：ラベルと入力を横並びにする場合は下記を有効に */
@media (min-width: 768px) {
    .form-item {
        display: flex;
        align-items: flex-start;
    }
    .form-item label {
        width: 180px;
        padding-top: 12px;
        margin-bottom: 0;
    }
    .wpcf7-form input,
    .wpcf7-form select,
    .wpcf7-form textarea {
        flex: 1;
    }
}