/*各ページ共通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;
  /* background: url(../image/info_bg.png); */
  background: url(../image/info_bg.png);
}
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 システム名称・見出し*/
nav {
  display: flex;
  width: 100%;
  /* background-color: #68B876; */
  }
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: 100px;
}
main{
  height: 100%;
  min-height: 100vh;
}

/*グローバルメニュー*/
.hamburger-menu{display: none;}

ul.globalmenu {
  display: flex;
  padding: 30px;
  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#info_bg {
  width: 100%;
  background: url(../image/info_bg.png);
} */

div.footer_sec{
  position: relative;
  padding: 40px;
  width: 100%;
  text-align: center;
  /* background-color: #68B876; */
}
div.footer_sec div.gotop{
  position: absolute;
  bottom: 0;
  right: 100px;
}
div.footer_sec img{
  margin: 0 auto;
  margin-top: 40px;

}
div.footer_sec p.name{
  color: #333;
  font-size:1.1rem;
  margin-top: 20px;;
  margin-bottom: 5px;;
  font-weight: bold;
}
div.viewscreen {
	width:1000px;
  padding-top: 40px;
	margin: 0px auto;
}
div.viewscreen h3{
	width:1000px;
	margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
div.editscreen {
	width:1000px;
  padding-top: 40px;
	margin: 0px auto;
}
div.editscreen h3{
	width:1000px;
	margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
/* インフォメーション用CSS */
div#article_center{
  display: flex;
  flex-direction: column;
  margin:0 auto;
  padding: 0;
  width: 100%;
  /* background-color: antiquewhite; */
}
div#article_right{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start; /* 追加 */
  /* margin: 0 360px 0 0; */
  padding: 0;
}
div#article_left{
  display: flex;
  align-items: flex-start; /* 追加 */
  padding: 0;
  /* background-color: antiquewhite; */
}
div.img_center{
  display: flex;
  max-width: 720px;
  margin:40px auto 40px;
  /* background-color: #68B876; */
}
div.img_right{
  max-width: 480px;
  margin-left: 60px;
}
div.img_left{
  max-width: 480px;
  margin-right: 60px;
}
div#article_center p.center{
 text-align: left;
 /* background-color: blueviolet; */
 width: 100%;
}
div#article_right p.right{
  text-align: left;
  /* background-color: #68B876; */
  width: 480px;
}
div#article_left p.left{
  text-align: left;
/* background-color: chocolate; */
  width: 480px;
 }

@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%;
        }
        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: 80px;
          color: #333;
          width: 100%; /* 1200px 1920px → 0.625 */
        }
        main article section#sec3_bg div.area_photo{
          display: flex;
          flex-direction: column;
          width: 90%;
          margin: 40px auto;
          align-items: center;
        }
        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: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
          max-width: 220px;
          margin:10px auto;
        }
        main article section#sec3_bg div.area_photo p{
          max-width: 220px;
          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: 140px;
          display: flex;
          flex-direction:column;
          width: 90%;
          align-items: center;
        }
        div.sec3_photo{
          margin-top: 20px;
          display: flex;
          flex-direction:column;
          width: 90%;
          align-items: center;
        }
        div.sec2_photo div.bg_img{
          display: block;
          width: 100%;
        }
        div.sec2_photo div.fr_img{
          right:auto;
          margin-top: 20px;
          margin-left: 0px;
          width: 100%;
          height:100%;
          display: block;
          /* background-color: #f8b551; */
        }
        div.inner_textR{
          margin-top:40px;
          width: 100%;
        }
        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;
          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;
        }
        div.viewscreen {
          width:90%;
          padding-top: 40px;
          margin: 0px auto;
        }
        div.viewscreen h3{
          width:90%;
          padding-top: 40px;
          margin-bottom: 20px;
          text-align: center;
        }
      
        /* ハンバーガーメニュー------------------------------------------------------------- */
        .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%; /*メニューを画面内へ動かす*/
        }
  
        /* ハンバーガーメニュー終わり------------------------------------------------------------- */

        /* インフォメーション用CSS */
        div#article_center,
        div#article_right,
        div#article_left{
          display: flex;
          flex-direction: column;
          margin:0 auto;
          padding: 0;
          width: 100%;
          /* background-color: antiquewhite; */
        }
        div.img_center,
        div.img_right,
        div.img_left{
          max-width: 90%;
          margin:40px auto 40px;
          /* background-color: #68B876; */
        }
        div#article_center p.center,
        div#article_right p.right,
        div#article_left p.left{
        text-align: left;
        /* background-color: blueviolet; */
        width: 100%;
        }
      }

      
  
  @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;
      }
  }