@charset "utf-8";

/*==============================
common
==============================*/
* { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
main * { color:#707070; }
.inner { max-width:124rem; padding:0 2rem; width:100%; margin:0 auto; }
.main-ttl { font-size:2.8rem; font-weight:bold; border-left:solid 5px #707070; padding-left:2rem; line-height:1.5; }
.obi { font-size:2.8rem; width:100vw; margin:0 calc(50% - 50vw); text-align:center; background:#707070; color:#fff; padding:1rem 0; }
.icon { text-align:center; margin-bottom:5rem; }
.icon img { max-width:10rem; }
.cont { margin-top:3rem; display:flex; justify-content:space-between; }
.cont > div { width:48%; }
.cont div:last-child p { margin:3rem 0; }
.cont .main-ttl { font-size:2.4rem; }
.cont .btn { max-width:35rem; width:100%; margin:0 auto; }
.cont .btn a { display:block; line-height:2; text-align:center; background:#9e9e9e; color:#fff; font-weight:bold; font-size:2rem; border-radius:5px; }
.sp-only { display:none; }
a { transition:all .4s ease-out; }
a:hover { opacity:.6; }

@media screen and (max-width:600px){
  .sp-only { display:block; }
}


/*--------------------------
youtube
--------------------------*/
#youtube { margin-top:5rem; }
#youtube h3 { font-size:4rem; text-align:center; }
#youtube h4 { font-size:2.6rem; max-width:95rem; padding:0 2rem; margin:2rem auto 0; }
#youtube .read { max-width:95rem; padding:0 2rem; margin:0 auto; }
#youtube .move {  max-width:91rem; margin:2rem auto 0; position:relative; aspect-ratio: 16 / 9; }
#youtube .move iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

@media screen and (max-width:600px){
  #youtube h3 { font-size:3rem; }
  #youtube h4 { font-size:1.8rem; }
}

/*--------------------------
grandprix
--------------------------*/
#grandprix { margin-top:5rem; padding:5rem 0; background:#FFCC8A; }
#grandprix ul { max-width:95rem; width:100%; margin:0 auto; }
#grandprix ul li { text-align:center; }
#grandprix ul li.insta { margin-top:3rem; }
#grandprix ul li.insta iframe { margin:0 auto!important; max-width:60rem; width:100%; }
#grandprix ul li.tx { text-align:left; max-width:60rem; width:100%; margin:2rem auto 0; color:#000; }
#grandprix ul li.tx p.name { border-left:solid 5px #707070; color:#707070; font-weight: bold; padding-left:1em; font-size:2.4rem; }
#grandprix ul li.tx p.staff { font-weight: bold; font-size:2rem; color:#707070; }

/*--------------------------
bumon
--------------------------*/
#bumon { margin-top:10rem; position:relative; }
#bumon div:after,#bumon ul:after { display:none; }
#bumon h3 { text-align:center; }
#bumon .wrap { display:flex; margin-top:5rem; }
#bumon .wrap > ul li p.title , #bumon .wrap .episord .ttl , #bumon p.title2 , #bumon .bumon-block ul li:first-child
{ font-size:3rem; text-align:center; color:#000; font-weight: bold; margin-bottom:2rem; }
#bumon p.title2 { margin-top:5rem; }
#bumon .wrap > ul:nth-child(1) { width:calc((100% - 10rem) / 2); margin-right:7rem; }
#bumon .wrap .episord { width:calc(((100% - 10rem) / 2) * 2); margin-right:0; }
#bumon .wrap .episord .epi-wrap { display:flex; flex-wrap:wrap; }
#bumon .wrap .episord div.item { width:calc(100% / 2 - 1.5rem); }
#bumon .wrap .episord div.item:nth-child(1) { margin-right:3rem; }
#bumon ul {}
#bumon ul li .insta , #bumon .wrap .episord div.item .insta , #bumon .bumon-block ul li .insta { margin-bottom:2rem; }
#bumon ul li .insta iframe , #bumon .wrap .episord div.item iframe ,#bumon .bumon-block ul li .insta iframe { width:99.7%; margin:auto!important; min-width:initial!important; }
#bumon ul li .name , #bumon .wrap .episord div.item .name , #bumon .bumon-block ul li .name{ border-left:solid 5px #707070; color:#707070; font-weight: bold; padding-left:1em; font-size:2.4rem; }
#bumon ul li .staff ,#bumon .wrap .episord div.item .staff , #bumon .bumon-block ul li .staff{ font-weight: bold; font-size:2rem; color:#707070; }
#bumon ul li .tx {}
#bumon ul.aging { display:flex; flex-wrap:wrap; justify-content:center; }
#bumon ul.aging li { width:calc(100% / 3 - 10rem / 3); margin-right:5rem; }
#bumon ul.aging li:nth-of-type(3n) { margin-right:0; }
#bumon ul.aging li:nth-of-type(n+4) { margin-top:5rem; }
#bumon .bumon-block { display:flex; justify-content:center; margin-top:5rem; }
#bumon .bumon-block ul { width:calc(100% / 3 - 10rem / 3); margin-right:5rem; }
#bumon .bumon-block ul:last-child { margin-right:0; }
#bumon .bumon-block ul li {}

@media screen and (max-width:1200px){
  #bumon .wrap { display:block; }
  #bumon .wrap > ul:nth-child(1) { width:100%; }
  #bumon .wrap > ul:nth-child(1) li {  }
  #bumon .wrap > ul:nth-child(1) li > p { width:100%; }
  #bumon .wrap > ul:nth-child(1) li .insta { width:calc(100% / 2 - 4rem / 2); margin:0 auto; }
  #bumon .wrap > ul:nth-child(1) li .text-area { width:calc(100% / 2 - 4rem / 2); margin:2rem auto 0; }
  #bumon .wrap .episord { width:100%; margin-top:5rem; }
  #bumon .wrap .episord .epi-wrap { width:100%; justify-content:center; }
  #bumon .wrap .episord div.item { width:calc(50% - 2rem); }
  #bumon .wrap .episord div.item:first-child { margin-right:2rem; }
  #bumon ul.aging li { width:calc(100% / 2 - 4rem / 2); margin-right:2rem; }
  #bumon ul.aging li:nth-of-type(n+3) { margin-top:4rem!important; }
  #bumon ul.aging li:nth-of-type(2n) { margin-right:0; }
  #bumon ul.aging li:nth-of-type(3n) { margin-right:2rem; }
  #bumon ul li .name , #bumon .wrap .episord div.item .name , #bumon .bumon-block ul li .name { font-size:2rem; }
  #bumon ul li .staff ,#bumon .wrap .episord div.item .staff , #bumon .bumon-block ul li .staff { font-size:1.8rem; }
  #bumon .bumon-block ul { width:calc(100% / 2 - 4rem / 2); margin-right:2rem; }
}

@media screen and (max-width:600px){
  #bumon { margin-top:5rem; }
  #bumon .wrap > ul:nth-child(1) li .insta,#bumon .wrap > ul:nth-child(1) li .text-area { width:100%; }
  #bumon .wrap > ul:nth-child(1) li .insta iframe { width:99.37%; }
  #bumon .wrap .episord { width:90%; margin:5rem auto 0; }
  #bumon .wrap .episord div.item { width:100%; padding:0 1rem; overflow:hidden; }
  #bumon .wrap .episord div.item:first-child { margin-right:0; }
  #bumon ul.aging { width:90%; margin:0 auto; }
  #bumon ul.aging li { width:100%; margin:0 auto!important; margin-top:0!important; padding:0 1rem; }
  #bumon ul.aging li:nth-of-type(n+3) { margin-top:0!important; }
  #bumon .bumon-block { display:block; }
  #bumon .bumon-block ul { width:100%; margin-right:0; }
  #bumon .bumon-block ul:last-child { margin-top:5rem; }
}

/*--------------------------
comment
--------------------------*/
#comment { margin-top:10rem; background:#FFCC8A; padding:10rem 0; position:relative; }
#comment .icon { position:absolute; top:-4.5rem; left:50%; transform:translateX(-50%); }
#comment .wrap { border:solid 1px #707070; padding:4rem; }
#comment .wrap ul {}
#comment .wrap ul li {}
#comment .wrap ul li:last-child { margin-top:5rem; }
#comment .wrap ul li .ttl { font-size:2.6rem; font-weight: bold; }
#comment .wrap ul li .flx { display:flex; justify-content:space-between; }
#comment .wrap ul li .flx img { width:20%; }
#comment .wrap ul li .flx p.tx { width:75%; }
#comment .thanks { margin-top:5rem; font-size:3.2rem; color:#000; font-weight: bold; text-align:center; }
#comment .btn { max-width:35rem; background:#AAAAAA; border-radius:10px; margin:3rem auto 0; }
#comment .btn a { color:#fff; font-size:2rem; font-weight: bold; display:block; padding:1rem 0; text-align:center; }

@media screen and (max-width:600px){
  #comment .wrap { padding:2rem; }
  #comment .wrap ul li .ttl { font-size:2.2rem; text-align:center; } 
  #comment .wrap ul li .flx { display:block; }
  #comment .wrap ul li .flx img,#comment .wrap ul li .flx p.tx { width:100%; }
  #comment .thanks { font-size:2.2rem; }
}
@media screen and (max-width:375px){
  #comment .wrap ul li .ttl { font-size:2rem; }
  #comment .thanks { font-size:2rem; }
}

/*--------------------------
day
--------------------------*/
#day { margin-top:10rem; }
#day .wrap { max-width:95rem; border:solid 1px #707070;  padding:4rem; margin:0 auto; }
#day .day-ttl { 
  text-align:center;
  max-width:30rem;
  width:100%;
  margin:0 auto;
  background:#9e9e9e;
  color:#fff;
  font-size:2rem;
  font-weight: bold;
  line-height:3;
}
#day .day-tx { text-align:center; font-size:3rem; font-weight:bold; color:#000; line-height:1.4; }
#day .day-area.last { margin-top:3rem; }
#day .sns-area { margin:5rem 0 0; }
#day .sns-area .sns-ttl { color:#395BB7; text-align:center; font-size:3rem; }
#day .sns-area ul { display:flex; justify-content:space-between; width:60%; margin:2rem auto 0; }
#day .sns-area ul:after { display:none; }
#day .sns-area ul li { display:flex; flex-direction:column; height:100%; text-align:center; }
#day .sns-area ul li a { display:block; }
#day .sns-area ul li img { max-width:20rem; max-height:20rem; object-fit:cover; margin-bottom:auto; }
#day .sns-area ul li p { font-size:2rem; font-weight: bold; color:#fff; background:#aaa; text-align:center; margin-top:2rem; border-radius:10px; line-height:1.2; padding:1rem 0; }
#day .btn { max-width: 50rem; margin: 5rem auto; border: solid 1px #707070; }
#day .btn a { display: block; padding: 0.5rem 0; text-align: center; color: #707070; font-size: 2rem; }

@media screen and (max-width:600px){
  #day .day-tx { font-size:2rem; }
  #day .sns-area .sns-ttl { font-size:2.4rem; }
  #day .sns-area { margin-top:3rem; }
}
@media screen and (max-width:375px){
  #day .day-tx { font-size:2rem; }
  #day .sns-area .sns-ttl { font-size:2.2rem; }
}

/*========================================
responsive
========================================*/
@media screen and (max-width:820px) {
  
  /* common */
  .main-ttl { font-size:2.4rem; }
  .cont { display:block; }
  .cont div { width:100%; }
  .cont div:last-child { margin-top:2rem; }
  
  /* day */
  #day .sns-area ul { width:80%; }  
  
}

@media screen and (max-width:600px) {
  
  /* common */
  .main-ttl { font-size:2rem; }
  .obi { font-size:2.4rem; }
  .cont .main-ttl { font-size:1.8rem; }
  .cont div:last-child p { margin-top:1rem; }
  
  /* day */
  #day .sns-area ul { justify-content:space-between; width:100%; }
  #day .sns-area ul li { width:48%; margin-right:0; }
  #day .sns-area ul li img { max-width:10rem; }
  #day .sns-area ul li p { font-size:1.6rem; text-align:center; margin-top:1rem; }
}

.slick-prev,.slick-next { top:30%; }
.slick-next:before, .slick-prev:before {
  content: "";
  display: block;
  width: 2rem;
  height: 3.5rem;
  background-image: url(https://micshop.itembox.design/item/2023_mothersday/arrow.svg?t=20231006142253);
  background-size: contain;
}
.slick-next:before { transform: rotate(180deg); }