@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){
  /*必要ならばここにコードを書く*/
}

.youtube-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.youtube-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}


.map-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/* トップページのタイトル（SP_t）を消す */
.home .entry-title {
    display: none;
}

/* トップページの余白と隙間を詰める */
.home .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.home .main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 横移動 */

/* コンテナ設定 */
.marquee {
    overflow: hidden; /* コンテナ外の要素を隠す */
    position: relative; /* アニメーション基準点 */
    width: 100%; /* コンテナの幅を画面幅に合わせる */
    white-space: nowrap; /* テキストを1行にする */
}

/* テキストのアニメーション設定 */
.marquee span {
    display: inline-block; /* インラインブロックで表示 */
    white-space: nowrap; /* テキストを折り返さない */
    padding-right: 50px; /* テキスト間にスペース */
    animation: marquee 15s linear infinite; /* アニメーション設定 */
}

/* アニメーション動作 */
@keyframes marquee {
    0% {
        transform: translateX(100vw); /* 右端の外からスタート */
    }
    100% {
        transform: translateX(-100vw); /* 左端の外まで移動 */
    }
}



/* 横移動 

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-200%); /* 複数回分の移動 */
    }
}

*/