@charset "utf-8";

/*---------------------------------------------------------------------
fadeUp 
---------------------------------------------------------------------*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}


.fadeUp2{
animation-name:fadeUpAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime2{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger2{
    opacity: 0;
}


/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);

html,body   {height:100%;}
body  {width:100%; color:#000; font-family: 'Ropa Sans', "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; letter-spacing:5pt; background-color: #EEECE8;}
body a  {color:#000;}
m
::selection {background: #fff; color: #009b61;}
::-moz-selection {background: #fff; color: #009b61;}

.jsf    {font-family: 'Ropa Sans', "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; letter-spacing: 5px;;}
.jsf_n  {font-family: 'Rmopa Sans', "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; letter-spacing: 5px;}


*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tap-highlight-color:rgba(0,0,0,0)}

html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;font-size:100%;overflow-x:hidden}

body{-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#fff;background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat;color:#000;font-family:"Ropa Sans","游ゴシック体", "Yu Gothic", YuGothic, sans-serif;margin:0;position:relative;width:100%}

button{border:none;cursor:pointer}
ul{margin:0;padding:0}a{color:inherit;text-decoration:none}a:active,a:focus{color:inherit;cursor:pointer;font-family:inherit;text-decoration:none !important}

.hoverable a:hover{color:inherit;cursor:pointer;font-family:inherit;text-decoration:none !important;cursor:pointer}
legend{color:#000}ol,ul{list-style:none}*{text-decoration:none}
caption,th{text-align:left}sup{vertical-align:text-top}
img{display:block;border:none !important}sub{vertical-align:text-bottom}input,textarea,select{*font-size:100%}
a{color:inherit;text-decoration:none}
textarea{outline:none;resize:none}
abbr,acronym{border:0;font-variant:normal}
h1,h2,h3,h4,h5,h6{font-weight:normal}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
q:before,q:after{content:''}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
html,body{color:#081621;}
html.is-active,body.is-active{overflow-y:hidden}
body{margin:0;background-color: #EEECE8;letter-spacing:0.05rem;line-height:1.6em}
p,span,pre,strong{color:#081621}.wrapper-bottom{display:block;margin:0 auto;position:relative;width:1050px}

#wrapper    {width:100%; }

hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


/*header*/
#header {
    background-color: #EEECE8;
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 9999;
    padding: 10px 10px;
}

#header .logo {
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

#header .header-content{
	align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 0 1.5em;
	display:flex;

}

#header .header-content .nav-container {
    display: none;
}

#header .nav-header {
    display: inline-block;
	font-size: 24px;
    vertical-align: middle;
}
#header .nav-header a {
    display: inline-block;
    font-size: 15px;
    line-height: 15px;
    margin-right: 35px;
    position: relative;
    transition: .3s;
}


#header .header-content .nav-container{
	align-items:center;
	display:flex;
	justify-content:flex-end}


#header .header-content .nav-container .nav-header{
	display:inline-block;vertical-align:middle}

#header .header-content .nav-container .nav-header a{
	color:#081621;
	display:inline-block;
	font-size:16px;line-height:16px;
	margin-right:40px;position:relative;
	transition:.3s
}

#header .header-content .nav-container .nav-header a span{color:#9F9D9D;font-weight:normal;font-size:10px}
#header .header-content .nav-container .nav-header a:hover{cursor:pointer;color:#9F9D9D}
#header .header-content .nav-container .nav-header a:hover .cat-nav{cursor:default;display:block}
#header .header-content .nav-container .nav-header a .cat-nav{display:none;padding-top:50px;position:absolute;transition:.3s}
#header .header-content .nav-container .nav-header a .cat-nav .menu-list-sub{background-color:#060D26;display:block;padding:28px 29px}
#header .header-content .nav-container .nav-header a .cat-nav .menu-list-sub:before{content:'';display:block;width:0;height:0;border-style:solid;border-width:0 16px 25px 16px;border-color:transparent transparent #060D26 transparent;position:absolute;top:25px;left:50%;transform:translate(-50%)}
#header .header-content .nav-container .nav-header a .cat-nav .menu-list-sub .menu-list-sub--item:last-child a{margin-bottom:0}
#header .header-content .nav-container .nav-header a .cat-nav .menu-list-sub .menu-list-sub--item a{border:1px solid #fff;display:block;color:#fff;font-size:16px;height:55px;line-height:55px;margin-bottom:15px;margin-right:0;padding:0 14px;transition:.3s;width:250px}
#header .header-content .nav-container .nav-header a .cat-nav .menu-list-sub .menu-list-sub--item a:hover{
	background-color:#fff;color:#1f1f44}
#header .header-content .nav-container .nav-header a .cat-nav .menu-list-sub .menu-list-sub--item a:after{
	content:'\f105';font-family:"Font Awesome 5 Free";font-weight:900;float:right}
#header .header-content .nav-container .nav-logo{display:inline-block;vertical-align:middle;width:80px}#header .header-content .nav-container .nav-logo img{width:100%}#header .header-content .hamburger{display:none}

#header .nav-lang{width: auto;} 
#header .lang-box{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; padding: 5px; width: 30px;height: 18px; background-color: #DED9D3;letter-spacing: 0px} 

#header .kaze-box{padding: 0px 0px 0px 20px; } 

#header .header-content .hamburger .hamburger-box .hamburger-inner{
	background-color:#081621}
#header .header-content .hamburger .hamburger-box .hamburger-inner:before,#header .header-content .hamburger .hamburger-box .hamburger-inner:after{
	background-color:#081621}

#header .header-content　.hamburger{　display: none;}


#header.is-active{background-color:#EEECE8;bod}
#header.is-active .header-content .logo{color:#0A1A12}
#header.is-active .header-content .nav-container .nav-header a{color:#0A1A12}
#header.is-active .header-content .nav-container .nav-header a:hover{color:#7D858B}
#header.is-active .header-content .nav-container .nav-header a span{color:#7D858B}
#header.is-active .header-content .hamburger .hamburger-box .hamburger-inner{background-color:#0A1A12}
#header.is-active .header-content .hamburger .hamburger-box .hamburger-inner:before,
#header.is-active .header-content .hamburger .hamburger-box .hamburger-inner:after{background-color:#0A1A12}







/*---------------------------------------------------------------------
modal
---------------------------------------------------------------------*/
#modal-menu{background-color:#DED9D3;display:block;min-height:0vh;left:0;padding:22px 10px 50px;position:fixed;top:0;width:100vw;transition:.3s;opacity:0;z-index:-1
}
#modal-menu.is-active{display:block;opacity:1;min-height:100vh;z-index:99999
}
#modal-menu .modal-menu-content{text-align: center;}
#modal-menu .modal-menu-content .sp-menu{
	margin-top:10vh;margin-bottom:10vh}
#modal-menu .modal-menu-content .sp-menu .sp-menu--item{
	padding:15px 0}
#modal-menu .modal-menu-content .sp-menu .sp-menu--item a{
	font-family: 'Ropa sans',sans-serif; 
	color:#0A1A12;font-size:20px;line-height:100%}
#modal-menu .modal-menu-content .sp-menu .sp-menu--item a span{color:#7D858B;font-size:16px}
#modal-menu .modal-menu-content .sp-menu .sp-menu--item .sp-menu-sub .sp-menu-sub--item{padding:5px 0 5px 20px}
#modal-menu .modal-menu-content .sp-menu .sp-menu--item .sp-menu-sub .sp-menu-sub--item a{font-size:12px}



#modal-menu .modal-menu-content .sns{overflow:hidden}
#modal-menu .modal-menu-content .sns .sns-item{display:block;float:left;margin-right:10px}
#modal-menu .modal-menu-content .sns .sns-item a{display:block}
#modal-menu .modal-menu-content .sns .sns-item a img{display:block;height:22px;width:auto}
#modal-menu .hamburger{position:absolute;right:10px;top:10px}
#modal-menu .hamburger .hamburger-box .hamburger-inner{background-color:#0A1A12}#modal-menu .hamburger .hamburger-box .hamburger-inner:before,#modal-menu .hamburger .hamburger-box .hamburger-inner:after{background-color:#0A1A12}

#modal-menu .modal-menu-content .sp-menu2 {

    margin-bottom: 10px;
}
#modal-menu .sp-nav-lang {padding: 0 0 0 30px;}


#modal-menu .sp-logo {margin: 8vh auto;
}

#modal-menu .sp-logo img {display: block;margin: auto;
}


#modal-menu .sp-kaze {margin: 10vh auto;
}

#modal-menu .sp-kaze img {display: block;margin: auto;
}






/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#main{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}


/*見出し設定*/
h1{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    /*見た目の調整*/
    color:#fff;
    text-shadow: 0 0 15px #666;
	font-size: 48px;
	letter-spacing: 10px;
	line-height: 2em;
}

.align-items-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex {display: flex;}
.sub_hd {
    text-align: center;
    padding: 130px 0 80px 0;
}
.sub_hd h2{
    font-size: 28px;
    letter-spacing: .3em;
    line-height: 1.466666666666667;
}
.sub_title h3{
    font-size: 24px;
    letter-spacing: .1em;
    line-height: 1.466666666666667;
	text-align: center;
	padding-bottom: 80px;
}
.sub_title h3 span{
    font-size: 12px;
    letter-spacing: .1em;
	text-align: center;
	
}
.wd20 {width: 20%;}
.wd80 {width: 79%;}
.mb-20 { margin-bottom: 0px;}
.txt-center {text-align: center;}
.message {
    max-width: 700px;
    font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 2em;
	margin: 10px auto; 
	text-align: left;}
.message h3{
    font-size: 22px;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	text-align: center;
	padding-bottom: 50px;
}
.writer {
	max-width: 700px;
    text-align: right;
    margin: 10px auto;
}

#contents-wrap {background: #EEECE8;	margin: 0px auto;width: 100%; height: auto;}
#top-lists {width: 72%;position: relative; display: flex;flex-direction: column;margin: 0 auto; }
#top-lists   .top-title {margin: 50px 100px; width:50%;}
#top-lists    .top-box {width: 100%; display: flex; justify-content: space-between;}
#top-photo01      {display: block; width:620px; left:-23%}
#top-description01 { margin-left: 30px; text-align: right; padding: 15% 0 0 0; display: block; justify-content: center;}
#top-photo02      {display: block; width:620px; margin-left: 80px}
#top-description02 { margin-left: 30px; text-align: right; padding: 15% 0 0 0; display: block; justify-content: center;}
#top-photo03      {display: block; width:620px; left: -100px}
#top-description03 { text-align: right; padding: 15% 0 0 0; display: block; justify-content: center;}
#top-lists   .top-more {margin-top: 50px;width: 91%;display: block; text-align: right; margin-right: 33px;}
#top-lists  .top-more a:after {
    content: "";
    background: url(../images/arrow-r.png) no-repeat;
    background-size: cover;
    width: 32px;
    height: 6px;
    position: absolute;
    left: calc(100% + 20px);
    top: 40%;
}



#recruit {margin: 80px 0 -30px 0; text-align: center; background-color:#E6E4DE; transition: all .2s ease-out; }
#recruit-content {padding: 50px 0; }
.recruit_hd h2 {
	padding: 50px 0;
    font-size: 24px;
    letter-spacing: 0.5em;
    line-height: 1.466666666666667;
}
.recruit_hd h3 {
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.466666666666667;
}

#recruit a{width: 200px;margin: 0px auto 0;padding: 14px 0;display: block;border: 2px solid #0A1A12;text-decoration: none;font-size: 117%;}

#recruit a:hover{border: 2px solid #009fe5;}
#recruit-more {padding: 80px 0;}
#contact     {font-size:117%; line-height: 280%;background-color: #DED9D3; padding: 80px 28% 100px;  }
#contact a   {width: 400px; margin:20px auto 0; padding: 20px 0; display: block; border: 2px solid #0A1A12; text-decoration: none; font-size: 117%;}
#contact a:hover {border: 2px solid #009fe5;}

#footer     {width:100%; background-color: #DED9D3; }
.footer-content  {padding: 5px 0; display: flex; justify-content:space-between;}
#footer .copy    {font-size: 12px; letter-spacing: 0.24em; text-align: left; padding-left: 30px; width: auto; align-items: center;
    display: flex;
    justify-content: flex-start;}
#footer .pp    {font-size: 14px; letter-spacing: 0.24em; padding-right: 30px; align-items: center;
    display: flex;
    justify-content: flex-end;}
#footer .icon     {height: 60px;  }
#footer p   {margin-top: 5px;}


#main-contents {width:100%; max-width:900px;  padding: 100px 0 30px 0; margin: 0 auto;}


.sub_eyecatch {max-width: 940px; width: 100%; height: auto;margin: 0 auto; padding-bottom: 100px;}


.sub_hd {
    text-align: center;
    padding: 130px 0 80px 0;
}


#main-contents  .sub_title h3 {
    font-size: 24px;
    letter-spacing: .1em;
    line-height: 1.466666666666667;
	text-align: center;
	padding-bottom: 60px;
}

.sub_title h3 span{
    font-size: 12px;
    letter-spacing: .1em;
	text-align: center;	
}

.a_area {
    width: 90%;
    max-width: 900px;
    margin: 0 auto 80px auto;
}
.a_area h4 {
    border-top: 2px dotted #333;
    font-size: 16px;
	padding: 48px 0;
}
.b_area {
    width: 90%;
    max-width: 900px;
    margin: 0 auto 50px auto;
}
.b_area h4 {
    border-bottom: 2px dotted #333;
    font-size: 22px;
	padding: 10px 0;
}
.b_area p {
    font-size: 14px;
	 line-height: 2em;
    padding: 20px 0;
}
.a_circle {
	font-size: 16px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #DED9D3;
    border-radius: 50px;
    color: #081621;
    margin: 0;
    padding:0;
	text-align: center;
}
.b_circle {
	font-size: 38px;
	font-family: 'Ropa Sans';
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #DED9D3;
    border-radius: 50px;
    color: #081621;
    margin: 0;
    padding:0;
	text-align: center;
}
.c_circle {
	font-size: 16px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #8E8579;
    border-radius: 50px;
    color: #fff;
    margin: 0;
    padding:0;
	text-align: center;
}
.d_circle {
	font-size: 38px;
	font-family: 'Ropa Sans';
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #DED9D3;
    border-radius: 50px;
    color: #081621;
    margin: 0;
    padding:0;
	text-align: center;
}

.howto-box {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 10px auto;
}


#main-wrap {background: #EEECE8;width: 100%;}
.page-about{width:1100px;margin:0 auto 0;padding-top:100px}
#map {
    position: relative;
	margin: 0 auto;
	width: 65%;
    height: auto;
	padding-bottom: 100px;
}


@media only screen and (max-width: 70em){
#top-lists {
	width: 94%;}

#top-photo01,#top-photo02,#top-photo03 {
    margin-left: 0; width: 580px;
}
#top-description01, #top-description02 {
    margin: 0 40px;
}
#top-description03 {
    margin: 0 40px 0 20px;
	}
#map {

    width: 80%;
}
}

@media only screen and (max-width: 60em){
h1 {line-height: 1.5em;
	font-size: 32px;
	letter-spacing: 5px
	}
	
h2 {font-size: 24px;
    line-height: 2.4em;
    letter-spacing: 0.1em;
	text-align: center;
}	
h3 {font-size: 18px;
    line-height: 1.8em;
    letter-spacing: 0.1em;mo
	text-align: ;
}
#header .logo {width: 130px;
}
#header {height: auto;}	
#header .nav-header a {margin-right: 20px;}
#header .header-content {padding: 0 0;}
#header .header-content .hamburger{display:block}	
#header .header-content .nav-container{display:none}


#contents-wrap .top-box {display: block;}

#top-photo01      {width:100%; height:80%;margin-left: 0;text-align: right;}
#top-photo02     { width:100%; height:80%%;margin-left: 0;text-align: right;}
#top-photo03     { width:100%; height:80%; margin-left: 0; text-align: right;}

#top-description01,#top-description02 , #top-description03  {margin: 0;font-size: 16px;line-height: 1.5; margin-bottom: 40px; padding: 50px 0 0 0;}

#top-description01 h2,#top-description02 h2,#top-description03 h2{font-size: 22px;}

#top-lists .top-more {
    margin-top: 30px;
	text-align: center;
}
	
#top-lists .top-more a:after { 
    left: calc(50% + 30px);
    top: 35%;;
}
#contents-wrap #top-lists {
    width: 90%;
    position: relative;
    display: flex;
}	

#contents-wrap .top-title {margin: 30px 0px; width: 50%;
}
	

#contact {padding: 80px 3%;  }
#contact a {width: auto}	
	
#recruit { text-align: center; background-color:#E6E4DE; transition: all .2s ease-out;text-align: center;  }
	#recruit .h3{text-align: center; }
#recruit-content {padding: 8% 3%; }

#footer {
    display: block;　padding: 0 10px;
}
.footer-content {
	text-align: center; display: block}
#footer .copy {
    display: block; text-align: center;	padding: 5px auto;
}
	
#footer .pp{display: none}
.footer-content  {text-align:center; margin: 0 auto;}
#map {
    margin: 0 auto;
    width: 100%;
    padding: 0px 30px 80px 30px;
}
.sub_eyecatch {max-width: 768px; margin: 0 auto; padding: 0 30px 0 30px;}
.sub_eyecatch img {
    display: block;
	width: 100%;
}
.sub-box {width: 100%;max-width: 940px;margin: 0;}

.writer {max-width: 700px; margin: 10px auto;}
.a_area {width: 90%;
    margin: 0 auto 80px auto;}

.a_area h4 {font-size: 16px;padding: 48px 0;}


.a_circle {
	font-size: 16px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #DED9D3;
    border-radius: 50px;
    color: #081621;
    margin: 0;
    padding:0;
	text-align: center;
	}
.b_area {width: 90%;
    margin: 0 auto 80px auto;}

}	


@media only screen and (max-width: 46.875em){
h1 {line-height: 1.5em;
	font-size: 28px;
	letter-spacing: 5px
	}	
	
#contents-wrap .top-title {margin: 30px 0px; width: 100%;
}
#contents-wrap .top-title img {width: 100%;
}
	
#footer .copy {
	text-align: center;
    letter-spacing: 0.26em;
	
}

.sub_hd h2 {
	font-size: 22px;
    letter-spacing: .1em;
    line-height: 1.466666666666667;
}
	

.sub_eyecatch {
	padding: 0 ;
}
.sub_eyecatch img {
	padding: 0 0 50px 0;
}	
#main-contents {
    padding: 0 20px 50px 20px;
}

#main-contents  .sub_title h3 {
    font-size: 22px;
	padding:0 0 40px 0;
}
.message h3 {
    padding-bottom: 40px;
}
	

.flex {
    flex-direction: column;
}
.wd20 {
    width: 32%;
	text-align:center;
}
.wd80 {
    width: 100%;
	text-align:center;
	margin: 30px auto;
	
}
.a_area {width: 100%;padding: 0 20px;
 }
.a_area h4 {
    font-size: 14px;
    padding: 0 0 30px 0;
	border-top: 0;
	border-bottom: 2px dotted #333;
}

.l_message {text-align: left;}	

.b_area {width: 100%;
 }
.b_area h4 {
    border-bottom: 2px dotted #333;
    font-size: 20px;
    padding: 10px 0;
	}
.howto-box {
    margin: 30px auto;
}
}