@charset "utf-8";

/*****************************************************************************
 common 
 *****************************************************************************/

.inner {
max-width: 1230px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 30px;
position: relative;
}
@media screen and (max-width: 640px) {
.inner {
padding: 0 15px;
}
}
.inner:after {
content: '';
display: block;
clear: both;
}


.visual {
padding-top: 100px;
}
@media screen and (max-width: 640px) {
.visual {
padding-top: 80px;
}
}
.visual-wrapper {
height: 450px;
position: relative;
}
@media screen and (max-width: 640px) {
.visual-wrapper {
height: 250px;
}
}
.visual-title {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
text-align: center;
font-weight: 600;
letter-spacing: 6px;
font-size: 5.6rem;
color: #1f211c;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 640px) {
.visual-title {
letter-spacing: 3px;
font-size: 3.6rem;
}
}
.visual-bg.morphing {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
}
@media screen and (max-width: 640px) {
.visual-bg.morphing {
width: 150px;
height: 150px;
}
}


.description {
margin-bottom: 180px;
}
@media screen and (max-width: 640px) {
.description {
margin-bottom: 90px;
}
}
.description-title {
margin-bottom: 70px;
text-align: center;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.6;
font-size: 3.1rem;
color: #1f211c;
}
@media screen and (max-width: 640px) {
.description-title {
margin-bottom: 30px;
font-size: 2.4rem;
}
.description-title br {
display: none;
}
}
.description-text {
text-align: center;
line-height: 2;
}
@media screen and (max-width: 640px) {
.description-text br {
display: none;
}
}
.course-title {
margin-top: 100px;
text-align: center;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.6;
font-size: 2.4rem;
color: #1f211c;
}
@media screen and (max-width: 640px) {
.course-title {
margin-top: 50px;
letter-spacing: 1px;
font-size: 1.8rem;
}
}
.course-title span {
margin-right: 15px;
padding-right: 20px;
background: url(../img/common/arrow02.png) no-repeat right center;
background-size: 6px auto;
}
.course-text {
text-align: center;
line-height: 2;
}


.item {
margin-bottom: 180px;
}
@media screen and (max-width: 640px) {
.item {
margin-bottom: 90px;
}
}
.item-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.item-wrapper {
display: block;
}
}
.item-block {
width: 45.299145299%;
}
@media screen and (max-width: 900px) {
.item-block {
width: 100%;
margin-bottom: 60px;
}
}
@media screen and (max-width: 640px) {
.item-block {
margin-bottom: 30px;
}
}
.item-block.center {
margin: 0 auto;
}
.item-title {
margin-bottom: 40px;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.8;
font-size: 3.1rem;
color: #1f211c;
}
@media screen and (max-width: 1024px) {
.item-title br {
display: none;
}
}
@media screen and (max-width: 640px) {
.item-title {
margin-bottom: 20px;
letter-spacing: 1px;
font-size: 2.4rem;
}
}
.item-title small {
margin-bottom: 20px;
font-weight: 700;
letter-spacing: 2px;
font-size: 1.5rem;
display: block;
}
@media screen and (max-width: 640px) {
.item-title small {
margin-bottom: 10px;
}
}
.item-title span {
font-weight: 700;
font-size: 1.5rem;
display: block;
}
@media screen and (max-width: 640px) {
.item-title span {
margin-bottom: 15px;
}
}
.item-title em {
font-weight: 600;
letter-spacing: 1px;
font-size: 1.8rem;
}
@media screen and (max-width: 640px) {
.item-title em {
font-size: 1.4rem;
}
}
.item-list {
margin-bottom: 60px;
line-height: 2;
letter-spacing: 2;
font-weight: 500;
color: #1f211c;
}
@media screen and (max-width: 640px) {
.item-list {
margin-bottom: 30px;
}
}
.item-list dt {
float: left;
margin-right: 8px;
padding-right: 14px;
position: relative;
}
.item-list dt:after {
content: '';
width: 6px;
height: 11px;
background: url(../img/common/arrow02.png) no-repeat right center;
background-size: 6px auto;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.item-list dd {
}
.item-text {
}
.item-text p {
margin-bottom: 2em;
line-height: 2;
}
.item-text p:last-child {
margin-bottom: 0;
}
.item-text .attention {
padding-left: 1em;
text-indent: -1em;
color: #a42929;
display: block;
}
.item-img {
width: 47.008547008%;
}
@media screen and (max-width: 900px) {
.item-img {
width: 100%;
}
}
.item-btn {
margin-top: 100px;
font-weight: 900;
letter-spacing: 2px;
font-size: 1.6rem;
}
@media screen and (max-width: 1024px) {
.item-btn {
margin-top: 50px;
}
}
@media screen and (max-width: 640px) {
.item-btn {
margin-top: 40px;
}
}
.item.even {
}
.item.even .item-block {
order: 2;
}
.item.even .item-img {
order: 1;
}


.contents {
position: relative;
}
.contents.what-we-do .morphing {
position: absolute;
top: 250px;
left: 150px;
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.what-we-do .morphing {
display: none;
}
}
.contents.trial .morphing {
position: absolute;
top: 250px;
left: 150px;
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.trial .morphing {
display: none;
}
}
.contents.lesson01 .morphing {
position: absolute;
top: 250px;
left: 150px;
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.lesson01 .morphing {
display: none;
}
}
.contents.lesson02 .morphing {
position: absolute;
top: -50px;
left: 300px;
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.lesson02 .morphing {
display: none;
}
}
.contents.lesson03 .morphing {
position: absolute;
top: -200px;
left: 150px;
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.lesson03 .morphing {
display: none;
}
}
.contents.lesson01-1 .morphing {
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%,0);
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.lesson01-1 .morphing {
display: none;
}
}
.contents.lesson02-1 .morphing {
position: absolute;
top: -150px;
left: 50%;
transform: translate(-50%,0);
z-index: -1;
}
@media screen and (max-width: 900px) {
.contents.lesson02-1 .morphing {
display: none;
}
}


.sp-hide {
}
@media screen and (max-width: 900px) {
.sp-hide {
display: none!important;
}
}
.pc-hide {
display: none;
}
@media screen and (max-width: 900px) {
.pc-hide {
display: block!important;
}
}

/*****************************************************************************
 WHAT WE DO
 *****************************************************************************/

.access {
margin-bottom: 250px;
}
@media screen and (max-width: 640px) {
.access {
margin-bottom: 125px;
}
}
.access-headline {
margin-bottom: 100px;
text-align: center;
letter-spacing: 8px;
font-weight: 900;
font-size: 5.3rem;
color: #1f211c;
}
@media screen and (max-width: 640px) {
.access-headline {
margin-bottom: 50px;
letter-spacing: 2px;
font-size: 3.1rem;
}
}
.access-map {
width: 100%;
height: 628px;
margin-bottom: 70px;
position: relative;
}
@media screen and (max-width: 640px) {
.access-map {
height: 314px;
margin-bottom: 30px;
}
}
.access-map iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.access-wrapper {
margin-bottom: 60px;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
.access-wrapper {
display: block;
}
}
.access-wrapper dl {
width: 50%;
line-height: 2;
}
@media screen and (max-width: 640px) {
.access-wrapper dl {
width: 100%;
}
}
.access-wrapper dt {
float: left;
font-weight: 900;
letter-spacing: 2px;
}
@media screen and (max-width: 900px) {
.access-wrapper dt {
float: none;
}
}
.access-wrapper dd {
margin-bottom: 40px;
padding-left: 9em;
}
@media screen and (max-width: 900px) {
.access-wrapper dd {
padding-left: 0;
}
}
@media screen and (max-width: 640px) {
.access-wrapper dd {
margin-bottom: 20px;
}
}
.access-btn {
text-align: center;
font-weight: 900;
letter-spacing: 2px;
font-size: 1.6rem;
}

/*****************************************************************************
 TRIAL
 *****************************************************************************/

.contents.trial .item-title {
margin-bottom: 18px;
letter-spacing: normal;
}
.contents.trial .item-title small {
margin-bottom: 4px;
}