@charset "UTF-8";
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: local('NotoSansJP-Regular.otf'),  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}
.noto400 {
    font-family: "Noto Sans Japanese", sans-serif;
    font-weight: 400;
}
.noto700 {
    font-family: "Noto Sans Japanese", sans-serif;
    font-weight: 700;
}
body {
    font-family: "Noto Sans Japanese", sans-serif;
    background-color: #fff;
}
 @import url('https://fonts.googleapis.com/css?family=Lato:700');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
.lato {
    font-family: 'Lato', sans-serif;
}
img {
    max-width: 100%;
    height: auto;
    width /***/: auto;
    vertical-align: bottom;
}
.box_link {
    position: relative;
}
.box_link a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.box_link a:hover {
    background-color: #FFF;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
a:hover img.over {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha( opacity=60 )";
}
/* clearfix */	

.clearfix:after {
    content: "";
    /* new clearfix */
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix {
    zoom: 1;
}
/* IE6 */
*:first-child + html .clearfix {
    zoom: 1;
    display: inline-block;
}
/* IE7 */
.clearfix {
    display: block;
 *zoom: 1;
}
.clearfix:after {
    display: block;
    visibility: hidden;
    font-size: 0;
    height: 0;
    clear: both;
    content: ".";
}
.center {
    text-align: center;
}
.grid_btn {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 50px;
}
.grid_btn .btn {
    text-align: center;
    padding: 20px;
    background-color: #FFFD38;
    color: #0A2F72;
    font-weight: bold;
    line-height: 150%;
}
.box_btn {
    font-family: 'Montserrat', sans-serif;
}
.box_bnr {
    border: solid 1px #F3F3F3;
    padding: 50px;
    width: 100%;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.box_bnr img.logo {
    float: left;
}
.box_bnr .text {
    float: left;
    margin-left: 50px;
}
.box_bnr .text .name {
    font-weight: bold;
    font-size: 30px;
    margin-top: -15px;
    margin-bottom: 10px;
}
.box_bnr .text .course {
    font-weight: bold;
    font-size: 38px;
    color: #184EB4;
    margin-bottom: 10px;
}
.box_bnr .text .other {
    margin-bottom: -10px;
}
.box_bnr .btn_more {
    background-color: #FEFF00;
    width: 140px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    color: #184EB4;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
    position: absolute;
    right: -20px;
    bottom: -10px;
}
.pc {
    display: block;
}
.mob {
    display: none;
}
.mb08 {
    margin-bottom: 8% !important;
}
.mb10 {
    margin-bottom: 10% !important;
}
.mb14 {
    margin-bottom: 14% !important;
}
p.list {
    text-indent: -1em;
    margin-left: 1em;
    line-height: 150% !important;
}
.float {
    position: fixed;
    z-index: 5;
    top: 0px;
    right: 0px;
}
/* header
---------------------------------------------*/
header {
    height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 64.28%;
    background: url('images/header/main.jpg') 0 0 no-repeat;
    background-size: contain;
    margin-top: 10px;
}
header img.logo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}
header img.title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    margin-top: 13%;
}
/* 1st
---------------------------------------------*/

#first {
    width: 100%;
    max-width: 1100px;
    margin: 50px auto 50px auto;
}
/* 2nd
---------------------------------------------*/

#second {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 50px;
    background: url("images/2nd/expert_bg.png") no-repeat right bottom;
}
.expert {
    width: 100%;
    max-width: 900px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
}
.expert img {
    float: left;
    margin-right: 50px;
}
.expert .name {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
    margin-left: 220px;
}
.expert .name span {
    font-weight: normal;
    font-size: 14px;
    color: #666;
}
.expert p {
    margin-left: 220px;
    font-size: 14px;
    line-height: 180%;
}
/* 3rd
---------------------------------------------*/
#third .title {
    background: url("images/3rd/bg_01.png") no-repeat bottom;
    background-size: contain;
    text-align: center;
}
#third .inner {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#third .container {
    background-color: #F2F6F9;
}
#third .inner h3 {
    font-size: 20px;
    line-height: 150%;
    color: #194FB4;
    font-weight: bold;
    text-align: center;
}
#third .inner .start {
    margin: 5% auto 8% auto;
    font-weight: bold;
    line-height: 150%;
    font-size: 34px;
    text-align: center;
}
#third .inner hr {
    margin: 5% auto;
    border-bottom: 1px solid #194FB4;
    border-top-style: none;
}
#third .inner .line {
    background-image: url(images/3rd/cell.png);
    background-repeat: repeat-y;
    background-position: center center;
    width: 30px;
}
#third .inner .period {
    width: 25%;
    text-align: center;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #194FB4;
}
#third .inner td {
    vertical-align: top;
}
#third .inner .period .phase {
    font-weight: bold;
    font-size: 30px;
    margin-top: -20px;
    margin-bottom: 5px;
}
#third .inner .period .phase span {
    font-size: 3em;
}
#third .inner .period .months {
    margin-bottom: 5px;
}
#third .inner .period .area {
    margin: 5px auto 0px auto;
    border-top: solid 1px #194FB4;
    padding-top: 5px;
    width: 60%;
}
#third .inner h4 {
    color: #194FB4;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 30px;
    line-height: 150%;
}
#third .inner td h4 {
    padding-bottom: 10px;
    border-bottom: solid 1px #194FB4;
    margin-bottom: 10px;
}
#third .inner p {
    font-size: 14px;
    line-height: 180%;
    text-align: left
}
#third .footer {
    background: url("images/3rd/footer.png") no-repeat top;
    background-size: contain;
    text-align: center;
    padding: 3% 0px;
}

/* forth
---------------------------------------------*/

#forth .title {
	height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 40.12%;
    background: url('images/4th/bg.jpg') 0 0 no-repeat;
    background-size: contain;
    text-align: center;
	position: relative;
}
#forth .title img {
	width: 100%;
	max-width: 1010px;
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 2;
}
#forth .inner {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom: 50px;
}
#forth .inner h3 {
    font-size: 34px;
	font-weight: bold;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 30px;
}
#forth .inner .detail h4 {
    font-size: 24px;
	font-weight: bold;
	color: #164FB4;
	margin-top: 50px;
	padding-bottom: 10px;
	border-bottom: solid #164FB4 1px;
	margin-bottom: 30px;
}
#forth .inner .detail h5 {
    font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
}
#forth .inner .detail ul {
	padding-bottom: 2%;
}
#forth .inner .detail ul li {
	position: relative;
	list-style-type: none!important;/*ポチ消す*/
	margin-bottom: 10px;
	line-height: 1.5;
	vertical-align: middle;
	text-indent: -1.5em;
	margin-left: 1.5em;
}
#forth .inner .detail ul li:before{ /*疑似要素*/
  display:inline-block; 
  vertical-align: middle;
	margin-top: -2.5px;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #164FB4;
  border-radius: 50%;
  margin-right: 8px;
}
#forth .inner .contact {
	margin-top: 8%;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #164FB4;
	margin-bottom: 20px;
	line-height: 150%;
}
#forth .inner .btn_contact {
	margin-right: auto;
    margin-left: auto;
    font-weight: bold;
    color: #164FB4;
    padding: 20px;
    width: 300px;
	background: #FEFF03;
	text-align: center
}


/* fifth
---------------------------------------------*/
#fifth {
	margin: 0px auto;
	padding: 0px 0px;
}
#fifth .inner {
	width: 100%;
	text-align: center;
}
#fifth .inner .title {
	margin-bottom: -160px;
}
#fifth .interview.photo_l {
    background-image: url(images/5th/bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    padding: 13% 0px;
}
#fifth .interview.photo_l .content {
    width: 40%;
    float: left;
}
#fifth .interview .content h3 {
	font-size: 24px;
	font-weight: bold;
	padding-bottom: 15px;
	margin-bottom: 20px;
	color: #164FB4;
	border-bottom: solid 1px #164FB4;
	line-height: 150%;
}
#fifth .interview .content .name {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 150%;
}
#fifth .interview .content .data {
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 150%;
}
#fifth .interview .content p {
	line-height: 180%;
}
#fifth .interview img {
    float: left;
    margin-right: 50px;
}

/* sixth
---------------------------------------------*/
#sixth {
	margin: 0px auto;
	padding: 0px 0px;
}
#sixth .inner {
	width: 100%;
	text-align: center;
}
#sixth .inner .title {
	margin-bottom: -100px;
}
#sixth .reason.right {
	background-image: url(images/6th/bg_l.png);
	background-repeat: no-repeat;
    background-position: left top;
	height: 561px;
}
#sixth .reason.right .inner {
	width: 100%;
	max-width: 1200px;
	text-align: left;
	margin: auto;
}
#sixth .reason.right .inner img {
	float: right;
	margin-left: 50px;
}

#sixth .reason.left {
	background-image: url(images/6th/bg_r.png);
	background-repeat: no-repeat;
    background-position: right top;
	height: 571px;
}
#sixth .reason.left .inner {
	width: 100%;
	max-width: 1200px;
	text-align: left;
	margin: auto;
}
#sixth .reason.left .inner img {
	float: left;
	margin-right: 50px;
}

#sixth .reason .inner {
	padding-top: 50px;
}
#sixth .reason .inner .content {
	padding-top: 80px;
}

#sixth .reason .content .name {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 100%;
	margin-top: 50px;
}
#sixth .reason .content .name span {
    font-weight: normal;
    font-size: 14px;
    color: #666;
}
#sixth .reason.content .data {
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 150%;
}
#sixth .reason .content p {
	line-height: 180%;
}


/* message
---------------------------------------------*/
.message {
	width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
	background-color: #fff;
	border: solid 1px #3766BD;
	margin-bottom: -50px;
	position: relative;
	margin-top: 50px;
}
.message .inner {
	margin: 5%;
}
.message .inner h3 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 30px;
	color: #184EB4;
	line-height: 130%;
}
.message .inner .face {
	float: right;
	margin-left: 30px;
}
.message .inner p {
	line-height: 180%;
	font-size: 14px;
}
.message .inner .name {
	font-size: 24px;
	font-weight: bold;
	margin-top: 30px;
}

/* footer
---------------------------------------------*/

footer {
    height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 45.24%;
    background: url('images/footer/bg.jpg') 0 0 no-repeat;
    background-size: contain;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 50px;
}
footer .name {
    position: relative;
    bottom: 350px;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    font-size: 35px;
    font-weight: bold;
    color: #fff;
}
footer .detail {
    position: relative;
    bottom: 310px;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    color: #fff;
    font-size: 20px;
}
footer .btn_more {
    position: relative;
    bottom: 270px;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    color: #fff;
    padding: 20px;
    border: solid 1px #fff;
    width: 150px;
}
footer .copyright {
    color: #fff;
    font-size: 12px;
    position: relative;
    bottom: 200px;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
footer .btn {
	position: fixed;
	z-index: 20;
	bottom: 0px;
	width: 100%;
	background-color: #fff;
}
footer .btn .counseling {
	width: 50%;
	float: left;
	padding: 2.4% 0px;
	background-color: #183E85;
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	line-height: 130%
}
footer .btn .mail {
    width: 50%;
    float: left;
    padding: 2.4% 0px;
    background-color: #FEFF00;
    font-size: 28px;
    font-weight: bold;
    color: #000;
	line-height: 130%
}
.adjustment {
	display: none;
}
@media (max-width: 1100px) {
#first, #second {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}
.box_bnr img.logo {
    margin-bottom: 10px;
}
.box_bnr .btn_more {
    width: 100%;
    position: static;
    right: auto;
    bottom: auto;
    clear: both;
    margin-top: 20px;
}
.box_bnr {
    padding: 3%;
    width: 94%;
}
.box_bnr .text .name {
    font-size: 20px;
    margin-top: auto;
}
.box_bnr .text .course {
    font-size: 30px;
}
.box_bnr .text .other {
    margin-bottom: 10px;
}
#third .inner,#forth .inner,#sixth .reason.right .inner,#sixth .reason.left .inner {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}
#fifth .interview.photo_l {
	margin: 5% 0px;
}
#fifth .interview.photo_l .content {
	width: 45%;
}
#fifth .interview img {
	width: 40%;
}

.message {
	width: 90%;
}
}

@media (max-width: 850px) {
.box_bnr .text .name {
    font-size: 16px;
}
.box_bnr .text .course {
    font-size: 20px;
}
#forth .title img {
	width: 90%;
}
#forth .inner .btn_contact {
    width: 90%;
}
#fifth .interview.photo_l {
    background-size: contain;
}

#fifth .interview img {
	margin-right: 3%;
	margin-bottom: 2%;
}

#sixth .reason .inner {
	padding-top: 100px;
}
#sixth .reason .content .name {
	margin-top: 0px;
}
#sixth .reason.right .inner img {
	margin-left: 50px;
	width: 40%;
	margin-bottom: 30px;
}
#sixth .reason.left .inner img {
	margin-left: 50px;
	width: 40%;
	margin-bottom: 30px;
}
#sixth .reason.left .inner .content {
	padding-top: 0px;
}
#sixth .reason.left .content .name {
	margin-top: 0px !important;
}
footer .name {
    bottom: 280px;
    font-size: 30px;
}
footer .detail {
    bottom: 250px;
    font-size: 16px;
}
footer .btn_more {
    bottom: 230px;
    padding: 20px;
    width: 90%;
}
footer .copyright {
    bottom: 170px;
}
footer .btn .counseling {
	font-size: 24px;
}
footer .btn .mail {
	font-size: 24px;
}

}

@media screen and (min-width: 601px) {
a[href^="tel:"] {
    pointer-events: none;
}
}

@media (max-width: 700px) {
header img.logo {
    width: 20%;
}
header img.title {
    margin-top: 10%;
}
.box_bnr img.logo {
    float: none;
}
.box_bnr .text {
    float: none;
    margin-left: 0px;
}
.expert {
    margin-bottom: 50px;
}
.expert img {
    margin-right: 30px;
    margin-bottom: 20px;
    width: 30%;
}
.expert .name {
    font-size: 20px;
    margin-left: auto;
}
.expert p {
    margin-left: auto;
}
.pc {
    display: none;
}
.mob {
    display: block;
}
.float {
    display: none;
}
#third .inner .start {
    font-size: 20px;
}
#third .inner .period {
    width: 18%;
    font-size: 13px;
}
#third .inner .period .phase {
    font-size: 20px;
}
#third .inner td h4 {
    font-size: 18px;
}
#forth .inner h3 {
    font-size: 24px;
}
#forth .inner .detail h4 {
    font-size: 20px;
}
#fifth .interview.photo_l {
	margin: 10% 0px 1% 0px;
}
#fifth .interview img {
	margin-right: 5%;
	margin-bottom: 2%;
	float: left;
}
#fifth .interview.photo_l .content {
	margin-right: 2%;
	margin-left: 2%;
	float: none;
	width: auto;
}

#fifth .interview .content h3 {
	font-size: 20px;
}
#fifth .interview .content .name {
	font-size: 20px;
}
#fifth .interview .content .data {
	text-align: right;
}
#sixth .reason .content .name {
	margin-top: 0px;
}
p.list {
    font-size: 13px !important;
}
.message {
	margin-bottom: -20px;
}
.message .inner h3 {
	font-size: 20px;
}
.message .inner .face {
	width: 20%;
	margin-bottom: 20px;
}
.message .inner .name {
	font-size: 16px;
}
footer .name {
    bottom: 190px;
	font-size: 20px;
}
footer .detail {
    bottom: 160px;
    font-size: 16px;
}
footer .btn_more {
    bottom: 140px;
    padding: 15px;
}
footer .copyright {
    bottom: 120px;
}
footer .btn .counseling {
	font-size: 14px;
	padding: 4% 0px;
}
footer .btn .mail {
	font-size: 14px;
	padding: 4% 0px;
}
	
}

@media (max-width: 480px) {
#fifth {
	margin: -90px auto -50px auto; 
}	
#fifth .interview.photo_l {
	margin: 25% 0px 2% 0px;
}
#sixth .reason.left .inner {
	padding-top: 150px;
	padding-bottom: 200px;
}
.message {
	margin-top: 200px!important;
}
.adjustment {
	display: block;
	padding-top: 100px;
	clear: both;
	height: 200px;
}
footer .name {
    bottom: 140px;
	font-size: 18px;
}
footer .detail {
    bottom: 130px;
}
footer .btn_more {
    bottom: 120px;
    padding: 10px;
}
footer .copyright {
    bottom: 100px;
}
footer .btn .counseling {
	font-size: 13px;
	padding: 5% 0px;
}
footer .btn .mail {
	font-size: 13px;
	padding: 5% 0px;
}
}