:root {
  --color-blue1: #0055AD;
  --color-blue2: #00ceff;
  --color-font-white: #fff;
}

* {
  /*Google Fonts*/
  font-family: 'Noto Sans JP', sans-serif;
}

/*font-size 基本*/
h1{font-size: 30px;}h2{font-size:25px;}h3{font-size:20px;}h4{font-size:16px;}
p{font-size: 14px;}
a{text-decoration: none;}

/*img-box*/
.img-box{width: 100%; height: auto;margin: 0 auto;}
.img-box img{width: 100%; height: auto;}

/*h2*/
h2{text-align: center;color: white;}
/*h2設定ここまで*/

/*h3*/
.ttl-h3 {
  width: 300px;
  margin: 0 auto;
  padding: 10px 0;
  font-family: sans-serif;
  color: white;
}
.heading {
  margin: 10px 0
}
.ttl-h3-1 .wrapper {
  padding: 5px;
  text-align: center;
  border: 3px solid;
  border-top: none;
  width: 300px;
}
.ttl-h3-1 .wrapper .caption {
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  overflow: hidden;
  margin: -5px -8px 0 -8px;
  position: absolute;
  width: 300px;
  font-size: 16px;
}
.ttl-h3-1 .wrapper .caption:before,
.ttl-h3-1 .wrapper .caption:after {
  content: "";
  position: absolute;
  width: 100%;
  margin-top: -2px;
  border-top: 3px solid;
  top: 50%;
}
.ttl-h3-1 .wrapper .caption:before {
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  margin-left: -30px;
}
.ttl-h3-1 .wrapper .caption:after {
  margin-left: 30px;
}
/*h3設定ここまで*/

/*top-box設定*/
.top-box-a{background-color: white;}
.top-box-a .mid-box{display: flex;padding: 10px 0;}
.top-box-a .header-left {width: 50%;}
.top-box-a .header-right{width: 50%;}
.top-box-a h1 {font-size: 30px;color: green; text-align: center;margin:0;padding: 20px 0;}
.top-box-a h1 span {font-size: 16px;}
.top-box-a h1 a{color: darkgreen;}
.top-box-a h1~ .sub{text-align: center;}
.top-box-a h1~ .sub span{background-color: green;color: white;padding: 0 60px;}
.top-box-a .header-left .img-box{height: 70px; margin: 0 auto;}
.top-box-a .header-right p{text-align: center;font-size: 18px;margin: 0;line-height: 60px;}
.top-box-a .header-right p a{color: green; border: 1px solid green;padding: 0 20px;}

/*top-box-b設定*/
.fixed-on{position: fixed;z-index: 1;opacity: 0.9;transition: 1s;box-shadow: 0 2px 2px #cbc8c8;}
.fixed-on .container-fluid{padding: 0;}
.fixed-on .top-box-a{border-bottom: 1px solid green;}
.fixed-on .top-box-a h1{position: absolute;z-index:-1;}
.fixed-on .top-box-a h1~ .sub{margin: 0;}
.fixed-on .top-box-a h1~ .sub span{display: block;padding: 0;margin: 0;}
.fixed-on .top-box-a .header-left .img-box{height: auto;width: 90%;}
.fixed-on .top-box-a .header-right p{font-size: 16px;margin: 0;line-height: 50px;}
.fixed-on .mid-box{padding: 0;}
.f-on{padding-top: 100px;}
/*top-box-b設定 ここまで*/

/*header nav*/
.nav-box-a{margin: 0;padding: 0;background-color: white;}
.nav-box-a nav{margin: 0;padding: 0;}
.nav-box-a ul{list-style: none;margin: 0;padding: 0;display: flex;background-color: white;}
.nav-box-a li{list-style: none;margin: 0;padding: 10px 0;width: 25%;text-align: center;font-size: 12px;}
.nav-box-a li a{color: darkgreen;display: block;}
.nav-box-a li:hover{color:white;background-color: darkgreen;}
.nav-box-a li:hover a{color:white}

main{background-color: green;}

/*sec 共通*/
.sec{margin: 50px 0;}

.sec0{padding: 50px 0 0;}
.sec0 h2{background-color: darkgreen;padding: 10px 0;}
.sec0 .ttl{color: green;text-align: center;margin:30px 0 20px;font-size: 20px;}
.sec0 .ttl a{color: green;text-align: center;margin:30px 0 20px;font-size: 20px;}
.sec0 .ttl span{display: inline-block; background-color: white;padding: 10px;}
.sec0 .gai{color: white;text-align: center;}
.sec0 .img-box{border: 5px solid white;}

/*Process*/
.sec-flow .out-box{padding:   0; margin: 0;}
.sec-flow .mid-box{padding: 0px; margin: 0;}
.sec-flow  .in-box{padding: 2px;margin: 0;background-color: white;box-shadow: 0 1px 2px gray; }
.sec-flow  .in-box p{padding: 5px;margin: 0;}

/*Gallery*/
.sec-gallery .out-box{padding: 0;margin: 0;}
.sec-gallery .mid-box{padding: 0;margin: 0;}
.sec-gallery  .in-box{padding: 0;margin: 0;}

/*Link*/
.sec-link .out-box{margin: 0;padding: 0;}
.sec-link .mid-box{background-color: white;width: 300px;margin: 0 auto;}
.sec-link .in-box{margin: 0;padding: 0;}
.sec-link .mid-box p{font-size: 20px;text-align: center;margin: 20px;}

/*footer copy*/
footer {margin: 0;padding:0;}
footer .footer-box{display: flex;justify-content: center;background-color: white;margin: 0;padding: 0;}
footer .footer-box > div{margin: 20px;padding: 0;}
footer .footer-box > div p{margin: 0;}
footer .copy p{font-size: 10px;text-align: center;color: darkgreen;padding: 10px 0;margin: 0; background-color: white;}

/*********************
メディアクエリ 768px 以上
**********************/
@media (min-width: 768px) {
  .top-box-a{display: flex;justify-content: space-around;}
  .top-box-a .mid-box{flex-direction: row-reverse;padding: 0;}
  .top-box-a .header-left {width: 170px;}
  .top-box-a .header-right{width: auto;}
  .top-box-a h1{margin: 0;}
  .top-box-a h1~ .sub{font-size: 16px;margin: 25px 0;padding: 0;}
  .top-box-a h1~ .sub span{padding: 5px 10px;margin: 0;}
  .top-box-a .header-right p{font-size: 16px;line-height: 16px;margin: 30px 5px;}
  .top-box-a .header-left .img-box{margin: 10px 20px;}
  .top-box-a .header-left .img{margin: 10px auto;}

  /*top-box-b設定*/
  .fixed-on .top-box-a h1{position:static;z-index: 1;}
  .fixed-on .top-box-a h1~ .sub{font-size: 16px;margin: 25px 0;padding: 0;}
  .fixed-on .top-box-a h1~ .sub span{padding: 5px 10px;margin: 0;}
  .fixed-on .top-box-a .header-right p{font-size: 16px;line-height: 16px;margin: 35px 5px;}
  /*top-box-b設定 ここまで*/

  .nav-box-a ul{justify-content: center;}
  .nav-box-a li{width: 100px;}
}

/*********************
メディアクエリ 1024px 以上
**********************/
@media (min-width: 1024px) {
  .top-box-a{justify-content:center;}
  .top-box-a .ma{margin: 0 20px;}
  .top-box-a .header-left {width: 200px;}
  .top-box-a .header-right{width: 200px;}
  .top-box-a h1{margin: 200px;}
  .top-box-a .header-left .img-box img{height: 100%;width: auto;}

  /*top-box-b設定*/
  .top-box-a .header-left .img-box img{height: 60px;width: auto;}
  /*top-box-b設定 ここまで*/

}

/*********************
メディアクエリ 1280px 以上
**********************/
@media (min-width: 1280px) {

}