/*
 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); }

/*ヘッダー*/
.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; }

/*front-page*/
.p-index-content01__title{ padding:0 1.5rem; }
.p-index-content01{ z-index:10; }

/*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; /* 終了時に塗りつぶし色を適用 */
    }
}