/*
Theme Name: SBNR3
Theme URI: 
Author: FREEDOM
Author URI: 
Description: SBNR No.3
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbnr3
Tags: 
*/

/*******************
 スマホ画面の時左右にpaddingを入れる 
 ************/

@media (max-width: 767px) {
    .mobile-content-padding {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/************
 ボタン風に見せるテキストのスタイル 
 ***********/
.my-text-button {
    display: inline-flex;          /* 文字の長さに合わせた幅にする */
    width: fit-content;
    background-color: #06195F !important; /* テーマのコントラスト色 */
    color: var(--wp--preset--color--base) !important;    /* テーマの背景色（文字用） */
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); /* 縦横の余白 */
/*    font-size: var(--wp--preset--font-size--small); */    /* 少し小さめの文字サイズ */
/*    font-weight: bold;              */   /* 太字 */
    text-decoration: none !important; /* リンクの下線を消す */
    border-radius: 4px;             /* 緩やかな角丸 */
    transition: all 0.3s ease;      /* ホバー時のアニメーション */
    cursor: pointer;
}

.wp-block-navigation-item.my-text-button {
width: fit-content !important;
flex: 0 0 auto !important;
}

.my-text-button > a {
display: inline-flex;
width: auto !important;
flex: 0 0 auto;
}


/* マウスを載せたときの動き（ホバー） */
.my-text-button:hover {
    background-color: var(--wp--preset--color--contrast); /* テーマのコントラスト色 */
    transform: translateY(-1px);    /* 少し上に浮かす */
}

/********************************
 FREEDOM Font Awesome Navigation 
 ******************************/
.wp-block-navigation .fa-envelope .wp-block-navigation-item__label::before {
    content: "\f0e0";
}

.wp-block-navigation-item[class*="fa-"]
    .wp-block-navigation-item__label::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    margin-right: 0.4em;
}


/* ナビゲーション要素の縦方向間隔を調整 */
.wp-block-navigation__container {
    row-gap: 5px;
}


/* 段落中のリンクの文字装飾を特に変えない */
.wp-block-paragraph a {
	color: inherit;
	text-decoration: none;
    font-weight: bold;
}

/*********************
 カード形式のカラム 
 ******************/
/*
.card-column {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
}
*/

.card-column {
	display: flex;
	flex-direction: column;
}

.card-column .card-image {
    height: 50px;
    object-fit: cover;
}

.card-column .card-title {
    margin-top:10px;
    height: 1em;
}

.card-column .card-description {
    margin-top:10px;
    flex: 1;
}

.card-column .card-bottom {
    padding-top:10px !important;
    margin-top: auto;
}


/***************
 フッターのナビゲーションメニューの項目間に縦棒を入れる 
***********/
footer .wp-block-navigation-item + .wp-block-navigation-item {
    border-left: 1px solid #06195F;
    padding-left: 10px;
}

footer .wp-block-navigation-item {
    margin-right: 5px;
}


/********************
 左右に水平線が入った見出し 
 ****************/
.is-style-heading-with-lines {
    display: flex;
    align-items: center;
    gap: 1em;
}

.is-style-heading-with-lines::before,
.is-style-heading-with-lines::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
}




/****************
カラム間に右矢印（スマホは下矢印）を入れる
**************/
.arrow-columns {
    display: flex;
    gap: 2em;
}

.arrow-columns > .wp-block-column {
    position: relative;
}

.arrow-columns {
    --card-gap: 40px;
    gap: var(--card-gap);

    position: relative;
    z-index: 1;
}

.arrow-columns > .wp-block-column {
    position: relative;
    z-index: 0;
}

.arrow-columns > .wp-block-column:nth-child(1) {
    position: relative;
    z-index: 8;
}

.arrow-columns > .wp-block-column:nth-child(2) {
    position: relative;
    z-index: 7;
}

.arrow-columns > .wp-block-column:nth-child(3) {
    position: relative;
    z-index: 6;
}

.arrow-columns > .wp-block-column:nth-child(4) {
    position: relative;
    z-index: 5;
}

.arrow-columns > .wp-block-column:nth-child(5) {
    position: relative;
    z-index: 4;
}

.arrow-columns > .wp-block-column:nth-child(6) {
    position: relative;
    z-index: 3;
}



.arrow-columns > .wp-block-column:not(:last-child)::after {
    content: "\f061";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;

    position: absolute;
    top: 50%;
    right: calc(var(--card-gap) / -2);

    width: 32px;
    height: 32px;

    transform: translate(50%, -50%);


    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 100;
}

.arrow-columns-circle > .wp-block-column:not(:last-child)::after {
    border: 1px solid currentColor;
    border-radius: 50%;

    background: #fff;
}


/*
@media (max-width: 767px) {
    .arrow-columns {
        display: block;
    }

    .arrow-columns > .wp-block-column:not(:last-child)::after {
        content: "\f063";
        font-family: "Font Awesome 7 Free";
        font-weight: 900;

        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.5em;
        transform: translateX(-50%);
    }
}
*/



/**************************
 PC：カラム間に縦線 
 *******************/
.boder-columns {
    --column-gap: 40px;
    gap: var(--column-gap);
}

.boder-columns > .wp-block-column {
    position: relative;
}

.boder-columns > .wp-block-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 12.5%;
    right: calc(var(--column-gap) / -2);
    width: 1px;
    height: 75%;
    background: currentColor;
}

/*
@media (max-width: 781px) {

    .boder-columns {
        --column-gap: 24px;
        gap: var(--column-gap);
    }

    .boder-columns > .wp-block-column:not(:last-child)::after {
        top: auto;
        right: 12.5%;
        bottom: calc(var(--column-gap) / -2);
        width: 75%;
        height: 1px;
    }
}
*/




/******************
 リスト項目でチェックマークにする 
 ***************/
.is-style-check-list {
    list-style: none;
    padding-left: 0;
}

.is-style-check-list > li {
    position: relative;
    padding-left: 1.8em;
}

.is-style-check-list > li::before {
    content: "\f058";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;

    position: absolute;
    left: 0;
    top: 0.1em;

    line-height: 1;
}



/********************
 横並び列をテーブルのようにする 
 ****************/
.info-table-row {
    display: flex;
}

.info-table-row > .wp-block-group:first-child {
    width: 30%;
    border-right: 1px solid currentColor;
}

.info-table-row > .wp-block-group:last-child {
    width: 70%;
}

.info-table-row {
    border-bottom: 1px solid currentColor;
}

.info-table-row > .wp-block-group:first-child {
    border-right: 1px solid currentColor;
}

.info-table-row:last-child {
    border-bottom: none;
}


/* カラムの中の区切り線を正しく表示させる */
.custom-flex-hr {
  flex-shrink: 0;        /* 1. 絶対に縮まないように固定する */
  width: 100%;           /* 環境によって flex-basis が効かない場合の保険 */
  margin: 0;             /* 上下の余白（必要に応じて調整してください） */
}

/* タイムライン表示(カラム用) */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

/* 年表全体の縦線 */
.timeline::before {
  content: "";
  position: absolute;
  left: 18px;   /* 丸の中央に合わせる */
  top: 0;
  bottom: 0;
  width: 2px;
  background: #cfcfcf;
}

.timeline-item {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

/* 左側 */
.timeline-left {
  position: relative;
  width: 140px;
  flex-shrink: 0;
  padding-left: 36px; /* 線と年号の位置調整 */
}

/* 丸 */
.timeline-dot {
  position: absolute;
  left: 8px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid currentColor;
  z-index: 1;
  box-sizing: border-box;
}

/* 年号 */
.timeline-year {
  font-weight: 700;
  color: #222;
  line-height: 22px;
}

/* 右側 */
.timeline-right {
  flex: 1;
}

.timeline-right h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.timeline-right p {
  margin: 0;
  line-height: 1.7;
}

/*
@media (max-width: 782px) {
    .timeline-right {
        padding-left:30px !important;
    }
}
*/

/* =========================
   Contact Form 7
========================= */

.contact-form {
/*  max-width: 760px; */
  margin-inline: auto;
  padding: clamp(24px, 5vw, 56px);
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

/* 行間 */
.contact-form__row {
  margin-bottom: 28px;
}

/* 2カラム */
.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}


.contact-form__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.contact-form__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #ff0000;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;

  /* ここ */
  transform: translateY(0px);
}

/* 入力欄 */
.contact-form input:not([type="submit"]),
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 17px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fafafa;
  color: #222;
  font: inherit;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* textarea */
.contact-form textarea {
  min-height: 180px;
  resize: vertical;
}

/* placeholder */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa;
}

/* フォーカス */
.contact-form input:not([type="submit"]):focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #111;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

/* 同意 */
.contact-form__privacy {
  margin: 8px 0 30px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.contact-form__privacy a {
  color: inherit;
  text-decoration: underline;
}

/* 送信ボタン */
.contact-form__submit {
  text-align: center;
}

.contact-form__submit input[type="submit"] {
  min-width: 240px;
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.contact-form__submit input[type="submit"]:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* CF7のメッセージ */
.contact-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
}


/* Contact Form 7 メッセージ共通 */
.wpcf7 form .wpcf7-response-output {
  position: relative;
  margin: 24px 0 0 !important;
  padding: 22px 24px 22px 58px !important;

  border: 1px solid #dbe3f0 !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
  color: #26334d !important;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;

  box-shadow: 0 8px 24px rgba(30, 50, 90, 0.10);
  animation: cf7-message-in 0.35s ease-out;
}

/* 左側のアクセントライン */
.wpcf7 form .wpcf7-response-output::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: #6478f5;
}

/* 成功メッセージ */
.wpcf7 form.sent .wpcf7-response-output {
  background: linear-gradient(135deg, #f0fdf7, #dcfce7);
  border-color: #a7e8cc !important;
  color: #166534 !important;
}

.wpcf7 form.sent .wpcf7-response-output::before {
  background: #10b981;
}

/* エラー・入力不備 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  background: linear-gradient(135deg, #fff7f7, #fee2e2);
  border-color: #fecaca !important;
  color: #991b1b !important;
}

.wpcf7 form.invalid .wpcf7-response-output::before,
.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.aborted .wpcf7-response-output::before,
.wpcf7 form.payment-required .wpcf7-response-output::before {
  background: #ef4444;
}

/* disabled の送信ボタンを薄くする */
.wpcf7 input[type="submit"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ふわっと表示 */
@keyframes cf7-message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スマホ対応 */
@media (max-width: 600px) {
  .wpcf7 form .wpcf7-response-output {
    padding: 16px 16px 16px 24px !important;
    font-size: 14px;
    border-radius: 10px !important;
  }
}



/* スマホ */
/*
@media (max-width: 782px) {
  .contact-form {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .contact-form__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-form__submit input[type="submit"] {
    width: 100%;
  }
}
*/


/*
 * =========================================================
 * Navigation overlay close button
 * ハンバーガーボタンと同じ右端に配置
 * =========================================================
 */

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: absolute;

	top: var(--wp--preset--spacing--40, 20px);

	right: 0;
	left: auto;

	margin: 0;
	padding: 0;
}


/*****************************************
 カラムの中に「メディアとテキスト」を置いた際に３カラムの高さをそろえる
 かつ画像は縦中央寄
 ******************/

 /* 3列の高さを揃える */
.column-vertical-align {
  align-items: stretch;
}

/* 各カラム内のメディアとテキスト */
.column-vertical-align .wp-block-media-text {
  height: 100%;
  align-items: center;
}

/* テキスト部分を上揃え */
.column-vertical-align .wp-block-media-text__content {
  align-self: start;
}

/* 画像を縦中央に配置 */
.column-vertical-align .wp-block-media-text__media {
  align-self: center;
}

/********************************************
ページネーション
******************************************/
.custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
}



/* ページネーション数字 */
.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
    padding: 0;
    list-style: none;
}

/* ページ番号・前へ・次へ */
.page-numbers a,
a.page-numbers,
span.page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    box-sizing: border-box;

    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* ホバー */
a.page-numbers:hover {
    color: #2563eb;
    border-color: #2563eb;
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

/* 現在のページ */
span.page-numbers.current {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

/* フォーカス（キーボード操作） */
a.page-numbers:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

/* スマートフォン */
@media (max-width: 480px) {
    .page-numbers {
        gap: 6px;
        margin: 24px 0;
    }

    .page-numbers a,
    a.page-numbers,
    span.page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        border-radius: 8px;
        font-size: 13px;
    }
}