/** Shopify CDN: Minification failed

Line 485:0 Unexpected "}"
Line 1149:0 Unexpected "{"
Line 1149:1 Expected identifier but found "%"
Line 1185:0 Unexpected "{"
Line 1185:1 Expected identifier but found "%"
Line 1523:10 Expected ":"
Line 1733:10 Expected ":"
Line 1796:83 Unexpected "{"
Line 1808:4 "margin-botton" is not a known CSS property
Line 1915:2 "margin-buttom" is not a known CSS property

**/
@charset "utf-8";



/* .reason-img {width: 50% !important;border-radius: 50%;}
.commentator{margin-bottom:1rem !important;}
.about-commentator>p:first-child {font-size: 2rem;}
.advice-container{margin-top:1rem !important;}
.about-commentator p{font-size:1.3rem }
.about-advice div p:last-child {height: auto !important;}
.about-advice div>p{font-size:1.2rem !important;}
.advice-link-img img{height:75px;width:auto;}
.advice-link-img{width: auto !important;margin-right: 3% !important;}
.about-advice div>p{    font-weight: normal !important;}
 */

 .main {
  height: auto;
 }

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  font-size: 1.6rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "MS Pゴシック",sans-serif;
  color: #171C22;
  background-color: #fff;
   margin: 0 auto;
    padding: 0 4%;
}


body,
header,
nav,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
a,
dl,
dd,
dt,
div,
span,
time,
figure,
figcaption,
article,
section,
aside {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

img,
svg {
  vertical-align: bottom;
  width: 100%;
}

.chopstick-fv {
    max-width: 1600px;
    margin: 0 auto;
  position:relative;
/*     padding: 0 4%; */
}

a {
  text-decoration: none;
  color: #333;
  display: inline-block;
  text-align: center;
  /* vertical-align: bottom; */
  display: block;
}
.chopstick-j-copy{
  font-size: 2rem;
}

a:hover {
  opacity: .7;
  transition: 0.3s;
}

/* h1,
h2,
h3,
h4,
h5,
h6,
.price,
.item,
.b
.preice{
  font-weight: bold;
} */

ul li {
  list-style-type: none;
}

.link-btn {
  display: block;
  color: #171C22;
  background-color: #f2b83f;
  width: 100%;
  line-height: 36px;
  text-align: center;
  margin-top: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  border-radius: 5px;
}

.btn-w {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%;
}

.section-wrapper {
  max-width: 990px;
  margin: 3% auto 1%;
  padding: 30px 0 10px;
}

.section-title {
  font-size: 4rem;
  margin: 30px 0;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .section-title {
    font-size: 2.2rem;
  }
  line-height: 1.2;
}

.section-inner {
  margin-left: auto;
  margin-right: auto;
  list-style: none;
}

h3 {
  font-size: 2.2rem;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

h4 {
  font-size: 1.8rem;
  text-align: left;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.map {
  width: 100%;
  height: auto;
  margin-bottom: 5%;
  border:none;
}



.sp, .sp_ver {
  display: none;
}

/* ファーストビュー */


.chopstick-title{
    position: absolute;
    top: 15%;
    left: 5%;
    color:#fff;
}
.chopstick-brand-copy {
  font-size :7rem;
}

@media(min-width:1600px){
    .chopstick-title{
    position: absolute;
    top: 15%;
    left: 25%;
}}


@media(max-width:999px){
  .chopstick-title{
    position: absolute;
    top: 15%;
    left: 3%;
  }
  .chopstick-brand-copy {
     font-size: 5rem;
  }
  }
@media(max-width:799px){
  .chopstick-title{
    position: absolute;
    top: 15%;
    left: 3%;
    font-size:4rem;
  }
  .tab_item {
    font-size: 1.5rem;
  }
}
@media(max-width:600px){
  .chopstick-title{
    position: absolute;
    top: 15%;
    left: 5%;
    font-size:2.5rem;
  }
  .chopstick-brand-copy {
     font-size: 3rem;
  }
}

/* base */
/* fv */
.main {
  max-width: 1500px;
  margin: 0 auto;
}

.fv {
 width: 100%;
  height: auto;
  position: relative;
  margin: 0 auto;
  padding: 275px 0;
  overflow: hidden;
}


.fv-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.fv-img img{
  object-fit: cover;
  object-position: center;
}

.main-copy {
  width: 100%;
  color: #fff;
  text-align: center;
}

.brand-copy {
  font-size: 7rem;
  font-weight: bold;
  letter-spacing: 0.8rem;
  margin-bottom: 5%;
}
.p.chopstick-fv-img {
  overflow: hidden;
}
@media(max-width:700px){
  .brand-copy {
    font-size: 2.5rem;
  }
  }

.j-copy {
  font-size: 2rem;
  text-align: center;
}
@media(max-width:700px){
.j-copy{
  font-size: 1.5rem;
}
.fv{
  padding: 80px 0;
}
.fv-img {
  height: 100%;
}
.fv-img img {
  height: 100%;
}
.section-inner {
  padding: 0 2%;
}
}

/* fv */
/* ranking */
.tabs,
.tabs-gift {
  margin-top: 50px;
  padding-bottom: 40px;
  width: 100%;
  margin: 5% auto 0;
/*   border-bottom: 1px solid #d9d9d9; */
}

.tab_item,
.tab_item-gift {
  width: calc(100%/2);
  height: 50px;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 1.7rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover,
.tab_item-gift:hover {
  opacity: 0.75;
}

input[name="tab_item"] {
  display: none;
}

input[name="gift_item"] {
  display: none;
}
@media(max-width:700px){
  .tab_item {
    font-size: 1.5rem;
  }
}

/*タブ切り替えの中*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブの表示*/
#all:checked~#all_content,
#name_item:checked~#name_item_content,
#self_item:checked~#self_item_content,
#gift_item:checked~#gift_item_content {
  display: block;
}

/*選択されているタブのスタイル*/
.tabs input:checked+.tab_item {
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
}

.flex-container,
.brand-container,
.reason-container,
.report-container,
.commentator,
.advice-container,
.advice-link>a,
.gift-container,
.exclusive-container,
.flexbox-knife,
.knife-wrapper,
.knowledge-wrapper {
  display: flex;
}
.f-container{
  display: flex;
  position: relative;
}
.brand-container{
  flex-wrap: wrap;
}
@media(max-width:700px){
  .brand-container {
    flex-wrap: nowrap;
  }
}

.chopstick-flex-item {
  max-width: 33%;
  padding: 10px;
  background-color: #fff;
}

.number1,
.number2,
.number3,
.number4 {
  font-size: 2rem;
  color: #fff;
  display: block;
  width: 5rem;
  height: 5rem;
  text-align: center;
  line-height: 3.8rem;
  transform: translate(-15%, 120%);
  padding: 5px;
}

@media (max-width: 700px) {
  .number1,
  .number2,
  .number3,
  .number4 {
    font-size: 1.5rem;
    color: #fff;
    display: block;
    width: 4rem;
    height: 4rem;
    text-align: center;
    line-height: 2.8rem;
    transform: translate(-15%, 120%);
    padding: 5px;
  }
}

.number1 {
  background-color: #DBB74C;
}

.number2 {
  background-color: #98ADB7;
}

.number3 {
  background-color: #DA8D69;
}

.number4 {
  background-color: #494642;
}

.price,
.item {
  text-align: left;
}

@media (max-width: 700px) {
  .price {
    font-size: 2rem;
  }
  }
}
/* rankingここまで */

/*========= バナーエリア =========*/

.banner_content {
    background-image: url(/cdn/shop/files/8c1b061137b1c40b2ac4da623d26a704.png?v=1662224010);
    height: 400px;
    background-size: cover;
}
.banner_content_issho {
    background-image: url(/cdn/shop/files/8c1b061137b1c40b2ac4da623d26a704.png?v=1662224010);
    height: 400px;
    background-size: cover;
}
@media (max-width: 700px) {
  .banner_content {
    height: auto;
  }
}

.banner_content_gift {
    background-image: url(/cdn/shop/files/cta2-bg.jpg?v=1658351086);
    height: 400px;
    background-color: #ffffff80;
    background-blend-mode: lighten;
    color: #171C21;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.banner_title {
    color: #fff;
    font-size: 4rem;
    font-weight: bold;
    padding: 2%;
  padding-bottom:0;
  max-width:990px;
  margin:0 auto;
}
.banner_text {
    color: #fff;
    font-size: 2rem;
    padding: 2%;
    line-height: 1.6;
  max-width:990px;
  margin:0 auto;
}

@media (max-width: 700px) {
  .banner_title {
 font-size: 2.5rem;
}
.banner_content_gift, .banner_content_issho {
  height: auto;
}
}
.cs-gift-title{
    font-size: 4rem;
    font-weight: bold;
    padding: 2%;
  text-align:center;
}  

.cs-gift-text {
   font-size: 2rem;
    padding-right: 2%;
  padding-left: 2%;
    padding-bottom: 5%;
    line-height: 1.6;
  color: #171C2;
  max-width:990px;
  margin:0 auto;
}

@media (max-width: 700px) {
  .cs-gift-title {
 font-size: 2.5rem;
}
  .cs-gift-text{
    font-size: 1.2rem;
  }
}
/*========= スライダー ーーーーーーーーーーーーーーーーーーーーーー*/
.container-c {
  margin: 30px auto 0;
  max-width: 1000px;
  width: 100%;
}
.slider{
  display: flex;
}
/* 中央以外のスライド */
.slick-img img {
  height: auto;
/*  opacity: .3;*/
  transform: scale(.8);
  transition: opacity .5s, transform .5s;
  width: 80%;
}
/* 中央のスライド */
.slider .slick-center img {
  opacity: 1;
  transform: scale(1);

  margin: auto;
}
.slider-body {
  opacity: 1;
}
.slick-center {
  margin: auto;
  text-align: center;

}
.slick-img h3 {
  opacity: 1;
  font-size: 1.6rem;
  font-weight: normal;
  margin-top: 0;
}
.slick-center h4 {

  margin: auto;
  text-align: center;
}
.slick-center p {

  margin: auto;
  text-align: center;
}
.slider2 {
  width: 80%;
  margin: auto;
}





.rec_item,.rec_second_item {
  width: calc(100%/4);
  background-color: rgb(242, 242, 242);
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  display: flex;

}

input[name="rec_item"] {
  display: none;
}

input[name="rec_second_item"] {
  display: none;
}

.rec-tabs{
  display:flex;
  flex-wrap: wrap;
}

.rec-tabs label>img{
 width:50%;
}

.rec-flex-item {
  max-width: 25%;
text-align: center;
cursor: pointer;
}

.commentator-item{
  margin:0 auto;
  margin-top:5%;
  max-width: 100%;
  padding:0 1%;
  display: flex;
}
.commentator-item img{
  width: 30%;
}


#rec1:checked ~ #rec1_content,
#rec2:checked ~ #rec2_content,
#rec3:checked ~ #rec3_content,
#rec4:checked ~ #rec4_content
 {
  display: block;
}

/*タブ切り替えの中身のスタイル*/
.tab_rec_content {
  display: none;
  clear: both;
  overflow: hidden;
  background-color:#fafafa;
  margin-top:3%;
  margin-bottom:3%;
  padding-bottom:3%;
}

.rec-tabs input:checked + .rec-flex-item>img {
  border:3px solid  #0071BC;
  color: #fff;
}




/*----- モーダル表示のためのCSS --------------------------------*/


.cs-modal-wrap {
    display: inline-block;
    text-align: center;
    width: 33%;
}

.cs-modal-wrap input {
    display: none;
}

.cs-modal-top-comment{
  text-align: justify;
  margin-top: 2%;
  width:95%;
  margin-right:auto;
  margin-left:auto;
}

.open-label,
.close-label {
    cursor: pointer;
}

.cs-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

label.simple>img{
  width: 15vw;
  height: 15vw;
  min-width: 80px;
  min-height: 80px;
  margin-bottom: 5%;
}

#cs-modal__open1:checked ~ #cs-modal1,
#cs-modal__open2:checked ~ #cs-modal2,
#cs-modal__open3:checked ~ #cs-modal3,
#cs-modal__open4:checked ~ #cs-modal4,
#cs-modal__open5:checked ~ #cs-modal5,
#cs-modal__open6:checked ~ #cs-modal6,
#cs-modal__open7:checked ~ #cs-modal7,
#cs-modal__open8:checked ~ #cs-modal8,
#cs-modal__open9:checked ~ #cs-modal9,
#cs-modal__open10:checked ~ #cs-modal10,
#cs-modal__open11:checked ~ #cs-modal11,
#cs-modal__open12:checked ~ #cs-modal12
{
    display: block;
    animation: cs-modal-animation .6s;
}

.cs-modal__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #fefefe;
    z-index: 2;
    border-radius: 5px;
}

.close-label {
    color: #000;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -2%;
    right: 0;
    z-index: 99999;
    font-size: 4em;
}

.cs-modal__content {
  max-height: 90vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.cs-modal__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}
.chopstick-rec-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.info_modal_title {
  align-items: center;
}

@keyframes cs-modal-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@media only screen and (max-width: 700px) {
  .cs-modal-top-comment{
    padding: 5%;
  }
}

@media only screen and (max-width: 480px) {
    .open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
    }
    .close-label {
    }
    .cs-modal__content-wrap {
        width: 90vw;
    }
    .cs-modal__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}


  .slider-modal__item {
    letter-spacing: -0.4rem;
  }
  .info_modal_img {
    text-align: center;
  }
  .info_modal_img img {
    width: 50%;
  }

  .info_modal_title {
   justify-content: center;
  }
  .info_modal_li {
    padding-top: 32px;
    padding-right: 10px;
  }
  .info_modal_body {
    text-align: center;
  }
  .info_modal_bottun {
    background-color: #F2B83F;
    padding: 5px 20px;
    text-align: center;
    display: inline-block;
    margin: 10px auto 0;
  }

  @media(max-width:700px){
      .section_button {
        text-align: center;
        flex-direction: column;
      }
    }

  .info_modal_body p {
    display: inline-block;
    text-align: left;
  }


  /*-- 予算別 ------------------------------------*/
  .section_button {
    display: flex;
  }
  @media(max-width:700px){
    .section_button {
      row-gap: 10px;
  
    flex-wrap: wrap
  }
   
}
  .section_button h3{
    font-size: 15px;
    margin-bottom: 3rem;
  }
  /* .section_button_money {
    display: block;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, .44), 1px 1px 1px #4a0a11;
  } */
  .button05 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 3px;
    padding: 0 20px;
    width: 25rem;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    background-color: #F4F5F6;
    box-shadow: 0 5px 0 #aaaaaa;
    transition: 0.3s;
  }
  @media(max-width:700px){
    .button05 a {
      width: auto;
      margin: 0 30px;
    }
  }

  .button05 a::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #333333;
    border-right: 3px solid #333333;
    transform: rotate(45deg);
  }

  .button05 a:hover {
    transform: translateY(3px);
    text-decoration: none;
    box-shadow: 0 2px 0 #aaaaaa;
  }

.button05 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 700;
   padding: 15px
}
/*   ul {
    display: flex;
  } */

  /* なぜ箸の魅了されるのか------------------------------------ */
  .black {
    background-color: #171C22;
  }
  .white {
    background-color: #fff;
    padding-top: 50px;
    padding-bottom: 20px;
  }
  .section_black {
    color: #fff;
    padding: 5% 5% 2% 5%;
  }
.section_black-texterea {
  padding-left : 5%;
  padding-top : 5%;

}

.section_black-text{
  max-width:990px;
  margin:0 auto;
}

  .black h3{
    padding-bottom:0;
  }

  .black_inner img{
    max-width:500px;
  }

  .left{
    text-align: left;
  }
  .right {
    text-align: right;
  }
  @media (max-width: 700px) {
    .right {
      text-align: center;
    }
  }
  .container-c {
    max-width: 990px;
  
    position: relative;
 
  }
.kazari {
  width: 300px;
  position: absolute;
  top: -7%;
  left: -18%;
}
.kazari2 {
  width: 300px;
  position: absolute;
  bottom: 5%;
  right: -14%;
}
.padding_b {
  padding-bottom: 200px;
}
@media (max-width: 700px) {
 
  .padding_b {
    padding-bottom: 90px;
  }
  .section_black p {
    font-size: 1rem;
  }
  .kazari {
    width: 120px;
  }
}

  @media (max-width: 900px) {
   .kazari2 {
    display: none;
  }
  }
/*お箸のデザイン------------ */

.design_section {
 background-image: url(/cdn/shop/files/ichuimatu1_6301a8b6-0f60-49e1-b318-d0223342fb6e.png?v=1661997471);
  background-size: contain;
}
.partner-box {
  border: 1px solid #000;
  margin-bottom: 5%;
}

.partner input {
  display: none;
}

/*バー部分*/
.partner{
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
  line-height: 1;
  position: relative;
}

/*開いたときに表示される部分*/
.partner ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1px;
  display: block;
}
.no_display {
  display: flex;
  align-items: center;
  justify-content: center;
}
.buy___button {
  background-color: #F2B83F;
  padding: 5px 20px;
}
/* .color_gray {
  background-color: #F4F5F6;
} */

.partner li {
  height: 0;
  overflow-y: hidden;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  /*閉じるときのアニメーション*/
  transition: padding-bottom 0.5s, padding-top 0.5s;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  transition: padding-bottom 0.5s, padding-top 0.5s;
}

#partner_bar01:checked~#links01 li,
#partner_bar02:checked~#links02 li,
#partner_bar03:checked~#links03 li {
  height: auto;
  /*開いたときに表示されるliの高さ*/
  opacity: 1;
  padding: 0 20px;
  margin-bottom: 20px;
}
  
#partner_bar01:checked~.by-partner-body,
#partner_bar02:checked~.by-partner-body,
#partner_bar03:checked~.by-partner-body {
	padding: 50px;
}
  
.partner-check:checked+.partner-label {
  border-bottom: 1px dashed #000;
}

.by-partner-head{
  display:flex;
  max-height: 400px;
  justify-content: space-between;
  padding: 20px;
  background-color: white;
  overflow: hidden;
  cursor: pointer;
}

   @media (max-width: 700px) {
#partner_bar01:checked~.by-partner-body,
#partner_bar02:checked~.by-partner-body,
#partner_bar03:checked~.by-partner-body {
	padding: 10px;
  }
}
.by-partner-heading{
/* margin-left: auto; */
margin-right:15%;
text-align: start;
margin-top:20px;
writing-mode: vertical-rl;
}
.maney {
  margin-top: 0;
}




.friend{
  background: linear-gradient(rgba(172, 188, 0, 0.5),rgba(255,255,255,0.3) );
}

.by-partner-head:hover {
/*     background-color: #F2B83F; */
  opacity: 0.8;
}

{% comment %}
閉じた状態の矢印
.partner label:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  transform: rotate(135deg);
  transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 3%;
  /* top: 0; */
  bottom: 8%;
  margin: auto;
}

開いた状態の矢印
.partner input[type=checkbox]:checked+label:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  transform: rotate(-45deg);
  transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  right: 2%;
  top: 7%;
  bottom: 0;
  margin: auto;
}
{% endcomment %}

.by-partner-head-left{
  width:50%;
  display: inherit;
}

/* .by-partner-head-left{ */
  /* display: flex; */
  /* width:35%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; */
  /* flex-direction: row-reverse; */
/* } */


  .by-partner-head-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .by-partner-text{
    height:80%;
    /* margin:auto; */
    margin-top:40px;
    margin-right:20%;
   line-height: 1.8;
    writing-mode: vertical-lr;
  }
  .partner_title {
    margin-bottom: 0;
  }
  .partner_title_right {
    text-align: right;
  }
  .color_gray_right {
    text-align: right;
  }
  .by-partner-t {
    display: inline-block;
    padding-top: 20px;
  }
 .no_display_button button{
  height: 40px;
  width: 168px;
 }
 .no_display_button {
   padding-left: 40px;
 }
 .partner-body__button {
  height: 40px;
  width: 168px;

 }
.no_display h4 {
  margin-top: 0;
}

 @media (max-width: 700px) {
  .partner_title_4 {
    font-size: 1.5rem;
  }
  .by-partner-t {
    font-size: 1.2rem;
  }
  .no_display_button {
    padding: 10px;
  }
   .no_display {
     flex-wrap: wrap-reverse;
    
     margin: auto;
   }
}

  /*partner全体*/
.partner {
  width: 85%;
  padding: 1rem 1rem 2rem;
  /* font-size: 1.8rem; */
  margin-left: auto;
  margin-right: auto;
}

.by-partner-body{
  /* width:95%; */
  margin:0 auto;
  background-color: white;
}


table{
  margin: 0 auto;
  margin-top:7%;

  border-bottom:1px solid grey;
  width:90%;
}
/* .by-partner-head-right img {
 width: 500px;
} */
.by-partner-head-right{
  overflow: hidden;
}
.partner-point{
  border-bottom:1px dotted grey;
}

.point-text{
  margin:0 auto;
  width:85%;
  margin-top:5%;
}
.border{
  border-bottom: 1px solid #d9d9d9
}
.recommend-item{
  margin:0 auto;
  margin-top:5%;
  max-width: 60%;
  padding:0 1%;
  display: flex;
  flex-direction: column;
}

/*相手別のレスポンシブ対応*/
@media(max-width:900px){

  .by-partner-head-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .by-partner-head-right{
    overflow: hidden;
  }

  .by-partner-text{
    font-size:12px;
    height:250px;
  }
  
@media(max-width:700px){
 .by-partner-text {
   display:none;
 }
}
  .by-partner-head{
    max-height:300px;
  }
}

@media(max-width:700px){
  .partner {
    width: 100%;
  }
}

@media(max-width:400px){
  .partner {
    width: 100%;
  }
}

@media(max-width:350px){
  .partner {
    width: 100%;
  }

  /* .by-partner-head-left {
    width: 100%;
}

.by-partner-head-right{
  width:10%;
} */
}

@media(max-width:750px){
  table tr{
    display:flex;
    flex-direction: column;
  }
}

/*相手別のレスポンシブ対応ーーーーーーーーーーーーー*/

/* 予算別 */
.by-price h3{
  font-size:1.8rem;
  margin:0;
}

@media(max-width:800px){
  .by-price h3{
    font-size:1.4rem;
  }
}

@media(max-width:500px){
  .by-price h3{
    font-size:1.2rem;
  }
}



/*相手別ーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* brand */
.flex-scrolling {
  /* 100% / 2 - (0.5%*2) 0.5%=margin */
  width: 49%;
  padding: 20px;
  margin: 1% 0.5%;
}
.scroll-container, .beautiful {
  display: flex;
}
@media(max-width:700px){
  .flex-scrolling {
    width: 90%;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  .brand-container {
    overflow: scroll;
    display: flex;
    scroll-snap-type: x mandatory;
  }
  .flex-brand{
    width: auto;
    height: auto;
  }
  .flex-container{
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  .scroll-container {
    overflow: scroll;
    display: flex;
    scroll-snap-type: x mandatory;

  }

}

.flex-brand {
  width: 40%;
  height: 40%;
  padding-bottom: 15px;
}
@media(max-width:700px){
  .flex-brand {
    width: 100%;
    height: 100%;
  }

}

.flex-brand-dl {
  width: 60%;
  padding-bottom: 15px;
  font-size: 1.7rem;
  font-weight: bold;
}

.flex-brand-dl:last-child {
  padding-left: 30px;
}

.about-brand {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 80px;
  text-align: center;
}

.about-shokunin,
.about-reason,
.about-report,
.advice,
.gift-title>p,
.about-exclusive>p {
  letter-spacing: 0.2rem;
  width: 100%;
}

.about-shokunin {
  height: auto;
}

.about-shokunin>p,
.about-reason>p {
  width: 100%;
}

.calc3 {
  border: #E1D9D3 solid 1px;
  padding: 2% 1%;
  background-color: #fff;
}
.select {
  background-color: #F4F5F6;
}
.select_text {
  display: block;
  padding-bottom: 3rem;
}
.select_item_text {
  display: block;
  padding: 3rem 2rem 0;
}
.flex-item {
  width: calc(100%/3);
  margin: 5% 1%;
}
.info-bar {
  width: 30%;
  min-height: 115px;
  padding: 1% 2%;
  margin:  1%;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.info-bar p {
  width: 100%;
  color: #fff;
  text-shadow: 1px 1px 2px black;
  background-color:rgba(0,0,0,0.6);
}
.chostick-info-bar {
  min-height: 115px;
  padding: 1% 2%;
  margin:  1%;
  width100%;
  
}
.info1{
  background-image: url(/cdn/shop/files/hashi.jpg?v=1661236464);
}
.info2{
  background-image: url(/cdn/shop/files/hashi01.jpg?v=1661237431);
}
.info3{
  background-image: url(/cdn/shop/files/hashi02.jpg?v=1661237431);
}
.info4{
  background-image: url(/cdn/shop/files/hashi03.jpg?v=1661237431);
}
.info5{
  background-image: url(/cdn/shop/files/hashi04.webp?v=1661237431);
}
.info6{
  background-image: url(/cdn/shop/files/hashi05.jpg?v=1661237431);
}


/* よくある質問 ---------------------------*/
.faq {
  max-width: 1000px;
  padding: 1rem 1rem 2rem;
  margin-left: auto;
  margin-right: auto;
}

.qabox {
  border: 1px solid #E1D9D3;
  margin-bottom: 5px;
  padding: 1% 2%;
}

.faq input,
.box input,
.box-knowledge input {
  display: none;
}

/*バー部分*/
.faq label {
  cursor: pointer;
  display: block;
  text-decoration: none;
  line-height: 1;
  position: relative;
  padding: 15px;
}

/*開いたときに表示される部分*/
.faq ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1px;
}

.faq li {
  height: 0;
  overflow-y: hidden;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  /*閉じるときのアニメーション*/
  transition: padding-bottom 0.5s, padding-top 0.5s;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  transition: padding-bottom 0.5s, padding-top 0.5s;
}

#faq_bar01:checked~#links01 li,
#faq_bar02:checked~#links02 li,
#faq_bar03:checked~#links03 li,
#faq_bar04:checked~#links04 li,
#faq_bar05:checked~#links05 li
 {
  height: auto;
  /*開いたときに表示されるliの高さ*/
  opacity: 1;
  padding: 10px;
  margin-bottom: 20px;
}

.faq-check:checked+.faq-label {
  border-bottom: 1px solid #E1D9D3;
}

/*閉じた状態の矢印*/
.faq label:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: #E1D9D3 2px solid;
  border-right: #E1D9D3 2px solid;
  transform: rotate(135deg);
  transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 2%;
  top: 0;
  bottom: 15%;
  margin: auto;
}

/*開いた状態の矢印*/
.faq input[type=checkbox]:checked+label:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: #E1D9D3 2px solid;
  border-right: #E1D9D3 2px solid;
  transform: rotate(-45deg);
  transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  right: 2%;
  top: 7%;
  bottom: 0;
  margin: auto;
}

.bg-gray {
  background-color: #F4F5F6;
}


@media screen and (max-width: 700px) {
  img {
    max-width: 960px;

  }
  .flex-container, .reason-container, .report-container, .commentator, .advice-link>a, .gift-container, .exclusive-container, .flexbox-knife, .knife-wrapper, .knowledge-wrapper{
    display: block;

  }


  .tab_content {
    text-align: -webkit-center;
    padding: 0;
  }
}
@media(max-width:700px){
  .flex-item{
    width:90%;
    max-width: 100%;
    
  }
  
  .beautiful {
    flex-wrap: wrap;
  }
  .beautiful .flex-item {
    width: 48%;
  }
  .info-bar {
    width: 100%;
  }
  .by-partner-head-right img {
    height: 100%;
    width: 100%;
  }
  .item {
    font-size: 14px;
  }
  
  .chopstick-scroll-container {
    aspect-ratio: 5 / 3;
  }
}

.article a{
 vertical-align: bottom;
}

.chopstick-scroll-container{
    scroll-snap-type: x mandatory;
  overflow: scroll;
}
  


.chopstick-scroll-container li {
  flex-shrink: 0;
}

.chop___botan {
  text-align: center;
  margin-top: 35px;
}
.chopstick-wagara {
  text-align: center;
}
.chopstick-wagara img{
  width: 20%;  
}
.section_black-text {
  color: #fff;
}
.chopstick-youto {
  margin: 5% 1%;
}
.chostick-info-bar {
  min-height: 115px;
  padding: 1% 2%;
  margin:  1%;
  width100%;
  background-repeat: no-repeat;
  background-size: cover;
  top:10%;
}
.chopstick-kiji {
   position:relative;
}
.copstick-kiji-text {
    width: 90%;
  margin: auto;
  }   
.choptick-rh3 {
  font-size: 1.8rem;
}
.section_black{
  font-size: 3rem;
}
.chopstick-price {
  font-size: 1.6rem;
  text-align: left;
}
.business, .family {
  font-weight: bold;
  font-size: 3rem;
  margin-left: 20%;
}
.cs-section-title {
  font-size: 3rem;
  text-align: center;
    line-height: 1.5;
}
.section_black-text {
  color: #fff;
    display: inline-block;
    padding: 0 3% 2%;
}

@media(max-width:700px){
  .ranking-text {
    font-size: 1.2rem;
  }
   .section_black {
    font-size: 2.2rem;
     padding: 8%;
  }

  .section_black_last{
     padding-top:0;
  }
  
  .business, .family {
  font-weight: bold;
  font-size: 2.2rem;
}
  .chopstick-j-copy,  
  .item, 
  .banner_text, 
  .chopstick-modal-text, 
  .cs-modal-top-comment, .info_modal_body, .cs-modal-item,  .info_modal_li h3, .select_text, .about-shokunin b p, .about-brand, .section-desc, 
  .select_item_text, .cs-hashi-text, .section_black-text{
    font-size: 1.2rem;
  }
  .section-title, .banner_title, .choptick-ranking-h3, .business, .family, .t-ttl, {
    font-size: 2.2rem;
    line-height: 1.5;
  }

  .info_modal_li h2, .choptick-rh3, .cs-hashi{
    font-size: 1.5rem;
  }
  .rec-flex-item {
    max-width: 40%
  }
  .choptick-ranking-h3 {
    margin-botton : 0;
  }
    .faq-label{
    font-size: 1.4rem;
  }
  .chopstick-youto {
    max-width: 33%;
   margin: 5% 1%
  }
  .choptick-ranking-h3{
    font-size: 1.2rem
  }
.choptick-h3-sp {
  font-size: 2.2rem;
}
}
 

.slide-area-text {
  color: #fff;
}
.ora {
  font-size: 1.8rem;
}

/*=== 画像の表示エリア ================================= */
.slide {
 position   : relative;
 overflow   : hidden;
 width      : 80%;
 height     : 45vw;
 margin     : auto;
}
.slide-area{
 width      : 100%;
 height     : 100%;
}
.slide2 {
  height: 10vw;
}
 @media(max-width:700px){
.slide2 {
  height: 18vw;
}
.slide-area-text {
     font-size: 1.0rem;
   }
}
/*=== 画像の設定 ======================================= */
.slide li{
 display    : block;
 position   : absolute;
 width      : inherit;
 height     : inherit;
 opacity    : 0;
 animation  : slideAnime 30s ease infinite;    /* リスト全てを１周表示するのにかかる時間(下の8枚目の表示時間+インターバル) */
}
.slide li img {
  width      : inherit;
  height     : inherit;
  object-fit: cover;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.slide li:nth-of-type(1) { animation-delay: 0s }    /* 1枚目の表示時間 */
.slide li:nth-of-type(2) { animation-delay: 8s }    /* 2枚目の表示時間 */
.slide li:nth-of-type(3) { animation-delay: 16s }   /* 3枚目の表示時間 */
.slide li:nth-of-type(4) { animation-delay: 24s }   /* 4枚目の表示時間 */
.slide li:nth-of-type(5) { animation-delay: 32s }   /* 5枚目の表示時間 */
.slide li:nth-of-type(6) { animation-delay: 40s }   /* 6枚目の表示時間 */
.slide li:nth-of-type(7) { animation-delay: 48s }   /* 7枚目の表示時間 */
.slide li:nth-of-type(8) { animation-delay: 56s }   /* 8枚目の表示時間 */

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
  0% { opacity: 0 }
  2% { opacity: 1 }
 18% { opacity: 1 }
 20% { opacity: 0 }
100% { opacity: 0 }
}



 .example{
  display: inline-flex;
   width: 49%;
  padding-top: 10px;
}

.example>div{
    width: 100%;
  background-color: #F4F5F6;
/*     box-shadow: 0 5px 0 #aaaaaa; */
    transition: 0.3s;
    margin-right: 10px;
}

  .example>div:hover{
background-color:#fafafa;
    
  }
.yosan {
 padding-bottom: 3rem;
    
  }
.hirari h3 {
  margin-buttom : 0;
}

.cscs-flex-item {
  width: calc(100%/3);
  margin: 5% 1%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}


.cs-border {
  border-bottom: 1px solid #d9d9d9; 
}

.sp {
  display: inline; 
}

  @media(max-width:900px){
  .example{
      display: flex;
     width:100%
  }
    .sp { 
      display: block; 
    }
}