@charset "UTF-8";
/********************************/
/* トップ　*/
/********************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

img{width:100%; height:auto;}
::before, ::after {box-sizing: border-box;}
body {width:100%;font-family: "Noto Sans JP", serif, "Yu Gothic","游ゴシック",YuGothic,"游ゴシック体",sans-serif,"Hiragino Kaku Gothic Pro W6","ヒラギノ角ゴ Pro W6","Osaka","ＭＳ Ｐゴシック"; font-weight:400;background-attachment:fixed;background:#fff;padding:0;margin:0;vertical-align: middle;height:100%;text-align:center;line-height:165%;}

.box-fadein img {
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
}
.box-fadein.lazyloaded img.lazyloaded {
  opacity: 1;
}


#mainback{ position:relative;height: auto;background: url(../img/mainback.jpg) no-repeat top center; background-size: cover; padding-top:47.3%;}
header{width:100%;margin:0 auto; padding:20px 0 10px; background:rgba(43,89,140, 0.7);overflow:hidden;position: fixed;top: 0;left: 0;z-index:1;}
.menulogo{max-width:197px; float:left; margin:0; padding: 0 0 0 3%;}
ul.hmenu{ width:70%;display:flex; justify-content:  flex-end; margin:0 auto; padding:0; float:right;}
ul.hmenu li{text-align:center; list-style:none;color:#000; font-size:1.2rem; padding:0 15px; line-height:110%; font-weight:300;}
ul.hmenu li a{color:#fff; text-decoration:none;vertical-align: -webkit-baseline-middle;}
ul.hmenu li a:hover{ opacity:0.5;}
ul.hmenu li.htoi img{ display:block; vertical-align:top;}

#mainback .maintex{position: absolute;bottom:14%;left:5%;margin:0 auto;padding:0; text-align:left;text-shadow:0 0 10px #001833;z-index: 10;}
#mainback .maintex p{font-size:7.2vw; color:#fff; line-height:120%;text-shadow:#001833 1px 1px 10px, #001833 -1px 1px 10px, #000 1px -1px 10px, #001833 -1px -1px 10px; font-weight:800;}
#mainback .maintex p.psub{font-size:2.7vw; color:#e3f9ff; opacity:0.8; font-style:italic; font-weight:normal; padding:2% 0 0;text-shadow:none;}

#wrapper{width:100%;margin:0px auto; padding:0;text-align:center; box-sizing:border-box;}
#wrapper2{width:100%;margin:0px auto; padding:2% 0 0;text-align:center; box-sizing:border-box;}
/********************************/
/* コンテンツ　*/
/********************************/

/********ご挨拶************/
#c1{ width:100%; display:flex;margin:8% auto 8%; padding:0;align-items: center;}
.abimg{ width:44%;height:auto; margin:0; padding:0;}
.abtexbox{ width:46%; margin:0 auto; padding:1% 5% 0;background:url(../img/abback.png) no-repeat;background-position: top center;background-size: contain;}
.abtexbox p{text-align:left; color:#000; line-height:150%; padding:3% 0 0; font-size:18px;}
#c1 h2{font-size:80px; color: #2092cc; font-weight:700; line-height:120%; text-align:left; margin:0 auto 3%; padding:0;}
.hjp{ display:block; font-size:28px; font-weight:800; text-align:left; opacity:0.7; padding:0; line-height:100%;}
.icon0{ max-width:70px; height:auto; margin:0; padding:0 0 10px;}
/********サービス************/
#c2{ width:90%;margin:0 auto 6%; padding:0; overflow:hidden;}
#c2 h2{font-size:80px; color: #2092cc; font-weight:700; line-height:130%; text-align:left; margin:0 auto 3%; padding:0}
ul.toku{width:100%; margin:0 auto; padding:0;}
ul.toku li{ list-style:none; margin:0 auto; padding:0;}
ul.halfbox, ul.halfbox2{width:100%; display:flex;flex-wrap:wrap; margin:0 auto 8%; padding:0;align-items: stretch;}
ul.halfbox li, ul.halfbox2 li{width:46%;list-style:none;}

ul.halfbox li.svback{width:54%;background:url(../img/serviceback.png) no-repeat;background-position: top center;}
ul.halfbox2 li.svback{width:54%;background:url(../img/serviceback.png) no-repeat;background-position: top center;}

ul.halfbox li h3{font-size:3.6vw;text-align:left; color:#282828; line-height:140%; padding:2% 5% 5% 0;}
ul.halfbox2 li h3{font-size:3.6vw;text-align:left; color:#282828; line-height:140%; padding:2% 0% 5% 5%;}
ul.halfbox li p{width:90%; color:#000; margin:0; padding:10px; text-align:left; font-size:18px; line-height:160%;}
ul.halfbox2 li p{width:90%; color:#000; margin:0; padding:10px 10px 10px 50px; text-align:left; font-size:18px; line-height:160%;}

.numita{font-size:4.0vw; color:#2092cc; font-weight:700; font-style:italic;}

/********採用情報************/
#c3{ width:100%; display:flex;margin:0 auto 8%; padding:0; overflow:hidden;}
#c3 h2{font-size:80px; color: #fff; font-weight:700; line-height:120%; text-align:left; margin:0 auto 3%; padding:0;}
.hjp2{ display:block; font-size:28px; font-weight:800; text-align:left; opacity:0.7; padding:0; line-height:100%;}
.rcrimg{ width:50%;height:auto; margin:0; padding:0;display: flex;}
.rcrimg img{width:100%; height:100%;}
.rcrbox{ width:40%; background:#2092cc; margin:0 auto; padding:3% 5% 3%;}
.rcrbox p{text-align:left; color:#fff; line-height:150%; padding:3% 0 0; font-size:18px;}
.rcrbox .rcicon{ max-width:78px; height:auto; margin:0; padding:0 0 10px; opacity:0.8;}
/********事務所案内・アクセス************/
#ac{max-width:1060px;margin:0 auto 6%; padding:0; overflow:hidden;}
#ac h2{font-size:80px; color: #2092cc; font-weight:700; line-height:130%; text-align:center; margin:0 auto 5%; padding:0}
.hjp3{ display:block; font-size:28px; font-weight:800; text-align:center; opacity:0.7; padding:0; line-height:100%;}
#ac table{ width:90%; display:table;border-collapse:collapse;box-sizing: border-box;line-height: 1.8;text-align: left; margin:0 auto 5%; padding:0 5%;}
#ac table tr{border-bottom: 1px solid #545454;}
#ac table tr th{width:30%;display: table-cell; padding:25px 15px 25px 0;}
#ac table tr td{display: table-cell;padding: 25px 0;}
.acbox{width:90%; margin:0 auto; padding:0 5%;}
.map{ width:100%;height:100%; margin:0 auto 2%;position:relative;padding-top:46%; }
.map iframe{width:100%;height:100%;position:absolute;top:0;left:0;}
#ac h3{font-size:42px; color: #515151;font-weight:700; line-height:130%; text-align:center; margin:0 auto 2%; padding:0 0 10px;}
.hjp4{ display:block; font-size:21px; font-weight:800; text-align:center; opacity:0.7; padding:0 0 10px; line-height:150%;}
.icon{ max-width:78px; height:auto; margin:0 auto; padding:0 0 10px;}
/********top問い合わせ************/
#toptoi{width:90%;margin:0 auto; padding:0; background:url(../img/toiback.jpg) no-repeat; position:relative;height: auto; background-size: cover; padding:3% 5% 5%; overflow:hidden;}
#toptoi h2{font-size:80px; color: #fff; font-weight:700; line-height:100%; text-align:center; margin:0 auto 3%; padding:0;text-shadow:#001833 1px 1px 5px, #001833 -1px 1px 5px, #000 1px -1px 5px, #001833 -1px -1px 5px;}
.hjp5{ display:block; font-size:32px; color:#fff; font-weight:800; text-align:center;padding:0 0 10px; line-height:150%;}
ul.telmail{width:85%; display:flex; margin:0 auto; padding:0;flex-wrap: wrap;}
ul.telmail li{ width:44%; list-style:none; margin:0; padding:0 3%;}
ul.telmail li:last-child img{width:90%; height:auto;}
ul.telmail li a:hover{ opacity:0.9;}
#toptoi p{text-align:center; color:#fff; line-height:150%; padding:0 0 2%; font-size:21px;font-weight:700;text-shadow:#001833 1px 1px 5px, #001833 -1px 1px 5px, #000 1px -1px 5px, #001833 -1px -1px 5px;}
/********************************/
/* フッタ　*/
/********************************/
footer{ width:100%; background: #2092cc;padding:3% 0 2%;clear:both;margin:0px auto;}
ul.fmbox{max-width:830px;margin:0 auto 3%; padding:0; display:flex;overflow:hidden;}
ul.fmbox li{ width:20%;list-style:none; text-align:center; padding:0; font-size:21px;line-height: 100%;}
ul.fmbox li a{color:#fff; text-decoration:none;vertical-align: -webkit-baseline-middle;}
ul.fmbox li a:hover{ opacity:0.5;}
.flogo{ max-width:197px;margin:0 auto; padding:0;}
p.ad{ clear:both;color:#fff;text-align:center;font-size:14px;}
.f12{font-size:12px;}
p.ftel{color:#fff;text-align:center;font-size:16px; padding-bottom:2%;}
p.ftel a{ text-decoration:none; color:#fff;}
p.ftexlogo{color:#fff;text-align:center;font-size:21px; font-weight:700; padding-bottom:1%;}
/********************************/
/* form　*/
/********************************/
#container {max-width:1200px;margin:0 auto 5%; padding:0;}
#container h2{font-size:80px; color: #2092cc; font-weight:700; line-height:130%; text-align: center; margin:0 auto 3%; padding:0}
#contents{font-family: "Noto Sans JP", sans-serif;max-width:960px;margin: 0 auto;padding:0 0 5%;}
#contents p{ font-size:18px; font-weight:normal; text-align:left; line-height:150%; padding:20px; margin:2% auto 0; text-align:left;}
form#mailformpro dl {width:92%;margin:0 auto 3vh;}
form#mailformpro dl dd, form#mailformpro dl dt {font-size:1rem}
form#mailformpro dl dt {width:30%;text-align:left;padding:1.5rem 0}
form#mailformpro dl dt .must {float:right}
form#mailformpro dl dd {padding:1.5rem 0;padding-left:35%}
div.mfp_buttons button {font-size:calc(1.325rem + .6vw)}
.mfp_element_button, .mfp_element_reset, .mfp_element_submit, .submit_btn {border-radius:12px;padding:5px 1.5rem;border:none;background:0 0;background-color:#222;text-shadow:none;font-size:calc(1.325rem + .6vw);cursor:pointer;
outline:0;color:#fff}
.mfp_element_button:hover, .mfp_element_reset:hover, .mfp_element_submit:hover, button.mfp_next:hover, button.mfp_prev:hover {background:#e51717;-webkit-box-shadow:none;box-shadow:none}
.mfp_achroma, .mfp_colored {background:0 0}
form#mailformpro dl dt {border-top: none;}
.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password {padding: 18px 12px;margin: 2px;}
p.formsyouhin{ width:50%; height:auto;}
div.mfp_buttons button {display: block;text-align: center;text-decoration: none;width: 50%;margin: auto;padding: 1rem;font-weight: bold;border-radius: 100vh;border-bottom: 7px solid #af0000;background: #e51717;color: #fff;}
div.mfp_buttons button:hover {margin-top: 6px;border-bottom: 1px solid #af0000;color: #fff;}
/********************************/
/* thanks　*/
/********************************/
#thanksbox{max-width:960px; margin:3% auto; padding:0;font-family: "Noto Sans JP", sans-serif;}
h2.h2tks{ width:100%; background: #2092cc; padding:20px 0; font-size:32px; text-align:center; color:#fff;}
.totoppage{width:60%; color:#FFF; margin:40px auto 40px; padding:20px; background:#333; text-align:center; border-radius:6px;}
.totoppage a{color:#fff;}
div.mfp_thanks p {line-height: 1.7;font-size: 18px; text-align:left;}

/********************************/
/* パンくず　*/
/********************************/
#pank{max-width:960px; margin:0 auto; padding:0;}
#pank ol{width:100%; display:flex; margin:0; padding:0;}
#pank ol li{ list-style:none; font-size:14px; text-align:left;color:#333; padding:0 0 0 10px;}
#pank ol li a{text-decoration:none;color:#333;}
/********************************/
/* 草食　*/
/********************************/
.rbl{font-size:24px;color:#CC0000;font-weight:700;background:#FF9;}
.blb{color: #03C;font-weight:700;}
.bl{color: #003399;}
.rb{font-weight:700;color:#ff0000;}
.rr{color: #CC0000;}
.bb{font-weight:700;color: #000000;}
.wb{font-weight:700;color: #FFF;}
.fb{font-weight:700;}
.yb{font-weight:700;color: #ffe400;}
.greenbold{font-weight:700;color: #006600;}
.tal{text-align:right;}
.db{display:block;}

.totop{position: fixed;bottom: 16px;right: 16px;}
.totop img{width:70%; height:auto;}
.totop a{display: block;text-decoration: none;}
.totop:hover{opacity: 0.85 ;}

.brsp {display:none;}
.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width:1200px) {
	#mainback {padding-top:65%;}
	.abtexbox p, ul.halfbox li p {font-size: 16px;}
}

@media only screen and (max-width:1000px) {
	#mainback {padding-top:85%;}
}

@media screen and (min-width:1025px) {
  .mfp_element_button, .mfp_element_reset, .mfp_element_submit, .submit_btn {font-size:1.75rem}
}

@media only screen and (max-width: 840px) {
.pc { display: none !important; }
.sp { display: block !important; line-height:0; }

#mainback {padding-top:91%;}
h1.menulogo{max-width:none; width:25%;}
#mainback .maintex p{font-size: 11.2vw;}
#mainback .maintex p.psub{font-size:4.4vw;}

#c1 { display:block; margin-bottom:12%;}
.abimg { width:90%; margin: 0 auto 3%;}
.abtexbox {width: 85%;}
#c1 h2, #c2 h2, #c3 h2, #toptoi h2, #container h2, #ac h2{font-size: 10.8vw;}
.abtexbox p, ul.halfbox li p {font-size: 18px;}
ul.toku li {margin: 0 auto 8%;}
ul.halfbox, ul.halfbox2{ width:100%;justify-content: center;}
ul.halfbox li, ul.halfbox2 li{width:90%; margin:0 auto 2%;}
ul.halfbox li h3, ul.halfbox2 li h3{ font-size:5.8vw;padding: 1% 2% 3%;}
ul.halfbox li p, ul.halfbox2 li p{padding:10px;}
ul.halfbox :nth-child(1) { order: 2; }
ul.halfbox :nth-child(2) { order: 1; }
ul.halfbox li.svback, ul.halfbox2 li.svback{width: 100%;padding-bottom: 3%;}
.numita {font-size: 6.0vw;}
#c3 {margin: 0 auto 12%;}
.rcrbox {width: 90%; background: none;margin: 0 auto;position: absolute;padding:13% 5%;}
.rcrimg {width: 100%;}
.rcrbox p { font-size:21px}
.hjp1, .hjp2, .hjp3, .hjp5{font-size:3.8vw;}
#ac h3 {font-size: 5.2vw;}
ul.telmail li { width:100%;padding: 0 0 5%;}
#toptoi {background: url(../img/sp_toiback.jpg) no-repeat top center; background-size: cover; padding-top:10%;}
.map {width: 90%;}
ul.telmail li:last-child img {
    width: 90%;
    height: auto;
    box-shadow: 0 0 10px #001430;
}
.icon{ max-width:none; width:8%;}
.rcicon{ max-width:none; width:8%;}
.icon0{ max-width:none; width:8%;}

footer {padding: 5%; width:90%;}
ul.fmbox { display:none;}
.brsp {display: block;}

#container {max-width:none; width:100%;}
form#mailformpro dl dt {font-size: 1.6rem;}
.must {padding: 10px;font-size: 16px; margin:0 10px 0 5px;}
div.mfp_buttons button {width: 65%;padding: 20px 10px;}
/* 以下ハンバーガーメニュー */
#wrapper {position: relative;left: 0;transition: left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); /* ドロワーメニューと同じ設定にしておく */}
#check_input:checked ~ #wrapper {left: -80%;}
/* input非表示 */
#check_input {display: none;}
/* ハンバーガーボタン */
#menu_btn {position: fixed;top: 10px;right: 10px;height:60px;width: 60px;display: flex;justify-content: center;align-items: center;z-index: 100;background-color: #2092cc;cursor: pointer;}
/* 三本線*/
#menu_btn span,
#menu_btn span::before,
#menu_btn span::after {content: "";display: block;position: absolute; height: 3px; width: 25px;border-radius: 3px;background-color: #fff;transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
#menu_btn span::before { bottom: 8px;}
#menu_btn span::after {top: 8px;}
/* クリックされたら三本線が×に変化する */
#check_input:checked ~ #menu_btn span {background-color: transparent; }
#check_input:checked ~ #menu_btn span::before { bottom: 0; transform: rotate(45deg);}
#check_input:checked ~ #menu_btn span::after {top: 0;transform: rotate(-45deg);}
/* ドロワーメニュー */
#menu_cont {position: fixed;top: 0;left: 100%;width: 80%;height: 100%;background-color: #2092cc;opacity:0.9;z-index: 90;transition: left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
/* ドロワーメニュー外の背景 */
#drawer_back {display: none;position: fixed; top: 0;left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 80;opacity: 0.5;}
/* メニューリストの装飾 */
#menu_cont ul {padding: 10% 10% 0}
#menu_cont ul li {list-style: none;}
#menu_cont ul li a {display: block; width: 100%;padding:30px 10px;margin: 30px auto;color:#fff;text-decoration: none;font-size:28px;}
#menu_cont ul li a:hover {opacity: 0.7;}
/* クリックされたらドロワーメニュー表示 */
#check_input:checked ~ #menu_cont {left: 20%;}
#check_input:checked ~ #drawer_back {display: block;}

form#mailformpro dl dd,form#mailformpro dl dt { width:100%}
  form#mailformpro dl dt {padding-top:1rem}
  form#mailformpro dl dt .must {float:none;display:inline-block}
  form#mailformpro dl dd {padding:.5rem 1rem 1rem}
p.ad {font-size: 16px;}

#thanksbox{max-width:none;width:100%;}

.fs21{font-size:18px;}
/* 
.footbana {display:block; width: 100%;position: fixed; bottom: 0;z-index: 99;}
.footbana_back {display:block; background-color: rgba(0,0,0,0.5);width: 100%;height: auto; padding:5px 0;position: relative;z-index: 98;}
.footbana_back ul{margin:0 auto; padding:0; display:flex;justify-content: center;}
.footbana_back ul li{width:90%; list-style:none;}
.footbana_back img{display:block; height:150px !important;}
footer {margin-bottom:150px;}
*/
}




@media screen and (max-width:599px) {
  form#mailformpro dl dd, form#mailformpro dl dt {border:none;}
  form#mailformpro dl dt {border:none;}
   form#mailformpro dl dd {padding:.5rem .3rem 1.5rem}
}

@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important;}

#mainback {padding-top: 115%;}
h1.menulogo {max-width: none;width: 30%;}
.hjp{font-size:5.2vw;}
.hjp1, .hjp2, .hjp3, .hjp5{font-size:5.2vw;}
.abtexbox p {font-size: 16px;}
ul.halfbox li p, ul.halfbox2 li p {font-size: 16px;}
.abimg {width: 100%;}
#c1 h2, #c2 h2, #c3 h2, #toptoi h2, #container h2, #ac h2{font-size: 12.0vw;}
#toptoi p {font-size: 18px;}
.rcrbox p {font-size: 16px;text-shadow: #001833 1px 1px 5px, #001833 -1px 1px 5px, #000 1px -1px 5px, #001833 -1px -1px 5px;}
.rcrbox {padding: 10% 5%;}

#c2 { margin-bottom:0;}
#c3{margin:0 auto 15%;}
#c3 h2{text-shadow: #001833 1px 1px 5px, #001833 -1px 1px 5px, #000 1px -1px 5px, #001833 -1px -1px 5px;}
.numita {font-size: 7.0vw;}
ul.halfbox li, ul.halfbox2 li {width: 94%;}
ul.halfbox li h3, ul.halfbox2 li h3 {font-size:7.0vw;}
ul.halfbox li p, ul.halfbox2 li p {font-size: 16px;}
ul.halfbox li h3, ul.halfbox2 li h3 {padding: 5% 2% 3%;}
#ac h3 {font-size: 28px;}
#toptoi h2 {margin: 0 auto 7%;}
ul.telmail {width: 90%;flex-wrap: wrap;}
ul.telmail li { max-width: none;margin: 0  auto;padding:3% 0; width:100%;}
#toptoi {padding-bottom: 8%;}

#ac table {width: 90%;display: block;margin: 0 auto 5%;padding: 0 5%;}
#ac table tr th{width:100%;display: block; padding:10px 0 0;}
#ac table tr td{display: block; width:100%; padding: 10px 0;}
#ac h3 {font-size: 28px;padding: 0px 0 10px;}
#ac p {font-size: 16px;}
.fs16 {font-size: 14px;}
.map {padding-top: 60%;}
.icon{ max-width:none; width:12%; padding:0 0 5px;}
.rcicon{ max-width:none; width:12%; padding:0;}
.icon0{ max-width:none; width:12%;padding:0 0 5px;}

footer { width:100%;padding: 8% 0;}
p.ftexlogo {font-size: 18px;padding-bottom: 3%;}
.flogo {max-width: none; width:40%;}
p.ftel {font-size: 14px;}

a.resbtn {width: 85%; padding: 1.7rem 1rem;font-size: 21px;}
#contents p {font-size: 16px; margin:0 auto; text-align:left;}
#container {padding-top: 15px;}

p.ad {font-size: 12px;}

.totop {opacity: 0.85 ;bottom: 12px; right:12px; text-align:right;}
.totop img{width:55%; height:auto;}

form#mailformpro dl dt{font-size: 1.2rem;}
.must {padding: 6px;font-size: 14px;margin: 0 10px 0 5px;}
div.mfp_buttons button {width: 85%;}
form#mailformpro dl {width: 92%;margin: 0 auto 1vh;}
form#mailformpro dl dt {padding-bottom:0.5rem;}

table.mailform tr td ol li.syou img {width: 70%;}
table.mailform tr td ul li {float: none;padding: 0px 0px 10px 0px;}
div.mfp_buttons ul {width:100%;height: auto;}
div.mfp_buttons ul li {width: 100%;height: auto;float: none;}
div#confirmBody {width: 100% !important;left: 0px !important;margin: 0 auto;}
/*
.footbana {display:block; width: 100%;position: fixed; bottom: 0;z-index: 99;}
.footbana_back {display:block; background-color: rgba(0,0,0,0.5);width: 100%;height: auto; padding:5px 0;position: relative;z-index: 98;}
.footbana_back ul{margin:0 auto; padding:0; display:flex;justify-content: center;}
.footbana_back ul li{width:90%; list-style:none;}
.footbana_back img{display:block; height:80px !important;}
footer {margin-bottom: 80px;}
*/
#menu_btn {position: fixed;top: 10px;right: 10px;height: 40px;width: 40px; display: flex; justify-content: center;align-items: center;z-index: 100;cursor: pointer;}
#menu_cont ul li a {display: block;width: 100%; color:#fff; text-decoration: none;font-size:21px; padding: 20px 10px;margin: 20px auto;}
h2.h2tks{ width:100%; background: #036; padding:20px 0; font-size:26px; text-align:center; color:#fff;}
div.mfp_thanks p {line-height: 1.7em;font-size: 14px;}
}