@font-face {
    font-family: 'myfont';
    src: url('myfont.woff') format('woff');
}

body {
    margin: 100%;
    height: 100%;
    margin: 0;
    line-height: 1.6;
    word-break: normal;
    color: #666;
    background: #fff;
    font-family: "Mplus 1p";
    -webkit-text-size-adjust: 100%;
    /* スマホ横にしても文字拡大せず*/
}

/*-------------------------------------*/
/*ローティング画面*/

.loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #03162B;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
}

.loading.is-active {
    opacity: 0;
    visibility: hidden;
}

.loading-animation {
    width: 100vw;
    height: 100vh;
    transition: all 1.5s;
    background-color: #fff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.loading-animation img {
    width: 30%;
}

.loading-animation.is-active {
    opacity: 1;
    visibility: visible;
}

/*-------------------------------------*/
/*GM*/


.soto {
    width: 100%;
    background: #2FA7DE;
}

.gnavi__wrap {
    max-width: 800px;
    margin: 0 auto;
    background: #2FA7DE;
}

.gnavi__lists {
    display: flex;
}

.gnavi__list {
    width: 20%;
    height: 60px;
    background: #2FA7DE;
    position: relative;
    transition: all .3s;
}

.gnavi__list:hover {
    background-color: #666;
}

.gnavi__list:hover::before {
    background-color: #0071BB;
}

.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 300;
    transition: all .3s;
    color: #fff;
}

.gnavi__list:hover a {
    color: #fff;
}

.dropdown__lists {
    display: none;
    /*デフォルトでは非表示の状態にしておく*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    visibility: hidden;
    /*デフォルトでは非表示の状態にしておく*/
    opacity: 0;
    /*不透明度0*/
    transition: all .3s;
    /*表示の変化を0.3秒に指定*/
    transform: scaleY(0);
    /*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top;
    /*変形を適応する基準をtopとする*/

}

.gnavi__list:hover .dropdown__lists {
    display: block;
    /*Gナビメニューにホバーしたら表示*/
    visibility: visible;
    /*Gナビメニューにホバーしたら表示*/
    opacity: 2;
    /*不透明度1*/
    transform: scaleY(1);
    /*Gナビメニューにホバーしたら表示*/
    z-index: 3;
}

.dropdown__list {
    background-color: #004d80;
    height: 60px;
    transition: all .3s;
    position: relative;
}

.dropdown__list:not(:first-child)::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;
    top: 0;
    left: 0;
}

.dropdown__list:hover {
    background-color: #003558;
}

.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}


/**------------------------------------gnaviカーソル下に移動した後に「fixed」クラスが追加---------*/

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.soto.fixed ul li a {
    height: 40px;
}

.fixed .gnavi__list {
    width: 20%;
    height: 40px;
}

.fixed .dropdown__lists {
    top: 40px;
}

.fixed .dropdown__list {
    background-color: #004d80;
    height: 40px;
}

.fixed .dropdown__list:hover {
    background-color: #003558;
}

/**-----------------------------------???---------*/

#splash {
    position: absolute;
    border: 1px solid black;
    height: 300px;
    width: 400px;
    margin: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: white;
}

a {
    font-size: 14px;
    text-decoration: none;
}

.back {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
}


.back img {
    width: 140px;
    position: fixed;
    top: 0px;
    left: 0px;
}

/*----------------------------------------------------------------------------------main---------*/

article {
    line-height: 1.9;
}

article h1 {
    font-family: "myfont";
    font-weight: 500;
    font-size: 90px;
    text-align: center;
}

article h2 {
    font-family: "Mplus 1p";
    line-height: 1.7;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
}

article p {
    padding: 0px auto 0px;
    font-family: "Mplus 1p";
    font-weight: 300;
    line-height: 1.9;
}

article a {
    padding: 0px auto 0px;
    font-family: "Mplus 1p";
    font-weight: 300;
    line-height: 1.9;
}



/*----------------------------------------------------------------------------------main---------*/

#main_soto {
    width: 100%;
    background: #333;
}

#main {
    max-width: 1600px;
    margin: 0 auto;
}

#main img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

#main_sp {
    display: none;
}

/*----------------------------------------------------------------------------------greet---------*/

#greet {
    width: 100%;
    padding: 30px 0 40px;
    background-color: #F6F6F6;
}

#greet h1 {
    margin: 0 auto -30px;
}

#greet h2 {
    padding: 0px 0 20px;
    color: #2FA7DE;
}

#greet p {
    width: 600px;
    margin: 0 auto;
}

/*----------------------------------------------------------------------------------what---------*/

#what {
    width: 100%;
    padding: 30px 0 0px;
    background-color: #fff;
}

#what h1 {
    margin: 0 auto -30px;
}

.imgWrap {
    overflow: hidden;
}

.imgEff {
    position: relative;
    width: 288px;
    height: 182px;
    transition-duration: 0.3s;
}

.imgEff:hover {
    transform: scale(1.1);
}

.imgEff:before {
    position: absolute;
    width: 288px;
    height: 182px;
    background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    /* 円形グラデーション */
    transition-duration: 0.3s;
    opacity: 0;
    /* 見えないように透過しておく */
    content: "会社概要";
    /* 表示するテキスト */
    background: radial-gradient(rgba(0, 0, 0, 0.6), #000000);
    /* けっこう暗くしないと文字が見にくいので注意 */
    display: flex;
    /* 文字の中央配置 */
    justify-content: center;
    /* 文字の中央配置 */
    align-items: center;
    /* 文字の中央配置 */
    color: #fff;
    font-size: 16px;
    text-shadow: 0 0 2px #000;
    filter: blur(4px);
    /* ブラー効果 */
}

.imgEff:hover:before {
    opacity: 1;
    /* マウスオーバーで可視化 */
    transform: scale(1.3);
    /* 文字の拡大率 */
    filter: blur(0);
    /* ブラー効果を解除 */
}


.imgEff2 {
    position: relative;
    width: 288px;
    height: 182px;
    transition-duration: 0.3s;
}

.imgEff2:hover {
    transform: scale(1.1);
}

.imgEff2:before {
    position: absolute;
    width: 288px;
    height: 182px;
    background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    /* 円形グラデーション */
    transition-duration: 0.3s;
    opacity: 0;
    /* 見えないように透過しておく */
    content: "施工実績";
    /* 表示するテキスト */
    background: radial-gradient(rgba(0, 0, 0, 0.6), #000000);
    /* けっこう暗くしないと文字が見にくいので注意 */
    display: flex;
    /* 文字の中央配置 */
    justify-content: center;
    /* 文字の中央配置 */
    align-items: center;
    /* 文字の中央配置 */
    color: #fff;
    font-size: 16px;
    text-shadow: 0 0 2px #000;
    filter: blur(4px);
    /* ブラー効果 */
}

.imgEff2:hover:before {
    opacity: 1;
    /* マウスオーバーで可視化 */
    transform: scale(1.3);
    /* 文字の拡大率 */
    filter: blur(0);
    /* ブラー効果を解除 */
}



.imgEff3 {
    position: relative;
    width: 288px;
    height: 182px;
    transition-duration: 0.3s;
}

.imgEff3:hover {
    transform: scale(1.1);
}

.imgEff3:before {
    position: absolute;
    width: 288px;
    height: 182px;
    background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    /* 円形グラデーション */
    transition-duration: 0.3s;
    opacity: 0;
    /* 見えないように透過しておく */
    content: "求人情報";
    /* 表示するテキスト */
    background: radial-gradient(rgba(0, 0, 0, 0.6), #000000);
    /* けっこう暗くしないと文字が見にくいので注意 */
    display: flex;
    /* 文字の中央配置 */
    justify-content: center;
    /* 文字の中央配置 */
    align-items: center;
    /* 文字の中央配置 */
    color: #fff;
    font-size: 16px;
    text-shadow: 0 0 2px #000;
    filter: blur(4px);
    /* ブラー効果 */
}

.imgEff3:hover:before {
    opacity: 1;
    /* マウスオーバーで可視化 */
    transform: scale(1.3);
    /* 文字の拡大率 */
    filter: blur(0);
    /* ブラー効果を解除 */
}

/*----------------------------------------------------------------------------------rink---------*/

#rink {
    width: 100%;
    padding: 30px 0 40px;
    background-color: #F6F6F6;
    text-align: center;
}

h2.sns {
    margin-top: 60px;
}

#box {
    width: 300px;
    margin: 20px 10px;
    display: inline-block;
    background-color: #fff;
}

#box p {
    padding: 30px;
}

#box a {
    display: block;
    text-align: center;
}

#box img {
    display: block;
    margin: 0 auto;
}


/*----------------------------------------------------------------------------------btn---------*/
a.btn {
    display: inline-block;
    width: 200px;
    margin: 45px auto 40px;
    padding: 15px 10px;
    border: 1px solid #666;
    background: transparent;
    color: #666;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
}

a.sample7 {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

a.sample7::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: 0;
    border-radius: 50%;
    background: #ddd;
    transition: .3s;
}

a.sample7:hover::after {
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
}


/*----------------------------------------------------------------------------------btn2---------*/
a.btn4 {
    display: inline-block;
    width: 200px;
    margin: 0 auto;
    padding: 15px 10px;
    border: 1px solid #004d80;
    background: #004d80;
    color: #fff;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
}

a.sample8 {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

a.sample8::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: 0;
    border-radius: 50%;
    background: #003558;
    transition: .3s;
}

a.sample8:hover::after {
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
}

/*----------------------------------------------------------------------------------facebook---------*/


#fb1 {
    padding: 40px 0 60px;
    background: #2FA7DE;
}

#fb1 h1 {
    color: #fff;
}

#fb2 {
    display: none;
}

/*----------------------------------------------------------------------------------footer---------*/

#footer {
    width: 100%;
    color: #fff;
    background: #333;
    padding: 10px 0 20px;
}

#footer p {
    color: #fff;
    text-align: center;
    padding: 10px 0 140px;
}

#footer a {
    color: #fff;
}

#footer img {
    width: 200px;
    padding-right: 10px;
    float: left;
}

#end {
    width: 900px;
    margin: 0 auto;
    background: #333;
    text-align: left;
}

#end p {
    padding: 0 10px;
    text-align: left;
}


/*----------------------------------------------------------------------------------pagetop---------*/

#pagetop {
    width: 100%;
    padding: 20px 0;
    background-color: #333;
}

#pagetop h1 {
    margin: 0 auto -30px;
    color: #666;
}

#pagetop h2 {
    padding: 0px 0 20px;
    color: #666;
}

#pagetop p {
    width: 600px;
    margin: 0 auto;
    color: #FFF;
}

/*----------------------------------------------------------------------------------table(gaiyo/saiyo)---------*/


#gaiyo {
    width: 100%;
    padding: 30px 0px 0px;
    text-align: center;
    background-color: ;
}

#gaiyo h1 {
    font-size: 30px;
    font-family: "Mplus 1p";
    line-height: 1.7;
    font-weight: 700;
}

#gaiyo h2 {
    padding: 30px 0 16px;
}

#gaiyo table {
    margin: 0px auto;
    font-size: 14px;
    width: 900px;
}

#gaiyo th {
    width: 20%;
    text-align: center;
    font-family: "Mplus 1p";
    font-weight: 400;
    line-height: 1.9;
    font-size: 14px;
}

#gaiyo td {
    width: 80%;
    text-align: left;
    padding: 10px 24px;
    font-family: "Mplus 1p";
    font-weight: 300;
    line-height: 1.9;
    font-size: 14px;
}


table.company {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
}

table.company th,
table.company td {
    padding: 10px;
}

table.company th {
    background: #295890;
    vertical-align: middle;
    text-align: left;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
    font-size: 15px;
}

table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #295890;
    border-width: 10px;
    margin-top: -10px;
}

/* firefox */
@-moz-document url-prefix() {
    table.company th::after {
        float: right;
        padding: 0;
        left: 30px;
        top: 10px;
        content: " ";
        height: 0;
        width: 0;
        position: relative;
        pointer-events: none;
        border: 10px solid transparent;
        border-left: #295890 10px solid;
        margin-top: -10px;
    }
}

table.company td {
    background: #f8f8f8;
    padding-left: 20px;
}

.rinen {
    max-width: calc(900px - 80px);
    width: 90%;
    padding: 40px;
    margin: 30px auto 0;
    text-align: left;
    background-color: #F6F6F6;

}

.rinen h2 {
    text-align: left;
    color: #2FA7DE;
}

.rinen p {
    text-align: left;
}


/*----------------------------------------------------------------------------------table---------*/
#seko {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 30px 0px 40px;
    text-align: center;
    background-color: ;
}

#seko h1 {
    font-size: 30px;
    font-family: "Mplus 1p";
    line-height: 1.7;
    font-weight: 700;
}

#seko h2 {
    padding: 30px 0 16px;
}

table.seko {
    max-width: 1000px;
    margin: 0px auto;
    font-size: 14px;
    border-spacing: 0;
}

table.seko th {
    width: 20%;
    color: #666;
    padding: 8px 15px;
    background: #eee;
    background: -moz-linear-gradient(#eee, #ddd 50%);
    background: -webkit-gradient(linear, 100% 0%, 100% 50%, from(#eee), to(#ddd));
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

table.seko tr td {
    width: 20%;
    padding: 8px 15px;
    text-align: center;
}

table.seko tr {
    background: #fff;
}

table.seko tr:nth-child(2n+1) {
    background: #f5f5f5;
}


.seko_con_soto {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.seko_con {
    width: 45%;
    margin: 40px auto 0;
    padding-bottom: 30px;
    border-bottom: #ddd solid 1px;
}

.seko_con img {
    width: 100%;
}

.seko_con p {
    margin: 10px 0 20px;
}

a.btn3 {
    display: inline-block;
    width: 200px;
    margin: 0px auto;
    padding: 15px 10px;
    border: 1px solid #666;
    background: transparent;
    color: #666;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
}


/*----------------------------------------------------------------------------------works----------*/


#work {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 30px 0px 40px;
    text-align: center;
}

#work h1 {
    font-size: 30px;
    font-family: "Mplus 1p";
    line-height: 1.7;
    font-weight: 700;
}

#work h2 {
    max-width: 240px;
    background-color: #0071BB;
    color: #fff;
    margin: 60px auto 30px;
    padding: 10px 0;
    border-radius: 30px;
}

.work_photo {
    max-width: 700px;
    margin: 30px auto;

}

.work_photo img {
    width: 100%;
}

.work_con_soto {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.work_con {
    width: 31.5%;
    margin: 0 0.5%;
    padding-bottom: 10px;
}

.work_con img {
    width: 100%;
}

.work_con p {
    margin: 0px 0 20px;
}

.work_link {
    margin-top: 40px;
}

.work_link_a {
    margin-top: 20px;
}


table.work {
    max-width: 700px;
    margin: 0px auto;
    font-size: 14px;
    border-spacing: 0;
}

table.work th {
    width: 20%;
    color: #666;
    padding: 8px 15px;
    background: #eee;
    background: -moz-linear-gradient(#eee, #ddd 50%);
    background: -webkit-gradient(linear, 100% 0%, 100% 50%, from(#eee), to(#ddd));
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

table.work tr td {
    width: 20%;
    padding: 8px 15px;
    text-align: center;
}

table.work tr {
    background: #fff;
}

table.work tr:nth-child(2n+1) {
    background: #f5f5f5;
}

/*----------------------------------------------------------------------------------haikei----------*/

#haikei3 {
    height: 400px;
    width: 100%;
    background: url(../img/haikei_bg.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*----------------------------------------------------------------------------------map----------*/


.link_map {
    margin: 50px auto 0px;
    height: 400px;
    width: 100%;
}

/*----------------------------------------------------------------------------------mail_form----------*/

#info {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #FFF;
}

#info h1 {
    margin: 0 auto -30px;
}

#info h2 {
    width: 600px;
    margin: 0 auto;
    padding: 0px 0 20px;
    text-align: center;
    color: #2FA7DE;
}

#info p {
    width: 600px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
}


a.btn2 {
    display: block;
    width: 200px;
    margin: 40px auto;
    padding: 15px 10px;
    border: 1px solid #666;
    background: transparent;
    color: #666;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
}