@charset "utf-8";

body {
    width: auto;
    margin: 0 auto;
    font-family: 'Hiragino Mincho ProN', Cochin;
}

a {
    text-decoration: none;
    color: #504f4c;
}

img {
    max-width: 100%;
    height: auto;
}
/* =======================
.menu-trigger
======================= */
.menu-trigger {
    display: none;
    /*PCの時は消しておく*/
    -webkit-appearance: none;
    /* Crome用　フォ-ム要素の初期化*/
    appearance: none;
    /*フォ-ム要素の初期化*/
    border: none;
    background: transparent;
    /* Firefox用 背景を透過させる設定*/
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    /* ブロック要素とインライン要素の中間の状態の要素*/
    transition: all .4s;
    box-sizing: border-box;
}


.fvSec {
    height: 200px;
    position: relative;
}

.fvSec header nav {
    width: 640px;
    height: 40px;
    position: absolute;
    top: 12px;
    left: 53%;
}

header nav ul {
    display: flex;
}

header ul li {
    color: #ffffff;
    font-size: 18px;
    font-family: Cochin;
    padding: 20px;
}

header nav img {
    max-width: 50%;
}
.logo-wrapper {
    position: absolute;
    left:2%;
}
.worksSec {
    position: relative;
}

.worksSec h1 {
    display: block;
    text-align: center;
    padding: 100px;
}

.worksSec ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 30px;
}

.worksSec li {
    margin: 20px;
}

.worksSec h3 {
    font-size: 14px;
    font-family: Zen Maru Gothic;
    background-color: #f0eeee;
    text-align: left;
    padding: 20px;
}

.works-pdfSec {
    text-align: center;
}
.sp-sizeSec {
    display: none;
}

.jimny-thumnail {
    padding-top: 20px;
}

.cafeHP {
    padding-top: 20px;
}
.footerSec {
    height: 250px;
    background-color: #6d6a6a;
    position: relative;
}

.footerSec img {
    position: absolute;
    left: 9%;
    top: 33%;
}

.footerSec ul {
    display: flex;
    font-family: Cochin;
    margin-left: 700px;
    padding-top: 48px;
    line-height: 1.4;
}

.footerSec ul li {
    font-size: 20px;
    margin: 20px;
}

.footerSec ul li a {
    color: #ffffff;
}

.footerSec li span {
    font-size: 14px;
    font-family: Zen Maru Gothic;
}

footer {
    background-color: #323d48;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    font-family: Zen Maru Gothic;
    letter-spacing: 3px;
    padding: 5px;
}




@media screen and (max-width:1024px) {
    .fvSec header nav {
        position: absolute;
        top: 0px;
        left: 36%;
    }
    .sp-sizeSec {
        display: none;
    }
     .footerSec ul {
        margin-left: 300px;
    }
}


/*------タブレットサイズ--------*/

@media screen and (max-width:768px) {
    .fvSec header nav {
        position: absolute;
        top: -10px;
        left: 19%;
    }

    header nav ul {
        display: flex;
    }

    .worksSec ul {
        padding: 10px;
    }

    .worksSec h2 {
        padding: 50px;
    }
    .sp-sizeSec {
        display: none;
    }
    .footerSec {
        height: 170px;
    }

    .footerSec ul {
        display: flex;
        font-family: Cochin;
        margin-left: 40%;
        padding-top: 45px;
        line-height: 1.4;
    }

    .footerSec ul li {
        font-size: 16px;
        margin: 10px;
    }

    .footerSec ul li span {
        font-size: 12px;
    }

    .works-pdfSec-responsive {
        display: none;
    }
}

/*--------スマホサイズ-------------*/
@media screen and (max-width:559px) {
    .fvSec {
        height: 474px;
        background-image: url(../Works/img/fv-spsize.png);
        background-size: cover;
        background-position: center;
    }
    header {
        width: auto;
        height: 600px;
    }
    header ul li {
        padding: 0px;
    }
    .logo-wrapper {
        display: none;
    }
    .worksSec h1 {
        display: none;
    }
    .concept-wrapper {
        position: absolute;
        left: 35%;
        top: 50%;
    }

    .concept-wrapper img {
        max-width: 40%;
    }

    .works-pdfSec {
        display: none;
    }
    .sp-sizeSec {
        display: block;
        height: auto;
    }
    .footerSec {
        height: 250px;
    }

    .footerSec ul {
        display: block;
        padding-top: 23px;
    }

    .footerSec ul li {
        width: 100px;
        font-size: 12px;
    }

    .footerSec img {
        width: 70px;
        position: absolute;
        left: 9%;
        top: 33%;
    }
}

@media screen and (max-width:375px) {
    header nav {
        width: 300px;
    }

    header ul li {
        margin-left: 93px;
    }
}

@media screen and (max-width:320px) {
    header ul li {
        margin-left: 64px;
    }
    .footerSec ul li {
        width: 300px;
        font-size: 12px;
    }
}








/*-----------------------
矢印が動いてスクロールを促す
-------------------------*/

/*スクロールダウン全体の場所*/
.scrolldown4 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 1%;
    right: 50%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
    0% {
        bottom: 1%;
    }

    50% {
        bottom: 3%;
    }

    100% {
        bottom: 1%;
    }
}

/*Scrollテキストの描写*/
.scrolldown4 span {
    /*描画位置*/
    position: absolute;
    left: -20px;
    bottom: 10px;
    /*テキストの形状*/
    color: #3a2c2c;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #3a2c2c;
    transform: skewX(-31deg);
}

.scrolldown4:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: 0;
    /*矢印の形状*/
    width: 1px;
    height: 50px;
    background: #3a2c2c;
}


/* fv ふわっと上から */
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
/*nav {
    width: 15%;}
    /*navの外側のheaderなどに横幅を指定する場合は削除してください*/



nav ul {
    list-style: none;
    text-align: center;
}


/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
    position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
    display: block;
    text-decoration: none;
    color: #809dcf;
    /*text-shadow: 2px 2px 4px rgba(0,0,0,0.5);*/
    padding: 20px;
    transition: all .3s;
}

nav ul li a:hover {
    color: #38cbe5d0;
}

/*-------矢印はデザイン上、消す方向----*/

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
    /*絶対配置で位置を指定*/
    position: absolute;
    left: 0%;
    top: 50px;
    z-index: 4;
    /*形状を指定*/
    background: none;
    /* 枠線　*/
    /*border: 2px solid #a09c9c;*/

    width: 250px;
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover>ul,
nav li.has-child ul li:hover>ul,
nav li.has-child:active>ul,
nav li.has-child ul li:active>ul {
    visibility: visible;
    opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
    font-size: 14px;
    color: #ffffff;
    /*制作の流れと料金表の間の枠線*/
    /*border-bottom: solid 1px rgba(255, 255, 255, 0.6);*/
    /*Service navの下層navの余白*/
    padding: 10px;
}

nav li.has-child ul li:last-child>a {
    border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
    background: #c6d4f49f;
}

/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul {
    top: 0;
    left: 182px;
    background: #66ADF5; /*制作実績一覧、制作の流れ、料金表、お問い合わせの背景の色*/
}

/*
nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active {
    background: #d78b43;
}*/


/*==768px以下の形状*/

@media screen and (max-width:768px) {

    nav ul li.has-child::before {
        content: '';
        position: absolute;
        right: 5px;
        top: 22px;
        width: 6px;
        height: 6px;
        border-top: 2px solid #fcf8f8;
        border-right: 2px solid #fcf8f8;
        transform: rotate(45deg);
    }

    /*矢印の向き*/
    nav ul li.has-child::before,
    nav ul ul li.has-child::before {
        transform: rotate(135deg);
        left: 20px;
    }

    nav ul li.has-child.active::before {
        transform: rotate(-45deg);
    }

}

/*==559px以下の形状*/
@media screen and (max-width:559px) {
    nav ul li a {
        color: #ffffff;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    nav li.has-child ul,
    nav li.has-child ul ul {
        width: 123px;
    }

    nav li.has-child ul li a {
        display: block;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #ffffffea;
        border-bottom: none;
        /*目立つので消去*/
        padding: 0px;
    }
}

/*-------------------------
ボタン　グラデーションが流れる
---------------------------*/
.gradient1 {
    /*ボタンの形状*/
    display: inline-block;
    color: #fff;
    padding: 18px 60px;
    text-decoration: none;
    outline: none;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #253a4b 51%, #507da0 100%, #b3f2ea 51%, #90a3f1 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    /*アニメーションの指定*/
    transition: all 0.3s ease-out;
}

/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {
    color: #fff;
    background-position: 99% 50%;
}

/*----- スマホ ハンバーガーメニュー ----- */
@media screen and (max-width: 559px) {
    .menu-trigger {
        width: 56px;
        height: 60px;
        /*positionで画面左上に絶対配置*/
        position: absolute;
        top: 0;
        left: 0;
        /*要素の重なり、上のレイヤーと同じ考えかた*/
        z-index: 2;
        /*クリックした際のボタン周りの線を消す*/
        outline: none;
    }

    .menu-trigger span {
        position: absolute;
        left: 50%;
        width: 32px;
        height: 2px;
        background-color: #2c2a2a;
        /*menu-trigger内のspan全体を中心位置に揃える設定*/
        transform: translate(-50%, -50%);
    }

    .menu-trigger span:nth-of-type(1) {
        top: 16px;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 50%;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 14px;
    }

    /*.activeが付いているものは
クリックした際した後の表示を設定しています。*/
    .menu-trigger.active span:nth-of-type(1) {
        top: 49%;
        /* 変形の設定　右側の軸は変えずに左側を傾けている */
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
        /*透過の指定で消してる*/
    }

    .menu-trigger.active span:nth-of-type(3) {
        bottom: 49%;
        /* 変形の設定　右側の軸は変えずに左側を上に傾けている */
        transform: translate(-50%, -50%) rotate(45deg);
    }

    /*----- スマホ ナビゲーション ----- */
    #global-nav {
        display: none;
        /* クリックする前は消えてほしい*/
        /*width: 100vw;
        /*画面横幅めいいっぱい広げる*/
        height: 100vh;
        /*画面縦幅めいいっぱい広げる*/
        background: rgb(33 33 31 / 63%);
        margin: 0;
        margin: 0;
        padding: 90px 5% 0;
        /*positionと組み合わせページをスクロールした場合も同じ位置に常に置く設定　transrateXと合わせてど真ん中に位置を合わせる設定*/
        position: fixed;
        top: 0;
        transform: translateX(-50%);
        z-index: -1;
        /* 何かしらの要素の背面に設置*/
    }

    #global-nav.active {
        display: block;
        /* クリックした時に表示*/
        z-index: 1;
        /* 何かしらの要素の全面に設置*/
        height: 500px;
    }

    #global-nav ul {
        /* display:flex;を解除して、たて並びにしている*/
        display: block;
        margin: 0;
        z-index: 2;
    }

    #global-nav li,
    #global-nav li:last-child {
        /*画面横にめいいっぱい伸ばしている設定*/
        width: auto;
        align-items: center;
        /* 縦位置を揃える */
        padding-left: 41%;
    }

    #global-nav li a {
        font-size: 14px;
    }
}


@media screen and (max-width: 375px) {
    #global-nav.active {
        display: block;
        z-index: 1;
        width: 375px;
        height: 447px;
    }

    #global-nav ul {
        /* display:flex;を解除して、たて並びにしている*/
        display: block;
        margin: 0;
        z-index: 2;
        width: 375px;
    }
}