@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
*/

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


/* 通知エリアの流れるテキスト */
.notice-area {
  overflow: hidden; /* はみ出た部分を隠す */
  white-space: nowrap; /* 折り返しなしで1行表示 */
}

/* 通知メッセージのスタイル */
.notice-area-message {
  display: inline-block;
  padding-left: 100%; /* 初期位置を右端に */
  animation: slideMessage 12s linear infinite;
}

/* スライドアニメーションの定義 */
@keyframes slideMessage {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* PCの速度調整 */
@media screen and (min-width: 1024px) {
  .notice-area-message {
    animation-duration: 20s;
  }
}






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


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

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




/* 通知エリアの流れるテキスト */
.notice-area {
  overflow: hidden; /* はみ出た部分を隠す */
  white-space: nowrap; /* 折り返しなしで1行表示 */
}

/* 通知メッセージのスタイル */
.notice-area-message {
  display: inline-block;
  padding-left: 100%; /* 初期位置を右端に */
  animation: slideMessage 12s linear infinite;
}

/* スライドアニメーションの定義 */
@keyframes slideMessage {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* PCの速度調整 */
@media screen and (min-width: 1024px) {
  .notice-area-message {
    animation-duration: 20s;
  }
}





/* ページトップボタンの全体配置 */
#page-top {
    position: fixed !important;
    right: 20px;
    bottom: 20px;
    z-index: 99999 !important;
    display: none;
}

/* 中身を横並びにする設定 */
.pg-content {
    display: flex;
    align-items: center; /* 垂直方向の真ん中揃え */
    gap: 10px;           /* イラストと文字の間隔 */
}

#page-top a {
    text-decoration: none;
    display: block;
    color: #333;
}

/* イラストのサイズ */
.pg-img {
    width: 100px !important; /* お好みのサイズに調整してください */
    height: auto;
    display: block;
}

/* 矢印と文字の並び（ここを右横・縦書きに調整） */
.pg-text {
    display: flex;
    flex-direction: column; /* 矢印と文字を縦に並べる */
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
}

/* 矢印の向きを横並びに合わせて調整 */
.arrow {
    font-size: 16px;
    margin-bottom: 4px;
    display: inline-block;
    transform: rotate(0deg); /* 上向き矢印 */
}

/* Page Topの文字を縦書きにする（CASCADE風） */
.label {
    writing-mode: vertical-rl;
    letter-spacing: 0.1em;
    text-orientation: mixed;
}

/* ホバー時の動き（右に少し動く） */
#page-top a:hover {
    transform: translateX(-5px);
    transition: transform 0.3s;
}

/* スマホ（画面幅768px以下）の時の設定 */
@media screen and (max-width: 768px) {
    /* イラストを非表示にする */
    .pg-img {
        display: none !important;
    }

    /* 文字と矢印の配置を微調整 */
    #page-top {
        right: 15px;  /* 右端に寄せすぎないよう調整 */
        bottom: 15px; /* 下端の調整 */
    }

    /* 文字の背景を少し見やすくしたい場合は以下を追加（お好みで） */
    .pg-text {
        background: rgba(255, 255, 255, 0.8); /* 半透明の白背景 */
        padding: 5px;
        border-radius: 5px;
    }
}