@charset "utf-8";
/* CSS Document */

html {
	overflow: auto;
	overflow-y: scroll;
	font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {
  font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-size: 1.6rem; 
  overflow: hidden;
  color:#333333;
}


.c{ text-align:center;}

a,
a:link { color: #333333; text-decoration:none; }
a:visited { color: #333333;}
a:hover { text-decoration:underline;}
a:active { text-decoration: text-decoration:none;}

.inner:after {
    content: "";
    clear: both;
    display: block;
}

.sp02clear{display:none;}

.red{color: #cc0000;}

.imgpc{ display:block;}
.imgsp{ display:none;}

.smalltxt{
    font-size:14px !important;
}

.texl{
    text-align:left !important;
}

.btn_close{
    width: 80% !important;
    position: relative;
    display:block;
    padding: 28px 0px;
	margin: 0 auto;
    text-decoration: none;
    color: #999999;
    background: #ccc;
    border: 2px solid #999999;
    border-radius: 8px;
    font-weight: 700;
	font-size:1.8rem;
	text-align: center;
}

a.btndownload{
    color: #2b2c3c!important;
    text-decoration: underline;
    font-weight: 700;
    font-size: 2.1rem;
}

a.btndownload:hover{
    text-decoration: none;
}

a.btndownload02{
    color: #fff!important;
    text-decoration: underline;
}

a.btndownload02:hover{
    text-decoration: none;
}

.marker-border{
    background: linear-gradient(transparent 70%, #ffcccc 0%);
}

.bgw{
    background:#fff;
    padding:20px 10px;
    margin-bottom: 30px;
    border: 1px solid #ccc;
}

.bgw p{
    font-size:21px !important;
}

header{
	padding: 0 0 30px;
	text-align: center;
}

header h1 img{
}

header h1{
    display: block;
    text-align: center;
}

header h2 img{
	width: 200px;
}

#wrap{
	width: 920px;
	padding: 30px 70px 0;
	margin:0 auto;
}
 

/* ==== メイン画像 =====*/

#main {
	width:100%;
	height: 380px;
	position:relative;
	margin-bottom: 60px;
}




/* ==== CONTENTS =====*/

section {
}

section h2{
	margin-bottom:40px;
	font-size:4.8rem;
	font-weight:600;
	text-align: center;
}



/* ==== ch =====*/

section#topch{
	margin-bottom: 60px;
    padding-bottom: 60px;
	border-bottom: 1px dotted #ccc;
}

section#topch h2{
	font-size:2.8rem;
	margin-bottom: 30px;
    text-align: center;
	font-weight:normal;
}

section#topch h2 span{
    text-decoration: underline;
}

section#topch p{
	font-size:3.6rem;
	margin-bottom: 20px;
	font-weight:700;
    text-align: center;
}

section#topch p:last-child{
	margin-bottom:0px;
}

.notebg{
    padding:40px 10px;
    background: url(../img/bg_note.png) repeat center;
}




/* ==== about =====*/

section#topabout{
	margin-bottom: 80px;
}

section#topabout h2{

}



section#topabout h3{
	font-size:2.4rem;
	margin-bottom: 20px;
	font-weight:700;
	color: #5d380c;
}

section#topabout  p{
    font-size: 1.8rem;
	line-height: 2.0;
}





/* ==== osusume =====*/

section#toposusume{
	margin-bottom: 60px;
    padding-bottom: 60px;
	border-bottom: 1px dotted #ccc;
}

section#toposusume h2{
    background:#5d380c;
    padding: 10px;
    color: #fff;
    margin-bottom: 0px;
}

.toposusume{
    padding:30px 10px 0px;
}


.toposusume .point01{
	background: url("../img/icon_point01.png") no-repeat left top;
    background-size:90px 90px;
    padding: 15px 15px 20px 100px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
    float: left;
    width: 35%;
}


.toposusume .point02{
	background: url("../img/icon_point02.png") no-repeat left top;
    background-size:90px 90px;
    padding: 15px 15px 20px 100px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
    float: right;
    width: 35%;
}

.toposusume .point03{
	background: url("../img/icon_point03.png") no-repeat left top;
    background-size:90px 90px;
    padding: 15px 15px 20px 100px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
    float: left;
    width: 35%;
}

.toposusume .point04{
	background: url("../img/icon_point04.png") no-repeat left top;
    background-size:90px 90px;
    padding: 15px 15px 20px 100px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
    float: right;
    width: 35%;
}

.toposusume .point05{
	background: url("../img/icon_point05.png") no-repeat left top;
    background-size:90px 90px;
    padding: 15px 15px 20px 100px;
    width: auto;
    margin-bottom: 40px;
}

.toposusume h3{
    margin-bottom: 10px !important;
	font-size:2.2rem;
	font-weight:bold;
}


/* ==== opening=====*/

section#topopening{
    padding: 50px 30px 30px;
    margin-bottom: 60px;
    border: 1px solid #ccc;
    background: #f7f6f4;
}

section#topopening h2{
	line-height: 1.1;
}

section#topopening p{
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 20px;
}


.tankbox{
    background: #a68b62;
    padding: 20px;
    color: #fff;
    font-size: 2.0rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.tokubox{
    background: #fff;
    padding:30px 20px 15px;
}

.box-item{
    width: 33%;
    text-align: center;
    float: left;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 2.1rem;
}

.box-item img{
    width: 100px;
    display: block;
    margin: 0 auto 10px;
}

/* ==== step =====*/

section#topstep{
	margin-bottom: 60px;
    padding-bottom: 60px;
	border-bottom: 1px dotted #ccc;
}

section#topstep h2{
	line-height: 1.1;
}



.topstep-l{
    width: 280px;
    float: left;
}

.topstep-r{
    width: 600px;
    float: right;
}

.topstep-r p{
    font-size: 2.1rem;
    line-height: 2;
}


/* ==== flow =====*/

section#topflow{
	margin-bottom: 60px;
    padding-bottom: 60px;
	border-bottom: 1px dotted #ccc;
}

section#topflow h2{
    background:#5d380c;
    padding: 10px;
    color: #fff;
    margin-bottom: 20px;
}

section#topflow p.flowmain img{
    text-align: center;
    width: 100%;
}

section#topflow p.arrowimg img{
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}


.flowbox{
    padding: 0;
}

.flowbox h3{
    padding: 10px 20px;
    font-weight: 700;
    font-weight: 700;
    font-size: 2.1rem;
    border: 1px solid #ccc;
background: #f9f9f9;
}

.flowbox h3 img{
    vertical-align:middle;
    width: 110px;
    margin-right: 10px;
}

.flowbox-in{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}


.flowbox-in{
    padding: 20px;
    margin-bottom: 20px;
}

.flowbox-in ul li{
    list-style:disc;
    margin-left: 20px;
    line-height: 2;
}

.flowtxt{
    font-size: 2.1rem;
    font-weight: 700;
}


/* ==== order =====*/

section#toporder{
    background: #2b2c3c;
    padding: 30px 20px;
}

section#toporder h2{
	line-height: 1.1;
    color: #fff;
}

.ordertxt{
    background: #2b2c3c;
    text-align:center;
    padding: 20px 0px 0px;
}

.ordertxt p{
    color:#fff;;
	font-size:2.8rem;
	font-weight: 700;
}


/* ==== course =====*/

section#topcourse{
	margin-bottom: 60px;
    padding-bottom: 60px;
	border-bottom: 1px dotted #ccc;
}

section#topcourse p{
	font-size:1.6rem;
	line-height: 2.0;
	text-align: center
}

section#topcourse h3{
	font-size:2.4rem;
	background: #fb1f7e;
	text-align: center;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 20px;
	padding: 10px;
}

.programbox{
	margin-bottom: 40px;
}

.programbox-in{
	width: auto;
	border: 1px solid #eaeaea;
}

.programbox-in h4{
	font-size:2.4rem;
	background: #eaeaea;
	text-align: left;
	font-weight: 700;
	padding: 10px 20px;
}

.programbox-in .box-in{
	padding:20px;
}

.programbox-in .box-in p{
    text-align: left !important;
}



/* ==== ma =====*/

section#topma{
	margin-bottom: 60px;
    padding-bottom: 20px;
}

section#topma .mabox{
    border: 4px solid #fb1f7e;
    padding: 30px;
}

section#topma .mabox p{
    font-size: 2.1rem;
    line-height: 2;
}



/* ==== eve =====*/

section#topeve{
	margin-bottom: 0px;
    padding-bottom: 30px;
}

section#topeve ul li{
    font-size: 2.1rem;
    margin-bottom: 10px;
}

section#topeve ul li:last-child{
    margin-bottom: 0px;
}


/* ==== online =====*/

section#toponline{
	margin-bottom: 0px;
    padding-bottom: 30px; 
}

section#toponline h2{
    margin-bottom: 10px;
}

section#toponline h3{
    color: #fff;
    text-align: center;
    font-size:24px;
    font-weight:bold;
    margin-bottom:10px;
}

section#toponline .onlinebox{
}


section#toponline .onlinebox ul li{
    background: #fff;
    padding:30px 20px;
    width: 30%;
    margin-right: 20px;
    text-align: center;
}

section#toponline .onlinebox ul li:last-child{
    margin-right: 0px;
}


section#toponline .onlinebox ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    justify-content: center;
}


section#toponline .onlinebox p.day{
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 5px;
}

section#toponline .onlinebox p.time{
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
}

a.btn_contact {
    width: 80% !important;
    position: relative;
    display: inline-block;
    padding: 28px 0px;
	margin: 20px auto 0;
    text-decoration: none;
    color: #FFF;
    background: #2d4d82;
    border: 2px solid #253f6c;
    border-radius: 8px;
    font-weight: 700;
	font-size:1.8rem;
	text-align: center;
}


a.btn_contact:hover {
    background:#4d71b0;
}

a:hover.btn_contact{
	text-decoration: none;
}


a.btn_online {
    width: 80% !important;
    position: relative;
    display: inline-block;
    padding: 28px 0px;
	margin: 0 auto;
    text-decoration: none;
    color: #FFF;
    background: #ff9d00;
    border: 2px solid #d08307;
    border-radius: 8px;
    font-weight: 700;
	font-size:1.8rem;
	width: 100%;
	text-align: center;
}


a.btn_online:hover {
    background:#d08307;
}

a:hover.btn_online{
	text-decoration: none;
}


.btn_noonline {
    position: relative;
    display: inline-block;
    padding: 20px 0px;
	margin: 0 auto;
    text-decoration: none;
    color: #FFF;
    border-radius: 8px;
    font-weight: 700;
	font-size:1.8rem;
	width: 100%;
	text-align: center;
	background:#ccc;
}



/* ==== form =====*/

section#topform{
	margin-bottom: 40px;
}

section#topform .formbox{
	width: 98%;
	border: 1px solid #eaeaea;
	padding: 3% 2%;
}

.txt-ex{
	font-size:1.2rem;
	margin-top: 5px;
	text-align: center;
}

.txt-price{
	font-size:1.8rem;
	margin-bottom: 5px;
	text-align: center;
    font-weight: 700;
}


.txt-price span{
	font-size:4.8rem;
    color: #f30c6e;
    padding-left: 8px;
}

div.btn-c{ text-align: center;}


a.btn_form02 {
    position: relative;
    display: inline-block;
    padding: 20px 0px;
	margin: 0 auto;
    text-decoration: none;
    color: #FFF;
    background: #ff9d00;
    border-radius: 8px;
    font-weight: 700;
	font-size:1.8rem;
	width: 70%;
	text-align: center;
    display: block;
}



a.btn_form02:hover {
    background:#d08307;
}

a:hover.btn_form{
	text-decoration: none;
}



/* ==== contact =====*/

section#topcontact .inner{
	padding:0 0 60px;
}

section#topcontact .inner h2{
	font-size:4.2rem;
	margin-bottom: 10px !important;
}

section#topcontact .inner .contactbox{
	border: 4px solid #36475a;
	padding: 30px 20px;
}

section#topcontact .inner .contactbox p.txt_contact{
	margin-bottom: 20px;
	text-align: center;
}

section#topcontact .inner .contactbox-in{
	width: 100%;
	margin: 0 auto;
	display: table;
	text-align: center;
}


a.btn_contactform {
    position: relative;
    display: inline-block;
    padding: 25px 40px;
    text-decoration: none;
    color: #FFF;
    background: #36475a;
    font-weight: bold;
	font-size:1.8rem;
	width: 50%;
}

a.btn_contactform:after {
	content: '';
	width: 24px;/*画像の幅*/
	height: 18px;/*画像の高さ*/
	background-image: url(../img/icon_mail.png);
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
}

a.btn_contactform:hover {
    background:#274d78;
}



/* ==== FOOTER =====*/

footer{
	width: 100%;
	padding:40px 0;
	border-top: 1px solid #cccccc;
}

footer p.fnavi{
	font-size:1.4rem;
	text-align:center;
	margin-bottom: 20px;
}


footer p.copy{
	font-size:1.2rem;
	text-align:center;
}


/* ==== 下層 =====*/


.privacy{
	margin:40px auto 0;
	text-align: left;
}

.privacy ul li.privacyBOX-txt{
	padding:0;
	font-weight:bold;
}

.privacy ul li.privacyBOX-txt2{
	padding:0;
	margin-bottom:40px;
}

section#topform .inner table.outlineTB {
    width: 100%;
    border-spacing: 0;
    margin:40px auto 40px auto;
	font-size:1.6rem;
    text-align: left;
}

section#topform .inner table.outlineTB th {
	border: 1px solid #cccccc;
    padding:20px 20px;
	font-weight:bold;
	width: 20%;
	vertical-align:middle;
	background: #f9f9f9;
}

section#topform .inner table.outlineTB td {
	border: 1px solid #cccccc;
    padding:20px 20px;
	vertical-align:middle;
	width: 80%;
}

section#topform .inner table.outlineTB td span.txt-red{
	color: #cc0000;
}


.mb10{ margin-bottom:10px;}
.mb20{ margin-bottom:20px;}
.mb30{ margin-bottom:30px;}
.mb40{ margin-bottom:40px;}



/* CLERFIX */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	/*height: 1;*/
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	margin: -1px 0 0 0;
	overflow: hidden;
}

.clearfix {
	_overflow: visible;
	_height: 1px;
	zoom: 1;
}


table.formTB{
	width:100%;
	text-align:left;
	border-collapse:collapse;
	margin-bottom:20px;
	border-top:#cccccc 1px solid;
}

table.formTB th{
	width:25%;
	padding:10px 5px;
	border-bottom:#cccccc 1px solid;
	text-align:left;
}

table.formTB td{
	padding:15px;
	background:#ffffff;
	border-bottom:#cccccc 1px solid;
}

.musttxt{
	background:#f19149;
	padding:5px 10px;
	font-size:1.0rem;
	color:#ffffff;
	border-radius: 4px;		/* CSS3草案 */
	-webkit-border-radius: 4px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 4px;	/* Firefox用 */
}

input {
    vertical-align : middle;
}

input[type="text"],input[type="email"],input[type="tel"]{
	border: 1px solid #efefef;
	background: #efefef;
	font-size: 1.6rem;
	text-indent: 0.7em;
	width: 80%;
padding: 5px;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus{
	background: #ffe6b7;
	border: 1px solid #f4a000;
}

textarea {
	width: 80%;
	height: 150px;
	background: #efefef;
	border: 1px solid #efefef;
	text-indent: 0.7em;
}

textarea:focus {
	background: #ffe6b7;
	border: 1px solid #f4a000;
}


.btn_form{
	width:50%;
	color:#ffffff;
	background:#ff9d00;
	display:block;
	border:2px solid #d08307;
	padding:15px 0;
	text-align:center;
	font-size:1.8rem;
	margin:0 auto;
}

.btn_form:hover{
	color:#d08307;
	background:none;
	display:block;
	border:2px solid #d08307;
	padding:15px 0;
	-webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.formbox{
    background: #fff;
    padding: 30px 15px;
}


p.privacytxt{
	font-size:1.4rem;
	text-align: left;
	margin-bottom: 50px;
}

 p.privacytxt a{
	color: #36475a;
	text-decoration: underline;
}

p.txtform01{
	text-align: left;
	margin-bottom: 24px;
}



table.onlineTB {
    width: 100%;
    border-spacing: 0;
    margin:0 auto 20px auto;
    text-align: left;
}

table.onlineTB th {
	border: 1px solid #cccccc;
    padding:20px 20px;
	font-weight:bold;
	width: 20%;
	vertical-align:middle;
	background: #f9f9f9;
}

table.onlineTB td {
	border: 1px solid #cccccc;
    padding:20px 20px;
	vertical-align:middle;
	width: 80%;
}



table.orderTB {
    width: 100%;
    border-spacing: 0;
    margin:0 auto;
    text-align: left;
}

table.orderTB th {
	border: 1px solid #cccccc;
    padding:20px 20px;
	font-weight:bold;
	width: 20%;
	vertical-align:middle;
	background: #f9f9f9;
}

table.orderTB td {
	border: 1px solid #cccccc;
    padding:20px 20px;
	vertical-align:middle;
	width: 80%;
}

.arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 80px 260px 0 260px;
border-color: #2b2c3c transparent transparent transparent;
    text-align: center;
    margin: 0 auto 60px;
}