@charset 'UTF-8';

html {
    scroll-behavior: smooth;
}

#Contents{
  margin: 1px 0 ;
}

section[id] {
  scroll-margin-top: 80px;}

  
/*==============================
	section common
==============================*/
section{
  margin-bottom: 4em;
    text-align: center;
}

section h2{
  position: relative;
  display: inline-block;
  
  text-align: center;
    font-size: 1.7em;
    margin:1em auto 2em;
    font-weight: 500;
    line-height: 1.6em;
/*    color: #d97a3d;*/
}
section h2::after {
  content: ""; 
  position: absolute;
  opacity: 0.5;
  top: 1em; 
  left: 50%;
  transform: translatex(-50%);
  width: calc(100% + 20px); 
  height: 15px; 
  background-color: #e9bf18; 
padding:0 20px;
  z-index: -1;
}
@media screen and (min-width:800px){
    section h2{
    font-size: 2.2em;
  }
}
/*==============================
	header
==============================*/
#teigaku header .cv.cart.header{
  display: none;
  background-color:#fff;
    cursor: pointer; 
}
@media screen and (min-width:769px){
  #teigaku header .cv.cart.header{
  display: block;
    
}
}

/*==============================
	main-vs
==============================*/
#main-vs{
  width: 100%;
  height: 150vw;
  position: relative;
  background-image: url('https://biz.aromicstyle.com/img/lp/main-vsSP.jpg');
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}
#main-vs .inner,section#main-vs .inner h1 picture img{
  width: 100%;
  max-height: 1200px;
  max-width: 2400px;
  margin: auto;
}


section#main-vs .inner h1{
  text-align: left;
}
section#main-vs .inner h1 span{
  white-space: nowrap;
  text-shadow: none;
}
section#main-vs .inner img{
  display: block;}

section#main-vs h2::after {
content:none}

section#main-vs .inner .outline{
margin: 1.1em 0;  
  line-height: 1.4;
font-size: 1.2em;}

@media screen and (min-width:1000px){
  #teigaku .apply-button h2{
    font-size: 1.2em;
  }
}
@media screen and (min-width:1300px){
  #teigaku .apply-button h2{
    font-size: 1.4em;
  }
}

#teigaku .apply-button h2{
      background: var(--orange-gd);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
     flex-direction: column;
    justify-content: center;
    font-weight: 500;
    border-radius: 100vh;
    color: #fff;
    padding: .5em 3em;
    background-color: #FFF;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  font-size: 1.4em;
    line-height: 1.2;

  
}
@media screen and (min-width:600px){
  #teigaku .apply-button h2{
    padding: .6em 4em;
    font-size: 1.8em;
  }
  section#main-vs .inner .renewal,section#main-vs .inner h1,section#main-vs .inner .outline{
    font-size: 4vw;
  }
}
@media screen and (min-width:769px){
  #main-vs{
  width: 100%;
  height: 50vw;
  max-height: 1100px;
  position: relative;
  background-image: url('https://biz.aromicstyle.com/img/lp/main-vsPC.jpg');
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}
  section#main-vs .inner .renewal,section#main-vs .inner h1,section#main-vs .inner .outline{
    font-size: 2vw;
  }

  #teigaku .apply-button h2{
    padding: .4em 2em;
    font-size: 1em;
  }
  
}
@media screen and (min-width:1000px){
  #teigaku .apply-button h2{
    padding: .4em 2em;
    font-size: 1.4em;
  }
}
/*==============================
	trouble
==============================*/

#trouble h2{
  margin: 0 auto 2.4em;
}
#trouble p{
    text-align:center;
}
#trouble ul{
  display: block;
  margin-bottom: 2em;
}
#trouble > ul > .pc,#trouble > div.pc{
  display: none;
}

#trouble > ul > li{
  text-align: center;
  margin-bottom: 2.6em;
}
#trouble > ul > li > picture{
  display: block;
  margin: 0 auto;
} 
#trouble > ul > li > picture> img{
  width: 80%;
  max-width: 360px;
} 
#trouble p.solve{
    font-size: 1.4em;
      margin: .4em 0;
    font-weight: 700;
    line-height: 1.6em;
    color: #d97a3d;
}
#trouble .solution1 p{
  text-align: center;
  max-width: 240px;
  margin: auto;
  padding: 2em 0;
  
}
#trouble .solution1 p img{
display: inline-block;
}
#trouble .solution2{
  position: relative;
}
#trouble .solution2 p{
  position: relative;
  padding: 0 .2em;
  display: inline-block;
  color: var(--blue);
  font-size: 2.2em;
  font-weight: 500;
  transform: rotate(357deg)
  
}
@media screen and (min-width:800px){
  #trouble .solution2 p{
    margin: 1em auto .5em;
  font-size: 3.2em;  
}
  }

/*#trouble .solution2 p::after{
  content: "";
  text-align: center;
  position: absolute;
  bottom: 0;
  left: -50%;
  transform:translateX(41%);
  height: .6em;
  width: 110%;
  background: linear-gradient(to right, #00b1ae, #648ae0);
  transition: width 0.5s ease;
  z-index: -1;
}*/
#trouble .solution1 p{
  margin-bottom: 1.8em;
}
#trouble .solution1 p span{
  font-size: 1.8em;
}

#trouble .solution2 p b{
position: relative;
  font-weight: 600;
  
}
#trouble .solution2 p b::after{
content: "・";
  position: absolute;
  top:-.9em;
  left: 0;
}


.solution2 .bg-wrap {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
.solution2 .bg-wrap::before {
    background-color: #dce9f6;
  content: "";
  position: absolute;
  top: .4em;
  left: 50%;
  transform: translateX(-50%); 
  width: 105%;
  height: 80%;
  transform-origin: left center;
  z-index: -1;
}
.solution2 .bg-wrap .inn {
  color: #fff;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  padding: 5px 15px;
  position: relative;
  z-index: 1;
}
 
@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}

@media screen and (min-width:800px){
  #trouble > ul{margin: 0 auto 5em;    
    max-width: 1000px;
    width:calc(100% - 6em);
  }
  #trouble > ul > .pc{
  display: flex;
    
}
  #trouble > div.pc{
    display: block;}
  
  #trouble > ul > .sp,#trouble > div.sp{
  display: none;
}
  #trouble > ul > li{
    width: 100%;
  }
  #trouble > ul > li > picture> img {
    width: 100%;
    max-width: 500px;
  }
  
}
.marker {
  background:linear-gradient(transparent 50%, rgba(255, 220, 123) 50%);
  display: inline;

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 1.5s;
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}


@media screen and (min-width:800px){
#trouble .solution1 p{
  text-align: center;
  max-width: 400px;
  margin: auto;
  padding: 2em 0;
  }
}
#trouble .solution2 p {
  
}
/*==============================
	flow
==============================*/
#flow{
  background-color: #dce9f6;
  padding-bottom: 6em;
}
#flow h2{
  padding-top:2em; 
}
#flow h2::after{
  display: none;
}
#flow > ul > .pc{
    display: none;
  }
#flow img{
  width:80%;
  max-width: 340px;
}
#flow p.notice{
  font-size: .8em;
  text-align: right;
    
}

#flow  .blink{
  font-size: .7em;
}

    @keyframes blink {

      0%,30%,70%, 100% { opacity: 1; } 
      50% { opacity: 0; } 
    }

    .blink {
      font-size: .8em;
      font-weight: bold;
      color: red;
      animation: blink 4s infinite;
    }

@media screen and (min-width:800px){
  #flow > ul > .sp{
    display: none;
  }
  #flow > ul > .pc{
    display: block;
  }
  #flow img{
  width:100%;
  max-width: 800px;
}
}
/*==============================
	plan
==============================*/
#plan .plan-detail{
  font-size: 1.1em;
  
}
#plan .plan-detail .camp{
  color:#ff0000;
  
}
#plan .plan-detail p{
  margin-bottom: 2em;
}
#plan img{
  width:70%;
  max-width: 600px;
  padding-bottom: 1em;
}

#plan li p{
  width: 70%;
  max-width: 360px;
  display: block;
  
} 

#plan li hr{
  width: 50%;
  margin: 1em auto ;
  border: 0.5px solid #555;
    height: 1px;
  
} 
#plan div ul{
  margin: auto;
  max-width: 360px;
  text-align: center;
}
#plan div.plan-cancel{
  margin: 1em auto;
  max-width: 800px;
}
#plan div p{
  text-align: center;
}
#plan div span{
font-size: 1em;
}
#plan .description{
  width: 100%;
background-color: #f3f1eb;
padding: 3em 0 6em;
}
#plan .description img{
padding: 0 1em;
}
#plan .description ul {
  
}
#plan .description ul li img,#plan .description ul li > p{
width: 100%;  
padding-bottom: 0;
  margin-bottom: 2em;

}
#plan .description ul li > p{
  color:#0052a0
}
#plan .description ul li div{
width: 100%; 
  margin-top:1em; 
  margin-bottom: 1em;
}
#plan .description ul li div h3{
font-size: 1.4em;
  font-weight: 600;
  margin: .4em auto .8em;
}
#plan .description ul li p{
width: 100%; 
text-align: center;
}

#plan .description ul li .inner p.case{
  font-size: 1.1em;
  color: #ffffff;
  background-color: #555;
  width:auto;
  display: inline-block;
  padding: .4em 1.4em;
  margin:2em auto 1em;
  border-radius: .2em;
}
@media screen and (min-width:800px) {
  #plan .description ul{
    max-width: 800px
  
  }
  
#plan .description ul li{
 display: flex; 
 }
  #plan .description ul li div{
  text-align: left;
}
  #plan .description ul li .inner p.case {
  font-size: 1.2em;  
  }
  #plan .description ul li div p{
  text-align: left;
  font-size: 1.1em;
}
  #plan .description ul li div small{
  padding: .6em 0 0;
  display: block;
}
  #plan .description ul li picture{
    display: flex;
    align-items: flex-end;
  }
  #plan div.plan-cancel .plan-cancel{
  display: none}
  
}

@media screen and (min-width:800px){
  #plan > ul{
    display: flex;
    justify-content: space-between;
    margin: 0 auto 4em;
    width:calc(100% - 4em);
    max-width:900px;
  }
  #plan > ul > li{
    width: 100%;
    margin: 0 1em;
  }
  #plan > ul > li > picture> img {
    width: 100%;
  }
  #plan > ul > li:nth-child(2) {
    width: 100%;
    
}
}
/*==============================
	blend
==============================*/

#blend ul li img{
  width: 100%;
  max-width: 500px;
  padding: .4em 1em;
  margin-bottom: 2em;
}
@media screen and (min-width:800px) {
 #blend ul{
   
   margin: 2em auto 0;
   max-width: 1000px;
display: flex;
  flex-wrap: wrap;
  justify-content: center;}
#blend ul li{
  flex: 0 0 50%;
}
  }
#blend > p{
  text-align: center;
  font-size: 1.2em;
  line-height: 1.2;
  margin: 1.2em 0;
}
#blend .more{
  margin: 1.2em 0 2em;
  font-size: 1.8em;
  color: #d02929;
}
#blend .chart{
  max-width: 80%;
  margin: 4em 0;
}

@media screen and (min-width:800px) {
#blend .chart{
  max-width: 600px;
}
}
/*==============================
	description
==============================*/
#description li { position:relative; 
 list-style: none; }

#description .inner { padding:2em; }
#description h3 { margin-bottom:.6em; font-size:1.7em; font-weight:600; line-height:1.6em; color:var(--blue); }
#description p { margin:auto; line-height:1.8em; }

#description picture img { display:block; width:100%; }


@media screen and (min-width:1601px) {
#description { font-size:1vw; }
#description .inner { padding:4vw 8vw; }
}

@media screen and (min-width:1025px) and (max-width:1600px) {
#description .inner { padding:2em 4em; }
}

@media screen and (min-width:1025px) {
#description .inner { font-size:1.1em; }
}






/*==============================
	benefit
==============================*/
section#benefit{
  text-align: center;
  background-color: #f3f1eb;
  margin-bottom: 0;
  padding-bottom: 4em;
}
#benefit h2{
  margin:2em auto; 

}
section#benefit h2::after {
    content: none;
}

#benefit > .pc{
    display: none;
  }
#benefit .benefit-title{
  width:100%;
  max-width: 750px;
  padding-bottom: 2em;
}


#benefit .benefit-detail{
  width:80%;
  margin: 0 auto ;
  padding: 0 0 2em;
  max-width: 380px;
  
}
#benefit .benefit-detail img{
  margin-bottom: 1.2em;
    border-radius: 0.3em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  }
#benefit p{
  text-align: center;
  font-size: 1.6em;
  padding: 1em 0;
}
#benefit p .discount{
  color:#FF0000;
  font-size: 1.1em;
}
#benefit small{
  display: block;
  padding-bottom: 3em}

@media screen and (min-width:800px){
  #benefit > .sp{
    display: none;
  }
  #benefit > .pc{
    display: block;
    max-width: 800px;
    margin: 0 auto;
  }
  #benefit .benefit-title{
  width:100%;
  max-width: 1200px;
    margin: 0 auto;
}
  #benefit p{
  font-size: 2em;
  }
}
/*=============



/*==============================
	case
==============================*/
#case{
  margin: 0 auto 4em;
background-color: #eee;
padding: 2em;
max-width: 760px}
#case p{
  padding: 1em 0;
}

section#case h2::after {
    content: none;
}

#case .inner p span{
  font-size: 1.2em;
  line-height: 1.4;
  white-space: nowrap; 
  padding-right: 1em;
} 
#case .inner p span::before{
  content: "●"
}


/*==============================
	description
==============================*/
#description{
  max-width: 1400px;
  margin: 0 auto 4em;
}
#description li { position:relative; 
 list-style: none; }

#description .inner { padding:2em; }
#description h3 { margin-bottom:.6em; font-size:1.7em; font-weight:600; line-height:1.6em; color:var(--blue); }
#description p { margin:auto; line-height:1.8em; }

#description picture img { display:block; width:100%; }


@media screen and (min-width:1601px) {
#description { font-size:18px; }
/*
#description .inner { padding:4vw 8vw; }
*/
  
}

/*@media screen and (min-width:1025px) and (max-width:1600px) {
#description .inner { padding:2em 4em; }
}*/

@media screen and (min-width:1025px) {
#description .inner { font-size:1.1em; }
}

@media screen and (min-width:769px) {
#description li > * { width:50%; }
#description li:nth-of-type(odd) .inner { float:right; right:0; }
#description li:nth-of-type(odd) picture { float:left; }
#description li:nth-of-type(even) .inner { float:left; left:0; }
#description li:nth-of-type(even) picture { float:right; }
#description .inner { position:absolute; top:0; bottom:0; height:fit-content; margin:auto; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#description h3 { margin-bottom:.4em; font-size:3vw; }
#description p { line-height:1.6em; }
}

@media screen and (max-width:768px) {
  #description li img{
    height: 30vh;
    object-fit: cover;
  }
#description li:nth-of-type(n+2) { margin-top:2em; }
#description h3 { text-align:center; font-size:1.4em; }
#description li:nth-of-type(1) p { max-width:37em; }
#description li:nth-of-type(2) p { max-width:40em; }
#description li:nth-of-type(3) p { max-width:38em; }
}



/*==============================
	comp
==============================*/

section#comp{
  margin-bottom: 3em}
section#comp table{
table-layout: fixed; 
}
/*==============================
	lead
==============================*/
#lead { position:relative; overflow:hidden; }

#lead .inner { position:absolute; top:6vw; right:4vw; padding:2em 1.6em; font-size:1.3em; font-weight:600; background:rgba(255,255,255,.9); z-index:2; }

#lead h2 { margin-bottom:.6em; font-size:1.4em; line-height:1.8em; }
#lead p { line-height:2em; }
#lead p + p { margin-top:1em; }

#lead ul {
 position:absolute;
 top:4vw;
 left:4vw;
 padding:1em;
 text-shadow:2px 2px 4px rgba(0,0,0,.6);
 font-size:1.26em;
 font-weight:600;
 color:#fff;
 border:2px solid;
 z-index:2;
}
#lead li svg { position:relative; top:calc(.2em + 1px); width:1.2em; margin-right:.4em; stroke:#fff; stroke-width:7px; }

#lead picture { display:block; aspect-ratio:auto; }
#lead picture img { display:block; min-width:100%; height:100vh; min-height:38em; object-fit:cover; object-position:right; }


@media screen and (max-width:2000px) {
#lead picture img { object-position:left; }
}

@media screen and (min-width:1601px) {
#lead { font-size:1vw; }
#lead p { font-size:.8em; }
}

@media screen and (min-width:1441px) {
#lead .inner { top:4em; right:8em; }
#lead ul { top:2em; left:6em; padding:2em; }
}

@media screen and (max-width:1440px) {
#lead picture img { object-position:left -14vw bottom 0; }
}

@media screen and (max-width:1024px) {
#lead .inner { font-size:1.2em; }
#lead picture img { object-position:left -30vw bottom 0; }
}

@media screen and (min-width:769px) {
#lead .inner { padding:2em; }
}

@media screen and (max-width:768px) {
#lead { font-size:.9em; }
#lead .inner { right:4vw; width:calc(100% - 8vw); }
#lead ul { top:auto; bottom:12vw; left:auto; right:4vw; }
#lead picture img { min-height:56em; object-position:bottom; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#lead .inner { max-width:36em; padding:2em 4vw; }
#lead p br { display:none; }
}

@media screen and (max-width:425px) {
#lead { font-size:.86em; }
#lead .inner { top:10vw; left:6vw; right:auto; max-width:21.2em; font-size:1.1em; }
#lead ul { padding:1em 3vw; }
#lead li svg { margin-right:.2em; }
#lead picture img { max-height:700px; object-position:left -4vw bottom 0; }
}




/*==============================
	gallery
==============================*/
#img-gallery { width:100%; margin:2em auto; }


#img-gallery ul { transition-timing-function:linear; }

#img-gallery picture { display:block; width:100%; aspect-ratio:20/13; }
#img-gallery img { display:block; width:100%; }



/*==============================
	point
==============================*/
#point {
    background-color: rgb(220, 233, 246);
    padding: 6em 0 8em;
}


/*ul*/
section#point h2::after {
    content: none;
}

#point ul { counter-reset:number 0; width:calc(100% - 4em); margin:auto; }
#point li { position:relative; padding:2em; background:#fff; cursor:pointer; }
#point li > h3 { text-align:center; font-size:1.2em; font-weight:600; line-height:1.4em; letter-spacing:1px; }
#point li > h3:before {
 counter-increment:number 1;
 content:counter(number, decimal-leading-zero);
 display:block;
 width:2.2em;
 margin:0 auto .6em;
 padding-bottom:.1em;
 font-size:1.2em;
 color:var(--blue);
 border-bottom:2px solid;
}
#point li > picture { display:block; width:calc(100% - 4em); max-width:6em; aspect-ratio:1/1; margin:1em auto; }
#point li > picture img { display:block; width:100%; }
#point li > p{
  line-height: 1.6;
}
#point li .mask {
 position:absolute;
 top:0;
 left:0;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 width:100%;
 height:100%;
 padding:1.2em;
 font-weight:600;
 line-height:1.8em;
 color:#fff;
 background-color:var(--blue);
 overflow-y:scroll;
 transition:.4s;
 transform:scale(0);
}
#point li:hover .mask { transform:scale(1); }
#point li .mask .info { font-weight:500; font-feature-settings:'palt'; color:#fff; }
#point li .more { margin-top:1em; text-align:right; letter-spacing:1px; color:#333; }
#point li .more svg { position:relative; top:.3em; width:1.8em; height:1.8em; padding-right:.2em; fill:#aaa; z-index:-1; transform:rotate(-10deg); }


@media screen and (min-width:768px){
#point li { width:calc(100%/2 - 1em); }
#point li:nth-of-type(2n+2) { margin-left:2em; }
#point li:nth-of-type(n+3) { margin-top:2em; }
}

@media screen and (min-width:768px) {
#point ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; max-width:800px; }
}

@media screen and (max-width:768px) {
#point ul { max-width:500px;}
#point li:nth-of-type(n+2) { margin-top:2em; }
}

#point dl dt p{
  text-align: center;
  padding-top: .6em
}

/*==============================
	record
==============================*/
#record h2.title { position:relative; width:11em; margin:0 auto .6em; line-height:1.6em; }
#record h2.title span { display:block; font-size:.6em; }
#record h2.title:after { display: none; }

#record  > .info { width:calc(100% - 1em); max-width:40em; margin:0 auto 4em; text-align:right; font-size:12px; line-height:1.4em; }


/*graph*/
#record .graph {
 position:relative;
 width:80vw;
 max-width:26em;
 height:80vw;
 max-height:26em;
 margin:auto;
 border-radius:50%;
 background:conic-gradient(rgba(164,88,30,.1) 96%, #fff 0);
}
#record .graph > * { position:absolute; bottom:0; left:0; right:0; margin:auto; }
#record .graph p { top:3em; height:3em; text-align:center; font-size:1.4em; font-weight:600; line-height:1.6em; z-index:2; }
#record .graph p strong { margin-right:.2em; font-size:1.2em; color:#a4581e; }
#record .graph p strong b { position:relative; top:2px; margin-right:4px; font-size:3em; }
#record .graph picture { top:-9em; display:block; width:5em; aspect-ratio:1/1; opacity:.4; z-index:1; }
#record .graph img { display:block; width:100%; }

#record dl { width:calc(100% - 2em); max-width:40em; margin:4em auto 0; font-weight:600; }
#record dt { margin-bottom:1em; text-align:center; font-size:1.4em; color:var(--gold); }
#record dd { display:flex; justify-content:space-between; align-items:center; padding:.2em 1.4em; background:rgba(142,121,42,.16); border-radius:0 50vh 50vh 0; }
#record dd:nth-of-type(n+2) { margin-top:.6em; }
#record dd:first-of-type { width:98%;}
#record dd:nth-of-type(2) { width:79%; }
#record dd:nth-of-type(3) { width:89%; }
#record dd:nth-of-type(4) { width:96%; }
#record dd:nth-of-type(5) { width:86%; }
#record dd:last-of-type { width:97%; }
#record dd p + p { font-size:1.4em; }
#record dd p b { margin-right:2px; font-size:1.6em; font-weight:500; color:#a4581e; }


/*comment*/
#record .comment { width:calc(100% - 2em); max-width:60em; margin:0 auto; }
#record .comment li { position:relative; width:calc(100% - 5em); padding:1.6em; background:var(--bg); border-radius:.4em; }
#record .comment li:nth-of-type(odd) { margin-left:auto; }
#record .comment li:nth-of-type(n+2) { margin-top:2em!important; }
#record .comment li:after { position:absolute; top:0; bottom:0; content:''; height:1.2em; margin:auto; border:.6em solid transparent; z-index:2; }
#record .comment li:nth-of-type(odd):after { left:calc(-1.8em + 1px); border-right:1.2em solid var(--bg); }
#record .comment li:nth-of-type(even):after { right:calc(-1.8em + 1px); border-left:1.2em solid var(--bg); }
#record .comment li img[alt='icon'] { position:absolute; top:0; bottom:0; width:3em; margin:auto; }
#record .comment li:nth-of-type(odd) img[alt='icon'] { left:-5em; }
#record .comment li:nth-of-type(even) img[alt='icon'] { right:-5em; }
#record .comment li p { line-height:1.6em; }
#record .comment li p + p { margin-top:.6em; text-align:right; font-size:.9em; }


@media screen and (min-width:769px) {
#record .comment li { width:calc(100% - 5em - 15vw); }
#record .comment li:nth-of-type(odd) { margin-left:5em; }
#record .comment li:nth-of-type(even) { margin:0 5em 0 auto; }
}

@media screen and (max-width:425px) {
#record .comment li { padding:1em; }
#record .comment li:after { top:3em; bottom:auto; }
#record .comment li img[alt='icon'] { top:2em; bottom:auto; }
}

@media screen and (max-width:375px) {
#record .graph p strong b { letter-spacing:-4px; }
#record dd p b { letter-spacing:-1px; }
}



/*==============================
	plan
==============================*/

#plan p { line-height:1.6em; }
#plan p:nth-of-type(n+2) { margin-top:.4em; }
/*#plan b { margin:0 1px; font-size:1.4em; font-weight:500; }*/
#plan em { font-style:normal; }
#plan .info { margin-top:1em; font-size:12px; color:#333; }
#plan .spec + .info { width:calc(100% - 2em); max-width:1200px; margin:auto; text-align:right; }



/*==============================
	spec
==============================*/
#spec .spec_container{
  margin: 0 auto 4em;
  width: 80%;
  max-width: 500px;
  
}
#spec .spec_container h3{
  font-size: 1.4em;
  text-align: left;
  padding-top: 1.6em;
  padding-bottom: 1.6em;
}

#spec .spec_container h4{
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: .4em 1.2em;
  margin-bottom: .6em;
  font-size: 1.2em
}
#spec .spec_container p{
  line-height: 1.2;
  margin-bottom: 1em;
  }


#spec .spec_container > img{
  margin: auto;
  padding: 1em 2em;
}

#spec .spec_container div{
  margin: auto;
  width: 100%;
  text-align: left;
}
#spec .spec_container div p img{
  width: 100%;
  }

#spec .about_baum{
  max-width: 770px;
  margin: auto;
}
#spec .spec{
  max-width: 770px;
  margin:  0 auto 3em ;
  
  }

#spec .about_baum .pc,#spec .spec .pc{
display: none;}
#spec .spec .sp{
  width: 100%;
  max-width: 600px;
}
@media screen and (min-width:650px) {
  #spec .about_baum .sp{
display: none;}
  #spec .about_baum .pc{
display: block;
  margin: 0 auto;
  }
}
@media screen and (min-width:800px) {
  #spec .spec .sp{
display: none;}
  #spec .spec .pc{
display: block;
width: 100%;
    max-width: 1400px;
  margin: 0 auto;
  }
  #spec .spec{
    max-width: 1200px;
  margin-bottom: 5em;
  }
}

/*==============================
	Comp
==============================*/
#comp { position:relative; max-width:100%; margin:4em auto 0; padding:4em 0;transition:.4s; background-color: #ddd;}

#comp.open { padding-bottom:3em; }

#comp h3 { text-align:center; font-size:1.2em; font-weight:600; line-height:1.4em;; letter-spacing:1px;color: #333 }

#comp .table { width:100%; max-width:1000px; margin:1em auto 0; }
#comp table { width:100%; margin:auto; text-align:center; line-height:1.4em; }
#comp table * { vertical-align:middle; }
#comp tr > * { padding:.8em .1em; }
#comp tr > * { border:2px solid #ddd; }
#comp tr:first-of-type > * { border-top:none; }
#comp tr:nth-of-type(1) th:not(:first-of-type) { background:#f5f5f5;font-weight:600; }
#comp tr:nth-of-type(1) th:nth-of-type(2),
#comp tr:nth-of-type(2) th:nth-of-type(2),
#comp tr:nth-of-type(2) th:nth-of-type(3) { color:#fff; background:rgba(var(--blue-rgb),.8); }
#comp tr:nth-of-type(3) td { vertical-align:top; }
#comp tr:nth-of-type(n+2) th,
#comp td { background:#ffffff; }
#comp td:first-of-type{
  font-weight: 600;
}
#comp tr:nth-of-type(1) th:nth-of-type(2){
  font-weight: 600;
  line-height: 1.1;
}
#comp tr:not(:first-of-type) th{
  background-color: #555;
  color: #fff;
  font-weight: 600;
}
#comp td:nth-of-type(-n+1) { background:var(--bg); }
#comp td span { display:block; font-size:.88em; }

#comp .more-btn {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 padding:4em 0 1px;
 text-align:center;
 font-size:.9em;
 color:var(--link);
 background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 60%);
 border:none;
 border-bottom:1em solid #fff;
 cursor:pointer;
}
#comp .more-btn span { display:inline-block; padding:.3em .8em; border:1px solid; border-radius:10em; }
#comp.open .more-btn { padding-top:1em; }
#comp.open .more-btn:after { content:'\9589\3058\308B'; display:inline-block; width:4em; margin:auto; border-bottom:1px solid; }
#comp.open .more-btn span { display:none; }


@media screen and (max-width:1024px) {
#comp { padding:2em 0; }
#comp .table { padding:0 1em 8px; overflow-x:auto; white-space:nowrap; }
#comp table { position:relative; width:42.4em; white-space:normal; }
#comp table * { display:flex; flex-wrap:wrap; }
#comp tr > * { display:flex; justify-content:center; align-items:center; width:8.4em; height:68px; text-align:center; }
#comp tr > *[colspan='2'] { width:16.8em; }
}





/*==============================
	Flow
==============================*/


/*ol*/
#flow ol { counter-reset:number 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 4em); margin:3.4em auto 0; list-style:none; }
#flow ol li { position:relative; width:100%; padding:3.2em 1.2em 1.2em; background:#fff; }
#flow ol li:before {
 counter-increment:number 1;
 content:counter(number);
 position:absolute;
 top:-1.1em;
 left:0;
 right:0;
 display:block;
 width:2em;
 height:2em;
 margin:auto;
 text-align:center;
 font-size:1.4em;
 line-height:2em;
 letter-spacing:1px;
 background:rgba(var(--blue-rgb),.2);
 border-radius:50%;
 z-index:1;
}
#flow ol li h3 { margin-bottom:1em; text-align:center; font-size:1.2em; }
#flow ol li h3:after { content:''; display:block; width:6em; height:6em; margin:auto; }
#flow ol li:nth-of-type(1) h3:after { background:url(/img/subsc/i-step0.png) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(2) h3:after { background:url(/img/subsc/i-step1.svg) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(3) h3:after { background:url(/img/subsc/i-step2.svg) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(4) h3:after { background:url(/img/subsc/i-step3.svg) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(5) h3:after { background:url(/img/subsc/i-step4.svg) bottom center / 5em no-repeat; }
#flow ol li p { line-height:1.6em; }
#flow ol li p:nth-of-type(n+2) { margin-top:.4em; }
#flow ol li p.info { color:var(--blue); }
#flow ol li p.info.attention { color:var(--red); }
#flow ol li p sup { position:relative; top:-.4em; font-size:12px; font-weight:600; color:var(--blue); }
#flow ol li p a { text-decoration:underline; }
#flow ol li p a[href*='14684'] { font-weight:600; color:var(--orange); }


@media screen and (min-width:1601px) {
#flow ol li { width:calc(100%/5 - .8em); padding:3.2em 1.6em 1.6em; }
#flow ol li:nth-of-type(n+2) { margin-left:1em; }
}

@media screen and (min-width:1201px) and (max-width:1600px) {
#flow ol li { width:calc(100%/3 - 1.2em); }
#flow ol li:nth-of-type(n+2) { margin-left:1.8em; }
#flow ol li:nth-of-type(n+4) { margin-top:3em; }
}

@media screen and (min-width:601px) and (max-width:1200px) {
#flow ol li { width:calc(100%/2 - .6em); }
#flow ol li:nth-of-type(2n+2) { margin-left:1.2em; }
#flow ol li:nth-of-type(n+3) { margin-top:2.6em; }
}

@media screen and (max-width:600px) {
#flow ol li:nth-of-type(n+2) { margin-top:3em; }
}



/*==============================
	trial-faq
==============================*/
section#trial-faq{
  margin-bottom: 6em;
}
#trial-faq dl { width:calc(100% - 2em); max-width:50em; margin:auto; line-height:1.6em; }
#trial-faq dl > * { padding:1em; }
#trial-faq dt,
#trial-faq dd p:first-of-type { position:relative; font-size:1.1em; font-weight:600; letter-spacing:1px; }
#trial-faq dl *:before { position:absolute; margin-right:.2em; font-size:2em; }

#trial-faq dt { padding-left:2.6em!important; background:rgba(var(--biz-trial-faq),1); }

#trial-faq dt:nth-of-type(n+2) { margin-top:1.2em; }
#trial-faq dt br { display:none; }

#trial-faq dd { background:#fff; }
#trial-faq dd p:first-of-type { padding-left:2em!important; }
#trial-faq dd p:first-of-type:before { top:0; left:.1em; content:'A'; color:rgba(var(--biz-trial-faq),1); }
#trial-faq dd p:nth-of-type(n+2) { margin-top:.6em; }
#trial-faq dd a { text-decoration:underline; color:var(--biz-trial-link); }


#trial-faq dt { position:relative; padding-right:3em!important; cursor:pointer; }
#trial-faq dt svg { position:absolute; top:0; bottom:0; right:1em; display:block; width:1.6em; margin:auto; fill:transparent; stroke:var(--lp-text); stroke-width:6px; }
#trial-faq dt:not(.open) svg { transform:rotate(90deg); }
#trial-faq dt.open svg { transform:rotate(-90deg); }
#trial-faq dt:not(.open) + dd { height:0; padding:0; visibility:hidden; opacity:0; }


@media screen and (min-width:1441px) {
#trial-faq dt { padding:1.6em 3em; padding-left:3.6em!important; }
#trial-faq dt:before { left:.6em; }
#trial-faq dd { padding:2em 3em; }
#trial-faq dd p:nth-of-type(n+2) { margin-top:1em; }
}

/*@media screen and (max-width:768px) {
#trial-faq { padding:4em 0; }
}*/

@media screen and (min-width:375px) and (max-width:768px) {
#trial-faq dt br { display:block; }
}

@media screen and (max-width:320px) {
#trial-faq dl > * { padding:1em .6em; }
#trial-faq dt svg { width:1.2em; }
}



#trial-faq .accordion {
  
  margin: 0 auto;
  padding: 0;
}

#trial-faq .accordion dt {
  list-style:none;
  margin-bottom: 10px;
  line-height: 1.4;
}

#trial-faq .accordion details {

  padding: 10px;
}
#trial-faq .accordion details summary::-webkit-details-marker{
  display: none;
}

#trial-faq .accordion details[open] {
  background-color: #eef6fd;
  border-color: #4a90e2;
}

#trial-faq .accordion summary {
  font-size: 1.1em;
  cursor: pointer;
  outline: none;
  list-style: none;
}

#trial-faq .accordion p, .accordion ul {
  margin: 10px 0 0 0;
  font-size: 0.9em;
  line-height: 1.4;
  
  
}
/*==============================
	toform
==============================*/
section#toform {
  max-width: 780px;
  margin: 4em auto;
  margin-bottom: 0;
  
}
section#toform picture{
  display: block;
  max-width: 500px;
  margin: auto;
  
}
section#toform div p{
  display: block;
  max-width: 780px;
  padding: 40px 50px 30px;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  color: #555;
}


/*==============================
	radio button
==============================*/

/* コンテナ設定: 横並び、最大幅800px、中央寄せ */
.radio-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1em;
  display: flex;
  gap: 5px;
}

/* ラジオボタンを囲む枠 */
.radio-wrapper {
  position: relative;
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #eee;
}

/* 選択時のエフェクト */
.radio-wrapper.selected {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 3px solid #e56c10;
}

/* ラベル＋ラジオボタンのコンテナを枠の上部中央に配置 */
.label-container {
  
  top: 10px;
  left: 50%;
  width: 100%;
  height: 2em;
  line-height: 2em;
  background: #fff;
  padding: 0 10px;
  display: block;
  align-items: center;
  z-index: 2;
}

/* ラジオボタンとテキストの間に余白 */
.label-container input[type="radio"] {
  margin-right: 5px;
}

/* 画像部分のコンテナ */
.image-container {
  position: relative;
}


/* 画像は枠内に収める */
.image-container img {
  width: 100%;
  display: block;
}


.formlp-front-section-form #ctl00_ContentPlaceHolder1_ucInputForm_ctl00{
  display: none;
}
@media screen and (min-width:800px) {
  
.radio-container {
  max-width: 800px;
  display: flex;
  gap: 20px;
}
}

/*==============================
	Footer
==============================*/
#teigaku footer { text-align:center; background:#777; }
#teigaku footer .inline { max-width:1400px; margin:auto; padding:1em; }


/*contact*/
#teigaku footer .contact { display:flex; flex-wrap:wrap; justify-content:center; margin-top:1em; text-align:center; font-size:1.1em; font-weight:600; }
#teigaku footer .contact dt { width:100%; margin-bottom:.8em; letter-spacing:.1em; color:#fff; }
#teigaku footer .contact dd { width:calc(100%/2 - .6em); max-width:16em; }
#teigaku footer .contact dd:nth-of-type(n+2) { margin-left:1.2em; }
#teigaku footer .contact dd a { display:block; padding:.6em 0; background:#fff; border-radius:10em; }
#teigaku footer .contact dd a span { display:inline-block; }
#teigaku footer .contact dd:nth-of-type(2) a span { padding:0 .1em; font-size:.9em; }
#teigaku footer .contact + .info { margin-top:1.2em; text-align:center; font-size:.9em; color:#ddd; }


/*link*/
#teigaku footer .link { margin-top:1.4em; }
#teigaku footer .link li { display:inline-block; margin:.2em; font-feature-settings:'palt'; }
#teigaku footer .link li a { display:block; padding:.2em; color:#fff; }


/*copy*/
#teigaku footer .copyright { margin-top:2em; font-size:12px; color:#fff; }

#index-footer #copy .icon-license { margin-top:1em; font-size:12px; }
#index-footer #copy .icon-license a {text-decoration:none; }


@media screen and (max-width:600px) {
#teigaku footer { font-size:.9em; }
#teigaku footer .contact dd { width:calc(100%/2 - .4em); }
#teigaku footer .contact dd:nth-of-type(n+2) { margin-left:.8em; }
}



/*==============================
	page top
==============================*/
#teigaku a.page-top {
 position:fixed;
 bottom:2em;
 right:2em;
 width:6em;
 margin:auto;
 padding:.2em;
 text-align:center;
 letter-spacing:1px;
 background:rgba(255,255,255,.9);
 border-top:2px solid;
 transition:none;
 z-index:20000;
}
#teigaku a.page-top.cart { right:0; left:0; }


@media screen and (min-width:769px) and (max-width:1024px) {
#teigaku a.page-top { bottom:2vw; right:0; left:0; }
}

@media screen and (max-width:768px) {
#teigaku a.page-top { display:none!important; }
}

/*==============================
	apply-w_button
==============================*/

/*#teigaku div.cart {
  padding: .4em 0;
  background: var(--blue-gd);
}
#teigaku div.cart:nth-of-type(1)  {
  background: var(--orange-gd)
}*/
#teigaku .apply-w_button{
  display: flex;
  justify-content: center;
}
#teigaku .apply-w_button div.cart {
  margin: 0 1em;
    background: none;
}

#teigaku .apply-w_button div.cv b{
   color: #fff;
  background: var(--blue);
}


#teigaku .apply-w_button div.cart {
  position: relative;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  max-width: 350px; 
}

#teigaku .apply-w_button div.cart ::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  -moz-border-radius: 100vh;
  -webkit-border-radius: 100vh;
  border-radius: 100vh;
}

#teigaku .apply-w_button div.cart b,#teigaku div.header.cv b {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 500; 
  border-radius: 100vh;
  border: solid 2px #fff; 
  color: #fff;
  padding: .4em 2em;
  background-color: #FFF;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#teigaku div.header.cv b {
  padding: .4em 1.2em;
  text-align: center;
}
#teigaku .apply-w_button div.cartb{
  background:  var(--blue-gd);
}
#teigaku .apply-w_button div.cart:nth-of-type(1) b{
  background:  var(--orange-gd);
}
#teigaku .apply-w_button div.cart:nth-of-type(2) b{
  background:  var(--blue-gd);
}
#teigaku div.header.cv{
  margin: 0 .4em;
}
#teigaku div.header.cv b{
    border: none;
  border-radius: 5px
}
#teigaku div.header.cv.trial b{
  background:  var(--orange-gd);

}
#teigaku div.header.cv.apply b{
  background:  var(--blue-gd);
  border: none;
  margin-right: 3em;
} 
#teigaku .apply-w_button div.cart:hover b {
  background-color: #FFFF00; 
  transform: translate(4px, 4px);
  transition: all 0.3s ease-in-out;
}
  #teigaku .apply-w_button button.cv{
    z-index: 1000;
  box-shadow:none;
}  

#teigaku .apply-w_button div.cart b,#teigaku div.header.cv b{
  display: inline-block;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); 
}
@media screen and (min-width:800px){
  #teigaku .apply-w_button div.cart b{
    font-size: 1.2em;
  }
}
@media screen and (min-width:1441px) {
  #teigaku div.header.cv{
    display: none;
  }
}



/*==============================
	cart
==============================*/

body .formlp-front-section *{
  max-width: 600px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}
section h2#orderDetailsInput::after {
content:none}
#Contents h2.ttlA{
  margin: 20px auto 0;
  border-bottom:none;
}

#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upOwnerUpdatePanel dt{
  font-size:18px
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upOwnerUpdatePanel dd{
  font-size:18px;}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upOwnerUpdatePanel select{
  font-size:18px;
    padding:10px 0
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upOwnerUpdatePanel dd input{
  width:200px;
  height: 30px;
  padding: 16px 4px;
  
}
#CartList dd.com-name,#CartList dd.com-name-kana{
  line-height: 1.5;
}
.formlp-front-section--header-inner{
  max-width:900px;
  margin:20px auto;
}
#CartList .productList,#CartList .btmbtn.above.cartstep{
  display:none;
}

#Contents div.columnLeft{
  margin:auto;
}
#Contents div.columnRight{
  display: none;
}
.dt-class-12,.dd-class-15,.dt-class-20,.dd-class-23,.dt-class-21,.dd-class-24,.dt-class-23,.dd-class-26,.dt-class-24,.dd-class-27{
  display:none;
}
.formlp-front-section-form div.submain{
  width:auto !important;
  margin:auto;
}
.formlp-front-section-form .columnLeft div.column{
  width: auto !important;
}

.formlp-front-section-form .columnLeft div.column p{
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: .4em;
  line-height: 1.5;
}

.formlp-front-section-form .columnLeft div.column p span.loginid{
  color: #d02929;
}
.formlp-front-section-form .columnLeft div.column h2 img{
display: none;  
}
.formlp-front-section-form .columnLeft{
  width:auto !important;
}
.btmbtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

#CartList dt.com-name{
  content: "";
}

#CartList div.btmbtn{
  border:none
}
#CartList div.btmbtn .btn-success{
  width:400px;
  position: relative;
    color: transparent !important;
  text-shadow: none;
    text-decoration: none;
  padding: 25px 50px;
  background-color: #d02929;
  border-radius: 10em;
  background-image: none;
}
#CartList div.btmbtn .btn-success::after{
  font-size: 1.6em;
  line-height: 1.2em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 10px 50px;
  color:#ffffff;  
  content:"1週間無料お試し\Aを申し込む";
  white-space: pre-wrap;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upOwnerUpdatePanel select {
width:200px;
    line-height: 1.2;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field;
        border-width: 2px;
    border-style: solid;
    border-image: initial;
  border-width: thin;
  padding: 6px 0;

}
.hidden-element,.com_name2,.dep_name2,.telephone2,.none {
  display: none;
}

.zip .fred .error_inline{
  text-align: left;
  font-size: 15px;
  
  
}
/*==============================
	login
==============================*/
#dvUserContents .unit{
  
  width: 780px;
  padding: 20px 50px 10px;
  margin: 50px auto 20px;
}

#CartList .dvLoginLogin div,#CartList .dvLoginLogin p{
  line-height: 1.4;
  margin-bottom: .4em;
} 
#CartList .dvLoginLogin p span.loginid{
  color: #d02929;
}
.dvLoginLogin>p{
  font-size: 1.1em;
  font-weight: bold;
}
#CartList .dvLoginLogin #ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_lbLogin{
  padding: .4em 1em;
  margin: 1em 2em 1em 0;
}

#CartList .dvLoginLogin div a p{
  font-size: .9em;
  display: inline-block;
  text-decoration: underline;
  margin-left: 1em;
}

@media screen and (max-width: 390px) {
  .radio-container .radio-wrapper .label-container span {
    font-size: 0.9em;
  }
}

/*==============================
	member
==============================*/



 .formlp-front-section-form .columnLeft .userBox{
   background:none;
}

 .formlp-front-section-form .columnLeft .userBox div.top{
   background:none;
}
.formlp-front-section-form .columnLeft .userBox div.bottom{
   background:none;
}

/* タイトルエリア */
.formlp-front-section-form #CartList .main{
background-color: #fafafa}


.formlp-front-section-form .columnLeft div.column p.notes{
  font-size: 0.8em;
  text-align: left;
}


.main .intro-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

/* セクションボックス */
.main .form-section {
  background: #fff;
  padding: 24px 20px;
  margin-bottom: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ラベル＋フィールド構成 */
.main dt {
  font-weight: 500;
  font-size: 14px;
  color: #111;
  margin-bottom: 4px;
}

.main dd {
  margin-bottom: 5px;
}
.main dd.email1{
 margin-bottom: 0;
}
/* 入力フィールド */
.main input[type="text"],
.main input[type="email"],
.main input[type="password"],
.main input[type="tel"],
.main select,
.main textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.3s ease;
}

.userBox dt{
  padding-top: 10px;
}
.fred.required {
  display: inline-flex;
  font-size: .6em;
  padding: 2px 6px;
  border: #E31515 solid 1px;
  border-radius: 2px;
   align-items: center;
  justify-content: center;
  line-height: 1; 
  vertical-align: middle; 
}
.main input:focus,
.main select:focus,
.main textarea:focus {
  border-color: #000;
  outline: none;
}

/* ラジオ・チェックボックス */
.main input[type="radio"],
.main input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 6px;
  accent-color: #000;
}

/* サブメッセージ */
.main .formCaution,
.main .notes {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

/* エラーメッセージ */
.main .error_inline {
  color: red;
  font-size: 12px;
  margin-top: 4px;
}

/* ボタン */
.main .form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.main .btn,
.main input[type="submit"] {
  padding: 8px 30px;
  font-size: 16px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
  margin: 0 10px;
}

.main .btn.confirm {
  background: #000;
  color: #fff;
}

.main .btn.confirm:hover {
  background: #444;
}

.main .btn.cancel {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
}

.main .btn.cancel:hover {
  border-color: #999;
}

/* スマホ対応 */
@media screen and (max-width: 600px) {
  .main {
    padding: 40px 16px;
  }

  .main .form-actions {
    flex-direction: column;
    gap: 12px;
  }

  .main .btn {
    width: 100%;
  }
}


/*==============================
	terms sp
==============================*/

#dvUserBox h3{
  margin-top: 2em;
}
#dvUserBox #dvUserRegistRegulation p.terms-intro{
  font-size: .8em;  
}
/*==============================
	terms PC
==============================*/

#dvUserBox h4{
  margin-top: 1.4em;
}
#dvUserBox #dvUserRegistRegulation li{
  font-size: .8em; 
}
#dvUserBox #dvUserRegistRegulation li{
  font-size: .8em; 
}
#dvUserBox #dvUserRegistRegulation .inquiry{
  font-size: .8em; 
  font-weight: 500;
}
/*==============================
	cart sp
==============================*/



.cart-unit #ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upProductListUpdatePanel,.shipping,.order-unit.order-payment{
  display: none;
}
.wrap-order{
  margin: 0 auto;
  max-width: 600px;
  padding:1em;
}
#ctl00_ContentPlaceHolder1_ucInputForm_upCartListItemsCount{
 display: none; 
}
.order-unit .order-form dd input {
  margin-top: 0;
}

.order-unit h2{
  background-color: #fff;
  color:#333;
  text-align: center;
  font-size: 1.2em;
}
.order-unit .order-form dt {
  background-color: #fafafa;
  padding: .4em 0 0;
}
.order-unit .order-form dd{
  padding: 0;
}
.order-form .zip .btn-add-search{
  display: inline-block;
  width:auto;
  line-height: 0.6;
  vertical-align: middle;
  border-radius: 50px;
  background-color: #333;

  
}
.order-unit .owner{
    padding: 1.2em .8em;
    margin-bottom: 24px;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
  background-color: #fafafa;
}

.order-unit .owner p{
line-height: 1.2;
}
.order-unit .owner p .loginid{
   color: #d02929;
    font-weight: bold;

}

.order-footer .button-next #ctl00_ContentPlaceHolder1_ucInputForm_UpdatePanel1 .btn {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
  text-shadow: none;
  text-decoration: none;
  padding: 30px 40px;
  background-color: #d02929;
  border-radius: 10em;
font-size: 1.4em;
  background-image:none;
color: transparent !important;
}
.order-footer .button-next #ctl00_ContentPlaceHolder1_ucInputForm_UpdatePanel1 .btn::after{
font-size: 1em;
line-height: 1.2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 15px 20px;
color:#ffffff;  
content:"1週間無料お試し\Aを申し込む";
white-space: pre-wrap;
}

@media (max-width: 400px) {
  .order-unit .order-form dd.com-name input,  .order-unit .order-form dd.name input  {
    display: block;
    width:100%;
    margin-bottom: .2em;
  }
}

#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_dvUserPassword .order-unit .regulation p,#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_dvUserPassword .order-unit .regulation h4{
text-align: left;  
}
.order-unit .regulation li{
  margin: 0 auto 0 0;
  text-align: left;
}

#CartList div.btmbtn ul{
  position: relative;
  margin-bottom: 6em;
}

#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_tbUserPassword{
  margin-bottom: .2em;
}
/*==============================
	その他
==============================*/

#teigaku .apply-w_button button{
  margin: 0 .3em;
}
#teigaku .apply-w_button button.cv a:hover {
   color: #fff;
    opacity: 0.5;
}
#teigaku .apply-w_button button.cv a {
  width:11em;
}
@media screen and (min-width:400px) {
#teigaku .apply-w_button button.cv a {
  margin: 0 .5em;
  }}
  @media screen and (min-width:500px) {
#teigaku .apply-w_button button.cv a {
  font-size: 1.2em;
}
    #teigaku .apply-w_button button{
  margin: 0 .8em;
}
}
@media screen and (min-width:800px) {
#teigaku .apply-w_button button.cv a {
  font-size: 1.4em
}
}



/*==============================
	footer
==============================*/
#lp-footer p { text-align:center; }
#lp-footer h3 { margin-bottom:1em; padding:.8em 1em; text-align:center; font-size:1.06em; font-weight:500; letter-spacing:1px; background:#eee; }
#lp-footer h3:nth-of-type(n+2) { margin-top:2em; }

#lp-footer .contact { padding:3em 0; }
#lp-footer .contact p { line-height:1.6em; }
#lp-footer .contact p:first-of-type { font-size:1.1em; letter-spacing:.1em; }
#lp-footer .contact p:nth-of-type(n+2) { margin-top:1em; }
#lp-footer .contact p a { padding:0 .1em; text-decoration:underline; color:var(--link); }
#lp-footer .contact p a[href*='tel'] { display:inline-block; margin:.2em auto; text-decoration:none; font-size:1.4em; letter-spacing:.1em; color:var(--text); }
#lp-footer .contact button { display:block; margin:1em auto; background:none; border:none; }
#lp-footer .contact button a { display:block; padding:.8em 1.6em; font-size:1.06em; background:#eee; border-radius:10em; }

#lp-footer .store { margin:auto; padding:0 1em; overflow-x:auto; white-space:nowrap; }
#lp-footer .store li { display:inline-block; width:12em; vertical-align:top; white-space:normal; }
#lp-footer .store li:nth-of-type(n+2) { margin-left:.6em; }
#lp-footer .store img { display:block; width:100%; margin:.4em auto; }
#lp-footer .store img + p { text-align:left; font-size:.9em; line-height:1.4em; }
#lp-footer .store a { position:relative; margin-left:4px; text-decoration:underline; color:var(--link); }

#lp-footer > dl { display:flex; flex-wrap:wrap; align-items:stretch; width:calc(100% - 1em); max-width:56em; margin:1em auto; text-align:left; font-feature-settings:'palt'; }
#lp-footer > dl > * { padding:1em; }
#lp-footer > dl > *:nth-child(n+3) { margin-top:.2em; }
#lp-footer > dl dt { width:8em; background:#f5f5f5; }
#lp-footer > dl dd { width:calc(100% - 8em); background:#fafafa; }
#lp-footer > dl dd * { text-align:left; font-size:.9em; line-height:1.6em; }
#lp-footer > dl dd p { text-align:left; }
#lp-footer > dl a { text-decoration:underline; color:var(--link); }

#lp-footer .link { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; border-top:1px solid; }
#lp-footer .link a { display:block; padding:1.2em .2em; text-align:center; color:var(--text); }

#lp-footer .copy {	margin:auto;	padding:1.4em 0;	text-align:center;	font-size:.9em;	color:#fff;	background:rgba(0,0,0,.6);	box-sizing:border-box; }
#lp-footer .copy ul { display:flex; justify-content:center; margin: 0 auto; }
#lp-footer .copy li:nth-of-type(n+2) { border-left:1px solid; }
#lp-footer .copy li a { margin:0 1em; color:#fff; }
#lp-footer .copyright span { font-family:var(--font-logo); }


/*cartbtn*/
a.cart-btn {
 position:fixed;
 bottom:4em;
 right:1em;
 width:12em;
 padding:1em 0;
 text-align:center;
 font-size:1.2em;
 font-weight:600;
 letter-spacing:.1em;
 color:#fff;
 background:rgba(228,84,90,.9);
 border:2px solid rgb(228,84,90);
 border-radius:4em;
 z-index:10;
}
a.cart-btn:hover { color:rgb(228,84,90); background:none; }


/*pagetop*/
a.page-top { position:fixed; bottom:0; right:0; transition:none; z-index:10; }
a.page-top:before { display:block; content:''; border-style:solid; border-width:0 0 4em 4em; border-color:transparent transparent rgba(0,0,0,.8) transparent; }
a.page-top svg { position:absolute; bottom:.6em; right:.6em; width:1.2em; fill:#fff; stroke:#fff; transition:.4s; transform:rotate(-90deg); }
a.page-top:hover svg { bottom:.8em; }


@media screen and (min-width:1025px) {
#lp-footer .link li { width:calc(100%/4); border-left:1px solid; }
#lp-footer .link li:nth-of-type(4n+1) { border-left:none; }
#lp-footer .link li:nth-of-type(n+5) { border-top:1px solid; }
}

@media screen and (max-width:1024px) {
#lp-footer .link li { width:calc(100%/2); }
#lp-footer .link li:nth-of-type(2n+2) { border-left:1px solid; }
#lp-footer .link li:nth-of-type(n+3) { border-top:1px solid; }
}

@media screen and (min-width:769px) {
#lp-footer > dl { margin-bottom:2em; }
}

@media screen and (max-width:768px) {
#lp-footer > dl dt { width:6em; }
#lp-footer > dl dd { width:calc(100% - 6em); }
a.cart-btn { bottom:.4em; left:0; right:0; margin:auto; font-size:1.1em; }
}

@media screen and (max-width:425px) {
#lp-footer { font-size:.9em; }
#lp-footer .contact { padding:2em 0; }
#lp-footer > dl > * { padding:.8em .6em; }
a.cart-btn { font-size:1em; }
}

section#lp-footer{
  margin-bottom: 0;
}
.flexbox{
  width: auto;
}



/* ====================================
   フォームセクション全体の基本スタイル
==================================== */

#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_tbOwnerName1,#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_tbOwnerNameKana1{
  margin-bottom: .2em;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_Div2.order-unit {
  background: #fff;
  padding: 1.2em .8em;
  margin-bottom: 24px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  box-sizing: border-box;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_Div2.order-unit .loginid{
  color: #d02929;
  font-weight: bold;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_Div2.order-unit small{
  display: block;
  text-align: left;
}


/* タイトル */
.order-unit h2, .order-unit h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #111;
}

/* フォーム全体 */
.order-form {
  display: block;
  width: 100%;
}

.order-form dt {
  font-weight: 500;
  font-size: 14px;
  color: #111;
  margin-bottom: 4px;
  padding-top: 12px;
}

.order-form dd {
  margin-bottom: 12px;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_Div2 .order-footer div.button-next {
  max-width: 100px;
  margin: 1em auto;}
.order-footer div.button-next .btn
{
  padding: .5em;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_Div2 p{
  line-height: 1.4;
}
/* 入力欄 */
.order-form input[type="text"],
.order-form input[type="email"],
.order-form input[type="password"],
.order-form input[type="tel"],
.order-form select,
.order-form textarea,
.order-form .mail-domain-suggest {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.3s ease;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus {
  border-color: #000;
  outline: none;
}

/* ラジオボタン・チェックボックス */
.order-form input[type="radio"],
.order-form input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 6px;
  accent-color: #000;
}

/* 必須マーク */
.require,
.fred.required {
  display: inline-block;
  font-size: 0.6em;
  padding: 2px 6px;
  border: 1px solid #E31515;
  color: #E31515;
  border-radius: 2px;
  line-height: 1;
  vertical-align: middle;
}

/* エラーメッセージ */
.attention,
.error_inline {
  color: red;
  font-size: 12px;
  margin-top: 4px;
}

/* 補足メッセージ */
.notes,
.formCaution,
.order-form small {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}



section#plan{
  margin-bottom: 0;
}
section#carousel{
  margin-bottom: 4rem;
}
#carousel .carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  pointer-events: none;
  touch-action: none;
}

#carousel .carousel-track {
  display: flex;
  width: max-content;
  will-change: transform;
  gap: 0;
}

#carousel .carousel-track img {
  width: calc(100vw / 2.2); /* スマホ：2.2枚表示 */
  max-height: 300px;
  object-fit: cover;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}

@media screen and (min-width:769px) {
#carousel .carousel-track img {
  max-height: 400px;
  width: calc(100vw / 3.2); }
}



#partner .carousel-container {
      overflow: hidden;
      width: 100%;
      margin-bottom: 4rem;
    }

#partner .carousel-grid {
      display: grid;
      grid-template-rows: repeat(2, 1fr); /* 2段に変更 */
      height: 120px; /* 2段 × 高さ120px */
    }

#partner .carousel-track {
      display: flex;
      animation: scroll 40s linear infinite; /* ゆっくりスクロール */
    }

#partner .carousel-row {
      display: flex;
    }

#partner .carousel-item {
      width: 100px;
      height: 70px;
      flex-shrink: 0;
      padding: 0 1em;
    }
@media screen and (min-width:769px) {
  #partner .carousel-track {

      display: flex;
      animation: scroll 60s linear infinite; /* ゆっくりスクロール */
    }
  #partner .carousel-grid {
      height: 180px; /* 2段 × 高さ120px */
    }
  #partner .carousel-item {
      width: 160px;
    }
}
#partner .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }





/* セクション全体の背景 */
.feature-section {
  background: #f3f1eb;
  padding: 0 20px 48px;
}
.feature-container {
  max-width: 1000px;
  margin: 0 auto;
}

.feature-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP：2列 */
  gap: 20px; /* 余裕あるスペース */
}

/* 各カード */
.feature-card figure {
  margin: 0;
  background: #ffffff; /* 説明背景は白 */
  border-radius: 4px;
  overflow: hidden; /* 角丸を画像にも反映 */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); /* 上品で控えめな影 */
}



/* 画像は比率を統一し、はみ出しをトリム */
.feature-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;   /* 統一感のある比率 */
  object-fit: cover;      /* 中央トリミング */
}

/* 説明（白背景） */
.feature-card figcaption {
  padding: 10px;
  background: #ffffff;
}

.feature-card h3 {
  font-size: .8rem;
  line-height: 1.5;
  color: #111827;
  font-weight: 500;
  letter-spacing: .02em;
}

.feature-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.8;
  font-size: 0.92rem;
}

/* ===== PC：3列（3×2になる） ===== */
@media (min-width: 960px) {
  .feature-section {
    padding: 64px 24px;
  }
  .feature-grid {
    grid-template-columns: repeat(3, 1fr); /* PC：3列 */
    gap: 28px; /* 余裕を広めに */
  }
  .feature-card figcaption {
    padding: 18px 18px 20px;
  }
  .feature-card h3 {
    font-size: 1.05rem;
  }
  .feature-card p {
    font-size: 0.95rem;
  }
}
/* 1〜6番だけ “わずかに” ずらす（80ms刻みなど）*/
.feature-section .iv-fade.scrollin:nth-child(1) { transition-delay:   0ms; }
.feature-section .iv-fade.scrollin:nth-child(2) { transition-delay: 100ms; }
.feature-section .iv-fade.scrollin:nth-child(3) { transition-delay: 200ms; }
.feature-section .iv-fade.scrollin:nth-child(4) { transition-delay: 300ms; }
.feature-section .iv-fade.scrollin:nth-child(5) { transition-delay: 400ms; }
.feature-section .iv-fade.scrollin:nth-child(6) { transition-delay: 500ms; }




/*==============================
	aboutus

==============================*/
#lp-footer #aboutus a { color:var(--link); border-bottom:1px solid; }

#lp-footer #aboutus { width:calc(100% - 4em); margin:0 auto 1.6em; text-align:center; line-height: 1.6; }
#lp-footer #aboutus li { display:inline-block; margin-bottom:1em; }
#lp-footer #aboutus li:nth-of-type(n+2) { margin-left:1em; }
#lp-footer #aboutus li a { display:block; padding:.2em; }

#lp-footer #aboutus div { width:calc(100% - 2em); max-width:800px; margin:auto;text-align: left;}
#lp-footer #aboutus div:nth-of-type(n+2) { margin-top:1.6em; padding-top:1.6em; border-top:1px dashed; }
#lp-footer #aboutus div h3 { text-align: left; margin-bottom:.6em; font-size:1.2em; letter-spacing:.1em; color:var(--aromic); background: none;padding:.4em 0;font-weight: 600;}
#lp-footer #aboutus div p, #aboutus div ul, #aboutus div ol, #aboutus div dl { line-height:1.4em;text-align: left; }
#lp-footer #aboutus div p:nth-of-type(n+2), #aboutus div li:nth-of-type(n+2), #aboutus div dd + dd { margin-top:.4em; }
#lp-footer #aboutus div dt:nth-of-type(n+2), #aboutus div *:not(h3) + dl { margin-top:.6em; }
#lp-footer #aboutus div ol li { margin-left:1em; }
#lp-footer #aboutus div dt { margin-bottom:.2em; font-weight:600; }
#lp-footer #aboutus dd{
  line-height: 1.4;
}
[class*=" cp-menu"]{
  
}

/*==============================
	message
==============================*/
#lp-footer #message { width:calc(100% - 4em); max-width:62em; margin:0 auto 4em; padding:3em 2em 2em; box-shadow:.4em .4em .8em rgba(0,0,0,.1); border:1px solid #eee; border-radius:2em;background: none; }
#lp-footer #message.ceo{max-width: 800px;padding:3em;} 
#lp-footer #message h2 { margin:0 auto 1.2em; text-align:center; font-size:1.2em; letter-spacing:.1em; color:var(--aromic);font-family: "EB Garamond", "Noto Serif JP", "Zen Old Mincho", "游明朝体", "Yu Mincho",
"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho",
serif;  }
#lp-footer #message p { font-size:.92em; line-height:1.6em;text-align: left; }
#lp-footer #message p.ceo { max-width: 600px;margin: auto;}
#lp-footer #message p + p { margin-top:.6em; }
#lp-footer #message p span { font-family:var(--font-logo); }
#lp-footer #message .ceo { display:flex; justify-content:flex-end; align-items:flex-end; margin-top:1em; }
#lp-footer #message .ceo p { display:inline-block; text-align:right; color:var(--text); }
#lp-footer #message .ceo img { width:20vw; max-width:120px; margin-left:1em; }


@media screen and (max-width:768px) {
#lp-footer #message { width:calc(100% - 2em); }
}

@media screen and (max-width:425px) {
#lp-footer #message { margin:auto; padding:2em 1em 1em; border-radius:1em; }
#lp-footer #message h2 { margin-bottom:1em;}
}
#lp-footer #message h2::after{
  content: none;
}