@charset "UTF-8";

/* CSS Document */
a{
  text-decoration: none;
  color: inherit;
}
.sp_only{
  display: inline;
}
.none{
  display: none;
}
.font12{font-size: 12px;}
.font14{font-size: 14px;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}

.color1{color:#79b530;}
.color2{color:#007cba;}

.c_red {color: #F00;}
.c_darkred {color: #8b0000;}
.c_pink {color: #FF66CC;}
.c_pink_red {color: #F03;}
.c_blue {color: #06F;}
.c_blueblack {color: #039;}
.c_lightblue {color: #0CF;}
.c_orange {color: #F60;}
.c_orange_red {color: #F30;}
.c_lightorange {color: #F90;}
.c_yellow {color: #FFCC00;}
.c_green {color: #090;}
.c_darkgreen {color: #060;}
.c_purple {color: #9933CC;}
.c_brown {color: #993333;}

header{
  display: flex;
  justify-content: space-around;
  padding-right: 32px;
}
body{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* transform: rotate(0.03deg); */
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.logo a{
  display: flex;
  align-items: center;
}
.logo img{
  height: 100px;
}
.logo .title{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#79b530;
  /* font-size: 48px; */
  font-size: clamp(18px,6.5vw, 48px); 
  margin-left: 0.5em;
}
.logo .sub_title{
  font-weight: normal;
  font-style: normal;
  color:#666;
  /* font-size: 18px; */
  font-size: clamp(10px, 3.5vw, 18px);

}
/* .menu{
  display: none;
} */  
.menu ul{
  /* display: flex;
  flex-wrap: nowrap; */
  list-style: none;
  align-items: center;
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 800;
  font-style: normal;
  color:#79b530;
  font-size: 20px;
}
.menu ul li{
  text-align: center;
  border-bottom: #79b530 1px dotted;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

/**************** ここまで、ハンバーガーボタンのスタイリング ****************/
.menu {
  position: fixed;
  top:0;
  right: -50%;
  z-index: 20;
  width: 50%;
  /* height: 50vh; */
  margin-left: auto;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
  color: #efefef;
  background-color: rgba(255, 255, 255, 0.8);
  transition: .3s;
  padding: 0;
  list-style: none;
  /*font-family: "G2サンセリフ-B";*/
  font-size: 18px;
}  
.menu ul{
  padding: 0;
}
button {
  margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}
/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.btn_menu {
  /* ボタンの配置位置  */
  position: fixed;
  top: 0px;
  right: 0px;
  /* ボタンの大きさ  */
  width: 40px;
  height: 40px;
  /* 最前面に */
  z-index: 30;
  background-color: #F0F0F0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
/***** 真ん中のバーガー線 *****/
.btn-line {
  display: block;
  /* バーガー線の位置基準として設定 */
  position: relative;
  /* 線の長さと高さ */
  width: 80%;
  height: 4px;
  margin: 0 auto;
  /* バーガー線の色 */
  background-color: #888;
  transition: .2s;
}
/***** 上下のバーガー線 *****/
.btn-line::before , .btn-line::after {
  content: "";
  /* 基準線と同じ大きさと色 */
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #888;
  transition: .5s;
}
.btn-line::before {
  /* 上の線の位置 */
  transform: translateY(-12px);
}
.btn-line::after {
  /* 下の線の位置 */
  transform: translateY(12px);
}
/***** メニューオープン時 *****/
.btn-line.open {
  /* 真ん中の線を透明に */
  background-color: transparent;
}
.btn-line.open::before , .btn-line.open::after {
  content: "";
  background-color: #888;
  transition: .2s;
}
.btn-line.open::before {
  /* 上の線を傾ける */
  transform: rotate(45deg);
}
.btn-line.open::after {
  /* 上の線を傾ける */
  transform: rotate(-45deg);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

/***** メニューオープン時位置0にして画面内に *****/
.menu.open {
  /*position: absolute;*/
  right: 0;
}

.menu img{
  display: block;
  height: 60px;
  margin: auto;
} 
.menu .insta_icon{
  height: 80px;
}
/*--- page image ---*/
#page_img{
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1200px;
}
#page_img img{
  display: block;
  width: 100%;
  position: relative;
  /* opacity: 0.5; */
  opacity: 0.8;
}
#page_img .message{
  position: absolute;
  text-align: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#page_img .title {
  color: #007cba;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
  font-size: 48px;
  margin-bottom: 6px;
}
#page_img .sub_title{
  font-size: 24px;
  font-weight: bold;
  color: #FFB600;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
/*---------------*/
#sub_page_img{
  position: relative;
  width: 100%;
  height: 20vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;}
  #sub_page_img img{
    display: block;
    width: 100%;
    position: relative;
    /* opacity: 0.5; */
    opacity: 0.7;
  }
  #sub_page_img .message{
    position: absolute;
    text-align: center;
    display: flex;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  #sub_page_img .title {
    color: #007cba;
    /* text-shadow: 0px 0px 10px rgba(255, 255, 255, 1); */
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1);
    text-shadow: 10px 10px 20px rgba(255, 255, 255, 1), -9px -10px 20px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1);
    font-size: 48px;
  }
  .page{
    padding: 0.5em;
  }
  footer{
    display: flex;
    flex-wrap: wrap;
    background-color: #007cba;
    color: #fff;
  }
  .footer_menu{
    width: 100%;
    /* margin: 1em; */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .footer_menu .menu_list{
    padding: 0;
    width: 50%;
    margin-top: 0;
    
  }
  .footer_menu .menu_list li{
    padding-left: 0px;
    margin-left: 1.5em;
    font-size: 12px;
    
  }
  .footer_menu .menu_list li:nth-child(1){
    font-weight: bold;
    font-size: 14px;
    padding-left: 1em;
    padding-top: 0.5em;
    list-style: none;
    margin-left: 0;
  }
  footer .en_info{
    width: 100%;
    text-align: center;
    border-top: 1px #fff dashed;
  }
  footer .en_info>div{
    margin-top: 0.5em;
  }
  .copyright{
    margin: 1em auto;
    width: 100%;
    font-size: 12px;
    text-align: center;
  }

  /*-------------------------------------*/
  /*------------ Tablet View ------------*/
  /*-------------------------------------*/
  @media (min-width: 768px){
    .sp_only{
      display: none;
    }
    header{
      min-width: 1400px;
      display: flex;
      justify-content: space-around;
      padding: 0;
    }
    .logo img{
      height: 200px;
    }
    .page {
      width: 960px;
      margin: 0 auto;
      transform: rotate(0.03deg);

    }
      .logo .title{
      margin-left: 0.25em;
      font-size: clamp(36px, 2.5vw, 48px); /* 最小18px、推奨2.5vw、最大48pxに制限 */
    }
    .logo .sub_title{
      /* font-size: clamp(12px, 1.5vw, 20px); */
      font-size: 20px;
      text-align: center;
    }
    .menu{
      /* background-color: #FFFDF7; */
      /* width: 100%; */
      /* display: flex; */
      /* flex-wrap: wrap; */
      /* list-style: none; */
      height: 70px;
      right: 0px;
      /* margin: 0 auto; */
      /* align-items: center; */
      /* justify-content: center; */
      /* font-weight: bold; */
      /* font-size: 20px; */
  }
    .menu{
      display: block;
      position: inherit;
      width: auto;
      margin: 0;
    }
    .menu ul{
      display: flex;
      flex-wrap: nowrap;
      list-style: none;
      align-items: center;
      font-family: "Hachi Maru Pop", cursive;
      font-weight: 800;
      font-style: normal;
      color:#79b530;
      font-size: 20px;
    
    }
    .menu ul li{
      margin: 1.5em;
      text-align: center;
      border: none;
      /* padding-bottom: 0.5em; */
    }
    .menu img{
      display: block;
      height: 60px;
      margin: auto;
    } 
    .menu .insta_icon{
      height: 80px;
    }
    .btn_menu {
      display: none;
    }
    #sub_page_img{
      min-width: 1200px;
    }

    footer{
      justify-content: space-around;
      align-items: center;
    }
    footer .footer_menu{
      order: 2;
      width: auto;
      margin: 1em 0;
      display: flex;
      justify-content: space-around;
      /* border-top: 1px #fff dashed; */
      color: #fff;
    }
    footer .footer_menu .menu_list{
      list-style: none;
      padding: 0;
        width: auto;
        margin: 1em;
        
    }
    footer .footer_menu .menu_list li{
        padding-left: 0.5em;
        margin-left: auto;
        font-size: medium;
    }
    footer .footer_menu .menu_list li:nth-child(1){
        font-weight: bold;
        font-size: large;
        padding-left: 0;
    }
    footer .en_info{
      order: 1;
      width: auto;
      text-align: center;
      border-top: none;
    }
    footer .en_info>div{
      margin-top: 0.5em;
    }
    footer .copyright{
      order: 3;
      margin: 1em auto;
      width: 100%;
      font-size: initial;
      text-align: center;
    }
    
}
/*--- Desktop View ---*/
@media (min-width: 1200px){
  /* header{
    min-width: 1200px;
  } */

  .separate{
      display: flex;
      justify-content: space-around;
  }
  .separate img{
      height: 100px;
  }
}