@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  color:#333;
  position: relative;
}

.lib{
  font-family: 'Libre Baskerville', serif;
  font-weight: bold;
}

.inview1{
	opacity: 0;
	transform: translateY(20px);
	transition: 0.7s;
	transition-delay: 0.1s;
}

.inview1.show{
	opacity: 1;
	transform: translateY(0px);	
}

.inview2{
	opacity: 0;
	transform: translateY(20px);
	transition: 0.7s;
	transition-delay: 0.3s;
}

.inview2.show2{
	opacity: 1;
	transform: translateY(0px);	
}

.inview3{
	opacity: 0;
	transition: 0.7s;
	transition-delay: 0.3s;
}

.inview3.show3{
	opacity: 1;
}


header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
}

header.op0{
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

header.op0.visible{
  opacity: 1;
  pointer-events: auto;
}

header .header__flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
}

header .header__flex .header__left{
  width: 30%;
}

header .header__flex .header__left h1{
  margin: 0;
}

header .header__flex .header__left h1 a{
  transition: 0.4s;
}

header .header__flex .header__left h1 a:hover{
  opacity: 0.6;
}

header .header__flex .header__right{
  width: 70%;
}

header .header__flex .header__right ul{
  list-style: none;
  display: flex;
  justify-content: right;
  margin: 0;
  padding: 0;
}

header .header__flex .header__right ul li{
   writing-mode: vertical-rl;
  text-orientation: upright;
  margin-left:23px;
  line-height: 1.55;
}

header .header__flex .header__right ul li a{
  text-decoration: none;
  color: #1A1311;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  transition: 0.4s;
  padding:0 3px;
  cursor: pointer;
}

header .header__flex .header__right ul li a.current{
  border-right:1px solid #CB9F3E;
}

header .header__flex .header__right ul li a:hover{
  opacity: 0.6;
}

header .wrap{
  width: 80%;
}




.mainV__area{
  width: 100%;
  height: 56vw;
  padding-right: 50px;
  box-sizing: border-box;
  position:relative;
  margin-top: 160px;
}

.mainV__area img{
  width: 100%;
}

.copy__area{
  position: absolute;
  left: 0;
  bottom: 140px;
  width: 100%;
  z-index: 10;
}

.wrap{
  width: 85%;
  margin: 0 auto;
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 2;
}

.wrap2{
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 2;
}

.copy__area h2{
  margin: 0 0 20px;
  color:white;
  font-size: 3.6vw;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.copy__area p{
  margin: 0;
  color:white;
  font-size: 1.15vw;
}

.about__section{
  padding:150px 0;
  position: relative;
}

.about__bg{
  position: absolute;
  right: 0;
  top: 180px;
  width: 90%;
  height: auto;
  z-index: 1;
}

.about__img1{
  position: absolute;
  right: 100px;
  top: 110px;
  width: 27%;
  z-index:2
}

.about__img2{
  position: absolute;
  left: 0;
  top: 27vw;
  width: 22%;
  z-index:2
}

.about__img3{
  position: absolute;
  right: 0;
  top: 60vw;
  width: 24%;
  z-index:2
}

.about__img4{
  position: absolute;
  left: 50px;
  bottom: -10vw;
  width: 26%;
  z-index:2
}

.about__section h2 , .plan__section h2 , .gallery__section h2 , .pt1{
  font-size: 1.2vw;
  color:#CB9F3E;
  margin:14vw 0 0;
  text-align: center;
}

.plan__section h2{
  margin-top: 20vw;
}

.about__section .as__text1 , .plan__section .as__text1 , .gallery__section .as__text1 , .pt2{
  font-size: 1.3vw;
  color:#CB9F3E;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

.about__section h3 , .plan__section h3 , .gallery__section h3{
  font-size: 3.3vw;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  font-weight: bold;
  position: relative;
  margin:50px 0 10px;
}

.plan__section h3 , .gallery__section h3{
  font-size: 2.2vw;
}

.gallery__section h2 , .gallery__section .as__text1{
  text-align: left;
}

.gallery__section h3{
  text-align: left;
}

.about__section .as__text2{
  font-size: 1.2vw;
  color:#9F9E9E;
  margin: 0;
  text-align: center;
}

.about__section .as__text3{
  font-size: 1.3vw;
  margin:60px auto 50px;
  width: 40vw; 
  line-height: 1.9;
}

.arrow__link1{
  display: block;
  margin:0 auto;
  width: 17vw;
  box-sizing: border-box;
  position: relative;
  color:#5D5D5D;      
  border:1px solid #5D5D5D;
  text-align: center;
  font-size:1.1vw;
  padding:0.8vw 0;
  padding-right: 40px;
  text-decoration: none;
  transition: 0.4s;
}

.arrow__link1:after{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1vw;
  height: 2.1vw;
  background-image: url("img/arrow1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.4s;
}

.arrow__link1:hover{
  color:white;
  background: black;
  border-color: black;
}

.arrow__link1:hover:after{
  background-image: url("img/arrow2.png");
}

.plan__flex{
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}

.plan__flex .pf__col{
  width: 24.6%;
  height: 23vw;
  margin:0 0.2% 5px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.plan__flex .pf__col:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #5D5D5D;
  opacity: 0.5;
}

.plan__flex .pf__col:nth-child(1),
.plan__flex .pf__col:nth-child(2),
.plan__flex .pf__col:nth-child(3), 
.plan__flex .pf__col:nth-child(4),
.plan__flex .pf__col:nth-child(5),
.plan__flex .pf__col:nth-child(6){
  width: 32.93333%;
  height: 31vw;
}

.plan__flex .pf__col:nth-child(1) ,
.plan__flex .pf__col:nth-child(4){
 margin-left: 0;
 margin-right: 0.4%;
}

.plan__flex .pf__col:nth-child(3) ,
.plan__flex .pf__col:nth-child(6){
 margin-left: 0.4%;
 margin-right: 0;
}


.plan__flex .pf__col:nth-child(7),
.plan__flex .pf__col:nth-child(11) ,
.plan__flex .pf__col:nth-child(15){
  margin-left: 0;
  margin-right: 0.265%;
}

.plan__flex .pf__col:nth-child(10),
.plan__flex .pf__col:nth-child(14) ,
.plan__flex .pf__col:nth-child(18){
  margin-left: 0.265%;
  margin-right: 0;
}

.plan__flex .pf__col:nth-child(8),
.plan__flex .pf__col:nth-child(9),
.plan__flex .pf__col:nth-child(12),
.plan__flex .pf__col:nth-child(13),
.plan__flex .pf__col:nth-child(16),
.plan__flex .pf__col:nth-child(17){
  margin-left: 0.265%;
  margin-right: 0.265%;
}

.plan__flex .pf__col .pf__img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan__flex .pf__col div{
  text-align: center;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:1;
  color:white
}

.plan__flex .pf__col div h4{
  margin: 0 0 14px;
  font-size: 1.5vw;
}

.arrow__link2{
  display: block;
  margin:0 auto;
  width: 17vw;
  box-sizing: border-box;
  position: relative;
  color:white;      
  border:1px solid white;
  text-align: center;
  font-size:1.1vw;
  padding:0.8vw 0;
  text-decoration: none;
  transition: 0.4s;
}

.arrow__link2:after{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1vw;
  height: 2.1vw;
  background-image: url("img/arrow2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.4s;
}

.arrow__link2:hover{
  color:black;
  background: white;
  border-color: white;
}

.arrow__link2:hover:after{
  background-image: url("img/arrow1.png");
}

.gallery__section .as__text4{
  font-size: 1.2vw;
  margin:25px 0 0;
}

.circle__link{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 187px;
  display:block;
  text-decoration: none;
  text-align: center;
  color:#333;
  font-size:16px;
  font-weight: bold;
  transition: 0.4s;
}

.circle__link p{
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);  
} 

.circle__link:hover{
  opacity: 0.7;
}

.circle__link img{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: 20s linear infinite rotation1;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.news__section{
  position:relative;
  margin-top: 170px;
}

.news__section:after{
  content: "";
  position: absolute;
  left: 0;
  top: 123px;
  width: 100%;
  height: calc(100% - 123px);
  background: #F0F0F0;
}

.news__section .wrap{
 width: 80%;
 background: #F0F0F0;
}

.gallery__section .circle__link{
  right: 2.5%;
}

.news__section h2{
  font-size: 2.3vw;
  font-weight: 400;
  color:#9F9F9F;
  padding:32px ;
  margin: 0;
}

.news__section ul , .page__area.news ul{
  padding:40px 0 100px;
  margin: 0;
  list-style: none;

}

.news__section ul{
  padding-top: 10px;
}

.news__section ul li , .page__area.news ul li{
  padding:18px 0;
  border-bottom:1px solid #9F9F9F;
}
 
.news__section ul li a , .page__area.news ul li a{
  display: flex;
  color:#333;
  text-decoration: none;
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.3;
  align-items: center;
  position: relative;
  transition: 0.4s;
}

.news__section ul li a:hover , .page__area.news ul li a:hover{
  opacity: 0.7;
}

.news__section ul li a p.news__date , .page__area.news ul li a p.news__date{
  margin: 0;
  font-size:1.1vw;
  color:#9F9F9F;
  font-weight: bold;
  width: 20%;
  text-align: center; 
   padding:15px 0;
  box-sizing: border-box;
  border-right:1px dashed #9F9F9F;
  
}
 
.news__section ul li a p.news__title , .page__area.news ul li a p.news__title{
  margin: 0;
  width: 80%;
  box-sizing: border-box;
  padding-left: 50px;
  padding-right: 4.5vw;
  position: relative;
}

.news__section ul li a p.news__title:after , .page__area.news ul li a p.news__title:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  width: 2vw;
  height: 2vw;
  background-image: url("img/arrow3.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.contact__section{
  padding: 100px 0 55px;
}

.contact__section h2{
  font-size: 2.3vw;
  font-weight: 400;
  color: #9F9F9F;
  margin: 0;
  text-align: center;
}

.contact__section .wrap{
  border-bottom:2px solid #9F9E9E;
  padding-bottom: 50px;
}

.contact__flex{
  display:flex;
  justify-content: center;
  margin:30px 0 0;
}

.contact__flex a{
  width: 396px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#333;
  text-decoration: none;
  background: #EDE8DC;
  margin:0 15px;
  box-sizing: border-box;
  border:1px solid #CB9F3E;
  text-decoration: none;
  padding:33px 0;
  transition: 0.4s;
}

.contact__flex a:hover{
  opacity: 0.6;
}

.contact__flex a.contact__link1 p{
  font-size: 20px;
  margin: 0;
}

.contact__flex a.contact__link2 p{
  font-size: 26px;
  margin: 0;
}

.contact__flex a.contact__link1 img{
  display: block;
  width: 30px;
  line-height: 1;
  margin-right: 21px
}

.contact__flex a.contact__link2 img{
  display: block;
  width: 40px;
  line-height: 1;
  margin-right: 13px;
}

.contact__section h2.studio__title{
  padding-top: 35px;
}

.contact__section .studio__text{
  text-align: center;
  font-size: 1.2vw;
  margin:24px 0 0;
}

.google__map{
  line-height: 1;
  position:relative;
  top: 3px;
}

.google__map iframe{
  width: 100%;
  height: 498px;
  border:0;
}

footer{
  background: #333;
  color:white;
  padding: 60px 0 30px;
}

.footer__logo{
  display: block;
  width: 199px;
  margin: 0 auto 30px;
}

footer ul{
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
  padding: 0 0 40px;
  border-bottom:1px solid white;
  list-style: none;
}

footer ul li{
  margin:0 1.3vw;
  font-size: 1.05vw;
}

footer ul li a{
  color:white;
  text-decoration: none;
  transition: 0.4s;
  position: relative;
}

footer ul li a:hover{
  opacity: 0.7;
}

.copyright{
  font-size: 0.9vw;
  text-align: center;
  margin: 0;
}

.gallery__section{
  overflow-x: hidden;
  position: relative;
  margin-top: -4px;
  padding-bottom: 100px;
}

.gallery__bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 94%;
  height: 100%;
  /* height: 100%;
  object-fit: cover; */
  
}

.gallery__slider{
  margin-top: 8vw;
  width: calc(100% + 40px);
  padding-bottom: 70px;
  margin-left: -20px;
}

.gallery__slider .gs__item{
  margin:0 20px;
}

.gallery__slider .gs__item img{
  width: 100%;
}

/* .gallery__slider .s-item1 img{
  width: 30vw;
} */

.gallery__slider .slick-list{
  padding: 0!important;
}

.gallery__slider .gs__item.s-item3 ,
.gallery__slider .gs__item.s-item4 ,
.gallery__slider .gs__item.s-item7 ,
.gallery__slider .gs__item.s-item8{
  margin-top: 5vw;
}

.gallery__slider .slick-dots{
  position: absolute;
  bottom: 0px;
  left: 50%;
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
  width: 82%;
  display: flex;
  justify-content: right;
  list-style: none;
}

.gallery__slider .slick-dots li{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position:relative;
  margin: 0 10px;
  cursor: pointer;
}

.gallery__slider .slick-dots li:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 50%;
  z-index: 3;
}

.gallery__slider .slick-dots li:after{
  content: "";
  transition: 0.4s;
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #CB9F3E;
  border-radius: 50%; 
  z-index: 2;
}

.gallery__slider .slick-dots li.slick-active:after{
  opacity: 1;
}

.gallery__slider .slick-dots li button{
  display: none;
}

.circle__link.news__ver{
 bottom: inherit;
 top: -100px;
}

.page__area{
  padding:50px 0 110px;
  background: #F0F0F0;
  margin-top: 182px;
}

.page__area.type2{
  padding-top: 100px;
  margin-top: -75px;
}

.page__title{
  font-size: 1.7vw;
  color:#CB9F3E;
  text-align: left;
  font-weight: bold;
  margin: 0 0 10px;
}

.page__title2{
  font-size: 3.3vw;
  color:#CB9F3E;
  text-align: left;
  font-weight: 500;
  margin: 0 0 40px;
}

.breadcrumbs{
  text-align: right;
  color:#CB9F3E;
  font-size: 1.1vw;
  position: relative;
  right: -10px;
}

.breadcrumbs span , .breadcrumbs a{
  color:#333
}

.breadcrumbs span{
  display: inline-block;
  margin:0 10px;
}

.breadcrumbs span span{
  margin:0;
}

.breadcrumbs a{
  transition: 0.4s;
  text-decoration: none!important;
}

.breadcrumbs a span{
   text-decoration: underline;
   text-underline-offset: 1px;
   /* text-decoration-thickness: 2px; */
}

.breadcrumbs a:hover{
  opacity: 0.7  ;
}

.page__content{
  margin-top: 70px;
  box-sizing: border-box;
  background: white;
  width: 100%;
  padding: 100px;
}

.page__content.privacy p{
  font-size: 1.2vw;
  margin:0 0 45px;
}

.page__content.privacy ol{
  font-size: 1.2vw;
  list-style: none;
  margin:40px 0;
  padding-left: 60px;
}

.page__content.privacy ol li{
  position: relative;
  margin-bottom: 10px;
}

.page__content.privacy ol li:before{
  content: '1';
  position:absolute;
  left: -2.5vw;
  top: 0.2vw;
  color:white;
  font-size:1.05vw;
  border-radius: 50%;
  background: #333;
  width: 1.7vw;
  height: 1.7vw;
  line-height: 1.7vw;
  text-align: center;
}

.page__content.privacy ol li:nth-child(2):before{
  content: '2';
}

.page__content.privacy ol li:nth-child(3):before{
  content: '3';
}

.page__content.privacy ol li:nth-child(4):before{
  content: '4';
}

.page__content.privacy ol li:nth-child(5):before{
  content: '5';
}

.page__content.privacy ol li:nth-child(6):before{
  content: '6';
}

.page__content.privacy ol li:nth-child(7):before{
  content: '7';
}

.page__content.privacy h3.p__title{
  font-size: 1.5vw;
  font-weight: bold;
  margin:0 0 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #F0F0F0;
}

.page__content.privacy p.last{
  margin-bottom: 0;
}

.page__content.privacy .about__area{
  border-left:4px solid #F0F0F0;
  padding:8px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}

.page__content.privacy .about__area p{
  margin-bottom: 0;
}

.page__content.privacy .about__area h4{
  margin: 0;
  font-size: 1.4vw;
  font-weight: bold;
}

.contact h3 , h3.bo__title{
  position:relative;
  padding-left: 40px;
  font-size: 2vw;
  font-weight: bold;
  margin: 0 0 50px;
  display: flex;
  align-items: center;
  line-height: 1.2;
}

h3.bo__title.mt50{
  margin-top: 50px;
}

.contact h3:before , h3.bo__title:before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 1px;
  background: #333;
}

.contact h3 span , h3.bo__title span{
  display: inline-block;
  color:#9F9F9F;
  font-size: 1vw;
  margin-left: 10px;
  position: relative;
  top:3px
}

.form__flex .form__right .wpcf7-list-item{
  margin-left: 0;
  margin-right: 10px;
}

.form__flex{
  display:flex;
  flex-wrap: wrap;
}

.form__flex .form__left{
  width: 30%;
  border-top:1px solid #F0F0F0;
  padding: 20px 0;
  position: relative;
}

.form__flex .form__right{
  width: 70%;
  box-sizing: border-box;
  border-top:1px solid #F0F0F0;
  padding: 20px 0;  
  padding-left: 20px;
}

.form__flex .form__right.privacy{
  width: 100%;
  text-align: center;
}

.form__flex .form__left p{
  font-size: 1.3vw;
  margin: 0;
  font-weight: bold;
}

.form__flex .form__left p.must{
  display: inline-block;
  background: #CB3E3E;
  border-radius: 5px;
  color:white;
  font-size: 1vw;
  padding:0 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.form__flex .form__right p{
  font-size: 1.2vw;
  margin: 0;
}

.form__flex .form__right.check p input{
  width: 1.2vw;
  height: 1.2vw;
  margin: 0;
  margin-right:6px;
  position: relative;
  top: 0.2vw;
}

.form__flex .form__right.text input{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  width: 100%;
  padding: 11px;
  box-sizing: border-box;
  font-size: 1.2vw;
  background: #F0F0F0;
  border-radius: 5px;
}

.form__flex .form__right.textarea textarea{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  width: 100%;
  height: 15vw;
  padding: 11px;
  resize: none;
  box-sizing: border-box;
  font-size: 1.2vw;
  background: #F0F0F0;
  border-radius: 5px;
}

.form__flex .form__right.privacy p{
  margin-top: 20px;
}

.form__flex .form__right.privacy .check input{
  width: 1.2vw;
  height: 1.2vw;
  margin: 0;
  margin-right:6px;
  position: relative;
  top: 0.2vw; 
}

.form__flex .form__right.privacy .submit input{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; 
  width: 39%;
  display: block;
  margin:0 auto;
  background: #CB9F3E;
  border:3px solid #CB9F3E;
  color:white;
  font-size: 1.4vw;
  font-weight: bold;
  padding: 1vw;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.2em;
  transition: 0.4s;

}

.page__content.contact{
  padding-bottom: 40px;
}

.form__flex .form__right.privacy .submit input:hover{
  background: #fff;
  color:#CB9F3E;
}

.pt__flex{
  display:flex;
  align-items: center;
}

.pt__flex .pt__right{
  width: 60%;
}

.pt__flex .pt__right img{
  width: 100%;
  height: auto;
  border-radius: 5px;
  aspect-ratio: 13 / 9;
  object-fit: cover;
}

.page__area2{
  margin-top: 182px;
}

.pt__flex .pt__left{
  width: 40%;
  box-sizing: border-box;
  padding-right: 120px;
  position: relative;
  top: -50px;
}

.page__area2 .page__title2{
  line-height: 1.3;
}

.faq__content{
  margin-top: 50px;
}

.faq__content .faq__item{
  background: white;
  margin-bottom: 10px;
  padding:0 2vw;
  box-sizing: border-box;
  width: 100%;
}

.faq__content .faq__item:last-child{
  margin-bottom: 0;
}

.faq__item .question{
  position: relative;
  cursor: pointer;
}

.faq__item .question:after{
  content: ""; 
  position: absolute;
  right: 0;
  top: 2.25vw;
  width: 2vw;
  height: 2vw;
  background-image: url("img/arrow4.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

.faq__item .question.open:after{
  transform:rotate(180deg);
}

.faq__item .question h3{
  font-size: 1.3vw;
  margin: 0;
  position: relative;
  padding:2vw 5vw;
  font-weight: 500;
}

.faq__item .question h3:before{
  content: "Q.";
  position: absolute;
  left: 0;
  top: 48%;
  transform: translateY(-50%);
  color:#9F9F9F;
  font-size: 2.4vw;
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
}

.faq__item .answer{
  display:none;
}

.faq__item .answer p{
  font-size: 1.2vw;
  margin:0;  
  border-top:1px solid #F0F0F0;
  padding:2vw 5vw;
  position: relative;
}

.faq__item .answer p .small{
  font-size: 1vw;
}

.faq__item .answer p .park{
  display: inline-block;
  text-align: center;
  border:1px solid #333;
  line-height: 1;
  padding:2px;
  margin:0 2px;
}

.faq__item .answer p:before{
  content: "A.";
  position: absolute;
  left: 0;
  top: 1vw;
  font-size: 2.4vw;
  font-family: 'Libre Baskerville', serif;
  font-weight: 400; 
  color:#CB9F3E;
}

.contact__section.type2 .wrap{
  padding-bottom: 45px;
  border-bottom: 0;
}

.about__section1{
  position: relative;
  padding-top: 100px;
  margin-top: -75px;
  padding-bottom: 21vw;
}

.as1__text1{
  width: 70%;
  display: block;
  margin:13vw auto 0;
}

.as1__text1 p{
  font-size: 1.4vw;
  margin: 0;
}

.ab__bg{
  position: absolute;
  right:0;
  top: -1vw;
  width: 90%;
}

.about__section2{
  padding:100px 0;
}

.pt1{
  margin: 0;
}

.slash{
  position: relative;
  padding:0 0 40px;
}

.slash:before{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 1px;
  height: 36px;
  transform: rotate(45deg);
  background: #707070;
}

.slider-2{
  margin:40px 0 0;
  padding:0 ;
}

.slider-2 li{
  margin:0 10px;
}

.slider-2 li img{
  width: 100%;
}

.about__section3{
  position: relative;
  padding:75px 0;
}

.about__section3:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 100%;
  background: #EDE8DC;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.as3__flex{
  display: flex;
  align-items: center;
}

.as3__flex.mb__plus{
  margin-bottom: 80px;
}

.as3__left{
  width: 50%;
}

.as3__right{
  width: 50%;
  box-sizing: border-box;
  padding-right: 50px;
  line-height: 1;
}

.as3__right img{
  width: 100%;
}

.as3__1{
  margin: 0;
  color:#9F9F9F;
  font-size: 1.1vw;
}

.as3__2{
  margin:15px 0;
  font-size: 2.4vw;
  line-height: 1.5;
}

.as3__3{
  font-size: 1.2vw;
  margin: 0 0 35px;
}

.as3__4{
  font-size: 1.1vw;
  margin: 0;
}

.about__section4{
  padding:100px 0;
}

.about__section4.pt0{
  padding-top: 0;
}

.as__rel{
  position:relative;
}

.as__rel:after{
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 100%;
  background: #F0F0F0;
}

.staff__flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}

.staff__flex .staff__col{
  width: 31%;
  text-align: center;
  margin:0 1.16665%;
  margin-bottom: 40px;
}

.staff__flex .staff__col:nth-child(2) , .staff__flex .staff__col:nth-child(5){
  transition-delay: 0.3s;
}

.staff__flex .staff__col:nth-child(3){
  transition-delay:0.5s;
}

.staff__flex .staff__col img{
  width: 100%;
  border-radius: 8px;
}

.staff__text1{
  font-size:1.1vw;
  margin:5px 0;
}

.staff__text2{
  font-size:1.1vw;
  color:#9E9E9E;
  margin:0 0 3px;
}

.staff__text3{
  margin: 0;
  font-size: 1.5vw;
}

.award__area{
  width: 100%;
  box-sizing: border-box;
  padding:100px 100px 33vw;
  background: #F0F0F0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.award__area h2{
  color:#9F9E9E;
  font-size: 1.2vw;
  margin: 0;
}

.award__area h3{
  font-size: 2.5vw;
  margin: 0 0 28px;
}

.award__area ul{
  margin: 0;
  padding:0;
  list-style: none;
}

.award__area ul li{
  font-size: 1.3vw;
  position: relative;
  padding-left: 8vw;
  margin-bottom: 15px;
}

.award__area ul li span{
  position: absolute;
  color:#CB9F3E;
  left: 0;
  top: 0;
  padding-left: 1.3vw;
}

.award__area ul li span:before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);  
  width: 0.7vw;
  height: 0.7vw;
  background:#CB9F3E;
  border-radius: 50%;
}

.slider-3{
  margin:-27vw 0 0;
  padding:0 ;
  position: relative;
  z-index: 3;
}

.slider-3 li{
  margin:0 10px;
  height: auto !important;
}

.slider-3 li.size1{
  width: 38vw;
}

.slider-3 .slick-track{
  display: flex;
}

.slider-3 li.size2{
  width: 26vw;
}

.slider-3 li.size3{
  width: 34vw;
}

.slider-3 li.size4{
  width: 25vw;
}

.slider-3 li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.about__section5{
  padding:0px 0 50px;
}

.company__flex{
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  margin:45px auto 0;
}

.company__flex .cf__left{
  width: 35%;
  padding-bottom:17px;
  margin-bottom: 17px;
  border-bottom:1px solid #9F9E9E;
}

.company__flex .cf__right{
  width: 65%;
  padding-bottom:17px;
  margin-bottom: 17px;
  border-bottom:1px solid #F0F0F0;
}

.company__flex p{
  margin: 0;
  font-size: 1.2vw;
}

.page__area.news ul{
  padding:70px 0 50px;
}

.news .wp-pagenavi{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.news .wp-pagenavi a , .news .wp-pagenavi span{
  margin: 0 5px;
  padding: 0;
  border: 0;
  width:2.8vw;
  height:2.8vw;
  font-size: 1.3vw;
  line-height: 2.8vw;
  background: white;
  color:#333;
  text-align: center;
  border-radius: 50%;
  position: relative;
}

.news .wp-pagenavi span{
  font-weight: 500;
  background: #CB9F3E;
  color:white
}

.news .wp-pagenavi a{
  transition: 0.4s;
}

.news .wp-pagenavi a:hover{
  opacity: 0.6;
}

.previouspostslink img{
  width: 0.7vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
  -ms-transform: translate(-50%, -50%) rotate(180deg);  
}

.nextpostslink img{
  width: 0.7vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);  
}

.single__news .news__date{
  margin: 0;
  font-size: 1.1vw;
  color:#9F9E9E;
}

.single__news .news__title{
  font-size: 1.7vw;
  font-weight: bold;
  margin:8px 0 0;
}

.news__content{
  margin-top: 22px;
  padding-top: 22px;
  border-top:1px solid #F0F0F0;
}

.news__content p{
  font-size: 1.15vw;
}

.news__content h2{
  font-size: 1.8vw;
  margin:50px 0 20px;
}

.news__content h3{
  font-size: 1.6vw;
  margin:50px 0 20px;
}

.news__content img{
  max-width: 100%;
  display: block;
  margin:30px 0;
  border-radius: 5px;
}

.news__content figure{
  margin: 0;
}

.arrow__link1.type2{
  margin-top: 40px;
}

.right__fix{
  position: fixed;
  z-index: 8;
  right:0;
  top: 25%;
}

.right__fix a{
  display: block;
  width: 35px;
  margin-bottom: 20px;
  transition: 0.4s;
}

.right__fix a:hover{
  opacity: 0.6;
}

.right__fix a img{
  width: 100%;
}

.gallery__flex{
  display: flex;
  flex-wrap: wrap;
}

.gf__col{
  width:33%;
  display:block;
  margin-bottom: 4px;
}

.gallery__flex .gf__col:nth-child(1) ,
.gallery__flex .gf__col:nth-child(4) ,
.gallery__flex .gf__col:nth-child(7) ,
.gallery__flex .gf__col:nth-child(10){
  margin-right: 0.3%;
}

.gallery__flex .gf__col:nth-child(2) ,
.gallery__flex .gf__col:nth-child(5) ,
.gallery__flex .gf__col:nth-child(8) ,
.gallery__flex .gf__col:nth-child(11){
  margin-right: 0.15%;
  margin-left: 0.15%;
}

.gallery__flex .gf__col:nth-child(3) ,
.gallery__flex .gf__col:nth-child(6) ,
.gallery__flex .gf__col:nth-child(9) ,
.gallery__flex .gf__col:nth-child(12){
  margin-left: 0.3%;
}

.gf__col a{
  display:block;
  transition: 0.4s;
  line-height: 1;
}

.gf__col a img{
  width: 100%;
  height: 20vw;
  object-fit: cover;
  border-radius: 5px;
}

.gf__col a:hover{
  opacity: 0.6;
}

ul.category__type{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 45px;
  padding: 0;
}

ul.category__type li{
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;

}

ul.category__type li a{
  display: block;
  background: white;
  border-radius: 60px;
  font-size: 1.15vw;
  text-decoration: none;
  color: #333;
  padding:2px 25px;
  min-width: 6vw;
  text-align: center;
  transition: 0.4s;
}

ul.category__type li a:hover{
  opacity: 0.6;
}

ul.category__type li a.current{
  color:white;
  background: #CB9F3E;
  pointer-events: none;
}

.pt__flex .pt__right.thm img{
  border-radius: 5px;
}

.plan__content{
  width: 90%;
  display:flex;
  justify-content: space-between;
  margin-left: auto;
}

.plan__content{
  position:relative;
  margin-top: 40px;
}

.plan__left{
  position: sticky;
  left: 0;
  top: 250px;
  width: 18%;
  height: 100%;
}

.plan__right{
  width:81%;
  box-sizing: border-box;
  display:block;
  margin-left: auto;
}

.pr__box{
  background: white;
  width: 100%;
  box-sizing: border-box;
  padding:80px 10vw;
  /* padding-right: 10vw; */
  margin-bottom: 50px;
  position: relative;
}

.plan-sec1{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 85%;
  z-index: -1;
}

.plan-sec2 ,
.plan-sec3 ,
.plan-sec4{
  position: absolute;
  left: 0;
  top: 350px;
  width: 100%;
  height: 200px;
  z-index: -1;
}

.pr__box.box2{
  padding-top: 60px;
  padding-bottom: 60px;
}

.pr__box.last__box{
  margin-bottom: 0;
}

.plan__left ul{
  list-style: none;
  padding:0;
  margin: 0;
  list-style: none;
}

.plan__left ul li{
  display: block;
  background: white;
  margin-bottom: 5px;
}

.plan__left ul li a{
  display: block;
  text-decoration: none;
  box-sizing: border-box;
  color:#333;
  position:relative;
  font-size: 1.1vw;
  border-radius: 5px;
  padding:0.8vw 2.6vw;
  padding-right: 0;
  transition: 0.4s;
}

.plan__left ul li a span{
  display: inline-block;
  position: relative;
}

.plan__left ul li a span:before{
  content: '';
  position:absolute;
  left: -1.2vw;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%); 
  width: 0.6vw;
  height: 0.6vw;
  box-sizing: border-box;
  transition: 0.4s;
  border:1px solid #9F9E9E;
  border-radius: 50%;
}

.plan__left ul li a.current{
  color:#CB9F3E
}

.plan__left ul li a.current span:before{
  background: #CB9F3E;
  border-color:#CB9F3E;
}

.prb__text1{
  text-align: center;
  font-size: 2vw;
  margin: 0 0 30px;
}

.prb__text2{
  text-align: center;
  font-size: 1.1vw;
  line-height: 2;
  margin: 0 0 30px;
}

.plan__img{
  display: block;
  margin:0 auto;
  width: 100%;
}

.feature__area{
  margin-top: 25px;
}

.feature__area .feature__flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:25px 0;
  border-top:1px solid #F0F0F0;
}

.ff__left{
  width: 48%;
  line-height: 1;
}

.ff__left img{
  width: 100%;
  height: auto;
}

.ff__right{
  width: 48%;
}

.ff__right .ff__num{
  display:block;
  position: relative;
  height: 2.1vw;
  margin: 0;
}

.ff__right .ff__num:before{
  content: '01';
  font-family: 'Libre Baskerville', serif;
  font-weight:400;
  font-size: 2.1vw;
  line-height: 1;
  color:#9F9E9E;
  position: absolute;
  left: 0;
  top: 0;
}

.feature__area .feature__flex:nth-child(2) .ff__num:before{
  content: '02';
}

.feature__area .feature__flex:nth-child(3) .ff__num:before{
  content: '03';
}

.feature__area .feature__flex:nth-child(4) .ff__num:before{
  content: '04';
}

.feature__area .feature__flex:nth-child(5) .ff__num:before{
  content: '05';
}

.feature__area .feature__flex:nth-child(6) .ff__num:before{
  content: '06';
}

.feature__area .feature__flex:nth-child(7) .ff__num:before{
  content: '07';
}

.feature__area .feature__flex:nth-child(8) .ff__num:before{
  content: '08';
}

.feature__area .feature__flex:nth-child(9) .ff__num:before{
  content: '09';
}

.feature__area .feature__flex:nth-child(10) .ff__num:before{
  content: '10';
}

.ff__right h4{
  margin:12px 0 15px;
  font-size: 1.3vw;
  font-weight: bold;

}

.ff__right p{
  margin: 0;
  font-size: 1.1vw;
}

.feature__area .feature__flex:last-child{
  padding-bottom: 0;
}

.flow__title{
  font-size: 1.4vw;
  margin:28px 0 20px;
  position: relative;
  padding-left: 1.3vw;
  line-height: 1.6;
}

.flow__title:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.5vw;
  height: 100%;
  background: #CB9F3E;
  border-radius: 20px;
}

.flow__text{
  font-size: 1.1vw;
  margin:0 0 33px;
}

.flow__arrow{
  display :block;
  margin:0 auto;
  width: 4vw;
}

.news.ver2 .wp-pagenavi{
  margin-top: 45px;
}

.mt0{
  margin-top: 0!important;
}

.about__section h3.mt0, .plan__section h3.mt0, .gallery__section h3.mt0{
  margin-top: 15px!important;
}

.ib{
  display: inline-block;
}

.gallery__section h2.left-space{
  position: relative;
  left: 1vw;
  top: 1px;
}

.faq__area{
  width: 60%;
  height: 18.7vw;
  background-image:url('img/faq.png');
  background-size: cover;
  background-position: center;
  display: block;
  margin:100px auto;
  position: relative;
}

.faq__abo{
  text-align: center;
  position:absolute;
  width: 50%;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.faq__abo h3{
  margin: 0 0 25px;
  font-size: 2.2vw;

}

.price__area h1,.price__area h2{
  margin:50px 0 24px;
  position: relative;
  padding-left: 1.3vw;
  line-height: 1.6;
}

.price__area h1:before,.price__area h2:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.5vw;
  height: 100%;
  background: #CB9F3E;
  border-radius: 20px;
}

.price__area p{
  font-size: 1.1vw;
}

.price__area{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.price__area::-webkit-scrollbar {
  height: 8px;
}

.price__area::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.price__area::-webkit-scrollbar-thumb {
  background: #CB9F3E;
  border-radius: 4px;
}

.price__area::-webkit-scrollbar-thumb:hover {
  background: #a88a2e;
}

.price__area::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.price__area.has-overflow::after {
  opacity: 1;
}

#access{
  display: block;
  position: relative;
  top: -170px;
}

#plan{
  display: block;
  position: relative;
  top: -5vw;  
}

.sg__page .pt__flex .pt__left{
  padding-right: 40px;
}

.sg__page .page__title{
  font-size: 1.4vw;
}

.sg__page .page__title2{
  font-size: 2.7vw;
}

#category{
  display: block;
  position: relative;
  top: -350px;  
}

.slider-4{
  width: calc(100% + 10vw);
  margin:25px 0 0;
}

.slider-4 .slick-list{
  padding-right: 10%;
}

.slider-4 a{
  display:block;
  margin:0 5px;
}

.slider-4 a img{
  width: 100%;
  height: 23.1vw;
  object-fit: cover;
  
}

.slider-4 .slick-dots{
  display: block;
  margin:40px auto 0;
  padding:0;
  display: flex;
  justify-content: center;
  list-style: none;
}

.slider-4 .slick-dots li{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  margin: 0 7px;
  cursor: pointer;
}

.slider-4 .slick-dots li:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background: #F0F0F0;
    border-radius: 50%;
    z-index: 3;
}
.slider-4 .slick-dots li:after{
    content: "";
    transition: 0.4s;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #CB9F3E;
    border-radius: 50%;
    z-index: 2;  
}

.slider-4 .slick-dots li.slick-active:after{
  opacity: 1;
}

.slider-4 .slick-dots li button{
  display:none;
}


.menu_button{
  outline: none;
  border: none;
  font-size: 20px;
  text-align: center;
  margin-left:auto;
  margin-top:0;
  display:block;
  position: absolute;
  right: 30px;
  top: 25px;
  z-index: 9999;
  width: 40px;
}

.header-flex{
 padding-top: 22px;
}


.menu_button:hover{
 cursor:pointer;
}

.menu_button .menu_icon01 {
 display: block;
 float:left;
 cursor: pointer;
 transition: .7s;
 position: relative;
 top:33px;
 left:20px;
}

.menu_button .menu_icon01 span {
 display: block;
 width: 27px;
 height: 2px;
 background: black;
 margin-bottom: 15px;
 transition: .7s;
}

.menu_button.open .menu_icon01 span{
 background:black; 
}

.news-flex article .news-content img{
 height:170px;
}


.menu_button .menu_icon01{
 top: 22px;
 left: 16px;
}

.menu_button:hover{
 cursor:pointer;
}

.menu_button .menu_icon01 {
 display: block;
 float:left;
 cursor: pointer;
 transition: .5s;
 position: relative;
 top:6px;
 left:0px;

}


.menu_button .menu_icon01 span {
 display: block;
 width: 40px;
 height: 1px;
 background: black;
 margin-bottom: 8px;
 transition: .5s;
}

.menu_button.open .menu_icon01{
 transform: rotate(-45deg);
 left: 6px;

}
.menu_button.open .menu_icon01 .bar1 {
 transform: rotate(0deg) translateY(7px);
}
.menu_button.open .menu_icon01 .bar2 {
 opacity: 0;
}
.menu_button.open .menu_icon01 .bar3 {
transform: rotate(-90deg) translateX(10px);
}

header{
  transition: .4s;
}

header.nav-in{
  background: inherit;
}

.menu_button .menu_icon02 {
 display: block;
 float: left;
 cursor: pointer;
 transition: all 0.2s ease-in;
}
.menu_button .menu_icon02 span {
 display: block;
 width: 30px;
 height: 2px;
 background: #707070;
 margin-bottom: 4px;
 transition: all 0.4s ease-out;
}
.menu_button.open .menu_icon02 .bar1 {
 transform: translateY(10px) rotate(135deg);
}
.menu_button.open .menu_icon02 .bar2 {
opacity: 0;
transform:translateX(-100px);
}
.menu_button.open .menu_icon02 .bar3 {
transform:  translateY(-6px)
rotate(45deg);
}

.menu_button .menu_icon03 {
 display: block;
 float: left;
 cursor: pointer;
 transition: all 0.2s ease-in;
}
.menu_button .menu_icon03 span {
 display: block;
 width: 30px;
 height: 2px;
 background: #707070;
 margin-bottom: 4px;
 transition: all 0.4s ease-out;
}
.menu_button.open .menu_icon03 .bar1 {
 transform: translateY(10px) rotate(45deg);
}
.menu_button.open .menu_icon03 .bar2 {
opacity: 0;
width:150px;
transform: translateX(-60px)
}
.menu_button.open .menu_icon03 .bar3 {
transform: translateY(-6px)
rotate(135deg);
}

.active .spr1 a{
  color:black!important;
}

.active .spr1 a span{
  border-color: black!important;
}

.active .menu_button .menu_icon01 span{
  background: black!important;
}

.menu_button p{
 margin: 0;
 font-size: 12px;
 position: relative;
 top: 6px;
 text-align: center;
}

#nav{
 position: fixed;
   overflow-y: scroll;
   min-height: 100vh;
   max-height: 100vh;
   width: 100%;
   top: 0;
   background-image:url('img/nav-bg.png');
   background-repeat: repeat;
   margin-top: 0px;
   padding: 120px 0 50px;
   box-sizing: border-box;
   opacity: 0;
   pointer-events: none;
   z-index: -1;
   transition: .6s;
   color: #fff;
}

#nav.in{
 opacity: 1;
 pointer-events: auto;
 z-index: 98;

}

.ib__rel{
  display: inline-block;
  position: relative;
}

.ib__rel:before{
  content: '';
  position: absolute;
  left: -5vw;
  top: -1vw;
  width: 8vw;
  height: 1px;
  background: white;
  transform: rotate(-45deg);
}

.ib__rel:after{
  content: '';
  position: absolute;
  right: -6vw;
  bottom: -1vw;
  width: 8vw;
  height: 1px;
  background: white;
  transform: rotate(-45deg);
}

.about__section2 .slider-2 .slick-list{
  padding:0 27%!important;
}

.page__area.single__plan{
  position: relative;
}

.page__area.single__plan:before{
  content: '';
  position:absolute;
  left: 0;
  bottom: 0;
  width: 20vw;
  height: 20vw;
  background-image:url('img/deco.png');
  background-size: cover;
}

.plan__left{
  z-index: 2;
}

.plan__right{
  position: relative;
  z-index: 2;
}

.plan__section.single__ver h2{
  margin-top: 120px;
}

.pr0{
  padding-right: 0;
}

.popup1{
  display: none;
  height: 100vh;
  width: 100%;
  background:rgba(0,0,0,0.4);
  opacity:1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999999;
  
}

.outside{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  cursor: pointer;
}

.content{
  line-height: 1.7;
  position: fixed;
  z-index: 999;
  width:100%;
  box-sizing: border-box;
  margin:0;  
  max-width: 100%;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
    display:block;
  background: #F0F0F0;
  padding:30px 0 15px;
}

/* .pop__wrap{
  width: 1160px;
  max-width: 100%;
  padding:0 30px;
  box-sizing: border-box;
  display:block;
  margin:0 auto;
} */

.pop__flex{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: 1vw;
}

.pop__flex a{
  width: 12.7%;
  margin-right: 1.5%;
  text-decoration: none;
  display: block;
  color:#333;
  transition: 0.4s;
}

.pop__flex a img{
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
  height: 9.5vw;
}

.pop__flex a p{
  font-size: 1.05vw;
  margin:4px 0 20px;
  line-height: 1.5;
  text-align: center;
}

.pop__flex a:hover{
  opacity: 0.6;
}

.page__title.center ,
.page__title2.center{
  text-align: center!important;
}

.gs__item.size1{
  width:30vw;
}

.gs__item.size1{
  width:30vw;
}

.gs__item.size2{
  width:34vw;
}

.gs__item.size3{
  width:31vw;
}

.gs__item.size4{
  width:43vw;
}

.single__plan img{
  border-radius: 5px;
}

@media screen and (max-width: 1500px){
  .pr__box{
    padding-right: 6vw;
    padding-left: 6vw;
  }

  .slider-4{
    width: calc(100% + 6vw);
  }
}


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

  .copy__area{
    bottom:115px;
  }

  .wrap2 , .wrap , header .wrap{
    width: 90%;
  }

  .pop__flex a img{
    height: 10.5vw;
  }

}

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

  .pop__flex a p{
    font-size: 13px;
    margin:0 0 15px;
  }

  .plan__section.single__ver h2{
    margin-top: 100px;
  }

  .slider-4{
    width: calc(100% + 40px);
  }

  .copy__area h2{
    font-size: 36px;
  }

  .copy__area p{
    font-size: 14px;
  }

  .copy__area{
    bottom: 100px;
    padding:0 50px;
    box-sizing: border-box;
  }

  .ib__rel:before{
    left: -50px;
    width: 80px;
    top: -5px;
  }

  .ib__rel:after{
    right: -60px;
    width: 80px;
    bottom: -5px;
  }

  .about__img1{
    width: 31%;
  }

  .about__section h2, .plan__section h2, .gallery__section h2, .pt1{
    font-size: 12px;
  }

  .about__section .as__text1, .plan__section .as__text1, .gallery__section .as__text1, .pt2{
    font-size: 14px;
  }

  .about__section h3, .plan__section h3, .gallery__section h3{
    font-size: 27px;
  }

  .about__section .as__text2{
    font-size: 12px;
  }

  .about__section .as__text3{
    width: 45vw;
    font-size: 12px;
  }

  .about__bg{
    width: 100%;
    height: 76%;
  }

  .arrow__link1{
    width: 220px;
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .arrow__link1:after{
    width: 28px;
    height: 28px;
  }

  .about__img4{
    bottom: -15px;
    width: 28%;
  }

  .about__img3{
    top: 640px;
  }

  .about__img2{
    top: 300px;
  }

  .plan__flex .pf__col div h4{
    font-size: 16px;
  }

  .wrap , .wrap2{
    padding:0 40px;
    width: 100%;
  }

  .gallery__section .as__text4{
    font-size: 14px;
  }

  .faq__area{
    width: 726px;
    height: 228px;
  }

  .faq__abo h3{
    font-size: 24px;
  }

  .news__section h2{
    font-size:27px ;
  }

  .news__section .wrap{
    width: calc(100% - 80px);
    padding:0 30px;
  }

  .news__section h2{
    padding:23px 20px;
  }

  .news__section ul, .page__area.news ul{
    padding:20px 0 60px;
  }

  .news__section ul li a p.news__date, .page__area.news ul li a p.news__date{
    font-size: 12px;
    width: 155px;
  }

  .news__section ul li a p.news__title, .page__area.news ul li a p.news__title{
    font-size: 15px;
    width: calc(100% - 155px);
    padding-left: 25px;
    padding-right: 60px;
  }

  .news__section ul li a p.news__title:after, .page__area.news ul li a p.news__title:after{
    width: 28px;
    height: 28px;
    right: 15px;
  }

  .news__section:after{
    top: 94px;
    height: calc(100% - 94px);
  }

  .contact__section h2{
    font-size: 27px;
  }

  .contact__section .studio__text{
    font-size: 15px;
  }

  footer ul li{
    font-size: 11px;
  }

  .circle__link{
    right: 25px;
    width: 160px;
    height: 167px;
  }

  .about__section h2, .plan__section h2, .gallery__section h2, .pt1{
    margin-top: 150px;
  }

  .gallery__bg{
    width: 95%;
  }

  .gallery__slider{
    margin-top: 50px;
  }

  .gallery__slider .gs__item{
    margin:0 15px;
  }

  .circle__link.news__ver{
    top: -75px;
    right: 0;
  }

  .pt__flex .pt__left{
    padding-right: 60px;
  }

  .page__title{
    font-size: 18px;
  }

  .page__title2{
    font-size: 30px;
  }

  .as1__text1 p{
    font-size: 17px;
  }

  .ab__bg{
    width: calc(100% - 40px);
    height: 100%;
  }

  header .wrap{
    width: 100%;
  }

  .about__section1{
    padding-bottom: 140px;
  }

  .pt1{
    margin-top: 0!important;
  }

  .slider-2 li{
    margin:0 10px;
  }

  .about__section3:before{
    width: calc(100% - 20px);
  }

  .as3__1{
    font-size: 12px;
  }

  .as3__2{
    font-size: 25px;
  }

  .as3__3{
    font-size: 15px;
  }

  .as3__4{
    font-size: 13px;
  }

  .staff__text , .staff__text2{
    font-size: 12px;
  }

  .staff__text3{
    font-size: 18px;
  }

  .about__section4{
    padding-bottom: 0;
  }

  .award__area h2{
    font-size: 12px;
  }

  .award__area h3{
    font-size: 25px;
  }

  .award__area ul li span{
    font-size: 15px;
  }

  .award__area ul li{
    font-size: 15px;
    padding-left: 82px;
  }

  .award__area{
    padding:80px 60px 32vw;
  }

  .company__flex{
    width: calc(100% - 200px);
  }

  .company__flex p{
    font-size: 14px;
  }

  .contact h3, h3.bo__title{
    font-size: 21px;
  }

  .contact h3 span, h3.bo__title span{
    font-size: 12px;
  }

  .breadcrumbs{
    font-size: 12px;
  }

  ul.category__type li a{
    font-size: 14px;
    padding:2px 15px;
  }

  ul.category__type{
    margin-bottom: 35px;
  }

  .gf__col a img{
    height: 24vw;
  }

  .news .wp-pagenavi a, .news .wp-pagenavi span{
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
  }

  .nextpostslink img{
    width: 9px;
    
  }

  .previouspostslink img{
    width: 9px;
    
  }

  footer ul{
    flex-wrap: wrap;
    padding-bottom: 30px;
  }

  footer ul li{
    font-size: 13px;
    margin:0 20px 8px;
  }

  .faq__item .question h3:before , .faq__item .answer p:before{
    font-size: 22px;
  }

  .faq__item .question h3{
    font-size: 16px;
    padding:20px 45px;
  }

  .faq__item .answer p{
    font-size: 14px;
    padding:20px 45px;
  }

  .faq__item .answer p .small{
    font-size: 12px;
  }

  .faq__item .answer p:before{
    top: 13px;
  }

  .faq__content .faq__item{
    padding:0 15px;
  }

  .page__content{
    margin-top: 50px;
    padding:60px 40px;
  }

  .single__news .news__date{
    font-size: 12px;
  }

  .single__news .news__title{
    font-size: 20px;
  }

  .news__content{
    margin-top: 18px;
    padding-top: 18px;
  }

  .news__content p{
    font-size: 14px;
  }

  .news__content h2{
    font-size: 20px;
  }

  .form__flex .form__left p{
    font-size: 16px;
  }

  .form__flex .form__left p.must{
    font-size: 12px;
    padding:0 7px;
  }

  .form__flex .form__left{
    width: 210px;
  }

  .form__flex .form__right{
    width: calc(100% - 210px);
  }

  .form__flex .form__right p{
    font-size: 14px;
  }

  .form__flex .form__right.check p input , .form__flex .form__right.privacy .check input{
    width: 12px;
    height: 12px;
    margin-right: 2px;
    top: 1px;
  }

  .form__flex .form__right.text input{
    font-size: 14px;
  }

  .form__flex .form__right.privacy .submit input{
    font-size: 18px;
    width: 280px;
  }

  .page__content.privacy p{
    font-size: 14px;
    margin-bottom: 30px;
  }

  .page__content.privacy h3.p__title{
    font-size: 18px;
  }

  .page__content.privacy .about__area h4{
    font-size: 16px;
  }

  .page__content.privacy ol{
    font-size: 14px;
  }

  .page__content.privacy ol li:before{
    left: -27px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    top: 3px;
    line-height: 20px;
  }

  .page__content.privacy ol{
    margin:30px 0;
  }

  .plan__content{
    width: calc(100% - 40px);
  }

  .pr__box{
    padding:70px 40px;
  }

  .prb__text1{
    font-size: 25px;
    margin-bottom: 24px;
  }

  .prb__text2{
    font-size: 15px;
  }

  .ff__right .ff__num:before{
    font-size: 25px;
  }

  .ff__right h4{
    font-size: 18px;
  }

  .ff__right p , .price__area p , .flow__text{
    font-size: 14px;
  }

  .price__area h1, .price__area h2{
    font-size: 18px;
    padding-left: 18px;
    margin:40px 0  24px;
  }

  .flow__title{
    font-size: 18px;
    padding-left: 18px;
  }

  .price__area h1:before, .price__area h2:before , .flow__title:before{
    width: 8px;
  }

  .flow__arrow{
    width: 50px;
  }

  .plan__left{
    width: 175px;
  }

  .plan__right{
    width: calc(100% - 180px);
  }

  .plan__left ul li a{
    font-size: 14px;
    padding:8px 0;
    padding-left: 28px;
  }

  .plan__left ul li a span:before{
    width: 8px;
    height: 8px;
    left: -15px;
  }

  .form__flex .form__right.textarea textarea{
    height: 210px;
    font-size: 14px;
  }

  .sg__page .page__title{
    font-size: 17px;
  }
  
  .sg__page .page__title2{
    font-size: 28px;
  }

}

.sp{
  display: none!important;
}

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

  .pc{
    display:none!important;
  }

  .sp{
    display: block!important;
  }

  .pt__flex .pt__left{
    top: 0;
  }

  .page__title{
    margin-bottom: 0;
  }

  .page__area.single__plan:before{
    display: none;
  }



  .arrow__link3{
    display: block;
    margin:20px auto 0;
    width: 100%;
    font-size: 16px;
    padding: 8px 40px;
    max-width: 400px;
    box-sizing: border-box;
    position: relative;
    color: #5D5D5D;
    border: 1px solid #5D5D5D;
    background: white;
    z-index: 3;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: 0.4s;    
  }

  .arrow__link3:before{
    content: '';
    position: absolute;
    right: 15px;
    top: 49%;
    width: 26px;
    height: 2px;
    background:#5D5D5D;
  }

  .arrow__link3:after{
    content: '';
    position: absolute;
    right: 15px;
    top: 49%;
    width: 26px;
    height: 2px;
    transform: rotate(90deg);
    transition: 0.4s;
    background:#5D5D5D;
  }

  .gallery__section{
    overflow-x:inherit;
  }

  .arrow__link1 , .arrow__link3{
    font-weight: bold;
  }

  .arrow__link3.open:after{
    transform: rotate(0deg);
  }

  .plan__flex.sp{
    display: flex!important;
  }

  .slider-4 .slick-list{
    padding-right: 0;
  }

  .slider-4 a img{
    height: 33vw;
  }

  .mainV__area{
    width: 100%;
    padding: 0;
  }

  .wrap, .wrap2{
    padding:0 30px;
  }

  .copy__area h2{
    font-size: 28px;
  }

  .copy__area{
    bottom: 40px;
  }

  .about__section{
    padding:120px 0;
  }

  .about__section h2{
    margin-top: 350px;
  }

  .about__img1{
    top: 85px;
    right: 45px;
    width: 40%;
  }

  .about__img3{
    top: 320px;
    width: 42%;
  }

  .about__img2{
    top: 200px;
    left: 20px;
    width: 45%;
  }

  .about__bg{
    top: 120px;
  }

  .about__section h2{
    margin-top: 85vw;
  }

  .about__section h2, .plan__section h2, .gallery__section h2, .pt1{
    font-size: 16px;
  }

  .about__section .as__text1, .plan__section .as__text1, .gallery__section .as__text1, .pt2{
    font-size: 16px;
  }

  .about__section h3, .plan__section h3, .gallery__section h3{
    font-size: 24px;
    line-height: 1.55;
  }

  .about__section .as__text3{
    margin:35px 0;
    padding:0 30px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

  .about__img4-sp{
    width: 100%;
    box-sizing: border-box;
    padding:0 30px;
    margin-bottom: 25px;
  }

  .gallery__section .as__text4{
    padding:0 30px;
    font-size: 16px;
  }

  .arrow__link1{
    width: 100%;
    font-size: 16px;
    padding:7px 40px;
  }

  .plan__section h2{
    margin-top: 0;
  }

  .plan__flex .pf__col{
    width: 49.9%!important;
    height: 45vw!important;
    margin:0 0 1px!important;
  }

  .plan__flex{
    justify-content: space-between;
  }

  .plan__flex .pf__col div h4{
    font-size: 15px;
  }

  .arrow__link2{
    width: 150px;
    font-size: 12px;
  }

  .arrow__link2:after{
    width: 18px;
    height: 18px;
  }

  .gallery__section h2.left-space{
    left: 0;
    text-align: center;
  }

  .as__text1.ib{
    display: block;
    text-align: center;
  }

  .gallery__section h3{
    text-align: center;
  }

  .gallery__slider .slick-dots{
    display:none!important;
  }

  .gallery__slider{
    padding-bottom: 0;
  }

  .faq__area{
    width: calc(100% - 60px);

  }

  .news__section .wrap{
    width: calc(100% - 30px);
  }

  .news__section h2{
    padding:15px 0 5px;
    font-size: 30px;
  }

  .news__section ul li a, .page__area.news ul li a{
    display:block;
  }

  .news__section ul li a p.news__date, .page__area.news ul li a p.news__date{
    font-size: 14px;
    width: 100%;
    border: 0;
    text-align: left;
    padding: 0;
    margin-bottom: 10px;
  }

  .news__section ul li a p.news__title, .page__area.news ul li a p.news__title{
    width: 100%;
    font-size: 16px;
    padding: 0;
  }

  .news__section ul li a p.news__title:after, .page__area.news ul li a p.news__title:after{
    display:none;
  }

  .news__section ul li, .page__area.news ul li{
    padding:15px 0;
  }

  .news__section ul, .page__area.news ul{
    padding:0 0 50px;
  }

  .news__section:after{
    top: 83px;
    height: calc(100% - 83px);
  }

  .contact__section{
    padding:70px 0 40px;
  }

  .contact__flex{
    display: block;
    margin-top: 20px;
  }

  .contact__flex a{
    width: 285px;
    margin:0 auto 25px;
  }

  .contact__flex a.contact__link1 p{
    font-size: 16px;
  }

  .contact__flex a.contact__link1 img{
    margin-right: 18px;
  }

  .contact__flex a.contact__link2 p{
    font-size: 22px;
  }

  .contact__section .wrap{
    width: calc(100% - 60px);
    border-bottom: 1px solid #9F9E9E;
  }

  .google__map iframe{
    height: 400px;
  }

  footer .wrap{
    padding:0 45px;
  }

  footer ul{
    display: block;
  }

  footer ul li{
    font-size: 16px;
    margin:0 0 2px;
  }

  .copyright{
    font-size: 12px;
    text-align: left;
  }

  .mainV__area{
    height: 144vw;
  }

  .mainV__area{
    height: 146vw;
  }

  .gallery__section h2, .pt1{
    margin-top: 100px;
  }

  .gallery__section{
    margin-top: -1px;
  }

  .contact__flex a{
    padding:27px 0;
  }

  .contact__flex a.contact__link2{
    padding:21px 0;
  }

  header .header__flex .header__right ul{
    display: none;
  }

  header .header__flex{
    padding:15px 0;
  }

  header .header__flex .header__left h1 a{
    display: block;
    line-height: 1;
    width: 160px;
  }

  header .header__flex .header__left h1 a img{
    width: 100%;
  }

  .page__area2{
    margin-top: 115px;
  }

  .pt__flex{
    display: block;
  }

  .pt__flex .pt__left{
    width: 100%;
    padding: 0;
  }

  .pt__flex .pt__right{
    width: 100%;
  }

  .page__title{
    text-align: left;
  }

  .page__area2 .page__title2{
    text-align: left;
    margin-top: 5px;
  }

  .ab__bg{
    width: calc(100% - 30px);
  }

  .as1__text1{
    width: 80%;
    margin-top: 80px;
  }

  .as1__text1 p{
    font-size: 16px;
  }

  .about__section2{
    padding:70px 0;
  }

  .slider-2 li{
    margin:0 5px;
  }

  .slider-2 .slick-list{
    padding:0 5%!important;
  }

  .as3__flex{
    display: block;
    padding-right: 15px;
  }

  .as3__left{
    width: 100%;
  }

  .as3__right{
    width: 100%;
    padding:0 ;
  }

  .about__section3:before{
    width: calc(100% - 15px);
  }

  .as3__3{
    margin-bottom: 20px;
  }

  .as3__4{
    margin-bottom: 40px;
  }

  .staff__flex .staff__col{
    width: 48%;
    margin:0 0 30px;
  }

  .staff__flex{
    justify-content: space-around;
  }

  .staff__text1{
    font-size: 12px;
  }

  .award__area{
    padding:60px 30px 34vw;
    padding-right: 15px;
  }

  .slider-3 li{
    margin:0 5px;
  }

  .slider-3 li.size3{
    width: 44vw;
  }

  .slider-3 li.size1{
    width: 42vw;
  }

  .slider-3 li.size2{
    width: 34vw;
  }

  .slider-3 li.size4{
    width: 33vw;
  }

  .about__section5{
    padding:70px 0 50px;
  }

  .company__flex{
    width: 100%;
  }

  .gallery__flex{
    justify-content: space-between;
  }

  .gf__col{
    width: 49.7%;
    margin:0 0 3px!important;
  }

  .gf__col a img{
    height: 35vw;
  }

  ul.category__type li a{
    font-size: 13px;
    padding:1px 10px;
  }

  ul.category__type li{
    margin-right:7px;
    margin-bottom: 7px;
  }

  ul.category__type{
    margin-bottom: 25px;
  }

  .contact h3, h3.bo__title{
    margin-bottom: 30px;
  }

  .page__area{
    padding-bottom: 70px;
  }

  .news.ver2 .wp-pagenavi{
    margin-top: 35px;
  }

  .news .wp-pagenavi a, .news .wp-pagenavi span{
    margin:0 3px;
  }

  .page__area.news ul{
    padding-top: 50px!important;
  }

  .news__section ul li a p.news__title, .page__area.news ul li a p.news__title{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .previouspostslink img , .nextpostslink img{
    width: 8px;
  }

  .nextpostslink img{
    left: 52%;
  }

  .arrow__link1{
    max-width: 400px;
  }

  .page__area{
    margin-top: 84px;
    padding-top: 30px;
  }

  .page__content{
    margin-top: 30px;
    padding:60px 30px;
  }

  .news__content{
    padding-top: 5px;
  }

  .faq__item .question:after{
    width: 18px;
    height: 18px;
    top: 25px;
  }

  .page__title.center{
    text-align: center;
  }

  .form__flex{
    display: block;
  }

  .form__flex .form__left{
    width: 100%;
    padding:20px 0 10px;
  }

  .form__flex .form__right{
    width: 100%;
    border: 0;
    padding:0 0 20px;
  }

  .form__flex .form__left p.must{
    top: 58%;
  }

  .form__flex .form__right.privacy p{
    margin-top: 0;
    text-align: center;
  }

  .form__flex .form__right.privacy .submit input{
    display: block;
    margin:10px auto 0;
  }

  .page__content.contact{
    padding-bottom: 30px;
  }

  .form__flex .form__right.textarea textarea{
    height: 210px;
    font-size: 14px;
  }

  .plan__content{
    width: calc(100% - 60px);
    margin:40px auto 0;
    display: block;
  }

  .plan__left{
    position: relative;
    top: 0;
    width: 100%;
  }

  .plan__left ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .plan__left ul li{
    width: 49%;
  }

  .plan__right{
    width: 100%;
  }

  .plan__left ul li a.current{
    color:#333;
  }

  .plan__left ul li a span:before{
    display:none;
    background: inherit;
    border-color:#9F9E9E ;
  }

  .plan__left ul li a{
    padding:8px 0;
    text-align: center;
  }

  header.op0{
    opacity: 1;
    pointer-events: auto;
  }

  .mainV__area{
    margin-top: 83px;
  }

  #nav{
    padding:160px 0 50px;
  }

  #nav .nav__wrap{
    padding:0 30px;
  }

  #nav ul{
    list-style: none;
    margin: 0;
    padding:0 ;
  }

  #nav ul li{
    border-bottom:1px solid #B1B6AE;
  }

  #nav ul li a{
    display: block;
    text-decoration: none;
    color:#333;
    padding:14px 0;
  }

  #nav ul li#parent a{
    position: relative;
    cursor: pointer;
  }

  #nav ul li#parent a:before{
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 1px;
    background:#B1B6AE;
  }

  #nav ul li#parent a:after{
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 1px;
    background:#B1B6AE;
    transform: rotate(90deg);
    transition: .4s;
  }

  #nav ul li#parent.open a:after{
    transform: rotate(0deg);
  }

  #child{
    padding-left: 15px;
    margin:15px 0;
  }

  #child p{
    margin:0 0 5px;
    
  }

  .plan__flex{
    position: relative;
    z-index: 2;
  }

  #child p a{
    display: inline-block;
    color:#808080;
    text-decoration: none;
    font-size: 16px;
  }

  .gallery__slider{
    width: 100%;
    margin-left: 0;
  }

  .gallery__bg{
    width: 100%;
    top: -200px;
    height: calc(100% + 130px);
  }

  .plan__flex.toggle{
    margin-top: 0;
  }

  .arrow__link1.g__link{
    margin-top: 50px;
  }

  .gallery__section{
    padding-bottom: 0;
  }

  .faq__area{
    margin-bottom: 0;
  }

  .faq__area{
    background-image: url("img/faq-sp.png");
    width: 440px;
    height: 245px;
  }

  .faq__abo{
    left: 40%;
    top:15%;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
  }

  .faq__abo h3{
    margin-bottom: 5px;
  }

  .faq__abo .lib{
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color:#CB9F3E;
  }

  .arrow__link1.faq__type{
    position: relative;
    top: 155px;
    max-width: calc(100% - 60px);
  }

  .news__section{
    margin-top: 80px;
  }

  .news__section{
    padding-bottom: 50px;
  }

  .copy__area {
    padding:0 30px;
  }

  .ib__rel:after{
    right: -75px;
    width: 80px;
    bottom: 20px;
  }

  .ib__rel:before{
    left: -45px;
    width: 80px;
    top: -15px;
  }

  .staff__flex .staff__col:nth-child(2) , .staff__flex .staff__col:nth-child(5){
    transition-delay: 0.1s;
  }
  
  .staff__flex .staff__col:nth-child(3){
    transition-delay:0.1s;
  }

  .page__area2 .page__title2 br{
    display: none;
  }

  .slider-2{
    margin-top: 20px;
  }
  
  .company__flex{
    margin-top: 20px;
  }

  .staff__flex{
    margin-top: 20px;
  }

  .page__title2{
    margin-bottom: 20px!important;
  }

  
  .gs__item.size1{
    width:43vw;
  }

  .gs__item.size2{
    width:50vw;
  }

  .gs__item.size3{
    width:43vw;
  }

  .gs__item.size4{
    width:52vw;
  }


}


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

  .wrap, .wrap2{
    padding:0 15px;
  }

  .mainV__area .wrap{
    padding:0 30px;
  }

  .copy__area h2{
    font-size: 24px;
    margin-bottom: 10px;
  }

  .about__section{
    padding:80px 0;
  }

  .about__bg{
    top: 110px;
  }

  .about__img1{
    top: 70px;
    right: 40px;
  }

  .about__img2{
    left: 15px;
    width: 40%;
    top: 145px;
  }

  .about__img3{
    top: 225px;
    width: 45%;
  }

  .about__section h2{
    margin-top: 83vw;
  }

  .slash:before{
    height: 32px;
    bottom: 5px;
    transform: rotate(50deg);
  }

  .about__section h3, .plan__section h3, .gallery__section h3{
    font-size: 22px;
    
  }

  .about__section h3.mt0, .plan__section h3.mt0, .gallery__section h3.mt0{
    margin-top: 10px!important;
  }

  .about__section{
    padding-bottom: 50px;
  }

  .plan__section h3{
    font-size: 23px;
  }

  .plan__section.single__ver h2{
    margin-top: 60px;
  }

  .plan__flex .pf__col{
    width: 49.7%!important;
  }

  .plan__flex{
    margin-top: 20px;
  }

  .plan__flex .pf__col div h4{
    font-size: 14px;
  }

  .plan__flex .arrow__link2{
    width: 105px;
    text-align: left;
    padding:4px 0;
    padding-left: 7px;
  }

  .arrow__link2:after{
    right: 7px;
  }

  .gallery__section h2, .pt1{
    margin-top: 60px;
  }

  .gallery__section h3{
    font-size: 24px;
  }

  .gallery__slider .gs__item{
    margin-right: 7px;
    margin-left: 7px;
  }

  .faq__area{
    width: calc(100% - 30px);
    margin-bottom: 50px;
  }

  .news__section{
    margin-top: 0;
  }

  .news__section ul li a p.news__title, .page__area.news ul li a p.news__title{
    line-height: 1.45;
  }

  .news__section h2{
    padding-top: 20px;
  }

  .contact__section{
    padding:50px 0 30px;
  }

  .contact__section h2{
    font-size: 30px;
  }

  .contact__section .wrap{
    width: calc(100% - 30px);
    padding-bottom: 35px;
  }

  .contact__section .studio__text{
    font-size: 16px;
    margin-top: 5px;
  }

  .google__map iframe{
    height: 375px;
  }

  footer ul{
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  .page__title{
    font-size: 15px;
  }

  .page__title2{
    font-size: 23px;
    margin-top: 3px;
    margin-bottom: 25px;
  }

  .about__section1 {
    margin-top: -90px;
    
  }

  .as1__text1{
    width: 100%;
    margin-top: 50px;
    box-sizing: border-box;
    padding:0 30px;
  }

  .as1__text1 p{
    font-size: 15px;
  }

  .about__section1{
    padding-bottom: 50px;
  }

  .about__section2 , .about__section4{
    padding:60px 0;
  }

  .about__section3{
    padding:60px 0;
  }

  .as3__2{
    font-size: 22px;
  }

  .as3__3 br{
    display: none;
  }

  .as3__4{
    font-size: 12px;
  }

  .staff__flex .staff__col{
    width: 100%;
  }

  .staff__flex {
    margin-top: 25px;
  }

  .staff__flex .staff__col:last-child{
    margin-bottom: 0;
  }

  .award__area{
    padding:60px 15px 34vw;
  }

  .award__area h3{
    font-size: 22px;
  }

  .award__area ul li span{
    font-size: 13px;
  }

  .award__area ul li span:before{
    width: 5px;
    height: 5px;
    left: -3px;
    top: 49%;
  }

  .award__area ul li{
    font-size: 14px;
    padding-left: 65px;
  }

  /* .about__section4{
    padding-bottom: 0;
  } */

  .company__flex .cf__left , .company__flex .cf__right{
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .right__fix a{
    width: 30px;
    margin-bottom: 10px;
  }

  .breadcrumbs{
    font-size: 11px;
    right: -5px;
  }

  .breadcrumbs span{
    margin:0 5px;
  }

  .ab__bg{
    width: calc(100% - 15px);
  }

  .about__section5{
    padding-top: 20px;
  }

  .contact h3:before, h3.bo__title:before{
    width: 20px;
  }

  .contact h3, h3.bo__title{
    padding-left: 30px;
    font-size: 19px;
  }

  .contact h3 span, h3.bo__title span{
    font-size: 11px;
  }

  .gf__col{
    margin-bottom:1px!important;
  }

  .gf__col a img{
    height: 36vw;
  }

  .page__area{
    padding-bottom: 50px;
  }
  
  .single__news .news__title{
    font-size: 18px;
    margin-top: 5px;
  }

  .page__content{
    padding:50px 15px 35px;
  }

  .news__content{
    margin-top: 14px;
  }

  .news__content img{
    margin:20px 0;
  }

  .news__content h2{
    font-size: 18px;
    margin:40px 0 15px;
  }

  .faq__item .question h3:before, .faq__item .answer p:before{
    font-size: 20px;
  }

  .faq__item .question h3{
    font-size: 15px;
    padding:15px 40px;
    padding-right: 30px;
  }

  .faq__item .answer p{
    font-size: 13px;
    padding:15px 40px 25px;
    padding-right: 30px;
  }

  .faq__item .answer p .small{
    font-size: 11px;
  }

  .faq__item .answer p:before{
    top: 12px;
  }

  .contact__section.type2 .wrap{
    padding-bottom: 25px;
  }

  .contact h3 span , .privacy h3 span{
    display: block;
    margin-top: 3px;
    margin-left: 0;
  }

  .contact h3 , .privacy h3{
    display: block;
  }

  .contact h3:before , .privacy h3:before{
    top: 30%;
  }

  .form__flex .form__left{
    padding-bottom: 5px;
  }

  .form__flex .form__right.privacy .submit input{
    padding:8px 0;
  }

  .form__flex .form__left p.must{
    top: 64%;
  }

  .form__flex .form__left p{
    font-size: 15px;
  }

  .page__content.privacy ol{
    padding-left: 30px;
  }

  .page__content.privacy p{
    margin-bottom: 30px;
  }

  .page__content.privacy .about__area{
    padding-left: 15px;
    margin-bottom: 30px;
  }

  .page__content.privacy{
    padding-bottom: 40px;
  }

  .page__content.privacy h3.p__title{
    margin-bottom: 15px;
    padding-bottom: 8px;
  }

  .plan__left ul li a{
    font-size: 13px;
  }

  .plan__content{
    width: calc(100% - 30px);
  }

  .pr__box{
    padding:60px 15px 35px;
  }

  .prb__text1{
    font-size: 20px;
  }

  .prb__text2{
    font-size: 14px;
    text-align: left;
  }

  .feature__area .feature__flex{
    display: block;
  }

  .ff__left{
    width: 100%;
  }

  .ff__right{
    width: 100%;
    margin-top: 30px;
  }

  .ff__right h4{
    margin: 10px 0;
  }

  .ff__right .ff__num{
    height: 25px;
  }

  .price__area h1:before, .price__area h2:before, .flow__title:before{
    width: 6px;
  }

  .flow__title{
    padding-left: 15px;
  }

  .flow__arrow{
    position: relative;
    top: -3px;
  }

  .sg__page .page__title2{
    font-size: 22px;
  }

  .sg__page .page__title{
    font-size: 15px;
  }

  .slider-4{
    width: calc(100% + 15px);
  }

  .slider-4 .slick-dots{
    margin-top: 30px;
  }

  .slider-4 .slick-dots li{
    width: 20px;
    height: 20px;
    margin:0 5px;
  }

  header .header__flex{
    padding:13px 0 8px;
  }

  .menu_button{
    right: 15px;
    top:22px;
  }

  .mainV__area{
    margin-top: 74px;
  }

  #nav .nav__wrap{
    padding:0 15px;
  }

  #nav{
    padding-top: 145px;
  }

  .faq__area{
    max-width: calc(100% - 30px);
    width: 345px;
    height: 190px;
  }

  .faq__abo h3{
    font-size: 20px;
    margin-bottom: 2px;
  }

  .faq__abo .lib{
    font-size: 10px;
  }

  .faq__abo{
    top: 21%;
  }

  .arrow__link1.faq__type{
    top: 122px;
  }

  .news__section .news__ver{
    width: calc(100% + 30px);
    position:relative;
    left: -15px;
  }

  .news__section h2{
    padding-bottom: 0;
  }

  .news__section:after{
    top: 72px;
    height: calc(100% - 76px);
  }

  .pr__box .flow__text:last-child{
    margin-bottom: 0;
  }

  #category{
    display: block;
    position: relative;
    top: -150px;  
  }

  .copy__area{
    padding:0 15px;
  }

  .ib__rel:before{
    width:55px;
    left: -30px;
  }
  
  .ib__rel:after{
    width: 55px;
    right: -55px;
    bottom: 10px;
  }

  .copy__area p{
    font-size: 12px;
  }

  .about__section2 .slider-2 .slick-list{
    padding:0 10%!important;
  }

  #plan , #access{
    top: -100px;  
  }

  .page__title{
    margin-bottom: 0;
  }

  .staff__flex{
    margin-top: 20px;
  }

  .as3__flex.mb__plus{
    margin-bottom: 60px;
  }
 
  




}

.price__table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ScrollHintのカスタマイズ */
.scroll-hint {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: #CB9F3E !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.scroll-hint-icon-white {
  color: #CB9F3E !important;
}

/* table内の文字色を元に戻す */
.price__table-wrap table,
.price__table-wrap table * {
  color: #333 !important;
}

.price__table-wrap table th,
.price__table-wrap table td {
  color: #333 !important;
}