/*
Theme Name: a
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  color: #000;
  font: inherit;
  vertical-align: baseline;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
}
input {
  font-family: "Noto Sans JP", sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  font: inherit;
  --scrollbar-width: 15px;
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}
a {
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}
a:hover img {
  opacity: 0.8;
}
img, iframe {
  vertical-align: bottom;
  max-width: 100%;
  background: transparent;
  transition: 0.3s;
}
input[type=submit], input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
        appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type=submit]::-webkit-search-decoration, input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]::focus, input[type=button]::focus {
  outline-offset: -2px;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}
.smt{
  scroll-margin-top: 120px;
}
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
.grecaptcha-badge {
  display: none;
}
.clear:after {
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.df {
  display: flex;
}
.sb {
  justify-content: space-between;
}
.fw {
  flex-wrap: wrap;
}
.w90 {
  margin: 0 auto;
  width: 90%;
}
.fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 500ms;
}
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.sp{
  display: none;
}
.jackBlock1{
  padding: 10.42vw 0 21.65vw;
  position: relative;
  background: url('/wp-content/themes/a/img/jack/bg_block1.png') no-repeat center;
  background-size: cover;
}
.jackBlock1 .effect{
  position: absolute;
  top: 15vw;
  left: 50%;
  transform: translateX(-50%);
  width: 87.5vw;
}
.jackBlock1 .textImg{
  display: block;
  width: 31.56vw;
  margin: 0 auto 3.33vw;
}
.jackBlock1 .textImg.sp{
  display: none;
}
.jackBlock1 .ytBox{
  width: 31.56vw;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
.pageJack .modalWrap{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.pageJack .modalWrap.active{
  opacity: 1;
  visibility: visible;
}
.pageJack .modal{
  width: 60vw;
  position: absolute;
  aspect-ratio: 16 / 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.pageJack .modal iframe{
  width: 100%;
  height: 100%;
}
.pageJack .modal .closeIcon{
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin: 20px auto 0;
  cursor: pointer;
}
.jackBlock2{
  position: relative;
  margin-top: -10vw;
  z-index: 1;
}
.jackBlock3{
  padding: 25.16vw 0 25.47vw;
  margin-top: -10vw;
  background: url('/wp-content/themes/a/img/jack/bg_seisan.png') no-repeat center;
  background-size: cover;
}
.titImg{
  display: block;
}
.jackBlock3 .titImg{
  width: 41.61vw;
  margin: 0 auto 4vw;
}
.jackBlock3 .seisansyaList{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.92vw 2.14vw;
  width: 52.2vw;
  max-width: 1002px;
  margin: 0 auto 5.1vw;
}
.seisansyaList li img{
  display: block;
}
.seisansyaList li a{
  display: block;
  width: 49%;
  max-width: 236px;
  margin-top: 0.83vw;
}
.pageJack .interviewBnr{
  width: 36.77vw;
  max-width: 706px;
  display: block;
  margin: 0 auto;
}
.jackBlock4{
  padding-top: 3.23vw;
  background: url('/wp-content/themes/a/img/jack/bg_block4.png') no-repeat top;
  background-size: cover;
  position: relative;
}
.jackBlock4 .effectImg{
  position: absolute;
  left: 0;
  width: 100%;
}
.jackBlock4 .effectImg.top{
  bottom: calc(100% - 1px);
}
.jackBlock4 .effectImg.bottom{
  top: calc(100% - 1px);
}
.jackBlock4Inner{
  width: 48.59vw;
  max-width: 933px;
  margin: 0 auto;
  padding: 0 1.82vw 1.82vw;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #F1CA22;
  position: relative;
  z-index: 1;
}
.jackBlock4Inner .effect{
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0;
  z-index: -1;
}
.jackBlock4Inner .imgBox{
  margin-bottom: calc(-3.23vw + 1.51vw);
  position: relative;
  top: -3.23vw;
}
.jackBlock4Inner .qaBoxWrap{
  background-color: #fff;
}
.jackBlock4Inner .qaBox{
  margin-bottom: 3.75vw;
}
.jackBlock4Inner .qaBox .tit{
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background-color: #3D170D;
  padding: 1.25vw 0;
  text-align: center;
  margin-bottom: 44px;
}
.jackBlock4Inner .box1{
  margin-bottom: 24px;
  padding: 0 5%;
}
.jackBlock4Inner .box1:last-child{
  margin-bottom: 0;
}
.jackBlock4Inner .qTxt,
.jackBlock4Inner .aTxt{
  align-items: center;
}
.jackBlock4Inner .qTxt{
  margin-bottom: 0.2vw;
}
.jackBlock4Inner .qTxt .iconTxt,
.jackBlock4Inner .aTxt .iconTxt{
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}
.jackBlock4Inner .qTxt .iconTxt{
  background-color: #C30101;
}
.jackBlock4Inner .aTxt .iconTxt{
  background-color: #000000;
}
.jackBlock4Inner .text{
  font-size: 20px;
  font-weight: 900;
  width: calc(100% - 39px);
  padding-left: 1%;
  box-sizing: border-box;
}
.jackBlock4Inner .qTxt .text{
  color: #C30101;
}
.jackBlock4Inner .aTxt .text{
  font-weight: 600;
}
.jackBlock4Inner .qaBoxWrap > a{
  width: 19.5vw;
  display: block;
  margin: 0 auto 2.6vw;
}
.kumamon1{
  display: block;
  width: 16vw;
  margin: 0 auto;
}
.kumamon1.sp{
  display: none;
}
.jackBlock5{
  margin-bottom: 11vw;
  padding-top: 19.53vw;
}
.jackBlock5 .titImg{
  width: 31.2vw;
  margin: 0 auto 5.625vw;
}
.jackBlock5 .shopSelect{
  width: 52.34vw;
  max-width: 1005px;
  margin: 0 auto 4.22vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.73vw;
}
.jackBlock5 .shopSelect li{
  aspect-ratio: 325 / 155;
  cursor: pointer;
}
.jackBlock5 .shopSelect li.jijiya{
  background: url('/wp-content/themes/a/img/jack/jijiyaBtn_w.svg') no-repeat center;
  background-size: contain;
}
.jackBlock5 .shopSelect li.jijiya.active{
  background: url('/wp-content/themes/a/img/jack/jijiyaBnt_k.svg') no-repeat center;
  background-size: contain;
}
.jackBlock5 .shopSelect li.ichiba{
  background: url('/wp-content/themes/a/img/jack/ichibaBtn_w.svg') no-repeat center;
  background-size: contain;
}
.jackBlock5 .shopSelect li.ichiba.active{
  background: url('/wp-content/themes/a/img/jack/ichibaBtn_k.svg') no-repeat center;
  background-size: contain;
}
.jackBlock5 .shopSelect li.banban{
  background: url('/wp-content/themes/a/img/jack/banbanBnt_w.svg') no-repeat center;
  background-size: contain;
}
.jackBlock5 .shopSelect li.banban.active{
  background: url('/wp-content/themes/a/img/jack/banbanBtn_k.svg') no-repeat center;
  background-size: contain;
}
.jackBlock5 .shopList{
  width: 62.5vw;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  display: none;
  opacity: 0;
  transition: 1s;
}
.jackBlock5 .shopList.active{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  opacity: 1;
}
@starting-style{
  .jackBlock5 .shopList.active{
    opacity: 0;
  }
}
.jackBlock5 .shopList li{
  padding: 5.3vw 0 5.89vw;
  border-bottom: 3px solid #E5E5E5;
  border-right: 3px solid #E5E5E5;
  position: relative;
}
.jackBlock5 .shopList li:nth-child(3n+1){
  border-left: 3px solid #E5E5E5;
}
.jackBlock5 .shopList li:nth-child(-n+3){
  border-top: 3px solid #E5E5E5;
}
.jackBlock5 .shopList li .shopName{
  font-size: 25px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 17.5px;
}
.jackBlock5 .shopList li p{
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 33px;
  text-align: center;
}
.jackBlock5 .shopList li a{
  width: 236px;
  display: block;
  margin: 0 auto;
}
.jackBlock5 .shopList li .note{
  font-weight: 900;
  color: #D31216;
  position: absolute;
  bottom: 1.82vw;
  left: 0;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}
.footer .kumamon{
  width: 29.64vw;
  display: block;
  margin: 0 auto 4px;
}
.footer .outline{
  background-color: #000;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  padding: 6.25vw 5%;
}
.footer .outline a{
  color: #fff;
  font-weight: 500;
}
.footer .shopBnr{
  padding: 6.98vw 0 8.85vw;
}
.footer ul{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.8vw;
  width: 52.34vw;
  max-width: 1005px;
  margin: 0 auto;
}
.footer ul p{
  font-size: 0.84vw;
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center;
}
.copy{
  font-size: 14px;
  font-weight: 500;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 56px 0;
}
@media (width < 1100px){
  .jackBlock3 .seisansyaList{
    width: 90vw;
  }
  .pageJack .interviewBnr{
    width: 90vw;
  }
  .jackBlock4Inner{
    width: 90vw;
  }
  .jackBlock4Inner .qTxt{
    margin-bottom: 2.7px;
  }
  .jackBlock4Inner .qaBoxWrap > a{
    width: 90%;
  }
  .jackBlock4Inner .qaBoxWrap > a img{
    width: 100%;
  }
  .kumamon1{
    width: 90%;
  }
  .jackBlock5 .shopList.active{
    width: 90vw;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .jackBlock5 .shopList li{
    border: 3px solid #E5E5E5;
  }
  .footer ul{
    width: 90vw;
  }
  .footer ul p{
    font-size: 14px
  }
}
@media (width < 820px){
  .jackMv.pc{
    display: none;
  }
  .jackMv.sp{
    display: block;
  }
  .jackBlock1{
    padding: 89px 0 105px;
  }
  .jackBlock1 .effect{
    display: none;
  }
  .jackBlock1 .textImg.pc{
    display: none;
  }
  .jackBlock1 .textImg.sp{
    display: block;
    width: 100%;
  }
  .jackBlock5 .shopList{
    margin-bottom: 24px;
  }
  .jackBlock5 .shopList.active{
    grid-template-columns: 1fr;
    max-height: 1266px;
    transition: 1s;
    overflow: hidden;
  }
  .jackBlock5 .shopList.active.on{
    max-height: 8000px;
  }
  .jackBlock1 .ytBox{
    width: 90%;
  }
  .jackBlock1 .ytBox img.pc{
    display: none;
  }
  .jackBlock1 .ytBox img.sp{
    display: block;
  }
  .jackBlock2.pc{
    display: none;
  }
  .jackBlock2.sp{
    display: block;
  }
  .jackBlock3{
    padding: 130px 0 107px;
    margin-top: -15vw;
  }
  .jackBlock3 .titImg{
    width: 80vw;
    margin-bottom: 39px;
  }
  .jackBlock3 .seisansyaList{
    grid-template-columns: 1fr;
    gap: 37px;
  }
  .seisansyaList li a{
    width: 236px;
    margin: 17px auto 0;
  }
  .jackBlock4Inner .qaBox .tit{
    padding: 17px 0;
    margin-bottom: 15px;
  }
  .jackBlock4Inner .qTxt .iconTxt, 
  .jackBlock4Inner .aTxt .iconTxt{
    width: 29px;
    height: 29px;
    font-size: 11px;
  }
  .jackBlock4Inner .text{
    width: calc(100% - 29px);
    padding-left: 3%;
  }
  .jackBlock4Inner{
    width: 96vw;
    padding: 0 5% 17px;
  }
  .jackBlock4Inner .imgBox{
    margin-bottom: 10px;
  }
  .jackBlock4Inner .text{
    font-size: 16px;
  }
  .jackBlock4Inner .qaBox{
    margin-bottom: 34px;
  }
  .jackBlock4Inner .qaBoxWrap > a{
    margin-bottom: 50px;
  }
  .jackBlock5{
    padding-top: 272px;
    margin-bottom: 189px;
  }
  .jackBlock5 .titImg{
    width: 80vw;
    margin-bottom: 64px;
  }
  .jackBlock5 .shopSelect{
    width: 90%;
  }
  .footer .outline{
    text-align: left;
    padding: 82px 5% 98px;
  }
  .footer .kumamon{
    width: 64%;
  }
  .footer ul{
    grid-template-columns: 1fr;
    gap: 19px;
    width: 76vw;
  }
  .footer ul li img{
    width: 100%;
  }
  .footer ul p{
    font-size: 16px;
    margin-bottom: 9px;
  }
  .footer .shopBnr{
    padding: 64px 0;
  }
  .jackBlock4 .effectImg.bottom.pc{
    display: none;
  }
  .jackBlock4 .effectImg.bottom.sp{
    display: block;
  }
  .pageJack .modal{
    width: 90vw;
  }
  .viewmore.sp{
    display: block;
    width: 310px;
    margin: 0 auto;
  }
  .jackBlock5 .shopList li{
    padding: 42px 0;
  }
  .copy{
    font-size: 12px;
    padding: 60px 0;
  }
}