@charset "UTF-8";

/* 初めての方へ */
.red_center_ttl{ font-size: 20px; line-height: 1.6em; margin: 70px 0 20px; color: #FFF; padding: 10px 10px 7px; background-color: #AC0000; text-align: center;}
.obi_ttl{ background: #FFF; padding: 15px 40px 13px; line-height: 1.2; display: table; margin: auto; position: relative; font-size: 20px; letter-spacing: 1px; font-weight: bold; text-align: center;}
.obi_ttl::after, .obi_ttl::before { position: absolute; content: ''; width: 100%; height: 3px; left: 0; background: transparent linear-gradient(90deg, #6B4718 0%, #ECCF46 50%, #6B4718 100%) 0% 0% no-repeat padding-box;}
.obi_ttl::after { top: 0;}
.obi_ttl::before { bottom: 0;}
@media screen and (max-width: 767px) {
  .red_center_ttl{ font-size: 18px;}
  .obi_ttl { width: 90%; padding: 15px 10px 13px;}
}

.first .kaitori_contents{ margin-bottom: 30px;}

.features_list{ counter-reset: features;}
.realizable_list{ counter-reset: realizable;}
.features_list li,
.realizable_list li{ background-color: #FFFAEA; padding: 40px; position: relative; overflow: hidden; margin: 15px 0 0;}
.features_list li::after,
.realizable_list li::after{ position: absolute; content: '特徴'; width: 120px; height: 120px; font-size: 14px; letter-spacing: 0; line-height: 1; text-align: center; color: #FFF; background-color: #F2C022; border-radius: 100%; left: -20px; top: -25px; display: flex; align-items: center; justify-content: center; padding: 25px 0 35px 15px; z-index: 1;}
.realizable_list li::after{ content: 'ポイント';}
.features_list li::before,
.realizable_list li::before{ position: absolute; counter-increment: features; content: counter(features); width: 120px; height: 120px; font-size: 33px; line-height: 1; font-weight: bold; text-align: center; color: #FFF; left: -20px; top: -25px; display: flex; align-items: center; justify-content: center; padding: 45px 0 0 15px; z-index: 2;}
.realizable_list li::before{ counter-increment: realizable; content: counter(realizable);}
.features_list p,
.realizable_list p{ padding: 10px 0 0;}
.features_list_ttl,
.realizable_list_ttl{ font-weight: bold; font-size: 20px; color: #333; padding: 0 0 0 90px; margin: 0 0 35px;}
@media screen and (max-width: 767px) {
  .features_list li,
  .realizable_list li{ padding: 30px;}
  .features_list li::after,
  .realizable_list li::after{ width: 100px; height: 100px; font-size: 13px; left: -20px; top: -25px; padding: 25px 0 35px 12px;}
  .features_list li::before,
  .realizable_list li::before{ width: 100px; height: 100px; font-size: 27px; left: -20px; top: -25px; padding: 40px 0 0 15px;}
  .features_list p,
  .realizable_list p{ padding: 10px 0 0;}
  .features_list_ttl,
  .realizable_list_ttl{ font-size: 18px; padding: 0 0 0 70px; margin: 0 0 20px;}
}

.select_method{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-items: center;}
.select_method img{ width: 100%; height: auto; margin: 0 0 20px;}
a.select_method_btn{ display: block; box-sizing: border-box; color: #FFF; border-radius: 10px; border: none; box-sizing: border-box; font-size: 20px; line-height: 1.4; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); text-align: center; padding: 15px 20px 12px; position: relative; font-weight: bold; font-family: 'Font Awesome 5 Free';}
a.select_method_btn:hover{ margin: 4px -2px -4px 2px; box-shadow: none!important;}
.shop a.select_method_btn{ background: linear-gradient(to bottom, #73BAF8, #337AB7); box-shadow: 2px 4px 0 #1464A0;}
.delivery a.select_method_btn{ background: linear-gradient(to bottom, #FFD34A, #E3AD00); box-shadow: 2px 4px 0 #CE9D00;}
a.select_method_btn::after { position: absolute; content: ''; border-top: 12px solid #FFF; border-right: 8px solid transparent; border-left: 8px solid transparent; right: 15px; top: 0; bottom: 0; margin: auto; display: inline-table;}
.method_folw_ttl{ color: #FFF; font-size: 20px; line-height: 1; padding: 14px 20px 10px; font-weight: bold; border-radius: 50px; display: block; text-align: center;}
#shop_method .method_folw_ttl{ background-color: #337ab7;}
#delivery_method .method_folw_ttl{ background-color: #E3AD00;}
.method_folw{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); justify-items: center; counter-reset: method_folw;}
.method_folw li{ width: 99%; background-color: #f7f1e8; padding: 20px; box-sizing: border-box; position: relative;}
.method_folw li::before{ position: absolute; content: counter(method_folw); counter-increment: method_folw; color: #FFF; width: 60px; height: 60px; font-weight: bold; font-size: 23px; line-height: 1; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 100%; padding: 23px 0 0; top: 10px; left: 10px; z-index: 1;}
#shop_method .method_folw li::before{ background-color: #337ab7;}
#delivery_method .method_folw li::before{ background-color: #F2C022;}
.method_folw li::after{ position: absolute; content: "STEP"; color: #FFF; width: 60px; height: 60px; font-size: 14px; line-height: 1; text-align: center; display: flex; align-items: center; justify-content: center; padding: 7px 0 25px; top: 10px; left: 10px; z-index: 2;}
.method_folw img{ width: 100%; height: 180px; object-fit: cover; object-position: center;}
.method_folw .flow_ttl{ font-weight: bold; color: #AC0000; font-size: 16px; letter-spacing: 0; line-height: 1.4; text-align: center; margin: 15px 0 0; padding: 0;}
@media screen and (max-width: 767px) {
  a.select_method_btn{ font-size: 18px; padding: 10px 20px;}
  .method_folw_ttl { font-size: 18px;}
  .method_folw li { padding: 15px;}
  .method_folw li::before{ width: 50px; height: 50px; font-size: 20px; padding: 22px 0 0; top: 5px; left: 5px;}
  .method_folw li::after{ width: 50px; height: 50px; font-size: 12px; padding: 7px 0 22px; top: 5px; left: 5px;}
  .method_folw .flow_ttl { font-size: 14px; margin: 5px 0 0;}
}
@media screen and (max-width: 400px) {
  .select_method,
  .method_folw,
  .identification_list{ grid-template-columns: 100%}
}

.identification_list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); justify-items: center;}
.identification_list img{ display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto;}
.identification_name{ margin: 20px 0; line-height: 1; font-weight: bold; text-align: center; padding: 0;}
.identification_caption{ font-size: 12px; line-height: 1.4; text-align: center; margin: -10px 0 0; letter-spacing: 0;}

/* お客様の声 */
.shop-customer-voice { position: relative; background: #F2FBFF; box-shadow: 0px 0px 0px 5px #F2FBFF; border: dashed 2px #D8EBFF; padding: 10px ; color: #454545; margin: 0 auto 30px; width: calc(100% - 10px);}
.shop-customer-voice::after { position: absolute; content: ''; left: -7px; top: -7px; border-width: 0 0 25px 25px; border-style: solid; border-color: #FFF #FFF #B6D1FF; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);}
.customer-voice { padding: 20px 10px;}
.customer-voice-ttl { font-weight: bold; font-size: 18px; display: table; padding: 5px 10px 5px 50px; position: relative; border-bottom: 2px solid #87BBFF; border-top: 2px solid #87BBFF; margin: 0 auto 15px; background-color: #FFF; letter-spacing: inherit; color: #333;}
.customer-voice-ttl::before { font-family: "Font Awesome 5 Free"; content: "\f075"; font-weight: 900; position: absolute; font-size: 26px; left: 10px; top: 5px; color: #B6D1FF;}
.customer-voice-txt { padding: 0; width: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 50%, #F2FBFF 50%, #F2FBFF 100%), linear-gradient(180deg, #D8EBFF 2px, transparent 1px); background-size: 10px 100%,100% 32px; line-height: 32px; padding-bottom: 2px;}
@media screen and (max-width: 767px) {
  .customer-voice { padding: 20px 5px;}
}