/*各ページ共通CSS*/
@media
  only screen and (-webkit-min-device-pixel-ratio: 2.0),
  only screen and (   min--moz-device-pixel-ratio: 2.0),
  only screen and (     -o-min-device-pixel-ratio: 2.0/1),
  only screen and (        min-device-pixel-ratio: 2.0),
  only screen and (                min-resolution: 326dpi),
  only screen and (                min-resolution: 2.0dppx) { 
    /* Retina styles here */
}
html {
    scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
  font-size: 16px;
  background-color: #FFF;

}
body p {
  color: #0f1419;
  font-feature-settings: "palt";
}
h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}
hr {
  display: none; 
}
dl, dt, dd {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }
ul li img { vertical-align:top; }
img {
  border: none;
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}
img.block {
  display: block;
}
a img:hover {
  opacity: 0.8;
}
.none {display:none;}

/*ヘッダー　H1 システム名称・見出し*/
div.top_section {
  height: 900px;
}
nav{
  display: flex;
  width: 100%;
}
h1.logo img{
  margin-top: 20px;
  margin-left: 40px;
  margin-right: auto;
  max-width: 320px; /* 画像の最大幅 */
  /* max-width: 360px; 画像の最大幅 */
  display: block; /* 画像の下の隙間をなくす */
}
div.top_section#sec1_bg {
  border: none;
  background: url(../image/sec1_bg.png) no-repeat 0 0 / cover;
  width: 100%;
  height: 900px;
}
div.branding {
  margin-top: 80px;
  display: block;
}
div.sp_branding {
  margin-top: 4ch;
  min-width: 320px;
  display: block;
  display: none;
}
/*グローバルメニュー*/
.hamburger-menu{display: none;}

ul.globalmenu {
  display: flex;
  padding: 30px;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  white-space: nowrap;
  margin-left:auto;
}
ul.globalmenu li {
  padding: 0 20px;
}
ul.globalmenu li a {
  color: #333;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
ul.globalmenu li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #666;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
ul.globalmenu li a:hover::after {
  transform: scale(1, 1);
}
ul.globalmenu li a.current::after {
  transform: scale(1,1);
}
/*グローバルメニュー*/
.hamburger-menu{display: none;}

main article section#sec2_bg {
  width: 100%;
  height: 800px;
  background: url(../image/sec2_bg.png) no-repeat 0 0 / cover;
}
main article section#sec3_bg {
  width: 100%;
  height: 1400px;
  background: url(../image/sec3_bg.png) no-repeat 0 0 / cover;
}
main article section#sec4_bg {
  width: 100%;
  height: 1000px;
  background: url(../image/sec4_bg.png) no-repeat 0 0 / cover;
}
main article section#sec5_bg {
  position: relative;
  width: 100%;
  height: 1100px;
  background: url(../image/sec5_bg.png) no-repeat 0 0 / cover;
}

main article section div.inner_content {
  display: flex;
  justify-content: center;
  width: 80%; /* 1200px 1920px → 0.625 */
  margin: auto;
  /* height: 800px; */
  justify-content: space-around;
  /* background-color: #F9DF2C; */
}
main article section div.inner_content2 {
  justify-content: center;
  width: 80%;
  margin: auto;
/*   background-color: #F9DF2C; */
}
div.sec3_photo{
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 追加 */
  padding-top: 10px;
  width: 50%;
  height: 50%;
}
div.sec2_photo{
  position: relative;
  margin-top: 80px;
  width: 50%;
  height: 100%;
}
div.sec2_photo div.bg_img{
  z-index: 1;
}
div.sec2_photo div.fr_img{
  position: absolute;
  z-index: 2;
  top:300px;
  left:160px;
  width: 100%;
}
div.inner_textR{
  margin-top: 90px;
  width: 50%;
}
div.inner_textL{
  margin-top: 90px;
  width: 30%;
}
div.inner_textR2{
  margin-left: 40px;
  width: 50%;
}
div.inner_textw{
  margin-top: 70px;
  width: 100%;
  /* text-wrap: nowrap; */
}
div.inner_texti{
  margin-top: 120px;
  width: 70%;
  height: 400px;
  /* background-color: #fff; */
}
main article section div.inner_content h2{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  color: #333;
  width: 100%; /* 1200px 1920px → 0.625 */
  display: block;
}
main article section div.inner_content p{
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: bold;
}
main article section div.inner_content li,main article section div.inner_content2 li{
  margin-top: 8px;
  list-style-type: none; /*点を非表示*/
  position: relative; /*基準位置*/
  padding-left: 1rem;
  font-feature-settings: "palt";
  line-height: 2rem;
}
main article section div.inner_content li:before {
  border-radius: 50%; /*丸くする*/
  width: 8px; /*点の幅*/
  height: 8px; /*点の高さ*/
  display: block;
  position: absolute; /*絶対配置*/
  left: 0; /*点の位置*/
  top: 0.8rem; /*点の位置*/
  content: "";
  background: #f8b551; /*点の色*/
  }
main article section div.inner_content2 li:before {
  border-radius: 50%; /*丸くする*/
  width: 8px; /*点の幅*/
  height: 8px; /*点の高さ*/
  display: block;
  position: absolute; /*絶対配置*/
  left: 0; /*点の位置*/
  top: 0.8rem; /*点の位置*/
  content: "";
  background: #88abda; /*点の色*/
  }
div.inner_textR2 li span{
  display: inline-block;
  width:160px;
}
div.inner_textR2 li span.marginl160{
  display: inline-block;
  width:100%;
  margin-left:160px;
}
main article section#sec3_bg h2{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(1.5rem, 0.818rem + 0.91vw, 1.5rem);
  display: block;
  text-align: center;
  margin-top: 0px;
  padding-top:40px;
  color: #333;
  width: 100%; /* 1200px 1920px → 0.625 */
}
main article section#sec4_bg h2{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(1.5rem, 0.818rem + 0.91vw, 1.5rem);
  display: block;
  text-align: center;
  margin-top: 0px;
  padding-top:20px;
  color: #333;
  width: 100%; /* 1200px 1920px → 0.625 */
}
main article section#sec3_bg div.area_photo{
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 80px auto;
  justify-content: space-around;
}
main article section#sec3_bg div.area_photo img{
  max-width: 290px;
  margin:10px 10px 20px 10px;
}
main article section#sec3_bg div.area_photo figcaption{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem;
  max-width: 280px;
  margin:0px 20px 0px 10px;
}
main article section#sec3_bg div.area_photo figcaption strong{
  font-size: 1.2rem;
}
/* main article section#sec3_bg div.area_photo div{
  max-width: 290px;
  margin:10px 20px 10px 20px;
} */
div.inner_textL h2{
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: clamp(1.5rem, 0.818rem + 0.91vw, 1.5rem);
}
div.footer_sec{
  margin-top: 280px;
  width: 100%;
  text-align: center;
}
div.footer_sec div.gotop{
  position: absolute;
  bottom: 0;
  right: 100px;
}
div.footer_sec img{
  margin: 0 auto;
}
div.footer_sec p.name{
  color: #333;
  font-size:1.1rem;
  margin-top: 20px;;
  margin-bottom: 5px;;
  font-weight: bold;
}
.h2box{
  margin-top:140px;
  position: relative;
  width: 260px;
  padding: 1.5em 1.5em;
  border-top: solid 1px #999;
  border-bottom: solid 1px #999;
}
.h2box:before, .h2box:after{
  content: '';
  position: absolute;
  top: -10px;
  width: 1px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #999;
}
.h2box:before {left: 10px;}
.h2box:after {right: 10px;}
.h2box h2{
  margin: 0; 
  padding: 0;
}
div.inner_contentn {
  display: flex;
  justify-content: center;
  width: 70%;
  margin: auto;
}
.empty {
  margin: 50px 0 50px 0;
  background-color: #1a62bc;
  padding: 1px;
}
@media screen and (max-width: 1024px) {

/* 768pxまでの幅の場合に適応される */
      /* body {background-color:#f10010;} */

      div.top_section#sec1_bg {
        border: none;
        background: url(../image/sec1_bg.png) no-repeat 0 0 / cover;
        width: 100%;
        height: 580px;
      }
      main article section#sec2_bg {
        background: url(../image/sec2_bg.png) no-repeat 0 0 / cover;
        width: 100%;
        height: 1140px;
      }
      main article section#sec3_bg {
        background: url(../image/sec3_bg.png) no-repeat 0 0 / cover;
        width: 100%;
        height: 2740px;
      }
      main article section#sec4_bg {
        background: url(../image/sec4_bg.png) no-repeat 0 0 / cover;
        width: 100%;
        height: 1600px;
      }
      main article section#sec5_bg {
        position: relative;
        background: url(../image/sec5_bg.png) no-repeat 0 0 / cover;
        width: 100%;
        height: 1140px;
      }
      main article section div.inner_content h2{
      margin: 20px auto;
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
      color: #333;
      width: 100%; /* 1200px 1920px → 0.625 */
      display: block;
      }
      main article section#sec2_bg h2{
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: clamp(1.2rem, 0.818rem + 0.91vw, 1.5rem);
        display: block;
        margin-top: 20px;
        color: #333;
        width: 100%; /* 1200px 1920px → 0.625 */
      }
      main article section#sec3_bg div.area_photo{
        display: flex;
        flex-wrap: wrap;
        /* flex-direction: column; */
        /* width: 90%; */
        width: 50%;
        margin: 40px auto;
      }
      main article section#sec3_bg div.area_photo img{
        max-width: 220px;
        margin:10px auto;
      }
      main article section#sec3_bg div.area_photo figcaption{
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 1rem;
        /* font-size: clamp(1.4rem, 0.818rem + 0.91vw, 1.5rem); */
        max-width: 220px;
        margin: 10px auto 20px;
      }
      main article section#sec3_bg div.area_photo figcaption strong{
        font-size: 1.2rem;
      }
/*       main article section#sec3_bg div.area_photo p{
        max-width: 220px;
        line-height: 1.6;
        margin:10px auto;
      } */
      main article section div.inner_content {
        display: flex;
        flex-direction: column;
        width: 90%; /* 1200px 1920px → 0.625 */
        align-items: center;
      }
      div.sec2_photo{
        margin-top: 30px;
        display: block;
        width: 90%;
      }
      div.sec2_photo div.bg_img{
		    margin-top: 40px;
      }
      div.sec2_photo div.fr_img{
        margin-top: 40px;
        position: static;
      }
      div.inner_textR{
        margin-top:40px;
        width: 100%;
        display: block;
      }
      div.sec3_photo{
        display: flex;
        flex-direction:column;
        width: 90%;
        align-items: center;
      }

      main article section div.inner_content2 {
        width: 80%;
      }
      div.inner_textw{
        margin-top: 40px;
        width: 100%;
      }
      div.inner_textR2{
        margin-top: 40px;
        margin-left: 0px;
        width: 100%;
      }
      div.inner_textR2 li span{
        display: inline-block;
        width:100%;
      }
      div.inner_textR2 li span.marginl160{
        display: inline-block;
        width:100%;
        margin-left:0px;
      }
      main article section#sec3_bg h2,main article section#sec4_bg h2{
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: clamp(1.5rem, 0.818rem + 0.91vw, 1.5rem);
        display: block;
        text-align: center;
        margin-top: 0px;
        color: #333;
        width: 100%; /* 1200px 1920px → 0.625 */
      }
      div.footer_sec{
        margin-top: 180px;
        width: 100%;
        text-align: center;
      }
      div.footer_sec div.gotop{
        display: none;
      }
      div.inner_contentn {
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: auto;
      }
      div.inner_textL{
        width: 100%;
        margin:0px auto;
      }
      .h2box{
        margin:0px auto;
        margin-top: 40px;
        position: relative;
        width: 300px;
        padding: 1.5em 1.5em;
        border-top: solid 1px #999;
        border-bottom: solid 1px #999;
      }
      .h2box:before, .h2box:after{
        content: '';
        position: absolute;
        top: -10px;
        width: 1px;
        height: -webkit-calc(100% + 0px);
        height: calc(100% + 20px);
        background-color: #999;
      }
      .h2box:before {left: 20px;}
      .h2box:after {right: 10px;}
      .h2box h2{
        margin: 0; 
        padding: 0;
      }
      div.inner_texti{
        margin-top: 100px;
        width: 90%;
        height: 400px;
        /* background-color: #fff; */
        overflow-y: scroll;
        /*縦方向はスクロール可*/
        overflow-x: hidden;
        /*横方向はスクロール不可*/
        /*スクロールバー表示させる*/
      }
      div.inner_texti{
        overflow-y: auto;
      }
      div.inner_texti::-webkit-scrollbar{
        width: 3px;
        background-color: #999;
      }
      div.inner_texti::-webkit-scrollbar-thumb{
        background-color: burlywood;
        border-radius: 2px;
      }
      
    
      /* ハンバーガーメニュー------------------------------------------------------------- */
      .hamburger-menu{display: block;}
      ul.globalmenu {display: none;}

      /* =================
      ハンバーガーボタンの実装
      ================= */
      
      .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 50px;
        width: 50px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: black;
      }
      .menu-btn:hover {
        cursor: pointer;
      }
      /* 三本線の実装 */
      .menu-btn span,
      .menu-btn span:before,
      .menu-btn span:after {
        content: "";
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
      }
      .menu-btn span:before {
        bottom: 8px;
      }
      .menu-btn span:after {
        top: 8px;
      }
      /* チェックボックスを非表示にする */
      #menu-btn-check {
        display: none;
      }
      
      #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(
          255,
          255,
          255,
          0
        ); /*メニューオープン時は真ん中の線を透明にする*/
      }
      
      /* メニューを開いている時はハンバーガーボタンが×になる */
      #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
      }
      #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
      }

      /* =================
      メニュー部分の実装
      ================= */

      .menu-content {
        width: 80%;
        height: 60%;
        position: fixed;
        top: 0;
        /* メニューを外に出しておく */
        left: 100%;

        z-index: 80;
        background-color: black;
        opacity: 0.9;
        transition: all 0.5s; /*アニメーションを滑らかにする*/
      }
      .menu-content ul {
        padding: 70px 10px 0;
      }
      .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
      }
      .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        color: #ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 15px;
        position: relative;
      }

      #menu-btn-check:checked ~ .menu-content {
        left: 30%; /*メニューを画面内へ動かす*/
      }

      /* ハンバーガーメニュー終わり------------------------------------------------------------- */
    }

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
    body {
        .logo img{
          margin-top: 15px;
          margin-left: 20px;
          margin-right: auto;
          max-width: 270px; /* 画像の最大幅 */
          /* max-width: 360px; 画像の最大幅 */
          display: block; /* 画像の下の隙間をなくす */
        }
        .branding{display: none;}
        .sp_branding{
          margin-top: 40px;
          display: block;
        }
    }
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
    body {
        background-color: #68B876;
    }
}