@charset "utf-8";

body {
    margin: 0 auto;
    font-family: Zen Maru Gothic, 'Hiragino', Cochin;
}

a {
    text-decoration: none;
}

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: 684px;
    background: url(../flowchart/img/fv.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.fvSec .logo-wrapper {
    position: absolute;
    left:2%;
    top: 25px;
}

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

header nav ul {
    display: flex;
}
header ul li {
    color: #f2f0df;
    font-size: 18px;
    font-family: Cochin;
}
header nav img {
    max-width: 50%;
}

.fvSec h1  {
    color: #ffffff;
    font-size: 36px;
    padding: 10px;
    text-align: center;
    margin-top: 170px;
}
.fvSec .top-wrapper p {
    color: #ffffff;
    text-align: center;
    font-family: Zen Maru Gothic;
    padding: 20px;
    line-height: 1.4;
}

/*================
フローチャート
==============*/
.fvSec .div-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 82px;
}
.fvSec .img-wrapper {
    border-radius: 10%;
}



/*============
①ヒアリング・要件定義
================*/

.hearingSec {
    height: 900px;
    background-image: url(../flowchart/img/hearingSec背景.png);
    background-repeat: no-repeat;
    font-family: Zen Maru Gothic;
    position: relative;
    margin-bottom: 100px;
    /*border: 2px dotted #243c58;*/
}
.top-text-wrapper {
    text-align: left;
    position: absolute;
    top: 88px;
    left: 177px;
}
.outline-glow {
    line-height: 1.6;
  font-size: 16px;
  color: #fff;
  text-shadow:
    0 0 5px rgba(22, 85, 111, 0.9),
    0 0 2px rgba(79,116,146,0.7),
    0 0 15px rgba(12,36,66,0.5);
}

.hearingSec h2 {
    color: #fff;
   font-size: 22px;
   font-family: Zen Maru Gothic;
    position: absolute;
   line-height: 1.8;
    width: 292px;
    height: 75px;
    position: absolute;
    left: 53%;
    top: 35%;
}


.hearingSec h3 {
    font-size: 16px;
    font-family: Zen Maru Gothic;
    position: absolute;
    left: 63%;
    top: 27%;
}



.hearingSec .img-wrapper {
    position: absolute;
    left: 40%;
    top: 53%;
}

.hearingSec .p-wrapper {
    width: 400px;
    height: 340px;
    padding: 400px 0px 0px 870px;
    font-size: 16px;
    font-family: Zen Maru Gothic;
    line-height: 1.6;
    color: #fff;
}

.hearingSec text {
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 351px;
    bottom: 91px;
}




/*==============
②サイト設計構成
===============*/
.site-designingSec {
    height: 830px;
    background-image: url(../flowchart/img/サイト構成設計背景.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    /*border: 2px dotted #309e53;*/
}
.site-designingSec h2 {
    position: absolute;
    left: 54%;
    top: 26%;
}

.site-designingSec ul {
    font-size: 14px;
    list-style-type: disc;
    width: 282px;
    height: 388px;
    color: #fff;
    font-family: Zen Maru Gothic;
    position: absolute;
    left: 69%;
    top: 12%;
    line-height: 1.8;
}

/*=============
③デザイン制作
===============*/


.designingSec {
    height: 2810px;
    background-image: url(../flowchart/img/デザイン制作背景.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 50px;
    margin-bottom: 100px;
    padding-top: 20px;
    position: relative;
    /*border: 2px dotted #243c58;*/
}
.designingSec h2 {
    position: absolute;
    left: 36%;
    top: 8%;
}
.designingSec .illust {
     position: absolute;
    left: 48%;
    top: 0%;
}
.designingSec ul {
    font-size: 18px;
    font-family: Zen Maru Gothic;
    list-style-type: disc;
    color: #fff;
    width: 290px;
    height: 167px;
    padding: 550px 0px 0px 945px;
}
.designingSec .mobile-first p {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    width: 272px;
    height: 156px;
    padding: 410px 0px 50px 420px;
}
.mobile-first img {
    position: absolute;
    left: 51%;
    top: 43%;
}
.designingSec h3 {
    position: absolute;
    left: 43%;
    top: 65%;
}
.designingSec .text-container {
    display: flex;
    justify-content: center;
}
.designingSec .text-wrapper {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
    width: 310px;
    margin-top: 722px;
    margin-left: 37px;
    margin-right: 20px;
    padding: 15px;
}

.designingSec .p-wrapper {
    font-size: 12px;
    color: #fff;
    line-height: 1.6;
    position: absolute;
    left: 366px;
    bottom: 432px;
}




/*＝＝＝＝＝＝＝＝
④コーディング実装
⑤テスト・チェック
⑥公開・納品
==================*/
.codingSec {
    padding-top: 100px;
    margin-bottom: 100px;
    position: relative;
}
.section-container {
    display: flex;
    justify-content: space-evenly;
}
.coding-wrapper .illust {
    position: absolute;
    left: 191px;
    top: 70px;
}
.coding-wrapper h2 {
    color: #fff;
    font-size: 20px;
    position: absolute;
    left: 204px;
    top: 318px;
}
.coding-wrapper ul {
    color: #fff;
    font-size: 14px;
    font-family: Zen Maru Gothic;
    list-style-type: disc;
    line-height: 1.6;
    position: absolute;
    left: 173px;
    top: 356px;
}
.test-wrapper .illust {
    position: absolute;
    left: 625px;
    top: 70px;
}
.test-wrapper h2 {
    color: #fff;
    font-size: 20px;
    position: absolute;
    left: 642px;
    top: 318px;
}
.test-wrapper ul {
    color: #fff;
    font-size: 14px;
    font-family: Zen Maru Gothic;
    list-style-type: disc;
    line-height: 1.6;
    position: absolute;
    left: 649px;
    top: 356px;
}
.open-wrapper .illust {
    position: absolute;
    left: 1063px;
    top: 70px;
}
.open-wrapper h2 {
    color: #fff;
    font-size: 20px;
    position: absolute;
    left: 1100px;
    top: 318px;
}
.open-wrapper ul {
    color: #fff;
    font-size: 14px;
    font-family: Zen Maru Gothic;
    list-style-type: disc;
    line-height: 1.6;
    position: absolute;
    left: 1084px;
    top: 356px;
}
.coding-wrapper .test-wrapper .open-wrapper{
    width: 305px;
    height: 410px;
    margin: 50px;
}

.infoSec {
    height: 482px;
    background-image: url(../flowchart/img/infomation背景.png);
    background-repeat: no-repeat;
    background-size: cover;
    /*border: 2px dotted #309e53;*/
}
.infoSec .info-wrapper {
    text-align: center;
    color: #fff;
    padding-top: 230px;
}
.info-wrapper p {
    padding: 10px;
}
.btn-info {
    text-align: center;
    padding: 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 {
    height: 684px;
    background: url(../flowchart/img/fv.png);
    background-repeat: no-repeat;
    background-position: center;

    position: relative;
}
.fvSec header nav {
    width: 727px;
    height: 40px;
    position: absolute;
    top: 27px;
    left: 27%;
}
.logo-wrapper img {
    max-width: 80%;
}
header ul li {
    font-size: 16px;
}
.fvSec .div-container {
    flex-wrap: nowrap;
    padding-left: 32px;
}
.img-wrapper img {
    max-width: 85%;
}
.hearingSec {
    height: 900px;
    background-image: url(../flowchart/img/hearingSec背景.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    font-family: Zen Maru Gothic;
    position: relative;
    margin-bottom: 0px;
}
.outline-glow {
    font-size: 14px;
}
.top-text-wrapper {
    text-align: left;
    position: absolute;
    top: 165px;
    left: 88px;
}
.hearingSec h2 {
    font-size: 16px;
    line-height: 1.4;
    position: absolute;
    left: 55%;
    top: 38%;
}
.hearingSec h3 {
    font-size: 12px;
    font-family: Zen Maru Gothic;
    position: absolute;
    left: 64%;
    top: 33%;
}
.hearingSec h3 br {
    display: none;
}
.hearingSec .p-wrapper {
    font-size: 14px;
    padding: 406px 0px 0px 600px;
}
.hearingSec text {
    font-size: 12px;
    position: absolute;
    left: 261px;
    bottom: 180px;
}
.site-designingSec {
    height: 660px;
    background-image: url(../flowchart/img/サイト構成設計背景.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
}
.site-designingSec h2 {
    position: absolute;
    left: 51%;
    top: 26%;
}
.site-designingSec ul {
    font-size: 12px;
    position: absolute;
    left: 69%;
    top: 14%;
    line-height: 1.6;
}
.designingSec {
    background-size: contain;
    height: 2000px;
}
.designingSec .illust {
    position: absolute;
    left: 49%;
    top: -4%;
}
.designingSec h2 {
    position: absolute;
    left: 37%;
    top: 6%;
}
.designingSec .illust img {
    max-width: 70%;
}
.designingSec h2 img {
    max-width: 70%;
}
.designingSec ul {
    font-size: 14px;
    padding: 370px 0px 0px 670px;
}
.designingSec .mobile-first p {
    font-size: 12px;
        width: 200px;
    padding: 242px 0px 50px 294px;
}
.designingSec .mobile-first p br {
    display: none;
}
.mobile-first img {
    max-width: 22%;
    position: absolute;
    left: 51%;
    top: 43%;
    background-repeat: no-repeat;
}

.designingSec h3 {
    position: absolute;
    left: 39%;
    top: 64%;
}
.designingSec .text-wrapper {
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
    width: 250px;
    margin-top: 473px;
    margin-left: 19px;
    margin-right: 0px;
    padding: 17px;
}
.designingSec .p-wrapper {
    font-size: 9px;
    color: #fff;
    line-height: 1.6;
    position: absolute;
    left: 252px;
    bottom: 273px;
}
.coding-wrapper .illust {
    position: absolute;
    left:86px;
}
.coding-wrapper h2 {
    position: absolute;
    left: 100px;

}
.coding-wrapper ul {
    position:absolute;
    left: 71px;
    top:356px;
}
.test-wrapper .illust {
    position: absolute;
    left: 419px;
}
.test-wrapper h2 {
    position: absolute;
    left: 435px;
}
.test-wrapper ul {
    position: absolute;
    left: 443px;
}
.open-wrapper .illust {
    position: absolute;
    left: 751px;
}
.open-wrapper h2 {
    position: absolute;
    left: 790px;
}
.open-wrapper ul {
    position: absolute;
    left: 773px;
}
.infoSec {
    background-size: contain;
}
.infoSec .info-wrapper {
    padding-top: 157px;
}
.info-wrapper p {
    font-size: 14px;
    padding: 0px;
    margin-top: 19px;
    margin-left: 61px;
}
.footerSec ul {
    margin-left: 400px;
}
}



@media screen and (max-width:768px) {
.fvSec {
 height: 520px;
 background-size: cover;
}
.fvSec h1 {
    font-size: 26px;
    margin-top: 100px;
}
.fvSec .top-wrapper p {
    font-size: 12px;
}
.fvSec header nav {
    position: absolute;
    left: 11%;
}
.top-text-wrapper {
    position: absolute;
    top: 88px;
    left: 70px;
}
.fvSec .div-container {
    padding-left: 20px;
}
.hearingSec {
    height: 600px;
    background-size: contain;
}
.outline-glow{
    font-size: 10px;
}
.hearingSec h2 {
    font-size: 12px;
    position: absolute;
    top: 38%;
    left: 56%;
}
.hearingSec  h3 {
    position: absolute;
    left: 65%;
    top: 32%;
} 
.hearingSec .p-wrapper {
    font-size: 10px;
    padding:267px 0px 0px 479px;
}
.hearingSec text {
    font-size: 9px;
    position: absolute;
    left: 197px;
    bottom: 99px;
}
.site-designingSec {
    height: 500px;
}
.site-designingSec h2 {
 position: absolute;
 left: 22%;
 top: 17%;
}
.site-designingSec ul {
    font-size: 9px;
    position: absolute;
    left: 69%;
    top: 16%;
}
.designingSec {
    height: 1500px;
    background-image: url(../flowchart/img/デザイン制作背景rsp.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 50px;
}
.designingSec h2 {
    position: absolute;
    left: 33%;
    top: 5%;
}
.designingSec h3 {
    position: absolute;
    left: 35%;
    top: 64%;
}
.designingSec ul {
    font-size: 12px;
    padding: 270px 0px 0px 491px;
}
.designingSec .mobile-first p {
    font-size: 10px;
    width: 150px;
    padding: 141px 0px 50px 220px;
}
.mobile-first img {
    max-width: 22%;
    position: absolute;
    left: 51%;
    top: 43%;
    background-repeat: no-repeat;
}
.designingSec .text-wrapper {
    font-size: 11px;
    margin-top: 340px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #335067;
    border-radius: 10px;
}
.designingSec .p-wrapper {
    font-size: 12px;
    width: 550px;
    ;
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    left: 115px;
    bottom: 170px;
    background-color: #335067;
}
.designingSec .p-wrapper p br {
    display: none;
}
.codingSec {
    padding-top: 50px;
    margin-bottom: 50px;
}
.coding-wrapper .illust {
    position: absolute;
    left: 75px;
}
.coding-wrapper .illust img {
    max-width: 55%;
}
.test-wrapper .illust img {
    max-width: 55%
}
.open-wrapper .illust img {
    max-width: 55%;
}
.coding-wrapper h2 {
    font-size: 12px;
    position: absolute;
    left: 78px;
    top: 240px;
}
.coding-wrapper ul {
    font-size: 12px;
    position: absolute;
    left: 48px;
    top: 270px;
}
.test-wrapper .illust {
    position: absolute;
    left: 331px;
}
.test-wrapper h2 {
    font-size: 12px;
    position: absolute;
    left: 331px;
    top: 240px;
}
.test-wrapper ul {
    font-size: 12px;
    position: absolute;
    left: 331px;
    top: 270px;
}
.open-wrapper .illust {
    position: absolute;
    left: 584px;
}
.open-wrapper h2 {
    font-size: 12px;
    position: absolute;
    left: 610px;
    top: 240px;
}
.open-wrapper ul {
    font-size: 12px;
    position: absolute;
    left: 584px;
    top: 270px;
}
.infoSec {
    height: 300px;
    background-size: contain;
}
.infoSec .info-wrapper {
    padding-top: 107px;
}
.info-wrapper p {
    font-size: 12px;
    width: 290px;
    margin-top: 8px;
    margin-left: 250px;
}
.btn-info .gradient1 {
    padding: 8px 27px;
    margin-left: 50px;
}
.footerSec {
    height: 200px;
}
.footerSec img {
    max-width: 20%;
}
.footerSec ul {
    margin-left: 278px;
    padding-top: 29px;
}
.footerSec ul li {
    margin: 16px;
}
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 80%;
    margin: 0 auto;
}

.slider img {
    width: 100%;
    /*スライダー内の画像を横幅100%に*/
    height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin: 0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;
    /*絶対配置にする*/
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #637FBD;
    /*矢印の色*/
    border-right: 2px solid #637FBD;
    /*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {
    /*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    /*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align: center;
    margin: 20px 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 16px;
    /*ドットボタンのサイズ*/
    height: 16px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 20%;
    background: #ffffff;
    /*ドットボタンの色*/
}

.slick-dots .slick-active button {
    background: #637FBD;
    /*ドットボタンの現在地表示の色*/
}

/*========= ナビゲーションドロップダウンのための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: #f2f0df;
    padding: 20px;
    transition: all .3s;
}

nav ul li a:hover {
    color: #a09c9c;
}

/*==矢印の設定

*2階層目を持つliの矢印の設定
nav ul li.has-child::before {
    content: '';
    position: absolute;
    right: 115px;
    top: 45px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #243c58;
    border-right: 2px solid #243c58;
    transform: rotate(45deg);
}

/*3階層目を持つliの矢印の設定
nav ul ul li.has-child::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 21px;
    width: 6px;
    height: 6px;
    /*border-top: 2px solid #a09c9c;
    border-right: 2px solid #a09c9c;
    transform: rotate(45deg);
}

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

/*== 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: #243c58;
    /*制作の流れと料金表の間の枠線*/
    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: #789be69f;
}

/*==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;
    }
}