@charset "UTF-8";
@import "default.css";

/*
YUKI TAKAHASHI
Copyright 2015 UQ DESIGN. All Rights Reserved.
http://uqyuki-design.com/
*/

/* ------------------------------ヘッダー部分------------------------------　*/
body   { background:#ffffff; }
header { width:100%; height:auto; margin:0 auto; padding:0; background:#ffffff; }
#header-logo{ position:relative; width:1060px; height:110px; margin:0 auto; }
#header-logo h1 { display:none; color:#999999; text-align:left; font-size:10px; margin:0; padding:0; }
#header-logo .logo { position:absolute; width:270px; height:50px; top:30px; }
#header-logo .mail { position:absolute; width:90px; height:90px;  top:10px; right:0; }
#header-logo .call { position:absolute; width:310px; height:90px; top:10px; right:100px; }
@media screen and (max-width:1060px){
body { width:1060px; }
}
@media screen and (max-width:768px){
body { width:100%; }
#header-logo{ width:100%; height:auto; }
#header-logo h1 { display:none; }
#header-logo .logo { display:none; }
#header-logo .mail { display:none; }
#header-logo .call { display:none; }
header { height:auto;}
}

/* ------------------------------ヘッドライン------------------------------　*/
#header { background: url(../img/header-bg.jpg) no-repeat 50% 0%; }
#header-in { width:1060px; margin:0 auto; padding:0; }
#header .pc { width:1060px; height:626px;  }
#header .pc img { display:none; }
@media screen and (max-width:768px){
#header { background:none; }
#header-in { width:100%; padding-top:60px; }
#header .pc { display:none; }
#header .sm { position:relative; }
#header .sm_font { position:absolute; top:0; }

}

/* ------------------------------共通------------------------------　*/
.wrapper { width:100%; }
article{ width:1060px; height:auto; margin:0 auto; padding:0;}
section {}
@media screen and (max-width:768px){
article{ width:98%; }
}
a.readmore { width:300px; height:60px; line-height:60px; text-align:center; background:transparent; color:#330000; margin:15px auto 0 auto; border-radius:30px; font-size:16px; font-weight:bold; display:block; border:2px solid #330000; }
a.readmore:hover { background-color:#330000; color:#ffffff; text-decoration:none; }

/* ------------------------------<h2>お悩み</h2>------------------------------　*/
.first { background:#fff2f5 url(../img/onayami_bg.png) no-repeat 50% 60px; padding:50px 0 50px 0; }
.first ul { margin:30px 0; padding:0; background:url(../img/kenka.jpg) no-repeat 100% 100%;}
.first li { background:url(../img/list.png) no-repeat 0 3px; margin-bottom:20px; padding-left:30px; font-size:18px; }
@media screen and (max-width:768px){
	.first { background-size:contain; }
.first ul { margin:20px 1%; padding:0 0 250px 0; background:url(../img/kenka.jpg) no-repeat 50% 100%; }
.first li { font-size:15px; background:url(../img/list.png) no-repeat 0 0; }
}

/* ------------------------------<h3>もし、</h3>------------------------------　*/
.second { background: url(../img/second.jpg) no-repeat 50% 0 ; background-size:cover; padding:50px 0 50px 0; }
.second h3 span.nami { background:url(../img/nami.png) repeat-x 0 100%; padding:0 0 6px 0; }
.second .inner01 { float:left; width:700px; }
.second .inner02 { float:right; width:360px; }
@media screen and (max-width:768px){
.second h3  { line-height:150% }
.second .inner01 { float:none; width:94%; margin:0 3%; }
.second .inner02 { float:none; width:94%; margin:0 3%; }
.second .inner02 img { margin:0 auto; }
}
/* ------------------------------<h3>理由</h3>------------------------------　*/
.third { background:#fff2f5 url(../img/reason_bg.png) no-repeat 50% 50px; padding:50px 0 50px 0; }
.third .box { width:350px; height:auto; float:left; margin:1.5px; padding:0; }
.third a.readmore { margin:15px auto 30px auto; }
@media screen and (max-width:768px){
.third { background-size:contain; }
.third .box { width:94%; height:auto; float:none; margin:10px 3%; }
.third .box img { margin:0 auto; }
}


/* ------------------------------<h3>お申し込みの流れ</h3>------------------------------　*/
.flow {  background: url(../img/step_bg.jpg) no-repeat 50% 0; color:#ffffff; padding:50px 0; }
.flow h3 { color:#42210b; }
.flow .cf { width:800px; margin:0 auto; }
.box-flow { position:relative; width:33%; height:auto; float:left; background:#ffffff; margin:0; padding:0;}
.box-flow img { width:100%; height:auto; display:block; }
.box-flow p.number { position:absolute; top:10px; left:10px; font-size:20pt; background:none; color:#ffffff; text-align:left; text-shadow: 2px 2px 0 rgba(0,0,0,0.3); }
.box-flow p { position:absolute; bottom:0; left:0; background:rgba(255,255,255,0.8); font-weight:bold;
width:100%; margin:0; padding:5px; font-size:9pt; text-align:center;  color:#333333;}
@media screen and (max-width:768px){
.flow .cf { width:94%; margin:0 3%; }
.box-flow {  width:50%; height:auto;  }
.box-flow img { height:auto; display:block;}
}

/* ------------------------------<h3>保証</h3>------------------------------　*/
.hosyo { background:#fff2f5 url(../img/reason_bg.png) no-repeat 50% 20px; padding:50px 0; }
.hosyo .box { width:350px; height:auto; float:left; margin:1.5px; padding:0; }

@media screen and (max-width:768px){
.hosyo { background-size:contain; }
.hosyo .box { width:94%; height:auto; float:none; margin:10px 3%; }
.hosyo .box img { margin:10px auto; }
}

/* ------------------------------<h3>理念</h3>------------------------------　*/
.rinen {  background:#fff6f0 url(../img/rinen3.jpg) no-repeat fixed; background-size:cover; padding:50px 0; }
.rinen .atama{ font-size:36px; line-height:1; float:left; margin:.1em .3em 0 0; padding:.2em; background:url(../img/atama.jpg); color:#ffffff; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.rinen .box { background:rgba(255,255,255,0.6); margin:0 10px; padding:10px; border-radius:5px; box-shadow:3px 3px 5px rgba(0,0,0,0.3); }
.rinen .box .box-in { border:2px solid #d7cfb5; margin:0; padding:10px; }
.rinen .box .inner01 { width:560px; float:left; }
.rinen .box .inner02 { width:430px; float:right; padding:20px 20px 0 0;}
.rinen .box p { margin:10px 10px 30px 10px; }
@media screen and (max-width:768px){
.rinen .box .inner01 { width:100%; float:none; }
.rinen .box .inner02 { width:100%; float:none; padding:10px; }
.rinen .box .inner02 img { margin:0 auto; }
}

/* ------------------------------<h3>特徴</h3>------------------------------　*/
.tokutyo {  background:#fff2f5 url(../img/reason_bg.png) no-repeat 50% 20px; padding:50px 0; }
.tokutyo .box { width:350px; height:auto; float:left; margin:1.5px; padding:0; }
@media screen and (max-width:768px){
.tokutyo { background-size:contain; }
.tokutyo .box { width:94%; height:auto; float:none; margin:10px 3%; }
.tokutyo .box img { margin:10px auto; }
}

/* ------------------------------<h3>CTA</h3>------------------------------　*/
.cta {  background: url(../img/footer.jpg) no-repeat 50% 0; padding:50px 0; }
.cta .box { width:700px; background: url(../img/footer_border.jpg) repeat-x 0 0 , url(../img/footer_border.jpg) repeat-x 0 100% , url(../img/note.jpg) ; margin:0 auto; padding:30px 0px; border:1px solid #cccccc; border-radius:5px; box-shadow:3px 3px 5px rgba(0,0,0,0.3); }
.cta .box h3 { margin:0 0 10px 0; padding:0; }
.cta p { text-align:center; margin:10px 0; padding:0 30px; }
.cta p .big { font-size:18px; font-weight:bold; }
.cta .cta_box { position:relative; width:600px; margin:0 auto; }
.cta .cta_box .mail { position:absolute; top:43px; right:42px; }
.cta .cta_box .call { position:absolute; top:75px; left:180px; }

@media screen and (max-width:768px){
.cta .box { width:90%; }
.cta .cta_box { display:none; }
}

/* ------------------------------フッター上のお問合せ------------------------------　*/
.info { width:100%; height:auto; background:#66cc99 url(../img/pattern.png);  }
.info-in { width:1060px; background:#ffffff; margin:30px auto; padding:1%; border-radius:10px; box-shadow:3px 3px 5px rgba(0,0,0,0.3); }
.infoLeft { width:35%; float:left; margin:0; padding:0; }
.infoRight { width:65%; float:right; margin:0; padding:0; }
.info p:last-child { margin:0; }
.info ul { float:none; clear:both; margin:0; padding:10px 0 0 0; }
.info ul li { list-style:none; float:left; margin:0; padding:0; width:25%; }
.call01 { float:left; }
.call02 { display:none; }
.mail02 { width:300px; float:right; margin:0 auto ;}
p.call-text { display:none }
@media screen and (max-width:768px){
.info-in { width:98%; }
.infoLeft { width:100%; float:none; }
.infoLeft img { width:100%; }
.infoRight { width:100%; float:none; }
.info ul li {  width:50%; }
.call01 { display:none; }
.call02 { display:block; text-align:center; }
.mail02 { width:100%; float:none; }
p.call-text { display:block; margin:0 0 1em 0; padding:0; text-align:center; font-size:14px; }
}

/* ------------------------------小見出し属性------------------------------　*/
h1 { font-size:10pt; font-weight:normal; text-align:left; margin: 0; }
h1 a { color:#333333; }
h2 , h3 ,h4 { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight:normal;
	font-size:38px; margin:0 0 30px 0; padding:0 0 10px 0; text-align:center; color:#330000; line-height:120%; }
h2 span.small ,h3 span.small { font-size:28px; }
h2 span.pink ,h3 span.pink { color:#f67087 }


@media screen and (max-width:768px){
h2 , h3 ,h4 { font-size:22px; }
h2 span.small ,h3 span.small { font-size:14px; }
}