@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.container {
    padding:0;
}


/*ヘッダー*/
#header-container {
    align-items: center;
    background-color: transparent;
    display: flex;
    justify-content: center;
    height: 7.5em;
}

/*グローバル(ナビゲーション)メニュー*/
#navi {
    background-color: transparent;
}



.front-top-page .header-container, .front-top-page .navi {
    background-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.front-top-page #navi .navi-in a {
    color: #ededed;
    font-size: 13px;
}

.front-top-page .logo {
    background: url("ロゴ画像URL") no-repeat;
    background-size: contain;
    background-position: center;
}

.front-top-page .site-logo-image {
    visibility: hidden;
}


/*z-indexが負の数値でもscrollボタンを押せるようにするための処置*/
.front-top-page .container {
    position: relative;
    z-index: 0;
}

.front-top-page .content {
    margin-top: 0;
}

.front-top-page .article-header {
    display: none;
}



/*アピールエリア*/
.appeal {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    position: relative;
}

.appeal-content {
    background-color: transparent;
    padding: 0;
}

.appeal-message {
    color: #ededed;
    margin: 0;
}

/*アピールエリアボタン*/
.appeal-button {
    background-color: transparent!important;
    color: #ededed;
    font-weight: normal;
    font-size: 0.75em;
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
}

/*アピールエリア矢印*/
.appeal-button:before {
    animation: move 2s infinite alternate ease-in-out;
    content: url("矢印の画像URL");
    display: block;
}
@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html {scroll-behavior: smooth;}



/*////////////////////
////モバイル用の設定////
////////////////////*/
.mobile-header-menu-buttons {
    height: 86px;
}

.mobile-menu-buttons {
    align-items: center;
}

.mobile-menu-buttons>li {
    padding: 0;
}

.mobile-menu-buttons .menu-icon {
    line-height: 0;
}

.mobile-menu-buttons .menu-caption {
    display: none;
}

.front-top-page .mblt-header-mobile-buttons {
    margin-top: 0;
}

.front-top-page .mobile-header-menu-buttons {
    background-color: transparent;
    box-shadow: none;
}

.front-top-page .menu-button {
    color: #ededed;
}

.front-top-page .logo-menu-button {
    background: url("ロゴ画像URL") no-repeat;
    background-position: center;
    background-size: auto 44px;
}



/*///////////////////////////
////レスポンシブデザイン設定////
///////////////////////////*/
/*1023px以下*/
@media screen and (max-width: 1023px){
  #header-container {
      height: 40px;
  }
  .mblt-header-mobile-buttons {
      margin-top: 0;
  }
  .appeal {
      height: 100vh;
      background-image: url("モバイル用にサイズを小さくした画像URL");
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
    .appeal-content {
        margin-top: -3em!important;/*下の.appeal-buttonは効いているの　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　になぜこちらは効かない…*/
    }
    .appeal-button {
        bottom:  10em;
    }
}
@media screen and (max-width: 480px){/*なのにこちらでは効く謎*/
    .appeal-content {
        margin-top: -3em;
    }
}