@charset "UTF-8";

#frontPage {
position:relative;
width:100%;
text-align:center;
color:var(--main-color);
font-size:16px;
}

#frontPage h2 {font-size:50px;}

#fvArea {
position:relative;
  display: block;
  width: 100%;
  background-image: url("/images/top_bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:top;
	background-color: #767D90;
}
#fvArea::before,
#fvArea::after{
	position: absolute;
	content: "";
	width:900px;
	height:300px;
}

#fvArea::before {top:0;left:0; background: url("/images/top_layer01.webp") no-repeat top left;}
#fvArea::after {bottom:0;right:0; background: url("/images/top_layer02.webp") no-repeat bottom right;}

.layout {
  position:relative;
  width:1200px;
  height:740px;
  margin:0 auto;
}


.popbtn {
display:inline-block;
position:fixed;
bottom:50px;
right:0;
}

.popbtn a.btn_pink {
padding:20px 50px 20px 20px;
border-radius:10px 0 0 10px;
background: linear-gradient(125deg,rgba(223, 158, 67, 1) 0%, rgba(210, 119, 208, 1) 100%);
}



#titleArea {
  position: absolute;
  bottom:30px;
  width:100%;
  text-align:left;
  z-index:10;
}
#titleArea h1 {
  display:block;
  width:100%;
  font-size:1.2em;
  line-height:1.4em;
  font-weight:900;
  color:#fff;
}
#titleArea h1 span.subtitle {
display:inline-block;
padding:0 0 20px;
margin:0;
background:url(/images/top_title_line.webp) left bottom no-repeat;
}

#titleArea h1 strong {
display:inline-block;
font-size:50px;
line-height:1.2em;
padding:0 0 10px;
}


#packcage01 h2 {
  font-size:1em;
  line-height:2.4rem;
  font-weight:bold;
  color:#363E4C;
}



/* contentsArea */
#contentsArea {
  position:relative;
  margin:0 auto;
}

/* about */
#about {
  max-width:1200px;
  width:auto;
  background:#fff;
  border-radius:30px;
  padding:60px 0;
  box-shadow: 0 0 50px -20px #c8cdd6 ;
  margin: 0 auto 100px;
}
#about h2 {font-size:25px;}
#about h2 strong {
  display:inline-block;
  padding:6px 10px;
  font-size:1.2em;
  background:var(--main-color);
  color:#fff;
}

#about p {
  font-size:16px;
  font-weight:600;
  color:var(--text-color);
}


/* service */
#service {
  width:100%;
}

#service figure {
  width:100%;
  height:auto;
  margin:0 auto;
}
#service figure img {border-radius:10px 10px 0 0 ;}

#service ul.contents {
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  max-width:1200px;
  margin:0 auto;
  padding:0;
}
#service ul.contents li {
  width:30%;
  margin:0 auto 50px;
  list-style:none;
  background:#fff;
  border-radius:10px;
}

#service ul.contents li h3 {margin:0 auto;padding:15px 0 0;}
#service ul.contents li p {margin:0 auto;padding:15px;color:var(--text-color);text-align:left;}


/* steps */
#steps {
  position:relative;
  max-width:1000px;
  height:auto;
  margin:0 auto 80px;
}



#steps ul.contents {
  display: flex;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 auto;
  padding:0;
}
#steps ul.contents li {
position:relative;
  width:auto;
  margin:0 auto 50px;
  list-style:none;
  text-align:center;
  background:var(--main-color);
  color:#fff;
  padding:6px 20px 20px;
  border-radius:10px; 
}

 #steps .vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
 }


#steps ul.contents li h3 {margin:0 auto;}
#steps ul.contents li span {
  display: block;
  position: relative;
  height: 80px;
  border-bottom: solid 4px #fff;
  margin: 0 auto 15px;
  font-size:14px;
  font-weight:600;
}

#steps ul.contents li span i {
  display:block;
  position:absolute;
  top:18px;
  left:50%;
  transform: translateX(-50%);
  font-size:30px;
  font-weight:bold;
  font-style:normal;
}



#subscription {
  width:80%;
  background:#fff;
  border-radius:30px;
  margin:0 auto 100px;
  padding:30px;
  text-align:left;
}
#subscription>div {
  background:#fff url(/images/subsc.webp) no-repeat;
  background-size:auto 250px;
  background-position:right;
}

#subscription h2,
#subscription p {
  width:60%;
}
#subscription h2 {margin:0 0 30px;padding:0;font-size:2em;}







.swiper {
      width: 100%;
      height: 100%;
	  position:relative;
    }

    .swiper-wrapper {
      text-align: center;
      display: flex;
      justify-content:center;
      align-items: center;
    }
.swiper-wrapper .swiper-slide {
width:300px;
margin-right:20px;
}


.swiper-slide .kiji-img img {width:100%;border-radius:10px;}
.swiper-slide h3 a {
font-size:18px;
line-height:1.2em;
color:var(--main-color);
}


#formArea iframe {
  display:block;
  margin:0 auto;
  height:100%;
}


@media only screen and (max-width:1200px) {
#contentsArea {margin : 0 20px;}

}