@charset "UTF-8";
/* CSS Document */
body {
    background-color: #EFFFFA;
    background-image: url('asset/top_bakpic_sp.png'); /* 画像のパスを指定 */
	background-position: center center; /* 画像を中央に配置 */
    background-attachment: fixed; /* これが画像を固定するプロパティ */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-size: cover; /* 画面全体を覆うように画像を拡大縮小 */
	overflow-x: hidden; /* 水平方向のはみ出しを非表示にする */
    margin: 0; /* bodyのデフォルトマージンをリセット */
    padding: 0; /* bodyのデフォルトパディングをリセット */	
}

/* 全ての要素にbox-sizingを適用しておくと便利です */
*,
*::before,
*::after {
    box-sizing: border-box;
}

#top-sec{
    height: auto;
    width: auto;
}

#top-sec-01 {
    position: relative;
    width: 100%;
    height: auto; /* コンテンツの高さに合わせて自動調整 */
    padding-top: 0; /* padding-top は不要 */
    max-height: 600px; /* 大きくなりすぎないように最大高さを設定（必要であれば調整） */
    overflow: hidden; /* はみ出した要素を非表示にする */
    margin-top: 10px;
    margin-bottom: -30px;
}

#top-pic01 {
    display: block;
    position: relative; /* absolute から relative に変更 */
    width: 95%; /* 親要素の幅に合わせてサイズ調整 */
    max-width: 95%;
    height: auto; /* 高さ自動調整 */
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    z-index: 1;
}

#top-pic02 {
    position: absolute;
    top: 26%; /* top-pic01 の上端から少し下に配置 */
    right: 2.5%; /* 親要素の右端から2%の位置に固定 */
    width: 17%; /* 親要素の幅に対してパーセンテージでサイズを指定 */
    height: auto;
    z-index: 2;
}

#top-sec-02 {
    display: flex;
    justify-content: center; /* これが水平方向の中央揃えを実現します */
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 7%;
}

#top-sec-02-1 {
    width: 50%; /* 親要素(top-sec-02)の幅の50%に設定 */
    height: auto;
    overflow: hidden;
	margin: 0;
}

#top-pic03 {
    width: 100%; /* top-sec-02-1の幅に対して90%に調整 */
    height: auto;
    margin: 0;
}

#top-pic04 {
    width: 100%; /* top-sec-02-1の幅に対して90%に調整 */
    height: auto;
    margin: 0;
}

#top-pic05 {
    width: 35%; /* top-sec-02の幅の40%に設定 (top-sec-02-1と合わせて約90%になるように調整) */
    height: auto;
	margin-left: 10px;
}

.namisen {
    width: 100vw; /* ビューポートの幅いっぱいに設定 */
    height: auto; /* 高さは元の比率を保つ */
    display: block; /* インライン要素のデフォルトマージンなどを排除 */
    margin-left: 0; /* 左マージンを0に設定 */
    margin-right: 0; /* 右マージンを0に設定 */
    margin-top: 10px; /* 上からの余白は維持 */
    margin-bottom: 0;
    padding: 0; /* パディングも0に設定 */
}

#sec01 {
    width: 100%;
    height: auto;
    background-color: #EFFFFA; /* 背景色を設定 */
    margin-top: 0px;
}

#sec01-1 {
    width: 100%;
    height: auto;
    padding-top: 15px;
}

.textstyle01 {
    margin: auto;
    font-family: "Kosugi Maru", sans-serif;
    text-align: center;
    font-size: 30px;
    color: #0F71B6; /* 文字色 */
    font-weight: 900; /* 極太 */
    text-shadow: 0 0 10px #E8DF00; /* 水平0, 垂直0, ぼかし20px, 色は#E8DF00 */
}

.textstyle01-1 {
    font-size: 20px;
}

#sec01-2 {
    margin: 0;
	padding-top: 5%;
	padding-bottom: 5%;
}

.textstyle02 {
    font-family: "Klee One", cursive;
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    line-height: 200%;
    color: #383838;
}

#sec01-3 {
    background-color: #FFFFFF; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: auto; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 10px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    margin: auto; /* 上下に30pxのマージン、左右は自動で中央揃え */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
}

.textstyle03 {
    font-family: "Klee One", cursive;
    font-size: 10px;
    text-align: center;
    color: #383838;
    margin: 0;
}

#sec01-4 {
    height: 60px;
}

.sanka-link {
    text-decoration: none; /* デフォルトの下線をなくす */
    color: inherit; /* テキストの色を親要素から継承するか、別途指定する */
    background-color: #EDA400; /* 元のsec01-4-1の背景色 */
    border-radius: 15px; /* 元のsec01-4-1の角丸 */
    height: 50px; /* 元のsec01-4-1の高さ */
    max-width: 90%; /* 元のsec01-4-1の最大幅 */
    width: fit-content; /* 元のsec01-4-1の幅設定 */
    margin: 30px auto; /* 元のsec01-4-1のマージン */
    display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    white-space: nowrap; /* テキストが改行されないようにする */
    padding-left: 2%;
    padding-right: 2%;
}

.sanka {
    display: flex; /* pタグを中央に寄せるためにFlexboxを維持 */
    justify-content: center;
    align-items: center;
    width: 100%; /* 親の幅いっぱいに広げる */
    height: 100%; /* 親の高さいっぱいに広げる */
}

.textstyle04 {
    font-family: "Kosugi Maru", sans-serif;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 900;
}

.kugirisen {
    background-color: #EFFFFA; /* 背景色を設定 */
    margin-top: 0px;
    text-align: center;
    height: 73px;
    position: relative; /* z-indexを有効にするために必要 */
    z-index: -1; /* 他のほとんどの要素よりも奥に配置 */
}

.kugirisen-img {
    width: 90%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

#sec02 {
    width: 100%;
    height: auto;
    background-color: #EFFFFA; /* 背景色を設定 */
    margin-top: 0px;
    display: block;
    text-align: center;
}

#sec02-1 {
    margin: auto;
    background-color: #FFFFFF; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: 95%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 10px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
}

.textstyle05 {
    color: #0F71B6;
    font-family: "Klee One", cursive;
    font-size: 18px;
    text-align: center;
    font-weight: 900;
    margin: 0;
}

.kugiriline {
    width: 90%;
    height: 3px; /* ★線の太さ★ ここで高さを指定します */
    background-color: #0F71B6; /* ★線の色★ ここで色を指定します */
    margin-left: auto;
    margin-right: auto;
}

.textstyle06 {
    font-size: 14px;
}

#sec02-2 {
    margin: auto;
    margin-top: 30px;
    background-color: #FFFFFF; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: 95%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 15px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
    text-align: center;
    display: block;
}

.syokaihyo {
    width: 100%; /* 親コンテナの幅 */
    display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
    align-items: flex-start; /* 子要素を上端に揃える（必要であれば調整） */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
    padding: 10px 0;
}

.syokaihyocell01 {
    width: 100%; /* 固定幅 */
    text-align: left; /* テキストが中央にくるように */
    flex-shrink: 0; /* 幅が200pxより縮まないように（重要） */
    margin: 0;
}

.syokaihyocell02 {
    flex-grow: 1; /* 残りのスペースを埋めるように広がる */
    min-width: 250px; /* 最小幅を設定して小さくなりすぎないように（必要であれば調整） */
    padding-left: 20px; /* .syokaihyocell01との間に少し余白を作る */
    width: 88%;
    margin: 0;
    border-left: 4px solid #FFDEDF; /* 同じく左側に線を追加 */
}

.textstyle07 {
    color: #383838;
    font-family: "Klee One", cursive;
    font-size: 14px;
    text-align: left; /* テキストを左揃えに */
    font-weight: 900;
    margin: 0;
    /* letter-spacingの自動調整は親要素のflexboxで調整するので、ここでは直接指定しません。
       手動で調整したい場合はここでletter-spacing: Xpx; を追加します。 */
}

.textstyle08 { /* HTMLに追加されているので、スタイルを設定します */
    color: #383838;
    font-family: "Klee One", cursive;
    font-size: 12px;
    line-height: 1.5;
    text-align: left; /* テキストを左揃えに */
    margin: 0;
}

.syokaihyocell03 {
    min-width: 250px; /* 最小幅を設定して小さくなりすぎないように（必要であれば調整） */
    padding-left: 20px; /* .syokaihyocell01との間に少し余白を作る */
    width: 100%;
    margin: 0;
    border-left: 4px solid #FFF2C0; /* 同じく左側に線を追加 */
}

.syokaihyocell04 {
    min-width: 250px; /* 最小幅を設定して小さくなりすぎないように（必要であれば調整） */
    padding-left: 20px; /* .syokaihyocell01との間に少し余白を作る */
    width: 100%;
    margin: 0;
    border-left: 4px solid #D6FFFF; /* 同じく左側に線を追加 */
}

#sec03 {
    width: 100%;
    height: auto;
    background-color: #EFFFFA; /* 背景色を設定 */
    margin-top: 0px;
    display: block;
    text-align: center;
}

.textstyle09 {
    margin: auto;
    font-family: "Kosugi Maru", sans-serif;
    text-align: center;
    font-size: 24px;
    color: #0F71B6; /* 文字色 */
    font-weight: 900; /* 極太 */
}

#sec03-1 {
}

.schedulecell{
    margin: auto;
    margin-top: 15px;
    background-color: #7AE7D8; /* 白い背景色 */
    border-radius: 50px; /* 角を15px丸くする */
    width: 90%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 5px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
    display: flex;
}

.schedulecell-2 {
    margin: auto;
    margin-top: 15px;
    background-color: #7AE7D8; /* 白い背景色 */
    border-radius: 50px; /* 角を15px丸くする */
    width: 90%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 5px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
    display: flex;
}

.schedulecell-time {
    margin: auto;
    background-color: #FFFFFF; /* 白い背景色 */
    border-radius: 50px; /* 角を15px丸くする */
    width: 60px; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 5px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
}

.schedulecell-com {
    margin: auto;
	margin-left: 10px;
    width: 85%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    text-align: left;
}

.textstyle10 {
    color: #383838;
    font-family: "Klee One", cursive;
    font-size: 12px;
    margin: 0;
    font-weight: 900;
    line-height: 100%;
}

#sec04 {
    width: 100%;
    height: auto;
    background-color: #EFFFFA; /* 背景色を設定 */
    margin: 0px;
}

#sec04-1 {
    margin: auto;
    background-color: #F5FCA5; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: 90%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 10px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
    margin-bottom: 30px;
}

#sec04-1-1 {
    display: flex;
    margin-top: 15px;
    justify-content: center; /* ★ここを追加★ 子要素を水平方向の中央に配置 */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    flex-wrap: wrap; /* 画面が狭い場合に折り返す */
}

#img01 {
    width: 30%;
}

.textstyle11 {
    font-size: 18px;
	text-align: center;
}

#sec04-2 {
    margin: auto;
    background-color: #F4E7FC; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: 90%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    padding: 10px; /* 内側にパディングを追加して、ボックス内に余白を作る */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
}

#sec04-2-1 {
    display: flex;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center; /* ★ここを追加★ 子要素を水平方向の中央に配置 */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    flex-wrap: wrap; /* 画面が狭い場合に折り返す */
    padding: 0;
}

#takanose-ink {
    width: 20%;
    height: 100%;
    display: flex;
}

#takanose {
    width: 100%;
    margin: 0;
    display: flex;
    /* text-align: center; はFlexboxのjustify-contentで制御するため、基本的には不要になります */

    /* ★ここを追加・変更★ */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
    align-items: center;     /* 子要素を垂直方向の中央に配置 */
    flex-wrap: wrap;         /* 画面が狭い場合に画像を折り返す（必要に応じて） */
    gap: 10px;               /* 画像間に隙間を作る（任意） */
}

/* img02とimg03はそれぞれのサイズ設定を維持します */
#img02 {
    height: 100%; /* 親の高さに合わせる */
    width: 100%;
	margin-top: 100%;
}

#img03 {
    width: 100px;
    height: auto; /* widthを設定したので、高さは自動調整されるようにautoを設定 */
    /* Flexboxの子要素として、必要であればflex-shrink: 0; なども検討 */
	margin: auto;
	margin-left: -30px;
}

.textstyle12 { /* HTMLに追加されているので、スタイルを設定します */
    color: #383838;
    font-family: "Klee One", cursive;
    font-size: 10px;
    text-align: left; /* テキストを左揃えに */
    margin-top: 0%;
    width: auto;
}

#sec05 {
    width: 100%;
    height: auto;
    background-color: #EFFFFA; /* 背景色を設定 */
    margin: 0px;
}

#gaiyohyo {
    margin: auto;
    margin-top: 30px;
    background-color: #FFFFFF; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: 90%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
    border: 3px solid #0F71B6;
    display: flex;
    align-items: stretch; /* 子要素の高さを揃える */
}

#gaiyohyo-l {
    margin: 0;
    margin-left: 5px;
	margin-right: 5px;
    width: 60px;
    display: flex; /* Flexboxコンテナにする */
    flex-direction: column; /* 子要素を縦に並べる */
    flex-shrink: 0; /* 縮まないようにする */
}

#gaiyohyo-r {
    margin: 0;
    padding-left: 10px;
    width: 100%; /* 必要に応じて調整 */
    border-left: 3px solid #0F71B6; /* 同じく左側に線を追加 */
    display: flex; /* Flexboxコンテナにする */
    flex-direction: column; /* 子要素を縦に並べる */
    flex-grow: 1; /* 残りのスペースを埋める */
}

/* 新しく追加する行のスタイル */
.gaiyohyo-row {
    align-items: center; /* 子要素（pタグ）を垂直方向の中央に配置 */
    min-height: 50px; /* 各行の最低限の高さを設定（コンテンツに合わせて調整） */
    padding: 10px 0; /* 各行の上下にパディングを追加 */
}

#img04 {
    margin: 15px 0; /* 上下のマージンを調整 */
    width: 200px;
    height: auto;
    display: block; /* imgをブロック要素にしてmargin: autoで中央寄せできるようにする */
}

#sec05-2 {
    margin: auto;
    margin-top: 30px;
    background-color: #FFFFFF; /* 白い背景色 */
    border-radius: 15px; /* 角を15px丸くする */
    width: 90%; /* 親要素の幅の80%に設定（必要に応じて調整） */
    max-width: 95%; /* ボックスが大きくなりすぎないように最大幅を設定 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加して浮き上がらせる（オプション） */
    text-align: center;
}

#sec06 {
    width: 100%;
    height: auto;
    background-color: #EFFFFA; /* 背景色を設定 */
    margin: 0px;
    position: relative; /* z-indexを有効にするために必要 */
    z-index: -1; /* 他のほとんどの要素よりも奥に配置 */
}

#sec06-1 {
    padding-top: 30px;
}

.textstyle13 {
    font-size: 14px;
}

#sec06-2 {
    padding-top: 30px;
}

#sec06-3 {
    padding-top: 30px;
    padding-bottom: 10px;
}

.textstyle14 {
    font-family: "Klee One", cursive;
    font-size: 8px;
    text-align: center;
    color: #383838;
    margin: 0;
}