@charset "UTF-8";


 /*-----------------------

   reset

-----------------------*/
 *, *::before, *::after {
   box-sizing: border-box
 }

 html {
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none
 }

 body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
   margin: 0
 }

 ul[role='list'], ol[role='list'] {
   list-style: none;
 }

 body {
   min-height: 100vh;
   line-height: 1.5
 }


 h1, h2, h3, h4, button, input, label {
   line-height: 1.1
 }

 a:not([class]) {
   text-decoration-skip-ink: auto;
   color: currentColor
 }

 img, picture {
   max-width: 100%;
   padding: 0;
   margin: 0;
 }


 input, button, textarea, select {
   font: inherit
 }

 textarea:not([rows]) {
   min-height: 10em
 }

 :target {
   scroll-margin-block: 5ex
 }


 /*-----------------------

   common

-----------------------*/


 ul {
   padding: 0;
 }

 .pc_none {
   display: none;
 }

 @media screen and (max-width: 800px) {
   .pc_none {
     display: inline;
   }
 }


 body {
   background-image: url(../img/bg.webp);
   background-size: auto 100%;
 }

 @media screen and (max-width: 800px) {
   body {
     background-image: url(../img/bg2.webp);
     background-size: auto 1000px;
   }
 }

 a:hover {
   opacity: 0.5;
   transition: all 0.3s;
 }


 /*-----------------------

   wrapper

-----------------------*/

 .wrapper {
   max-width: 1200px;
   margin: 0px auto;
   padding: 0px 10px;
 }

 .wrapper p {
   font-family: "Kosugi Maru", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: clamp(0.7rem, 0.591rem + 0.55vw, 1rem);
   line-height: 150%;
 }



 /*-----------------------

   header

-----------------------*/

 header h1 {
   text-align: center;
 }

 header h1 img {
   border-radius: 0 0 20px 20px;
 }

 header .oatime {
   background-image: url(../img/bg_oatime.png);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: auto 100%;
   width: 100%;
   padding: 10px;
   margin: 20px auto;
   text-align: center;
 }

 @media screen and (max-width: 800px) {
   header .oatime {
     background-size: 100% auto;
   }
 }

 /*-----------------------

   main

-----------------------*/

 .main h2 {
   font-family: "Zen Antique Soft", serif;
   width: fit-content;
   background-color: #000;
   text-align: center;
   font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
   font-weight: normal;
   color: #fff;
   padding: 10px 20px;
   margin: 50px auto 20px;
   border-radius: 5px;
 }

 /* episode_box */
 .main .season .episode_box {
   background-image: url(../img/bg_episode_box.png);
   background-size: auto auto;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   background-color: #fff;
   padding: 10px;
   border-radius: 20px;
   margin-bottom: 10px;
 }

 .main .season .episode_box h3 {
   width: 100%;
   line-height: 150%;
   background-color: #3e3c84;
   word-break: break-all;
   font-family: "DotGothic16", sans-serif;
   font-size: clamp(1rem, 0.927rem + 0.36vw, 1.2rem);
   font-weight: normal;
   padding: 10px;
   margin-bottom: 10px;
   color: #fff;
 }

 .main .season .episode_box .episode_detail {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;

   padding: 0px 10px;
 }

 .main .season .episode_box .episode_detail figure {
   width: 60%;
 }

 .main .season .episode_box .episode_detail .txt {
   width: 40%;
   padding: 0px 10px;
 }


 @media screen and (max-width: 800px) {
   .main .season .episode_box .episode_detail figure {
     width: 50%;
   }

   .main .season .episode_box .episode_detail .txt {
     width: 50%;
     padding: 0px 10px;
   }
 }

 .main .season .episode_box .oa_date {
   width: 100%;
   text-align: right;
   font-size: 0.8rem;
   font-weight: bold;
   color: #3e3c84;
   ;
 }


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

   .main .season .episode_box .episode_detail figure,
   .main .season .episode_box .episode_detail .txt {
     width: 100%;
   }
 }


 .main .season .episode_box .episode_detail figure img {
   width: calc(50% - 10px);
   margin: 5px;
   border-radius: 10px;
 }

 @media screen and (max-width: 800px) {
   .main .season .episode_box .episode_detail figure img {
     width: 100%;
   }
 }

 .main .season .episode_box .episode_detail .shop_info dt {
   font-family: "Zen Antique Soft", serif;
   width: fit-content;
   background-color: #000;
   padding: 10px;
   border-radius: 4px;
   outline: 2px solid #fff;
   outline-offset: -5px;
   color: #fff;
 }

 @media screen and (max-width: 800px) {
   .main .season .episode_box .episode_detail .shop_info dt {
     font-size: 0.8rem;
   }
 }



 .main .season .episode_box .episode_detail .shop_info dd {
   padding: 10px;
 }


 .main .season .episode_box .episode_detail .shop_info dd:not(:last-of-type) {
   margin-bottom: 20px;
 }


 .main .season .episode_box .episode_detail .shop_info dd span {
   display: block;
   font-weight: bold;
   color: #009c40;
 }


 /* nophoto */
 .main .nophoto {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }

 .main .nophoto .episode_box {
   width: calc(50% - 10px);
   display: block;
 }

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

   .main .nophoto .episode_box {
     width: 100%;
   }
 }


 .main .nophoto .episode_box .episode_detail {
   display: block;
 }

 .main .nophoto .episode_box .episode_detail .txt {
   width: 100%;
   padding: 0px 10px;
 }

 /* comingsoon */

 .comingsoon {
   background-color: #009c40;
   text-align: center;
   border-radius: 20px;
   padding: 20px;
 }

 .comingsoon p {
   font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
   font-weight: bold;
   color: #fff;
 }

 @media screen and (min-width: 800px) {
   .pc_none {
     display: none;
   }
 }