html {
    scroll-behavior: smooth;
}
body {
	padding: 0;
	margin: 0;
    background-color: #fff;
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover { opacity: 0.6; }
img { display: block; }

#header {
	width: 92%;
	max-width:1200px;
    margin: 2em auto 1em;
}
.headerInner {
	width:100%;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
.headerInner span {
	font-size: 16px;
	line-height: 28px;
	font-weight: 700;
}
.headerInner a#headermenu_logo {
	width: 40%;
}
.headerInner a#headermenu_logo img {
	width: 100%;
}
#wrapper {
    background: #b6e4bc;
    background-image: url(../images/back.svg);
    background-size: auto;
}
#wrapper01 {
    background: #ecd5df;
}
#wrapper02 {
    background: #dde0c6;
}
#wrapper03 {
    background: #9fd1ff;
}
#wrapper .inbox,
#wrapper01 .inbox,
#wrapper02 .inbox,
#wrapper03 .inbox {
	font-size: 1.2em;
	line-height: 1.8;
	width: 92%;
	max-width: 1200px;
    margin: 0 auto;
    padding: 4em 0;
    position: relative;
}
#wrapper .inbox h1,
#wrapper01 .inbox h1,
#wrapper02 .inbox h1,
#wrapper03 .inbox h1 {
	font-size: 2.8rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -2px;
	margin: 0;
	padding: 0;
}
#wrapper .inbox h1 span,
#wrapper01 .inbox h1 span {
	font-size: 130%;
	color: #e30b20;
}
.p-kazari {
	position: absolute;
	right: calc(58% + 262px);
	top: 150px;
	width: 115px;
	z-index: 999;
}
.top_word {
	width: 60%;
	margin: 4em auto 8em;
}
#wrapper .inbox h2,
#wrapper01 .inbox h2,
#wrapper02 .inbox h2
#wrapper03 .inbox h2 {
	font-size: 2.0rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.4rem;
	margin: 0;
	padding: 0;
}
#wrapper .inbox h3,
#wrapper01 .inbox h3,
#wrapper02 .inbox h3,
#wrapper03 .inbox h3 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05rem;
}

.container {
	width: 75%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 2em auto;
}
.item {
	width: 20%;
	position: relative;
	text-align: center;
}
.container .item img {
	border: 1px solid #000;
	border-radius: 50%;
}
.container02 {
	width: 90%;
	display:flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0 auto;
}
.container02 .item01 {
	width: 20%;
	position: relative;
	text-align: left;
	padding: 0.3em 1.5em 0;
}
.container02 .item01 p {
	font-size: 1rem;
	line-height: 1.5;
}
.container02 .item02 {
	width: 46%;
	position: relative;
	text-align: left;
}
.container02 .item01 img,
.container02 .item02 img {
	width: 100%;
}
.container03 .item img {
	width: 100%;
	border: 5px solid #005bab;
	border-radius: 15px;
}
.container03 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 2em auto;
}
.container03 .item {
	width: 30%;
}
.container03 .item p,
.container03 .item03 p {
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
	margin-bottom: 1.5em;
}
.container03 .item p.lead {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05rem;
	margin-bottom: 0;
}
.container03 .item03 p span {
	font-size: 1.2rem;
	font-weight: 800;
	margin-bottom: 0;
}
.container03 .item03 p.lesson {
	margin: 0;
}
.container03 .item02 {
	width: 30%;
}
.container03 .item03 {
	width: 65%;
}
.container_coach {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 2em auto;
}
.container_coach .item {
	width: 48%;
	position: relative;
	text-align: left;
}
.container_coach .item img {
	width: 100%;
}
.coach_waku {
	border: 4px solid #005bab;
	border-radius: 15px;
	padding: 1.5em 3.5em;
}
.coach_ttl {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05rem;
}
.lesson_waku {
	border: 12px solid #8f8f8f;
}
.price_wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 2em auto;
}
.price_wrapper .item01 {
	width: 35%;
}
.price_wrapper .item02 {
	width: 60%;
}
.price_wrapper .item02 p {
	font-size: 1rem;
	line-height: 1.5;
}

.system_waku {
	border: 2px solid red;
	padding: 1em 2em;
	border-radius: 15px;
}

.valign_cent {
	align-items: center;
}
p {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
}
.indent {
	padding-left: 1em;
	text-indent: -1em;
}
.t-green { color: #00ca43; }
.t-red { color: #e50012; }
.t-red_line {
	color: #e50012;
	border: 1px solid #e50012;
	padding: 12px;
}
.ttl {
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1rem;
}
.sub_ttl {
   font-size: 1.0rem;
   font-weight: 500;
   margin-top: 1em;
}
.t-base { font-size: 1.1rem; }
.t-base02 { font-size: 0.8rem; }
.t-left { text-align: left; }
.t-right { text-align: right; }
.fit-just {
	width: fit-content;
	margin: 0 auto;
}

.w800 { max-width: 800px; }
.w700 { max-width: 700px; }
.w600 { max-width: 600px; }
.w500 { max-width: 500px; }
.w400 { max-width: 400px; }
.w100per { width: 100%; }
.w80per { width: 100%; margin: 0 auto; }
.w50per { width: 50%; }
.w30per { width: 30%; }
.w20per { width: 20%; }

.t10 { margin-top: 1em; }
.t20 { margin-top: 2em; }
.t30 { margin-top: 3em; }
.t40 { margin-top: 4em; }

/*--- Fotter --------------------------------------------*/
.footerLogo a {
    width: 440px;
    height: auto;
    margin: 100px auto 30px;
    display: block;
}
.footerLogo p {
	font-size: 1.3rem;
	line-height: 2;
    font-weight: 700;
}
p.name_address {
    font-size: 1.0rem;
    line-height: 1.5;
    text-align: center;
    margin: 34px auto;
    padding: 20px;
    border-top: 1px solid #00473F;
    width: 50%;
}
.flexBox {
    display: flex;
}
.bottomArea {
    font-size: 1.3rem;
    background-color: #005bab;
    color: #fff;
    justify-content: space-between;
    padding: 0 40px;
    height: 37px;
    line-height: 37px;
}
.bottomArea p {
	font-size: 0.8rem;
	color: #fff;
}
.bottomArea a { color: #fff; }
/*--- Fotter --------------------------------------------*/


/* フローティングバナーの基本スタイル */
.floating-banner {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 280px;
  background: #e30b20;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 20px;
  z-index: 9999;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  text-align: center;
  animation: fadeIn 0.4s ease;
}
.floating-banner a { color: #fff; }
/* テキスト */
.banner-content h2 {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.banner-content p {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
/* 閉じるボタン */
.close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
  line-height: 20px;
  transition: background 0.3s;
}
.close-btn:hover {
  background: #333;
}
/* フェードインアニメーション */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/*--- indexに戻るボタン -----------------------*/
.top-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
}
.page-top {
	width: 70px;
	height: 70px;
	right: 48px;
	cursor: pointer;
	transition: background .25s ease;
	display: block;
	position: initial;
}
.page-top:before {
display: block;
    width: 0;
    height: 0;
    border-color: transparent transparent #fff;
    border-style: solid;
    border-width: 0 0.5vw 0.8vw;
    /* border-width: 0 1.6vw 2.4vw; */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.move-page-top {
  position: fixed;
  right: 20px;
  bottom: -120px;
  animation: progress linear;
  animation-timeline: scroll();
  transition: bottom 1s ease;
  z-index: 2;
}
@keyframes progress {
  0% {
    bottom: -120px;
  }
  18% {
    bottom: -120px;
  }
  19% {
    bottom: 0px;
  }
  20% {
    bottom: 20px;
  }
  100% {
    bottom: 20px;
  }
}

.pc {
	display: block;
}
.sp {
    display: none;
}

/* スマホ ----------------------------------------------------------------------------- */
@media screen and (max-width: 641px) {
.pc {
	display: none;
	}
.sp {
    display: block;
	}

#header {
	width:95%;
    margin: 1em auto 0;
    padding-bottom: 0.5em;
	}
.headerInner span {
	font-size: 0.9rem;
	line-height: 2;
	}
.headerInner a#headermenu_logo {
    width: 60%;
	}
#wrapper .inbox,
#wrapper01 .inbox,
#wrapper02 .inbox,
#wrapper03 .inbox {
	font-size: 0.9rem;
}
.container {
	width: 85%;
	margin: 1em auto;
	}
#wrapper .inbox,
#wrapper01 .inbox,
#wrapper02 .inbox,
#wrapper03 .inbox {
	font-size: 1.0rem;
    padding: 2em 0;
}
#wrapper .inbox h1,
#wrapper01 .inbox h1,
#wrapper02 .inbox h1,
#wrapper03 .inbox h1 {
	font-size: 1.5rem;
	letter-spacing: 0.5px;
	}
#wrapper .inbox h2,
#wrapper01 .inbox h2,
#wrapper02 .inbox h2,
#wrapper03 .inbox h2 {
	font-size: 1.3rem;
	}
#wrapper .inbox h3,
#wrapper01 .inbox h3,
#wrapper02 .inbox h3,
#wrapper03 .inbox h3 {
	font-size: 1.0rem;
	line-height: 1.4;
}
.price_wrapper .item02 p {
	font-size: 0.8rem;
	}
.ttl {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 0.8em;
	}
.sub_ttl {
   font-size: 0.7em;
   margin-top: 1em;
   line-height: 1;
	}
.top_word {
    width: 100%;
    margin: 2em auto 3em;
}
.item {
	width: 45%;
	}
#wrap {
	width:95%;
	}
#wrap_inner h2 {
    font-size: 1.2em;
}
#wrap_inner02 {
	width: 90%;
	margin: 0 auto;
	padding: 1.5em 0;
}
.container02 {
    width: 100%;
    justify-content: space-between;
   }
.container02 .item01 {
    width: 40%;
    padding: 0 1em 0.8em;
   }
.container02 .item01 p {
    font-size: 0.9rem;
    margin: 0.2em 0 0 0.5em;
   }
.container03 .item {
    width: 90%;
    margin: 0.7em auto;
	}
.container03 .item img {
    border: 3px solid #005bab;
	}
.container03 .item p, .container03 .item03 p {
    font-size: 0.9rem;
    margin-bottom: 1.0em;
	}
.container03 .item p.lead {
    font-size: 1.0rem;
    margin-bottom: 0;
	}
.coach_ttl {
    font-size: 1.2rem;
	}
.container_coach .item {
    width: 100%;
	}
.coach_waku {
    padding:  1em 1.5em;
	}
.container03 .item02,
.container03 .item03 {
    width: 100%;
	}
.container03 .item03 {
	margin-top: 0.8em;
}
.container03 .item03 p span {
    font-size: 1.0rem;
	}

/*--- TOP戻るボタン -----------------------*/
.page-top:before {
	border-width: 0 2vw 3vw;
	}
@keyframes progress {
  0% {
    bottom: -120px;
  }
  13% {
    bottom: -120px;
  }
  14% {
    bottom: 0px;
  }
  15% {
    bottom: 20px;
  }
  100% {
    bottom: 20px;
  }
}
/*--- Fotter --------------------------------------------*/
.footerLogo a {
    width: 85%;
   }
.footerLogo p {
	font-size: 1.0rem;
	}
p.name_address {
    font-size: 1.0rem;
    width: 80%;
	}
.bottomArea p {
    font-size: 0.6rem;
   }
/*--- Fotter --------------------------------------------*/

/* フローティングバナーの基本スタイル */
.floating-banner {
	bottom: 65px;
	right: 10px;
	width: 180px;
	padding: 20px;
	}
.banner-content h2 {
    font-size: 1.2rem;
}
.close-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 24px;
   }
   
.t-base { font-size: 0.8rem; }
.t-base02 { font-size: 0.6rem; }
.t10 { margin-top: 0.5em; }
.t20 { margin-top: 1em; }
.t30 { margin-top: 1.5em; }
.t40 { margin-top: 2em; }
}