/* ========================================

	goosd.css

========================================== */


/* goods
--------------------------------- */

.list--category {
    padding: 0 0 50px;
}
.block--overlay .list--ph img {
    max-width: 600px;
}

.section--goods .list--category>li+li {
  margin-top: 55px;
}

.section--goods .tit--category {
  margin: 0 0 25px;
  font-size: 24px;
  font-weight: bold;
}

.list--goods {
  display: flex;
  display: webkit-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list--goods li {
    width: 32%;
    margin: 0 0 1.25vw;
    background: #fff;
    border-radius: 20px;
    padding: .5vw 1.5vw 1.5vw;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    color: #222;
}

.list--goods::after {
  content: "";
  display: block;
  width: 30%;
}

.list--goods .thumb {
  line-height: 0;
}

.page--goods .list--goods .thumb img {
  background: no-repeat center;
  background-size: contain;
}

.list--goods .tit {
  font-weight: bold;
  font-size: 16px;
}

.list--goods .tit span {
  font-weight: normal;
  display: block;
  font-size: 12px;
  margin-top: 5px;
}

/* popup */
.block--overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
        overflow-y: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 9999;
    background: rgba(18, 4, 62, 0.8);
    width: 100%;
}

.block--overlay .overlay__container {
  /*display: table;*/
  padding: 10px 0;
  width: 100%;
  height: 100%;
}

.block--overlay .overlay__inner {
  /*display: table-cell;*/
  vertical-align: middle;
}

.block--overlay .overlay__modal {
    background: #fff;
    padding: 0 5% 4vw;
    width: 80%;
    margin: 4vw auto;
    border-radius: 50px;
    color: #222;
}

.block--overlay .slick-slider {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.block--overlay .list--ph-thumb .slick-list {
  padding: 0 !important;
  text-align: center;
}

.block--overlay .list--ph-thumb .slick-track {
  transform: none !important;
}

.block--overlay .list--ph img,
.block--overlay .list--ph-thumb img {
  background: no-repeat center;
  background-size: contain;
  margin: 0 auto;
}

.block--overlay .list--ph img {
  width: 80%;
}

.block--overlay .list--ph-thumb {
    line-height: 0;
    margin: 0 0 50px;
    text-align: center;
    display: none;
}

.block--overlay .list--ph-thumb li {
  max-width: 100px;
  cursor: pointer;
  outline: none;
  position: relative;
  margin: 0 .5vw;
  border: 2px solid #e4e4e4;
  border-radius: 6px;
  padding: 5px;
  float: none;
  display: inline-block;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.block--overlay .list--ph-thumb li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 0;
  border-radius: 4px;
}

.block--overlay .list--ph-thumb li:hover::after,
.block--overlay .list--ph-thumb li.slick-current::after {
  opacity: 1;
}

.block--overlay .list--ph.one {
  text-align: center;
}




.block--overlay .tabBlock{
	display:none;
}
.block--overlay .is-show{
	display:block;
}
.block--overlay .is-active{
    background: #103C94;
}


.block--overlay .tabArea{
    text-align: center;
    padding: 20px 0;
    line-height:0;
}
.block--overlay .tabArea .tabBlock{

}
.block--overlay .tabArea .tabBlock img{
    width: 80%;
    background: no-repeat center;
    background-size: contain;
    margin: 0 auto;
    max-width: 600px;
}
.block--overlay .switchList {
    display: flex;
    justify-content: center;
    margin: 0 0 60px;
}
.block--overlay .switchList .switch{
    width: 120px;
    padding: 15px;
    margin: 0 10px;
    line-height: 0;
    cursor: pointer;
    transition: 0.3s ease;
}
.block--overlay .switchList .switch img{
    width: 100%;
    background: no-repeat center;
    background-size: contain;
    margin: 0 auto;
}
.block--descriptoin>p {
  margin: 30px 0;
}

.block--descriptoin .tit {
  font-size: 24px;
  margin: 0 0 30px;
  font-weight: bold;
}

.sizeTable {
  border: 1px solid #ccc;
  border-bottom: none;
  font-size: 12px;
}

.sizeTable th, .sizeTable td {
    padding: 8px 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.3;
}

.sizeTable tr {
  border-bottom: 1px solid #ccc;
}

.sizeTable th {
  font-weight: bold;
  background: #eee;
  border-right: 1px solid #ccc;
}

.sizeTable tr:first-of-type th:not(:first-child) {
  border-right: none;
}

.block--overlay .overlay__modal::after {
  display: table;
  content: '';
  clear: both;
}

.block--overlay .btn--close {
  width: 48px;
  height: 48px;
  top: 30px;
  right: 40px;
  display: block;
  position: fixed;
  border: none;
  text-decoration: none;
  cursor: pointer;
  background: none;
  outline: none;
}

.block--overlay .btn--close:before,
.block--overlay .btn--close:after {
  content: '';
  display: block;
  position: absolute;
  right: 0px;
  width: 60px;
  height: 4px;
  background: #fff;
}

.block--overlay .btn--close:before {
  -webkit-transform: translateY(23px) rotate(-45deg);
  transform: translateY(23px) rotate(-45deg);
  top: 0px;
}

.block--overlay .btn--close:after {
  -webkit-transform: translateY(-23px) rotate(45deg);
  transform: translateY(-23px) rotate(45deg);
  bottom: 0px;
}

.section--goods .list--description {
    margin: 50px 0 0;
    padding: 55px 0 0;
    border-top: 1px solid #E3D283;
}

.section--goods .list--description>li+li {
  margin-top: 45px;
}

.section--goods .list--description .tit {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 10px;
}

.section--goods .list--description .tit::before {
  content: "\f111";
  font-family: 'Font Awesome 5 Free';
  margin-right: .6em;
  font-size: .6em;
  position: relative;
  top: -.25em;
  color: #bdae68;
}

.section--goods .link--external {
  color: inherit;
  font-weight: bold;
}

.section--goods .link--external::after {
  content: "\f35d";
  font-family: 'Font Awesome 5 Free';
}
.overlay__modal .text {
    padding: 0 0 20px;
    border-bottom: 1px solid #ccc;
    margin: 0 0 30px;
}
.overlay__modal .text p{ 
    padding: 0 0 10px;
    line-height: 1.5;
}
.overlay__modal .bold {
    margin: 0 0 5px;
}
.overlay__modal .notice {
    padding: 0 0 30px;
}
.comment{
    line-height: 1.5;
}
.sizeTable + .comment{
    margin: 30px 0 0;
}
.notice + .comment{
    margin: 0;
}
@media screen and (min-width: 960px){
  .list--goods li:hover {
      transform: scale(1.05);
  }
}

@media screen and (max-width: 960px){
  .list--goods {
      display: flex;
      display: webkit-flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .list--goods li {
      width: 48.5%;
      margin: 0 0 2.75vw;
      border-radius: 10px;
      padding: 5px 15px 14px;
  }
  .block--overlay .overlay__modal {
    width: 90%;
  }
  .block--overlay .btn--close {
    top: 6%;
    right: 8%;
  }
  .block--overlay .btn--close::before, .block--overlay .btn--close::after {
    width: 40px;
    height: 2px;
    background: #222;
  }
  .block--overlay .tabArea {
    padding: 0 0 15px;
	}
  .block--overlay .switchList {
    margin: 0 0 40px;
	}
  .block--overlay .switchList .switch {
    width: 18%;
    padding: 5px;
    margin: 0;
    line-height: 0;
	}
  
  
  
}

@media screen and (max-width: 700px){
  .section--goods .tit--category {
      margin: 0 0 5vw;
      font-size: 4vw;
  }
  .page--goods h3{ font-size: 4vw; }
  .list--category {
    padding: 0 0 6vw;
  }
  .list--goods li {
    padding: 0 3% 3%;
  }
  .list--goods .tit {
    font-size: 3vw;
    line-height: 1.3;
  }
  .list--goods .tit span {
    font-size: 3vw;
    margin-top: 3px;
  }
  .page.page--goods section.overlay__modal {
    padding: 5vw;
    background: #fff;
    border-radius: 20px;
  }
  .block--overlay .btn--close::before, .block--overlay .btn--close::after {
    width: 30px;
  }
  .block--overlay .btn--close {
    top: 4.5%;
  }
  .block--descriptoin .tit {
    font-size: 4.5vw;
    margin: 0;
    line-height: 1.4;
  }
  .block--descriptoin .tit + p {
    margin: 4.5vw 0 5vw;
  }
  .overlay__modal .sizeTable th, .sizeTable td {
    padding: 5px;
  }
  #item--24-contents .sizeTable td {
    text-align: left;
  }
  .overlay__modal .text, .overlay__modal .comment{
    font-size: 3.5vw;
  }
}