@charset "UTF-8";

/* reset / common */
#feature {
  width: 100%;
}  
#feature * {
  margin: 0;
  padding: 0;
}
#feature img {
  width: 100%;
}
#feature a, 
#feature a:hover {
  text-decoration: none !important;
}
#feature .sec__intro .btn__intro a,
#feature .sec__color .cnt__color .btn__coorde a,
#feature .sec__color .page-nav li a,
#feature .sec__color .cnt__color .btn__item a,
#feature .sec__color .color__slide .btn__detail a,
#feature .sec__color .cnt__color .btn__item,
#feature .btn__totop a {
  transition: 0.5s;
  cursor: pointer;
}
#feature .sec__intro .btn__intro a:hover,
#feature .sec__color .cnt__color .btn__coorde a:hover,
#feature .sec__color .page-nav li a:hover,
#feature .sec__color .color__slide .btn__detail a:hover,
#feature .sec__color .cnt__color .btn__item:hover,
#feature .btn__totop a:hover {
  opacity: 0.5;
}
#feature li {
  list-style: none;
}



/*-------------------------------------------
for PC
---------------------------------------------*/
@media screen and (min-width: 768px) {

  #feature {
    margin: 0 0 150px 0;
  }    
  #feature .sp {
    display: none;
  }
  #feature .inner {
    width: 900px;
    margin: 0 auto;
  }

  /* font-size
  ----------------------------------- */

  /* .sec__intro */
  #feature .sec__intro h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 26px;
    font-weight: 700;
  }
  #feature .sec__intro h2 strong {
    font-size: 44px;
    font-weight: 700;
  }
  #feature .sec__intro p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 700;
  }
  #feature .sec__intro li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 700;
  }
  #feature .sec__intro .btn__intro {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
  }

  /* .sec__itempoint */
  #feature .sec__itempoint .lead-txt {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 500;
  }
  #feature .sec__itempoint h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 35px;
    font-weight: 700;
  }
  #feature .sec__itempoint h4 {
    font-family: "Noto Serif JP", serif;
    font-size: 30px;
    font-weight: 700;
  }
  #feature .sec__itempoint p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
  }
  #feature .sec__itempoint p.catch {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 700;
  }
  #feature .sec__itempoint figcaption {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
  }

  /* .sec__color */
  #feature .sec__color .cnt__color h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 900;
  }
  #feature .sec__color .cnt__color .color__slide h4 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .color__slide p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 400;
  }
  #feature .sec__color .cnt__color .color__slide .btn__detail {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__item .itemname {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__item .price {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 30px;
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__item .btn {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__coorde p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
  }

  /* contents
  ----------------------------------- */

  /* .sec__mv */
  #feature .sec__mv {
    width: 1200px;
    margin: 0 auto;
  }

  /* .sec__intro */
  #feature .sec__intro {
    padding: 90px 0 72px;
  }
  #feature .sec__intro h2 {
    width: fit-content;
    margin: 0 auto 42px;
  }
  #feature .sec__intro h2 span {
    border-bottom: 1px solid #707070;
  }
  #feature .sec__intro p {
    text-align: center;
    margin: 0 0 28px 0;
  }
  #feature .sec__intro ol {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 82px 0;
  }
  #feature .sec__intro li {
    width: 200px;
    height: 240px;
    text-align: center;
    padding: 110px 0 0 0;
  }
  #feature .sec__intro li:nth-of-type(1) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl01.png) 0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro li:nth-of-type(2) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl02.png)0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro li:nth-of-type(3) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl03.png)0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro li:nth-of-type(4) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl04.png)0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro .btn__intro a {
    display: block;
    width: 520px;
    background: #695E24;
    border-radius: 35px;
    margin: 0 auto;
    text-align: center;
    line-height: 70px;
    color: #FFF;
  }


  /* .sec__itempoint */
  #feature .sec__itempoint {
    background: #F0E7CF;
    padding: 105px 0 35px;
  }
  #feature .sec__itempoint .lead-txt {
    text-align:center;
    line-height: 1.7;
  }
  #feature .sec__itempoint h2 {
    width: fit-content;
    margin: 8px auto 95px;
  }
  #feature .sec__itempoint h2 span {
    border-bottom: 1px solid #707070;
  }
  #feature .sec__itempoint .cnt__point {
    position:relative;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 80px;
  }
  #feature .sec__itempoint .cnt__point:nth-of-type(2) {
    flex-direction: row-reverse;
  }
  #feature .sec__itempoint .cnt__point::before {
    content: '';
    width: 352px;
    height: 352px;
    border-radius: 176px;
    background: #F7F1E1;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 0;
  }
  #feature .sec__itempoint .cnt__point .blk__txt {
    position: relative;
    width: 460px;
    padding: 0 0 0 92px;
    z-index:1;
  }
  #feature .sec__itempoint .cnt__point .blk__txt h3 {
    position: absolute;
    width: 86px;
    top: 0;
    left: -22px;
  }
  #feature .sec__itempoint p.catch {
    margin: 10px 0 12px;
  }
  #feature .sec__itempoint .cnt__point .blk__txt h4 {
    /*display: inline;*/
  }
  #feature .sec__itempoint .cnt__point .blk__txt h4 span {
    border-bottom: 1px solid #707070;
  }
  #feature .sec__itempoint .cnt__point .blk__txt h4 + p {
    margin-top: 30px;
    line-height: 1.7;
  }
  #feature .sec__itempoint .cnt__point figure {
    width: 370px;
    position: relative;
    z-index:1;
  }

  #feature .sec__itempoint .cnt__point.point4 {
    display:block;
  }
  #feature .sec__itempoint .cnt__point.point4 .blk__txt {
    position: absolute;
    margin: 0 0 0 440px; 
  }
  #feature .sec__itempoint .cnt__point.point4 figure {
    width: 900px;
    display:flex;
    align-items: flex-end;
  }
  #feature .sec__itempoint .cnt__point.point4 figure img.point04-01 {
    width: 370px;
    order:1;
  }
  #feature .sec__itempoint .cnt__point.point4 figcaption {
    width: calc(900px - 360px - 220px);  
    line-height: 24px;
    text-align:right;
    padding: 0 10px 0 0;
    order:2;  
  }
  #feature .sec__itempoint .cnt__point.point4 figure img.point04-02 {
    width: 220px;
    order:3; 
  }


  /* .sec__color */
  #feature .sec__color {
    padding:120px 0 10px 0;
  }
  #feature .sec__color .page-nav {
    display:flex;
    margin: 0 0 100px 0;
  }
  #feature .sec__color .page-nav li {
    width: 300px;
  }
  #feature .sec__color .cnt__color {
    padding: 0 0 90px 0;
  }
  #feature .sec__color .cnt__color h2 {
    width: 300px;
    margin: 0 auto 10px;
  }
  #feature .sec__color .cnt__color h3 {
    margin: 0 0 25px 450px;
  }
  #feature .sec__color .color01 h3 {
  }
  #feature .sec__color .color02 h3 {
    margin-top: -30px;
  }
  #feature .sec__color .color03 h3 {
    margin-top: -25px;
  }


  /* .sec__color > slide */
  #feature .sec__color .splide__arrow {
    opacity:1;
  }
  #feature .sec__color .splide__arrow:hover {
    opacity: .5;
  }  
  #feature .sec__color .splide__track {
    margin: -150px 0 0 0;
  }
  #feature .sec__color .splide__slide {
    height: 510px;
  }
  #feature .sec__color .splide__arrow {
    background: #FFF;  
    top: 58%;
    transform: translateY(-58%);
  }
  #feature .sec__color .splide__arrow--prev {
      left: 1.2em;
  }
  #feature .sec__color .splide__arrow--next {
      right: 1.2em
  }
  #feature .sec__color .color__slide figure {
    position:absolute;
    width: 320px;
    height: 450px;
    top:0;
    left: 60px;
  }
  #feature .sec__color .color__slide .blk__txt {
    position:absolute;
    width: 900px;
    height: 360px;
    bottom: 0;
    padding: 50px 45px 65px 405px;
  }
  #feature .sec__color .color01 .color__slide .blk__txt {
    background: #CEE4A6;
  }
  #feature .sec__color .color02 .color__slide .blk__txt {
    background: #FBF1D6;
  }
  #feature .sec__color .color03 .color__slide .blk__txt {
    background: #C5D3EA;
  }
  #feature .sec__color .color__slide .blk__txt p {
    margin-bottom: 35px;
    line-height: 1.8;
  }
  #feature .sec__color .color__slide .thumbnails {
    display: flex;
    margin: 40px auto 75px;
    padding: 0;
    justify-content: center;
  }
  #feature .sec__color .color__slide .thumbnails > li {
    width: 134px;
    height: 189px;
    overflow: hidden;
    list-style: none;
    margin: 0 0.2rem;
    cursor: pointer;
  }
  #feature .sec__color .color__slide .thumbnails > li img {
    width: 100%;
    height: auto;
    opacity: .5;  
  }
  #feature .sec__color .color__slide .thumbnails > li:hover img,
  #feature .sec__color .color__slide .thumbnails > li.is-active img {
    opacity: 1;
  }
  #feature .sec__color .cnt__color .color__slide h4 {
    margin-bottom: 20px;
  }

  /* btn */
  #feature .sec__color .color__slide .btn__detail a {
    display: block;
    width: 250px;
    border-radius: 25px;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    color: #FFF;
  }
  #feature .sec__color .color01 .color__slide .btn__detail a {
    background: #316924;
  }
  #feature .sec__color .color02 .color__slide .btn__detail a {
    background: #695E24;
  }
  #feature .sec__color .color03 .color__slide .btn__detail a {
    background: #243669;
  }

  #feature .sec__color .cnt__color .btn__item .btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    margin: -12px 55px 0 0;
  }
  #feature .sec__color .color01 .btn__item .btn {
    background: #316924;
  }
  #feature .sec__color .color02 .btn__item .btn {
    background: #695E24;
  }
  #feature .sec__color .color03 .btn__item .btn {
    background: #243669;
  }

  #feature .sec__color .cnt__color .btn__coorde a {
    display: block;
    width: 250px;
    border-radius: 25px;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
  }
  #feature .sec__color .color01 .btn__coorde a {
    color: #3D6335;
    border: #3D6335 1px solid;
    background: #CEE4A6;
  }
  #feature .sec__color .color02 .btn__coorde a {
    color: #695E24;
    border: #695E24 1px solid;
    background: #FBF1D6;
  }
  #feature .sec__color .color03 .btn__coorde a {
    color: #243669;
    border: #243669 1px solid;
    background: #C5D3EA;
  }


  #feature .sec__color .cnt__color .btn__item {
    height: 100px;
    width: 500px;
    border-bottom: 1px #000000 solid;
    border-left: 4px #000000 solid;
    margin: 0 auto 58px;
  }
  #feature .sec__color .cnt__color .btn__item a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #feature .sec__color .cnt__color .btn__item .itemname {
    padding: 0 0 0 55px;

  }
  #feature .sec__color .cnt__color .btn__item .price {
    padding: 0 0 0 55px;
  }


  /* .sec__staff */
  #feature .sec__staff {
    border-top: #707070 1px solid;
  }
  /* 以下、 style_staff.css　参照*/

}

/*-------------------------------------------
for SP
---------------------------------------------*/
@media screen and (max-width: 767px) {

  #feature .pc {
    display: none;
  }
  #feature .inner {
    width: auto;
    padding: 0 calc(20 * (100vw / 375));
  }
  

  /* font-size
  ----------------------------------- */

  /* .sec__intro */
  #feature .sec__intro h2 {
    font-family: "Noto Serif JP", serif;
    font-size: calc(19 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__intro h2 strong {
    font-size: calc(32 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__intro p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(16 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__intro li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(12 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__intro .btn__intro {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(16 * (100vw / 375));
    font-weight: 700;
  }

  /* .sec__itempoint */
  #feature .sec__itempoint .lead-txt {
    font-family: "Noto Serif JP", serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 500;
  }
  #feature .sec__itempoint h2 {
    font-family: "Noto Serif JP", serif;
    font-size: calc(25 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__itempoint h4 {
    font-family: "Noto Serif JP", serif;
    font-size: calc(22 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__itempoint p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 500;
  }
  #feature .sec__itempoint p.catch {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(16 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__itempoint figcaption {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(12 * (100vw / 375));
    font-weight: 400;
  }

  /* .sec__color */
  #feature .sec__color .cnt__color h3 {
    font-family: "Noto Serif JP", serif;
    font-size: calc(16 * (100vw / 375));
    font-weight: 900;
  }
  #feature .sec__color .cnt__color .color__slide h4 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .color__slide p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 400;
  }
  #feature .sec__color .cnt__color .color__slide .btn__detail {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__item .itemname {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__item .price {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(20 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__item .btn {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(14 * (100vw / 375));
    font-weight: 700;
  }
  #feature .sec__color .cnt__color .btn__coorde p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(16 * (100vw / 375));
    font-weight: 700;
  }

  
  /* contents
  ----------------------------------- */

  /* .sec__mv */
  #feature .sec__mv {
    width: 100vw;
  }

  /* .sec__intro */
  #feature .sec__intro {
    padding: calc(30 * (100vw / 375)) 0 calc(60 * (100vw / 375));
  }
  #feature .sec__intro h2 {
    text-align: center;
    margin: 0 auto calc(20 * (100vw / 375));
  }
  #feature .sec__intro h2 span {
    border-bottom: calc(1 * (100vw / 375)) solid #707070;
  }
  #feature .sec__intro p {
    text-align: center;
    margin: 0 0 calc(20 * (100vw / 375)) 0;
  }
  #feature .sec__intro ol {
    width: calc(303 * (100vw / 375));
    display: flex;
    justify-content: space-between;
    margin: 0 auto calc(30 * (100vw / 375));
    flex-wrap: wrap;
    gap: calc(10 * (100vw / 375));
  }
  #feature .sec__intro li {
    width: calc(139 * (100vw / 375));
    height: calc(167 * (100vw / 375));
    text-align: center;
    padding: calc(80 * (100vw / 375)) 0 0 0;
  }
  #feature .sec__intro li:nth-of-type(1) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl01.png) 0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro li:nth-of-type(2) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl02.png)0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro li:nth-of-type(3) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl03.png)0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro li:nth-of-type(4) {
    background: url(/img/feature/w-quiltedcoat-251210/troubles-ttl04.png)0 0 no-repeat;
    background-size: cover;
  }
  #feature .sec__intro .btn__intro {
    margin:0;
  }
  #feature .sec__intro .btn__intro a {
    display: block;
    background: #695E24;
    border-radius: calc(30 * (100vw / 375));
    text-align: center;
    line-height: calc(60 * (100vw / 375));
    color: #FFF;
  }

  /* .sec__itempoint */
  #feature .sec__itempoint {
    background: #F0E7CF;
    padding: calc(60 * (100vw / 375)) 0 calc(35 * (100vw / 375));
  }
  #feature .sec__itempoint .lead-txt {
    text-align:center;
    line-height: 1.7;
  }
  #feature .sec__itempoint h2 {
    /* width: fit-content; */
    text-align:center;
    margin: calc(14 * (100vw / 375)) auto calc(60 * (100vw / 375));
  }
  #feature .sec__itempoint h2 span {
    border-bottom: calc(1 * (100vw / 375)) solid #707070;
  }
  #feature .sec__itempoint .cnt__point {
    position:relative;
    display: flex;
    margin: 0 auto calc(60 * (100vw / 375));
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
  #feature .sec__itempoint .cnt__point:nth-of-type(2) {
    flex-direction: column;
  }
  #feature .sec__itempoint .cnt__point:nth-of-type(4) {
    margin: 0 auto;
  }  
  #feature .sec__itempoint .cnt__point::before {
    content: '';
    width: calc(252 * (100vw / 375));
    height: calc(252 * (100vw / 375));
    border-radius: calc(150 * (100vw / 375));
    background: #F7F1E1;
    position: absolute;
    top: calc(120 * (100vw / 375));
    left: 0;
    z-index: 0;
  }
  #feature .sec__itempoint .cnt__point .blk__txt {
    position: relative;
    padding: 0 0 calc(30 * (100vw / 375)) calc(65 * (100vw / 375));
    z-index:1;
  }
  #feature .sec__itempoint .cnt__point .blk__txt h3 {
    position: absolute;
    width: calc(64 * (100vw / 375));
    top: 0;
    left: calc(-22 * (100vw / 375));
  }
  #feature .sec__itempoint p.catch {
    margin: calc(2 * (100vw / 375)) 0 calc(10 * (100vw / 375));
  }
  #feature .sec__itempoint .cnt__point .blk__txt h4 {}
  #feature .sec__itempoint .cnt__point .blk__txt h4 span {
    border-bottom: calc(1 * (100vw / 375)) solid #707070;
  }  
  #feature .sec__itempoint .cnt__point .blk__txt h4 + p {
    margin-top: calc(20 * (100vw / 375));
    line-height: 1.4;
  }
  #feature .sec__itempoint .cnt__point figure {
    width: calc(270 * (100vw / 375));
    position: relative;
    z-index:1;
  }

  #feature .sec__itempoint .cnt__point.point4 {
    display: flex;
  }
  #feature .sec__itempoint .cnt__point.point4 .blk__txt {}
  #feature .sec__itempoint .cnt__point.point4 figure {
    width: auto;
    display:flex;
    align-items: flex-end;
    flex-wrap: wrap;
    row-gap: calc(20 * (100vw / 375));
  }
  #feature .sec__itempoint .cnt__point.point4 figcaption {
    width: calc(167 * (100vw / 375));
    line-height: 1.4;
    text-align:right;
    padding: 0 calc(10 * (100vw / 375)) 0 0;
    order:1;
  }  
  #feature .sec__itempoint .cnt__point.point4 figure img.point04-02 {
    width: calc(168 * (100vw / 375));
    order:2; 
  }  
  #feature .sec__itempoint .cnt__point.point4 figure img.point04-01 {
    width: calc(276 * (100vw / 375));
    order:3;
  }

  /* .sec__color */
  #feature .sec__color {
    padding: calc(36 * (100vw / 375)) 0 calc(20 * (100vw / 375));
  }
  #feature .sec__color .inner {
    padding:0;
  }  
  #feature .sec__color .page-nav {
    display:flex;
    margin: 0 calc(20 * (100vw / 375)) calc(40 * (100vw / 375));
  }
  #feature .sec__color .page-nav li {
    width: calc(1/3);
  }
  #feature .sec__color .cnt__color {
    padding: 0 0 calc(60 * (100vw / 375)) 0;
  }
  #feature .sec__color .cnt__color h2 {
    width: calc(160 * (100vw / 375));
    margin: 0 0 0 calc(20 * (100vw / 375));
  }
  #feature .sec__color .cnt__color h3 {
    text-align: center;
    margin: 0 0 calc(20 * (100vw / 375)) 0;
  }

  /* .sec__color > slide */
  #feature .sec__color .splide__arrow {
    opacity:1;
  }
  #feature .sec__color .splide__slide {
    display:flex;
    flex-direction: column;
  }  
  #feature .sec__color .color01 .splide__slide {
    background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #CEE4A6 15%, #CEE4A6 100%);
  }
  #feature .sec__color .color02 .splide__slide {
    background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #FBF1D6 15%, #FBF1D6 100%);
  }
  #feature .sec__color .color03 .splide__slide {
    background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #C5D3EA 15%, #C5D3EA 100%);
  }  
  #feature .sec__color .splide__arrow {
    background: #FFF;
    top: 30%;
    transform: translateY(-58%);
    opacity: 1;
  }
  #feature .sec__color .splide__arrow--prev {
      left: 1.2em;
  }
  #feature .sec__color .splide__arrow--next {
      right: 1.2em
  }
  #feature .sec__color .color__slide figure {
    width: calc(218 * (100vw / 375));
    height: calc(308 * (100vw / 375));
    margin: 0 auto calc(26 * (100vw / 375));
    order:1;
  }
  #feature .sec__color .color__slide .blk__txt {
    padding: 0 calc(20 * (100vw / 375));
    order:2;
  }
  #feature .sec__color .color__slide .blk__txt p {
    margin-bottom: calc(30 * (100vw / 375));
    line-height: 1.4;
  }
  #feature .sec__color .color__slide .thumbnails {
    display: flex;
    width: calc(264 * (100vw / 375));
    margin: calc(30 * (100vw / 375)) auto calc(20 * (100vw / 375));
    padding: 0;
    flex-wrap: wrap;
    column-gap: calc(6 * (100vw / 375));
    row-gap: calc(8 * (100vw / 375));
  }
  #feature .sec__color .color__slide .thumbnails > li {
    width: calc(84 * (100vw / 375));
    height: auto;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
  }
  #feature .sec__color .color__slide .thumbnails > li img {
    width: 100%;
    height: auto;
    opacity: .5;  
  }
  #feature .sec__color .color__slide .thumbnails > li:hover img,
  #feature .sec__color .color__slide .thumbnails > li.is-active img {
    opacity: 1;
  }
  #feature .sec__color .cnt__color .color__slide h4 {
    margin-bottom: calc(10 * (100vw / 375));
  }

  /* btn */
  #feature .sec__color .color__slide .btn__detail a {
    display: block;
    width: calc(260 * (100vw / 375));
    border-radius: calc(26 * (100vw / 375));
    margin: 0 auto;
    text-align: center;
    line-height: calc(52 * (100vw / 375));
    color: #FFF;
  }
  #feature .sec__color .color01 .color__slide .btn__detail a {
    background: #316924;
  }
  #feature .sec__color .color02 .color__slide .btn__detail a {
    background: #695E24;
  }
  #feature .sec__color .color03 .color__slide .btn__detail a {
    background: #243669;
  }

  #feature .sec__color .cnt__color .btn__item .btn {
    width: calc(80 * (100vw / 375));
    height: calc(80 * (100vw / 375));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    margin: calc(-16 * (100vw / 375)) 0 0 0;
  }
  #feature .sec__color .color01 .btn__item .btn {
    background: #316924;
  }
  #feature .sec__color .color02 .btn__item .btn {
    background: #695E24;
  }
  #feature .sec__color .color03 .btn__item .btn {
    background: #243669;
  }

  #feature .sec__color .cnt__color .btn__coorde a {
    display: block;
    border-radius: calc(30 * (100vw / 375));
    margin: 0 calc(20 * (100vw / 375));
    text-align: center;
    line-height: calc(60 * (100vw / 375));
  }
  #feature .sec__color .color01 .btn__coorde a {
    color: #3D6335;
    border: #3D6335 1px solid;
    background: #CEE4A6;
  }
  #feature .sec__color .color02 .btn__coorde a {
    color: #695E24;
    border: #695E24 1px solid;
    background: #FBF1D6;
  }
  #feature .sec__color .color03 .btn__coorde a {
    color: #243669;
    border: #243669 1px solid;
    background: #C5D3EA;
  }

  #feature .sec__color .cnt__color .btn__item {
    height: calc(68 * (100vw / 375));
    /* width: 100%; */
    border-bottom: calc(1 * (100vw / 375)) #000000 solid;
    border-left: calc(4 * (100vw / 375)) #000000 solid;
    margin: 0 calc(20 * (100vw / 375)) calc(30 * (100vw / 375));
  }
  #feature .sec__color .cnt__color .btn__item a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #feature .sec__color .cnt__color .btn__item .itemname {
    padding: 0 0 0 calc(26 * (100vw / 375));
  }
  #feature .sec__color .cnt__color .btn__item .price {
    padding: 0 0 0 calc(26 * (100vw / 375));
  }

  /* .sec__staff */
  #feature .sec__staff {
    border-top: calc(1 * (100vw / 375)) solid #707070;
  }
  /* 以下、 style_staff.css　参照*/

}


/*アニメーション*/
.fadeIn {
  opacity: 0;
  transform: translate(0, 2.5rem);
  transition: all 1s ease-out;
}
.fadeIn.is-show {
  opacity: 1;
  transform: translate(0, 0);
}
.fadeView {
  opacity: 0;
  transition: 2s;
}
.fadeView.is-show {
  opacity: 1;
}