@charset "UTF-8";
/* CSS Document */
/*メインスライダー*/
#main-slider { padding-bottom: 60px; background: #FBEFF0; }

.bx-wrapper { box-shadow: none !important; border: none !important; background: none !important; position: relative; margin-bottom: 0 !important; z-index: 0 !important; }
.bx-wrapper .bx-pager { bottom: -35px !important; }
.bx-wrapper .bx-controls-direction a { width: 25px !important; height: 70px !important; }
.bx-wrapper .bx-prev { background: url("../img/ico_prev-b.svg") no-repeat center !important; mix-blend-mode: multiply; left: 20px !important; }
.bx-wrapper .bx-next { background: url("../img/ico_next-b.svg") no-repeat center !important; mix-blend-mode: multiply; right: 20px !important; }

/*岡山宝紹介*/
#about { padding-bottom: 1.5em; background: #FEF2F3; }
#about .a-inner { display: flex; background: #FFF; align-items: center; }
@media only screen and (max-width: 580px) { #about .a-inner { display: block; } }
#about picture { width: 50%; line-height: 0; }
@media only screen and (max-width: 580px) { #about picture { width: 100%; } }
#about .a-text { font-size: 25px; width: 50%; padding-right: 3em; }
@media only screen and (max-width: 580px) { #about .a-text { width: 100%; font-size: 20px; padding: 2em 1em; } }

/*基準値1000pxとした場合*/
#about1000 { padding-bottom: 1.5em; background: #FEF2F3; }
#about1000 .a-bg { width: 100%; background: url("../img/bg_about.jpg") no-repeat; background-position: center; background-size: 100% auto; padding: 100px 0; }
@media only screen and (max-width: 580px) { #about1000 .a-bg { background: none; padding: 0; } }
#about1000 .a-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; }
@media only screen and (max-width: 580px) { #about1000 .a-inner { display: block; } }
#about1000 .a-inner h2 { width: 50%; line-height: 1em; color: #FFF; font-size: 40px; letter-spacing: 0.1em; }
@media only screen and (max-width: 580px) { #about1000 .a-inner h2 { width: 100%; background: url("../img/bg_about-sp.jpg") no-repeat; padding: 100px 20px; font-size: 30px; } }
#about1000 .a-inner h2 span { font-size: 20px; }
@media only screen and (max-width: 580px) { #about1000 .a-inner h2 span { font-size: 16px; } }
#about1000 .a-inner .a-text { width: 50%; font-size: 25px; }
@media only screen and (max-width: 580px) { #about1000 .a-inner .a-text { width: 100%; background: #FFF; padding: 3em 20px; font-size: 20px; } }

/*商品紹介*/
#product { background: #F5F5F5; }

.product-movie { background: #FFF; padding: 80px 50px; border-radius: 20px; }

.read-more label, .read-more input[type="checkbox"] { display: none; }

.youtube { width: 100%; aspect-ratio: 16 / 9; margin: 4em 0 1em; }
.youtube iframe { width: 100%; height: 100%; }

.p-box { display: flex; flex-wrap: wrap; justify-content: space-between; }
.p-box > li { width: 47%; border-radius: 20px; background: #FFF; margin-top: 70px; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.16); }

.slick-list { border-top-left-radius: 20px; border-top-right-radius: 20px; }

.slick-prev { left: 15px !important; z-index: 1; width: 25px !important; height: 25px !important; }
.slick-prev::before { content: "" !important; background: url("../img/ico_prev.svg") !important; background-size: contain !important; }

.slick-next { right: 15px !important; z-index: 1; width: 25px !important; height: 25px !important; }
.slick-next::before { content: "" !important; background: url("../img/ico_next.svg") !important; background-size: contain !important; }

.slick-arrow::before { content: "" !important; width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; }

.p-text { padding: 1.5em; border-bottom: 2px solid #EFEFEF; }
.p-text h2 { font-size: 28px; margin-bottom: 20px; line-height: 1.3em; }
.p-text .price { margin-top: 1em; }

.p-allergie { padding: 1.5em; }
.p-allergie::before { content: "アレルギー物質"; display: block; font-size: 18px; }

@media screen and (max-width: 580px) { .read-more { position: relative; margin: 50px auto 0; padding: 0 0 50px; }
  .read-more label { position: absolute; display: table; left: 50%; bottom: 0; margin: 0 auto; width: 200px; padding: 10px 0; color: #333; text-align: center; border-radius: 5px; transform: translateX(-50%); cursor: pointer; z-index: 1; }
  .read-more label::before { content: "続きを見る"; }
  .read-more input[type="checkbox"]:checked ~ label::before { content: "元に戻す"; }
  .read-more input[type="checkbox"] { display: none; }
  .read-more-content { position: relative; height: 200px; overflow: hidden; }
  .read-more input[type="checkbox"]:checked ~ .read-more-content { height: auto; }
  .read-more-content::before { position: absolute; display: block; content: ""; bottom: 0; left: 0; width: 100%; height: 50px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, #fff 100%); }
  .read-more input[type="checkbox"]:checked ~ .read-more-content::efore { display: none; }
  .p-box { display: block; padding: 20px; }
  .p-box > li { width: 100%; }
  .p-box > li:first-child { margin-top: 0; }
  .p-text { font-size: 18px; }
  .p-text .price { font-size: 20px; } }
/*新着情報*/
#news { background: #FBEFF0; }
@media only screen and (max-width: 1000px) { #news { padding: 1em; } }
#news iframe { height: 360px; }
@media only screen and (max-width: 580px) { #news iframe { height: 65vh; } }
@media only screen and (max-width: 440px) { #news iframe { height: 50vh; } }
#news .link-txt { text-align: center; }
#news .link-txt:hover { color: #FA616A; }
#news .link-txt:hover::after { content: ""; background: url("../cmn/img/icon01_on.svg") no-repeat center; }
#news .link-txt::after { content: ""; background: url("../cmn/img/icon01.svg") no-repeat center; background-size: contain; width: 5px; height: 10px; display: inline-block; vertical-align: 0.1em; margin-left: 1em; }

/*動画紹介*/
@media only screen and (max-width: 1000px) { #movie { padding: 20px; } }

.youtube { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 1em; }
.youtube iframe { width: 100%; height: 100%; }

/*販売店情報*/
#store { background: #F5F5F5; }
@media only screen and (max-width: 1000px) { #store { padding: 20px; } }

/*お取り寄せ*/
#order { background: #F5F5F5; padding-bottom: 100px; }
#order .btn_fax { background: #FF6172; color: #FFF; font-weight: 700; font-size: 22px; padding: 0.5em 1em; position: relative; display: inline-block; margin: 1em 0; }
#order .btn_fax::before { content: ""; background: url("../img/ico_fax.svg") no-repeat center; background-size: contain; width: 25px; height: 25px; display: inline-block; vertical-align: -2px; margin-right: 10px; }
#order .btn_fax::after { content: ""; position: absolute; bottom: 0; left: 0; border-bottom: 13px solid #FF909B; /* 好みで高さ色を変えてください */ border-right: 13px solid transparent; }
#order .btn_fax:hover { background: #FEF2F3; color: #FA616A; }
#order .btn_fax:hover::before { content: ""; background: url("../img/ico_fax_on.svg") no-repeat center; }
#order .txt_fax { font-size: 30px; line-height: 1; }
#order .txt_fax span { font-size: 40px; }
#order .txt_tel { font-size: 20px; }
#order .txt_tel strong { font-size: 30px; letter-spacing: 0.05em; }

.formTable { text-align: left; width: 100%; }
.formTable td { padding: 1em 0; }
.formTable .need { color: #FF0000; font-size: 15px; margin-right: 10px; font-weight: 500; }
.formTable input[type="text"], .formTable textarea { background: #FFF; border: 1px solid #DDD; width: 100%; box-sizing: border-box; padding: 5px; color: #7E7E7E; }

input[type="submit"], input[type="reset"] { letter-spacing: 1.5px; padding: 12px 1.5em; border: 1px solid #707070; border-radius: 4px; font-weight: 700; background: #FAF8F4; margin-bottom: 10px; }

@media screen and (max-width: 1000px) { #order .inner900 { padding: 20px; }
  #form { padding: 2em 20px; } }
@media screen and (max-width: 580px) { #order .txt_fax { font-size: 20px; }
  #order .txt_fax span { font-size: 30px; }
  #order .btn_fax { font-size: 18px; line-height: 1.4em; width: 100%; }
  #order .txt_tel span { text-indent: -3em; padding-left: 3em; display: block; margin: 0 auto; }
  #form { padding-top: 100px; }
  #form .inner1000 { padding-top: 4em; padding-bottom: 4em; } }
@media screen and (max-width: 1000px) { #storeinfo { padding: 20px; } }