/* ############################
GROWUP Ver1.0 CSS
############################ */


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

/* ############################
リセットCSS START
############################ */

*, *:before, *:after {
    box-sizing: border-box;
}

/* マージン、パディング、ボーダーをリセット */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
    border: 0;
	font-family: 'Noto Sans JP', sans-serif;
}

/* リストスタイルをリセット */
ol, ul {
    list-style: none;
}

/* フォント継承をリセット */
html {
    font-family: sans-serif;
}

/* リンクのスタイルをリセット */
a {
    text-decoration: none;
    color: inherit;
}

/* 画像のスケーリングを防ぐ */
img {
    max-width: 100%;
    height: auto;
display:block;
}

/* テーブルのボーダースパイシングとボーダーコラプスをリセット */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* その他の基本的なスタイルリセット */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}

/* ############################
リセットCSS END
############################ */


/* ### contents ### */

body{
max-width:1140px;
margin:0 auto;
}

section{
position: relative;
}

a {
  opacity: 1; /* 完全に不透明 */
  transition: opacity 0.5s ease; /* 透過効果のアニメーション設定 */
}

a:hover {
  opacity: 0.7; /* ホバー時の透明度 */
}

.btn-area01,.btn-area02,.btn-area03,.btn-area04,.btn-area05,.footer-bottom{
position: relative;
}

.tel1{
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
width:66%;
}

.tel2{
position: absolute;
bottom: 17%;
left: 50%;
transform: translateX(-50%);
width:66%;
}

.tel3{
position: absolute;
top: 3%;
left: 11%;
width:66%;
}

.btn2{
position: absolute;
top: 44%;
left: 50%;
transform: translateX(-50%);
width:70%;
}

.btn3{
position: absolute;
top: 113%;
left: 50%;
transform: translateX(-50%);
width:70%;
}

.btn4{
position: absolute;
bottom: 35%;
left: 50%;
transform: translateX(-50%);
width:70%;
}

.btn5{
position: absolute;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
width:70%;
}

.btn6{
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
width:70%;
}

.sns-area{
display:flex;
justify-content: center;
padding:30px 0;
align-items: center;
margin: 50px 0;
}

.sns-area > div{
padding:0 10px;
width:13%;
}

#scroll-image {
transition: left 0.5s ease-in-out;
}

.footer-map{
padding: 60px;
  background: #05372E;
}

.map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
 -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

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

.fade-in {
opacity: 0; /* 最初は不可視 */
transition: opacity 1s ease-out; /* 透明度の変更をアニメーション化 */
}


.sp-only{
display:none;
}

/* reserve */

.reserve-area section{
	background:#FFEFB4;
	padding-bottom:100px;
}

.reserve-area div{
	width:80%;
	margin:0 auto;
	padding:80px 0;
}

.reserve-area .sec01 h2{
	text-align:center;
	margin-top:80px;
	margin-bottom:30px;
}

.reserve-area .sec01 img{
	margin:0 auto;
}
.reserve-area .sec01{
	padding-bottom:0;
}

.reserve-area .sec02{
background: #FFF;
    padding: 40px 0 0;
    border-radius: 40px;
}

.reserve-area .sec01 p{
	text-align:center;
	color: red;
	margin-bottom:30px;
}

.reserve-area .sec02,.mw_wp_form{
	padding-top:10px!important;
	padding-bottom:0;
}

.reserve-area table{
	width:100%;
}

.reserve-area table th{
	width:32%;
	padding:30px 10px;
	text-align:left;
}

.reserve-area table td{
	width:68%;
	padding:30px 10px;
}

.mw_wp_form input,.mw_wp_form select{
	padding:10px;
	width:100%;
	border-radius: 5px;
	border:solid 1px #000;
}

.mw_wp_form span.mwform-tel-field input{
	width:20%;
}

.mw_wp_form input[type="submit"]{
	color:#FFF;
	background:#00774F;
	border:none;
	font-size:1.2rem;
	font-weight:700;
	width:300px;
	border-radius: 25px;
}

.mw_wp_form .form-btn{
	text-align:center;
	padding-bottom:0;
	margin-bottom:0px;
}

span.error{
	color:red;
	display:block;
}

/* thanks */

.thanks-area section{
	background:#FFEFB4;
	text-align:center;
	padding:80px;
	height:100vh;
}


/* モーダルウィンドウ全体のスタイル */
.modal {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* 固定位置 */
  z-index: 1; /* コンテンツの上に表示 */
  left: 0;
  top: 0;
width: 100%; /* 全幅 */
height: 100%; /* 全高 */
  overflow: auto; /* スクロール可能に */
  background-color: rgb(0,0,0); /* 背景色 */
  background-color: rgba(0,0,0,0.4); /* 透過 */
}

/* モーダルコンテンツのスタイル */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto; /* 中央配置 */
  padding: 20px;
  border: 1px solid #888;
  max-width:1000px; /* 幅 */
	height: 98%;
}

/* スクロール可能なコンテンツエリア */
.modal-scroll {
  overflow-y: auto; /* 縦方向にスクロール可能 */
 height: 90%; /* 適切な高さを設定 */
}

span.close{
	font-size:2rem;
}

/* ## 1140px以下 ## */

@media (max-width: 1139px) {
.sp-only{
display:block;
}
.pc-only{
display:none;
}

header .header-top{
padding: 1.8vw 15px;
}
.sns-area{
margin:0;
}
.sns-area > div{
width:20%;
}
.footer-map{
padding:8vw;
}
footer{
margin-bottom:60px;
}
	
/* reserve */
.reserve-area div{
	width:100%;
}
	.reserve-area .sec02{
		border-radius:30px;
	}
.reserve-area table th{
	width:100%;
	display:block;
	padding-bottom:0;
	padding-right:20px;
	padding-left:20px;
}
.reserve-area table td{
	width:100%;
	display:block;
	padding-top:5px;
	padding-bottom:15px;
	padding-right:20px;
	padding-left:20px;
}	
	.reserve-area section{
		padding:0 15px 80px 15px;
	}
	.thanks-area section{
		padding:20px;
	}
	
}

/* 休講 */

.holiday{
	margin: 0!important;
    padding: 0!important;
    padding-top: 10px!important;
}

.holiday h4{
	color:red;
}

.holiday ul li {
	font-size: 0.9rem;
}