@charset "utf-8";

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

a {
    text-decoration: none;
    /*color: #637FBD;*/
}

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: 474px;
    background: url(../Profile/img/profilefv.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

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

header nav ul {
    display: flex;
}

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

header nav img {
    max-width: 50%;
}

.profileSec {
    height: 1120px;
    background-image: url(../Profile/img/profile背景.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    margin-bottom: 50px;
}

.profileSec h2 {
    position: absolute;
    left: 41%;
    top: 28%;
}

.profile-container {
    width: 532px;
    height: 343px;
    margin-left: 479px;
    padding-top: 422px;
}

.profile-container .p-wrapper {
    width: 450px;
    margin-top: 35px;
    margin-bottom: 50px;
}

.profile-container p {
    color: #4b4b4c;
    font-size: 16px;
    font-family: Zen Maru Gothic;
    line-height: 1.6;
}

.profile-container img {
    position: absolute;
    left: 46%;
}

.hobbySec {
    height: 527px;
    padding-top: 150px;
    margin-bottom: 50px;
    position: relative;
}

.hobbySec h2 {
    position: absolute;
    left: 42%;
    top: 9%;
}

.hobby-container {
    padding-top: 130px;
    display: flex;
    justify-content: space-around;
}

.img-wrapper-a {
    position: absolute;
    left: 60px;
    top: 210px;
}

.img-wrapper-b {
    position: absolute;
    left: 450px;
    top: 204px;
}

.img-wrapper-c {
    position: absolute;
    left: 760px;
    top: 224px;
}

.img-wrapper-d {
    position: absolute;
    left: 1133px;
    top: 193px;
}

.img-p-wrapper {
    width: 250px;
    height: 60px;
    overflow: hidden scroll;
    background: linear-gradient(to right, #c0c0c0, #f5f5f5);
}

.img-p-wrapper p {
    font-family: Zen Maru Gothic;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}


.webdesignSec {
    height: 1430px;
    position: relative;
    padding-top: 80px;
    margin-bottom: 50px;
}

.webdesignSec h2 {
    font-size: 27px;
    color: #18616f;
    font-weight: bold;
    font-family: Zen Maru Gothic;
    letter-spacing: .05em;
    margin-left: 99px;
    margin-bottom: 20px;
}

.webdesignSec .heading-1 {
    font-size: 27px;
    font-family: Zen Maru Gothic;
    padding: .5em .7em;
    border-left: 5px solid #212121;
    color: #333333;
    position: absolute;
    left: 96px;
}

/*.webdesignSec h3 {
    position: absolute;
    left: 150px;
}*/

.webdesign-container {
    height: 700px;
    display: flex;
    justify-content: space-evenly;
    margin-top: 102px;
}

.webdesignSec .p-container {
    width: 720px;
    height: 637px;
    margin-left: 100px;
    margin-right: 50px;
}

.webdesignSec .illust-container {
    margin-right: 100px;
    margin-left: 50px;
}

.webdesignSec .p-wrapper {
    width: 450px;
}

.webdesignSec .p-wrapper p {
    font-size: 18px;
    font-family: Zen Maru Gothic;
    line-height: 1.6;
}

.illust-container img {
    padding-bottom: 50px;
}

.wedding-img-wrapper {
    margin-left: 15%;
}

.wedding-img-wrapper p {
    height: 138px;
    position: absolute;
    right: 190px;
    bottom: 55px;
    font-family: Zen Maru Gothic;
    line-height: 1.4;
}

.works-profile {
    position: relative;
    margin-bottom: 100px;
}

.works-profile-a {
    margin-left: 10%;
}

.works-profile ul {
    position: absolute;
    left: 173px;
    top: 350px;
    list-style-type: disc;
}
.works-profile .rsp-img-a {
    display: none;
}
.works-profile .rsp-img-b {
    display: none;
}

.works-profile .p-wrapper {
    width: 400px;
    position: absolute;
    left: 772px;
    top: 584px;
}

.galleySec {
    height: 720px;
    padding-top: 80px;
    position: relative;
}

.galleySec h2 {
    position: absolute;
    left: 33%;
}

.galleySec .img-container {
    display: flex;
    justify-content: space-around;
    padding-top: 200px;
    width: auto;
}

.galleySec .img-wrapper {
    width: 330px;
    height: 250px;
}

.galleySec .p-wrapper {
    width: auto;
    text-align: center;
    font-family: Zen Maru Gothic;
    margin-top: 44px;
}

.form-wrapper {
    text-align: center;
    margin-top: 20px;
}

.form-wrapper a {
    height: 50px;
}

.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;
}

.footerSec ul a:hover {
    color: #93a7d1;
}






@media screen and (max-width:1024px) {
    .fvSec {
        height: 350px;
        background-size: contain;
        position: relative;
    }

    .fvSec header nav {
        position: absolute;
        top: -6px;
        left: 29%;
        top: 29%;
    }

    .profileSec {
        height: 1000px;
        background-size: contain;
        /*border: 1px dotted #18616f;*/
        margin-bottom: 0px;
    }

    .profileSec h2 {
        position: absolute;
        left: 31%;

    }

    .profile-container p br {
        display: none;
    }

    .profile-container {
        width: 400px;
        margin-left: 317px;
        padding-top: 391px;
    }

    .p-wrapper {
        margin-top: 44px;
    }

    .profile-container p {
        font-size: 14px;
    }

    .hobbySec {
        height: 550px;
        /*border: 1px dotted #93c828;*/
        margin-bottom: 50px;
    }

    .hobbySec h2 {
        position: absolute;
        left: 39%;
        top: 70px;
    }

    .hobby-container {
        padding-top: 190px;
    }

    .img-container {
        text-align: center;
    }

    .img-container img {
        max-width: 85%;
    }

    .img-p-wrapper {
        width: 213px;
        height: 60px;
        margin-left: 19px;
    }

    .img-wrapper-a {
        position: absolute;
        left: 14px;
        top: 280px;
    }

    .img-wrapper-b {
        position: absolute;
        left: 293px;
        top: 275px;
    }

    .img-wrapper-c {
        position: absolute;
        left: 520px;
        top: 292px;
    }

    .img-wrapper-d {
        position: absolute;
        left: 790px;
        top: 267px;
    }

    .webdesignSec {
        height: 1165px;
        border: 1px dotted #18616f;
    }

    .webdesignSec h2 {
        margin-left: 100px;
        margin-bottom: 40px;
    }

    .webdesignSec .heading-1 {
        font-size: 24px;
        position: absolute;
        left: 102px;
    }

    .webdesign-container {
        height: 600px;
        margin-top: 75px;
    }

    .webdesignSec .p-container {
        width: 800px;
        height: 637px;
        padding: 0px 0px 0px 50px;
        margin-left: 49px;
    }

    .webdesignSec .p-wrapper {
        width: 370px;
        margin-top: 40px;
        margin-bottom: 25px;
    }

    .webdesignSec .p-wrapper p {
        font-size: 14px;
    }

    .p-container img {
        max-width: 85%;
    }

    .webdesignSec .p-wrapper p br {
        display: none;
    }

    .webdesignSec .illust-container {
        margin: 0px;
        height: 600px;
    }

    .illust-container {
        padding-left: 50px;
    }

    .illust-container img {
        max-width: 80%;
    }

    .wedding-img-wrapper img {
        max-width: 85%;
    }

    .wedding-img-wrapper {
        margin-top: 0px;
    }

    .wedding-img-wrapper p {
        font-size: 12px;
        height: 138px;
        position: absolute;
        right: 111px;
        bottom: 25px;
    }

/*    .works-profile {
        border: 1px dotted #93c828;
    }
*/
    .works-profile-a {
        margin-left: 0px;
    }

    .works-profile ul {
        font-size: 14px;
        position: absolute;
        left: 49px;
        top: 276px;
    }

    .works-profile .p-wrapper {
        font-size: 14px;
        width: 400px;
        position: absolute;
        left: 573px;
        top: 451px;
    }

    .galleySec {
        height: 590px;
    }

    .galleySec h2 {
        position: absolute;
        left: 28%;
    }

    .galleySec .img-container {
        padding-top: 175px;
    }

    .galleySec .p-wrapper {
        margin-top: 0px;
    }

    .footerSec ul {
        margin-left: 385px;
    }

}

/*--------タブレットサイズ-------------*/
@media screen and (max-width:768px) {
    .fvSec {
        height: 256px;
        background-image: url(../Profile/img/profilefv.png);
        background-repeat: no-repeat;
    }

    .fvSec header nav {
        position: absolute;
        top: 13px;
        left: 21%;
    }

    header ul li {
        font-size: 14px;
    }

    header nav ul {
        display: flex;
    }

    header nav img {
        max-width: 50%;
    }

    header nav img {
        max-width: 50%;
    }

    .profileSec {
        height: 700px;
    }

    .profileSec h2 {
        position: absolute;
        left: 40%;
        top: 27%;

    }

    .profileSec h2 img {
        max-width: 50%;
    }

    .profile-container p br {
        display: none;
    }

    .profile-container {
        width: 313px;
        margin-left: 237px;
        padding-top: 253px;
    }

    .profile-container img {
        max-width: 2%;
        position: absolute;
        left: 347px;
        bottom: 304px;
    }

    .profile-container .p-wrapper {
        width: 313px;
        margin-top: 10px;
    }

    .profile-container p {
        font-size: 12px;
    }

    .hobbySec {
        height: 900px;
    }

    .hobbySec h2 {
        position: absolute;
        left: 36%;
        top: 44px;
    }

    .hobby-container {
        width: 680px;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 50px;
        padding-top: 0px;
    }

    .img-container {
        padding: 20px 20px 80px 20px;
    }

    .img-container img {
        max-width: 100%;
    }

    .img-p-wrapper {
        width: 252px;
        height: 60px;
        margin-left: 0px;
    }

    .img-wrapper-a {
        position: absolute;
        left: 107px;
        top: 151px;
    }

    .img-wrapper-b {
        position: absolute;
        left: 470px;
        top: 145px;
    }

    .img-wrapper-c {
        position: absolute;
        left: 100px;
        top: 576px;
    }

    .img-wrapper-d {
        position: absolute;
        left: 460px;
        top: 546px;
    }

    .webdesignSec {
        height: 870px;
        padding-top: 50px;
    }

    .webdesignSec .heading-1 {
        font-size: 17px;
    }

    .webdesignSec h3 img {
        max-width: 65%;
    }

    .webdesignSec .p-wrapper p {
        font-size: 12px;
    }

    .webdesignSec .p-wrapper {
        width: 305px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .webdesign-container {
        height: 435px;
        padding-top: 0px;
    }

    .wedding-img-wrapper img {
        max-width: 78%;
    }

    .wedding-img-wrapper p {
        font-size: 10px;
        position: absolute;
        right: 76px;
        bottom: -15px;
    }

    .works-profile ul {
        font-size: 11px;
        position: absolute;
        left: 24px;
        top: 211px;
    }

    .works-profile .p-wrapper {
        font-size: 11px;
        width: 328px;
        position: absolute;
        left: 412px;
        top: 333px;
    }

    .p-wrapper {
        margin-bottom: 0px;
    }

    .galleySec {
        height: 500px;
        padding-top: 20px;
    }

    .galleySec h2 {
        position: absolute;
        left: 21%;
    }

    .galleySec .img-container {
        height: 78px;
        padding-top: 125px;
        /*border: 1px dotted #18616f;*/
    }

    .galleySec .img-wrapper {
        width: 180px;
        height: 135px;
        margin: 10px;
        /*border: 1px dotted #2ea183;*/
    }

    .galleySec .p-wrapper {
        margin-top: 30px;
    }

    .galleySec .form-wrapper {
        margin-top: 24px;
    }

    .footerSec ul {
        margin-left: 242px;
    }

    .footerSec img {
        max-width: 21%;
    }

}







/*--------スマホサイズ-------------*/
@media screen and (max-width:559px) {
    .fvSec {
        background-image: url(../img/fvrp.png);
        background-size: cover;
        height: 537px;
    }

    header {
        width: auto;
        height: 600px;
    }

    header ul li {
        padding: 0px;
    }

    .concept-wrapper {
        position: absolute;
        left: 35%;
        top: 50%;
    }

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

    .logo-wrapper {
        position: absolute;
        left: 30%;
        top: 30%;
    }

    .logo-wrapper img {
        max-width: 100%;
    }

    .profileSec {
        height: 578px;
        background-image: url(../Profile/img/profile背景.png);
        background-position: top;
        background-repeat: no-repeat;
        position: relative;
    }

    .profileSec h2 {
        /*width: 300px;
        background-image: url(../Profile/img/profile背景.png);
        background-size:contain;
        background-repeat: no-repeat;*/
        position: absolute;
        left: 30%;
        top: 16%;
    }

    .profileSec h2 img {
        max-width: 70%;
    }

    .profile-container {
        width: 310px;
        height: 500px;
        margin-left: 9%;
        padding-top: 333px;     
    }
    .p-wrapper {
        margin-top: 100px;
    }
    .profile-container img {
        max-width: 5%;
        position: absolute;
        left: 45%;
        bottom: 101px;
    }

    .p-container {
        margin-left: 0px;
    }

    .hobbySec {
        height: 1330px;
    }
    .hobbySec h2 {
        position: absolute;
        left: 31%;
        top: 44px;
    }
    .hobbySec h2 img {
        max-width: 60%;
    }

    .hobby-container {
        width: auto;
        display: block;
        margin: 30px;
    }

    .img-container {
        width: auto;
        /*border: 1px dotted #212121;*/
        padding: 10px;
        margin-bottom: 50px;
    }

    .img-container img {
        max-width: 76%;
    }

    .img-p-wrapper {
        width: 219px;
        height: 42px;
        margin-left: 36px;
    }

    .img-wrapper-a {
        position: absolute;
        left: 176px;
        top: 145px;
        max-width: 48%;
    }

    .img-p-wrapper p {
        font-size: 10px;
    }

    .img-wrapper-b {
        position: absolute;
        left: 187px;
        top: 475px;
        max-width: 45%;
    }

    .img-wrapper-c {
        position: absolute;
        left: 179px;
        top: 833px;
        max-width: 45%;
    }

    .img-wrapper-d {
        left: 188px;
        top: 1151px;
        max-width: 42%;
    }

    .webdesignSec {
        height: 1200px;
    }

    .webdesignSec h2 {
        font-size: 18px;
        text-align: center;
        margin-left: 0%;
        margin-bottom: 20px;
    }

    .webdesignSec .heading-1 {
        font-size: 15px;
    }

    .webdesignSec .p-container {
        width: auto;
        height: auto;
        text-align: left;
        justify-content: center;
        padding: 0px;
    }

    .webdesignSec .heading-1 {
        font-size: 15px;
        position: absolute;
        left: 44px;
    }

    .webdesign-container {
        display: block;
        height: 500px;
    }
    .webdesignSec .p-wrapper {
        width: 250px;
    }
    .webdesignSec .p-wrapper p {
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .wedding-img-wrapper img {
        max-width: 90%;
    }

    .wedding-img-wrapper p {
        position: absolute;
        right: 27px;
        bottom: 27px;
    }

    .webdesignSec .illust-container {
        margin: 0px;
        height: auto;
    }

    .illust-container img {
        padding-bottom: 13px;
    }

    .wedding-img-wrapper {
        margin-top: 330px;
    }

    .wedding-img-wrapper p {
        position: absolute;
        right: 35px;
        bottom: -33px;
    }
    .works-profile {
        height: 500px;
        background-image: url(../Profile/img/経歴職種h2-rsp.png);
        background-repeat: no-repeat;
        background-position: top;
        width: 375px;
        position: relative;
    }
    .works-profile h2 {
        display: none;
    }
    .works-profile ul {
        background-color: #deeffa;
        padding: 20px;
        position: absolute;
        top: 90px;
    }
    .works-profile-a .p-wrapper {
        font-size: 11px;
        position: absolute;
        left: 0px; 
        top: 235px;
         padding: 23px;
         background-color: #deeffa;
    }
    .works-profile-a img {
        display: none;
    }
    .works-profile .rsp-img-a {
        display: block;
        max-width: 50%;
        position: absolute;
        left: 50%;
        top: 180px;
    }
    .works-profile .rsp-img-b {
        max-width: 50%;
        position: absolute;
        left: 0%;
        top: 0px;
    }


    .galleySec {
        height: 430px;
    }
.galleySec .img-container {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding-top: 65px;
    margin-bottom: 0px;
}
.galleySec .img-wrapper {
    width: 130px;
    height: 90px;
}
.galleySec h2{
    position: absolute;
    left: 24%;
    max-width: 50%;
}
.galleySec .p-wrapper {
    font-size: 12px;
    margin-top: 20px;
}
.galleySec .form-wrapper {
    margin-left: 24%;
    max-width: 50%;
}
.galleySec .img-container img {
    max-width: 100%;
}
.footerSec {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
    }

    .footerSec img {
        max-width: 30%;
        position: absolute;
        left: 151px;
        top: 28px;
    }

    .footerSec ul {
        display: block;
        margin-left: 0%;
        padding-top: 15%;
        text-align: center;
    }

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

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

    footer {
        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: #ffffff;
    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: auto;
        /*画面縦幅めいいっぱい広げる*/
        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;
    }*/