/*
Theme Name: creerwp
Author:Shizuka Yamano
Description:wordpressテーマ
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column,mypress,seazoostagram
*/


body{
  font-family: kozuka-mincho-pro, serif;
  font-style: normal;
  font-weight: 200;
  color: #001A43;
}

/*フェードアップ*/
  .fadeUp {
      animation-name: fadeUpAnime;
      animation-duration:2s;
      animation-fill-mode:forwards;
      opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
      transform: translateY(0px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/*========= ローディング画面遷移のためのCSS ===============*/
  #splash {
  	position: fixed;
  	width: 100%;
  	height: 100%;
  	background: #fadbda;
  	z-index: 9999999;
  	text-align:center;
  	color:#001A43;
    font-family: "kaisei-opti", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
  }

  #splash-logo {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
    width: 100%;
  }

/*========= 画面遷移のためのCSS ===============*/

  /*画面遷移アニメーション*/
    .splashbg{
      display: none;
    }

  /*bodyにappearクラスがついたら出現*/
    body.appear .splashbg{
      display: block;
      content: "";
      position:fixed;
    	z-index: 999;
      width: 100%;
      height: 100vh;
      top: 0;
	    left: 0;
      transform: scaleX(0);
      /*伸びる背景色の設定*/
        background: #BD3A57;
	    animation-name:PageAnime;
	    animation-duration:1.2s;
	    animation-timing-function:ease-in-out;
	    animation-fill-mode:forwards;
    }

    @keyframes PageAnime{
	    0% {
	    	transform-origin:right;
	    	transform:scaleX(0);
	    }
	    50% {
	    	transform-origin:right;
	    	transform:scaleX(1);
	    }
	    50.001% {
	    	transform-origin:left;
	    }
	    100% {
	    	transform-origin:left;
	    	transform:scaleX(0);
	    }
    }

  /*画面遷移の後現れるコンテンツ設定*/
    #container{
	    opacity: 0;/*はじめは透過0に*/
    }

  /*bodyにappearクラスがついたら出現*/
    body.appear #container{
	    animation-name:PageAnimeAppear;
	    animation-duration:1.5s;
	    animation-delay: 0.8s;
	    animation-fill-mode:forwards;
	    opacity: 0;
    }

    @keyframes PageAnimeAppear{
	    0% {
	      opacity: 0;
	    }
	    100% {
	      opacity: 1;
      }
    }
/*========= 画面遷移ここまで ===============*/

.menu-btn{
  display: none;
}

.home .mabile-header{
  display: none;
}

/*footer*/
  .creer-footer{
    display: block;
    position: relative;
    width: 450px;
    margin: 0 auto;
    padding-top: 100px;
    background-color: #FFF5E0;
  }

  .creer-footer h2{
    font-size: 1rem;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 50px;
    color: #BD3A57;
  }

  .creer-footer img{
    display: block;
    margin: 0 auto;
    width: 50%;
    padding-top: 30px;
  }

  /*ウィジェットとSNS*/
    .sitemap-sns{
      display: flex;
      justify-content: space-around;
      margin-top: 100px;
      padding-bottom: 50px;
    }

  /*widget*/
    .widget{
      margin-top: 2%;
      margin-bottom: 5%;
    }

    .widget a{
      text-decoration: none;
      color: #001A43;
    }

  /*最下部*/
    .end-line{
      position: relative;
      background-color: #BD3A57;
    }
  
    .end-line p{
      width: 100%;
      margin: 0 auto;
      text-align: center;
      color: #ffffff;
    }


/*pc背景*/
  .pc-background{
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: #fadbda;
    background-image: 
      repeating-linear-gradient(
        45deg,
        rgba(255,245,224,0.4),
        rgba(255,245,224,0.4) 100px,
        transparent 0px,
        transparent 200px
      ),
      repeating-linear-gradient(
        -45deg,
        rgba(253,238,234,0.4),
        rgba(253,238,234,0.4) 100px,
        transparent 0px,
        transparent 200px
      );
  }

/*pc左右*/
  .left-right {
    width: calc(50% - 200px);/*50%で分割して-200pxする*/
    height: 100vh;
    position: fixed;
  }

/*pc左側*/
  .pc-left{
    display: flex;/*左右上下中央に配置*/
    align-items: center;/*左右上下中央に配置*/
    justify-content: center;/*左右上下中央に配置*/
    line-height: 100px;
  }

  .menu{
    list-style: none;
  }

  .menu-item a{
    font-size: 1.5rem;
    text-decoration: none;
    color: #BD3A57;
  }

  .menu-item a:hover{
    color: #0e487f;
  }

/*pc右側*/
  .pc-right{
    right: 0;/*右側に来る要素を右寄せにする*/
    display: flex;/*左右上下中央に配置*/
    align-items: center;/*左右上下中央に配置*/
    justify-content: center;/*左右上下中央に配置*/
  }

  .pc-right img{
    width: 30%;
    
  }

/*pc中央*/
  .pc-center{
    position: relative;
    width: 450px;
    margin: 0 auto;
    background-color: #FFF5E0;
    padding-top: 110px;
  }

  .creer-title1{
    width: 100%;
    text-align: center;
  }

  .creer-title1{
    transform:rotate(-5deg);
    transform-origin:0 0;
    font-size: 1.3rem;
  }

  .creer-title2{
    transform:rotate(-7deg);
    font-size: 2rem;
    margin-top: -5%;
    text-align: center;
    margin: 0 auto;
    width: 90%;
  }

  .title-1, .title-2{
    font-family: ten-mincho-text, serif;
    font-style: normal;
    font-weight: 400;
    color: #BD3A57;
    margin-top: 3%;
    margin-bottom: 1%;
    background-color: #ffffff;
    letter-spacing: 5px;
    box-shadow: 2px 2px 4px #EF858C;
  }

  .top-img{
    width: 90%;
    display: block;
    margin: 0 auto;
    padding-top: 5%;
  }

  .pc-center h2{
    font-size: 1rem;
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
  }

  /*SNS*/
    .top-sns{
      padding-top: 30px;
      text-align: center;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
    }

    .top-sns :hover{
      transition: all 0.3s;
      -moz-transform: rotate(-20deg);
      -webkit-transform: rotate(-20deg);
      -o-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
      transform: rotate(-20deg);
    }

    /*ボタンの枠*/
      .flowbtn4{
        border-radius:20px;
        display:inline-block;
        width: 80px;
        height: 80px;
        font-size:3em;
        transition:.5s;
        text-decoration:none;
      }

      .flowbtn4:hover{
        color:#fff!important;
      }

    /* ボタン内テキスト調整 */
      .flowbtn4 div{
        font-size:1rem;
        font-weight:bold;
      }

    /* Instagram */
      .fa-instagram{
        display: table;
        margin: 0 auto;
        margin-top: 12px;
      }

      .flowbtn4.insta_btn2 {
        color:#BD3A57;
      }



  /*=== 9-1-4 矢印が動いてスクロールを促す  ====*/
    /*スクロールダウン全体の場所*/
      .scrolldown4{
        /*描画位置※位置は適宜調整してください*/
	      position:fixed;
        margin-bottom: 1%;
        width: 400px;
        z-index: 100;
        /*矢印の動き1秒かけて永遠にループ*/
	      animation: arrowmove 1s ease-in-out infinite;
      }

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

    /*Scrollテキストの描写*/
      .scrolldown4 span{
        /*描画位置*/
	      position: absolute;
	      right: 10px;
	      bottom: 10px;
        /*テキストの形状*/
	      font-size: 1rem;
	      letter-spacing: 0.05em;
        font-family: ten-mincho-text, serif;
        font-style: normal;
        font-weight: 600;
        color: #BD3A57;
      }

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

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


  /*間の画像*/
    .delimiter-img{
      width: 100%;
      margin-top: 60px;
    }

  /*何をする団体？*/
    .home section{
      width: 90%;
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }

    .home section h1{
      font-size: 1.5rem;
    }

    .home section h2{
      margin-top: 10px;
    }

    .home section p{
      text-align: left;
      margin-top: 20px;
    }

    .creer-img1{
      display: block;
      margin: 0 auto;
      width: 300px;
      height: 200px;
      color: #FADBDA;
      opacity: 0.8;
      background-image: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/26123257_s.jpg);
      background-size: contain;
      margin-bottom: 50px;
    }

    .creer-img2{
      display: block;
      margin: 0 auto;
      width: 300px;
      height: 200px;
      color: #FADBDA;
      opacity: 0.8;
      background-image: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/4308676_s.jpg);
      background-size: cover;
      margin-bottom: 100px;
    }

    .creer-french{
      text-align: center;
      font-weight: 600;
      width: 98%;
      margin: 0 auto;
    }

    .circle-line{
      width: 100%;
      display: block;
      margin: 0 auto;
      margin-top: 100px;
    }


  /*主な活動内容*/
    .creer-activities{
      background-image: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/back-scaled.png);
      background-size: cover;
      padding-top: 100px;
      padding-bottom: 50px;
    }

    .activities-background{
      width: 90%;
      display: block;
      margin: 0 auto;
      padding-top: 50px;
      padding-bottom: 50px;
      background-color: rgba(255,255,255,0.4);
    }

    .activities-background h1, .activities-background p{
      margin-left: 40px;
    }

    .activities-background h1{
      margin-bottom: 30px;
    }

    .activities-background p{
      margin-top: 50px;
    }

    .creer-content{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      line-height: 50px;
    }

    .creer-content ul{
      list-style: none;
    }

    /*slick*/
      .slider-line{
        overflow: hidden;
        margin: 0 auto;
      }

      .slider2 img{
        width: 250px;
        height: 180px;
        margin: 0 auto;
        margin-top: 1%;
      }

      /*ピンクの透明四角をslickに乗せる*/
      .firter{
        display: inline-block;
        width: 100%;
        height: 180px;
        position: relative;
        bottom: 190px;
        background-color: #FADBDA;
        opacity: 0.2;
      }
      
    /*間の画像*/
      .delimiter-img2{
        width: 100%;
        margin-top: -100px;
      }

  /*これからの予定*/
    .creer-event{
      width: 90%;
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }

    .creer-event b{
      font-size: 1.2rem;
      font-weight: 600;
      text-shadow:3px 3px 0 #faf4d3;
      background-color: #ffffff;
    }

    .creer-event a{
      text-decoration: none;
      display: block;
      margin-top: 10px;
      padding-bottom: 10px;
    }


/*category-schedule.php category-pastevents.php*/
  .archive main .pc-center{
    padding-top: 8px;
  }

  /*一番上のSNSアイコン*/
    .archive main .sns{
      padding-top: 0px;
      text-align: left;
      padding-left: 5px;
      position: fixed;
    }

    .archive main .flowbtn4{
      font-size: 2rem;
    }

  .schedule-title, .pastevent-title{
    margin-top: 70px;
    text-align: center;
    background-color: #ffffff;
  }

  /*タイトル下のライン画像*/
  .schedule-line{
    background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line3.png);
    background-size: cover;
    display: block;
    width: 100%;
    height: 20px;
    margin-top: -10px;
  }

  .pastevent-line{
    background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line1.png);
    background-size: cover;
    display: block;
    width: 100%;
    height: 20px;
    margin-top: -15px;
  }

  /*記事部分*/
    .schedule-content, .pastevent-content{
      width: 90%;
      margin: 0 auto;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .schedule-content p, .pastevent-content p{
      text-align: left;
    }

    .schedule-content a, .pastevent-content a{
      font-size: 1rem;
      display: block;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 10px;
      margin-top: 10px;
      line-height: 30px;
      color: #001A43;
    }

    .schedule-content a:visited, .pastevent-content a:visited{
      color: #BD3A57;
    }


  /*wp_pagenavi*/
    .wp-pagenavi{
      display: flex;
      justify-content: flex-start;
      margin-top: 50px;
    }

    /*最初の数字と続いていく数字*/
    .current, .archive .page{
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 2em;
      text-decoration: none;
      padding-left: 13px;
    }

    .wp-pagenavi a{
      margin-top: -8px;
      width: 50px;
      height: 50px;
      line-height: 40px;
      padding-left: 12px;
      font-size: 3em;
    }

    /*>>と<<の部分*/
    .nextpostslink, .previouspostslink{
      width: 50px;
      height: 50px;
      line-height: 40px;
      padding-left: 12px;
      font-size: 4em;
      text-decoration: none;
    }
  
    .pages{
      display: none;
    }

/*single.php*/
  .single .pc-center{
    padding-top: 5px;
  }

  /*一番上のSNSアイコン*/
    .single .sns{
      padding-top: 0px;
      text-align: left;
      padding-left: 5px;
      position: fixed;
    }

    .single .flowbtn4{
      font-size: 2rem;
    }

  .schedule-single-title, .single-title{
    margin-top: 70px;
    text-align: center;
    background-color: #ffffff;
  }

  /*タイトル下のライン画像*/
    .single-line{
      background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line4.png);
      background-size: cover;
      display: block;
      width: 100%;
      height: 20px;
      margin-top: -10px;
    }

  .schedule-single-title h1, .single-title h1{
    font-size: 1.5rem;
  }

  .single-background p{
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  /*ギャラリーの部分*/
  .wp-block-gallery{
    width: 90%;
    margin: 0 auto;
  }

  /*画像部分*/
    .wp-block-image{
      text-align: center;
    }

/*single-toparea.php*/
  /*タイトル下のライン画像*/
    .schedule-single-line{
      background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line3.png);
      background-size: cover;
      display: block;
      width: 100%;
      height: 20px;
      margin-top: -10px;
    }

  .schedule-single-content{
    width: 100%;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/back-scaled.png);
    background-size: contain;
    background-repeat: repeat;
  }

  .schedule-single-background{
    width: 95%;
    display: block;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: rgba(255,255,255,0.7);
  }

  .schedule-single-background p, .schedule-single-background h1, .schedule-single-background h2, .schedule-single-background h3, .schedule-single-background h4{
    width: 95%;
    margin: 0 auto;
  }

  .schedule-single-background h2{
    width: 95%;
  }

  .schedule-single-background strong{
    font-weight: 600;
  }

  /*カスタム投稿タイプのsingleに表示される画像*/
    .schedule-single-background img{
      margin-top: 10px;
      margin-bottom: 10px;
    }
   
  .back{
    margin-top: 50px;
    margin-bottom: 5%;
  }

  .back a{
    display: block;
    font-size: 1rem;
    text-decoration: none;
    padding-left: 5%;
    padding-right: 5%;
    color: #001A43;
  }

  .back a:visited{
    color: #BD3A57;
  }

/*page-member.php*/
  .page-id-8 .pc-center{
    padding-top: 5px;
  }

  /*一番上のSNSアイコン*/
    .page-id-8 main .sns{
      padding-top: 0px;
      text-align: left;
      padding-left: 5px;
      position: fixed;
    }

    .page-id-8 main .flowbtn4{
      font-size: 2rem;
    }

  .member-title{
    margin-top: 70px;
    text-align: center;
    background-color: #ffffff;
  }

  /*タイトル下のライン画像*/
    .member-line{
      background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line2.png);
      background-size: cover;
      display: block;
      width: 100%;
      height: 20px;
      margin-top: -10px;
    }

  .member-all{
    margin-top: 50px;
  }

  /*写真と名前・肩書・SNS・HPを横並びに*/
    .member-flex{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin: 0 auto;
    }

    .member-flex img{
      width: 40%;
      margin-left: 5px;
    }

  /*名前部分のラインカラー*/
    .name-color1{
      background-color: #61C1BE;
    }

    .name-color2{
      background-color: #6C9BD2;
    }

    .name-color3{
      background-color: #EF858C;
    }

    .name-color4{
      background-color: #FFF67F;
    }

    .name-color h3{
      color: #ffffff;
      text-align: center;
      letter-spacing: 3px;
    }

  .name-sns p{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
    line-height: 25px;
    font-weight: 600;
  }

  /*SNS,HP*/
    .hp-sns{
      margin-top: 5px;
      margin-left: 10px;
      margin-right: 5px;
    }

    .hp-sns a{
      color: #BD3A57;
      padding-right: 15px;
    }

  /*キャリア本文*/
    .career{
      width: 90%;
      margin: 0 auto;
      margin-top: 15px;
    }

    .career ul{
      padding-left: 5%;
    }

  /*間のライン画像*/
    .page-id-8 main .circle-line {
      margin-top: 80px;
      margin-bottom: 100px;
    }

  /*女性のイラスト*/
    .woman-img{
      width: 200px;
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }

  /*カスタム投稿タイプ表示*/
    .page-id-8 main .member-news{
      width: 90%;
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }

    .page-id-8 main .member-news b{
      font-size: 1.2rem;
      font-weight: 600;
      text-shadow:3px 3px 0 #faf4d3;
      background-color: #ffffff;
    }

    .page-id-8 main .member-news a{
      text-decoration: none;
      display: block;
      margin-top: 10px;
      padding-bottom: 10px;
    }

    .page-id-8 main .member-news p{
      text-align: left;
      font-size: 1rem;
    }

/*page-sitemap*/
   .page-id-6 .pc-center{
    padding-top: 5px;
  }

  /*一番上のSNSアイコン*/
    .page-id-6 main .sns{
      padding-top: 0px;
      text-align: left;
      padding-left: 5px;
      position: fixed;
    }

    .page-id-6 main .flowbtn4{
      font-size: 2rem;
    }

  .sitemap-title{
    margin-top: 70px;
    text-align: center;
    background-color: #ffffff;
  }

  /*タイトル下のライン画像*/
    .sitemap-line{
      background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line2.png);
      background-size: cover;
      display: block;
      width: 100%;
      height: 20px;
      margin-top: -10px;
    }

  /*プラグインで作成したサイトマップ*/
    .wsp-pages-list, .wsp-posts-list, .wsp-topareas-list, .wsp-authors-list{
      width: 80%;
      margin: 0 auto;
    }


  /*自作sitemap内容*/
    .coment-out{
      display: none;
    }

    .site-map{
      margin-top: 5%;
    }

    .site-map li{
      list-style: none;
    }

    .site-map ul{
      padding-left: 5%;
    }

    .page-id-6 main h2{
      font-size: 1.5rem;
      color: #BD3A57;
    }

    .site-map a{
      text-decoration: none;
    }

    .site-map p{
      margin-top: 5%;
      margin-left: 22px;
    } 
    
    /*カスタム投稿タイプ*/
      .sitemap-news{
        padding-left: 5%;
      }

      .sitemap-news h2{
        margin-top: 50px;
        margin-left: -5px;
      }

      .sitemap-news a{
        text-decoration: none;
      }

    /*固定ページ*/
      .kotei-page{
        margin-top: 50px;
      }

/*page-privacypolicy.php*/
   .page-id-3 .pc-center{
    padding-top: 5px;
  }

  /*一番上のSNSアイコン*/
    .page-id-3 main .sns{
      padding-top: 0px;
      text-align: left;
      padding-left: 5px;
      position: fixed;
    }

    .page-id-3 main .flowbtn4{
      font-size: 2rem;
    }

  .pp-title{
    margin-top: 70px;
    text-align: center;
    background-color: #ffffff;
  }

  /*タイトル下のライン画像*/
    .pp-line{
      background: url(http://creeronojo.stars.ne.jp/wp-content/uploads/2025/06/color-line2.png);
      background-size: cover;
      display: block;
      width: 100%;
      height: 20px;
      margin-top: -10px;
    }

  /*プライバシーポリシーの内容*/
    .page-id-3 .pc-center article{
      width: 90%;
      margin: 0 auto;
    }


/*スマホ*/
@media(max-width:450px){
  .pc-background{
    max-width: 450px;
  }

  .pc-right{
    display: none;
  }

  .pc-left{
    height: auto;
    position: static;
  }

  .pc-center, .creer-footer{
    width: 100%;
  }

  /*スマホ用ヘッダー*/
    .mabile-header, .home .mabile-header{
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: fixed;
      top: 0;
      padding-top: 10px;
      z-index: 999;
    }

    .mabile-header .sns, .archive main .sns, .page-id-8 main .sns, .page-id-3 main .sns, .page-id-6 main .sns{
      padding-top: 10px;
      text-align: left;
      padding-left: 30px;
      position: static;
    }

    /*インスタアイコン*/
      .flowbtn4.insta_btn2{
        width: 50px;
        height: 50px;
      }

      .mabile-header .flowbtn4{
        font-size: 2rem;
      }

    /*アイコン下の【Instagram】の文字位置*/
      .top-sns div, .footer-sns div{
        margin-left: -20%;
      }

  /*スクロール矢印*/
    .scrolldown4{
      width: 90%;
    }
  
  /*footer*/
    .end-line{
      width: 100%;
    }


  /*ハンバーガーメニュー*/
    /*----------------------------
    * メニュー開閉ボタン
    *----------------------------*/
      .menu-btn{
        width: 70px;
        height: 70px;
        position: relative;
        right: 10%;
        display: block;
      }

      .menu-btn:hover{
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }

      /*押したとき*/
        .menu-btn:active {
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
        }

      /*MENUをCLOSEに*/
        .menu-btn ::after {
          content:"Menu";
          position: absolute;
          font-size: 1.2rem;
          right: 10%;
          line-height: 10%;
          font-weight: 600;
          text-transform: uppercase;
        }

        .menu-btn.active ::after {
          content:"Close";
          right: 10%;
          font-weight: 600;
        }
      /*MENUをCLOSEに、ここまで*/ 

    /*----------------------------
    * メニュー本体
    *----------------------------*/
      .menu{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fadbda;
        background-image: 
          repeating-linear-gradient(
            45deg,
            rgba(255,245,224,0.4),
            rgba(255,245,224,0.4) 100px,
            transparent 0px,
            transparent 200px
          ),
          repeating-linear-gradient(
            -45deg,
            rgba(253,238,234,0.4),
            rgba(253,238,234,0.4) 100px,
            transparent 0px,
            transparent 200px
          );
      }

      .menu__item{
        width: 100%;
        height: auto;
        padding: .5em 1em;
        text-align: center;
        color: #fff;
        box-sizing: border-box;
      }

      .menu-item a{
        font-size: 1.5rem;
        padding-top: 8%;
        padding-bottom: 2%;
        margin-bottom: 10%;
        text-decoration: none;
        font-weight: 600;
      }

    /*----------------------------
    * アニメーション部分
    *----------------------------*/

      /* アニメーション前のメニューの状態 */
        .menu{
          /*transform: translateX(100%);みぎ横から出てくる*/
          transition: all 0.5s linear;
          visibility:hidden;
          opacity: 0;
        }

      /* アニメーション後のメニューの状態 */
        .menu.is-active{
          /*transform: translateX(0);みぎ横から出てくる*/
          visibility:visible;
          opacity: 1;
        }

}