@charset "UTF-8";
/* CSS Document */

/* 1. 基本設定（白飛び防止） */
html { background-color: #ffffff; }
body {
    margin: 0; padding: 0;
    opacity: 1 !important; /* ロゴを見せるため */
    background-color: transparent !important;
    display: flex; flex-direction: column; min-height: 100vh;
    overflow-x: hidden;
}

/* 2. ページ全体のフェードイン・アウト */
/* 幕が開いたときに出したい要素をすべて隠しておく */
.hero, .main-content-sheet, .site-footer, .bg-animations, .scroll-down {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
/* 表示の合図 */
body.is-visible .hero,
body.is-visible .main-content-sheet,
body.is-visible .site-footer,
body.is-visible .bg-animations,
body.is-visible .scroll-down {
    opacity: 1 !important;
}
/* 去る時の合図 */
body.fade-out {
    opacity: 0 !important;
    transition: opacity 1.0s ease-in-out !important;
}

/* 3. オープニング幕とロゴ */
#opening-splash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #ffffff; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}
#opening-splash.is-hidden { opacity: 0; visibility: hidden; }
.opening-logo-wrap { display: flex; flex-direction: column; align-items: center; }
.op-mark { width: 500px; height: auto; opacity: 0; animation: opRotateIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.op-type { width: 500px; height: auto; margin-top: -200px; opacity: 0; animation: opFadeInUp 1.5s ease-out 1.2s forwards; }

@keyframes opRotateIn { 0% { opacity: 0; transform: rotate(-180deg) scale(0.5); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } }
@keyframes opFadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* 4. スクロールで文字が浮き上がる演出（Aboutでも使用） */
.js-fade-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.js-fade-up.is-show { opacity: 1 !important; transform: translateY(0) !important; }

/* 5. 背景あしらいと背景シート */
.bg-animations { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.ani-item { opacity: 1 !important; visibility: visible !important; }
.main-content-sheet { background-color: rgba(255, 255, 255, 0.85); width: 100%; position: relative; z-index: 1; }
.event-info, .consultation, .kyosan { background-color: transparent !important; }

html, body {
    /* 画面端での「びよーん」というバウンス効果を無効にする */
    overscroll-behavior-y: none;
}

/* 全要素の余白と枠線の計算方法をリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 画像が親要素からはみ出さないように設定 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.container {
    max-width: 1000px; /* コンテンツの最大幅を1000pxにする */
    margin: 0 auto;    /* 左右の余白を自動にして中央寄せ */
    padding: 0 20px;   /* スマホで見たときに文字が画面端に密着しないようにする */
}


/* フォントと基本カラーの設定 */

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;      /* 行間を広めにして読みやすくする */
    color: #333;
    background-color: #ffffff;
	/* あしらい画像を読み込む（複数ある場合はカンマで区切る） */
    background-image: 
        url('images/asirai_hana1.png'), 
        url('images/asirai_hana3.png'), 
        url('images/asirai_hana4.png'),
        url('images/asirai_hikari1.png'), 
        url('images/asirai_hikari4.png');
	/* 画像を繰り返さない */
    background-repeat: no-repeat;

   background-size: 
        800px auto, /* 1個目 */
        650px auto,  /* 3個目 */
        220px auto, /* 4個目 */
        450px auto, /* 7個目 */
        350px auto; /* 10個目 */

/* 各画像の配置場所を指定（横の位置 縦の位置） */
    /* %を使うと画面幅が変わってもバランスを保てます */
    background-position: 
        left -230px top -300px,/* 1個目 */
        right -230px top 250px,/* 3個目 */
        left 250px top 600px,/* 4個目 */
        right 110px top 60px,/* 7個目 */
        left 130px top 800px;/* 10個目 */

    /* 背景を固定するか、スクロールさせるか */
    /* fixedにすると、コンテンツが動いてもあしらいは画面の同じ位置に留まります */
    background-attachment: fixed; 
	
	display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面の高さ分（100%）を最低限確保する */
    margin: 0;
	
}

/* --- 動く背景画像の基本設定 --- */
.ani-item {
    position: fixed;
    z-index: -1;         /* 背景として後ろに配置 */
    pointer-events: none; /* クリックを邪魔しない */
    opacity: 1;        /* 透明度はお好みで */
}

/* 2個目の花：右上 */
.ani-hana2 {
    width: 330px;
    top: -60px;
    right: -30px;
    animation: float-rotate 20s linear infinite;
}

/* 5個目の花：左中 */
.ani-hana5 {
    width: 400px;
    top: 680px;
    left: -100px;
    animation: float-rotate 15s linear infinite reverse; /* 逆回転 */
}

/* 6個目の花：左中 */
.ani-hana6 {
    width: 150px;
    top: 880px;
    right: 10px;
    animation: float-rotate 10s linear infinite;
}

/* 8個目の光：左下 */
.ani-hikari8 {
    width: 400px;
    top: 320px;
    left: -30px;
    animation: glimmer 10s ease-in-out infinite;
}

/* 9個目の光：右下 */
.ani-hikari9 {
    width: 300px;
    top: 730px;
    right: 200px;
    animation: glimmer 5s ease-in-out infinite 1s; /* 1秒遅れて開始 */
}

/* --- アニメーションの定義 --- */

/* 花：ゆっくり回転しながら上下に揺れる */
@keyframes float-rotate {
    0%   { transform: rotate(0deg) translateY(0); }
    50%  { transform: rotate(180deg) translateY(20px); }
    100% { transform: rotate(360deg) translateY(0); }
}

/* 光：ゆっくりと点滅して呼吸しているように見せる */
@keyframes glimmer {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(1.1); }
}


/* メインコンテンツを「伸びる」設定にする */
.sub-page-content {
    flex: 1; /* 余ったスペースをすべて使い切って、フッターを下に押し出す */
}

/* --- Heroセクション全体の調整 --- */
.hero {
    padding: 70px 0;      /* 上下にたっぷりと余白を作る */
    text-align: center;   /* セクション内のテキストや画像を中央揃えにする */
	margin-bottom: 100px;
}

/* プロジェクトロゴのサイズ変更 */
.hero img {
    width: 500px;         /* ロゴの横幅（お好みで調整してください） */
    height: auto;
	margin-right: 20px;
    margin-bottom: 30px;  /* ロゴと見出しの間の距離 */
}


/* --- 見出し設定（見出し：さわらび明朝） --- */
h1, h2, h3, h4, .kyosan-title {
    font-family: 'Sawarabi Mincho', serif;
    font-weight: normal; /* 明朝体は標準の太さが綺麗です */
}

/* メイン見出し（h1）の調整 */
.hero h1 {
    font-size: 2rem;    /* 文字の大きさ */
	line-height: 1.8;
    margin-bottom: 30px;  /* 見出しと本文の間の距離 */
    color: #333;
	letter-spacing: 0.1em;
}

/* heroの本文（h4）の設定 */
.hero h4 {
    font-size: 1.0rem;
    line-height: 2.1;     /* 行間をさらにゆったりと */
	margin-bottom: 40px;  /* 次の文字との距離 */
}

/*  heroのキャッチコピー（h3）の調整 */
.hero h3 {
    font-size: 1.3rem;
    letter-spacing: 0.1em; /* 文字の間隔を少し広げる */
	margin-bottom: 40px;  /* 次の文字との距離 */
}

/* --- Heroボタンの基本（PC・スマホ共通） --- */
.hero-btn-area {
    margin-top: 20px;
    text-align: center;
}

.btn-detail {
    display: inline-block;
    background-color: #5ABC9B; /* プロジェクトカラー */
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(90, 188, 155, 0.3);
}

.btn-detail:hover {
    background-color: #4da589;
    transform: translateY(-2px);
}

/* --- スクロール表示全体のスタイル --- */
.scroll-down {
    position: fixed;   
    right: 200px;      
    bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    
    /* 消える時のアニメーション（前回追加したもの） */
    transition: opacity 0.5s ease, visibility 0.5s;
}

/* 「SCROLL」の文字を90度回転 */
.scroll-down span {
    font-size: 0.9rem;  /* PC用に少し大きく */
    letter-spacing: 0.3em;
    color: #666;
    /* 90度回転させて、線の上に配置 */
    transform: rotate(90deg);
    margin-bottom: 40px; /* 回転した文字と線の間の余白 */
    white-space: nowrap;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.scroll-down.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 消えている間は触れないようにする */
}

/* 動く縦線の土台（PC用：長く設定） */
.scroll-down::after {
    content: "";
    width: 1px;
    height: 100px;     /* PCは長めの100px */
    background: rgba(102, 102, 102, 0.2);
    position: relative;
    display: block;
}

/* 実際に動く線の演出（PC用） */
.scroll-down::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;    /* 土台と同じ長さ */
    background: #666;
    z-index: 1;
    animation: scroll-line 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* サブページ（Aboutなど）ではスクロール表示を隠す */
.sub-page .scroll-down {
    display: none !important;
}


/* 線が流れるアニメーション（共通） */
@keyframes scroll-line {
    0% { transform: scaleY(0); transform-origin: top; }
    45% { transform: scaleY(1); transform-origin: top; }
    55% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}


/*  各セクションのタイトル設定 */
.section-title {
    font-size: 2.6rem;
    display: inline-block;
    margin-bottom: 20px;
	letter-spacing: 0.1em;
	text-align: left;    /* テキストを左揃えにする */
    width: 100%;         /* 親要素の幅いっぱいに広げて左寄せを確定させる */
    color: #333;         /* 文字色 */
}

.main-content-sheet {
    background-color: rgba(255, 255, 255, 0.85); /* 3つのセクション共通の背景色 */
    margin: 0 auto; 
    width: 100%;
    /* 角を少し丸くしたり、影をつけたりするとより「シート感」が出ます */
    /* border-radius: 30px 30px 0 0; */
    /* box-shadow: 0 -10px 30px rgba(0,0,0,0.05); */
}


/* --- イベントセクション全体の余白 --- */
.event-info {
    padding: 100px 0;
}

/* イベント横並びの親要素 */
.event-item {
    display: flex;          /* 横並びにする */
    align-items:center; /* 上揃えにする */
    gap: 50px;              /* ロゴとテキストの間の距離 */
    padding: 40px;
    border-radius: 15px;    /* 角を少し丸く */
}

/* 左側：ロゴのサイズ調整 */
.event-logo {
    flex: 0 0 400px;        /* 幅を300pxに固定して伸び縮みさせない */
}

.event-logo img {
    width: 100%;
    height: auto;
}

/* 右側：テキスト情報の調整 */
.event-date {
    flex: 1;
}

/* 日時と場所の各ブロック */
.event-meta dl {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd; /* 項目ごとの区切り線 */
}

/* ラベル（日時・場所） */
.event-meta dt {
    width: 80px; /* 横幅を揃える */
    font-weight: bold;
    color: #5ABC9B; /* ロゴの青緑色 */
    flex-shrink: 0;
}

/* 内容（日付・住所など） */
.event-meta dd {
    margin: 0;
    flex: 1;
}

.venue-name, 
.venue-address {
    display: block;    /* 横並びを防ぎ、縦に積む */
    width: 100%;       /* 幅をいっぱいにとって改行させる */
}

.venue-name {
    font-weight: bold; /* 会場名を太字に */
    margin-bottom: 5px; /* 住所との間に少し隙間を作る */
}

.venue-address {
    font-size: 0.9rem; /* 住所を少し小さくしてスッキリさせる */
    color: #666;       /* 少し色を薄くする */
}

.event-place {
    display: flex;
    flex-direction: column; /* 中身（会場名と住所）を縦に並べる命令 */
}


/* --- PDFボタンの装飾 --- */
.event-btn-area {
    margin-top: 40px;
    text-align: center; /* ボタンを中央寄せ */
}

.btn-pdf {
    display: inline-block;
    background-color: #5ABC9B; /* アクセントカラー */
    color: #fff;
    width: 320px;          /* ボタンの横幅を固定（お好みの長さに調整してください） */
    padding: 16px 0;       /* 左右のpaddingは0にし、widthで幅を制御します */
    text-align: center;    /* 固定した幅の中で文字を中央に寄せる */
    text-decoration: none;
    border-radius: 50px;       /* 角丸ボタン */
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(69, 151, 125, 0.3);
}

.btn-pdf:hover {
    background-color: #4da589; /* ホバー時は少しだけ濃く */
    transform: translateY(-2px); /* 少し浮き上がる演出 */
    box-shadow: 0 6px 20px rgba(69, 151, 125, 0.4);
}


/* --- お悩み募集セクション --- */
.consultation {
    padding: 100px 0;
    text-align: center;
}

.consultation-content p {
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 2.1;
    font-family: 'Noto Sans JP', sans-serif; /* 本文用のフォントを指定 [cite: 3] */
}

/* ボタンエリアの余白 */
.consultation-btn-area {
    margin-top: 30px;
}

.consultation .section-title {
    display: block;      /* inline-blockから変更して1行を占有 */
    text-align: center;  /* 文字を中央に */
    width: 100%;         /* 幅いっぱいにして中央寄せを確実にする */
    margin-left: auto;   /* 左右中央配置の念押し */
    margin-right: auto;
}

/* 「Coming Soon」テキストのデザイン */
.coming-soon-text {
    display: block;
    text-align: center;  /* 中央寄せ */
    font-weight: bold;   /* 太字 */
    font-size: 1.2rem;   /* 少し大きく */
    color: #999999;      /* 準備中らしいグレー色 */
    margin-top: 30px;    /* 上の文章との間隔 */
    letter-spacing: 0.05em;
}



/*  --- 協賛セクション ---  */

.kyosan {
    padding: 100px 0;
    text-align: center;
}

/* メッセージ部分のベタ塗り設定 */
.kyosan-title {
    display: block; 
    padding: 25px 0;       /* ベタ塗りの上下左右の余白 */
    font-size: 1.2rem;        /* 文字の大きさ */
    font-weight: bold;
    margin-bottom: 50px;      /* 下に並ぶロゴとの間隔 */
	border-radius: 4px;   /* 角を少し丸く */    
    margin: 0 calc(50% - 50vw)
}

.br-tablet, .br-mobile {
    display: none;/* PCでは改行タグを無効にする */
}

.kyosan h3 {
    font-size: 1.6rem;
    letter-spacing: 0.1em; /* 文字の間隔を少し広げる */
}
/* 協賛セクション全体のコンテナ */
.kyosan-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}
/* 階層ごとの共通設定 */
.kyosan-tier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 0;
}
/* 区切り線のデザイン */
.kyosan-divider {
    border: none;
    border-top: 1px solid #ccc; /* 画像に合わせた細いグレーの線 */
    margin: 0;
}
/* --- サイズ別の個別設定 --- */
/* 大：2枚並びを想定 */
.tier-l .kyosan-item {
    width: 350px;
}
/* 中：3〜4枚並びを想定 */
.tier-m .kyosan-item {
    width: 220px;
}

.tier-s {
    /* 1. GridからFlexに変更（これで各行が独立して中央寄せ可能になります） */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* これで2段目の3社も中央に来ます */
    flex-direction: row !important;

    /* 2. 4社で折り返すための横幅制限 */
    /* (ロゴ150px * 4) + (隙間30px * 3) = 690px なので、700px程度に設定します */
    max-width: 700px !important; 
    width: 100% !important;
    margin: 0 auto !important;

    /* 3. 余白の設定（以前のまま） */
    gap: 40px 30px !important;
    padding: 40px 0;
}
/* 小：多数並びを想定 */
.tier-s .kyosan-item {
    /* 4. 大きさが勝手に変わらないように固定 */
    flex: 0 0 150px !important; 
    width: 150px !important;
    max-width: 150px !important;
    display: block !important;
}
.tier-s img {
    width: 100% !important;
    height: auto;
}

/* ロゴ画像の共通設定 */
.kyosan-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* リンクありの場合のホバー演出（前回分を維持） */
.kyosan-item.is-link {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.kyosan-item.is-link:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}
/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    /* 共通設定 */
    .kyosan-tier {
        gap: 20px !important;
        padding: 30px 10px !important;
    }

    /* 各階層の横幅調整 */
    .tier-l .kyosan-item { width: 80% !important; }
    .tier-m .kyosan-item { width: 46% !important; } /* 2列にするため約50%に */

    /* 小（tier-s）の修正：1frを使わずに2列にする */
    .tier-s {
        /* エラーが出る grid-template-columns を使わず Flexbox で代用します */
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        grid-template-columns: none !important; /* PC版のGridをリセット */
        
        width: 100% !important;
        max-width: none !important;
        gap: 20px 10px !important; /* 縦 20px / 横 10px の隙間 */
    }

    .tier-s .kyosan-item {
        /* 2列にするために「50%から余白分を引く」計算をします */
        width: calc(50% - 10px) !important; 
        max-width: 150px !important;
        margin: 0 !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    .tier-s .kyosan-item img {
        width: 100% !important;
        max-width: 140px !important;
        height: auto;
    }
}

/* --- 1. お問い合わせセクション全体 --- */
.contact {
    padding: 70px 0;
    text-align: center; /* タイトル、住所を中央へ */
}

/* タイトルを中央に固定 */
.contact .section-title {
    display: block;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
}

/* 住所の斜体解除 */
.contact-address {
    font-style: normal;
    margin-bottom: 15px;
}

/* --- ロゴエリア --- */
.contact-logos-wrapper {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 30px;
    padding: 0;
    margin-bottom: 20px;
}

.contact-logo img, .josei-logo img {
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.contact-logo img { width: 250px; }
.josei-logo img { width: 80px; }

/* ---  TEL / MAIL エリア（ここがポイント！） --- */
.contact-list {
    margin-top: 10px;
    display: block;      /* 塊を中央に配置 */
    text-align: center;  /* 中身のテキストを中央揃えに */
}

.contact-item {
    display: block;      /* flexを解除。これで各行が独立して中央に寄ります */
    margin-bottom: 10px; 
}

/* TEL/MAILのラベルと数字を「文字」として扱う */
.contact-list dt, 
.contact-list dd {
    display: inline;     /* 横並びを保ちつつ文字として中央に寄せる */
}

.contact-list dt {
    font-weight: bold;
    color: #5ABC9B;
    font-size: 1rem;
    margin-right: 8px;
}

.contact-list dd a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}




/* フッター全体の背景と文字色 */
.site-footer {
    background-color: #5ABC9B;
    color: #ffffff;
    /* 上下の余白を均等（30px）にしてバランスを整えます */
    padding: 30px 0; 
    text-align: center;
}

/* 以前の .footer-nav 関連の記述はすべて削除しました */

/* コピーライト */
.copyright {
    /* 線（border-top）を削除しました */
    border-top: none; 
    padding-top: 0;
    display: block;
}

.copyright small {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    /* 線を消した分、文字を少し強調したい場合は bold にしても良いでしょう */
}

/* --- 上に戻るボタン全体のスタイル --- */
.back-to-top {
    position: fixed;
    right: 200px;      /* SCROLL表示と同じ位置 */
    bottom: 50px;
    z-index: 99;
    opacity: 0;        /* 最初は隠しておく */
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s, transform 0.3s ease;
}

/* 表示された時の状態 */
.back-to-top.is-show {
    opacity: 1;
    visibility: visible;
}

/* ボタンのデザイン（円形に細い矢印） */
.back-to-top a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #666;
}

/* 矢印（細い線で描く） */
.back-to-top .arrow {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(102, 102, 102, 0.3); /* 薄い円の枠 */
    border-radius: 50%;
    position: relative;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.8); /* 背景を少し白くして視認性を上げる */
    transition: background 0.3s;
}

.back-to-top .arrow::before {
    content: "";
    width: 15px;
    height: 15px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.back-to-top .text {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
}

/* ホバー時に少し浮く演出（PCのみ） */
.back-to-top a:hover .arrow {
    background: #fff;
    border-color: #666;
}
.back-to-top a:hover {
    transform: translateY(-5px);
}



/* リンクの基本設定 */
a {
    text-decoration: none;
    color: inherit;
}

body {
    overflow-x: hidden; /* 画面を横にはみ出す要素を強制的に隠す */
}

/* =========================================
   背景あしらいのフェード連動設定
   ========================================= */
/* --- 背景あしらい（.bg-animations）の初期化 --- */
.bg-animations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0; /* 最初は隠す */
    transition: opacity 1.2s ease-in-out !important;
}

/* 個別の画像は常に「不透明」にしておく（親の箱が透明度を管理するため） */
.ani-item {
    opacity: 1 !important;
    visibility: visible !important;
}


/* --- 表示合図：bodyが出ると同時に、箱の透明度を1にする --- */
body.is-visible .bg-animations {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- フェードアウト：去る時に箱ごと消す --- */
body.fade-out .bg-animations {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1.0s ease-in-out !important;
}

/* =================================================
   下層ページ（Aboutページ）統合スタイル
   ================================================= */
/* 1. ページ全体でフッターを最下部に固定する設定 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* 2. メインエリアの設定（ご提示の .main-content の設定を統合） */
.sub-page-content {
    flex: 1; /* フッターを押し出す */
    padding: 80px 0;
    background-color: rgba(255, 255, 255, 0.8); /* 背景のあしらいを見せる半透明白 */
    margin-bottom: 50px;
    text-align: center; /* 中身を中央揃えに */
}

/* 3. Heroセクション（上部の文章エリア）の中央揃え */
.hero-sub {
    text-align: center !important;
    padding: 60px 0;
}

.hero-sub .content-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 4. 【最重要】すべてのセクションタイトルの強制中央揃え */
.hero-sub .section-title,
.sub-page-content .section-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

/* 5. 文章ブロックの調整（読みやすさのため幅を制限） */
.hero-sub h1, .hero-sub h3, .hero-sub h4,
.sub-page-content p {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.hero-sub h4 {
    margin-bottom: 30px;
}

/* 6. ボタンエリア（ご提示の .back-to-top を流用） */
.back-area, .back-to-top {
    margin-top: 60px;
    text-align: center;
}

/* --- 改行コントロール --- */

/* 1. 基本（PC・タブレット）ではスマホ用改行を非表示にする */
.br-sp {
    display: none;
}

/* --- 下層ページ専用：最上部の余白設定 --- */
.sub-page .hero-sub {
    padding-top: 120px !important; /* ここの数字を大きくすると余白が広がります */
    padding-bottom: 60px;          /* 下側の余白 */
}



/* =================================================
   タブレット用の設定（画面幅が768px以下の場合）
   ================================================= */
@media (max-width: 768px) {

	
	/* --- スクロール表示：タブレット向け調整 --- */
    .scroll-down {
        right: 30px;       /* 端から30px（PCより少し内側へ） */
        bottom: 30px;
    }

    .scroll-down span {
        font-size: 0.8rem; /* PC(0.9)とスマホ(0.7)の中間 */
        margin-bottom: 35px; /* 線の長さとのバランス調整 */
    }

    .scroll-down::after,
    .scroll-down::before {
        height: 70px;      /* 線の長さを70px（PC 100px / スマホ 50px の中間） */
    }
	
	
    /* 全体・共通 */
    .container {
        padding: 0 15px; /* 左右の余白を少しだけ詰める */
    }
	
	body {
    background-image: 
        url('images/asirai_hana1.png'),
        url('images/asirai_hana3.png'),  url('images/asirai_hana4.png'),
        url('images/asirai_hikari1.png'), url('images/asirai_hikari4.png');

    /* 1. サイズを vw (画面幅連動) にして滑らかに縮小させる */
    background-size: 
            65vw auto, 55vw auto, 15vw auto,
            35vw auto, 25vw auto;

    /* 2. 位置を % にすることで、画面が縮まっても相対位置をキープする */
    /* background-position: 横の位置% 縦の位置px; */
    background-position: 
            -70% -180px, 
            150% 280px,  
            10% 500px,    
            105% 80px, 
            -5% 820px;

    background-attachment: fixed; /* scroll から変更 */
    
    /* スムーズなリサイズ体験のために */
        transition: background-size 0.2s ease-out;
	}
	
	/* --- 動くあしらい：タブレットサイズでの位置調整 --- */
    /* 2番目の花：右上 */
    .ani-hana2 {
        width: 25vw;       /* 画面幅の25%サイズに縮小 */
        top: -35px;
        right: -5%;        /* 少し外側へ出す */
    }

    /* 5番目の花：左中央 */
    .ani-hana5 {
        width: 30vw;
        top: 600px;
        left: -10%;        /* 文字に被らないよう左に逃がす */
    }

    /* 6番目の花：右下（新しく追加したもの） */
    .ani-hana6 {
        width: 15vw;
        top: 860px;
        right: 0%;
        /* 花6にもアニメーションをつけるなら、ここで animation を追加できます */
        animation: float-rotate 18s linear infinite reverse; 
    }

    /* 8番目の光：左中 */
    .ani-hikari8 {
        width: 30vw;
        top: 280px;
        left: -10%;
    }

    /* 9番目の光：右下 */
    .ani-hikari9 {
        width: 30vw;
        top: 640px;
        right: -5%;
    }
	
	

    .section-title {
        font-size: 1.8rem; /* 2.6remから1.8remに縮小 */
        margin-bottom: 30px;
    }

    /* Heroセクション */
    .hero {
        padding: 40px 0; /* 70pxから40pxに縮小 */
        margin-bottom: 60px;
    }

    .hero img {
        width: 80%;      /* 500px固定から、画面幅の80%に可変させる */
        max-width: 300px; /* それでも300px以上には大きくしない */
        margin-right: 0;
    }

    .hero h1 {
        font-size: 1.4rem; /* 2remから縮小 */
    }

    .hero h4 {
        font-size: 0.9rem;
        line-height: 1.8;
    }
	
	
	/* イベントセクション */
    .event-info {
        padding: 60px 0;
    }

    .event-item {
        flex-direction: column; /* ★横並びを縦並びに変更 */
        gap: 30px;
        padding: 20px;
    }

    .event-logo {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px; /* ★大きすぎないように制限 */
        margin: 0 auto;   /* ★中央寄せ */
    }
	
	.event-meta dl {
        /* スマホでは横並び(flex)を解除して縦に積むと、より崩れにくくなります */
        flex-direction: column; 
        gap: 5px;
        padding-bottom: 10px;
    }
	
    .event-meta dt {
        width: 100%; /* ラベルを1行使う */
        font-size: 0.85rem;
    }
    
    /* PDFボタン */
    .btn-pdf {
        width: 100%;    /* ボタンを画面の端から端まで広げて押しやすくする */
        max-width: 300px;
    }
	
	
	/* お悩み募集 */
    .consultation {
        padding: 60px 0;
    }

    /* 協賛 */
    .kyosan {
        padding: 60px 0;
		margin: 0 calc(50% - 50vw);
        width: 100vw;
    }

    .kyosan-title {
        font-size: 1.1rem;
        padding: 0 20px; /* 文字が画面端に触れないように左右余白 */
        margin-bottom: 30px;
        line-height: 1.6;
    }
	
	.br-tablet, .br-mobile {
        display: block; /* 両方の改行を有効にして3行にする */
    }
    
	
	/* お問い合わせ */
    .contact {
        padding: 50px 0;
		background-color: transparent !important; /* 背景色を透明に強制 */
        background-image: none !important;       /* 背景画像もなしに強制 */
        background: transparent !important;       /* まとめ指定も透明に */
        border: none !important;                 /* 枠線も消す */
    }

    .contact-logos-wrapper {
        gap: 20px; /* ロゴ同士の間隔を狭める */
    }

    .contact-logo img {
        width: 180px; /* 250pxから180pxに縮小 */
    }

    .josei-logo img {
        width: 60px;  /* 80pxから60pxに縮小 */
    }

    .contact-list dd a {
        font-size: 1.1rem; /* 320px幅のスマホを考慮 */
        word-break: break-all; /* 長い英単語（メアド）を途中で改行させる */
    }

    /* フッター */
    .site-footer {
        padding: 30px 0;
    }
	
	/* お問い合わせセクションの背景を全サイズで完全に抹殺する */
	.contact, 
	.contact .container,
	section.contact {
		background-color: transparent !important;
		background-image: none !important;
		background: transparent !important;
		box-shadow: none !important; /* 影が白く見えている可能性も排除 */
	}
	
	.back-to-top {
        right: 30px;
        bottom: 30px;
    }
    .back-to-top .arrow {
        width: 55px; /* タブレットでも十分な大きさ */
        height: 55px;
    }
    .back-to-top .text {
        font-size: 0.85rem;
    }

}


/* =================================================
   スマホ用の設定（画面幅が430px以下の場合）
   ================================================= */
@media (max-width : 429px ){

    /* オープニング設定 */
	.opening-logo-wrap {
        top: -10px; /* スマホでは少しだけ位置を上げ気味に */
    }

    .op-mark {
        width: 75vw;     /* 画面幅の75%にして、はみ出しを防止 */
        max-width: 300px; /* 大きくなりすぎない制限 */
    }

    .op-type {
        width: 75vw;
        max-width: 300px;
        margin-top: -110px; /* ロゴの縮小に合わせて重なりを浅くする */
    }
	
    /* スクロールバー設定 */	
	.scroll-down {
        right: 0px;   /* スマホは端に寄せる */
        bottom: 250px;
    }

    .scroll-down span {
        font-size: 0.7rem; /* スマホサイズに戻す */
        margin-bottom: 30px;
    }

    .scroll-down::after,
    .scroll-down::before {
        height: 50px;      /* スマホは短めの50px */
    }
	
	
    /* 1. 動くあしらい（HTMLの<img>）を表示させ、位置をスマホ用に調整 */
    .ani-item {
        display: block !important; /* 非表示を解除 */
        position: fixed;
        z-index: -1;
        pointer-events: none;
        opacity: 0.8; /* スマホでは少しだけ透過させると文字が読みやすいです */
    }

    /* 動く5枚のスマホ個別位置設定 */
    .ani-hana2 { width: 30vw; top: -20px; right: -5%; }     /* 右上 */
    .ani-hana5 { width: 35vw; top: 60%; left: -10%; }      /* 左中 */
    .ani-hana6 { width: 25vw; top: 85%; right: -5%; }      /* 右下 */
    .ani-hikari8 { width: 35vw; top: 20%; left: -10%; }     /* 左上寄り */
    .ani-hikari9 { width: 30vw; top: 65%; right: 5%; }      /* 右下寄り */

    /* 2. 静止背景（body）の設定（以前の5枚） */
    body {
        background-attachment: fixed !important;
        background-image: 
            url('images/asirai_hana1.png'),
            url('images/asirai_hana3.png'),
            url('images/asirai_hana4.png'),
            url('images/asirai_hikari1.png'),
            url('images/asirai_hikari4.png') !important;

        background-size: 
            70vw auto, 50vw auto, 20vw auto, 40vw auto, 25vw auto !important;

        background-position: 
            -70% -20%,   /* 1:  */
            140% 50%,   /* 3: */
            5% 50%,    /* 4:  */
            110% 15%,   /* 7: */
            5% 90% !important; /* 10: 左下 */
    }

    /* 3. タイトル・文字サイズの調整 */
    .section-title {
        font-size: 1.4rem !important;
        text-align: center !important;
    }

    .hero h1 {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }

    .btn-detail {
        width: 80%;
        padding: 12px 0;
        margin-top: 20px;
    }

    /* 4. 下層ページ（About）の調整 */
    .sub-page .hero-sub {
        padding-top: 80px !important;
    }

    .sub-page-content .section-title {
        font-size: 1.4rem !important;
        margin-top: 40px;
    }

    /* サブページの白いベール（これがあるとお花の上に白が乗り、文字が読みやすくなります） */
    body.sub-page::before {
        content: "";
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        z-index: -1;
        pointer-events: none;
    }

    /* 5. イベントセクション・その他（以前のまま） */
    .event-item { flex-direction: column; align-items: center; padding: 20px; gap: 30px; }
    .event-logo { width: 100%; max-width: 300px; margin: 0 auto; }
    .event-date { width: 100%; text-align: left; }
    .event-meta dl { flex-direction: column; gap: 5px; }
    .event-meta dt { font-size: 0.9rem; }
    .event-meta dd { margin-left: 0; }

    /* 改行コントロール */
    .br-tablet, .br-mobile, .br-sp { display: block !important; }

    .kyosan-title {
        font-size: 1.3rem !important;
        line-height: 1.7;
        padding: 0 15px !important;
    }
	
	.back-to-top {
        right: 20px;
        bottom: 20px;
    }
    .back-to-top .arrow {
        width: 50px; /* スマホでも押しやすい大きめサイズ */
        height: 50px;
    }
    .back-to-top .text {
        font-size: 0.8rem;
    }
}


 


/* =================================================
   中画面（1230px〜781px）の被り回避設定
   ================================================= */
@media (min-width: 781px) and (max-width: 1230px) {
	
	
	/* オープニング */
	.op-mark {
        width: 400px; /* PC(500)より一回り小さく */
    }
    .op-type {
        width: 400px;
        margin-top: -160px; /* サイズに合わせてネガティブマージンを調整 */
    }
	
	
	/* --- スクロール表示：タブレット向け調整 --- */
    .scroll-down {
        right: 30px;       /* 端から30px（PCより少し内側へ） */
        bottom: 30px;
    }

    .scroll-down span {
        font-size: 0.8rem; /* PC(0.9)とスマホ(0.7)の中間 */
        margin-bottom: 35px; /* 線の長さとのバランス調整 */
    }

    .scroll-down::after,
    .scroll-down::before {
        height: 70px;      /* 線の長さを70px（PC 100px / スマホ 50px の中間） */
    }
	
    body {
        /* サイズを少し抑えて中央のスペースを空ける */
        background-size: 
            60vw auto, 55vw auto, 15vw auto,
            30vw auto, 20vw auto;

        /* 位置をさらに外側に逃がす（中央のロゴに被らせない） */
        background-position: 
            -40% -200px, /* 1個目：左に大きく逃げる */
            150% 250px,  /* 3個目 */
            5% 600px,    /* 4個目 */
            105% 60px,   /* 7個目 */
            5% 900px;   /* 10個目 */
	}
	
	/* 動く画像（HTML要素）のこのサイズでの位置微調整 */
    .ani-hana2 { width: 20vw; top: -50px; right: -2%; }
    .ani-hana5 { width: 30vw; top: 700px; left: -12%; }
    .ani-hana6 { width: 15vw; top: 950px; right: 5%; }
    .ani-hikari8 { width: 30vw; top: 310px; left: -8%; }
    .ani-hikari9 { width: 30vw; top: 720px; right: -5%; }
	
	.back-to-top {
        right: 20px;
        bottom: 20px;
    }
    .back-to-top .arrow {
        width: 50px; /* スマホでも押しやすい大きめサイズ */
        height: 50px;
    }
    .back-to-top .text {
        font-size: 0.8rem;
    }
	
	.br-tablet {
        display: block; /* この範囲のときだけ改行させる */
    }
	
	}