@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;    /* 丸みをつける */
}


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

/*カテゴリボタン*/
.category-btn-area {margin: 15px calc(50% - 50vw) 0;text-align: center;background: #fff;padding: 3px 0;font-weight: 600;}
.category-btn-area p{color: #ffffff;font-size: 180%;margin: 5px 0;}
.category-btn-area ul{display:flex;padding: 0;justify-content: center;flex-wrap: wrap;margin: 0 auto 5px;} 
.category-btn-area ul li{list-style:none;padding: 0;font-size: 110%;} 
.category-btn-area ul li a{color: #000000;display: block;/* border: solid 1px #2b5ba6; */padding: 2px 8px;margin: 3px;border-radius: 30px;background: #ffffff;} 

@media only screen and (min-width: 750px){
    .category-btn-area p{color: #ffffff;font-size: 200%;}
    .category-btn-area ul li{font-size: 130%;}
    .category-btn-area ul li a{padding: 2px 8px;margin: 3px 8px;}}

@media screen and (max-width: 375px) {
    .category-btn-area ul li a{padding: 2px 5px;margin: 3px;}}


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

/* PC：カテゴリボタンを途中から上部固定 */
.category-btn-area {
  position: sticky;
  top: 133px;
  z-index: 999;
  background: #000000;
  padding: 12px 0;
}

.category-btn-area .tit {
  margin-top: 0;
}

/* 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: 10px 0;
  }

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

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

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

  .category-btn {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 5px;
    padding: 0 12px 8px;
    -webkit-overflow-scrolling: touch;
  }

  .category-btn li {
    flex: 0 0 auto;
  }
}

/* アンカーリンク移動時の上部余白 */
.anchor-point {
  scroll-margin-top: 200px;
}

@media screen and (max-width: 767px) {
  .anchor-point {
    scroll-margin-top: 130px;
  }
}
/*----- /カテゴリボタンを途中から上部固定　ここまで  -----*/