@charset "utf-8";
/* CSS Document */

/*fade-in*/
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

h1.fs-c-heading { display: none;}
.sale-bnr { display: none;} 


#original_wrapper {
    max-width: 1216px;
    margin: 0 auto;
}

#original_wrapper h2 {
    font-weight: 700;
    font-style: normal;
    text-align: center;
    font-size: 280%;
}
#original_wrapper h2.popup-h2 {font-size: 150%;font-weight: 700;}
@media only screen and (min-width: 750px){
#original_wrapper h2.popup-h2 {font-size: 230%;font-weight: 700;}
}

.topimg{
    width: 100vw;
    max-width: 1216px;
    margin-right: auto;
    margin-left: auto;
}

/*リード*/
.lead {margin-top: 50px;}
.lead p {text-align: center;font-size: 130%;line-height: 1.5em;}

/*PCの横幅*/
section.product {
    margin: 0 auto;
    width: 80%;
    margin-bottom: 50px;
}
section.popup_img {
    margin: 0 auto;
    width: 600px;
    margin-bottom: 50px;
}
section.line-up {
    margin: 0 auto;
    width: 100%;
    margin-bottom: 50px;
}

/*スマホ設定*/
@media (max-width: 768px) {

.topimg{
margin: 0 calc(50% - 50vw);
width: 100vw;
max-width: inherit;
}

#original_wrapper h2 {
    font-weight: 700;
    font-style: normal;
    text-align: center;
    font-size: 200%;
}

/*リード*/
.lead p {text-align: center;font-size: 90%;line-height: 1.8em;}

/*スマホは横幅いっぱい*/
section.product {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: inherit;
    margin-bottom: 50px;
}
section.popup_img {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: inherit;
    margin-bottom: 50px;
}
}


/*-----テキスト-----*/
.info-center , .info-left{margin: 16px 16px 30px;}
.info-center h3 {
        text-align: center;
        font-size: 120%;
        margin: 0;
        font-weight: 600;
        }
.info-center p {
        text-align: center;
        margin-bottom: 20px;
        }
.info-left h3 {
        text-align: left;
        font-size: 100%;
        margin: 0;
        }
.info-left p {
        text-align: left;
        margin-bottom: 20px;
        line-height:1.5em
        }

@media only screen and (min-width: 750px){
.info-left {width:100%; margin: 50px auto;}
.info-center h3 {font-size: 160%;}
.info-center p {font-size: 110%;}
.info-left h3 {font-size: 130%;}
.info-left p {font-size: 110%;}
}
/*-----/テキストここまで-----*/

/*-----商品一覧部分（カミスンから修正）-----*/
#original_wrapper h3.pro_name{
	padding: 0 5px;
}
#original_wrapper .price{font-size:1.3rem;}
/*-----/商品一覧部分（カミスンから修正）ここまで-----*/

/*----地図-----*/
.map iframe {width: 100%;height:400px;}
@media only screen and (min-width: 768px){
.map iframe {width: 600px;height:450px;}}
/*----/地図-----*/

/*-----サイズtable-----*/
.size_table table {
  /*width: 100%;このサイトでは横スクロール無し*/
  width:95vw;/*このサイトでは横幅指定*/
  margin: 10px auto;
  border-spacing: 0;
  /*display: block;
  overflow-x: auto;このページでは横スクロール無し*/
  white-space: nowrap; /* 折り返し防止 */
}
@media only screen and (min-width: 750px){
.size_table table {
  max-width:450px;
}}

.size_table th,
.size_table td {
  padding: 8px;
  border-right: solid #000000 1px;
  border-bottom: solid #000000 1px;
  text-align: center;
}

.size_table th {
  background: #ededed;
  text-align: center;
  font-weight: 400;
  border-top: solid #000000 1px;/* tableのtopにボーダー入れるとPCで横幅いっぱいにボーダーが表示されてしまうの解消のため */
}

/* 横スクロール時一番左の列（サイズ）を固定 */
.size_table table tr th:first-child,
.size_table table tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  border-left: solid #000000 1px;
}
.size_table table tr th:first-child{
  background: #ededed;
}
  
/* スクロールバーの全体 */
.size_table table::-webkit-scrollbar {
  width: 6px;  /* 横スクロールバーの太さ */
  height: 6px; /* 縦スクロールバーの太さ */
}

/* スクロールバーのつまみ（バー部分） */
.size_table table::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;  /* 色 */
  border-radius: 4px;       /* 丸みをつける */
}

/* スクロールバーのつまみをホバーした時 */
.size_table table::-webkit-scrollbar-thumb:hover {
  background-color: #7e7e7e;  /* ホバー時の色 */
}

/* スクロールバーの背景部分 */
.size_table table::-webkit-scrollbar-track {
  background: #f1f1f1;  /* 背景色 */
  border-radius: 4px;    /* 丸みをつける */
}


/* ==================================
 カテゴリボタン周り
================================== */

/*----- カテゴリボタンを途中から上部固定　ここから  -----*/

/* PC：カテゴリボタンエリア */
.category-btn-area {
  margin: 15px calc(50% - 50vw) 0;
  text-align: center;
  background: #000000;
  padding: 0;
  font-weight: 600;
  position: sticky;
  top: 133px;
  z-index: 999;
}

/* メニュー全体 */
.category-btn {
  display: flex;
  width: 100%;
  max-width: 1216px;
  padding: 0;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
  list-style: none;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  box-sizing: border-box;
}

/* 各メニュー */
.category-btn li {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 25%;
  width: 25%;
  min-width: 0;
}

/* 四角いタブデザイン */
.category-btn li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  height: 100%;
  padding: 0 10px;
  margin: 0;
  border-radius: 0;
  background: #000000;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  box-sizing: border-box;
  word-break: keep-all;
}

/* 最後の右線を消す */
.category-btn li:last-child a {
  border-right: none;
}

/* ホバー時 */
.category-btn li a:hover {
  background: #999999;
  color: #ffffff;
}

/* 選択中メニュー */
.category-btn li a.is-active {
  background: #999999 !important;
  color: #ffffff !important;
}

/* stickyが効かない場合の保険 */
#original_wrapper,
.fs-l-pageMain,
.fs-l-main {
  overflow: visible !important;
}

/* スマホ：JSでfixed制御 */
@media screen and (max-width: 767px) {
  .category-btn-area {
    position: static;
    background: #000000;
    padding: 0;
    margin: 15px calc(50% - 50vw) 0;
  }

  .category-btn-area.is-sp-fixed {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: #000000;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .category-btn-placeholder {
    display: none;
  }

  .category-btn-placeholder.is-show {
    display: block;
  }

  .category-btn {
    display: flex;
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    overflow-x: visible;
    white-space: normal;
    gap: 0;
    padding: 0;
    margin: 0;
    border-left: none;
    border-right: none;
  }

  .category-btn li {
    flex: 1 1 25%;
    width: 25%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .category-btn li a {
    min-height: 50px;
    padding: 0 3px;
    margin: 0;
    border-radius: 0;
    background: #000000;
    color: #ffffff;
    font-size: 100%;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border-right: 1px solid #ffffff;
    box-sizing: border-box;
    word-break: keep-all;
  }

  /* スマホ：固定されたタイミングだけ通常ボタン背景色を変更 */
  .category-btn-area.is-sp-fixed .category-btn li a {
    background: #444444;
  }

  /* スマホ固定時も選択中メニューを優先 */
  .category-btn-area.is-sp-fixed .category-btn li a.is-active {
    background: #999999 !important;
    color: #ffffff !important;
  }

  .category-btn li:last-child a {
    border-right: none;
  }
}

/* 375px以下の調整 */
@media screen and (max-width: 375px) {
  .category-btn li a {
    padding: 0 2px;
    letter-spacing: -0.03em;
  }
}

/* アンカーリンク移動時の上部余白 */
.anchor-point {
  display: block;
  height: 0;
  padding-top: 150px;
  margin-top: -150px;
}

@media screen and (max-width: 767px) {
  .anchor-point {
    padding-top: 80px;
    margin-top: -80px;
  }
}

/*----- /カテゴリボタンを途中から上部固定　ここまで  -----*/