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

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

/*各背景の透明化*/
#main {
  background: transparent;
}


/*ヘッダー構成*/
.header-container {
background-color: rgb(255 255 255 / 33%)!important;
}


/*フッター構成*/
.footer-container{
  background-color: rgb(255 255 255 / 33%);
}

.footer {
  padding: 0 0;
}

.footer-bottom {
  padding: 35px;
}

/*パンくずリストのフォントサイズなど設定*/
.breadcrumb-home{
	color: black;
	font-size: 15px;
}

.breadcrumb-item{
	color: black;
	font-size: 15px;
}

.breadcrumb-caption{
	color: black;
	font-size: 15px;
	font-weight: Medium;
}

/*トップページの「インフォメーション」テキスト背景透過*/
.info{
background-color: rgb(255 255 255 / 33%)!important;
}


/* ======================================= */
/* 1. フロントページ（body.home）設定 */
body.home {
  /* 背景画像に関するプロパティは削除 */
  background-image: none;
  background-color: #000; /* 背景が透けた際の色 */
}

/* 追加部分: ヘッダーの非表示 */
body.home header {
  display: none; /* ヘッダー要素を非表示にする */
}

/* 2. フロントページ背景用の擬似要素作成、背景とアニメーション設定 */
/* 画面全体に固定配置、コンテンツ下に配置 */
body.home::before {
  content: '';
  display: block;
  position: fixed; /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100vw; /* 画面幅 */
  height: 100vh; /* 画面高 */
  z-index: -1; /* コンテンツ下に配置 */

  /* 背景画像の設定 */
  background-image: url(https://at-ty.com/wp-content/uploads/2025/11/home_bg.jpg); 
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat;

  /* アニメーション適用 */
  animation: bg-move 55s linear infinite alternate;
  
  /* iOSでのパフォーマンス向上・ちらつき対策 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0); 
}

/* 3. フロントページ背景上下アニメーションのキーフレーム設定 */
/* ======================================= */
@keyframes bg-move {
  0% {
    background-position: center bottom;
  }
  100% {
    background-position: center top;
  }
}


/* ======================================= */
/* ロゴ要素 (.appeal-link-logo) CSS記述 */
/* ======================================= */

/* 1. ロゴ要素 (.appeal-link-logo) レスポンシブ設定と基本スタイル、アニメーション構成 */
.appeal-link-logo {
    /* レスポンシブ設定 */
    width: auto;
    max-width: 700px !important; /* ☆ロゴ画像の素材サイズ設定 */
    height: auto !important;

    /* 基本スタイル */
    position: relative !important;
    z-index: 100 !important;
    box-shadow: none;
    background-color: transparent;
    border-radius: 5px;
    
    /* 初期透明度とフィルターを強制設定 */
    opacity: 0; /* 初期透明度を0に設定 */
    filter: hue-rotate(0deg); /* 初期色相回転の開始値を強制 */

    /* トランジション（ホバー時の滑らかな変化）*/
    transition: transform 0.3s ease-out,
                box-shadow 0.3s ease-out,
                filter 0.3s ease-out,
                background-color 0.3s ease-out,
                opacity 0.3s ease-out;

    /* アニメーションの統合 (すべて 0.5秒遅延で開始) */
    /* animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]; */
    animation:
        /* 1. ふわふわアニメーション (無限ループ) */
        sway-logo 2.5s ease-in-out 0.5s infinite alternate,
        /* 2. 読み込み時フェードイン (1回実行、状態維持) */
        fade-in-initial 2s ease-out 0.5s 1 normal forwards, /* 1回実行 */
        /* 3. 色相回転アニメーション */
        color-shift 5s linear 0.5s infinite normal; /* 無限ループ */

    /* Androidでのfilterアニメーション安定化対策 (will-change & translateZ) */
    will-change: transform, filter, opacity;
    /* translateZ(0) は scale(1) の後に記述し、3D空間での描画を強制 */
    transform: scale(1) translateZ(0);
}

/* 2. ロゴ画像 (img) 要素の縦横比維持と幅設定 */
.appeal-link-logo img {
    display: block;
    width: 100%; /* 親要素の幅に合わせて伸縮 */
    height: auto; /* 縦横比を維持 */
    transition: filter 0.3s ease-out; /* 画像反転のためのトランジション */
}

/* ======================================= */
/* 3. アニメーションキーフレーム定義 */
/* ======================================= */

/* 前後（奥行き）浮遊アニメーション */
@keyframes sway-logo {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* 画像の色変化アニメーション（色相回転） */
@keyframes color-shift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* 修正箇所: 読み込み時フェードインアニメーション (opacityのみ) */
@keyframes fade-in-initial {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}

/* ======================================= */
/* 4. PC/マウス操作時 ホバー時のエフェクト */
/* ======================================= */
@media (hover: hover) and (pointer: fine) {
    .appeal-link-logo:hover {
        /* 普段のふわふわ・色相回転アニメーションを停止 */
        animation-play-state: paused;

        /* 上に浮き上がる (translateZ(0) も維持) */
        transform: translateY(-5px) scale(1.0) translateZ(0);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* 影 */
        background-color: rgba(0, 0, 0, 0.3); 
        
        /* ロゴ要素本体にfilterがかかっていると画像(img)filterと干渉するためリセット */
        filter: none;
    }

    .appeal-link-logo:hover img {
        /* ホバー時の画像反転を適用 */
        filter: invert(1);
    }
}

/* ======================================= */
/* 5. モバイル表示時（768px以下）の設定 */
/* ======================================= */
@media screen and (max-width: 768px) {

    /* 1. ロゴ要素 (.appeal-link-logo) の通常時リセット */
    .appeal-link-logo {
        box-shadow: none !important;
        background-color: transparent !important;
    }

    /* 2. モバイルのホバー/タッチ時 および タップ直後のアクティブ時の制御 */
    .appeal-link-logo:hover,
    .appeal-link-logo:active {

        /* アニメーション停止を強制的に実行状態 (running) に戻す */
        animation-play-state: running !important;

        /* PCホバーによる全スタイル変化を無効化 */
        transform: translateZ(0) !important; 
        box-shadow: none !important;
        background-color: transparent !important;
    }

    /* 3. ロゴ画像 (img) 要素のホバー/アクティブ時の制御 */
    .appeal-link-logo:hover img,
    .appeal-link-logo:active img {
        filter: none !important;
    }
}


/* ======================================= */
/*四角.boxアニメーション環境設定*/
/* 全体設定: モバイルでの横スクロール対策 */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

/* 1. 親ラッパー: .box-wrapper (フルスクリーン設定と透明化) */
.box-wrapper {
    width: 100%;    
    height: 100vh;  
    position: relative; 
    overflow: hidden; 
    z-index: 5; 
    
    position: absolute !important; 
    top: 0; 
    left: 0;
    
    /* 背景透過させ、body.homeの背景画像表示 */
    background: transparent !important; 
}

/* Cocoonテーマのアピールエリアコンテナの背景を透明化 (上書き用) */
#appeal, .appeal-content {
    background: transparent !important;
}

/* 2. アニメーション背景専用コンテナ */
.box-animation-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; 
    background: transparent !important; 
}

/* 3. 中央コンテンツ専用コンテナ (ロゴとスクロールの中央配置) */
.box-center-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100; /* 最前面 */

    /* Flexbox 中央配置 (縦並び) */
    display: flex !important;
    flex-direction: column !important;    
    justify-content: center !important;   
    align-items: center !important;       
}

/* スペーサー: .box-spacer (コンテンツの重なり解消) */
.box-spacer {
    height: 100vh;
    z-index: 1; 
}


/* ======================================= */
/* ロゴ要素とScroll要素の設定 */
/* ======================================= */
.appeal-link-logo {
    position: relative; 
    max-width: 100% !important;
    height: auto !important;
}
.scroll {
    margin-top: 30px !important; 
    color: #000000; /* テキストの色を黒に変更 */
    font-size: 16px;
    letter-spacing: 0.1em;
    text-align: center;
    display: block !important; 
    padding-top: 70px; 
    position: relative; 
    z-index: 100 !important;
}

/* Scroll 擬似要素 (アニメーションする矢印) */
.scroll::before {
    animation: scroll 2.1s infinite;
    border: solid #000000; /* 矢印の色を黒に変更 */
    border-width: 0 0 1px 1px;
    content: "";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: rotate(-45deg);
    width: 20px;
    height: 20px;
}
@keyframes scroll {
    0% { transform: rotate(-45deg) translate(0, 0); }
    80% { transform: rotate(-45deg) translate(-30px, 30px); }
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

/* 図形素材:.box-animation-bg div 要素 */
.box-animation-bg div {
    height: 80px;
    width: 80px;
    position: absolute; 
    animation: animate 5s linear infinite;
    background: transparent;
    border: solid 3px rgba(255,255,255,0.8); /* アニメーションの色は白のまま維持 */
    pointer-events: none; 
    z-index: 10;
    /* Flexboxの子要素としての振る舞いを無効化 */
    align-self: flex-start !important; 
    margin: 0 !important;
}


/* ================================================= */
/* boxアニメーション要素の個別配置と速度設定 */
/* ================================================= */
.box-animation-bg div:nth-child(1) {
    top: 15%; 
    left: 20%;
    animation: animate 12s linear infinite;
    animation-delay: 5.0s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(2) {  
    top: 65%;
    left: 88%;
    animation: animate 14s linear infinite;
    animation-delay: 4.5s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(3) {
    top: 90%; 
    left: 10%;
    animation: animate 8s linear infinite;
    animation-delay: 6.0s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(4) {  
    top: 23%;
    left: 78%;
    animation: animate 10s linear infinite;
    animation-delay: 4.0s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(5) {
    top: 50%; 
    left: 5%;
    animation: animate 16s linear infinite;
    animation-delay: 3.5s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(6) {  
    top: 74%;
    left: 66%;
    animation: animate 9s linear infinite;
    animation-delay: 2.5s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(7) {
    top: 5%; 
    left: 15%;
    animation: animate 13s linear infinite;
    animation-delay: 3.0s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(8) {
    top: 75%; 
    left: 18%;
    animation: animate 11s linear infinite;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(9) {  
    top: 48%;
    left: 90%;
    animation: animate 7s linear infinite;
    animation-delay: 5.5s;
    animation-fill-mode: backwards;
}
.box-animation-bg div:nth-child(10) { 
    top: 26%;
    left: 71%;
    animation: animate 15s linear infinite;
    animation-delay: 2.0s;
    animation-fill-mode: backwards;
}

/* キーフレームアニメーションの定義 */
/* ================================================= */
@keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(0);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        transform: scale(1.5) translateY(-90px) rotate(360deg);
        opacity: 0;
    }
}


/* ================================================= */
/* Scroll要素: ホバー時の色変更 */
/* ================================================= */
.scroll:hover {
    color: white !important; /* テキストの色を白に変更 */
}
/* Scroll矢印アイコン: ホバー時の色変更 */


.scroll:hover::before {
    border: solid white !important; /* 矢印の色を白に変更 */
    border-width: 0 0 1px 1px !important; 
}


/* ======================================= */
/* モバイル表示時の調整（画面幅 768px以下） */
/* ======================================= */
@media screen and (max-width: 768px) {
    
    /* 1. ヘッダーの余白・最大幅の強制解除（ロゴを画面いっぱいにする） */
    .header-container, 
    .header-in, 
    .site-header,
    .site-header-container,
    .header-widgets { 
        /* 左右の余白を削除 */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        /* 幅の制限を解除し、画面いっぱいにする */
        width: 100% !important;
        max-width: 100vw !important; /* ビューポート幅いっぱいに */
    }

    /* 2. ロゴ要素を画面幅いっぱいに強制 */
    .appeal-link-logo {
        width: 100% !important; 
        max-width: 100% !important; /* モバイルでは画面幅が最大幅となる */
        height: auto !important; /* 念のため縦横比維持を再設定 */
    }

    /* 3. ロゴ画像も要素いっぱいに広げる */
    .appeal-link-logo img {
        width: 100% !important;
        height: auto !important;
    }
}


/* ---iPhoneの画像長押し保存制限CSS--- */
img {
    /* iPhone/iPadでの長押しメニュー表示を抑制 */
    -webkit-touch-callout: none !important;
}


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

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

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

}