@charset "utf-8";
/*
Theme Name: なかい水泳予備校
Theme URI: https://suieiyobikou.jp/
Description: なかい水泳予備校
*/

body {
	font-family: "Bebas Neue", "Noto Sans JP", sans-serif !important;
}

#nagoya #wrapper {
	background:none;
}

@media (max-width: 980px) {
#nagoya #wrapper {
	padding-bottom: 0;
}
}

.box1480 {
	width:100%;
	max-width:1480px;
	margin:0 auto;
	position:relative;
}

#lp_header {
	position:fixed;
	width:100%;
	z-index:10;
	
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header_inner {
	padding:2rem 4.5rem;
	
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header_inner #header_left {
	width:19%;
	max-width:340px;
	min-width:220px;
	
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header_right li:nth-child(1) {
	position:relative;
	top:3px;
	margin-right:1.5rem;
}

#header_right li:nth-child(1) img {
	position:relative;
	top:-5px;
	margin-right:10px;
}

#header_right li:nth-child(1) span {
	font-size:clamp(32px, 3.6vw, 64px);
	letter-spacing:0;
	color:#182d9a;
	
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header_right li:nth-child(2) {
	width:47%;
	max-width:279px;
	
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header_right li:nth-child(2) img {
	transition: transform .5s ease;
}

#header_right li:nth-child(2):hover img {
	transform: translateX(6px);
	opacity:1 !important;
}

#lp_header.fixedmenu {
	background:#FFF;
	background:rgba(255,255,255,0.9);
}

#lp_header.fixedmenu #header_inner {
	padding: 1rem 4.5rem;	
}

#lp_header.fixedmenu #header_inner #header_left {
	width:19%;
	max-width:220px;
}

#lp_header.fixedmenu #header_right li:nth-child(1) span {
	font-size:clamp(24px, 3.2vw, 42px);
}

#lp_header.fixedmenu #header_right li:nth-child(2) {
  width: 47%;
  max-width: 180px;
}


#mainvisual {
	width:100%;
}

#mainvisual img {
	width:100%;
	height:auto;
}

#mainvisual p {
	position:absolute;
	left: 54%;
	top: 32%;
	z-index: 2;
}

#mainvisual p strong {
	font-size:clamp(30px, 3.6vw, 64px);
	font-weight:bold;
	display:block;
	letter-spacing:2px;
	margin-bottom:2rem;
	color:#FFF;
	line-height:1.3;
	text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 15px rgba(0,0,0,0.5);
}

#mainvisual p small {
	font-size:clamp(15px, 1.6vw, 22px);
	font-weight:bold;
	background: linear-gradient(transparent 0%,#182d9a 0%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: #fff;
	padding: .8rem 1.5rem .4rem 1.5rem; 
	line-height: 2.2;
}

@media (max-width: 1600px) {
#mainvisual p { top: 26%; }
}

@media (max-width: 1480px) {
#mainvisual p { top: 22%; }
}

@media (max-width: 1120px) {
#mainvisual p { top: 20%; }
}

@media (max-width: 980px) {
#header_inner,
#lp_header.fixedmenu #header_inner {
  padding: 1rem 1rem;
	background:rgba(255,255,255,0.9);
}

#header_right {
	display:none;
}

#mainvisual {
	position:relative;
	margin-top:65px;
}

#mainvisual p {
	width:calc(100% - 4rem);
	margin:0 auto;
	left:2rem;
	top: 34em;
}

#mainvisual p strong {
	font-size:clamp(28px, 4.8vw, 64px);
}

#mainvisual p small {
	font-size:clamp(15px, 1.6vw, 22px);
}
}

@media (max-width: 830px) {
#mainvisual p {
	top: 24em;
}
}

@media (max-width: 680px) {
#mainvisual p {
	top: 20em;
}
}

@media (max-width: 480px) {
#mainvisual p {
	top: 16em;
}
}

@media (max-width: 395px) {
#mainvisual p {
	top: 13.5em;
}
}

@media (max-width: 375px) {
#mainvisual p {
	top: 12em;
}
}

#nagoya #content h2:before{
  content: attr(data-eng);
  display: block;
  font-size: clamp(45px, 9vw, 150px);
  line-height: 1;
  font-weight: normal;
  letter-spacing: 0;
}


/* 全体を横並び */
#lp_area01 .base.box1480 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4%;
}

/* 左カラム */
#lp_area01 .title_box {
    width: 35%;
    flex-shrink: 0;
	padding-left:7%;
	padding-top:7%;
	padding-bottom: 10%;
	background:url(../../images/area/lp_title_bg01.png) no-repeat center center;
	background-size:contain;
}

#lp_area01 .title_box h2 {
	font-size:clamp(24px, 2.4vw, 36px);
	font-weight:bold;
	margin-bottom:4.5rem;
}

#lp_area01 .title_box h2:before {
	color:#182d9a;
}

#lp_area01 .title_box span a:before {
  content: url(../../images/area/arrow-bk.png);
  margin-right: 1rem;
  padding-left:1rem;
}

#lp_area01 .title_box span a:hover {
	color:#182d9a;
}


/* 右カラム */
#lp_area01 ul {
    width: 61%;
    display: flex;
    flex-wrap: wrap;
    gap: 7%;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* liを2列 */
#lp_area01 ul li {
    width: 46.5%;
	position:relative;
	background:rgba(24,54,154,0.9);
}

#lp_area01 ul li .img-box {
	overflow:hidden;
}

#lp_area01 ul li .text-box {
	position:absolute;
	bottom:0;
	width:100%;
	color:#FFF;
	padding:1.5rem;
	line-height:1.8;
	background:rgba(24,54,154,0.9);
}

#lp_area01 ul li .text-box h3 {
	font-size:clamp(14px, 1.2vw, 16px);
}

#lp_area01 ul li .img-box a:hover img {
	opacity:1 !important;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    #lp_area01 .base.box1480 {
        flex-direction: column;
        gap: 2rem;
    }

    #lp_area01 .title_box{
        width: 100%;
		display:flex;
		-webkit-flex-wrap: wrap; /* Safari */
		flex-wrap:         wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 0;
		padding-top: 7%;
		padding-bottom: 0;
    }
	
	#lp_area01 .title_box h2 {
		margin-bottom:1.5rem;
	}
	
	#lp_area01 ul {
	  width: 100%;
	  gap: 3%;
	}

	#lp_area01 ul li {
	  width: 48.5%;
	}
	#lp_area01 ul li .text-box {
		padding:1.5rem 1rem;
		position:inherit;
		background:none;
	}
	#lp_area01 ul li .text-box h3 {
		line-height:1.6;
	}

}

.slant-bg {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    top: 80px;
}

.slant-bg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #edeff6;
    transform: skewY(-7deg);
    z-index: -1;
	height:88%;
}

@media (max-width: 768px) {
.slant-bg::before {
  top: 30px;
}
}

#lp_area02 {
	margin-bottom:18rem;
}

#lp_area02 h2,
#lp_area03 h2,
#lp_area04 .box01 h2,
#lp_area05 h2,
#lp_area07 h2,
#lp_area08 h2 {
	font-size:clamp(27px, 3.5vw, 63px);
	color:#182d9a;
	font-weight:900;
	font-feature-settings: "halt";
	letter-spacing:0;
	position:relative;
	margin-top:6rem;
	margin-bottom: -2.5rem;
}

#lp_area02 h2:before {
	color:#FFF;
}

#lp_area02 h2 span,
#lp_area03 h2 span,
#lp_area04 .box01 h2 span,
#lp_area05 h2 span,
#lp_area07 h2 span,
#lp_area08 h2 span {
	position:relative;
	top:-6rem;
}


@media screen and (max-width: 768px) {
#lp_area02 h2,
#lp_area03 h2,
#lp_area04 .box01 h2,
#lp_area05 h2,
#lp_area07 h2,
#lp_area08 h2 {
  margin-top: 1rem;
  margin-bottom: 0;
}

#lp_area02 h2 span,
#lp_area03 h2 span,
#lp_area04 .box01 h2 span,
#lp_area05 h2 span,
#lp_area07 h2 span,
#lp_area08 h2 span {
  top: -2rem;
}
}



#lp_area02 .base.box1480 {
    display: flex;
    justify-content: space-between;
}

/* 画像側 */
#lp_area02 .img-box {
  flex: 1;
  margin-left: calc(50% - 50vw);
  margin-right: 4%;
}

#lp_area02 .img-box img {
    width: 90%;
    height: auto;
    display: block;
	float:right;
}

/* テキスト側 */
#lp_area02 .text-box {
    flex: 1;
}

#lp_area02 .text-box p {
	font-size:clamp(16px, 1.4vw, 18px);
}

/* SP対応 */
@media screen and (max-width: 768px) {
    #lp_area02 .base.box1480 {
        flex-direction: column;
        gap: 2rem;
    }

    #lp_area02 .img-box,
    #lp_area02 .text-box {
        width: 100%;
    }
}

#lp_area03 h2 {
	text-align:center;
	margin-bottom:-7.5rem;
}

#lp_area03 h2:before {
	color:#edeff6;
}

#lp_area03 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4.5rem 2%;
    list-style: none;
    margin: 0;
	border:10px solid #182d9a;
	border-radius:20px;
	padding:6rem 4.5rem;
}

/* liを2列 */
#lp_area03 ul li {
    width: 48%;
    display: flex;
    align-items: center;      /* 縦中央揃え */
    gap: 1.5rem;
	background:url(../../images/area/lp_content03_bg.png) no-repeat left 85% center;
	background-size:contain;
}

/* 画像 */
#lp_area03 .img-box {
    width: 40%;             /* 任意調整 */
    flex-shrink: 0;
}

#lp_area03 .img-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト */
#lp_area03 .text-box {
    flex: 1;
    text-align: center;       /* 中央揃え */
	font-size:clamp(18px, 2.2vw, 30px);
	line-height:1.8;
	font-weight:bold;
	letter-spacing: 0;
}

#lp_area03 .text-box span {
	font-weight:bold;
	background: linear-gradient(transparent 50%, #ffc0c0 50%);
}

.arrow_bottom {
	display:block;
	text-align:center;
	padding:4.5rem 0;
}

/* SP */
@media screen and (max-width: 980px) {
	#lp_area03 h2 {
		margin-bottom:0;
	}
    #lp_area03 ul {
        gap: 1.5rem;
		padding:1.5rem;
		border:3px solid #182d9a;
    }

    #lp_area03 ul li {
        width: 100%;
    }
}

.kaiketsu {
	background:url(../../images/area/lp_content03_bg02_pc.png) no-repeat right bottom;
	background-size:cover;
	padding: 0 0 28rem 0;
}

#main .kaiketsu p {
	font-size:clamp(25px, 6vw, 72px);
	color:#182d9a;
	line-height:1.4;
	font-weight:900;
}

#main .kaiketsu p:before {
	content: attr(data-eng);
	display: block;
	font-size: clamp(45px, 10vw, 150px);
	line-height: 1;
	font-weight: normal;
	letter-spacing: 0;
	color: #edeff6;
	margin-bottom: -7.5rem;
}

.kaiketsu p small {
	font-weight:900;
	color:#3e3e3e;
}

.kaiketsu p strong {
	font-size:clamp(48px, 8vw, 96px);
	font-weight:900;
	color:#ff4d76;
}

@media screen and (min-width: 1920px) {
.kaiketsu {
	background-size:contain;
}

}

@media screen and (max-width: 1600px) {
#main .kaiketsu p {
	text-shadow:
    white 2px 0px 0px, white -2px 0px 0px,
    white 0px -2px 0px, white 0px 2px 0px,
    white 2px 2px 0px, white -2px 2px 0px,
    white 2px -2px 0px, white -2px -2px 0px,
    white 1px 2px 0px, white -1px 2px 0px,
    white 1px -2px 0px, white -1px -2px 0px,
    white 2px 1px 0px, white -2px 1px 0px,
    white 2px -1px 0px, white -2px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px;
}
}

@media screen and (max-width: 1280px) {
.kaiketsu {
	background:url(../../images/area/lp_content03_bg02_pc_s.png) no-repeat right bottom;
	background-size:cover;
	padding: 0 0 28rem 0;
}
}

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

#lp_area03 {
	margin-bottom:6rem;
}

.kaiketsu {
	padding: 30% 0 0 0;
}

#main .kaiketsu p {
	letter-spacing:0;
	text-align:center;
}

.arrow_bottom {
  padding: 2.5rem 0;
}

}

@media screen and (max-width: 768px) {
#main .kaiketsu p::before {
  margin-bottom: -4.5rem;
}
}

@media screen and (max-width: 480px) {
#main .kaiketsu p::before {
  margin-bottom: -2.5rem;
}
}


#lp_area04 .box01 {
	margin-bottom:6rem;
}

#lp_area04 .box01 h2 {
	text-align:center;
}

#lp_area04 .box01 h2:before {
	color:#edeff6;
}

#lp_area04 .box01 table {
	border-left:1px solid #8f8f8f;
}

#lp_area04 .box01 table th,
#lp_area04 .box01 table td {
	border-right:1px solid #8f8f8f;
	
}

#lp_area04 .box01 table th {
	text-align:center;
	vertical-align:middle;
	font-size:clamp(18px, 1.8vw, 24px);
	padding-left:0;
	padding-right:0;
	line-height:1.6;
	font-weight:bold;
}

#lp_area04 .box01 table td {
	text-align:justify;
	padding-right:3rem;
	padding-left:3rem;
	letter-spacing:1px;
}


@media screen and (max-width: 980px) {
#lp_area04 .box01 dl {
	margin-bottom:2rem;
	padding-bottom:2rem;
	border-bottom:1px solid #8f8f8f;
}

#lp_area04 .box01 dl:last-child {
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
}

#lp_area04 .box01 dl dt {
	text-align:center;
	margin-bottom:1.5rem;
}

#lp_area04 .box01 dl dd h3 {
	text-align:center;
	margin-bottom:1.5rem;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight:bold;
	line-height:1.6;
}

#lp_area04 .box01 dl dd p {
	text-align:justify;
	line-height: 1.8;
}

}

#lp_area04 .flowing_text {
	align-items: center;
	display: flex;
	overflow:hidden;
	width: 100%;
	white-space:nowrap;
	z-index: 0;
	bottom:0;
	margin-bottom: -5%;
}

#lp_area04 .flowing_text p {
	animation: flowing 40s linear infinite;
	transform:translateX(100%);
	margin: 0;
	padding: 0;
	color: transparent;
	-webkit-text-stroke: 1px #DDD;
	font-size:clamp(90px, 12vw, 200px);
    font-weight: bolder;
	line-height:1;
}

@keyframes flowing {
  0% { transform:translateX(45%); }
  100% { transform:translateX(-100%); }
}

.box02_wrapper {
	background:url(../../images/area/lp_content04_bg01.png) no-repeat left center;
	background-size:cover;
	padding:15rem 6rem 12rem 6rem;
}

#lp_area04 .box02 {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
}

#lp_area04 .box02 .text-box {
    width: 55%;
    color: #fff;
}

#lp_area04 .box02 .text-box h2 {
	color: #fff;
	font-size:clamp(32px, 3.6vw, 60px);
	font-weight:bold;
	line-height:1.4;
	margin-bottom:4.5rem;
	text-shadow: 0 0 5px rgba(15,32,133,0.8), 0 0 15px rgba(15,32,133,1);
}

#lp_area04 .box02 .text-box p {
	color: #fff;
	font-size:clamp(16px, 1.2vw, 18px);
	letter-spacing:1px;
	margin-bottom:3rem;
	text-shadow: 0 0 5px rgba(15,32,133,0.8), 0 0 15px rgba(15,32,133,1);
}


@media screen and (max-width: 1280px) {
.box02_wrapper {
	background:url(../../images/area/lp_content04_bg01.png) no-repeat left 25% center;
	background-size:cover;
}
}

/* SP */

@media screen and (max-width: 980px) {
	#lp_area04 .flowing_text {
		margin-bottom: -12%;
	}
	
	#lp_area04 .box02_wrapper {
		background:url(../../images/area/lp_content04_bg01_sp.png) no-repeat center center;
		background-size:cover;
		padding: 9rem 0rem 6rem 0rem;
	}

	#lp_area04 .box02 .text-box h2 {
		text-align:center;
	}

    #lp_area04 .box02 .text-box {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #lp_area04 .box02 .text-box {
        width: 100%;
    }
}



#lp_area05 {
	background:url(../../images/area/lp_content05_bg01.png) no-repeat top center;
	background-size:cover;
	padding-top:15rem;
	margin-bottom:15rem;
}

/* 追加 */
#lp_area05 .base.box1480 {
	display:flex;
	justify-content:space-between;
}

#lp_area05 .text-box,
#lp_area05 .img-box {
	width:49%;
}

#lp_area05 .img-box img {
	width:100%;
	height:auto;
	display:block;
}

#lp_area05 h2 {
	font-size: clamp(40px, 5.4vw, 80px);
	margin-top:0;
}

#lp_area05 h2 strong {
	font-size: clamp(75px, 9vw, 150px);
}

#lp_area05 h2:before {
	color:#FFF;
}

#lp_area05 p {
	font-size:clamp(16px, 1.2vw, 18px);
	margin-bottom:3rem;
	letter-spacing:1px;
}

/* SP */
@media screen and (max-width:768px){
	#lp_area05 {
		padding-top:9rem;
		margin-bottom:6rem;
	}
	
	#lp_area05 .base.box1480{
		flex-direction:column;
	}

	#lp_area05 .text-box,
	#lp_area05 .img-box{
		width:100%;
	}
}

#lp_area06 {
	margin-bottom:15rem;
}

#lp_area06 h2 {
	text-align:center;
	padding:1.5rem 4.5rem 1rem 4.5rem;
	background:#182d9a;
	color:#FFF;
	font-size:clamp(24px, 3.6vw, 60px);
	font-weight:bold;
	border-radius:60px;
	margin-bottom:6rem;
}

#lp_area06 .box01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem 3%;
	margin-bottom:12rem;
}

/* dlを2列 */
#lp_area06 .box01 dl {
    width: 48.5%;
    display: flex;
    align-items: flex-start;
    gap: 5%;
    margin: 0;
	background:#f2f6ff;
	padding:4.5rem 3rem;
	border-radius:60px;
}

/* dt */
#lp_area06 .box01 dt {
    width: 15%;
    flex-shrink: 0;
}

#lp_area06 .box01 dt img {
    width: 100%;
    height: auto;
    display: block;
}

/* dd */
#lp_area06 .box01 dd {
    flex: 1;
    margin: 0;
	letter-spacing:1px;
}

#lp_area06 .box01 dd h3 {
	font-weight:bold;
	color:#182d9a;
	margin-bottom:1rem;
}

#lp_area06 .box01 dd h3 span {
	
	font-size:clamp(30px, 2.2vw, 30px);
	font-weight:bold;
}

/* SP */
@media screen and (max-width: 768px) {
	#lp_area06 {
		margin-bottom:6rem;
	}
	
	#lp_area06 h2 {
		line-height:1.4;
		margin-bottom:3rem;
	}
	
	#lp_area06 .box01 {
		margin-bottom:9rem;
	}
	
    #lp_area06 .box01 dl {
        width: 100%;
		padding: 2.5rem 2rem;
		border-radius: 15px;
    }
}

#lp_area06 .box02 {
	border:5px solid #182d9a;
	border-radius:30px;
	padding:0 3rem 4.5rem 3rem;
	text-align:center;
}

#lp_area06 .box02 h3 {
	text-align:center;
	margin-top:-4.5rem;
	margin-bottom:4.5rem;
}

#lp_area06 .box02 h3 span {
	display:inline-block;
	font-size:clamp(20px, 3vw, 48px);
	font-weight:bold;
	color:#182d9a;
	border:5px solid #182d9a;
	background:#FFF;
	border-radius:60px;
	padding:1.5rem 4.5rem 1rem 4.5rem;
}

#lp_area06 .box02 strong {
	color:#182d9a;
	display:block;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight:bold;
	text-align:center;
	margin-bottom:2rem;
	line-height: 1.6;
}

#lp_area06 .box02 p {
	font-size:clamp(16px, 1.4vw, 18px);
}

@media screen and (max-width: 768px) {
#lp_area06 .box02 h3 {
	margin-top:-3rem;
	margin-bottom:3rem;
}

#lp_area06 .box02 {
	padding:0 2rem 3rem 2rem;
}
}

#lp_area07 {
	background:#f6f7ff;
	overflow:hidden;
}

#lp_area07 h2 {
	background:url(../../images/area/lp_content06_title_bg.png) no-repeat left bottom;
	background-size: cover;
	color: #FFF;
	padding-top: 6%;
	padding-bottom: 6%;
	margin-bottom:7.5rem;
	margin-top:0;
}

#lp_area07 h2:before {
	width: 100%;
	max-width: 1480px;
	margin: 0 auto;
	position: relative;
	color:rgba(255,255,255,0.05);
}

#lp_area07 dl {margin-bottom: 10rem;}

#lp_area07 dt {position: absolute;z-index: 1; width:31.5%;}

#lp_area07 dd {width: 97%;background: #FFF;position: relative;top: 4rem;padding: 4.5rem 4.5rem 4.5rem 32%;margin-left: 3%; border-radius:15px;}

#lp_area07 dd h3 {
	font-size: clamp(22px, 2.4vw, 36px);
	font-weight:bold;
	margin-bottom:1.5rem;
}

#lp_area07 dd h3:before {
	content:url(../../images/area/lp_icon_swimming.png);
	margin-right:1.5rem;
}

#lp_area07 dd table {
	margin-bottom:2rem;
}

#lp_area07 dd table th {
	width:100px;
	padding:0.5rem;
}

#lp_area07 dd table th span {
	border:1px solid #182d9a;
	border-radius:30px;
	display:block;
	text-align:center;
	padding:0.35rem 1.5rem 0.1rem 1.5rem;
	font-size:14px;
	color:#182d9a;
	letter-spacing:0;
}

#lp_area07 dd table td {
	padding: 0.75rem 0.5rem 0.5rem 0.5rem;
	letter-spacing:1px;
}

#lp_area07 dd .detail_btn {
	text-align:right;
}

#lp_area07 dd .detail_btn a {
	color:#182d9a;
	border:1px solid #182d9a;
	border-radius:60px;
	font-size:clamp(16px, 1.4vw, 18px);
	font-weight:bold;
	padding:1rem 4rem 1.5rem 4rem;
	position:relative;
	display:inline-block;
	transition: transform 0.3s ease;
}

#lp_area07 dd .detail_btn a:after {
	content: "";
	display: inline-block;
	width: 24px;   /* 画像サイズに合わせる */
	height: 24px;
	margin-left: 1rem;
	position: relative;
	top: 0.4rem;

	background: url(../../images/area/icon_arrow_maru.png) no-repeat center / contain;

	transition: transform 0.3s ease;
}

#lp_area07 dd .detail_btn a:hover:after {
	transform: translateX(6px);
}

.lesson_btn {
	text-align:center;
	padding-top:3rem;
}

.lesson_btn a:hover img {
	opacity:1 !important;
}

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

#lp_area07 h2 {
	margin-bottom:3rem;
}

#lp_area07 dd h3 {
	text-align:center;
}

#lp_area07 dd h3:before {
	content:url(../../images/area/lp_icon_swimming.png);
	margin-right:0;
	margin-bottom:1rem;
	display:block;
	text-align:center;
}

#lp_area07 dl {
	margin-bottom:3rem;
}

#lp_area07 dt {
	position:inherit;
	display:block;
	text-align:center;
	width:100%;
}

#lp_area07 dd {
  width: 94%;
  top:-2rem;
  background: #FFF;
  padding: 4.5rem 2rem 4.5rem 2rem;
  margin:0 auto;
  border-radius: 15px;
}

#lp_area07 dd .detail_btn {
	text-align:center;
}

.lesson_btn {
	padding-top:0;
}

}

#lp_area08 {
}

#lp_area08 .box1480 {
	-webkit-justify-content: space-between;
	justify-content: space-between;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-top:15rem;
	padding-bottom:9rem;
}

#lp_area08 .text-box h2 {
	margin-top:0;
}


#lp_area08 .text-box h2:before {
	color:#edeff6;
}

#lp_area08 .text-box {
	width:64%;
}

#lp_area08 .text-box p {
	margin-bottom:3rem;
	font-size:clamp(16px, 1.4vw, 18px);
	letter-spacing:1px;
	line-height:2.1;
	text-align: justify;
}

#lp_area08 .img-box {
	position:absolute;
	width:33%;
	right:2rem;
	bottom:0;
	text-align:right;
}

#lp_area08 .more_btn {
	text-align:right;
}

#lp_area08 .more_btn a {
	font-size:clamp(16px, 1.4vw, 18px);
	color:#182d9a;
	display:inline-block;
	border-bottom:1px solid #182d9a;
	padding-bottom:0.75rem;
}

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

#lp_area08 .box1480 {
	padding-top:9rem;
	padding-bottom:0;
}

#lp_area08 .text-box {
	width:100%;
	margin-bottom:3rem;
}

#lp_area08 .img-box {
	position:inherit;
	right:inherit;
	width:70%;
	margin:0 auto;
}

}

#footer_lp {
	background:#182d9a;
	padding-top:12rem;
	padding-bottom:12rem;
}

#footer_lp .box_left {
	color:#FFF;
}

#footer_lp .box_left strong {
	display:inline-block;
	padding:0.75rem 1.5rem 0.5rem  1.5rem;
	background:#FFF;
	color:#182d9a;
	margin-bottom:1.5rem;
}

#footer_lp .box_left dl {
}

#footer_lp .box_left dl dt {
	font-size: clamp(18px, 1.8vw, 24px);
	margin-bottom:1rem;
}

#footer_lp .box_left dl dd {
	line-height:1.6;
}

#footer_lp .box_left dl dd span {
	font-size:0.8em;
}

#footer_lp .box_right {
	text-align:right;
}

#footer_lp small {
	display:block;
	color:#FFF;
	margin-top:7.5rem;
	text-align:center;
	font-size:clamp(14px, 1.2vw, 16px);
}

@media screen and (max-width: 768px) {
	
#footer_lp {
  padding-top: 4.5rem;
  padding-bottom: 7.5rem;
}

#footer_lp .box_left.w50 {
	width:100%;
}

#footer_lp .box_right.w50 {
	width:100%;
}

#footer_lp .box_left dl dt {
	text-align:left;
}

#footer_lp .box_left dl dd {
	text-align:left;
}

#footer_lp small {
	margin-top: 4.5rem;
	margin-bottom:3rem;
}

}












/* ==================================================
   🎨 CSS Animation Library - 70 Animations
   カテゴリ別
   トリガー: .trigger-load / .trigger-hover / .trigger-scroll
================================================== */


/* ================= fade 系 ================= */

/* 1. fade-in */
.anim-fade-in {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.anim-fade-in.show {
	opacity: 1;
}

/* 2. fade-out */
.anim-fade-out {
	opacity: 1;
	transition: opacity 0.5s ease-out;
}

.anim-fade-out.show {
	opacity: 0;
}

/* 3. fade-up */
.anim-fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-up.show {
	opacity: 1;
	transform: translateY(0);
}

/* 4. fade-down */
.anim-fade-down {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-down.show {
	opacity: 1;
	transform: translateY(0);
}

/* 5. fade-left */
.anim-fade-left {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.anim-fade-left.show {
	opacity: 1;
	transform: translateX(0);
}

/* 6. fade-right */
.anim-fade-right {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-right.show {
	opacity: 1;
	transform: translateX(0);
}

/* 7. fade-scale-up */
.anim-fade-scale-up {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-scale-up.show {
	opacity: 1;
	transform: scale(1);
}

/* 8. fade-scale-down */
.anim-fade-scale-down {
	opacity: 0;
	transform: scale(1.2);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-scale-down.show {
	opacity: 1;
	transform: scale(1);
}

/* 9. fade-rotate-in */
.anim-fade-rotate-in {
	opacity: 0;
	transform: rotate(-15deg);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-rotate-in.show {
	opacity: 1;
	transform: rotate(0);
}

/* 10. fade-blur-in */
.anim-fade-blur-in {
	opacity: 0;
	filter: blur(5px);
	transition: opacity 0.5s ease-out, filter 0.5s ease-out;
}

.anim-fade-blur-in.show {
	opacity: 1;
	filter: blur(0);
}

/* ================= slide 系 ================= */

/* 11. slide-up */
.anim-slide-up {
	transform: translateY(20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-up.show {
	transform: translateY(0);
	opacity: 1;
}

/* 12. slide-down */
.anim-slide-down {
	transform: translateY(-20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-down.show {
	transform: translateY(0);
	opacity: 1;
}

/* 13. slide-left */
.anim-slide-left {
	transform: translateX(20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-left.show {
	transform: translateX(0);
	opacity: 1;
}

/* 14. slide-right */
.anim-slide-right {
	transform: translateX(-20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-right.show {
	transform: translateX(0);
	opacity: 1;
}

/* 15. slide-scale-up */
.anim-slide-scale-up {
	transform: translateY(20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-scale-up.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 16. slide-scale-down */
.anim-slide-scale-down {
	transform: translateY(-20px) scale(1.2);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-scale-down.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 17. slide-rotate-in */
.anim-slide-rotate-in {
	transform: translateY(20px) rotate(-15deg);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-rotate-in.show {
	transform: translateY(0) rotate(0);
	opacity: 1;
}

/* 18. slide-blur-in */
.anim-slide-blur-in {
	filter: blur(5px);
	opacity: 0;
	transition: filter 1s ease-out, opacity 1s ease-out;
}

.anim-slide-blur-in.show {
	filter: blur(0);
	opacity: 1;
}

/* ================= zoom/scale 系 ================= */


/* 19. zoom-in */
.anim-zoom-in {
	transform: scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-in.show {
	transform: scale(1);
	opacity: 1;
}

/* 20. zoom-out */
.anim-zoom-out {
	transform: scale(1.2);
	opacity: 1;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-out.show {
	transform: scale(1);
	opacity: 0;
}

/* 21. zoom-up */
.anim-zoom-up {
	transform: translateY(20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-up.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 22. zoom-down */
.anim-zoom-down {
	transform: translateY(-20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-down.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 23. zoom-left */
.anim-zoom-left {
	transform: translateX(20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-left.show {
	transform: translateX(0) scale(1);
	opacity: 1;
}

/* 24. zoom-right */
.anim-zoom-right {
	transform: translateX(-20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-right.show {
	transform: translateX(0) scale(1);
	opacity: 1;
}

/* 25. zoom-rotate-in */
.anim-zoom-rotate-in {
	transform: rotate(-15deg) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-rotate-in.show {
	transform: rotate(0) scale(1);
	opacity: 1;
}

/* 26. zoom-blur-in */
.anim-zoom-blur-in {
	filter: blur(5px);
	opacity: 0;
	transition: filter 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-blur-in.show {
	filter: blur(0);
	opacity: 1;
}

/* ================= flip/rotate 系 ================= */

/* 27. flip-x */
.anim-flip-x {
	transform: rotateX(90deg);
	opacity: 0;
	transition: transform 1s ease-out, opacity 1s ease-out;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.anim-flip-x.show {
	transform: rotateX(0);
	opacity: 1;
}

/* 28. flip-y */
.anim-flip-y {
	transform: rotateY(90deg);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out !important;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.anim-flip-y.show {
	transform: rotateY(0);
	opacity: 1;
}

/* 29. rotate-in */
.anim-rotate-in {
	transform: rotate(-180deg);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	transform-origin: center;
}

.anim-rotate-in.show {
	transform: rotate(0);
	opacity: 1;
}

/* 30. rotate-out */
.anim-rotate-out {
	transform: rotate(0);
	opacity: 1;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	transform-origin: center;
}

.anim-rotate-out.show {
	transform: rotate(180deg);
	opacity: 0;
}

/* ================= attention 系 ================= */

/* 31. shake */
.anim-shake {
	transform: translateX(0);
	transition: none;
}

.anim-shake.show {
	animation: shake-anim 0.5s ease-in-out 3;
}

@keyframes shake-anim {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	50% {
		transform: translateX(5px);
	}

	75% {
		transform: translateX(-5px);
	}
}

/* 32. pulse */
.anim-pulse {
	transform: scale(1);
	transition: none;
}

.anim-pulse.show {
	animation: pulse-anim 0.5s ease-in-out infinite;
}

@keyframes pulse-anim {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

/* 33. bounce */
.anim-bounce {
	transform: translateY(0);
	transition: none;
}

.anim-bounce.show {
	animation: bounce-anim 0.5s ease-in-out infinite;
}

@keyframes bounce-anim {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* 34. wiggle */
.anim-wiggle {
	transform: rotate(0);
	transition: none;
}

.anim-wiggle.show {
	animation: wiggle-anim 0.5s ease-in-out 3;
}

@keyframes wiggle-anim {

	0%,
	100% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(-5deg);
	}

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

/* 35. swing */
.anim-swing {
	transform-origin: top center;
	transition: none;
}

.anim-swing.show {
	animation: swing-anim 0.5s ease-in-out 1;
}

@keyframes swing-anim {
	0% {
		transform: rotate(0);
	}

	20% {
		transform: rotate(15deg);
	}

	40% {
		transform: rotate(-10deg);
	}

	60% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(0);
	}
}

/* ================= entrance 系 ================= */

/* 36. slide-in-left */
.anim-slide-in-left {
	transform: translateX(-100%);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.6s ease;
}

.anim-slide-in-left.show {
	transform: translateX(0);
	opacity: 1;
}

/* 37. slide-in-right */
.anim-slide-in-right {
	transform: translateX(100%);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.6s ease;
}

.anim-slide-in-right.show {
	transform: translateX(0);
	opacity: 1;
}

/* 38. slide-in-up */
.anim-slide-in-up {
	transform: translateY(10%);
	opacity: 0;
	transition: transform 0.75s ease-out, opacity 0.75s ease-out;
}

.anim-slide-in-up.show {
	transform: translateY(0);
	opacity: 1;
}

/* 39. slide-in-down */
.anim-slide-in-down {
	transform: translateY(-30%);
	opacity: 0;
	transition: transform 1s ease-out, opacity 1s ease-out;
}

.anim-slide-in-down.show {
	transform: translateY(0);
	opacity: 1;
}

/* 40. fade-in-scale */
.anim-fade-in-scale {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-in-scale.show {
	opacity: 1;
	transform: scale(1);
}

/* ================= decorative/loop 系 ================= */

/* 41. spin */
.anim-spin {
	animation: spin-anim 2s linear infinite;
}

@keyframes spin-anim {
	0% {
		transform: rotate(0);
	}

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

/* 42. spin-reverse */
.anim-spin-reverse {
	animation: spin-reverse-anim 2s linear infinite;
}

@keyframes spin-reverse-anim {
	0% {
		transform: rotate(0);
	}

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

/* 43. pulse-loop */
.anim-pulse-loop {
	animation: pulse-anim 2s ease-in-out infinite;
}

/* 44. bounce-loop */
.anim-bounce-loop {
	animation: bounce-anim 2s ease-in-out infinite;
}

/* 45. wiggle-loop */
.anim-wiggle-loop {
	animation: wiggle-anim 0.5s ease-in-out infinite;
}

/* 46. swing-loop */
.anim-swing-loop {
	animation: swing-anim 2s ease-in-out infinite;
}

/* 47. float */
.anim-float {
	animation: float-anim 3s ease-in-out infinite;
}

@keyframes float-anim {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* 48. heartbeat */
.anim-heartbeat {
	animation: heartbeat-anim 1.5s ease-in-out infinite;
}

@keyframes heartbeat-anim {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

/* 49. wiggle-small */
.anim-wiggle-small {
	animation: wiggle-small-anim 0.5s ease-in-out infinite;
}

@keyframes wiggle-small-anim {

	0%,
	100% {
		transform: rotate(0);
	}

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

/* 50. shake-small */
.anim-shake-small {
	animation: shake-small-anim 0.3s ease-in-out infinite;
}

@keyframes shake-small-anim {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(2px);
	}
}


/* ================= fade 系 続き ================= */

/* 51. fade-slide-up */
.anim-fade-slide-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-slide-up.show {
	opacity: 1;
	transform: translateY(0);
}

/* 52. fade-slide-down */
.anim-fade-slide-down {
	opacity: 0;
	transform: translateY(-30px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-slide-down.show {
	opacity: 1;
	transform: translateY(0);
}

/* ================= slide 系 続き ================= */

/* 53. slide-in-top-left */
.anim-slide-in-top-left {
	opacity: 0;
	transform: translate(-100%, -100%);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-slide-in-top-left.show {
	opacity: 1;
	transform: translate(0, 0);
}

/* 54. slide-in-top-right */
.anim-slide-in-top-right {
	opacity: 0;
	transform: translate(100%, -100%);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-slide-in-top-right.show {
	opacity: 1;
	transform: translate(0, 0);
}

/* ================= zoom/scale 系 続き ================= */

/* 55. zoom-in-big */
.anim-zoom-in-big {
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-zoom-in-big.show {
	opacity: 1;
	transform: scale(1);
}

/* 56. zoom-out-big */
.anim-zoom-out-big {
	opacity: 1;
	transform: scale(2);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-zoom-out-big.show {
	opacity: 0;
	transform: scale(1);
}

/* ================= flip/rotate 系 続き ================= */

/* 57. rotate-x-in */
.anim-rotate-x-in {
	opacity: 0;
	transform: rotateX(-90deg);
	transform-style: preserve-3d;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-rotate-x-in.show {
	opacity: 1;
	transform: rotateX(0);
}

/* 58. rotate-y-in */
.anim-rotate-y-in {
	opacity: 0;
	transform: rotateY(-90deg);
	transform-style: preserve-3d;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-rotate-y-in.show {
	opacity: 1;
	transform: rotateY(0);
}

/* ================= attention 系 続き ================= */

/* 59. pulse-slow */
.anim-pulse-slow {
	transform: scale(1);
	transition: none;
}

.anim-pulse-slow.show {
	animation: pulse-anim 3s ease-in-out infinite;
}

/* 60. shake-slow */
.anim-shake-slow {
	transform: translateX(0);
	transition: none;
}

.anim-shake-slow.show {
	animation: shake-anim 0.5s ease-in-out 3;
}

/* ================= entrance 系 続き ================= */

/* 61. drop-in */
.anim-drop-in {
	opacity: 0;
	transform: translateY(-200%);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-drop-in.show {
	opacity: 1;
	transform: translateY(0);
}

/* 62. fade-in-left-big */
.anim-fade-in-left-big {
	opacity: 0;
	transform: translateX(-200%);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-in-left-big.show {
	opacity: 1;
	transform: translateX(0);
}

/* ================= decorative/loop 系 続き ================= */

/* 63. slow-spin */
.anim-slow-spin {
	animation: spin-anim 10s linear infinite;
}

/* 64. fast-spin */
.anim-fast-spin {
	animation: spin-anim 0.5s linear infinite;
}

/* 65. float-small */
.anim-float-small {
	animation: float-anim 1.5s ease-in-out infinite;
}

/* 66. heartbeat-fast */
.anim-heartbeat-fast {
	animation: heartbeat-anim 0.7s ease-in-out infinite;
}

/* 67. wiggle-tiny */
.anim-wiggle-tiny {
	animation: wiggle-small-anim 0.3s ease-in-out infinite;
}

/* 68. shake-tiny */
.anim-shake-tiny {
	animation: shake-small-anim 0.2s ease-in-out infinite;
}

/* ================= その他 ================= */

/* 69. bounce-small */
.anim-bounce-small {
	animation: bounce-anim 0.5s ease-in-out infinite;
}

/* 70. swing-slow */
.anim-swing-slow {
	animation: swing-anim 3s ease-in-out infinite;
}

.smooth {
	clip-path: inset(0 100% 0 0);
	/* 初期状態：右側を隠す */
	transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
	/* アニメーション設定 */
	transition-property: clip-path;
}

.smooth.show {
	clip-path: inset(0);
	/* アニメーション後：隠れた部分が表示 */
}