@charset "utf-8";

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes delayAnimeA{0%{opacity:0;transform:translateY(50px);}100%{opacity:1;transform:translateY(0);}}
@keyframes delayAnimeB{0%{opacity:0;transform:translateX(-100px);}100%{opacity:1;transform:translateX(0);}}

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{animation:fadeIn 1s ease 0s 1 normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

@font-face {  font-family: "nsjpRegular";  src: url("font/NotoSansJP-Regular.woff") format('woff');font-display: swap;}
@font-face {  font-family: "nsjpMedium";  src: url("font/NotoSansJP-Medium.woff") format('woff');font-display: swap;}
.myFontRegular {  font-family: "nsjpRegular";}
.myFontMedium {  font-family: "nsjpMedium";}
body{font:1rem/1.6 "nsjpRegular","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;color:#4d4d4d;animation:fadeIn 2s ease 0s 1 normal; line-height:160%;}

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#4d4d4d;}
a:hover,a:active{color:#4d4d4d;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}

/* ヘッダー
------------------------------------------------------------*/
header{background:#fff;}
header .inner{max-width:1200px;width:100%;margin:0 auto;padding:0;box-sizing:border-box;}
header h1{ max-width:355px; width:100%; float:left; margin-top:34px; margin-bottom:39px;}
header .head_tel{max-width:225px; width:100%; float:right; margin-top:29px; font-size:0.8rem;}
header .head_tel .freedial{ color:#0064aa; font-size:1.6rem; line-height:22px; margin-top:5px; margin-bottom:5px;}
header .head_tel .freedial:before{ content:url(images/icon_tel.jpg); width:22px; height:22px; margin-right:5px;}
/*header .head_tel .freedial:before{ content:url(images/freedial.jpg); width:33px; height:22px; margin-right:5px;}*/

/* グローバルナビゲーション
*****************************************************/
nav#mainNav ul{max-width:510px;width:100%;margin:55px 55px 0;display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:center; float:left;}
nav#mainNav li{width:100%;text-align:center;box-sizing:border-box; height:40px;}
nav#mainNav li a{margin:0 auto;padding:0;display:block;box-sizing:border-box;}
nav#mainNav li a:hover{animation:fadeIn 1s ease 0s 1 normal;}
nav#mainNav li div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:10px;}

.fixedMenu{ position:fixed; top:20px; right:20px; letter-spacing:0.02em; font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; z-index:200;}


div.drawer,.spMenuCenter{display:none;}

/* メイン画像
*****************************************************/
#kv img{width:100%;}

/* 見出し
*****************************************************/

/* コンテンツ
*****************************************************/
#index_blog{ width:100%; background:#fafafa; padding-bottom:64px;}
#index_blog h2{ font-size:1.6rem; padding-top:75px; color:#000; text-align:center; margin-bottom:60px;}
#index_blog h2 div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:20px;}
#index_blog h2 span{ font-size:0.8rem;}
#index_blog ul{ max-width:1200px; width:90%; margin:0 auto; background:#fff; border-radius:10px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); padding:20px; box-sizing:border-box;}
#index_blog ul li{ border-bottom: dotted 1px #CBCBCB; padding-top:20px; padding-bottom:20px;}
#index_blog ul li:last-child{ border-bottom:none;}
#index_blog ul li a{ display:block;}
#index_blog ul li a:hover{ background:#ECECEC;}
#index_blog ul li .blogdate{ width:20%; float:left; padding-left:2%;}
#index_blog ul li .blogdate:before{content:"\025b6"; color:#0064aa; font-size:12px; margin-right:5px;}

#business{ width:100%; background:#fafafa; padding-bottom:64px;}
#business h2{ font-size:1.6rem; padding-top:75px; color:#000; text-align:center; margin-bottom:60px;}
#business h2 div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:20px;}
#business h2 span{ font-size:0.8rem;}
#business .ul_box{ max-width:1200px; width:90%; margin:0 auto;}
#business li{ max-width:380px; width:31.6666%; float:left; margin-right:2.5%; position:relative; height:458px; margin-bottom:35px; background:#fff;}
#business li:nth-child(3n){ margin-right:0;}
#business li img{ margin-bottom:45px;}
#business li .no{ position:absolute; left:167px; top:213px; margin:auto;}
#business li h3{ text-align:center; color:#0064aa; font-size:1.1rem; height:62px; padding-top:10px;}
#business li.li02 h3{height:72px; padding-top:0;}
#business li p{ padding:0 25px; height:75px; font-size:0.95rem;}
#business li a{ position:absolute; top:426px; right:0;}
#business .btn{ max-width:336px; width:100%; height:115px; margin:10px auto 0; clear:both; text-align:center; border-radius:6px;box-shadow:0px 0px 6px 0px #c1c1c1; }
#business .btn a{ color:#0064aa; padding-top:46px; padding-bottom:46px;width:336px;height:23px; display:block;}
#business .btn a:before{content:url(images/business_icon.png); width:23px; height:23px; margin-right:5px; position:relative; top:5px;}
#business .btn a:hover{animation:fadeIn 1s ease 0s 1 normal;}

#recruit{ width:100%; background:url(images/recruit.jpg) no-repeat center center /cover; background-size: cover; padding-bottom:70px; clear:both;}
#recruit h2{ font-size:1.6rem; padding-top:75px; color:#fff; text-align:center; margin-bottom:60px;}
#recruit h2 div{ background:#fcee21; width:37px; height:1px; margin:0 auto; margin-top:20px;}
#recruit h2 span{ font-size:0.8rem;}
#recruit .cts{ max-width:680px; width:100%; margin:0 auto;}
#recruit .cts h3{ color:#fff; font-size:1.4rem; margin-bottom:43px;}
#recruit .btn{max-width:277px; width:100%; height:80px; margin-left:40px; text-align:center; border-radius:80px; border:#fff solid 4px;}
#recruit .btn a{ color:#fff; padding-top:20px; padding-bottom:35px;width:277px;height:30px; display:block;}
#recruit .btn a:before{content:url(images/recruit_icon.png); width:16px; height:30px; margin-right:10px; position:relative; top:5px;}
#recruit .btn a:hover{animation:fadeIn 1s ease 0s 1 normal;}

#contact{ width:100%; background:url(images/contact.jpg) no-repeat center center /cover; background-size: cover; padding-bottom:110px; padding-top:70px; text-align:center;}
#contact h2{ color:#fff; font-size:0.8rem; margin-bottom:20px;}
#contact p{ color:#fff; font-size:1.4rem; margin-bottom:45px;}
#contact ul{ max-width:741px; display:flex; margin:0 auto;}
#contact ul li.li01{ background:#fff; border-radius:6px;box-shadow:0px 0px 3px 0px #000; margin-left:17px; margin-right:17px;}
#contact ul li.li01 a{color:#0064aa; padding-top:46px; padding-bottom:46px;width:336px;height:23px; display:block;}
#contact ul li.li01 a:before{content:url(images/icon_mail02.png); width:22px; height:17px; margin-right:5px; position:relative; top:3px;}
#contact ul li.li01 a:hover{animation:fadeIn 1s ease 0s 1 normal;}
#contact ul li.li02{ background:#fff; border-radius:6px;box-shadow:0px 0px 3px 0px #000; margin-left:17px; margin-right:17px;font-size:0.8rem;}
#contact ul li.li02 a{color:#4d4d4d; padding-top:18px; width:336px;height:23px; display:block;}
#contact ul li.li02 .freedial{ color:#0064aa; font-size:1.6rem; line-height:22px; margin-top:5px; margin-bottom:5px;}
#contact ul li.li02 .freedial:before{ content:url(images/icon_tel.jpg); width:22px; height:22px; margin-right:5px;}*/
/*#contact ul li.li02 .freedial:before{ content:url(images/freedial.jpg); width:33px; height:22px; margin-right:5px;}*/
#contact ul li.li02 a:hover{animation:fadeIn 1s ease 0s 1 normal;}

/*company.html*/
.gaiyo_box { max-width:800px; width:90%; margin:0 auto 50px;}
.gaiyo_box table{ width:100%;}
.gaiyo_box table td{ border-bottom:#A5A5A5 1px solid; padding:15px 10px;display:table-cell;}
.gaiyo_box table td span{ font-weight:bold;}
.gaiyo_box table td.last{ border-bottom:none;}
.gaiyo_box table table td{ padding-left:0;}

/*works*/
#works h2{ font-size:1.6rem; padding-top:75px; color:#000; text-align:center; margin-bottom:60px;}
#works h2 div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:20px;}
#works h2 span{ font-size:0.8rem;}
.works_index{ max-width:800px; width:90%; margin:0 auto; text-align:center;flex-wrap:nowrap;justify-content:space-around;align-items:center; font-size:13px;}
.works_index li {border-radius:5px; border:1px solid #0064aa; margin-bottom:10px;}
.works_index li a{ padding-top:5px; padding-bottom:5px;border-radius:5px; width:100%; display:block; }
.works_index li a:hover{ background:#0064aa; color:#fff;}
.works_index li a:before{ content:"▼"; margin-right:5px; font-size:10px; color:#0064aa;}
.works_index li a:hover:before{color:#fff;}
#works h3{ font-weight:bold;max-width:1000px; width:90%;color:#0064aa; border-bottom:#9F9F9F 2px solid; margin:0 auto 20px; font-size:23px; padding-bottom:10px;clear:both; padding-top:100px;}
.works_ul{ max-width:1000px; width:90%; margin:0 auto; text-align:center; }
.works_ul li{ width:30%; float:left; margin-right:5%; margin-bottom:30px;}
.works_ul li:nth-child(3n){ margin-right:0;}
.works_ul li:nth-child(3n+1){ clear:both;}
#works .last{ clear:both; margin-bottom:100px;}
.works_sub{ max-width:1000px; width:90%; margin:0 auto 50px; background:#F2F2F2; padding:20px 10px;}

/*recruit*/
#recruitpage{ padding-bottom:100px;}
#recruitpage h2{ font-size:1.6rem; padding-top:75px; color:#000; text-align:center; margin-bottom:60px;}
#recruitpage h2 div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:20px;}
#recruitpage h2 span{ font-size:0.8rem;}
#recruitpage h3{ font-weight:bold;max-width:1000px; width:90%;color:#0064aa; border-bottom:#9F9F9F 2px solid; margin:0 auto 20px; font-size:23px; padding-bottom:10px;}
#recruitpage .txt{max-width:1000px; width:90%; margin:0 auto 100px; font-size:14px; text-align:center;}
#recruitpage .txt .copy{ color:#0064aa;font-size:18px; margin-bottom:10px;}
#recruitpage .rec_img{ max-width:400px; width:90%; margin:0 auto 30px;}
#recruitpage .btn{ text-align:center;}
#recruitpage .btn a{ border-radius:5px; border:1px solid #0064aa; padding:10px 40px; font-weight:bold; color:#0064aa;}
#recruitpage .btn a:hover{ background:#0064aa; color:#fff;}
#recruitpage .btn a:before{ content:"》"; margin-right:5px; color:#0064aa;}
#recruitpage .btn a:hover:before{color:#fff;}

/*contact*/
#contact_main{ max-width:800px; width:90%; margin:0 auto;}
#contact_main dl dt,#contact_main dl dd{ margin-bottom:30px; text-align:left;}
#contact_main dl dt{ width:40%; float:left; min-height:34px; font-size:16px; clear:both;}
#contact_main dl dd{ width:60%; float:right;}
#contact_main dl span.hissu{ color:#fff; background:#aa0000; padding:5px 10px; border-radius:3px; line-height:100%; margin-left:15px; font-size:14px;}
#contact_main dl input{width:96%; height:30px; font-size:16px; border-radius:5px; border:#d6d6d6 1px solid;}
#contact_main dl input[type="radio"]{ width:30px;border-radius:0;border:none;vertical-align:middle;}
#contact_main dl dd.naiyo{ vertical-align:middle;}
#contact_main dl textarea{max-width:96%; font-size:16px; border-radius:5px; border:#d6d6d6 1px solid; padding:0 2%;box-sizing:border-box;}
#contact_main #btn{ clear:both; width:100%; text-align:center;}
#contact_main button{border:none; background:#0064aa;border-radius:3px; width:40%; margin:0 auto; color:#fff; font-size:16px; padding:20px 30px;}
.gototop{width:40%; margin:50px auto;}
.gototop a{border:none; background:#0064aa;border-radius:3px;  color:#fff; font-size:16px; padding:10px 30px;}

/* 共通エリア
*****************************************************/


/* フッター
*****************************************************/
footer{padding:32px 0 35px; text-align:center; box-sizing:border-box;font-size:0.9rem; }
footer img{ margin-bottom:25px;}
address{ margin-bottom:55px;}



/* 調整
------------------------------------------------------------*/
@media only screen and (max-width:1280px){
header{ position: relative;}
header .head_tel{ width:30%; float:none; position:absolute; top:0; right:100px;}
#business li .no{ position:absolute; left:85px; top:115px; margin:auto;}
#business li h3,#business li.li02 h3{ height:120px;}
.works_index{ display:block;}
.works_index li{ margin-bottom:20px;}
#contact_main dl dt{ width:100% !important; float:none; font-weight:bold; text-align:center !important; margin-bottom:0;}
#contact_main dl dd{ width:100% !important; float:none;}
}

/* タブレットサイズ
------------------------------------------------------------*/
@media only screen and (max-width:999px){
}

/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
.pcBlock{display:inline;}
img.alignRight,img.alignLeft{display:block;margin:0 auto 10px;float:none;}
div.drawer{display:block;}
nav#mainNav{display:none;}
section{ margin:0;}

.fixedMenu{ display:none;}

header .inner{max-width:1200px;width:100%;margin:0 auto;padding:0;box-sizing:border-box;}
header h1{ width:50%; float:left; margin-top:15px; margin-bottom:15px; margin-left:2%; margin-right:4%;}
header .head_tel{ clear:both; position:static; width:100%; float:none; margin:30px auto; font-size:1rem; line-height:150%;font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; text-align:center;}
header .head_tel .freedial{ color:#0064aa; font-size:1.5rem; line-height:22px; margin-top:5px; margin-bottom:5px;font-family: "nsjpMedium"}
header .head_tel .freedial:before{content: ''; display: inline-block;  width: 22px; height: 22px; background-image: url(images/icon_tel.jpg); background-size: contain; vertical-align: middle; margin-right:2px;}
/*header .head_tel .freedial:before{content: ''; display: inline-block;  width: 17px; height: 11px; background-image: url(images/freedial.jpg); background-size: contain; vertical-align: middle; margin-right:2px;}*/


#index_blog{ padding-bottom:30px;}
#index_blog h2{ font-size:1rem; padding-top:30px; color:#000; text-align:center; margin-bottom:30px;}
#index_blog h2 div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:10px;}
#index_blog h2 span{ font-size:0.5rem;}
#index_blog ul{  padding:10px; }
#index_blog ul li{ padding-top:10px; padding-bottom:10px; font-size:0.8rem;}
#index_blog ul li .blogdate{ width:100%; float:none; padding-left:0;}
#index_blog ul li .blogdate:before{ font-size:0.6rem; margin-right:5px;}

#business{ padding-bottom:30px;}
#business h2{ font-size:1rem; padding-top:30px; color:#000; text-align:center; margin-bottom:30px;}
#business h2 div{ background:#0064aa; width:37px; height:1px; margin:0 auto; margin-top:10px;}
#business h2 span{ font-size:0.5rem;}
#business .ul_box{ width:90%; overflow:hidden; margin:0 auto;}
#business ul{ width:100%;}
#business li{ width:100%; float:none; margin-right:0; position:relative; height:auto; margin-bottom:20px; background:#fff; padding-bottom:30px;}
#business li img{ margin-bottom:30px;}
#business li .no{ position:absolute; left:43%; top:185px; margin:auto;}
#business li h3{ text-align:center; color:#0064aa; font-size:1rem; height:auto; padding-top:10px; padding-bottom:10px;}
#business li.li02 h3{height:auto; padding-top:10px;}
#business li p{ padding:0 10px; height:75px; font-size:0.8rem;}
#business li a{ position:absolute; top:auto; bottom:-30px; right:0;}
#business .btn{ width:90%; height:115px; margin:10px auto 0; clear:both; text-align:center; border-radius:6px;box-shadow:0px 0px 6px 0px #c1c1c1; }
#business .btn a{ color:#0064aa; padding-top:46px; padding-bottom:46px;width:336px;height:23px; display:block;}
#business .btn a:before{content:url(images/business_icon.png); width:23px; height:23px; margin-right:5px; position:relative; top:5px;}
#business .btn a:hover{animation:fadeIn 1s ease 0s 1 normal;}

#recruit{ background:url(images/sp_recruit.jpg) no-repeat center center /cover; padding-bottom:35px;}
#recruit h2{ font-size:1rem; padding-top:30px; color:#fff; text-align:center; margin-bottom:30px;}
#recruit h2 div{ background:#fcee21; width:37px; height:1px; margin:0 auto; margin-top:10px;}
#recruit h2 span{ font-size:0.5rem;}
#recruit .cts{  width:90%; margin:0 auto; text-align:center;}
#recruit .cts h3{ color:#fff; font-size:1rem; margin-bottom:20px;}
#recruit .btn{ width:70%; height:50px; margin:0 auto; text-align:center; border-radius:50px; border:#fff solid 2px; text-align:center;}
#recruit .btn a{ color:#fff; padding-top:15px; padding-bottom:0;width:100%;height:30px; display:block;}


#recruit .btn a:before{content: ''; display: inline-block;  width: 12px; height: 22px; background-image: url(images/recruit_icon.png); background-size: contain; vertical-align: middle; margin-right:4%;top:-2px;}
#recruit .btn a:hover{animation:fadeIn 1s ease 0s 1 normal;}

#contact{  background:url(images/sp_contact.jpg) no-repeat center center /cover; padding-bottom:50px; padding-top:35px;}
#contact h2{ font-size:0.8rem; margin-bottom:10px;}
#contact p{ color:#fff; font-size:1rem; margin-bottom:20px;}
#contact ul{ width:90%; display:flex; margin:0 auto;}
#contact ul li{ width:100%;}
#contact ul li.li01{ background:#fff; border-radius:6px;box-shadow:0px 0px 3px 0px #000; margin-left:1%; margin-right:1%; font-size:0.8rem;}
#contact ul li.li01 a{color:#0064aa; padding-top:20px; padding-bottom:20px;width:100%;height:23px; display:block;}
#contact ul li.li01 a:before{content: ''; display: inline-block;  width: 14px; height: 11px; background-image: url(images/icon_mail02.png); background-size: contain; vertical-align: middle; margin-right:2px;top:0;}
#contact ul li.li01 a:hover{animation:fadeIn 1s ease 0s 1 normal;}
#contact ul li.li02{ background:#fff; border-radius:6px;box-shadow:0px 0px 3px 0px #000; margin-left:1%; margin-right:1%;font-size:0.3rem; line-height:50%;font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; }
#contact ul li.li02 a{color:#4d4d4d; padding-top:10px; width:100%;height:23px; display:block;}
#contact ul li.li02 .freedial{ color:#0064aa; font-size:0.9rem; line-height:22px; margin-top:5px; margin-bottom:5px;font-family: "nsjpMedium"}
#contact ul li.li02 .freedial:before{content: ''; display: inline-block;  width: 17px; height: 11px; background-image: url(images/freedial.jpg); background-size: contain; vertical-align: middle; margin-right:2px;}
#contact ul li.li02 a:hover{animation:none;}

footer{font-size:0.7rem;}
footer img{ width:70%; margin-left:15%; margin-right:15%; margin-bottom:15px;}
address{ margin-bottom:15px;}

/*company.html*/
.gaiyo_box table{ width:100%; font-size:14px;}
.gaiyo_box table td.pcDisp{ display:none;}
.gaiyo_box table td{ width:100%; text-align:center;}
.gaiyo_box table td div{ width:100%; text-align:center; font-weight:bold; font-size:16px; margin-bottom:10px;}
.gaiyo_box table table td{ width:70%; text-align:left;}
.gaiyo_box table table td.spdate{ width:30%; text-align:left; font-weight:bold;}
.gaiyo_box table .alignLeft{ text-align:left; font-weight:normal !important; font-size:14px !important;}

#works,.works_ul li{ font-size:14px;}
#works h3{ padding-top:50px;}

#recruitpage h3{ font-size:18px;}
#contact_main button{ width:80%;}
.gototop{width:80%;}
}