@charset "utf-8";

html{font-size:10px;}
body{
background:#fff;
}
#contents {
color: #205339;
font-family: "Noto Sans JP",  sans-serif;
font-feature-settings : "palt";
font-size:1.6rem;
line-height: 1.7em;
font-weight: 600;
width: 100%;
padding: 0 2rem;
margin: 0 auto ;
min-height: 400px;
/* overflow: hidden; */
position: relative;
}
footer{
  margin-top: 6rem;
font-family: "Noto Sans JP",  sans-serif;
}

#contents a {
  transition:all .3s;
}
#contents a{
  text-decoration: none;
color: #205339;
background-color: #add1bf;
border-radius:.6rem;
display:inline-block;
padding: 2rem 3rem 2.3rem;
line-height: 1.3em;
}

#contents section{
max-width: 146rem;
min-width: 124rem;
margin: 0 auto;
padding: 9rem 0;
}

#contents .bg{
background-color: #F3EFE7;
}


#contents h2{
  font-size: 3.5rem;
  line-height: 1.5em;
letter-spacing:0.1em;
}
#contents h3{
  font-size: 2.3rem;
  line-height: 1.5em;
letter-spacing:0.05em;
}
#contents .head{
  background:url(/method/images/mainimage.jpg) no-repeat center center;
  background-size: cover;
  aspect-ratio:1360 / 920;
  position:relative;
padding: 12rem 0;
}

#contents .head h1{
  position:absolute;
  top:2.6rem; left: 50%;
  transform:translateX(-50%);
  display:block;
  border-bottom: 1px solid;
  font-size: 1.8rem;
letter-spacing:0.1em;
  padding: .6rem;
}
#contents .head .title{
  position:absolute;
  top:50%; left: 50%;
  transform:translate(-50% , -50%);
  font-size: 2.8rem;
  width: 100%;
}
#contents h2+p{
  margin-top: 3rem;
}
#contents h3+p{
  margin-top: 2.2rem;
}
#contents .head .title h2{
  font-size: 5.6rem;
letter-spacing:0.1em;
  margin-top: 3.6rem;
  margin-bottom: 16rem;
}
#contents .head .link{
  position:absolute;
  bottom: 4rem; left: 4rem;
  z-index: 50;
}
#contents .head .link a{
  font-size: 2.1rem;
  width: 21rem; height: 21rem;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 0;
  line-height: 1.4em;
}
#contents .worry{
  text-align:center;
  padding-bottom: 16rem;
}
#contents .worry ul{
  margin-top: 6rem;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
#contents .worry ul img{
  margin-bottom: 1em;
  width: 22.6rem;
}
#contents .worry ul li{
  width: 28rem;
}
#contents .trap .link a{
  margin-top: 3.6rem;
  font-size: 2.1rem;
  border-bottom: .5rem solid #7EA591;
  padding: 3rem 3.3rem;
}
#contents .review{padding-bottom:6rem;}
#contents .review h2{
  text-align:center;
  margin-bottom:7rem;
}
#contents .review .block-review{
  background-color: #fff;
  border-radius:1rem;
  width: 100rem;
  padding: 3rem 4rem;
  margin:4rem auto
}
#contents .review .block-review img{
  width: 19.6rem;
}
#contents .contact h2{text-align:center;}
#contents .contact .link a{
  margin-top: 9rem;
  font-size: 2.5rem;
  border-bottom: .5rem solid #7EA591;
  padding: 3rem 6rem;
}
#contents .contact{padding-bottom:13rem}






.step{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:space-between;
}
.step .text{
  width:52rem;
}
.step .image{ flex: 1;}
.step .image img{width:82%; margin: 0 auto}


.trap,
.end{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-direction:row-reverse;
}
.trap .text,
.end .text{
  width:43%;
  margin-left: 8%;
}
.trap .image,
.end .image{flex: 1;}
.end .image img,
.trap .image img{width:88%;}

.review .block-review {
  display:flex;
  align-items:center;
}

.review .block-review .text {
  margin-left: 5rem;
  flex:1;
}
#contents .contact {text-align:center;}