@charset "utf-8";
/* reset styles */
/*=========================================================================
BASIC
=========================================================================*/
body {background: #050505; color: #fff; position: relative; z-index: 1;}

/* -------------------------------------------------------------- */
.section_basic {width: 76%; margin: 0 auto; height: auto; position: relative; z-index: 1; max-width: 1000px;}


/* -------------------------------------------------------------- */
.btn_join {height: auto; margin: 0 auto; max-width: 650px;}
.btn_join a, .btn_join img {width: 100%; height: auto; display: block;}
.btn_join a:hover,
.btn_join button:hover{filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}

.btn_join button {
background: none !Important;
cursor: pointer;
border:none !Important;
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
}


/* -------------------------------------------------------------- */
img.text_logo {height: auto; display: inline-block;}

/* -------------------------------------------------------------- */
.one_period {line-height: 180%;}
.one_period:last-of-type,
.one_period p:last-of-type {margin-bottom: 0;}


/* -------------------------------------------------------------- */
.period_headline {letter-spacing: -.4em;font-size: 0;line-height: 160%; font-weight: 500;}

.period_headline span, 
.period_headline figure {
display: inline-block;
vertical-align: bottom;
letter-spacing: 0;
font-size: 100%;
}

.period_headline span {border-bottom: 1px solid #fff; line-height: 160%;}
.period_headline figure img {width: 100%; height: auto; display: block;}

/* -------------------------------------------------------------- */
.period_headline.ver_sitelogo span {border-bottom: 0;}



/* -------------------------------------------------------------- */
.sub_headline {line-height: 160%;font-weight: 500;}

/* -------------------------------------------------------------- */
.cap_size {font-size: 80%;}

/*=========================================================================
FIRST VIEW
=========================================================================*/
#firstView {
width: 100%;
height: auto;

margin: 0 auto;
position: relative;
z-index: 1;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../img/bg_firstview.jpg");

-webkit-display: flex;
display: flex;
align-content: center;
align-items: center;
}

/* -------------------------------------------------------------- */
#firstView .section_basic {margin-bottom: 0;}

/* -------------------------------------------------------------- */
#viewContainer {width: 100%; height: auto; margin: 0 auto;max-width: 900px;}

/* -------------------------------------------------------------- */
#Logo img {width: 100%; height: auto; display:block;}
#Logo {margin: 0 auto; height: auto;}

/* -------------------------------------------------------------- */
#viewCatch,
#viewInfo {text-align: center; line-height: 160%; font-size: 500; letter-spacing: 1px;}


/* -------------------------------------------------------------- */
dl#resubNotes {width: 100%; height: auto; margin: 0 auto; }
dl#resubNotes dt, dl#resubNotes dd {height: auto;}

/* -------------------------------------------------------------- */
.view_boxtext {
border: 1px solid #fff;
line-height: 100%;
text-align: center;
position: relative;
z-index: 1;
letter-spacing: 1px;
}

dl#resubNotes dt .view_boxtext:last-of-type {margin-bottom: 0;}

/* -------------------------------------------------------------- */
dl#resubNotes dt .view_boxtext:after {
content: "";
position: absolute;
left: 50%;
background-position:center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("../img/cross.png");
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
dl#resubNotes dt .view_boxtext:last-of-type:after {content: none;}


/* -------------------------------------------------------------- */
img#viewIcon {display: block; height: auto; margin: 0 auto;}

/* -------------------------------------------------------------- */
dl#resubNotes dd, dl#resubNotes dd p {line-height: 160%; letter-spacing: 1px;}
dl#resubNotes dd p:last-of-type {margin-bottom: 0;}

/* -------------------------------------------------------------- */
#notesHeadline {line-height: 140%; border-bottom: 1px solid #fff;}



/*=========================================================================
PROMOTION
=========================================================================*/
dl#bookContainer {width: 100%; height: auto; margin: 0 auto;}

/* -------------------------------------------------------------- */
dl#bookContainer dt, dl#bookContainer dd {height: auto;}

/* -------------------------------------------------------------- */
dl#bookContainer dt a,
dl#bookContainer dt img {width: 100%; height: auto; display: block;}
dl#bookContainer dt a:hover {filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}

/* -------------------------------------------------------------- */
dl#bookContainer dd p, dl#bookContainer dd p {line-height: 160%;}
dl#bookContainer dd p:last-of-type {margin-bottom: 0;}

/* -------------------------------------------------------------- */
#bookHeadline {line-height: 140%; font-weight: 500;}


/*=========================================================================
ABOUT
=========================================================================*/
#aboutTitle {text-align: center; line-height: 160%; font-weight: 500;}

/* -------------------------------------------------------------- */
ul.instructor_list {list-style-type: none; letter-spacing: -.4em; font-size: 0; margin: 0 auto;}
ul.instructor_list:last-of-type {margin-bottom: 0;}

/* -------------------------------------------------------------- */
ul.instructor_list li {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
font-size: 100%;
height: auto;
}

/* -------------------------------------------------------------- */
.instructor_photo, .instructor_photo img {width: 100%; height: auto; display: block;}
.instructor_photo {margin: 0 auto;}

/* -------------------------------------------------------------- */
.instructor_name {font-weight: 500; line-height: 160%; text-align: center;}



/*=========================================================================
BOTTOM
=========================================================================*/
#bottomHeadline img {width: 100%; height: auto; display: block;}
#bottomHeadline {margin: 0 auto; height: auto;}



/*=========================================================================
MODAL
=========================================================================*/
body.other_page {background: #050505;
font-family: HelveticaNeue,Helvetica,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif ;
}

/* -------------------------------------------------------------- */
#otherContents {width:90%; height: auto;  margin: 0 auto; max-width: 900px; padding: 6% 0;}

/* -------------------------------------------------------------- */
.other_section, .other_section p {
line-height: 160%; 
font-family: HelveticaNeue,Helvetica,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif ;
}
.other_section {width: 100%; height: auto; margin: 0 auto;}
.other_section:last-of-type, .other_section p:last-of-type {margin-bottom: 0;}

/* -------------------------------------------------------------- */
.other_pageTitle {
font-weight: 900;
line-height: 160%;
font-family: HelveticaNeue,Helvetica,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif ;
}

#Specified.other_pageTitle {text-align: center;}

/* -------------------------------------------------------------- */
#btnClose {
font-family: HelveticaNeue,Helvetica,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif ;
text-align: center;
line-height: 160%;
font-weight: 900;
cursor: pointer;
}



/* -------------------------------------------------------------- */
dl#specifiedbody {width: 100%; height: auto; display: block; margin: 0 auto;}
dl#specifiedbody dt, dl#specifiedbody dd {line-height: 160%;}
dl#specifiedbody dt {color: #f20;}
dl#specifiedbody dd {color: #fff;}