@charset "UTF-8";
/*!
Theme Name: caratful_v2
Template: twentytwentytwo
*/
/* ここから下に書いていく */
body{
  overflow-x: hidden;
  color:#000;
  padding-top: 15vw;
  font-family: "Inter", sans-serif;
}
header{
  display:flex;
  justify-content: space-between;
  height:15vw;
  position:fixed;
  z-index: 20;
  background-color: #FFF4F8;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: transform 0.3s ease; /* アニメーションの設定 */
}
@media (min-width: 768px) {
	body{
		padding-top: 6vw !important;
	}
	header{
		height:6vw !important;
	}
}
.hide-header {
  transform: translateY(-100%);
}
header img{
  height:100%;
}
header ul{
  list-style: none;
  display: flex;
  margin:0;
  width:30%;
  height:100%;
  align-items: stretch;
  padding:0;
}
header ul a{
  display: block;
  text-decoration: none;
  font-size: 2.5vw;
  line-height: 1.5;
  height:100%;
  padding:3vw 0;
  vertical-align: center;
}
@media (min-width: 768px) {
	header ul a{
		font-size: 2vw !important;
	    line-height: 1 !important;
	    padding:1vw 0 !important;
	}
}
header li{
  flex:1;
  text-align: center;
  border-left: #ff68c2 solid .3vw;
  height:100%;
}
.btn-li{
  background-color: #ff68c2;

}
/*=============================
.btn-trigger
=============================*/
.btn-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 15%;
  width: 60%;
  height: .5vw;
  background-color: #fff;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 3vw;
}
.btn-trigger span:nth-of-type(2) {
  top: 7.5vw;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 3vw;
}
/*=============================
#btn
=============================*/
#btn.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
#btn.active span:nth-of-type(1) {
  -webkit-transform: translateY(4.5vw) rotate(-45deg);
  transform: translateY(4.5vw) rotate(-45deg);
}
#btn.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
#btn.active span:nth-of-type(3) {
  opacity: 0;
}
@media (min-width: 768px) {
	.btn-trigger span:nth-of-type(1) {
      top: 1vw;
    }
    .btn-trigger span:nth-of-type(2) {
      top: 2.75vw;
    }
    .btn-trigger span:nth-of-type(3) {
      bottom: 1vw;
    }
	#btn.active span:nth-of-type(1) {
      -webkit-transform: translateY(1.8vw) rotate(-45deg);
      transform: translateY(1.8vw) rotate(-45deg);
    }
}
/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 15vw;
  right: -40%;
  bottom: 0;
  width: 40%;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 5;
  opacity: 0;
}
.open nav {
  right: 0;
  opacity: 1;
}
nav .inner {
  padding: 2vw;
}
nav .inner ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  width:90%;
}
nav .inner ul li {
  position: relative;
  height: 10vw;;
  margin: 0;
  border-left: 1VW solid #ff68c2;
  border-bottom: .3VW solid #ff68c2;
}
nav .inner ul li a {
  display: block;
  color: #000;
  font-size: 2.7vw !important;
  padding:1em !important;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #fff6fb;
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 15vw;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF4F8;
  opacity: .8;
  z-index: 4;
  cursor: pointer;
}
@media (min-width: 768px) {
	nav{
		top: 6vw !important;
	}
	.open #mask{
		top:6vw !important;
	}
}
/* footer */
footer{
  background: linear-gradient(180deg, #FFF 0%, #FFD8EE 100%);
  padding:3% 0;
}
footer img{
  display: block;
  width:70%;
  margin:0 auto;
}
footer ul{
  font-size: 3vw;
  width:80%;
  margin: 0 auto;
  list-style: none;
}
footer li{
  border-top:gray solid .2vw;
  padding-left: 5%;
}
footer .last{
  border-bottom: gray solid .2vw;
}
footer a{
  text-decoration: none;
  color:#000;
}
footer ul a:hover,.footer-flex a:hover,.privacy a:hover{
  color:#ff68c2;
}
.footer-flex{
  margin:5% auto 0 auto;
  display:flex;
  justify-content: space-around;
  width:80%;
  font-size: 3vw;
  text-align: center;
}
.privacy{
  font-size: 3vw;
  text-align: center;
  margin-bottom: 5%;
}
.copylight{
  display: block;
  width:fit-content;
  margin: 0 auto;
  font-size: 1vw;
}
/* frontTOP */
#caratful .shabon{
  background-image: url(./img/shabon.jpg);
  background-repeat: repeat-y;
  background-size: 100%;
  position: relative;
  padding:6vw 0;
}
#caratful .woman{
  position: absolute;
  width:40%;
  top:-5%;
  right:5%;
}
#caratful .shabon h1{
  color:#ED2087;
  text-align: center;
  text-decoration: underline;
  font-size: 3vw;
  font-weight: 400;
  width:70%;
}
#caratful .shabon p{
  width:70%;
  text-align: center;
  font-size: 2.5vw;
  font-weight: 400;
}
.pink{
  color:#ED2087;
}
.d_button{
  width:70%;
}
.link-button{
  display: block;
  color: #FFF;
  font-size: 2vw;
  padding:1% 3%;
  background-color: #FF68C2;
  border-radius: 5vw;
  width:fit-content;
  text-decoration: none;
  margin: 0 auto;
}
.link-button:hover{
  color: #FF68C2;
  background-color: #FFF;
  border:#FF68C2 solid .5vw;

}
/* 初回割り */
.try-price{
  width: 100%;
  position: relative;
}
.img_cherry{
  width:100%;
}
.cherry_out{
  position:absolute;
  top:0;
  left:10%;
  z-index:7;
}
.cherry_in{
  position: relative;
}
.cherry_in img{
  width:18vw;
}
.cherry_in p{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
  color:#fff;
  font-size: 2vw;
  text-align: center;
  width:100%
}
.cherry_detail{
  width:80%;
  position:absolute;
  top:20%;
  left:10%;
  z-index:5;
}
.cherry_top{
  background-color: #FF68C2;
  color:#fff;
  font-size:3vw;
  text-align: center;
  margin:auto;
  border-top-left-radius: 3vw;
  border-top-right-radius: 3vw;
  line-height: 1;
  padding:1vw;
}
.cherry_top span{
  color:#FFFF62;
  font-size:5vw;
}
.cherry_detail ul{
  background-color: #fff;
  font-size: 1.8vw;
  margin:0 auto;
  list-style:none;
  padding-left: 0;
}
.cherry_detail li{
  display:flex;
  background: url(./img/diamond.png) left 2vw top 3.5vw no-repeat;
  background-size: 3vw;
  padding:0 6vw;
  align-items: center;
  height:10vw;
  justify-content: space-between;
}
.cherry_detail li div{
  display: flex;
  align-items: center;
}
.try_parts{
  color:#3BF4F4;
  font-size: 5vw;
}
.once{
  background-color: #ED2087;
  color:#FFFF62;
  font-size: 5vw;
}
.cherry_detail hr{
  width:90%;
  margin:0 auto;
  border: none;
  border-top: .5vw dashed #FF68C2;
  padding: 0 2vw;
}
.limited{
  position: absolute;
  width:93%;
  height:60%;
  background: linear-gradient(180deg, #FFF 0%, #FF68C2 100%);
  left:3.5%;
  bottom:0;
}
.limited_dsp{
  position:relative;
  height:100%;
}
.first-time{
  position:absolute;
  bottom:0;
  display: flex;
  width:100%;
  align-items: center;
}
.first{
  text-align: center;
  background-color: #FFFF62;
  color:#3BF4F4;
  font-size: 2vw;
  padding:1vw 4vw;
}
.first span{
  font-size:4vw;
}
.y-arrow{
  vertical-align: middle;
  color: #FFFF62;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 5.5vw 6vw;
  border-left-color: currentColor;
  border-right: 0;
}
.grid-1000{
  display: grid;
  grid-template-columns: 1fr 9fr 2fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  margin:0 auto;
}
.grid-1000 p{
  margin:0;
  line-height: 1;
}
.grid1{
grid-column: 1/2;
grid-row: 3/4;
color:#fff;
font-size: 3vw;
}
.grid2{
grid-column: 2/3;
grid-row: 1/5;
color:#FFFF62;
font-size: 12vw;
font-weight: bold;
}
.grid3{
grid-column: 3/4;
grid-row: 2/3;
color:#fff;
font-size: 2.5vw;
}
.grid4{
grid-column: 1/2;
grid-row: 4/5;
color:#fff;
font-size: 3vw;  
}
.grid5{
grid-column: 3/4;
grid-row: 3/5;
color:#fff; 
font-size: 6vw;
}
/* 口コミ */
#message{
  background-color: #FFF0F5;
  padding:2vw 0;
}
.wing{
  width:85%;
  display:flex;
  margin: 0 auto;;
}
.gold-wing1{
  background-image: url(./img/gold-wing1.png);
  background-size: contain;
  width:50%;
  text-align: center;
  background-position: center;

}
.gold-wing1 p1{
  display: block;
  width:80%;
  margin:0 auto;
  font-size: 5vw;;
  text-align: center;
}
.gold-wing1 p2{
  writing-mode: vertical-rl;
  font-size:3vw;
}
.gold-wing1 p3{
  font-size: 9vw;;
  text-align: center;
  line-height: 0.8;
}
.gold-wing1 p4{
  font-size: 2vw;;
  text-align: center;
  color:#dcd91b;
  vertical-align: top;
}
.gold-wing2{
  background-image: url(./img/gold-wing2.png);
  background-size: contain;
  text-align: center;
  background-position: center;
  width:40%;
}
.gold-wing2 p1{
  display: block;
  width:80%;
  margin:0 auto;
  font-size: 5vw;;
  text-align: center;
}
.gold-wing2 p2{
  writing-mode: vertical-rl;
  font-size:3vw;
}
.gold-wing2 p3{
  font-size: 9vw;;
  text-align: center;
  line-height: 0.8;
}
.blink{
  color: #fff;
  text-shadow: 0 0 20px #dcd91b,0 0 1vw #dcd91b;
}
.kome{
  width:85%;
  text-align: right;
	font-size:1.5vw;
}
.comm{
  color:#EE308F;
  text-align: center;
  font-size: 3vw;
  font-weight: 400;
}
.c_button{
  width:100%;
  margin:2vw auto;
}
.flex-customer{
  display: flex;
  justify-content: space-around;
}
.customer{
  width:25%;
}
/* 店舗PR */
#introduction{

}
.intro-title{
  color:#ED2087;
  font-size: 4vw;
  font-weight: 400;
  border-bottom:#ED2087 solid .3vw;
  width:60%;
  margin:0 auto;
  padding:0 5%;
  position: relative;
  text-align: center;
}
.intro-title::before,
.intro-title::after {
  content: "";
  position: absolute;
  bottom: -.6vw; /* 位置調整。border 太さにより調整 */
  width: 1vw;
  height: 1vw;
  background: #fff;
  border:#ED2087 solid .3vw;
  transform: rotate(45deg); /* 90°傾けてひし形にする */
}

.intro-title::before {
  left: 0;
}

.intro-title::after {
  right: 0;
}
.sentence{
  width:80%;
  margin:0 auto;
  color:#ED2087;
  font-size: 2.3vw;
}
.vision{
  font-weight: bold;
}
.sentence img{
  width:100%;
}
/* クーポン */
.flex-cycle{
  display:flex;
  width:90%;
  margin: 0 auto;
}
.coupon-mg{
  margin:5vw auto;
}
.coupon-img{
  width:40%;
  height:20vw;
  object-fit: cover;
  border:1px #000 solid;
}
.coupon-box{
  width:60%;
  position:relative;
  border:1px #000 solid;
  text-align: right;
}
.right-box{
  margin: 1vw 0px 1vw auto;
}
.gradate_box{
  background: linear-gradient(0deg, #fff 0%, #C7FCFF 100%);
}
.gradate2_box{
  background: linear-gradient(0deg, #fff 0%, #FFD7ED 100%);
}
.gradate_p{
  width:fit-content;
  color:#fff;
  padding:0 3vw;
  background: linear-gradient(90deg, #30F0D4 0%, #29A2F7 100%);
}
.gradate2_p{
  width:fit-content;
  color:#fff;
  padding:0 3vw;
  background: linear-gradient(90deg, #FFDC5B 0%, #ff68c2 100%);
}
.purple{
  color:#4B6BFF;
}
.price{
  width:70%;
  text-align: left;
}
.price p{
  margin:0;
}
.grid-container{
  position:absolute;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  place-items: center;
  width:17%;
  aspect-ratio: 1;
  bottom: 1vw;
  left: 1vw;
  border-radius: 50%;
}
.b-yellow{
  background-color: #EBFF00;
}
.b-pink{
  background-color:#ED2087;
  color:#fff;
}
#gi1 {
  grid-column: 2 / 7;
  grid-row: 2 / 3;
  font-size: 1vw;
  margin:0;
}
#gi2 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  font-size: 1vw;
  margin:0;
}
#gi3 {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
  font-size: 2.5vw;
  margin:0;
}
#gi4 {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
  font-size: 1vw;
  margin:0;
}
#gi5 {
  grid-column: 5 / 7;
  grid-row: 4 / 5;
  font-size: 1vw;
  margin:0;
}
.fsize5{
  font-size:5vw;
  text-align: center;
}
.fsize5_l{
  font-size:5vw;
  font-weight: bold;
}
.fsize2_l{
  font-size: 2vw;
}
.fsize1_5{
  font-size: 1.5vw;
}
.fsize1{
  font-size: 1vw;
}
/* 選ばれる理由 */
.reason{
  display:flex;
  flex-wrap: wrap;
  width:80%;
  margin:5vw auto;
  justify-content: space-between;
  gap: 5vw;
}
.mask{
  position:relative;
  width:45%;
}
.mask a{
  display: block;
  color: #ED2087;
}
.mask img{
  opacity: 0.5;
  width:100%;
}
.mask p1{
  border-bottom:solid .3vw #ED2087;
  font-size: 10vw;
  position: absolute;
  width:40%;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  line-height: 1.3;
}
.mask p2{
  font-size: 2vw;
  position: absolute;
  width:100%;
  text-align: center;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);

}
.mask p3{
  font-size: 3vw;
  position: absolute;
  width:100%;
  text-align: center;
  top: 70%;
  left: 50%;
  transform: translate(-50%,-50%);

}
/* プラン・コスト */
#plan_cost{
  padding: 5vw 0;
}

/* スライド共通：中央基準 width:80% */
.swiper-slide {
  transition: transform 0.3s;
  border:#FF68C2 solid .5vw;
  height:70vw !important;
}

/* ボタンを外側に配置する（例） */
.swiper-button-prev, .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}
.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-top: 7vw solid transparent;
    border-bottom: 7vw solid transparent;
}
@media (min-width: 768px) {
  .swiper-button-prev::after,
.swiper-button-next::after {
    border-top: 3vw solid transparent !important;
    border-bottom: 3vw solid transparent !important;
}
.swiper-button-prev::after {
    border-right: 3vw solid #ff68c2 !important;
}
.swiper-button-next::after {
    border-left: 3vw solid #ff68c2 !important;
}
}

.swiper-button-prev::after {
    border-right: 7vw solid #ff68c2;
    border-left: 0;
}

.swiper-button-next::after {
    border-left: 7vw solid #ff68c2;
    border-right: 0;
}
.swiper-button-prev {
  left: 2% !important;   /* ここを小さくすると中央寄りになる */
}
.swiper-button-next {
  right: 2% !important;   /* ここを小さくすると中央寄りになる */
}
.swiper-pagination-bullets span {
  /*ドットのサイズを変更*/
 display:inline-block;
  width:1.5vw;
  height:1.5vw;
}
.plan_img{
  width:100%;
}
.unlimited{
  position: absolute;
  background-color: #FF68C2;
  color:#fff;
  font-size:2.5vw;
  width:fit-content;
  left:3%;
  top:35%;
}
.plan_title{
  font-size:2.5vw;
  padding:0 3vw;
}
.plan_title span{
  font-size:1.5vw;
}
.plan_explan{
  font-size:1.5vw;
  padding:0 3vw;
  height:15%;
}
.plan_cost{
  font-size:3vw;
  padding:0 10vw;
}
.plan_cost span{
  font-size:1.5vw;
}
.p_button{
  margin: 0 auto;
}
.plan_button{
  padding:0 3vw;
}
/* よくある質問 */
#question{
  background-color: #FFF7E7;
  padding:5vw 0;
}
#question h2{
  font-size:5vw;
  color:#5271FF;
  margin:0 auto;
  text-align: center;
}
.question-list{
  display:flex;
  flex-wrap: wrap;
  width:80%;
  margin:5vw auto;
  justify-content: space-between;
  gap: 3vw;
  color:#5271FF;
  font-size:3.5vw;
  padding:5vw 5vw;
  border-bottom: #5271FF dashed .3vw;
}
.question-list p{
  width:45%;
  text-align: center;
  border:#5271FF solid 1vw;
  margin: 0 auto;
  border-radius: 1.5vw;
  background-color: #fff;
  padding:3vw 1vw; 
}
.question-title{
  color:#5271FF;
  font-size: 4vw;
  font-weight: 400;
  border-bottom:#5271FF solid .3vw;
  width:60%;
  margin:5% auto 3% auto;
  padding:0 5%;
  position: relative;
  text-align: center;
}
.question-title::before,
.question-title::after {
  content: "";
  position: absolute;
  bottom: -.6vw; /* 位置調整。border 太さにより調整 */
  width: 1vw;
  height: 1vw;
  background: #fff;
  border:#5271FF solid .3vw;
  transform: rotate(45deg); /* 90°傾けてひし形にする */
}

.question-title::before {
  left: 0;
}

.question-title::after {
  right: 0;
}
.qa-box {
  border-bottom: solid .3vw #BBB7B7;
  width:85%;
  margin: 0 auto;
  font-size:2.5vw;
  padding: 3vw 2vw;
}

.question-box {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-bottom: 1vw;
}

.q-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width:5vw;
  height: 5vw;
  background: #5271FF;
  color: #fff;
  border-radius: 50%;
  margin-right: 3vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.qa-question {
  color: #000;
  font-weight: bold;
  width:80%;
}

.answer-box {
  display: flex;
  align-items: center;
  padding-top:1vw;
  border-top:#BBB7B7 dotted .3vw;
}

.a-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5vw;
  height: 5vw;
  background: #fa6868;
  color: #fff;
  border-radius: 50%;
  margin-right: 3vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.qa-answer {
  color: #000;
  width:90%;
}
.qa-contact{
  font-size:1.5vw;
  color:#000;
  padding:3vw;
  width:85%;
  margin:0 auto;
}
.qa-all{
  display:block;
  color:#5271FF;
  font-size:2vw;
  margin:0 auto;
  width:fit-content;
  text-align: center;
  text-decoration: none;
  position: relative;
}
.qa-all::before {
  background: #5271FF;
  content: '';
  width: 100%;
  height: .1vw;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: center top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.qa-all:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}
/* 会社概要 */
#company{
  background-color: #FFF0F5;
  padding:1vw 0;
}
#company img {
  width:100%;
}
.company-detail{
  width:80%;
  margin: 0 auto;
  color: #504F4F;
}
.company-detail div{
  margin:2vw auto;
}
.company-detail p1{
  display:block;
  font-size: 3vw;
  font-weight: bold;
}
.company-detail p2{
  display: block;
  font-size: 2.5vw;
}
.company-detail p3{
  display: block;
  font-size: 1.5vw;
}
.navigate{
  color:#ED2087;
  font-size: 4vw;
  text-align: center;
}
.insta{
  display: flex;
}
.insta div{
  width:50%;
}
.insta video{
  display:block;
  width:80%;
  margin:0 auto;
}
.insta a{
}
.insta p{
  font-size: 2vw;
  color:#ED2087;
}