@charset "utf-8";

/*==========================================
	共通スタイル
==========================================*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
body {
  min-width: 1000px;
  overflow-y: scroll;
}
main{
  margin-bottom: 80px;
}
section{
  margin-bottom: 80px;
}
section:last-child{
  margin-bottom: 0;
}
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.case{
  margin-bottom: 40px;
}
.case:last-child{
  margin-bottom: 0;
}
@media (max-width: 768px) {
  body {
    min-width: 100%;
  }
  main{
    margin-bottom: 50px;
  }
  section{
    margin-bottom: 50px;
  }
  .container {
    min-width: 90%;
    width: 90%;
  }
  .case{
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}
@media (min-width: 769px) {
  .sp {
    display: none;
  }
}

/* text */
body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  color: #000;
  font-weight: normal;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  body {
    font-size: 13px;
  }
}
.ttl_topic {
  font-size: 22px;
  margin-bottom: 0.6em;
  line-height: 1.5;
  text-align: center;
}
.ttl_item{
  font-size: 20px;
  margin-bottom: 0.6em;
  text-align: center;
}
.item_price{
  font-size: 22px;
  margin-bottom: 0.6em;
  text-align: center;
  font-weight:bold;
}
.tax_excluded{
  font-size: 16px;
}
.center{
  text-align: center;
}
@media (max-width: 768px) {
  .ttl_topic {
    font-size: 18px;
  }
  .ttl_item{
    font-size: 16px;
  }
  .item_price{
  font-size: 18px;
  font-weight:bold;
  }
  .tax_excluded{
    font-size: 12px;
  }
  .center{
    text-align: left;
  }
}
p {
  margin-bottom: 1em;
}
p:last-child {
  margin-bottom: 0;
}

/* list */
.list li{
  padding-left: 1em;
  position: relative;
}
.list li::before{
  content: '・';
  position: absolute;
  left: 0;
}
@media (max-width: 768px) {
  .list li{
    margin-bottom: 0.5em;
  }
}

/* link */
a {
  color: #000;
  text-decoration: underline;
}
.btn{
  text-decoration: none;
  display: block;
  width: 260px;
  padding: 15px;
  border: 1px solid #333;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
a.btn::before {
  content: '←';
  position: absolute;
  left: 20px;
}
.btn2{
  text-decoration: none;
  display: block;
  width: 260px;
  padding: 15px;
  border: 1px solid #333;
  text-align: center;
  margin: 30px auto 0;
  position: relative;
}
a.btn2::after {
  content: '→';
  position: absolute;
  right: 20px;
}
@media (min-width: 769px) {
  a:hover {
    text-decoration: none;
  }
  .btn:hover{
    background-color: #000;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  a.btn:hover::before {
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .btn2:hover{
    background-color: #000;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  a.btn2:hover::before {
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media (max-width: 768px) {
  .btn{
    max-width: 260px;
    padding: 10px;
    width: 60%;
  }
  .btn2{
    max-width: 260px;
    padding: 10px;
    width: 60%;
  }
}

/* form */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="datetime"],
input[type="date"],
input[type="password"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 0;
  width: 100%;
  min-width: 300px;
  padding: 6px 10px;
  font-size: 1em;
  transition: all 0.3s ease 0s;
  background-color: white;
  margin: 5px auto;
}
@media (max-width: 430px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="datetime"],
  input[type="date"],
  input[type="password"] {
    min-width: 250px;
  }
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="datetime"]:focus,
input[type="date"]:focus,
input[type="password"]:focus {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
  outline: none;
}
input[type="text"]:placeholder-shown,
input[type="number"]:placeholder-shown,
input[type="email"]:placeholder-shown,
input[type="tel"]:placeholder-shown,
input[type="url"]:placeholder-shown,
input[type="datetime"]:placeholder-shown,
input[type="date"]:placeholder-shown,
input[type="password"]:placeholder-shown {
  color: #bbb;
}
input[type="text"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="datetime"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
  color: #bbb;
}
input[type="text"]:-moz-placeholder,
input[type="number"]:-moz-placeholder,
input[type="email"]:-moz-placeholder,
input[type="tel"]:-moz-placeholder,
input[type="url"]:-moz-placeholder,
input[type="datetime"]:-moz-placeholder,
input[type="date"]:-moz-placeholder,
input[type="password"]:-moz-placeholder {
  color: #bbb;
  opacity: 1;
}
input[type="text"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
input[type="datetime"]::-moz-placeholder,
input[type="date"]::-moz-placeholder,
input[type="password"]::-moz-placeholder {
  color: #bbb;
  opacity: 1;
}
input[type="text"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="datetime"]:-ms-input-placeholder,
input[type="date"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder {
  color: #bbb;
}
input[type="submit"]:focus {
  outline: none;
}
button {
  border: none;
  outline: none;
}


/* select_box */
.select_box {
  position: relative;
  display: inline-block;
}
@media (max-width: 430px) {
  .select_box {
    display: block;
    margin: 5px auto;
  }
}
.select_box select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #000;
  width: 100%;
  min-width: 300px;
  padding: 6px 10px;
  font-size: 1em;
  transition: all 0.3s ease 0s;
  background-color: white;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.select_box select:focus {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
  outline: none;
}
.select_box select::-ms-expand {
  display: none;
}
.select_box select:focus {
  box-shadow: none;
}
@media (max-width: 430px) {
  .select_box select {
    min-width: 250px;
  }
}


/* mainimg */
.mainimg{
  display: block;
  margin: 0 auto 60px;
  max-width: 800px;
}
@media (max-width: 768px) {
  .mainimg{
    margin-bottom: 40px;
    max-width: 100%;
  }
}

/* bd_box */
.bd_box{
  border: 1px solid #ccc;
}

/* slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}

/* .accordion_box */
.accordion_content{
  display: none;
}
.accordion_btn{
  border: 1px solid #333;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  padding: 10px;
  padding-right: 20px;
  text-align: center;
  width: 260px;
}
.accordion_btn:after{
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 8%;
  top: 0;
  bottom: 13%;
  margin: auto;
  /* transition: all 0.5s; */
}
.accordion_btn.active:after{
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 6%;
  bottom: 0;
}
.accordion_bnr{
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  padding: 10px;
  padding-right: 20px;
  text-align: center;
  width: 80%;
  transition-property: opacity;
  transition-duration: 0.5s;
}
@media (min-width: 769px) {
  .accordion_btn:hover{
    background-color: #000;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .accordion_btn:hover::after {
    border-color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .accordion_bnr:hover{
    opacity: 0.7;
  }
}
@media (max-width: 768px) {
  .accordion_btn{
    max-width: 260px;
    width: 70%;
  }
  .accordion_btn:after{
    bottom: 10%;
    height: 6px;
    width: 6px;
  }
  .accordion_btn.active:after{
    top: 5%;
    bottom: 0;
  }
  .accordion_bnr{
    width: 100%;
  }
}


/*==========================================
	トップページ  #pageTop
==========================================*/
main#pageTop{
  margin-bottom: 0;
}

/* .top_select_box */
.top_select_box .container{
  max-width: 800px;
}
.top_select_box .bd_box{
  background-color: #f6f6f6;
  padding: 15px 30px;
  text-align: center;
}
@media (min-width: 769px) {
  .top_select_box .list{
    max-width: 630px;
    margin: 0 auto;
  }
}

/* .top_img_box */
.top_img_box img{
  display: block;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .top_img_box .container{
    width: 100%;
  }
}

/* .col2_box */
.top_img_box .col2_box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.top_img_box .col2_box img{
  margin: 0;
  width: 50%;
}
@media (max-width: 768px) {
  .top_img_box .col2_box{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .top_img_box .col2_box img{
    margin: 0;
    width: 100%;
  }
}

/* .btn_tenpo */
.btn_tenpo{
  display: block;
  margin: 0 auto;
  width: 40%;
}
@media (min-width: 769px) {
  .btn_tenpo:hover{
    opacity: 0.7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media (max-width: 768px) {
  .btn_tenpo{
    width: 100%;
  }
}

/* .accordion_box */
.accordion_box{
  margin-bottom: 60px;
}
.accordion_box .accordion_content{
  padding-top: 30px;
}
.accordion_box .accordion_content img{
  display: block;
  margin-bottom: 30px;
}
.accordion_box .accordion_content img:last-child{
  margin-bottom: 0;
}
.accordion_box .btn_tenpo{
  width: 100%;
}
@media (max-width: 768px) {
  .accordion_box{
    margin-bottom: 40px;
  }
  .accordion_box .accordion_content{
    padding-top: 20px;
  }
  .accordion_box .accordion_content img{
    margin-bottom: 10px;
  }
}


/*==========================================
	インテリアタイプ選択ページ  #pageInterior
==========================================*/
#pageInterior .container{
  max-width: 800px;
}
#pageInterior .ttl_topic{
  margin-top: 1em;
  margin-bottom: 1em;
}

/* interior_list_box */
.interior_list_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto 20px;
}
.interior_list_box:last-child {
  margin: 0 auto;
}
.interior_list_box li {
  width: 48%;
  margin: 0 1% 20px;
}
.youtube_box {
  margin-bottom: 50px;
  text-align: center;
}
@media (max-width: 768px) {
  .interior_list_box {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
  }
  .interior_list_box li {
    width: 31.3%;
    margin: 0 1% 20px;
  }
  .youtube_box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  .youtube_box iframe{
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
}
@media (max-width: 430px) {
  .interior_list_box {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .interior_list_box li {
    width: 48%;
    margin: 0 0 20px;
  }
}

/* interior_img */
.interior_list_box li .interior_img {
  margin-bottom: 10px;
  display: block;
  position: relative;
  transition-duration: 0.3s;
}
.interior_list_box li .interior_img:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 93, 35, 0.5);
  filter: blur(4px);
  transition-duration: 0.3s;
  opacity: 0;
}
.interior_list_box li .interior_img img {
  width: 100%;
  vertical-align: bottom;
  height: auto;
}
@media (min-width: 769px) {
  .interior_list_box li .interior_img:hover:before {
    filter: blur(0);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .interior_list_box li .interior_img {
    width: 100%;
    height: auto;
  }
}

/* .txt_box */
.interior_list_box li .txt_box {
  text-align: center;
}
.interior_list_box li .txt_box a {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0.3em;
  padding-left: 0;
  text-decoration: none;
}
@media (min-width: 769px) {
  .interior_list_box li .txt_box a:hover{
    opacity: 0.7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media (max-width: 430px) {
  .interior_list_box li .txt_box a {
    font-size: 13px;
  }
}


/*==========================================
	製品ページ  #pageProduct
==========================================*/
#pageProduct{
  padding-top: 60px;
}
@media (max-width: 768px) {
  #pageProduct{
    padding-top: 40px;
  }
}
#pageProduct .container{
  max-width: 600px;
}
#pageProduct .ttl_topic{
  background-color: #fdf5df;
  padding: 10px;
  margin-bottom: 25px;
  text-align: left;
}

/* .product_slider */
.product_slider{
  margin: 0 auto;
}
.product_slider .slick-track {
  display: flex;
}
.product_slider .slick-slide{
  margin: 0 10px;
  height: auto !important;
  /* border: 1px solid #ddd; */
  box-sizing: border-box;
  position: relative;
}
.product_slider .slick-slide::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 12px solid transparent;
}
.product_slider .slick-slide > div{
  height: 100%;
}
.product_slider .slide_item{
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.product_slider a{
  color: #000;
  display: block;
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  .product_slider a:hover{
    opacity: 0.7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}

.product_slider .txt_box{
  padding: 20px;
}
.product_slider .title{
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .product_slider .txt_box{
    padding: 12px;
  }
  .product_slider .title{
    font-size: 13px;
  }
}

/* .slider_arrow */
.product_slider .slider_arrow {
  cursor: pointer;
  position: absolute;
  top: calc(50% - 16px);
  width: 20px;
  z-index: 1;
}
.product_slider .slider_arrow.arrow_next {
  right: -22px;
}
.product_slider .slider_arrow.arrow_prev {
  left: -22px;
}
@media screen and (min-width: 769px) {
  .product_slider .slider_arrow:hover {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media screen and (max-width: 768px) {
  .product_slider .slider_arrow{
    cursor: pointer;
    position: absolute;
    top: calc(50% - 12px);
    width: 14px;
    z-index: 1;
  }
  .product_slider .slider_arrow.arrow_prev{
    left: -12px;
  }
  .product_slider .slider_arrow.arrow_next{
    right: -12px;
  }
}
.img_barcode{
  display: block;
  margin: 30px auto;
}

/* .txt_bottom_box */
#pageProduct .txt_bottom_box{
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}
/* #pageProduct .txt_bottom_box p{
  text-align: center;
}*/
@media screen and (max-width: 768px) {
  #pageProduct .txt_bottom_box{
    margin-bottom: 60px;
  }
}


/*==========================================
	取扱店舗一覧ページ  #pageStore
==========================================*/
#pageStore .container{
  max-width: 800px;
}
#pageStore .ttl_topic{
  margin-top: 1em;
  margin-bottom: 2em;
}

/* .store_list_box */
.store_list_box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
.store_list_box .case{
  margin-bottom: 50px;
  width: 48%;
}
.store_list_box .ttl_item{
  text-align: left;
}
@media (max-width: 768px) {
  .store_list_box{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .store_list_box .case{
    margin-bottom: 30px;
    width: 100%;
  }
}

.store_list_box li{
  border: 1px solid #ccc;
  border-bottom: none;
  box-sizing: border-box;
  padding: 10px;
}
.store_list_box li:last-child{
  border-bottom: 1px solid #ccc;
}
.store_list_box .prefecture{
  background-color: #ddd;
  box-sizing: border-box;
  display: inline-block;
  font-weight: bold;
  margin-right: 15px;
  padding: 2px 5px;
  text-align: center;
  width: 80px;
}
.store_list_box li a{
  color: #4e70bd;
  text-decoration: none;
}
@media (min-width: 769px) {
  .store_list_box li a:hover{
    text-decoration: underline;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media (max-width: 768px) {
  .store_list_box li{
    font-size: min(3.467vw ,13px);
    padding: 8px;
  }
  .store_list_box li a{
    text-decoration: underline;
  }
  .store_list_box .prefecture{
    margin-right: 15px;
    width: 65px;
  }
}
/*==========================================
	TOPモーダル
==========================================*/
/* モーダルを開くボタン */
.modal-open{
/*  position: fixed;*/
  top: 50%;
  left: 50%;
  font-size: 16px;
  font-weight: bold;
  width: 300px;
/*  height: 60px;*/
  color: #fff;
  background: #000;
  border: none;
  cursor: pointer;
/*  translate: -50% -50%;*/
}

/* モーダルと背景の指定 */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
}

/* モーダルの擬似要素の指定 */

.modal:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active{
  opacity: 1;
  visibility: visible;
}

/* モーダル内側の指定 */
.modal-container{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  width: 90%;
  background: #fff;
}

/* モーダルを閉じるボタンの指定 */
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

/* モーダルのコンテンツ部分の指定 */
.modal-content{
  background: #fff;
  text-align: left;
  line-height: 1.8;
  padding: 20px;
}

/* モーダルのコンテンツ部分のテキストの指定 */
.modal-content p{
  margin: 1em 0;
}

/* slickスライダーをピンチインできるようにする */
.slick-slider {
        -ms-touch-action: auto;
        touch-action: auto;
}




/*==========================================
 検索エリア
==========================================*/
.top_select_box .wrapper{
  padding: 40px;
  background-color: #eee;
}
.top_select_box .ttl_topic{
  margin-bottom: 1em;
}
@media (max-width: 768px) {
  .top_select_box .wrapper{
    padding: 30px 20px;
  }
}

/* .search-area */
.search-area{
  margin: 0 auto 40px;
  max-width: 600px;
  width: 100%;
}
.search-area input[type="text"] {
  border: 3px solid #ef6c02;
  border-radius: 35px;
  padding: 12px 20px;
  margin: 0;
  font-size: 16px;
}
.search-area input[type="text"]:focus {
  box-shadow: none;
}
.search-result {
  margin-top: 20px;
}
.search-result__hit-num span {
  font-weight: bold;
}
#search-result__list {
  margin-top: 15px;
  margin-bottom: 20px;
}
#search-result__list span {
  display: inline-block;
}
#search-result__list span a{
  display: inline-block;
  background: #F2F2F2;
  border: 1px solid #000;
  padding: 5px 15px;
  border-radius: 40px;
  line-height: 1.4;
  text-decoration: none;
}
.target-area {
  margin-top: 50px;
}
@media (min-width: 769px) {
  #search-result__list span a:hover{
    background-color: #000;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
@media (max-width: 768px) {
  .search-area{
    margin: 0 auto 30px;
  }
  .search-area input[type="text"] {
    font-size: 13px;
    padding: 10px 15px;
  }
  #search-result__list span a{
    padding: 4px 10px;
    font-size: 12px;
  }
}

/* .tab-btn */
.tab-btn {
  display: flex;
  flex-wrap: wrap;
}
.tab-btn .btn {
  border: none;
  margin: 0;
  margin-right: 10px;
  /* margin-bottom: -1px; */
  padding: 0;
  text-align: center;
  width: 30%;
}
.tab-btn .btn a {
  border: none;
  border-top: 4px solid #ccc;
  background-color: #ccc;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: block;
  font-size: 16px;
  position: relative;
  padding: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.tab-btn .btn a.is-active {
  border-top: 4px solid #ef6c02;
  background-color: #fff;
  color: #ef6c02;
  font-weight: 500;
  position: relative;
  z-index: 10;
}
@media (min-width: 769px) {
  .tab-btn .btn a:hover{
    opacity: 0.9;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .tab-btn .btn a.is-active:hover{
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .tab-btn .btn {
    width: 42%;
  }
  .tab-btn .btn a{
    font-size: 13px;
    padding: 8px;
  }
}

/* #tab-contents */
#tab-contents{
  position: relative;
  z-index: 1;
}
.top_select_box #tab-contents .bd_box{
  background-color: #fff;
  border: none;
  padding: 30px 10px;
  width: 100%;
}
.tab-contents-item {
  display: none;
  width: 100%;
  justify-content: center;
}
.tab-contents-item.is-active {
  display: flex;
}
.tab-contents-item > p {
  margin: auto;
  height: 40px;
  opacity: 0;
}
.tab-contents-item.is-activ > p {
  animation: fadeinAnime 2s forwards;
}
@keyframes fadeinAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .top_select_box #tab-contents .bd_box{
    padding: 20px;
    width: 100%;
  }
}

/*==========================================
	サイズ一覧
==========================================*/
.topimg{
  display: block;
  margin: 0 auto;
  max-width: 1000px;
}
#size_list .container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 768px) {
  .topimg{
    max-width: 100%;
  }
  #size_list .container {
    min-width: 90%;
    width: 100%;
  }

}