/* style.css（元テンプレートの書き出し）に足した部品
 ------------------------------------------------------------ */

/* ---------- ヘッダー：スクロール後は白い背景を敷く ---------- */
.container_header.is-scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
@supports (backdrop-filter: blur(8px)) {
  .container_header.is-scrolled { background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); }
}

/* ---------- ボタン：カーソルを乗せたときの動きを揃える（色の反転は元のまま、矢印だけ少し進む） ---------- */
a.btn_default,
a.btn_contact,
span.btn_small,
a.btn_small,
.global_nav .menu_1st_layyer li a.nav_contact { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
a.btn_default::after,
span.btn_small::after,
a.btn_small::after { transition: transform .25s ease; }
a.btn_default:hover::after { transform: translate(4px, -50%); }
a.btn_small:hover::after,
.link_product:hover span.btn_small::after,
.content_service a.pho:hover ~ .service_overview .btn_small::after { transform: translate(calc(-50% + 3px), -55%); }

/* ---------- 自社製品：ロゴと文章で組んだバナー（枠・右下の矢印ボタンは元の画像バナーと共通） ---------- */
.product_wrap .product_brand { text-align: left; }
.product_wrap .link_product_brand {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 300px;
  padding: 40px 48px;
  background: #fff;
  isolation: isolate;
}
.product_brand_body { position: relative; z-index: 2; display: block; flex: 1; max-width: 620px; }
.product_brand_logo { display: block; margin-bottom: 22px; }
.product_brand_logo img { display: block; width: 260px; height: auto; }
.link_product_brand .product_brand_en { display: block; margin-bottom: 8px; font-size: 1.3rem; letter-spacing: .12em; color: #8953b1; }
.link_product_brand .product_brand_copy {
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.6;
  color: #333;
}
.product_brand_text {
  display: block;
  margin-top: 10px;
  font-size: 1.5rem;
  line-height: 1.9;
}
/* 日本語の文中で不自然に折り返さない（対応ブラウザのみ） */
.product_brand_copy, .product_brand_text { word-break: auto-phrase; text-wrap: pretty; }
.product_brand_tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.link_product_brand .product_brand_tags span {
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 1.2rem;
  color: #6b4a87;
  background: #f4effa;
}

/* 右側の飾り：ブランドの紫と青緑の輪が重なる */
.product_brand_visual {
  position: relative;
  flex: 0 0 300px;
  height: 200px;
  margin: 0 40px 0 20px;
}
.product_brand_visual i {
  position: absolute;
  top: 50%;
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.product_brand_visual i:nth-child(1) { left: 0; background: radial-gradient(circle at 35% 35%, rgba(173, 120, 214, .28), rgba(173, 120, 214, .08) 70%); border: 1px solid rgba(137, 83, 177, .35); }
.product_brand_visual i:nth-child(2) { right: 0; background: radial-gradient(circle at 65% 65%, rgba(90, 214, 200, .3), rgba(90, 214, 200, .08) 70%); border: 1px solid rgba(60, 180, 168, .4); }
.link_product_brand:hover .product_brand_visual i:nth-child(1) { transform: translate(18px, -50%); }
.link_product_brand:hover .product_brand_visual i:nth-child(2) { transform: translate(-18px, -50%); }
.product_brand_visual b {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8953b1;
  animation: product-brand-pulse 3.2s ease-in-out infinite;
}
.product_brand_visual b:nth-of-type(1) { top: 14%; left: 46%; }
.product_brand_visual b:nth-of-type(2) { top: 80%; left: 56%; background: #3cb4a8; animation-delay: 1.4s; }
@keyframes product-brand-pulse { 50% { opacity: .3; } }

@media screen and (max-width: 1180px) {
  .product_brand_visual { flex-basis: 220px; margin-right: 30px; }
  .product_brand_visual i { width: 140px; }
}
@media screen and (max-width: 786px) {
  .product_wrap .link_product_brand { display: block; min-height: 0; padding: 28px 22px 64px; }
  .product_brand_visual { display: none; }
  .product_brand_logo img { width: 200px; }
  .link_product_brand .product_brand_copy { font-size: 1.9rem; }
  .product_brand_text { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .product_brand_visual b { animation: none !important; }
}

/* ---------- サービス詳細（tmpl-service-detail.php） ---------- */
.sd_header_image::before { background: var(--sd-img, none) center right/cover no-repeat; }


/* 目次 */
.sd_toc { margin-bottom: 110px; }
.sd_toc_ttl { margin-bottom: 14px; font-size: 1.3rem; font-weight: bold; letter-spacing: .1em; color: #666; }
.sd_toc ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.sd_toc_half ul { grid-template-columns: repeat(2, 1fr); }
.sd_toc li { border-bottom: 1px solid #707070; }
.sd_toc a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 28px 16px 0;
  font-size: 1.5rem;
  font-weight: bold;
  transition: color .25s ease;
}
.sd_toc a::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  transform: translateY(-40%) rotate(45deg);
  transition: transform .25s ease;
}
.sd_toc a:hover { color: #00a7ea; }
.sd_toc a:hover::after { transform: translateY(-10%) rotate(45deg); }

.sd_no { font-family: "Roboto", sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .08em; color: #00a7ea; }

/* 2つ目以降のセクション見出しは、ページタイトルより一回り小さく */
.sd_sub .ttl_top_content .en { font-size: 5.6rem; }

/* ご支援の流れ */
.sd_flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: none; }
.sd_flow li { position: relative; padding-top: 20px; border-top: 1px solid #333; }
.sd_flow_step { font-family: "Roboto", sans-serif; font-size: 1.3rem; letter-spacing: .1em; color: #00a7ea; }
.sd_flow_ttl { margin: 6px 0 12px; font-size: 1.8rem; font-weight: bold; }
.sd_flow p { font-size: 1.4rem; line-height: 1.9; }

/* ほかのサービス */
.sd_others { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sd_other { position: relative; display: block; border: 1px solid #333; background: #fff; }
.sd_other_pho { display: block; overflow: hidden; aspect-ratio: 1040 / 560; }
.sd_other_pho img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
a.sd_other:hover .sd_other_pho img { transform: scale(1.05); }
.sd_other_text { display: block; padding: 16px 20px 48px; }
.sd_other_en { display: block; font-size: 1.2rem; letter-spacing: .05em; color: #666; text-transform: uppercase; }
.sd_other_name { display: block; margin-top: 4px; font-size: 1.6rem; font-weight: bold; }
.sd_other .btn_small { position: absolute; right: 20px; bottom: 18px; }
a.sd_other:hover .btn_small { background: #000; }
a.sd_other:hover .btn_small::after { background-image: url(../img/common/icon_arrow_button_white.svg); transform: translate(calc(-50% + 3px), -55%); }

@media screen and (max-width: 1180px) {
  .sd_toc ul { grid-template-columns: repeat(2, 1fr); }
  .sd_flow { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .sd_others { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 786px) {
  .sd_toc { margin-bottom: 60px; }
  .sd_toc ul { grid-template-columns: 1fr; }
  .sd_toc_half ul { grid-template-columns: 1fr; }
  .sd_toc a { padding: 15px 28px 13px 0; }
  .sd_sub .ttl_top_content .en { font-size: 4rem; }
  .sd_flow { grid-template-columns: 1fr; row-gap: 30px; }
  .sd_others { grid-template-columns: 1fr; gap: 20px; }
}