@charset "UTF-8";

/*********************

* global

*********************/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

.hidden {
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: source-han-serif-japanese, yu-mincho-pr6, source-han-sans-japanese, sans-serif, serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  overflow-x: hidden;
}

/* header */

.header {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: space-between;
  position: fixed;
  padding : 1rem;
  z-index : 100;
}

.header .logo {
  margin : 0.938rem 6.875rem 0.938rem;
  height : 7.875rem;
  transition: all 0.6s ease 0s;
}

.header .logo:hover {
  cursor: pointer;
	transform: scale(1.1, 1.1);
}

.head-right {
  display : flex;
}

.hed-line-qr {
  width : 6rem;
}

.hed-line-logo {
  width : 5rem;
}

.hed-line-wrap {
  background-color : #3dbf43;
  border-radius: 1rem;
  justify-content: center;
  width : 28.8rem;
  transition: background-color 0.5s;
}

.hed-line-wrap a {
  display: flex;
  justify-content: center;
  width : 100%;
  align-items: center;
  padding : 0.5rem 1rem 0.5rem 1rem;
  height : 100%;
}

.hed-line-wrap:hover {
  background-color : #0e776d;
  transition : 0.5s;
}


.hed-line-text {
  color : #fff;
  font-size : 2rem;
  margin-left : 1rem;
  margin-right : 1rem;
  font-weight: bold;
  font-family: source-han-sans-japanese;

}

.hed-tel {
  background-color : #fff;
  border : 0.5rem solid #45bfb0;
  display : flex;
  width : 31.2rem;
  height : 100%;
  padding : 1rem;
  flex-direction: column;
  border-radius: 1rem;
  margin-left : 1rem;
  margin-right : 10rem;
}

.hed-tel-top img {
  width : 1.5rem;
}

.hed-tel-top {
  display : flex;
  margin : 0 auto;
}

.hed-tel-text {
  font-size : 1.6rem;
  color : #45bfb0;
  text-align : center;
  font-family: source-han-sans-japanese;
  font-weight: bold;
}


.hed-tel-nom {
  font-size : 3.2rem;
  color : #45bfb0;
  text-align : center;
  font-family: source-han-sans-japanese;
  font-weight: bold;
  margin-top : -1rem;
}

.hed-tel-nom a {
  color : #45bfb0;
}

.hed-tel-nom a {
  color : #45bfb0;
}



/* top */
.top {
  position : relative;
  top : 0;
  left : 0;
}

.top .top-back {
  width : 88%;
  height: 84.7rem;
  object-fit: cover;
  font-family: 'object-fit: cover;'; 
  margin-top : 4rem;
  max-height : 82.7rem;
  margin-top : 2rem;
  position : relative;
  bottom : -1rem;
  right : -14%;
  z-index : 0;
}
.top img {
  text-align : right; 
}
.top-wrap {
  position : absolute;
  top : 14rem;
  left : 50%;
  max-width : 140rem;
  transform : translateX(-50%);
  width : 90%;
  margin : 0 auto;
}

.top-ttl {
  color : #45bfb0;
  font-size : 5rem;
  text-shadow: 0px 0px 5px #ffffff ,
0px 0px 20px #fff,
0px 0px 40px #fff,
0px 0px 60px #fff,
0px 0px 80px #fff,
0px 0px 100px #fff;
line-height: 8.6rem;
}


.top-bigttl {
  font-size : 7.6rem;
  margin-right : 1.2rem;
  margin-left: 1.2rem;
  line-height: 90%;
  position : relative;
}

.top-bef::before {
  content: "";
  width: 4.3rem;
  height: 4.6rem;
  background-image: url(../img/ttl.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : -3.2rem;
  top: 4rem;
}
.top-bigttl-day {
  font-size : 7.6rem;
}

.top-sabttl-wrap {
  margin-top : 2rem;
  margin-right : 2rem;
}

.top-sabttl {
  color : #45bfb0;
  padding : 2rem 4rem 2rem;
  background-color : #ffff00;
  font-size : 2rem;
  border-radius : 4rem;
  display: inline-block;
  text-align: left;
  font-weight : bold;
}

.top-wrap img {
  width : 46rem;
  height : auto;
}

.top-com-box {
  position : relative;
  display : flex;
  margin : 6rem 0 0 5rem;
}

.top-comItem1 {
  font-size: 1.6rem;
    background-color: #fff;
    padding: 2rem 6rem;
    text-align: center;
    border-radius: 100vh;
    /* border: #4fd1be solid 0.3rem; */
    color: #45bfb0;
    font-weight: bold;
    margin : 0 1rem 0 0;
}

.top-comItem1::before {
  content: "";
  width: 9.3rem;
  height: 8.6rem;
  background-image: url(../img/top-com1.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : -4.2rem;
  top: -3rem;
}

.top-comItem2 {
  font-size: 1.6rem;
    background-color: #fff;
    padding: 3.3rem 6rem;
    text-align: center;
    border-radius: 100vh;
    /* border: #4fd1be solid 0.3rem; */
    color: #45bfb0;
    font-weight: bold;
    margin : 0 0 0 1rem;
}

.top-comItem2::before {
  content: "";
  width: 9.3rem;
  height: 8.6rem;
  background-image: url(../img/top-com2.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : 25.8rem;
  top: -3rem;
}

.round-wrap {
  position : absolute;
  top : 10rem;
  right : 2%;
}

.raund-box {
  border-radius : 50%;
  background : linear-gradient(#eaf9ff, #00cfcc);
  width : 10rem;
  height : 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top : 1rem;
}

.round1 {
  font-size : 3rem;
  text-align : center;
  color : #ffff00;
  font-weight: bold;
}

.round2 {
  font-size : 2rem;
  text-align : center;
  color : #ffff00;
  font-weight: bold;
}


/* movie */

.movie {
  width : 100%;
  height : auto;
  background: linear-gradient(#8bd6cb 70%, #fff 30%);
  padding-top : 6rem;
  position : relative;
}

.movie-sab {
  font-size : 4rem;
  padding : 0.5rem 2rem 0.5rem 2rem;
  background-color : #ffff00;
  color : #45bfb0;
  width : 20rem;
  text-align : center;
  font-weight: bold;
  border-radius : 4rem;
  margin : 0 auto;
}

.movie-ttl-wrap img {
  position : absolute;
  height : auto;
  width : 10rem;
  top : 0;
  left : 20%;
}

.movie-ttl {
  font-size : 5.6rem;
  color : #fff;
  text-align : center;
  margin : 6rem auto;
  position : relative;
  max-width : 120rem;
}

.movie-ttl::before {
  content: "";
    width: 17rem;
    height: 10.7rem;
    background-image: url(../img/tattano.svg);
    background-repeat: no-repeat;
    position:absolute;
    z-index: 2;
    left : 10%;
    bottom:65%;
}


.movie-art {
  font-size : 2.2rem;
  color : #fff;
  text-align : center;
  margin : 6rem auto 6rem;
  position : relative;
  max-width : 120rem;
}

.movie-art::before {
  content: "";
  width: 11.7rem;
  height: 13.9rem;
  background-image: url(../img/shine1.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : 1rem;
  top: -5rem;
}

.movie-art::after {
content: "";
  width: 6.4rem;
  height: 11.3rem;
  background-image: url(../img/shine2.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  right : 3rem;
  top: -12rem;
}

.movie-check {
  font-size : 2.8rem;
  color : #45bfb0;
  padding : 1rem 4rem 1rem 4rem;
  background-color : #fff;
  border-radius : 3rem;
  width : 50rem;
  text-align : center;
  margin : 0 auto;
  font-weight : bold;
}

.movie-mov {
  width : 80%;
  max-width: 100rem;
  margin : -2rem auto;
}

.movie-movSab {
  position : relative;
  width : 100%;
  padding-top : 56.25%;
}

.movie-movSab iframe {
  position : absolute;
  width : 100%;
  height : 100%;
  top : 0;
  left : 0;
  background-color : #ccc;
}



.movie-try {
  margin : 2rem auto;
  height: 0;
  width: 0;
  border: solid 3rem transparent;
  border-top-color: #fff; 
  box-sizing: border-box;
}

/* recommend */
.reco {
  padding : 14rem 5rem 10rem;
}


.reco-ttl {
  font-size : 5.8rem;
  color : #000;
  text-align : center;
  max-width : 100rem;
  margin : 0 auto;
  position : relative;
}

.reco-ttl::before {
  content: "";
  width: 7.3rem;
  height: 10.2rem;
  background-image: url(../img/waku2.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 3;
  left: 12%;
  bottom: 0;
}

.reco-ttl::after {
  content: "";
  width: 7.3rem;
  height: 10.2rem;
  background-image: url(../img/waku1.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 3;
  right: 12%;
  bottom: 0;
}

.reco-under {
  background: linear-gradient(#fff 70%, #ffff00 30%);
}

.reco-border img {
  max-width : 140rem;
  margin : 10rem auto 3rem;  
  display: block; 
}

.reco-foot {
  font-size : 4.8rem;
  text-align : center;
  color : #000;
  margin-top : 3rem;
  font-weight: bold;
}

.reco-color {
  color : #45bfb0
}

.reco-under-dot {
  border-bottom :0.5rem #45bfb0 dashed;
}

.reco-cap {
  position : relative;
  width : 80%;
  height: 50rem;
  max-width : 140rem;
  margin : 14rem auto;
  background-image: url(../img/reco-center.svg);
  background-position :center;
  background-repeat: no-repeat;
}

.reco-back-fir {
  background : linear-gradient(#fff, #fff315);
  width : 45%;
  height : 17.3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position : absolute;
  top : 0;
  left : 20%;
}

.reco-back-sec {
  background : linear-gradient(#fff, #fff315);
  width : 45%;
  height : 17.3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position : absolute;
  top : 40%;
  left : 0;
}

.reco-back-thr {
  background : linear-gradient(#fff, #fff315);
  width : 45%;
  height : 17.3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position : absolute;
  top : 30%;
  right : 0;
}

.reco-back-for {
  background : linear-gradient(#fff, #fff315);
  width : 45%;
  height : 17.3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position : absolute;
  top : 70%;
  left : 40%;
}

.reco-back-text {
  color : #45bfb0;
  text-align : center;
  font-size : 2.5rem;
  font-weight: bold;

}

/* contents */

.contents {
  padding : 8rem 10rem 12rem;
  background-image: url(../img/line-back.jpg);
  object-fit: cover;
  background-size: cover;
}

.cnt-wrap {
    background-color : #fff;
    border-radius:  3rem;
    padding-top : 4rem;
    padding-bottom : 20rem;
    margin : 0 auto;
    position : relative;
    max-width : 140rem;
}

.cnt-ttl {
  font-size : 5.8rem;
  color : #45bfb0;
  text-align : center;
  margin-bottom : 6rem;
  text-shadow: 0px 0px 5px #ffffff ,
0px 0px 20px #fff,
0px 0px 40px #fff,
0px 0px 60px #fff,
0px 0px 80px #fff,
0px 0px 100px #fff;
}


.cnt-art {
  color : #000;
  font-size : 2.8rem;
  text-align : center;
  margin-top: 3rem;
  font-weight: bold;
}

.cnt-sabttl {
  font-size : 4.2rem;
  text-align : center;
  color : #45bfb0;
  margin-top : 3rem;
  font-weight: bold;
}

.cnt-img-wrap {
  margin : 0 auto;
}

.cnt-topimg {
  margin : 6rem auto;
  display : flex;
  justify-content: center;
}

.cnt-topimg img {
  width : 36rem;
  margin-left : 4rem;
  margin-right : 4rem;
}

.cnt-bottomimg {
  margin : 6rem auto;
  display : flex;
  justify-content: center;
}

.cnt-bottomimg img {
  width : 36rem;
  margin-left : 4rem;
  margin-right : 4rem;
}

.cnt-img-name {
  font-size : 2.8rem;
  color : #45bfb0;
  text-align : center;
  font-weight: bold;
  margin-top : 1rem;
}

.cnt-sen {
  font-size : 2.4rem;
  color : #000;
  text-align : center;
  font-weight: bold;
}

.cnt-bigsen {
  font-size : 5.4rem;
  color : #000;
  text-align : center;
  font-weight: bold;
  padding : 2rem 8rem 2rem 8rem;
  color : #45bfb0;
}

.cnt-foot-art {
  background-color : #ffff00;
  width : 80%;
  margin : 0 auto;
  padding : 3rem 3rem 1rem 3rem;
  border-radius : 10rem;
  position : absolute;
  left : 50%;
  bottom : -35.3rem;
  transform : translate(-50%, -50%);
  box-shadow: 0px 0px 5px #ffffff ,
0px 0px 20px #fff,
0px 0px 40px #fff,
0px 0px 60px #fff,
0px 0px 80px #fff,
0px 0px 100px #fff;
}


.cnt-sabfoot-can {
    position : absolute;
    bottom : -30rem;
    left : 50%;
    transform : translate(-50%, -50%);
    z-index : 10;
    width : 30%;
    
}

.cnt-foot-can {
  font-size : 6rem;
  color : #000;
  text-align : center;
  font-weight: bold;
  padding : 8rem;
  position : relative;
}

.cnt-foot-art::before {
  content: "";
  width: 45rem;
  height: 22rem;
  background-image: url(../img/con-sab-can.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : 50%;
  top: 28rem;
  transform: translate(-50%, -50%);
}

.cnt-foot-color {
  color : #45bfb0;
}


/* qr */
.qr {
  background-color : #8bd6cb;
  padding : 10rem 10rem 4rem 10rem;
}

.qr-sab-ttl {
  color : #fff;
  font-size : 3.2rem;
  font-weight: bold;
  text-align : center;
}

.qr-ttl {
  color : #fff;
  font-size : 3.8rem;
  font-weight: bold;
  text-align : center;
  position : relative;
  margin : 0 auto;
  max-width : 90rem;
}

.qr-ttl::before {
  content: "";
  width: 9.6rem;
  height: 19rem;
  background-image: url(../img/shine3.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : 0.63%;
  top: -9rem;
}

.qr-ttl::after {
content: "";
width: 5rem;
height: 16.4rem;
background-image: url(../img/shine4.svg);
background-repeat: no-repeat;
position:absolute;
z-index: 2;
right : 2%;
top: -8rem;
}

.qr-ttl-big {
  font-size : 5.5rem;
}

.qr-wrap {
  padding : 4rem;
  background-color : #fff;
  border-radius : 4rem;
  margin : 4rem auto;
  width : 70%;
  max-width : 110rem;
  position : relative;
}

.qr-wrap::before {
  content: "";
  width: 28.3rem;
  height: 21.9rem;
  background-image: url(../img/huki.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : -21rem;
  top: -3rem;
}

.qr-wrap img {
  width : 30rem;
  display : block;
  margin : 0 auto;
}

.qr-cap {
  color : #45bfb0;
  font-size : 2.4rem;
  text-align : center;
}

.qr-lineBtn {
  position : relative;
  font-size: 3.4rem;
    width: 100%;
    background-color: #3dbf43;
    border : 0.8rem #9dd5b6 double;
    padding: 3rem;
    margin: 4rem auto 0;
    text-align: center;
    max-width: 50rem;
    border-radius: 100vh;
    font-family: source-han-sans-japanese;
    font-weight: 500;
    transition: 0.2s cubic-bezier(0.27, 0.43, 0.44, 0.94);
}

.qr-lineBtn::before {
    position: absolute;
    content: "";
    width: 4.3rem;
    height: 24rem;
    background-image: url(../img/line-logo.svg);
    background-repeat: no-repeat;
    z-index: 10;
    left: 3.4rem;
    top: 3.6rem;
}

.qr-lineBtn a {
  display : flex;
  align-items : center;
  justify-content : center;
  background-repeat : no-repeat;
  background-size : 20% 100%;
  background-position : 100% 0px;
  width: 100%;
  height : auto;
  color : #fff;
}

.qr-lineBtn a:before {
  position : absolute;
  top : 45%;
  left : 88%;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 0.5rem solid #fff;
  border-right: 0.5rem solid #fff;
  transform: rotate(45deg);
  content : "";
}

.qr-lineBtn:hover {
  background-color : #0e776d;
  transition : 0.5s;
}

.qr-lineFre {
  color : #fff315;
}

/* qa */
.qa {
  padding : 6rem;
}

.qa-ttl {
  font-size : 10rem;
  color : #45bfb0;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1rem;
  margin-top: 1rem;
}

.qa-ttl-small {
  font-size : 4rem;
}

.qa-sab-ttl {
  font-size : 2rem;
  color : #45bfb0;
  text-align: center;
  margin-bottom : 8rem;
}

.qa-wrap {
  margin : 0 auto;
  max-width : 120rem;
}

.qa-que-wrap {
  display: flex;
  background-color : #eaf9f7;
  border-radius: 3rem;
  padding : 1rem;
  align-items: center;
  margin-bottom : 1rem;
}

.qa-ans-wrap {
  display: flex;
  align-items: flex-start;
  margin-bottom : 10rem;
  padding : 1rem;
}
.qa-qes {
  font-size : 2.4rem;
  color : #45bfb0;
  width : 94%;
}

.qa-ans {
  font-size : 2rem;
  padding-top: 1.4rem;
  width : 94%;
}

.qa-item {
  font-size : 3.5rem;
  font-weight: bold;
  color : #45bfb0;
  width : 6%;
  padding-left : 1rem;
}


/* message */
.mes {
  padding : 6rem 10rem 15rem 10rem;
  background-image: url(../img/message-back.jpg);
  object-fit: cover;
  background-position :center;
  background-size: cover;
}

.mes-ttl {
  font-size : 5.8rem;
  text-align: center;
  font-weight: bold;
  color : #45bfb0;
  text-shadow: 0px 0px 5px #ffffff ,
0px 0px 20px #fff,
0px 0px 40px #fff,
0px 0px 60px #fff,
0px 0px 80px #fff,
0px 0px 100px #fff;
}

.mes-sabttl {
  font-size : 2rem;
  text-align: center;
  color :#45bfb0;
  margin-bottom : 6rem;
  text-shadow: 0px 0px 5px #ffffff ,
0px 0px 20px #fff,
0px 0px 40px #fff,
0px 0px 60px #fff,
0px 0px 80px #fff,
0px 0px 100px #fff;
}

.mes-wrap {
  margin : 0 auto;
  background-color : #fff;
  border-radius: 6rem;;
  padding : 12rem 5rem 5rem 5rem;
  max-width : 140rem;
}

.mes-top {
  display: flex;
  align-items: flex-start;
}

.mes-top img {
  width : 30%;
  max-width : 43.7rem;
  object-fit: contain;
}

.mes-item-top {
  font-size : 1.8rem;
  margin-left : 6rem;
  width : 64%;
  letter-spacing: 0.5rem;
}

.mes-bot {
  display: flex;
  margin-top : 6rem;
  justify-content: space-between;

}

.mes-item-bot {
  font-size : 1.8rem;
  margin-right : 6rem;
  width : 70%;
  letter-spacing: 0.5rem;
}

.mes-bot img {
  width : 24.8rem;
  height : auto;
  object-fit: contain;
}

.mes-point {
  color : #45bfb0;
  font-weight: bold;
}

/* voice */
.voice {
  padding : 15rem 5rem 5rem 5rem;
  background-image: url(../img/voice-back.jpg);
  object-fit: cover;
  background-position: center;
  background-size: contain;
}

.voice img {
    width : 40rem;
    margin : 0 auto;
    display : block;
}

.voi-ttl {
  font-size : 8.2rem;
  text-align: center;
  color: #45bfb0;
  font-weight: bold;
}

.voi-sabttl {
  font-size : 2.8rem;
  text-align: center;
  color: #000;
  font-weight: bold;
  margin-top : 2rem;
  margin-bottom : 9.7rem;
}

.voi-wrap-course {
  background-color : #fff;
  border-radius: 6rem;
  padding : 2rem 5rem 5rem 5rem;
  max-width : 140rem;
  margin : 0 auto;
}

.voi-art-ttl {
  color : #fff;
  font-size : 4rem;
  font-weight: bold;
  background : linear-gradient(#eaf9ff, #00cfcc);
  padding : 1rem;
  border-radius: 2rem;
  width : 26.3rem;
  text-align : center;
}

.voi-art-ttl-thr {
  color : #fff;
  font-size : 4rem;
  font-weight: bold;
  background : linear-gradient(#eaf9ff, #00cfcc);
  padding : 1rem;
  border-radius: 2rem;
  width : 73.7rem;
  text-align : center;
}

.voi-com {
  display: flex;
  margin-top : 5rem;
  margin-bottom : 3rem;
  align-items: flex-start;
}

.voi-you {
  width : 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.voi-you-name {
  font-size : 1.7rem;
  color : #000;
  font-weight: bold;
  margin-top: 2rem;
  text-align : center;
}

.voi-you-text {
  width : 70%;
  margin-left : 8rem;
  padding : 4rem;
  border : 0.5rem solid #45bfb0;
  border-radius: 2rem;
  letter-spacing: 0.5rem;
}

.voi-text {
  font-size : 1.8rem;
  color : #000;
  font-weight: bold;
}

.voi-you img {
  width : 13.8rem;
  height : auto;
}

.voi-wrap-course-sec {
  background-color : #fff;
  border-radius: 6rem;
  padding : 2rem 5rem 5rem 5rem;
  max-width : 140rem;
  margin : 10rem auto;
}

.voi-point {
  color : #45bfb0;
  background: linear-gradient(#fff 70%, #ffff00 30%);
}

.voi-ser-name {
  font-size : 3.6rem;
  color : #7ac4bf;
  font-weight: bold;
  margin-bottom : 2rem;
}

.voi-text-ttl {
  font-size : 2.4rem;
  color : #000;
  font-weight: bold;
  margin-bottom : 2rem;
}

.voi-text-ttl-back {
  background: linear-gradient(#fff 70%, #ffff00 30%);
}


/* pre */
.pre-ttl {
  position : relative;
  font-size : 3rem;
  padding : 8rem 0;
  text-align : center;
  font-weight : bold;
}

.pre-ttl::before {
  position : absolute;
  top : 120%;
  left : 50%;
  width: 4rem;
  height: 4rem;
  border: solid 6rem transparent;
  border-top-color: #fff;
  box-sizing: border-box;
  content : "";
  transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.pre-ttlColor {
  color : #45bfb0;
}

.pre-ttlBig {
  font-size : 4rem;
  border-bottom: 0.5rem #45bfb0 dashed;
}

.pre {
  padding : 10rem 5rem;
  background-image: url(../img/line-back.jpg);
  object-fit: cover;
  background-size: cover
}

.pre-wrap {
  display : flex;
  max-width : 140rem;
  margin : 0 auto;
}

.pre-boxLeft {
  padding : 5rem;
  background-color : #fff;
  width: 94%;
  margin-right : 3%;
  border-radius : 3rem;
}

.pre-boxRight {
  padding : 5rem;
  background-color : #fff;
  width: 94%;
  margin-left : 3%;
  border-radius : 3rem;
}

.pre-txtBox {
  height : 22rem;
}

.pre-itemTtl {
  font-size : 2.2rem;
  font-weight : bold;
}

.pre-txt {
  font-size : 1.8rem;
  padding : 2rem 0;
}

.pre-list {
  position: relative;
  padding: 0 0 0 2rem;
}

.pre-list::before {
  content: '・';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 2rem;
  font-weight: 600;
  color: #666;
}

.pre-boxLeft img {
  width : 100%;
}

.pre-boxRight img {
  width : 100%;
}

.pre-try {
  margin: 2rem auto;
  height: 0;
  width: 0;
  border: solid 3rem transparent;
  border-top-color: #fff;
  box-sizing: border-box;
}

/* pre */

/* other */
.oth {
  padding : 6rem;
  background-color : #8bd6cb;
}

.oth-ttl {
  font-size : 4rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
  position : relative;
  max-width : 100rem;
  margin : 0 auto;
}

.oth-ttl::before {
  content: "";
  width: 8.9rem;
  height: 14.6rem;
  background-image: url(../img/shine3.svg);
  background-repeat: no-repeat;
  position:absolute;
  z-index: 2;
  left : 1%;
  top: -5rem;
}

.oth-ttl::after {
content: "";
width: 3.6rem;
height: 10.8rem;
background-image: url(../img/shine4.svg);
background-repeat: no-repeat;
position:absolute;
z-index: 2;
right : 1%;
top: -3rem;
}

.oth-item-wrap {
  background-color : #fff;
  margin : 4rem auto;
  padding : 6rem;
  border-radius: 8rem;
  display: flex;
  justify-content: space-around;
  max-width : 140rem;
}

.oth-item {
  font-size : 3.8rem;
  font-weight: bold;
  color: #45bfb0; 
}

.banner-wrap {
  display : flex;
  padding : 6rem 2rem 0;
  max-width: 140rem;
  margin: 0 auto;
}

.banner-left, .banner-right {
  text-align : center;
  transition: all 0.6s ease 0s;
}

.banner-left:hover {
  opacity: 0.5;
  cursor: pointer;
  transform: scale(1.05, 1.05);
}

.banner-right:hover {
  opacity: 0.5;
  cursor: pointer;
  transform: scale(1.05, 1.05);
}

.banner-left img {
  width: 90%;
  margin : 0 auto;
}

.banner-right img {
  width : 90%;
  margin : 0 auto;
}

/* contact */

.con-text {
  font-size : 3.8rem;
  color : #000;
  text-align: center;
  font-weight: bold;
  padding : 6rem;
}

.con {
  padding : 4rem 4rem 6rem;
  background-image: url(../img/contact-back.jpg);
  object-fit: cover;
  background-position: center;
}

.con-ttl {
  font-size : 4rem;
  color : #fff;
  text-align: center;
  font-weight: bold;
  margin-bottom : 2rem;
}

.con-wrap {
  margin : 0 auto;
  width : 65rem;
}
.con-cate {
  font-size : 1.6rem;
  color : #fff;
  text-align: left;
  font-weight: bold;
}

.con-name {
  font-size : 2.8rem;
  color : #fff;
  margin-left : 2%;
}

.con-name a {
  color : #fff;
}

/* footer */
.footer {
  background-color : #375b57;
  padding : 3rem 0 0.5rem;
}

.footer-policy {
  font-size : 1.6rem;
  margin-bottom : 2rem;
  text-align : center;
}

.footer-polLink {
  color : #fff;
  transition: 0.2s;
}

.footer-polLink:hover {
  opacity: 0.5;
  transition : 0.2s;
}

.footer-text {
  font-size : 1.2rem;
  text-align: center;
  color : #fff;
}

/* inline */
.inline-place {
  display: inline-block;
}

.sp-block {
  display : none;
}

/* IE */
@media all and (-ms-high-contrast:none){
  .top .top-back {
    height : auto;
    margin-top : 14rem;
  }

  .cnt-img {
    min-height : 0%;
  }

  .mes-bot img {
    height : inherit;
  }

  .qa-qes {
    margin-bottom : 0.5rem;
  }

  .qa-ans {
    margin-left : 1rem;
  }

}

/*********************

* レスポンシブ

*********************/
@media screen and (max-width: 1400px) {
  .header .logo {
    margin-left : 2rem;
  }
  .hed-tel{
      margin-right : 2rem;
  }
 
}

@media screen and (max-width: 1357px) {
  .cnt-foot-art{
      bottom : -46.3rem;
  }

  .cnt-wrap {
    padding-bottom : 25rem;
  }

  .cnt-foot-art::before {
    top : 35rem;
  }
}

@media screen and (max-width: 1265px) {
  .cnt-foot-art::before {
    top : 40rem;
  }
}


@media screen and (max-width: 1200px) {
 
  /* top */

  .round-wrap {
    position: absolute;
    top: 12rem;
    right: 2%;
    display : flex;
}

  .raund-box {
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-left : 1rem;
}

.round1 {
  font-size: 2rem;
  text-align: center;
  color: #ffff00;
}

.top-sabttl {
  font-size : 2rem;
}

/* movie */
.movie-ttl::before {
  left: 7%;
  bottom: 65%;
}
}


/* recommend */





  /* max-width:1200px */



/*--- タブレット ---*/
@media screen and (max-width: 1024px) {
  html {
    font-size: calc(100vw / 1024 * 10);
  }
  .oth-item-wrap {
    flex-direction: column;
    text-align : center;
  }

/* movie */
.movie-ttl::before {
  width: 15rem;
  height: 8.7rem;
  left: 6%;
  bottom: 65%;
}

.movie-art::before {
  width: 8.7rem;
  height: 10.9rem;
  left: 1rem;
  top: -5rem;
}

.movie-art::after {
  width: 4.4rem;
  height: 9.3rem;
  right: 3rem;
  top: -12rem;
}

/* recommend */
.reco-back-text {
  font-size : 2rem;
}

/* line */
.qr-ttl::before {
  width: 6.6rem;
  height: 16rem;
  left: 0.63%;
  top: -6rem;
}

.qr-ttl::after {
  width: 3rem;
  height: 13.4rem;
  right: 2%;
  top: -6rem;
}

.qr-wrap::before {
  width: 25.3rem;
  height: 28.9rem;
  left: -17rem;
  top: -3rem;
}

/* other */

.oth-ttl::before {
  width: 5.9rem;
  height: 11.6rem;
  left: -1%;
  top: -3rem;
}

.oth-ttl::after {
  width: 2.6rem;
  height: 9.8rem;
  right: 1%;
  top: -3rem;
}
  /* contents */
  .cnt-topimg img {
    width: 30rem;
    margin-left: 2rem;
    margin-right: 4rem;
}

.cnt-bottomimg img {
  width: 30rem;
  margin-left: 2rem;
  margin-right: 4rem;
}

  /* max-width:1024px */
}



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

  .hed-tel-text {
    font-size : 1rem;
    margin-top: 0.6rem;
}

  .hed-tel-nom {
    font-size: 2.8rem;
}

.hed-tel {
  padding : 0.5rem;
}
  /* 767 */
}

/*--- スマホ 横---*/
@media screen and (max-width: 600px) {

  .banner-wrap {
    width: 90%;
    flex-direction: column;
  }

  .banner-left img {
    width: 100%;
    margin-bottom : 3rem;
  }

  .banner-right img {
    width: 100%;
    margin-top : 3rem;
  }
    /* max-width:600px */
  }

/*--- スマホ 縦 ---*/
@media screen and (max-width: 479px) {
  html {
    font-size: calc(100vw / 320 * 10);
  }

  .sp-none {
    display : none;
  }

  /* header */
  .header {
    padding : 0;
    height : 6rem;
  }

  .header .logo {
    height : 4rem;
    margin : 1rem 2rem 1rem;
  }
  .head-right {
    display: flex;
    position: fixed;
    bottom: 0;
    width : 100%;
    left : 0;
}

.hed-line-wrap img {
  width : 4rem;
}
.hed-line-wrap {
  border-radius: 1rem 1rem 0 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height : 6rem;
}

.hed-line-qr {
  margin-top : 0;
}

.hed-line-wrap a {
  display: flex;
  width: 85%;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 1rem;
  height: 100%;
  justify-content: space-evenly;
}

.hed-line-text {
  font-size: 1.6rem;
    font-weight: bold;
    margin-left : 0.5rem;
    margin-right : 0.5rem;
    text-align : center;
    letter-spacing : 0.2rem;
    line-height : 2rem;
}

.hed-line-wrap .hed-line-logo {
  width : 4rem;
}


/* .hed-tel {
  border: 0.2rem solid #45bfb0;
  display: flex;
  width: 50%;
  padding: 0.4rem;
  margin : inherit;
  height : 6rem;
  border-radius: 0 1rem 0 0;
}

.hed-tel-top img {
  width : 0.8rem;
}

.hed-tel-text {
  font-size : 0.9rem;
  margin-left : 0.2rem;
  margin-bottom : 0.1rem;
  margin-top : 0.3rem;
}

.hed-tel-nom {
  font-size : 1.7rem;
  margin-top : 0.1rem;
} */

/* top */

.sp-block {
  display : block;
}

.top .top-back {
  width: 110%;
  height : 65%;
    object-fit: cover;
    margin-top: 4rem;
    max-height: 82.7rem;
    margin-top: 19rem;
    position: relative;
    bottom: 1rem;
    right: 3rem;
    z-index: 0;
}

.top-img {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50rem;
}

.top-wrap .ribbon {
  width: 90%;
  position: relative;
  top: -8.2rem;
  left: 50%;
  transform: translate(-50%, -50%);
}



.top-ttl {
  font-size: 1.8rem;
  margin-top : -10rem;
  text-align : left;
  text-shadow: inherit;
  line-height: 3.3rem;
  text-align : center;
}

.top-bigttl {
  font-size: 3.6rem;
  line-height: 90%;
  position: relative;
  margin : 0 0.5rem;
  text-shadow: inherit;
}

.top-bigttl-day {
  font-size: 3.6rem;
  margin-top : 1rem;
  margin-right : 0.5rem;
  margin-left : -0.4rem;
  line-height: 4.6rem;
}

.top-sabttl {
  padding: 0.4rem;
    font-size: 1.1rem;
    border-radius: 3rem;
    display: inline-block;
    text-align: left;
    margin: -1rem auto;
    width: 100%;
    text-align: center;
}

.top-sabttl-wrap {
  margin-right: 0;
}

.top-bef::before {
  content: "";
  width: 3.3rem;
  height: 2rem;
  left: 1rem;
  top: -5.8rem;
}

.top-com-box {
  width: 100%;
  margin : 17rem 0 0;
}

.top-comItem1 {
  font-size: 1rem;
    padding: 1.5rem;
    text-align: center;
    font-weight: 500;
    margin: 0 0.5rem 0 0;
    width: 50%;
    border-radius: 8rem;
}

.top-comItem1:before {
  width : 4.3rem;
  height: 5.6rem;
  left : -1.2rem;
  top : -2.8rem;;
}

.top-comItem2:before {
  width : 4.5rem;
  height: 5.6rem;
  left : 12.8rem;
  top : -2.8rem;;
}

.top-comItem2 {
  font-size: 1rem;
  padding: 1.5rem;
  text-align: center;
  color: #22b9a3;
  font-weight: 500;
  margin: 0 0 0 0.5rem;
  width: 50%;
  border-radius: 8rem;
}

.round-wrap {
  position: absolute;
    top: 9rem;
    left: 79%;
    display: flex;
    flex-direction: column;
}

.raund-box {
  width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-left: 1rem;
}

.round1 {
  font-size : 1.2rem;
}

.round2 {
  font-size : 1rem;
}

.sp-block {
  display: block;
}

/* movie */

.movie {
  position: relative;
  width: 100%;
  height: auto;
  background: linear-gradient(#8bd6cb 85%, #fff 15%);
  padding : 4rem 2rem;
}

.movie-sab {
  font-size: 2rem;
    padding: 0.5rem 1em 0.5rem;
    width: 10rem;
    border-radius: 4rem;
    margin: 0 auto;
    text-align : center;
}

.movie-ttl {
  font-size: 2.4rem;
  margin: 4rem auto;
  position: relative;
}

.movie-art {
  font-size: 1.1rem;
  margin: 4rem auto 4rem;
}

.movie-ttl::before {
  width: 10rem;
  height: 3.7rem;
  left: 12%;
  bottom: 80%;
}

.movie-art::before {
  width: 3.7rem;
  height: 5.9rem;
  left: -2rem;
  top: -6rem;
}

.movie-art::after {
  width: 2.4rem;
  height: 7.3rem;
  right: 0rem;
  top: -12rem;
}

.movie-check {
  font-size: 1.4rem;
  width: 90%;
}

.movie-try {
  margin: 1rem auto;
  height: 0;
  width: 0;
  border: solid 2rem transparent;
  border-top-color: #fff;
  box-sizing: border-box;
}

.movie-mov {
  width: 100%;
  margin: -2rem auto;
}

/* recommend */

.reco {
  padding: 4rem 2rem 4rem;
}

.reco-ttl {
  font-size: 2.4rem;
  margin: 0 auto;
  position: relative;
}

.reco-ttl::before {
  width: 2.3rem;
  height: 5.2rem;
  left: 0;
  bottom: -2rem;
}

.reco-ttl::after {
  width: 2.3rem;
  height: 5.2rem;
  right: 0;
  bottom: -2rem;
}

.reco-cap {
  width: 90%;
  height: 40rem;
  margin: 4rem auto -1rem;
  background-position: center;
  background-repeat: no-repeat;
}

.reco-back-fir {
  background: linear-gradient(#fff, #fff315);
  width: 100%;
  height: 8.3rem;
  border-radius: 50%;
  left: 0;
}

.reco-back-sec {
  background: linear-gradient(#fff, #fff315);
  width: 100%;
  height: 8.3rem;
  border-radius: 50%;
  top : 25%;
  left: 0;
}

.reco-back-thr {
  background: linear-gradient(#fff, #fff315);
  width: 100%;
  height: 8.3rem;
  border-radius: 50%;
  top : 50%;
  left: 0;
}

.reco-back-for {
  background: linear-gradient(#fff, #fff315);
  width: 100%;
  height: 8.3rem;
  border-radius: 50%;
  top : 75%;
  left: 0;
}

.reco-border img {
  margin: 2rem auto 3rem;
}

.reco-foot {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}

.reco-back-text {
  font-size: 1.2rem;
}

/* contents */
.contents {
  padding: 4rem 2rem 4rem;
}

.cnt-ttl {
  font-size: 2.4rem;;
  margin-bottom: 2rem;
}

.cnt-art {
  font-size: 1.2rem;
  margin-top: 0;
}

.cnt-sabttl {
  font-size: 1.6rem;
  margin-top: 1rem;
}

.cnt-foot-art {
  width: 90%;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 2rem;
  position: absolute;
  left: 50%;
  bottom: -20.6rem;
  transform: translate(-50%, -50%);
}

.cnt-sen {
  font-size: 1.2rem;
}

.cnt-bigsen {
  font-size: 2rem;
  padding: 0.5rem 4rem 0.5rem 4rem;
}

.cnt-topimg {
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cnt-topimg img {
  width: 80%;
  margin : 2rem auto;
  display : block;
}

.cnt-img-name {
  font-size: 1.6rem;
  margin-top: -1rem;
}

.cnt-bottomimg {
  margin: -1rem auto 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cnt-bottomimg img {
  width: 80%;
  margin : 2rem auto;
  display : block;
}

.cnt-wrap {
  padding-bottom: 12rem;
  border-radius: 2rem;
}

.cnt-foot-can {
  font-size: 2rem;
  padding: 4rem 2rem 4rem;
}

.cnt-foot-art::before {
    width: 15rem;
    height: 8rem;
    left: 50%;
    top: 15.5rem;
}

/* qr */
.qr {
  padding : 2rem;
}

.qr-ttl {
  font-size : 1.4rem;
  margin-top : 0;
}

.qr-sab-ttl {
  font-size: 2.2rem;
}

.qr-ttl-big {
  font-size: 2rem;
}

.qr-wrap img {
  width: 12rem;
}

.qr-wrap {
  width : 90%;
  margin : 2rem auto;
  padding : 1rem 1rem 2rem;;
  border-radius : 2rem;
}

.qr-cap {
  font-size : 1.2rem;
}

.qr-wrap::before {
  width: 8.3rem;
    height: 10.9rem;
    left: -3rem;
    top: 0rem;
}

.qr-ttl::before {
  width: 2.6rem;
  left: -3.37%;
  top: -1rem;
}

.qr-ttl::after {
  width: 1.5rem;
  height: 4.4rem;
  right: 0%;
  top: -1rem;
}

.qr-lineBtn {
  font-size : 1.4rem;
  padding : 1rem;
  margin : 2rem auto 0;
  width : 90%;
  border : 0.4rem #9dd5b6 double;
}

.qr-lineBtn a:before {
  top : 42%;
  left : 88%;
  width : 0.5rem;
  height : 0.5rem;
  border-top: 0.25rem solid #fff;
  border-right: 0.25rem solid #fff;
}

.qr-lineBtn::before {
  width: 1.8rem;
  height: 1.8rem;
  left: 0.8rem;
  top: 1.3rem;
}

/* qa */
.qa {
  padding : 2rem 2rem 2rem;
}

.qa-ttl {
  font-size : 3.6rem;
  letter-spacing : 0.5rem;
  margin-top : 0;
}

.qa-ttl-small {
  font-size: 2rem;
}

.qa-sab-ttl {
  font-size : 1.2rem;
  margin-bottom : 2rem;
}

.qa-que-wrap {
  padding: 1rem;
  margin-bottom: 0;
  border-radius : 1rem;
  align-items: flex-start;
}

.qa-item {
  font-size: 1.6rem;
  width: 16%;
  padding-left: 1rem;
}

.qa-qes {
    font-size: 1.2rem;
    color: #45bfb0;
}

.qa-ans {
  font-size: 1.1rem;
  padding-top: 0.6rem;
  line-height: 1.8rem;
}

.qa-ans-wrap {
  margin-bottom: 4rem;
  padding: 1rem;
}

/* message */
.mes {
  padding : 4rem 0; 
}

.mes-ttl {
  font-size: 2.4rem;
}

.mes-sabttl {
  font-size: 1.2rem;
  margin-bottom : 2rem;
}

.mes-wrap {
  border-radius: 2rem;
  padding: 2rem 0.5rem 2rem 0.5rem;
}

.mes-top {
  display: flex;
  flex-direction: column;
}

.mes-item-top {
  font-size: 1.2rem;
  margin : 0 auto;
  width: 90%;
  letter-spacing: 0.2rem;
  line-height: 2rem;
}

.mes-bot {
  display: flex;
  margin-top: 2rem;
  flex-direction: column;
}

.mes-item-bot {
  font-size: 1.2rem;
  margin : 0 auto;
  width: 90%;
  letter-spacing: 0.2rem;
  line-height: 2rem;
}

.mes-top img {
  width: 75%;
  object-fit: contain;
  margin: 0 auto 2rem;
}

.mes-bot img {
  width: 55%;
  height: auto;
  object-fit: contain;
  margin: 2rem auto;
}

/* voice */
.voice {
  padding: 4rem 2rem 2rem 2rem;
}

.voi-ttl {
  font-size: 2.4rem;
}

.voice img {
  width: 55%;
  margin-bottom : 1rem;
}

.voi-sabttl {
  font-size: 1.4rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.voi-wrap-course {
  border-radius: 2rem;
  padding: 2rem 1rem 0.2rem 1rem;
}

.voi-com {
  display: flex;
  margin-top: 2rem;
  margin-bottom: 2rem;
  align-items: center;
  flex-direction: column;
}

.voi-you-name {
  font-size: 1.2rem;
  margin-top: 1rem;
    margin-bottom: 1rem;
}

.voi-you-text {
  width: 100%;
  margin: 0 auto;
  padding: 1.2rem;
  border: 0.2rem solid #45bfb0;
  border-radius: 2rem;
  letter-spacing: 0.2rem;
  line-height: 1.8rem;
}

.voi-text {
  font-size: 1.1rem;
}

.voi-art-ttl {
  font-size: 2rem;
  padding: 1rem;
  border-radius: 2rem;
  width: 90%;
  text-align: center;
  margin : 0 auto 2rem;
}

.voi-you {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.voice img {
  width: 60%;
  margin-bottom : 0;
}

.voi-wrap-course-sec {
  border-radius: 2rem;
  padding: 2rem 1rem 0.2rem 1rem;
  margin: 4rem auto;
}

.voi-ser-name {
  font-size: 1.6rem;
  margin-bottom: 1.4rem;
}

.voi-text-ttl {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* pre */

.pre-ttl {
  font-size : 1.4rem;
  padding : 4rem 2rem;
}

.pre-ttl::before {
  position: absolute;
    top: 115%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    border: solid 4rem transparent;
    border-top-color: #fff;
    box-sizing: border-box;
    content: "";
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.pre-ttlBig {
  font-size : 1.6rem;
}

.pre {
  padding : 4rem 2rem;
}

.pre-wrap {
  flex-direction: column;
}

.pre-boxLeft {
  padding : 2rem;
  width: 100%;
  border-radius : 2rem;
  margin : 0 0 0.5rem 0;
}

.pre-boxRight {
  padding : 2rem;
  width: 100%;
  border-radius : 2rem;
  margin : 0.5rem 0 0 0 ;
}

.pre-itemTtl {
  font-size : 1.2rem;
}

.pre-txt {
  font-size : 1.1rem;
}

.pre-list {
  padding : 0 0 0 1rem;
}

.pre-list::before {
  content: '・';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
}

.pre-txtBox {
  height : auto;
}

/* pre */

/* other */
.oth {
  padding: 2rem;
}

.oth-ttl {
  font-size: 2rem;
}

.oth-ttl::before {
  width: 2.5rem;
  height: 6.6rem;
  left: -2%;
  top: 2rem;
}

.oth-ttl::after {
  width: 1.6rem;
  height: 3.8rem;
  right: 0%;
  top: 2rem;
}

.oth-item-wrap {
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 2rem;
}

.oth-item {
  font-size: 2rem;
}


/* banner */
.banner-wrap {
  padding : 2rem 0 0;
}

.banner-left img {
  margin-bottom : 1rem;
}

.banner-right img {
  margin-top : 1rem;
}
/* banner */

/* contact */

.con-text {
  font-size: 1.4rem;
  padding: 2rem;
}

.con {
  padding: 2rem;
}

.con-ttl {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.con-wrap {
  margin : 0 auto;
  width : 90%;
}
.con-cate {
  font-size : 1rem;
}

.con-name {
  font-size : 1.6rem;
}

/* footer */
.footer {
  padding: 0.5rem 2rem 6.5rem;
}

.footer-policy {
  font-size : 1.4rem;
  margin : 1rem auto;
}

}