@charset "UTF-8";


a {
  /* color: blue; */
  color: #000;
  text-decoration: none;
}

a {
  text-decoration: underline;
}

img {
  max-width: 100%;
}


/*ここからTOP横並び*/
.future {
  max-width: 1000px;
  margin: 0 auto;
}

.main-item-box {
  margin: 1em;
  display: flex;
  justify-content: center;
}

.main-img {
  padding-left: 20px;
}

.main-explan {
  width: 60%;
}

.title {
  text-align: center;
}

.text {
  display: inline-block;
}


/* ここから　特徴　画像→テキスト変換 */
/* .text_center {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
} */

.tokutyou_ttl {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  color: #f29600;
  font-size: 46px;
  background: linear-gradient(transparent 70%, rgba(250, 237, 0, 20%) 0%);
  padding-top: 38px;
  margin-bottom: 60px;
}

.rubberband_example {
  max-width: 900px;
  margin: 64px auto 0;
  padding-bottom: 20px;
  text-align: center;
}

.rubberband_example img {
  width: 658px
}

.rubberband_example_grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 0;
  margin-top: 64px;
  place-items: center;
}

.rubberband_example_grid img {
  width: 196px;
  /* width: 100%; */
  aspect-ratio: 1 / 1;
  /* 正方形にしたい場合。16/9なども可 */
  object-fit: contain;
  /* はみ出た部分をトリミングして埋める */
  display: block;
}

.rubberband_example_grid p {
  text-align: center;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-size: 35px;
  font-weight: 700;
  border: 4px solid #f29600;
  border-radius: 50px;
  padding: 30px;
}

.rubberband_example_grid p span {
  color: #f29600;
  background: linear-gradient(transparent 70%, #ffff7f 0%);
}

.example_list {
  display: grid;
  max-width: 900px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2em;
  margin: 60px auto 1rem;
  padding: 0;
}

.example_itm p {
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-size: 19px;
  font-weight: 600;
  padding-bottom: 15px;
}

.example_itm img {
  max-width: 100%;
}

.size_sample {
  max-width: 900px;
  margin: 64px auto 0;
  padding: 1.5em 0 1.5em;
}

.size_sample p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 35px;
}

.size_sample p span {
  color: #f29600;
  font-size: 40px;
}

.size_sample img {
  padding-top: 20px;
}


/*ここから　リストのデザインCSS */
ul.cp_list {
  font-size: 1.5em;
  font-weight: 600;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0.5em;
  list-style: none;
}

ul.cp_list li {
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom: 5px;
  border-bottom: 3.5px solid #f0ad4e;
}

ul.cp_list li:after,
ul.cp_list li:before {
  content: '';
  position: absolute;
  transform: rotate(45deg);
}

ul.cp_list li:before {
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 143, 0, 1);
}

ul.cp_list li:after {
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(255, 143, 0, 0.5);
  border-radius: 10px;
  transform: rotate(60deg);
}

.pointlist-center {
  text-align: center;
}

.pointlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 3em;
  max-width: 1000px;
  margin: 0 auto 30px auto;
}


/* ここから 規格 画像→テキスト変換 */
.kikaku_ttl {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 45px;
  color: #ffffff;
  max-width: 1000px;
  margin: 98px auto 30px;
  background-color: #9c3800;
  border-radius: 50px;
  padding: 10px;
}

.kikaku_sample {
  max-width: 900px;
  margin: 0 auto;
}

.kikaku_sample p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 35px;
  text-align: center;
  margin-top: 60px;
}

.kikaku_sample p span {
  color: #e39300;
  font-size: 40px;
}


.kikaku_sample_content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  max-width: 850px;
  margin: 30px auto 64px;
}

.long {
  flex: 1 1 50%;
}

.long p {
  font-size: 24px;
  border: 4px solid #e39300;
  padding: 15px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.long_img {
  max-width: 80%;
  margin: 0 auto;
}

.weight {
  flex: 1 1 50%;
  max-width: 80%;
}

/* ハートゴムバンド早見表 */
.ol_box {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin: 0 auto 1.5em;
}

.hayamihyou ol {
  list-style-position: inside;
}

.ol_box figure img {
  max-width: 100%;
}

.hayamihyou p {
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
}

.ol_itm {
  flex: 1 1 auto;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5em;
  list-style-type: decimals;
  padding-top: .5em;
}

.ol_itm span {
  color: #f29600;
}

/* ここから タブ CSS */

.tab {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 90%;
  max-width: 900px;
}

.tab__label {
  font-size: 25px;
  font-weight: 600;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  color: #fff;
  background: #ccc;
  margin-right: 5px;
  padding: 6px 16px;
  order: -1;
  cursor: pointer;
  border-radius: 20px 20px 0px 0px;
}

.tab__content {
  width: 100%;
  display: none;
  border: 3px solid #FFBA33;
  padding: 20px 0 0 0;
}

.tab__switch {
  display: none;
}

.tab__switch:checked+.tab__label {
  background: #FFBA33;
  border-radius: 20px 20px 0px 0px;
}

.tab__switch:checked+.tab__label+.tab__content {
  display: block;
}








/*ここから　テーブルのデザインCSS*/
.design01 {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}

.design01 th {
  text-align: center;
  padding: 3px;
  background: #ffe8cd;
  border: solid 1px #778ca3;
}

.design01 td {
  padding: 3px;
  border: solid 1px #778ca3;
}

.sizegraph-center {
  text-align: center;
}

.sizegraph {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 3em;
  max-width: 1000px;
  margin: 0 auto 30px auto;
  font-size: 1em;
  font-weight: 600;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}









/*ここから　早見表CSS */
.cp_tab *,
.cp_tab *:before,
.cp_tab *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cp_tab {
  margin: 1em auto;
  position: relative;
}

.cp_tab input[type='radio'] {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.cp_tab .cp_tabpanel {
  display: none;
}

.cp_tab>input:first-child:checked~.cp_tabpanels>.cp_tabpanel:first-child,
.cp_tab>input:nth-child(3):checked~.cp_tabpanels>.cp_tabpanel:nth-child(2),
.cp_tab>input:nth-child(5):checked~.cp_tabpanels>.cp_tabpanel:nth-child(3),
.cp_tab>input:nth-child(7):checked~.cp_tabpanels>.cp_tabpanel:nth-child(4),
.cp_tab>input:nth-child(9):checked~.cp_tabpanels>.cp_tabpanel:nth-child(5),
.cp_tab>input:nth-child(11):checked~.cp_tabpanels>.cp_tabpanel:nth-child(6) {
  display: block;
}

.cp_tab .cp_tabpanels {
  position: absolute;
  top: 0;
  left: 10em;
  display: block;
  height: 320px;
}

.cp_tab>input+label {
  position: relative;
  z-index: 100;
  top: -15px;
  left: 1px;
  display: block;
  width: 10em;
  margin-bottom: -20px;
  padding: 15px;
  cursor: pointer;
  border: 1px solid #cccccc;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.cp_tab>input+label:last-of-type {
  margin-bottom: 100px;
}

.cp_tab>label:hover,
.cp_tab>input:focus+label {
  color: #0066cc;
}

.cp_tab>input:checked+label {
  border-color: #cccccc;
  border-right: 1px solid #ffffff;
  /*背景色と同じ*/
}

.cp_tab .cp_tabpanel {
  padding: 0.5em 1em;
  border-left: 1px solid #cccccc;
  min-height: 320px;
}

@media (max-width: 480px) {
  .cp_tab {
    width: 100%;
  }

  .cp_tab>input+label {
    font-size: 0.7em;
  }

  .cp_tab .cp_tabpanels {
    left: 7em;
    min-width: 7em;
  }
}





/*ここから　早見表CSS */
.range-open {
  font-size: 30px;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #FFBA33;
  margin-top: 20px;
  margin: 0 auto;
  color: #fff;
  position: relative;
  width: 90%;
  max-width: 900px;
}

.range {
  display: none;
  text-align: center;
}

.range-open::before {
  /* 閉じている時 */
  content: "＋";
  position: absolute;
  right: 20px;
}

.range-open.active::before {
  /* 開いている時 */
  content: "－";
}

.download {
  text-align: center;
  padding: 1em;
  width: 300px;
  margin: 1em auto 3em auto;
  background-color: #9cd5db;
  border-radius: 30px;
}

/* ここから早見表図CSS */
.secondtable_section_wrap,
.thirdtable_section_wrap {
  padding: 60px 20px 20px;
}

.table_section_wrap {
  padding: 60px 20px 20px;
  box-sizing: border-box;
}

.table_section_wrap_sp_txt {
  display: none;
}

.table_wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 900px;
  margin: 0 auto;
}

.table_left {
  padding-top: 7px;
  flex: 1 1 30%;
}

#tablehead_sp {
  display: none;
}

.table_left img {
  display: block;
}

.table_right {
  flex: 1 1 70%;
}

.table_left_top {
  height: 72px;
}

.table_left_btm {
  height: 196px;
}


.table_right_top {
  padding-left: 11px;
  height: 72px;
  width: 651px;
}

.table_left_top img {
  width: 91%;
  height: 74%;
  object-fit: contain;
  object-position: right;
}

.table_left_btm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right;
  /* または contain */
}

.nomal_wrap .table_right_btm {
  height: 196px;
}

.bold_wrap .table_right_btm,
.semibold_wrap .table_right_btm {
  height: 205px;
}

.second,
.third {
  height: 205px;
}

.table_left_top,
.table_left_btm {
  overflow: hidden;
  /* 念のためはみ出し防止 */
}

.scroll_wrap {
  padding-top: 10px;
}

.scroll_wrap img {
  display: block;
}


.table_right_btm {
  position: relative;
  width: 674px;
}

.table_right_btm img {
  max-width: 674px;
}

.num_wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.nomal_yasasiku {
  padding-top: 22px;
}

.nomal_yasasiku,
.nomal_hyojun,
.nomal_sikkari {
  padding-left: 4px;
}

.bold_wrap .nomal_yasasiku,
.semibold_wrap .nomal_yasasiku {
  padding-top: 30px;
}

.num_li {
  position: absolute;
  width: 100%;
  height: 100%;
}

.num_li .nomal_yasasiku {
  position: relative;
  width: 100%;
}

/* 品番アイコン */
.table_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #662606;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  transition: .5s;
}

.table_icon:hover {
  background-color: #f29600;
}

/* 標準の強さで */
.nomal_hyojun {
  position: relative;
  width: 100%;
  top: 56px;
}

/* しっかり */
.nomal_sikkari {
  position: relative;
  width: 100%;
  top: 110px;
}

/* 各種位置調整 */
#first_yasasiku_10,
#first_hyojun_8,
#second_yasasiku_18,
#second_hyojun_14,
#second_hyojun_12,
#second_sikkari_12,
#second_yasasiku_210,
#second_hyojun_215,
#second_sikkari_220,
#second_yasasiku_35,
#second_hyojun_30,
#second_sikkari_25,
#third_hyojun_18,
#third_sikkari_16,
#third_yasasiku_310,
#third_hyojun_315,
#third_sikkari_320 {
  position: absolute;
  left: 4px;
}

#first_yasasiku_12 {
  position: absolute;
  left: 38px;
}


#third_yasasiku_360,
#third_hyojun_365,
#third_sikkari_370 {
  position: absolute;
  left: 70px;
}

#first_yasasiku_14,
#second_yasasiku_40,
#second_hyojun_35 {
  position: absolute;
  left: 136px;
}

#first_hyojun_10,
#second_yasasiku_260,
#second_hyojun_265,
#second_sikkari_270,
#second_sikkari_30 {
  position: absolute;
  left: 169px;
}

#first_sikkari_8,
#first_yasasiku_20 {
  position: absolute;
  left: 201px;
}

#first_yasasiku_16 {
  position: absolute;
  left: 234px;
}


#first_hyojun_20,
#second_yasasiku_45,
#second_hyojun_40 {
  position: absolute;
  left: 300px;
}

#first_yasasiku_18,
#first_yasasiku_170,
#first_hyojun_175,
#first_sikkari_180,
#first_yasasiku_25,
#second_hyojun_16,
#second_sikkari_14 {
  position: absolute;
  left: 333px;
}

#first_hyojun_12,
#first_sikkari_10,
#third_yasasiku_410,
#third_hyojun_415,
#third_sikkari_420 {
  position: absolute;
  left: 365px;
}

#first_sikkari_20,
#second_yasasiku_310,
#second_hyojun_315,
#second_sikkari_320,
#second_yasasiku_50,
#second_sikkari_35 {
  position: absolute;
  left: 431px;
}

#first_yasasiku_30,
#first_hyojun_25,
#second_hyojun_45 {
  position: absolute;
  left: 464px;
}

#first_yasasiku_190,
#first_hyojun_195,
#first_sikkari_200,
#third_sikkari_18 {
  position: absolute;
  left: 497px;
}

#first_yasasiku_35,
#first_hyojun_30,
#first_sikkari_25,
#second_hyojun_50 {
  position: absolute;
  left: 628px;
}


@media (max-width: 899px) {

  .secondtable_section_wrap,
  .thirdtable_section_wrap {
    padding: 20px;
  }

  .table_section_wrap {
    padding: 20px;
    box-sizing: border-box;
  }

  .table_section_wrap_sp_txt {
    display: block;
    text-align: left;
    font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 10px;
  }

  .table_wrap {
    width: 100%;
  }

  #tablehead_pc {
    display: none;
  }

  #tablehead_sp {
    display: block;
  }

  .scroll_wrap {
    overflow-x: auto;
    width: 100%;
    /* table_right いっぱいに広がる */
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 0;
  }

  .table_left_top img {
    width: 100%;
    height: 100%;
  }

  .table_left {
    flex: 0 0 130px;
    /* ここが縮むと画像側もはみ出す原因になる */
    width: 130px;
    /* 元デザインでの左側の実際の幅（900px時の値）を指定 */
  }

  .table_right {
    flex: 1 1 auto;
    min-width: 0;
  }

  .scroll_wrap::-webkit-scrollbar {
    display: none;
  }
}




/* 最適なサイズがわかったら */
.announce {
  margin-top: 100px;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 100px auto 10px;
}

.announce p {
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 30px;
}

.yazirusi {
  margin-top: 1rem;
}




/*ハートインゴムバンド一覧はコチラ　ボタン*/

.btn {
  text-align: center;
  margin: 100px 0px 200px 0px;
}

a.btn-border {
  border: 2px solid #fff;
  border-radius: 0;
  background: #9D3801;
  padding: 20px 50px;
  font-size: 2em;
  font-weight: bold;
  text-decoration: auto;
  color: white;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
}

a.btn-border:hover {
  color: #fff;
  background: #a3765f;
}









.future {
  max-width: 1000px;
  margin: 0 auto;
}

p {
  margin: 0;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 {
  display: none;
}

li {
  list-style: none;
}

.aside {
  display: none;
}

.__control,
.__list,
.__block,
.__information {
  display: none;
}

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;
  /*横に並ぶように*/
  list-style: none;
  font-weight: 500
}

.breadcrumb li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

.title {
  font-size: 14px;
}

.main-explan {
  max-width: 1020px;
  text-align: left;
  padding: 0px 20px;
  font-size: 19px;
  font-weight: 600;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.main-explan-center {
  max-width: 1020px;
  margin: auto;
  text-align: center;
  padding: 0px 20px;
  font-size: 19px;
  font-weight: 600;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.about {
  margin: 1em auto;
  text-align: center;
}

.subtitle {
  padding: 0.5em;
  /*文字周りの余白*/
  color: #494949;
  /*文字色*/
  background: #fffaf4;
  /*背景色*/
  border-left: solid 5px #ffaf58;
  /*左線（実線 太さ 色）*/
}

.explan {
  margin: auto;
  text-align: center;
  display: block;
  padding: 20px;
  font-size: 1.2em;
  font-weight: 600;
  font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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













/* ↓ここから消したい*/
.instantoilet-about {
  margin: 1em auto;
  text-align: center;
}

.point1-3 {
  background-color: #f3f3f3;
  padding: 2em;
}

.point2-4 {
  padding: 2em;
}

.point1-box {
  margin: 1em;
  display: flex;
  justify-content: center;
}

.point1-box img {
  padding: 0 1em;
  max-width: 40%;
}

.graph {
  text-align: center;
  margin: auto;
  max-width: 70%;
}

.graph p {
  font-size: 8px;
}

.point2 {
  text-align: center;
}

.point2 img {
  max-width: 80%;
}

.point3 {
  text-align: center;
}

.point4 {
  text-align: center;
  padding: 1em 2em 0 2em;
}

.under-move {
  font-weight: 500;
  display: inline-block;
  position: relative;
  margin-top: 5px;
  margin-bottom: 15px;
  color: red;
}

.move {
  display: inline-block;
  width: 50px;
  padding: 4px;
  background-color: #c7c7c7;
  margin: 0 5px;
  top: -11%;
  text-align: center;
  color: #fff;
  font-size: 13px;
}

.under-move a:hover {
  opacity: 0.75;
}

.youtube {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
  margin: 1em auto 0 auto;
}

.youtube iframe {
  position: absolute;
  top: 0%;
  right: 0;
  left: 0%;
  width: 100%;
  height: 100%;
}

.section-title {
  text-align: center;
  position: relative;
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: bold;
}

.section-title:before {
  content: '';
  position: absolute;
  bottom: -6px;
  display: inline-block;
  width: 40px;
  height: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

.item-box {
  display: flex;
  justify-content: center;
  margin: 1.5em;
}

.setumai-box {
  display: flex;
  flex-flow: column;
  margin: 0.6em 2em;
}

.name {
  font-size: 1.4em;
}

.amazon {
  padding: 10px;
  background-color: #c4b1a6;
  width: 150px;
  text-align: center;
  color: #fff;
}

.amazon:hover {
  opacity: 0.75;
}

.product-center {
  text-align: center;
}

.product {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 3em;
  max-width: 1000px;
  margin: 0 auto 30px auto;
}

.item {
  width: 380px;
}

.title {
  display: inline-block;
  font-size: 12px;
  margin: 0 0 15px 0;
  text-align: initial;
  font-weight: 400;
}

.wrapper.wrapper--column-2 .__inner .main {
  width: 1280px;
  max-width: 100%;
  padding-left: 0;
}

.__category-image {
  text-align: center;
}

.main main--product-list {
  text-align: center;
  padding-left: 0;
}

.orless {
  max-width: 800px;
}

.float-lineup-button {
  margin: 0 auto;
  position: fixed;
  width: 100px;
  margin: 0 auto;
  right: 0.5em;
  z-index: 5;
  bottom: 10px;
  opacity: 0.75;
}

.float-lineup-button a {
  padding: 20px 0;
}

.float-lineup-button a:hover {
  opacity: 0.75;
}

@media screen and (max-width: 599px) {
  .product {
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
  }

  .explan {
    font-size: 12px
  }

  .main-explan {
    font-size: 12px;
    width: auto;
  }

  .main-explan-center {
    font-size: 12px
  }

  .pointlist {
    font-size: 12px
  }

  ul.cp_list li {
    font-size: 12px
  }

  .sizegraph {
    font-size: 9px
  }


  /* ここから追記 */
  .tokutyou_ttl {
    background: linear-gradient(transparent 80%, rgba(250, 237, 0, 20%) 0%);

  }

  .tokutyou_ttl,
  .kikaku_ttl {
    font-size: 20px;
  }

  .size_sample p {
    font-size: 17px;
  }

  .size_sample p span {
    font-size: 20px;
  }

  .kikaku_sample_content {
    flex-direction: column;
  }

  .kikaku_sample p {
    font-size: 17px;
  }

  .kikaku_sample p span {
    font-size: 20px;
  }

  .example_itm p {
    font-size: 12px;
  }

  .ol_box {
    place-items: center;
  }

  .ol_itm {
    font-size: 17px;

  }

  .hayamihyou p {
    font-size: 14px;
    text-align: left;
    padding-left: 40px;
  }

  .rubberband_example_grid p {
    font-size: 17px;
  }

  .example_list {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .rubberband_example_grid {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: none;
    margin-top: 40px;
  }

  .ol_box {
    grid-template-columns: none;
    grid-template-rows: 1fr 1fr;
  }

  .ol_box figure img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hayamihyou {
    order: 1;
  }

  .announce p {
    font-size: 14px;
  }


}

@media screen and (max-width: 460px) {
  .point1-box img {
    max-width: 60%;
  }

  .point2 img {
    max-width: 100%;
  }

  .__category-image,
  .point4 {
    display: none;
  }

  .item-box {
    display: block;
  }
}

@media screen and (min-width: 461px) {

  .__category-image-phone,
  .point4-phone {
    display: none;
  }
}

@media screen and (max-width: 760px) {

  .main-item-box,
  .point-box,
  .graph,
  .hopper-box {
    display: block;
  }
}

@media screen and (max-width: 599px) {
  .range-open {
    font-size: 14px;
    max-width: 90%;
    margin: 0 auto;
  }

  .table_section_wrap_sp_txt {
    font-size: 12px;
  }

  .main-img {
    padding: 1em;
  }

  .section-title {
    margin: 0.2em 0.5em 1em 0.5em;
  }

  .point-group {
    padding: 0.5em;
  }

  .youtube {
    width: 90%;
  }
}

@media screen and (min-width: 1280px) {
  .breadcrumb {
    margin-left: 140px;
  }
}

.item .is-empty {
  height: 1.3em;
  padding: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}


/*商品一覧2つ横並び */
.section-title {
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  margin: 2em 0 1em 0;
  border-bottom: solid 3px #e6e6e6;
}

.text1 {
  font-size: 1em;
  font-weight: 500;
  text-align: center;
  margin: 1em;
}

.product {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 3em;
  max-width: 1000px;
  margin: 0 auto 30px auto;
}

.product {
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
}

.item {
  width: 12em;
  margin: 0 10px;
}

.item a:hover {
  opacity: 0.75;
}

.item p {
  font-size: 12px;
  text-align: justify;
}

.title {
  display: inline-block;
  font-size: 12px;
  margin: 0;
  text-align: initial;
  font-weight: 400;
}

@media screen and (max-width: 599px) {

  .item-box,
  .section-box {
    display: block
  }

  .which-box {
    max-width: 366px;
    text-align: center;
    margin: auto;
  }

  .item-box img {
    width: 520px;
  }
}

/* 早見表のレスポンシブ*/
@media screen and (max-width: 599px) {
  .tab-area {
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
  }
}

/* タブ　サイズ表　のレスポンシブ*/
@media screen and (max-width: 599px) {
  .tab {
    max-width: 90%;
    margin: 0 auto;
    padding: 0;
  }
}

@media screen and (max-width: 599px) {
  .tab__switch:checked+.tab__label {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 5px 0px 0px;
  }
}

@media screen and (max-width: 599px) {
  .tab__label {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 5px 0px 0px;
  }
}


/*ハートインゴムバンド一覧はコチラ　のレスポンシブ*/
@media screen and (max-width: 599px) {
  .btn {
    font-size: 7px;
    margin: 30px 0px 200px 0px;
    text-align: center;
  }
}