@chaeset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/* ここから */
body {margin: 0;padding: 0;background-color: #ffffff; color: #333333;font-size: 20px;line-height:2;border-top: 1px solid #008C7B;font-family: 'Noto Sans JP', sans-serif;}

p,h1,h2,h3,h4,h5,h6 {margin: 0;}
ul li {list-style:none;}
img { vertical-align: bottom;}
a:hover {  opacity: 0.8;}
a { text-decoration:none; }
h2 { font-size: 180%;font-weight: 900;color:#FFFFFF;}
.yl{background:linear-gradient(transparent 60%, #ff6 60%);}
.rd{color:#DB4D4E;font-weight:bold;}

/* レイアウト */
.container { width:1170px; margin:0 auto; }
.clear { clear:both; }
.sp {display: none;}
section { padding:50px 0; }
.clearfix:after {content: "";display: block;clear: both;}
.more {background-color: #009687; color: #FFFFFF;text-align: center;cursor: pointer;width: 100%;border-radius: 30px;padding: 5px;display: block;margin: 20px 0;}
.sm { font-size:80%; }
.emp { font-weight:bold;color:#DB4D4E;}
#fixedbtn {position: fixed;right: 0px;top: 100px;background-color: #DB4D4E;color: #FFFFFF;writing-mode: vertical-rl;border-radius: 10px 0 0 10px;padding: 20px;}
.b{font-weight:bold;}
.w-100{width:100%;}
.mb-20{margin-bottom:20px;}

/* header */
header {margin: 0 auto; padding:15px 0; }
header img {  float: left;}
header a {width: 32.47%;float: right;font-size: 16px;padding: 1% 0;background-color: #eeeeee;display: block;border-radius: 5px;text-align: center;color:#333333;}


/* top */
#top {/*background-image: url(./images/top_bg.jpg);background-repeat: no-repeat;background-size:cover;*/padding:0;}
#top h1 {text-align: center;}


/* guidance */
#guidance {padding: 10px 0 20px 0;background-color: #009687;text-align: center;}
#guidance img {margin-top: -20px;}
#menu {background-color:#47538D;padding: 15px 0 10px 0;border-bottom:3px solid #CCCCCC;	position: -webkit-sticky; position: sticky;top:0px;}
#menu li {display:inline-block;color:#FFFFFF;font-size:60%;text-align:center;width:9.65%;}
#menu li img {height:30px;}

/* request */
.request {text-align: center;padding:40px 0;border-top: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;}
.request:nth-of-type(1) {margin-top:0px;}


/* ronin */
#ronin {background-image: url(./images/ronin_bg.jpg);background-repeat: no-repeat;background-size: cover;padding:40px 10px;}
.write_1 {padding-left: 35%;}
#ronin h2 {padding-bottom: 3%;color:#333333;}


/* title */
.title {background-color: #009687;text-align:center;padding:50px 0;}
.title_img {margin-top: -42px;}

/* featurepoint */
#featurepoint{text-align:center;margin:30px auto;}


/* procedure */
#procedure{padding:0 0 50px 0;}
#procedure #procedure_index {background-image:url(./images/procedure_top_bg.jpg);text-align:center;font-size:2rem;font-weight:900;margin-bottom:50px;padding:50px 0;text-shadow:2px 3px 2px #fff;}
#procedure #procedure_index span{border: 1px solid #DB4D4E;padding: 5px 10px;font-size:2.5rem;color:#DB4D4E;}
#procedure .container >div {margin-bottom:20px;}
#procedure .container >div img{width:100%;margin-bottom:20px;}
#procedure h3 {font-size: 150%;font-weight: 900;text-align:center;margin-bottom:20px;}
#procedure h3 span{color:#009687;border:1px solid #009687;margin-bottom:20px;display:inline-block;padding:5px 20px;}
#procedure .container >p{text-align:center;font-size:200%;font-weight:900;color:#009687;}


/* system */
#system {
    background-image: url(./images/system_bg.png);
}
#system h2 {
	color:#333333;
	text-align:center;
	margin-bottom:20px;
}
#system h2 span {
	font-size:50%;
	}

.white {
    background-color: #ffffff;
    padding: 5% 3%;
}

.write {
    width: 58%;
    float: left;
}

#system h3 {
    padding: 2% 0;
	font-size:120%;
	font-weight:bold;
	color:#009687;
}
#system h3 span {
	font-size:200%;
	margin-right:10px;
}

#button {
    margin: 1% 0;
}

.box {
    padding-bottom: 3%;
}

.system_img {
    padding: 2% 0 0 3%;
	width:39%;
}
#system .white > p {
	text-align: center;
    color: #009687;
    font-size: 100%;
    border-top: 1px solid #CCCCCC;
    padding-top: 50px;
    margin-top: 50px;
    font-weight: bold;
}
#system #shiboukou {
	border:2px solid #DB4D4E;
	padding:10px;
	margin-bottom:10px;
}
#system #shiboukou img{
	margin:10px auto;
}
#system #shiboukou h4{
	text-align:center;
	font-size:120%;font-weight:bold;
}
#system #shiboukou h4:last-child{
	margin-top:20px;
}


/* first */
#first .container {
    background-image: url(./images/system_bg.png);
    text-align: center;
	width: 1100px;
    padding: 35px;
}
#first .container > div {
	background-color:#FFFFFF;
	padding:20px;
}

#first h2 {
    margin:10px;
	color:#009687;
}

#first h3 {
    font-size: 130%;
}

#first h3,#first p {
    padding: 20px 0;
}

#first span {
    font-size: 60%;
}

#first a {
    margin: 50px auto 20px auto;
    width: 80%;
    padding: 10px;
    background-color: #009687;
    color: #ffffff;
    display: block;
    border-radius: 30px;
}


/* greeting */
#greeting {background-image: url(./images/ronin_bg.jpg);background-repeat: no-repeat;background-size: cover;padding:40px 10px;}
#greeting img{margin-bottom:20px;}
.write_1 {
    padding-left: 35%;
}

#greeting h2 {
    padding-bottom: 3%;
	color:#333333;
}

#greeting span {
    font-size: 65%;
}


/* tuition */
#tuition h3:before {
    content: "";
    padding-right: 2%;
    border-left: 7px solid #009687;
}

#tuition p {
    padding-left: 3%;
}

#tuition h3,#tuition p {
    padding-top: 2%;
    padding-bottom: 2%;
}

#tuition h3,#tuition span {
    font-size: 130%;font-weight:800;
}



/* admission */
#admission h3 {
    background-color: #99d5cf;
    padding: 2%;
    font-weight: bold;
}

#admission p {
    width: 50%;
    float: left;
    padding: 2%;
}

.adm_img {
    margin-top: -4%;
    padding-left: 5%;
}

.point {
    text-align: center;
    padding: 1% 0;
}



/* question */
.question {
    background-color:#009687;
	border-radius:10px;
    color: #ffffff;
    background-repeat: no-repeat;
    padding:10px;
}

.answer {
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    padding:10px;
	margin-bottom:30px;
}
#qanda img {
	display:inline-block;
}
#qanda p {
    display: inline-block;
    vertical-align: top;
    margin-top: 30px;
    margin-left: 20px;
	width:82%;
}


/* school */
#school > div > div,#school iframe  {
	margin-bottom:30px;
}
#school > div > div > div {
	display: inline-block;
    width: 45%;
    margin: 2%;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    text-align: center;
    vertical-align: top;
	font-size:16px;
}
#school > div > div > div img{
    border-radius: 20px 20px 0 0;
	width:100%;
}
#school > div > div > div h3 {
    font-size: 110%;
    margin: 10px 0;
	font-weight:bold;
}
#school > div > div > div p {
    margin:10px;
}

/* action */
#action h3 {text-align:center;font-weight:800;font-size:3rem;color:#009687;}
#action .action_box:first-child{margin-bottom:30px;border-bottom:1px solid #ddd;padding-bottom:30px;}
#action .action_box > p {text-align:center;margin-bottom:20px;}
#action .action_box > div {display:flex;margin-bottom:50px;align-items: flex-start;}
#action .action_box img{align-self: flex-start;}
#action .action_box > div > div:last-child{padding-left:50px;}
#action .action_box > div ul li {list-style:inside;background-color:#f5f5f5;padding:0px 15px;margin-bottom:5px;}
#action a {background-color:#DB4D4E;width:100%;margin:20px 0;display:block;color:#fff;font-size: 3rem;font-weight: 900;text-align:center;border-radius:5px;}

/* order */
#order {padding-top: 0;padding-bottom:0px;background-color:#f5f5f5;}
#order h2 {text-align: center;background-image:url('./images/order_background.png');background-repeat: repeat;padding:20px 0;  background-position:center;background-size: cover;}
#order > div {width:100%;padding:30px 0;}
form table tr {height:100px;}
form table th {width:15%;font-size:100%;vertical-align:middle;}
form table td {vertical-align:middle;}
input[type=radio],input[type=checkbox] {display: none;}
input[type=radio]:checked + label,input[type=checkbox]:checked + label {background: #333;color: #ffffff; /* マウス選択時のフォント色を指定する */font-weight:bold;}
label {
  display: inline-block; /* ブロックレベル要素化する */
  width: 130px; /* ボックスの横幅を指定する */
  color: #333333; /* フォントの色を指定 */
  text-align: center; /* テキストのセンタリングを指定する */
  line-height: 1; /* 行の高さを指定する */
  cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
  border-radius:10px; /* 角丸を指定する */
  background-color: #ffffff;
  font-size: 100%;
  margin-right: 10px;
  padding: 20px 10px;
  margin-top:10px;
  border:3px solid #FFFFFF;border:1px solid #ddd;
}
label:hover {opacity:0.8;}
input[type=text],input[type=email],input[type=tel] {width:90%;border-radius:10px;font-size:20px;padding:20px 0;border:0px;text-align:center;border:1px solid #ddd;}
input[type=submit] {width:90%;padding: 3% 0;border-radius: 30px; background-color: #65cf5b;font-size: 150%;border:0px;color: #ffffff;cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */margin:0 auto;display:block;}
button:hover {opacity:0.8;}
#order #privacy {font-size: 60%;text-align: center;padding: 20px;}
#order #privacy a {text-decoration:underline;}

/* footer */
footer {
  background-color: #008c7b;
  color: #ffffff;
  font-size: 50%;
  text-align: center;
  padding: 10px;
}
footer a {
	color:#FFFFFF;
	text-decoration:underline;
}

@media screen and (max-width:767px) {
	/* 画面サイズが 767px以下の場合に適用 */
	body { font-size:16px; }
	.container { width:100%; }
	section { padding:30px 0; }
	.pc { display: none; }
	.sp { display: block; width: 95%; margin:0 auto; }
	h2 img { margin:0 auto; }
	.write_1 { padding:10px; }
	.title_img { margin:0; } 
	#menu { display:none; }
	h2 { font-size:150%;width:95%;margin:0 auto; }
	.title { padding:30px 0; }
    
	/* header */
	header img { width:70%;margin-left:10px; }
	header a { width:50px;margin-right:10px; }
	header span { display:none; }
   
   /* featurepoint */
	#featurepoint img{width:95%;margin:0px auto;}
	
	/* procedure */
	#procedure #procedure_index {font-size: 1.5rem;padding: 40px 0;width: 100%;margin: 0 0 40px 0;}
	#procedure #procedure_index span{font-size:1.5rem;}
	#procedure .frame,#procedure div { width:96%; margin:2%; float:none; display:block; padding:0px; }
	#procedure #frame_2 { width:100%; }
	#procedure .container >p{font-size:150%;}
  
	/* system */
	#system img { width:100%; }
	.system_img { padding:0; }
	#system .write { width:100%; float:none; }
	.more { width: auto; }
  
	/* guidance */
	#guidance img { width:95%; }
  
	/* first */
	#first .container { width:96%;padding:2%; }
	#first .container > div { padding:10px; }
	#first .container img{ width:100%; }
	#first h2 { width:100%;font-size:150%;margin:10px 0;}
  
	/* admission */
	#admission .adm_img { width:100%;margin:0;padding:0; }
	#admission p { width:96%; float:none; }
  
	/* qanda */
	#qanda img { vertical-align:top; width:20%; }
	#qanda p { margin-top:0px; width:74%; }
	
	/* action */
	#action .action_box > div {display:block;width:95%;margin:0 auto;}
	#action .action_box > div img{width:100%;margin:0 auto;}
	#action .action_box > div > div:last-child{padding:10px 0;}
	#action .action_box ul{margin-bottom: 10px;}
	#action .action_box a{width:95%;margin:20px auto;font-size:2rem;}
	
	/* order */
	#order h2 img{width:300px;margin:0 auto;}
	#order table {text-align:center;}
	#order table th ,#order table td {display:block;width:100%;}
	#order table td {margin-bottom:20px;}
	label { margin-right: 2.2vw; margin-left: 2.2vw; }
  
	/* school */
	#school > div > div > div { width:auto; }
  
  
	/* footer */
	footer {width:98%;padding:1%;padding-bottom:70px;}
	#fixedbtn {bottom:0px;width:100%;text-align:center;top:auto;writing-mode:inherit;border-radius:0px;padding:10px 0;}

}

@media screen and (max-width: 1024px) and (min-width:768px) {
	#menu li{width:10.5%;font-size:50%;}
	.container,.pc { width:100%; }
	#guidance img{width:90%;}
	#featurepoint img{width:95%;margin:0px auto;}
	#admission p{width:35%;}
	.adm_img{margin-top:10px;padding-left:5%;}
	#question > div > img:first-child { display:none; }
	#first .container { width:auto; }
}