Instagramインスタグラム
*/
.vertical-Ttl_en {
display: block;
font-size: clamp(2rem, 0.545rem + 7.27vw, 6rem);
writing-mode: vertical-rl;
line-height: 1;
font-weight: 700;
font-family: "Montserrat", sans-serif;
}
.vertical-Ttl_ja {
font-size: clamp(1.4rem, 1.182rem + 1.09vw, 2rem);
writing-mode: vertical-rl;
line-height: 1;
padding-top: 1em;
font-weight: 700;
border-top: solid 80px #3a3227;
width: 3px;
display: flex;
/* justify-content: center; */
align-items: center;
}
.flex.Subtitle {
justify-content: flex-start;
gap: 1.5em;
}
.home-section03 .flex.Subtitle {
justify-content: flex-end;
}
/*ースラッシュタイトルー*/
.slash-title {
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto 2em;
font-size: clamp(2rem, 1.855rem + 0.73vw, 2.4rem) !important;
}
.slash-title::before, .slash-title::after {
content: '';
border-radius: 50px;
width: 3px;
height: 40px;
background-color: #ec7f38;
}
.slash-title::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.slash-title:after {
margin-left: 30px;
transform: rotate(35deg)
}
/*ー横棒タイトルー*/
.line-title {
align-items: center;
display: flex;
justify-content: center;
font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem);
font-weight: 700;
color: #5796de;
}
.line-title::before, .line-title::after {
background-color: #5796de;
border-radius: 5px;
content: "";
height: 3px;
width: 80px;
}
.line-title::before {
margin-right: 15px;
}
.line-title::after {
margin-left: 15px;
}
/*=========////////サイズ・文字色・下線////////=========*/
.lead-txt {
font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem);
line-height: 2.5;
font-weight: 500;
text-align: left;
}
.font-or {
color: #e89922;
}
.linear {
display: inline;
background: linear-gradient(transparent 60%, #ffec51 30%);
}
/*=========////////クラス指定////////=========*/
.margin-auto {
margin-inline: auto;
}
.text-center {
text-align: center;
}
.none {
display: none;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex.reverse {
flex-direction: row-reverse;
}
.radius20 {
border-radius: 20px;
}
.radius40 {
border-radius: 40px;
}
.mb-ten5em {
margin-bottom: 0.5em;
}
.mb-1em {
margin-bottom: 1em;
}
.mb-2em {
margin-bottom: 2em;
}
.mb-short {
margin-bottom: clamp(20px, 4vw, 80px);
}
.mb-mid {
margin-bottom: clamp(40px, 6vw, 100px);
}
.mb-large {
margin-bottom: clamp(60px, 10vw, 120px);
}
.mb-xlarge {
margin-bottom: clamp(80px, 20vw, 180px);
}
.aspect3-2, img.aspect3-2 {
aspect-ratio: 3 / 2;
}
.aspect2-1, img.aspect2-1 {
aspect-ratio: 2 / 1;
}
.aspect2-3, img.aspect2-3 {
aspect-ratio: 2 / 3;
}
.aspect3-4, img.aspect3-4 {
aspect-ratio: 3 / 4;
}
.aspect4-5, img.aspect4-5 {
aspect-ratio: 4 / 5;
}
.aspect19-7, img.aspect19-7 {
aspect-ratio: 19 / 7;
}
/*内包の余白０*/
.width1200 .width1200, .width1200 .width900 {
padding: 0px;
}
/*ボックス幅*/
.width15 {
width: 15%;
}
.width20 {
width: 20%;
}
.width23 {
width: 23%;
}
.width25 {
width: 25%;
}
.width28 {
width: 28%;
}
.width30 {
width: 30%;
}
.width32 {
width: 32%;
}
.width35 {
width: 35%;
}
.width40 {
width: 40%;
}
.width45 {
width: 45%;
}
.width47 {
width: 48%;
}
.width48 {
width: 48%;
}
.width50 {
width: 50%;
}
.width55 {
width: 55%;
}
.width60 {
width: 60%;
margin: 0 auto;
}
.width65 {
width: 65%;
}
.width70 {
width: 70%;
margin: 0 auto;
}
.width80 {
width: 80%;
margin: 0 auto;
}
/*========================================================================================
FV
=========================================================================================*/
/*=========////////ローディング////////=========
*/
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2.5s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.loading__logo {
opacity: 0;
animation: logo_fade 2s 0.5s forwards;
width: 300px;
}
@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}
/*========================================================================================
ヘッダー
=========================================================================================*/
/* 固定ヘッダーのスタイル
.header-menu.header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: #fff2e6 url(/wp-content/uploads/2024/11/bg_paper.png) repeat left top / 100%;
animation: slide-in 0.3s ease-in-out;
}
.header-menu.header-fixed > li {
padding: 20px 0 20px;
}*/
/* 固定時のアニメーション
@keyframes slide-in {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}*/
/*ヘッダー透過*/
.header-menu.header-menu {
background-color: transparent;
}
.header-content02 {
position: absolute;
z-index: 10;
width: 100%;
}
.header-menu.header-menu > li a {
color: #ffffff;
border-right: none;
}
/*================*/
.sticky-nav {
display: block;
position: fixed;
z-index: 10;
top: 50%;
right: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.sticky-nav .g-sub-nav-list a {
display: block;
writing-mode: vertical-rl;
width: 70px;
font-size: 1.8rem;
padding: 15px;
text-align: center;
margin-left: 0;
background-color: #c00000;
/*border-radius: 10px 0 0 10px;*/
color: #fff;
-webkit-transition: .3s;
transition: .3s;
font-weight: 600;
border: 3px solid #fff;
border-right: none;
letter-spacing: 0.1em;
}
.sticky-nav .g-sub-nav-list a:first-of-type {
margin-bottom: 1em
}
/*PC以外ホバー禁止*/
@media(hover: hover) {
.sticky-nav .g-sub-nav-list a:hover {
color: #c00000;
background-color: #ffffff;
border: 3px solid #c00000;
border-right: none;
}
.sticky-nav .g-sub-nav-list a:hover i.fa-solid.fa-envelope, .sticky-nav .g-sub-nav-list a:hover i.fa-solid.fa-arrow-right {
color: #e2678b !important;
}
}
/*下層ヘッダーのシャドウ調整*/
p.sub-header-txt {
margin-bottom: 0;
}
/*========================================================================================
お問い合わせ
=========================================================================================*/
/*送信ボタン*/
input[type="submit"], input[type="button"] {
width: 60%;
border-radius: 50px;
transition: all 0.3s;
background: #c00000;
border: 1px solid #c00000 !important;
}
input[type="submit"]:hover, input[type="button"]:hover {
color: #c00000 !important;
background: #fff !important;
}
input[type="text"], textarea, input[type="email"], input[type="tel"], input[type="radio"] {
background-color: #ffffff;
}
.required {
color: #ffffff;
background-color: var(--main);
}
table.contact-form01 {
border-collapse: separate;
border-spacing: 0px 1px;
margin-bottom: 8em;
}
table.contact-form01 th {
/* border-right: 0px solid #065fd4;*/
color: #ffffff;
background: #02b3f1;
}
/*table.contact-form01 th {
border-bottom: 1px solid #ffffff;
}*/
table.contact-form01.contact-form01 th:not(:last-of-type) {
border-bottom: 1px solid #ffffff;
}
table.contact-form01 tbody tr:first-child th, table.contact-form01 tbody tr:first-child td {
line-height: 2.5;
border-top: 1px solid #ffffff;
}
/*table.contact-form01 td {
border-bottom: 1px solid #ffffff;
}*/
table.contact-form01 td {
border-left: #ffffff 1px solid;
font-size: 11px;
background: #02b3f1;
}
table.contact-form01.contact-form01 td:not(:last-of-type) {
border-bottom: 1px solid #ffffff;
}
tablepress > :where(thead) + tbody > :where(:not(.child)) > *, .tablepress > tbody > * ~ :where(:not(.child)) > *, .tablepress > tfoot > :where(:first-child) > * {
border-top: 1px solid #ffffff !important;
}
.wpcf7-list-item-label {
font-size: 1.6rem;
}
.privacy-check {
margin-bottom: 6em;
}
.privacy-check a {
color: #02b3f1;
}
/*========================================================================================
CTN
=========================================================================================*/
/*.contact-band {
padding: 3vw 0;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(rgba(0, 63, 135, 0.2), rgba(0, 63, 135, 0.2)), url(/wp-content/uploads/2024/10/wang-odds-qc703GaemGo-unsplash.jpg);
position: relative;
}
.contact-band-title {
font-family: "Hina Mincho", serif;
font-size: 5rem;
}
.contact-band-inner h2, .contact-band-inner p {
color: #ffffff;
}
.contact-band-inner .cf-cb-txt {
margin-bottom: 1em;
font-size: 2rem;
}
.cf-cb-head.cf-cb-head {
background-color: transparent!important;
font-size: 2rem;
}
.contact-band-inner .btn01 {
border: 1.5px solid #ffffff;
background: transparent;
font-size: 1.6rem;
}
a.cf-tel-number {
color: #ffffff;
}*/
/*========================================================================================
フッター
=========================================================================================*/
.footer {
background: #02b3f1 /*url(/wp-content/uploads/2025/09/24371105_m-2.jpg) no-repeat left bottom/100%*/ ;
}
.footer-logo {
width: 70%;
margin: 0 auto 40px;
padding-bottom: 40px;
border-bottom: 5px dotted #ffffff;
margin-bottom: 40px;
}
.footer-address p, .footer-address a, .footer-menu a {
color: #ffffff !important;
}
.sns-icon-title p, .sns-sub-nav li a, .sns-icon-title span, .copyright p {
color: #ffffff !important;
}
.line-icon.line-icon path {
fill: #ffffff !important;
}
.footer-menu-title {
background-color: #ffffff;
color: #02b3f1;
}
.footer-menu > li > a {
border-bottom: 1px dashed #ffffff;
}
@media screen and (max-width: 1024px) {
.footer-menu a {
color: #ffffff !important;
}
}
.footer-logo-address {
width: 500px;
/* text-align: center; */
display: flex;
align-items: center;
flex-direction: column;
}
/*========================================================================================
スライダー
=========================================================================================*/
/* ===== MVスライドショー ===== */
.mv {
position: relative;
}
.mv-inner {
position: relative;
}
/* スライダー高さ＆トリミング */
.mv-swiper {
height: 105vh
}
.mv-swiper .swiper-slide, .mv-swiper picture, .mv-swiper img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* スライダードットと矢印消す*/
.swiper .swiper-button-prev, .swiper .swiper-button-next, .swiper .swiper-pagination {
display: none !important;
}
/* オーバーレイ（白文字／均一の薄い黒フィルター）*/
.mv-overlay {
position: absolute;
inset: 0;
z-index: 3; /* スライドより前面 */
display: grid;
align-content: center; /* 縦センター（SPは下寄せに切替） */
padding: clamp(16px, 6vw, 96px);
color: #fff;
/*pointer-events: none; スワイプを妨げない */
/*justify-content: center;
text-align: center;*/
justify-content: flex-start;
text-align: left;
}
.mv-title {
margin-bottom: 1em
}
/* 均一の黒フィルター（濃さは .22 を好みで調整） */
.mv-overlay::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .22); /* ← 薄い黒。濃くするなら .28 など */
z-index: 0;
}
/* テキストはフィルターの上 */
.mv-overlay > * {
position: relative;
z-index: 1;
}
/* タイポ（ごく薄いシャドウ） */
.mv-title span.smooth__inner {
font-size: clamp(3rem, 2.5rem + 2.5vw, 5rem);
line-height: 1;
font-weight: 600;
margin-bottom: 0.6em;
color: #fff;
}
/* CTAボタン（薄シャドウ＆クリック可） */
/*.mv-cta {
pointer-events: auto;
display: inline-block;
padding: .9em 1.6em;
background: #c00000;
color: #fff;
text-decoration: none;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}*/
#btn_animation .btn_kira {
display: block;
position: relative;
width: 100%;
height: 70px;
line-height: 70px;
font-size: 2rem;
text-decoration: none;
background-color: #c00000;
color: #ffffff;
text-align: center;
overflow: hidden;
}
#btn_animation .btn_kira:hover {
text-decoration: none;
color: #fbfbfb;
}
#btn_animation .btn_kira::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fbfbfb;
animation: btn_animation 2.5s ease-in-out infinite;
}
@-webkit-keyframes btn_animation {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.mv-cta:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
/* スワイパーUIをさらに前面に */
.mv-swiper .swiper-button-prev, .mv-swiper .swiper-button-next, .mv-swiper .swiper-pagination {
z-index: 4;
}
/*========================================================================================
HOME
=========================================================================================*/
/*===== 全階層共通背景色柄余白の指定 =====*/
.home-section.home-section03, .home-section.home-section05, .home-section.home-section07 {
background-color: #ffffff;
box-shadow: 0px 0px 36px -5px #777777;
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
}
h3.mid-title {
border-bottom: solid 3px #c5d9e8;
position: relative;
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 2em;
color: #005bb4;
}
h3.mid-title.col-sx {
color: #00b2f0;
}
h3.mid-title:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #005bb4;
bottom: -3px;
width: 30%;
}
h3.mid-title.col-sx:after {
border-bottom: solid 3px #00b2f0;
}
/* 文字が滑らかに表示（内包ラッパ方式） */
.smooth {
display: inline-block;
overflow: hidden; /* ← クリップはラッパで */
vertical-align: bottom;
line-height: 1.2;
/* 必要なら：white-space: nowrap; */
}
.smooth__inner {
display: inline-block;
transform: translateX(-100%); /* 初期は全隠し */
will-change: transform;
transition: transform 1.2s cubic-bezier(0.37, 0, 0.63, 1);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 表示状態（JSが .is-animated を .smooth に付与） */
.smooth.is-animated .smooth__inner {
transform: translateX(0);
}
/* 見出し本体は block のまま＆擬似要素が出せるように */
.title_design-op {
display: block;
position: relative; /* ← 擬似要素の基準。無ければ付ける */
overflow: visible; /* ← 擬似要素を隠さない */
}
/* 動きを控えたいユーザーへ配慮 */
@media (prefers-reduced-motion: reduce) {
.smooth__inner {
transition: none !important;
transform: none !important;
}
}
/*================*/
section.home-section01 {
/* padding: clamp(80px, 14vw, 140px) 0 clamp(80px, 20vw, 180px); */
margin-top: -7vw;
z-index: 5;
position: relative;
background-color: #ffffff;
width: 75%;
margin-inline: auto;
/*margin-bottom: clamp(80px, 20vw, 180px);*/
padding: 10em 8em;
box-shadow: 0px 0px 36px -5px #777777;
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
}
section.home-section01 .title_design-op span.small span, section.home-section03 .title_design-op span.small span, section.home-section05 .title_design-op span.small span, section.home-section07 .title_design-op span.small span {
color: #00b2f0;
}
section.home-section02 .title_design-op span.big span, section.home-section02 .title_design-op span.small span, section.home-section04 .title_design-op span.big span, section.home-section04 .title_design-op span.small span, section.home-section06 .title_design-op span.big span, section.home-section06 .title_design-op span.small span {
color: #ffffff;
}
.policy-content {
background-color: #005bb3;
padding: 30em 10em 10em;
margin-top: -20em;
}
.policy-content p {
color: #ffffff;
}
/*================*/
.home-section02 .width55 p, .home-section02 .width55 h2 {
color: #ffffff;
}
.content.bu {
background-color: #005bb3;
}
.home-section02 .title_design-op {
text-align: left;
}
.min_100vw {
margin: 0 calc(50% - 50vw);
width: 100vw;
}
.min_100vw.mb {
margin: 0 calc(50% - 50vw) clamp(40px, 6vw, 100px);
}
.lead-head {
font-size: clamp(2.4rem, 1.455rem + 4.73vw, 5rem);
font-weight: 700;
line-height: 1.8;
}
.padding-box_mid {
padding: 10em;
}
.padding-box_left {
padding: 5em 5em 5em 10em;
}
.padding-box_right {
padding: 5em 10em 5em 5em;
}
.text-right {
text-align: right;
}
.width45 .width70 {
margin: 0 auto 0 0;
}
.width45 .width65 {
margin: 0 0 0 auto;
margin-top: -5vw;
}
/*================*/
/* ////////////////見切れる横スライダー（タイル型ナビ付き）//////////////// */
/* 色のトークン（必要なら調整） */ :root {
--peek-navy: #0b1b8e; /* 背景に使っている紺 */
--peek-gap: clamp(20px, 2.5vw, 32px);
--peek-padX: clamp(24px, 5vw, 64px);
}
/* セクション外枠 */
.peek-slider {
background: var(--peek-bg);
color: #fff;
padding: clamp(16px, 2vw, 24px) 0 48px;
}
.peek-slider a {
color: inherit;
}
/* 見出し＋タイル型ナビ */
.peek-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 1200px;
margin: 0 auto clamp(20px, 2.5vw, 28px);
/*padding:0 var(--peek-padX);*/
}
.peek-head h2 {
margin: 0;
letter-spacing: .02em;
font-size: clamp(28px, 6vw, 64px);
}
/* タイル型ナビ（添付デザイン再現） */
.peek-tile-nav {
display: inline-flex;
gap: 0;
}
.peek-btn {
inline-size: clamp(30px, 3vw, 40px); /* 幅＝高さの正方形 */
block-size: clamp(40px, 4vw, 50px);
display: grid;
place-items: center;
border: 0;
padding: 0;
cursor: pointer;
background: #02b3f1;
color: #ffffff;
transition: filter .15s ease, transform .08s ease, opacity .15s ease;
}
.peek-btn.peek-next {
border-left: 2px solid #ffffff;
}
/* 矢印マーク（テキストで描画） */
.peek-btn.peek-prev::before {
content: "\003C";
} /* < */
.peek-btn.peek-next::before {
content: "\003E";
} /* > */
.peek-btn::before {
font-weight: 800;
font-size: clamp(16px, 2vw, 24px);
line-height: 1;
}
.peek-btn:hover {
filter: brightness(0.94);
}
.peek-btn:active {
transform: translateY(1px);
}
.peek-btn.is-disabled {
opacity: .45;
pointer-events: none;
}
.peek-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* ===== スライダー本体 ===== */
/* スクロール主体（右だけ見切れはパディングで演出） */
.peek-viewport {
position: relative;
overflow-x: auto;
overflow-y: visible;
padding-left: var(--peek-padX);
padding-right: var(--peek-padX); /* 右側に余白 → “見切れ”を強調 */
scroll-behavior: smooth;
scroll-snap-type: x mandatory; /* カード頭で止める */
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none; /* Firefox */
}
/* 1) ビューポートに上下の余白を作る（影のための空地）
※ 見た目の高さを増やしたくなければ margin で相殺 */
.peek-viewport {
overflow-x: auto;
overflow-y: visible; /* 既に指定済みならOK */
padding-top: 28px; /* ← 影の半径＋α */
padding-bottom: 28px;
/* 右端の“見切れ演出”＋影スペースを両立 */
padding-right: calc(var(--peek-padX, 24px) + 48px);
/* スナップする時の余白も教える（Chrome/Safari で効く） */
scroll-padding-right: 48px;
}
/* 2) 先頭と末尾に“ダミーの空き”を追加して左右の影を出す */
.peek-track {
display: flex;
gap: var(--peek-gap, 24px);
}
.peek-track::before, .peek-track::after {
content: "";
flex: 0 0 36px;
← 左右に 36px の空地（影＋ガター分）
}
/* 横一列 */
.peek-track {
display: flex;
align-items: stretch;
gap: var(--peek-gap);
width: max-content; /* 中身の幅だけ広がる */
}
/* 1枚のカード */
.peek-card {
background: #fff;
color: var(--peek-navy);
border-radius: 10px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
/* 画面に2.4〜3.2枚ほど見せる幅。中央の 28vw を好みで */
flex: 0 0 clamp(260px, 28vw, 360px);
display: flex;
flex-direction: column;
scroll-snap-align: start; /* 先頭で止める */
scroll-margin-left: var(--peek-padX); /* アンカー/送る時の左寄せ補正 */
}
/* 画像 */
.peek-media {
margin: 0;
}
.peek-media img {
display: block;
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
}
/* 本文 */
.peek-body {
padding: 20px 20px 24px;
}
.peek-body h4 {
color: #005bb4;
font-weight: 700;
font-size: 2rem;
margin-bottom: 0.5em;
}
.peek-body p {
margin: 0 0 8px;
line-height: 1.8;
font-size: clamp(14px, 1.9vw, 16px);
}
.peek-meta {
font-size: .9em;
opacity: .9;
}
/* 2カラムの右側などに入れる場合、左右余白を詰めたい時に付与 */
.peek-head--compact {
max-width: none;
padding: 0;
margin: 0 0 12px;
}
.peek-viewport--compact {
padding-left: 0;
padding-right: clamp(16px, 4vw, 40px); /* 右だけ少し余白 */
}
section.home-section03 {
padding: clamp(80px, 14vw, 140px) 0 0;
}
.home-section.home-section03 .content.day-flow {
background-color: #ffffff;
padding: 10em 8em;
box-shadow: 0px 0px 36px -5px #777777;
}
.wh-box {
padding: 5em;
background-color: #ffffff;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
border-radius: 15px;
}
.home-section03 .content:nth-of-type(2) {
background-color: #efefef;
/*box-shadow: 0px 0px 36px -5px #777777;*/
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #ffffff calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #ffffff calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
padding: clamp(80px, 14vw, 140px) 0;
}
/*================*/
.home-section04 .peek-btn {
background: #005bb4;
color: #ffffff;
}
.home-section04 .peek-btn.peek-next {
border-left: 2px solid #02b3f1;
}
.home-section04 p.width30, .home-section04 h2 {
color: #ffffff;
}
/*================*/
/*================*/
.home-section06 p, .home-section06 h3 {
color: #ffffff;
}
.home-section06 .width45 div {
height: 100%;
}
.home-section06 .content.bu h3.mid-title::after {
border-bottom: 3px solid #00b2f0;
}
.home-section06 .com-faq01-q {
border-bottom: 1px solid #ffffff;
}
/*================*/
/*バナー*/
.cb {
--text: #555;
--rule: #005bb3;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
margin: 10em auto;
width: 70%;
}
/* 見出し帯 */
.cb__head {
background: #005bb3;
color: #fff;
text-align: center;
font-weight: 700;
letter-spacing: .06em;
padding: clamp(10px, 1.8vw, 14px) 8px;
font-size: clamp(16px, 1.2vw + 12px, 24px);
}
/* 本体 */
.cb__body {
padding: clamp(12px, 3vw, 28px);
}
/* 中央ブロック */
.cb__main {
text-align: center;
}
.cb__tel {
display: inline-flex;
align-items: baseline;
gap: .5em;
text-decoration: none;
}
.cb__telNum {
font-weight: 800;
color: #02b3f1;
font-size: clamp(28px, 5vw, 56px);
letter-spacing: .02em;
}
.cb__rule {
margin: clamp(8px, 1.6vw, 14px) auto;
border: 0;
height: 2px;
width: min(560px, 90%);
background: var(--rule);
}
.cb__note {
margin: 0;
color: var(--text);
font-size: clamp(14px, 1.2vw, 20px);
letter-spacing: .02em;
}
.home-section07 .fa-solid {
font-weight: 900;
font-size: 5rem;
}
/*事業所カラム 2026.02.12追加*/
.locations {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
--txt-Color: #333333;
justify-content: space-evenly;
padding: 30px 0;
}
/* タブレット以下で2カラム */
@media (max-width: 1024px) {
.locations {
grid-template-columns: repeat(2, 1fr);
}
}
/* スマホで1カラム */
@media (max-width: 600px) {
.locations {
grid-template-columns: 1fr;
padding: 16px;
gap: 16px;
}
}
.locations .location-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.locations .location-map iframe {
width: 100%;
aspect-ratio: 4 / 3;
border: 0;
display: block;
}
.locations .location-info {
padding: 16px;
}
.locations .location-info h3 {
margin: 0 0 8px;
}
.locations .location-info p {
margin: 4px 0;
font-size: 14px;
}
/* .locations内のテーブル専用スタイル */
.locations .location-info table,
.locations .location-info .tablepress {
width: 100%;
display: table !important;
}
.locations .location-info table th,
.locations .location-info .tablepress th {
background-color: #f5f5f5;
padding: 8px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #ddd;
}
.locations .location-info table td,
.locations .location-info .tablepress td {
padding: 8px;
border-bottom: 1px solid #eee;
}
.locations .fadeRightTrigger {
animation: fadeInRight 0.6s ease-out;
}
/* .locationsのテーブルだけ黒に */
.locations table,
.locations .tablepress {
color: #333333 !important;
}
.locations table th,
.locations table td,
.locations .tablepress th,
.locations .tablepress td {
color: #333333 !important;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.location-info table.tablepress tbody td {
color: #ffffff !important;
background-color: transparent !important;
font-size: 1.4rem;
}
.locations .location-card {
border: none;
border-radius: 0;
overflow: hidden;
background: transparent;
width: 20%;
}
コンセプトconcept