@charset "UTF-8";
main{
  padding-top: 0;
}
h2,h3,h4{
  text-align: center;
}
.onlineshop a.arbtn{
  font-size: 14px;
}
.caution{
  font-size: 13px;
  line-height: 130%;
  margin-top: 5px;
}
.splide{
  margin: 0 auto;
}
.onlineshop a.cataloglink{
  font-size: 14px;
  line-height: 150%;
}
/*===============================================
TOP
===============================================*/
.shopnav{
  background-color: #fff5ec;
  padding: 120px 0 0;
  position: relative;
  text-align: center;
}
.shopnav .inner{
  position: relative;
  z-index: 2;
  padding: 0 0 5vw 0;
}
.bg-img{
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
}
.shopnav .line,
.method .line.bg-cl{
  padding: 0em 0.5em 0.2em 0.5em;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fff5ec 50%, #fff5ec 50%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 97%, #999 97%, #999 100%);
  max-width: 750px;
  margin: auto;
}
.shopnav .line{
  margin: 20px auto;
}
.shopnav .read{
  line-height: 150%;
  padding: 0 30px;
  color: #685f58;
}
.read,.line{
  text-align: center;
}
.shopwp .flex {
  justify-content: center;
  margin: auto;
  align-items: baseline;
}

.shopbox {
  display: flex;
  margin: auto auto;
  flex-direction: column;
}

.shopbox img {}

.shopwp .type li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopwp .type {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 10px auto;
  flex-grow: 1;
}

.shopwp .type01 div {
  display: flex;
  align-items: center;
  justify-content: left;
  flex-wrap: wrap;
  text-align: left;
}

.shopwp .type01 li {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  text-align: left;
}
.splide01{
  max-width: 800px;
  margin: 0 auto 20px auto;
}
.shopwp .type li::before {
  content: "";
  width: 24px;
  height: 20px;
  background-image: url(../../img/tp_shop_check.svg);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}
.digital .type li::before,
.goods .type li::before {
  content: "";
  width: 24px;
  height: 20px;
  background-image: url(../../img/tp_shop_check02.svg);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}
@media (any-hover: hover) {
.onlineshop .arbtn:hover{
  background-color: #685f58;
  color: #fff;
  border: 1px solid #685f58;
  border-radius: 40px;
}
.onlineshop .arbtn:hover::after {
  content: '';
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}
}
@media screen and (max-width: 590px) {
  .onlineshop .arbtn:active {
      background-color: #685f58;
      color: #fff;
      border: 1px solid #685f58;
      border-radius: 40px;
    }
  
    .onlineshop .arbtn:active::after {
      content: '';
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
    }
}
.shopwp a.arbtn,
.method a.arbtn{
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 18px 0;
  margin-top: auto;
  border: 1px solid #aaa199;
  border-radius: 4px;
}
.method a.arbtn{
  margin: 20px auto;
}
.shopwp .parent {
  display: flex;
  margin: 40px auto;
}
.shopwp .child ,
.method-other .child{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  max-width: 230px;
}
.ic-img {
  max-width: 210px;
  margin: auto;
}
.grandchild {
  flex-grow: 1;
}
.grandchild .caution{
  margin: 10px 0 0 0;
}
/* PC時のスタイル */
.splide.is-initialized:not(.is-active) .splide__list {
  display: flex ;
  margin: 20px auto 40px ;
}

.splide.is-initialized:not(.is-active) .splide__list .splide__slide {
  margin: 0 auto ;
}
.shopwp .other-btn a{
  background-color: #fff5ec;
  font-size: 13px;
  text-decoration: underline;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto ;
  padding: 0;
  width: inherit;
  max-width: 400px;
  border: none;
}
.method .btmline{
  border-bottom: 1px #aaa199 solid;
  margin: 0 auto 20px;
  position: relative;
}
.method .btmline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom:-4px;
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px #aaa199 solid;
 padding: 4px 0 0 0;
}
/*===============================================
method
===============================================*/
.method{
  padding: 60px 0;
}
.method .flex{
  width: 100%;
  align-items:flex-start;
}
.method .child,
.splide.is-initialized:not(.is-active) .splide__list .splide__slide{
  max-width:32%;
  margin: 0 ;
  padding: 0 2%;
}
.imgbox{
  max-width: 420px;
  width: 100%;
}
.mt-con{
  width: 100%;
  max-width: 385px;
  margin: 0 0 0 5%;
}
.mt-con .type li{
  font-size: 1.2em;
}
.mt-con .arbtn{
  border: 1px solid #aaa199;
  padding: 20px 0;
  margin: 20px auto;
}
.method-on{
  background-color: #fff5ec;
}
.method-on .imgbox{
  order: 2;
}
.method-on .mt-con {
  order: 1;
  margin: 0 5% 0 0;
}
.method-other{
  background-color: #fff5ec;
}
.method-other h3{
  margin-bottom: 40px;
}
.method-other .splide{
  max-width: 950px;
  margin: auto;
}
.method-other .title h4{
  background-color: #fff;
  line-height: 120%;
  border-radius: 40px;
  padding: 15px 0;
  color: #685f58;
  font-size: 20px;
}
.method-other .title h3{
  margin: 20px auto 10px;
  font-size: 1.8em;
}
.method-other li{
  border-right: 1px #aaa199 dotted;
}
.method-other li:last-of-type{
  border-right: none;
}
.method-other .type{
  font-size: 16px;
  line-height: 155%;
  margin: 0px auto 20px;
}
.method-other a{
  font-size: 16px;
}
@media screen and (min-width: 801px) {
#other.method .child {
  max-width: 50%;
  padding: 0 4%;
}
}