/*!
Theme Name: k-takumi_theme
Theme URI: http://underscores.me/
Author: Chifuru Arima
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: k-takumi_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

k-takumi_theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* CSS Document */
:root {
  --black: #212121;
  --orange: #F6AC2D;
  --cyan: #5EB7E8;
  --gray: #9E9E9E;
  --light-gray: #E0E0E0;
  --white: #FFF;
}
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  transition: all 0.3s ease-in-out;
}
*:focus {
  outline: none;
}
/* 文書全体のルート要素 */
html {
  font-size: 10px;
  scroll-behavior: smooth;
}
/* メタ情報・タイトル・CSS/JS読み込みなど */
head { 
}
/* 画面に表示される主要コンテンツ */
body {
  width: 100%;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
  color: var(--black);
  background-color: var(--white);
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  overflow: auto;
  font-feature-settings: "palt";
  line-break: strict;
}
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s !important;
}
h1, h2, h3, h4, h5 {
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: 700;
}
h1 {
  font-size: 4.0rem;
  margin-bottom: 2.4rem;
}
h2 {
  font-size: 3.4rem;
  margin-bottom: 2.4rem;
}
h3 {
  font-size: 2.8rem;
  margin-bottom: 2.4rem;
}
h4 {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
}
h5 {
  font-size: 1.7rem;
  margin-bottom: 1.0rem;
}
p {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}
p:last-of-type {
  margin-bottom: 0rem;
}
.text-center { 
  text-align: center; 
}
.text-right { 
  text-align: right; 
}
a {
  color: var(--orange);
  text-decoration: none;
}
a:hover {
  color: var(--orange);
  text-decoration: none;
}
/* インライン汎用要素 */
span {
  font-size: 0.7em;
}  
/* 重要な強調 */
strong {
  font-weight: 700;
}
/* 通常の強調（斜体など） */
em {
  font-style: italic;
}  
/* アイコンや外国語など（意味的ではなくスタイル用） */
i {}
/* 強調なしの太字 */
b {}           
/* 強調ハイライト */
mark {
  background: #ffeb3b;
  padding: 0.2em 0.3em;
}
/* 補足や注釈の小文字 */
small {
  font-size: 0.8em;
}   
sup {
  vertical-align: super;
  font-size: 0.7em;
}         
sub {
  vertical-align: sub;
  font-size: 0.7em;
}
/* 日付・時刻 */
time {
  font-size: 1.1rem;
  font-style: italic;
}
/* 略語（title属性で説明） */
abbr {
  text-decoration: underline dotted;
  cursor: help;
}
cite {}/* 出典・引用の参照 */
/* コード・プログラム断片 */
code {
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: monospace;
}        
data {}/* 機械可読データのマークアップ */
dfn {}/* 用語定義 */
s {}/* 取り消し線（非推奨または無効な内容） */
/* 出力サンプル */
samp {
  background: #eee;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: monospace;
}
/* キー入力（例：Ctrl+C） */
kbd {
  background: #eee;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: monospace;
}
u {}/* 下線（意味を持たない） */
/* 変数名など */
var {
  font-style: italic;
}
/* 双方向テキストの分離 */
bdi {
  unicode-bidi: isolate;
}
/* 双方向テキストの上書き */
bdo {
  unicode-bidi: bidi-override;
}
/* インライン引用 */
q {
  quotes: "\"" "\"";
}
/* ルビ（ふりがな） */
ruby {
  font-size: 1em;
}
rb {}
rt {
  font-size: 0.7em;
  color: #555;
}
rtc {}
/* ルビの括弧（旧ブラウザ対策） */
rp {
  display: none;
}
/* 引用文 */
blockquote {}  
/* 整形済みテキスト（コードなど） */
pre {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}         
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2rem 0;
}
/* 住所や連絡先情報 */
address {
  font-style: normal;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}
ul {
  list-style: disc inside;
  margin-bottom: 1rem;
}
ol {
  list-style: decimal inside;
  margin-bottom: 1rem;
}
li {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}
dl {
  font-size: 1.6rem;
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 2.4rem 0;
  margin: 3.2rem auto;
}
dt {
  font-weight: 700;
  border-bottom: 1px solid var(--light-gray);
}
dd {
  margin: 0;
  border-bottom: 1px solid var(--light-gray);
  padding: 0 0 2.4rem 0;
}
dt span, dd span {
    font-size: 0.85em;
}
figure {
  margin: 0;
  padding: 0;
  display: block;
}
figcaption {
  font-size: 1.25rem;
  color: var(--gray);
  margin-top: 0.8rem;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* 画像のレスポンシブ対応 */
picture {
  display: block;
  margin-bottom: 1rem;
}
audio,
video {
  width: 100%;
  display: block;
  margin-bottom: 1rem;
}
/* 外部ページの埋め込み */
iframe {
  width: 100%;
  border: none;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5rem;
}
/* 描画用キャンバス */
canvas,
svg {
  max-width: 100%;
  display: block;
}
embed {}       /* 外部リソース埋め込み（PDF等） */
object {}      /* 外部リソース・プラグイン */
source {}      /* メディアソース指定（video/audio/picture内） */
track {}       /* 字幕・キャプションデータ */
/* イメージマップ */
map {
  display: inline-block;
}
/* イメージマップ内の領域 */
area {
  cursor: pointer;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
/* 表タイトル */
caption {
  caption-side: top;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
thead {}       /* 表ヘッダー行 */
tbody {}       /* 表の本体行 */
tfoot {}       /* 表のフッター行 */
tr {}          /* 行 */
th, td {
  border: 1px solid #ccc;
  padding: 0.6rem;
  text-align: left;
}
th {
  background: #f2f2f2;
}
colgroup {}    /* 列グループ */
col {}         /* 列定義 */
div {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
nav {
    display: block;
    unicode-bidi: isolate;
}
header.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  padding: 3.2rem 0;
  z-index: 1000; /* overlayより下 */
  background-color: rgba(255,255,255,0.9);
  border-bottom: 1px solid #E0E0E0;
}
.header-inner {
  max-width: 1200px;
  width: 88%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-branding {
  width: 240px;
}
.site-title {
  margin: 0;
  line-height: 1;
}
.drawer-toggle {
  position: fixed;
  top: 34px;
  right: 32px;
  width: 24px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 5000; /* 最前面 */
}
.drawer-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--black);
  transition: 0.3s ease;
}
.drawer-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.drawer-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.drawer-toggle.is-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
.drawer-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #fff;
  transition: 0.4s ease;
  z-index: 4500; /* overlayより上 */
  padding: 64px 0;
  overflow-y: scroll;
}
.drawer-menu.is-open {
  right: 0;
}
.drawer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drawer-menu li {
  font-size: 1.4rem;
  margin: 0;
  /* border-bottom: 1px solid var(--light-gray); */
  padding: 0;
  line-height: 1;
}
.drawer-menu a {
  text-decoration: none;
  color: var(--black);
  background-color: var(--white);
  padding: 2.0rem;
  display: block;
  margin: 8px 16px;
  border-radius: 8px;
}
.drawer-menu a:hover {
  color: var(--white);
  background-color: var(--cyan);
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 3000; /* headerより上、drawer-menuより下 */
}
.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sub-navigation {
  display: block;
}
.sub-navigation ul {
  display: flex;
  gap: 2.4rem;
  margin: 0 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.sub-navigation li {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1;
}
.sub-navigation a {
  text-decoration: none;
  color: var(--black);
  font-weight: 500;
  padding: 0;
  display: block;
}
.sub-navigation a:after {
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
  padding: 0 0 0 0.6rem;
  display: inline-block;
}
.sub-navigation a:hover {
  color: var(--orange);
}
main {
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: auto;
}
/* 意味のある区分・セクション */
section {
  width: 88%;
  max-width: 1200px;
  margin: 16rem auto;
}
/* 独立した記事や投稿など */
article {
  width: 88%;
  max-width: 960px;
  margin: 16rem auto;
}
.section-title span {
  font-size: 0.45em;
  /* display: block; */
  margin: 0 0 0 1.2rem;
}
.section-page {
  margin: 8rem auto 16rem auto;
}
.section-960, .error-404 {
  width: 88%;
  max-width: 960px;
  margin: 8rem auto 16rem auto;
}
h2.title-404 {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  padding: 0;
  font-size: 4.8rem;
  line-height: 1.3;
  font-weight: 300;
}

.hero {
  width: 100%;
  max-width: 100%;
  height: 64vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
/* 背景動画エリア */
.hero .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 拡大する全体 */
.hero-preface {
  --overlay: 0; /* 初期値 */
  position: relative;
  width: 40vw;
  max-width: 100%;
  height: 40vh;
  overflow: hidden;
  border-radius: 8px;
  transition: width 0.08s linear, height 0.08s linear;
}
.hero-preface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* ← 好みで調整（0.2〜0.5） */
  pointer-events: none;
  opacity: var(--overlay);
  transition: opacity 0.4s ease-out;
  border-radius: inherit; /* ←角丸と同期 */
  z-index: 2;
}
/* 背景 → 固定 */
.hero-preface-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/kanhaiya-sharma-_HdRQWJ-Pt8-unsplash.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* ← 背景固定 */
  z-index: 1;
}
/* テキスト（最初は非表示） */
.hero-preface-content {
  color: var(--white);
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity .6s ease-out;
}
.hero-preface-content h2 span {
  display: block;
  text-align: center;
  font-size: 0.5em;
  margin: 0 0 0.4rem 0;
}
.hero-preface-content p {
  text-wrap: balance;
}
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
p + .container {
  margin: 2.4rem auto 0 auto;
}
.corporate_profile {
  margin: 8.0rem auto;
  padding: 0;
}
/* ラッパー */
.wrapper {
  padding: 0;
}
.post-wrap {
  display: grid;
  gap: 4.0rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 2.4rem auto 4.0rem auto;
  list-style: none;
}
.post-wrap + h3 {
  margin: 8.0rem 0 2.4rem 0;
}
.tag-container {
  margin: 2.4rem 0 6.4rem 0;
}
.tag-container-lower {
  margin: 6.4rem 0;
}
.container-contact {
  margin: 6.4rem 0;
}
.post-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}
.post-tags li {
  list-style: none;
  margin: 0;
}
.post-tags a {
  padding: 8px 16px;
  background-color: var(--white);
  border-radius: 20px;
  font-size: 1.3rem;
  text-decoration: none;
  border: 2px solid var(--black);
  font-weight: 600;
}
.post-tags a:hover {
  background: var(--cyan);
  border: 2px solid var(--cyan);
  color: var(--white);
}
/* ボタン */
.btn {
  display: inline-block;
  padding: 1.2rem 3.2rem;
  background: var(--orange);
  color: var(--white);
  border: 2px solid var(--orange);
  border-radius: 9999px;
  font-weight: 600;
  text-align: center;
  font-size: 1.4rem;
  margin: 3.2rem 0 0 0;
}
.btn:hover {
  color: var(--orange);
  border: 2px solid var(--orange);
  background: var(--white);
}
.btn-outline {
  background: #fff;
  color: #0077cc;
  border: 2px solid #0077cc;
}
.btn-white {
  color: var(--white);
  border: 2px solid var(--white);
  background: rgba(255,255,255,0);
}

/* タイル */
.tile-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.0rem;
}
.tile {
  display: block;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.25s ease;
}
.tile-img {
  width: 100%;
  height: 480px;
  padding: 0;
  border-radius: 8px;
  display: block;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: initial;
  filter: brightness(85%);
  transition: filter 0.3s ease;
}
.tile:hover .tile-img {
  filter: brightness(100%);
}
.tile_1 {
  background-image: url(images/sergiu-valena-51nW9f8aGL8-unsplash.jpg);
}
.tile_2 {
  background-image: url(images/davide-colonna-zjMzGkiI-zQ-unsplash.jpg);
}
.tile_3 {
  background-image: url(images/georgia-mashford-yPtnTO8f1Lo-unsplash.jpg);
}
.tile-title {
  font-size: 1.8rem;
  font-weight: 700;
  padding: 0;
  position: absolute;
  color: #FFF;
  top: 1.6rem;
  right: 1.6rem;
  writing-mode: vertical-rl;
}
.tile-link {
  padding: 1.2rem 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFF;
  transform: translateY(20px); /* ★ 下に隠す */
  opacity: 1;
  transition: all 0.35s ease;
  background: var(--orange);
  position: absolute;
  bottom: -31px;
  left: 0;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 0 0 8px 8px;
}
.tile-link:after {
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
  padding: 0 0 0 0.6rem;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 2.0rem;
  transform: translate(0, -50%);
}
.tile:hover .tile-link {
  bottom: 20px;
  opacity: 1;
}
.service-list {
  display: grid;
  gap: 4.0rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
}
.factory-list {
  display: grid;
  gap: 4.0rem;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  margin: 0 auto;
}
.service-card, .factory-card {
  display: block;
  width: 100%;
  padding: 0;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card-img, .factory-card-img {
  width: 100%;
  height: 200px;
  margin: 0 0 1.6rem 0;
  padding: 0;
  border-radius: 8px;
  display: block;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: initial;
  filter: brightness(85%);
}
.factory-card-img {
  height: 240px;
}
.card_sash {
  background-image: url("images/jacek-dylag-Tz1pnDPfp6Q-unsplash.jpg");
}
.card_exterior {
  background-image: url("images/gustavo-zambelli-nEvzSXBIhiU-unsplash.jpg");
}
.card_wet-areas {
  background-image: url("images/cat-han-VgyN_CWXQVM-unsplash.jpg");
}
.card_newly-built {
  background-image: url("images/sincerely-media-ee6Zl9Qm1AY-unsplash.jpg");
}
.card_reform {
  background-image: url("images/jon-stebbe-pddNASrLOCU-unsplash.jpg");
}
.card_public-works {
  background-image: url("images/petr-magera-8_Qei5_ShTo-unsplash.jpg");
}
.card_custom-made {
  background-image: url("images/artisanalphoto-MJcb7ZhNeUA-unsplash.jpg");
}
.factory-1 {
  background-image: url("images/DJI00216.MP4_000283816-min.jpg");
}
.mimata-factory {
  background-image: url("images/099-DJI_00733-min.jpg");
}
.hayasuzu-factory {
  background-image: url("images/098-DJI_00599-min.jpg");
}
/* カード */
.card-list {
  display: grid;
  gap: 3.2rem;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  margin: 0 auto;
}
.card {
  display: block;
  width: 100%;
  padding: 2.4rem;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-img {
  width: 100%;
  height: 200px;
  margin: 0 0 1.6rem 0;
  padding: 0;
  display: block;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: initial;
  filter: brightness(85%);
}
.card:hover .card-img,
.service-card:hover .service-card-img,
.factory-card:hover .factory-card-img {
  filter: brightness(100%);
}
.card-title,
.service-card-title {
  font-size: 1.6rem;
  margin: 0;
}
.card-text,
.service-card-text {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
}
.card-link,
.service-card-link {
    font-size: 1.1rem;
    line-height: 1;
    margin: 1.2rem 0 0 0;
}
.card-link:after,
.service-card-link:after {
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
  padding: 0 0 0 0.6rem;
  display: inline-block;
}
/* 挿絵スライド */
.illustration-slider {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  width: 100%;
  height: 450px; /* 挿絵サイズ。必要なら調整OK */
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
/* ▼ ドット ▼ */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2.4rem;
}
.dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: var(--light-gray);
  cursor: pointer;
}
.dots button.active {
  background-color: var(--black);
}
/* ------- ブログ一覧 ------- */
.media-list {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.0rem;
}
.text-list {
  list-style: none;
  margin: 0;
}
.media-list_item,
.text-list_item {
  margin: 0 0 0 0;
}
.media-list_item a {
  display: flex;
  flex-direction: row;
  background-color: var(--white);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.text-list_item a {
  margin: 0 0 2.4rem 0;
  display: block;
  background-color: var(--white);
  text-decoration: none;
  color: inherit;
}
.media-list_img {
  width: 35%;
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  flex-shrink: 0;
  filter: brightness(85%)
}
.media-list_text {
  width: 65%;
  padding: 0 2.4rem;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.text-list_text {
  width: 100%;
  padding: 0 2.4rem 2.4rem 0;
  border-bottom: 1px dotted var(--light-gray);
}
.service-card time,
.media-list_text time,
.text-list_text time {
  display: block;
  margin-bottom: 6px;
}
.media-list_text h3,
.text-list_text h3 {
  margin: 0;
  font-size: 1.6rem;
}
.media-list_link,
.text-list_link {
    font-size: 1.1rem;
    line-height: 1;
    margin: 1.2rem 0 0 0;
}
.media-list_link:after,
.text-list_link:after {
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
  padding: 0 0 0 0.6rem;
  display: inline-block;
}
.media-list_item:hover .media-list_img {
  filter: brightness(100%);
}
.media-list_item:hover .media-list_text h3,
.media-list_item:hover .media-list_text .media-list_link,
.text-list_item:hover .text-list_text h3,
.text-list_item:hover .text-list_text .text-list_link {
  color: var(--orange);
}
.cta-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  width: 100%;
  max-width: 100%;
}
/* カード */
.cta-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  padding: 60px;
  gap: 40px;
  text-decoration: none;
  color: #111;
  border-right: 1px solid #ddd;
  transition: background 0.3s ease;
}
.cta-card:last-child {
  border-right: none;
}
.cta-card:hover {
  background: #fafafa;
}
.cta-text {
    width: 240px;
}
.cta-text h2 {
  position: relative;
  margin: 0;
}
.cta-text h2 span {
  font-size: 0.4em;
  display: block;
}

.cta-text h2::after {
  position: absolute;
  top: 50%;
  right: 0; /* 位置は任意 */
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  content: '\f0a9';
  font-weight: 900;
  padding: 0;
  display: inline-block;
  font-size: 2.8rem;
}

/* 矢印（疑似要素じゃなく span） */
.cta-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f2b24c;
  position: relative;
  flex-shrink: 0;
}

.cta-arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* イラスト */
.cta-image img {
  max-width: 240px;
  width: 100%;
}
.view-all {
  font-size: 1.6rem;
  line-height: 1;
  margin: 0;
  padding: 0 4.0rem 0 0;
  color: var(--orange);
  text-align: right;
  display: block;
  position: relative;
}
.view-all:after {
  position: absolute;
  top: 50%;
  right: 0; /* 位置は任意 */
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  content: '\f0a9';
  font-weight: 900;
  padding: 0;
  display: inline-block;
  font-size: 2.8rem;
}
.recruit-banner {
  width: 300px;
  padding: 16px;
  background-color: #FFF;
  border-radius: 8px;
  position: fixed;
  bottom: 3%;
  right: 3%;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 24%);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease-out;
}
.recruit-banner.hidden {
  opacity: 0;
  visibility: hidden;
}
.recruit-banner-img {
  height: 180px;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: initial;
  filter: brightness(100%);
  background-image: url(images/recruit-banner-min.jpg);
}
.recruit-banner-textbox {
  margin: 16px auto 0 auto;
  width: 90%;
}
.recruit-banner-textbox h2 {
    font-size: 2.4rem;
  margin: 0 0 1.2rem 0;
}
.recruit-banner-textbox h2 span {
    font-size: 0.55em;
    margin: 0 0 0 0.8rem;
}
.recruit-banner-textbox h2:after {
  width: 16%;
  border-bottom: solid 3px #FF1744;
}
.recruit-banner-textbox p {
    font-size: 1.3rem;
}
.recruit-banner a:hover {
  color: #FF1744;
}
.recruit-banner:hover {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px) !important;
}




/* 補足情報・サイドバーなど */
aside {
  padding: 1rem;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 2rem;
}
.breadcrumb-outer {
  width: 100%;
  max-width: 100%;
  background-color: #F5F5F5;
  padding: 2.0rem 0;
}
.home .breadcrumb-outer {
  display: none;
}
.breadcrumb {
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 1.8rem;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb span {
    font-size: 1.2rem;
  font-weight: 500;
}
.breadcrumb span[itemprop="itemListElement"] {
  display: inline-flex;
  align-items: center;
}
/* 区切りスラッシュ */
.breadcrumb span[itemprop="itemListElement"] + span[itemprop="itemListElement"]::before {
  content: "/";
  font-size: 2.0rem;      /* スラッシュだけ大きく */
  line-height: 1;
  margin: 0 0.6em;
  display: inline-flex;
  align-items: center;   /* 縦センター */
  font-weight: 300;
}
footer {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 4rem 0;
  background-color: var(--white);
}
footer p {
    font-size: 1.4rem;
}
footer .container {
  width: 88%;
  max-width: 1200px;
}
.footer-title {
  width: 240px;
}
.footer-navigation,
.sns-navigation {
  margin: 3.2rem 0;
  display: block;
}
.legal-links {
  margin: 3.2rem 0;
  display: contents;
}
.footer-navigation ul,
.sns-navigation ul,
.legal-links ul {
  display: flex;
  gap: 2.4rem;
  margin: 0 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.legal-links ul {
}
.sns-navigation ul {
  gap: 2.0rem;
}
.legal-links ul {
  margin: 0;
}
.footer-navigation li,
.sns-navigation li {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1;
}
.legal-links li {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1;
}
.sns-navigation li {
  font-size: 1.8rem;
}
.footer-navigation a,
.sns-navigation a {
  text-decoration: none;
  color: var(--black);
  font-weight: 500;
  padding: 0;
  display: block;
}
.legal-links a {
  text-decoration: none;
  color: var(--gray);
  font-weight: 500;
  padding: 0;
  display: block;
}
.footer-navigation a:after,
.legal-links a:after {
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
  padding: 0 0 0 0.6rem;
  display: inline-block;
}
.footer-navigation a:hover {
  color: var(--orange);
}
.legal-links a:hover {
  color: var(--black);
}
#map {
  margin: 4.8rem auto 4.0rem auto;
}
.copyright-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.copyright-area p {
  font-size: 1.2rem;
}
/* template02 */
.wpcf7-list-item {
  margin: 0 0 12px 0;
  display: block;
}
.wpcf7-list-item:last-of-type {
  margin: 0;
}
.form-title {
  margin: 0 0 24px 0;
}
.form-title span {
  display: block;
}
.form__wrap {
  width: 100%;
  margin: 0 auto;
}
.wpcf7 .template02 {
  color: #212121;
}
.wpcf7 .template02 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity 0.25s;
}
.wpcf7 .template02 a:hover {
  opacity: 0.5;
  transition: opacity 0.25s;
}
.wpcf7 .template02 div.form__row {
  display: flex;
  margin: 0;
  padding: 24px 0;
  border-top: 1px dotted #E0E0E0;
  align-items: center;
}
.wpcf7 .template02 div.form__row.row-privacy, .wpcf7 .template02 div.form__row.row-submit {
  display: block;
  border-top: 0;
  margin-top: 24px;
  text-align: left;
}
.wpcf7 .template02 p.form__label, .wpcf7 .template02 p.form__body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label {
  width: 36%;
  padding: 24px 16px 24px 8px;
}
.wpcf7 .template02 p.form__body {
  width: 64%;
  padding: 0 8px 0 16px;
}
.form__body__select {
  padding: 16px 8px 16px 16px!important;
}
.form__body__line {
  padding: 0 8px 24px 16px !important;
}
.wpcf7 .template02 div.form__row.row-privacy .form__body, .wpcf7 .template02 div.form__row.row-submit .form__body {
  width: 100%;
}
.wpcf7 .template02 p.form__label label {
  font-weight: 500;
  position: relative;
  margin: 0;
  padding: 0;
  padding-left: 56px;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label label::after {
  content: "\4EFB\610F";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  margin: 0;
  padding: 6px 0;
  border-radius: 2px;
  background-color: #EEEEEE;
  color: #757575;
  font-size: 1.1rem;
  text-align: center;
  box-sizing: border-box;
  line-height: 1;
}
.wpcf7 .template02 p.form__label.is-required label {
  position: relative;
}
.wpcf7 .template02 p.form__label.is-required label span,
.wpcf7 .template02 p.form__label label span {
  display: block;
  margin: 0.8rem 0 0 0;
}
.wpcf7 .template02 p.form__label.is-required label::after {
  content: "\5FC5\9808";
  display: block;
  top: -1px;
  right: 0;
  width: 40px;
  padding: 6px 0px;
  background-color: #D50000;
  color: #FFF;
  font-size: 1.1rem;
  text-align: center;
  line-height: 1;
}
/* テキストフィールド */
.wpcf7 .template02 input[type=text], .wpcf7 .template02 input[type=tel], .wpcf7 .template02 input[type=email], .wpcf7 .template02 textarea, .wpcf7 .template02 input[type=date] {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  box-shadow: none;
  background-color: #FFF;
  /* color: #E0E0E0; */
  font-family: inherit;
  font-weight: inherit;
  font-size: 1.4rem;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 input[type=date] {
  width: 32%;
}
/* テキストフィールド placeholder */
.wpcf7 .template02 input[type=text]::placeholder, .wpcf7 .template02 input[type=tel]::placeholder, .wpcf7 .template02 input[type=email]::placeholder, .wpcf7 .template02 input[type=url]::placeholder, .wpcf7 .template02 input[type=date]::placeholder, .wpcf7 .template02 input[type=number]::placeholder, .wpcf7 .template02 textarea::placeholder {
  color: #E0E0E0;
}
.wpcf7 .template02 input[type=text]:-ms-input-placeholder, .wpcf7 .template02 input[type=tel]:-ms-input-placeholder, .wpcf7 .template02 input[type=email]:-ms-input-placeholder, .wpcf7 .template02 input[type=url]:-ms-input-placeholder, .wpcf7 .template02 input[type=date]:-ms-input-placeholder, .wpcf7 .template02 input[type=number]:-ms-input-placeholder, .wpcf7 .template02 textarea:-ms-input-placeholder {
  color: #E0E0E0;
}
.wpcf7 .template02 input[type=text]::-ms-input-placeholder, .wpcf7 .template02 input[type=tel]::-ms-input-placeholder, .wpcf7 .template02 input[type=email]::-ms-input-placeholder, .wpcf7 .template02 input[type=url]::-ms-input-placeholder, .wpcf7 .template02 input[type=date]::-ms-input-placeholder, .wpcf7 .template02 input[type=number]::-ms-input-placeholder, .wpcf7 .template02 textarea::-ms-input-placeholder {
  color: #E0E0E0;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template02 input[type=text]:focus, .wpcf7 .template02 input[type=tel]:focus, .wpcf7 .template02 input[type=email]:focus, .wpcf7 .template02 input[type=url]:focus, .wpcf7 .template02 input[type=date]:focus, .wpcf7 .template02 input[type=number]:focus, .wpcf7 .template02 textarea:focus {
  outline: 0;
  border: 1px var(--orange) solid;
  /*box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);*/
}
/* チェックボックス */
.wpcf7 .template02 input[type=checkbox] {
  display: none;
}
.wpcf7 .template02 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0px 24px 0 0;
  padding: 2px 0 0 28px;
  font-size: 1.4rem;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
  background-color: #FFF;
  box-sizing: border-box;
}
.wpcf7 .template02 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 4px;
  left: 6px;
  width: 6px;
  height: 10px;
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity 0.25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span {
  color: var(--orange);
  transition: all 0.25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span::before {
  opacity: 1;
  border: 1px solid var(--orange);
  /* box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5); */
  background-color: var(--orange);
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span::after {
  opacity: 1;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: opacity 0.25s ease;
}
/* ラジオボタン */
.wpcf7 .template02 input[type=radio] {
  display: none;
}
.wpcf7 .template02 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0px 24px 0 0;
  padding: 2px 0 0 26px;
  font-size: 1.4rem !important;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
  background-color: #fefefe;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio]:checked + span {
  color: var(--orange);
}
.wpcf7 .template02 input[type=radio]:checked + span::before {
  border: 1px solid var(--orange);
}
.wpcf7 .template02 input[type=radio]:checked + span::after {
  opacity: 1;
  top: 5px;
  left: 3px;
  width: 12px;
  height: 12px;
  background-color: var(--orange);
  border-radius: 50%;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template02 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: 16px 16px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  box-shadow: none;
  background-color: #FFF;
  background-image: linear-gradient(90deg, var(--orange), var(--orange));
  background-position: 100% 0;
  background-size: 40px 48px;
  background-repeat: no-repeat;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 select::-ms-expand {
  display: none;
}
.wpcf7 .template02 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  top: 50%;
  right: 16px;
  margin-top: 0px;
  border-bottom: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select:focus {
  outline: 0;
  border: 1px var(--orange) solid;
  /* box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5); */
}
.wpcf7 .template02 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
}
/* 送信ボタン */
.wpcf7 .template02 .submit-btn {
  position: relative;
  /* width: fit-content; */
  height: auto;
  /* max-width: 100%; */
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template02 .submit-btn p {
    text-align: center;
}
.wpcf7 .template02 input[type="submit"] {
  width: 240px;
  color: #FFF;
  background-color: var(--orange);
  border: 2px solid var(--orange);
  display: block;
  text-align: center;
  font-weight: 600;
  padding: 12px 40px;
  margin: 0 auto;
  border-radius: 32px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1.6rem;
  transition: all 0.5s;
}
.wpcf7 .template02 input[type="submit"]:disabled {
  cursor: not-allowed;
  background-color: #E0E0E0 !important;
  color: #FFF !important;
  border: 2px solid #E0E0E0;
}
.wpcf7 .template02 input[type="submit"]:hover {
  color: var(--orange);
  background-color: #FFF;
}
.wpcf7 .template02 input[type="submit"]:disabled:hover {
  box-shadow: none !important;
  transform: translateY(0px) !important;
}
.wpcf7 .template02 input[type="submit"]:focus {
  outline: 0;
  /* box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5); */
}
/*.wpcf7 .template02 input[type="submit"]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, #FFF 10%, transparent 10%) no-repeat 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.3s, opacity 1s;
}
.wpcf7 .template02 input[type="submit"]:active::after {
  transform: scale(0, 0);
  transition: 0s;
  opacity: 0.3;
}*/
.wpcf7-spinner {
  visibility: hidden;
  display: block;
  background-color: #23282d; /* Dark Gray 800 */
  opacity: 0.75;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 16px auto 0 auto;
  position: relative;
}
.form__body__outer {
  width: 64%;
}
.form__body__outer p.form__body {
  width: 100% !important;
}
input#custom-datepicker {
    width: 48%;
}
span.note-zip2 {
  margin: 8px 0 0 0;
  overflow: auto;
  display: block;
}
/*styles.cssからの変更*/
.wpcf7-not-valid-tip {
	color: #D50000;
	font-size: 1.2rem;
	display: block;
	margin: 8px 0 0 0;
	font-weight: 500;
}



@media (max-width: 1085px) {
.footer-navigation ul {
  display: block;
  gap: 3.2rem;
  margin: 0;
}
  .footer-navigation li {
    margin: 0 0 1.6rem 0;
  }
}

@media (max-width: 1012px) {
	.sub-navigation {
		display: none;
	}
}
@media (max-width: 950px) {
  .media-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .tile-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .service-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 794px) {
  .hero-preface-content {
    width: 90%;
    margin: 0 auto;
  }

}
@media (max-width: 780px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .recruit-banner {
    width: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 24px;
  }
  .recruit-banner-img {
    display: none;
  }
  .recruit-banner-textbox {
    margin: 16px auto;
  }
}
@media (max-width: 678px) {
  .cta-area {
    display: block;
  }
  .cta-card {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
  .cta-card:last-child {
  border-bottom: none;
}

}
@media (max-width: 670px) {
  .wpcf7 .template02 div.form__row {
    display: block;
  }
  .wpcf7 .template02 p.form__label {
    width: 100%;
  }
  .wpcf7 .template02 p.form__body {
  width: 100%;
  padding: 0 8px 0 8px;
  }
  .form__body__outer {
    width: 100%;
  }
  .form__body__select {
    padding: 16px 8px 16px 8px!important;
  }
  .wpcf7 .template02 input[type="submit"] {
    width: 56%;
  }
}
@media (max-width: 630px) {
  .tile-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .tile-img {
    height: 280px;
  }
  .tile-title {
    writing-mode: initial;
  }
}
@media (max-width: 624px) {
  .copyright-area {
    display: block;
  }
  .legal-links ul {
    margin: 1.6rem 0 0 0;
  }
}
@media (max-width: 560px) {
  .view-all {
    margin: 3.2rem 0 0 0;
  }
}
@media (max-width: 500px) {
  .btn {
    margin: 3.2rem auto 0 auto;
    width: fit-content;
    display: block;
  }
  .service-list {
    gap: 4.0rem 2.4rem;
  }
  .media-list_img {
    width: 40%;
  }
  .media-list_text {
    padding: 0 0 0 2.4rem;
  }
  
}