@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ===============================
フォント設定
=============================== */
:root {
  --font_noto_sans: 'Noto Sans JP', sans-serif;
  --font_noto_serif: 'Noto Serif JP', sans-serif;
  --font_libre: 'Libre Baskerville', serif;
  --black: #110E01;
  --gray: #E4E4E4
}
.font_libre {
  font-family: 'Libre Baskerville', serif;
  font-weight: 500;
}
/* ===============================
レイアウト・基本
=============================== */
@media screen and (max-width: 599px) {
  #belt_page {
    width: calc(100% + 16px);
    margin: 0 -8px;
  }
}
#belt_page h2,
#belt_page h3,
#belt_page h3 small{
  line-height: 1.8em!important;
  letter-spacing: 0.05em!important;
}
#belt_page h4 {
  line-height: 1.8em!important;
  letter-spacing: 0.1em!important;
}
#belt_page p,
#belt_page p span {
  line-height: 2.2em!important;
  letter-spacing: 0.06em!important;
  font-family: var(--font_noto_sans)!important;
  font-weight: 400;
  font-size: 1.4rem;
}
#belt_page li {
  letter-spacing: 0.05em!important;
  font-weight: 400;
  font-size: 1.4rem;
}
@media screen and (max-width: 599px) {
  #belt_page h2,
  #belt_page h3,
  #belt_page h3 small,
  #belt_page h4 {
    line-height: 1.5em!important;
    letter-spacing: 0.02em!important;
  }
  #belt_page p,
  #belt_page p span,
  #belt_page li {
    letter-spacing: 0em!important;
  }
}
/* ===============================
見出し
=============================== */
#belt_page .gift_ttl {
  font-size: 2.8rem;
}
@media screen and (max-width: 599px) {
  #belt_page .gift_ttl {
    font-size: 2.2rem;
  }
}
/* ===============================
タイトル
=============================== */
.belt_title {
    width: 100%;
    height: 360px;
    background: url(https://morpho1995noij.itembox.design/item/belt/title.jpg) no-repeat center;
    padding: 0.4rem;
    margin-bottom: 5rem;
}
@media screen and (max-width: 599px) {
  .belt_title {
    height: 240px;
    margin-bottom: 3rem;
  }
}
.belt_title > div {
    border: solid 1px #FFF;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    padding-left: 5rem;
}
@media screen and (max-width: 599px) {
  .belt_title > div {
    padding-left: 2rem;
  }
}
.belt_title > div h2 {
    font-size: 3.2rem;
    text-shadow: 1px 1px 4px #000;
}
@media screen and (max-width: 599px) {
  .belt_title > div h2 {
    font-size: 2rem;
  }
}
#belt_page .belt_title > div p {
    text-shadow: 1px 1px 4px #000;
    font-family: var(--font_libre)!important;
}
/* ===============================
リード文
=============================== */
.belt_w930 {
  width: 930px;
  margin: 0 auto;
}
@media screen and (max-width: 1430px) {
  .belt_w930 {
    width: 100%;
  }
}
.belt_w930 > .inner_wrap {
  margin-bottom: 8rem;
}
@media screen and (max-width: 599px) {
  .belt_w930 > .inner_wrap {
    margin-bottom: 3rem;
  }
}
.belt_intro {
  width: 800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
@media screen and (max-width: 1430px) {
  .belt_intro {
    width: 94%;
  }

}
@media screen and (max-width: 899px) {
  .belt_intro {
    flex-direction: column;
    margin: 0 auto;
  }
}
.belt_intro_ttl {
  width: 39.75%;
  min-height: 142px;
  padding: 4rem 0;
  background: url(https://morpho1995noij.itembox.design/item/cordovan_page/icon_ttl.png) no-repeat center center;
  background-size: 209px auto;
}
@media screen and (max-width: 899px) {
  .belt_intro_ttl {
    width: 100%;
    min-height: 80px;
    padding: 20px 0;
    background: url(https://morpho1995noij.itembox.design/item/cordovan_page/icon_ttl.png) no-repeat center center;
    background-size: 160px auto;
    margin: 0;
  }
}
#belt_page .belt_intro_ttl h2 {
  font-family: var(--font_libre);
  font-size: 3.8rem;
  line-height: 1.8!important;
  text-align: center;
  word-break: keep-all!important;
}
.belt_intro_ttl h2 small {
  display: block;
  font-size: 1.8rem;
}
@media screen and (max-width: 599px) {
  #belt_page .belt_intro_ttl h2 {
    font-size: 2.4rem;
  }
  .belt_intro_ttl h2 small {
    font-size: 1.6rem;
  }
}  

.belt_intro_txt {
  width: 58%;
}
@media screen and (max-width: 899px) {
  .belt_intro_txt {
    width: 100%;
    margin: 0;
  }
}
.belt_intro_txt h3 {
  font-size: 2.4rem;
}
@media screen and (max-width: 899px) {
  .belt_intro_txt h3 {
    margin-bottom: 15px; 
    text-align: center;
  }
}
@media screen and (max-width: 599px) {
  #belt_page .belt_intro_txt h3 {
    font-size: 1.8rem;
    line-height: 1.8em!important;
  }
}
.belt_intro + div.inner {
  width: 88%;
}
/* ===============================
new item
=============================== */
.belt_new_img,
.furiko_img {
  margin-bottom: 4rem;
}
.belt_gradation_img {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.belt_gradation_img div {
  width: 49%;
}
.belt_new_img img {
  object-fit: cover;
  width: 100%;
  height: 437px;
}
@media screen and (max-width: 599px) {
  .belt_new_img,
  .furiko_img {
    margin-bottom: 2rem;
  }
  .belt_new_img img {
    height: 240px;
  }
}
.coming_soon {
  position: relative;
}
.coming_soon p:first-child {
  z-index: 0;
  position: absolute;
}
.coming_soon p:first-child {
  z-index: 100;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#belt_page .coming_soon p span {
  color: #A3A7AD;
  font-size: 2.6rem;
  font-family: var(--font_libre)!important;
  letter-spacing: 0.06em!important;
}
@media screen and (max-width: 899px) {
  #belt_page .coming_soon p span {
    font-size: 1.6rem;
  }
}
.belt_new_intro {
  width: 830px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto 4rem;
}
@media screen and (max-width: 1430px) {
  .belt_new_intro {
    width: 100%;
  }
}
@media screen and (max-width: 899px) {
  .belt_new_intro {
    flex-direction: column;
  }
}
#belt_page .belt_new_intro h3 {
  white-space: nowrap;
  width: fit-content;
  font-size: 3.8rem;
  font-family: var(--font_libre);
  line-height: 1.4!important;
  text-align: center;
  padding: 0 5rem 0 0;
}
#belt_page .belt_new_item_txt h3 {
  white-space: nowrap;
  font-size: 3.8rem;
  font-family: var(--font_libre);
  line-height: 1.4!important;
  text-align: center;
  margin-bottom: 2rem;
}
@media screen and (max-width: 899px) {
  #belt_page .belt_new_intro h3,
  #belt_page .belt_new_item_txt h3 {
    width: 100%;
    padding: 0;
    margin-bottom: 2rem;
  }  
}
.belt_new_intro h3 small,
.belt_new_item_txt h3 small {
  display: block;
  font-size: 1.8rem;
}
@media screen and (max-width: 599px) {
  #belt_page .belt_new_intro h3,
  #belt_page .belt_new_item_txt h3 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
  }
  .belt_new_intro h3 small,
  .belt_new_item_txt h3 small {
    font-size: 1.6rem;
  }
}
.belt_new_intro_txt {
  width: 68%;
}
@media screen and (max-width: 899px) {
  .belt_new_intro_txt {
    width: 94%;
  }
}
.belt_new_intro_txt h4,
.belt_new_item_txt h4 {
  font-size: 2.4rem;
  margin-bottom: 2rem; 
}
.belt_new_item_txt h4 {
  text-align: center;
}
@media screen and (max-width: 899px) {
  .belt_new_intro_txt h4,
  .belt_new_item_txt h4 {
    text-align: center;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 899px) {
  .belt_new_intro_txt h4,
  .belt_new_item_txt h4 {
    margin-bottom: 1rem;
  }
}
.belt_new_2col_wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rem;
}
@media screen and (max-width: 599px) {
  .belt_new_2col_wrap {
    margin-bottom: 4rem;
  }
}
#panel2 .belt_new_2col_wrap:nth-child(even),
#panel3 .belt_new_2col_wrap:nth-child(even) {
  flex-direction: row;
}
@media screen and (max-width: 599px) {
  .belt_new_2col_wrap {
    flex-direction: column;
  }
  #panel2 .belt_new_2col_wrap:nth-child(even),
  #panel3 .belt_new_2col_wrap:nth-child(even) {
    flex-direction: column;
  } 
}
.belt_new_item_img,
.belt_new_item_txt {
  width: 48.19%;
}
@media screen and (max-width: 599px) {
  .belt_new_item_img,
  .belt_new_item_txt {
    width: 100%;
  }
  .belt_new_2col_wrap .belt_new_item_img {
    order: 1;
    margin-bottom: 2rem;
  }
  .belt_new_2col_wrap .belt_new_item_txt {
    order: 2;
  }
}
/* ===============================
2カラム
=============================== */
.belt_2col_wrap {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.belt_2col_wrap.oilshellcordovan {
  justify-content: center;
}
.belt_2col_wrap .item_box {
  width: 48.5%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 599px) {
  .belt_2col_wrap {
    width: 94%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
  .belt_2col_wrap .item_box {
    width: 100%;
    margin-bottom: 3rem;
  }
  .belt_2col_wrap .item_box:nth-child(2) {
    margin-bottom: 0;
  }
}
.belt_2col_wrap .item_box .item_box_up {
  display: flex;
  flex-direction: column;
}
#belt_page .item_box_up h3 {
  order: 2;
  font-size: 2.1rem;
  text-align: center;
  border-bottom: solid 1px #d1d1d1;
  padding-bottom: 1.4rem;
  margin-bottom: 1.6rem;
}
.item_box_up .item_box_img {
  order: 0;
  position: relative;
  margin-bottom: 2rem;
}
.item_box_up .item_box_img img {
  display: block;
  position: relative;
  z-index: 0;
}
#belt_page  .item_box_up .item_box_img span {
  font-family: var(--min)!important;
  display: inline-block!important;
  background: #8a7959;
  color: #FFF;
  font-size: 1.6rem;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 1.5rem;
}
.item_box_up .item_box_txt {
  order: 3;
}
.item_box_up .item_box_txt {
  margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
  #belt_page .item_box_up h3 {
    font-size: 1.8rem;
    padding-bottom: 1.4rem;
    margin-bottom: 1.6rem;
  }
  .item_box_up .item_box_img {
    margin-bottom: 1.4rem;
  }
  .item_box_up .item_box_img span {
    font-size: 1.3rem;
    padding: 0 1rem;
  }
  .item_box_up .item_box_txt {
    margin-bottom: 1rem;
  }
}
/* ===============================
2カラム
=============================== */
.belt_topic_wrap {
  width: 800px;
  margin: 0 auto 10rem;
}
@media screen and (max-width: 1430px) {
  .belt_topic_wrap {
    width: 100%;
  }  
}
@media screen and (max-width: 599px) {
  .belt_topic_wrap {
    margin: 0 auto 5rem;
  }
}
.belt_topic_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 599px) {
  .cordovan_leather_box {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 25px;
  }
}
.belt_topic_img {
  width: 50%;
}
@media screen and (max-width: 599px) {
  .belt_topic_img {
    width: 100%;
  }
}
.belt_topic_txt {
  width: 50%;
  text-align: center;
  padding: 0 1rem;
}
.belt_topic_txt h2 {
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 1.4em!important;
  margin-bottom: 25px;
}
.belt_topic_txt h2 span {
  font-size: 1.5rem;
  font-family: var(--font_libre);
  font-weight: 400;
  color: #999999;
  display: block;
  letter-spacing: 0.1em!important;
  margin-bottom: 20px;
}
.belt_topic_txt h2:after {
  content:'';
  display: block;
  width: 80px;
  height: 1px;
  background-color: #464646;
  margin: 0 auto;
}

#belt_page .belt_topic_txt h2 + p {
  font-family: var(--font_noto_serif)!important;
  font-size: 2.0rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.8em!important;
  letter-spacing: 0.05em!important;

}
.belt_topic_txt > p {
  text-align: left;
  padding: 0 2rem;
}
@media screen and (max-width: 1430px) {
  .belt_topic_txt p br {
    display: block;
  }
}
@media screen and (max-width: 599px) {
  .belt_topic_txt {
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
  .belt_topic_txt h2 {
    font-size: 18px;
    margin-bottom: 14px;
  }
  .belt_topic_txt h2 span {
    font-size: 12px;
    margin-bottom: 9px;
  }
  #belt_page  .belt_topic_txt h2 + p{
    font-size: 17px;
    line-height: 1.8em!important;
  }
}
.flex_column_reverse_sp {
  flex-direction: row;
}
.flex_reverse_pc {
  flex-direction: row-reverse;
}
@media screen and (max-width: 599px) {
  .flex_column_reverse_sp {
    flex-direction: column-reverse;
  }
}
#belt_page p.belt_comment {
  font-size: 14px;
  font-weight: normal!important;
  margin-bottom: 20px;
  line-height: 2.8em!important;
  letter-spacing: 0!important;
}
/* ===============================
タブエリア
=============================== */
#belt_tab_area {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  #belt_tab_area {
    width: 94%;
  }
}
#belt_tab_area .tab_area {
  margin: 0 auto 5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  #belt_tab_area .tab_area {
    flex-direction: column;
  }
}
#belt_tab_area .tab_area label {
  font-family: var(--font_noto_serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  width: 23%;
  display: inline-block;
  padding: 2.0rem 0;
  margin: 0;
  color: #FFF;
  text-align: center;
  cursor: pointer;
  transition:ease 0.2s;
}
@media screen and (max-width: 1430px) {
  #belt_tab_area .tab_area label {
    width: 48%;
    margin-bottom: 2%;
  }
}
@media screen and (max-width: 599px) {
  #belt_tab_area .tab_area label {
    letter-spacing: 0;
    width: 100%;
    margin-bottom: 3%;
  }
}
#belt_tab_area #tab1:checked~.tab_area .tab1_label,
#belt_tab_area #tab2:checked~.tab_area .tab2_label,
#belt_tab_area #tab3:checked~.tab_area .tab3_label,
#belt_tab_area #tab4:checked~.tab_area .tab4_label {
  background: #AF8C58;
  color: #FFF;
}
#belt_tab_area #tab1:checked~.tab_area .tab2_label,
#belt_tab_area #tab1:checked~.tab_area .tab3_label,
#belt_tab_area #tab1:checked~.tab_area .tab4_label {
  background: #161616;
  color: #FFF;
}
#belt_tab_area #tab2:checked~.tab_area .tab1_label,
#belt_tab_area #tab2:checked~.tab_area .tab3_label,
#belt_tab_area #tab2:checked~.tab_area .tab4_label {
  background: #161616;
  color: #FFF;
}
#belt_tab_area #tab3:checked~.tab_area .tab1_label,
#belt_tab_area #tab3:checked~.tab_area .tab2_label,
#belt_tab_area #tab3:checked~.tab_area .tab4_label {
  background: #161616;
  color: #FFF;
}
#belt_tab_area #tab4:checked~.tab_area .tab1_label,
#belt_tab_area #tab4:checked~.tab_area .tab2_label,
#belt_tab_area #tab4:checked~.tab_area .tab3_label {
  background: #161616;
  color: #FFF;
}
#belt_tab_area #tab1:checked~.panel_area #panel1 {
  display: block;
}
#belt_tab_area #tab2:checked~.panel_area #panel2 {
  display: block;
}
#belt_tab_area #tab23checked~.panel_area #panel3 {
  display: block;
}
#belt_tab_area #tab4:checked~.panel_area #panel4 {
  display: block;
}
@media screen and (max-width:599px) {
  #belt_tab_area .tab_area {
    margin: 0 auto 3rem;
  }
}
/* ===============================
フリコベルト
=============================== */
#panel2 .inner {
  margin-bottom: 8rem;
}
@media screen and (max-width:599px) {
  #panel2 .inner {
    margin-bottom: 4rem;
  }
}
.furiko_intro_wrap {
  width: 790px;
  margin: 0 auto;
}
@media screen and (max-width:1430px) {
  .furiko_intro_wrap {
    width: 100%;
  }
}
.belt_ttl_02 {
  font-family: var(--font_noto_serif);
  font-size: 2.0rem;
  text-align: center;
}
.belt_ttl_02 small {
  display: block;
  font-family: var(--font_libre);
  font-size: 1.5rem;
  color: #A3A7AD;
  margin-top: 0.6rem;
}
.belt_ttl_02 small:after {
  content: '';
  display: block;
  width: 81px;
  height: 1px;
  background-color: #464646;
  margin: 2.4rem auto 2.6rem;
}
.belt_ttl_02.furiko_lineup small:after {
  margin-bottom: 6rem;
}
@media screen and (max-width:599px) {
  .belt_ttl_02 small:after,
  .belt_ttl_02.furiko_lineup small:after {
    margin: 2rem auto 2rem;
  }
}
.belt_ttl_03 {
  font-family: var(--font_noto_serif);
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 3.5rem;
}
@media screen and (max-width:599px) {
  .belt_ttl_03 {
    margin-bottom: 2rem;
  }
}
.furiko_how_to_use p {
  text-align: center;
}
@media screen and (max-width:599px) {
  .furiko_how_to_use p {
    text-align: left;
  }
}