@charset "utf-8";

/* CSS Document */

html {
	overflow-y: scroll;
}

/**************************************/
/***************全体共通***************/

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    font-size:90%;
	margin: 0px;
	background-color: #fff;
	color: #666;
    min-width:960px;
    height: 100%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
    max-width: 100%;
}
/**************************************/
/*************文字フォント*************/

h1 {
	font-size: 1.4rem;
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #3c90ef;
	height: 48px;
    line-height:48px;
	padding-left: 25px;
    border-bottom:solid 1px #ccc;
    background-color: #FEFFEB;
}

h2 {
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #cccccc;
	font-size: 1.2rem;
	line-height: 1.6em;
	padding-top: 5px;
	padding-left: 15px;
	padding-bottom: 5px;
    margin-bottom:8px;
}

h3 {
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #3c90ef;
	padding-left: 20px;
    height: 48px;
    line-height: 48px;
    border-bottom:solid 1px #ccc;
    color:#3c90ef;
}
h3.subTitle {
	border-left:none;
    margin-bottom:8px;
    }
h4.companyName {
    font-size: 16px;
    color:#3c90ef;
    margin-bottom: 8px;
}
p {
	line-height: 150%;
}

/*テキスト　センター揃え*/
.alignCenter {
	text-align: center;
}

/*テキスト　コンテンツ　ノーマル*/
.txtNml {
	margin: 0px;
	padding: 3px;
	line-height: 200%;
}

/*テキスト　コンテンツ　Bold*/
.txtBold {
	font-weight: bold;
}

/*テキスト　コンテンツ　br*/
.txtBr {
	margin: 0px;
	padding: 0px;
	line-height: 120%;
}

/*テキスト　レッド*/
.txtRed {
	color: #ff0000;
	font-weight: bold;
}

/*テキスト　■　ピンク→ブルー　20201125*/
.txtPk {
	color: #66b2e1;
	font-weight: bold;
	line-height: 200%;
}

/*ライン　ピンク*/
.linePk {
	background-color: #FFCCCC;
}

/*ライン文字づめ*/
.txt-kerning {
    font-feature-settings: 'palt' on;
}
/**************************************/
/***************フォントサイズ***************/

.f-big {
    font-size: 1.6rem;
}
.f-medium {
    font-size: 1.2rem; 
}
/**************************************/
/***************マージン***************/

.mb-15 {
    margin-bottom:15px;
}

.mb-30 {
    margin-bottom:30px;
}

.ml-15 {
    margin-left:15px;
}

.ml-30 {
    margin-left:30px;
}

/**************************************/
/***************テーブル***************/

.margEnough {
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
}

.margEnough th,
.margEnough td{
    padding:16px 0;
}
.margEnough th {
    text-align: center;
    vertical-align: top;
}

.recruit-table th {
    width:120px;
}
.recruit-table th,
.recruit-table td{
    padding:8px 0;
}
/**************************************/
/****************リンク****************/

a:link {
	color: #3399FF;
}

a:hover {
	color: #3366CC;
}

a:visited {
	color: #3366CC;
}
a.btnWorks {
    background-color: #3c90ef;
    color:#fff;
    text-decoration: none;
    display: inline-block;
    padding:8px 12px;
    margin-bottom:32px;
}
a.btnWorks:hover {
    background-color: #3399ff;
}
/**************************************/
/************画像************/

img {
	border: none;
vertical-align:bottom;
    
}

.alRight {
	text-align: right;
	margin-right: 5px;
}

.img-thumbnail {
    max-width:100%;
    width:100%;
    height:auto;
}
/**************************************/
/***************表示非表示***************/



@media (max-width: 767px){
    .pc-only {
        display: none;
    }
}


/**************************************/
/************ラッパーエリア************/


/**************************************/
/************ヘッダーエリア************/
#logoArea {
	width: 960px;
    margin:0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -js-display: flex;
    padding:10px 0;
    background-color: #fff;
    align-items: center;
}
#logoArea .logo {
    width:60%;
}
#logoArea .logo img {
    vertical-align: middle;
}
#logoArea .tel {
    width:40%;
    text-align: right;
}
#logoArea .tel ul li {
    display: inline-block;
    font-size:0.75rem;
    margin-left:8px;
}
#logoArea .tel ul li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    color:#3c90ef;
    font-weight: 900;
    margin-right:8px;
}
#logoArea .tel ul li a {
    text-decoration: none;
}
#logoArea .tel ul li a:hover {
    color: #66b2e1;
    text-decoration: underline;
}
#logoArea .tel .telNum {
    margin-top:4px;
}
#logoArea .tel .telNum div {
    display: inline-block;
    font-size:0.75rem;
    padding-top:4px;
}
#logoArea .tel .telNum span.phone {
    background-color: #3c90ef;
    color:#fff;
    text-decoration: none;
    font-size:1.4rem;
    font-weight: bold;
    display: inline-block;
    padding:2px 16px;
    border-radius: 32px;
    vertical-align:top;
}
#logoArea .tel .telNum span.phone i {
    margin-right:8px;
}
/**************************************/
/*****ナビゲーションメニューエリア*****/

#header #naviMenu {
	text-align: center;
    border-bottom:solid 1px #ccc ;
}
#header #naviMenu .gNav {
    width:960px;
    margin:0 auto;
    letter-spacing: -.4em;
    padding: 24px 0 ;
}
#header #naviMenu .gNav li {
    display: inline-block;
    letter-spacing: normal;

}
#header #naviMenu .gNav li a {
    width:224px;

    text-align: center;
    display: block;
    font-weight: bold;
    color:#3c90ef;
    text-decoration: none;
    border-right:solid 1px #3c90ef;
}
#header #naviMenu .gNav li:first-child a {
    width:64px;
    border-left:solid 1px #3c90ef;
} 
#header #naviMenu .gNav li:first-child i {
    font-size: 1.3em;
    color:#3c90ef;
    vertical-align: sub;
}
#header #naviMenu .gNav li a:hover,
#header #naviMenu .gNav li:first-child i:hover,
#header #naviMenu .gNav li a.active{
    color:#000;
}
#header #naviMenu .gNav li .spOnly {
    display: none;
}

/**************************************/
/**************レイアウトエリア*************/

#wrapper {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction:row-reverse;
    justify-content: space-between;
}
#mainWrap {

}
.allContent {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#mainText {
	width: 630px;
    background-color: #fff;
    border: solid 1px #ccc;
    margin-top: 20px;
}
#mainText {
	width: 630px;
    background-color: #fff;
    box-shadow: 1px 1px 3px 0px #ccc;
}

#mainText ul {
	margin: 0;
	padding: 20px;
}

#mainText li {
	padding-bottom: 7px;
	padding-left: 14px;
}
#mainText li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 900;
    margin-right:8px;
    color:#3c90ef;
}
#mainText dl {
	padding: 20px;
}

#mainText dt {
	padding-bottom: 7px;
}
#mainText dt:before {
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 900;
    margin-right: 8px;
    color: #3c90ef;
}
#mainText dd {
	padding-bottom: 15px;
}
#mail_form dt:before {
    content: '';
    margin-right: 0px;
}
#mail_form li:before {
    content: '';
    margin-right:0px;
}
#mainText .contactTab li:before {
    content: '';
    margin-right:0px;
}
#mainText .contactTab {
    margin: 40px 0;
    padding: 0;
}
#mainText .contactTab li {
    padding-left: 0;
}
/**************************************/
/*************トップ・スライダーエリア**************/

.top-slider {
    margin-bottom: 60px;
}

/**************************************/
/*************トップ・メインビジュアル**************/

.mainVisual {
    
    height: 600px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content:center;

    color: #000;
    gap: 40px;
    background-size: cover;
    position: relative;
}
.mainVisual-animate {
    opacity: 1;
}
.mainVisual__inner {
    text-align: left;
}
.mainVisual__title {
    font-size: 40px;
    background-color: transparent;
    border-bottom: none;
    border-left: none;
    padding-left: 0;
    margin-bottom: 20px;

    overflow: hidden;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mainVisual__title span {
    display: block;
    transform: translate(100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.mainVisual__title.-visible,
.mainVisual__title.-visible span {
  transform: translate(0, 0);
}
.mainVisual__txt {
    font-size: 24px;
    margin-bottom: 20px;

    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.mainVisual__txt span {
    display: block;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  }
  .mainVisual__txt.-visible,
  .mainVisual__txt.-visible span {
    transform: translateY(0);
}
.mainVisual__img {
    position: relative;
    width: 600px;
    height: 432px;

}
.mainVisual__fade {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}
.visible {
    opacity: 1;
}

/**************************************/
/*********トップ・サービスラインナップ**********/

.mainService_wrap {
    background-color: #f5f5f5;
    padding: 80px 0;
}
#mainSarvice {
	width: 960px;
	text-align: center;

}
#mainSarvice h2 {
    border-left:none;
    padding-top: 5px;
    padding-left: 0;
    padding-bottom: 5px;
    font-size: 1.6rem;
    color:#3c90ef;;
    margin-bottom:16px;
}
#mainSarvice div.mainSarviceWrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -js-display: flex;
}
#mainSarvice div.mainSarviceWrap div {
    width:31.5%;
    margin-bottom: 25px;
}
#mainSarvice div.mainSarviceWrap div.middle {
    margin-right:2.75%;
    margin-left:2.75%;
}
#mainSarvice div.mainSarviceWrap .photo {
    display: block;
    margin-bottom: 15px;
}
#mainSarvice div.mainSarviceWrap div a.service {
    color:#333;
    font-size: 1.2rem;
    display: block;
    text-decoration: none;
    line-height: 40px;
}
#mainSarvice div.mainSarviceWrap div a.service:after {
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    font-weight: 900;
    margin-left:8px;
}
#mainSarvice div.mainSarviceWrap div a.service:hover {
    color:#3c90ef;
}
#mainSarvice div.mainSarviceWrap p {

    padding:16px;
}
/**************************************/
/********トップ・BOSについて********/

.mainMessage {
    background-color: #FEFFE9;
    padding: 80px 0;
    margin-bottom: 80px;
}

.mainMessage .allContent {
    position: relative;
}

.mainMessage__title {
    border-left:none;
    padding-top: 5px;
    padding-left: 0;
    padding-bottom: 5px;
    font-size: 1.6rem;
    color:#3c90ef;
    margin-bottom:16px;
}
.mainMessage__list {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.mainMessage__list li {
    margin-bottom: 10px;
    text-indent: -24px;
    padding-left: 24px;
}
.mainMessage__list li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f14a';
    font-weight: 900;
    margin-right:8px;

}
.mainMessage__txt {
    width: 480px;
    margin-bottom: 40px;
}
.mainMessage__img {
    position: absolute;
    bottom: 0;
    right:0;
}
.mainMessage__img img {
    width: 420px;
    height: auto;
}
.mainMessage__btn {
    display: inline-block;
    padding: 20px 60px;
    background-color: #fff;  
    border: solid 1px #3c90ef;
    text-decoration: none;
}
.mainMessage__btn:hover {
    background-color: #3c90ef;
    color: #fff;
}

/**************************************/
/*********トップ・新着・会社情報*********/

.mainInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 80px;
}
.mainInfo__inner {
    width: 45%;
}
.mainInfo__title {
    border-left:none;
    padding-top: 5px;
    padding-left: 0;
    padding-bottom: 5px;
    font-size: 1.6rem;
    color:#3c90ef;;
    margin-bottom:16px;
    text-align: center;
}
.mainInfo__news {
    border-top: 1px solid #ccc;
}
.mainInfo__newsitem {
    padding: 20px;
    border-bottom: 1px solid #ccc;
}
.mainInfo__name {
    border-top: 1px solid #ccc;
    padding: 20px;
    font-weight: bold;
    font-size: 1.2rem;
}
.mainInfo__company {
    padding: 0 20px 20px;
    border-bottom: 1px solid #ccc;
}
.mainInfo__privacy {
    text-align: right;
}
.mainInfo__marc {
    width: 70px;  
}
.mainInfo__conmanyitem {

}

#massege {
	width: 550px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	padding: 15px;
	background-color: #e6eff5;
}

/**************************************/
/********pagetopエリア********/


#pageTop {
    width: 960px;
    margin: 40px auto 0;
    text-align: right;
}
#pageTop a {
    background-color: #3c90ef;
    color:#fff;
    text-decoration: none;
    padding:8px 12px;
    display: inline-block;
    font-size:0.8rem;
}
#pageTop a:hover {
    background-color: #66b2e1;
    }




/**************************************/
/************ボックス************/

.box1{
	padding: 24px;
}

/**************************************/
/************ニュースエリア************/

/**************************************/
/****サイドメニューコンテンツエリア****/

#sideMenuContent {
	margin-top: 20px;
	padding-bottom: 20px;
	width: 300px;
}

#sideMenuContent p {
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 0;
	margin-left: 0;
}
#assistMenu {
	margin-bottom: 5px;
}
#assistMenu h3 {
    margin-bottom:8px;
    height: 48px;
    border-bottom: solid 1px #ccc;
}
#assistMenu img {
	margin: 0;
	padding: 0;
} 
#assistMenu li a {
    display: block;
    text-align: center;
    color:#fff;
    background-color: #66b2e1;
    margin-bottom:1px;
    height:48px;
    line-height: 48px;
    text-decoration: none;
}
#assistMenu li a:hover ,
#assistMenu li a.active {
    background-color: #3c90ef;
}


/**************************************/
/************フッターエリア************/
footer {
    border-top:solid 3px #3c90ef;
    background-color: #fff;
}

div#footer {
	width: 960px;
    margin:0 auto;
	padding: 40px 0;
	color: #999999;
	text-align: center;
}
div#footer ul {
    margin-bottom:16px;
}
div#footer li {
    display: inline-block;
}
div#footer li:first-child:before {
    content: "|";
    margin-right:4px;
}
div#footer li:after {
    content: "|";
    margin-left:4px;
}
#footer a {
    text-decoration: none;
}

#footer a:hover {
	color: #66b2e1;
    text-decoration: underline;
}
#footer .copyRight {
    font-size:0.7rem;
}

/**************************************/
/************フロートクリア用************/
.cleaner {
	font-size: 0px;
	line-height: 0px;
	height: 0px;
	clear: both;
}

/**************************************/
/************slicknav************/
.slicknav_menu {
    display:none;
}
/**************************************/
/***********スマホレスポンシブ**********/

@media (max-width: 767px){
    body{
        min-width:initial;
    }
    h1 {
        margin-bottom:24px;
    	font-size: 1.2rem;
    }
    #wrapper {
        width: 100%;
        padding: 0 20px;
    }
    #header {
        width:100%;
    }
    #logoArea {
        width: 100%;
        padding:4px 0 0;
    }
    #logoArea .logo {
        width:300px;
        padding:8px;
        z-index: 999;
    }
    #logoArea .tel {
        width:100%;
        padding:8px;
        text-align: center;
        background-color: #3c90ef;
    }
    #logoArea .tel ul,
    #logoArea .tel .telNum div{
        display: none;
    }
    #logoArea .tel .telNum {
        margin-top: 0px;
    }
    #logoArea .tel .telNum span.phone {
        background-color: #fff;
        color: #3c90ef;
        font-size: 1.6rem;
        font-weight: bold;
        display: inline-block;
        padding: 4px 24px;
        border-radius: 32px;
        box-shadow: 1px 1px 4px 0px #3366CC;
    }
    #logoArea .tel .telNum span.phone a {
        color: #3c90ef;
        text-decoration: none;
    }
    #mainWrap {
        padding:16px 16px 0;
        background-image: none;
        background: #fff;
    }
    .allContent {
        width: 100%;
        padding: 15px;
    }
    .top-slider {
        width: 100%;
        margin-top:0;
        margin-bottom:16px;
    }
    .mainVisual {
        padding-top: 20px;
        display: block;
        height: 400px;
    }

    .mainVisual__inner {
        text-align: center;
    }
    .mainVisual__title {
        font-size: 24px;  
        margin-bottom: 5px;
    }
    .mainVisual__txt {
        font-size: 18px;
    }
    .mainVisual__img {
        position: relative;
        width: 320px;
        height: 230px;
        margin: 0 auto 20px;  
    }
    .mainService_wrap {
        padding: 40px 0;
    }
    #mainSarvice {
        width: 100%;
        margin-bottom: 40px;
    }
    #mainSarvice div.mainSarviceWrap p {
        display: none;
    }
    #mainSarvice div.mainSarviceWrap div {
        width:100%;
        margin-bottom: 0;
    }
    #mainSarvice div.mainSarviceWrap div.middle {
        margin-right:0%;
        margin-left:0%;

    }
    #mainSarvice div.mainSarviceWrap span.spWrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom:8px;
    }
    #mainSarvice div.mainSarviceWrap span.photo {
        width:30%;
        margin-bottom: 0;
    }
    #mainSarvice div.mainSarviceWrap div a.service {
        width:70%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        justify-content: center;
        background-color: #3c90ef;
        color: #fff;
    }
    #mainSarvice div.mainSarviceWrap div a.service :hover {
        background-color: #5ca9da;
    }
    .mainMessage {
        padding: 40px 0;
        margin-bottom: 40px;
    }
    .mainMessage__title {
        text-align: center;
    }
    .mainMessage__txt {
        width: 100%;
    }
    .mainMessage__txt br {
        display: none;
    }
    .mainMessage__list {
        font-size: 1.0rem;
    }
    .mainMessage__img {
        position:static;
        margin-bottom: 30px;
    }
    .mainMessage__more {
        text-align: center;
    }
    #mainContent {
        float: none;
        width: 100%;
    }
    #mainText {
        width: 100%;
        box-shadow: none;
        border: none;
    }
    #mainText ul {
        padding: 12px;
    }
    .mainInfo__name {
        font-size: 1.0rem;
    }
    .mainInfo__inner {
        width: 100%;
        margin-bottom: 20px;
    }
    #sideMenuContent {
        width: 100%;
        float: none;
    }
    #massege {
        width: 100%;
    }
    .box1 {
        padding: 8px;
        margin-bottom: 16px;
    }
    .margEnough {
        width:100%;
    }
    .margEnough th,
    .margEnough td{
        padding:8px;
    }
    .sp-table {
        width:100%;
    }
    .sp-table th,
    .sp-table td {
        width: 100%;
        display: block;
        border-top: none; 
        padding:8px;
        }
    .sp-table th {
        text-align: center;
        background-color: #efefef;
    }
    div#footer {
        width: 100%;
    }
    #header .logo img {
        width:300px;
        height:auto;
    }
    #header #naviMenu .gNav li .spOnly {
        display: block;
    }
    footer {
        background-color: #e6eff5;
        padding:16px;
    }    
    div#footer {
        padding: 20px 0;
        margin-bottom: 0px;
    }
    div#footer li {
        width:49%;  
        margin-bottom:8px;
    }
    div#footer li:first-child {
        width:99%; 
    }
    div#footer li a {
        display: block;
        background-color: #fff;
        text-align: center;
        line-height:40px;
    }
    div#footer li:first-child:before {
        display: none;
    }
    div#footer li:after {
        display: none;
    }
    #footer .copyRight {
        font-size:0.6rem;
    }  
    #pageTop {
        width: 100%;
    }  
    /************slicknav************/
    .gNav {
        display:none;
    }
    .slicknav_menu {
        display:block;
    } 
}
@media (max-width: 480px){
#mainSarvice div.mainSarviceWrap div a.service {
    font-size:0.8rem;
}
    }