@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;
     }
 }

 .fade:nth-child(2) {
     animation-delay: 0.5s;
 }



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

   common

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

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

 body {
     background-color: #ab1c1c;
 }

 .wrapper {
     background-color: #f3f0e4;

     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, 0.706rem + 0.47vw, 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: #d70c18;
 }

 .wrapper a:hover {
     opacity: 0.5;
     transition: all 0.6s ease 0s;
 }

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

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

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

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

 .wrapper .attention {
     font-size: 0.8rem;
     color: #d70c18;
 }


 .wrapper .pc_none {
     display: none;
 }

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


 a.link_arrow {
     width: fit-content;
     min-width: 50%;
     background-color: #fb9b01;

     display: inline-flex;
     align-items: center;
     position: relative;
     padding: 16px 48px 16px 24px;
     border-radius: 4px;
     text-decoration: none;
     font-weight: bold;
     font-size: clamp(0.8rem, 0.706rem + 0.47vw, 1rem);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

     color: #d70c18;
     margin: 10px 0px;
 }

 @media screen and (max-width: 500px) {
     a.link_arrow {
         width: 100%;
     }
 }


 .link_arrow::after {
     content: "";
     position: absolute;
     right: 20px;
     width: 8px;
     height: 8px;
     border-top: 2px solid currentColor;
     border-right: 2px solid currentColor;
     transform: rotate(45deg);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     margin-top: -4px;
     transition: all 0.3s ease 0s;
 }

 .link_arrow:hover::after {
     right: 15px;
 }



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

   header

-----------------------*/
 .wrapper header {
     background-image: url(../images/header_bg_1.png), url(../images/header_bg_2.png), url(../images/bg_header.png);
     background-position: top -50px left -50px, bottom -50px right -50px, center;
     background-size: auto 50%, auto 50%, auto;
     background-repeat: no-repeat, no-repeat, repeat;
     border-top: 40px solid #000;
     border-left: none;
     border-right: none;
 }

 .wrapper header h1 {
     padding: 1% 2%;
 }

 @media screen and (max-width: 640px) {
     .wrapper header h1 {
         padding: 5%;
     }
 }


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

   topic

-----------------------*/
 .wrapper .topic {
     background-image: url(../images/header_bg_1.png), url(../images/header_bg_2.png);
     background-position: top -50px left -50px, bottom -50px right -50px;
     background-size: 80% auto;
     background-repeat: no-repeat;
     padding: 2%;
 }

 .wrapper .topic p.note {
     background-color: #ffffff78;
     font-size: clamp(0.9rem, 0.759rem + 0.71vw, 1.2rem);
     font-weight: bold;
     text-align: center;
     line-height: 1.5;
     padding: 2%;
 }

 @media screen and (max-width: 800px) {
     .wrapper .topic p.note {
         text-align: left;
     }
 }

 .wrapper .topic p.note span {
     color: #d70c18;
 }

 .wrapper .topic dl dt {
     background-color: #d70c18;
     font-size: clamp(0.9rem, 0.759rem + 0.71vw, 1.2rem);
     font-weight: bold;
     line-height: 1.5;
     color: #fff;
     border-radius: 5px 5px 0px 0px;
     padding: 2%;
 }

 .wrapper .topic dl dd {
     background-color: #faebd7d1;
     padding: 2%;
     margin-bottom: 2%;
     border-radius: 0px 0px 5px 5px;
 }

 .wrapper .topic dl dd ul {
     margin-bottom: 2%;
 }


 .wrapper .topic dl dd ul li {
     list-style: disc;
     margin-left: 1rem;
     margin-bottom: clamp(10px, 0.037rem + 2.941vw, 30px);
 }

 .wrapper .topic dl dd ul li::marker {
     color: #d70c18;
     ;
 }

 .wrapper .topic dl dd span.bold {
     display: inline-block;
     font-size: clamp(0.8rem, 0.612rem + 0.94vw, 1.2rem);
     font-weight: bold;
     margin-top: 2%;
 }




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

   news

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

 .wrapper .news {
     background-image: url(../images/bg_02.png);
     background-size: auto 200%;
     background-position: center;
     background-repeat: no-repeat;
     background-color: #000;
     padding: 5%;
     color: #d70c18;
 }

 .wrapper .news h2 {
     font-family: 'Noto Serif JP', serif;
     font-size: clamp(1.2rem, 1.059rem + 0.71vw, 1.5rem);
     font-weight: bold;
     letter-spacing: 0.3rem;
     text-align: center;
     text-shadow: 0px 2px 2px #000;
     color: #fff;
 }

 .wrapper .news ul {
     background-color: #fff;
     height: 60px;
     padding: 1%;
     border-radius: 10px;
     margin-top: 2%;
     /* overflow-y: scroll; */
     border: 10px solid #fff;
     scrollbar-color: #fff #d70c18;
 }

 .wrapper .news ul::-webkit-scrollbar {
     width: 5px;
 }

 .wrapper .news ul::-webkit-scrollbar-track {
     background: #2b221f;
     border-radius: 10px;
 }

 .wrapper .news ul::-webkit-scrollbar-thumb {
     background: #d70c18;
     border-radius: 10px;
 }

 .wrapper .news ul li span {
     font-size: 0.8rem;
     margin-right: 1rem;
 }


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

   read

-----------------------*/
 .wrapper .read {
     background-image: url(../images/bg_03.png);
 }

 .wrapper .read .read_bold {
     font-family: 'Noto Serif JP', serif;
     font-weight: bold;
     text-align: center;
     text-shadow: 0px 2px 2px#faecd1;
     font-size: clamp(1.2rem, 0.824rem + 1.88vw, 2rem);
     line-height: 200%;
     padding: 5% 0px 2%;
 }

 .wrapper .read .read_txt {
     line-height: 2;
     text-shadow: 0px 2px 2px #fff;
     padding: 5% 10%;
 }

 @media screen and (max-width: 800px) {
     .wrapper .read .read_txt {
         padding: 5%;
         line-height: 150%;
     }
 }


 .wrapper .read .read_txt img {
     margin-bottom: 2%;
 }

 .wrapper .read .read_txt hr {
     margin: 5%;
 }

 .wrapper .read .read_txt p {
     margin-bottom: 5%;
 }

 .wrapper .read .read_txt figure {
     background-color: #fff;
     border-radius: 5px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     padding: 1%;
     margin: 5% 0;
 }

 .wrapper .read .read_txt figure img {
     border-radius: 5px;
     margin: 0px;
     padding: 0px;
 }

 .wrapper .read .read_txt figure figcaption {
     font-size: 0.8rem;
     text-align: center;
     color: #2b221f;
 }

 .wrapper .read .comment {
     background-color: #fff;
     margin-bottom: 5%;
     text-shadow: none;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     border: 2px solid #d70c18;
     border-radius: 5px;
 }

 .wrapper .read .comment dt {
     /* background-color: #d70c18; */
     border-bottom: 2px solid #d70c18;
     font-weight: bold;
     text-align: center;
     padding: 1% 2%;
 }

 .wrapper .read .comment dd {
     padding: 2%;
 }

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

   youtube

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

 .wrapper .youtube {
     max-width: 1000px;
     margin: 0px auto;
 }

 .wrapper .youtube .size {
     width: 100%;
     padding-bottom: 56.25%;
     height: 0px;
     position: relative;
     margin: 0px auto;
 }

 .wrapper .youtube .size iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

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

   footer

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

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

 .wrapper footer a {
     color: #fff;
     font-size: 0.8rem;
     color: #d70c18;
     text-decoration: none;
 }