/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Version: 4.12.6.1775038953
Updated: 2026-04-01 19:22:33
*/
/* =========================================================
00. リセット（最小限）
========================================================= */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ol,
ul,
li,
figure {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font: inherit;
}
figcaption {
display: none;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/* =========================================================
01. 変数・基本設定
========================================================= */
:root {
--header-height: 60px; /* PCヘッダーの高さ */
--breakpoint-tb: 768px; /* タブレットの分岐点 */
--breakpoint-sp: 480px; /* スマホの分岐点 */
--main-color: #1d3557; /* 紺色 */
--conversion-orange: #e94600; /* CVボタンの色 */
--bg-color-gray: #eef0f4;
}
@media (max-width: 768px) {
:root {
--header-height: 60px;
/* モバイル用の高さに上書き */
}
}
html {
height: 100dvh; /* for Firefox */
box-sizing: border-box;
font-size: 100%;
/*62.5%; */
/* FVやページ内リンクのずれを補正 */
scroll-padding-top: var(--header-height);
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* =========================================================
02. 日本語段落の左寄せ・均等割り付け・禁則処理
========================================================= */
/* を付けておく */
.ja-justify {
/* 両端揃え（＝均等割り付け） */
text-align: justify;
/* 最終行だけは左揃え（Wordの「左寄せ・均等割付」に相当） */
text-align-last: left;
/* 日本語の均等割付の方法（対応ブラウザで有効） */
text-justify: inter-character;
/* 旧Edge/IEは inter-ideograph */
/* 日本語の禁則処理（句読点の行頭/行末制御など） */
line-break: strict;
-webkit-line-break: strict;
/* WebKit系向けの補助 */
/* 変な単語分割を避ける（CJKは通常これでOK） */
word-break: normal;
/* 長い英数字/URLだけは折り返したいときの保険（任意） */
overflow-wrap: break-word;
/* Safariで句読点ぶら下げ許可（任意・対応ブラウザのみ） */
hanging-punctuation: allow-end;
}
/* =========================================================
03. コンテナ & 背景色
========================================================= */
/* 1. パソコン (1025px以上) で非表示 */
@media (min-width: 1025px) {
.none-pc {
display: none !important;
}
}
/* 2. タブレット (768px以上 〜 1024px以下) で非表示 */
@media (min-width: 768px) and (max-width: 1024px) {
.none-tb {
display: none !important;
}
}
/* 3. スマートフォン (767px以下) で非表示 */
@media (max-width: 767px) {
.none-sp {
display: none !important;
}
}
/* =========================================================
04. タイポグラフィー
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Noto Serif JP', serif;
font-weight: 700;
line-height: 1.4;
color: #292929;
}
h1 {
/* 1rem = 10px */
font-size: 3.2rem;
margin-bottom: 2rem;
}
h2 {
font-size: clamp(32px, 2.5vw + 22.5px, 48px);
font-weight: 800;
margin: 0 auto;
padding: 4.5rem 0;
}
h3 {
font-size: clamp(24px, 0.56vw + 21.9px, 30px);
margin: 0.5rem auto;
}
/* 各セクションと画像共通 */
section {
width: 100%;
}
section > img {
width: 100%;
}
/* 見出し下に装飾的につける英語見出し */
.heading-label {
display: block;
font-family: 'Cormorant Garamond', 'Trajan Pro', serif; /* 高級感のある欧文フォント */
font-size: 1.0rem;
font-weight: 900;
letter-spacing: 0.25em;
background: linear-gradient(
90deg,
#b8860b 0%,
#d4af37 40%,
#f0d060 60%,
#d4af37 80%,
#b8860b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/********************************************************
* ヘッダー
********************************************************/
#ast-mobile-header > div.ast-main-header-wrap.main-header-bar-wrap > div > div > div.site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left > div > div,
#ast-mobile-header > div.ast-main-header-wrap.main-header-bar-wrap > div > div > div.site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left > div > div{
padding: 0;
}
#ast-desktop-header .site-header-section span > a,
#ast-desktop-header > div > div > div > div > div.site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left > div > div {
font-family: serif;
padding: 4px;
}
/********************************************************
* TOPページの周辺環境写真のスワイパー等速運動
********************************************************/
#swiper-wrapper-f05c422d5a242767 {
transition-timing-function: linear !important;
}
/********************************************************
* Popup Modal
********************************************************/
[id^="popmake-"] > div > div {
justify-content:center;
}
[id^="popmake-"] > div > div > div > div {
column-gap:65px; /* 画像と左側文字エリアとの間隔 */
}
[id^="popmake-"] ul {
list-style-type: disc;
}
[id^="popmake-"] ul > li {
font-size: 22px;
line-height: 2.0;
}
/* 幅広の平面図の場合は、縦書きにする */
#popmake-1723 > div > div > div > div {
/* flex-direction: column-reverse; */
padding-top: 90px;
}
#popmake-1723 > div > div > div > div > figure > img {
width: 100%;
}
@media (max-width: 767px) {
[id^="popmake-"] > div > div > div > div {
flex-direction: column-reverse;
padding-top: 90px;
}
[id^="popmake-"] > div > div > div > div > div > h3 {
font-size: 30px;
}
[id^="popmake-"] ul {
padding-left: 1.5em;
}
}
/********************************************************
* コンタクトフォーム
********************************************************/
/* 【必須】を赤に */
#wpcf7-f19-p143-o1 > form label > .required {
color: #ff1c18;
}
#wpcf7-f19-p143-o1 > form > p:nth-child(9) > input {
width: 100%;
height: 64px;
/* background-color: #1d3557; */
/* 1. 縦方向のグラデーション（円筒形の丸み） [cite: 1, 8-11] */
/* 図の銅色を再現する高光沢グラデーション */
background: linear-gradient(
0deg,
#820a0e 0%,
#820a0e 45%,
#f14046 100%
);
border: 1px solid #71360a;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.3); /* ボタン内側に微細な光の縁を追加 */
font-weight: 700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
transition: filter 0.2s;
}
#wpcf7-f19-p143-o1 > form > p:nth-child(9) > input:hover {
/* フィルターで全体の明るさを1.2倍にする */
filter: brightness(1.2);
/* 少しだけ浮き上がらせる演出 */
transform: translateY(-1px);
}
/********************************************************
* フッター
********************************************************/
#colophon > div.site-primary-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item.ast-builder-grid-row-3-equal.ast-builder-grid-row-tablet-3-equal.ast-builder-grid-row-mobile-full.ast-footer-row-stack.ast-footer-row-tablet-stack.ast-footer-row-mobile-stack {
color: #FFFFFF; /* 全体の文字色を白に設定 */
background-color: #1d3557 ;
}
#colophon > div.site-primary-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item.ast-builder-grid-row-3-equal.ast-builder-grid-row-tablet-3-equal.ast-builder-grid-row-mobile-full.ast-footer-row-stack.ast-footer-row-tablet-stack.ast-footer-row-mobile-stack > div > div {
display: flex;
padding: 0 clamp(56px, 6vw, 100px);
}
@media (max-width: 767px) {
#colophon > div.site-primary-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item.ast-builder-grid-row-3-equal.ast-builder-grid-row-tablet-3-equal.ast-builder-grid-row-mobile-full.ast-footer-row-stack.ast-footer-row-tablet-stack.ast-footer-row-mobile-stack > div > div {
display: block;
}
}
/*
* フッターの左列
*/
.footer-gooroom-info-box {
background-color: #1D3557; /* 濃いブルー（Primaryカラーに近いのを想定） */
color: #FFFFFF; /* 全体の文字色を白に設定 */
padding: 0 30px 40px 30px; /* 内側の余白 */
font-family: 'メイリオ', 'Meiryo', sans-serif; /* 一般的なゴシック体を使用 */
}
/* タイトル (GooRooM) のスタイル */
.footer-gooroom-info-box > h2.footer-gooroom-title {
color: #FFFFFF;
font-size: 32px; /* 大きな文字サイズ */
font-weight: bold;
margin: 0;
padding: 0 0 30px 0; /* 下部に大きな余白 */
letter-spacing: -1px; /* 文字間を詰める（画像の再現） */
}
@media (min-width: 768px) and (max-width: 1024px) {
.footer-gooroom-info-box > h2.footer-gooroom-title {
font-size: 28px;
}
}
@media (max-width: 767px) {
.footer-gooroom-info-box > h2.footer-gooroom-title {
margin-bottom: 10px;
}
}
/* 連絡先と住所のグループ */
.footer-gooroom-contact-details {
line-height: 1.8; /* 行間を広めに */
margin-bottom: 40px; /* ボタンとの間に大きな余白 */
}
@media (max-width: 767px) {
.footer-gooroom-contact-details {
margin-bottom: 10px;
}
}
/* 連絡先と住所の文字サイズ調整 */
.footer-gooroom-contact-details p {
font-size: 16px; /* 基本の文字サイズ */
margin: 0;
}
/* ボタンのスタイル */
.footer-gooroom-buttons {
display: flex; /* ボタンを縦に並べる */
flex-direction: column;
gap: 15px; /* ボタン間のスペース */
}
.footer-gooroom-btn {
display: block; /* ブロック要素にして全幅に広げる */
text-align: center;
text-decoration: none; /* 下線を削除 */
color: #FFFFFF; /* ボタン内の文字色 */
background-color: transparent; /* 背景は透明 */
border: 2px solid #FFFFFF; /* 白い境界線 */
border-radius: 5px; /* 角を丸く */
padding: 12px 20px; /* ボタンのサイズ */
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s; /* ホバー時のアニメーション */
}
/* ホバー時のスタイル（オプション） */
.footer-gooroom-btn:hover {
background-color: rgba(255, 255, 255, 0.1); /* 薄く背景色を付ける */
}
/* =======================================
フッターメニュー用CSS（フッターの真ん中の列）
======================================= */
#colophon > .site-primary-footer-wrap > div > div > div.site-footer-primary-section-2 {
justify-self: center;
margin: 0 auto;
padding-bottom: 20px; /* モバイル画面で下との間隔をあけるため */
}
#astra-footer-menu {
display: flex; /* Flexコンテナ解除 */
flex-direction: column; /* 縦並び */
align-items: flex-start; /* 左寄せ */
list-style: none; /* リストのデフォルトのマーカーを削除 */
margin: 0;
padding-top: 5px;
/* width: 300px; */
}
/* 3. 個々のメニュー項目の調整 */
.site-footer-primary-section-2 #astra-footer-menu li {
/* li要素のデフォルトの横マージンを削除 */
margin: 0 0 10px 0; /* 下に間隔を空ける */
padding-left: 32px; /* ハイフンの分のスペースを空ける */
position: relative; /* 疑似要素（ハイフン）の基準位置に設定 */
font-size: 24px; /* 大きめの文字サイズ */
line-height: 1.7;
font-weight: 500;
}
/* 4. ハイフン（―）の再現 (疑似要素 ::before を使用) */
.site-footer-primary-section-2 #astra-footer-menu li::before {
content: "\2014"; /* 画像のハイフン（―）を文字として挿入 */
color: #ffffff;
position: absolute;
left: 0; /* liの左端に配置 */
top: 0;
font-size: 24px;
}
/* 5. リンクテキストのスタイル */
.site-footer-primary-section-2 #astra-footer-menu a {
color: #ffffff; /* リンクの文字色を白に */
text-decoration: none; /* 下線を削除 */
/* リンクのフォントサイズは li で指定済みのためここでは省略可 */
padding: 0 0.5em;
}
/* =======================================
フッターお問い合わせボタン（画像利用版）用CSS
======================================= */
/* 1. 全体コンテナの背景色と文字色 */
.footer-contacts-container {
background-color: #1D3557; /* 濃いブルーの背景 */
color: #ffffff;
padding: 32px 20px 20px 20px;
text-align: left;
}
/* 2. 各連絡先アイテムのスタイル */
.contact-item {
margin-bottom: 5px; /* アイテム間の間隔 */
}
/* 3. タイトルテキスト（Eメールによる...など）のスタイル */
.contact-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 0;
}
/* 4. ボタンリンク（タグ）の共通スタイル（枠線・背景色） */
.contact-btn {
display: block; /* タグをブロック要素化 */
overflow: hidden; /* 画像が枠線からはみ出ないように */
line-height: 0; /* タグの余分な高さを削除 */
text-decoration: none;
}
/* 4-1. 画像（ボタン）自体のスタイル */
.contact-btn .contact-img {
/* 画像を親要素（）の幅いっぱいに表示 */
display: block;
width: 70%;
height: auto;
}
@media (max-width: 767px) {
.contact-btn .contact-img {
width: 100%;
}
}
/********************************************************
* モバイルではヘッダーを下部に持ってきて固定する
********************************************************/
/* モバイルのみ：ヘッダーを下部固定 */
@media (max-width: 768px) {
/* ヘッダー全体を下部に固定 */
#ast-mobile-header {
position: fixed;
bottom: 0;
top: auto !important;
left: 0;
width: 100%;
z-index: 99999;
}
/* 固定フッターの両サイドのパディング */
#ast-mobile-header > div > div {
padding: 0!important;
}
#ast-mobile-header > div > div > div > div {
background-color: var(--main-color);
}
/* 要素の間隔を詰める */
#ast-mobile-header > div > div > div > div > div > div > div > p {
column-gap: 3px;
}
/* メニューボタン周囲のpadding */
#ast-mobile-header > div > div > div > div > div > div > div > p > button {
padding: 0;
line-height: 0;
}
/* ヘッダー内のHTMLウィジェットコンテナを横並びに強制 */
#ast-mobile-header > div > div > div > div > div > div > div > p {
display:flex;
flex-direction: row;
}
/* 高さ */
#ast-mobile-header > div > div > div > div > div > div > div > p > a {
height: fit-content;
}
/* 全てのアイコン画像にたいして */
#ast-mobile-header > div > div > div > div > div > div > div > p > a > img {
width: 60px;
vertical-align:bottom;
}
/* ドロワーメニューを上方向に展開させる */
.ast-mobile-header-content {
position: fixed;
bottom: 60px; /* ヘッダーバーの高さ分 */
top: auto !important;
left: 0;
width: 100%;
}
/* 標準のメニューボタン（非表示でも配置しておかないとオフキャンバスが開かない） */
#ast-mobile-header > div.ast-below-header-wrap > div > div > div > div:nth-child(2) {
display: none;
}
body {
padding-top: 0 !important;
padding-bottom: 60px !important; /* ヘッダーバーの高さ分 */
margin-top: 0 !important;
}
}
/*
* TOPへ戻るボタン
* モバイルで固定フッターが出ているときは、少し上げる
*/
@media (max-width: 768px) {
#ast-scroll-top {
right: 30px;
bottom: 61px;
}
}