@charset "UTF-8";

/* ------------------------------------------- CSS Information 
 Style Info:     ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y: scroll;} 
body,div,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin: 0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
table{border-collapse: collapse;border-spacing: 0;}
caption, th{text-align: left;}   
img,abbr,acronym,fieldset{border: none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display: none;}
object,embed{vertical-align: top;} 


/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
/*A Style*/  
a:link{text-decoration: underline;color: #666666;}
a:visited{text-decoration: none;color: #66666;}
a:hover{text-decoration: underline;color: #999999;}
a:active{text-decoration: none;color: #66666;}
.it{ font-style: italic;}
.ol{ text-decoration: overline;}
.lt{ text-decoration: line-through;}
.uol{ text-decoration: underline overline;}
/*basic*/
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background-color:#fff45c;}
.big{font-size:20px;}
.red{color:#f18324;}
/*img float*/
img.imgr{float: right; padding: 0 0 50px 30px;}
img.imgl{float: left;}


/* ------------------------------------------- CSS Information 
 Style Info:     セールスレター型ホームページ詳細設定
----------------------------------------------------------- */
body{  
font-family:"メイリオ",Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
color:#333333;
font-size:16px;
line-height:0;
text-align:center;
background:#ffffff;
letter-spacing:0em;
overflow:hidden;
}
.pc{width:100%;max-width:960px;display:block;margin:0 auto;}
.sp{width:100%;max-width:640px;display:none;margin:0 auto;}
@media only screen and (max-width:640px){.pc{display:none;}.sp{display:block;}}

/*-----topbar-----*/
#topbar{
margin:0;
padding:0;
width:100%;
height:100px;
background:#ffffff;
position:relative;
border-bottom:1px solid #cccccc;
}
#logo{
margin:0;
padding:0;
width:250px;
height:60px;
position:absolute;
top:20px;
left:10px;
}
#logo img{width:250px;height:60px;}
#tel{
margin:0;
padding:0;
width:300px;
height:80px;
position:absolute;
top:10px;
right:10px;
}
#tel img{width:300px;height:80px;}
#tel a:hover{opacity:0.5;}
@media only screen and (max-width:640px){
#topbar{
height:60px;
}
#logo{
width:167px;
height:40px;
top:10px;
left:10px;
}
#logo img{width:167px;height:40px;}
#tel{
margin:0;
padding:0;
width:40px;
height:40px;
position:absolute;
top:10px;
right:10px;
}
#tel img{width:40px;height:40px;}
}
/*header*/
header{
margin:0;
width:100%;
min-width:320px;
background:#ffffff;
position:relative;
text-align:center;
}
/*cta*/
.cta{
width:100%;
margin:0;
padding:0 0 30px 0;
text-align:center;
background:#eeeeee;
border-top:5px solid #52a088;
border-bottom:5px solid #52a088;
}
.cta_box{
margin:0 auto;
padding:0;
width:100%;
text-align:left;
background: url(../img/cta_box_pc.png) no-repeat left top;
background-size:100% auto;
position:relative;
}
.cta_btn{
width:30%;
margin-left:64%;
}
.cta_btn img{
width:100%;
}
@media only screen and (max-width:640px){
.cta_box{
padding:0;
text-align:center;
background: url(../img/cta_box_sp.png) no-repeat left top;
background-size:100% auto;
}
.cta_btn{
margin:0 auto;
width:70%;
max-width:420px;
}
.cta_btn img{
width:100%;
}
}

/*contents*/
.contents{
margin:0 auto;
padding:0 30px;
max-width:900px;
}
@media only screen and (max-width:640px){.contents{padding:0 20px;}}
@media only screen and (max-width:480px){.contents{padding:0 10px;}}
/*textbox*/
.textbox{
margin:0 auto;
padding:0;
width:100%;
text-align:left;
line-height:24px;
position:relative;
z-index:1;
}
.rightbox{
margin:0 0 0 auto;
padding:0;
width:75%;
text-align:justify;
line-height:24px;
position:relative;
z-index:1;
}
.textbox p,.rightbox p{
margin: 0;
padding:15px 0;
}
.textbox img{margin:0;padding:0;}
ul.list_01{
margin:20px 0 40px 0;
padding:0;
}
ul.list_01 li{
list-style:none;
font-size:18px;
line-height:20px;
font-weight:bold;
margin:0;
padding:20px 20px 20px 32px;
border-bottom:dashed 1px #dddddd;
background: url(../img/list_01.png) no-repeat left center;
background-size:13px 20px;
}
.program{
margin:20px 0;
padding:30px;
border:2px solid #dddddd;
border-radius:8px;
background:#fafafa;
}
.program dt{
font-size:20px;
line-height:20px;
font-weight:bold;
margin:0;
padding:0 0 20px 0;
border-bottom:dotted 2px #52a088;
}
.program dd{
font-size:16px;
line-height:20px;
font-weight:bold;
margin:0;
padding:20px 0 20px 32px;
border-bottom:dashed 1px #dddddd;
background: url(../img/list_01.png) no-repeat left center;
background-size:13px 20px;
}
.program p{
margin:0;
padding:10px 0 0 0;
}
#box_01{
margin:20px 0;
max-width:900px;
min-height:520px;
background: url(../img/box_01.png) no-repeat left top;
background-size:100% auto;
}
@media only screen and (max-width:640px){
.textbox{
text-align:justfy;
font-size:12px;
line-height:20px;
}
.rightbox{
margin:0;
padding:0;
width:100%;
font-size:12px;
line-height:20px;
}
.textbox p,.rightbox p{
margin: 0;
padding:10px 0;
}
.textbox br{display:none;}
ul.list_01{margin:10px 0 20px 0;}
ul.list_01 li{
font-size:12px;
line-height:16px;
padding:10px 10px 10px 22px;
background: url(../img/list_01.png) no-repeat left center;
background-size:13px 20px;
}
.program{
margin:20px 0;
padding:20px;
border:1px solid #dddddd;
border-radius:6px;
background:#fafafa;
}
.program dt{
font-size:16px;
line-height:16px;
font-weight:bold;
margin:0;
padding:0 0 10px 0;
border-bottom:dotted 2px #52a088;
}
.program dd{
font-size:12px;
line-height:16px;
font-weight:bold;
margin:0;
padding:10px 0 10px 22px;
background: url(../img/list_01.png) no-repeat left center;
background-size:13px 20px;
}
.program p{
margin:0;
padding:10px 0 0 0;
}
#box_01{
margin:20px 0;
min-height:300px;
background: url();
}
.big{font-size:14px;}
}
/*profile*/
#profile{
margin:0;
padding:0;
border-bottom:2px solid #52a088;
border-left:2px solid #52a088;
border-right:2px solid #52a088;
position:relative;
}
.profile_text{
margin:0;
padding:30px;
min-height:200px;
text-align:justify;
font-size:14px;
line-height:20px;
position:relative;
}
.profile_text p{
margin:0;
padding:0;
}
.name{display:block;width:125px;height:45px;margin:0 0 20px 0;}
.profile_img{
margin:0;
padding:0 0 0 20px;
float:right;
width:200px;
height:200px;
}
.profile_text p{
font-size:20px;
line-height:20px;
font-weight:bold;
margin:40px 0 20px 0;
padding:0 0 10px 0;
border-bottom:dotted 2px #52a088;
}
.table_profile{
margin:0;
border-collapse:collapse;border-spacing:0;
width:100%;
line-height:20px;
font-size:12px;
}
.table_profile th{
text-align:left;
width:140px;
padding:5px;
background:#2c3240;
color:#f3f3f3;
border: 1px solid #ddd;
}
.table_profile td{
padding:5px;
text-align:left;
border: 1px solid #ddd;
}
.table_profile td.gray{
background:#eeeeee;
}
@media only screen and (max-width:640px){
#profile{background:url() right top no-repeat;}
.profile_bg{
width:100%;
margin:0 auto;
padding:0;
background:url();
}
.profile_text{
width:auto;
margin:0 auto;
padding:10px 10px 20px 10px;
text-align:justify;
font-size:12px;
line-height:20px;
}
.profile_text br{display:none;}
.name{display:block;width:125px;height:45px;margin:10px auto;}
.profile_img{
padding:0;
float:none;display:block;margin:0 auto;width:180px;height:180px;}
.profile_text p{
font-size:14px;
line-height:16px;
font-weight:bold;
margin:20px 0 10px 0;
padding:0 0 10px 0;
border-bottom:dotted 2px #52a088;
}
.table_profile th{
text-align:center;
display:block;
width:100%;
padding:5px 0;
background:#2c3240;
color:#f3f3f3;
border: 1px solid #ddd;
}
.table_profile td{
text-align:center;
display:block;
width:100%;
padding:5px 0;
border: 1px solid #ddd;
}
}

/*service*/
#service{
margin:0 0 30px 0;
padding:0;
border-bottom:2px solid #52a088;
border-left:2px solid #52a088;
border-right:2px solid #52a088;
position:relative;
}
.service_text{
margin:0;
padding:30px;
text-align:justify;
font-size:14px;
line-height:20px;
}
.service_text dt{
font-size:20px;
line-height:20px;
font-weight:bold;
margin:0 0 10px 0;
padding:0 0 10px 0;
border-bottom:dotted 2px #52a088;
}
.serice_text p{margin:0;padding:0;}
#service table.table_pc{
margin:20px 0;
border-collapse:collapse;border-spacing:0;
width:100%;
line-height:18px;
font-size:12px;
}
#service th{
text-align:center;
width:50px;
padding:5px;
background:#2c3240;
color:#f3f3f3;
border: 1px solid #ddd;
}
#service td{
padding:10px;
text-align: justify;
border: 1px solid #ddd;
}
#service td.free{
font-weight:bold;
color:#f3f3f3;
background:#f35f41;
}
#service td.gray{
background:#eeeeee;
}
#service dt{font-weight:bold;}
#service table.table_sp{display:none;}
@media only screen and (max-width:640px){
.service_text{
padding:20px;
font-size:12px;
line-height:18px;
}
.service_text dt{
font-size:16px;
line-height:16px;
}
#service table.table_pc{display:none;}
#service table.table_sp{
border-collapse:collapse;border-spacing:0;
width:100%;
line-height:18px;
font-size:12px;
display:table;
margin:10px 0;
}
}
@media only screen and (max-width:480px){.service_text{padding:10px;}}
/*attention*/
.attention{
margin:0 auto;
padding:0;
width:100%;
text-align:justify;
}
.attention ul{
margin:0;
padding:0;
}
.attention li{
list-style:none;
margin:0;
padding:0 0 0 12px;
font-size:12px;
line-height:20px;
background:url(../img/attention_list.png) no-repeat left top;
}
/*footer*/
footer{
margin:0;
padding:0;
width:100%;
height:120px;
position:relative;
}
#fnav a{color:#333333;text-decoration:none;}
#fnav a:hover{color:#333333;text-decoration:underline;}
#fnav{
position:absolute;
top:50px;
right:10px;
}
#fnav ul{
text-align:right;
list-style-type:none;
}
#fnav li{
font-size:12px;
line-height:16px;
display:inline-block;
padding:0 5px;
border-right:1px solid #666666;
}
#fnav li:last-child{border-right:none;}
address{
position:absolute;
top:20px;
left:20px;
text-align:left;
font-size:10px;
line-height:20px;
padding:0;
}
.footer_logo{display:block;width:250px;height:60px;}
@media only screen and (max-width:767px){
footer{height:auto;padding:40px 0;}
#fnav{
margin:0 0 40px 0;
position:relative;
top:0;
right:0;
}
#fnav ul{text-align:center;}
#fnav li{
font-size:12px;
line-height:30px;
display:block;
padding:0 5px;
border-right:0;
}
address{
position:relative;
top:0;
left:0;
text-align:center;
padding:0;
}
.footer_logo{display:block;margin:0 auto;width:167px;height:40px;}
.sp_no{display:none;}
}

/*modal*/
#opt{
top:0;
left:0;
width:100%;
height:100%;
display:none;
position:absolute;
}
.close_overlay {
top:0;
left:0;
width:100%;
height:100%;
display:block;
text-indent:-9999px;
position:absolute;
background:#000;
opacity:0.5;
z-index:5;
}
.modal_window{
top:0;
bottom:0;
left:0;
right:0;
margin:20px auto;
padding:20px;
width:560px;
height:450px;
text-align:center;
display:block;
background:#ffffff;
color:#333333;
position:absolute;
z-index:10;
border-radius:8px;
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5);
}
/*modal_cta*/
#modal_cta{
width:100%;
margin:0;
padding:0;
text-align:center;
color:#333333;
}
#modal_cta form{
width:100%;
padding:0;
margin:0;
}
#modal_cta form input[type=text]{
font-family: "ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
font-size:14px;
line-height:20px;
margin:0 -5px 10px -5px;
width:100%;
padding:4px;
text-align:center;
border:1px solid #000000;
}
#modal_cta form input[type=image] {width:360px;height:75px;}
#modal_cta p{
margin:0;
padding:10px 0 20px 0;
font-size:14px;
line-height:20px;
text-align:center;
}
.close{top:10px;right:10px;position:absolute;}
.modal_sp{display:none;}
.kiyaku{
margin:0 -5px 10px -5px;
padding:20px 10px 6px 10px;
border:1px solid #000000;
text-align:justify;
height:180px;
overflow-y:scroll;
}
#modal_cta .kiyaku p{
margin:0 auto;
padding:0 0 14px 0;
width:100%;
font-size:12px;
line-height:14px;
text-align:justify;
}
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
0% {opacity:0;display:block;}
100% {opacity:1;}
}
#modal div:target {
-webkit-animation-name: modalFadeIn; 
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
opacity: 1;
display:block;
} 
@media only screen and (max-width:640px){
.modal_window{
margin:10px auto;
width:280px;
height:400px;
}
#modal_cta form input[type=text]{
font-size:12px;
line-height:20px;
width:100%;
padding:4px;
}
#modal_cta form input[type=image] {width:240px;height:50px;}
#modal_cta p{
font-size:12px;
line-height:14px;
}
}