/* ==========================================================================
   common
   ========================================================================== */

html {
    color: #333;
    font-size: 18px;
    line-height: 1.5;
}
* {
	box-sizing: border-box;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
textarea {
    resize: vertical;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
   clear: both;
}
ul,li {
	padding: 0;
	margin: 0;
}
strong {
	font-weight: bold;
	color: #f08a05;
}
li {
	list-style: none;
}
.pc {
	display: inherit!important;
}
.sp {
	display: none!important;
}
.fl {
	float: left;
}
.fr {
	float: right;
}

/* ==========================================================================
   style
   ========================================================================== */

body {
	width: 100%;
	background: #f2f2f2;
}
.row {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}
.wrapper {
	background: #FFF;
}
.wrapper a {
	color: #00aebb;
}
.wrapper a:hover {
	text-decoration: none;
}
.wrapper .logo a {
	color: #FFF;
	text-decoration: none;
	transition: 0.3s;
}
.wrapper .logo a:hover {
	opacity: 0.8;
	transition: 0.3s;
}

nav.side {
	width: 250px;
	padding: 0 30px;
}
section.main {
	width: 730px;
	padding: 0 30px;
	border-left: 1px solid #ececec;
}

nav.side .logo a {
	background: #00aebb;
	color: #FFF;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	text-align: center;
	font-size: 20px;
	padding: 35px 0 20px;
	display: block;
}
nav.side .logo p {
	margin: 20px 0 0;
}
nav.side .link {
	margin-top: 20px;
}
nav.side .link ul li, nav.side .contact ul li {
	border-bottom: 1px solid #ededed;
}

nav.side .link ul li:last-child {
	border-bottom: none;
}
nav.side .link a {
	font-size: 16px;
	padding: 20px 0;
	display: block;
}
nav.side .link .current {
	font-size: 16px;
	padding: 20px 0 20px 35px;
	font-weight: bold;
}
.link li {
	position: relative;
	padding-left: 35px;
}
.link li:before {
	position: absolute;
	transition: 0.3s;
}
.link .ico:before {
	font-family: FontAwesome;
	color: #00aebb;
}
.link .ico.ico01:before {
	content: "\f10a";
	left: 5px;
	top: 10px;
	font-size: 30px;
}
.link .ico.ico02:before {
	content: "\f157";
	left: 5px;
	top: 15px;
	font-size: 30px;
}
.link .ico.ico03:before {
	content: "\f046";
	left: 5px;
	top: 15px;
	font-size: 25px;
}
.link .ico.ico04:before {
	content: "\f054";
	left: 8px;
	top: 18px;
}
.link .ico.two-line:before {
	top: 25px;
}

.link li:hover:before {
	transition: 0.3s;
}
.link li.phone:hover:before {
	transform: rotate(-10deg)
}
.link li.arrow:hover:before {
	left: 8px;
}
section.main .link {
	padding: 0 10px;
}
section.main .link li {
	padding: 10px 0 10px 35px;
}
section.main .link .phone:before {
	top: 10px;
}
section.main .link .arrow:before {
	top: 11px;
	left: 10px;
}
section.main .link .arrow:hover:before {
	left: 13px;
}
section.main .link ul {
	width: 50%;
}
section.main .link .ico.ico01:before {
	left: 5px;
	top: 2px;
}
section.main .link .ico.ico02:before {
	left: 5px;
	top: 3px;
}
section.main .link .ico.ico03:before {
	left: 5px;
	top: 7px;
}
section.main .link .ico.ico04:before {
	left: 10px;
    top: 12px;
}

nav.side .contact {
	font-size: 16px;
}
nav.side .contact li {
	padding: 15px 0 15px 55px;
	position: relative;
}
nav.side .contact .side-h {
	background: #00aebb;
	color: #FFF;
	font-weight: bold;
	font-size: 16px;
	padding: 3px 20px;
	margin-top: 15px;
	position: relative;
}
nav.side .contact .side-h:before {
	position: absolute;
	content: " ";
	width: 4px;
	height: 18px;
	background: #ffdb15;
	left: 7px;
	top: 6px;
}
nav.side .contact li:before {
	position: absolute;
	width: 40px;
	height: 40px;
	left: 0;
	top: 18px;
}
nav.side .contact .exist:before {
	content: url(../img/ico-my.png);
}
nav.side .contact .new:before {
	content: url(../img/ico-contact.png);
}


section.main .logo {
	padding: 40px 0;
	text-align: center;
	border-bottom: 1px solid #ececec;
}
section.main .logo .cf {
	display: inline-block;
}
section.main .logo img {
	width: 209px;
}
section.main .logo span {
	width: 100px;
	display: inline-block;
	color: #00aebb;
	border: 1px solid #00aebb;
	padding: 5px 20px;
	font-size: 23px;
	font-weight: bold;
	margin-left: 25px;
	margin-top: 5px;
}
nav.breadcrumb {
    padding: 10px 0;
	margin-top: 10px;
	font-size: 16px;
}
nav.breadcrumb ol {
    margin: 0 auto;
	padding: 0;
}
nav.breadcrumb li {
    display: inline-block;
    float: left;
}
nav.breadcrumb li::after {
    color: #959fa5;
    content: "\f105";
    font-family: "FontAwesome";
    margin: 0 10px;
}
nav.breadcrumb ol li:last-child::after {
    content: none;
}
nav.breadcrumb li.home::before {
    color: #00aebb;
    content: "\f015";
    font-family: "FontAwesome";
    margin-right: 5px;
}
nav.breadcrumb li a:hover {
    color: #00aebb;
    text-decoration: none;
}
nav.breadcrumb a {
    color: #00aebb;
}
section.cont h1 {
	font-size: 32px;
	padding-left: 65px;
	position: relative;
	margin-bottom: 5px;
}
section.cont h1:before {
	content: " ";
	height: 50px;
	width: 50px;
	position: absolute;
	left: 0;
	top: 0;
}
section.cont h1.ico00:before {
	background-image: url(../img/ico-h00.png);
}
section.cont h1.ico01:before {
	background-image: url(../img/ico-h01.png);
}
section.cont h1.ico02:before {
	background-image: url(../img/ico-h02.png);
}
section.cont h1.ico03:before {
	background-image: url(../img/ico-h03.png);
}
section.cont h1.ico04:before {
	background-image: url(../img/ico-h04.png);
}
section.cont p.discription {
	padding-left: 65px;
	margin-bottom: 50px;
	margin-top: 15px;
}
section.cont h2 {
	border-radius: 8px;
	background-color: #00aebb;
	font-size: 20px;
	color: #FFF;
	padding: 10px 15px 10px 30px;
	margin-top: 60px;
	margin-bottom: 20px;
	position: relative;
}
section.cont h2:before {
	position: absolute;
	content: " ";
	width: 6px;
	height: 28px;
	background: #ffdb15;
	border-radius: 18px;
	left: 15px;
}

section.cont h2.type02 {
	border-radius: 8px;
	background-color: #FFF;
	color: #333;
	padding: 0 15px 0 20px;
	line-height: 40px;
	margin-top: 40px;
}
section.cont h2.type02:before {
	height: 40px;
	background: #ffdb15;
	left: 0;
}

section.cont .btn-two {
	padding: 0 10px;
}
section.cont .btn-two .btn {
	text-align: center;
}
section.cont .btn-two p {
	text-align: left;
	display: inline-block;
}
section.cont .btn-two a {
	border-radius: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #c1c1c1;
	box-sizing: border-box;
	background: -webkit-linear-gradient(90deg, #e5e5e5 0%, #ffffff 100%);
	background: -moz-linear-gradient(90deg, #e5e5e5 0%, #ffffff 100%);
	background: -o-linear-gradient(90deg, #e5e5e5 0%, #ffffff 100%);
	background: -ms-linear-gradient(90deg, #e5e5e5 0%, #ffffff 100%);
	background: linear-gradient(0deg, #e5e5e5 0%, #ffffff 100%);
	width: 310px;
	height: 90px;
	display: inline-block;
	color: #333;
	text-decoration: none;
	position: relative;
}
section.cont .btn-two a:hover {
	background: -webkit-linear-gradient(90deg, #ffffff 0%, #e5e5e5 100%);
	background: -moz-linear-gradient(90deg, #ffffff 0%, #e5e5e5 100%);
	background: -o-linear-gradient(90deg, #ffffff 0%, #e5e5e5 100%);
	background: -ms-linear-gradient(90deg, #ffffff 0%, #e5e5e5 100%);
	background: linear-gradient(0deg, #ffffff 0%, #e5e5e5 100%);
}
section.cont .btn-two a span {
	color: #00aebb;
	text-decoration: underline;
}
section.cont .btn-two a.fl:before, section.cont .btn-two a.fr:before {
	position: absolute;
	content: " ";
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	top: 20px;
	left: 20px;
}
section.cont .btn-two a.fl:before {
	background-image: url(../img/ico-my.png);
}
section.cont .btn-two a.fr:before {
	background-image: url(../img/ico-contact.png);
}
section.cont .go-home {
	text-align: center;
	margin: 60px 0;
}
section.cont .go-home a {
	transition: 0.3s;
}
section.cont .go-home a:hover {
	opacity: 0.8;
	transition: 0.3s;
}

/*Q&A アコーディオン*/

.faq-box dl{
	_zoom: 1;
	display: block;
	width: 100%;
}
.faq-box dt {
	cursor: pointer;
	_zoom: 1;
	line-height: 1.5em;
	font-size: 20px;
	font-weight: bold;
	border-radius: 6px;
	background: #f6f2e9;
	padding: 10px 55px 10px 2.2em;
	text-indent: -1.4em;
	margin-top: 15px;
	background-image: url(../img/ico-plus.png);
	background-repeat: no-repeat;
	background-position: right 15px center;
}
.faq-box dt:before {
	content: "Q.";
	margin-right: 5px;
}
.faq-box dt.selected  {
	background-image: url(../img/ico-minus.png);
}
.faq-box dd {
	background-image: url(../img/ico-a.png);
	background-repeat: no-repeat;
	background-position: 0 25px;
	display: block;
	line-height: 1.6em;
	padding-left: 60px;
	padding-top: 30px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-left: 0;
	position: relative;
}
.faq-box dd.chara01, .faq-box dd.chara02 {
	padding-right: 110px;
}
.faq-box dd.chara01:after {
	position: absolute;
	content: " ";
	background-image: url(../img/chara01.png);
	background-repeat: no-repeat;
	right: -5px;
	top: 30px;
	width: 112px;
	height: 131px;
}
.faq-box dd.chara02:after {
	position: absolute;
	content: " ";
	background-image: url(../img/chara02.png);
	background-repeat: no-repeat;
	right: -5px;
	top: 30px;
	width: 110px;
	height: 124px;
}
.faq-box dd p {
	margin-bottom: 20px;
	margin-top: 0;
}
.faq-box strong{
	color: #F2790D;
}



footer {
	background: #dfdfdf;
}
footer nav {
	padding-top: 20px;
	padding-bottom: 50px;
	position: relative;
	padding-left: 250px;
}
footer ul {
	float: left;
	margin-left: 50px;
}
footer li {
	font-size: 14px;
	margin-bottom: 10px;
}
footer a {
	color: #656565;
	text-decoration: underline;
	font-size: 14px;
}
footer a:hover {
	color: #f30;
	text-decoration: underline;
}
footer .row span a {
	position: absolute;
	top: 0;
	right: 0;
	transition: 0.3s;
}
footer .row span a:hover {
	opacity: 0.8;
	transition: 0.3s;
}




/* SP用 */
@media screen and (max-width: 667px){
	html {
		font-size: 13px;
	}
	.sp {
		display: inherit!important;
	}
	.pc {
		display: none!important;
	}
	.fl {
		float: none;
	}
	.fr {
		float: none;
	}
	.row {
		width: 100%;
		padding: 0;
	}
	.head-area {
		background: #00aebb;
		font-size: 14px;
		color: #FFF;
	}
	.head-area .logo {
		display: block;
    	text-align: center;
	}
	.head-area .logo p {
		display: inline-flex;
	}
	.head-area img {
		width: 77px;
		height: 20px;
		margin-right: 10px;
	}
	.menu-btn {
		display: inline;
		left: 15px;
		position: absolute;
		top: 12px;
		z-index: 9998;
	}
	.menu-btn a {
		display: inline-block;
		text-decoration: none;
		width: 27px;
		height: 21px;
	}
	.btn-open {
		content:" ";
		background: url(../img/menu-btn.png);
		-webkit-transition: all .2s linear 0s;
		-moz-transition: all .2s linear 0s;
		-o-transition: all .2s linear 0s;
		transition-property: all .2s linear 0s;
		width: 27px;
		height: 21px;
		background-size:contain;
		vertical-align:middle;
		display:inline-block;
	}
	.btn-close:after {
		content:" ";
		background: url(../img/menu-close-btn.png);
		-webkit-transition: all .2s linear 0s;
		-moz-transition: all .2s linear 0s;
		-o-transition: all .2s linear 0s;
		transition-property: all .2s linear 0s;
		width: 50px;
		height: 50px;
		background-size:contain;
		vertical-align:middle;
		display:inline-block;
	}
	.overlay {
		position: fixed;
		top: 0;
		z-index: 99;
		display: none;
		overflow: auto;
		width: 100%;
		height: 100%;
		background: #00B0BC;
	}
	.overlay .menu {
		margin: 10% auto;
		width: 100%;
		padding: 60px 0 15px;
	}
	.overlay .menu a.btn {
		text-align: center;
	}
	.overlay .menu img {
		padding: 0 15px;
	}
	.overlay .menu ul {
		margin: 0;
		padding: 0;
		width: 100%;
		margin-top: 20px;
	}
	
	.overlay .menu ul li {
		list-style: none;
		position: relative;
	}
	.overlay .menu ul li:after {
		content: "\f105";
		font-family: FontAwesome;
		position: absolute;
		top: 20px;
		right: 15px;
		color: #FFF;
		font-size: 20px;
	}
	.overlay .menu ul.jyuku-info {
		padding: 0 15px;
		color: #FFF;
	}
	.overlay .menu ul.jyuku-info li {
		margin-bottom: 15px;
	}
	.overlay .menu ul.jyuku-info li:after {
		display: none;
	}
	.overlay .menu ul li a {
		color: #FFF;
		font-size: 16px;
		display: block;
		padding: 20px;
		border-bottom: 1px solid #2ed1d8;
		text-decoration: none;
	}
	.overlay .menu ul li a span {
		font-size: 14px;
	}
	.overlay .menu ul li:first-child a {
		border-top: 1px solid #2ed1d8;
	}
	.overlay .menu ul li a:hover {
		text-decoration: none;
	}
	#build-menu-page {
		left: 0;
		position: relative;
		background-color: #fff;
	}

	#build-menu {
		visibility: visible;
		z-index: 0;
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
		display: none;
		width: 300px;
		padding: 0;
		position: static;
		z-index: 0;
		top: 0;
		height: 100%;
		overflow-y: auto;
		left: 0;
		background: #FFF;
	}

	.build-menu-animating #build-menu-page {
		position: fixed;
		overflow: hidden;
		width: 100%;
		top: 0;
		bottom: 0;
	}

	.build-menu-animating.build-menu-close #build-menu-page,
	.build-menu-animating.build-menu-open #build-menu-page {
		-webkit-transition: -webkit-transform 250ms;
		-moz-transition: -moz-transform 250ms;
		-o-transition: -o-transform 250ms;
		-ms-transition: -ms-transform 250ms;
		transition: transform 250ms;
	}

	.build-menu-animating.build-menu-open #build-menu-page {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.build-menu-animating #build-menu { display: block }

	.build-menu-open #build-menu {
		display: block;
		-webkit-transition-delay: 0ms, 0ms, 0ms;
		-moz-transition-delay: 0ms, 0ms, 0ms;
		-o-transition-delay: 0ms, 0ms, 0ms;
		-ms-transition-delay: 0ms, 0ms, 0ms;
		transition-delay: 0ms, 0ms, 0ms;
	}

	.build-menu-open #build-menu,
	.build-menu-close #build-menu {
		-webkit-transition: -webkit-transform 250ms, opacity 250ms, visibility 0ms 250ms;
		-moz-transition: -moz-transform 250ms, opacity 250ms, visibility 0ms 250ms;
		-o-transition: -o-transform 250ms, opacity 250ms, visibility 0ms 250ms;
		-ms-transition: -ms-transform 250ms, opacity 250ms, visibility 0ms 250ms;
		transition: transform 250ms, opacity 250ms, visibility 0ms 250ms;
	}
	#build-menu .menu-in {
		display: block!important;
		width: 100%;
		position: absolute;
		left: 0;
		width: 300px;
		padding: 0 15px;
	}
	#build-menu .menu-main li {
		position: relative;
	}
	#build-menu .menu-main li a {
		display: block;
		padding: 15px;
		color: #333;
		text-decoration: none;
	}
	#build-menu .menu-main li a:hover {
		text-decoration: none;
	}
	#build-menu-closebtn {
		position: relative;
	}
	#build-menu-closebtn:after {
		content: "　";
		position: absolute;
		left: 0px;
		top: 0px;
		height: 49px;
		width: 49px;
		background-image: url(../img/menu-close-btn.png);
		background-size: 27px 27px;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #00aebb;
		z-index: 99999;
	}
	.menu-in .link {
		margin-top: 20px;
	}
	.menu-in ul li {
		border-bottom: 1px solid #ededed;
	}
	.menu-in .link li:last-child {
		border-bottom: none;
	}
	.menu-in .link a {
		font-size: 14px;
		padding: 15px 0;
		display: block;
		color: #00aebb;
	}
	.menu-in .link li {
		position: relative;
		padding-left: 35px;
	}
	.menu-in .link li.current {
		padding: 15px 0 15px 35px;
		font-weight: bold;
	}
	.menu-in .link li:before {
		position: absolute;
		transition: 0.3s;
	}
	.link .ico.ico01:before {
		top: 5px;
	}
	.link .ico.ico02:before {
		top: 5px;
	}
	.link .ico.ico03:before {
		top: 8px;
	}
	.link .ico.ico04:before {
		left: 10px;
		top: 16px;
	}
	section.main .link .ico.ico01:before, section.main .link .ico.ico02:before {
		top: 1px;
	}
	section.main .link .ico.ico03:before {
		top: 4px;
	}
	.menu-in .side-h {
		background: #00aebb;
		color: #FFF;
		font-weight: bold;
		font-size: 16px;
		padding: 5px 20px;
		margin-top: 15px;
		position: relative;
	}
	.menu-in .side-h:before {
		position: absolute;
		content: " ";
		width: 4px;
		height: 18px;
		background: #ffdb15;
		left: 7px;
		top: 8px;
	}
	.menu-in .contact li {
		position: relative;
		padding: 20px 35px 20px 55px;
	}
	.menu-in .contact li:before {
		position: absolute;
		width: 40px;
		height: 40px;
		left: 0;
		top: 18px;
	}
	.menu-in .contact a {
		font-size: 16px;
		font-weight: bold;
		padding: 15px 0;
		color: #00aebb;
	}
	.menu-in .contact .exist:before {
		content: url(../img/ico-my.png);
	}
	.menu-in .contact .new:before {
		content: url(../img/ico-contact.png);
	}
	nav.breadcrumb {
		font-size: 12px;
		padding: 0 10px;
	}
	section.main {
		border-left: none;
		padding: 0;
		width: 100%;
	}
	section.cont h1 {
		font-size: 20px;
		margin-top: 20px;
		margin-bottom: 5px;
		position: relative;
		padding: 0 10px 0 50px;
	}
	section.cont h1:before {
		background-size: 35px 35px;
		background-repeat: no-repeat;
		background-position: left 10px top;
	}
	section.cont p.discription {
		margin-bottom: 20px;
		margin-top: 15px;
		padding-left: 50px;
		padding-right: 10px;
	}
	.faq-box dt {
		font-size: 14px;
		border-radius: 0;
		background-size: 20px auto;
	}
	.faq-box dd {
		background-position: 10px 10px;
		background-size: 30px;
		padding: 10px 10px 5px 50px;
	}
	.faq-box dd.chara01, .faq-box dd.chara02 {
		padding-right: 65px;
	}
	.faq-box dd.chara01:after, .faq-box dd.chara02:after {
		background-size: 50px;
		width: 50px;
		height: 64px;
		right: 10px;
	}
	.top section.cont h2 {
		font-size: 15px;
		margin-bottom: 10px;
		margin-top: 40px;
		border-radius: 0;
	}
	.top section.cont h2:before {
		background: #ffdb15 none repeat scroll 0 0;
		border-radius: 1px;
		height: 20px;
		left: 10px;
		top: 11px;
	}
	section.cont h2.type02 {
		padding: 0 15px 0 20px;
		line-height: 25px;
		margin-top: 30px;
		padding-left: 25px;
		font-size: 18px;
	}
	section.cont h2.type02:before {
		height: 25px;
		left: 10px;
    	top: 0;
	}
	section.main .link li {
		font-size: 15px;
	}
	section.cont .btn-two {
		margin-top: 20px;
	}
	section.cont .btn-two a {
		width: 100%;
		margin-bottom: 15px;
		height: 70px;
	}
	section.cont .btn-two p {
		text-align: center;
	}
	section.cont .btn-two a span {
		font-size: 15px;
		font-weight: bold;
	}
	section.cont .btn-two a.fl:before, section.cont .btn-two a.fr:before {
		top: 12px;
	}
	footer {
		margin-top: 40px;
	}
	footer nav {
		padding-left: 0;
	}
	footer ul {
		margin-left: 10px;
		float: none;
	}
	
}