@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");

 *{
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1em;
  
} /**/

img {
  vertical-align: bottom;
}

a{
  color: #8cb298;/**/
  text-decoration: none;
}
.txt{font-size: .8rem;}

/* .en{font-family: 'Nanum Pen Script', cursive;  } */


/*-----------------------------------load----------------------------------*/







/*----------------------------------------------------------------------*/
#container{
  position: relative;
  margin: 0 auto;
  text-align: center;

}

#container2 {
  position: relative;
  margin: 0 auto;
  text-align: center;
 width: 100%;
display: flex;		
font-family: "Noto Sans JP", sans-serif;
  

}
.leftBox, .rightBox{flex-basis: 50%;}
.rightBox{
    background-color:#fff ;
    position: relative;
    z-index: 99;
    overflow: hidden;
    /*background-image: url("../img/back.png");
    background-size: contain;
    background-position: center;*/
}

.main{
	margin: 0 auto;
	text-align: center;
	
}

section {
  position: relative;
    margin: 0 auto;
    width: 90%;
    margin-bottom: 50px;
    text-align: center;
    max-width: 530px;
    overflow: hidden;
   
}
.hricon{
    position: relative;
    padding: 10% 0;
    margin: 0 auto;
    text-align: center;
    border-top: solid 1px #8cb298;
}

.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.fitem{
    flex-basis: 34%;
    border:solid 1px #8cb298;
    border-radius: 15px;
    padding: 6%;
    width: 35%;
    margin-bottom: 10%;
  
}
.fitem img{background-color: #f0f0f0;}

.fitem_1{margin-right: 2.5%;}
.fitem_2{margin-left: 2.5%;}
.fitem1{flex-basis: 65%;}
.fitem2{flex-basis: 35%;}

h2{
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
   /* padding-top:10px;*/
}


/*--------------------------------------top-------------------------------------------------------------------*/
.intro_img{position: relative;height: 70vh;}


.icon {
  position: absolute;
    
}
.icon_mum{position: relative;}


#top_intro{
  position: relative;
	height: 100vh;
    overflow: hidden;
    max-width: 530px;
    margin: 0 auto;
    text-align: center;
     display: flex;
    align-items: center;
}


.intro_ttl {
color: #8cb298;
  line-height: 2;
  font-weight: 400;
text-align: left;
margin-left: 2%; /* */
}
  
 .logo {
  
  margin-top: 20px;
  font-size: 1.1rem;
	
}

.top_nav ul{display: flex;list-style: none;}/**/
.top_nav li{
    border: solid 1px #8cb298;
    border-radius: 50%;/**/
    padding:3px 5px;
    margin-right: 10px;
    font-size: .8rem;
}
.top_nav a{color:#8cb298;}

.redtxt{font-size: .7rem;color: #fff;
}
#index{margin-bottom: 5rem;}


/*-------------------------back--leftbox------------------------------------------------------------------------------------------------------------*/
.leftBox{position: relative; }
.backImg{
	align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 50%;
	z-index: -1;
  
	/*background-image: url("../img/back2.jpg");*/
	background-size: cover;
	background-position:center; 
   /*mix-blend-mode:screen;*/
}

.backImg::before {
   background-color: #e2e7d8;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    /**/
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .7s ease;
    width: 100%;
    z-index: 1;
}
 
.interview2 .backImg::before {
	opacity: 1;
	
}
#g-nav{
  margin: 0 auto;
  text-align: center;
  width: 50%;
  position: relative;
}


.index_menu{
    width: 50%;
	list-style: none;
	 position: fixed;
	z-index: 9; 
   display: inline-block; 
  padding-top: 12%;
    inset:0;
    margin: 0;  

}
.index_menu li{
	padding: 20px 0;
	cursor: pointer;
	 /* font-family: "shlop", sans-serif; */
    font-size: 1.3rem;
    font-weight: 700;
    
    
}
.index_menu li a{color:#83ac8f;}/*A16CD6*/
.index_menu li {
	opacity: 0;
}
.interview2 .index_menu li {
	opacity: 1;
	
}

.li_top{text-decoration: none;}
.toptxt{opacity: 1;color: #8cb298;padding-bottom: 7%;font-weight: 500;}
.top_intro h2{
    margin: 0;
    margin-block-start:0;
    margin-block-end: 0;
    font-size: 1rem;}

.is-active {
  text-decoration: underline;
color:#83ac8f;
    /* #FFB455 line-through*/;
    
}
.loop{opacity: 0;z-index: 99;}
.interview2 .loop{opacity: 1;}
#intro_left{
	width:50%;
	
}



/*------------------------item1-------------------------------------------*/

.coment{margin-top: 7%;color: #8cb298;}
.coment p{font-size: .7rem;text-align: left;}
.ckbtn{
    border-radius: 50%;
    border:solid 1px #8cb298;
    padding:4px 5px;
    font-size: .7rem;
}
.coment .fitem2{text-align: right;}

.itembox{
     margin-bottom: 40px; 
    position: relative;
    border-bottom:solid 1px #8cb298;
   
}

.itembox:last-child{border-bottom: none;}
#graphic .coment{margin-bottom: 5%;}

#illust .fitem{border-radius: 0;padding: 0;flex-basis: 46%;}


.ab_box{
  width: 88%;
  margin:0 auto 5% auto;
  border:solid 1px #8cb298 ;
  padding: 5%;
  border-radius: 15px;
  color:#8cb298;
}

.ab_img{
  max-width: 150px;
  margin: 0 auto;
padding-bottom: 7%;
}
.ab_img img{border-radius: 50%;}
.about_txt{
  text-align: left;
  line-height: 2;
}


.site-header{display: none;}

.loop{
    width: 100%;
    bottom: 7%;
    
}







/*--------------------------------------スマホ-----------------------------------------------------------------------*/
 @media (max-width: 749px) {
	 
    
  #container2{
    border:none;
    border-radius: 0;
    max-width: 100%;
    margin-bottom: 0px;
	  margin-left: 0;
      z-index: 10;
      display: block;
  }

 

  
     .leftBox{
    flex-basis: 100%;
    height: auto;
    }  /**/
     #g-nav{display: none;}
     .backImg{
	
    display:block;
    height:auto;
    position: relative;
    width: 100%;
    
}
    .backImg::before{display: none;}  /* */
	 .rightBox{
         flex-basis: 100%;
        
     }
  .loop{
    display: none; 
}

 #top_intro{
    position: relative;
	height:auto;
   display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 23%;
   
  }

.top_nav ul{display: block;}
.top_nav li{display: inline-block;}

.logo img{width: 20%;}
	

     .intro_ttl{padding: 0 5%;}/**/
     .intro_p{
         font-size: 1rem;
     }
    

 
     
.fitem1{flex-basis: 60%;}
.fitem2{flex-basis: 30%;}
.fitem{flex-basis: 90%;}
#web .fitem_1{margin-right: 0;}
#web .fitem_2{margin-left: 0;}
} 



@media (max-width: 379px) {
  
  
}
@media (min-width: 1000px) {
}
.site-header{z-index: 999;left:0;}
.gnav__menu__item {
  /*background-color: #ff7396;*/
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  /*border: solid 2px #000;*/
  /*font-family: 'Nerko One', cursive;*/
  font-size: 1.2rem;
  list-style: none;
  
  
}
.gnav__menu a{color:#000;}
/* --------------------------------------footer---------------------------------------- */



#gFooter address {
  padding: 35px 5px 56px;
   color: #666; /**/
  font-size: .7rem;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f0f0f0;
}

#gFooter {
	
  bottom: 0;

}
#topics{background-color: #fff;position:relative;z-index: 99;}

/*# sourceMappingURL=layout.css.map */



/*========= yurayura ===============----------------------------------------------------------*/


.cap{
    transform-origin: center bottom;
    animation: yurayura 2.5s ease-in-out infinite;
}
.float{
    /*transform-origin: center center;*/
    animation: float_anime 5s ease-in-out infinite;
}
.float2{
    /*transform-origin: center center;*/
    animation: float_anime 3s ease-in-out infinite;
}
@keyframes yurayura {
  0% , 100%{
      
      transform: rotate(5deg);
      
  }
  50%{
     
      transform: rotate(-5deg);
      
  }
}

@keyframes float_anime {
  0% , 100%{
      transform: translatey(0px);  
  }
  50%{
      transform: translatey(-20px);   
  }
}

/*----------------------swiper------------------------------------------*/
.swiper1 {width: 100%;max-width: 700px;}
.sl_{width: 100%;max-width: 700px;}
.swiper1 .swiper-wrapper {
  /* wrapperのサイズを調整 */
  width:100%;
 max-width: 700px;
 
}

.swiper1 .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色line-height: 300px; */
  width: 100%;
  height: 100%;
  display: flex;
 justify-content: center;
align-items: center;
 
}

.swiper1 .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    
    }

  .swiper2 .swiper-slide2 img {
        height: auto;
        width: 100%;
      }
      .swiper2 .swiper-wrapper { transition-timing-function: linear;}
      .swiper-3d .swiper-slide-shadow{display: none}

.swiper1 .swiper-button-prev:after,
.swiper1 .swiper-button-next:after{
  content: ""; /*contentを空にする*/
    width: 2rem;
 
}



@media (max-width: 550px) {
    .swiper1{width: 90%;max-width: 410px;}
    .swiper1 .swiper-wrapper {
    width: 90%;
 max-width: 410px;
 
} 
    .sl_{width: 90%;max-width: 410px;}
  
}/* */
@media (max-width: 400px) {
    .swiper1{width: 90%;max-width: 390px;}
    .swiper1 .swiper-wrapper {
    width: 90%;
 max-width: 390px;
 
}   
}

    @media (max-width: 370px) {
    .swiper1{width: 350px;}
    .swiper1 .swiper-wrapper {
  width: 350px;
 
}  
        .sl_{width: 350px;}
    }




    /*------------------------------window---------------------------------------*/
.modal-checkbox {
  display: none;
}

.modal-open-button {
  cursor: pointer;  

}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 60%);

}
.modal-ttl{
  margin: 5% 0;
  font-size: 1rem;
  color:#83ac8f;
  font-weight: 500;
}
.modal-txt{
  color: #83ac8f;
  font-size: .9rem;
  line-height: 1.8;
  margin:5% 10%;
  text-align: left;
}

.modal-wrapper {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 85%;
  padding: 3%;
  margin: auto;
  overflow: scroll;/**/
  background-color: #fff;
  border-radius: 5px;

}
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  transform: translate(50%, -50%);
}


.modal-checkbox:checked + .modal {
  display: flex;
 
}


.btn_modal{
    width: 40%;
    margin:50px auto;
    text-align: center; 
    cursor: pointer;
    padding: 2% 0;
    background-color: #83ac8f;
    color: #fff;
    border-radius: 10px;
    
}
.illust_img{max-width: 530px;}
#illust .modal-ttl{margin: 5% auto 1% auto;}

@media screen and (max-width:768px) {
   
  
    
}