@charset "utf-8";
/* CSS Document 320-500*/

.headbox .kakomi{margin: 0 5% 40px; border: 1px solid #a8cf3f}
.headbox h2{line-height: 1.4; padding: 20px 0 20px 5% ; font-size:clamp(1.25rem, 0.139rem + 5.56vw, 1.875rem)}/*20-30*/
.headbox h2 span{font-size:clamp(0.938rem, 0.493rem + 2.22vw, 1.188rem)}/*15-19*/
.headbox .sub{padding: 20px 0 20px 5%; font-size: clamp(0.938rem, 0.604rem + 1.67vw, 1.125rem)}/*15-18*/
.headbox .li{border-bottom: 1px solid #1d9f10; display: block; margin: 0 5%}

.first{text-align: center}
.first .text{text-align: center; margin-bottom: 20px; font-size:clamp(0.875rem, 0.542rem + 1.67vw, 1.063rem)}/*14-17*/
.first ul{display:flex; justify-content: space-between; margin: 0 5% }
.first ul li{width: 48%}
.first ul li a{letter-spacing: normal; display: block; color:#1d9f10; padding: 20px 0; border:1px solid #1d9f10; border-radius: 6px;
 transition: background-position 0.4s ease ;  background: linear-gradient(to right, #fff 50%, #a8cf3f 50%); background-size: 200% 100%;
  background-position: left center;}
.first ul li a:hover {background-position: right center;}
.first ul li img{width: 20px; transform: rotate(90deg); }
.first ul li span{font-size: 13px}
.first .atte{text-align: right; font-size: 13px; margin: 20px 5% 0 0}

.first .iconBox{margin: 0 5%; }
.first .iconBox .serifu{font-size:clamp(0.875rem, 0.764rem + 0.56vw, 0.938rem)}/*14-15*/

.support{text-align: center; padding-top: 60px}
.support .text0{border: 1px solid #1d9f10; padding: 1px 20px; border-radius: 360px; display: inline-block}
.support .omakase{letter-spacing: normal; margin-bottom: 20px;}
.support h2{margin-bottom: 20px; font-size:clamp(1.625rem, 1.181rem + 2.22vw, 1.875rem)}/*26-30*/
.support h2 span{font-size: 15px}
.support .spbox{padding: 20px 0; background: url("../img/souzoku/bg.jpg") repeat-y left top; }
.support dl{display: flex; margin: 20px 5% }
.support dt{width: 20%}
.support dd{width: 80%; text-align: left;}
.support dd h3{padding-bottom: 10px; border-bottom: 1px solid #a8cf3f; padding-left: 15px; font-weight: 700; font-size:clamp(1.063rem, 0.729rem + 1.67vw, 1.25rem) }/*17-20*/
.support dd h3 span{font-size: 13px}
.support dd ul{margin-top: 10px}
.support dd li{ margin-left: 20px; line-height: 1.6; margin-bottom: 10px}
.support dd li span{font-size: 11px}
.support dd li i{font-size: 13px}
.support .price{border: 1px solid #a8cf3f; border-radius: 6px; padding: 0 5% 20px ; margin: 0 5%;}
.support .price .kakaku{color: #fff; display: flex; justify-content: space-between;  background: #a8cf3f; padding: 10px 20px; position: relative; top: -20px; border-radius: 6px; align-items: center }
.support .price .kakaku .kal{width: 65%; font-size: 13px; text-align: left}
.support .price .kakaku .kal span{font-size: 24px; letter-spacing: normal}
.support .price .kakaku .tax{ width: 35%; text-align: right; font-size: 13px}
.support .price .tit{text-align: left; font-weight: 700}
.support .price ul{margin-top: 10px; letter-spacing: normal}
.support .price ul:last-child{border-top:1px solid #a8cf3f; padding-top: 10px}
.support .price li{text-align: left; list-style: disc; margin-left: 20px; line-height: 1.4; margin-bottom: 5px; font-size: 13px}
.support .price .text{text-align: left}


.shiko{text-align: center}
.shiko h2{margin-bottom: 20px; font-size:clamp(1.625rem, 1.181rem + 2.22vw, 1.875rem)}/*26-30*/
.shiko .text0{font-size: 13px}
.shiko .fuki3{margin: 20px 0; font-size:clamp(0.813rem, 0.479rem + 1.67vw, 1rem) }/*13-16*/
.shiko li img{margin-bottom: 8px; width: 90px; border: 1px solid #1d9f10; border-radius: 6px}
.shiko li p{text-align: left; font-size: 13px}
.shiko .cs{width:249px;
 animation: moveLeftRight 2s infinite ease-in-out;
}

/* 横スクロールコンテナ */
.shiko ul{ margin-left: 8%;
  display: flex;
  flex-wrap: nowrap;          /* 折り返さない */
  gap: 10px;
  justify-content: flex-start;/* space-between→flex-startに変更（横スクロール時は左詰め） */
  overflow-x: auto;           /* はみ出したら横スクロール */
  padding-bottom: 12px;       /* スクロールバー分の余白を確保 */
  /* ↓ -webkit-overflow-scrolling: touch; は書かないこと（書くと自作バーが消える） */
}

/* 各カードは縮ませず固定幅に */
.shiko li{border-radius: 6px;
  flex: 0 0 auto;             /* 縮小・拡大させない */
  width: 140px;               /* 固定幅。お好みで調整 */
  background:#ddf0de;
  padding: 10px;
  text-align:center;
}

/* === スクロールバーを常時表示（iPhone Safari対策の本体）=== */
.shiko ul::-webkit-scrollbar{
  height: 8px;
  -webkit-appearance: none;   /* これがないとiOSで自作バーが出ない */
}
.shiko ul::-webkit-scrollbar-track{
  background: #e9e9e9;
  border-radius: 4px;
}
.shiko ul::-webkit-scrollbar-thumb{
  background: #9bbf9d;        /* 緑系で世界観に合わせています */
  border-radius: 4px;
}
/* Firefox用 */
.shiko ul{
  scrollbar-width: thin;
  scrollbar-color: #9bbf9d #e9e9e9;
}
.shiko .subete{margin: 20px 0 0}


@keyframes moveLeftRight {
  0%, 100% {
    transform: translateX(0); /* 初期位置 */
  }
  50% {
    transform: translateX(50px); /* 右に50px移動 */
  }
}

.diff{background:#f4ffd7; padding: 40px 0; margin: 40px 0; text-align: center}
.diff .fuki::after{background: #f4ffd7}
.diff .text0{border: 1px solid #1d9f10; padding: 1px 20px; border-radius: 360px; display: inline-block}
.diff .text01{text-align: left; margin: 20px 8%; padding: 0px 0 20px; border-bottom: 1px dashed #1d9f10;}
.diff h2{margin-bottom: 20px; font-size:clamp(1.125rem, 0.236rem + 4.44vw, 1.625rem)}/*18-26*/

.diff .hikaku{margin: 0px 0 0 8%}
.diff .hil , .diff .hir{display: flex; justify-content: space-between; margin-bottom: 20px}
.diff .pic{letter-spacing: normal; width: 30%; font-size:clamp(1rem, 0.778rem + 1.11vw, 1.125rem)}/*16-18*/ 
.diff .pic span{font-size: 15px; color: #ff926b; display: block; margin-top:-5px}
.diff .hil ul , .diff .hir ul {width: 66%; text-align: left; font-size: 13px}
.diff .linedashu{border-bottom: 1px dashed #1d9f10; margin-right: 8% }
.diff .hir{padding-top: 20px}
.diff .waku{background: #fff; text-align: left; padding: 15px; margin: 0 8%; border-radius: 6px; font-size: 14px}

.flow{ text-align: center; padding-bottom: 80px}
.flow h2{font-size:clamp(1.75rem, 0.972rem + 3.89vw, 2.188rem) }/*28-35*/
.flow .flowBox{margin: 30px 5% 50px }
.flow .fbox{
    --x-gradient: linear-gradient(90deg, #1d9f10 0 100%);
    --y-gradient: linear-gradient(#1d9f10 0 15px, transparent 0 calc(100% - 15px), #1d9f10 calc(100% - 15px));
    position: relative;
    padding: 20px 0;
    background-image:
        var(--x-gradient),
        var(--y-gradient),
        var(--x-gradient),
        var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: top, right, bottom, left;
}
.flow li{position: relative; text-align: left; border-bottom: 1px solid #1d9f10 ; padding: 0 0 30px 5%; margin: 30px 0 }
.flow li:last-child{border: none; padding-bottom: 0}
.flow li .img{position: absolute; width:23px; left: -5%; top: 0 }
.flow .soudanBox{padding: 0}
.flow .cont li{border: none; padding: 0; text-align: center; margin: 0 0 10px}
.flow li h3{margin-bottom: 20px; font-weight: 600; font-size:clamp(1.188rem, 0.743rem + 2.22vw, 1.438rem)}/*19-23*/
.flow li .pic img{border-radius: 6px; margin-bottom: 20px}
.flow .smalltext{line-height: 1.7; font-size: 13px; background:#f4ffd8; padding: 20px; margin: 20px 0 }
.flow .iconBox{margin: 0 8% 30px}
.flow .sime{ font-size:clamp(1rem, 0.444rem + 2.78vw, 1.313rem) }/*16-21*/


.sittukouflow{padding: 40px 0 0}
.sittukouflow .flow li .iconBox{margin: 0 0 30px; }
.sittukouflow .flow li .iconBox .serifu{font-size:clamp(0.875rem, 0.764rem + 0.56vw, 0.938rem)}/*14-15*/

.iconBox2 .serifu{font-size: clamp(0.938rem, 0.715rem + 1.11vw, 1.063rem)}/*1517*/