@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "Zen Maru Gothic","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#001932;
min-width:1000px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
figure.img img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
figure.img img{ padding: 1.25vw;}
}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#191919;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ background: url("../images/fv.jpg") center center no-repeat; background-size: cover; padding: 40px 0;}
header #header{ width: 1000px; padding-right: 80px; margin: 0 auto;}
header #header p.txt01{ font-size: 2rem; font-weight: bold; margin-bottom: 40px;}
header #header h1{ display: flex; flex-direction: column; margin-bottom: 40px;}
header #header h1 span{ font-size: 2.9rem; line-height: 1em; margin-bottom: 20px;}
header #header h1 strong{ font-size: 4.5rem; line-height: 1em;}
header #header p.txt02{ font-size: 1.8rem; font-weight: bold; line-height: 1.5em; margin-bottom: 40px;}
header #header h2{ display: flex; align-items: center; justify-content: center; background: #001932; color: #fff; font-size: 1.8rem; line-height: 1.25em; padding: 0.25em; margin-bottom: 0;}
header #header .list ul{ display: flex; justify-content: space-between; background: rgba(255,255,255,0.66);}
header #header .list ul li{ width: 33.33%; border-left: 2px solid #001932; text-align: center; padding: 20px 0;}
header #header .list ul li:last-child{ border-right: 2px solid #001932;}
header #header .list ul li h3{ font-size: 1.8rem; line-height: 1em; text-decoration: underline; margin-bottom: 10px;}
header #header .list ul li p{ font-size: 1.8rem; line-height: 1em; font-weight: bold;}
header #header .list ul li p strong{ font-size: 200%; line-height: 1em;}
@media screen and (max-width:767px){
header{ padding: 10% 0;}
header #header{ width: 92.5%; padding-right: 0; margin: 0 auto;}
header #header p.txt01{ font-size: 1.2rem; margin-bottom: 7.5%;}
header #header h1{ margin-bottom: 7.5%;}
header #header h1 span{ font-size: 1.33rem; line-height: 1em; margin-bottom: 3.75%;}
header #header h1 strong{ font-size: 2.25rem; letter-spacing: 0;}
header #header p.txt02{ font-size: 1rem; margin-bottom: 7.5%;}
header #header h2{ font-size: 1rem;}
header #header .list ul li{ padding: 2.5% 0 3.75%;}
header #header .list ul li h3{ font-size: 1.2rem; margin-bottom: 0;}
header #header .list ul li p{ font-size: 1.2rem;}
header #header .list ul li p strong{ font-size: 200%; line-height: 1.25em;}
}

/*フッター*/
footer{}
p.copyright{ text-align:center; margin:0; padding:1em; background:#fff; font-size:0.8rem; letter-spacing:0.1em;}
@media screen and (max-width:767px){
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto; padding: 80px 0;}
.maincontent{ padding:0; margin:0 auto; width:1000px;}
@media screen and (max-width:767px){
section{ padding: 15% 0;}
.maincontent{ padding:0; margin:0 auto; width:90%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}
#content h2{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px;}
#content h2 strong{ font-size: 2.4rem; line-height: 1em; padding-bottom: 0.25em; margin-bottom: 0.25em; position: relative;}
#content h2 strong:after{ content: ""; width: 120px; height: 2px; background: #001932; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
#content h2 span{ font-size: 1.2rem; line-height: 1em;}
@media screen and (max-width:767px){
#content h2{ margin-bottom: 7.5%;}
#content h2 strong{ font-size: 2rem;}
#content h2 strong:after{ width: 12.5vw;}
#content h2 span{ font-size: 1rem;}
}

/*btn*/
figure.btn_more{ display: flex; align-items: center; justify-content: center; margin-top: 80px;}
figure.btn_more a{ display: flex; align-items: center; justify-content: center; border: 1px solid #001932; background: #fff; font-size: 1.2rem; font-weight: bold; line-height: 1em; padding: 0.5em 1.5em 0.66em; transition: 0.3s;}
figure.btn_more a i{ margin-left: 0.5em;}
figure.btn_more a:hover{ background: #001932; color: #fff;}
@media screen and (max-width:767px){
figure.btn_more{ margin-top: 10%;}
figure.btn_more a{ font-size: 1rem;}
}

/*txt*/
#content p.lead{ text-align: center; font-size: 1rem;}
@media screen and (max-width:767px){
#content p.lead{ font-size: 0.8rem;}
}

/*cv*/
.cv{ background: #001932; padding: 40px 0;}
.cv h3{ display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem;}
.cv h3 strong{ display: flex; align-items: center; justify-content: center; position: relative;}
.cv h3 strong:before{ content: ""; width: 4px; height: 100%; background: #fff; position: absolute; left: -20px; bottom: 0; transform: rotate(-12.5deg);}
.cv h3 strong:after{ content: ""; width: 4px; height: 100%; background: #fff; position: absolute; right: -20px; bottom: 0; transform: rotate(12.5deg);}
.cv figure.btn{ display: flex; align-items: center; justify-content: center; margin-top: 20px;}
.cv figure.btn a{ display: flex; align-items: center; justify-content: center; background: #fff; color: #001932; font-size: 2rem; font-weight: bold; line-height: 1em; padding: 0.33em 2.5em 0.5em 3.5em;; position: relative; transition: 0.3s;}
.cv figure.btn a i{ position: absolute; left: 1em; top: 50%; transform: translateY(-50%);}
.cv figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
.cv{ padding: 7.5% 0;}
.cv h3{ font-size: 1.1rem;}
.cv h3 strong:before{ left: -3.75vw;}
.cv h3 strong:after{ right: -3.75vw;}
.cv figure.btn{ margin-top: 5%;}
.cv figure.btn a{ font-size: 1.6rem;}
}



/*works*/
#works .list{ margin-top: 40px;}
#works .list ul{ display: flex; flex-wrap: wrap; gap: 40px;}
#works .list ul li{ width: calc(50% - 20px);}
#works .list ul li a{ display: block; transition: 0.3s;}
#works .list ul li a:hover{ opacity: 0.7;}
#works .list ul li a img{ border: 4px solid #fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#works .list ul li h4{ display: flex; align-items: center; justify-content: center; margin-top: 10px;}
#works .list ul li h4 strong{ font-size: 1rem; line-height: 1em;}
#works .list ul li h4 span{ display: flex; align-items: center; justify-content: center; background: #001932; color: #fff; font-size: 0.8rem; line-height: 1em; padding: 0.25em 0.75em; margin-left: 1em;}
@media screen and (max-width:767px){
#works .list{ margin-top: 7.5%;}
#works .list ul{ display: block;}
#works .list ul li{ width: 100%; margin-top: 7.5%;}
#works .list ul li h4{ margin-top: 2.5%;}
#works .list ul li h4 strong{ font-size: 0.9rem;}
#works .list ul li h4 span{ font-size: 0.66rem;}
}



/*reasons*/
#reasons{ background: #e6f0fa;}
#reasons .list{ margin-top: 40px;}
#reasons .list ul{ display: flex; flex-wrap: wrap; gap: 40px;}
#reasons .list ul li{ width: calc(50% - 20px); background: #fff; padding: 20px;}
#reasons .list ul li h4{ display: flex; align-items: center; color: #326496; font-size: 1.2rem; margin-bottom: 0.5em;}
#reasons .list ul li h4 strong{ font-size: 1.2rem; line-height: 1em; text-decoration: underline;}
#reasons .list ul li h4 i{ display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: #e6f0fa; color: #326496; margin-right: 0.5em; font-size: 1rem;}
#reasons .list ul li p{ font-size: 0.9rem; line-height: 1.5em;}
@media screen and (max-width:767px){
#reasons .list{ margin-top: 7.5%;}
#reasons .list ul{ display: block;}
#reasons .list ul li{ width: 100%; padding: 3.75%; margin-top: 5%;}
#reasons .list ul li h4{ font-size: 1rem;}
#reasons .list ul li h4 strong{ font-size: 1rem;}
#reasons .list ul li h4 i{ font-size: 0.9rem;}
#reasons .list ul li p{ font-size: 0.8rem;}
}



/*trouble*/
#trouble{ background: url("../images/trouble_bg.jpg") center center; background-size: cover; color: #fff;}
#trouble h2 strong:after{ background: #fff;}
#trouble .list{ background: rgba(255,255,255,0.9); padding: 40px; margin: 40px auto; position: relative;}
#trouble .list figure.ill{ position: absolute; right: 40px; bottom: 40px;}
#trouble .list figure.ill img{ height: 240px;}
#trouble .list ul li{ font-size: 1.33rem; line-height: 1.5em; font-weight: bold; color: #001932; padding-left: 1.5em; position: relative; margin-bottom: 0.5em;}
#trouble .list ul li i{ position: absolute; left: 0; top: 0; line-height: 1.5em;}
#trouble h3{ text-align: center; font-size: 1.6rem; text-decoration: underline; margin-bottom: 20px;}
@media screen and (max-width:767px){
#trouble .list{ padding: 5%; margin: 7.5% auto;}
#trouble .list figure.ill{ right: 2.5vw; bottom: 0;}
#trouble .list figure.ill img{ height: 25vw;}
#trouble .list ul li{ font-size: 1rem;}
#trouble h3{ font-size: 1.4rem; margin-bottom: 2.5%;}
}



/*service*/
#service .list{ margin: 40px auto;}
#service .list ul{ display: flex; justify-content: center; gap: 40px;}
#service .list ul li{ width: calc(25% - (120px/4)); background: #e6f0fa; color: #326496; text-align: center; padding: 20px;}
#service .list ul li figure i{ font-size: 3rem;}
#service .list ul li h4{ font-size: 1.2rem; text-decoration: underline; margin-top: 0.5em;}
@media screen and (max-width:767px){
#service .list{ margin: 7.5% auto;}
#service .list ul{ column-gap: 4vw; flex-wrap: wrap;}
#service .list ul li{ width: calc(50% - 2vw); padding: 3.75%;}
#service .list ul li figure i{ font-size: 3rem;}
#service .list ul li h4{ font-size: 1rem;}
#service p{ font-size: 0.8rem;}
}



/*flow*/
#flow{ background: #e6f0fa;}
#flow .list{ margin-top: 40px;}
#flow .list ul li{ padding: 20px; border-bottom: 1px solid #001932; display: flex; align-items: center;}
#flow .list ul li:first-child{ border-top: 1px solid #001932;}
#flow .list ul li span.num{ display: flex; align-items: center; justify-content: center; background: #001932; color: #fff; font-size: 1rem; font-weight: bold; width: 2em; height: 2em; border-radius: 50%; flex-shrink: 0;}
#flow .list ul li h4{ width: 10em; font-size: 1.2rem; margin: 0 1em; flex-shrink: 0; text-align: center;}
@media screen and (max-width:767px){
#flow .list{ margin-top: 7.5%;}
#flow .list ul li{ padding: 3.75% 2.5vw; position: relative; display: block;}
#flow .list ul li span.num{ font-size: 1rem; position: absolute; left: 2.5vw; top: 2.5vw;}
#flow .list ul li h4{ width: 100%; margin: 0; padding-left: 10vw; text-align: left;}
#flow .list ul li p{ margin-top: 3.75%; font-size: 0.8rem;}
}



/*price*/
#price .list{ margin-top: 40px;}
#price .list ul{ display: flex; flex-wrap: wrap; gap: 40px;}
#price .list ul li{ width: calc(50% - 20px); background: #e6f0fa; padding: 20px;}
#price .list ul li h4{ text-align: center; text-decoration: underline; font-size: 1.4rem; line-height: 1em; color: #326496; margin-bottom: 10px;}
#price .list ul li .memo{ background: #fff; padding: 10px; font-size: 0.9rem; font-weight: bold; color: #326496; margin-top: 10px;}
#price .list ul li table{ width: 100%; border-collapse: separate; border-spacing: 8px;}
#price .list ul li table th{ width: 66.66%; vertical-align: middle; background: #326496; color: #fff; padding: 0.25em 0.75em; font-size: 1rem;}
#price .list ul li table td{ width: 33.33%; vertical-align: middle; color: #326496; font-weight: bold; padding: 0; font-size: 1.5rem; text-align: right;}
#price p.att{ text-align: center; margin-top: 40px;}
@media screen and (max-width:767px){
#price .list{ margin-top: 7.5%;}
#price .list ul{ display: block;}
#price .list ul li{ width: 100%; padding: 3.75%; margin-top: 7.5%;}
#price .list ul li h4{ tfont-size: 1.4rem; margin-bottom: 5%;}
#price .list ul li .memo{ padding: 2.5%; font-size: 0.8rem; margin-top: 2.5%;}
#price .list ul li table{ border-collapse: collapse; border-spacing: 0;}
#price .list ul li table th{ display: block; width: 100%; padding: 0.25em 0.75em; font-size: 1rem; text-align: center;}
#price .list ul li table td{ display: block; width: 100%; padding: 0 0.75em 0.5em; font-size: 1.5rem; text-align: center;}
#price .list ul li table tr:last-child td{ padding-bottom: 0;}
#price p.att{ margin-top: 7.5%; font-size: 0.8rem;}
}



/*voice*/
#voice{ background: #e6f0fa;}
#voice .list{ margin-top: 40px;}
#voice .list ul{ display: flex; flex-wrap: wrap; gap: 40px;}
#voice .list ul li{ width: calc(50% - 20px); background: #fff; padding: 20px;}
#voice .list ul li dl dt{ display: flex; align-items: center; margin-bottom: 10px;}
#voice .list ul li dl dt figure{ width: 80px; margin: 0;}
#voice .list ul li dl dt h4{ margin-left: 1em; font-size: 1.2rem; text-decoration: underline;}
#voice .list ul li dl dd p{ font-size: 0.9rem; line-height: 1.5em;}
@media screen and (max-width:767px){
#voice .list{ margin-top: 7.5%;}
#voice .list ul{ display: block;}
#voice .list ul li{ width: 100%; padding: 3.75%; margin-top: 5%;}
#voice .list ul li dl dt{ margin-bottom: 2.5%;}
#voice .list ul li dl dt figure{ width: 10vw}
#voice .list ul li dl dt h4{ margin-left: 1em; font-size: 1rem;}
#voice .list ul li dl dd p{ font-size: 0.8rem;}
}



/*faq*/
#faq .list{ margin-top: 40px;}
#faq .list dl{ padding: 20px; border-bottom: 1px solid #001932;}
#faq .list dl:first-child{ border-top: 1px solid #001932;}
#faq .list dl dt{ position: relative; padding-left: 2.5em; font-size: 1.2rem; font-weight: bold;}
#faq .list dl dt:before{ content: "Q"; display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; background: #001932; color: #fff; position: absolute; left: 0; top: 0; border-radius: 50%;}
#faq .list dl dd{ margin: 20px 20px 0 60px; border-left: 2px dotted #001932; padding-left: 20px;}
@media screen and (max-width:767px){
#faq .list{ margin-top: 7.5%;}
#faq .list dl{ padding: 3.75% 0;}
#faq .list dl dt{ padding-left: 2.5em; font-size: 1rem;}
#faq .list dl dd{ margin: 2.5% 2.5% 0 10vw; font-size: 0.8rem; padding-left: 2.5vw;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}