@charset "UTF-8";

/* 共通 */

@media screen and (min-width:768px) {
  .sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc_only {
    display: none !important;
  }
}

body,
body .wrapper {
  background: #fff;
}

main {
  background: #fff;
  width: auto;
  max-width: 1360px;
  margin: 0 auto;
  color: #707070;
}

img {
  vertical-align: bottom;
}

/* section{
  padding: 75px 0 95px;
}

[data-browse-mode="S"] section{
  padding: 70px 0 90px;
} */

h1 {
  margin: 0;
}

h2 {
  display: grid;
  place-items: center;
  width: auto;
  max-width: 1360px;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(36px, 3.316vw, 50px);
  color: #fff;
  text-align: center;
  background: none;
}
h2 span {
  display: block;
}

.ttl_line {
	display: flex;
	align-items: center;
  color: #04105F;
  font-size: clamp(30px, 8vw, 40px);
}
.ttl_line::before,
.ttl_line::after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さ */
  background: #01235C; /* 線の色 */
  margin:0 2em 0 0; /* 文字と線の余白 */
}
.ttl_line::after {
  margin:0 0 0 2em;
}

@media screen and (max-width: 767px) {
  h2 {
    width: 100%;
    max-width: 780px;
    font-size: clamp(22px, 5.88vw, 36px);
  }
  .ttl_line {
    font-size: clamp(26px, 2.28vw, 32px);
  }
}

p {
  font-size: 16px;
  font-weight: normal;
}

[data-browse-mode="S"] p {
  font-size: 15px;
}

a{
  transition: all .3s ease;
}

a:hover{
  opacity: .7;
  text-decoration: none;
}

/* mv */
.mv_area{
  margin-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .mv_area{
    margin-bottom: 40px;
  }
}

/* problem */
.problem h2 {
  aspect-ratio: 1360 / 241;
  background: url(../../../img/usr/freepage/clothes/bg_ttl01_pc.png) 0 0 no-repeat;
  background-size: cover;
  margin-bottom: 65px;
}
.problem h2 span {
  margin-top: -4%;
}
.problem .trouble_block {
  text-align: center;
  margin-bottom: 55px;
}
.problem .trouble_block figcaption {
  font-family: "Noto Serif JP", serif;
  font-size: 40px; /*clamp(40px, 3.63vw, 60px);*/
  font-weight: 600;
  color: #04105F;
  margin-top: 125px;
}
.problem .trouble_block figcaption span {
  font-size: 36px; /*clamp(36px, 3.316vw, 50px);*/
}

@media screen and (max-width: 767px) {
  .problem h2 {
    aspect-ratio: 390 / 121;
    background: url(../../../img/usr/freepage/clothes/bg_ttl01_sp.png) 0 0 no-repeat;
    background-size: cover;
    margin-bottom: 60px;
  }
  .problem .trouble_block {
    margin-bottom: 50px;
  }
  .problem .trouble_block figcaption {
    font-size: 30px; /*clamp(30px, 8vw, 40px);*/
    line-height: 1.4;
    margin-top: 60px;
  }
  .problem .trouble_block figcaption span {
    font-size: 26px; /*clamp(24px, 6.4vw, 30px);*/
  }
}

/* solution */
.solution h2 {
  aspect-ratio: 136 / 25;
  background: url(../../../img/usr/freepage/clothes/bg_ttl02_pc.png) 0 0 no-repeat;
  background-size: cover;
  margin-bottom: 80px;
  font-size: 40px; /*clamp(34px, 2.658vw, 40px);*/
}
.solution h2 em {
  white-space: nowrap;
  font-style: normal;
}
.solution ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 65px;
}
.solution li {
  width: 29.4%;
}
.solution li p {
  text-align: center;
  margin-top: 45px;
  font-size: 18px;
}
@media screen and (min-width:480px) and ( max-width:767px) {
  .solution h2 {
    aspect-ratio: 136 / 25;
    background: url(../../../img/usr/freepage/clothes/bg_ttl02_pc.png) 0 0 no-repeat;
    background-size: cover;
    margin-bottom: 60px;
    font-size: 30px; /*clamp(24px, 6.4vw, 30px);*/
  }
}
@media screen and (max-width:479px) {
  .solution h2 {
    aspect-ratio: 13 / 8;
    background: url(../../../img/usr/freepage/clothes/bg_ttl02_sp.png) 0 0 no-repeat;
    background-size: cover;
    margin-bottom: 60px;
    font-size: 30px;/*clamp(24px, 6.4vw, 30px);*/
    line-height: 1.4;
  }
  .solution h2 em {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .solution ul {
    flex-direction: column;
  }
  .solution li {
    width: 100%;
    max-width: 365px;
    margin: 0 auto 45px;
    padding:0 12px
  }
  .solution li:last-of-type {
    margin-bottom: 0;
  }
  .solution li p {
    margin-top: 16px;
  }
}

/* declaration & plan */
.important {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: #F1F8FF;
  padding: 80px 0;
}
.declaration,
.plan {
  width: auto;
  max-width: 1360px;
  margin: 0 auto;
}
.declaration {
  font-family: "Noto Serif JP", serif;
  margin-bottom: 90px;
}
.declaration h2 {
  background: none;
  color: #04105F;
  font-weight: 600;
  margin-bottom: 36px;
}
.declaration p {
  text-align: center;
  font-size: 24px; /*clamp(26px, 2.28vw, 32px);*/
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1em;
}
.declaration p:last-of-type {
  margin-bottom: 0;
}
.declaration p em {
  display: inline-block;
  padding: 0 0 0 0.5em;
  background: linear-gradient(transparent 60%, #C3D8FB 0%);
  font-style: normal;
}
.declaration p:last-of-type {
  margin-bottom: none;  
}
.plan h2 {
  aspect-ratio: 37 / 4;
  background: url(../../../img/usr/freepage/clothes/bg_ttl02_pc.png) 0 0 no-repeat;
  background-size: cover;
  font-size: clamp(34px, 2.658vw, 40px);
  margin-bottom: 80px;
}
.plan .plan_flex {
  display: flex;
  justify-content: space-between;
}
.plan .plan_flex dl {
  width: 48.5%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.plan .plan_flex dl dt {
  background: #A18759;
  border: solid 4px #A18759;
  border-bottom: 0;
  border-radius: 50px 50px 0 0;
  padding: 24px 0;
  color: #fff;
  font-size: 24px; /*clamp(22px, 1.972vw, 30px);*/
  font-weight: 500;
}
.plan .plan_flex dl dd {
  display: grid;
  place-content: center;
  ace-items: center;
  background: #fff;
  border: solid 4px #A18759;
  border-top: 0;
  border-radius: 0 0 50px 50px;
  flex-grow: 1;
  padding: 70px 0;
}
.plan .plan_flex dl dd p {
  font-size: 20px; /*clamp(16px, 1.456vw, 24px);*/
  margin-bottom: 1em;
}
.plan .plan_flex dl dd p:last-of-type {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .important {
    padding: 40px 0;
  }
  .declaration {
    margin-bottom: 75px;
  }
  .declaration h2 {
    font-size: 32px; /*clamp(32px, 8.535vw, 36px);*/
    margin-bottom: 35px;
  }
  .declaration p {
    font-size: 20px; /*clamp(20px, 5.34vw, 24px);*/
    line-height: 1.8;
  }
  .declaration p em {
    padding: 0;
    background: none;
  }
  .declaration p span {
    display: block;
    margin: 0 auto;
  }
  .declaration p em span {
    display: inline-block;
    padding: 0 0.2em;
    background: linear-gradient(transparent 60%, #C3D8FB 0%);
  }
  .declaration p em span:last-of-type {
    padding: 0 0 0 0.2em;
  }
  .plan h2 {
    aspect-ratio: 39 / 19;
    background: url(../../../img/usr/freepage/clothes/bg_ttl02_sp.png) 0 0 no-repeat;
    background-size: cover;
    font-size: clamp(24px, 6.4vw, 30px);
    margin-bottom: 45px;
  }
  .plan .plan_flex {
    flex-direction: column;
    padding: 0 12px;
  }
  .plan .plan_flex dl {
    width: 100%;
    margin-bottom: 40px;
  }
  .plan .plan_flex dl:last-of-type {
    margin-bottom: 0;
  }
  .plan .plan_flex dl dt,
  .plan .plan_flex dl dd {
    border-width: 3px;
  }
  /*.plan .plan_flex dl dt {
    font-size: clamp(24px, 6.4vw, 30px);
  }*/
  .plan .plan_flex dl dd {
    padding: 45px 0;
  }
  /*.plan .plan_flex dl dd p {
    font-size: clamp(20px, 5.34vw, 24px);
  }*/
}


/* reason */
.reason {
  padding: 100px 0;
}
.reason h2 {
  color: #04105F;
  margin-bottom: 80px;
}
.reason ul {
  display: flex;
  justify-content: space-between;
}
.reason ul li {
  width: 22%;
}
.reason ul li figure {
  margin: 0 auto 28px;
  width: 80%;
  aspect-ratio: 1; 
  border-radius: 50%;
  background: #01235C;
  display: grid;
  place-items: center;
}
.reason ul li figure img {
  width: 50%;
  height: auto;
}
.reason ul li:nth-child(2) figure img {
  width: 44%;
}
.reason ul li:nth-child(3) figure img {
  width: 58%;
}
.reason ul li:nth-child(4) figure img {
  width: 75%;
}
.reason p {
  font-size: 18px;
}
.reason p.reason_point {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.reason p.reason_ttl {
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  color: #fff;
  background: #A18759;
  padding: 8px 0;
  margin-bottom: 20px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .reason h2 {
    font-size: clamp(32px, 8.535vw, 36px);
    margin-bottom: 60px;
  }
  .reason ul {
    flex-direction: column;
    margin: 0 12px;
  }
  .reason ul li {
    width: 100%;
    margin-bottom: 50px;
  }
  .reason ul li:last-of-type {
    margin-bottom: 0;
  }
  .reason ul li figure {
    width: 60%;
  }
}

/* price */
.price {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: #F1F8FF;
  padding: 80px 0;
}
.price_inner {
  width: auto;
  max-width: 1360px;
  margin: 0 auto;
}
.price table {
  width: 100%;
  color: #363C43;
  /*font-size: 28px;*/
  margin: 60px 0;
}
.price table thead {
  border-bottom: solid 1px #E3E9EC;
}
.price table tbody {
  border-bottom: solid 1px #fff;
}
.price table thead tr *,
.price table tbody tr * {
  width: 33%;
  padding-top: 0.5em;
}
.price table th {
  font-size: 20px;
}
.price table td {
  font-size: 24px;
}
.price table tbody tr:last-of-type * {
  padding-bottom: 0.5em;
}
.price table thead th,
.price table tbody td {
  font-weight: 700;
  color: #333;
  text-align: right;
}
.price table thead th {
  color: #4992E1;
  padding-bottom: 0.5em;
}
.price table thead th:last-of-type,
.price table tbody tr td:last-of-type {
  color: #BEB419;
}
.price table thead th,
.price table tbody tr td {
  padding-right: 1em;
}
.price table thead th:first-of-type,
.price table tbody tr th {
  padding-left: 1em;
}
.price_btn {
  display: grid;
  place-items: center;
  width: 500px;
  color: #fff;
  background: #04105F;
  border-radius: 100vh;
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  height: 90px;
}
@media screen and (max-width: 767px) {
  .price {
    padding: 60px 0;
  }
  .price table{
    /*font-size: 14px;*/
    margin: 25px 0;
  }
  .price table thead tr *,
  .price table tbody tr * {
    width: 28%;
  }
  .price table th {
    font-size: 14px;
  }
  .price table td {
    font-size: 20px;
  }
  .price table thead th:first-of-type,
  .price table tbody tr th {
    width: 44%;
  }
  .price table tbody tr th {
    text-align: left;
  }
  .price_btn {
    width: 250px;
    height: 50px;
    font-size: 20px;
  }
}

/* step */
.step {
  padding: 80px 0;
}
.step h2{
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .step {
    padding: 60px 0;
  }
  .step h2{
    margin-bottom: 40px;
  }
}

/* reccomnd */
.reccomnd {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: #F1F8FF;
  padding: 80px 0;
}
.reccomnd_inner {
  width: auto;
  max-width: 1360px;
  margin: 0 auto;
}
.reccomnd h2 {
  font-size: clamp(30px, 8vw, 40px);
  color: #01235C;
  margin-bottom: 60px;
}
.reccomnd h2 span {
  display: inline-block;
  position: relative;
  padding: 0 1.5em;
}
.reccomnd h2 span::before,
.reccomnd h2 span::after {
  display: inline-block;
  position: absolute;
  bottom: 0;
}
.reccomnd h2 span::before {
  content:"＼";
  left: 0;
}
.reccomnd h2 span::after {
  content:"／";
  right: 0;
}
.reccomnd ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.reccomnd ul li {
  width: 23.5%;
}
.reccomnd ul li p {
  font-size: 20px; /*clamp(16px, 1.456vw, 24px);*/
  font-weight: 600;
  color: #333;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .reccomnd h2 {
    font-size: clamp(24px, 6.4vw, 30px);
    margin-bottom: 40px;
  }
  .reccomnd h2 span{
    padding: 0 2em;
  }
  .reccomnd h2 span::before,
  .reccomnd h2 span::after {
    font-size: clamp(37.5px, 10vw, 50px);
  }
  .reccomnd ul {
    flex-direction: column;
    margin: 0 34px;
  }
  .reccomnd ul li {
    width: 100%;
    margin-bottom: 50px;
  }
  .reccomnd ul li:last-of-type {
    margin-bottom: 0;
  }
  .reccomnd ul li p {
    /*font-size: clamp(20px, 5.34vw, 24px);*/
    margin-top: 25px;
  }
}

/* voice */
.voice {
  padding: 80px 0;
}
.voice h2 {
  margin-bottom: 60px;
}

#revico-comment .bx-wrapper {
	position: relative;
	display: flex;
	order: 1;
}
#revico-comment .bx-wrapper .bx-controls-direction a {
	width: 30px;
	height: 30px;
	margin-top: -30px;
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	position: absolute;
	top: 50%;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	text-indent: -9999px;
	color: #fff;
	border-radius: 50%;
	background-color: #3782d4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}
#revico-comment .bx-wrapper .bx-controls-direction a.bx-prev {
	left: -24px;
	background-image: url(../../../img/usr/common/ico_arrow_l.png);
}
#revico-comment .bx-wrapper .bx-controls-direction a.bx-next {
	right: -24px;
	background-image: url(../../../img/usr/common/ico_arrow_r.png);
}
#revico-comment .bx-wrapper .bx-controls-direction a.disabled {
	display: none !important;
}

@media screen and (max-width: 767px) {
  .voice {
    padding: 60px 0;
  }
  .voice h2 {
    margin-bottom: 40px;
  }
  #revico-comment .bx-wrapper { padding: 0; border: none; position: relative; display: flex; order: 1; box-shadow: none;}
  #revico-comment .bx-wrapper .bx-controls-direction a { width: 30px; height: 30px; margin-top: -30px; font-size: 18px; font-weight: bold; line-height: 30px; display: flex; overflow: hidden; align-items: center; justify-content: center; text-align: center; text-decoration: none; text-indent: -9999px; color: #fff; border-radius: 50%; background-color: #3782d4; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; position: absolute; top: 50%;}
  #revico-comment .bx-wrapper .bx-controls-direction a.bx-next {
    left: 10px; right: auto;
    background-image: url(../../../img/usr/common/ico_arrow_l.png);
  }
  #revico-comment .bx-wrapper .bx-controls-direction a.bx-prev {
    right: 10px; left: auto;
    background-image: url(../../../img/usr/common/ico_arrow_r.png);
  }
}