@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 .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:960px){
body { width:960px; }
}
@media screen and (max-width:768px){
body { width:100%; }
header { padding:0; }
#header-logo{ width:100%; height:auto; }
#header-logo .logo { display:none; }
#header-logo .mail { display:none; }
#header-logo .call { display:none; }
header { height:auto;}
}

/* ------------------------------ヘッドライン------------------------------　*/
#header { background-color:#ff8aa9; background-repeat: repeat-x , repeat; border-bottom:1px solid #d3dbd4;}
#header-in { width:960px; margin:0 auto; padding:30px 0; }
#header p { color:#ffffff; text-align:center; font-size:12px; margin:0; padding:0; }
@media screen and (max-width:768px){
#header { padding-top:60px; }
#header-in { width:100%; }
}

/* ------------------------------パン屑リスト------------------------------　*/
nav#breadcrumbs { width:960px; margin:10px auto; padding:0; }
nav#breadcrumbs ol { margin:0 0 0 15px; padding:0; }
nav#breadcrumbs ol li { display:inline; list-style-type:none; font-size:12px; }
nav#breadcrumbs ol li:before { content: " > "; }
nav#breadcrumbs ol li:first-child:before { content:""; }
@media screen and (max-width:768px){
	nav#breadcrumbs { width:100%; }
} 

/* ------------------------------共通------------------------------　*/
.wrapper { width:100%; }
article{ width:960px; 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; }

/* ------------------------------サービスメニュー------------------------------　*/
#service {  }
#service .box { position:relative; background:#ffffff url(../img/note.jpg); margin:0 10px 50px 10px; padding:0px; border:1px solid #cccccc; border-radius:5px; box-shadow:3px 3px 5px rgba(0,0,0,0.1); }
#service .box .box-in { padding:30px 10px 10px 10px; }
#service h2 { color:#000000; height:90px; padding:0 0 0 100px; text-align:left; display:table-cell; /* IE8から使用可能 */vertical-align:middle; }
#service h2.service1 { background:url(../img/service1.png) no-repeat; }
#service h2.service2 { background:url(../img/service1.png) no-repeat; }
#service h2.service3 { background:url(../img/service1.png) no-repeat; }

.boxMoney {	display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }/* floatした高さを揃える*/
.boxMoneyLeft , .boxMoneyRight { position:relative; width:49%; height:auto; border:1px solid #cccccc; margin:0 0 20px 0; padding:20px; }
.boxMoneyLeft { float:left; margin-right:1%; }
.boxMoneyRight { float:right; margin-left:0%; }
.title { background:linear-gradient(#ffffff,#e5e5e5); padding:10px; margin:-20px -20px 0 -20px; border-bottom:1px solid #cccccc;}
.title h3 { margin:0!important; padding:0; text-align:center; font-size:14px; color:#000000; }
.boxMoney p { margin:20px 0 0 0!important; padding:0; font-size:14px; }
.boxMoney ul { margin:1em 0 0 0; padding:0; }
.boxMoney li { background:url(../img/point.jpg) no-repeat 0 3px; margin:0; padding:0 0 0 20px; font-weight:bold; }
@media screen and (max-width:768px){
.boxMoneyLeft , .boxMoneyRight { width:95%; height:auto; float:none; margin:1em auto; }
.title h3 {font-size:14px; }
.boxMoney p { font-size:12px; }
.boxMoney li { font-size:14px; }
}


/* ------------------------------理由------------------------------　*/
#reason {  }
#reason .box { background:#ffffff url(../img/note.jpg); margin:0 10px 30px 10px; padding:0px; border:1px solid #cccccc; border-radius:5px; box-shadow:3px 3px 5px rgba(0,0,0,0.1); }
#reason .box .box-in { padding:20px 250px 10px 10px; }
.reason1bg { background:url(../img/reason1bg.png) no-repeat 100% 0; }
.reason2bg { background:url(../img/reason2bg.png) no-repeat 100% 0; }
.reason3bg { background:url(../img/reason3bg.png) no-repeat 100% 0; }
#reason h2 { color:#000000; height:90px; padding:0 0 0 100px; text-align:left; display:table-cell; /* IE8から使用可能 */vertical-align:middle; }
#reason h2.reason1 { background:url(../img/reason1.png) no-repeat; }
#reason h2.reason2 { background:url(../img/reason2.png) no-repeat; }
#reason h2.reason3 { background:url(../img/reason3.png) no-repeat; }
@media screen and (max-width:768px){
#reason .box .box-in { padding:20px 10px 30% 10px; }
.reason1bg { background:url(../img/reason1bg-sm.png) no-repeat 0% 100%; background-size:contain; }
.reason2bg { background:url(../img/reason2bg-sm.png) no-repeat 0% 100%; background-size:contain; }
.reason3bg { background:url(../img/reason3bg-sm.png) no-repeat 0% 100%; background-size:contain; }
}

/* ----------------------------特徴--------------------------------　*/
#feature {  }
#feature .box { background:#ffffff url(../img/note.jpg); margin:0 10px 30px 10px; padding:0px; border:1px solid #cccccc; border-radius:5px; box-shadow:3px 3px 5px rgba(0,0,0,0.1); }
#feature .box .box-in { padding:20px 10px 10px 10px; }

.feature-call { border:1px solid #cccccc; background:#f2f2f2 url(../img/feature-call-bg.png) no-repeat 100% 0; padding:20px; border-radius:5px; }
@media screen and (max-width:768px){
.feature-call { background:#f2f2f2 url(../img/feature-call-bg-sm.png) no-repeat 0 100%; background-size:contain; padding:20px 20px 35% 20px;}
.feature-call h3 , .feature-call p { text-align:center; }
.feature-call .sm img { margin:20px auto; }
}
.feature-call h3 { margin:0 0 10px 0; }
.feature-call p , .feature-call img{ margin:0; }
.feature1bg { background:url(../img/feature1bg.png) no-repeat 100% 0%; }
.feature2bg { background:url(../img/feature2bg.png) no-repeat 100% 50%; }
.feature3bg { background:url(../img/feature3bg.png) no-repeat 100% 100%; }

#feature h2 { color:#000000; height:90px; padding:0 0 0 100px; text-align:left; display:table-cell; /* IE8から使用可能 */vertical-align:middle; }
#feature h2.feature1 { background:url(../img/feature1.png) no-repeat; }
#feature h2.feature2 { background:url(../img/feature2.png) no-repeat; }
#feature h2.feature3 { background:url(../img/feature3.png) no-repeat; }


.box1column { position:relative; width:100%; height:auto; border:1px solid #cccccc; margin:0 0 20px 0; padding:20px; }
.box1column .title { background:linear-gradient(#ffffff,#e5e5e5); color:#ffffff; padding:10px; margin:-20px -20px 0 -20px; }
.box1column .title h3 { margin:0!important; padding:0; text-align:center; font-size:18px; color:#333333; }
.box1column p { margin:20px 0 0 0!important; padding:0; font-size:14px; }
@media screen and (max-width:768px){
.box1column .title h3 {font-size:14px; }
.box1column p { font-size:12px; }
}


/* ----------------------------制作フロー--------------------------------　*/
#flow {}
#flow p.number { width:80px; height:auto; font-size:16px;font-weight:bold;text-decoration:none;display:block;text-align:center; margin:0px 5px 5px 0; padding:0;color:#ffffff;background:#cc3333;border:2px solid #cc3333; border-radius:20px; float:left; }
#flow h3 { font-size:25px; text-align:left; margin:0; padding:0; }
#flow .text { width:68%; float:left; }
p.bolbig { font-size:18px; font-weight:bold; margin:20px 0; }
#flow .img { width:30%; float:right; }
#flow .img img { background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05);}
@media screen and (max-width:768px){
#flow h2 { font-size:20px; }
#flow h3 { font-size:20px; }
#flow .text { width:100%; float:none; }
#flow .img { width:100%; float:none; }
}
/* balloon-1 bottom */
.st {position: relative; display: inline-block; margin: 0 0 30px 0; padding:15px; width: 100%; color: #19283C; background: #ffffff; border: 1px solid #cccccc; border-radius: 5px; z-index: 0; }
.st:before {content: ""; position: absolute; bottom: -19px; left: 50%; margin-left: -9px; width: 0px; height: 0px; border-style: solid; border-width: 19px 19px 0 19px; border-color: #ffffff transparent transparent transparent; z-index: 0; }
.st:after {content: ""; position: absolute; bottom: -20px; left: 50%; margin-left: -10px; width: 0px; height: 0px; border-style: solid; border-width: 20px 20px 0 20px; border-color: #cccccc transparent transparent transparent; z-index: -1; }
.stEnd {position: relative; display: inline-block; margin: 0 0 30px 0; padding:15px; width: 100%; color: #19283C; background: #ffffff; border: 1px solid #cccccc; border-radius: 5px; z-index: 0; }

/* ------------------------------<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; text-align:center }
.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; }
}


/* ------------------------------お問い合わせ部分------------------------------　*/
.form h2 { margin:0; padding:0;  text-align: center;}
.form p {  }
form { width:100%; padding: 0; margin:0 auto; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); background:#ffffff; }
input , textarea{ height:auto; padding:10px; background:#ffffff; color:#333333; border:1px solid #cccccc; border-radius:3px; }
.textForm { width:100%; }
.textForm02 { width:30%; }
.textForm03 { width:100%; height:200px; }
.group { display:block; float:none; clear:both; margin:0; padding:20px 10px 20px 10px; border-bottom:1px dotted #c7c7c7;}
.gLeft { display: block; width:20%; float:left; font-weight:bold; }
.gRight { margin-left:20%; width:80%; }
.hissu{ background:#BC272D; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-size:11px; font-weight:bold; border-radius:3px; }
.nini{ background:#777777; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-size:11px; font-weight:bold; border-radius:3px; }
.errorBg { background:#ffeeee; }
.errorFont { color:#BC272D; font-weight:bold; margin:0; font-size:16px; }
@media screen and (max-width:768px){
form { width:95%;}
.textForm02 { width:50%; }
.gLeft { display:block; width:100%; float:none; margin-bottom:10px; }
.gRight { margin-left:0%; width:100%; }
}
.insertLeft,.insertRight { display: table; width: 100%; position: relative; margin-bottom:10px; }
.insertLeft .typeBox { display: table-cell; border-bottom-left-radius: 0; border-top-left-radius: 0; width:100%; }
.insertRight .typeBox { display: table-cell; border-bottom-right-radius: 0; border-top-right-radius: 0; width:100%; }
.InsertBox { background-color: #eee; border: 1px solid #ccc; border-radius: 4px; color: #555; font-size: 14px;
line-height: 1; padding: 6px 12px; text-align: center; display: table-cell; width: 1%; box-sizing: border-box; -moz-box-sizing: border-box; }
.insertLeft .InsertBox { border-right: none; border-bottom-right-radius: 0; border-top-right-radius: 0; }
.insertRight .InsertBox { border-left: none; border-bottom-left-radius: 0; border-top-left-radius: 0; }
button { width:300px;height:60px;font-size:17pt;font-weight:bold;text-decoration:none;display:block;text-align:center;margin:1em auto; padding:8px 0 10px;color:#ffffff;background:#f7931e;border-radius:5px;border:3px double #ffffff;}
button:hover { background:#BC272D; color:#ffffff; text-decoration:none; }
select.select01 { background:#ffffff; border:1px solid #cccccc; border-radius:3px; color:#0C2245; font-size:14px; height:40px; line-height:30px; text-align:left; text-indent:5px; vertical-align:middle; width:70%; }


/* ------------------------------小見出し属性------------------------------　*/
h1 { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight:normal;
	font-size:36px; margin:0; padding:0; text-align:center; color:#ffffff; line-height:120%; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
h2 , h3 { margin:0 0 20px 0; color:#333333; line-height:120% }
h2 { font-size:26px; padding-left:10px; text-align:left}
h3 { font-size:20px; }
h4 { background:none; font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif; }
@media screen and (max-width:768px){
h1 { font-size:22px; }
h2 { font-size:20px; }
h3 ,h4 { font-size:18px; }
}
.pc { display:block; }
.sm { display:none; }
@media screen and (max-width:768px){
	.pc{ display:none; }
	.sm{ display:block; }
}