@charset "UTF-8";

/*reset*/
/* html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,img,small,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;line-height:1.7}th{font-style:normal;font-weight:400}ul li{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;font-size:100%}body{margin:0;padding:0;font-size:16px;line-height:1.7;font-family:"ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif,OSAKA,HELVETICA;border:none;background:#FFF}nav ul{list-style:none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}article,aside,figure,footer,header,hgroup,nav,section{display:block}.wrap img{vertical-align:bottom;width:100%;height:auto;display:block}.footer img{vertical-align:bottom;width:100%;height:auto;display:block} */
.wrap img {
    vertical-align:bottom;
    width:100%;
    height:auto;
    display:block
}
/*-------------------------------*/

/*==================================================
全体レイアウト・ベース背景カラー
===================================*/

.wrap {width: 100%; background-color: #FFFFFF; overflow: hidden; box-sizing: border-box;}
.mainWrap {
    width: 100%;
    height: auto;
    background-color: #CEDEEE;
    margin: 0 auto;
    text-align: center;
    background-image: url(../images/btb-fv-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
}
.fv-Wrap {
    max-width: 1000px;
    margin: 0 auto;
}
.content-Wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 5%;
}
.inq-Wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.product-wrap {
    position: relative;
    max-width: 100%;
    background-color: #FFFFFF;
    margin-top: 3em;
    padding: 2% 0;
}

.product-wrap::before,
.product-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 20px;
  background: url('../images/notebook.png') repeat-x;
}
.product-wrap::before {
    top: -20px; /* 上側 */
}

.product-wrap::after {
    bottom: -20px; /* 下側 */
    transform: scaleY(-1);
}

.product-container {
    margin: 5%;
}
.separator-container {
    overflow: hidden;
    height: 50px;
}
.flow-wrap{
    margin: 2em 0 5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.flow-set {
    flex: 1;
}
.flow-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.flow-item {flex: 1; align-items: stretch;}
.flow-ttl {
    font-size: 1.5rem;
    font-weight: bolder;
    color: #333333;
    margin-bottom: 0.5rem;
}
.flow-text {
    font-size: 1.2rem;
    font-weight: 400;
    display: inline;
    border-bottom: 1px dashed #000;
    padding-bottom: 0;
    text-align: justify;
}
.flow-arrow {
    font-size: 60px;
    color: #ff7305;
}

.bgc-a{ background-image: linear-gradient(180deg, rgba(255, 240, 225, 1) 95%, rgba(253, 250, 239, 1));}
.bgc-b{background-color: #ffffff;}

.posi-rela{ position: relative; }
.ab-center { position: absolute; left: 0; right: 0; margin: auto;}


/* text */
.ff-min{ font-family: 'Noto Serif JP', serif; font-feature-settings: "palt" 1;}
.ff-go{ font-family: 'Noto Sans Japanese', sans-serif; font-feature-settings: "palt" 1;}
.h-align-c {text-align:center ;}
.heading {
    padding: 0 0 0.15em;
	font-size: 2.5rem;
    font-weight: bold;
    color: #333333;
}
.h-line {border-bottom: solid 2px #333333;}

h2 img {width: 100%; height: auto;}
.heading3 {
    padding: 0 0 0.15em;
	font-size: 2rem;
    font-weight: bold;
    color: #333333;
}

.tc-r{color: #dc0000;}
.tc-bw{color: #504445;}
.description {
    position: relative;
    z-index: 99;
    width: 90%;
    margin: 30px auto;
    text-align: justify;
    font-size: 1.7rem;
    color: #333333;
    line-height: 1.7;
}
.emphasis {font-size: 2rem; font-weight: bolder;}
.lead2 {
    margin: 20px auto;
    text-align:justify;
    font-size: 1.6rem;
}
.rough-underline {
    display: inline;
    background-image: url(../images/rough-line.png);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 7px;
    padding-bottom: 5px;
}


.time {
    color: #666666;
    font-size: 1rem;
    display: block;
    width: 100%;
    padding: 2em 0 0;
}

/* utility */
.ut-mgn-t {margin-top: 1em;}
.ut-mgn-b {margin-bottom: 1em;}
.ut-mgn-tb {margin: 1em auto;}
.ut-mgn-t2 {margin-top: 2em;}
.ut-mgn-t3 {margin-top: 3em;}

/*==================================================
メインイメージ
===================================*/


.fv-cp {top: 7%;}
.fv-ttl {display: inline-block; margin: 20px 10px 10px;}

.deco-trk { position: absolute; width: 180px; top: -60px; right: 0%; }
.deco-cloud-1 { position: absolute; width: 20%; top: 45%; left: -3%; }
.deco-cloud-2 { position: absolute; width: 19%; top: 60%; right: -8%; }
.deco-fam {position: absolute; width: 47%; top: 75%; right: 0%; z-index: 99;}

.contact-sub {width: 100%; top: -14%;}

.contact-jmp-btn {display: block; padding: 12%; background-color: #ffffff; border-radius: 20px; margin: 10% 0 3%;}
.contact-btn {display: block; padding:0% 10% 5%;}

.pc-img {display: block;}
.sp-img {display: none;}

.top-frt{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    overflow: hidden;
}
.mv-bg img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.mv-ttl img {
    position: absolute;
    width: 62.5%;
    height: auto;
    top: 8%;
    left: 0;
    right: 0;
    margin: auto;
}

.mv-copy img{
    position: absolute;
    width: 50%;
    height: auto;
    top: 52%;
    left: 0;
    right: 0;
    margin: auto;
}

.stf-01 img{
    position: absolute;
    width: 19%;
    height: auto;
    top: 45%;
    left: 2%;
    animation: fuwafuwa 5s infinite;
    z-index: 5;
}

.stf-02 img{
    position: absolute;
    width: 19%;
    height: auto;
    top: 8%;
    right: 2%;
    animation: fuwafuwa 5s infinite;
    z-index: 5;
}

.frt-01 img{
    position: absolute;
    width: 16%;
    height: auto;
    top: -5%;
    left: 2%;
    animation: fuwafuwa 6s infinite;
}
.frt-02 img{
    position: absolute;
    width: 20%;
    height: auto;
    top: 16%;
    left: -8%;
    animation: fuwafuwa 6s infinite;
}
.frt-03 img{
    position: absolute;
    width: 18%;
    height: auto;
    top: 80%;
    left: -7%;
    animation: fuwafuwa 6s infinite;
}
.frt-04 img{
    position: absolute;
    width: 16%;
    height: auto;
    top: -8%;
    right: 10%;
    animation: fuwafuwa 6s infinite;
}
.frt-05 img{
    position: absolute;
    width: 20%;
    height: auto;
    top: 45%;
    right: -7%;
    animation: fuwafuwa 6s infinite;
}
.frt-06 img{
    position: absolute;
    width: 20%;
    height: auto;
    top: 80%;
    right: 10%;
    animation: fuwafuwa 6s infinite;
}


/*==================================================
記事部分
===================================*/
.problem {display: inline-block;}
.care-con {display: flex; gap: 10px;}
.care-item {flex: 1; align-content: center;}
.fruit-con {display: flex; gap: 0px;  flex-wrap: wrap; justify-content: space-between;}
.fruit-item {width: 30%;}

.float-r {
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}
.profile-item { width: 29%; padding: 5%;}
.profile-ttl {
    margin: 0 auto;
    width: 90%;
	font-size: 1.5rem;
    font-weight: bold;
}
.check-con {margin: 10% auto;}

    .ch-con {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      max-width: 1000px;
      margin: 40px auto;
      padding: 0 20px;
      gap: 40px;
    }

    .ch-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 45%;
      color: #4b4040;
      font-size: 20px;
      font-weight: bold;
    }

    .ch-item {
      display: flex;
      align-items: center;
      margin-left: 20%;
      font-size: 1.5rem;
    }

    .ch-item img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .divider {
      width: 2px;
      background: url('../images/dashed-line.png') repeat-y center;
      height: 180px;
    }


/* flexbox */
.fbox-case {
    padding:  10px;            
    display: flex;              
    flex-wrap: wrap; 
    align-content: center; 
    justify-content: space-around;
}
.fbox-item {
    padding: 10px;
    color:  #fff;                            
    border-radius:  5px;        
    width: 30%;                 
}
.fbox-item_l {
    margin: 0 2.5% 2.5% 7.5%;
    color:  #fff;                            
    border-radius:  5px;        
    width: 40%;                 
}
.fbox-item_r {
    margin: 0 7.5% 2.5% 2.5%;
    color:  #fff;                            
    border-radius:  5px;        
    width: 40%;                 
}

.fbox-item img {
    width: 100%;
    height: auto;                 
}

.item-l {width: 70%; margin: auto;}
.item-r {width: 30%; margin: 20px 0 0 40px;}
.b4-wrap{
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 10%;
    border-radius: 10px;
}
.b4-con{display: flex; margin: 20px 0;}
.heading5{
    text-align: left;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333333;
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt" 1;
}
.hed5-2{font-weight: normal;}
.hed5-3{color: #FF6E3C;}
.b4-btn{width: 100%; margin: 0 auto; text-align: center;}
.b4-btn img{max-width: 100%;height: auto;}
.b7-btn{width: 70%;top: 70%;}
.b8-btn{width: 70%;top: 9%;}


/* q&a */
.accordion {
    max-width: 100%;
    margin: 4em auto;
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow: hidden;
    font-family: sans-serif;
  }
  
  .accordion-header {
    width: 100%;
    padding: 16px 48px 16px 16px;
    text-align: left;
    background-color: #4D9F6C;
    border: none;
    outline: none;
    cursor: pointer;
    color: #fff;
    font-size: 1.2rem;
    font-weight:500;
    border-bottom: 2px solid #fff;
    position: relative;
    transition: background-color 0.3s ease;
  }

.accordion .accordion-header:nth-last-of-type(1) {
  border-bottom: none;
}
 
  .accordion-header::after {
    content: '▼';
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
  }
  
  .accordion-header.active {
    background-color: #7CC16F; /* 開いたときの背景色 */
  }
  
  .accordion-header.active::after {
    transform: rotate(-180deg); /* 矢印を上向きに */
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    background-color: #fff;
    text-align: left;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }
  
  .accordion-content p {
    margin: 16px 0;
    line-height: 1.6;
  }

  .accordion-content.active {
    max-height: 300px; /* 調整可能 */
    padding:20px 15px;
  }
  
  .question {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: 0px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    color: #4D9F6C;
    font-weight: bold;
    margin-right: 8px;
    padding: -5px;
    /* border: 3px solid #fff; */
    font-size: 1.2rem;
  }

  .answer-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  
  .answer-line .anser {
    color: #4D9F6C;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: -1px;
    padding-right: 5px;
    font-size: 1.3rem;
    font-weight: bold;
    margin-left: 6px;
  }
  
  .answer-line p {
    margin: 0;
    line-height: 1.6;
    font-size: 1.2rem;
    color: #585353;
  }

  .document_dl{ 
    margin-top: 100px;
    margin-bottom: 50px;}




/* .separator {
    margin: 0 calc(50% - 50vw);
    display: block;
    margin-bottom: -3em;
}

.qa-card {
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    margin: 2em auto 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
  }

  .qa-question {
    padding: 1em;
  }
  .qa-question ::before{
    content: '';
    display: block;
    width: 6%;
    height: 6%;
    background-image: url(../images/qa-icon-q.png);
    position: absolute;
    margin-top: -2%;
    margin-left: -4%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .qa-answer { padding: 1em; }

  .qa-answer ::before{
    content: '';
    display: block;
    width: 6%;
    height: 6%;
    background-image: url(../images/qa-icon-a.png);
    position: absolute;
    margin-top: -2%;
    margin-left: -4%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .qa-ttl {
    text-align: justify;
    font-size: 1.7rem;
    color: #333333;
    font-weight: bold;
  }
  .qa-text {
    text-align: justify;
    font-size: 1.7rem;
    color: #333333;
  }

  .qa-text-s {
    font-size: 1.25rem;
    color: #333333;
    padding: 0 1em 1em;
  }
  .qa-mail-jmp {
    padding: 0 1em 1em;
    font-size: 1rem;
    text-align: right;
  }
 */



/* エフェクト */

/* fadeIn */
.fadein {opacity : 0;transform: translateY(20px);transition: all 1s;}
.fadein2 {opacity : 0;transform: translateY(-20px);transition: all 1s;}
.fadein3 {opacity : 0;transition: all 2s;}
.fadein4 {opacity : 0;transform: scale(0.6);transition: all 1s;}
.fadein5 {opacity : 0;transform: translatex(-20px);transition: all 1s;}
.fadein6 {opacity : 0;transform: translatex(20px);transition: all 1s;}
.fadein7 {opacity : 0;transform: scale(1.5);transition: all 0.5s;}

/* マーカー */
.akahuto {color: #C00652;font-weight: bold;}
.mk-st_a {
    background: -webkit-linear-gradient(left,  #f04b9a 50%, transparent 50%);
    background: linear-gradient(left,  #f04b9a 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .9em; 
    background-position: 100% .9em;
    transition: 2s;
}
.mk-st_a.is-active{background-position: 0% 0.9em;}
.mk-st_b {
    background: -webkit-linear-gradient(left, #f04b9a 50%, transparent 50%);
    background: linear-gradient(left, #f04b9a 50%, transparent 50%);
    background-size: 200% .8em; 
    background-position: 100% .1em;
    transition: 2s;
}
.mk-st_b.is-active{background-position: 0% .1em;}

.mk-st_c {
    background: -webkit-linear-gradient(left, #fffa00 50%, transparent 50%);
    background: linear-gradient(left, #fffa00 50%, transparent 50%);
    background-size: 200% .8em; 
    background-position: 100% .1em;
    transition: 2s;
}
.mk-st_c.is-active{background-position: 0% .1em;}

.mk-st_d {
    background: -webkit-linear-gradient(left, #fffa00 50%, transparent 50%);
    background: linear-gradient(left, #fffa00 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% 0.1em; 
    background-position: 100% 1.2em;
    transition: 2s;
}
.mk-st_d.is-active{background-position: 0% 1.2em;}
/* bom */
@keyframes bom {
0% {transform:scale(1.3);}
50% {transform:scale(1.5);}
100% {transform:scale(1.3);}
}
.ani-bom { animation: bom 1s infinite; } 

/* gyugyugyu */
@keyframes gyugyu {
0% {transform:scale(1);}
50% {transform:scale(0.8);}
80% {transform:scale(0.8);}
100% {transform:scale(1);}
}
.ani-gyu { animation: gyugyu 2s infinite; } 

/* gyugyu2 */
@keyframes gyugyu2 {
45% {transform:scale(1);}
50% {transform:scale(1.03);}
90% {transform:scale(1.03);}
100% {transform:scale(1);}
}
.ani-gyu2 { animation: gyugyu2 2s infinite; } 

/* underslide */
@keyframes b-slide {
0% {transform: translateY(0px);}
50% {transform: translateY(10px);}
60% {transform: translateY(0px);}
}
.b-slide { animation: b-slide 1.5s infinite; animation-timing-function: ease;} 
@keyframes t-slide {
0% {transform: translateY(0px);}
50% {transform: translateY(-10px);}
60% {transform: translateY(0px);}
}
.t-slide { animation: t-slide 1.5s infinite; animation-timing-function: ease;} 

/* lr slide */
@keyframes lr-slide{
    0% {transform: translateX(0px);}
    50% {transform: translateX(10px);}
    100% {transform: translateX(0px);}
}
.lr-slide {animation: lr-slide 2s infinite;} 
.lr-slide2 { animation: lr-slide 3s infinite; } 

/* arr-slide */
@keyframes arrfuwa {
    0% {transform: translateY(-10px);}
    50% {transform: translateY(0px);}
    90% {transform: translateY(0px);}
    100% {transform: translateY(-10px);}
}
.ani-arrfuwa {animation: arrfuwa 1.5s infinite;} 
.ani-arrfuwa2 { animation: arrfuwa 3s infinite; } 
/* flash */
@keyframes flash {
0%, 100% { opacity: 0; }
20%, 80% { opacity: 1; } }
.u--flash { animation: flash 1s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash2 */
@keyframes flash2 {
0%, 100% { opacity: 1; }
50% { opacity: 0; } }
.u--flash2 { animation: flash2 1s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* Bounce In */
@keyframes bounceIn {
0% {transform: scale(0.5);opacity: 0; }
80% {transform: scale(1.02);opacity: 1; }
100% {transform: scale(1);opacity: 1; } }
.u--bounceIn {animation: bounceIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
/* Swing */
@keyframes swing {
10% {transform: rotate(0, 0, 1, 0deg); }
20% {transform: rotate3d(0, 0, 1, 1deg); }
25% {transform: rotate3d(0, 0, 1, -1deg); }
30% {transform: rotate3d(0, 0, 1, 1deg); }
35% {transform: rotate3d(0, 0, 1, -1deg); }
40% {transform: rotate3d(0, 0, 1, 0deg); }
100% {transform: rotate3d(0, 0, 1, 0deg); } }
.u--swing {
transform-origin: bottom center;
animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }
.u--swing2 {
transform-origin: bottom center;
animation: swing 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }


/* buruburu */
@keyframes bururi {
50% {transform: scale(1, 1);}
52% {transform: scale(0.98, 0.95)}
54% {transform: scale(1, 1);}
56% {transform: scale(0.98, 0.95)}
58% {transform: scale(1, 1);}
60% {transform: scale(0.98, 0.95)}
}
.bururi {animation: bururi 1s infinite;}
/* buruburu 2 */
@keyframes bururi2 {
50% {transform: scale(1, 1);}
52% {transform: scale(0.88, 0.85)}
54% {transform: scale(1, 1);}
56% {transform: scale(0.88, 0.85)}
58% {transform: scale(1, 1);}
}
.bururi2 {animation: bururi2 2s 4;}
.bururi2_2 {animation: bururi2 2s 2;}
/* buruburu 3 */
@keyframes bururi3 {
0% {transform: scale(1, 1);}
20% {transform: scale(0.9, 0.95)}
40% {transform: scale(1, 1);}
60% {transform: scale(0.95, 0.9)}
80% {transform: scale(1, 1);}
}
.bururi3 {animation: bururi3 0.5s infinite;}
/* pikupiku */
@keyframes pikpik {
10% {transform: scale(1, 1);}
15% {transform: scale(0.98, 0.99);}
20% {transform: scale(1, 1);}
25% {transform: scale(0.98, 0.99);}
30% {transform: scale(1, 1);}
}
.pikpik {animation: pikpik 0.5s infinite;}
/* pikupiku slide t>b */
@keyframes piksl {
10% {transform: scale(1, 1) translateY(0px);}
15% {transform: scale(0.99, 0.99) translateY(5px);}
20% {transform: scale(1, 1) translateY(7px);}
25% {transform: scale(0.99, 0.99) translateY(10px);}
30% {transform: scale(1, 1) translateY(3px);}
50% {transform: scale(1, 1) translateY(0px);}
}
.pikslide-t {animation: piksl 4s infinite;}
/* pikupiku slide b>t */
@keyframes piksl2 {
10% {transform: scale(1, 1) translateY(0px);}
15% {transform: scale(0.99, 0.99) translateY(-5px);}
20% {transform: scale(1, 1) translateY(-7px);}
25% {transform: scale(0.99, 0.99) translateY(-10px);}
30% {transform: scale(1, 1) translateY(-3px);}
50% {transform: scale(1, 1) translateY(0px);}
}
.pikslide-b {animation: piksl2 4s infinite;}

/* purupuru */
@keyframes purupuru {
0% {transform: skew(0deg, 0deg);}
5% {transform: skew(1deg, 1deg);}
10% {transform: skew(-2deg, -1deg);}
15% {transform: skew(2deg, 1.5deg);}
20% {transform: skew(-2deg, -1.5deg);}
25% {transform: skew(0.9deg, 0.9deg);}
30% {transform: skew(-0.6deg, -0.6deg);}
35% {transform: skew(0.3deg, 0.3deg);}
40% {transform: skew(-0.2deg, -0.2deg);}
45% {transform: skew(0.1deg, 0.1deg);}
50% {transform: skew(0deg, 0deg);}
}
.purupuru {animation: purupuru 1.5s infinite;}
.purupuru2 {animation: purupuru 1.75s infinite;}
  


/* スライド農家さん 右へ*/
@keyframes infinity-scroll-right {
    from {transform: translateX(-100%);}
      to {transform: translateX(0%);}
    }
    .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
      margin-bottom: -1%;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--right {
      animation: infinity-scroll-right 50s infinite linear 0.2s both;
    }
    .scroll-infinity__item {
      width: calc(100vw / 6);
    }
    .scroll-infinity__item>img {
      width: 100%;
    }
/* スライド農家さん 左へ*/
@keyframes infinity-scroll-left {
    from {transform: translateX(0%);}
      to {transform: translateX(-100%);}
    }
    .scroll-infinity__list--left{
      animation :infinity-scroll-left 50s infinite linear 0.2s both;
    }

/*=========================*/

/*==================================================
1000px以下のデザイン
===================================*/

@media screen and (max-width:750px) {
    .content-Wrap { max-width: 100%; padding: 20px; }
    .mainWrap{overflow: hidden;}

    .pc-img {display: none;}
    .sp-img {display: block;}
    .heading { font-size: 1.5rem; }
    .heading3 { font-size: 1.25rem; }

    .fruit-item {width: 50%;}

    .flow-wrap {flex-direction: column;}
    .flow-set {flex-direction: column;}
    .flow-arrow {transform: rotate(90deg);}
    .scroll-infinity__wrap { margin-bottom: -2%; }
    .description {margin: 15px auto; font-size: 1.2rem;}
    .deco-trk {width: 120px; top: -35px; right: 0%;}
    .deco-fam {width: 45%; top: 95%;}
    .time {padding: 1em 0 0;}
    .fv-cp img { margin-bottom: -8.5%; }
    .btb-01-ttl { width: 110%; }

    .fbox-item {width: 50%;}
    .profile-item {padding: 5% 5% 0%;}

    
    .scroll-infinity__item {width: calc(100vw / 4);}
    .b4-con{display: block;}
    .item-l {width: 100%; margin:0 auto;}
    .item-r {width: 100%; margin:0 auto; text-align: center;}
    .heading5{font-size: 2rem;}

    .flow-content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .flow-wrap{
        gap: 0px;
        margin: 2em 0 3em;
    }
    .separator {
        margin-bottom: -1em;
    }
    .separator-container {
        height: 25px;
    }

    .accordion {margin: 2em auto;}
    .qa-ttl { font-size: 1.25rem; }
    .qa-text { font-size: 1.25rem; }
    .qa-text-s { font-size: 1rem; }
    .qa-question ::before {
        width: 10%;
        height: 10%;
        margin-top: -8%;
        margin-left: -10%;
    }
    .qa-answer ::before {
        width: 10%;
        height: 10%;
        margin-top: -8%;
        margin-left: -10%;
    }
    .ch-con {
        flex-direction: column;
        align-items: center;
      }
    .divider {display: none;}
    .ch-column {width: 100%;}
    .ch-item {margin-left: 5%;}

}