@charset "utf-8";






/* ================================================================================================

基本設定（共通）

=================================================================================================== */

* { margin: 0px;padding: 0px;}/*全ての要素の空白をなくす*/
li { list-style-type: none!important;}/*リストの・を消す*/
img{vertical-align: bottom;}/*画像の下にできた余白を消す*/
body {
width:100%;
background: #0E0000;
font-family:"游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
} 

/*-----------------------------------------------------------*/
/* ▼ リンク設定 ------- */
a {
text-decoration: /*リンクの下の下線を消す*/
none;color: inherit;/*リンクの色を変更しない*/
}
a:visited{color: inherit;/*リンクの色を変更しない*/}
a:active {color: inherit;/*リンクの色を変更しない*/}







/* ===========================================================================================================================================================


レイアウト設定


=========================================================================================================================================================== */

/*------------------------------------------------------------------ 
▼ コンテンツをまとめる器【背景なし】 画面幅に対して50％以内/中央配置
------------------------------------------------------------------ */
.main_contents{width:50%; margin:0rem auto 6rem;position:relative;}
.main_contents img{max-width:100%;height:auto;}

        /* ▽▽▽ スマホ・タブレット(1280px以下) ▽▽▽ */
        @media screen and (max-width:1280px){ 
        .main_contents{width:90%;} 
        }

/*------------------------------------------------------------------ 
▼ フル幅背景オプション
------------------------------------------------------------------ */
.bk{
position:relative;
--bg: #F5F5F5;     /* 背景色（ここを差し替える） */
--padY: 3rem;     /* 上下の余白 */
padding:var(--padY) 0;
}

/* 背景を描画するのは has_bg が付いた時だけ */
.bk::before{
content:"";
position:absolute;
inset:0;
left:50%;
transform:translateX(-50%);
width:100vw;
background:var(--bg);
z-index:-1;
}

.bk-red{--bg:#EA5541;}
.bk-gray{--bg:#F5F5F5;}
.bk-yellow{--bg:#FFF3C4;}
.bk-black{--bg:#3F3B3A;}


/*------------------------------------------------------------------ 
▼ アイテムの並びを設定　※.main_contentsの中にいれて使う
------------------------------------------------------------------ */
.container{
display:flex;
flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
align-items:center;/*center=上下中央*/
flex-direction:row;/*並び順：row＝横並び / row-reverse＝左右反転 / column＝縦並び / column-reverse＝上下反転*/
}

.container_bk{
background:#B81C2B;
padding: 30px;
box-sizing:border-box;/* paddingにより枠が広がることを防止 */
}

/* ▽ containerの横方向（左右）の揃え方切替*/
.container-h-between{justify-content:space-between;}/* 中の要素を左右いっぱいに配置 */
.container-h-center{justify-content:center;}/* 中の要素を中央寄せで配置 */

/* ▽ containerの縦方向（上下）の揃え方切替 */
.container-v-start{align-items:flex-start;}/* 上寄せ */
.container-v-stretch{align-items:stretch;} /* 高さ揃え */

/*------------------------------------------------------------------ 
▼ アイテムが何列になるかを設定　※.containerの中にいれて使う
------------------------------------------------------------------ */

.item_1col{width:100%;}/*1列*/
.item_1col img{width: 100%;}/*1列*/
.item_2col{width:48%;}/*2列*/
.item_2col img{width: 100%;}/*1列*/
.item_3col{width:32%;}/*3列*/
.item_4col{width:23%;}/*4列*/

        /* ▽▽▽ スマホ(768px以下) ▽▽▽ */
        @media screen and (max-width:768px){ 
        .item_2col{width:100%;}/*2列*/
        .item_3col{width:100%;}/*3列*/
        .item_4col{width:100%;}/*4列*/
        }



/*------------------------------------------------------------------ 
▼ アイテムが何列になるかを設定　※.containerの中にいれて使う
------------------------------------------------------------------ */
.box_bk_red{
display:flex;
flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
align-items: center;/*center=上下中央/flex-start=上揃え/flex-end=下揃え/stretch=高さを合わせる*/
flex-direction: row;/*並び順：row＝通常 /row-reverse＝左右反転*/
flex-direction:　;/*並び順：column＝通常 /column-reverse＝上下反転*/
background:#B81C2B;
padding: 20px;
box-sizing:border-box;/* paddingにより枠が広がることを防止 */
}

.box_bk_white{
display:flex;
flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
align-items: center;/*center=上下中央/flex-start=上揃え/flex-end=下揃え/stretch=高さを合わせる*/
flex-direction: row;/*並び順：row＝通常 /row-reverse＝左右反転*/
flex-direction:　;/*並び順：column＝通常 /column-reverse＝上下反転*/
background:#FFFFFF;
padding: 20px;
box-sizing:border-box;/* paddingにより枠が広がることを防止 */
}






/* ================================================================================================

ヘッダー

=================================================================================================== */

header {
  background-image: url("img/top_banner.png"); /* 画像のパス */
  background-size: 100% auto; /* 横幅を100%にし、高さは自動（比率維持） */
  background-position: center top; /* 上端を基準にする（下部が切れても違和感が少ない） */
  background-repeat: no-repeat; /* 繰り返し禁止 */
  height:auto a;/* 任意の高さ */
  width: 100%;
  height: auto;/* 高さを固定しない */
  aspect-ratio: 1920 / 850;/* 画像の比率を指定（例：横1920px 縦850px の画像なら 1920 / 850） */

  
  display:flex;
  flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
  justify-content: space-between;/*両端のアイテムを余白を空けずに配置し、他の要素は均等*/
  align-items: center;/*center=上下中央/flex-start=上揃え/flex-end=下揃え/stretch=高さを合わせる*/

  box-sizing:border-box;/* paddingにより枠が広がることを防止 */
  position:relative;/* 位置指定（z-indexはpositionを指定しないと動作しない） */
  z-index: 10; /*重なり：一番下 */

  }

        /* ▼ スマホ：760px以下の幅の場合に適応される*/
        @media screen and (max-width:760px){
          header {
            background-image: url("img/top_banner_sp.png"); /* 画像のパス */
            aspect-ratio: 760 / 1300;/* 画像の比率を指定（例：横760px 縦1300px の画像なら 760 / 960） */
            }
        }



/*-----------------------------------------------
▼  ヘッダー：ナビ 
-----------------------------------------------*/

/* ▼ 大枠：左側 ------- */
.header-nav{
width: 30%;
text-align: center;
}

        /* ▼ スマホ：760px以下の幅の場合に適応される*/
        @media screen and (max-width:760px){
        .header-nav{display:none;}
        }


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

/* ▼ ロゴ ------- */
.nav-logo{margin: 40px auto 0px;}
.nav-logo img{max-width: 80%;height: auto;}

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

/* ▼ メニューボタン ------- */
.nav-btn {
display: flex;
flex-direction: column; /* 子要素を垂直方向に並べる */
align-items: center;/*上下中央*/
margin: 50px auto 0px;
}

.nav-btn li{
width: 250px;
background: #b01a21;
color: #fff;
padding: 5px 0px;
margin-bottom: 5px;
text-align: center;
font-size: 0.9rem;
font-weight: bold;
}
.nav-btn li:hover{background-color: #d11f27;}/*クリックしたとき*/


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

/* ▼ SNSアイコン ------- */
.nav-sns{
display:flex;
flex-wrap:wrap;/*アイテムを折り返して複数行に上から下*/
justify-content: center;/* 中央に寄せる */
align-items: center;/*上下中央*/
flex-wrap: nowrap;/* 絶対に2段にさせない */

margin: 20px auto;
}
.nav-sns img{height: 30px;margin:0px 10px;}
.nav-sns img:hover{opacity: 0.6;transition-duration: 0.3s;}


/*-----------------------------------------------
▼  ヘッダー：キャンペーン画像 
-----------------------------------------------*/

/* ▼ 大枠：右側 ------- */
.header-fv{
width: 70%;
height: 100%;  /* 画像を置くための高さを確保（数値は任意） */
position: relative; /* 配置：基準 */
text-align: center;
}

/* ▼ キャンペーン画像 ------- */
.header-fv img{
width: 80%;
position: absolute; /* 配置：要素 */
bottom: 10%; /* 親の下端からの位置 */
left: 50%;transform: translateX(-50%);/* 左右中央配置のための追加設定 */
}

        /* ▼ スマホ：760px以下の幅の場合に適応される*/
        @media screen and (max-width:760px){
        .header-fv{width: 100%;}
        .header-fv img{bottom: 5%; /* 親の下端からの位置 */}
        }




/* ================================================================================================

フッター

=================================================================================================== */

footer{
width: 100%;
background: #B81C2B;
}

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

/* ▼ PC｜コンテンツの大枠 ------- */
#footer_contents{
width: 80%;
padding: 50px 0px;
box-sizing:border-box;/* paddingにより枠が広がることを防止 */
margin: auto;
text-align: center;
color: #FFFFFF;
}

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

/* ▼ コピーライト ------- */
#copyright{
width: 80%;
padding: 10px 0px;
box-sizing:border-box;/* paddingにより枠が広がることを防止 */
margin: auto;
text-align: center;
border-top: solid 1px #FFFFFF;
}
#copyright p{color: #FFFFFF;font-size: 12px;}