@charset "UTF-8";

/* タブレット表示---FontSize目安
13px/650px*100=2vw */
/* タブレット(1.2vw)*1.7 */

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: ZenKakuGothicNew-Regular;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}
@font-face {
    font-family: KleeOne-SemiBold;
    src: url(../font/Klee_One/KleeOne-SemiBold.ttf);
}
@font-face {
    font-family: NotoSansJP-Regular;
    src: url(../font/Noto_Sans_JP/static/NotoSansJP-Regular.ttf);
}
@font-face {
    font-family: AlegreyaSans-Bold;
    src: url(../font/Alegreya_Sans/AlegreyaSans-Bold.ttf);
}

body {
    color: #333;
    font-size: calc( 1.2vw * 1.7 );
    font-family: ZenKakuGothicNew-Regular;
}
a {
    color: #333;
}
ul {
    list-style-type: none;
}
h2 {
    text-align: center;
    font-weight: normal;
    font-family: AlegreyaSans-Bold;
}

/* ヘッダーここから-------------------------------- */
/* mvここから */
header .top-mv {
    position : relative;
    width : 100%;
    height: 100vh; /* レスポンシブ(画面いっぱい表示) */
    overflow : hidden;

    background-color: #333;
    z-index: 1;
}

/* キャッチコピー */
.catchcopy-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    width: 80%;
    height: 8vw;
    overflow: hidden;
    mix-blend-mode: overlay;

    z-index: 1000;
}
.catchcopy-wrapper > span {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #fff;

    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 0.5s;
}
.catchcopy-wrapper > span::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #444; 
    
    opacity: 0;
    animation: slide-in__span-after 1s forwards;
    animation-delay: 0.7s;
}
.catchcopy-wrapper > p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8vw;
    line-height: 8vw;
    text-align: center;
    font-size: 160%;
    color: #fff;
    font-family: KleeOne-SemiBold;
    
    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 0.5s;
}
@keyframes slide-in {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes slide-in__span-after {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        width: 105%;
        transform: translateX(5%) translateY(-5%);
        opacity: 1;
    }
}

/* 北海道の透過画像 */
.top-mv > img {
    position: absolute;
    top: 55%;
    left: 58%;
    transform: translateX(-50%) translateY(-50%);
    width: 120%;
    z-index: 100;

    opacity: 0;
    animation: frame-in 0.7s forwards;
}
@keyframes frame-in {
    100% {
        opacity: 1;
    }
}

/* スライドショー */
.slide img {
    display : block;
    /* レスポンシブ(画面いっぱい表示)ここから */
    position : absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    /* ここまでレスポンシブ(画面いっぱい表示) */
    opacity : 0;

    z-index: 10;
    animation : slideAnime 16s ease infinite;    
}
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }
   
@keyframes slideAnime{
    0% { opacity: 0 }
    6% { opacity: 1 }
    25% { opacity: 1 }
    31% { opacity: 0 }
    100% { opacity: 0 }
}
/* mvここまで */

/* Gナビ */
.header-flex {
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 15vw;
    background-color: #fff;
    box-shadow: 
        0.2vw 0 0.2vw inset #ccc,
        0 0.1vw 0.2vw inset #ccc,
        -0.2vw 0 0.2vw inset #ccc,
        0 -0.1vw 0.2vw inset #ccc
    ;
    border-radius: 0.5vw;

    z-index: 1000;
}
h1 {
    width: 25%;
    height: 4vw;
    margin: 1vw auto;
}
h1 img {
    display: block;
    width: 100%;
}
h1 img:hover {
    filter: contrast(35%);
}

nav {
    width: 100%;

    font-family: NotoSansJP-Regular;
}
nav ul {
    display: flex;

    margin: 4% 2%;
    justify-content: space-around;
}
nav ul li {
    position: relative;
    width: fit-content;
}
nav ul li a {
    display: block;
    height: 4.5vw;
    line-height: 4.5vw;
    padding: 0 0.2em;
    text-align: center;
    text-decoration: none;
    font-size: calc( 1.1vw * 1.7 );
    border-bottom: 0.6vw solid #356E9B;
}
/* --------------------------------ここまでヘッダー */

/* トップ遷移ボタン */
#page-top {
    position: fixed;
    bottom: 10%;
    right: 2%;

    z-index: 1000;
}
#page-top a {
    transform: translateY(0%);
    font-size: 60px;
    color: #356E9B;
    transition: 1s;
}

/* ここからメインセクション------------------------- */
main {
    width: 95%;
    margin: 0 auto;
}

/* セクション1--メッセージ */
main section:nth-of-type(1) {
    position: relative;
    width: 90%;
    margin: 10vw auto;
}

.decoration-1 {
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 60%;
    filter: opacity(0.2);

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(40px);
    /* ここまでスクロールイベント記述 */
    z-index: -1;
}
section:nth-of-type(1) .decoration-1 img {
    width: 100%;
}

.section1-flex {
    display: block;
}

section:nth-of-type(1) .section1-flex .section1__left-wrap {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.section1__h2-box {
    position: absolute;
    top: 2%;
    right: 0%;
    width: 35vw;
    height: 10vw;
    background-color: #777;
    mix-blend-mode: hue;

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateX(20px);
    /* ここまでスクロールイベント記述 */
    z-index: 100;
}
.section1__h2-txt {
    position: absolute;
    top: 2%;
    right: 0%;
    width: 35vw;
    height: 10vw;
    text-align-last: left;
    font-size: calc( 2.6vw * 1.7 );
    color: #fff;

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateX(20px);
    /* ここまでスクロールイベント記述 */
    z-index: 100;
}

.section1__img-box {
    width: 90%;
    margin: 0 auto;

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateX(-40px);
    /* ここまでスクロールイベント記述 */
}
.section1__img-box::after {
    position: absolute;
    bottom: -3%;
    left: -3%;
    content: "";
    width: 16vw;
    height: 16vw;
    background-color: #777;
    mix-blend-mode: hue;

    z-index: 100;
}
.section1__img-box img {
    display: block;
    width: 100%;
}

.section1__right-wrap {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 6vw;

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(40px);
    /* ここまでスクロールイベント記述 */
}

.marker {
    /* 参考[ https://web-create-kokusyo.com/javascript/css%e3%81%a7%e8%9b%8d%e5%85%89%e3%83%9a%e3%83%b3%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%82%92%e5%bc%95%e3%81%8f%e6%96%b9%e6%b3%95%e3%80%90%e3%82%a2%e3%83%8b/ ] */

    /* 下線マーカー */
    background:linear-gradient(transparent 75%, rgb(255, 217, 146) 50%);
    /* 背景の繰り返しを停止 */
    background-repeat: no-repeat;
    /* マーカーの横方向を0にして縮める */
    background-size: 0% 100%;
    /* マーカーが引かれる速度を指定 */
    transition: 0.7s;
    /* 改行対応 */
    display: inline;
}

.section1__right-wrap > p:first-child {
    font-size: calc( 2.2vw * 1.7 );
    margin-bottom: 0.5em;
    text-align: center;
}
.section1__right-wrap > p:nth-of-type(2) {
    font-size: calc( 1.8vw * 1.7 );
    margin-bottom: 0.8em;
    text-align: center;
    white-space: pre-wrap;
}
.section1__right-wrap > p:nth-of-type(3) {
    padding-bottom: 5%;
    line-height: 1.8;
    white-space: pre-wrap;
}
.section1__right-wrap a {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 8em;
    height: 2em;
    line-height: 2em;
    border: 0.4vw solid #333;
    text-align: center;
    text-decoration: none;
    font-size: calc( 1.1vw * 1.7 );
    color: #fff;
    background-color: #333;
}
.section1__right-wrap a .fa-chevron-right {
    /* 会社概要へ矢印マーク */
    margin-left: 0.2em;
    font-size: calc( 1.1vw * 1.7 );
}

/* セクション区切り線 */
.section__line {
    width: 98%;
    height: 0.3vw;
    margin: 5vw auto;
    background: linear-gradient(90deg, #356E9B 0%, #ccc 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.7s;
}

/* セクション2--事業内容 */
main section:nth-of-type(2) {
    position: relative;
    width: 100%;
    padding: 2vw 0;
}

.decoration-2 {
    position: absolute;
    top: -7%;
    left: 0;
    width: 30%;
    filter: opacity(0.2);

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(-40px);
    /* ここまでスクロールイベント記述 */
    z-index: 10;
}
section:nth-of-type(2) .decoration-2 img {
    width: 100%;
    transform: rotate(-20deg);
}

.h2-txt {
    position: relative;
    width: fit-content;
    margin: 0 auto 7vw auto;
    font-size: calc( 3.5vw * 1.7 );

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(-20px);
    /* ここまでスクロールイベント記述 */
    z-index: 100;
}
.section2__h2-txt::after {
    position: absolute;
    top: 0;
    right: -20%;
    content: "";
    width: 20%;
    aspect-ratio: 1 / 1;
    border-right: 0.2vw solid #ddd;
    border-top: 0.2vw solid #ddd;

    z-index: -1;
}
.section2__h2-txt::before {
    position: absolute;
    bottom: 0;
    left: -20%;
    content: "";
    width: 20%;
    aspect-ratio: 1 / 1;
    border-left: 0.2vw solid #ddd;
    border-bottom: 0.2vw solid #ddd;
    
    z-index: -1;
}
.section2-flex {
    display: block;
    width: 80%;
    margin: 0 auto;
}

.section2__wrap {
    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(30px);
    /* ここまでスクロールイベント記述 */
}
.section2__contents-wrap {
    display: flex;
    width: 100%;
}
.section2__contents-wrap .img-wrap {
    width: 40%;
}
.section2__contents-wrap .txt-wrap {
    width: 50%;
    margin-left: 10%;
}
.section2__contents-wrap .img-wrap img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.section2__contents-wrap .txt-wrap h3 {
    margin: 0.5em 0;
    text-align: center;
    font-size: calc( 1.5vw * 1.7 );
}
.section2__contents-wrap .txt-wrap p {
    width: 90%;
    margin: 0 auto;
    text-align: justify;
}

.section2__contents-wrap .txt-wrap a { /* more */
    display: block;
    width: 5em;
    height: 2em;
    line-height: 1.7em;
    margin: 3vw auto 15vw auto;
    border: 0.2vw solid #333;
    border-radius: 7vw;
    box-shadow: 0 0.5vw 0.5vw #777;
    text-decoration: none;
    text-align: center;
    font-size: calc( 1.4vw * 1.7 );
}
.section2__contents-wrap .txt-wrap a:hover {
    box-shadow: none;
    transform: translateY(7%);
    transition: 0.2s;
}

.section2__wrap > a {
    position: relative;
    display: block;
    width: 8em;
    height: 2em;
    line-height: 2em;
    margin: 3vw auto;
    border: 0.4vw solid #333;
    text-align: center;
    text-decoration: none;
    font-size: calc( 1.1vw * 1.7 );
    color: #fff;
    background-color: #333;
}
.section2__wrap > a .fa-chevron-right {
    /* 矢印マーク */
    margin-left: 0.2em;
    font-size: calc( 1.1vw * 1.7 );
}

/* セクション3--実績紹介 */
main section:nth-of-type(3) {
    position: relative;
    width: 100%;
    padding: 2vw 0;
}

.decoration-3 {
    position: absolute;
    top: -17%;
    right: 3%;
    width: 35%;
    filter: opacity(0.2);

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(-40px);
    /* ここまでスクロールイベント記述 */
    z-index: 10;
}
section:nth-of-type(3) .decoration-3 img {
    width: 100%;
    transform: rotate(10deg);
}

.h2-caption {
    font-size: calc( 1.4vw * 1.7 );
    text-align: center;
    font-family: ZenKakuGothicNew-Regular;
}

.section3__wrap {
    width: 100%;
    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(30px);
    /* ここまでスクロールイベント記述 */
}

.section3__wrap ul {
    display: flex;
    justify-content: space-around;
    width: 90%;
    margin: 0 auto;
}
.section3__wrap ul li {
    width: 30%;
    height: max(35vw,210px);
    margin-bottom: 10%;
    border: 0.1vw solid #333;
}
.section3__wrap ul li > a {
    display: block;
}
.section3__wrap ul li a .works-img {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
.section3__wrap ul li a img {
    display: block;
    width: 100%;
    transform: scale(1);
    transition: 1s;
}
.section3__wrap ul li a > p {
    width: fit-content;
    padding: 0 1em;
    margin: 0.3em auto 0.8em auto;
    font-size: calc( 1.3vw * 1.7 );
}
.section3__wrap ul li a > p:nth-of-type(2) {
    text-align: center;
}

.section3__wrap ul li:hover {
    background-color: #eee;
    transition: 0.5s;
}
.section3__wrap ul li:hover img {
    transform: scale(1.1,1.1);
    filter: contrast(60%) brightness(130%);
    transition: 0.5s;
}
.section3__wrap ul li:hover p {
    color: #888;
    transition: 0.5s;
}

.section3__wrap > p {
    margin-top: 4vw;
    text-align: center;
    font-size: calc( 1.3vw * 1.7 );
    color: #555;
}
.section3__wrap > p .fa-hand-point-down {
    margin-left: 0.5em;
}

.section3__wrap > a {
    position: relative;
    display: block;
    width: 8em;
    height: 2em;
    line-height: 2em;
    margin: 1.5vw auto 3vw auto;
    border: 0.4vw solid #333;
    text-align: center;
    text-decoration: none;
    font-size: calc( 1.1vw * 1.7 );
    color: #fff;
    background-color: #333;
}
.section3__wrap > a .fa-chevron-right {
    /* 矢印マーク */
    margin-left: 0.2em;
    font-size: calc( 1.1vw * 1.7 );
}

/* セクション4--お知らせ */
main section:nth-of-type(4) {
    position: relative;
    width: 100%;
    padding: 2vw 0;
}

.section4__wrap {
    width: 100%;
    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(30px);
    /* ここまでスクロールイベント記述 */
}

.decoration-4 {
    position: absolute;
    top: -15%;
    left: 0;
    width: 35%;
    filter: opacity(0.2);

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(-40px);
    /* ここまでスクロールイベント記述 */
    z-index: 10;
}
section:nth-of-type(4) .decoration-4 img {
    width: 80%;
    transform: rotate(-15deg);
}

main section:nth-of-type(4) > h2 {
    margin-bottom: 2vw;
}

.section4__wrap > ul {
    width: 90%;
    margin: 0 auto;
}
.section4__wrap > ul li {
    padding: 5% 0;
    border-bottom: 0.1vw solid #ccc;
}
.section4__wrap > ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.section4__wrap > ul li a .news-title {
    text-decoration: underline;
}
.section4__wrap > ul li a:hover .news-title {
    color: #888;
}
.section4__wrap > ul li a time {
    display: block;
    width: 33%;
    text-align: center;
}
.section4__wrap > ul li a .news-category {
    width: 15%;
    padding: 0 1em;
    border: 0.2vw solid #356E9B;
    text-align: center;
    font-size: calc( 1vw * 1.7 );
    transform: scale(0.7);
    color: #356E9B;
}
.section4__wrap > ul li a .news-title {
    display: block;
    width: 50%;
}

.section4__wrap > ul + a {
    display: block;
    width: 8em;
    height: 2em;
    line-height: 2em;
    margin: 3vw auto;
    border: 0.4vw solid #333;
    border-radius: 6vw;
    box-shadow: 0 0.4vw 0.4vw #777;
    text-decoration: none;
    text-align: center;
    font-size: calc( 1.2vw * 1.7 );
}
.section4__wrap > ul + a:hover {
    box-shadow: none;
    transform: translateY(7%);
    transition: 0.2s;
}

/* セクション5--お問い合わせ */
.section__line-last {
    position: relative;
    width: 80%;
    height: 0.5vw;
    margin: 5vw auto;
    background: linear-gradient(90deg, #333 0%, #ccc 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.7s;
}

main section:nth-of-type(5) {
    position: relative;
    width: 100%;
    padding: 2vw 0;
}

.section5__wrap {
    width: 90%;
    margin: 0 auto;

    /* スクロールイベント記述ここから */
    opacity: 0;
    transition: 1s;
    transform: translateY(30px);
    /* ここまでスクロールイベント記述 */
}

.section5__wrap .section5-flex {
    display: flex;
}

.contact-form {
    width: 80%;
    margin: 0 auto 5% auto;
    padding-bottom: 5%;
}
.contact-form:nth-of-type(1) {
    border-right: 0.3vw dashed #333;
}
.contact-form h3 {
    margin-bottom: 1vw;
    text-align: center;
    font-size: calc( 1.6vw * 1.7 );
}
.contact-form h3 i {
    margin-right: 0.3em;
    color: #356E9B;
}
.contact-form p {
    line-height: 1.8;
    text-align: center;
}

.contact-form:nth-of-type(1) p:nth-of-type(1) {
    margin: 1.5vw 0;
}
.contact-form:nth-of-type(1) p a {
    font-weight: bold;
    font-size: calc( 1.6vw * 1.7 );
    color: #356E9B;
}
.contact-form:nth-of-type(1) p a:hover {
    color: #6699C0;
    transition: 0.2s;
}
.contact-form:nth-of-type(1) p span {
    font-size: calc( 1.3vw * 1.7 );
    margin-right: 0.5em;
    text-decoration: none;
}

.contact-form:nth-of-type(2) a {
    position: relative;
    display: block;
    width: 35vw;
    height: 10vw;
    line-height: 10vw;
    margin: 2vw auto;
    border: 0.2vw solid #356E9B;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    font-size: calc( 1.1vw * 1.7 );
    color: #fff;
    background-color: #356E9B;

    overflow: hidden;
}
.contact-form:nth-of-type(2) a:hover {
    border: 0.2vw solid #7daace;
    background-color: #7daace;
    transition: 0.2s;
}

.section5__wrap .section5-p {
    width: fit-content;
    margin: 2vw auto;
}
.section5__wrap > p {
    font-size: calc( 1.3vw * 1.7 );
}


/* -------------------------ここまでメインセクション */

/* フッター */
footer {
    margin-top: 10vw;
    background-color: #ddd;
}
.footer-flex {
    display: block;
    width: 85%;
    margin: 0 auto;
    padding: 3vw 0;
}
footer .footer-flex .company-information {
    width: 70%;
    margin: 0 auto;
}

.company-information .footer-img {
    width: 50%;
    margin: 0 auto 4vw auto;
}
.footer-img img {
    display: block;
    width: 100%;
}

.company-information > p {
    font-size: calc( 1.4vw * 1.7 );
}

.company-information address {
    margin-left: 1vw;
    font-style: normal;
}
.company-information address p {
    white-space: pre-wrap;
}
.company-information address p:last-child {
    margin-top: 0.5em;
}

footer .footer-flex .footer-nav {
    width: 80%;
    margin: 5vw auto 0 auto;
}

.footer-nav a:hover {
    color: #888;
    transition: 0.3s;
}

.footer-nav > ul {
    display: flex;
}
.footer-nav > ul li {
    font-size: calc( 2vw * 1.7 );

    margin-right: 1.5vw;
}
.footer-nav > ul li:hover i {
    color: #888;
    transition: 0.3s;
}

.footer-nav .footer-nav-flex {
    display: flex;
    justify-content: space-between;
    margin-top: 2vw;
    line-height: 2.3;
}
.footer-nav .footer-nav-flex ul:nth-of-type(2) li ul {
    margin-left: 1em;
}
.footer-nav-flex ul:nth-of-type(2) li ul li::before {
    content: "-";
}

footer > p {
    padding: 1vw 0;
    text-align: center;
}

/* jQueryアニメーション */
.slide-in {
    opacity: 1;
    transform: translateY(0px) translateX(0px);
}
.marker-on { /* マーカーが引かれる際に付与するクラス */
    /* 横方向を100%にして、マーカーを引く */
    background-size: 100% 100%;
}