/* CSS Document */

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap');
 @import '_default';
 @import '_general';
 @import '_animation';

 /*------------------
*  共通
*------------------*/

 html {
     box-sizing: border-box;
     overflow-y: scroll;
     -webkit-text-size-adjust: 100%;
     font-size: 20px;
     font-family: YuGothic, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
     color: #000000;
     scroll-behavior: smooth;
     font-feature-settings: "palt";

 }

 body {
     margin: 0;
     padding: 0;
     background: #fff;
     font-size: 0.7rem;
     line-height: 1.85;
     min-width: 1100px;
     min-width: inherit;
     word-wrap: break-word;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 body.appear {
     background: #fbfbfb;
 }

 a {
     transition: .5s all;
 }

 .wrap {
     width: 100%;
     margin: 0 auto;
     padding: 0 0px;
 }

 a.anchor {
     display: block;
     padding-top: 70px;
     margin-top: -70px;
 }

 br .pc {
     display: block;
 }

 br.sp {
     display: none;


 }

 #container {
     overflow: hidden;
     margin: 0 auto;
 }

 #main-area {
     max-width: 1020px;
     margin: 0 auto;

 }

 @media screen and (max-width:768px) {
     #main-area {
         max-width: 360px;
         margin: 0 auto;

     }

     br.pc {
         display: none;
     }

     br.sp {
         display: block;

         display: inline;

     }

 }

 /*------------------
*  共通終わり
*------------------*/


 /*========= LoadingのためのCSS ===============*/

 /* Loading背景画面設定　*/
 #splash {
     /*fixedで全面に固定*/
     position: fixed;
     width: 100%;
     height: 100%;
     z-index: 999;
     background: #32b1cb;
     text-align: center;
     color: #000;
 }

 /* Loading画像中央配置　*/
 #splash_logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 /* Loading アイコンの大きさ設定　*/
 #splash_logo svg {
     width: 400px;
 }

 @media screen and (max-width:768px) {
     #splash_logo svg {
         width: 350px;
     }
 }

 /*=============== SVGアニメーション内の指定 =================*/

 /*アニメーション前の指定*/
 #mask path {
     fill-opacity: 0;
     /*最初は透過0で見えない状態*/
     transition: fill-opacity .5s;
     /*カラーがつく際のアニメーション0.5秒で変化*/
     fill: none;
     /*塗りがない状態*/
     stroke: #333;
     /*線の色*/
 }

 /*アニメーション後に.doneというクラス名がで付与された時の指定*/
 #mask.done path {
     fill: #333;
     /*塗りの色*/
     fill-opacity: 1;
     /*透過1で見える状態*/
     stroke: none;
     /*線の色なし*/
 }

 /*========= ローディング画面のためのCSS 終わり ===============*/


 /*　ハンバーガーボタン */


 /*========= ナビゲーションのためのCSS ===============*/

 #g-nav {
     /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
     position: fixed;
     z-index: 999;
     /*ナビのスタート位置と形状*/
     top: 0;
     right: -120%;
     width: 100%;
     height: 100vh;
     /*ナビの高さ*/
     background: rgba(180, 136, 77, 0.8);
     /*動き*/
     transition: all 0.6s;
 }

 /*アクティブクラスがついたら位置を0に*/
 #g-nav.panelactive {
     right: 0;
 }

 /*ナビゲーションの縦スクロール*/
 #g-nav.panelactive #g-nav-list {
     /*ナビの数が増えた場合縦スクロール*/
     position: fixed;
     z-index: 999;
     width: 100%;
     height: 100vh;
     /*表示する高さ*/
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 }

 /*ナビゲーション*/
 #g-nav ul {
     /*ナビゲーション天地中央揃え*/
     position: absolute;
     z-index: 999;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .nav05b span {
     font-weight: lighter;
     font-family: system-ui;
 }

 /*リストのレイアウト設定*/

 #g-nav li {
     list-style: none;
     text-align: center;
 }

 #g-nav li a {
     color: #FFFFFF;
     text-decoration: none;
     padding: 10px;
     display: block;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: bold;
 }

 /*========= ボタンのためのCSS ===============*/
 .openbtn {
     position: fixed;
     z-index: 9999;
     /*ボタンを最前面に*/
     top: 20px;
     right: 0px;
     cursor: pointer;
     width: 80px;
     height: 80px;
 }

 /*×に変化*/
 .openbtn span {
     display: inline-block;
     transition: all .4s;
     position: absolute;
     left: 13px;
     height: 2px;
     background-color: #585757;

 }

 .openbtn span:nth-of-type(1) {
     top: 22px;
     width: 50%;
 }

 .openbtn span:nth-of-type(2) {
     top: 29px;
     width: 30%;
 }

 /*activeクラスが付与されると線が回転して×に*/

 .openbtn.active span:nth-of-type(1) {
     top: 20px;
     left: 16px;
     transform: translateY(6px) rotate(-45deg);
     width: 35%;
 }

 .openbtn.active span:nth-of-type(2) {
     top: 32px;
     left: 16px;
     transform: translateY(-6px) rotate(45deg);
     width: 35%;
 }

 @media screen and (max-width:768px) {
     .openbtn {
         position: fixed;
         z-index: 9999;
         /*ボタンを最前面に*/
         top: 10px;
         right: 0px;
         cursor: pointer;
         width: 70px;
         height: 80px;
     }
 }

 /*------------------
*  ハンバーガー終わり
*------------------*/

 /*========= 上部固定させるためのCSS ===============*/
 #header {
     height: 40px;
     /*高さ指定*/
     width: 100%;
     /*横幅指定*/
     /*以下はレイアウトのためのCSS*/
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #fbfbfb;
     color: #fff;
     text-align: center;
     padding: 30px 0;
 }

 /*JSを使いfixedクラスが付与された際の設定*/
 #header.fixed {
     position: fixed;
     /*fixedを設定して固定*/
     z-index: 800;
     /*最前面へ*/
     top: 0;
     /*位置指定*/
     left: 0;
     /*位置指定*/
 }


 h1 img {
     padding-top: 10px;
     width: 25%;
 }

 .shop {
     position: fixed;
     z-index: 9999;
     top: 20px;
     left: 20px;
     cursor: pointer;
 }

 .shop img {
     width: 65px;
 }

 @media screen and (max-width:768px) {
     #header {
         height: 10px;
         /*高さ指定*/
         width: 100%;
         /*横幅指定*/
         /*以下はレイアウトのためのCSS*/
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: #fbfbfb;
         color: #fff;
         text-align: center;
         padding: 30px 0;
     }

     h1 img {
         padding-top: 10px;
         width: 50%;
     }

     .shop {
         position: fixed;
         z-index: 9999;
         top: 10px;
         left: 15px;
         cursor: pointer;
     }

     .shop img {
         width: 50px;
     }
 }

 /*========= 上部固定させるためのCSS 終わり===============*/


 /*==================================================
機能編　9-1-2 丸が動いてスクロールを促す
===================================*/

 /*スクロールダウン全体の場所*/
 .scrolldown2 {
     /*描画位置※位置は適宜調整してください*/
     position: fixed;
     bottom: 10px;
     left: 50%;
     z-index: 2;
 }

 /*Scrollテキストの描写*/
 .scrolldown2 span {
     /*描画位置*/
     position: absolute;
     left: 10px;
     bottom: 10px;
     /*テキストの形状*/
     color: #eee;
     font-size: 0.7rem;
     letter-spacing: 0.05em;
     /*縦書き設定*/
     -ms-writing-mode: tb-rl;
     -webkit-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
 }

 /* 丸の描写 */
 .scrolldown2:before {
     content: "";
     /*描画位置*/
     position: absolute;
     bottom: 0;
     left: -4px;
     /*丸の形状*/
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #eee;
     /*丸の動き1.6秒かけて透過し、永遠にループ*/
     animation:
         circlemove 1.6s ease-in-out infinite,
         cirlemovehide 1.6s ease-out infinite;
 }

 /*下からの距離が変化して丸の全体が上から下に動く*/
 @keyframes circlemove {
     0% {
         bottom: 45px;
     }

     100% {
         bottom: -5px;
     }
 }

 /*上から下にかけて丸が透過→不透明→透過する*/
 @keyframes cirlemovehide {
     0% {
         opacity: 0
     }

     50% {
         opacity: 1;
     }

     80% {
         opacity: 0.9;
     }

     100% {
         opacity: 0;
     }
 }

 /* 線の描写 */
 .scrolldown2:after {
     content: "";
     /*描画位置*/
     position: absolute;
     bottom: 0;
     left: 0;
     /*線の形状*/
     width: 2px;
     height: 50px;
     background: #eee;
 }

 /*==================================================
機能編　9-1-2 丸が動いてスクロールを促す 終わり
===================================*/
 /*==================================================
ふわっ
===================================*/


 /* fadeUp */

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

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

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


 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/

 .fadeUpTrigger {
     opacity: 0;
 }


 /*==================================================
じわっ
===================================*/

 /* ぼかしから出現 */
 .blur {
     animation-name: blurAnime;
     animation-duration: 1s;
     animation-fill-mode: forwards;
 }

 @keyframes blurAnime {
     from {
         filter: blur(10px);
         transform: scale(1.02);
         opacity: 0;
     }

     to {
         filter: blur(0);
         transform: scale(1);
         opacity: 1;
     }
 }

 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/

 .blurTrigger {
     opacity: 0;
 }



 /*========= 流れるテキスト ===============*/

 /*全共通*/

 .slide-in {
     overflow: hidden;
     display: inline-block;
 }

 .slide-in_inner {
     display: inline-block;

 }

 /*左右のアニメーション*/
 .leftAnime {
     opacity: 0;
     /*事前に透過0にして消しておく*/
 }

 .slideAnimeLeftRight {
     animation-name: slideTextX100;
     animation-duration: 0.8s;
     animation-fill-mode: forwards;
     opacity: 0;
 }

 @keyframes slideTextX100 {
     from {
         transform: translateX(-100%);
         /*要素を左の枠外に移動*/
         opacity: 0;
     }

     to {
         transform: translateX(0);
         /*要素を元の位置に移動*/
         opacity: 1;
     }
 }

 .slideAnimeRightLeft {
     animation-name: slideTextX-100;
     animation-duration: 0.8s;
     animation-fill-mode: forwards;
     opacity: 0;
 }


 @keyframes slideTextX-100 {
     from {
         transform: translateX(100%);
         /*要素を右の枠外に移動*/
         opacity: 0;
     }

     to {
         transform: translateX(0);
         /*要素を元の位置に移動*/
         opacity: 1;
     }
 }





 /*-------about--------*/

 #area-1 {
     margin: 0 auto;
     text-align: center;
     padding: 50px 0 50px;
     color: #585757;
     max-width: 1200px;
 }

 h2 {
     color: revert;
     text-align: center;
     font-weight: bold;
     letter-spacing: 7px;
     font-family: system-ui;
     font-size: revert;

 }


 .area1 img {
     width: 100%;
     margin: 0 auto;
     padding: 0px 10px;

 }

 #area-2 {
     margin: 0 auto;
     text-align: center;
     padding: 0px 0;
     color: #585757;
     max-width: 1200px;
 }

 .area2 img {
     width: 80%;
     margin: 0 auto;
     padding: 0px 10px;

 }

 #area-3 {
     margin: 0 auto;
     text-align: center;
     padding: 90px 0 0;
     color: #585757;
     max-width: 1200px;
 }

 #area-3 .red {
     font-size: 25px;
     color: #FF0004;
 }

 #area-3 ul {
     display: flex;
 }

 #area-3 li {
     list-style: none;
 }

 #area-3 img {
     width: 90%;
     margin: 0 auto
 }

 .area3 p {
     padding: 20px 0;
     font-size: 15px;
     letter-spacing: 2px
 }

 .area3 span {
     font-size: 25px;
     font-weight: bold;
 }

 .area3 a {
     color: #585757;
 }

 #area-4 {
     margin: 0 auto;
     text-align: center;
     padding: 40px 0 0;
     color: #585757;
     max-width: 1200px;
 }

 .area4-1 img {
     width: 40px;
     margin: 0 auto;
     padding-bottom: 40px;
 }

 .area4-2 img {
     width: 90%;
     margin: 0 auto;
 }

 #area-4 #bnr {
     margin: 0 auto 3em;

 }

 #area-4 #btn {
     margin-top: 1em;
     cursor: pointer;
 }

 #area-4 #btn img {
     width: 60%;

 }

 #complete {
     margin: 0 auto 3em;
     font-size: 25px;
     font-weight: bold;
 }

 .expires {
     font-size: 25px;
     font-weight: bold;
     color: #D90000;
 }

 #area-5 {
     margin: 80px 0 50px;

 }

 .area5 img {
     width: 100%;
     margin: 0 auto;
     padding: 30px 0;
 }

 @media screen and (max-width:768px) {
     #area-1 {
         padding: 50px 0px 0px;
         color: #585757;
         text-align: center;

     }

     #area-2 {
         padding-top: 0px;
         color: #585757;
         text-align: center;

     }

     .area1 img {
         width: 380px;
         margin: 0 -30px;
         padding: 0px 0;

     }

     .area2 img {
         width: 100%;
         margin: 0 -30px;
         padding: 0px 10px;

     }

     #area-3 {
         padding-top: 50px;
         color: #585757;
         text-align: center;

     }

     .area3 p {
         padding: 20px 0;
         font-size: 14px;
         letter-spacing: 2px
     }

     #area-3 .red {
         font-size: 12px;
         color: #FF0004;
     }

     .area3 span {
         font-size: 18px;
         font-weight: bold;
         padding-bottom: 10px;
     }

     .area4-1 img {
         width: 30px;
         margin: 0 auto;
         padding-bottom: 40px;
     }

     .area4-2 img {
         width: 100%;
         margin: 0 auto;
     }

     #area-4 #bnr {}

     #area-4 #btn img {
         width: 80%;

     }

     #complete {
         font-size: 18px;
     }

     h2 {
         letter-spacing: 6px;
         font-size: 20px;

     }

     #area-5 {
         margin: 30px 0 50px;

     }

     .area5 img {
         width: 100%;
         margin: 0 auto;
         padding: 10px 0;
     }


 }

 /*-------about  sp--------*/



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

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

 h3 {
     line-height: normal;
     color: #ffffff;
     background-color: rgba(51, 112, 121, 0.2);


 }





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

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

 /*--------------------------------
footer
---------------------------------*/

 .sp {
     display: none;
 }

 #footer {
     background-color: #b4884d;
     text-align: center;
     color: #ffffff;
     padding-bottom: 90px;
 }

 .footer-link a {
     color: #ffffff;
     text-decoration: none;

 }

 .footer-r img {
     margin: 0 auto;
     width: 320px;
     padding: 20px 0 20px;
 }

 .footer-l a {
     color: #ffffff;
     text-decoration: none;
 }


 #footer ul {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     font-weight: inherit;
     padding-bottom: 25px;
     font-size: 12px;
     line-height: 30px;
 }

 #footer li {
     width: 25%;
     text-align: center;
 }

 .footer-r {
     width: 400px;
     margin: 35px auto 0;
 }

 .gf {
     text-align: left;
     font-family: sans-serif;
     letter-spacing: 0.1em;

 }

 dl.access dt {

     width: 30%;
     padding-right: 0.5em;
     font-weight: bold;
     letter-spacing: 0;
     white-space: nowrap;
 }

 @media screen and (max-width: 767px) {
     .footer-r {
         width: inherit;
         margin: 35px auto 0;
     }

     .pc {
         display: none;
     }

     .sp {
         display: block;
     }

     .map-block {
         margin: 0 -30px;
     }

     dl.access dt {
         text-decoration: none;
         width: 30%;
         padding-right: 0.5em;
         font-weight: bold;
         letter-spacing: 0;
         white-space: nowrap;
     }

     .gf {
         text-align: left;
         font-family: sans-serif;
         letter-spacing: 0.1em;

     }
 }