@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100;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: "Noto Sans", 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
font-weight: 500;
text-align:left;
color:#333;
min-width:1200px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.2vw; 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;}

/*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.66em; 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:#333;}
.gy{ color:#aaa;}

.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: 85px;}
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 99; background: #fff; width: 100%; min-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 0;}
header figure.logo{ margin: 0;}
header figure.logo img{ height: 85px; position: relative; opacity: 0; top: -85px; transition: 1.0s;}
header.active figure.logo img{ opacity: 1.0; top: 0;}

header nav{ margin: 0 0 0 auto;}
header nav ul{ display: flex; align-items: center; justify-content: flex-end; margin-right: 20px;}
header nav ul li{ margin: 0 0 0 30px; font-size: 0.9rem; line-height: 1em; font-weight: bold;}
header nav ul li a{ padding-bottom: 0.25em; position: relative;}
header nav ul li a:after{ content: ""; width: 0; height: 2px; background: #0366CB; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.3s;}
header nav ul li a:hover:after{ width: 100%;}
header nav ul li.contact a{ display: flex; align-items: center; justify-content: center; width: 120px; height: 42.5px; padding-bottom: 0.125em; background: #0366CB; color: #fff; transition: 0.3s;}
header nav ul li.contact a:after{ display: none;}
header nav ul li.contact a:hover{ opacity: 0.7;}
@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%;}
header figure.logo{ margin: 0;}
header figure.logo img{ height: 12.5vw; top: -12.5vw;}

header nav{ display: none; position: fixed; left: 0; right: 0; top: 12.5vw; /*display: flex;*/ align-items: flex-start; justify-content: center; width: 100%; background: rgba(255,255,255,1.0); overflow-x: hidden; overflow-y: auto;}
header nav{ min-height: 100dvh !important;}
header nav ul{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 1.5rem; margin: 0.75em 0; width: 88%;}
header nav ul li{ margin: 0.75em auto; font-size: 1.5rem; width: 100%; text-align: center;}
header nav ul li.contact a{ width: 100%; height: 12.5vw;}

#smp_nav_btn{ display: flex; align-items: flex-end; justify-content: center; padding: 0; width: 12.5vw; height: 12.5vw; position: fixed; right:1.25vw; top:0; z-index:999; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:2px; width:7.5vw; background:#000; 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:#000; position:absolute; bottom:1.875vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:2px; width:7.5vw; background:#000; 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{ background: #2A2A2A; color: #fff; padding: 80px 0 50px; text-align: center;}
footer figure.logo{ margin-bottom: 50px;}
footer figure.logo img{ height: 76px;}
footer p{ font-size: 1rem;}
footer figure.btn{ margin: 30px auto; display: flex; align-items: center; justify-content: center;}
footer figure.btn a{ display: flex; align-items: center; justify-content: center; background: #0366CB; color: #fff; width: 360px; height: 60px; padding: 20px 30px; font-size: 1rem; font-weight: bold; position: relative; transition: 0.3s;}
footer figure.btn a:after{ content: ""; width: 30px; height: 15px; background: url("../images/btn_arrow.png") center center; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
footer figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
footer{ padding: 10% 0 5%;}
footer figure.logo{ margin-bottom: 5%;}
footer figure.logo img{ height: 10vw;}
footer p{ font-size: 1rem;}

footer figure.btn a{ width: 60vw; height: 12.5vw; padding: 3.75% 7.5%; font-size: 1rem;}
footer figure.btn a:after{ width: 5vw; height: 2.5vw; right: 3.75vw;}
}

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

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em;}
.tit{ position: relative; z-index: 1;}
.tit strong.num{ position: absolute; left: -0.25em; top: -0.75em; z-index: -1; font-size: 8.4rem; color: #D3E9FF;}
.tit h2{ font-size: 1.9rem; margin-bottom: 0.25em;}
@media screen and (max-width:767px){
.tit strong.num{ left: -0.25em; top: -0.66em; font-size: 6rem;}
.tit h2{ font-size: 1.8rem; margin-bottom: 0.5em;}
}

/*txt*/
p.txt{ font-size: 0.9rem; font-weight: bold;}
@media screen and (max-width:767px){
p.txt{ font-size: 0.9rem;}
}


/*fv*/
#fv{ background: url("../images/fv_bg.jpg") center center no-repeat; background-size: cover;}
#fv dl{ display: flex; justify-content: space-between; width: 100%; height: 480px;}
#fv dl dt{ width: 50%; display: flex; align-items: center;}
#fv dl dd{ display: flex; flex-direction: column; justify-content: center;}
#fv dl dd h1{ font-size: 2.4rem; color: #004AAD;}
@media screen and (max-width:767px){
#fv dl{ display: block; height: auto; padding: 15% 0;}
#fv dl dt{ width: 100%; display: flex; align-items: center; margin: 0 auto 10%;}
#fv dl dd h1{ font-size: 2.4rem; margin-bottom: 5%;}
}



/*sec01*/
#sec01{ padding: 180px 0 120px;}
#sec01 figure.zu img{ width: 1040px;}
#sec01 p.att{ font-size: 0.9rem; font-weight: bold;}
@media screen and (max-width:767px){
#sec01{ padding: 20% 0 15%;}
#sec01 figure.zu img{ width: 100%;}
#sec01 p.att{ font-size: 0.9rem;}
}



/*sec02*/
#sec02{ background: #F8F8F8; padding: 150px 0 90px;}
#sec02 .list{ margin-top: 60px;}
#sec02 .list ul{ display: flex; width: calc(100% + 30px); margin-left: -30px;}
#sec02 .list ul li{ width: calc(33.33% - 30px); margin: 0 15px; background: #fff;}
#sec02 .list ul li a{ display: block; transition: 0.3s;}
#sec02 .list ul li a:hover{ opacity: 0.7;}
#sec02 .list ul li dl dd{ padding: 40px 30px; position: relative;}
#sec02 .list ul li dl dd .cat{ position: absolute; left: 0; top: -1em; display: flex; align-items: center; justify-content: center; background: #0366CB; color: #fff; padding: 0.33em 1.5em; font-size: 0.9rem; font-weight: bold;}
#sec02 .list ul li dl dd h4{ font-size: 1.1rem; margin-bottom: 0.5em;}
#sec02 .list ul li dl dd p{ font-size: 0.9rem; text-align: justify;}
@media screen and (max-width:767px){
#sec02{ padding: 20% 0 10%;}
#sec02 .list{ margin-top: 10%;}
#sec02 .list ul{ display: block; width: 100%; margin: 0;}
#sec02 .list ul li{ width: 100%; margin: 10% auto 0;}
#sec02 .list ul li dl dd{ padding: 7.5% 5% 5%;}
#sec02 .list ul li dl dd .cat{ font-size: 0.9rem;}
#sec02 .list ul li dl dd h4{ font-size: 1.1rem;}
#sec02 .list ul li dl dd p{ font-size: 0.9rem;}
}



/*sec03*/
#sec03{ background: #F8F8F8; padding: 150px 0 90px;}
#sec03 figure.zu{ margin: 60px auto;}
#sec03 .list{ margin-top: 60px;}
#sec03 .list ul{ display: flex; width: calc(100% + 30px); margin-left: -30px;}
#sec03 .list ul li{ width: calc(33.33% - 30px); margin: 0 15px; background: #fff;}
#sec03 .list ul li dl dd{ padding: 40px 30px; position: relative;}
#sec03 .list ul li dl dd h4{ font-size: 1.1rem; margin-bottom: 0.5em;}
#sec03 .list ul li dl dd p{ font-size: 0.9rem; text-align: justify;}
@media screen and (max-width:767px){
#sec03{ padding: 20% 0 10%;}
#sec03 figure.zu{ margin: 10% auto;}
#sec03 .list{ margin-top: 10%;}
#sec03 .list ul{ display: block; width: 100%; margin: 0;}
#sec03 .list ul li{ width: 100%; margin: 10% auto 0;}
#sec03 .list ul li dl dd{ padding: 5%;}
#sec03 .list ul li dl dd h4{ font-size: 1.1rem;}
#sec03 .list ul li dl dd p{ font-size: 0.9rem;}
}



/*sec04*/
#sec04{ padding: 150px 0 90px;}
#sec04 dl{ display: flex; justify-content: space-between; margin: 60px auto 0;}
#sec04 dl dt{ width: 650px;}
#sec04 dl dd{ width: calc(100% - 650px); padding-left: 50px;}
#sec04 dl dd img{ max-width: 570px;}
#sec04 dl dt h3{ font-size: 1.4rem; padding-left: 20px; margin-bottom: 25px; position: relative;}
#sec04 dl dt h3:before{ content: ""; width: 6px; height: 1em; background: #0366CB; position: absolute; left: 0; top: 0.125em;}
#sec04 dl dt p{ font-size: 0.9rem;}
#sec04 dl dt .box{ background: #EAF4FF; padding: 40px; margin: 40px auto;}
#sec04 dl dt .box h4{ font-size: 1rem; color: #0366CB; margin-bottom: 0.75em;}
@media screen and (max-width:767px){
#sec04{ padding: 20% 0 10%;}
#sec04 dl{ display: flex; flex-direction: column-reverse; margin: 10% auto 0;}
#sec04 dl dt{ width: 100%;}
#sec04 dl dd{ width: 100%; padding: 0; margin-bottom: 10%; text-align: center;}
#sec04 dl dd img{ max-width: 100%; width: 75%;}
#sec04 dl dt h3{ font-size: 1.4rem; padding-left: 3.75vw; margin-bottom: 5%;}
#sec04 dl dt h3:before{ width: 1.25vw;}
#sec04 dl dt p{ font-size: 0.9rem;}
#sec04 dl dt .box{ padding: 5%; margin: 7.5% auto;}
#sec04 dl dt .box h4{ font-size: 1rem;}
}



/*sec05*/
#sec05{ padding: 150px 0 90px;}
#sec05 dl{ display: flex; justify-content: space-between; margin: 60px auto 0;}
#sec05 dl dt{ width: 650px;}
#sec05 dl dd{ width: calc(100% - 650px); padding-left: 50px;}
#sec05 dl dd img{ max-width: 570px;}
#sec05 dl dt h3{ font-size: 1.4rem; padding-left: 20px; margin-bottom: 25px; position: relative;}
#sec05 dl dt h3:before{ content: ""; width: 6px; height: 1em; background: #0366CB; position: absolute; left: 0; top: 0.125em;}
#sec05 dl dt p{ font-size: 0.9rem;}
#sec05 dl dt .box{ background: #EAF4FF; padding: 40px; margin: 40px auto;}
#sec05 dl dt .box h4{ font-size: 1rem; color: #0366CB; margin-bottom: 0.75em;}
#sec05 dl dt .list{ margin-top: 40px;}
#sec05 dl dt .list h5{ font-size: 1rem;}
#sec05 dl dt .list ul{ font-size: 0.9rem;}
#sec05 dl dt .list ul li{ padding-left: 1em; margin-top: 0.5em; position: relative;}
#sec05 dl dt .list ul li:before{ content: ""; width: 8px; height: 8px; background: #0366CB; position: absolute; left: 0; top: 0.5em;}
#sec05 .col2_img{ display: flex; justify-content: space-between; margin-top: 40px;}
#sec05 .col2_img figure{ width: calc(50% - 15px); margin: 0;}
@media screen and (max-width:767px){
#sec05{ padding: 20% 0 10%;}
#sec05 dl{ display: flex; flex-direction: column-reverse; margin: 10% auto 0;}
#sec05 dl dt{ width: 100%;}
#sec05 dl dd{ width: 100%; padding: 0; margin-bottom: 10%; text-align: center;}
#sec05 dl dd img{ max-width: 100%; width: 75%;}
#sec05 dl dt h3{ font-size: 1.4rem; padding-left: 3.75vw; margin-bottom: 5%;}
#sec05 dl dt h3:before{ width: 1.25vw;}
#sec05 dl dt p{ font-size: 0.9rem;}
#sec05 dl dt .box{ padding: 5%; margin: 7.5% auto;}
#sec05 dl dt .box h4{ font-size: 1rem;}
#sec05 dl dt .list{ margin-top: 7.5%;}
#sec05 dl dt .list h5{ font-size: 1rem;}
#sec05 dl dt .list ul{ font-size: 0.9rem;}
#sec05 dl dt .list ul li:before{ width: 1.875vw; height: 1.875vw;}
#sec05 .col2_img{ margin-top: 7.5%;}
#sec05 .col2_img figure{ width: calc(50% - 2.5vw);}
}



/*cases*/
#cases{ background: #F8F8F8; padding: 100px 0;}
#cases h3{ text-align: center; font-size: 1.9rem; margin-bottom: 60px;}
#cases .list{ margin-top: 60px;}
#cases .list ul{ display: flex; width: calc(100% + 30px); margin-left: -30px;}
#cases .list ul li{ width: calc(33.33% - 30px); margin: 0 15px; background: #fff;}
#cases .list ul li dl dd{ padding: 40px 30px; position: relative;}
#cases .list ul li dl dd .cat{ position: absolute; left: 0; top: -1em;; display: flex; align-items: center; justify-content: center; background: #0366CB; color: #fff; padding: 0.33em 1.5em; font-size: 0.9rem; font-weight: bold;}
#cases .list ul li dl dd h4{ font-size: 1.1rem; margin-bottom: 0.5em;}
#cases .list ul li dl dd p{ font-size: 0.9rem; text-align: justify;}
@media screen and (max-width:767px){
#cases{ padding: 15% 0;}
#cases h3{ font-size: 1.9rem; margin-bottom: 10%;}
#cases .list{ margin-top: 10%;}
#cases .list ul{ display: block; width: 100%; margin: 0;}
#cases .list ul li{ width: 100%; margin: 10% auto 0;}
#cases .list ul li dl dd{ padding: 7.5% 5% 5%;}
#cases .list ul li dl dd .cat{ font-size: 0.9rem;}
#cases .list ul li dl dd h4{ font-size: 1.1rem;}
#cases .list ul li dl dd p{ font-size: 0.9rem;}
}



/*cv*/
#cv{ padding: 100px 0;}
#cv .maincontent{ background: #F8F8F8; padding: 70px 50px;}
#cv h2{ text-align: center; font-size: 1.9rem; margin-bottom: 40px;}
#cv p{ text-align: center; font-size: 0.9rem;}
#cv figure.btn{ display: flex; align-items: center; justify-content: center;}
#cv figure.btn a{ display: flex; align-items: center; justify-content: flex-start; background: #0366CB; color: #fff; width: 360px; height: 64px; padding: 20px 30px; font-size: 1rem; font-weight: bold; position: relative; transition: 0.3s;}
#cv figure.btn a:after{ content: ""; width: 30px; height: 15px; background: url("../images/btn_arrow.png") center center; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
#cv figure.btn a:hover{ opacity: 0.7;}

#cv .cv_in{ background: #fff; margin-top: 70px; padding: 50px; border-radius: 10px;}
#cv .cv_in h3{ font-size: 1.4rem; padding-left: 20px; margin-bottom: 25px; position: relative;}
#cv .cv_in h3:before{ content: ""; width: 6px; height: 1em; background: #0366CB; position: absolute; left: 0; top: 0.125em;}
#cv .cv_in figure.zu{ margin: 40px auto;}
#cv .cv_in .list{ margin-top: 40px;}
#cv .cv_in .list h5{ font-size: 1rem;}
#cv .cv_in .list ul{ font-size: 0.9rem;}
#cv .cv_in .list ul li{ padding-left: 1em; margin-top: 0.5em; position: relative;}
#cv .cv_in .list ul li:before{ content: ""; width: 8px; height: 8px; background: #0366CB; position: absolute; left: 0; top: 0.5em;}
@media screen and (max-width:767px){
#cv{ padding: 15% 0;}
#cv .maincontent{ padding: 7.5% 5%;}
#cv h2{ font-size: 1.9rem; margin-bottom: 7.5%;}
#cv p{ font-size: 0.9rem; text-align: justify;}
#cv figure.btn a{ width: 60vw; height: 12.5vw; padding: 3.75% 7.5%; font-size: 1rem;}
#cv figure.btn a:after{ width: 5vw; height: 2.5vw; right: 3.75vw;}

#cv .cv_in{ margin-top: 15%; padding: 7.5% 5%; border-radius: 1.25vw;}
#cv .cv_in h3{ font-size: 1.4rem; padding-left: 3.75vw; margin-bottom: 5%;}
#cv .cv_in h3:before{ width: 1.25vw;}
#cv .cv_in figure.zu{ margin: 7.5% auto;}
#cv .cv_in .list{ margin-top: 7.5%;}
#cv .cv_in .list h5{ font-size: 1rem;}
#cv .cv_in .list ul{ font-size: 0.9rem;}
#cv .cv_in .list ul li:before{ width: 1.875vw; height: 1.875vw;}
}



/*contact_modal*/
.contact_btn{ cursor: pointer;}
#contact_modal{ display: none;}
#contact_modal{ /*display: block;*/ width: 100%; height: 100%; padding: 40px 20px; overflow: auto; position: fixed; left: 0; top: 0; z-index: 9999;}
#contact_modal_bg{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; background: rgba(0,0,0,0.75); cursor: pointer;}
#contact_modal_in{ overflow-x: hidden; overflow-y: auto; margin: auto; background: #fff; border-radius: 20px; width: 1160px; height: 100%; padding: 40px; position: relative; z-index: 1;}
#contact_modal_in2{ background: #fff; width: 100%; margin: auto; border-radius: 20px; position: relative;}
#contact_modal_in .close{ display: block; width: 36px; height: 36px; position: absolute; top: 0; right: -18px; cursor: pointer;}
#contact_modal_in .close:before, 
#contact_modal_in .close:after{ content: " "; display: block; width: 100%; height: 2px; background-color: #0366CB; position: absolute; top: 0; left: 0;}
#contact_modal_in .close:before{ transform: rotate(45deg);}
#contact_modal_in .close:after{ transform: rotate(-45deg);}

#contact_modal_in h2{ font-size: 1.4rem; color: #0366CB; margin-bottom: 1em;}
#contact_modal_in ul li{ font-size: 0.9rem; line-height: 1.66em; margin-bottom: 1em; padding-left: 1.25em; position: relative;}
#contact_modal_in ul li:before{ content: "・"; position: absolute; left: 0; top: 0; color: #0366CB;}
#contact_modal_in ul li ol{ margin-top: 1em;}
#contact_modal_in ul li ol li{ padding-left: 1.5em; position: relative;}
#contact_modal_in ul li ol li:before{ display: none;}
#contact_modal_in ul li ol li span{ font-weight: bold; line-height: 1.66em; position: absolute; left: 0; top: 0; color: #0366CB;}
#contact_modal_in p{ font-size: 0.9rem; line-height: 1.66em; margin: 0;}
#contact_modal_in a{ color: #0366CB; text-decoration: underline;}
#contact_modal_in a:hover{ text-decoration: none;}
#contact_modal_in figure.contact_modal_btn{ display: flex; align-items: center; justify-content: center; margin-top: 40px;}
#contact_modal_in figure.contact_modal_btn a{ text-decoration: none; display: flex; align-items: center; justify-content: flex-start; padding: 0.5em 2.5em 0.5em 0.25em; border-bottom: 1px solid #0366CB; position: relative; transition: 0.3s;}
#contact_modal_in figure.contact_modal_btn a i{ position: absolute; right: 0.75em; top: 50%; transform: translateY(-50%); transition: 0.3s;}
#contact_modal_in figure.contact_modal_btn a:hover{ opacity: 0.7;}
#contact_modal_in figure.contact_modal_btn a:hover i{ right: 0.25em;}
@media screen and (max-width:767px){
#contact_modal{ /*display: block;*/ padding: 5% 3.75%;}
#contact_modal_in{ width: 100%; padding: 5%;}
#contact_modal_in2{ width: 100%; border-radius: 2.5vw;}
#contact_modal_in .close{ width: 7.5vw; height: 7.5vw; top: 3.75vw; right: -3.75vw;}

#contact_modal_in h2{ font-size: 1.4rem;}
#contact_modal_in ul li{ font-size: 0.9rem;}
#contact_modal_in p{ font-size: 0.9rem;}
#contact_modal_in figure.contact_modal_btn{ margin-top: 5%;}
}




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