@charset "utf-8";

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
font-size:20px;
text-align:left;
color:#333;
min-width:750px;
}
@media screen and (max-width:750px){
html,body{ font-size:calc((20/750)*100vw); min-width:240px; max-width:750px;}
}

html{scroll-behavior: smooth;}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*video*/
video{ width: 100%; max-width: 100%; vertical-align: bottom;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom;}
.youtube2{ position:relative; width:100%; padding-top:177.77% !important;}
.youtube2 iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom;}
.youtube3{ position:relative; width:100%; padding-top:133.33% !important;}
.youtube3 iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom;}

/*video*/
.video_wrap{ position:relative; width:100%; padding-top:56.25% !important; z-index: 1;}
.video_wrap video{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom; z-index: -1;}
.video_wrap2{ position:relative; width:100%; padding-top:177.77% !important; z-index: 1;}
.video_wrap2 video{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom; z-index: -1;}
.video_wrap3{ position:relative; width:100%; padding-top:133.33% !important; z-index: 1;}
.video_wrap3 video{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom; z-index: -1;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.mincho{ font-family: '游明朝', YuMincho, 'メイリオ', Meiryo, serif; font-weight: normal !important;}
.mincho strong{ font-family: '游明朝', YuMincho, 'メイリオ', Meiryo, serif; font-weight: normal !important;}
.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}
.bg_y{ background: linear-gradient(to bottom, rgba(255,245,107,0) 0%, rgba(255,245,107,0) 0%, rgba(255,245,107,1) 0%, rgba(255,245,107,1) 100%);}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ background: #fff; padding: 25px 30px;}
header h1 img{ width: 244px;}
@media screen and (max-width:750px){
header{ padding: calc((25/750)*100vw) calc((30/750)*100vw);}
header h1 img{ width: calc((244/750)*100vw);}
}

/*フッター*/
footer{ padding: 60px 0 30%; text-align: center;}
footer .logo{ margin-bottom: 40px;}
footer .logo img{ width: 290px;}
footer ul{ display: flex; align-items: center; justify-content: center; margin: auto;}
footer ul li:not(:last-child):after{ content: "|"; margin: 0 1em;}
footer ul li{ font-size: 1.2rem;}
footer ul li a:hover{ text-decoration: underline;}
@media screen and (max-width:750px){
footer{ padding: calc((60/750)*100vw) 0 30%;}
footer .logo{ margin-bottom: calc((40/750)*100vw);}
footer .logo img{ width: calc((290/750)*100vw);}
}

/*fixed_btn*/
#fixed_btn{ display: none; position: fixed; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; max-width: 750px; background: #F7F7F7; padding: 10px 30px 2px; z-index: 999;}
#fixed_btn ul{ display: flex; align-items: flex-end; width: calc(100% + 10px); margin: 0 0 0 -5px;}
#fixed_btn ul li{ width:50%; margin: 0;}
#fixed_btn ul li img{ width: calc(100% + 8px); max-width: calc(100% + 8px); margin-left: -4px;}
@media screen and (max-width:750px){
}

/*メイン*/
#wrapper{ background: #fff; width: 100%; max-width: 750px; margin: auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:690px;}
@media screen and (max-width:750px){
.maincontent{ width: calc((690/750)*100vw);}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em; font-family: "游ゴシック体", YuGothic, "游ゴシック", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; font-weight:bold;}



/*fv*/
#fv{ position: relative;}
#fv .ico{
  width: 303px;
  position: absolute;
  right: 30px;
  top: -82px;
  z-index: 5;
}
#fv p{ width: 100%; position: absolute; left: 0; right: 0; top: 215px; margin: auto; z-index: 5;}
#fv .fv_cp::before{
  content: "";
  position: absolute;
  bottom: 0;
  background: url("../images/fv_cp_bg.png") no-repeat bottom center;
  background-size: contain;
  opacity: 0.9;
  width: 100%;
  height: 335px;
  z-index: 1;
  mix-blend-mode: multiply;
}
#fv .fv_cp img{
  position: absolute;
  bottom: 0;
  z-index: 2;
}
@media screen and (max-width:750px){
#fv .ico{ width: calc((227/750)*100vw); right: calc((30/750)*100vw); top: calc((-82/750)*100vw);}
#fv p{ top: calc((215/750)*100vw);}
#fv .fv_cp::before{
  height: calc((335/750)*100vw);
}
}
/*fv_btm*/
.fv_btm{
  position: relative;
}
.fv_btm a{
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
}


/*cta*/
.cta{
  background: #eeece6;
}
.cta_wrap{
  padding: 1% 0 7%;
}
.cta_wrap a{
  margin: 4% auto;
}
.cv_btn{
  display: block;
  width: 661px;
  margin: auto;
  transition: .2s;
}
.cv_btn_studio{
  display: block;
  width: 649px;
  margin: auto;
  transition: .2s;
}
.cv_btn:hover,
.cv_btn_studio:hover{
  opacity: .7;
}
#area02 .cv_btn{
  margin: 13% auto 3%;
}
.pulse {
  animation: pulseEffect 1s ease-in-out infinite;
}
@keyframes pulseEffect {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@media screen and (max-width:750px){
  .cv_btn{
    width: calc((661/750)*100vw);
  }
  .cv_btn_studio{
    width: calc((649/750)*100vw);
  }
}

/*cta_short*/
.cta_short{
  padding-top: 11%;
}
.cta_short .cta_wrap{
  margin-top: 1%;
}



/*nav*/
#nav{ background: #fff; padding: 5% 0;}
#nav ul{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin: -10px 0 -10px -10px;}
#nav ul li{ width: calc(33.33% - 20px); margin: 10px;}
#nav ul li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px;
  border: 3px solid #b8e1f1;
  border-radius: 20px;
  position: relative;
  transition: 0.3s;
  color: #32b2d5;
}
#nav ul li a strong{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.5rem; line-height: 1.15em; height: 2.66em; margin-bottom: 0.66em;}
#nav ul li a::after{
  content: "";
  display: block;
  background: url("../images/icon_arrow_down.png") no-repeat;
  background-size: contain;
  width: 25px;
  height: 15px;
  position: absolute;
  bottom: 13%;
  transition: 0.3s;
}
#nav ul li a:hover::after{
  background-image: url("../images/icon_arrow_down_white.png");
}
#nav ul li a:hover{ background: #32b2d5; color: #fff; border-color: #32b2d5;}
#nav ul li a:hover i{ color: #fff;}
@media screen and (max-width:750px){
#nav ul{ width: calc(100% + ((20/750)*100vw)); margin: calc((-10/750)*100vw) 0 calc((-10/750)*100vw) calc((-10/750)*100vw);}
#nav ul li{ width: calc(33.33% - ((20/750)*100vw)); margin: calc((10/750)*100vw);}
#nav ul li a{ height: calc((140/750)*100vw); border-radius: calc((20/750)*100vw); border-width: 2px;}
#nav ul li a::after{
  width: calc((25/750)*100vw);
  height: calc((15/750)*100vw);
}
}



/*area*/
.area{ background: #f4fcff; padding: 60px 0 90px;}
.area_top h2{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px;}
.area_top h2 span{ font-size: 2.3rem; line-height: 1em; color: #70c9e2; margin-bottom: 0.125em;}
.area_top h2 strong{ font-size: 3rem; line-height: 1em;}
.area_top h3{ display: flex; align-items: center; justify-content: center; margin: 0 auto 50px; background: #70c9e2; color: #fff; width: 540px; height: 80px; padding: 0.25em; border-radius: 12px; font-size: 2.25rem; line-height: 1em;}
.area_top h3:before{ content: ""; width: 30px; height: 45px; background: url("../images/area_ico.png") center center no-repeat; background-size: 100%; margin-right: 20px;}
.area_top p.lead{ text-align: center; font-size: 1.5rem; letter-spacing: 0.05em; color: #232323; font-weight: 600;}
.area_top p.lead sup{ font-size: 0.8rem; vertical-align: super;}
.area_top p.att{ font-size: 1.2rem; text-align: center; font-weight: 600; margin-bottom: 6%;}
.area_top figure.map{ margin-top: 60px;}
@media screen and (max-width:750px){
.area{ padding: calc((60/750)*100vw) 0 calc((90/750)*100vw);}
.area_top h2{ margin-bottom: calc((40/750)*100vw);}
.area_top h3{ margin: 0 auto calc((50/750)*100vw); width: calc((540/750)*100vw); height: calc((80/750)*100vw)}
.area_top h3:before{ width: calc((30/750)*100vw); height: calc((45/750)*100vw); margin-right: calc((20/750)*100vw);}
.area_top figure.map{ margin-top: calc((60/750)*100vw);}
}


.area_first{
  background: #fafafa;
}
.area_first .area_top h2{
  margin: 0 0 8%;
}
.hidden {
  display: none;
}
.btn_more_wrap{
  position: relative;
}
.btn_more_wrap::before{
  content: "";
  display: block;
  background: url("../images/icon_more.png") no-repeat;
  background-size: contain;
  width: 11px;
  height: 55px;
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  margin: auto;
}
.btn_more{
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  border: 3px solid #6fc9e2;
  border-radius: 47px;
  background: #fff;
  font-size: 1.65rem;
  color: #32b2d5;
  text-align: center;
  width: 363px;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: .2s;
  margin: auto;
  margin-top: 15%;
}
.btn_more:hover{
  background: #32b2d5;
  color: #fff;
}
.btn_more::after{
  content: "";
  display: block;
  background: url("../images/icon_arrow_down.png") no-repeat;
  background-size: contain;
  width: 25px;
  height: 15px;
  position: absolute;
  right: 12%;
  top: 46%;
  transition: .2s;
}
.btn_more:hover::after{
  background-image: url("../images/icon_arrow_down_white.png");
}
@media screen and (max-width:750px){
  .area_first .area_top h2 img{
    width: calc((278/750)*100vw);
  }
  .btn_more_wrap::before{
    width: calc((11/750)*100vw);
    height: calc((55/750)*100vw);
    top: calc((-80/750)*100vw);
  }
  .btn_more{
    border-width: 2px;
    border-radius: calc((47/750)*100vw);
    background: #fff;
    width: calc((363/750)*100vw);
    height: calc((95/750)*100vw);
  }
  .btn_more::after{
    width: calc((25/750)*100vw);
    height: calc((15/750)*100vw);
  }
}



/*studio*/
.studio .StudioArea{ margin-top: 30px;}
.studio .StudioArea h3{ font-size: 1.7rem; line-height: 1em; background: #fff; text-align: left; color: #32b2d5; padding: 40px 30px; position: relative; cursor: pointer; transition: 0.3s;}
.studio .StudioArea h3 span.StudioArea__icon{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer;}
.studio .StudioArea h3 span.StudioArea__icon:before{ content: ""; width: 31px; height: 5px; background: #32b2d5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.studio .StudioArea h3 span.StudioArea__icon:after{ content: ""; width: 31px; height: 5px; background: #32b2d5; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transition: 0.3s;}
.studio .StudioArea h3.active span.StudioArea__icon:after{ transform: translateY(-50%) rotate(0deg); opacity: 0;}
.studio .StudioArea .StudioArea__content{ background: #fff;}
.studio .StudioArea .StudioArea__content h4{ font-size: 1.4rem; line-height: 1em; padding: 30px; margin: 0 30px; color: #32b2d5; border-top: 1px solid #dbdcdc; position: relative; cursor: pointer;}
.studio .StudioArea .StudioArea__content .StudioCity:first-child h4{ border-top: none;}
.studio .StudioArea .StudioArea__content h4 span.StudioCity__icon{ display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer;}
.studio .StudioArea .StudioArea__content h4 span.StudioCity__icon:before{ content: ""; width: 31px; height: 5px; background: #32b2d5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.studio .StudioArea .StudioArea__content h4 span.StudioCity__icon:after{ content: ""; width: 31px; height: 5px; background: #32b2d5; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transition: 0.3s;}
.studio .StudioArea .StudioArea__content h4.active span.StudioCity__icon:after{ transform: translateY(-50%) rotate(0deg); opacity: 0;}
.studio .StudioArea .StudioArea__content .StudioShop{ padding: 30px; margin: 0 30px; border-top: 1px solid #ccc;}
.studio .StudioArea .StudioArea__content h5{ font-size: 1.4rem; color: #32b2d5; margin-bottom: 0.25em;}
.studio .StudioArea .StudioArea__content p{ font-size: 1.4rem; margin-bottom: 0.5em; color: #232323;}
.studio .StudioArea .StudioArea__content .StudioShop__button a{ display: flex; align-items: center; justify-content: center; width: 100%; background: #f37483; color: #fff; font-size: 1.5rem; line-height: 1em; padding: 0.6em; transition: 0.3s; letter-spacing: 0.2em; border-radius: 33px; box-shadow: 5px 0 #dd2358;}
.studio .StudioArea .StudioArea__content .StudioShop__button a:hover{ opacity: 0.7;}
.studio .StudioArea .StudioArea__content,
.studio .StudioArea .StudioArea__content .StudioCity__content{ display: none;}
/*
.studio .StudioArea .StudioArea__content.active,
.studio .StudioArea .StudioArea__content .StudioCity__content.active{ display: block;}
*/
@media screen and (max-width:750px){
.studio .StudioArea{ margin-top: calc((30/750)*100vw);}
.studio .StudioArea h3{ padding: calc((40/750)*100vw) calc((30/750)*100vw);}
.studio .StudioArea h3 span.StudioArea__icon{ width: calc((30/750)*100vw); height: calc((30/750)*100vw); right: calc((30/750)*100vw);}
.studio .StudioArea h3 span.StudioArea__icon:before{ width: calc((31/750)*100vw); height: calc((5/750)*100vw);}
.studio .StudioArea h3 span.StudioArea__icon:after{ width: calc((31/750)*100vw); height: calc((5/750)*100vw);}
.studio .StudioArea .StudioArea__content h4{ padding: calc((30/750)*100vw); margin: 0 calc((30/750)*100vw);}
.studio .StudioArea .StudioArea__content h4 span.StudioCity__icon{ width: calc((20/750)*100vw); height: calc((20/750)*100vw); right: calc((20/750)*100vw);}
.studio .StudioArea .StudioArea__content h4 span.StudioCity__icon:before{ width: calc((31/750)*100vw); height: calc((5/750)*100vw);}
.studio .StudioArea .StudioArea__content h4 span.StudioCity__icon:after{ width: calc((31/750)*100vw); height: calc((5/750)*100vw);}
.studio .StudioArea .StudioArea__content .StudioShop{ padding: calc((30/750)*100vw); margin: 0 calc((30/750)*100vw);}
  .studio .StudioArea .StudioArea__content .StudioShop__button a{border-radius: calc((33/750)*100vw); box-shadow: calc((5/750)*100vw) 0 #dd2358;}
}



/*qa*/
#qa{ background: #f8f7f1; padding: 0 0 60px;}
#qa dl{ margin-top: 10px;}
#qa dl dt{ background: #fff; padding: 40px 90px; border-radius: 20px 20px 0 0; border-bottom: 2px solid #6fc8e2; position: relative; cursor: pointer;}
#qa dl dt p{ text-align: justify; font-size: 1.25rem; line-height: 1.5em; margin-bottom: 0; font-family: "游ゴシック体", YuGothic, "游ゴシック", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; font-weight:bold;}
#qa dl dt span.ico{ width: 41px; position: absolute; left: 25px; top: 35px;}
#qa dl dt i{ font-size: 1.25rem; color: #6fc8e2; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); transition: 0.3s;}
#qa dl dt.active i{ transform: translateY(-50%) rotateX(-180deg);}
#qa dl dd{ display: none; background: #fff; padding: 40px 40px 40px 90px; border-radius: 0 0 20px 20px; position: relative;}
#qa dl dd p{ text-align: justify; font-size: 1.2rem; line-height: 1.5em; margin-bottom: 0;}
#qa dl dd span.ico{ width: 41px; position: absolute; left: 25px; top: 35px;}
#qa dl dd p strong.blue{ color: #70c9e2;}
#qa dl dd p.att{ font-size: 0.85rem; line-height: 1.5em; padding-left: 1em; position: relative;}
#qa dl dd p.att:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:750px){
#qa{ padding: 0 0 calc((60/750)*100vw);}
#qa dl{ margin-top: calc((10/750)*100vw);}
#qa dl dt{ padding: calc((40/750)*100vw) calc((90/750)*100vw); border-radius: calc((20/750)*100vw) calc((20/750)*100vw) 0 0;}
#qa dl dt span.ico{ width: calc((41/750)*100vw); left: calc((25/750)*100vw); top: calc((35/750)*100vw);}
#qa dl dt i{ right: calc((25/750)*100vw);}
#qa dl dd{ padding: calc((40/750)*100vw) calc((40/750)*100vw) calc((40/750)*100vw) calc((90/750)*100vw); border-radius: 0 0 calc((20/750)*100vw) calc((20/750)*100vw);}
#qa dl dd span.ico{ width: calc((41/750)*100vw); left: calc((25/750)*100vw); top: calc((35/750)*100vw);}
}



/*slick*/
#information ul{
  margin: 6% 0 12%;
}
#review{
  margin-top: 3%;
  background: #f6f4f4;
  padding-bottom: 18%;
}
#review ul{
  margin: 6% 0 0;
}
#review ul .slick-slide{
  padding: 10px 0;
}
#review ul .slick-slide img{
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.slick-slider{
  width: 100%;
  overflow: hidden;
}
.slick-slide{
  margin: 0 10px;
}
.slick-slide img{
  border-radius: 20px;
}
@media screen and (max-width:750px){
  #review ul .slick-slide{
    padding: calc((10/750)*100vw) 0;
  }
  #review ul .slick-slide img{
    box-shadow: 0 0 calc((10/750)*100vw) rgba(0, 0, 0, 0.2);
  }
  .slick-slide{
    margin: 0 calc((10/750)*100vw);
  }
  .slick-slide img{
    border-radius: calc((20/750)*100vw);
    width: calc((609/750)*100vw);
  }
}



/*state*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.1s both;
}
.scroll-infinity__list > li {
  width: calc(100vw / 1.48);
  max-width: 610px;
  margin: 0 12px;
}
.scroll-infinity__list > li > img {
  width: 100%;
  border-radius: 20px;
}
@media screen and (max-width:750px){
  .scroll-infinity__list > li {
    margin: 0 calc((12/750)*100vw);
  }
  .scroll-infinity__list > li > img {
    border-radius: calc((20/750)*100vw);
  }
}



/*fixed_btn*/
.fixed_btn{
  display: none;
  position: fixed;
  bottom: 1%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}