@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');
@font-face {
  font-family: 'A-OTF 太ゴB101 Pro';
  src: url('path/to/A-OTF-太ゴB101-Pro.woff2') format('woff2'),
       url('path/to/A-OTF-太ゴB101-Pro.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.element {
  font-family: 'A-OTF 太ゴB101 Pro', sans-serif;
}

body {
  font-family: 'A-OTF 太ゴB101 Pro', sans-serif;
}

.container {
  object-fit: cover;
}

a {color: #666;}
a:hover {opacity: 0.6; text-decoration: none;}

.relative {
  position: relative;
}

/*イラスト_pc*/
.illust_01_pc {
  position:absolute;
  top:-20px;
left: 0px;}
.illust_02_pc {
  position:absolute;
  bottom:-30px;
right: 0px;
z-index: 9999;}

.illust_03_pc {
  position:absolute;
  top:30px;
left: 0px;}
.illust_04_pc {
  position:absolute;
  top:110px;
right: 0px;
z-index: 9999;}
.illust_05_pc {
  position:absolute;
  top:30px;
right: 0px;}
.illust_06_pc {
  position:absolute;
  top:100px;
left: 0px;}

.illust_07_pc {
  position:absolute;
  top:30px;
right: 0px;}

.illust_08_pc {
  position:absolute;
  top:100px;
left: 0px;}

.illust_09_pc {
  position:absolute;
  top:60px;
right: 0px;}

.illust_10_pc {
  position:absolute;
  bottom:-60px;
  right: 0;
  left: 0;
  margin: 0 auto;}

/*イラスト_sp*/
.illust_01_sp {
  position:absolute;
  top:-10px;
left: 40px;}
.illust_02_sp {
  position:absolute;
  bottom:-20px;
right: 20px;
z-index: 9999;}

.illust_03_sp {
  position:absolute;
  top:20px;
left: 40px;}
.illust_04_sp {
  position:absolute;
  bottom:10px;
right: -70px;
z-index: 9999;}

.illust_05_sp {
  position:absolute;
  top:30px;
right: 30px;}

.illust_06_sp {
  position:absolute;
  top:20px;
left: 20px;}

.illust_07_sp {
  position:absolute;
  top:30px;
right: 30px;}

.illust_08_sp {
  position:absolute;
  top:20px;
left: 20px;}

.illust_09_sp {
  position:absolute;
  top:60px;
right: 30px;}

.illust_10_sp {
  position:absolute;
  bottom:-30px;
  right: 0;
  left: 0;
  margin: 0 auto;}


.line-height_180 {
  line-height: 180%;
}





/*-----PC-----メイン画像箇所*/
/* スライダー全体 */
.slider {
  overflow: hidden;
  width: 100%; /* ブラウザ幅に合わせて表示 */
  height: 430px; /* スライダー全体の縦幅 */
  margin: 0 auto;
  position: relative; /* レイヤー上に画像を配置する基準にするため */
}

/* スライダーの画像を横に並べる */
.slider-wrapper {
  display: flex;
  animation: slide 20s linear infinite;
}

/* スライダー内の各画像サイズ */
.slider-wrapper img {
  width: 480px;
  height: 430px;
  object-fit: cover;
}

/* スライドアニメーション */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1920px); } /* 画面幅に応じて調整 */
}

/* レイヤー上に表示する中央の画像 */
.overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0; /* 初期状態で非表示 */
  animation: fadeIn 2s forwards; /* フェイドインアニメーションを追加 */
}

/* フェイドインアニメーション */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 中央の画像のサイズ設定 */
.overlay-image img {
  width: 413.52px;
  height: 396.24px;
}

/*-----PC-----メイン画像箇所以上*/

/*-----SP-----メイン画像箇所*/

    /* フェイドイン用のクラス */
    .fade-in {
      opacity: 0; /* 初期状態で非表示 */
      transition: opacity 2s ease-in; /* フェイドインのトランジションを設定 */
    }
    
    /* フェイドイン効果を適用するクラス */
    .fade-in.show {
      opacity: 1; /* 表示状態 */
    }

/*-----SP-----メイン画像箇所以上*/

h2 {color: #767C56;}

.sec_bl01 {
  background: url(../images/BG_block_o1_pc.jpg) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.sec_bl01_sp {
  background: url(../images/BG_block_o1_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}


.sec_blBL_pc {
  background: url(../images/BG_imageBL_pc.jpg) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.sec_blGR_pc {
  background: url(../images/BG_imageGR_pc.jpg) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.sec_bl02_pc {
  background: url(../images/BG_image02_pc.png) no-repeat;
  background-size: auto 100%;
  background-position: top right;
}


.sec_bl03_pc {
  background: url(../images/BG_image03_pc.png) no-repeat;
  background-size: auto 100%;
  background-position: top left;
}

.sec_bl04_pc {
  background: url(../images/BG_image04_pc.png) no-repeat;
  background-size: auto 100%;
  background-position: top right;
}

.sec_bl05_pc {
  background: url(../images/BG_image05_pc.png) no-repeat;
  background-size: auto 100%;
  background-position: top left;
}

.sec_bl06_pc {
  background: url(../images/BG_image06_pc.png) no-repeat;
  background-size: auto 100%;
  background-position: top right;
}

.sec_bl07_pc {
  background: url(../images/BG_image07_pc.png) no-repeat;
  background-size: auto 100%;
  background-position: top left;
}

.sec_blBL_sp {
  background: url(../images/BG_imageBL_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.sec_blGR_sp {
  background: url(../images/BG_imageGR_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.sec_bl02_sp {
  background: url(../images/BG_image02_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top right;
}

.sec_bl03_sp {
  background: url(../images/BG_image03_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top right;
}

.sec_bl04_sp {
  background: url(../images/BG_image04_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top right;
}

.sec_bl05_sp {
  background: url(../images/BG_image05_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top right;
}
.sec_bl06_sp {
  background: url(../images/BG_image06_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top right;
}
.sec_bl07_sp {
  background: url(../images/BG_image07_sp.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top right;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.no-action {pointer-events: none;  opacity: 0.5;  color: #625f5f!important;}
.lineheight{line-height:180%;}
/*MAIN BLOCK TXT*/
.abs_on {
  position: absolute;
  top:0px;
  left: 0px;
}



  main {}
main img {
  width:100%;
}

/*Navigation*/
/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
top:0;
  right: -120%;
width:200px;
  height: 100vh;/*ナビの高さ*/
  background-color: rgba(20, 25, 71, 0.82);
  /*動き*/
transition: all 0.6s;
}



/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}

@media screen and (min-width: 768px){
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:21%;
  left:6%;
  transform: translate(-50%,-50%);
 
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
  text-align: center;
}

#g-nav li a{
color: #ffffff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 0.5px solid #fff;
}
  }
  
  @media screen and (max-width: 767px){
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:21%;
  left:26%;
  transform: translate(-50%,-50%);
 
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
  text-align: center;
}

#g-nav li a{
color: #ffffff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 0.5px solid #fff;
}
  }


/*========= ボタンのためのCSS ===============*/
@media screen and (min-width: 768px){
  body#index .openbtn{
    position:absolute;
      z-index: 9999;/*ボタンを最前面に*/
    top:3%;
    right: 1.2%;
    cursor: pointer;
      width: 100px;
      height:100px;
    }

    body#contents .openbtn{
      position:absolute;
        z-index: 9999;/*ボタンを最前面に*/
      top:3%;
      right: 1.2%;
      cursor: pointer;
      width: 60px;
      height:50px;
      background-color: #fff;
      }
}

@media screen and (max-width: 767px){
  body#index .openbtn{
    position:absolute;
      z-index: 9999;/*ボタンを最前面に*/
    top:3%;
    right: -2.5%;
    cursor: pointer;
      width: 100px;
      height:100px;
    }

    body#contents .openbtn{
      position:absolute;
        z-index: 9999;/*ボタンを最前面に*/
      top:3%;
      right: -2.5%;
      cursor: pointer;
        width: 60px;
        height:50px;
        background-color: #fff;
      }
}

/*×に変化*/	
body#index .openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color: #fff;
  width: 45%;
}


body#contents .openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color: #000;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
top:15px;	
}

.openbtn span:nth-of-type(2) {
top:23px;
}

.openbtn span:nth-of-type(3) {
top:31px;
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

/*----------------------
table CSS
----------------------*/

table{
  border-collapse: collapse;
  width: 100%;
}
.tb01 th,
.tb01 td{
  padding: 10px;
  border: solid 1px #6687A6;
  box-sizing:border-box;
}
.tb01 th {
  background: #C1DDF4;
  color: #000;
  font-weight: 300;
  text-align:center;
  width: 30%;
}
.tb01 td {line-height:180%;}

@media screen and (max-width: 640px) {
  .tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
    font-size:14px;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px #6687A6;
  }

}





/*----------------------
FOOTER
----------------------*/

footer {line-height:180%;}
.cp_right{
  background-color: #6687A6;
  color: #fff;
  font-family: sans-serif!important;
}


footer li {
  list-style-type: none; /* デフォルトのリストマーカーを非表示にする */
  position: relative; /* アイコンを配置するために相対的な位置を指定する */
}

footer li:before {
  content: "※"; /* アイコンとして表示する文字を指定 */
  position: absolute; /* アイコンを親要素に対して絶対的な位置に配置する */
  left: -1em; /* アイコンをリストアイテムの左端に配置する */
}



  @media (max-width: 1199px) {
    .break-on-small {
      display: block;
    }
  }
  
  @media (min-width: 1200px) {
    .break-on-small {
      display: none;
    }
  }