/* #region スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeUp {
   animation-name: fadeUpAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

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

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

 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeUpTrigger {
   opacity: 0;
 }

 /* #endregion*/

 /* #region ハンバーガーメニュー */
 .menu-btn {
   position: absolute;
   display: flex;
   height: 30px;
   justify-content: right;
   right: 1em;
   top: 3.7vh;
   z-index: 30;
 }

 .menu-btn span,
 .menu-btn span:before,
 .menu-btn span:after {
   content: '';
   display: block;
   height: 3px;
   width: 25px;
   border-radius: 3px;
   background-color: #ffffff;
   position: absolute;
   z-index: 31;
 }

 .menu-btn span:before {
   bottom: 8px;
 }

 .menu-btn span:after {
   top: 8px;
 }

 #menu-btn-check:checked~.menu-btn span {
   /*メニューオープン時は真ん中の線を透明にする*/
   background-color: rgba(0, 0, 0, 0);
 }

 #menu-btn-check:checked~.menu-btn span::before {
   bottom: 0;
   transform: rotate(45deg);
 }

 #menu-btn-check:checked~.menu-btn span::after {
   top: 0;
   transform: rotate(-45deg);
 }

 #menu-btn-check {
   display: none;
 }

 .menu-content {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 7vh;
   right: 100%;
   /*leftの値を変更してメニューを画面外へ*/
   z-index: 999;
   background-color: rgba(0, 0, 0, 0.9);
   /*メニューオープン時は真ん中の線を透明にする*/
   transition: all 0.5s;
   /*アニメーション設定*/

 }

 .menu-content ul {
   padding-top: 7vh;
   padding-left: 4vw;
 }

 .menu-content ul li {
   list-style: none;
   padding: 2vh 0;
 }

 .menu-content ul li a {
   display: block;
   /* font-family: 'Comfortaa', 'cursive'; */
   width: 100%;
   font-size: 6vw;
   box-sizing: border-box;
   color: #ffffff;
   text-decoration: none;
   /* padding: 15px 15px 20px 10px; */
   position: relative;
   line-height: 1;
 }

 .menu-content ul li p {
   padding-top: 1vh;
   font-size: 3vw;
   color: #ffffff;
 }


 #menu-btn-check:checked~.menu-content {
   right: 0;
   /*メニューを画面内へ*/
 }

 /* PCサイズ */
 @media (min-width:768px) {
   .hamburger-menu {
     display: none;
   }

   .menu-content ul li a {
     font-size: 2vw;
   }

   .menu-content ul li p {
     font-size: 0.8vw;
   }

   .menu-btn span,
   .menu-btn span:before,
   .menu-btn span:after {
     display: none;
   }
 }

 /* #endregion*/

 /* #region 下スクロールアイコン */
 .down_scroll_container {
   position: relative;
   width: 5%;
   margin: auto;
   top: -25vh;
 }

 .down_chevron {
   position: absolute;
   width: 28px;
   height: 8px;
   opacity: 0;
   transform: scale3d(0.5, 0.5, 0.5);
   animation: down_move 3s ease-out infinite;
   margin-top: 1.2em;
 }

 .down_chevron:first-child {
   animation: down_move 3s ease-out 1s infinite;
 }

 .down_chevron:nth-child(2) {
   animation: down_move 3s ease-out 2s infinite;
 }

 .down_chevron:before,
 .down_chevron:after {
   content: ' ';
   position: absolute;
   top: 0;
   height: 100%;
   width: 51%;
   background: #000000;
 }

 .down_chevron:before {
   left: 0;
   transform: skew(0deg, 30deg);
 }

 .down_chevron:after {
   right: 0;
   width: 50%;
   transform: skew(0deg, -30deg);
 }

 @keyframes down_move {
   25% {
     opacity: 1;

   }

   33% {
     opacity: 1;
     transform: translateY(30px);
   }

   67% {
     opacity: 1;
     transform: translateY(40px);
   }

   100% {
     opacity: 0;
     transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
   }
 }

 .down_text {
   display: block;
   /* margin-top: 75px; */
   margin-left: -40px;
   font-size: 15px;
   color: #000000;
   text-transform: uppercase;
   white-space: nowrap;
   opacity: .25;
   animation: pulse 2s linear alternate infinite;
   display: inline-block;
 }

 @keyframes pulse {
   to {
     opacity: 1;
   }
 }

 /* #endregion */

 /* #region 上スクロールアイコン */
 .up_scroll_container {
   position: relative;
   width: 100%;
   margin: auto;
   top: -5em;
 }

 .up_chevron {
   position: absolute;
   width: 28px;
   height: 8px;
   opacity: 0;
   transform: scale3d(0.5, 0.5, 0.5);
   animation: up_cmove 3s ease-out infinite;
   margin-top: 1.2em;
   top: 0.5em;
   left: 47vw;
 }

 .up_chevron:first-child {
   animation: up_cmove 3s ease-out 1s infinite;
 }

 .up_chevron:nth-child(2) {
   animation: up_cmove 3s ease-out 2s infinite;
 }

 .up_chevron:before,
 .up_chevron:after {
   content: ' ';
   position: absolute;
   top: 0;
   height: 100%;
   width: 51%;
   background: #fff;
 }

 .up_chevron:before {
   left: 0;
   transform: skew(0deg, -30deg);
 }

 .up_chevron:after {
   right: 0;
   width: 50%;
   transform: skew(0deg, 30deg);
 }

 @keyframes up_cmove {
   100% {
     opacity: 0;
   }

   67% {
     opacity: 1;
     transform: translateY(30px);
   }

   33% {

     opacity: 1;
     transform: translateY(40px);
   }

   25% {

     opacity: 0;
     transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
   }
 }

 .up_text {
   display: block;
   margin-top: 50px;
   font-size: 15px;
   color: #fff;
   text-transform: uppercase;
   white-space: nowrap;
   opacity: .25;
   animation: up_pulse 2s linear alternate infinite;

 }

 @keyframes up_pulse {
   to {
     opacity: 1;
   }
 }

 /* PCサイズ */
 @media (min-width:768px) {
   .down_scroll_container {
     width: 0%;
   }

   .up_chevron {
     left: 34vw;
   }
 }

 /* #endregion */

 /* #region */
 /*** ボタンブロック ***/
 .btn-rot {
   text-align: center;
   margin: 2rem;
   overflow: hidden;
   /*必須*/
 }

 /* ボタン（リンク）部分 */
 .btn-rot a {
   text-decoration: none;
   /*下線削除*/
   display: inline-block;
   position: relative;
   /*疑似要素作成用*/
   padding: 0.75em 4em;
   margin: 1rem;
   background: white;
   /*ボタン色*/
   color: green;
   /*文字色*/
   font-weight: bold;
   /*太字*/
 }

 /*ボタンの枠線*/
 .btn-rot a:before {
   content: "";
   position: absolute;
   top: -3px;
   left: -3px;
   width: 100%;
   height: 100%;
   border: 3px solid green;
   z-index: -2;
 }

 /*** ボタン線上の光沢 ***/
 .btn-rot a:after {
   content: "";
   position: absolute;
   top: -30px;
   left: -100px;
   width: 100px;
   height: 30px;
   background: white;
   /*光沢の色は背景色*/
   filter: blur(12px);
   /*ぼかし*/
   animation: 3s arround-circle linear infinite;
   /*枠線場を周るアニメーション*/
   z-index: -1;
 }

 /*** 線上を回るアニメーション ***/
 @keyframes arround-circle {

   /**************
  0%~40%：左上から右上
  40%~50%：右上から右下
  50%~90%：右下から左下
  90%~100%：左下から左上
  **************/
   0% {
     top: -30px;
     left: -100px;
   }

   40% {
     top: -30px;
     left: 100%;
     /*右まで移動*/
   }

   50% {
     top: 100%;
     /*下まで移動*/
     left: 100%;
   }

   90% {
     top: 100%;
     left: -100px;
     /*左まで移動*/
   }

   100% {
     top: -30px;
     /*元の位置*/
     left: -100px;
   }
 }

 /* #endregion */


 .updown {
   /* アニメーションの名前 */
   animation-name: UpDown;
   /* アニメーションの１回分の長さ */
   animation-duration: 1.5s;
   /* アニメーションの回数 */
   animation-iteration-count: infinite;
   /* アニメーションの進行具合 */
   animation-timing-function: ease-in-out;
   /* アニメーション再生の向き */
   animation-direction: alternate;
 }

 /* アニメーションの設定 */
 @keyframes UpDown {

   /* 開始地点 */
   0% {
     /* Y軸0px */
     transform: translateX(0);
   }

   /* 終了地点 */
   100% {
     /* X軸50px */
     transform: translateX(15px);
   }
 }


 /*#region 問合せフォームのスクロール */
 /*スクロールダウン全体の場所*/
 .scrolldown {
   /*描画位置※位置は適宜調整してください*/
   position: relative;
   top: 6em;
   left: 50%;
   /* transform: translate(-50%, 0);  */
   display: inline-block;
 }

 /*Scrollテキストの描写*/
 .scrolldown span {
   /*描画位置*/
   position: absolute;
   left: 10px;
   bottom: 0px;
   /*テキストの形状*/
   color: #000000;
   background: -webkit-linear-gradient(0deg, #3992C8, #97BA40);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

   font-size: 1em;
   letter-spacing: 0.05em;
   /*縦書き設定*/
   -ms-writing-mode: tb-rl;
   -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
   
 }

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

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

   100% {
     bottom: -5px;
   }
 }

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

   50% {
     opacity: 1;
   }

   80% {
     opacity: 0.9;
   }

   100% {
     opacity: 0;
   }
 }

 /* 線の描写 */
 .scrolldown:after {
   content: "";
   /*描画位置*/
   position: absolute;
   bottom: 0;
   left: 0;
   /*線の形状*/
   width: 2px;
   height: 100px;
   background: linear-gradient(to right, #3992C8 0%, #97BA40 100%);
 }

 /* #endregion */