@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&display=swap");

/* ========================================
RESET
======================================== */

.miserudakepass,
.miserudakepass *{
  box-sizing:border-box;
}

.miserudakepass{
  background:#efefef;
  color:#142735;
  font-family:"Zen Kaku Gothic Antique", "Arial", "Helvetica Neue", sans-serif;
}

.miserudakepass picture{
  display:block;
}

.miserudakepass img,
.miserudakepass .post-content img,
.mpass-howto img,
.mpass-main img{
  max-width:100%;
  height:auto;
  display:block;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.miserudakepass a{
  transition:opacity .25s ease;
}

.miserudakepass a:hover{
  opacity:.7;
}

/* 目次を非表示 */
#toc_container,
.toc,
.table-of-contents,
#ez-toc-container,
.ez-toc-container,
.ez-toc-title-container,
.ez-toc-list,
div[id*="toc"],
div[class*="toc"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* ========================================
FONT - ENGLISH
======================================== */

.mpass-en,
.mpass-card-category,
.mpass-card-en,
.mpass-card-map a,
.mpass-shoplist h2,
.mpass-shoplist h3,
.mpass-shoplist-sns a{
  font-family:"League Spartan", "Arial Narrow", sans-serif;
  font-weight:700;
  letter-spacing:.04em;
}

/* ========================================
TOP
======================================== */

.mpass-main{
  background:#efefef;
}

.mpass-main-image{
  position:relative;
  line-height:0;
}

.mpass-main-img{
  width:100%;
}

.mpass-floating-btn{
  position:absolute;
  left:50%;
  bottom:6.5%;
  transform:translateX(-50%);
  width:82%;
  max-width:860px;
  z-index:30;
}

.mpass-floating-btn img{
  width:100%;
}

/* ========================================
HOW TO
======================================== */

.mpass-howto{
  background:#62857D;
  padding:62px 20px 64px;
}

.mpass-howto-inner{
  max-width:1180px;
  margin:0 auto;
}

.mpass-howto-img{
  width:100%;
}

/* ========================================
INFO
======================================== */

.mpass-info{
  background:#efefef;
  padding:92px 20px 82px;
  text-align:center;
}

.mpass-info-inner{
  max-width:980px;
  margin:0 auto;
}

.mpass-info h2{
  margin:0 0 62px;
  color:#142735;
  font-size:25px;
  font-weight:800;
  line-height:1.9;
  letter-spacing:.03em;
}

.mpass-notice{
  border:2px solid #5e5555;
  border-radius:120px;
  padding:46px 52px 40px;
  background:#f7f7f7;
}

.mpass-notice h3{
  margin:0 0 14px;
  color:#142735;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}

.mpass-notice p{
  margin:0;
  color:#142735;
  font-size:13px;
  line-height:1.8;
  font-weight:300;
}

.mpass-notice hr{
  width:84%;
  margin:24px auto 22px;
  border:0;
  border-top:1px dashed #b8b2b2;
}

/* ========================================
LINEUP
======================================== */

.mpass-lineup{
  background:#efefef;
  padding:84px 20px 84px;
}

.mpass-lineup-inner{
  max-width:1240px;
  margin:0 auto;
}

.mpass-lineup-title{
  text-align:center;
  margin-bottom:16px;
}

.mpass-lineup-title img{
  width:420px;
  max-width:72%;
  margin:0 auto;
}

.mpass-lineup-feat{
  margin:0 0 54px;
  text-align:center;
  line-height:0;
}

.mpass-lineup-feat img{
  width:240px;
  max-width:62%;
  margin:0 auto;
}

.mpass-lineup-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:56px;
  row-gap:72px;
}

.mpass-card{
  position:relative;
  text-align:center;
  color:#142735;
}

.mpass-card:nth-child(n+4){
  padding-top:58px;
  border-top:1px dashed #9c9696;
}

.mpass-card-category{
  margin:0 0 10px;
  font-size:12px;
  font-weight:400;
  line-height:1.2;
  font-style:italic;
  transform:skewX(5deg);
  display:inline-block;
}

.mpass-card h3{
  margin:0 0 4px;
  font-size:18px;
  font-weight:900;
  line-height:1.45;
}

.mpass-card p{
  margin:0;
  font-size:13px;
  font-weight:400;
  line-height:1.4;
}

.mpass-card-video{
  position:relative;
  overflow:hidden;
  width:86%;
  margin:22px auto 24px;
  padding-top:136%;
  background:#3b2b2b;
  border:12px solid #4a3939;
}

.mpass-card-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.mpass-card-text{
  margin:0 0 8px;
  color:#142735;
  font-size:17px;
  font-weight:900;
  line-height:1.55;
  letter-spacing:.02em;
}

.mpass-card-en{
  margin:0 0 17px;
  color:#142735;
  font-size:12px;
  font-weight:100;
  line-height:1.5;
	font-style:italic;
  transform:skewX(5deg);
  display:inline-block;
}

.mpass-card-map a{
  color:#142735;
  font-size:12px;
  font-weight:400;
  text-decoration:none;
  letter-spacing:.06em;
}

/* ========================================
PHOTO DECORATION
======================================== */

.mpass-photo-deco{
  position:relative;
  height:210px;
  margin-top:-10px;
  background:#efefef;
  overflow:visible;
}

.mpass-photo-deco-inner{
  position:relative;
  max-width:780px;
  height:100%;
  margin:0 auto;
}

.mpass-polaroid{
  position:absolute;
  width:270px;
  height:185px;
  background:#111;
  border:12px solid #fff;
  border-bottom-width:38px;
  box-shadow:0 4px 8px rgba(0,0,0,.18);
}

.mpass-polaroid-left{
  left:380px;
  top:56px;
  transform:rotate(-5deg);
  z-index:2;
}

.mpass-polaroid-right{
  right:-140px;
  top:82px;
  transform:rotate(8deg);
  z-index:1;
}

/* ========================================
SHOPLIST
======================================== */

.mpass-shoplist{
  background:#efefef;
  color:#2a0707;
  padding:72px 50px 100px;
}

.mpass-shoplist-inner{
  max-width:1320px;
  margin:0 auto;
}

.mpass-shoplist-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:44px;
}

.mpass-shoplist h2{
  margin:0;
  color:#2a0707;
  font-size:36px;
  font-weight:600;
  line-height:1;
}

.mpass-shoplist-head p{
  margin:0 46px 4px 0;
  font-size:11px;
  font-weight:800;
  color:#2a0707;
}

.mpass-shoplist-grid{
  display:grid;
  grid-template-columns:1.05fr 1.05fr 1.05fr 1.05fr 1fr;
  gap:70px;
  padding:0 30px;
}

.mpass-shoplist h3{
  margin:0 0 14px;
  color:#2a0707;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
}

.mpass-shoplist a{
  color:#2a0707;
  text-decoration:none;
  font-size:11px;
  font-weight:500;
  line-height:2.1;
}

.mpass-shoplist-look{
  margin-top:42px;
}
/* LOOKも同じグリッド内に揃える */

.mpass-shoplist-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:70px;
  padding:0 30px;
  align-items:start;
}

.mpass-shoplist-look{
  margin-top:0;
}

.mpass-shoplist-look h3{
  margin:0 0 14px;
  color:#2a0707;
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:.08em;
}

/* ========================================
SP
======================================== */

@media screen and (max-width:768px){

  .mpass-floating-btn{
    width:82%;
    max-width:none;
    bottom:5.5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:94px;
    padding:22px 64px 22px 38px;
    background:#2a0707;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    line-height:1.45;
  }

  .mpass-floating-btn img{
    display:none;
  }

  .mpass-floating-btn::before{
    content:"Y.S.C.C.の選手がご案内！\A ラインナップを見る";
    white-space:pre-line;
    color:#fff;
    font-family:"Zen Kaku Gothic Antique", sans-serif;
    font-size:18px;
    font-weight:900;
    letter-spacing:.02em;
  }

  .mpass-floating-btn::after{
    content:"↗";
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    width:26px;
    height:26px;
    border:2px solid #fff;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
    font-weight:900;
    line-height:1;
  }

  .mpass-howto{
    padding:38px 15px 40px;
  }

  .mpass-info{
    padding:54px 15px 58px;
  }

  .mpass-info h2{
    margin-bottom:34px;
    font-size:17px;
    line-height:1.75;
  }

  .mpass-notice{
    border-radius:42px;
    padding:34px 22px 30px;
  }

  .mpass-notice h3{
    font-size:16px;
  }

  .mpass-notice p{
    font-size:11px;
  }

  .mpass-lineup{
    padding:58px 18px 64px;
  }

  .mpass-lineup-title{
    margin-bottom:12px;
  }

  .mpass-lineup-title img{
    width:310px;
    max-width:88%;
  }

  .mpass-lineup-feat{
    margin-bottom:40px;
  }

  .mpass-lineup-feat img{
    width:190px;
    max-width:68%;
  }

  .mpass-lineup-grid{
    grid-template-columns:1fr;
    gap:54px;
  }

  .mpass-card:nth-child(n+4){
    padding-top:0;
    border-top:0;
  }

  .mpass-card-video{
    width:84%;
    max-width:330px;
    padding-top:132%;
  }

  .mpass-card-text{
    font-size:16px;
  }

  .mpass-photo-deco{
    height:150px;
  }

  .mpass-polaroid{
    width:170px;
    height:120px;
    border-width:8px;
    border-bottom-width:28px;
  }

  .mpass-polaroid-left{
    left:calc(50% - 150px);
    top:38px;
  }

  .mpass-polaroid-right{
    right:calc(50% - 150px);
    top:58px;
  }

  .mpass-shoplist{
    padding:54px 20px 70px;
  }

  .mpass-shoplist-head{
    display:block;
    margin-bottom:34px;
  }

  .mpass-shoplist h2{
    font-size:34px;
  }

  .mpass-shoplist-head p{
    margin:12px 0 0;
  }

  .mpass-shoplist-grid{
    grid-template-columns:1fr 1fr;
    gap:34px 28px;
  }

  .mpass-shoplist-look{
    margin-top:34px;
  }

.mpass-card-video {
  width: 100%;
  max-width: 520px;
  height: 720px;
  margin: 0 auto;
  overflow: hidden;
}

.mpass-card-video iframe {
  width: 100%;
  height: 850px;
  border: none;
  display: block;
}


}