/* ==========================================================================
腸活サロンaqua - 共通スタイルシート
========================================================================== */
/* Google Fontsの読み込み
HTMLの内に以下を追加してください:
*/
/* ==========================================================================
カラーパレット & CSS変数
========================================================================== */
:root {
/* メインカラー（水色系） */
--color-primary: #00a8cc;
--color-primary-light: #7dd3e0;
--color-primary-lighter: #e0f2fe;
--color-primary-lightest: #f0f9ff;
--color-primary-dark: #0086a8;
--color-primary-gradient: linear-gradient(135deg, #00a8cc 0%, #7dd3e0 100%);
--color-primary-gradient-soft: linear-gradient(
135deg,
#e0f2fe 0%,
#f0f9ff 100%
);
/* アクセントカラー（女性らしいピンク系を追加） */
--color-accent: #00d4aa;
--color-accent-light: #66eed0;
--color-accent-pink: #ffb3c1;
--color-accent-pink-light: #ffe0e6;
/* LINEカラー */
--color-line: #06c755;
--color-line-hover: #05a648;
/* ベースカラー */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
/* テキストカラー */
--color-text-primary: #1f2937;
--color-text-secondary: #4b5563;
--color-text-light: #6b7280;
/* その他 */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* フォント */
--font-family-base: "Noto Sans JP", sans-serif;
--font-family-heading: "Noto Sans JP", sans-serif;
/* フォントサイズ（モバイル） */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
/* 行間 */
--line-height-tight: 1.25;
--line-height-normal: 1.6;
--line-height-relaxed: 1.75;
/* スペーシング */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
/* レイアウト */
--container-max-width: 1200px;
--header-height-mobile: 60px;
--header-height-desktop: 80px;
/* トランジション */
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* シャドウ */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* ボーダー半径 */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-full: 9999px;
}
/* ==========================================================================
ベーススタイル
========================================================================== */
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background-color: var(--color-white);
overflow-x: hidden;
padding-top: var(--header-height-mobile);
}
@media (min-width: 1024px) {
body {
padding-top: var(--header-height-desktop);
}
}
/* ==========================================================================
ヘッダー
========================================================================== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height-mobile);
background-color: var(--color-white);
box-shadow: var(--shadow-md);
z-index: 1000;
transition: all var(--transition-base);
}
@media (min-width: 1024px) {
.header {
height: var(--header-height-desktop);
}
}
.header__container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header__logo {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.header__logo:hover {
color: var(--color-primary-dark);
}
/* ナビゲーション */
.nav {
display: none;
}
@media (min-width: 768px) {
.nav {
display: flex;
gap: var(--spacing-lg);
}
}
.nav__link {
color: var(--color-text-primary);
text-decoration: none;
font-weight: 500;
padding: var(--spacing-sm) 0;
position: relative;
transition: color var(--transition-base);
}
.nav__link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-primary);
transition: width var(--transition-base);
}
.nav__link:hover {
color: var(--color-primary);
}
.nav__link:hover::after {
width: 100%;
}
/* モバイルメニューボタン */
.mobile-menu-button {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--spacing-sm);
background: none;
border: none;
cursor: pointer;
}
@media (min-width: 768px) {
.mobile-menu-button {
display: none;
}
}
.mobile-menu-button span {
width: 24px;
height: 2px;
background-color: var(--color-text-primary);
transition: all var(--transition-base);
}
.mobile-menu-button.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-button.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-button.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* モバイルナビゲーション */
.mobile-nav {
position: fixed;
top: var(--header-height-mobile);
left: 0;
right: 0;
background-color: var(--color-white);
box-shadow: var(--shadow-lg);
transform: translateY(-100%);
transition: transform var(--transition-base);
z-index: 999;
}
.mobile-nav.active {
transform: translateY(0);
}
.mobile-nav__container {
padding: var(--spacing-lg);
}
.mobile-nav__link {
display: block;
padding: var(--spacing-md);
color: var(--color-text-primary);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid var(--color-gray-100);
transition: all var(--transition-base);
}
.mobile-nav__link:hover {
background-color: var(--color-primary-lighter);
color: var(--color-primary);
}
/* ==========================================================================
フッター
========================================================================== */
.footer {
background-color: var(--color-gray-50);
padding: var(--spacing-3xl) 0 var(--spacing-xl);
margin-top: var(--spacing-3xl);
}
.footer__container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.footer__content {
display: grid;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
@media (min-width: 768px) {
.footer__content {
grid-template-columns: 2fr 1fr 1fr;
gap: var(--spacing-3xl);
}
}
.footer__section h3 {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--spacing-md);
}
.footer__text {
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.footer__links {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer__link {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-base);
}
.footer__link:hover {
color: var(--color-primary);
}
.footer__bottom {
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-gray-200);
text-align: center;
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
/* ==========================================================================
メインコンテナ
========================================================================== */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* ==========================================================================
セクション
========================================================================== */
.section {
padding: var(--spacing-3xl) 0;
position: relative;
}
@media (min-width: 768px) {
.section {
padding: calc(var(--spacing-3xl) * 1.5) 0;
}
}
.section--primary {
background: var(--color-primary-gradient-soft);
position: relative;
overflow: hidden;
}
.section--primary::before {
content: "";
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.3) 0%,
transparent 70%
);
animation: float-bubble 15s ease-in-out infinite;
}
.section--primary::after {
content: "";
position: absolute;
bottom: -150px;
right: -150px;
width: 400px;
height: 400px;
background: radial-gradient(
circle,
rgba(125, 211, 224, 0.2) 0%,
transparent 70%
);
animation: float-bubble 20s ease-in-out infinite reverse;
}
@keyframes float-bubble {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -30px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
.section--gray {
background: linear-gradient(
180deg,
var(--color-gray-50) 0%,
var(--color-white) 100%
);
}
.section--worries {
background: linear-gradient(
135deg,
var(--color-primary-lightest) 0%,
var(--color-white) 50%,
var(--color-accent-pink-light) 100%
);
}
/* セクション見出し */
.section__header {
text-align: center;
margin-bottom: var(--spacing-2xl);
}
.section__title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--spacing-md);
line-height: var(--line-height-tight);
position: relative;
display: inline-block;
}
.section__title--decorated::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--color-primary-gradient);
border-radius: 2px;
}
@media (min-width: 768px) {
.section__title {
font-size: var(--font-size-3xl);
}
}
.section__subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
ヒーローセクション
========================================================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero--with-image {
background: url("images/hero-bg.jpg") center/cover no-repeat;
}
.hero--with-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(224, 242, 254, 0.9) 0%,
rgba(255, 255, 255, 0.7) 100%
);
z-index: 1;
}
/* フルスクリーンヒーロー */
.hero--fullscreen {
min-height: 100vh;
margin-top: calc(var(--header-height-mobile) * -1);
padding-top: var(--header-height-mobile);
}
@media (min-width: 1024px) {
.hero--fullscreen {
margin-top: calc(var(--header-height-desktop) * -1);
padding-top: var(--header-height-desktop);
}
}
.hero__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero__background picture {
display: block;
width: 100%;
height: 100%;
}
.hero__background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* モバイル用の画像位置調整 */
@media (max-width: 767px) {
.hero__background img {
object-position: center center; /* モバイルでは中央寄せ */
}
}
/* タブレット用の画像位置調整 */
@media (min-width: 768px) and (max-width: 1023px) {
.hero__background img {
object-position: center center;
}
}
/* PC用の画像位置調整 */
@media (min-width: 1024px) {
.hero__background img {
object-position: center center;
}
}
.hero__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(224, 242, 254, 0.85) 0%,
rgba(255, 255, 255, 0.6) 100%
);
}
/* 水の波エフェクト */
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,160L48,144C96,128,192,96,288,90.7C384,85,480,107,576,128C672,149,768,171,864,165.3C960,160,1056,128,1152,128C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E")
no-repeat;
background-size: cover;
z-index: 2;
animation: wave 10s ease-in-out infinite;
}
@keyframes wave {
0%,
100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-50px) translateY(-10px);
}
}
.hero__content {
position: relative;
z-index: 3;
text-align: center;
padding: var(--spacing-xl);
max-width: 800px;
margin: 0 auto;
}
.hero__title {
font-size: var(--font-size-3xl);
font-weight: 700;
background: var(--color-primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-md);
line-height: var(--line-height-tight);
text-shadow: 0 2px 10px rgba(0, 168, 204, 0.1);
}
@media (min-width: 768px) {
.hero__title {
font-size: 3.5rem;
}
}
.hero__subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xl);
line-height: var(--line-height-relaxed);
font-weight: 500;
}
/* ==========================================================================
CTAボタン
========================================================================== */
.cta-button {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-primary-light)
);
color: var(--color-white);
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 8px 25px rgba(0, 168, 204, 0.25);
transition: all var(--transition-base);
text-align: center;
position: relative;
overflow: hidden;
letter-spacing: 0.05em;
}
.cta-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.cta-button::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
border-radius: 50px;
opacity: 0;
transition: opacity var(--transition-base);
animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(200%) rotate(45deg);
}
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 168, 204, 0.35);
}
.cta-button:hover::before {
width: 300px;
height: 300px;
}
.cta-button:hover::after {
opacity: 1;
}
.cta-button--large {
padding: var(--spacing-lg) var(--spacing-2xl);
font-size: var(--font-size-lg);
}
.cta-button--accent {
background: linear-gradient(
135deg,
var(--color-accent),
var(--color-accent-light)
);
box-shadow: 0 8px 25px rgba(0, 212, 170, 0.25);
}
.cta-button--accent:hover {
box-shadow: 0 12px 35px rgba(0, 212, 170, 0.35);
}
.cta-button--pink {
background: linear-gradient(
135deg,
var(--color-accent-pink),
var(--color-accent-pink-light)
);
box-shadow: 0 8px 25px rgba(255, 179, 193, 0.35);
}
.cta-button--pink:hover {
box-shadow: 0 12px 35px rgba(255, 179, 193, 0.45);
}
/* ==========================================================================
カード
========================================================================== */
.card {
background-color: var(--color-white);
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 168, 204, 0.08);
padding: var(--spacing-xl);
transition: all var(--transition-base);
height: 100%;
border: 1px solid rgba(0, 168, 204, 0.1);
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(
circle,
rgba(125, 211, 224, 0.05) 0%,
transparent 70%
);
transition: transform var(--transition-slow);
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 168, 204, 0.15);
border-color: var(--color-primary-light);
}
.card:hover::before {
transform: scale(2);
}
.card--worry {
text-align: center;
padding: var(--spacing-lg);
background: var(--color-primary-gradient-soft);
border: none;
}
.card__header {
margin-bottom: var(--spacing-md);
position: relative;
z-index: 1;
}
.card__title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
position: relative;
display: inline-block;
}
.card__title::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: var(--color-primary-gradient);
border-radius: 2px;
transform: scaleX(0);
transition: transform var(--transition-base);
}
.card:hover .card__title::after {
transform: scaleX(1);
}
.card__subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.card__content {
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
position: relative;
z-index: 1;
}
.card__footer {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-primary-lighter);
}
/* ==========================================================================
グリッドレイアウト
========================================================================== */
.grid {
display: grid;
gap: var(--spacing-lg);
}
.grid--2 {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid--2 {
grid-template-columns: repeat(2, 1fr);
}
}
.grid--3 {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid--3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================================================
画像スタイル
========================================================================== */
.image-wrapper {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 168, 204, 0.15);
transition: all var(--transition-base);
background: var(--color-white);
}
.image-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 168, 204, 0.25);
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.image-wrapper:hover img {
transform: scale(1.05);
}
.image-circle {
border-radius: 50%;
overflow: hidden;
border: 5px solid var(--color-primary-lighter);
box-shadow: 0 5px 20px rgba(0, 168, 204, 0.2);
}
.image-gradient-overlay {
position: relative;
overflow: hidden;
}
.image-gradient-overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
transparent 50%,
rgba(0, 168, 204, 0.7) 100%
);
pointer-events: none;
}
/* お悩みセクション画像 */
.worry-image {
aspect-ratio: 4/3;
border-radius: 20px;
overflow: hidden;
margin-bottom: var(--spacing-lg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all var(--transition-base);
}
.worry-image:hover {
transform: translateY(-5px) rotate(-1deg);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}
/* パワー画像 */
.power-image {
position: relative;
aspect-ratio: 3/2;
border-radius: 20px;
overflow: hidden;
margin-bottom: var(--spacing-lg);
}
.power-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 168, 204, 0.1) 0%,
transparent 100%
);
z-index: 1;
transition: opacity var(--transition-base);
}
.power-image:hover::before {
opacity: 0;
}
/* お客様の声画像 */
.testimonial-image {
width: 100px;
height: 100px;
margin: 0 auto var(--spacing-md);
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--color-primary-lighter);
box-shadow: 0 5px 15px rgba(0, 168, 204, 0.2);
}
@media (min-width: 768px) {
.testimonial-image {
width: 120px;
height: 120px;
}
}
/* ==========================================================================
装飾要素
========================================================================== */
.wave-decoration {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-decoration svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 80px;
}
@media (min-width: 768px) {
.wave-decoration svg {
height: 120px;
}
}
.wave-decoration .shape-fill {
fill: var(--color-white);
}
.wave-decoration--top {
top: -1px;
bottom: auto;
transform: rotate(180deg);
}
/* 水滴装飾 */
.bubble-decoration {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(
circle at 30% 30%,
rgba(255, 255, 255, 0.8),
rgba(125, 211, 224, 0.2)
);
filter: blur(1px);
animation: bubble-float 15s ease-in-out infinite;
}
.bubble-decoration--small {
width: 60px;
height: 60px;
}
.bubble-decoration--large {
width: 150px;
height: 150px;
}
@keyframes bubble-float {
0%,
100% {
transform: translateY(0) translateX(0) scale(1);
}
33% {
transform: translateY(-30px) translateX(20px) scale(1.1);
}
66% {
transform: translateY(-10px) translateX(-20px) scale(0.9);
}
}
/* フローティングエレメント */
.floating-element {
position: absolute;
animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* グラデーション背景 */
.gradient-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(224, 242, 254, 0.5) 0%,
rgba(255, 255, 255, 0.8) 25%,
rgba(255, 224, 230, 0.3) 75%,
rgba(240, 249, 255, 0.5) 100%
);
z-index: -1;
}
/* リボン装飾 */
.ribbon {
position: absolute;
top: 20px;
right: -30px;
background: var(--color-accent-pink);
color: white;
padding: 5px 40px;
font-size: var(--font-size-sm);
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 3px 10px rgba(255, 179, 193, 0.5);
}
/* お客様の声の装飾 */
.testimonial-card {
background: white;
border-radius: 20px;
padding: var(--spacing-xl);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
position: relative;
transition: all var(--transition-base);
}
.testimonial-card::before {
content: "\201C"; /* 開き引用符 */
position: absolute;
top: -10px;
left: 20px;
font-size: 4rem;
color: var(--color-primary-lighter);
font-family: Georgia, serif;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* サービスカードの装飾 */
.service-card {
background: white;
border-radius: 20px;
padding: var(--spacing-2xl);
text-align: center;
box-shadow: 0 5px 20px rgba(0, 168, 204, 0.1);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
var(--color-primary-lighter) 0%,
transparent 70%
);
opacity: 0;
transition: opacity var(--transition-base);
}
.service-card:hover::before {
opacity: 0.3;
}
.service-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 35px rgba(0, 168, 204, 0.2);
}
/* ==========================================================================
カスタムボタン
========================================================================== */
.button-water {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
background: var(--color-primary-gradient);
color: var(--color-white);
font-weight: 700;
text-decoration: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: all var(--transition-base);
}
/* ▼▼▼ モバイル対応強化 ▼▼▼ */
@media (max-width: 768px), (hover: none) {
.button-water::before,
.cta-button::before,
.cta-button::after {
display: none !important;
}
}
/* ▲▲▲ モバイル対応強化 ▲▲▲ */
.button-water::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.button-water:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 168, 204, 0.3);
}
.button-water:hover::before {
width: 300px;
height: 300px;
}
/* LINEボタン */
.button-line {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
background: var(--color-line);
color: var(--color-white);
font-weight: 700;
text-decoration: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: all var(--transition-base);
box-shadow: 0 8px 25px rgba(6, 199, 85, 0.25);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
z-index: 10;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* ▼▼▼ モバイル対応強化 ▼▼▼ */
@media (max-width: 768px), (hover: none) {
.button-line::before,
.button-instagram::before {
display: none !important;
}
.button-line,
.button-instagram {
/* overflowを初期値に戻す */
overflow: visible !important;
/* z-indexを最大に */
z-index: 9999 !important;
/* positionを明確に */
position: relative !important;
}
}
/* ▲▲▲ モバイル対応強化 ▲▲▲ */
.button-line::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
pointer-events: none;
z-index: -1;
}
.button-line:hover {
background: var(--color-line-hover);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(6, 199, 85, 0.35);
}
.button-line:hover::before {
width: 300px;
height: 300px;
}
/* Instagramボタン */
.button-instagram {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
background: #e4405f; /* Instagram公式の単色に変更 */
color: var(--color-white);
font-weight: 700;
text-decoration: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: all var(--transition-base);
box-shadow: 0 8px 25px rgba(228, 64, 95, 0.25);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
z-index: 10;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
min-height: 44px; /* iOS推奨の最小タップサイズ */
/* モバイルでのグラデーション最適化 */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* PCでのみグラデーション表示 */
@media (min-width: 769px) and (hover: hover) {
.button-instagram {
background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
box-shadow: 0 8px 25px rgba(131, 58, 180, 0.25);
}
}
.button-instagram::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
pointer-events: none;
z-index: -1;
}
.button-instagram:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(131, 58, 180, 0.35);
}
.button-instagram:hover::before {
width: 300px;
height: 300px;
}
/* ▼▼▼ モバイル・タッチデバイス対応強化 ▼▼▼ */
@media (max-width: 768px), (hover: none) {
.button-instagram,
.button-line,
.button-water,
.cta-button {
/* タップ領域を確保 */
min-height: 48px !important;
/* タッチフィードバックのための設定 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
transition: all 0.1s ease !important;
/* overflowを初期値に戻す */
overflow: visible !important;
/* z-indexを最大に */
z-index: 9999 !important;
/* positionを明確に */
position: relative !important;
}
/* インスタグラムボタン専用の修正 */
.button-instagram {
/* グラデーションを単色に確実に変更 */
background: #e4405f !important; /* Instagram公式の単色 */
background-image: none !important;
/* 3Dアクセラレーションを無効化 */
-webkit-transform: none !important;
transform: none !important;
}
/* ホバーエフェクトを無効化 */
.button-water:hover,
.button-line:hover,
.button-instagram:hover,
.cta-button:hover {
transform: none !important;
box-shadow: initial !important;
}
}
/* タッチデバイスでのフィードバック */
@media (hover: none) {
.button-water:active,
.button-line:active,
.button-instagram:active,
.cta-button:active {
opacity: 0.8 !important;
transform: scale(0.95) !important;
transition: none !important;
}
/* フォーカス時のスタイル（タブキー操作対応） */
.button-water:focus,
.button-line:focus,
.button-instagram:focus,
.cta-button:focus {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
}
/* より確実なタッチフィードバック */
@supports (-webkit-touch-callout: none) {
/* iOS Safari専用 */
.button-water,
.button-line,
.button-instagram,
.cta-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
cursor: pointer;
}
.button-water:active,
.button-line:active,
.button-instagram:active,
.cta-button:active {
opacity: 0.7 !important;
transform: translateY(1px) !important;
}
}
/* Androidデバイス対応 */
@media (pointer: coarse) {
.button-water,
.button-line,
.button-instagram,
.cta-button {
/* より大きなタップ領域 */
padding: 1rem 2rem !important;
}
}
/* モバイルでの波紋エフェクトを無効化 */
@media (max-width: 768px) {
.ripple-effect {
display: none !important;
animation: none !important;
}
}
/* タッチデバイス判定クラスが付与された場合 */
.no-ripple-device .ripple-effect {
display: none !important;
animation: none !important;
}
/* タッチデバイスでのボタンスタイル調整 */
@media (hover: none) and (pointer: coarse) {
.ripple-effect {
display: none !important;
}
/* ボタンのホバー効果もタッチデバイスでは簡略化 */
.button-water:hover,
.button-line:hover,
.button-instagram:hover,
.cta-button:hover {
transform: none;
}
}
/* iPadなどの大画面タッチデバイス対応 */
@media (hover: none) {
.ripple-effect {
display: none !important;
}
}
/* 特定の要素で波紋エフェクトを無効化するクラス */
.no-ripple .ripple-effect,
.no-ripple:after,
.no-ripple:before {
display: none !important;
animation: none !important;
}
/* インスタグラムボタンの追加保護 */
.button-instagram {
pointer-events: auto !important;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: default !important;
/* タッチターゲットの最適化 */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
/* クリック領域の確保 */
min-width: 120px !important;
padding-left: 2rem !important;
padding-right: 2rem !important;
}
/* ▲▲▲ モバイル・タッチデバイス対応強化 ▲▲▲ */
/* ==========================================================================
アニメーション
========================================================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all var(--transition-slow);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-left {
opacity: 0;
transform: translateX(-20px);
transition: all var(--transition-slow);
}
.fade-in-left.visible {
opacity: 1;
transform: translateX(0);
}
.fade-in-right {
opacity: 0;
transform: translateX(20px);
transition: all var(--transition-slow);
}
.fade-in-right.visible {
opacity: 1;
transform: translateX(0);
}
.scale-in {
opacity: 0;
transform: scale(0.9);
transition: all var(--transition-slow);
}
.scale-in.visible {
opacity: 1;
transform: scale(1);
}
/* ==========================================================================
フォーム要素
========================================================================== */
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-label {
display: block;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: var(--spacing-sm);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: var(--spacing-md);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-white);
transition: all var(--transition-base);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.1);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
/* ==========================================================================
ユーティリティクラス
========================================================================== */
.text-center {
text-align: center;
}
.text-primary {
color: var(--color-primary);
}
.text-accent {
color: var(--color-accent);
}
.mt-lg {
margin-top: var(--spacing-lg);
}
.mb-lg {
margin-bottom: var(--spacing-lg);
}
.hidden-mobile {
display: none;
}
@media (min-width: 768px) {
.hidden-mobile {
display: block;
}
}
.visible-mobile {
display: block;
}
@media (min-width: 768px) {
.visible-mobile {
display: none;
}
}
/* ==========================================================================
ローディングアニメーション
========================================================================== */
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 1;
transition: opacity var(--transition-slow);
}
.loading.hidden {
opacity: 0;
pointer-events: none;
}
.loading__spinner {
width: 50px;
height: 50px;
border: 3px solid var(--color-gray-200);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
スクロールトップボタン
========================================================================== */
.scroll-top {
position: fixed;
bottom: var(--spacing-xl);
right: var(--spacing-xl);
width: 50px;
height: 50px;
background-color: var(--color-primary);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
box-shadow: var(--shadow-lg);
}
.scroll-top.visible {
opacity: 1;
visibility: visible;
}
.scroll-top:hover {
background-color: var(--color-primary-dark);
transform: translateY(-3px);
}
.scroll-top::before {
content: "↑";
font-size: var(--font-size-xl);
font-weight: 700;
}
/* ==========================================================================
追加のアニメーション効果
========================================================================== */
/* パララックス効果 */
.parallax-section {
position: relative;
overflow: hidden;
}
.parallax-bg {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 120%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
}
/* 波紋エフェクト */
@keyframes ripple {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
.ripple-effect {
position: absolute;
border-radius: 50%;
background: rgba(0, 168, 204, 0.3);
transform: scale(0);
animation: ripple 1.5s ease-out;
pointer-events: none;
z-index: -1;
}
/* テキストのグラデーションアニメーション */
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.gradient-text-animated {
background: linear-gradient(
90deg,
var(--color-primary),
var(--color-accent),
var(--color-primary)
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 5s ease infinite;
}
/* ホバーエフェクトの強化 */
.hover-lift {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 168, 204, 0.2);
}
/* スクロール連動フェード */
.scroll-fade {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-fade.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
アクセシビリティ改善
========================================================================== */
/* フォーカススタイルの強化 */
*:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
*:focus:not(:focus-visible) {
outline: none;
}
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* スクリーンリーダー用のテキスト */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
.card {
border: 1px solid var(--color-gray-600);
}
.cta-button,
.button-water {
border: 2px solid currentColor;
}
}
/* 動きを減らす設定への対応強化 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
animation-delay: 0s !important;
}
.scroll-top {
transition: none;
}
.hero::before {
animation: none;
}
}
/* ==========================================================================
クロスブラウザ対応
========================================================================== */
/* Safariのバックドロップフィルター対応 */
.header {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Flexboxの古いブラウザ対応 */
.hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Gridの古いブラウザ対応 */
.grid {
display: -ms-grid;
display: grid;
}
/* ==========================================================================
レスポンシブ対応
========================================================================== */
/* モバイル対応の調整 */
@media (max-width: 768px) {
.hero__title {
font-size: 2rem;
}
.section__title {
font-size: 1.75rem;
}
.power-item {
flex-direction: column !important;
text-align: center;
}
.testimonial-card {
padding: var(--spacing-lg);
}
.wave-decoration svg {
height: 60px;
}
.worry-image,
.power-image {
margin-bottom: var(--spacing-md);
}
.service-card {
padding: var(--spacing-lg);
}
}
/* タブレット対応 */
@media (min-width: 768px) and (max-width: 1024px) {
.container {
padding: 0 var(--spacing-lg);
}
.grid--3 {
gap: var(--spacing-xl);
}
}
/* ==========================================================================
印刷対応
========================================================================== */
@media print {
.header,
.footer,
.scroll-top,
.mobile-menu-button,
.mobile-nav,
.loading {
display: none !important;
}
body {
padding-top: 0;
}
.hero--with-image {
background: none;
min-height: auto;
}
.wave-decoration,
.bubble-decoration,
.floating-element,
.water-drop,
.hero-wave {
display: none;
}
.section {
page-break-inside: avoid;
padding: 2rem 0;
}
.card,
.testimonial-card,
.service-card {
box-shadow: none;
border: 1px solid #ddd;
}
.cta-button,
.button-water {
background: none;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
}
/* ==========================================================================
追加スタイル
========================================================================== */
/* ソフトカード */
.soft-card {
background: white;
border-radius: 20px;
padding: var(--spacing-xl);
box-shadow: 0 5px 20px rgba(0, 168, 204, 0.08);
transition: all var(--transition-base);
height: 100%;
border: 1px solid rgba(0, 168, 204, 0.1);
position: relative;
overflow: hidden;
}
.soft-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 168, 204, 0.15);
border-color: var(--color-primary-light);
}
/* お悩みカード */
.worry-card {
background: white;
border-radius: 20px;
padding: var(--spacing-xl);
box-shadow: 0 5px 20px rgba(0, 168, 204, 0.08);
transition: all var(--transition-base);
text-align: center;
}
.worry-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 168, 204, 0.15);
}
.worry-card__content {
position: relative;
z-index: 1;
}
/* パワーカード */
.power-items {
display: grid;
gap: var(--spacing-2xl);
}
.power-card {
background: white;
border-radius: 20px;
padding: var(--spacing-xl);
box-shadow: 0 5px 20px rgba(0, 168, 204, 0.08);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.power-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 168, 204, 0.15);
}
.power-card__content {
position: relative;
z-index: 1;
}
/* イメージフレーム */
.image-circle-frame {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
border: 5px solid var(--color-primary-lighter);
box-shadow: 0 10px 30px rgba(0, 168, 204, 0.2);
background: white;
}
.image-circle-frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* グラデーション背景（ソフト） */
.gradient-bg-soft {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
/* ==========================================================================
ユーティリティクラス（追加）
========================================================================== */
/* モバイル改行クラス */
.br-mobile {
display: none;
}
@media (max-width: 768px) {
.br-mobile {
display: block;
}
}