@charset "UTF-8";

/* イベント開催日の記載用 */
.event-days {
    display: block;
    margin: 10px 0;
    width: 100%;
    height: 25px;
    text-align: right;
    position: relative;
    right: 20px;
}

/* 警告文の表示設定 */
.warning {
    display: block;
    padding: 10px 0;
    width: 100%;
    height: auto;
    max-width: 100%;
    text-align: center;
    border: none;
    background-color: rgba(0,0,0,0.3);
}

/* 外枠の基本設定（昔の <table> に相当） */
.main-container {
    padding: 0;
    border: 0;
    margin: auto;
    display: flex;            /* ユニット作成をＯＮにする */
    flex-direction: row;      /* 各ユニットを横並びにする */
    flex-wrap: wrap;          /* 幅が一杯になったら自動で改段 */
    justify-content: center;  /* 外枠の中身を中央寄せにする */
    width: 100%;
    max-width: 750px;
    background-image: url('/index_img/haikei.jpg');
    /* background-attachment: fixed; /* 背景を固定 (任意) */
}

/* スマホの時だけ、特定のユニットのペアを配置換えする設定 */
/* (タグ内に必ず[.img-right]を[.sub-～]の直後に記述する) */
.sub-container-1 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* 各ユニットボックスの設定 (昔の <td> に相当) */
/* ユニット全体の基本設定 */
.unit {
    text-align: center;
 /* 上下の余白を、画面サイズに応じて 10px 〜 60px の間で可変させる */
    /*padding-top: clamp(0, 5vh, 60px);*/
    /*padding-bottom: clamp(10px, 5vh, 60px);*/
}

/* ユニット内の<a>タグに適用 */
.unit a {
    display: inline-block; /* リンクの範囲を「画像の上だけ」に限定 */
    text-decoration: none; /* リンクの下線を消す */
    margin-bottom: -4px;   /* リンク画像の配置調整 */
}

/* ユニット内の<img>タグに適用 */
.unit img {
    display: block;
    margin: 0 auto;
    padding-top: 30px;
    max-width: 100%;       /* はみ出し防止の安全装置 */
    height: auto;          /* 比率維持の必須パーツ */
    border: none;          /* リンクの枠線を消す */
    filter: brightness(1.1) saturate(0.9) contrast(1.05)
            drop-shadow(3px 3px 5px rgba(0,0,0,1.5));
}
/* ユニット内の<p>タグに適用 */
.unit p {
    margin: 0 auto;     /* 上下の余計な隙間を一旦すべてゼロにする */
    padding-top: 1em;   /* 写真との距離をここで「数ピクセル」だけ作る */
    padding-left: 1em;
    padding-right: 0.5em;
    line-height: 1.6;   /* 行間（文字の上下の遊び）を整える */
}
/* 要素に[左寄せ]を適用 (スマホ時は[中央寄せ]に) */
.unit.txt-pcLeft-spCtr p {
    text-align: left;
}
/* 要素に[中央寄せ]を適用 (スマホ時は[左寄せ]に) */
.unit.txt-pcCtr-spLeft p {
    text-align: center;
}

/* コンテンツを[左寄せ]し、間隔を指定する設定 */
/* 共通項目の設定 */
[class*="txt-left"] p {
    display: block;
    text-align: left;
}
.txt-left-2em p { margin-left: 1em; } /* [２文字分]空ける */
.txt-left-3em p { margin-left: 2em; } /* 以下省略 */
.txt-left-4em p { margin-left: 3em; }
.txt-left-5em p { margin-left: 4em; }
.txt-left-6em p { margin-left: 5em; }
.txt-left-7em p { margin-left: 6em; }
.txt-left-8em p { margin-left: 7em; }
.txt-left-9em p { margin-left: 8em; }
.txt-left-10em p { margin-left: 9em; }

.txt-fontSize-15 p { font-size: 1.5rem; }

.txt-red { color: #c00;}

/* 文章に対する各種下線(アンダーライン)の設定 */
.uLine-sld { text-decoration: underline solid #333 }
.uLine-dub { text-decoration: underline double #333 }
.uLine-dot { text-decoration: underline dotted #333 }
.uLine-dsh { text-decoration: underline dashed #333 }
.uLine-wav { text-decoration: underline wavy #333 }
.uLine-k-pnk { background: linear-gradient(transparent 70%, #f9f 70%); }
.uLine-k-yel { background: linear-gradient(transparent 70%, #ff0 70%); }
.uLine-k-gre { background: linear-gradient(transparent 70%, #6f6 70%); }
.uLine-k-blu { background: linear-gradient(transparent 70%, #3ff 70%); }

/* ボックス幅を"均等割り"で指定する設定 */
/* (画面幅が狭くなると、自動で改段する) */
.w-100 {
     width: 100%;      /* 横１枚用 / ぶち抜きコメント用 */
}
.w-050 {
    flex: 1 1 320px;   /* 横２枚用（標準） */
    max-width: 100%;
}
.w-033 {
    flex: 1 1 240px;   /* 横３枚用（滅多にない） */
    max-width: 100%;
}
.w-025 {
    flex: 1 1 150px;   /* 横４枚用（有り得ない） */
    max-width: 48%;
    margin: 1px;
}
/* ボックス幅を"比率割り"で指定する設定 */
  /* (１段に対して必ずセレクタを上下セットで左から配置する)*/
  /* (比率が逆の場合、セレクタを上下を逆にし左から配置する) */
/* 1:2 の比率を作る場合 */
.w-1-3 { flex: 1 1 200px; } /* "1/3"の重み */
.w-2-3 { flex: 2 1 400px; } /* "2/3"の重み */
/* 1:3 の比率を作る場合 */
.w-1-4 { flex: 1 1 150px; } /* "1/4"の重み */
.w-3-4 { flex: 3 1 450px; } /* "3/4"の重み */

/* ボックス幅を"均等割り"で指定する設定 */
/* (押しボタン専用 (写真/文章以外) */
.b-050 {
    flex: 0 0 320px;   /* 横２列用 */
    max-width: 100%;
}
.b-033 {
    flex: 0 0 240px;    /* 横３列用 */
    max-width: 100%;
}

/* 改行<br>の動作に関する設定 */
/* PCで改行し、スマホで改行しない設定 */
/* [pc-only] このクラス名を<br>タグ内に記述 */
/* スマホで改行し、PCで改行しない設定 */
.sp-only {
    display: none;
}

.filter-drop-shadow-only img {
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,1.5));
}

/* 文章のインデント設定 */
.indent {
    text-indent: -1em;
    padding-left: 1em;
}

/* リンク用ボタンの基本設定 */
.btn-select {
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.45, 0, 0.55, 1);
    background: var(--btn-color); /* ボタン本体の色 */
    border: 2px solid #000;
    border-radius: 60px;
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 300px;
    margin: 7px;
    padding: 0;
    text-align: center;
    overflow: hidden;    /* ボタン枠からのはみだし防止 */
}
/* ボタン内のリンク文字の設定 */
.btn-select a {
    display: block;
    padding: 5px 10px;  /* ボタンの余白 */
    color: var(--btn-color2, #000);
    text-decoration: none;
}
/* ボタンがホバーした時の設定 */
.btn-select:hover {
    background: #fff5ee;
    transform: translateY(-5px);
    transition-duration: 0.4s;
    box-shadow: 0 7px 15px rgba(0,0,0,0.8);
}
/* ホバー時の文字色設定 */
.btn-select:hover a {
    color: #8b0000;
}

/* リンクボタン用の見出し文字の設定 */
.btn-headline p {
    text-align: left;
    padding-top: 0.25em;
    margin-left: 2em;
    font-size: 2.2rem;
    font-weight: 700;
}

/* 動画再生用の設定 */
video {
    max-width: 100%;    /* 親要素の幅を超えないようにする */
    height: auto;       /* アスペクト比を維持 */
    border-radius: 4px; /* 角を丸くする場合 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽い影をつけるとかっこいい */
}
/* 明度・彩度・コントラストを調整（1.0が標準）*/
video.fix-video {
    filter: brightness(1.3) saturate(0.9) contrast(1.1);
}

/* スマホ用の各種設定 (縦並びにする等々) */
@media (max-width: 767px) {

 /* ユニットを縦並びにする設定 *//* 親：中央寄せと縦並び */
    .sub-container-1 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

 /* 写真が右の時、並び順を入れ替える設定 */
 /* (標準設定は、写真左：文章右 ⇒ 写真上：文章下に) */
 /* (スマホ用は、文章左：写真右 ⇒ 写真上：文章下に) */
    .sub-container-1.img-right {
        flex-direction: column-reverse !important;
    }

 /* ユニット幅を一旦リセットし、100%にする設定 *//* ユニット本体：枠は100%広げる */
    div.sub-container-1 > div.unit,
    div.unit[class*="w-"] {
        display: block !important;
        width: 100% !important;        /* 枠を広げレイアウト崩れを防ぐ */
        max-width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        margin: 0 !important; /* ユニット間の間隔を一定に */
        padding: 0 !important;
    }

 /* 画像：引き伸ばさず、PC版のサイズ感を守る */
    div.unit img {
        max-width: 100% !important;  /* 画面より大きい時だけ縮小 */
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;   /* 画像単体で中央寄せ */
    }

 /* テキスト：幅一杯に戻してレイアウトを安定させる */
    div.unit {
        display: block !important;
        width: 100% !important;      /* 幅一杯に戻す */
        margin: 10px 0 0 !important;
        padding: 0 10px !important;  /* 左右に最低限の余白 */
        box-sizing: border-box !important;
        text-align: center;          /* 文字の標準配置を中央寄せに */
    }

 /* 特定のクラス（txt-align-left50等）が持つPC用マージンをリセット */
    [class*="txt-left"] p,
    .unit[style] p {                 /* p は必要か？ margin-top:は？ */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;    /* 間隔がバラバラなら有効に */
    }
 /* --- ここまではユニット(親/子)とコンテンツ(要素)に対する基本設定 --- */
 /* --- ここからは各コンテンツに対する追加の個別設定など --- */

 /* 空の<div>を「無いもの」として抹消(縦並び時に除外)する設定 */
    .empty-space {
        display: none !important;
    }

 /* スマホでの選択ボタン用に<a>をリセット */
    .btn-select a { margin: 0; }
 /* スマホ用に、選択ボタンなどを調整する設定 */
    .btn-select { max-width: 83% !important;}    /* ボタンの幅の調整 */
    .unit.btn-select { margin: 3px !important;}  /* ボタンの間隔調整 */
    .btn-headline p { margin-left: 0; }   /* ボタン用見出しの位置調整 */
    .hr-04.btn { margin: 8px auto 0;}          /* ボタン用に水平線の調整 */

 /* 改行<br>の動作に関する設定 */
 /* PCで改行し、スマホで改行しない設定 */
    .pc-only {
        display: none;
    }
 /* スマホで改行し、PCで改行しない設定 */
    .sp-only {
        display: inline;
    }

 /* 要素に[中央寄せ]を適用 (PC時は[左寄せ]に) */
    .unit.txt-pcLeft-spCtr p {
        text-align: center;
    }
 /* 要素に[左寄せ]を適用 (PC時は[中央寄せ]に) */
     .unit.txt-pcCtr-spLeft p {
        text-align: left;
    }

 /* スマホ用に、署名画像を右寄せにする設定 */
    #sign-img img {
        text-align: right !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
    }
}