@charset "UTF-8";
.pc {
  display: block!important
}

.sp {
  display: none!important
}

html {
  scroll-behavior: smooth
}

/*----------------------------------------
general
----------------------------------------*/
html {
	scroll-behavior: smooth;
}
body {
	background: #fff;
}

@media screen and (min-width: 600px) {
	.wrapper {font-size: 16px;}
}
.wrapper img {
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	display: block;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}
.wrapper a {
	display: block;
}

.wrapper ul,
.wrapper dl,
.wrapper ol{
  list-style: none;
}
.wrapper ul li,
.wrapper dl dt,
.wrapper dl dd,
.wrapper ol li{
	line-height: 0;
	font-size: 0;
}

.wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.wrapper *{
  position: relative;
  box-sizing: border-box;
}
/*----------------------------------------
nijisanji
----------------------------------------*/

.wrapper #nijisanji .yt-wrap {
  width: calc(670/750*100%);
  padding-top: 52.5%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);

}
.wrapper #nijisanji .yt-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  position: absolute;
  top:0;
  left:0;
}
/*----------------------------------------
fv
----------------------------------------*/
.wrapper .fv h1{

}
.wrapper .fv video{
  width: 100%;
}
.wrapper .fv p{
  position: relative;
  z-index: 2;
  margin-top: -1px;
}
/*----------------------------------------
doctor
----------------------------------------*/
.wrapper .doctor h3{
  position: absolute;
  width: calc(722/750*100%);
  top: 42%;
  left: 5%;
}

/*----------------------------------------
method
----------------------------------------*/
.wrapper .method {
  background-color: #F8F8F8;
}
.wrapper .method ol {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
.wrapper .method .method-anime01{
  width: calc(237/750*100%);
  top: 4%;
  left: 34%;

}
.wrapper .method .method-anime02{
  width: calc(238/750*100%);
  top: -10%;
  left: 63%;
}
.wrapper .method .method-anime03{
  width: calc(363/750*100%);
  top: -53%;
  left: 27%;
}

.wrapper .method .method-anime04{
  width: calc(277/750*100%);
  top: -128.5%;
  left: 3%;
}

.wrapper .method ul{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
.wrapper .method .method-anime05{
  width: calc(350/750*100%);
  top: 5%;
  left: 28%;

  z-index:1;
}

.wrapper .method .method-anime06{
  width: calc(350/750*100%);
  top: -5%;
  left: 50%;
  z-index:2;
}

.wrapper .method .method-anime07{
  width: calc(350/750*100%);
  top: -53%;
  left: 7%;
  z-index:3;
}


/*----------------------------------------
program
----------------------------------------*/
.wrapper .program {
}

.wrapper .program h2{
  position: absolute;
  width: calc(699/750*100%);
  top: 10%;
  left: calc(25/750*100%);


}

.wrapper .program .p-box .grade-animeList {
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .program .p-box .grade-animeList .pgogram-anime01 {
  width: calc(345/750*100%);
  top: -51%;
  left: 5%;
}

.wrapper .program .p-box .grade-animeList .pgogram-anime02 {
  width: calc(345/750*100%);
  top: -114%;
  left: 27%;
}
.wrapper .program .p-box .grade-animeList .pgogram-anime03 {
  width: calc(345/750*100%);
  top: -187%;
  left: 50%;
}

.wrapper .program ul{
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}
.wrapper .program .p-box  .program-anime04 {
  width: calc(220/750*100%);
  left:5%;
  top:0;
  z-index:2;
}
.wrapper .program .p-box  .program-anime05 {
  width: calc(220/750*100%);
  left:5%;
  top:2.5%;
  z-index:2;
}
.wrapper .program .p-box  .program-anime06 {
  width: calc(220/750*100%);
  left:5%;
  top:4.5%;
  z-index:2;
}
.wrapper .program .p-box  .program-anime07 {
  width: calc(699/750*100%);
  top:11%;
  left:4%;
  z-index:2;
}
.wrapper .program .p-box  .program-anime-front {
  width: calc(2/750*100%);
  top:-70.1%;
  left:19.5%;
}
/*----------------------------------------
method
----------------------------------------*/
.wrapper .exclusive {

}
.wrapper .exclusive .p-box {
}
.wrapper .exclusive .p-box .exclusive-korea{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .exclusive .p-box .exclusive-korea .exclusive-anime01 {
  width: calc(330/750*100%);
  top: -68%;
  left: 52%;
}
.wrapper .exclusive .p-box .exclusive-korea .exclusive-anime02 {
  width: calc(330/750*100%);
  top: -82.5%;
  left: 3.5%;
}
.wrapper .exclusive .p-box .exclusive-korea .exclusive-anime03 {
  width: calc(330/750*100%);
  top:-98.5%;
  left:52%;
  z-index: 2;
}
.wrapper .exclusive .p-box .exclusive-japan {
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}
.wrapper .exclusive .p-box .exclusive-japan .exclusive-anime04 {
  width: calc(330/750*100%);
  top: 8%;
  left: 52%;
}
.wrapper .exclusive .p-box .exclusive-japan .exclusive-anime05 {
  width: calc(330/750*100%);
  top: -11.5%;
  left: 3.5%;
}
.wrapper .exclusive .p-box .exclusive-japan .exclusive-anime06 {
  width: calc(330/750*100%);
  top: -23.5%;
  left: 52%;
}
.wrapper .exclusive .p-box .exclusive-japan .exclusive-anime07 {
  width: calc(330/750*100%);
  top: -42.5%;
  left: 3.5%;
}
.wrapper .exclusive .p-box .exclusive-anime08 {
  position: absolute;
  width: calc(598/750*100%);
  top: 34%;
  left: calc(76/750*100%);
}

.wrapper .exclusive .exclusive-slider li div{
  padding:0 7%;
}

.wrapper .sns .sns-bg{
  background-color: #f5f3f0;
}
/*----------------------------------------
sns
----------------------------------------*/
.wrapper .sns {

}
.wrapper .sns .sns-animeWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: calc(690/750*100%);
  position: absolute;
  top:-5%;
  left:4%;
  z-index:2;
}
.wrapper .sns .sns-animeWrap li{
  width: calc(346/690*100%);
}
.wrapper .sns .sns-animeWrap li:nth-of-type(2){
  width: calc(304/690*100%);
  margin-top: 0.5%;
}

.wrapper .sns .sns-sliderWrap {
}
.wrapper .sns .sns-sliderWrap .sns-slider {
}
.wrapper .sns .sns-sliderWrap .sns-slider .slick-slide {


}
.wrapper .sns .sns-sliderWrap .sns-slider .slick-slide div {
  padding:0 6%;
  margin:5% 0 10%;
}

.wrapper .sns .sns-sliderWrap .sns-slider .slick-slide div img {
  box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.15);
}


.wrapper .sns .p-box>p{
  z-index:2;
}
.wrapper .sns video{
  position: absolute;
  width: calc(320/750*100%);
  top: 7%;
  left: 7%;
}



/*----------------------------------------
media
----------------------------------------*/
.wrapper .media .media-bg{
  background-color: #FDFEFD;
}


/*----------------------------------------
offer
----------------------------------------*/
.wrapper .offer {
  background-color: #D5B07D;
}
.wrapper .offer .fade-box {
}
.wrapper .offer {
}
.wrapper .offer .btn-offer {
  position: absolute;
  width: calc(708/750*100%);
  bottom: 7%;
  left: calc(21/750*100%);
  z-index:2;
  animation:purun 2s infinite;
}

@keyframes purun{
  from,to{
    transform:scale(1, 1)
  }
  5%{
    transform:scale(.85, 1.15)
  }
  10%{
    transform:scale(1.1, .9)
  }15%{
    transform:scale(.9, 1.1)
  }20%{
    transform: scale(1,1)
  }

}
.wrapper .off-anime-list{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .off-anime-list .off-anime01 {
  position:relative;
  z-index:2;
  width: calc(200/750*100%);
  bottom: 21%;
  left: 7.5%;
}
.wrapper .off-anime-list .off-anime02 {
  position:relative;
  z-index:2;
  width: calc(200/750*100%);
  bottom: 55%;
  left: 36.5%;
}
.wrapper .off-anime-list .off-anime03 {
  position:relative;
  z-index:2;
  width: calc(200/750*100%);
  bottom: 101%;
  left: 66%;
}
/*----------------------------------------
trouble
----------------------------------------*/
.wrapper .trouble {
}

.wrapper .trouble  .trouble-anime00 {
  position: absolute;
  width: calc(270/750*100%);
  top: -2%;
  left: calc(240/750*100%);

}
.wrapper .trouble .fade-box h3{
  position: absolute;
  width: calc(535/750*100%);
  top: 10%;
  left: calc(107.5/750*100%);

}
.wrapper .trouble ul{
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}
.wrapper .trouble   .trouble-anime01 {
  position: absolute;
  width: calc(690/750*100%);
  top: 30%;
  left: calc(30/750*100%);

}
.wrapper .trouble .trouble-anime02 {
  position: absolute;
  width: calc(690/750*100%);
  top: 50.5%;
  left: calc(30/750*100%);

}
.wrapper .trouble .trouble-anime03 {
  position: absolute;
  width: calc(690/750*100%);
  top: 70%;
  left: calc(30/750*100%);

}
.wrapper .trouble  .p-box {
}

.wrapper .trouble  .p-box .trouble-anime04 {
  position: absolute;
  width: calc(560/750*100%);
  top: -11%;
  left: calc(95/750*100%);
}
/*----------------------------------------
point01
----------------------------------------*/
.wrapper .point01 {
}

.wrapper .point01 .point-anime01 {
  position: absolute;
  width: calc(515/750*100%);
  top:38%;
  left: calc(117/750*100%);

}
.wrapper .point01 .point-anime02 {
  position: absolute;
  width: calc(181/750*100%);
  z-index: 2;
  left:7%;
  top:9.5%;
}
.wrapper .point01 .point-anime03 {
  position: absolute;
  width: calc(120/750*100%);
  z-index: 2;
  left:76%;
  top:9.8%;
}

.wrapper .point01 .off-anime-list {
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}
.wrapper .point01 .off-anime-list .off-anime01 {
  bottom: -85%;
    left: 5.5%;
}
.wrapper .point01 .off-anime-list .off-anime02 {
  bottom:-59.5%;
}
.wrapper .point01 .off-anime-list .off-anime03 {
  bottom:-24.5%;
  left: 68%;
}

/*----------------------------------------
point02
----------------------------------------*/

.wrapper  .point02 .point02-anime01 {
  position: absolute;
  width: calc(730/750*100%);
  top:61%;
  left:calc(10/750*100%);

}
.wrapper .point02 .point02-anime-front01 {
  position: absolute;
  z-index:3;
  width: calc(654/750*100%);
  left:calc(48/750*100%);
  top:0%;
}
.wrapper .point02 .point02-anime-front01 .point02-anime02 {
  position: absolute;
  z-index:3;
  width: calc(474/654*100%);
  left: 29%;
  bottom: -7%;
}
.wrapper .point02 .point02-anime03 {
  position: absolute;
  z-index:3;
  width: calc(430/750*100%);
  top:43%;
  left:calc(160/750*100%);
}
.wrapper .point02 .point02-slideWrap {
}
.wrapper .point02 .point02-slideWrap .slider-icon {
  position: absolute;
  width: calc(188/750*100%);
  z-index: 2;
  top:38%;
  left:calc(281/750*100%);

}
.wrapper .point02 .point02-slideWrap {
  background-image: url(../img/point02-03.jpg);
  background-size: cover;
  padding-bottom: 10%;
}
.wrapper .point02 .point02-slideWrap .point02-slider li div{
  width: calc(690/750*100%);
  margin: 0 auto;
}
.wrapper .point02 .point02-slideWrap .point02-slider   .point02-gif01 {
  position: absolute;
  width: calc(590/690*100%);
  top:47%;
  left:calc(40/690*100%);
}
.wrapper .point02 .point02-slideWrap .point02-slider   .point02-gif02 {
  position: absolute;
  width: calc(590/690*100%);
  top:47%;
  left:calc(40/690*100%);
}
.wrapper .point02 .point02-slideWrap .point02-slider   .point02-gif03 {
  position: absolute;
  width: calc(590/690*100%);
  top:47%;
  left:calc(40/690*100%);
}
.slick-dotted.slick-slider{
  margin-bottom: 0;
}
.wrapper .point02 .point02-slideWrap .slick-dots{
  position: absolute;
  bottom:-3%;
}

.wrapper .point02 .point02-slideWrap .slick-dots:before{
  
}
.wrapper .point02 .point02-slideWrap li button:before{
  font-size: min(calc(20/750*100vw),20px);
}
.wrapper .point02 .point02-slideWrap .slick-dots li{
  margin:0 2%;
}

.wrapper .point02 .point02-slideWrap li button:before{
  opacity: 1;
  color: #c5c5c5;
}
.wrapper .point02 .point02-slideWrap li.slick-active button:before{
  opacity: 1;
  color: #cfb185;
}

/*----------------------------------------
grade
----------------------------------------*/

.wrapper .grade {
}

.wrapper .grade .grade-animeList {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
.wrapper .grade .grade-animeList .grade-anime01 {
  width:calc(220/750*100%);
  top:53%;
  left:4%;
}
.wrapper .grade .grade-animeList .grade-anime02 {
  width:calc(220/750*100%);
  top:12%;
  left:35.5%;
}
.wrapper .grade .grade-animeList .grade-anime03 {
  width:calc(220/750*100%);
  top:-30%;
  left:67%;
}
.wrapper .grade .grade-slideWrap {
  background-image: url(../img/grade-05.png);
  background-size: cover;
}

.wrapper .grade .grade-anime04 {
  position: absolute;
  width: calc(690/750*100%);
  left:calc(30/750*100%);
  top:16%;
  z-index: 2;
}

.wrapper .grade .grade-animeList {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
.wrapper .grade .grade-animeList .grade-anime05 {
  width: calc(260/750*100%);
  top: 5.9%;
  left: 4%;
}
.wrapper .grade .grade-animeList .grade-anime06 {
  width: calc(260/750*100%);
  top: 14.5%;
  left: 4%;
}
.wrapper .grade .grade-animeList .grade-anime07 {
  width: calc(260/750*100%);
  top: -32%;
  left: 61%;
}
.wrapper .grade .grade-animeList .grade-anime08 {
  width: calc(320/750*100%);
  top: -15%;
  left: 53.2%;
}

/*----------------------------------------
remed
----------------------------------------*/

.wrapper .remed {
}

.wrapper .remed .remed-anime01 {
  position: absolute;
  z-index:2;
  top:2%;
  left:calc(44/750*100%);
  width: calc(662/750*100%);
  animation-timing-function: linear;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  animation-name: rotate;
}
@keyframes rotate {
  0% {
    transform:rotate(0deg);
  }
  12.5% {
    transform:rotate(90deg);
  }
  25% {
    transform:rotate(180deg);
  }
  37.5% {
    transform:rotate(270deg);
  }
  50% {
    transform:rotate(360deg);
  }
  62.5% {
    transform:rotate(450deg);
  }
  75% {
    transform:rotate(540deg);
  }
  87.5% {
    transform:rotate(630deg);
  }
  100% {
    transform:rotate(720deg);
  }
}

/*----------------------------------------
day1
----------------------------------------*/

.wrapper .day1  .day1-anime01 {
  position: absolute;
  z-index:2;
  width: calc(590/750*100%);
  top:6%;
  left:calc(80/750*100%);
}
/*----------------------------------------
day2
----------------------------------------*/

.wrapper .day2 .day2-anime01 {
  position: absolute;
  z-index:2;
  width: calc(590/750*100%);
  top:4%;
  left:calc(80/750*100%);
}

/*----------------------------------------
day3
----------------------------------------*/

.wrapper .day3 .day3-anime01 {
  position: absolute;
  z-index:2;
  width: calc(590/750*100%);
  top:4%;
  left:calc(80/750*100%);
}

/*----------------------------------------
free
----------------------------------------*/

.wrapper .free .free-animeList {
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}
.wrapper .free .free-animeList .free-anime01 {
  width: calc(212/750*100%);
  top: 1%;
  left: 35%;
}
.wrapper .free .free-animeList .free-anime02 {
  width: calc(212/750*100%);
  top: 1%;
  left: 70%;
}
.wrapper .free .free-animeList .free-anime03 {
  width: calc(212/750*100%);
  top:10%;
  left:62%;
}
.wrapper .free .free-animeList .free-anime04 {
  width: calc(212/750*100%);
  top: -11%;
  left: 15%;
}
.wrapper .free .free-animeList .free-anime05 {
  width: calc(212/750*100%);
  top: -62%;
  left: 3%;
}
/*----------------------------------------
method
----------------------------------------*/

/*----------------------------------------
use
----------------------------------------*/
.wrapper .use {
}
.wrapper .use {
}
.wrapper .use .use-anime01 {
  position: absolute;
  z-index:2;
  width: calc(213/750*100%);
  left: 4%;
  top: 49.5%;
}

.wrapper .use .use-anime02 {
  position: absolute;
  z-index:2;
  width: calc(492/750*100%);
  right: 0;
  top: 30.5%;
}
.wrapper .use .use-anime03 {
  position: absolute;
  z-index:2;
  width: calc(220/750*100%);
  right: 4%;
  top: 30.5%;
}
.wrapper .use .use-anime04 {
  position: absolute;
  z-index:2;
  width: calc(526/750*100%);
  left: 0;
  top: 36%;
}
.wrapper .use .use-anime05 {
  position: absolute;
  z-index:2;
  width: calc(258/750*100%);
  left: 2%;
  top: 28.5%;
}
.wrapper .use .use-anime06 {
  position: absolute;
  z-index:2;
  width: calc(492/750*100%);
  right: 0;
  top: 36.5%;
}
.wrapper .use .fade-box {
}


/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
.bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  box-sizing: border-box;
}
.bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
.bl_floatArea_inner {

  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

/* ボタン */
.bl_floatArea_btn {
  display: block;
}
.bl_floatArea_inner{
  max-width: 750px;
  margin: 0 auto;
}
.bl_floatArea_btn img {
  width: calc(690/750*100%);
  margin: 0 auto;

  height: auto;
  vertical-align: bottom;
}

/* 背景色付き ver */
.bl_floatArea.bl_floatArea__bg {
  background-color: rgba(255, 255, 255, .5);
}
/* パディングなし ver */
.bl_floatArea.bl_floatArea__p0 .bl_floatArea_inner {
  padding: 0;
}

/* footer */

footer {
  font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ\ Ｐゴシック, MS PGothic, sans-serif;
  background: #474747;
  padding: 30px 0 10px;
  text-align: center;
}

footer ul {
  margin-bottom: 30px
}

footer ul li {
  position: relative;
  display: inline-block;
  margin-right: 30px
}

footer ul li:after {
  content: "";
  font-size: 1pc;
  color: #fff;
  position: absolute;
  right: -25px;
  top: 0
}

footer ul li:last-child {
  margin-right: 0
}

footer ul li:last-child:after {
  display: none
}

footer ul li a {
  font-size: min(calc(16/750*100vw),16px);
  color: #fff;
  text-decoration: none
}

footer .logo {
  margin-bottom: 25px
}

footer .logo img {
  width: 118px
}

footer p {
  font-size: 9pt;
  color: #fff
}