/* CSS Document */
 @import url("https://fonts.googleapis.com/css?family=Roboto:300,500,700");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

 /* ===============================
	base
 =============================== */
 html {
   font-size: 62.5%;
 }

 body {
   font-family: "Roboto", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック",
     "Yu Gothic", "メイリオ", sans-serif;
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.8;
   font-feature-settings: "palt" 1;
   -webkit-text-size-adjust: 100%;
   letter-spacing: 0.1em;
 }

 .sct-wid {
   max-width: 600px;
   margin: 0 auto;
 }

 .btn_link {
   display: block;
   width: 47%;
   position: relative;
   margin-left: auto;
   margin-right: auto;
 }

 @media(hover: hover) {
   .btn_link:hover {
     transition: .3s background-color;
     background-color: #fff;
   }
 }


 .btn_link img {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: auto;
 }

 .btn_link img.-hover {
   opacity: 0;
   transition: .3s opacity;
 }

 @media(hover: hover) {
   .btn_link:hover img {
     opacity: 0;
   }

   .btn_link:hover img.-hover {
     opacity: 1;
   }
 }



 /* ===============================
body {
  background-image: url(../imgs/all.png);
  background-repeat: no-repeat;
  background-position-x: center;
}
 =============================== */

 @media screen and (min-width: 767px) {
   body {
     font-size: 1.4rem;
   }
 }

 #mv {
   position: relative;
   background-color: #BFF0F0;
   /* background-color: #757676; */
 }

 #mv figure {
   text-align: right;
 }
 #title figure {
   text-align: center;
 }

 .title {
   background-color: #f7b515;
   text-align: center;
   padding-bottom: 40px;
 }

 #title figure {
   position: relative;
 }

 #title figure img {
   margin-top: -64px;
   max-width: 750px;
   width: 100%;
 }

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

   #title figure img {
     margin-top: -9%;
   }
 }

 @media screen and (max-width: 414px) {
   #title figure img {}
 }

 main {
   width: 100%;
   margin: 0 auto;
   display: block;
   overflow: hidden;
 }

 section {
   text-align: center;
 }


 /* ===============================
mv
 =============================== */
 .mv {
   width: 100%;
   position: relative;
   /* margin-bottom: 8vw; */
 }

 .mv__img__box {
   position: relative;
   width: 100%;
   max-height: 1060px;
   max-width: 1000px;
   margin: 0 auto;
   background-image: url(../imgs/mv_bg.jpg);
   background-size: cover;
   background-position: bottom;
   overflow: hidden;
   padding: 16px 0 20px 10px;
 }

 .mv__img {
   position: relative;
   width: 100%;
   max-width: 600px;
   z-index: 1;
 }

 .mv__grade {
   width: 100%;
   height: 100px;
   position: absolute;
   bottom: 0;
   left: 0;
   background: linear-gradient(180deg, transparent 0%, transparent 50%, #fff 90%, #fff 100%);
 }

 @media screen and (min-width: 768px) {
   .mv__img__box {
     background-position: bottom;
     background-position-y: 50%;
   }
 }


 /* ---------------sct01------------------ */


 .sct1 {
   position: relative;
   overflow: hidden;
   padding: 0 20px;
 }

 .sct01_box {
   position: relative;
   max-width: 550px;
   width: 100%;
   margin: 0 auto;
   padding: 30px 0;
 }

 .sct01_img {
   width: 100%;
 }

 .sct01_btn_link {
   display: block;
   width: 80%;
   margin: 30px auto 0;
 }


 @media screen and (min-width: 768px) {

   .sct1 {}

   .sct01_min_box {
     width: 100%;
     padding: 3rem 0;
   }

   .sct01_box {}

   .sct01_link {
     bottom: 5rem;
   }

   .sct01_img.n2 {
     padding-top: 3rem;
   }

   .sct01_img.n3 {
     padding-top: 3rem;
   }
 }

 /* ---------------sct01------------------ */


 /* ---------------sct02------------------ */

 .sct2 {
   position: relative;
   background-color: #fff;
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
 }

 .sct02_box {
   position: relative;
   overflow: hidden;
 }

 .sct02_box::before {
   content: "";
   display: block;
   width: 125px;
   height: 100px;
   background-image: url(../imgs/reaf_1.png);
   background-position: center;
   background-size: cover;
   position: absolute;
   bottom: 11%;
   right: -8%;
 }


 @media screen and (min-width: 600px) {
   .sct02_box {
     overflow: inherit;
   }

   .sct02_img {
     width: 100%;
   }

 }

 /* ---------------sct02------------------ */

 /* ---------------sct03------------------ */

 .sct3 {
   background-color: #fff;
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
 }

 .sct03_box {
   position: relative;
   max-width: 600px;
   width: 100%;
   margin: 0;
   padding-bottom: 10px;
 }

 .sct03_01_img.-img01 {
   padding: 16px 30px;
 }

 @media screen and (min-width: 768px) {
   .sct03_box {
     padding-bottom: 20px;
   }
 }

 /* ---------------sct03------------------ */

 /* ---------------sct04------------------ */
 .sct4 {
   width: 100%;
 }

 .sct04_box {
   position: relative;
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
   background-image: url(../imgs/sct04_bg.png);
   background-size: contain;
   background-repeat: no-repeat;
 }

 .sct04_box::before {
   content: "";
   display: block;
   width: 125px;
   height: 100px;
   background-image: url(../imgs/reaf_2.png);
   background-position: center;
   background-size: cover;
   position: absolute;
   top: 52%;
   left: -5%;
 }

 .sct04_01_img {
   padding: 40px 0 10px 20px;
 }

 .sct04_03_img {
   position: relative;
 }

 @media screen and (min-width: 768px) {
   .sct4 {}

   .sct04_01_img {
     padding-top: 70px;
   }
 }

 /* ---------------sct04------------------ */


 /* ---------------sct05------------------ */
 .sct5 {
   width: 100%;
 }

 .sct05_box {
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
   background-image: url(../imgs/sct05_bg.png);
   background-repeat: no-repeat;
   background-position-y: 100%;
   background-size: cover;
 }

 .sct05_01_img {
   padding: 20px 0 16px 0;
 }

 /* ---------------sct05------------------ */

 /* ---------------sct06------------------ */
 .sct6 {
   padding: 60px 0;
   width: 100%;
   background: linear-gradient(180deg, #fff 0%, #fff 15.5%, #D6D6D6 15.5%, #D6D6D6 100%);
 }

 .sct06_box {
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
   padding: 0 16px;
 }

 .sct06_btn_link {
   display: block;
   width: 80%;
   margin: 20px auto 0;
 }

 @media screen and (min-width: 768px) {
   .sct6 {
     padding-top: 80px;
   }

 }

 /* ---------------sct06------------------ */

 /* ---------------sct07------------------ */
 .sct7 {
   width: 100%;
 }

 .sct07_box {
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
   padding: 40px 0 26px 16px;
 }

 @media screen and (min-width: 600px) {
   .sct7 {}

   .sct07_box {
     padding: 40px 0;
   }
 }

 /* ---------------sct07------------------ */

 /* ---------------sct08------------------ */
 .sct8 {
   width: 100%;
 }

 .sct08_box {
   max-width: 600px;
   height: 100%;
   margin: 0 auto;
 }

 @media screen and (min-width: 768px) {}


 /* ---------------sct08------------------ */

 /* ---------------sct09------------------ */
 .sct9 {
   width: 100%;
 }

 .sct09_box {
   max-width: 600px;
   height: 100%;
   margin: 0 auto;
   padding: 0 30px;
 }

 .sct09_01_img {
   padding-bottom: 20px;
 }

 .sct09_tel_link {
   display: block;
   width: 80%;
   margin: 0 auto;
 }


 @media screen and (min-width: 768px) {
   .sct09_box {
     padding-bottom: 40px;
   }
 }


 /* ---------------sct09------------------ */

 /* ---------------sct10------------------ */
 .sct10 {
		max-width: 600px;
   height: 100%;
   margin: 0 auto 60px;
   position: relative;
 }

/*  .sct10_box {
   max-width: 600px;
   height: 100%;
   margin: 0 auto;
   position: relative;
 } */

 @media screen and (min-width: 600px) {
   .sct09 {}
 }

 .kc-calendar {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   background: #fff;
   height: 780px;
   width: 100%;
 }

 .kc-calendar iframe {
   width: 100%;
   max-width: 800px;
 }

 @media screen and (max-width: 768px) {
   .kc-calendar {
     margin-left: auto;
     margin-right: auto;
     width: 95%;
     height: 770px;
   }
 }


 .ifrme__box {
   width: 100%;
   aspect-ratio: 315/196;
   padding-top: 62%;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   margin-bottom: 18px;
 }

 @media screen and (min-width: 600px) {
   .ifrme__box {
     margin-bottom: 36px;
   }
 }

 .ifrme__box iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }



 /* ---------------sct10------------------ */

 .container.footer {
   width: 100%;
   background-color: #fff;
 }

 .footer_box {
   max-width: 600px;
   height: 100%;
   margin: 0 auto;
   position: relative;
 }

 .footer_txt {
   padding: 0 30px;
   width: 85%;
 }

 .footer_link {
   display: block;
   width: 30%;
   margin: 50px auto;
 }

 @media screen and (min-width: 768px) {}


 /* ===============================
	page top
 =============================== */

 .page-top {
   display: none;
   margin: 0;
   padding: 0;
 }

 .page-top p {
   transition: all .5s;
 }

 .page-top p {
   margin: 0;
   padding: 0;
   position: fixed;
   right: 20px;
   bottom: 12px;
   z-index: 99;
 }

 .move-page-top {
   display: block;
   background: rgba(0, 0, 0, 0.7);
   width: 50px;
   height: 50px;
   cursor: pointer;
   color: #fff;
   line-height: 48px;
   font-size: 24px;
   text-decoration: none;
   text-align: center;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
 }

 @media(hover: hover) {
   .move-page-top:hover {
     background: rgba(0, 0, 0, 0.3);
   }
 }

 @media screen and (max-width: 767px) {
   .page-top p {
     right: 0;
     bottom: 0;
   }
 }

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


 /* メディアクエリサンプル */
 /* ===============================
	device setting
 =============================== */
 @media screen and (min-width: 1281px) {
   /*画面幅が1281px以上（PC専用スタイル）*/
 }

 @media screen and (max-width: 1280px) {
   /*画面幅が1280px以下（タブレット・スマホ共通スタイル）*/
 }

 @media screen and (min-width: 768px) and (max-width: 1280px) {
   /*画面幅が768px～1280px（タブレット専用スタイル）*/
 }

 @media screen and (max-width: 767px) {
   /*画面幅が767px以下（スマートフォン専用スタイル）*/
 }

 @media screen and (max-width: 414px) {
   /*画面幅が414px以下（スマートフォン縦向き専用スタイル）*/
 }

 /* 印刷用スタイル */
 /* ===============================
	print setting
 =============================== */
 @media print {
   .printNl {
     page-break-before: always;
   }
 }

 .footer figure {
   text-align: center;
 }