@charset "utf-8";
/* CSS Document */


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

   Fonts

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

/*Zen Maru Gothic 和丸ゴシック
-----------------------------------------------------------*/

/*細文字*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

/*font-family: 'Zen Maru Gothic', sans-serif;*/


/*太文字*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@900&display=swap');

/*font-family: 'Zen Maru Gothic', serif;*/



/*Noto Sans JP 和角ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

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

/*font-family: 'Noto Sans JP', sans-serif;*/



/*Passion One   H2英文
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');

/*font-family: 'Passion One', sans-serif;*/



/*Quicksand   数字用 英文
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');

/*font-family: 'Quicksand', sans-serif;*/



/*Urbanist　欧文ゴシック★
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@600&display=swap');

/*font-family: 'Urbanist', sans-serif;*/










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

   Wrap,Contents-wrap,Footer,Contents

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

/* Wrap
------------------------------------------------------------*/
.wrap{
	width: 100%;
	overflow: hidden;
}

.about-contents-wrap{/*上部*/
	width: 100%;
	padding: 0 0 50px 0;
	background-image: url(../images/sun-tornado.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents-wrap{/*レギュラー*/
	width: 100%;
	padding: 0 0 50px 0;
	background-image: url(../images/protruding-squares.png);
	background-repeat: repeat;
}

.other-contents-wrap{/*下部*/
	width: 100%;
	padding: 50px 0 100px 0;
	background-image: url(../images/sun-tornado.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.footer-wrap{
	width: 100%;
}

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

.about-contents-wrap{
	padding: 0 0 25px 0;
}

.contents-wrap{
	padding: 0 0 25px 0;
}
	
}



/* Contents
------------------------------------------------------------*/
.contents900{
	width: 900px;
	margin: 0 auto;
}

.contents1100{
	width: 1100px;
	margin: 0 auto;
}

.contents800{
	width: 800px;
	margin: 0 auto;
}

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

.contents1100{
	width: 95%;
}
	
}

@media screen and (max-width:900px) {
	
.contents900{
	width: 95%;
}
	
.contents800{
	width: 90%;
}
	
}



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

   Z-index 大まかなエリア指定

--------------------------------------------------------------------------------------------- */
#header{
	position: relative;
	z-index: 750;
}

.main-visual-wrap{
	position: relative;
	z-index: 1;
}

.contents-entry-box{
	position: relative;
	z-index: 250;
}

.question{
	position: relative;
	z-index: 250;
}

.regular-contents{
	position: relative;
	z-index: 250;
}

.regular-img{
	position: relative;
	z-index: 500;
}

.detail-box .detail-img{
	position: relative;
	z-index: 500;
}
.detail-box .text-box{
	position: relative;
	z-index: 500;
}

.eg-h2{
	position: relative;
	z-index: 500;
}

.h2-bg .bg-wrap{
	position: relative;
	z-index: 500;
}

.clone-nav {
  z-index: 750;
}

#PageTop{
	z-index: 750;
}




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

   H2

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

/* 背景色が流れてくる レギュラーh2
------------------------------------------------------------*/
.h2-bg .bg-wrap{
	position: relative;
	display: block;
	margin-top: 5px;
}

.h2-bg.is-animated .bg-wrap::before {
  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: #2c4473;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}

.h2-bg .bg-wrap .h2-text {
  display: inline-block;
  font-size: clamp(20px, 3vw, 42px);
  font-weight: bold;
  padding: 2.5%;
  position: relative;
  z-index: 1;
  line-height: 1;
  font-family: 'Zen Maru Gothic', serif;
  color: #fff;
}

@keyframes bg {
	
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
	
}


/* Other h2
------------------------------------------------------------*/
.h2-other-text{
	text-align: center;
	font-weight: bold;
	line-height: 1 !important;
	font-family: 'Zen Maru Gothic', serif;
	margin: 0 0 50px 0;
}





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

   P,他フォントサイズ

--------------------------------------------------------------------------------------------- */
.text-144{
	font-size: clamp(96px, 2vw, 144px);
}

.text-96{
	font-size: clamp(84px, 2vw, 96px);
}

.text-84{
	font-size: clamp(72px, 3vw, 84px);
}

.text-72{
	font-size: clamp(60px, 2vw, 72px);
}

.text-60{
	font-size: clamp(48px, 2vw, 60px);
}

.text-48{
	font-size: clamp(36px, 2vw, 48px);
}

.text-42{
	font-size: clamp(30px, 2vw, 42px);
}

.text-36{
	font-size: clamp(24px, 2vw, 36px);
}

.text-30{
	font-size: clamp(20px, 2vw, 30px);
}

.text-24{
	font-size: clamp(20px, 2vw, 24px);
}

.text-20{
	font-size: clamp(18px, 2vw, 20px);
}

.text-18{
	font-size: clamp(16px, 2vw, 18px);
}

.text-16{
	font-size: clamp(14px, 2vw, 16px);
}

.text-14{
	font-size: clamp(12px, 2vw, 14px);
}

.text-12{
	font-size: clamp(10px, 2vw, 12px);
}


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

   Backgroundカラー

--------------------------------------------------------------------------------------------- */
.yellow-back{
	background: #f5deb3;
}
.blue-back{
	background: #afeeee;
}
.green-back{
	background: #eee8aa;
}
.purple-back{
	background: #d8bfd8;
}
.pink-back{
	background: #ffc0cb;
}



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

   Textカラー

--------------------------------------------------------------------------------------------- */
.dark-blue-text{
	color: #2c4473;
}
.red-text{
	color: #f00;
}
.orange-text{
	color: darkorange;
}
.beige-text{
	color: #ffcc66;
}




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

   Br

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

.br-1920{
	display: block;
}
.br-1400{
	display: none;
}
.br-1200{
	display: none;
}
.br-1000{
	display: none;
}
.br-700{
	display: none;
}
.br-500{
	display: none;
}
.br-400{
	display: none;
}
.br-350{
	display: none;
}

@media screen and (max-width:1400px) {
.br-1400{
	display: block;
}
}
@media screen and (max-width:1200px) {
.br-1200{
	display: block;
}
}
@media screen and (max-width:1000px) {
.br-1000{
	display: block;
}
}
@media screen and (max-width:700px) {
.br-700{
	display: block;
}
}
@media screen and (max-width:500px) {
.br-500{
	display: block;
}
}
@media screen and (max-width:400px) {
.br-400{
	display: block;
}
}
@media screen and (max-width:350px) {
.br-350{
	display: block;
}
}



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

   Parallax指定

--------------------------------------------------------------------------------------------- */
.parallax_content{
	min-height: 500px;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
}

.parallax_content.img_bg_01{
	background-image: url(../images/minecraft-1920_back01.png);
}
.parallax_content.img_bg_02{
	background-image: url(../images/minecraft-1920_back02.png);
}
.parallax_content.img_bg_03{
	background-image: url(../images/minecraft-1920_back05.png);
}
.parallax_content.img_bg_04{
	background-image: url(../images/minecraft-1920_back04.png);
}
.parallax_content.img_bg_05{
	background-image: url(../images/minecraft-1920_back03.png);
}


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

.parallax_content{
	height: 100%;
	min-height: 50vh;/*30vh*/
	background-image: none;
	background-attachment: scroll;
}
	
.parallax::before{
    content: "";
    display: block;
	position: fixed;
    top: 0;
    left: 0;
    /*-webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);*/
    width: 100%;
    min-height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}	
	
.parallax_content.img_bg_01::before{
	background-image: url(../images/minecraft-1920_back01.png);
}
.parallax_content.img_bg_02::before{
	background-image: url(../images/minecraft-1920_back02.png);
}
.parallax_content.img_bg_03::before{
	background-image: url(../images/minecraft-1920_back05.png);
}
.parallax_content.img_bg_04::before{
	background-image: url(../images/minecraft-1920_back04.png);
}
.parallax_content.img_bg_05::before{
	background-image: url(../images/minecraft-1920_back03.png);
}
	
}




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

   ズームインアニメーション class名 anim-box zoomin anim

--------------------------------------------------------------------------------------------- */
.anim-box.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



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

   ポップアップアニメーション class名 anim-box popup anim

--------------------------------------------------------------------------------------------- */
.anim-box.popup.is-animated {
  animation: popup 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; /*0.6s*/
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}



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

   Spinner 回転する四角アニメ

--------------------------------------------------------------------------------------------- */
.fulfilling-square-spinner , .fulfilling-square-spinner * {
        box-sizing: border-box;
      }

      .fulfilling-square-spinner {
        animation: fulfilling-square-spinner-animation 4s infinite ease;
      }

      .fulfilling-square-spinner .spinner-inner {
        vertical-align: top;
        display: inline-block;
        width: 100%;
        opacity: 1;
        animation: fulfilling-square-spinner-inner-animation 4s infinite ease-in;
      }

      @keyframes fulfilling-square-spinner-animation {
        0% {
          transform: rotate(0deg);
        }

        25% {
          transform: rotate(180deg);
        }

        50% {
          transform: rotate(180deg);
        }

        75% {
          transform: rotate(360deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes fulfilling-square-spinner-inner-animation {
        0% {
          height: 0%;
        }

        25% {
          height: 0%;
        }

        50% {
          height: 100%;
        }

        75% {
          height: 100%;
        }

        100% {
          height: 0%;
        }
      }


/* yellow,blue,green,purple,pink 指定
------------------------------------------------------------*/

/* square01
------------------------------------------------------------*/
.square01{
	position: absolute;
	top: -1.0%;
	left: -7.0%;
	height: 120px;
	width: 120px;
	z-index: 350;
}

.yellow-square01{
	border: 6px solid #ffcc66;
}
.yellow-inner01{
	background-color: #ffcc66;
}

.blue-square01{
	border: 6px solid #87cefa;
}
.blue-inner01{
	background-color: #87cefa;
}

.green-square01{
	border: 6px solid #99cc66;
}
.green-inner01{
	background-color: #99cc66;
}

.purple-square01{
	border: 6px solid #d38dca;
}
.purple-inner01{
	background-color: #d38dca;
}

.pink-square01{
	border: 6px solid #ff99cc;
}
.pink-inner01{
	background-color: #ff99cc;
}

@media screen and (max-width:700px) {
	
.square01{
	left: -3.5%;
	height: 60px;
	width: 60px;
}
	
}

/* square02
------------------------------------------------------------*/
.square02{
	position: absolute;
	top: 21%;
	right: -3.5%;
	height: 60px;
	width: 60px;
	z-index: 350;
}

.yellow-square02{
	border: 3px solid #ffcc66;
}
.yellow-inner02{
	background-color: #ffcc66;
}

.blue-square02{
	border: 3px solid #87cefa;
}
.blue-inner02{
	background-color: #87cefa;
}

.green-square02{
	border: 3px solid #99cc66;
}
.green-inner02{
	background-color: #99cc66;
}

.purple-square02{
	border: 3px solid #d38dca;
}
.purple-inner02{
	background-color: #d38dca;
}

.pink-square02{
	border: 3px solid #ff99cc;
}
.pink-inner02{
	background-color: #ff99cc;
}

@media screen and (max-width:700px) {
	
.square02{
	right: 3.5%;
	height: 30px;
	width: 30px;
}
	
}

/* square03
------------------------------------------------------------*/
.square03{
	position: absolute;
	bottom: 35.0%;/*24.5%*/
	left: -1.5%;
	height: 60px;
	width: 60px;
	z-index: 350;
}

.yellow-square03{
	border: 3px solid #ffcc66;
}
.yellow-inner03{
	background-color: #ffcc66;
}

.blue-square03{
	border: 3px solid #87cefa;
}
.blue-inner03{
	background-color: #87cefa;
}

.green-square03{
	border: 3px solid #99cc66;
}
.green-inner03{
	background-color: #99cc66;
}

.purple-square03{
	border: 3px solid #d38dca;
}
.purple-inner03{
	background-color: #d38dca;
}

.pink-square03{
	border: 3px solid #ff99cc;
}
.pink-inner03{
	background-color: #ff99cc;
}

@media screen and (max-width:700px) {
	
.square03{
	left: 1.5%;
	height: 30px;
	width: 30px;
}
	
}

/* square04
------------------------------------------------------------*/
.square04{
	position: absolute;
	bottom: 15%;/*-0.5%*/
	right: -7.0%;
	height: 120px;
	width: 120px;
	z-index: 350;
}

.yellow-square04{
	border: 6px solid #ffcc66;
}
.yellow-inner04{
	background-color: #ffcc66;
}

.blue-square04{
	border: 6px solid #87cefa;
}
.blue-inner04{
	background-color: #87cefa;
}

.green-square04{
	border: 6px solid #99cc66;
}
.green-inner04{
	background-color: #99cc66;
}

.purple-square04{
	border: 6px solid #d38dca;
}
.purple-inner04{
	background-color: #d38dca;
}

.pink-square04{
	border: 6px solid #ff99cc;
}
.pink-inner04{
	background-color: #ff99cc;
}

@media screen and (max-width:700px) {
	
.square04{
	right: -3.5%;
	height: 60px;
	width: 60px;
}
	
}



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

   Footer

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

/* Logo-area
------------------------------------------------------------*/
.logo-area{
	width: 100%;
	padding: 25px 4%;
	background-image: url(../images/protruding-squares.png);
	background-repeat: repeat;
}

.foot-logo{
	width: 300px;
	margin: 0 auto;
}
.foot-logo img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:500px) {
	
.foot-logo{
	width: 200px;
	margin: 0 auto;
}
	
}


/* Foot-nav-area
------------------------------------------------------------*/
.foot-nav-area{
	width: 100%;
	padding: 25px 4%;
	background: #2ba6e1;
}

.foot-nav-area ul{
	width: 100%;
}

.foot-nav-area ul li{
	float: left;
	text-align: center;
	line-height: 1;
	font-size: clamp(12px, 3vw, 14px);
	width: 24.25%;
	margin-right: 1%;
}
.foot-nav-area ul li.last01{
	margin-right: 0;
}

.foot-nav-area ul li a{
	display: block;
	background: #fff;
	color: #333;
	padding: 10px;
}
.foot-nav-area ul li a:hover{
	background: #eee;
}

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

.foot-nav-area ul li{
	width: 49.5%;
	margin-bottom: 1%;
}
.foot-nav-area ul li.last02{
	margin-right: 0;
}
	
}


/* Copyright
------------------------------------------------------------*/
.copy-area{
	width: 100%;
	padding: 0 0 150px 0;
	background: #2ba6e1;
}

.copy{
	padding: 10px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: clamp(12px, 3vw, 14px);
	border-top: 0.5px solid #fff;
	border-bottom: 0.5px solid #fff;
	width: 800px;
}

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

.copy{
	width: 90%;
}
	
}




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

  PageTop-Link

--------------------------------------------------------------------------------------------- */
#PageTop{
	position: fixed;
	bottom: 80px;
	right: 1%;
}

#PageTop a .fa-caret-square-up{
	color: #2c4473;
	font-size: 72px;
}
#PageTop a:hover .fa-caret-square-up{
	opacity: 0.75;
}

@media screen and (max-width:700px) {
	
#PageTop a .fa-caret-square-up{
	font-size: 60px;
}
	
}



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

  Clone-nav フッター固定 Tel,無料体験,Map

--------------------------------------------------------------------------------------------- */
.clone-nav {
	display: none;
}
	
.clone-nav {/*共通*/
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: #2c4473;
  transition: .3s;
  transform: translateY(100%);
}
.is-show {/*共通*/
  transform: translateY(0);
}

#clone-link ul li a{/*共通*/
	display:block;
	float:left;
	cursor:pointer;
	text-decoration:none;
}


/* Tel
-----------------------------------------------------------*/
#clone-link ul li.foot-tel a{
	width:30%;
	background: #2c4473;
	padding:15px 2%;
}
#clone-link ul li.foot-tel a:hover{
	opacity:0.75;
}
#clone-link ul li.foot-tel a .tel-asking{
	text-align:center;
	color:#fff;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1;
	font-weight: bold;
}
.fa-phone-square-alt{
	color: #fff;
}


/* 無料体験申込
-----------------------------------------------------------*/
#clone-link ul li.foot-reserve a{
	width:40%;
	background: #f00;
	padding:15px 2%;
}
#clone-link ul li.foot-reserve a:hover{
	opacity:0.75;
}
#clone-link ul li.foot-reserve a .reserve-asking{
	text-align:center;
	color:#fff;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1;
	font-weight: bold;
}
.clone-nav .fa-angle-double-right{
	color: #fff;
	font-size: clamp(14px, 3vw, 18px);
}


/* Map
-----------------------------------------------------------*/
#clone-link ul li.foot-map a{
	width:30%;
	background: #2c4473;
	padding:15px 2%;
}
#clone-link ul li.foot-map a:hover{
	opacity:0.75;
}
#clone-link ul li.foot-map a .map-asking{
	text-align:center;
	color:#fff;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1;
	font-weight: bold;
}
.clone-nav .fa-map-marker-alt{
	color: #fff;
}