/*フォント*/
/*Anton*/    @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/*明朝体*/    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

body, html {
    margin: 0;    padding: 0;
    font-family: Arial, sans-serif;}
p{margin:0;padding:0;}
@media screen and (max-width:768px){
    .pc{display:none;}
}
@media screen and (min-width:701px){
    .smp{display:none;}
}

/*メインビジュアル*/
.main-visual {
    position: relative;
    height: 45vw;
    overflow: hidden;}
.main-visual .background-blue {
    width:100%;
    height:45vw;
    position:absolute;
    background-color:#009FE8;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
    z-index:1;}
.main-visual .background-black {
    width:100%;
    height:45vw;
    position:absolute;
    background-color:#000;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 0% 100%);
    z-index:2;}
.main-visual .logo-banner {
    position:absolute;
    top:0;  left:3vw;
    width:28vw;
    z-index:5;}
.main-visual .logo-banner img {
    width: 100%;}
.main-visual .background-image {
    width: 100%;
    height:40vw;
    display:flex;
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    top: 0;    left: 0;
    z-index: 3;}
.main-visual .background-image img{
    width:33.3%;
    height:42vw;
    object-fit: cover;}
.main-visual .background-image img:nth-child(2){
    object-position:-22vw -1vw;}
.main-visual .background-image img:nth-child(3){
    object-position:-20vw -3.2vw;}
.main-visual .background-image img:nth-child(4){
    object-position:-15vw -1vw;}
.main-visual .background-image .dark-style{
    width: 100%;
    height:45vw;
    position: absolute;
    top:0;  left:0; right:0;    bottom:0;
    background-color:rgba(0,0,0,0.3);
    z-index:2;}
.main-visual .overlay-text {
/*    position: absolute;
    top:50%;
    width:26vw;*/
    font-weight: bold;
    /*font-family: "Noto Serif JP", serif;*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
/*    transform:translate(-50%,-50%);*/
    z-index: 9;}
.main-visual .overlay-watermark-text{
    position: relative;
    top:42%;    left:50%;
    width:100%;
    text-align: center;
    transform:translate(-50%,-50%);
	/*font-family: "Noto Serif JP", serif;*/
    font-size: 3.2rem;
    font-weight: 600;
    font-style: normal;
    color:#ffffff;
	line-height: 3.8rem;
	text-shadow: 2px 2px black;
    z-index:5;}
.main-visual .text-A{
	position: relative;
	top:40%;
	width: 100%;
	background: rgba(255,255,255,0.8);
	font-size: 1.5rem;
	/*font-family: "Noto Serif JP", serif;*/
	color: #000000;
	text-align: center;
	padding: 1rem 0;
	z-index:6;}
.main-visual .text-B{
	position: relative;
	top:40%;
	width: 100%;
	background: rgba(0,0,0,0.7);
	font-size: 1.5rem;
	color: #ffffff;
	text-align: center;
	padding: 1rem 0;
	z-index:6;}
.main-visual .overlay-text.text-C{left:85%;}
.main-visual .info-button{
    display: block;
    width:2vw;
    position:fixed;
    top:60%;    right:0;
    transform:translateY(-50%);
    padding: 2.5vw 1.5vw;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background: #000;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2vw;
	font-weight: 800;
    z-index:5;
	border-bottom: 2px #a4a4a4 solid;
    border-left: 2px #a4a4a4 solid;
    border-top: 2px #a4a4a4 solid;
}
.main-visual .info-button img{
    width:30%;}
@media screen and (max-width:768px){
.main-visual{
    height:120vw;}
.main-visual .background-blue {
    height:120vw;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 85%);}
.main-visual .background-black {
    height:120vw;
    clip-path: polygon(0 0, 100% 0, 100% 83.5%, 0% 100%);}
.main-visual .logo-banner {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);}
.main-visual .background-image {
    height:111vw;
	display:flex;
	position: absolute;
    flex-direction: row;
	top: 0;    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
.main-visual .background-image img{
    width:33.3%;
    height:100vw;
    object-fit: cover;}
.main-visual .background-image img:nth-child(2){
    object-position:-66vw -8vw;}
.main-visual .background-image img:nth-child(3){
    object-position:-64vw -8vw;}
.main-visual .background-image img:nth-child(4){
    object-position:-66vw -4vw;}
.main-visual .background-image .dark-style{
    height:111vw;}
.main-visual .overlay-text {
    width:26vw;
    font-size: 5vw;
    width:calc(100% - 23vw);
    transform:translate(0,0);
    top:auto;   left:auto;}
.main-visual .overlay-watermark-text{
    display: block;
	font-size: 7vw;
	line-height: 8vw;
	}
.main-visual .text-A{top:35%;  left:0%; font-size: 4vw; padding: 5% 5%; width: 90%;}
.main-visual .text-B{top:35%;  left:0%; font-size: 3.4vw; padding: 5% 5%; width: 90%;}
.main-visual .text-C{top:75%;  left:5%;}
.main-visual .info-button{
    width:100%;
    position:fixed;
    transform:translateY(0);
    top:auto;    bottom:0;
    text-align: center;
	font-size: 3vw;
    padding:3vw 0vw;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
	border-bottom: none;
    border-left: none;
    border-top: none;}
.main-visual .info-button img{
    width:1.2vw;
    display: inline-block;
    padding-bottom:0vw;}
}
.triangle {
	background: #ffffff;
	height: calc(18px / 2); 
	width: 18px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
display: inline-block}

/*共通*/
.page-content{width:100%;}
.en-title{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #e0e0e0;}
.button {
    text-align: center;
    margin: 2rem 0 7rem;}
.button a {
    display: inline-block;
    position: relative;
    width:80%;
    padding: 2rem;
    background-color: #FFA700;
    border-bottom:5px #DE9200 solid;
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;}
.button a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);}
.button a:hover::before {
	animation: shine 0.7s;}
@keyframes shine {
	100% {
		left: 125%;
	}
}
@media screen and (max-width:768px){
.button {
    text-align: center;
    margin: 0vw 2vw 10vw;}
	
.button a {
    width: calc(100% - 10vw);
    padding: 3vw 5vw;
    font-size: 4.7vw;
    margin-top: 5vw;}
}


/*教育理念*/
.feature-section {
    width:85%;
    max-width: 1161px;
    margin:0 auto;
    margin-top:1rem;}
.feature-section-title {
    text-align: center;
    position: relative;}
.feature-section-title .en-title {
    font-size: 8rem;
    margin: 0;}
.feature-section-title .jp-title {
    font-size: 3rem;
    font-weight: bold;
    color: #000;
    margin-top: -5rem;}
.feature-text {
    text-align: center;
    margin: -1rem 0 5rem;}
.feature-text .big {
    font-size: 1.8rem;
    margin: 3rem 0;}
.feature-text .small {
    font-size: 1.4rem;
    margin: 1rem 0;}
.feature-info {
    margin:0;}
.feature-info .headline {
    background: #029FE8;
    color: #fff;
    padding: 1.5rem;
    font-size:1.6rem;
    text-align: center;}
.features {
    display: flex;
    flex-direction: column;
    padding:5rem;
    gap: 2rem;}
.feature {
    display: flex;
    align-items:flex-start;
    justify-content: space-between;}
.feature .feature-image {
    width: 25rem;
    height: auto;
    border-radius: 8px;
    font-size:0.8rem;
margin-right: 2rem;}
.feature .feature-image img{
    width:100%;
    height:15rem;
    object-fit: cover;
    border-top-left-radius: 2vw;}
.feature .feature-description{
    width:35rem;
    height:15vw;
    padding-top:1vw;
    border-bottom:1px dotted #029FE8;
    position:relative;
    font-size:1.5vw;
    line-height:3vw;}
.feature .feature-description span {
    position:absolute;
    right:0;    bottom:0;
    font-size: 2vw;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    color: #EBEBEB;}
@media screen and (max-width:768px){
.feature-section {
    width: 100%;
    max-width:100%;
	margin-top: 0vw;}
.feature-section-title .en-title {
    font-size: 9.5vw;}
.feature-section-title .jp-title {
    font-size: 5vw;
    font-weight: normal;}
.feature-text .big {
    font-size: 3.5vw;
    margin: 5vw 0 2vw;
	padding-bottom: 2rem;}
.feature-text .small {
    font-size: 3.5vw;
    margin:5vw 0 10vw;}
.feature-info .headline {
    font-size:5vw;}
.features {
    gap: 5vw;}
.feature {
    flex-direction: column;
    align-items:baseline;
    justify-content:flex-start;}
.feature .feature-image {
    width: 100%;
    height: 40vw;
    font-size: 2.5vw;}
.feature .feature-image img{
    height:40vw;
    border-top-left-radius: 5vw;
	object-position: 0 0vw;}
.feature .feature-description{
    width:100%;
    height:25vw;
    padding-top:7vw;
    font-size:3vw;
    line-height:5vw;}
.feature .feature-description span {
    bottom:1vw;
    font-size: 7vw;
    letter-spacing: 2px;}
}


/*BBTとは*/
.about-section {
    position: relative;
    margin: 0 auto 0rem;
    padding:8rem 0 2rem 0;
    background: #f9f9f9;}
.about-section .image-header {
    position:absolute;
    top:-6rem;  left:50%;
    transform: translateX(-50%);}
.about-section .image-header img {
    width: 15rem;
    height: 15rem;
    object-fit: cover;}
.about-section-content {
    width:85%;
    max-width: 1161px;
    margin:0 auto;}
.about-section-content .headline {
    font-size: 1.6rem;
    color:#fff;
    background-color:#292929;
    margin: 2rem auto;
    text-align: center;
    padding:1vw 3rem;}
.about-information {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 5rem auto;}
.about-information ul{padding:0 0 0 1rem;}
.about-information:nth-child(3){
    flex-direction: row-reverse;}
.about-information .image-number{
    width:25%;
    position:relative;}
.about-information .image-number img{
    width:100%;
    height:26rem;
    object-fit: cover;}
.about-information .image-number .number{
    display:block;
    position: absolute;
    top: -1rem;
    left: 12rem;
    font-size: 8rem;
    color: #fff;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;}
.about-information:nth-child(3) .image-number .number{
    top: -1rem;
    left: 1rem;
    color: #C7C7C7;}
.about-information:nth-child(2) .image-number img{
    object-position: -7rem 0;}
.about-information:nth-child(3) .image-number img{
    object-position: -18rem 0;}
.about-information:nth-child(4) .image-number img{
    object-position: -23rem 0;}
.about-information .about-info-content{
    width: 65%;
    padding: 0 1rem;}
.about-information .about-info-content .subtitle {
    color: #4892CF;
    font-weight: bold;
    font-size: 1.2rem;
    padding-bottom: 0rem;}
.about-information .about-info-content .description {
    font-size:1.0rem;
    line-height:2.0rem;
padding-bottom: 1.5rem;}
.ruby {
    font-size: 0.8rem;
    vertical-align: top;}
.about-information .about-info-content .add-info-box{
    position: relative;
    padding: 2rem;
    border: 1px solid #D1D1D1;
    font-size: 0.9rem;
    margin-top: 4vw;}
.about-information .about-info-content .add-info-box .box-label{
    display: inline-block;
    position: absolute;
    top: -3.2rem;
    left: -0.1rem;
    width: 10rem;
    background-color: #4892CF;
    color: #fff;
    padding: 1vw 5rem;
    text-align: center;}
@media screen and (max-width:768px){
.about-section {
    margin: 0 auto 0vw;
    padding:8vw 0 2vw 0;}
.about-section .image-header {
    top:-8vw;}
.about-section .image-header img {
    width: 20vw;    height: 20vw;}
.about-section-content {
    width:90%;
    max-width: 90%;}
.about-section-content .headline {
    font-size: 4vw;
    padding:3vw;}
.about-information ul{padding:0 0 0 1vw;}
.about-information, .about-information:nth-child(3) {
    flex-direction: column;
    position: relative;
    margin: 5vw auto;}
.about-information .image-number{
    width:100%;
    position: relative;}
.about-information .image-number img{
    height:22vw;}
.about-information .image-number .number{
    left: 9vw;}
.about-information:nth-child(3) .image-number .number{
    left: 9vw;}
.about-information:nth-child(2) .image-number img{
    object-position: 0vw -13vw;}
.about-information:nth-child(3) .image-number img{
    object-position: 0vw -13vw;}
.about-information:nth-child(4) .image-number img{
    object-position: -17vw 0;}
.about-information .about-info-content{
    width: 100%;
    padding: 0;}
.about-information .about-info-content .subtitle {
    width: 100%;
    height: 20vw;
    font-size: 3.4vw;
    padding-bottom: 0;
    margin-left: 0%;
    display: flex;
    align-items: center;
    position: relative;}
.about-information .about-info-content .subtitle::after{
    content:"";
    display:block;
    position:absolute;
    background-color:#4892CF;
    height:1px;
    width:100%;
    top:16vw;   left:-1vw;}
.about-information .about-info-content .subtitle.firstline::after{
    top:19vw;}
.about-information .about-info-content .description {
    font-size: 3.4vw;
    line-height: 5vw;
    padding: 2vw 0;}
.about-information .about-info-content .add-info-box{
    font-size: 3vw;
    margin: 10vw 0 5vw;}
.about-information .about-info-content .add-info-box .box-label{
    width: 30vw;
    font-size: 4vw;
    padding: 3vw 5vw;
    top: -10.5vw;}
.ruby {
    font-size: 2.4vw;}
}


/*お問い合わせ*/
.contact-section {
    position: relative;
    margin: 0 auto;
    padding:2vw 0 5vw;}
.contact-section .image-header {
    position:absolute;
    top:-6vw;  left:50%;
    transform: translateX(-50%);}
.contact-section .image-header img {
    width: 15vw;
    height: 15vw;
    object-fit: cover;}
.form-container {
    width:85%;
    max-width: 1161px;
    margin: 3vw auto;
    border: 1px solid #707070;}
.contact-section .headline {
    background-color: #292929;
    color: #fff;
    font-size:1.4rem;
    padding: 1vw;
    text-align: center;
    margin: 0 0 3vw;}
.form-container .info iframe{
    display: block;
    width: 90%;
    margin: 3vw auto;
    padding: 1vw;
    border: 1px solid #707070;
    color: #404040;
    font-size: 1.4vw;
    line-height: 2.4vw;}
.form-container .info_02 iframe{
    display: block;
    width: 90%;
    margin: 3vw auto;
    padding: 1vw;
    border: 1px solid #707070;
    color: #404040;
    font-size: 1.4vw;
    line-height: 2.4vw;}
.button-group {
    display: flex;
    width: calc(90% + 2vw);
    justify-content: space-between;
    margin: 4vw auto;}
.form-button {
    background-color: #4892CF;
    color: white;
    width: 30%;
    text-decoration: none;
    text-align:center;
    border: none;
    border-bottom: 0.7vw solid #43739B;
    padding: 1.5vw 1vw;
    cursor: pointer;
    font-size: 1.3vw;
    display: flex;
    align-items: center;
    justify-content: center;}
.contact-form{
    width: calc(90% + 2vw);
    padding:1vw;
    margin:3vw auto;}
.contact-form label{
    padding: 1vw 3vw;}
.schedule-title{
    display: block;
    font-size: 1.5vw;
    font-weight: bold;
    border: 1px solid #707070;}
.schedule-options {
    margin: 3vw 0 6vw;}
.schedule-options label {
    display: flex;
    gap:1vw;
    padding:0;
    margin-bottom: 1vw;}
.schedule-options input[type="radio"],
.entry-period-options input[type="radio"] {
    width: 2vw;
    height: 2vw;
    margin-left: 3vw;
    border: 1px solid #ccc;
    box-sizing: border-box;}
.name-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
    width: 70%;
    height: 5vw;
    margin-left: 4vw;
    margin-bottom:2vw;}
.name-inputs span{
    width: 5vw;
    text-align: center;}
.name-inputs input[type="text"]{
    width:20vw;
    padding: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;}
input[type="email"],
input[type="tel"],
select{
    display: block;
    width: calc(90% + 2vw);
    padding: 8px;
    margin: 1vw auto 2vw 3vw;
    border: 1px solid #ccc;
    box-sizing: border-box;}
.entry-period-options{
    margin:2vw 0 5vw;}
.entry-period-options label {
    display: flex;
    gap:1vw;
    padding:0;
    margin-bottom: 1vw;}
.submit-button {
    width: 60%;
    display: block;
    background-color: #4892CF;
    color: white;
    border: none;
    border-bottom: 0.7vw solid #43739B;
    padding: 2vw 1vw;
    margin:auto;
    cursor: pointer;
    font-size: 1.3vw;}
.required {
    color: #DB7E00;
    font-size:1vw;
    margin-left: 5px;}
@media screen and (max-width:768px){
.contact-section {
    padding:5vw 0 5vw;}
.contact-section .image-header {
    top:-8vw;}
.contact-section .image-header img {
    width: 20vw;    height: 20vw;}
.form-container {
    width:90%;
    max-width: 90%;}
.contact-section .headline {
    font-size:4vw;
    padding: 2vw;
    width:86.5%;
    margin:3vw auto 5vw;}
.form-container .info {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 2vw;
    font-size: 3vw;
    line-height: 5vw;}
.form-container .info_02 {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 2vw;
    font-size: 3vw;
    line-height: 5vw;}
.button-group {
    flex-direction:column;
    gap:2vw;
    width: 90%;
    justify-content: flex-start;
    margin: 4vw auto 8vw;}
.form-button {
    width: 100%;
    font-size: 3.5vw;
    border-bottom-width: 1vw;}
.contact-form{
    width: 90%;
    padding:1vw;
    margin:3vw auto;}
.contact-form label{
    padding: 1vw 0;}
.schedule-title{
    font-size: 3.4vw;
    padding: 1vw!important;}
.schedule-options {
    margin: 5vw 0 10vw;}
.schedule-options label {
    display: flex;
    gap:1vw;
    padding:0;
    margin-bottom: 3vw;}
.schedule-options input[type="radio"],
.entry-period-options input[type="radio"] {
    width: 5vw;
    height: 5vw;
    margin-left: 0;}
.name-inputs {
    gap: 2vw;
    justify-content: flex-start;
    box-sizing:border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    margin:3vw 0 10vw;}
.name-inputs span{
    width: 10vw;}
.name-inputs input[type="text"]{
    width:28vw;}
input[type="email"],
input[type="tel"],
select{
    width: 100%;
    margin: 1vw auto 8vw;}
.entry-period-options{
    margin:2vw 0 5vw;}
.entry-period-options label {
    display: flex;
    gap:1vw;
    padding:0;
    margin-bottom: 3vw;}
.submit-button {
    width: 100%;
    border-bottom-width: 2vw;
    padding: 5vw 1vw;
    font-size: 4vw;
    margin-top: 10vw;}
.required {
    font-size:2.5vw;}
}


/*フッター*/
#footer{
    width: 100%;
    height: 5vw;
    padding: 2vw 0;
    background: #f5f5f5;
    font-size: 1.2vw;
    letter-spacing: 0.04vw;
    color: #888888;}
#footer .inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1vw;}
#footer .footer-logo {
    position: relative;}
#footer .footer-logo-di {
    position: absolute;
    top: 0;    left: 0;
    width:5vw;}
#footer .footer-logo-bb {
    position: absolute;
    top: 0;    left: 10vw;
    width:5vw;}
#footer .footer-logo-di img, #footer .footer-logo-bb img{
    width:100%;
    height:auto;
    object-fit: cover;}
#footer .footer-copyright {
    font-size:0.8rem;
    float: right;
    line-height: 5vw;}
@media screen and (max-width:768px){
#footer{
    margin:12vw 0 0vw;
    width: 100%;
    height: 50vw;
    font-size: 3vw;}
#footer .inner {
    max-width: 100%;
    padding:5vw;}
#footer .footer-logo {
    display: flex;
    position: relative;
    justify-content: center;
    gap:3vw;
    margin:5vw auto;}
#footer .footer-logo-di {
    position: relative;
    width:20vw;}
#footer .footer-logo-bb {
    position: relative;
    left:0;
    width:20vw;}
#footer .footer-copyright {
    float: none;
    text-align:center;
    font-size:2.8vw;}
}

@media screen and (max-width:400px){
	.form-container .info_02 {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0vw;
    font-size: 3vw;
    line-height: 5vw;}
	
	.form-container .info_02 iframe{
    display: block;
    width: 100%;
    margin: 3vw auto;
    padding: 1vw;
    border: 1px solid #707070;
    color: #404040;
    font-size: 1.4vw;
    line-height: 2.4vw;}
}


/*解像度が高いPC向けの設定*/
@media screen and (min-width:1501px){
.feature-section-title .en-title {
    font-size: 120px;}
.features{
    padding:40px;}
.feature .feature-description{
    width:500px;
    font-size: 20px;
    line-height: 50px;}
.ability-content .content-title{
    font-size:28px;}
.ability-content .content-description {
    font-size: 18px;
    line-height: 40px;}
.about-information .image-number{
    width:350px;}
.about-information .image-number img{
    height:500px;}
.about-information .image-number .number{
    left: 175px;
    font-size: 125px;}
#footer .footer-logo-di{
    width:80px;}
#footer .footer-logo-bb {
    left: 80px;
    width: 80px;
	margin-left: 1rem;}
}