@charset "utf-8";
/* 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: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:40px;
text-align:left;
color:#575757;
min-width:1000px;
}
@media screen and (max-width:767px){
html,body{ font-size:6vw; 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; height:auto;}
figure.img img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; height:auto;}
@media screen and (max-width:767px){
figure.img img{ border-width: 1.25vw; height:auto;}
}

/*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.5em; margin:0 0 0.2em; padding:0;}
p:last-child{ margin-bottom:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.gothic{ font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}
.yellow{ color: #fff101;}

.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;}



/*ヘッダー*/
body{ padding-top: 90px;}
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 99; background: #fff; width: 100%; min-width: 1000px; padding: 12px; margin: auto; display: flex; align-items: center; justify-content: space-between; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
header h1 img{ height: 66px;}
header nav{ margin: 0 0 0 auto;}
header nav dl{ display: flex;}
header nav dl dd{ margin-left: 16px;}
header nav dl ul{ display: flex;}
header nav dl ul li{ margin-left: 16px;}
header nav dl ul li:first-child{ margin-left: 0;}
header nav dl p{ text-align: center; font-weight: bold; font-size: 0.3rem; line-height: 1.25em; margin-top: 0.5em;}
header nav figure.btn a{ display: flex; align-items: center; justify-content: center; width: 210px; height: 45px; padding: 8px 16px; background: #023047; color: #fff; border-radius: 40px;}
header nav figure.btn.line a{ background: #07b53b;}
@media print, screen and (min-width:768px){
header nav{ display: block !important; opacity: 1.0 !important; height: auto !important;}
#smp_nav_btn{ display: none !important;}
}
@media screen and (max-width:767px){
body{ padding-top: 12.5vw;}
header{ min-width: 100%; padding: 1.25vw;}
header h1{ width: auto; margin: 0;}
header h1 img{ width: auto; height: 10vw;}
header nav{ display: none; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); position: fixed; left: 0; top: 12.5vw; width: 100%; height: 100%; z-index: 99;}
header nav dl{ display: block; width: 90%; margin: auto;}
header nav dl dd{ margin: 0 auto;}
header nav dl ul{ display: block;}
header nav dl ul li{ margin: 10% auto 0;}
header nav dl p{ font-size: 0.75rem;}
header nav figure.btn a{ width: 100%; height: 15vw; padding: 1.25vw 2.5vw; border-radius: 10vw;}
header nav figure.btn a img{ width: 66.66%;}
#smp_nav_btn{ display: none; align-items: flex-end; justify-content: center; padding: 0; width: 10vw; height: 10vw; position: fixed; right:2.5vw; top:1.25vw; z-index:999; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:2px; width:7.5vw; background:#425389; position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); margin:auto; transition:0.3s;}
#smp_nav_btn span:before{ content: ""; display:block; height:2px; width:7.5vw; background:#425389; position:absolute; bottom:1.875vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:2px; width:7.5vw; background:#425389; position:absolute; top:calc(1.875vw + 1px); transition:0.3s;}
#smp_nav_btn.active span{ background:rgba(255,255,255,0);}
#smp_nav_btn.active span:before{ bottom:0; transform: rotate(45deg);}
#smp_nav_btn.active span:after{ top:0; transform: rotate(-45deg);}
}

/*フッター*/
footer{ text-align: center; padding: 20px 0;}
footer p.copyright{ font-size: 0.5rem; font-weight: bold; margin-top: 20px;}
@media screen and (max-width:767px){
footer{ padding: 5% 0;}
footer figure.logo img{ width: 66.66%;}
footer p.copyright{ margin-top: 5%;}
}

body{ padding-bottom: 120px;}
#fixed_btn{ position: fixed; left: 0; right: 0; bottom: 10px; z-index: 50; min-width: 1000px; background: #ffffff29; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#fixed_btn ul{ max-width: 767px; padding: 10px 10px; display: flex; align-items: flex-end; justify-content: center; margin: 0 auto;}
#fixed_btn ul li{ margin: 0 10px;}
@media screen and (max-width:767px){
body{ padding-bottom: 15vw;}
#fixed_btn{ min-width: 1px; width: 100%;}
#fixed_btn ul{ padding: 2.25vw 1.25vw; justify-content: space-between;}
#fixed_btn ul li{ margin: 0;}
#fixed_btn ul li:nth-child(1) img{ height: 15.00vw;padding: 1vw;}
#fixed_btn ul li:nth-child(2) img{ height: 15.00vw;padding: 1vw;}
#fixed_btn ul li.mail a{ display: flex; align-items: center; justify-content: center; width: 14.25vw; padding: 1.25vw;}
#fixed_btn ul li.mail a img{ height: auto; width: 100%;}
}
/* 10秒後に0.5秒かけて"late-open"を実行する */
#fixed_btn {
    animation: late-open 0.5s ease-in 10s forwards;
}

/* late-open = display: block; */
@keyframes late-open {
  to {
    display: block;
  }
}

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

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em;}
h2{ font-size: 0.8rem;}


/*fv*/
#fv{ background: url("../images/fv_bg.png") center center no-repeat; background-size: cover; padding: 10px 0 160px;}
#fv .maincontent{ max-width: 1120px;}
#fv dl{ display: flex; align-items: center; justify-content: space-between;}
#fv dl dt{ width: calc(50% - 20px); margin-right: 20px;}
#fv dl dd{ width: calc(50% - 20px); margin-left: 20px;}
@media screen and (max-width:767px){
#fv{ padding: 1% 0 20%;}
#fv .maincontent{ width: 90%;}
#fv dl{ display: block;}
#fv dl dt{ width: 94%; margin: 0 auto;}
#fv dl dd{ width: 100%; margin: 0;}
}

#fv_camp{ text-align: center; margin-top: -112px;}
#fv_camp .maincontent{ padding: 30px 0; color: #fff; position: relative; z-index: 1;}
#fv_camp .maincontent:after{ content: ""; width: 1920px; height: 100%; background: #000; border-radius: 40px 0 0 40px; position: absolute; left: 0; top: 0; z-index: -1;}
#fv_camp .maincontent:after{ background: linear-gradient(135deg,  #32b7b6 0%,#3581a5 50%,#425389 100%);}
#fv_camp .maincontent h3{ font-size: 1.0rem; margin-bottom: 15px;}
#fv_camp .maincontent p{ font-size: 0.7rem; line-height: 1.5em;}
@media screen and (max-width:767px){
#fv_camp{ margin-top: -10vw;}
#fv_camp .maincontent{ padding: 5%; margin: 0 0 0 auto;}
#fv_camp .maincontent:after{ width: 100vw; border-radius: 5vw 0 0 5vw;}
#fv_camp .maincontent h3{ font-size: 0.9rem; margin-bottom: 7%;}
#fv_camp .maincontent p{ font-size: 0.7rem;}
}



/*cv*/
.cv{ background: url("../images/cv_bg.png") center center no-repeat; background-size: cover; margin: 80px auto; padding: 80px 0;}
.cv h2{ font-size: 1.1rem; line-height: 1.5em; text-align: center; margin-bottom: 40px;}
.cv p.lead{ text-align: center; font-size: 0.7rem; font-weight: bold; line-height: 1.75em; margin-bottom: 40px; text-shadow: 0px 0px 11px #ffffff;}
.cv .cv_box{ background: #fff; padding: 40px 40px 60px; border-radius: 40px; text-align: center;}
.cv .cv_box h3{ text-align: center; font-size: 0.5rem; line-height: 1.75em; color: #e36060; margin-bottom: 40px;}
.cv .cv_box ul{ display: flex; flex-wrap: wrap; width: 660px; margin: -15px auto;}
.cv .cv_box ul li{ width: calc(50% - 60px); margin: 15px 30px;}
.cv .cv_box ul li p{ font-size: 0.3rem; color: #333; margin-top: 0.5em;}
.cv .cv_box ul li:nth-child(1){ width: calc(100% - 60px);}
.cv .cv_box ul li:nth-child(1) p{ font-size: 0.4rem;}
.cv .cv_box ul li figure.btn a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; border-radius: 50px;}
.cv .cv_box ul li.mail figure.btn a{ height: 100px; background: #000;}
.cv .cv_box ul li.mail figure.btn a{ background: linear-gradient(135deg,  #425389 0%,#3581a5 50%,#32b7b6 100%);}
.cv .cv_box ul li.tel figure.btn a{ background: #023047;}
.cv .cv_box ul li.line figure.btn a{ background: #07b53b;}
@media screen and (max-width:767px){
.cv{ margin: 0 auto; padding: 10% 0;}
.cv h2{ margin-bottom: 5%;}
.cv p.lead{ text-align: center; margin-bottom: 7.5%;}

.cv .cv_box{ padding: 5%; border-radius: 1.25vw;}
.cv .cv_box h3{ font-size: 0.7rem; line-height: 1.5em; margin-bottom: 5%;}
.cv .cv_box ul{ width: calc(100% + 5vw); margin: -2.5vw 0 -2.5vw -2.5vw;}
.cv .cv_box ul li{ width: calc(50% - 2.5vw); margin: 2.5vw 1.25vw;}

.cv .cv_box ul li p{ font-size: 0.4rem;}
.cv .cv_box ul li:nth-child(1){ width: calc(100% - 2.5vw);}
.cv .cv_box ul li:nth-child(1) p{ font-size: 0.5rem;}
.cv .cv_box ul li figure.btn a{height: 10vw; border-radius: 10vw; padding: 0 2.5vw;}
.cv .cv_box ul li.mail figure.btn a{ height: 15vw;}
}



/*trouble*/
#trouble{ padding: 120px 0;}
#trouble h2{ text-align: center; margin-bottom: 60px;}
@media screen and (max-width:767px){
#trouble{ padding: 15% 0;}
#trouble h2{ margin-bottom: 7.5%;}
}



/*improve*/
#improve .maincontent{ padding: 60px 0 0; position: relative; z-index: 1;}
#improve .maincontent:after{ content: ""; width: 1920px; height: calc(100% - 60px); background: #000; border-radius: 0 40px 40px 0; position: absolute; right: 40px; top: 0; z-index: -2;}
#improve .maincontent:after{ background: linear-gradient(135deg,  #28a5a5 0%,#3581a5 86%,#377ca5 100%);}
#improve h2{ text-align: center; margin-bottom: 40px;}
#improve figure.ico{ position: absolute; left: -90px; bottom: -160px; z-index: -1;}
@media screen and (max-width:767px){
#improve .maincontent{ padding: 10% 0 0;}
#improve .maincontent:after{ width: 100vw; height: calc(100% - 10vw); border-radius: 0 5vw 5vw 0; right: 0;}
#improve h2{ margin: 0 5% 7.5% 0; padding: 0 7%;}
#improve figure.zu{ width: calc(100% + 5vw);}
#improve figure.ico{ width: 33.33vw; left: -10vw; bottom: -20vw;}
}

#improve_bottom{ text-align: center; margin-top: 80px;}
#improve_bottom .maincontent{ padding: 30px 0; color: #fff; position: relative; z-index: 1;}
#improve_bottom .maincontent:after{ content: ""; width: 1920px; height: 100%; background: #000; border-radius: 40px 0 0 40px; position: absolute; left: 0; top: 0; z-index: -1;}
#improve_bottom .maincontent:after{ background: linear-gradient(135deg,  #32b7b6 0%,#3581a5 50%,#425389 100%);}
#improve_bottom .maincontent p{ font-size: 0.8rem; line-height: 1.25em;}
@media screen and (max-width:767px){
#improve_bottom{ margin-top: 10%;}
#improve_bottom .maincontent{ padding: 5%; margin: 0 0 0 auto;}
#improve_bottom .maincontent:after{ width: 100vw; border-radius: 5vw 0 0 5vw;}
#improve_bottom .maincontent p{ font-size: 0.6rem;}
}



/*reason*/
#reason{ padding: 80px 0 120px; background: url("../images/reason_bg.png") center bottom no-repeat;}
#reason h2{ text-align: center; margin-bottom: 120px;}
#reason ul li{ margin-bottom: 80px;}
#reason ul li:last-child{ margin-bottom: 0;}
#reason ul li:nth-child(2n){ text-align: right;}
@media screen and (max-width:767px){
#reason{ padding: 0 0 15%; background-size: 100%;}
#reason h2{ margin-bottom: 10%;}
#reason ul li{ margin-bottom: 7.5%;}
#reason ul li:nth-child(2n){ text-align: center;}
#reason ul li img{ width: 100%;}
#reason p{font-size: 0.6rem;}
}

#reason_bottom{ padding: 40px 0; background: #000; color:  #fff;}
#reason_bottom{ background: linear-gradient(to right,  #28a5a5 0%,#3581a5 86%,#377ca5 100%);}
#reason_bottom p{font-size: 0.7rem;}
#reason_bottom h3{ text-align: center; font-size: 0.8rem; margin-bottom: 30px;}
#reason_bottom ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: -0.125em auto; width: 750px; font-size: 1.0rem; line-height: 1em; font-weight: bold;}
#reason_bottom ul li{ width:25%; margin: 0.125em 0;}
@media screen and (max-width:767px){
#reason_bottom{ padding: 7.5% 0;}
#reason_bottom h3{ font-size: 0.7rem; margin-bottom: 5%;}
#reason_bottom ul{ margin: -0.25em 0 -0.25em -2.5vw; width: calc(100% + 5vw); text-align: center; font-size: 0.9rem;}
#reason_bottom ul li{ width:25%; margin: 0.25em 0;}
#reason_bottom p{font-size: 0.7rem;}
}



/*result*/
#result_top{ margin-top: 40px;}
@media screen and (max-width:767px){
#result_top{ margin-top: 7.5%;}
}

#result ul li{ background: url("../images/result_bg.png"); background-size: auto 100%; text-align: center;}
@media screen and (max-width:767px){
#result ul li .result_box{ overflow-x: auto; overflow-y: hidden;}
#result ul li .result_box img{ width: 150%; max-width: 150%;}
#result ul li.att{ background: #fff; color: #333; font-size: 0.7rem; padding: 0.5em 0.5em 1.5em;}
}



/*compare*/
#compare{ padding: 80px 0 0;}
#compare h2{ text-align: center; margin-bottom: 60px;}
#compare p{ font-size: 0.7rem; margin-bottom: 60px;}
#compare firegu.zu img{ width: calc(100% + 80px); margin-left: -40px;}
@media screen and (max-width:767px){
#compare{ padding: 15% 0;background: url(../images/cv_bg.png) center center no-repeat;}
#compare h2{ margin-bottom: 7.5%;}
#compare h2 img{ height: auto;}
#compare p{ font-size: 0.7rem; margin-bottom: 7.5%; text-align: justify;}
#compare firegu.zu img{ width: calc(100% + 10vw); margin-left: -5vw;}
}



/*voice*/
#voice h2{ text-align: center; margin-bottom: 60px;}
#voice .voice_list{ background: url("../images/voice_bg.png"); background-size: auto 100%; text-align: center;}
@media screen and (max-width:767px){
#voice h2{ margin-bottom: 7.5%;}
#voice h2 img{ height: auto;}
}



/*company*/
#company{ padding: 80px 0;}
#company h2{ text-align: center; margin-bottom: 60px;}
#company table{ width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 0.5rem;}
#company table th{ width: 200px; padding: 20px 30px; color: #023047; border-bottom: 1px solid #79c4b1;}
#company table td{ padding: 20px 30px; color: #575757; border-bottom: 1px solid #575757;}
@media screen and (max-width:767px){
#company{ padding: 15% 0;}
#company h2{ margin-bottom: 7.5%;}
#company h2 img{ height: 20vw;}
#company table{ font-size: 0.5rem;}
#company table th{ display: block; width: 100%; padding: 5% 2.5% 0; border: none; text-decoration: underline; font-size: 0.6rem;}
#company table td{ display: block; width: 100%; padding: 1.25% 2.5% 5%;}
}



/*contact*/
#contact{ padding: 80px 0;}
#contact h2{ text-align: center; margin-bottom: 60px;}
#contact p.lead{ text-align: center; font-size: 0.7rem;}
@media screen and (max-width:767px){
#contact{ padding: 5% 0;}
#contact h2{ margin-bottom: 7.5%;}
#contact h2 img{ height: 20vw;}
}

/*form_box*/
::placeholder{ color: #aaa;}
::-ms-input-placeholder{ color: #aaa;}
:focus { outline: none;}
input[type=submit], button, select{ -webkit-appearance: none;}
input,textarea,select{ width:100%; padding: 0.5em; font-size: 0.6rem; font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
textarea{ text-align: left; height: 10em; font-weight: normal;}
@media screen and (max-width:767px){
input,textarea,select{ font-size: 0.6rem;}
}

#form table{ width: 100%; border-collapse: separate; border-spacing: 10px; margin: 60px auto; font-size: 0.6rem;}
#form table th{ width: 360px; vertical-align: middle; background: #023047; color: #fff; letter-spacing: 0.1em; padding: 0.1em 0.5em; position: relative;}
#form table th span{ position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-size: 66.66%; background: #fff; color: #023047; padding: 0.1em;}
#form table td{ vertical-align: middle; padding: 0.5em;}
@media screen and (max-width:767px){
#form p.lead{ font-size: 1.25rem;}
#form table{ border-collapse: collapse; border-spacing: 0; margin: 5% auto; font-size: 0.8rem;}
#form table th{ display: block; width: 100%; margin-bottom: 1%;}
#form table td{ display: block; width: 100%; margin-bottom: 1%;}
}

.submit_btn{ text-align: center; margin: 60px auto 0; font-size: 0.6rem;}
.submit_btn p{ margin: 0.5em auto;}
.submit_btn p a{ text-decoration: underline;}
.submit_btn p a:hover{ text-decoration: none;}
.submit_btn button{ display: inline-block; background: #07b53b; color: #fff; font-size: 0.8rem; line-height: 1em; font-weight: bold; padding: 1em 3em; border: none; border-radius: 2em; cursor: pointer;}
@media screen and (max-width:767px){
.submit_btn{ margin: 5% auto 0;}
.submit_btn button{ font-size: 1rem;}
}


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

.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 128px;
}

.keyframe6 {
  animation-name: poyopoyo;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
.line__page__main{
	width: 90%;
	height: auto;
	background: #fff;
	margin: 0 auto;
}
.line__page__title{
	width: 95%;
	height: auto;
	margin: 30px auto 0;
}
.line__page__lr{
	overflow: hidden;
	margin: 30px 0 10px;
}
.line__page__ipgone{
	float: right;
	width: 40%;
	height: auto;
	margin: 0 0 0 auto;
}
.line__page__step{
	float: left;
	width: 53%;
	height: auto;
	margin: 10px auto 10px;
	margin-left: 2%;
}
.line__page__p{
	width: 50%;
	color: #06c755;
	font-weight: bold;
	margin-bottom: 20px;
	margin-left: 5%;
	font-size: 16px;
}
.line__page__btn{
	width: 90%;
	height: auto;
	margin: 30px auto 50px;
}
.line__page__btn img, .line__page__title img, .line__page__ipgone img, .line__page__step img{
	width: 100%;
	height: auto;
}