/*全体
--------------------------------------------------------------------------*/
@media screen and (max-width:1400px){
img{
max-width: 100%;
height: auto;
width :auto;
}

html {
  font-size: 56.2%;
}
@media only screen and (max-width: 1024px) {
html {
  font-size: 50.0%;
}
}

body {
	margin: 0;
	padding: 0;
	COLOR: #212121;
	FONT-SIZE:18px;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}
@media only screen and (max-width: 479px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #000;
	FONT-SIZE:18px;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
	height:auto;
	margin:0px auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

img{
	border:0;
}

a:link,a:visited{
	outline:0;
	color:#8fa702;
}

a:hover{
	outline:0;
	color: #8fa702;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

br.sp{
	display:inherit;
}
br.spt{
	display:inherit;
}
br.spm{
	display:inherit;
}
br.sm{
	display:none;
}
br.smt{
	display:none;
}
br.smm{
	display:none;
}
.nsp{
	display:inherit;
}
.nst{
	display:none;
}
.nss{
	display:none;
}
@media only screen and (max-width:1080px) {
br.sp{
	display:none;
}
br.spt{
	display:inherit;
}
br.spm{
	display:none;
}
br.sm{
	display:inherit;
}
br.smt{
	display:inherit;
}
br.smm,.smm{
	display:none;
}
.nsp{
	display:none;
}
.nst{
	display:inherit;
}
.nss{
	display:none;
}
@media only screen and (max-width: 479px) {
br.spt{
	display:none;
}
br.spm{
	display:inherit;
}
br.smt{
	display:none;
}
br.smm{
	display:inherit;
}
.nsp{
	display:none;
}
.nst{
	display:none;
}
.nss{
	display:inherit;
}
.nsm{
	display:none;
}
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
#header-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px 3%;
text-align: left;
}
@media only screen and (max-width: 768px) {
#header-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px 3%;
text-align: center;
}
}

header{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0 3%;
background: #116c40;
text-align: left;
}
@media only screen and (max-width: 768px) {
header{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #116c40;
text-align: center;
}
}

#header-nav{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
#header-nav img{
margin: 10px 0;
max-width: 20%;
}

menu{
float: right;
width: 80%;
height: auto;
margin: 10px 0;
padding: 0;
}
@media only screen and (max-width: 768px) {
#header-nav menu{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #116c40;
}
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
}
menu li{
display: inline;
font-size: 1.8rem;
list-style-type: none;
margin: 0 0 0 3%;
padding: 0;
text-align: center;
line-height: 46px;
}
@media only screen and (max-width: 768px) {
#header-nav menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: center;
}
#header-nav menu li{
display: inline;
font-size: 15px;
list-style-type: none;
margin: 0 1% 0 1%;
padding: 0;
text-align: center;
line-height:150%;
}
}
menu li a:link,menu li a:visited{
text-decoration: none;
color: #d7b84a;
}
menu li a:hover{
text-decoration: underline;
}

#sm-menu{
display: none;
}

@media only screen and (max-width:479px) {
header,#header-box{
display: none;
}
#sm-menu{
display: inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 10px 3%;
text-align: left;
background: #fff;
border-bottom:1px solid #1c8552;
position: fixed;
z-index: 997;
}
#sm-menu img{
max-width: 30%;
margin: 0 1% 0 0;
}
#sm-menu a img{
max-width: 40%;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
background: #f5f4e4;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: rgba(28,133,82,0.9);
border-top:1px solid #fff;
position: fixed;
top:0;
left:0;
z-index: 998;
}
menu li{
display: block;
float: left;
width: 100%;
list-style-type: none;
font-size: 15px;
font-weight: normal;
margin: 0;
padding: 0;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
border-bottom:1px solid #fff;
text-align: center;
}
menu li.bno{
display: inherit;
}
menu li.bnn{
border-bottom:none;
}
menu li a:link,menu li a:visited,menu li.bno a:link,menu li.bno a:visited{
display: block;
text-decoration: none;
color: #fff;
padding: 15px 0;
}
menu li a:hover{
text-decoration: underline;
}


/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#1c8552;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 999;
}

/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }

.openbtn4 span:nth-of-type(1) {
  top:13px; 
}

.openbtn4 span:nth-of-type(2) {
  top:19px;
}

.openbtn4 span:nth-of-type(3) {
  top:25px;
}

.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:2px;
  left:-4px;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active{
  background:#c28b3c;
}

.openbtn4.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn4.active span:nth-of-type(3){
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:0px;
  left:4px;
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

main p{
	margin:0 0 30px;
	padding:0;
	text-align:justify;
	text-justify:inter-ideograph;
}

strong{
font-size: 1.1em;
}

#prog{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: #f7f4eb;
}
@media only screen and (max-width: 479px) {
#prog{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: #f7f4eb;
}
}
#prog-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 70px 3% 0;
background: url(image/prog-back-left.png) no-repeat left top,url(image/prog-back-right.png) no-repeat right top;
}
@media only screen and (max-width: 800px) {
#prog-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 40px 3% 0;
background: url(image/prog-back-left.png) no-repeat left top/30%,url(image/prog-back-right.png) no-repeat right top/30%;
}
}
#prog h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
line-height: 150%;
font-size: 4.0rem;
font-weight: normal;
}
@media only screen and (max-width: 479px) {
#prog h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
line-height: 150%;
font-size: 2.8rem;
font-weight: normal;
}
}
#prog-info{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 0 5%;
}
#prog-info img{
float: right;
margin: 0 0 0 5%;
}
@media only screen and (max-width:1400px) {
#prog-info img{
float: right;
margin: 0 0 0 2%;
max-width: 30%;
}
}
@media only screen and (max-width: 479px) {
#prog-info{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 0;
}
#prog-info img{
display: none;
float: right;
margin: 0 0 0 2%;
max-width: 30%;
}
}
#prog-info p{
font-size: 2.5rem;
text-align: left;
margin: 0 0 50px 5%;
line-height: 150%;
}
#prog-info blockquote{
margin: 0 0 0 15%;
padding: 0;
text-align: left;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
font-size: 2.0rem;
line-height: 200%;
}
@media only screen and (max-width: 1280px) {
#prog-info p{
font-size: 2.5rem;
text-align: left;
margin: 0 0 40px 2%;
line-height: 150%;
}
#prog-info blockquote{
margin: 0 0 0 5%;
padding: 0;
text-align: left;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
font-size: 2.0rem;
line-height: 200%;
}
}
@media only screen and (max-width: 479px) {
#prog-info p{
font-size: 2.0rem;
text-align:center;
margin: 0 0 25px 0;
line-height: 170%;
}
#prog-info blockquote{
margin: 0;
padding: 0;
text-align:left;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
font-size: 1.6rem;
line-height:170%;
}
}

#peel-toha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}


#peel-toha h1 .f20{
font-size: 2.0rem;
}
#peel-toha-info{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 50px 3% 60px;
text-align: center;
background: url(image/peel-toha-info-left.png) no-repeat left top/25%,url(image/peel-toha-info-right.png) no-repeat right top/25%;
}
#peel-toha-info p{
text-align: center;
line-height: 150%;
font-size: 2.5rem;
margin: 0 0 100px;
}
@media only screen and (max-width: 800px) {
#peel-toha-info{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 50px 3% 60px;
text-align: center;
background: url(image/peel-toha-info-left.png) no-repeat left top/30%,url(image/peel-toha-info-right.png) no-repeat right top/30%;
}
}
@media only screen and (max-width: 479px) {
#peel-toha-info{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 50px 3% 30px;
text-align: center;
background: url(image/peel-toha-info-left.png) no-repeat left top/30%,url(image/peel-toha-info-right2.png) no-repeat right top/30%;
}
#peel-toha-info p{
text-align: center;
line-height: 150%;
font-size: 16px;
margin: 0 0 30px;
}
#peel-toha-info img{
max-width: 80%;
}
}

#peel-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}

#seibun{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#seibun h2{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 4.5rem;
line-height: 100%;
text-align: center;
}
@media only screen and (max-width: 479px) {
#seibun h2{
display: none;
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 3.5rem;
line-height: 100%;
text-align: center;
}
}

#seibun-waku{
clear: both;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0 3%;
}
.seibun-box{
float: left;
width: 18%;
height: auto;
margin: 0 1%;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 640px) {
.seibun-box{
float: left;
width: 30.3%;
height: auto;
margin: 0 1.5% 15px;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 479px) {
#seibun-waku{
display: none;
clear: both;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0 3%;
}
#seibun-waku{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 20px 3% 0;
border: 3px double #ccc;
}
.seibun-box{
float: left;
width: 31.3%;
height: auto;
margin: 0 1% 15px;
padding: 0;
text-align: center;
}
}
.seibun-box img{
margin: 0 0 20px;
}
.seibun-box p{
text-align: center;
line-height: 150%;
margin: 0 0 20px;
padding: 0;
font-size: 13px;
}
.seibun-box p.sei-t{
font-size: 2.0rem;
}

#seibun-flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
text-align: center;
}
#seibun-flow p{
text-align: center;
font-size: 2.5rem;
margin: 0 0 50px;
line-height: 150%;
}
@media only screen and (max-width: 479px) {
#seibun-flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
text-align: center;
}
#seibun-flow p{
text-align: center;
font-size: 16px;
margin: 0 0 50px;
line-height: 150%;
}
}
#seibun-flow1{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: url(image/seibun-flow1.png) no-repeat center bottom/contain;
text-align: left;
}
@media only screen and (max-width: 800px) {
#seibun-flow1{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: url(image/seibun-flow1.png) no-repeat right bottom/120%;
text-align: left;
}
}
#seibun-flow1 img{
margin: 0 0 0 5%;
max-width: 30%;
}

#seibun-flow1 p{
font-size: 2.5rem;
line-height: 180%;
margin: 30px 0 0 7%;
padding: 0;
text-align: left;
}
@media only screen and (max-width: 479px) {
#seibun-flow1{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 20px;
background: url(image/seibun-flow1.png) no-repeat right bottom/120%;
text-align: left;
}
#seibun-flow1 img{
margin: 0 0 0 3%;
max-width: 35%;
}
}

#seibun-flow2{
clear: both;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
text-align: center;
}
#seibun-flow2 p{
font-size: 2.5rem;
line-height: 180%;
margin: 0 0 50px;
padding: 0;
text-align:center;
}
@media only screen and (max-width: 640px) {
#seibun-flow1 p{
font-size: 2.5rem;
line-height: 180%;
margin: 30px 0 0 7%;
padding: 0;
text-align: left;
}
#seibun-flow2 p{
font-size: 2.5rem;
line-height: 180%;
margin: 0 0 50px;
padding: 0;
text-align:center;
}
}
@media only screen and (max-width: 479px) {
#seibun-flow2{
clear: both;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
text-align: center;
}
#seibun-flow1 p{
font-size: 1.6rem;
line-height: 180%;
margin: 20px 0 0 3%;
padding: 0;
text-align: left;
}
#seibun-flow2 p{
font-size: 16px;
line-height: 180%;
margin: 0 0 30px;
padding: 0;
text-align:center;
}
}
#seibun-flow2 img{
margin: 0 0 50px;
}
#seibun-flow2 p.f40{
font-size: 4.0rem;
line-height: 150%;
}
@media only screen and (max-width: 640px) {
#seibun-flow2 p.f40{
font-size: 3.5rem;
line-height: 150%;
}
}
@media only screen and (max-width: 479px) {
#seibun-flow2 img{
margin: 0 0 20px;
max-width: 80%;
}
}

#peel-8kouka{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0 0;
padding: 0;
}
}
#peel-8kouka h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 4.5rem;
line-height: 100%;
text-align: center;
}
#peel-8kouka h2 span{
font-size: 8.0rem;
}
@media only screen and (max-width: 479px) {
#peel-8kouka{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#peel-8kouka h2{
display: none;
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 20px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 3.5rem;
line-height: 100%;
text-align: center;
}
}

#peel-tokucho{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
}
@media only screen and (max-width: 479px) {
#peel-tokucho{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
}
}
#peel-tokucho h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 4.5rem;
line-height: 100%;
text-align: center;
}
@media only screen and (max-width: 479px) {
#peel-tokucho h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 20px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 3.5rem;
line-height: 100%;
text-align: center;
}
}

.peel-tokucho-box{
float: left;
width: 48%;
height: auto;
margin: 0 1% 30px;
padding: 10px;
border: 2px solid #1c8552;
background: #f7f4eb;
}
@media only screen and (max-width: 479px) {
.peel-tokucho-box{
float: left;
width: 96%;
height: auto;
margin: 0 2% 20px;
padding: 10px;
border: 2px solid #1c8552;
background: #f7f4eb;
}
.peel-tokucho-box-none{
display: none;
}
}

.peel-tokucho-text,.peel-tokucho-text2,.peel-tokucho-text3,.peel-tokucho-text4{
width: 100%;
float: left;
height: auto;
margin: 0;
padding:25px 0 30px;
background: url(image/peel-tokucho1.png) no-repeat 3% 85%,#fff;
}
.peel-tokucho-text2{
background: url(image/peel-tokucho2.png) no-repeat 3% 85%,#fff;
}
.peel-tokucho-text3{
background: url(image/peel-tokucho3.png) no-repeat 3% 85%,#fff;
}
.peel-tokucho-text4{
background: url(image/peel-tokucho4.png) no-repeat 3% 85%,#fff;
}
@media only screen and (max-width: 479px) {
.peel-tokucho-text,.peel-tokucho-text2,.peel-tokucho-text3,.peel-tokucho-text4{
width: 100%;
float: left;
height: auto;
margin: 0;
padding:15px 0 15px;
background: none,#fff;
}
.peel-tokucho-text2{
background: none,#fff;
}
.peel-tokucho-text3{
background: none,#fff;
}
.peel-tokucho-text4{
background: none,#fff;
}
}
.peel-tokucho-left{
float: left;
width: 30%;
margin: 0 0 0 -10px;
padding: 0;
text-align: left;
}
.peel-tokucho-right{
float: right;
width: 70%;
margin: 0;
padding: 0 0 0 3%;
text-align: left;
}
.peel-tokucho-sm{
display: none;
}
.peel-tokucho-right h3{
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
line-height: 120%;
text-align: left;
font-size: 3.5rem;
}
@media only screen and (max-width:1080px) {
.peel-tokucho-right h3{
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
line-height: 120%;
text-align: left;
font-size: 3.0rem;
}
}
.peel-tokucho-right p{
text-align: left;
line-height: 200%;
margin: 0;
font-size: 1.8rem;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width:479px) {
.peel-tokucho-right h3{
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
line-height: 120%;
text-align: left;
font-size: 20px;
}
.peel-tokucho-right h3.bno2{
display: inherit;
}
.peel-tokucho-right h3.bno{
display: none;
}
.peel-tokucho-right p{
display: none;
text-align: left;
line-height: 200%;
margin: 0;
font-size: 1.5rem;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
.peel-tokucho-sm{
display: inherit;
clear: both;
width: 100%;
padding: 0 3%;
}
.peel-tokucho-sm p{
text-align: center;
line-height: 180%;
margin: 0;
font-size: 13px;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

#peel-hada{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 70px 0 0;
padding: 0;
}
@media only screen and (max-width: 479px) {
#peel-hada{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
}
}
#peel-hada h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 4.5rem;
line-height: 100%;
text-align: center;
}
@media only screen and (max-width: 479px) {
#peel-hada h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 20px 0;
background: #1c8552;
color: #fff;
font-weight: normal;
font-size: 3.5rem;
line-height: 100%;
text-align: center;
}
}

.peel-hada-box{
float: left;
width: 31.3%;
height: auto;
margin: 0 1% 50px;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 800px) {
.peel-hada-box{
float: left;
width: 31.3%;
height: auto;
margin: 0 1% 30px;
padding: 0;
text-align: center;
}
#peel-hada img{
max-width: 70%;
}
}
@media only screen and (max-width: 479px) {
.peel-hada-box{
float: left;
width: 31.3%;
height: auto;
margin: 0 1% 20px;
padding: 0;
text-align: center;
}
#peel-hada img{
max-width:80%;
}
#peel-hada .peel-hada-box img{
max-width: 100%;
}
}
.peel-hada-box p{
text-align: center;
line-height: 100%;
margin: 0 0 15px;
font-size: 2.5rem;
}
@media only screen and (max-width: 479px) {
.peel-hada-box p{
text-align: center;
line-height: 100%;
margin: 0 0 15px;
font-size: 1.7rem;
}
}

#met-toha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
}
@media only screen and (max-width: 479px) {
#met-toha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
}
}

#met-toha h1 .f20{
font-size: 2.0rem;
}

#met-info{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
text-align: center;
}
#met-info img{
margin: 0 2% 30px;
max-width: 96%;
}
#met-info p{
text-align: center;
line-height: 150%;
font-size: 3.0rem;
margin: 0 0 50px;
}
@media only screen and (max-width: 479px) {
#met-info img{
margin: 0 auto 30px;
}
#met-info p{
text-align: center;
line-height: 150%;
font-size: 16px;
margin: 0 0 30px;
}
}
#met-text{
clear: both;
width:100%;
margin: 0 auto;
padding: 0 0 0 50%;
background: url(image/met2.png) no-repeat 25% 50%;
}
@media only screen and (max-width: 1024px) {
#met-text{
clear: both;
width:100%;
margin: 0 auto;
padding: 0 0 0 30%;
background: url(image/met2.png) no-repeat 5% 50%;
}
}
@media only screen and (max-width: 800px) {
#met-text{
clear: both;
width:100%;
margin: 0 auto;
padding: 0 3%;
background: url(image/met2.png) no-repeat right top;
}
}
#met-text p{
font-size: 2.5rem;
margin: 0 0 50px;
line-height: 180%;
text-align: left;
}
#met-text p.f40{
font-size: 3.5rem;
line-height: 150%;
}
@media only screen and (max-width: 640px) {
#met-text p{
font-size: 2.0rem;
margin: 0 0 50px;
line-height: 180%;
text-align: left;
}
#met-text p.f40{
font-size: 3.0rem;
line-height: 150%;
}
}
@media only screen and (max-width: 479px) {
#met-text{
clear: both;
width:100%;
margin: 0 auto;
padding: 0 3%;
background: url(image/met2.png) no-repeat right top/20%;
}
#met-text p{
font-size: 16px;
margin: 0 0 30px;
line-height: 180%;
text-align: left;
}
#met-text p.f40{
font-size: 2.5rem;
line-height: 150%;
}
}

#met-hada{
clear: both;
width: 100%;
height: auto;
margin: 70px auto 0;
padding: 0;
}

@media only screen and (max-width: 479px) {
#met-hada{
clear: both;
width: 100%;
height: auto;
margin: 30px auto 0;
padding: 0;
}
}
#met-hada h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 0;
background: #1c857a;
color: #fff;
font-weight: normal;
font-size: 4.5rem;
line-height: 100%;
text-align: center;
}
@media only screen and (max-width: 479px) {
#met-hada h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 20px 0;
background: #1c857a;
color: #fff;
font-weight: normal;
font-size: 3.5rem;
line-height: 100%;
text-align: center;
}
}
.met-hada-box{
float: left;
width: 33%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 1080px) {
.met-hada-box{
float: left;
width: 31.3%;
height: auto;
margin: 0 1%;
padding: 0;
text-align: center;
}
}
.met-hada-box p{
text-align: center;
line-height: 100%;
margin: 0 0 15px;
font-size: 2.5rem;
}
@media only screen and (max-width: 479px) {
.met-hada-box p{
text-align: center;
line-height: 100%;
margin: 0 0 15px;
font-size: 2.0rem;
}
}

#nara{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 0 0 250px;
text-align: center;
background: url(image/nara-back2.png) no-repeat center bottom;
}
@media only screen and (max-width: 479px) {
#nara{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0 0 50px;
text-align: center;
background: none;
}
#nara img{
display: none;
}
#nara img.bno{
display: inherit;
max-width: 100%;
margin: 0 auto;
}
}
#nara h2{
clear: both;
width: 100%;
height: auto;
margin: -5px 0 20px;
padding: 35px 0 40px;
text-align: center;
background: url(image/nara-back-bottom.png) no-repeat center -5px/78%,#f7f4eb;
font-size: 5.0rem;
line-height: 120%;
}
@media only screen and (max-width: 1080px) {
#nara h2{
clear: both;
width: 100%;
height: auto;
margin: -7px 0 20px;
padding: 35px 0 40px;
text-align: center;
background: url(image/nara-back-bottom.png) no-repeat center top/90%,#f7f4eb;
font-size: 5.0rem;
line-height: 120%;
}
}
@media only screen and (max-width: 479px) {
#nara h2{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding:25px 0 25px;
text-align: center;
background: none;
background: url(image/peel-toha-info-left.png) no-repeat left top/30%,url(image/peel-toha-info-right2.png) no-repeat right top/30%;
font-size: 3.0rem;
line-height: 120%;
}
}
.nara-box{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
.nara-box img{
margin: 1%;
max-width: 23%;
}
@media only screen and (max-width: 640px) {
.nara-box img{
margin:0 1%;
max-width: 48%;
}
}

#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
#flow h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 70px 0 20px;
padding: 35px 0 40px;
text-align: center;
background: #f7f4eb;
font-size: 5.0rem;
line-height: 120%;
}
#flow p{
text-align: center;
}
@media only screen and (max-width: 479px) {
#flow h2{
clear: both;
width: 100%;
height: auto;
margin: 50px 0 10px;
padding: 25px 0 30px;
text-align: center;
background: #1c857a;
font-size: 3.0rem;
line-height: 120%;
color: #fff;
}
#flow p.f20{
text-align: center;
font-size: 1.8rem;
}
}
#flow-text{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 3%;
}
#flow1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
@media only screen and (max-width: 479px) {
#flow1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
}
}
.flow1-box{
float: left;
width: 27.3%;
height: auto;
margin: 0 3%;
padding: 15px 0 0;
border-top:1px solid #1c857a;
}
@media only screen and (max-width: 640px) {
.flow1-box{
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 10px 0 0;
border-top:1px solid #1c857a;
}
}
#flow1 h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
line-height: 150%;
font-weight: normal;
font-size: 3.0rem;
}
#flow1 h3 span{
margin: 0 0 0 1%;
padding: 0 20px;
font-size: 5.0rem;
line-height: 100%;
color: #fff;
background: #1c8552;
}
@media only screen and (max-width: 800px) {
#flow1 h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
line-height: 150%;
font-weight: normal;
font-size: 2.2rem;
}
#flow1 h3 span{
margin: 0 0 0 1%;
padding: 0 15px;
font-size: 3.0rem;
line-height: 100%;
color: #fff;
background: #1c8552;
}
}
#flow1 img{
margin: 0 0 15px;
max-width: 80%;
}
#flow1 p{
text-align: left;
line-height: 150%;
margin: 0 0 15px;
font-size: 1.8rem;
}
@media only screen and (max-width: 640px) {
#flow1 h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 5px;
text-align: center;
line-height: 150%;
font-weight: normal;
font-size: 2.5rem;
border-bottom:1px solid #1c857a;
}
#flow1 h3 span{
margin: 0 2% 0 1%;
padding: 0 13px;
font-size: 3.5rem;
line-height: 100%;
color: #fff;
background: #1c8552;
}
#flow1 p{
text-align:center;
line-height: 150%;
margin: 0 0 15px;
font-size: 13px;
}
}

#flow2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 50px 0 0;
border-top:1px solid #1c857a;
}
@media only screen and (max-width: 479px) {
#flow2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 30px 0 0;
border-top:1px solid #1c857a;
}
}
#flow2 p{
text-align: center;
font-size: 2.5rem;
}
@media only screen and (max-width: 800px) {
#flow2 img{
max-width: 40%;
}
}
#flow2-box{
clear: both;
float: left;
width: 90%;
margin: 30px 5% 0;
padding: 0;
}
#flow2-box img{
float: left;
margin: 0 5% 0 0;
max-width: 35%;
}
#flow2 #flow2-box p{
text-align: left;
font-size: 2.0rem;
}
@media only screen and (max-width: 640px) {
#flow2-box{
clear: both;
float: left;
width: 100%;
margin: 15px 0 0;
padding: 0;
}
#flow2-box img{
float: none;
margin: 0 0 15px;
max-width: 70%;
}
#flow2 #flow2-box p{
text-align: center;
font-size: 13px;
}
}

#step4,#step5,#step6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 50px 0 0;
border-top:1px solid #1c857a;
}
@media only screen and (max-width: 479px) {
#step4,#step5,#step6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 10px 0 0;
border-top:1px solid #1c857a;
}
}
#step4-pict,#step5-pict,#step6-pict{
float: left;
width: 40%;
text-align: center;
}
@media only screen and (max-width: 1024px) {
#step4-pict img,#step5-pict img,#step6-pict img{
max-width: 80%;
}
}
@media only screen and (max-width: 640px) {
#step4-pict,#step5-pict,#step6-pict{
display: none;
float: left;
width: 100%;
text-align: center;
}
#step4-pict img,#step5-pict img,#step6-pict img{
max-width: 80%;
margin: 0 0 30px;
}
}
#step4-text,#step5-text,#step6-text{
float: right;
width: 58%;
margin: 0 0 0 2%;
padding: 0;
text-align: left;
}
#step4-text p,#step5-text p,#step6-text p{
text-align: left;
margin: 0 0 30px;
}
@media only screen and (max-width: 640px) {
#step4-text,#step5-text,#step6-text{
float: right;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
}
#step4 h3,#step5 h3,#step6 h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 150%;
font-weight: normal;
font-size: 3.0rem;
}

#step4 h3 span,#step5 h3 span,#step6 h3 span{
margin: 0 2% 0 1%;
padding: 0 15px;
font-size: 4.5rem;
line-height: 100%;
color: #fff;
background: #1c8552;
}
@media only screen and (max-width: 640px) {
#step4-text p,#step5-text p,#step6-text p{
text-align: center;
margin: 0 0 30px;
font-size: 0.8em;
line-height: 150%;
}
#step4-text p.f30{
font-size: 1.2em;
}
#step4-text p,#step5-text p,#step6-text p{
text-align: center;
margin: 0 0 30px;
}
#step4 h3,#step5 h3,#step6 h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
text-align: center;
line-height: 150%;
font-weight: normal;
font-size: 2.5rem;
border-bottom:1px solid #1c857a;
}
#step4 h3 span,#step5 h3 span,#step6 h3 span{
margin: 0 2% 0 1%;
padding: 0 13px;
font-size: 3.5rem;
line-height: 100%;
color: #fff;
background: #1c8552;
}
.step-sm-pict{
display: inherit;
}
.step-sm-pict img{
max-width: 80%;
margin: 0 0 20px;
}
}

#step-last{
clear: both;
float: left;
width: 100%;
margin: 0 auto 0;
padding: 0 5%;
}
#step-last img{
margin: 0 0 30px 0;
}
@media only screen and (max-width: 640px) {
#step-last{
clear: both;
float: left;
width: 100%;
margin: 10px auto 0;
padding: 0 5%;
}
#step-last p{
font-size:15px;
}
#step-last .f-gold{
font-size: 1.0em;
}
#step-last img{
margin: 0 0 20px 0;
}
}
#step-last blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 15px 30px;
border: 1px solid #000;
font-size: 1.5rem;
}
@media only screen and (max-width: 800px) {
#step-last blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 15px 20px;
border: 1px solid #000;
font-size: 1.5rem;
}
#step-last p.f15{
font-size: 12px;
}
}
#sa{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:150px 0 70px;
text-align: center;
background: url(image/sa-left-top.png) no-repeat left top/25%, url(image/sa-center-top.png) no-repeat center top/25%, url(image/sa-right-top.png) no-repeat right top/25%, url(image/sa-left-center.png) no-repeat left center/8%, url(image/sa-right-center.png) no-repeat right center/8%, url(image/sa-left-bottom.png) no-repeat left bottom/35%, url(image/sa-right-bottom.png) no-repeat right bottom/35%;
}
@media only screen and (max-width: 640px) {
#sa{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:50px 0 20px;
text-align: center;
background: url(image/sa-left-top.png) no-repeat left top/30%, url(image/sa-center-top.png) no-repeat center top/20%, url(image/sa-right-top.png) no-repeat right top/30%, url(image/sa-left-center.png) no-repeat left center/10%, url(image/sa-right-center.png) no-repeat right center/10%, url(image/sa-left-bottom.png) no-repeat left bottom/30%, url(image/sa-right-bottom.png) no-repeat right bottom/30%;
}
}
#sa p{
font-size: 2.5rem;
margin: 0 0 50px;
text-align: center;
line-height: 150%;
}
@media only screen and (max-width: 640px) {
#sa p{
font-size: 1.8rem;
margin: 0 0 30px;
text-align: center;
line-height: 150%;
}
}

#corse{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3%;
background: #1c857a;
}
#corse-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 3%;
}
#corse h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 70px 0 40px;
text-align: left;
line-height: 110%;
color: #fff;
font-size: 5.0rem;
background: url(image/corse-back.png) no-repeat right center;
}
#corse h3 span{
font-size: 2.0rem;
font-weight: normal;
}
@media only screen and (max-width: 640px) {
#corse h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 70px 0 40px;
text-align: left;
line-height: 110%;
color: #fff;
font-size: 4.0rem;
background: url(image/corse-back.png) no-repeat right center/30%;
}
#corse h3 span{
font-size: 2.0rem;
font-weight: normal;
}
}
@media only screen and (max-width: 479px) {
#corse h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 50px;
text-align: left;
line-height: 110%;
color: #fff;
font-size: 3.0rem;
background: url(image/corse-back.png) no-repeat right bottom/25%;
}
#corse h3 span{
font-size: 1.5rem;
font-weight: normal;
}
}

.corse-space{
margin: 0 2.5em 0 0;
}

#corse-peel{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 100px;
background: #1c857a;
border-top:5px solid #fff;
}
#corse-peel-box{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 150px 0 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
@media only screen and (max-width: 479px) {
#corse-peel{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 50px;
background: #1c857a;
border-top:5px solid #fff;
}
#corse-peel-box{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 100px 0 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
}

.corse-info{
clear: both;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
.corse-info-pict{
clear: both;
float: left;
width: 25%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
.corse-info-pict img{
max-width: 100%;
}
.corse-text{
float: right;
width: 75%;
height: auto;
margin: 0;
padding: 0 0 0 2%;
text-align: left;
}

.corse-text h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: left;
line-height: 100%;
color: #fff;
font-size: 5.5rem;
font-weight: normal;
}
.corse-info h4 span{
font-weight: normal;
font-size: 3.0rem;
}
.corse-info h4 span strong{
color: #eacb5e;
}
.corse-text h4 em{
text-align: center;
font-style: normal;
padding: 0 0 0 20%;
font-size: 35px;
color: #d7b84a;
font-weight: bold;
}
@media only screen and (max-width: 640px) {
.corse-info-pict{
clear: both;
float: left;
width: 35%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
.corse-text{
float: right;
width: 65%;
height: auto;
margin: 0;
padding: 0 0 0 2%;
text-align: left;
}
.corse-text h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
line-height: 100%;
color: #fff;
font-size: 2.5rem;
font-weight: bold;
}
.corse-info h4 span{
font-weight: normal;
font-size: 1.5rem;
}
.corse-info h4 em{
text-align: left;
font-style: normal;
padding: 0;
font-size: 20px;
color: #d7b84a;
font-weight: bold;
}
}
.corse-info p{
font-size: 2.0rem;
text-align: left;
line-height: 180%;
margin: 0 0 30px;
color: #fff;
}
@media only screen and (max-width: 479px) {
.corse-info p{
font-size: 13px;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
color: #fff;
}
.corse-info h4 span strong{
color: #eacb5e;
font-size: 2rem;
}
}

.corse-info-waku{
clear: both;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
@media only screen and (max-width: 479px) {
#after-face2 .corse-info-waku{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 0;
padding: 0;
}
}
.corse-info .corse-info-waku p{
text-align: left;
line-height: 120%;
margin: 0 0 20px;
font-size: 3.0rem;
color: #fff;
}
.corse-info .corse-info-waku p .f20{
font-size: 1.7rem;
font-weight: normal;
}
.corse-info .corse-info-waku p.f-gold,.corse-info .corse-info-waku .f-gold2{
color: #d7b84a;
font-size: 1.5em;
margin: 0;
}
.corse-info .corse-info-waku .f-gold2{
margin: 0 0 0 135px;
}
@media only screen and (max-width: 1080px) {
.corse-info .corse-info-waku .f-gold2{
margin: 0 0 0 120px;
}
}
#corse-info-body{
clear: both;
float: left;
width: 30%;
margin: 0;
padding: 0;
text-align: left;
}
#corse-info-body2{
float: right;
width:70%;
margin: 0;
padding: 0;
text-align: left;
}
#corse-info-body2 p .f-red{
font-size:40px;
}
@media only screen and (max-width: 1080px) {
#corse-info-body{
clear: both;
float: left;
width: 40%;
margin: 0;
padding: 0;
text-align: left;
}
#corse-info-body2{
float: right;
width:60%;
margin: 0;
padding: 0;
text-align: left;
}
#corse-info-body2 p .f-red{
font-size:35px;
}
.corse-info .corse-info-waku .f-gold2{
margin: 0 0 0 135px;
}
}
@media only screen and (max-width: 479px) {
.corse-info-waku{
clear: both;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
.corse-info .corse-info-waku p{
text-align: left;
line-height: 120%;
margin: 0 0 10px;
font-size: 20px;
color: #fff;
}
.corse-info .corse-info-waku p .f20{
font-size:1.5rem;
font-weight: normal;
line-height: 120%;
}
.corse-info .corse-info-waku p.f-gold,.corse-info .corse-info-waku .f-gold,.corse-info .corse-info-waku .f-gold2{
color: #d7b84a;
font-size: 1.0em;
margin: 0;
}
.corse-info .corse-info-waku .f-gold2{
margin: 0 0 0 100px;
}
#corse-info-body{
clear: both;
float: left;
width: 35%;
margin: 0;
padding: 0;
text-align: left;
}
.corse-info .corse-info-waku #corse-info-body p .f20{
line-height:150%;
}
#corse-info-body2{
float: right;
width:65%;
margin: 0;
padding: 0;
text-align: left;
}
#corse-info-body2 p .f-red{
font-size:20px;
}
}

#corse-waku{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.corse-box{
float: left;
width: 20%;
height: auto;
margin: 50px 2.5% 0;
padding: 0;
}
@media only screen and (max-width: 800px) {
.corse-box{
float: left;
width: 48%;
height: auto;
margin: 30px 1% 0;
padding: 10px;
border: 1px solid #fff;
}
}
.corse-box h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 10px 0 10px;
text-align: center;
color: #1c857a;
font-size: 2.5rem;
line-height: 100%;
background: #fff;
}
.corse-box p{
font-size: 1.7rem;
color: #fff;
line-height: 180%;
margin: 0 0 30px;
text-align: left;
}
@media only screen and (max-width: 800px) {
.corse-box h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 10px 0 10px;
text-align: center;
color: #1c857a;
font-size: 2.5rem;
line-height: 100%;
background: #fff;
}
.corse-box p{
font-size: 1.7rem;
color: #fff;
line-height: 180%;
margin: 0 0 15px;
text-align: left;
}
}
.corse-box p.c-gold{
color: #eacb5e;
font-size: 2.0rem;
padding: 0 0 30px;
border-bottom:1px solid #fff;
}
.corse-box p .f-gold{
color: #eacb5e;
}
@media only screen and (max-width: 479px) {
.corse-box{
float: left;
width: 48%;
height: auto;
min-height: 500px;
margin: 15px 1% 0;
padding: 10px 10px 0;
border: 1px solid #fff;
}
.corse-box h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 10px 0 10px;
text-align: center;
color: #1c857a;
font-size: 2.5rem;
line-height: 100%;
background: #fff;
}
.corse-box p{
font-size: 1.7rem;
color: #fff;
line-height: 180%;
margin: 0 0 10px;
text-align: left;
}
.corse-box p.bno{
margin: 0 0 58px;
}
.corse-box p.c-gold{
color: #eacb5e;
font-size: 2.0rem;
padding: 0 0 15px;
border-bottom:1px solid #fff;
}
.corse-info-waku blockquote{
clear: both;
float: left;
margin: 20px 0 0;
padding: 0;
color: #fff;
font-size: 11px;
line-height: 130%;
}
#he-body2 .corse-info-waku blockquote{
clear: both;
float: left;
margin: 10px 0 0;
padding: 0;
color: #fff;
font-size: 11px;
line-height: 150%;
text-align: left;
}
}

#care{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: #f7f4eb;
border-top:5px solid #fff;
}
#care-box{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 150px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
@media only screen and (max-width: 479px) {
#care{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: #f7f4eb;
border-top:5px solid #fff;
}
#care-box{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 100px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
}
#care-box h4{
clear: both;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
line-height: 120%;
text-align: center;
font-weight: normal;
font-size: 5.5rem;
}
#care-box h4 span{
font-weight: normal;
font-size: 2.0rem;
}
#care-box p{
text-align: center;
font-size: 2.5rem;
margin: 0 0 30px;
}
@media only screen and (max-width: 479px) {
#care-box h4{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
line-height: 120%;
text-align: center;
font-weight: normal;
font-size: 4.5rem;
}
#care-box h4 span{
font-weight: normal;
font-size: 2.0rem;
}
#care-box p{
text-align: center;
font-size: 1.8rem;
margin: 0 0 20px;
}
}
.care-waku{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
#care-waku-left{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0 2.5%;
padding: 20px 3% 0;
border: 1px solid #c28b3c;
background: #fff;
}
#care-waku-right{
float: right;
width: 45%;
height: auto;
margin: 0 2.5%;
padding: 20px 3% 0;
border: 1px solid #c28b3c;
background: #fff;
}
#care-waku-left h5,#care-waku-right h5{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
border-bottom:1px solid #c28b3c;
font-size: 2.5rem;
font-weight: normal;
line-height: 150%;
}
#care-waku-left p,#care-waku-right p{
text-align: left;
line-height: 180%;
margin: 0 0 20px 10%;
font-size: 2.0rem;
}
@media only screen and (max-width: 479px) {
.care-waku{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}
#care-waku-left h5,#care-waku-right h5{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
border-bottom:1px solid #c28b3c;
font-size: 2.0rem;
font-weight: normal;
line-height: 150%;
}
#care-waku-left p,#care-waku-right p{
text-align: left;
line-height: 150%;
margin: 0 0 15px 0;
font-size: 13px;
}
#care-box .care-waku p.f15{
font-size: 13px;
}
}

.item{
float: left;
width: 29.3%;
height: auto;
min-height: 500px;
margin: 30px 2% 30px;
padding: 0;
text-align: center;
background: #fff;
}
@media only screen and (max-width: 800px) {
.item{
float: left;
width: 100%;
height: auto;
min-height: auto;
margin: 30px 2% 30px;
padding: 0;
text-align: center;
background: #fff;
}
}
.item-box{
clear: both;
width: 100%;
height: auto;
min-height: 500px;
margin: 0;
padding: 0;
}
.item-box h5{
clear: both;
width: 100%;
height: auto;
margin: -35px 0 30px;
padding: 0;
text-align: center;
line-height: 120%;
color: #1c8552;
font-weight: normal;
font-size: 2.8rem;
background: url(image/item-left.png) no-repeat left top/18%,url(image/item-right.png) no-repeat right top/16%;
}
@media only screen and (max-width: 800px) {
.item-box h5{
clear: both;
width: 100%;
height: auto;
margin: -35px 0 10px;
padding: 0px 0 15px;
text-align: center;
line-height: 120%;
color: #1c8552;
font-weight: normal;
font-size: 3.0rem;
background: url(image/item-left.png) no-repeat left top/18%,url(image/item-right.png) no-repeat right top/16%;
}
}
#care-box .item-box p{
text-align: center;
font-size: 1.5rem;
line-height: 150%;
margin: 0 0 20px;
}
#care-box .item-box p.i-title{
color: #1c8552;
font-size: 2.5rem;
line-height: 120%;
}
#care-box p.f15{
clear: both;
font-size: 1.5rem;
}
@media only screen and (max-width: 800px) {
#care-box .item-box p{
text-align: center;
font-size: 2.0rem;
line-height: 150%;
margin: 0 0 20px;
}
#care-box .item-box p.i-title{
color: #1c8552;
font-size: 3.5rem;
line-height: 120%;
}
#care-box p.f15{
clear: both;
font-size: 2.0rem;
}
}
@media only screen and (max-width:479px) {
#care-box .item-box p{
text-align: center;
font-size: 13px;
line-height: 150%;
margin: 0 0 20px;
}
#care-box .item-box p.i-title{
color: #1c8552;
font-size: 3.0rem;
line-height: 120%;
}
#care-box p.f15{
clear: both;
font-size: 2.0rem;
}
}

#item-banner{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
#item-banner p{
margin: 30px 0 0;
text-align: center;
font-size: 2.0rem;
line-height: 180%;
}
@media only screen and (max-width: 800px) {
#item-banner img{
max-width: 80%;
}
}
@media only screen and (max-width: 479px) {
#item-banner p{
margin: 30px 0 0;
text-align: center;
font-size: 13px;
line-height: 180%;
}
}

#after-face,#after-face2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: #63b1a3;
border-top:5px solid #fff;
}
#after-face2{
display: none;
}
#after-face-box,#after-face-box2{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 150px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
#after-face-box2{
display: none;
}
@media only screen and (max-width: 479px) {
#after-face,#after-face2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: #63b1a3;
border-top:5px solid #fff;
}
#after-face{
display: none;
}
#after-face2{
display: inherit;
}
#after-face-box,#after-face-box2{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 100px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
#after-face-box{
display: none;
}
#after-face-box2{
display: inherit;
}
}

#he-body,#he-body2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: #1c857a;
border-top:5px solid #fff;
}
#he-body2{
display: none;
}
#he-body-box,#he-body-box2{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 150px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
#he-body-box2{
display: none;
}
@media only screen and (max-width: 479px) {
#he-body,#he-body2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: #1c857a;
border-top:5px solid #fff;
}
#he-body{
display: none;
}
#he-body2{
display: inherit;
}
#he-body-box,#he-body-box2{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 100px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
#he-body-box{
display: none;
}
#he-body-box2{
display: inherit;
}
}

#he-met{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: #63b1a3;
border-top:5px solid #fff;
}
#he-met-box{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 150px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
@media only screen and (max-width: 479px) {
#he-met{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 20px;
background: #63b1a3;
border-top:5px solid #fff;
}
#he-met-box{
clear: both;
width: 100%;
height: auto;
margin: -40px auto 0;
padding: 100px 3% 0;
text-align: center;
background: url(image/corse-logo.png) no-repeat center top;
}
}

#voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 0 50px;
}
#voice h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-weight: normal;
font-size: 5.5rem;
line-height: 100%;
}
#voice p{
text-align: center;
line-height: 180%;
font-size: 2.0rem;
margin: 0 0 30px;
}
@media only screen and (max-width: 479px) {
#voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 20px;
}
#voice h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: normal;
font-size: 4.5rem;
line-height: 100%;
}
}
#voice-waku{
clear: both;
width: 100%;
height: auto;
margin: 30px auto 0;
padding: 0 3%;
}
@media only screen and (max-width:800px) {
#voice-waku img{
max-width: 80%;
}
}
.voice-box{
float: left;
width: 31.3%;
height: auto;
min-height: 350px;
margin: 0 1% 20px;
padding:20px 15px 0;
border: 1px solid #1c8552;
}
#voice .voice-box p{
text-align: left;
font-size: 1.5rem;
line-height: 150%;
margin: 0 0 20px;
}
#voice .voice-box p.p-right{
text-align: right;
}
#voice .voice-box p.v-title{
color: #1c8552;
font-size: 2.0rem;
background: #f7f4eb;
line-height: 100%;
padding: 10px 15px;
}
@media only screen and (max-width: 800px) {
.voice-box{
float: left;
width: 48%;
height: auto;
min-height: 300px;
margin: 0 1% 20px;
padding:20px 15px 0;
border: 1px solid #1c8552;
}
#voice .voice-box p{
text-align: left;
font-size: 1.7rem;
line-height: 150%;
margin: 0 0 20px;
}
#voice .voice-box p.v-title{
color: #1c8552;
font-size: 2.5rem;
background: #f7f4eb;
line-height: 120%;
padding: 10px 15px;
}
}
@media only screen and (max-width: 600px) {
.voice-box{
float: left;
width: 100%;
height: auto;
min-height: auto;
margin: 0 0 20px;
padding:20px 15px 0;
border: 1px solid #1c8552;
}
#voice .voice-box p{
text-align: left;
font-size: 1.7rem;
line-height: 150%;
margin: 0 0 20px;
}
#voice .voice-box p.v-title{
color: #1c8552;
font-size: 2.0rem;
background: #f7f4eb;
line-height: 120%;
padding: 10px 15px;
font-weight: bold;
}
}

#faq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 0 50px;
background: #f7f4eb;
}
#faq h2{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: normal;
font-size: 5.5rem;
}
@media only screen and (max-width: 479px) {
#faq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 20px;
background: #f7f4eb;
}
#faq h2{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: normal;
font-size: 4.5rem;
}
}
#faq-waku{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 3%;
}
#faq-waku p{
clear: both;
margin: 30px 0 0;
padding: 30px 0 0;
font-size: 1.5rem;
text-align: center;
line-height: 150%;
}
@media only screen and (max-width: 479px) {
#faq-waku p{
clear: both;
margin: 30px 0 0;
padding: 20px 0 0;
font-size: 1.7rem;
text-align: center;
line-height: 150%;
}
}
#faq-waku h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 15px 0 10px 70px;
text-align: left;
font-size: 3.0rem;
font-weight: normal;
line-height: 100%;
background: url("image/faq1.png") no-repeat left top;
}
@media only screen and (max-width: 479px) {
#faq-waku h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 15px 0 10px 70px;
text-align: left;
font-size: 2.5rem;
font-weight: normal;
line-height: 100%;
background: url("image/faq1.png") no-repeat left top/15%;
}
}

/*アコーディオン全体*/
.accordion-area{
clear: both;
float: left;
    list-style: none;
    width: 100%;
    margin:0 auto;
	padding: 0
}
ul.accordion-area{
margin: 0;
padding: 0;
}

#faq-waku .accordion-area p{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 0 35px;
text-align: left;
font-weight: bold;
font-size: 2.0rem;
line-height: 100%;
text-indent: 0;
}

.accordion-area li{
    margin: 10px 0 0;
}

.accordion-area section {
clear: both;
width: 100%;
float: left;
background: #fff;
border: 1px solid #e4c65d;
  margin: 30px 0 0;
  padding: 20px 3% 0;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 0 3% 0 20px;
    transition: all .5s ease;
	color: #212121;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #1c8552;
    }
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    }
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}
.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
	clear: both;
	width: 100%;
	height: auto;
  margin:0;
    padding: 10px 5% 0;
}

#faq-waku .box p{
font-size: 1.8rem;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
font-weight: normal;
text-indent: 0;
}
#faq-waku .box p .f13{
font-size: 1.3rem;
}
.box ul li{
font-size: 1.5rem;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
font-weight: normal;
text-indent: 0;
}
@media only screen and (max-width:800px) {
#faq-waku .box p{
font-size: 1.7rem;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
font-weight: normal;
text-indent: 0;
}
#faq-waku .box p .f13{
font-size: 1.5rem;
}
.box ul li{
font-size: 1.7rem;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
font-weight: normal;
text-indent: 0;
}
}
@media only screen and (max-width: 479px) {
.accordion-area section {
clear: both;
width: 100%;
float: left;
background: #fff;
border: 1px solid #e4c65d;
  margin: 20px 0 0;
  padding: 15px 0% 0;
}
#faq-waku p.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:15px;
    font-weight: normal;
    padding: 0 3% 0 35px;
    transition: all .5s ease;
	color: #212121;
}
#faq-waku .box p{
font-size:13px;
text-align: left;
line-height: 160%;
margin: 0 0 15px;
padding: 0;
font-weight: normal;
text-indent: 0;
}
}

.f-gold{
color: #c28b3c;
font-weight: bold;
}
.f-red,#he-body .f-red,main p.f-red{
color: #b8230a;
font-weight: bold;
}
.f-green{
color: #1c8552;
font-weight: bold;
}
.f30{
font-size: 3.0rem;
}
.f35,#sa p.f35{
font-size: 3.5rem;
line-height: 130%;
}
@media only screen and (max-width: 479px) {
.f35,#sa p.f35{
font-size: 2.5rem;
line-height: 130%;
}
}
.f15,.corse-info p.f15{
font-size: 1.5rem;
}
.f45,#sa p.f45{
font-size: 4.5rem;
line-height: 130%;
}
@media only screen and (max-width: 640px) {
#sa p.f45{
font-size: 3.5rem;
line-height: 130%;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#f7bc01;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
}
 
#page-top p:hover{
	background:#8b8b8b;
	color:#fff;
}
 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

#wp #student h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0;
padding: 15px 0;
text-align: center;
font-size: 25px;
}

#wp .p-center{
text-align: center;
}
#wp .f13{
font-size: 13px;
}

.stu-he{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3%;
border: 1px solid #1c8552;
}
.stu-he h3{
clear: both;
float: left;
width: 100%;
background: #1c8552;
color: #fff;
margin: 0 0 15px;
padding: 10px 0;
text-align: center;
font-weight: normal;
font-size: 15px;
line-height: 100%;
}
.stu-he p{
font-size: 13px;
line-height: 150%;
margin: 0;
}
.stu-fa{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 20px 5%;
border: 1px solid #d7b84a;
}
.stu-fa h3{
clear: both;
float: left;
width: 100%;
background: #d7b84a;
color: #fff;
margin: 0 0 15px;
padding: 10px 0;
text-align: center;
font-weight: normal;
font-size: 15px;
line-height: 100%;
}
.stu-fa p{
font-size: 13px;
line-height: 150%;
margin: 0;
}
.stu-ka{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 20px 5%;
border: 1px solid #1c857a;
}
.stu-ka h3{
clear: both;
float: left;
width: 100%;
background: #1c857a;
color: #fff;
margin: 0 0 15px;
padding: 10px 0;
text-align: center;
font-weight: normal;
font-size: 15px;
line-height: 100%;
}
.stu-ka p{
font-size: 13px;
line-height: 150%;
margin: 0;
}

#wp ul.stu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
#wp ul.stu li{
display: inline;
width: 32%;
margin: 0 0.5%;
text-align: center;
line-height: 100%;
padding: 5px 1%;
font-size: 13px;
border:1px solid #1c8552;
border-radius: 20px;
background: linear-gradient(#fff 70%,#ddd);
}
#wp ul.stu li.fa{
border: 1px solid #d7b84a;
}
#wp ul.stu li.ka{
border: 1px solid #1c857a;
}
#wp ul.stu li a:link,#wp ul.stu li a:visited{
text-decoration: none;
color: #1c8552;
}
#wp ul.stu li.fa a:link,#wp ul.stu li.fa a:visited{
color: #d7b84a;
}
#wp ul.stu li.ka a:link,#wp ul.stu li.ka a:visited{
color: #1c857a;
}


}