/*
Theme Name: k-ZEAL ver1.0 (wp-bootstrap-starter Child)
Theme URI: --
Description: --
Author: 3rd-eye
Author URI: http://www.3rd-eye.jp
Template: wp-bootstrap-starter
*/


/*
v3 -> v4    主な使用用途    画面幅 (px)
lg -> xl 1200px以上    テレビ、デスクトップPCなどの大画面モニタ
md -> lg 992px以上    ノートパソコンなどの省サイズモニタ
sm -> md 768px以上    タブレットなど
xs -> sm 576px以上    ファブレットなど
-    (xs) 576px未満    スマートフォン、組み込み端末など
*/

#content.site-content {
    padding:0 0 60px;
}

/*--------------------------------------------------------------
# common
--------------------------------------------------------------*/
body{
    font-size:16px; line-height:1.8;
}
body{font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}
.font-min{font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}

a {
    color: #3D9982;
}
a:hover {
    color: #33806C;
}

.blk{color: #373734;}
.blu-lit{color:#4676cc;}
.bg-blk{background-color: #373734; color:#fff;}
.bg-blk-tp{background-color: rgba(55, 55, 52, .75); color:#fff;}
.bg-gly{background-color:#f2f4f7;}
.bg-pnk{background-color: #F9E0E1;}
.bg-grn{background-color: #49B79C; color: #fff;}
.bg-grn h1,
.bg-grn .h1,
.bg-grn h2,
.bg-grn .h2,
.bg-grn h3,
.bg-grn .h3,
.bg-grn h4,
.bg-grn .h4 {
    color: #fff;
}
.bg-grn .btn-blue {
    color: #fff;
    border: 2px solid #fff;
}

.c{text-align:center;}

.entry-content>*,
.block{margin-bottom:120px;}
.entry-content>*:last-child{margin-bottom:0;}
.contents-thin{max-width:760px; margin-left:auto; margin-right:auto;}

.map-icon::before {
    content: '\f041';
    font-family: fontawesome;
    margin-right:6px;
    display:inline-block;
}
.tel-icon::before {
    content: '\f095';
    font-family: fontawesome;
    margin-right:6px;
    display:inline-block;
    -webkit-transform:scale(-1,1);
    transform:scale(-1,1);
}

@media screen and (max-width:767px) {
    .entry-content>*,
    .block{margin-bottom:60px;}
}
/* btns
----------------------------------------------- */
.btn{
    font-size:18px;
    border-radius:0;
    position:relative;
    padding:12px 50px;
}
.btn::after{
    content:'\f105';
    font-family: fontawesome;
    color: #373734;
    position:absolute;
    right:10px;
}

/* btn-green */
.btn-green{
    color: #3D9982;
    border:2px solid #49B79C;
}
.btn-green:hover{
    color: #fff;
    background-color:#3D9982;
}
.btn-green::after{
    color: #3D9982;
}
.btn-green:hover::after{
    color: #fff;
}

/* btn-white */
.btn-white{
    color:white;
    border:2px solid white;
}
.btn-white:hover{
    color:white;
    background-color:rgba(0, 0, 0, 0.5);
}
.btn-white::after{
    color:white;
}

/* btn-contact */
.btn-contact{
    color: #fff; !important;
    background-color:#FA6469 !important;
    box-shadow:0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-contact:hover{
    color: #fff; !important;
    background-color:#B3474B !important;
}
.btn-contact::after{
    color: #fff;
}
.btn-contact span::before{
    content: '\f0e0';
    font-family: fontawesome;
    margin-right:6px;
    display:inline-block;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1{
    font-size:33px;
}
h1.entry-title{
    font-size:33px;
    text-align:center;
    padding:30px 15px 30px;
    margin:0 -15px 80px;
    border:none;
    color: #fff;
    background-color: #49B79C;
}

h2,.h2{
    font-size:36px;
    color: #373734;
    text-align:center;
    padding-bottom:0;
    margin-bottom:1.2em;
}
h3,.h3{
    font-size:28px;
    color: #373734;
    text-align:center;
    line-height:1.3;
    margin-bottom:1em;
}

h4,.h4{
    font-size:24px;
    text-align:center;
    line-height:1.3;
    margin-bottom:1em;
}

/* h1,
.site-content h2,
.site-content h3{
    font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
} */

h1.entry-title span,
h2 span{
    display:block;
    font-size:small;
    color:#222;
}
h1.entry-title span{
    padding:5px 0;
}

.bar-title:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #2c4b82;
    margin: 25px auto 0;
}

@media screen and (max-width: 767px) {
    h2,.h2{font-size:26px;}
    h3,.h3{font-size:21px;}
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
header#masthead {
    background-color: rgba(255,255,255,.8);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    padding:10px 1rem;
}

.navbar-brand{padding:0;}
.navbar-brand a {
    color: #373734;
}
.navbar-brand>a>img{height:69px;}
body{padding-top:62px;}

.navbar-nav>li>a{font-size:16px !important;}
ul#footer-navi>li>a,
body:not(.theme-preset-active) #masthead .navbar-nav>li>a{
    color: #373734;
    font-size:16px;
    font-weight:500;
}
ul#footer-navi>li>a {
    color: #fff;
}
body:not(.theme-preset-active) #masthead .navbar-nav>li>a.btn-contact {
    color: #fff;
}
ul#footer-navi>li>a.btn,
body:not(.theme-preset-active) #masthead .navbar-nav>li>a.btn{
    padding:0.5rem 0.8rem;
}
ul#footer-navi>li>a.btn::after,
body:not(.theme-preset-active) #masthead .navbar-nav>li>a.btn::after{
    content:'';
}
ul#footer-navi>li>a:hover,
body:not(.theme-preset-active) #masthead .navbar-nav>li>a:hover,
body:not(.theme-preset-active) #masthead .navbar-nav>li.current_page_item>a{
    color: #373734;
    font-weight:500;
    background-color:rgba(0, 0, 0, .05);
}
ul#footer-navi>li>a:hover {
    color: #fff;
    background-color:rgba(255, 255, 255, .05);
}
body:not(.theme-preset-active) #masthead .navbar-nav>li>a.btn-contact:hover {
    color: #fff;
}

@media screen and (max-width: 991px) {
    .navbar-brand>a>img{
        height:36px;
    }
    body{padding-top:56px;}
}

@media screen and (min-width: 992px) {
    body:not(.theme-preset-active) #masthead .navbar-nav{
        width:90%;
    }
}
@media screen and (max-width: 767px) {
    body:not(.theme-preset-active) #masthead .navbar-nav{
        padding-top:10px;
    }
    body:not(.theme-preset-active) #masthead .navbar-nav>li{
        border-top:1px solid rgba(255,255,255,0.5);
    }
    body:not(.theme-preset-active) #masthead .navbar-nav>li>a.btn{
        text-align:left;
    }
    ul#footer-navi>li{
        display:inline-block;
        margin:0 2em 10px 0;
    }
}

/*--------------------------------------------------------------
# bootstrap4 Carousel
--------------------------------------------------------------*/
#bs4CarouselSlider{margin-bottom:80px;}
#bs4CarouselSlider .carousel-inner{background-color:#f2f4f7;}
#bs4CarouselSlider .carousel-item>*{width:100%;}
#bs4CarouselSlider .carousel-item .img-box{height:260px; background-size:cover; background-position:center center;}

.bs4CarouselOverlay{width:100%; height:100%; text-align:center; padding:0 46px; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0;  background-color:rgba(0,0,0,0.4)}
.bs4CarouselOverlay .overlay-contents{color:white !important;}
.bs4CarouselOverlay .overlay-contents h1{font-size:23px; line-height: 1.5; color: #fff;}
.bs4CarouselOverlay .overlay-contents p{line-height: 1.5; font-weight: 300;}

@media screen and (min-width: 768px) {
    .bs4CarouselOverlay .overlay-contents h1{font-size:36px;}
}
@media screen and (min-width: 992px) {
    .bs4CarouselOverlay{padding:0 46px; justify-content:flex-end; text-align:left;}
    .carousel-control-next, .carousel-control-prev{width:8%;}
    #bs4CarouselSlider .carousel-item .img-box{height:400px;}
}


/*--------------------------------------------------------------
# FooterUpper
--------------------------------------------------------------*/
#copyright{font-size:12px;}

#footer-upper{
    color: #373734;
    background-color: #F9E0E1;
    text-align:center; padding:60px 0;
}

#footer-upper .btn-contact{
    font-size:26px;
    width:100%;
    padding:90px 0;
}
#footer-upper .btn-contact::after{
    right:30px;
}

#footer-upper .contact-info{
    display:table;
    width:100%;
    height:100%;
}
#footer-upper .contact-info>*{
    display:table-cell;
    vertical-align:middle;
}

#footer-upper .contact-info .tel-icon{
    font-size:33px;
    line-height:1;
}
a.tel-icon{
    color:white;
}
a.tel-icon:hover{
    text-decoration:none;
}

/* frow */
#footer-upper .container-fluid{max-width:1140px;}

ul.list-flow li{
    margin-bottom:20px;
    line-height:1.4;
    padding-left:30px;
    padding-right:30px;
}
ul.list-flow li:first-child .circle-icon::after{
    content:none;
}

.list-flow>li>span{display:block; margin-bottom:1em;}

.circle-icon{
    margin:0 auto;
    color:#4676cc;
    background-color:white;
    border-radius:50%;
    position:relative;
}
.circle-icon::before{
    content:'';
    display:block;
    padding-top:100%;
}
.circle-icon>*{
    position:absolute;
    top:0;
    left:50%;
    width:100%;
    height:100%;
    font-size:50px;
    -webkit-transform: translate(0, -50%);
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.list-flow .circle-icon::after{
    content:'\f105';
    font-family: fontawesome;
    font-size:30px;
    color:white;
    position:absolute;
    top:50%;
    left:-35px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index:100;
}

@media screen and (max-width: 767px) {
    #footer-upper .btn-contact{
        padding:20px 0;
    }
    #footer-upper .contact-info{
        padding:1.5em 0;
    }
}
@media screen and (max-width:576px) {
    .list-flow{margin-bottom:20px;}
    .list-flow>li{min-height:50px; margin-bottom:10px;}
    .list-flow>li>span{margin:0 0 0 80px; line-height:50px; text-align:left; font-size:18px;}
    ul.list-flow .circle-icon{width:50px; position:absolute; top:0; left:30px;}
    ul.list-flow .circle-icon>*{font-size:23px;}
    ul.list-flow .circle-icon::after{content:none;}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-info{text-align:right;}

body:not(.theme-preset-active) footer#colophon {
    color: #fff;
    background-color: #1e1e20;
}

ul#footer-navi{display:table; table-layout:fixed; width:100%; margin-bottom:30px;}
ul#footer-navi li{display:table-cell; vertical-align:middle; text-align:center;}

@media screen and (max-width: 767px) {
    ul#footer-navi{display:block;}
    ul#footer-navi li{display:inline-block;}
}


/* home
--------------------------------------------------------------*/
.bg-photo{position:relative; overflow:hidden;}
.bg-photo>img{position:absolute; width:60%;}
.bg-photo-l>img{top:0; left:0;}
.bg-photo-r>img{top:0; right:0;}

.float-pannle{max-width:600px; padding:60px; margin-top:200px; position:relative;}
.float-pannle h3{text-align:left;}
.bg-photo-r .float-pannle{float:right;}

@media screen and (max-width:1199px) {
    .left-photo-row>img{width:70%;}
}
@media screen and (max-width:991px) {
    .bg-photo>img{width:80%;}
    .bg-photo-r .float-pannle{float:none;}
}
@media screen and (max-width:767px) {
    .float-pannle{padding:20px;}
    .bg-photo>img{width:100%; height:100%; position:relative;}
    .float-pannle{max-width:100%; margin-top:-50px;}
}
.section-touch {
    margin-top: calc(-1.5em - 80px);
}
.section-video {
    background-color: #f2f4f7;
    margin-right: -15px;
    margin-left: -15px;
    padding: 120px 0;
}
@media screen and (max-width:576px) {
    .section-video {
        padding: 30px 0;
    }
}


/* Rebar
--------------------------------------------------------------*/
.flat-gutters{margin-left:-15px; margin-right:-15px;}
.column2-pannle{max-width:560px; padding:30px; margin:0 auto;}


/* Company
--------------------------------------------------------------*/
#greeting .sign-area{
    font-size:large;
    text-align:center;
    padding:20px 0 0;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
#greeting .sign{display:block; position:relative;}
#greeting .sign,
#greeting .sign img{position:relative;}
#greeting .sign span{position:absolute; font-size:12px;}

.slug-company dl{line-height:1.8em;}
.slug-company dl dt{width:180px; padding:0 10px;}
.slug-company dl dd{margin:-1.8em 0 0.8em 0; padding:0 0 0.8em 210px; border-bottom:1px solid #CCC;}

@media screen and (max-width:767px) {
    .slug-company dl dt{width:auto;}
    .slug-company dl dd{margin:0 0 0.8em 0; padding:0 10px 0.8em; border-bottom:1px solid #CCC;}
}

/* Recruit
--------------------------------------------------------------*/
.recruit-boxs{text-align:center; padding:40px 0;}

/* Flow
--------------------------------------------------------------*/
.slug-flow .circle-icon{
    max-width:90px;
    color:white;
    background-color:#4676cc;
}
.slug-flow .circle-icon::after{
    content: counter(flow-no, decimal-leading-ZEAL);
    color:#4676cc;
    font-size:40px;
    text-align:center;
    line-height:1;
    display:block;
    position:absolute;
    width:100%;
    top:-50px;
    left:0;
}
.slug-flow .circle-icon>*{
    font-size:30px;
}

.flow-box{
    counter-increment:flow-no;
    position:relative;
    border:1px solid #EEE;
    margin-bottom:100px;
    box-shadow:-12px -12px 0px 0px #EEE;
}
.flow-box:last-child::after{
    content:none;
}
.flow-box>*{padding:45px;}
.flow-box>*:last-child{border-left:1px solid #EEE;}

.flow-box::after{
    content:'\f107';
    font-family: fontawesome;
    font-size:40px;
    color:#4676cc;
    display:block;
    width:100%;
    text-align:center;
    position:absolute;
    bottom:-80px;
}

@media screen and (max-width:576px) {
    .flow-box>*{padding:25px;}
    .flow-box>*:first-child{padding-bottom:0;}
    .flow-box>*:last-child{border:none;}
}

/* Form
--------------------------------------------------------------*/
.form-group .badge{margin-left:5px;}
.form-group select{display:inline-block; width:auto;}

.wpcf7 .form-group{display:table; width:100%;}
.wpcf7 .form-group>*{display:table-cell;}
.wpcf7 .form-group>*:first-child{width:200px;}

.wpcf7 input[name="your-zip"]{width:8em;}

@media screen and (max-width:576px) {
    .wpcf7 .form-group,
    .wpcf7 .form-group>*{display:block;}
    .wpcf7 .form-group>*:first-child{width:auto;}
}

.grecaptcha-badge {
    visibility: hidden;
}

.ErrorField {
    background-color: #f0d9d9;
    border-color: #a94442;
}

div.ErrorField {
    padding: 5px 15px;
}

div.ErrorField .radio-inline {
    padding-top: 0;
}

.ValidationErrors {
    color: #a94442;
}

/* News
--------------------------------------------------------------*/
.card-feed {
    border: none;
    border-radius: 0;
    margin-bottom: 4rem;
}

.card-feed .h3 {
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: left;
    font-weight: bold;
}

.card-feed ul {
    margin-bottom: 0;
}

.card-feed ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width:768px) {
    .card-feed .card-body {
        padding: 3rem;
    }
    .card-feed dl {
        display: flex;
        margin: 0;
    }
    .card-feed dt {
        margin-right: 1rem;
    }
}