@charset "UTF-8";


.youtube_line_up {
  background: #FFFFFF;
  /*text-align: center;* 20240805*/
}
.youtube_line_up iframe{
  width: 100%;
  max-width: 100%;
  height: 330px;
}
.top_image{
  margin:0px;
  padding:0px 0px 0px 0px;
}
.top_image img{
  width:100%;
  margin: 0px 0px -7px 0px;
  padding:0px;
  line-height:100%;
  height: 30vw;
}
.top_menu {
  margin:0px;
  padding:0px;
  display: flex;
  flex-wrap: wrap;
  width:100%;
}
.top_menu li{
  list-style-type:none;
  overflow:hidden;
}
.top_menu img{
  width:100%;
  height: auto;
  margin: 0px 0px -7px 0px;
  transition: all 0.5s ease;
}
.top_menu img:hover {
  opacity:0.85; 
	transform: scale(1.05);	/*画像の拡大率*/
  transition: all 0.5s ease;
}
.sub_menu {
  margin:0px;
  padding:0px;
  display: flex;
  flex-wrap: wrap;
  width:100%;
}
.sub_menu li{
  list-style-type:none;
  overflow:hidden;
}
.sub_menu img{
  width:100%;
  height: auto;
  margin: 0px 0px -7px 0px;
  transition: all 0.5s ease;
}
.sub_menu img:hover {
  opacity:0.85; 
	transform: scale(1.05);	/*画像の拡大率*/
  transition: all 0.5s ease;
}

.top_menu_slider {
  margin: 0 auto; 
  padding: 0; 
  height: auto;
}

.top_menu_slider > div{
}
.top_menu_slider_spot_wrap {
  border:1px solid #AAAAAA;
}
.top_menu_slider img{
  width:100%;
  height:auto;
  margin: 0px 0px -7px 0px;
  padding:0px;
  transition: all 0.5s ease;
}
.top_menu_slider a{
  text-decoration:none;
}
.top_menu_slider a:hover img{
  opacity:0.85; 
	transform: scale(1.05);	/*画像の拡大率*/
  transition: all 0.5s ease;
}
.top_menu_slider_spot_img{
  width:100%;
  height:auto;
  overflow:hidden;
  margin:0px;
  padding:0px;
  position: relative;
}
.top_menu_slider_spot_img:before{
  content: "";
  display: block;
  padding-top: 75%;
}

.top_menu_slider_spot_img img{
  position: absolute;
  width:100%;
  height:100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0px 0px -7px 0px;
  padding:0px;
  transition: all 0.5s ease;
  object-fit: cover;
  /* IE対策 */
	font-family: 'object-fit: cover;';
}


.top_menu_slider_spot_title {
  font-weight:bold;
  font-size:120%;
  padding:4px 8px 4px 8px;
  color:#191308;
}
.top_menu_slider_spot_tag{
  color:#2289A2;
}
.top_menu_slider_spot_area{
  color:#191308;
  white-space:nowrap;
}
.top_menu_slider_spot_wrap_in {
  display:flex;
  justify-content:space-between;
  padding:0px 8px 4px 8px;
}
.top_event_box {
  margin: 0 auto; 
  padding: 0; 
  height: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.top_event_box_container{
  box-sizing: border-box;
}
.top_event_box_container img{
  width:100%;
  height:auto;
  box-sizing: border-box;
  transition: all 0.5s ease;
  margin: 0px 0px -7px 0px;
  padding:0px;
}
.top_event_box_container a{
  display:block;
  text-decoration:none;
}
.top_event_box_container a:hover img{
  opacity:0.85; 
	transform: scale(1.05);	/*画像の拡大率*/
	transition: all 0.5s ease;
}


.top_event_box_item_image{
  width:100%;
  height:auto;
  overflow:hidden;
  margin:0px;
  padding:0px;
  position: relative;
}
.top_event_box_item_image:before{
  content: "";
  display: block;
  padding-top: 75%;
}

.top_event_box_item_image img{
  position: absolute;
  width:100%;
  height:100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0px 0px -7px 0px;
  padding:0px;
  transition: all 0.5s ease;
  object-fit: cover;
  /* IE対策 */
	font-family: 'object-fit: cover;';
}
.top_event_box_item_date{
  margin-top:10px;
  color:#7A7736;
  font-size:115%;
  line-height:150%;
  font-weight:bold;
}
.top_event_box_item_title {
  margin-top:5px;
  color:#191308;
  font-size:150%;
  line-height:150%;
  font-weight:bold;
}
.top_event_box_item_area {
  margin-top:5px;
  color:#191308;
  font-size:115%;
  line-height:100%;
}

.chubumap_l {

}
.chubumap_s {

}

.kamiinamap {
  text-align:center;
}
.kamiinamap img{
  max-width:450px;
  width:100%;
  height:auto;
  transition: all 0.3s ease;
}
.fadeout{
  opacity: 0;
  transition: 0.15s ease-in-out;
  -webkit-transition: 0.15s ease-in-out;
}
.fadein{
  opacity: 1;
  transition: 1s ease-in-out;
  -webkit-transition: 1s ease-in-out;
}
.top_searchbox{
  margin:auto;
  background:#2287A0;
  color:#FFFFFF;
  padding:5px 15px;
  font-size:120%;
  margin-top:0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content:start;
  align-items:center;
}
.top_searchbox_1{
  flex-grow:0;
  padding-right: 15px;
}
.top_searchbox_2{
  flex-grow:1;
  padding-right: 30px;
}
.top_tagbox{
  margin:auto;
  margin-top:3px;
  border:1px solid #AAAAAA;
  padding:15px 30px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background:#FFFFFF;
}
.top_tagbox_title{
  font-size:130%;
  border-bottom:1px solid #2287A0;
  font-weight:bold;
}
.top_tagbox_box{
  display: flex;
  flex-wrap: wrap;
  padding:10px 0px 0px 0px;
}
.top_tagbox_tag{
  background:#E8F3F5;
  color:#323232;
  line-height:100%;
  display:inline-block;
  padding:10px 20px;
  text-decoration:none;
  font-size:120%;
  border-radius: 25px; 
  white-space: nowrap;
  margin:5px;
}
.top_tagbox_tag:hover {
  color:#E8F3F5;
  background:#2287A0;
  -webkit-transition: 0.2s ease-in-out;
}


.top_oshirase_item {
  margin:auto;
  background:#FFFFFF;
  padding:20px 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.top_oshirase_item+.top_oshirase_item{
  margin-top:10px;
}
.top_oshirase_item_date {
  color:#7A7736;
  font-size:130%;
  display:inline-block;
  font-weight:bold;
}
.top_oshirase_item_area {
  display:inline-block;
  font-size:130%;
  border:1px solid #666666;
  line-height:100%;
  padding:3px 15px;;
  margin:0px 15px;;

}
.top_oshirase_item_text {
  font-size:120%;
  line-height:130%;
  margin-top:10px;
}
.top_oshirase_item_text a{
  text-decoration:none;
  color:#000000;
}

.chubumap_l{
  text-align:center;
  display:none;
}
.chubumap_l img{
  max-width:625px;
  width:100%
}
.chubumap_s{
  text-align:center;
  display:block;
}
.chubumap_s img{

  max-width:768px;
  width:100%
}

/*********************
  top_banner_area
*********************/
.top_banner_area {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;

}

.top_banner_area_img img{
  max-height:276px;
  margin:10px 10px;
  width:auto;
}
.top_kanko_banner_area{
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.top_kanko_banner_area img{
  margin:3px;
}
/* 上に重ねる画像 */
.overlay-image {
  position: absolute;
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100px; /* 重ねる画像の幅 */
  height: 100px; /* 重ねる画像の高さ */
  z-index: 2; /* 基本の画像より上に配置 */
}

/*********************
  media query
*********************/

@media screen and (min-width : 1px) {
  .top_searchbox{
    width: 90%; 
  }
  .top_tagbox{
    width: 90%; 
  }
  .top_oshirase_item {
    width: 95%; 
  }
  .top_menu li{
    width: 50%;
    height: auto;
  }
  .sub_menu li{
    width: 50%;
    height: auto;
  }
  .top_menu_slider {
    width: 80%; 
  }
  .top_event_box {
    width: 80%; 
  }

    .parallax::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
    background-image: url("/files/user/images/instagram/instagram.png");
    top: calc(0% - 0px/2);
    left: calc(0% - 0px/2);
  }
  #modalWrap {
  	display: none;
  	background: none;
  	width: 100vw;
  	height: 100%;
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 100;
	  overflow: hidden;
  }

  .modalBox {
	  position: fixed;
  	width: 100vw;
	  height: 100%;
  	top: 0;
	  bottom: 0;
  	left: 0;
	  right: 0;
	  margin: auto;
	  overflow: hidden;
	  opacity: 1;
	  /*display: none;*/
	  border-radius: 3px;
	  z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
  }

  .modalInner {
	  /*padding: 10px;*/
    width:100vw;
    height:100%;
	  text-align: center;
	  /*box-sizing: border-box;*/
	  /*background: rgba(0, 0, 0, 0.7);*/
    margin: 0 auto;
  	/*color: #000;*/
  }

  .modalInner_l1 {
    background:#FFF;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
  }

  .modalInner_l1 img {
    display: block;
    width: 90vmin;
    margin: 0 auto;
  }

  .title_sub{
    text-decoration: none;
    font-size: 0.5em;
    color: #000;
    font-weight: bold;
  }
  .title_main{
    max-width:55vw;
  }
  .giftxt_pc { 
    display: none !important; 
  }
  .giftxt_sp { 
    display: block !important; 
    font-size: 50%;
  }


  .modalContainer{
	  width: 100%;
    height: 100%;
    overflow: hidden;
  }
/*
  .modalImg {
	  width: 100vw;
  	position: fixed;
	  top: 0;
    left: 0;
  	height: 100vh;
	  opacity: 0;
	  animation: slide-in-anim 13s 0s ease-out forwards,slide-out-anim 0.1s 10s ease-out forwards;
	  overflow: hidden;
    background-color: #FAFAFA;
    flex-direction: column;
    z-index: 1;
  }

  .gifside {
    display: none;
  }

  .gifpict{
    width: 100vmin !important;
    height: 100vmin !important;
  }
  .giftxt {
    display: block;
    font-size
  }

  @keyframes slide-in-anim {
  	0%{
      display:flex;
      opacity: 0;
    }
    20% {
      opacity: 1;
      display: flex;
    }
    50% {
	  	opacity: 1;
      display: flex;
	  }
    80% {
      opacity: 1;
      display: flex;
    }
    100% {
  		opacity: 0;
      display: none;
    }
    
  }

  @keyframes slide-out-anim {
	  0% {
  		opacity: 0;
      display: none;
	  }
    50%{
      opacity: 0;
      display: none;
    }
  	100% {
	  	opacity: 0;
      display: none;
      transform: translateX(200%);
	  }
  }

  .gifClose{
    display: block;
  }
  .gifClose img{
    height: auto;
  }
  .top_txt{
    text-align: left;
    font-size: 10px;
    font-weight: bold;
  }
  .top_kiji_txt{
    font-size: 50%;
    padding:0% 3%;
    font-weight: bold;
  }
  .footer_txt{
    font-size: 50%;
    padding:0% 3%;
  }
  */
  
  .modalImg {
	  width: 100vw;
  	position: fixed;
	  top: 0;
    left: 0;
  	/* margin: 5% 10% 0% 10%; */
	  /* margin-left: 10%; */
  	height: 100vh;
	  opacity: 0;
  	/* margin-left: 63%; */
	  /* transform: translateX(-200%); */
	  animation: slide-in-anim 17s 0s ease-out forwards,slide-out-anim 0.1s 17s ease-out forwards;
	  /* padding-right: 6%; */
	  overflow: hidden;
    background-color: #FFF;
    flex-direction: column;
    z-index: 1;
  }

  .gifside {
    display: none;
  }

  .gifpict{
    width: 100vmin !important;
    height: 100vmin !important;
  }
  .giftxt {
    display: block;
    font-size
  }

  @keyframes slide-in-anim {
  	0%{
      display:flex;
      opacity: 0;
    }
    10% {
      opacity: 1;
      display: flex;
    }
    50% {
	  	opacity: 1;
      display: flex;
	  }
    90% {
      opacity: 1;
      display: flex;
    }
    100% {
  		opacity: 0;
      display: none;
    }
    
  }

  @keyframes slide-out-anim {
	  0% {
  		opacity: 0;
      display: none;
	  }
    50%{
      opacity: 0;
      display: none;
    }
  	100% {
	  	opacity: 0;
      display: none;
      transform: translateX(200%);
	  }
  }

  .gifClose{
    display: block;
  }
  .gifClose img{
    height: auto;
  }
  .top_txt{
    text-align: left;
    font-size: 10px;
    font-weight: bold;
  }
  .top_kiji_txt{
    font-size: 50%;
    padding:0% 3%;
    font-weight: bold;
  }
  .footer_txt{
    font-size: 50%;
    padding:0% 3%;
  }


}

@media screen and (min-width : 800px) {
  .youtube_line_up iframe {
    width: 33%;
    max-width: 560px;
    height: 315px;
    margin:0 auto;
  }

  .top_searchbox{
    width:700px;
  }
  .top_tagbox{
    width:700px;
  }
  .top_oshirase_item {
    width: 90%; 
  }
  .top_menu li{
    width: calc(100% / 3);
    height: auto;
  }
  .sub_menu li{
    width: calc(100% / 4);
    height: auto;
  }
  .top_menu_slider {
    width: 90%; 
  }
  .top_event_box {
    width: 90%; 
  }
  .parallax::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    width: 1300px;
    position: fixed;
    z-index: -1;
    background-image: url("/files/user/images/instagram/instagram.png");
    top: calc(0% - 0px/2);
    left: calc(50% - 1300px/2);
  }
    #modalWrap {
  	/*display: none;*/
  	background: none;
  	width: 100vw;
  	height: 100%;
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 100;
	  overflow: hidden;
  }

  .modalBox {
	  position: fixed;
  	width: 100vw;
	  height: 100%;
  	top: 0;
	  bottom: 0;
  	left: 0;
	  right: 0;
	  margin: auto;
	  overflow: hidden;
	  opacity: 1;
	  /*display: none;*/
	  border-radius: 3px;
	  z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
  }

  .modalInner {
	  /*padding: 10px;*/
    width:100vw;
    height:100%;
	  text-align: center;
	  /*box-sizing: border-box;*/
	  /*background: rgba(0, 0, 0, 0.7);*/
    margin: 5vh auto;
  	/*color: #000;*/
  }

  .modalInner_l1 {
    background:#FFF;
    width: 80vmin;
    height: 80vmin;
    margin: 0 auto;
  }

  .modalInner_l1 img {
    display: inline;
    width: 70vmin;
    margin: 0 5vmin;
  }

  .title_sub{
    text-decoration: none;
    font-size: 1.5em;
    color: #000;
    font-weight: bold;
  }
  .title_main{
    max-width:55vw;
  }
  .giftxt_pc { 
    display: block !important;
  }
  .giftxt_sp { 
    display: none !important;
  }
  .gifside {
    display: block;
  }
  .gifpict{
    width: 30vw !important;
    height: 30vw !important;
  }


/*
.modalImg {
    display: flex;
    width: unset;
    height: 30vw;
    overflow: hidden;
    background-color: transparent;
　  opacity:0;
    animation-name: slider;
    animation-duration:13s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-align:center;
    position: absolute;
    top:auto;
    left:auto;
    right:50%;
    flex-direction: row;
  }
  
  @keyframes slider {
    0% {
      opacity: 0;
      transform: translateX(50%);
    }
    15%{
      opacity: 1;
      transform: translateX(50%);
    }
    60%{
      opacity: 1;
      transform: translateX(50%);
    }
    80% {
      opacity: 0;
      transform: translateX(50%);
    } 
    100% {
      opacity: 0;
      transform: translateX(50%);
    } 
  }
  
  .giftxt {
    display: flex;
    width: auto;
    overflow: hidden;
    background-color: transparent;
　  opacity:0;
    animation-name: giftxt;
    animation-duration:13s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-align:center;
  }

  @keyframes giftxt {
    0% {
      opacity: 0;
    }
    15%{
      opacity: 1;
    }
    50%{
      opacity: 1;
    }
    55%{
      opacity: 1;
    }
    80% {
      opacity: 0;
    } 
    100% {
      opacity: 0;
    } 
  }*/

  .modalImg {
    display: flex;
    width: auto;
    height: 30vw;
    overflow: hidden;
    background-color: transparent;
　  opacity:0;
    animation-name: slider;
    animation-duration:24s; 
    //animation-duration:13s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-align:center;
    position: absolute;
    top:auto;
    left:auto;
    right:50%;
    flex-direction: row;
  }

@keyframes slider {
    0% {
      opacity: 0;
      transform: translateX(-100%);
    }
    20%{
      opacity: 1;
      transform: translateX(50%);
    }
    50%{
      opacity: 1;
      transform: translateX(50%);
    }
    75%{
      opacity: 1;
      transform: translateX(50%);
    }
    85% {
      opacity: 0;
      transform: translateX(200%);
    } 
    100% {
      opacity: 0;
      transform: translateX(-100%);
    } 
  }
    /*
  @keyframes slider {
    0% {
      opacity: 0;
      transform: translateX(50%);
    }
    15%{
      opacity: 1;
      transform: translateX(50%);
    }
    60%{
      opacity: 1;
      transform: translateX(50%);
    }
    80% {
      opacity: 0;
      transform: translateX(50%);
    } 
    100% {
      opacity: 0;
      transform: translateX(50%);
    } 
  }*/
  
  .giftxt {
    display: flex;
    width: auto;
    overflow: hidden;
    background-color: transparent;
　  opacity:0;
    animation-name: giftxt;
    animation-duration:23s;
    //animation-duration:13s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-align:center;
  }
/*
  @keyframes giftxt {
    0% {
      opacity: 0;
    }
    15%{
      opacity: 1;
    }
    50%{
      opacity: 1;
    }
    55%{
      opacity: 1;
    }
    80% {
      opacity: 0;
    } 
    100% {
      opacity: 0;
    } 
  }
  */
  @keyframes giftxt {
    0% {
      opacity: 0;
    }
    20%{
      opacity: 1;
    }
    25%{
      opacity: 1;
    }
    50%{
      opacity: 1;
    }
    75%{
      opacity: 1;
    }
    80% {
      opacity: 0;
    } 
    100% {
      opacity: 0;
    } 
  } 



  .gifClose{
    display: none;
  }
  .top_txt{
    text-align: left;
    font-size: 30px;
    font-weight: bold;
  }
  .top_kiji_txt{
    font-size: 100%;
    padding0% 3%;
    font-weight: bold;
  }
  .footer_txt{
    font-size: 100%;
    padding:0% 3%;
  }

}

@media screen and (min-width : 1024px) {
  .top_menu li{
    width: calc(100% / 3);
    height: auto;
  }
  .sub_menu li{
    width: calc(100% / 4);
    height: auto;
  }
/*
  .modalImg {
	  width: 100%;
  	position: absolute;
	  /* top: 0%; 
  	/* margin: 5% 10% 0% 10%; 
  	margin-left: 10%;
	  height: 70%;
  	opacity: 0;
	  margin-left: 63%;
  	transform: translateX(-200%);
	  opacity: 0;
  	animation: slide-in-anim 15s 0s ease-in-out forwards;
	  padding-right: 6%;
  	overflow: hidden;
	  display: flex;
  } 
*/

}
@media screen and (min-width : 1100px) {
  .top_map {
    display: flex;
    justify-content:center;
  }
  .chubumap_l{
    display:block;
  }
  .chubumap_s{
    display:none;
  }

/*
  .modalImg {
	  width: 100%;
  	position: absolute;
	  /* top: 0%; 
  	/* margin: 5% 10% 0% 10%; 
  	margin-left: 10%;
	  height: 72%;
  	opacity: 0;
	  margin-left: 63%;
  	transform: translateX(-200%);
	  opacity: 0;
  	animation: slide-in-anim 15s 0s ease-in-out forwards;
	  padding-right: 6%;
  	overflow: hidden;
	  display: flex;
  } 
*/

}

@media screen and (min-width : 1350px) {
  .top_oshirase_item {
    width: 80%; 
    max-width:1020px;
  }
  .top_menu_slider {
    width: 95%; 
  }
  .top_event_box {
    width: 95%; 
  }
 
/*
  .modalImg {
	  width: 100%;
  	position: absolute;
	  /* top: 0%; 
  	/* margin: 5% 10% 0% 10%; 
  	margin-left: 10%;
	  height: 77%;
  	opacity: 0;
	  margin-left: 63%;
  	transform: translateX(-200%);
	  opacity: 0;
  	animation: slide-in-anim 15s 0s ease-in-out forwards;
	  padding-right: 6%;
  	overflow: hidden;
	  display: flex;
  } 
*/

}

@media print{
  .top_searchbox{
    width:700px;
  }
  .top_tagbox{
    width:700px;
  }
  .top_oshirase_item {
    width: 90%; 
  }
  .top_menu li{
    width: calc(100% / 3);
    height: auto;
  }
  .sub_menu li{
    width: calc(100% / 4);
    height: auto;
  }
  .top_menu_slider {
    width: 90%; 
  }
  .top_event_box {
    width: 90%; 
  }
}

.parallax_box{
  height: 25%;
  overflow-x: hidden;
  overflow-y: auto;
}
/* 背景画像の見えている高さ */
.parallax {
  height: auto;
  text-align: center;
}


.contents {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }
.contents img {
    /* width: 100%; */
    height: 180px;
}
.flexbox {
    display: flex;
}
.box1 {
    width: 50%;
    margin: auto;
}
.box2 {
    width: 50%;
    margin: auto .0rem;
}
.box3 {
    width: 33%;
    margin: auto .0rem;
}
.box30 {
    width: 30%;
    margin: auto .0rem;
    text-align: center;
}
.box67 {
    width: 67%;
    margin: auto .0rem;
}
.box70 {
    width: 70%;
    margin: auto .0rem;
}
.box60 {
    width: 60%;
    margin: auto .0rem;
}
.box40 {
    width: 40%;
    margin: auto .0rem;
}
/* yajima */
.flexbox1 {
    display: flex;
}
.box5 {
    width: 5%;
    margin: auto;
}
.box95 {
    width: 95%;
    margin: auto .0rem;
}### ito ###
.contents {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }
.contents img {
    /* width: 100%; */
    height: 180px;
}
.flexbox {
    display: flex;
}
.box1 {
    width: 50%;
    margin: auto;
}
.box2 {
    width: 50%;
    margin: auto .0rem;
}
.box3 {
    width: 33%;
    margin: auto .0rem;
}
.box30 {
    width: 30%;
    margin: auto .0rem;
    text-align: center;
}
.box67 {
    width: 67%;
    margin: auto .0rem;
}
.box70 {
    width: 70%;
    margin: auto .0rem;
}
/* yajima */
.flexbox1 {
    display: flex;
}
.box5 {
    width: 5%;
    margin: auto;
}
.box95 {
    width: 95%;
    margin: auto .0rem;
}.box30 {
    width: 30%;
    margin: auto .0rem;
}
.box10 {
    width: 10%;
    margin: auto .0rem;
}
.box45 {
    width: 45%;
    margin: auto .0rem;
}
}.box25 {
    width: 25%;
    margin: auto .0rem;
}


/*===========
inview
===========*/

.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/*===========
.imgBox
===========*/

.imgBox {
  text-align: center;
  margin: 50px 0;
}
.imgBox img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/*===========
.txtBox
===========*/

.txtBox {
  text-align: center;
}
.txtBox p {
  font-size: 60px;
  font-weight: bold;
  padding: 2em 0;
  margin: 0;
}

/*===========
base
===========*/

html {
  margin: 0;
  padding: 0;
}
body {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  letter-spacing: .025em;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
.section {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 20px 500px;
  overflow-x: hidden;
}
.section p._a {
  font-size: 12px;
  font-weight: bold;
  margin: 30px 0 0;
}
.section p._a .link {
  display: inline-block;
  color: #607D8B;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.section p._a .link:before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #607D8B;
  border-right: 2px solid #607D8B;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-right: 10px;
}


.fade-in{ 
　opacity:0;
  animation-name:sample03;
  animation-duration:10s; 
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  text-align:center;
  position: absolute;
  right:50%;
  display: flex;
}
@keyframes sample03 {
0% {
 opacity: 0;
 transform: translateX(-200%);
}
  50%{
    opacity: 1;
    transform: translateX(50%);
  }
 100% {
 opacity: 0;
 transform: translateX(300%);
 } 
}