@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}
.first h2{margin-left: 8%; margin-bottom: 30px}
.first .kiji .cat{position: relative; padding-bottom: 0; display: inline-block; letter-spacing: normal; padding: 0 10px; margin-bottom: 15px}
.first .kiji .cat::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-top: none;
  border-bottom-right-radius: 50px; /* 左下の角丸 */
  border-bottom-left-radius: 50px; /* 右下の角丸 */
  translate: -50%;
}
.first .kiji .cat::after {
  content: "";
  position: absolute;
  top: calc(100% + 8px); /* フキダシのサイズに応じて調整してください */
  left: 50%;
  width: 20px;
  height: 1px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 1px 0 #749070, 0 -1px 0 #749070;
  rotate: 50deg;
  translate: -50%;
}
.first .cat{padding-bottom: 20px}
.first .en{font-size: 13px; letter-spacing: 1px; }
.first h2{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:clamp(1.625rem, 1.292rem + 1.67vw, 1.875rem)}/*26-30*/


.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{background: #fff; padding:50px 5% ; border-radius: 20px}
.price table{width: 100%; border-collapse: collapse;}
.price table tr{
  border-bottom: solid 2px white;
}
.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 ;
}
.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{
  text-align: right;
  width: 55%;
  background-color: #f5f8f4;
  padding: 10px 20px 10px 0px;
}
.price table th img{width:30px; margin-bottom: 5px }

.menusuv{position: relative; background: url( "../img/about/about.png") no-repeat right bottom; background-size:370px  86px; margin-left: 8%}

.menusuv .pagemenu{position: absolute; left: 0%; top: 32px; width:11px }
.menusuv ul{padding: 25px 5% 40px 7% }
.menusuv ul li{position: relative; padding-left: 20px}
.menusuv ul li::before{
content: "+";
display: blockactive;
left: 0;
top: 0; position: absolute;
}
.menusuv ul a{letter-spacing: 1px; color: #fff; padding-bottom: 5px ; font-size: clamp(0.688rem, 0.521rem + 0.83vw, 0.813rem)}/*11-13*/

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

.what

--------------------------------------------------------------------*/
.what{text-align: center; margin: 70px 0; position: relative}
.what .text{font-weight: 400; font-size:clamp(1.75rem, 1.417rem + 1.67vw, 2rem)}/*28-32*/
.what h2 img{max-width:250px }
.what .text01{margin-bottom: 10px ; font-size: clamp(1.5rem, 1.333rem + 0.83vw, 1.625rem)}/*24-26*/
.what .text02 img{max-width:373px }
.what .text03{margin: 30px 8% 0; text-align: left;line-height: 2}

.what .hosi1{position: absolute; right: 10%; top: 80px ; width:23px }
.what .hosi2{position: absolute; right: 7%; top: 110px; width:15px }
.what .hosi3{position: absolute; left: 10%; top: 190px; width:23px }

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

.merit

--------------------------------------------------------------------*/
.merit{ margin: 0 3%; padding:50px 0 40px ; border-radius: 10px; text-align: center; position: relative; background: url("../img/about/merit.png") no-repeat right bottom #fff; background-size:295px 84px}
.merit .kagi{padding: 0 40px ;}
.merit .hosi1{position: absolute; right: 10%; top: 60px ; width:23px }
.merit .hosi2{position: absolute; right: 7%; top: 1490px; width:15px }
.merit .hosi3{position: absolute; left:7%; top: 830px; width:23px }

.merit h2{border-radius: 5px; border: 1px solid #3b3b3b; display: inline-block; padding: 2px 20px 0; line-height: 1.4;}
.merit .kagi{margin-bottom: 50px}
.merit dl{display: flex; justify-content: space-between; margin-right: 1%}
.merit dt{width: 73%; margin-left: -3%;}
.merit dd{width: 30%}
.merit dd h3{margin: -20px auto 0;  width: fit-content; padding-top: 30px; position: relative; line-height: 1.4; text-align: left; color: #749070; font-size:clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem) }/*20-26*/
.merit dd h3 img{width:42px; margin: 0 auto; position: absolute; top: 0; left: 50%; margin-left: -16px}
.merit .text{margin: 30px 6% 70px; text-align: left; font-size:  16px }

.merit dl.bright{flex-direction: row-reverse; margin: 0 0 0 1% }
.merit dl.bright dd h3{margin: -20px auto 0 }
.merit dl.bright dt{margin-left: 0; margin-right: -3%}

.merit .me02 .text{margin: 30px 6% 20px;}
.merit .me03 dl{margin-bottom: 80px}
.merit .me03 dd h3{margin: 0 auto; width: fit-content;}
.merit .me05 .text{margin: 30px 6% 20px;}

.merit .me05 .tategaki{text-align: left; line-height: 1.4; position: relative}
.merit .me05 .tategaki .tate{position: absolute; top: -55px; left: 1%}
.merit .me05 .tategaki .tate span{margin-left: 5px; display: inline-block; background: url("../img/bg.png") repeat; color: #fff; padding:  15px 0; font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/

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

.inst

--------------------------------------------------------------------*/
.inst{text-align: center; color: #fff}
.inst .kagi{color: #fff}
.inst .kagi::before {
  border-left: solid 1px #fff;
  border-top: solid 1px #fff;
}
.inst .kagi::after {
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.inst .kagi span:before {
  border-left: solid 1px #fff;
}
.inst .kagi span:after {
  border-right: solid 1px #fff;
}
.inst .text{font-weight: 300; margin: -30px 0 20px; font-size:clamp(1.188rem, 1.021rem + 0.83vw, 1.313rem)}/*19-21*/
.inst .text img{max-width:373px; width: 90% }
.inst section{background: url("../img/bg.png") repeat; padding-bottom: 50px}
.inst .bgg{background: url("../img/about/inst.png") no-repeat right top; background-size:80px 671px }
.inst h2 i{display: block; letter-spacing: 1px; font-size:clamp(1.125rem, 0.958rem + 0.83vw, 1.25rem) }/*18-20*/
.inst h2{line-height: 1.6; letter-spacing: -1px; font-size: clamp(1.75rem, 1.167rem + 2.92vw, 2.188rem)}/*28-35*/

.inst .poi{margin: 20px 0 30px !important; background: #fff ;padding: 20px 0px 20px 0px !important;}
.inst .poi dd{font-size:clamp(0.938rem, 0.854rem + 0.42vw, 1rem)}/*15-16*/


.inst dl{display: flex; justify-content: space-between; margin: 30px 8%}
.inst dt{width:30%; max-width: 148px }
.inst dd{width:65%; text-align: left}
.inst dd .name{letter-spacing: 2px; line-height: 1.4; font-weight: 300; border-bottom: 1px solid #fff; display: inline-block; font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem) }/*34-40*/
.inst dd .toku {letter-spacing: 1px; margin-top: 10px; line-height: 1.4; font-size:clamp(1.25rem, 1.083rem + 0.83vw, 1.375rem) }/*34-40*/
.inst ul{padding-bottom: 20px; margin: 0 3% 0px 8%; text-align: left; font-size: clamp(0.688rem, 0.438rem + 1.25vw, 0.875rem)}/*11-14*/
.inst ul li{list-style: none; position: relative ; padding-left: 20px}
.inst ul li:after{position: absolute; left: 0; top: 0;
 content: '+';
  display: block; /*改行するように*/
}

.inst .mesbox{color: #3b3b3b; text-align: left; background: #fff; border-radius: 10px; margin: 0 8%; padding: 30px 5%}
.inst .mesbox h3{position: relative; margin-bottom: 20px; color:#749070; font-size: clamp(1.25rem, 0.938rem + 1.56vw, 1.563rem) } /*20-25*/
.inst .mesbox h3 img{position: absolute; right:-3%; top: -20px; max-width: 93px; width: 25% }
.inst .mesbox h3 .i02{ right:-3%; top: -50px; max-width: 140px; width: 43% }
.inst .mesbox .te01{font-size: clamp(0.875rem, 0.792rem + 0.42vw, 0.938rem)}/*14-15*/

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

.machine

--------------------------------------------------------------------*/
.machine{ padding:80px 0 40px ; border-radius: 10px; text-align: center; position: relative; background: url("../img/about/app.png")no-repeat left top #f7f7f7; background-size:79px 571px}
.machine .kagi{padding: 0 40px ;}
.machine .hosi1{position: absolute; left: 10%; top: 400px ; width:23px }
.machine .hosi2{position: absolute; right: 7%; top:860px; width:15px }
.machine .hosi3{position: absolute; right: 6%; top: 1600px; width:23px }

.machine .te{font-size:clamp(1.25rem, 0.938rem + 1.56vw, 1.563rem) }/*20-25*/
.machine .hoso{margin: 20px 10% 40px; text-align: left; font-size: clamp(0.813rem, 0.75rem + 0.31vw, 0.875rem)}/*13-14*/

.machine .kagi{margin-bottom: 20px}
.machine dl{display: flex; justify-content: space-between; margin-right: 1%}
.machine dt{width: 73%; }
.machine dd{width: 30%}
.machine dd h3{margin: -20px auto 0;  width: fit-content; padding-top: 30px; position: relative; line-height: 1.4; text-align: left; color: #749070; font-size:clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem) }/*20-26*/

.machine dd h3 img{max-width:52px;}
.machine .me02 dd h3 img{max-width:43px;}
.machine .me03 dd h3 img{max-width:34px;}
.machine .me04 dd h3 img{max-width:47px;}
.machine .text{margin: 30px 6% 60px; text-align: left; font-size:clamp(0.875rem, 0.792rem + 0.42vw, 0.938rem) }/*14-15*/

.machine dl.bright{flex-direction: row-reverse; margin: 0 0 0 1% }
.machine dl.bright dd h3{margin: -20px auto 0 }
.machine dl.bright dt{margin-left: 0;}

.machine .me03 dd h3{margin: -30px auto; width: fit-content;}




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

.overview

--------------------------------------------------------------------*/
.overview{ background: #f7f7f7; padding: 40px 0; text-align: center}
.overview i{letter-spacing: -3px}
.overview iframe{width: 100%; height: 600px; margin: 30px 0}
.overview h3{margin-bottom: 30px}
.overview dl{text-align: left; margin: 0 8% 20px;}
.overview dt{padding-left: 10px; border-radius: 5px; margin-bottom: 10px; background: url("../img/bg.png") repeat; color: #fff; font-family: "Zen Old Mincho", serif; font-size: clamp(1.125rem, 0.958rem + 0.83vw, 1.25rem)}/*18-20*/
.overview dd img {
    width: 18px;
    vertical-align: middle;
    top: -2px;
    position: relative;
}
.overview dd{font-size: clamp(0.875rem, 0.792rem + 0.42vw, 0.938rem)}/*14-15*/