@charset "UTF-8";

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

   common

-----------------------*/
 body {
     background: linear-gradient(45deg, #EFE0B5 0%, #EFE0B5 50%, #9ECDC9 50%, #9ECDC9 100%);
 }

 .wrap {
     margin: 20px auto;
     max-width: 1200px;
     font-size: 1.2rem;
     font-family: 'Montserrat', arial, sans-serif;
 }

 @media screen and (max-width: 800px) {
     .wrap {
         font-size: 1rem;
         line-height: 1.2rem;
     }
 }


 .wrap .on,
 .wrap .on_costume {
     margin-bottom: 20px;
     padding: 20px;
     border-radius: 20px;
     background-color: #fff;
     box-shadow: 2px 2px 5px rgba(134, 134, 134, 0.37);
 }

 @media screen and (max-width: 800px) {
     .wrap {
         margin: 10px;
     }
 }

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


 .wrap p {
     line-height: 1.5rem;
 }

 .wrap p:not(:last-of-type) {
     margin-bottom: 10px;
 }

 .wrap .red {
     color: #e8343d;
 }

 .wrap .small {
     font-size: 0.5rem;
     line-height: 0.8rem;
 }

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

 .wrap .area {
     padding-bottom: 30px;
 }

 .wrap figure {
     padding: 20px;
     text-align: center;
 }


 .wrap .area h1 {
     margin-bottom: 20px;
     font-family: 'Fredoka One', cursive;
 }


 /*who*/
 .wrap .who h1 {
     color: #ed6d00;
     text-align: center;
     font-size: 5rem;
 }

 @media screen and (max-width: 800px) {
     .wrap .who h1 {
         font-size: 3.5rem;
     }
 }

 @media screen and (max-width: 450px) {
     .wrap .who h1 {
         font-size: 2rem;
     }
 }


 /* basicData*/

 .wrap .basicData {
     padding: 20px;
     border-radius: 20px;
     background: #fcc800;
 }

 .wrap .basicData h1 {
     padding: 20px 0px;
     border: double 10px #fcc800;
     border-radius: 20px;
     background-color: #fff;
     color: #fcc800;
     text-align: center;
     font-size: 2rem;
     line-height: 2rem;
 }

 @media screen and (max-width: 450px) {
     .wrap .basicData h1 {
         font-size: 1.5rem;
         line-height: 1.8rem;
     }
 }

 .wrap .basicData h2 {
     margin-bottom: 20px;
     padding: 10px;
     border-radius: 20px;
     background-color: rgba(255, 255, 255, 0.3);
     color: #fff;
     text-align: center;
     font-weight: bold;
 }

 .wrap .basicData .dataList {
     display: flex;
     margin: 0px auto;

     flex-wrap: wrap;
 }

 .wrap .basicData .dataList div {
     padding: 10px;
     width: 50%;
     text-align: center;
 }

 @media screen and (max-width: 800px) {
     .wrap .basicData .dataList div {
         width: 100%;
     }
 }

 .wrap .basicData .dataList div ul li {
     margin-bottom: 10px;
 }

 .wrap .basicData .dataList div:not(:last-of-type) {
     border-right: 1px solid #fff;
 }

 @media screen and (max-width: 800px) {
     .wrap .basicData .dataList div:not(:last-of-type) {
         border-right: 0px;
     }
 }

 /*copyright*/

 .wrap .copyright {
     padding: 10px;
     border: 1px solid #ed6d00;
     border-radius: 20px;
 }

 .wrap .copyright h1 {
     position: relative;
     margin: 1rem -20px;
     padding: 1rem 2rem;
     background: #fcc800;
     color: #ed6d00;
     text-align: center;
     font-size: 2rem;
     line-height: 2rem;
 }

 @media screen and (max-width: 800px) {
     .wrap .copyright h1 {
         font-size: 1.5rem;
         line-height: 1.5rem;
     }
 }

 .wrap .copyright h1 span {
     color: #fff;
 }

 .wrap .copyright h1:before,
 .wrap .copyright h1:after {
     position: absolute;
     content: '';
 }

 .wrap .copyright h1:before {
     bottom: -10px;
     left: 0;
     width: 0;
     height: 0;
     border-top: 10px solid #ed6d00;
     border-left: 10px solid transparent;
 }

 .wrap .copyright h1:after {
     right: 0;
     bottom: -10px;
     width: 0;
     height: 0;
     border-top: 10px solid #ed6d00;
     border-right: 10px solid transparent;
 }


 /*costume*/
 .wrap .costume h1 {
     color: #42ada9;
     text-align: center;
     font-size: 5rem;
 }

 @media screen and (max-width: 800px) {
     .wrap .costume h1 {
         font-size: 3.5rem;
         line-height: 3.5rem;
     }
 }

 @media screen and (max-width: 450px) {
     .wrap .costume h1 {
         font-size: 2rem;
         line-height: 2rem;
     }
 }

 /*version*/

 .wrap .version {
     padding: 10px;
     border: 1px solid #42ada9;
     border-radius: 20px;
 }

 .wrap .version h1 {
     position: relative;
     margin: 1rem -20px;
     padding: 1rem 2rem;
     background: #b3e2de;
     color: #42ada9;
     text-align: center;
     font-size: 2rem;
     line-height: 2rem;
 }

 @media screen and (max-width: 800px) {
     .wrap .version h1 {
         font-size: 1.5rem;
         line-height: 1.5rem;
     }
 }

 .wrap .version h1 span {
     color: #fff;
 }

 .wrap .version h1:before,
 .wrap .version h1:after {
     position: absolute;
     content: '';
 }

 .wrap .version h1:before {
     bottom: -10px;
     left: 0;
     width: 0;
     height: 0;
     border-top: 10px solid #42ada9;
     border-left: 10px solid transparent;
 }

 .wrap .version h1:after {
     right: 0;
     bottom: -10px;
     width: 0;
     height: 0;
     border-top: 10px solid #42ada9;
     border-right: 10px solid transparent;
 }

 /*webshop*/

 .wrap .webshop {
     font-family: 'Fredoka One', cursive;
     text-align: center;
     color: #42ada9;
     font-size: 1.2rem;
     margin-bottom: 20px;
 }


 /*fotter*/

 .wrap footer {
     text-align: center;
 }


 .wrap footer dl {
     display: flex;

     flex-wrap: wrap;
 }


 .wrap footer dt {
     font-family: 'Fredoka One', cursive;
     padding: 10px 30px;
     background-color: #483027;
     color: #fff;

     flex-grow: 0;
 }

 .wrap footer dd {
     margin: 0;
     padding: 10px;
     background-color: #F8F8F8;
     text-align: center;

     flex-grow: 1;
 }



 @media screen and (max-width: 800px) {
     .wrap footer dt {
         width: 100%;
     }

     .wrap footer dt::after {
         bottom: 100%;
     }
 }

 .wrap footer a {
     color: #483027;
     text-decoration: none;
 }

 .wrap footer a:hover {
     color: #ed6d00;
     transition: all 0.3s;
 }