/*
 Theme Name:   c-3
 Template:     nano_tcd065
 Version:      1.0.0
 Description:  c-3用の子テーマ
 Author:       c3
 Author URI:   https://www.c-3.jp
 License:      GPL2
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  nano
*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

figure { margin: auto; }

.text-center{ text-align: center; }

.btn-shadow a {
    margin: auto; box-shadow: 0 7px 0 0 #d0492c; 
    display: block; vertical-align: middle; text-decoration: none; font-weight: 600;
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out; transform: translateY(0); }
.btn-shadow a:hover { box-shadow: 0 4px 0 1px #d0492c; text-decoration: none; transform: translateY(-3px); }
.btn-shadow a:active { box-shadow: 0 1px 0 0 #d0492c; transform: translateY(6px); }

.btn-blueshadow a {
    margin: auto; box-shadow: 0 7px 0 0 #00477D; 
    display: block; vertical-align: middle; text-decoration: none; font-weight: 600;
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out; transform: translateY(0); }
.btn-blueshadow a:hover { box-shadow: 0 4px 0 1px #00477D; text-decoration: none; transform: translateY(-3px); }
.btn-blueshadow a:active { box-shadow: 0 1px 0 0 #00477D; transform: translateY(6px); }

.btn-more .wp-block-button__link { transform: scale(1); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;}
.btn-more .wp-block-button__link:hover { text-decoration: none; transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}

.is-style-topline-thick{ padding: 1rem 0; border-top: 3px solid #00477D; border-bottom: 1px dotted #cccccc; }
.is-style-underline-1 { padding-bottom: 0.5rem; border-bottom: solid 3px #e0e0e0; position: relative; }

.is-style-underline-1:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

.is-style-leftbar-bold {
    position: relative;
    padding-left: 1.2rem;
    border-left: 8px solid #00477D;
}

.l-inner .alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/*ヘッダー*/
.l-header { background: none !important; position: absolute; top: 0; z-index: 100; }
.admin-bar .l-header {top: 32px;}
.l-header--fixed.is-active,
body:not(.home) .l-header{ background: rgba(255,255,255,0.8) !important; }

/*logo*/
.c-logo img { content: url('svg/logo-blue.svg');}
body.home .l-header__logo.c-logo img { content: url('svg/logo.svg');}
body.home header.l-header.l-header--fixed.is-active .c-logo img { content: url('svg/logo-blue.svg');}

.l-main{ position:inherit; }

body.home header .p-global-nav > li > a,
body.home header.is-active .p-global-nav > li > a:hover{ color:#fafafa; }
body.home header.is-active .p-global-nav > li > a { color: initial; }

/*footer*/
.follow-banner {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0); 
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2); 
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: floatIn 1s ease-out 0.5s both;
}

/* ホバー時の動き */
.follow-banner:hover {
  transform: translateY(-12px) scale(1.08);
  box-shadow: -15px 40px 60px 5px rgba(0, 0, 0, 0.4); 
}

/* 画像自体は変更なし */
.follow-banner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

/*front-page*/
.p-index-content01__title{ padding:0 1.5rem; }
.p-index-content01{ z-index:10; }
.p-entry__body .p-works-list  a { color: #ffffff; }
body .p-entry__body .p-works-list h3{ margin-bottom:0; }
body .p-entry__body .p-works-list h3 a { color: #111111; }

/*home blog*/
.custom-rss-feed {
    margin: 0 auto;
    display: flex; /* 記事を横に並べる */
    flex-wrap: wrap; /* 画面幅に応じて折り返す */
    gap: 20px; /* 記事間の間隔 */
}

.rss-item {
    display: flex;
    flex-direction: column; /* サムネイルとコンテンツを上下に */
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #eee; /* ボーダーをアイテム全体に */
    width: 380px; /* 各記事の幅（必要に応じて調整） */
    background: #fff; /* 背景色 */
}

.rss-thumbnail img {
    border-radius: 5px;
    width: 100%; /* サムネイルをコンテナ幅に合わせる */
    height: auto;
    margin-bottom: 10px; /* サムネイルとコンテンツの間隔 */
}

.nophoto{ max-width: 300px; height: auto; margin-right: 10px; }

.rss-content h3 {
    margin: 0 0 8px;
    font-size: 1.1em; /* タイトルサイズを少し小さく */
    line-height: 1.3;
}

.rss-date {
    color: #666;
    font-size: 0.85em;
    margin: 5px 0;
}

.rss-excerpt { margin: 5px 0; color: #333; font-size: 0.9em; }

/*==================================================
TCD NANOテーマ用 全幅画像ブロック
==================================================*/


/* レスポンシブ対応：画面幅が768px以下で縦並びに */
@media (max-width: 599px) {
    .custom-rss-feed {
        flex-direction: column;
        align-items: center;
    }
    .rss-item {
        width: 100%; /* モバイルでは幅を100%に */
        max-width: 100%; /* 最大幅を制限 */
    }
}

@media only screen and (max-width: 1199px) {
}
@media only screen and (min-width: 1200px){

    .l-header__inner { height: 60px; }
    .l-header__logo{ width:20%; }
    nav.l-header__nav{ width:80%;}
    nav.l-header__nav ul.l-inner{ width: 100%; }
    .p-megamenu01,.p-megamenu02,.admin-bar .p-megamenu01,.admin-bar .p-megamenu02{ top: 60px; }
    .p-global-nav > li{ border:none; }

    main ol.p-breadcrumb{ margin-top:60px; }
}

/* 追従バナーのスタイル */
.follow-banner {
    position: fixed;
    bottom: 60px;
    right: 0;
    z-index: 9999;
}

.follow-banner img {
    max-width: 100px; /* バナーサイズ */
    height: auto;
    display: block;
}

/* スマホ対応 */
@media only screen and (max-width: 767px) {
    .follow-banner {
        bottom: 50px;
        right: 0;
        max-width: 50%; /* スマホ用に縮小 */
    }
}



/* 共通設定：画像をビューポート幅いっぱいに */
.full-width-child { width: 100vw; /* ビューポートの幅100% */ position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }


/* 2カラム親コンテナ（TCD NANOのコンテナ幅） */
.tcd-two-column,
.wp-block-columns.tcd-two-column {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0; /* カラム間隔4%（48% x 2 + 4%） */
  position: relative;
  overflow: visible;
}

/* カラムの基本設定（均等48%幅） */
.wp-block-columns.tcd-two-column > .wp-block-column {
  flex: 1; max-width: 48%; position: relative; z-index: 2;
}

/* 画像の基本設定（テーマの制約解除） */
.tcd-two-column img,
.tcd-two-column figure {
  width: 100%; height: auto; display: block;
  max-width: none !important; /* TCD NANOのmax-width: 100%を上書き */
}

/* 右カラム画像：右カラムの左端からビューポート右端 */
.column-right figure.fullwidth-image-block {
  width: calc(50vw + 2%); /* 右カラムの左端（48% + gap 4%/2）から右端 */
  margin-left: 0; /* 右カラムの左端に固定 */
  margin-right: calc(50% - 50vw); /* ビューポート右端まで */
  position: relative;
  z-index: 1; /* テキストカラムの下 */
}

/* 左カラム画像：左カラムの右端からビューポート左端 */
.column-left figure.fullwidth-image-block {
  width: calc(100vw - 48% - 2%); /* ビューポート左端から左カラム右端（48% + gap 4%/2） */
  margin-right: 0; /* 右端を左カラムの右端に固定 */
  position: relative; left: 100%; 
  transform: translateX(-100%); 
  z-index: 1; 
}

@media (max-width: 768px) {
  .tcd-two-column,
  .wp-block-columns.tcd-two-column {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .tcd-two-column .column-right { flex-direction: column-reverse; }
  
  .wp-block-columns.tcd-two-column > .wp-block-column {
    max-width: 100%;
  }
  
  .column-right figure.fullwidth-image-block,
  .column-left figure.fullwidth-image-block {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    transform: none;
  }
}


/* animation */
/* 初期状態: アニメーションを適用しない */
path, .svg-animation {
    stroke: #0068B6;
    stroke-width: 0.3px;
    stroke-dasharray: 500px;
    /* animationプロパティを削除 */
    stroke-dashoffset: 500px; /* 初期状態でオフセットを設定し、見えないようにする */
    transition: stroke-dashoffset 0s; /* 監視開始時のちらつき防止 */
}

/* JavaScriptで追加するクラス */
.is-visible path, .is-visible .svg-animation {
    animation: svg 1s ease-in both; /* このクラスが追加されたらアニメーションを開始 */
    stroke-dashoffset: 0;
}

@keyframes svg {
    0% {
        fill: transparent;
        stroke-dashoffset: 500px;
    }
    80% {
        fill: transparent;
    }
    100%{
        stroke-dashoffset: 0;
        fill: #0068B6; /* 終了時に塗りつぶし色を適用 */
    }
}

/*step*/
.smb-step__body{ padding-left:0; }
.smb-step__body:before{ content:none; }
.smb-step__item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    --step-index: 0;
    --delay-unit: 0.2s;
}

/* activeクラスが付与されたらアニメーションを適用 */
.smb-step__item.is-active {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--step-index) * var(--delay-unit));
}

/* ステップアイテムのコンテナに対する設定 */
.smb-step__body {
    position: relative;
}
.smb-step__item {
    position: relative;
    margin-bottom: 40px; /* ステップ間の間隔 */
}

/* 縦線の共通部分 */
.smb-step__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px; /* アイテムの左側からの位置 */
    width: 2px;
    height: 100%;
    background-color: #ddd; /* 通常の線の色 */
    z-index: 1;
}

/* 縦線のハイライト部分（アニメーションさせる） */
.smb-step__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 2px;
    height: 0; /* 最初は高さを0に */
    background-color: #2685bb; /* ハイライト色 */
    z-index: 2;
    transition: height 1s ease-out;
}

/* activeクラスが付与されたステップアイテムの縦線をアニメーション */
.smb-step__item.is-active::after {
    height: 100%;
}

/* ステップ番号の強調アニメーションを定義 */
@keyframes bounce-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
/* activeクラスが付与されたらアニメーションを適用 */
.smb-step__item__number.is-bouncing {
    background-color: #2685bb; 
    color: #fff;
    animation: bounce-in 0.5s ease-out forwards; 
}

/* 1. ステップ番号の基本スタイル */
.smb-step__item__number {
    position: relative; 
    background-color: #007bff; 
    color: white; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center; 
    z-index: 5;
    transform: scale(1);
}

/* ステップリスト */
.smb-step__body .wp-block-list{ padding-left: 1.3em; }



@media only screen and (max-width: 1199px) {
body.home header .p-global-nav > li > a{ color:#000000; }
body.home header.is-active .p-global-nav > li > a:hover{ background: #2b80d5; color: #ffffff; }
body.home header.is-active .p-global-nav > li > a { color: #000000; }

h1.copy{ left: 0.5rem !important; font-size:3em !important; }
.dog-container{ margin-top:100px; }
}