@charset "UTF-8";



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

   reset

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

 @charset "utf-8";

 /* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

 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,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 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 {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border: 0;
     vertical-align: baseline;
     font: inherit;
     font-size: 100%;
 }

 /* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
     display: block;
 }

 body {
     line-height: 1;
 }

 ol,
 ul {
     list-style: none;
 }

 blockquote,
 q {
     quotes: none;
 }

 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
     content: '';
     content: none;
 }

 table {
     border-spacing: 0;
     border-collapse: collapse;
 }


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

   ANIME

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

 .fade {
     animation-name: fadeUpAnime;
     animation-duration: 3s;
     opacity: 0;
     animation-fill-mode: forwards;
 }

 @keyframes fadeUpAnime {
     from {
         transform: translateY(5px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }


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

   common

-----------------------*/
 .pc_none {
     display: none;
 }

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

 }

 body {
     /* background-color: #ab1c1c; */
     background-image: linear-gradient(90deg,
             hsl(0deg 72% 39%) 0%,
             hsl(10deg 74% 41%) 13%,
             hsl(16deg 76% 42%) 19%,
             hsl(20deg 78% 43%) 23%,
             hsl(23deg 80% 45%) 27%,
             hsl(26deg 82% 46%) 31%,
             hsl(28deg 84% 47%) 34%,
             hsl(29deg 86% 48%) 38%,
             hsl(31deg 88% 49%) 41%,
             hsl(32deg 91% 50%) 44%,
             hsl(33deg 95% 50%) 47%,
             hsl(35deg 100% 50%) 50%,
             hsl(33deg 95% 50%) 53%,
             hsl(32deg 91% 50%) 56%,
             hsl(31deg 88% 49%) 59%,
             hsl(29deg 86% 48%) 62%,
             hsl(28deg 84% 47%) 66%,
             hsl(26deg 82% 46%) 69%,
             hsl(23deg 80% 45%) 73%,
             hsl(20deg 78% 43%) 77%,
             hsl(16deg 76% 42%) 81%,
             hsl(10deg 74% 41%) 87%,
             hsl(0deg 72% 39%) 100%);
 }

 .wrapper {
     background-color: #fff;
     font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
     max-width: 1000px;
     margin: 0px auto;
     padding: 0;
     font-size: clamp(0.8rem, 2.5vw, 1rem);
     line-height: 150%;
     box-shadow: 0px 0px 40px #791111;
 }

 @media screen and (max-width: 1000px) {
     .wrapper {
         margin: 0px 10px;
     }
 }

 .wrapper .inner {
     padding: 3%;
 }

 .wrapper a {
     color: #d16405;
 }

 .wrapper img {
     max-width: 100%;
 }

 .wrapper p {
     margin-bottom: 1.5rem;
 }

 .wrapper .bold {
     font-weight: bold;
 }


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

   header

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

 .wrapper header {
     background-image: linear-gradient(0deg,
             #abd8ff 0%,
             #abd8ff 89%,
             #c0f4ff 90%,
             #c0f4ff 100%);
 }


 .wrapper header h1 {
     padding: 2% 0px 5%;

 }

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

   read

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

 .wrapper .read .read_bold {
     background-image: linear-gradient(0deg,
             #d0dcea 0%,
             #abd8ff 100%);
     font-family: 'Noto Serif JP', serif;
     font-weight: bold;
     text-align: center;
     text-shadow: 0px 2px 2px#8caecc;
     font-size: clamp(1rem, 4vw, 2.5rem);
     line-height: 200%;

 }

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

   goods

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


 .wrapper .goods {
     background-image: url(../images/bg_line.png), url(../images/bg_line.png);
     background-repeat: repeat-x;
     background-position: center 10px, center 100%;
     padding-bottom: 8%;
 }

 .wrapper .goods h2 {
     font-family: 'Noto Serif JP', serif;
     font-weight: bold;
     text-align: center;
     font-size: clamp(2rem, 3vw, 2.5rem);
     line-height: 200%;
     padding: 8% 0px;
 }

 .wrapper .goods .goods_detail {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 2%;
 }

 @media screen and (max-width: 800px) {
     .wrapper .goods .goods_detail {
         flex-direction: column-reverse;
     }
 }


 .wrapper .goods .goods_detail figure {
     width: 50%;
     text-align: center;
     box-sizing: border-box;
     border: 1px solid #b1c1cb;
     line-height: 0;
 }

 .wrapper .goods .goods_detail ul {
     width: 50%;
     padding-left: 10px;
 }

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

     .wrapper .goods .goods_detail figure,
     .wrapper .goods .goods_detail ul {
         width: 100%;
         padding: 0 0 2%;
     }
 }


 .wrapper .goods .goods_detail ul li {
     margin-bottom: 2%;
 }


 .wrapper .goods dl {
     display: flex;
     flex-wrap: wrap;
 }

 .wrapper .goods dl dt {
     background-color: #385383;
     width: 100%;
     font-weight: bold;
     color: #FFF;
     padding: 2%;
 }

 .wrapper .goods dl dd {
     padding: 2%;
     width: 100%;
 }

 .wrapper .goods dl dd span {
     display: block;
     font-weight: bold;
     color: #385383;
 }


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

   info

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

 .wrapper .info h2 {
     background-color: #005098;
     color: #fff100;
     padding: 2%;
     font-family: 'Noto Serif JP', serif;
     font-weight: bold;
     text-shadow: 1px 2px 0px#023561;
     text-align: center;
     font-size: clamp(1.2rem, 3vw, 1.5rem);
     line-height: 150%;
 }

 .wrapper .info h2 span {
     padding-right: 1rem;
 }

 @media screen and (max-width: 800px) {
     .wrapper .info h2 span {
         display: block;
         padding-right: 0;
     }
 }

 .wrapper .info h3 {
     font-family: 'Noto Serif JP', serif;
     font-weight: bold;
     text-align: center;
     font-size: clamp(1.5rem, 3vw, 2rem);
     line-height: 200%;
     padding: 4% 0px;
 }

 .wrapper .info h4 {
     text-align: center;
     font-weight: bold;
     color: #d16405;
 }

 .wrapper .info .info_read {
     text-align: center;
 }

 @media screen and (max-width: 600px) {
     .wrapper .info .info_read {
         text-align: left;
     }
 }

 .wrapper .info .detail {
     display: flex;
     flex-wrap: wrap;
 }

 .wrapper .info .detail dt,
 .wrapper .info .detail dd {
     padding: 2%;
     border: 1px solid #ddd;
 }

 .wrapper .info .detail dt:not(:last-of-type),
 .wrapper .info .detail dd:not(:last-of-type) {
     border-bottom: none;
 }

 .wrapper .info .detail dt {
     background-color: #d16405;
     font-weight: bold;
     color: #fff;
     width: 14rem;
     text-align: center;
     border-right: none;
 }

 .wrapper .info .bg_2 dt {
     background-color: #ea7d47;
 }

 @media screen and (max-width: 800px) {
     .wrapper .info .detail dt {
         width: 100%;
         border: none;
     }
 }

 .wrapper .info .detail dd {
     width: calc(100% - 14rem);
 }

 @media screen and (max-width: 800px) {
     .wrapper .info .detail dd {
         width: 100%;
         border: none;
         padding: 2% 2% 5%;
     }
 }

 .wrapper .info .detail dd .small {
     font-size: 0.8rem;
     margin-bottom: 0.8rem;
 }

 .wrapper .info .detail dd h3 {
     font-size: 1.2rem;
     font-weight: bold;
     color: #d16405;
     margin-bottom: 10px;
 }

 .wrapper .info .detail dd h4 {
     background: rgba(5, 114, 209, 0.6);
     color: #fff;
     padding: 2px 10px;
     margin-right: 2%;
     margin-bottom: 10px;
     border-radius: 10px;
 }

 .wrapper .info .detail dd .pre_order {
     background-color: #fceed2;
     margin-bottom: 2%;
     padding: 10px;
     border-radius: 10px;
 }

 .wrapper .info .detail dd .pre_order h4 {
     background: rgba(209, 100, 5, 0.6);
     color: #fff;
     padding: 2px 10px;
     margin-bottom: 10px;
     border-radius: 10px;
 }

 .wrapper .info .detail dd .pre_order ul li {
     padding: 10px;
     border-bottom: 1px dotted#e9b58c;
 }

 .wrapper .info .detail dd .orange {
     color: #ea7d47;
     font-weight: bold;
 }

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

   footer

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

 .wrapper footer {
     background-color: #385383;
     margin-top: 5%;
     text-align: center;
     color: #fff;
 }

 .wrapper footer a {
     color: #fff;
 }