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

/************************************
** 子テーマ用のスタイルを書く
************************************/

a, .a-wrap {
    color: #000000;
}

/*必要ならばここにコードを書く*/
.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}
/* 画像ブロックは以下で画面幅に */
.cstm-blk-fullwide {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
/*参考 画像ブロックの高さ調整 */
.cstm-blk-fullwide.cstm-blk-img-height img{
  height: 50vmin;
}

/************************************
** クッキーイエスのLCP除外
************************************/




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

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

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




/******************************/
/** ビジネスマン向けネイルサロンページ **/
/******************************/

/* スライダー全体を囲むコンテナ */
.custom-slider-container {
    width: 100%;
    background-color: transparent;
    padding: 20px 0;
}

/* 横スライダー設定 */
.custom-service-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding: 0 20px;
}

/* 各カード（スライド） */
.custom-card {
    flex: 0 0 auto;
    width: 300px;
    background-color: #444;
    color: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    scroll-snap-align: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* アイコン調整 */
.custom-card .icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 12px;
}

/* タイトルとテキスト */
.custom-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.custom-card p {
    font-size: 13px;
    line-height: 1.5;
    margin: 4px 0;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .custom-card {
        width: 240px;
        padding: 12px;
    }

    .custom-card h3 {
        font-size: 14px;
    }

    .custom-card p {
        font-size: 11px;
    }
}


/* ▼ nail-service-slider専用CSS ▼ */
.nail-slider-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    background-color: transparent;
    padding: 15px 0;
}

.nail-service-slider {
    display: flex;
    gap: 15px;
    padding: 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    width: 100%;
}

.nail-service-slide {
    background-color: #333;
    color: white;
    flex: 0 0 auto;
    width: 400px;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    scroll-snap-align: start;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.nail-service-slide:hover {
    transform: scale(1.05);
    background-color: #222;
}

.nail-service-slide .icon {
    font-size: 40px;
    text-align: center;
    margin-bottom: 15px;
}

.nail-service-slide h3 {
    font-size: 16px;
}

.nail-service-slide p {
    font-size: 12px;
}

/* ▼ スマホ対応 ▼ */
@media screen and (max-width: 768px) {
    .nail-slider-container {
        width: 100%;
        padding: 0 10px;
    }

    .nail-service-slide {
        width: 250px;
        padding: 10px;
    }

    .nail-service-slide h3 {
        font-size: 14px;
    }

    .nail-service-slide p {
        font-size: 10px;
    }
}


/******************************/
/** ネイルサロンのポータルページ **/
/******************************/

.plan-card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 40px 20px;
    background-color: transparent;
    box-sizing: border-box;
}

.plan-card {
    width: 300px;
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #222;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

.plan-card-header {
    padding: 16px;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.plan-card-body {
    padding: 16px;
    font-size: 0.95rem;
    background-color: #1a1a1a;
}

.plan-card .description {
    margin: 0;
    line-height: 1.6;
}

/* カラーリング */
.clean-up {
    border-top: 6px solid orange;
}

.impression-up {
    border-top: 6px solid dodgerblue;
}

.health-nails {
    border-top: 6px solid mediumseagreen;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .plan-card-container {
        flex-direction: column;
        align-items: center;
    }

    .plan-card {
        width: 90%;
        max-width: 360px;
    }
}


.nail-header-section {
    font-family: "Times New Roman", serif;
    background-color: #000;
}

.nail-header-section .custom-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    padding: 20px 10px;
    border: 2px solid gold;
    width: 100%;
    box-sizing: border-box;
}

.nail-header-section .custom-header h1 {
    flex: 1;
    text-align: center;
    color: gold;
    font-size: 1.5rem;
    padding: 10px;
    border-right: 2px solid gold;
    margin: 0;
}

.nail-header-section .custom-header h1:last-child {
    border-right: none;
}

.nail-header-section .custom-header a {
    text-decoration: none;
    color: gold;
}

@media (max-width: 768px) {
    .nail-header-section .custom-header {
        flex-direction: column;
    }

    .nail-header-section .custom-header h1 {
        border-right: none;
        border-bottom: 2px solid gold;
        width: 100%;
    }

    .nail-header-section .custom-header h1:last-child {
        border-bottom: none;
    }
}



.plan-section {
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: transparent;
}

.plan-section .plan-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.plan-section .plan-card {
    width: 30%;
    background-color: #111;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.plan-section .plan-card:hover {
    transform: translateY(-10px);
}

.plan-section .plan-header {
    background-color: #333;
    padding: 15px;
    text-align: center;
    border-bottom: 2px solid gold;
}

.plan-section .plan-header h3 {
    margin: 0;
    font-size: 18px;
}

.plan-section .plan-body {
    padding: 20px;
    font-size: 16px;
}

.plan-section .plan-description {
    margin: 0;
    font-weight: normal;
}

.plan-section .clean-up {
    border-left: 5px solid orange;
}

.plan-section .impression-up {
    border-left: 5px solid blue;
}

.plan-section .health-nails {
    border-left: 5px solid green;
}

@media (max-width: 599px) {
    .plan-section .plan-card {
        width: 100%;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .plan-section .plan-card {
        width: 45%;
    }
}

@media (min-width: 900px) {
    .plan-section .plan-card {
        width: 30%;
    }
}


/* CTAセクション全体 */
.cta-section {
    background-color: transparent;
    color: #fff;
    font-family: 'Arial', sans-serif;
    padding: 50px 20px;
    text-align: center;
}

/* コンテナ中央揃え */
.cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ボタンデザイン */
.cta-button {
    display: inline-block;
    width: 80%;
    max-width: 400px;
    padding: 15px 30px;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid #FFD700;
    border-radius: 8px;
    background: transparent;
    color: #FFD700;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.cta-button:hover {
    background: #FFD700;
    color: #111;
}



/* ネイルケア特徴セクション全体のスタイル */
.nail-feature-section {
    font-family: Arial, sans-serif;
    background-color: transparent; /* 背景透過 */
    text-align: center;
    padding: 40px 20px;
}

/* カードのコンテナ */
.feature-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

/* 各カードのデザイン（ダークテーマ対応） */
.card {
    background-color: rgba(30, 30, 30, 0.9); /* 濃いめのグレーで半透明 */
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    padding: 20px;
    width: 280px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #fff; /* 文字色は白に */
}

/* ホバー時のエフェクト（少し明るく） */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
}

/* 説明文（薄いグレーに変更） */
.card p {
    font-size: 16px;
    color: #ccc;
    line-height: 1.5;
}

/* アイコン */
.icon {
    font-size: 36px;
    margin-bottom: 10px;
}

/* タイトル */
.card h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 説明文 */
.card p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .feature-cards {
        flex-direction: column;
        align-items: center;
    }
}


/* 全体のスタイル */
.gallery-container {
    width: 100%;
    overflow: visible;
    position: relative;
}

.gallery {
    display: flex;
    gap: 20px;
    animation: scroll 20s linear infinite;
    width: max-content;
}

.gallery img {
    width: 300px;
    height: auto;
    clip-path: inset(0 round 10px);
    object-fit: contain;
}

/* スクロールアニメーション */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* マウスホバー時に停止 */
.gallery-container:hover .gallery {
    animation-play-state: paused;
}




/******************************/
/** スライドの注意喚起アイコン **/
/******************************/

.slide-hint {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  text-align: left;
  margin-bottom: 10px;
}

.slide-hint-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: black;
  background-color: transparent;
  padding: 6px 16px;
  border-radius: 30px;
  animation: slide-loop 2.5s ease-in-out infinite;
  white-space: nowrap;
  opacity: 0.8;
}

.slide-hint-content .text {
  animation: flicker 1.2s ease-in-out infinite;
}

@keyframes slide-loop {
  0% { transform: translateX(0); }
  50% { transform: translateX(60%); }
  100% { transform: translateX(0); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/******************************/
/** アーカイブページのデザイン **/
/******************************/

/* アーカイブページ全体の背景色変更 */
body.post-type-archive-representative_blog {
    background-color: #f9f9f9; /* 優しいグレーベージュ系 */
    color: #000; /* 文字は黒で可読性重視 */
}

/* ブログカードのスタイル調整 */
.blog-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 記事タイトル */
.blog-title {
    color: #111;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
}

.blog-title:hover {
    color: #0066cc;
    text-decoration: underline;
}

/* 記事番号（NO〇〇） */
.blog-number {
    color: #666;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 抜粋 */
.blog-excerpt {
    color: #444;
    line-height: 1.6;
    margin: 12px 0;
}

/* フッターリンク */
.blog-card-footer a {
    color: #0073aa;
    text-decoration: none;
    font-weight: 500;
}

.blog-card-footer a:hover {
    text-decoration: underline;
}


/******************************/
/** ソーシャルアイコン **/
/******************************/

.social-icon {
    pointer-events: none;
}

.social-links {
    display: flex;
    gap: 15px; 
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}


.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    text-decoration: none;
    color: #fff; 
    transition: all 0.3s ease-in-out;
	pointer-events: auto; /* リンクをクリック可能にする */
}


.social-icon.note { background-color: #41c9b4; }    
.social-icon.youtube { background-color: #ff0000; }
.social-icon.twitter { background-color: #1da1f2; } 
.social-icon.line { background-color: #06c755; }    
.social-icon.instagram { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); } 


.social-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/******************************/
/** ソーシャルアイコン（footer-social-links用） **/
/******************************/

/* コンテナ */
.footer-social-links {
    display: flex;
    gap: 15px; 
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* リンク全体（aタグ） */
.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    text-decoration: none;
    color: #fff; 
    transition: all 0.3s ease-in-out;
}

/* アイコン（iタグ）も整えておく。省略可 */
.social-link .social-icon {
    pointer-events: none; /* アイコンクリックではなくaタグに集中させる */
}

/* 各サービス別の色設定 */
.social-link.note { background-color: #41c9b4; }    
.social-link.youtube { background-color: #ff0000; }
.social-link.twitter { background-color: #1da1f2; } 
.social-link.line { background-color: #06c755; }    
.social-link.instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* ホバー効果 */
.social-link:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/******************************/
/** ニューステロップ **/
/******************************/

/* ticker-wrapperのデザイン */
.ticker-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: #800020;
    color: white;
    font-size: 1.5vw; /* 画面幅に応じてフォントサイズ調整 */
    font-weight: bold;
    text-shadow: 2px 2px 5px black;
    padding: 0.5vw 0; /* PC用に高さを狭く */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

/* tickerの動き */
.ticker {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: tickerMove 40s linear infinite; /* テロップの長さによって調整 */
}

/* tickerの動きのアニメーション */
@keyframes tickerMove {
    from {
        transform: translateX(70%); /* 80%に変更し、発火を早める */
    }
    to {
        transform: translateX(-100%);
    }
}

/* 点滅アニメーション */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.blink {
    animation: blink 1s infinite;
}

/* スマホ用の調整 */
@media (max-width: 768px) {
    .ticker-wrapper {
        font-size: 3vw; /* スマホ用にフォントを大きめに */
        padding: 1.5vw 0; /* 余白を少し広めに */
    }

    .ticker {
        animation-duration: 40s; /* スマホでは少し遅くする */
    }

    @keyframes tickerMove {
        from {
            transform: translateX(70%); /* 80%に変更し、発火を早める */
        }
        to {
            transform: translateX(-100%);
        }
    }
}



/******************************/
/** コンタクトフォームの装飾 **/
/******************************/
/* フォーム全体 */
#cf7-area {
    width: 100%;
    margin: 0 auto;
    font-family: "游ゴシック","ヒラギノ角ゴ","メイリオ","MS Pゴシック",sans-serif;
    background-color: #f8f5f2; /* 背景色を白に変更 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 少し影を加えて浮き上がる感じに */
}

.cf7-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 1.5em; /* 少し間隔を減らしました */
}

.cf7-q {
    width: 30%;
    margin: 0 0 0 10px;
    color: #333; /* テキストカラー */
}

.cf7-a {
    width: 60%;
}

/* 見出し */
.form-heading {
    width: 100%;
    background-color: #fff; /* 濃いグレー */
    border-left: 0.5em solid #808080; /* ボーダー幅を調整 */
    border-radius: 4px;
    color: #ffffff;
    font-weight: bold;
    padding: 0.8em;
    margin: 0 0 1.5em;
}

.form-heading p {
    margin: 0;
}

#cf7-area label {
    font-weight: bold;
    color: #000000; /* 見出しカラーはそのまま */
}

#cf7-area input[type="text"],
#cf7-area input[type="email"],
#cf7-area input[type="tel"],
#cf7-area textarea {
    background: #ffffff; /* 入力フィールド背景を白に */
    width: 100%;
    max-width: 500px;
    margin-left: 10px;
    padding: 8px;
    border: 1px solid #b0b0b0; /* 薄いグレーのボーダー */
    color: #333; /* テキストカラー */
    border-radius: 4px; /* 角丸追加 */
}

#cf7-area input[type="text"]:focus,
#cf7-area input[type="email"]:focus,
#cf7-area input[type="tel"]:focus,
#cf7-area textarea:focus {
    background: #f5f5f5; /* フォーカス時の背景色を少し明るいグレー */
    border: 2px solid #808080;
    outline: 0;
}

#cf7-area input[type="checkbox"],
#cf7-area input[type="radio"] {
    appearance: auto;
}

#cf7-area .wpcf7-list-item {
    display: block;
}

#cf7-area textarea {
    height: 150px; /* 高さを少し小さめに */
    padding: 8px;
}

.cf7-accept-check {
    text-align: center;
    margin: 40px auto;
}

/* 送信ボタン */
.cf7-submit {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

#cf7-area input[type="submit"] {
    width: 100%;
    max-width: 200px; /* ボタン幅を小さく調整 */
    background-color: #800020; /* 濃いグレー */
    color: #ffffff;
    border-radius: 4px;
    font-size: 1em;
    padding: 0.6em;
    border: 1px solid #4a4a4a;
    cursor: pointer; /* ポインタを表示 */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#cf7-area input[type="submit"]:hover {
    background-color: #808080; /* ホバー時の背景色を少し薄めに */
    border-color: #808080; /* ボーダー色も変更 */
    color: #ffffff;
}

/* ボタン配置 */
.cf7-btn {
    width: 100%;
    text-align: center;
}

/* 必須ラベル */
.cf7-req {
    font-size: .8em;
    padding: 4px 6px;
    background: #d9534f; /* 赤で目立たせる */
    color: #ffffff;
    margin-left: 10px;
    display: inline-block;
    border-radius: 4px;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .cf7-item {
        display: block;
    }

    #cf7-area label {
        display: block;
        margin-bottom: 10px;
    }

    .cf7-q {
        width: 100%;
        margin: 0;
    }

    .cf7-a {
        width: 100%;
    }

    #cf7-area input[type="text"],
    #cf7-area input[type="email"],
    #cf7-area input[type="tel"],
    #cf7-area textarea {
        margin-left: 0;
    }

    .cf7-submit {
        width: 90%;
    }
}

/* 矢印アニメーション */
@keyframes arrow-slide {
    0% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(6px); opacity: 0.6; }
    100% { transform: translateX(0); opacity: 1; }
}

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: #333333; /* ボタンのベースカラー */
    color: #fff; /* テキストカラー */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 25px; /* ボタンの角丸 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を付ける */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 矢印アイコン */
.wp-block-button__link::after {
    content: "\21C0"; /* Unicode表記（⇀のコード） */
    font-size: 25px;
    margin-left: 8px;
    display: inline-block;
    animation: arrow-slide 1.5s infinite ease-in-out;
}

/* ホバー時のボタン変化 */
.wp-block-button__link:hover {
    background-color: #800020;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    text-decoration: none;
}



/******************************/
/** 特定商取引法ページの追加CSS **/
/******************************/

#business-info {
    width: 100%;
    margin: 0 auto;
    font-family: "游ゴシック","ヒラギノ角ゴ","メイリオ","MS Pゴシック",sans-serif;
    background-color: #f8f5f2; /* 背景色 */
    padding: 20px;
    border-radius: 8px;
}

.business-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.business-table td {
    padding: 12px;
    border: 1px solid #ddd;
    color: #333;
}

.info-label {
    width: 30%;
    font-weight: bold;
    background-color: #f0f0f0; /* ラベル背景色 */
}

.info-value {
    width: 70%;
}

.form-heading {
    background-color: #4a4a4a; /* 濃いグレー */
    border-left: 4px solid #808080;
    color: #ffffff;
    font-weight: bold;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.section-heading td {
    background-color: #4a4a4a;
    color: #ffffff;
    font-weight: bold;
    padding: 10px;
    text-align: left;
    border: none;
}

.business-table a {
    color: #4a4a4a;
    text-decoration: underline;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .business-table, .business-table td {
        display: block;
        width: 100%;
    }

    .info-label, .info-value {
        width: 100%;
        display: block;
    }
}

/******************************/
/** 見出しやフォントの調整 **/
/******************************/
/* 見出しのマージントップボトム調整 */
h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
    margin-top: 0;
    margin-bottom: 0;
}

/* 見出しのフォーマルな日本語フォント設定 */
.wp-block-heading {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif; /* フォーマルな日本語フォント */
    font-weight: normal;  /* 太さを標準に */
    line-height: 1.6; /* 行間の調整 */
    letter-spacing: 0.5px; /* 文字間隔を調整 */
    color: #333333; /* テキストカラーを少し濃いグレーに */
}

.fz-48px {
  font-family: serif;
  font-weight: bold;
  font-size: 400%;
  color: rgba(0, 0, 0, 0);
  text-align: center;
  -webkit-text-stroke: 1px #FFF;
  padding: 40px 0;
}


@media screen and (max-width: 768px) {
  .fz-48px {
    font-size: 300%; 
    padding: 30px 0;
  }
}


@media screen and (max-width: 480px) {
  .fz-48px {
    font-size: 200%; 
    padding: 20px 0;
  }
}

/* fzフォントレスポンシブ対応 */

.fz-44px { font-size: 44px; }
.fz-40px { font-size: 40px; }
.fz-36px { font-size: 36px; }
.fz-32px { font-size: 32px; }
.fz-28px { font-size: 28px; }
.fz-24px { font-size: 24px; }
.fz-20px { font-size: 20px; }

@media (max-width: 1024px) { 

    .fz-44px { font-size: 38px; }
    .fz-40px { font-size: 36px; }
    .fz-36px { font-size: 32px; }
    .fz-32px { font-size: 28px; }
    .fz-28px { font-size: 24px; }
    .fz-24px { font-size: 20px; }
    .fz-20px { font-size: 18px; }
}

@media (max-width: 768px) { 

    .fz-44px { font-size: 34px; }
    .fz-40px { font-size: 32px; }
    .fz-36px { font-size: 30px; }
    .fz-32px { font-size: 26px; }
    .fz-28px { font-size: 22px; }
    .fz-24px { font-size: 18px; }
    .fz-20px { font-size: 16px; }
}

@media (max-width: 480px) { 

    .fz-44px { font-size: 28px; }
    .fz-40px { font-size: 26px; }
    .fz-36px { font-size: 24px; }
    .fz-32px { font-size: 22px; }
    .fz-28px { font-size: 18px; }
    .fz-24px { font-size: 16px; }
    .fz-20px { font-size: 14px; }
}

/* 見出しの文字に少しの間隔を加え、読みやすさを向上 */
.wp-block-heading .fz-28px,
.wp-block-heading .fz-32px {
    letter-spacing: 1px;
}

h3.wp-block-headingselector {
    margin-top: 0 !important; /* トップマージンを0に設定 */
    margin-bottom: 0 !important; /* ボトムマージンを0に設定 */
}

/******************************/
/* 📏 隙間・マージン調整 */
/******************************/
.entry-content > * {
    margin-bottom: 0 !important;
}

.body .article,
.article.post-29,
.entry-content {
    margin-bottom: 0 !important;
}

.entry-content.cf {
  margin: 0 !important;
}


.article p .entry-content > * {
    margin-bottom: 0;
}

.breadcrumb.pbp-main-before,
.breadcrumb.sbp-main-before + .content,
.breadcrumb.pbp-main-before + .content {
    margin: 0 auto 0;
}

.main {
    padding: 0 29px;
}

@media screen and (max-width: 834px) {
    main.main,
    div.sidebar {
        padding: 0 16px;
        margin: 12px 0;
        border-width: 0;
    }
}

/******************************/
/* 🍞 パンくず関連の非表示 */
/******************************/
.entry-categories-tags,
#breadcrumb,
.cat-link,
.cat-link.cat-link-18,
.breadcrumb-area {
    display: none;
}

.breadcrumb-area {
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-top: 1px solid transparent;
}

/******************************/
/* 🗂️ 関連記事・ナビ削除 */
/******************************/
#related-entries,
.pager-post-navi {
    display: none;
}

/******************************/
/* 📝 見出しデザインの調整 */
/******************************/
.article h2,
.article h2::before {
    border-bottom: 0 !important;
}

.article h3 {
    background-color: transparent !important;
}

.article h3::before {
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid transparent !important;
}

.article h4::before {
    display: none;
}

/******************************/
/* 🎨 カラーカスタマイズ */
/******************************/
:root {
    --LtGray_T70: transparent !important;
    --skin-grayish-gradient: transparent !important;
    --white: #fff;
}

@media screen and (max-width: 1023px) {
    :root {
        --white: #800020 !important;
    }

    .skin-grayish .navi-menu-content {
        background-color: var(--white) !important;
    }
}

/******************************/
/* 🕒 投稿日などの非表示 */
/******************************/
.skin-grayish .article-header .date-tags {
    display: none !important;
}

/******************************/
/* 🔚 コンテンツボーダー削除 */
/******************************/
.skin-grayish .content .main .entry-content {
    border-bottom: none;
}



/******************************/
/** ヘッダー全般調整 **/
/******************************/

/* ヘッダー全体の幅を広げる */
.menu-top {
    width: 100%; /* ヘッダーを全幅に広げる */
    padding: 0 20px; /* ヘッダー内の左右余白を調整 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* メニュー項目の文字を太字に変更 */
.menu-top .item-label {
    font-weight: bold; /* 文字を太字に */
    font-size: 1.1em; /* 必要に応じて文字サイズも調整 */
}

/* メニュー項目のホバーエフェクト */
.menu-top .menu-item a {
    transition: color 0.3s ease, transform 0.2s ease; /* 色と位置の変化にトランジションを追加 */
}

.menu-top .menu-item a:hover {
    color: #555; /* ホバー時に少し暗めの色に変更（元の色に合わせて調整してください） */
    transform: translateY(-3px); /* 少し上に浮かび上がる */
    text-decoration: underline; /* 下線を表示 */
}

/******************************/
/** ヘッダーサブメニュー表示調整 **/
/******************************/
/* 親メニューがホバーされたときにサブメニューを表示 */
.navi-in > ul > li:hover .sub-menu {
    display: block; /* 非表示を解除して表示 */
	background-color: #800020;
    opacity: 1; /* 透明度を1に */
    visibility: visible; /* 可視化 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.skin-grayish .navi-in > ul li .sub-menu ul {
    display: block;
    background-color: #b62b4e; /* ← ここを変更 */
    width: 100%;
    left: 0;
    right: 0;
    top: auto;
}


/* サブメニューの基本設定 */
.navi-in > ul .sub-menu {
    display: none; /* 初期状態では非表示 */
    position: absolute;
    margin: 0;
    width: 240px;
    list-style: none;
    padding: 0;
    background-color: var(--cocoon-xxx-thin-color);
    z-index: 1;
    text-align: left;
    opacity: 0;
    visibility: hidden; /* 初期状態は非表示 */
}

/******************************/
/** フッター調整 **/
/******************************/


.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.appeal {
    order: -1; /* フッターの最上部に配置 */
    width: 100%;
}

footer {
    background: url('https://aurorance.biz/wp-content/uploads/2024/10/543672eaa39edaf86eadeaa2115aa3a5.jpg') no-repeat center center;
    background-size: cover;  /* 背景画像を要素に合わせてカバー */
    color: white;
}

/* ============================= */
/* アピールエリア全体の配置・構造 */
/* ============================= */
.appeal {
    order: -1;            /* フッター内でも最上部に配置 */
    width: 100%;
}

/* ============================= */
/* アピールエリア背景・ボックス装飾 */
/* ============================= */
.appeal-content {
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
    padding: 40px;
    border-radius: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ============================= */
/* タイトル・メッセージ装飾 */
/* ============================= */
.appeal-title,
.appeal-message {
    color: white;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 5px rgba(255, 255, 255, 0.7); /* 白く光る輪郭 */
}

.appeal-title {
    font-size: 36px;
    font-weight: bold;
}

.appeal-message {
    font-size: 24px;
    line-height: 1.6;
}

/* ============================= */
/* ボタン装飾（.appeal-button） */
/* ============================= */
.appeal-content .appeal-button {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.appeal-content .appeal-button:hover {
    background-color: #800020 !important;
    transform: translateY(-4px);
}

.appeal-content .appeal-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.7);
}

/* ============================= */
/* WPボタンブロック風の装飾 */
/* ============================= */
.block-editor-rich-text__editable.wp-block-button__link.wp-element-button.rich-text {
    background-color: #333;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    text-align: center;
}

.block-editor-rich-text__editable.wp-block-button__link.wp-element-button.rich-text:hover {
    background-color: #ff6f61;
    transform: translateY(-4px);
}

.block-editor-rich-text__editable.wp-block-button__link.wp-element-button.rich-text:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.7);
}

/* ============================= */
/* レスポンシブ対応 */
/* ============================= */

/* タブレット（～768px） */
@media (max-width: 768px) {
    .appeal-title {
        font-size: 28px;
    }

    .appeal-message {
        font-size: 20px;
    }

    .appeal-content {
        padding: 30px;
    }

    .appeal-content .appeal-button {
        font-size: 16px;
        padding: 10px 20px;
    }
}

/* スマートフォン（～480px） */
@media (max-width: 480px) {
    .appeal-title {
        font-size: 24px;
    }

    .appeal-message {
        font-size: 18px;
    }

    .appeal-content {
        padding: 20px;
    }

    .appeal-content .appeal-button {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/******************************/
/** ナビエントリーカード **/
/******************************/
/* ナビカード（大きなカード）を横並びにする */
.widget-entry-cards.large-thumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 100%; /* 横幅を制限 */
    padding: 0 10px; /* スマホで余白追加 */
}

.navi-entry-cards.large-thumb a {
    width: 30%; /* パソコン画面で3枚並べるように30%に設定（余白を考慮） */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* パディングを含む */
}

.navi-entry-cards.large-thumb a .card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: black;
    font-weight: bold;
    padding: 20px;
    z-index: 1;
}

.navi-entry-cards.large-thumb a:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.navi-entry-cards.large-thumb a img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.navi-entry-cards.large-thumb a:hover img {
    opacity: 0.8;
}

/* 834px以下の場合 */
@media screen and (max-width: 834px) {
    .navi-entry-cards.large-thumb {
        gap: 10px; /* 隙間を調整 */
    }

    .navi-entry-cards.large-thumb a .card-content {
        padding: 10px; /* パディングをスマホ用に調整 */
		font-size: 10px; /* スマホ用に文字サイズを小さく設定 */
    }
}

/******************************/
/** アニメーション関連CSS **/
/******************************/
.fadein, .scale-in, .fadein-left, .fadein-right, .fadein-down, .rotate-in {
  opacity: 0.1; /* 0にせず少し見えるようにする */
  visibility: hidden; /* ちらつきを防ぐ */
  transition: opacity 1s ease-out, transform 1s ease-out, visibility 0s linear 0.5s;
}

.fadein.is-active, .scale-in.is-active, .fadein-left.is-active, 
.fadein-right.is-active, .fadein-down.is-active, .rotate-in.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0) scale(1) rotate(0deg);
}

/* === スライドイン（左から右） === */
.slidein-left {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* === スライドイン（右から左） === */
.slidein-right {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* === ズームアウト === */
.zoom-out {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* === 回転スライドイン === */
.rotate-slidein {
  opacity: 0;
  transform: rotate(45deg) translateX(-100%);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* === フェードイン＆スケールアップ === */
.fade-scale-in {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1s ease-out, transform 1s ease-out;
}




/******************************/
/** カスタム投稿①リクルートリスト **/
/******************************/
.recruitment-list {
    margin: 20px 0; /* 上下のマージンを追加 */
    padding: 0;
}

.recruitment-list ul {
    list-style: none; /* デフォルトのリストスタイルを無効化 */
    padding: 0; /* パディングをゼロに */
    margin: 0; /* マージンをゼロに */
}

.recruitment-list li {
    padding: 15px; /* 各アイテムの内側にスペースを追加 */
    border: 1px solid #e0e0e0; /* 軽いボーダーを追加 */
    border-radius: 8px; /* 角を丸める */
    background: rgba(249, 249, 249, 0.5); /* 白めのグレーの背景を透過 */
    margin-bottom: 15px; /* 各アイテムの間にスペースを追加 */
    transition: transform 0.3s; /* ホバー時のアニメーション */
}

.recruitment-list li:hover {
    transform: translateY(-2px); /* ホバー時に少し持ち上げる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ホバー時に影を付ける */
}

.recruitment-title {
    text-align: left; /* 左寄せにする */
    color: #333; /* タイトルの色を設定 */
    font-size: 14px; /* フォントサイズを小さく設定 */
    margin: 0 0 5px; /* 下部のマージンを追加 */
    font-weight: bold; /* 太字にする */
}

.recruitment-date {
    text-align: left; /* 左寄せにする */
    color: #888; /* 日付の色を薄く設定 */
    font-size: 12px; /* 日付のフォントサイズを小さく設定 */
    margin-bottom: 10px; /* 下部のマージンを追加 */
}

/* 採用情報ページのサムネイル以外非表示コード */
@media only screen and (max-width: 768px) {
    .thumbnail-carousel img {
        display: none !important;
    }
}

/******************************/
/** カスタム投稿②代表ブログ **/
/******************************/

/* Google Fontsでおしゃれなフォントを追加 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Playfair+Display:wght@700&display=swap');

/* スライダーコンテナ */
.blog-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 15px 0;
  scroll-behavior: smooth;
}

.blog-list .blog-card {
  flex: 0 0 auto;
  width: calc(25% - 15px);
  background-color: #f7f0d1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  scroll-snap-align: start;
  padding: 10px;
}

.blog-list .blog-card:hover {
  transform: scale(1.03);
}

.blog-card .blog-title {
  font-size: 1rem;
  font-family: 'Playfair Display', serif; /* 高級感のあるセリフ体 */
  font-weight: 700;
  margin: 8px 0;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.blog-card .blog-excerpt {
  margin: 0 10px 10px;
  color: #666;
  font-family: 'Roboto', sans-serif; /* モダンなサンセリフ体 */
  font-size: 0.9rem;
  line-height: 1.6;
}

.blog-card .blog-card-footer {
  padding: 8px 10px;
  background-color: #f8f8f8;
  text-align: right;
  font-size: 0.8rem;
  color: #888;
  font-family: 'Roboto', sans-serif;
}

.blog-number {
    color: #333333; /* ダークグレー */
    font-weight: bold; /* 太字 */
    font-size: 16px; /* フォントサイズ（必要に応じて調整） */
    margin-bottom: 10px; /* 下のマージンを調整（必要に応じて調整） */
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  .blog-list .blog-card {
    width: calc(33.33% - 15px);
  }
}

@media (max-width: 768px) {
  .blog-list .blog-card {
    width: calc(50% - 15px);
  }
}

@media (max-width: 480px) {
  .blog-list .blog-card {
    width: 100%;
  }
}



/******************************/
/** カスタム投稿③お知らせ **/
/******************************/
.news-list {
    margin: 20px 0; /* 上下のマージンを追加 */
    padding: 0;
}

.news-list ul {
    list-style: none; /* デフォルトのリストスタイルを無効化 */
    padding: 0; /* パディングをゼロに */
    margin: 0; /* マージンをゼロに */
}

.news-list li {
    padding: 15px; /* 各アイテムの内側にスペースを追加 */
    border: 1px solid #e0e0e0; /* 軽いボーダーを追加 */
    border-radius: 8px; /* 角を丸める */
    background: rgba(249, 249, 249, 0.5); /* 白めのグレーの背景を透過させる（透過度を強めた） */
    margin-bottom: 15px; /* 各アイテムの間にスペースを追加 */
    transition: transform 0.3s; /* ホバー時のアニメーション */
}


.news-list li:hover {
    transform: translateY(-2px); /* ホバー時に少し持ち上げる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ホバー時に影を付ける */
}

.news-title {
    text-align: left; /* 左寄せにする */
    color: #333; /* タイトルの色を設定 */
    font-size: 14px; /* フォントサイズを小さく設定 */
    margin: 0 0 5px; /* 下部のマージンを追加 */
    font-weight: bold; /* 太字にする */
}

.news-date {
    text-align: left; /* 左寄せにする */
    color: #fff; /* 日付の色を薄く設定 */
    font-size: 12px; /* 日付のフォントサイズを小さく設定 */
    margin-bottom: 10px; /* 下部のマージンを追加 */
	
.navi-entry-card-title {
    text-align: center;  /* Aligns the text horizontally */
    display: block;  /* Ensures the element behaves like a block */
    width: 100%;  /* Makes sure the div takes up full width */
}

	

/* ============================= */
/* ページIDが1553のページにのみ適用 */
/* ============================= */
body.page-id-1553 .wp-block-group {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-1553 .wp-block-heading.has-medium-font-size {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================= */
/* ページIDが79のページにのみ適用 */
/* ============================= */
body.page-id-79 .wp-block-group,
body.page-id-79 .wp-block-heading.has-medium-font-size {
    margin-top: 0 !important;
    margin-bottom: 2 !important;
    padding: 0 !important;
}

/* ============================= */
/* PDFの埋め込み表示を非表示にする */
/* ============================= */
.wp-block-file .wp-block-file__embed {
    display: none;
}

/* ============================= */
/* ダウンロードボタンとファイル名を横並びに整える */
/* ============================= */
.wp-block-file {
    display: flex;
    align-items: center;
}

/* ============================= */
/* ファイル名のリンクの装飾を調整 */
/* ============================= */
.wp-block-file a {
    text-decoration: none;
    margin-right: 10px;
}

/* ============================= */
/* ボタンのデザインを調整（任意） */
/* ============================= */
.wp-block-file__button {
    padding: 5px 10px;
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}

/* ============================= */
/* ページIDが1654のH2見出しの上下マージンを消す */
/* ============================= */
.page-id-1654 h2 {
    margin: 5px 0 2px;
}

/* ============================= */
/* ページIDが1654のとき、行間を縮める */
/* ============================= */
.page-id-1654 p,
.page-id-1654 p strong {
    margin-bottom: 5px;
    line-height: 1.2;
}

.page-id-1654 p strong {
    display: block;
    margin-bottom: 2px;
}

/* ============================= */
/* ページIDが1669のとき、行間を縮める */
/* ============================= */
.page-id-1669 p,
.page-id-1669 p strong {
    margin-bottom: 5px;
    line-height: 1.2;
}

.page-id-1669 p strong {
    display: block;
    margin-bottom: 2px;
}

/* ============================= */
/* ページIDが1669のH2見出しの上下マージンを消す */
/* ============================= */
.page-id-1669 h2 {
    margin: 5px 0 2px;
}

/******************************/
/** フロントページキャッチフレーズのデザイン調整 **/
/******************************/
.tagline {
    font-weight: bold;
    font-size: 13pt;
    color: #ffffff; /* 白いテキスト */
    text-transform: uppercase; /* テキストを大文字に */
    letter-spacing: 1px; /* 文字の間隔を少し広げる */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.6), /* シャドウをソフトに */
        -1px -1px 2px rgba(0, 0, 0, 0.6), /* 反対方向にもシャドウ */
        1px -1px 2px rgba(0, 0, 0, 0.6), 
        -1px 1px 2px rgba(0, 0, 0, 0.6); /* 4方向に軽い影 */
    transition: text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* ホバー時の動き */
}

.tagline:hover {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8), /* ホバー時に影を強く */
        -2px -2px 4px rgba(0, 0, 0, 0.8),
        2px -2px 4px rgba(0, 0, 0, 0.8),
        -2px 2px 4px rgba(0, 0, 0, 0.8);
    transform: scale(1.05); /* 少し拡大する */
}


@media (max-width: 767px) {
.entry-content {
font-size: 12px;
}