﻿@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    overflow-y: scroll;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea,{
	margin: 0;
	padding: 0;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse: collapse; 
    border-spacing:0;
}

caption, th{
    text-align: left;
}

a:focus {
	outline:none;
}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*ﾂ･*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}
/* よく使うCSS start*/

img {
	max-width:100%;
}

table {
	width:100%;
}

a,a:hover,a:before,a:after,a:hover:before,a:hover:after {
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

a img:hover {
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
}


*,*:before,*:after{  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

/*--body--*/
body{position:relative;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#fff;
line-height:1.6em;
}
.marugo{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"}
.hiragi{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}

a{color:#fff; text-decoration:none;}
/*a:hover{color:#33489c;}
a:visited{color:#999;}*/

.wrap{width:1100px; margin:0 auto}
.f_l{float:left;}
.f_r{float:right;}

.ind1{text-indent:1em;}
.sml{font-size:.72em;}

.mt1{margin-top:1em;}
.mt2{margin-top:2em;}
.mt3{margin-top:3em;}
.mt4{margin-top:4em;}

.mb1{margin-bottom:1em}
.mb2{margin-bottom:2em;}
.mt3{margin-top:3em;}
.mt4{margin-top:4em;}

.fz_08{font-size:80%;}
.fz_12{font-size:120%;}

.red{color:#F00;}
.yel{color:#ffe400;}
.blue{color:#1E95D4}
.ta_c{text-align:center;}

a[href$="pdf"]:after{content:url(../img/common/icon_pdf.gif);margin-left:.5em;position:relative;top:2px}
a[href$="doc"]:after,a[href$="docx"]:after{content:url(../img/common/icon_word.gif);margin-left:.5em;position:relative;top:2px}
a[href$="xls"]:after,a[href$="xlsx"]:after{content:url(../img/common/icon_excel.gif);margin-left:.5em;position:relative;top:2px}
.smp{display:none;}
.bod_b{border-bottom:1px #000 solid;}

.c_y{color:#ffb900}
.c_r{color:#fe0000}
/*--header--*/
header{
}

header .wrap{position:relative; padding:.5em 0;display:flex;flex-wrap:wrap;justify-content:space-between; padding-top:1em}
header div,footer div{width:45%;position:relative;}
.logo h1{float:none;}
.logo h1 span,.logo h2 span{display:none;}
.logo h3{position:absolute;top:-.5em; left:20%;font-size:.8em}
.logo h2{margin-left:20%; margin-top:-1em;width:58%}

.contact h2{font-weight:bold;font-size:1.2em;margin:0 auto .5em}
h3.tel{background:url(../img/tel.png) left no-repeat;background-size:contain;padding-left:12%; margin-bottom:1em}
h3.tel a{color:#000;font-size:3em;letter-spacing:-.05em;font-weight:bold;position:relative;top:.2em}
.contact p{font-size:.9em; line-height:1.4em;}
p.inquiry{position:absolute;right:0;bottom:.5em;line-height:1.2em}
p.inquiry a{padding:.2em .5em .2em 3em;background:url(../img/mail.png) 10px no-repeat #ffb900;background-size:18%;display:inline-block;border:1px #ffb900 solid;border-radius:1em;font-weight:bold}


section{position:relative;}
/*--hero--*/
section.hero h2{padding:.5em 3em 1em 3em;text-align:center;display:inline-block;background:url(../img/hero_bg.png) top center no-repeat;background-size:contain; color:#fff;font-weight:bold;font-size:2em;line-height:1.4em;position:absolute;top:0;left:0;right:0;margin:auto;width:530px}
section.hero h2 b{display:block;font-weight:bold;font-size:1.5em;line-height:1.1em;padding:.1em 0}
figure.hero{line-height:0;}
figure.hero img{width:100%;}

/*--think--*/
.think{background:url(../img/think.png) 90% bottom no-repeat #f5f4f2;background-size:28%; padding:1em 0}
.think h2{text-align:center;font-size:3em;color:#0b006d;font-weight:bold;margin:1.5em auto;line-height:1.2em}
.think h2 span{color:#000; display:inline-block;margin-left:1em;font-size:.8em; font-weight:bold;}
.think h2 b{font-weight:bold;}
.think ol{counter-reset:numb; margin:1em 0; width:65%}
.think ol li{line-height:3em; border-top:1px #ccc solid;padding:1em 0;font-weight:bold;font-size:1.2em}
.think li:before{counter-increment:numb;content:counter(numb);background:#0b006d;display:inline-block;width: 2em;height: 2em;text-align: center;border-radius: 50%;color: #fff;margin-right: 1em;font-size:1.5em;font-weight:normal}
.think li .c_r{font-size:2em;font-weight:bold; display:inline-block;margin-right:.3em}

/*--price--*/
.price{background:#ced1e4;padding:3em 0}
.price h3{font-size:2em;font-weight:bold;color:#0b006d;line-height:1.6em}
.price h3 b{font-weight:bold;position:relative; display:inline-block;}
.price h3 b span{font-size:.3em;display:inline-block;border:1px #0b006d solid;background:#fff;text-align:center; position:absolute;left:0;right:0;top:-1.6em;line-height: 1.4em;padding: .2em;margin:auto;font-weight:bold}

.price dl{display:flex;flex-wrap:wrap;justify-content:space-between;width90%; margin:1em auto 2em;position:relative}
.price dt{height:14em;width:14em;background:#0b006d;color:#fff;border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
.price dt p{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:70%;height: 2.5em;font-size:3.2em;line-height:1.3em;font-weight:bold}
.price dt p b{font-weight:bold;font-size:1.5em;color:#fe0000;letter-spacing:-.1em;margin-right:.1em;text-shadow:1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff}
.price dt p span{font-size:.5em;position:relative;font-weight:bold;}
.price dt p em{position:absolute;font-size:.5em;right:0;top:-1em;line-height:1em}

.price dd{background:#fff;padding:1em 1.5em;border:2px  #0b006d solid;color: #0b006d;font-size:2.5em;font-weight:bold;border-radius:1em;width:42%;margin:.5em auto;line-height:1.2em}
.price dd span{font-size:.7em;display:inline-block;}

.price dd span:before{content:"（"}
.price dd span:after{content:"）"}

.conbox{width:90%;padding:2em 3em 1em;background:#fff;border-radius:1em;margin:1em auto;position:relative}
.conbox h2,.flow .conbox h2{font-size:2em;margin:0 auto .5em;font-weight:bold}
.conbox h2 span.bg_sky{padding:.2em .5em 0 1em;background:#00a0ff;color:#fff;font-weight:bold;display:inline-block;margin:0 .5em;line-height:1.2em}
.conbox h3.tel{padding-left:13%;font-size: 2em;}
.conbox h3.tel a{font-size:2.9em;top:.1em}
.conbox h3.tel span{display:inline-block;font-size:.5em;line-height:1.4em;padding:.5em 0 0 1em}
.conbox p.inquiry{ position:relative;width:100%;text-align:center}
.conbox p.inquiry a{display:block;font-size:2em;padding:.5em;background: url(../img/mail.png) 25% no-repeat #ffb900;background-size: 5%;border-radius:.5em}


/*--catch--*/
.catch{background:#e4dece; text-align:center;padding:3em 0}
.catch h2{font-size:2em; line-height:2em;font-weight:bold;}
.catch h2 br{display:none}
.catch h2 b{display:block;font-weight:bold;font-size:1.7em;line-height:1.2em;color:#fe0000;margin:.2em auto;text-shadow:1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;}

.company .about{background:url(../img/hero2.jpg) center center no-repeat;background-size:cover;padding-bottom:1em}
.company .about h4{width:35%;margin:0 auto;text-align:center;padding:.2em 0;background:#ffb900;color:#fff;font-size:1.2em}
.company .about h2,.company .about h3,.company .about p{width:1000px}
.company .about p br{display:none;}
.company .about h2,.company .about h3{line-height:1.4em;font-weight:bold}
.company .about p{margin:0 auto;}
.company .about h2{font-size:2em;color:#00a2ea; margin:2em auto .5em;text-shadow:1px 1px 10px #fff,-1px 1px 10px #fff,1px -1px 10px #fff,-1px -1px 10px #fff}
.company .about h3{font-size:3em;color:#ff2691; margin:1em auto;;text-shadow:5px 5px 10px #fff,-5px 5px 10px #fff,5px -5px 10px #fff,-5px -5px 10px #fff,1px 1px 5px #fff,-1px 1px 5px #fff,1px -1px 5px #fff,-1px -1px 5px #fff}

div.flex{display:flex;flex-wrap:wrap;}
div.flex > div{width:50%;}
div.build{background:url(../img/building.jpg) center no-repeat;background-size:cover; min-height:390px;}
div.build div{padding:2em 1em 1em;text-align:center;color:#fff; background:#0163ea;margin-left:25%;display:inline-block;line-height:2em}
div.build h3{font-size:1.3em;}
div.build a{font-size:1.4em;background:url(../img/arrow.png)left no-repeat;display:inline-block;margin:.5em auto 0; padding:.2em .5em .2em 2em;border-radius:10px;}
div.build a:hover{background-color:rgba(255,255,255,.4);background-position:5px}

div.map iframe{width:100%;min-height:390px;display:block} 

/*--flow--*/
.flow h2{margin:3em auto 2em; text-align:center}
.flow h2 span{display:none;}
.flowbox{width:1100px;margin:0 auto; display:flex;justify-content:center;}
.flowbox dl{background-color:#468bc6;color:#fff;padding:2em 0 2em 4em}
.flowbox dl+dl{background:url(../img/flowarrow.gif) left no-repeat #468bc6;background-size:contain }
.flowbox dt{font-size:2em;line-height:1.8em;text-align:center;font-weight:bold}
.flowbox div{width:6em;background:url(../img/flowend.gif) left no-repeat;background-size:contain;}

/*--qanda--*/
.qanda h2{border-bottom:2px #ccc solid; position:relative; margin:2em auto 0}
.qanda h2 span{background:url(../img/qanda.gif)left no-repeat #fff;padding:1em .5em .2em 5em;display:inline-block; font-size:2em;font-weight:bold;position:relative;top:.4em}

table.tbl{margin:1em auto;border-collapse:separate;border-spacing:1em 3em;}
table.tbl th{border:2px #2f6291 solid;background:#d1e7f5;color:#2f6291;position:relative;width:30%; text-align:center;vertical-align:middle;line-height:1.8em;padding:2em 0;font-weight:bold;font-size:1.2em}
table.tbl th p{background:#2f6291;color:#fff;font-weight:bold;padding:.2em 0;display:inline-block;position:absolute;top:-1em;left:0;right:0;width:70%;margin:auto; border-radius:1em}
table.tbl td{padding:1em 1.5em;line-height:1.8em; vertical-align:middle;background:#f2f0f1}
table.tbl td .c_r{font-weight:bold;}


/*--aside--*/
aside{width:1000px;margin:3em auto;display:flex;justify-content:space-around;}

/*--gotop--*/
p#gotop{display: block;position: fixed;z-index: 99;bottom: -80px;right: 50px;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;z-index:10000}
#gotop a{background:#ffb900;border-radius:50%;display:inline-block; position:relative;text-align: center;padding: 2em 1.2em 1em;line-height: 1em;}
#gotop a:before{content:"";width:1em;height:1em;border-top:1px #fff solid;border-left:1px #fff solid;display:inline-block;transform:rotate(45deg);position:absolute;left:0;right:0; top:.5em;margin:auto}

#gotop a:hover{opacity:.8}
#gotop a:hover:before{top:.6em}



/*--footer--*/
footer{border-top:5px #0c006e solid;}
footer p.link{width:1100px; margin:2em auto 1em;}
p.link a{display:inline-block;padding:.4em 1em .3em 3em;background:url(../img/arrow.png)2% no-repeat #1eb5e0;border-radius:1em;}
p.link a:hover{background-position:3%;opacity:.8}

footer .wrap{position:relative; padding:.5em 0;display:flex;flex-wrap:wrap;justify-content:space-between; padding-top:1em}

small{text-align:center;display:block;padding:1em 0}


/*---1000px---*/

@media screen and (max-width: 1000px){
.wrap{width:100%;}
.think {background-size:20%;background-position:right bottom;}
.price{padding:1em 0}
.price h3{width:95%;margin:1em auto}
.price dd{font-size:1.5em;}
.price dd:nth-of-type(even){text-align:right;}

.conbox {width:95%;padding: 1em 1.5em .5em;}
.conbox h2, .flow .conbox h2,.conbox h3.tel,.conbox p.inquiry a{font-size:2.8vw;}

.company .about h2, .company .about h3, .company .about p{width:95%;margin:.5em auto}

.flow h2 {margin: 2em auto 1em;}
.flowbox{width:100%;}
.flowbox dl{padding:1em 0 1em 2em;}
.flowbox dt {font-size: 1.2em;line-height: 1.4em;margin-bottom:.5em}
.flowbox dd{font-size:.9em;}

aside{width:95%;margin:1em auto;}
aside a{width:48%;}

footer p.link{width:100%; margin:1em auto;}

}


/*----850px----*/

@media screen and (max-width: 850px){ 


header div,footer div{width:49%;}
.logo h3{font-size:.6em;top:-1em}
.contact p{font-size:.6em;}
h3.tel a{font-size:2em;}

section.hero h2{font-size:1em;line-height:1.5em;position:absolute;top:0;left:0;right:0;margin:auto;width:auto}
section.hero h2 b{font-size:1.2em;line-height:1.1em}

.think h2{margin:.5em auto;}
.think h2 span{margin:0 auto;font-size:5vw;display:block;}
.think li:before{width:1.5em;height:1.5em;font-size:1em;line-height:1.5em;margin-right:.5em}
.think ol{width:80%;}
.think ol li{line-height:1.4em;padding:.5em 0 .5em .5em;font-size:1em; }
.think li .c_r{font-size:1.5em;position:relative;top:.1em}

.catch{padding:1em}
.catch h2 {font-size: 1.6em;line-height: 1.6em;}

.company .about h4{width:50%;}

div.build div{display:block;margin:0 auto; padding:1em 0}
.flowbox dl:first-child{padding-left:1em;}
.flowbox dd{font-size:.9em; padding-left:1em}

.qanda h2{margin:0 auto 1em}
}



/*----630px----*/

@media screen and (max-width: 630px){
header .wrap{padding:.5em 0 0}
header div,footer div{width:95%; margin:0 auto;}
header h1{width:100%;margin:0 auto}
.logo{padding-top:1.5em;}
.logo h3{width:100%;margin:auto;left:0;right:0;text-align:center;font-size:.8em;top:0}
.logo h2{width:45%;margin-top:-1.5em}

.contact p{font-size:1em;}
.contact h3.tel a{font-size:11vw;}
p.inquiry{position:relative; margin:.5em auto 0;text-align:center}
p.inquiry a{width:95%;padding:.5em 0;text-align:center;background-size:8%; margin:1em auto 0}
p.inquiry a br{display:none;}

section.hero h2{background-image:none;background:#0b006c;position:relative;width:100%;padding:.5em 0}
section.hero h2 br{display:none;}

.price h3{margin:.5em auto;}
.price h3 br{display:none;}
.price dt{height:auto;width:95%;position:relative;border-radius:1em;margin-bottom:1em}
.price dt p{position:relative;width:100%;margin:.5em auto 0;height:auto;text-align:center}
.price dt p br{display:none;}
.price dd{padding:.5em 1em;width:48%;margin:.2em auto;font-size:1.2em}
.price dd:nth-of-type(even){text-align:left;}

.conbox h3.tel{font-size:2vw;text-align:right}
.conbox h3.tel a {font-size: 8vw;}
.conbox h3.tel span{font-size:3vw}
.conbox h3.tel span br{display:none;}

.catch h2{font-size:4vw}
.catch h2 br{display:block}

.company .about h2{font-size:5.5vw}
.company .about h3{font-size:5.8vw}
.company .about p br{display:block;}


div.flex > div{width:100%;}
div.build div{padding:.5em 0;font-size:.9em}
div.build{min-height:300px;}

div.map iframe{width:100%;min-height:300px;} 


.flowbox{flex-wrap:wrap;}
.flowbox dl{width:95%;margin:0 auto .5em;padding:.5em; background:#468bc6;position:relative;}
.flowbox dl:before{content:"";border:10px transparent solid;border-top:10px #468bc6 solid;display:inline-block;width:0;position:absolute;left:0;right:0;top: -.5em;margin:auto}
.flowbox dl:first-child:before{content:none;}
.flowbox dl+dl{background-image:none;}
.flowbox dt{clear:left;float:left;margin:0 auto;width:30%;font-size:1em;border-right:1px #fff solid}
.flowbox dd{margin-left:30%;}
.flowbox dd br{display:none;}

table.tbl{width:95%;margin:2em auto 0;border-collapse:collapse;border-spacing:0;}
table.tbl th,table.tbl td{display:block;width:100%}
table.tbl th{padding:2em 0 .5em;}
table.tbl th br{display:none;}
table.tbl td{margin:.5em auto 2em;}

p#gotop{right:0;}

footer .wrap{padding:0;}
footer p.link{text-align:center;font-size: .8em;margin-bottom: .5em;}

small{font-size:.8em;}
}

