/*----------------------------------------------------------------------------
モバイル用設定（ｐｘ以下）
---------------------------------------------------------------------------*/
@media screen and (max-width:1024px) {
.hamburger-demo-menubox{
display: block;
}

.hide-pc {
    display: none;
  }

.small-img img{
    width: 50%;
  }

.br-sp {display: none; }
.br-pc {display: block; }

.sticky-menu {
  position: static; /* 固定を解除（通常の配置に戻す） */
}

/*
* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}
*/

html, body {
  overflow-x: hidden;
}

/*-------------------------------------
flexboxの横分割
--------------------------------------*/

.flex_test-box {
    display: flex;
    flex-direction: column;
    width: 95%;
    align-items: center;
}

.flex_test-box img{
    width: 95%;
}
 

.flex_test-item4 {
    width: 100%;                 /* 幅指定 */
}
.flex_test-item4 img{
    width: 100%;                 /* 幅指定 */
}

.flex_test-item4:nth-child(1) {
    width: 100%; 
}
 
.flex_test-item4:nth-child(2) {
    width: 100%; 
}

.flex_test-item5 {
    width: 100%;                 /* 幅指定 */
}
.flex_test-item5 img{
    width: 100%;                 /* 幅指定 */
    text-align:left;
}
.flex_test-item5 img.item5
{
    width: 50%;
  }
.flex_test-item5:nth-child(1) {
    width: 100%; 
}
 
.flex_test-item5:nth-child(2) {
    width: 100%; 
}
 
.flex_test-item5d {
    width: 100%;                 /* 幅指定 */
}

/* ★画像に対する指定 */
.flex_test-item5b img {
    width: 70%;                 /* 幅指定 */
    display: block;             /* 中央寄せにするために必要 */
    margin-left: auto;          /* 左右の余白を自動にして */
    margin-right: auto;         /* 中央に寄せる */
}
.flex_test-item5b img.small {
    width: 30%;   /* もっと小さくする */
}
/* 1つ目（文章）の設定 */
.flex_test-item5b:nth-child(1) {
    width: 100%; 
    order: 1;
}
 
/* 2つ目（画像枠）の設定 */
.flex_test-item5b:nth-child(2) {
    width: 100%; 
    order: 2;
}

/* ★画像に対する共通指定（幅以外） */
.flex_test-item5d img {
    display: block;             /* 中央寄せにするために必要 */
    margin-left: auto;          /* 左右の余白を自動にして */
    margin-right: auto;         /* 中央に寄せる */
}

/* 1つ目の設定 */
.flex_test-item5d:nth-child(1) {
    width: 100%; 
    order: 1;
    padding-top: 50px; /* ★ここに追加（上側に余白を作って文字を下げます） */
}
/* 1つ目の中の画像サイズ設定 */
.flex_test-item5d:nth-child(1) img {
    width: 70%;                 /* 1つ目の画像の幅（お好みで変更してください） */
}

/* 2つ目の設定 */
.flex_test-item5d:nth-child(2) {
    width: 100%; 
    order: 2;
    padding-top: 0px; /* ★ここに追加（上側に余白を作って文字を下げます） */
}
/* 2つ目の中の画像サイズ設定 */
.flex_test-item5d:nth-child(2) img {
    width: 100%;                 /* 2つ目の画像の幅（お好みで変更してください） */
}

 
.flex_test-item5e {
    width: 100%;                 /* 幅指定 */
}

/* ★画像に対する指定 */
.flex_test-item5e img {
    display: block;             /* 中央寄せにするために必要 */
    margin-left: auto;          /* 左右の余白を自動にして */
    margin-right: auto;         /* 中央に寄せる */
}

/* 1つ目（文章）の設定 */
.flex_test-item5e:nth-child(1) {
    width: 100%; 
    order: 2;
    padding-top: 0px; /* ★ここに追加（上側に余白を作って文字を下げます） */
    /* ここには text-align を書かないので、文章は左揃えのままになります */
}

/* 1つ目の中の画像サイズ設定 */
.flex_test-item5e:nth-child(1) img {
    width: 100%;                 /* 1つ目の画像の幅（お好みで変更してください） */
}

/* 2つ目（画像枠）の設定 */
.flex_test-item5e:nth-child(2) {
    width: 100%; 
    order: 1;
    padding-top: 50px; /* ★ここに追加（上側に余白を作って文字を下げます） */
}

/* 2つ目の中の画像サイズ設定 */
.flex_test-item5e:nth-child(2) img {
    width: 70%;                 /* 2つ目の画像の幅（お好みで変更してください） */
}


.flex-container {
    width: 95%;             /* スマホでは画面を広く使うため95%に */
    flex-wrap: wrap;        /* ★横並びを折り返せるようにする */
    gap: 10px;              /* ボタン同士の上下左右の隙間（便利です） */
}

  /* 1〜4個目のボタン：横幅を半分（2列）にする */
.flex-container a {
    width: calc(50% - 5px); /* gap:10px の半分(5px)を引く */
}

/* ★5個目のボタンだけ横幅100%（1列）にする */
.flex-container a:nth-child(5) {
   width: 50%;
}

body {
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size: 24px;
    color: #333;
    padding-bottom: 100px;
    margin:auto;
    overflow-y: scroll;
}


.content{
    line-height: 1.6;
    padding-top: 50px;
    width: 100%;

}

/*------------------------*/
/*------------------------*/
/*------- layout -------*/
ul.box {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

ul.box li {
 margin-bottom: 10px;
 list-style-type:none;
 float: left;
 width: calc(100%);

}
ul li.em {
  font-size:max(4vw,16px);
  font-weight: bold;
}
ul li.em2 {
  font-size:max(4vw,14px);
}
ul li.em4 {
  font-size:max(4vw,14px);
}ul li{
list-style-type:none;
}

/*----------------------------
box4クラス　横幅70％表示
----------------------------*/
ul.box4 {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
ul.box4.small {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

ul.box4 li {
  margin-bottom: 10px;
  list-style-type:none;
}
ul.box4 li.yoko3 {
 margin-left: 10px;
 margin-bottom: 10px;
 list-style-type:none;
 float: left;
 width: calc(100%);
}
ul.box4 li.yoko3 a {
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}
  /* nth-childで上から何番目のli要素かを指定し、orderで表示順を変更する */
.box4 li:nth-child(1) { order: 1; } /* 1番目の画像 → 1番目に表示 */
.box4 li:nth-child(2) { order: 3; } /* 2番目の画像 → 3番目に表示 */
.box4 li:nth-child(3) { order: 5; } /* 3番目の画像 → 5番目に表示 */
.box4 li:nth-child(4) { order: 2; } /* 4番目の画像 → 2番目に表示 */
.box4 li:nth-child(5) { order: 4; } /* 5番目の画像 → 4番目に表示 */
.box4 li:nth-child(6) { order: 6; } /* 6番目の画像 → 6番目に表示 */

.em6 {
 font-size: clamp(16px, 4.0vw, 22px);
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
}
.em6b {
 font-size: clamp(16px, 4.0vw, 22px);
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
}
.sp-small-img80 {
    width: 80%;     /* スマホ画面の横幅に対して80%の大きさに縮小 */
    margin: 0 auto; /* 必要に応じて中央寄せ */
    display: block; /* 中央寄せを効かせるため */
}
/*----------------------------
ヘッダー設定
----------------------------*/

.site-header {
    width: 100vw;
    height: 18vw;
    background: #fff;
    border-bottom: solid 0.1rem #d3d3d3;
    background-repeat: no-repeat;
    background-size: cover;
    flex-flow: column;
    top: 0;
    display: flex;
    position: fixed;
    z-index: 10;
}
.site-logo img {
    display: block;
    height: 50px;
    width: auto;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}


/*----------------------------
ヘッダーメニュー
----------------------------*/
.gnav__menu{
 display: none;
}

/*----------------------------
ヘッダーメニューの項目
----------------------------*/
.gnav__menu__item{
display: none;
}

.gnav__menu__item a{
display: none;
}

/*----------------------------
横に３分割　boxクラス
----------------------------*/
ul.box li.yoko3 {
 margin-left: 0px;
 margin-bottom: 10px;
 list-style-type:none;
 float: left;
 width: calc(100%);
}

ul.box li.yoko3 a {
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}

/*----------------------------
横に２分割　boxクラス
----------------------------*/
ul.box li.yoko2 {
 margin-left: 0px;
 margin-bottom: 10px;
 list-style-type:none;
 float: left;
 width: calc(100%);
}
ul.box.smallB {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
ul.box li.yoko2 a {
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}
ul.box li img.promini{
 width:50%;
 margin-left: 20%;
}
.video2 {
 display: none;
}
/*---------------------------------------
box３クラス　フッター用表示
----------------------------------------*/
ul.box3 {
  width: 100%;
  height: 450px;
  max-height: 450px;
  margin-top: 10px;
  display: block;
  background-image:url(img/footer_moba.jpg);
  background-repeat:  no-repeat;
  background-size:cover;
}
ul.box3 li {
  list-style-type:none;
  padding-top: 8px;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-left: 15%;
}

ul.box3 li a {
    text-decoration: none;

}

/*----------------------------
box２クラス　横幅90％表示
----------------------------*/
ul.box2 {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
ul.box2.small {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
ul.box2.smallB {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}


ul.box2.smallC {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
ul.box2 li {
  margin-bottom: 10px;
  list-style-type:none;
}
ul.box2 li.tyuou {
  margin: 0 auto;
  list-style-type:none;
}


/*----------------------------
横に3分割　box2クラス
----------------------------*/
ul.box2 li.yoko3 {
 margin-left: 10px;
 margin-bottom: 10px;
 list-style-type:none;
 float: left;
 width: calc(100%);
}
ul.box2 li.yoko3 a {
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}

/*----------------------------
横に2分割　box2クラス
----------------------------*/
ul.box2 li.yoko2 {
 margin-left: 10px;
 margin-bottom: -5px;
 list-style-type:none;
 float: left;
 width: calc(100%);
}

ul.box2 li.yoko2 a {
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
    float: left;
}

.mobafoot{
display: block;
}

nav,
nav ul{
   
   display:block;
   width:100vw;
   padding:0px;
}

nav ul li{
   width:100%;
   float:left;
   list-style-type:none;
   border-right:1px solid #ccc;
   border-bottom:1px solid #ccc;
   background:url("URL") no-repeat 1px 50%;
   margin:0;
  
}

nav ul li:nth-child(even){
   border-right:0px;
}

nav ul li:last-child{
   width:100%;
}

nav ul li a{
   display:block;
   padding:0px 0px 0px 0px;
   color:#000;
}


.contents2 {

	text-align: center;
        font-size: 2.5em;
}

/*----------------------------
フッター設定
----------------------------*/
.site-footer{
display: none;
}

.moba-footer{
    position: absolute;
    background-size:cover;
    flex-flow: column;
    display: flex;
    max-height: 530px;
    width: 99%;
    height: 530px;
}

.footer-logo img{
    text-align: right;
    margin-top: 0px; 
    margin-left:200px;
    margin-right:20px;
    vertical-align: bottom;
    z-index: 99;
}

.mobaend{
    color: #000;
    font-size: 14px;
    text-align: right;
    margin-top: 90px; 
    margin-left:0px;
    margin-right:20px;
    vertical-align: bottom;
    z-index: 99;
}
.mobaend2{
    color: #000;
    font-size: 20px;
    text-align: center;
    margin-top: 0px; 
    margin-left:0px;
    margin-right:0px;
    vertical-align: bottom;
}
.copyright2{
    color: #fff;
    font-size: 12px;
    text-align: right;
    margin-top: 90px; 
    margin-left:0px;
    margin-right:20px;
    vertical-align: bottom;
    z-index: 99;
}


/*----------------------------
フッターメニュー
----------------------------*/
.gnav__menu2{ 
display: none;
}


/*----------------------------
ハンバーガーボタン
----------------------------*/
/*ハンバーガーメニュー時の背景固定*/
body.fixed {
  overflow: hidden;
}

/* hamburgerここから */
/* inputを非表示 */
.input-hidden{
  display: none;
}

/* label */
.hamburger-demo-switch{
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 0px; /* ハンバーガーアイコンの位置（上から） */
  z-index: 9999;
  width: 4em; /* アイコン（クリック可能領域）の幅 */
  height: 4em; /* アイコン（クリック可能領域の）高さ */
}

/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-demo-switch{
  position: fixed;
}

/* ハンバーガーアイコン */
.hamburger-switch-line1,
.hamburger-switch-line1-before,
.hamburger-switch-line1-after{
  width: 40px;
  height: 4.8px;
  background: #333; /* ハンバーガーアイコンの色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .3s;
  content: "";
}

.hamburger-switch-line1{
  transform: translate(-50%, -50%);
}

.hamburger-switch-line1-before{
  transform: translate(-50%, -300%);
}

.hamburger-switch-line1-after{
  transform: translate(-50%, 200%);
}

#h-text {
  font-size: 15px;
  margin-top: 0px;
  position: absolute;
  right: 7%;
  top: 40px;
  color: #000000;
  text-align: center;
  display: block;
}

#h-text1 {
  font-size: 25px;
  color: #848484;
  margin-left: 0%;
  text-align: left;
  display: block;
}

#h-text2 {
  font-size: 22px;
  color: #848484;
  margin-left: 15%;
  text-align: left;
  display: block;
}

/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
  width: 0;
}

#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1-before{
  transform: rotate(45deg) translate(-40%, 325%);
}

#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1-after{
  transform: rotate(-45deg) translate(-40%, -325%);
}

/* メニューエリア */
.hamburger-demo-menuwrap{
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 70%;
  height: 95vh;
  max-height: 100vh;
  background: #fafafa; /* メニューエリアの背景色 */
  padding: 3em 1% 2em;
  z-index: 9998;
  transition: .3s;
  overflow-y: auto; /* メニュー自体はスクロールできるようにする */
  overflow-x: hidden;
  overscroll-behavior: contain; /* 背景のつられスクロールを防ぐ */
  box-sizing: border-box;

  transform: translateX(100%);
}

/* メニューリスト */
.hamburger-demo-menulist{
  margin-right: 1%;
  padding-left: 5% !important;
  list-style: none;
  text-align: left;
  font-size: 1.4em;
}

.hamburger-demo-menulist li{
  height: 100%;
  padding: 5px;
  width: 100%;
  border-bottom: 0px solid #000;
}

.hamburger-demo-menulist li a{
  text-decoration: none;
  color: #333; /* メニューリストの文字色 */
  display: block;
  padding: .3em 0;
}

.hamburger-demo-menulist li:hover{
  background: #ddd;
}

.hamburger-demo-menulist li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
  margin-bottom: 50px;
}

/* メニューエリア･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
  transform: translateX(0);
}

/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-demo-cover{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: rgba(3,3,3,.5);
  display: block;
}
/*----------------------------
ボトムナビゲーション
----------------------------*/
ul.bottom-menu {
    position: fixed ;
    left:0;
    bottom:0;
    width: 100%;
    height:50px;/*アイコン枠の高さ*/
    margin:0;
    padding:0;
    background-color:white;/*背景色*/
    border-top:2px solid gray;/*バーの上線*/
    border-bottom:2px solid gray;/*バーの下線*/
    z-index:30;
    padding-bottom:env(safe-area-inset-bottom);
}

ul.bottom-menu li {
    float:left;
    width:20%;/*メニューアイコンを5つ並べる*/
    background-color:white;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:18px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:dimgray;/*アイコンと文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:lightgray;/*マウスオーバー時の色*/}

/* === 展開メニュー === */
ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dotted gray;/*展開の枠点線*/
        font-size:18px;/*展開メニューの文字サイズ*/
        line-height:28px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    transition: 1.0s; /*動きを見せる*/
    background: lavender;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute ;
    bottom: 40px;/*メニュー高さ*/
    transition: 0.5s; /*動きを見せる*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 40px;/*メニュー高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    background-color:whitesmoke;/*背景色*/
    width: 50%;/*2階層目に2つメニューを並べる*/
    border: none;}


/*スマホの時だけ ボトムメニュー分フッタを底上げ*/
@media(max-width: 1024px){ 
#footer{margin-bottom:50px;}
}

/*------------------------------------
ボトムナビゲーション使い方ページ用
------------------------------------*/
ul.bottom-menu2 {
    position: fixed ;
    left:0;
    bottom:0;
    width: 100%;
    height:50px;/*アイコン枠の高さ*/
    margin:0;
    padding:0;
    background-color:#ddceaa;/*背景色*/
    border-top:2px solid #ddceaa;/*バーの上線*/
    border-bottom:2px solid #ddceaa;/*バーの下線*/
    z-index:30;
    padding-bottom:env(safe-area-inset-bottom);
}

ul.bottom-menu2 li {
    position: relative; /* 展開メニューの位置基準 */
    float:left;
    width:20%;/*メニューアイコンを5つ並べる*/
    height:50px; /* 親の高さ（50px）にしっかり合わせる */
    background-color:#ddceaa;/*背景色*/
    list-style-type:none;
    text-align:center;
    box-sizing: border-box;
}

.bottom-menu2 li a {
    /* Flexboxで上下左右ぴったり中央揃えにする */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 高さ50pxいっぱいに広げる */
    color:white;/*アイコンと文字の色*/
    text-decoration:none;
    font-size:14px; 
    font-weight:600;
    line-height: 1.2;
}

.bottom-menu2 li a:hover {
    color:black;/*マウスオーバー時の色*/
    background: lavender;/*マウスオーバーの色*/

}

/* === 展開メニュー === */
ul.menu-second-level2 {
    visibility: hidden;
    opacity: 0;
    z-index:1;
}

/* ★修正: 展開メニューのliの高さを安定させる */
ul.menu-second-level2 li {
    float: none; /* 縦並び */
    background-color:#ddceaa;/*背景色*/
    width: 100%;/* 1階層目と同じ幅 */
    border: none;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ★修正: 高さと余白を固定して一番上だけ広がるのを防ぐ */
ul.menu-second-level2 li a {
    display: flex; /* Flexboxで文字を上下中央に */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 42px; /* 各項目の高さを固定 */
    padding: 0 5px;
    border-top: 1px dotted gray;/*展開の枠点線*/
    font-size:14px;/*展開メニューの文字サイズ*/
    font-weight:600;
    line-height:1.2;
    background-color: #ddceaa; /* 最初から背景色を持たせる */
    color: white;
    text-decoration: none;
}

/* 一番上の項目の上線を消したい場合はコメントアウトを外してください */
/*
ul.menu-second-level2 li:first-child a {
    border-top: none;
}
*/

.menu-second-level2 li a:hover {
    transition: none; /* アニメーションによるズレを防ぐため解除 */
    background: lavender;/*マウスオーバーの色*/
    color: #333; /* マウスオーバー時の文字色も見やすく調整 */
}

li.menu-width-max2 ul.menu-second-level2 {
    position: absolute ;
    bottom: 100%;/* 親（1階層目）の「すぐ上」にぴったり配置する */
    left: 0;
    transition: 0.3s; /*動きを見せる*/
    box-sizing: border-box;
    width: 100%;
    padding:0;
    margin:0;
}

li.menu-width-max2:hover ul.menu-second-level2 {
    bottom: 100%;/* 隙間が出ないよう位置維持 */
    visibility: visible;
    opacity: 1;
}
    /* 1個目と5個目を非表示 */
    ul.bottom-menu2 > li:nth-child(1),
    ul.bottom-menu2 > li:nth-child(5) {
        display: none;
    }

ul.bottom-menu2 > li:nth-child(2) {
    width: 20%;
}

ul.bottom-menu2 > li:nth-child(3) {
    width: 40%;
}

ul.bottom-menu2 > li:nth-child(4) {
    width: 40%;
}
}