@charset "utf-8";
/* CSS Document 320-560*/
.kijiBox{margin: 0}

/* 動画を囲むコンテナのスタイル */
.video-header {
  position: relative;
  width: 100%;
  height: auto; /* 画面の高さに合わせる場合。任意の高さ（例: 60vh や 500px）に変更可能です */
  overflow: hidden;
}

/* 動画本体のスタイル */
.header-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに広げ、はみ出た部分をトリミング */
  display: block; /* 余白ができるのを防ぐ */
}
/*--------------------------------------------------------------------

first

--------------------------------------------------------------------*/
.first{background: url("../img/bg.png") repeat; color: #fff; padding: 30px 0 0px 0; text-align: center}
.first .kijib{padding-top: 10px; background: url("../img/trial/trai.png") no-repeat bottom right; background-size:358px 172px }
.first .en{font-size: 13px; letter-spacing: 1px; }
.first h2{margin-bottom: 30px ; font-weight: 400; font-size:clamp(1.875rem, 1.375rem + 2.5vw, 2.25rem)}/*30-36*/
.first h2.ft18{line-height: 1.4; margin-right: 2%; font-size:33px}
.first .text{padding-bottom: 40px; font-weight: 400; font-size:clamp(1.125rem, 0.625rem + 2.5vw, 1.5rem) }/*18-24*/

.poi{display: flex; justify-content: space-between; background:#f5f8f4; border-radius: 10px;
padding: 20px 0px 20px 20px !important; margin: 0 6% 60px!important; align-items: center}
.poi dt{width: 20% !important}
.poi dt img{width: 100% !important}
.poi dd{width: 77% !important; text-align: left; color:#4a6a45; font-size:clamp(0.938rem, 0.688rem + 1.25vw, 1.125rem) }/*15-18*/

/*--------------------------------------------------------------------

.price

--------------------------------------------------------------------*/
.price{padding:50px 5% ; border-radius: 20px ; text-align: center}
.price .text{margin-bottom:20px; font-size:clamp(1.25rem, 1rem + 1.25vw, 1.438rem) }/*20-23*/
.price .text img.waka{vertical-align: middle; width:17px; position: relative; top: -2px; margin: 0 5px}
.price .pribox{border-radius: 10px; padding: 40px 5%; background: url("../img/trial/price.png") no-repeat left top #fff; background-size:63px auto}
.price .pribox h2{margin-bottom: 20px}
.price .pribox .kagi{line-height: 1.4; padding: 8px 50px; font-size:clamp(1.625rem, 1.458rem + 0.83vw, 1.75rem) }/*26-28*/
.price .pribox .wach{position: relative; margin-bottom: 01px}
.price .pribox .wach img{width:171px }
.price .pribox .wach .ri{display: inline-block; text-align: right; position: absolute; bottom: 0; right: 0}


.price table{width: 100%; border-collapse: collapse;}
.price table tr{
  border-bottom: solid 2px white;
  line-height: 1
}
.price table tr:last-child{
  border-bottom: none;
}
.price table th{vertical-align:middle;
  position: relative;
  text-align: center;
  width:45%;
  background: url("../img/bg.png") repeat;
  color: white;
  padding: 10px 0px ; height: 50px;
}
.price table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #829a7f;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.price table td span{font-size: 10px; display: inline-block; padding-left: 8px;letter-spacing:normal}
.price table td{height: 50px; vertical-align: middle;
  text-align: right;
  width: 55%;
  background-color: #f5f8f4;
  padding: 10px 20px 10px 0px;
}
.price table th img{width:30px; margin-bottom: 5px }


/*--------------------------------------------------------------------

.lineb

--------------------------------------------------------------------*/
.lineb{text-align: center; }
.lineb .text {font-size:clamp(1.25rem, 0.917rem + 1.67vw, 1.5rem) }/*20-24*/
.lineb .cold .en{font-size: 20px}
.lineb .ber {position: relative; margin: 20px 0 50px}
.lineb .ber .cold img{width:180px }
.lineb .ber .hosi1{position: absolute; right: 15%; top: 40px ; width:23px }
.lineb .ber .hosi2{position: absolute; right: 11%; top: 90px; width:15px }
.lineb .ber .hosi3{position: absolute; left: 12%; top: 140px; width:23px }

/*--------------------------------------------------------------------

.moti

--------------------------------------------------------------------*/
.moti{text-align: center; background: url("../img/bg.png") repeat; margin: 0 8%; padding: 40px 5% 30px; color: #fff ; border-radius: 10px}
.moti .kagi{line-height: 1.4; margin:0 0 30px; padding: 8px 40px;}
.moti .kagi::before {
  border-left: solid 1px #fff;
  border-top: solid 1px #fff;
}
.moti .kagi::after {
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.moti .kagi span:before {
  border-left: solid 1px #fff;
}
.moti .kagi span:after {
  border-right: solid 1px #fff;
}

.moti dl{display: flex; justify-content: space-between}
.moti dt{width: 44%}
.moti dt img{border-radius: 10px; width: 100%}
.moti dd{width: 52%; text-align: left; margin-top: -5px }
.moti dd span{font-size: 12px; display: block; }
.moti dd ul li{margin-bottom: 5px; font-size: 14px}
.moti dd img{width: 80%; margin: 0 auto; display: block}

/*--------------------------------------------------------------------

.flow

--------------------------------------------------------------------*/
.flow{ margin: 50px 3% 0; padding:50px 5% 0px ; border-radius: 10px; text-align: center; position: relative; background: url("../img/trial/flow.png") no-repeat right bottom #fff; background-size:287px auto}
.flow h2.kagi{padding: 0 40px ; margin-bottom: 30px}

.flow .flbox{padding-bottom: 50px}
.flow .flbox .pic{position: relative; margin-bottom: 20px}
.flow .flbox .wel{position: absolute; right: -2%; top: -15px; width: 80%; max-width:130px; mix-blend-mode:multiply }
.flow .flbox .tit{; margin-bottom: 20px ; display: flex; justify-content: space-between; align-items: flex-start; text-align: left}
.flow .flbox .tit img{ max-width:42px; margin-top: 10px }
.flow .flbox .tit p{letter-spacing: -1px; line-height: 1.6; width: 86%; font-size: clamp(1.375rem, 1.042rem + 1.67vw, 1.625rem) }/*22-26*/
.flow .flbox .come{margin-left: 15%; text-align: left; font-size: 15px}
.flow .flbox .poi{margin: 0 !important}

#f02 {padding-bottom: 90px}

#f03 .pic .p1{width: 40%; max-width:163px; position: absolute; top: 15px; right: -9%}
#f03 .pic .p2{width: 55%; max-width:214px; position: absolute; top: -35px; left: -8%}
#f03 .fuki3tu{margin: 20px 0}

#f05 .pic .p1{width: 46%; max-width:185px; position: absolute; top: -20px; right: -9%}
#f05 .pic .p2{width: 55%; max-width:59px; position: absolute; top: -65px; left: -1%}

/*--------------------------------------------------------------------

.flow

--------------------------------------------------------------------*/
.mata{font-size: 17px; margin: 40px 8% 70px; border: 1px solid #3b3b3b; padding: 40px 5%; text-align: center; border-radius: 10px}
.mata .text2{margin-top:20px;  text-align: left; font-size: 15px}