@charset "UTF-8";
  /* =====================
    インフォページ
   ======================= */
  /** -------------------- 共通 -------------------- **/
  
  #info h1 {
    font-size: 3.2rem;
    font-weight: 700;
    border-bottom: 4px solid #F3F3F3;
    padding: 16px 0;
    margin-bottom: 30px;
  }
  
  #info h2 {
    font-size: 2.2rem;
    font-weight: 700;
    border-bottom: 2px solid #F3F3F3;
    padding: 16px 0;
    margin-bottom: 30px;  
  }
  
  #info p {
      font-size: 1.8rem;
      line-height: 150%;
  }
  
  #info .introduction{
      margin-bottom: 40px;
  }
  
  #info .introduction{
      margin-bottom: 40px;
  }
  
  #info .anchor a{
        border-radius: 100px;
        display: block;
        border: 2px solid var(--c_text);
        padding: 9px 20px;
        font-size: 1.6rem;
        margin-right: 10px;
        margin-bottom: 20px;
        width: 280px;
        position: relative;
        font-weight: 500;
  }

  #info .anchor a::after,.anchor a::before{
    content: "";
    position: absolute;
    display: block;
    width: 8px;
    height: 1.5px;
    background-color: #000000;
  }

  #info .anchor a::after{
    top: 22px;
    right: 19px;
    transform: rotate(-45deg);
  }
  
  #info .anchor a::before{
    top: 22px;
    right: 24px;
    transform: rotate(45deg);
  }

  #info .underline{
    text-decoration: underline;
  }

 /* タブレット・PC
  ------------------------ */

  @media (min-width: 700px){
    #info .anchor{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 76px;
    }
  }
  
  /* スマホ
  ------------------------ */
  
  @media (max-width: 699px) {
   
   #info h1 {
     font-size: 2.2rem;
     margin-bottom: 20px;
   }
   
   #info h2 {
     font-size: 1.8rem;
     margin-bottom: 24px;  
   }
   
   #info p {
      font-size: 1.4rem;
      line-height: 150%;
   }

   #info .anchor{
      margin-bottom: 56px;
  }

  #info .anchor a{
      width: 100%;
      margin:0 0 8px 0;
      font-size: 1.4rem;
      padding: 4px 20px;
  }

  #info .anchor a::after,.anchor a::before{
      width: 7px;
      height: 1px;
  }

  #info .anchor a::after{
      top: 16px;
      right: 21px;
  }
  
  #info .anchor a::before{
      top: 16px;
      right: 26px;
  }
   
   }

/** -------------------- 当店について -------------------- **/

#info #about .business{
  display: flex;
  justify-content:space-between;
  align-items: center;
  margin-bottom: 30px;
}

#info #about .business img{
  width: 400px;
}

#info #about .business h3{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

#info #about .business .description{
  width: 455px;
}

#info #about .wrapper{
margin-bottom: 60px;
}

/* スマホ
  ------------------------ */
  @media (max-width: 699px) {
 

    #info #about .business{
        display: block;
        margin-bottom: 24px;
    }
    
    #info #about .business img{
        width: 100%;
    }
    
    #info #about .business h3{
        font-size: 1.6rem;
        margin: 10px 0;
    }
    
    #info #about .business .description{
        width: 100%;
    }
    
    #info #about .wrapper{
      margin-bottom: 40px;
    }
    }



/** -------------------- よくあるご質問 -------------------- **/
  
  #info #faq h3{
    font-size: 1.8rem;
    width: 95%;
}

#info #faq details {
    margin-bottom: 16px;
}

#info #faq summary {
    display: block;
    position: relative;
}

#info #faq summary::-webkit-details-marker {
/* Safariで表示されるデフォルトの三角形アイコンを消します */
display: none;
}

#info #faq .summary_inner {
    border-radius: 100px;
    border: 2px solid #000000;
    padding: 18px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    position: relative;
}

#info #faq summary::before {
    content: '+';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: transform 0.3s;
    font-size: 30px;
    color: #000000;
  }

  #info #faq details[open] summary{
    background: var(--c_yellow);
    border-radius: 100px;
  }
  
  #info #faq details[open] summary:before,
  #info #faq summary details[open] summary:before {
    content: "−";
  }

#info #faq .answer {
    padding: 16px 20px;
}

#info #faq .wrapper{
margin-bottom: 60px;
}

/* スマホ
  ------------------------ */
  @media (max-width: 699px) {
 
    #info #faq h3{
    font-size: 1.6rem;
    width: 95%;
}

#info #faq details {
    margin-bottom: 8px;
}

#info #faq .summary_inner {
    border-radius: 100px;
    border: 2px solid #000000;
    height: 64px;
    padding: 0 20px;
}

#info #faq summary::before {
    font-size: 20px;
  }

  #info #faq details[open] summary:before,
  #info #faq summary details[open] summary:before {
    content: "−";
  }

#info #faq .answer {
    padding: 10px 20px;
}

#info #faq .wrapper{
margin-bottom: 40px;
}

}



/** -------------------- ご利用ガイド -------------------- **/

.guide p{
  margin: 0 0 6px 0;
}

.guide-h{
  margin-bottom: 40px !important;
}

.p-shipping__table {
width: 100%;
table-layout: fixed;
border-spacing: 2px;
margin: 30px 0 16px;
}

.p-shipping__table--xs {
font-size: 1.6rem;
font-weight: 400;
}

.p-shipping__table--s {
font-size: 1.6rem;
font-weight: 400;
}

.p-shipping__table--m {
font-size: 1.6rem;
}

.p-shipping__table--l {
font-size: 1.8rem;
}

.p-shipping__table--xl {
font-size: 2.3rem;
}

.p-shipping__table--normal {
background: var(--c_meat);
}

.p-shipping__table--cool {
background: var(--c_fish);
}

.p-shipping__table__spacer {
display: block;
height: 4px;
}

.p-shipping__table th, .p-shipping__table td {
text-align: center;
vertical-align: middle;
}

.p-shipping__table thead th {
padding: 10px 4px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.4;
}

.p-shipping__table thead th:not(:empty) {
background: var(--c_gray);
}

.p-shipping__table thead th:first-child {
width: 22.6%;
}

.p-shipping__table tbody th {
color: var(--c_wht);
font-size: 2.3rem;
font-weight: 700;
line-height: 1.1;
padding: 4px;
}

.p-shipping__table tbody td {
border: 4px solid var(--c_gray);
font-size: 1.4rem;
font-weight: 700;
line-height: 1.3;
padding: 17.5px 4px;
}

.p-shipping__table tbody .guide_table{
padding: 35.5px 4px;
}


.p-shipping__link {
margin: 8px 0 0;
}

.p-shipping__link a {
text-decoration: underline;
}

.guide_table{
display: flex;
align-items: center;
justify-content: center;
}

.guide_table_b{
margin: 0 10px;
}

.guide-icon{
position: relative;
margin: 34px 0 10px 30px;
position: relative;
top: 0;
font-size: 20px;
font-weight: 700;
}

.guide-icon::before{
margin: 30px 0 10px;
position: absolute;
top: -28px;
left: -32px;
content: "";
width: 20px;
height: 20px;
background-color: #F3F3F3;
border-radius: 50%;
}

.guide-icon-img{
display: block;
width: 100%;
margin-top: 20px;
}

.guide-credit-img{
display: block;
width: 607px;
margin-top: 20px;
margin-bottom: 30px;
}

.guide-tel{
margin-top: 60px;
}

.guide-tel_b{
margin-top: 20px;
}

.guide-condition{
margin-bottom: 10px !important;
}

.last-b{
margin-bottom: 146px !important;
}

.guide h3{
font-weight: 700;
}

.guide-review-img{
  display: block;
  width: 700px;
  margin-top: 20px;
  margin-bottom: 10px;
}
  
@media (max-width: 700px) {
.p-shipping__table {
width: 100%;
table-layout: fixed;
border-spacing: 2px;
margin: 20px 0 16px;
}

.p-shipping__table--xs {
font-size: 1.0rem;
font-weight: 400;
}

.p-shipping__table--s {
font-size: 1.0rem;
font-weight: 400;
}

.p-shipping__table--m {
font-size: 1.4rem;
}

.p-shipping__table--l {
font-size: 1.8rem;
}

.p-shipping__table--xl {
font-size: 2.2rem;
}

.p-shipping__table--normal {
background: var(--c_meat);
}

.p-shipping__table--cool {
background: var(--c_fish);
}

.p-shipping__table__spacer {
display: block;
height: 4px;
}

.p-shipping__table th, .p-shipping__table td {
text-align: center;
vertical-align: middle;
}

.p-shipping__table thead th {
padding: 10px 4px;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.4;
}

.p-shipping__table thead th:not(:empty) {
background: var(--c_gray);
}

.p-shipping__table thead th:first-child {
width: 54px;
}

.p-shipping__table tbody th {
color: var(--c_wht);
font-size: 1.4rem;
font-weight: 700;
line-height: 1.1;
padding: 4px;
}

.p-shipping__table tbody td {
border: 2px solid var(--c_gray);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.0;
padding: 12px 4px;
}

.guide_table{
display: block;
}

.p-shipping__table tbody .guide_table{
padding: 17.5px 4px;
}

.guide-icon{
font-size: 16px;
margin: 34px 0 10px 22px;

}

.guide-icon::before{
top: -26px;
left: -22px;
width: 14px;
height: 14px;
}
.guide-credit-img{
width: 100%;
}

.guide-tel{
  margin-top: 40px;
  }

.last-b{
margin-bottom: 100px !important;
}

}




/** -------------------- お問い合わせ -------------------- **/

.contact p{
  margin: 0 0 6px 0;
}

.contact-h{
  margin-bottom: 40px !important;
}

.contact-rink_box a{
  border-radius: 100px;
  display: block;
  border: 2px solid var(--c_text);
  padding: 9px 20px;
  font-size: 16px;
  margin-right: 20px;
  width: 280px;
  position: relative;
  font-weight: 500;
}

.input-box{
border-radius: 100px;
border: 2px solid var(--c_text);
padding: 16px 20px;
background: #F3F3F3;
margin-bottom: 30px;
}

.input-box:focus{
background: #fff;
}

.input-text{
border-radius: 8px;
border: 2px solid var(--c_text);
padding: 16px 20px;
background: #F3F3F3;
height: 300px;
margin-bottom: 80px;
}

.input-text:focus{
background: #fff;
}


.input-btn{
border-radius: 100px;
border: 2px solid var(--c_text);
padding: 19px 20px;
margin: 0 auto;
display: block;
background: #000000;
color: #fff;
font-weight: 700;
margin-bottom: 100px;
width: 424px;
transition: var(--anim);
}

.input-btn:active{
background: var(--c_liquor);
transition: var(--anim);
color: var(--c_text);
}

.input-btn:hover{
background: var(--c_liquor);
transition: var(--anim);
color: var(--c_text);
}

/* .input-btn:focus{
background: #fff;
} */

.contact-rink_box a::after,.contact-rink_box a::before{
content: "";
position: absolute;
display: block;
width: 8px;
height: 1.5px;
background-color: #000000;
}

.contact-rink_box a::after{
top: 22px;
right: 19px;
transform: rotate(-45deg);
}
.contact-rink_box a::before{
top: 22px;
right: 24px;
transform: rotate(45deg);
}

@media (min-width: 701px){
.contact-rink_box{
  display: flex;
  margin-bottom: 76px;
}
}


@media (max-width: 700px) {
.input-box{
  padding: 13px 20px !important;
  margin-bottom: 10px;
}

.contact-h{
  margin-bottom: 30px !important;
}

.input-text{
height: 250px;
margin-bottom: 60px;
}


.input-btn{
border-radius: 100px;
border: 2px solid var(--c_text);
padding: 16px 20px;
margin: 0 auto;
display: block;
background: #000000;
color: #fff;
font-weight: 700;
margin-bottom: 80px;
width: 89%;
}

.contact-rink_box{
  margin-bottom: 56px;
}

.contact-rink_box a{
  width: 100%;
  margin:0 0 8px 0;
  font-size: 14px;
  padding: 4px 20px;
}


.contact-rink_box a::after,.contact-rink_box a::before{
  width: 7px;
  height: 1px;
}

.contact-rink_box a::after{
top: 16px;
right: 21px;
}
.contact-rink_box a::before{
top: 16px;
right: 26px;
}
.contact-tel_b{
margin-bottom: 80px;
}


}



/** -------------------- ご注文の流れ -------------------- **/

.flow p{
  margin: 0 0 6px 0;
}
.flow-p{
  margin-bottom: 60px !important;
}
.flow-img{
  display: block;
  width: 100%;
  margin: 30px 0;
}

.flow-step1-img{
  max-width: 603px;
}

.flow-step2-img{
  max-width: 524px;
}

.flow-step3-img{
  max-width: 530px;
}

.flow-step4-img{
  max-width: 567px;
}

.flow-step5_1-img{
  max-width: 530px;
}

.flow-step5_2-img{
  max-width: 508px;
}

.flow-step6-img{
  max-width: 647px;
}


.flow-step7-img{
  max-width: 645px;
}

.flow-step8-img{
  max-width: 530px;
}

.flow-p1-img,.flow-p2-img{
  width: 634px;
}


.flow-tel{
  margin-top: 60px;
}

.flow-tel_b{
  margin-top: 20px;
}

.flow-condition{
  margin-bottom: 10px !important;
}

.flow-last-b{
  margin-bottom: 146px !important;
}

.flow h3{
  font-weight: 700;
}

.flow-h1{
      margin-top: 72px !important;
  }

@media (max-width: 700px) {
.flow-last-b{
  margin-bottom: 100px !important;
}

.flow-img{
  display: block;
  width: 100%;
  margin: 20px 0;
  }

.flow-h1{
  margin-top: 62px !important;
  }
}