/* ================================================================
Iroha sub-page shared template — scoped to .iroha-page only
================================================================ */
.iroha-page {
background: #fdeef0;
padding: 70px 24px 110px;
position: relative;
overflow: hidden;
margin: 0 -20px;
border-radius: 0;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
}
.iroha-page::before,
.iroha-page::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .55;
pointer-events: none;
z-index: 0;
}
.iroha-page::before {
width: 440px; height: 440px;
top: -140px; left: -100px;
background: radial-gradient(circle, #ffd0dc 0%, transparent 70%);
}
.iroha-page::after {
width: 380px; height: 380px;
bottom: -120px; right: -100px;
background: radial-gradient(circle, #fde3b8 0%, transparent 70%);
}
.iroha-page__hero {
text-align: center;
margin-bottom: 42px;
position: relative;
z-index: 2;
}
.iroha-page__en {
display: block;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif;
font-weight: 900;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1;
letter-spacing: .08em;
color: #2a1a22;
}
.iroha-page__ja {
margin: 14px 0 0;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 800;
font-size: clamp(20px, 2.4vw, 28px);
letter-spacing: .08em;
color: #c8375d;
border: none;
padding: 0;
background: none;
}
.iroha-page__dots {
display: inline-flex;
gap: 10px;
margin-top: 18px;
}
.iroha-page__dots span {
width: 8px; height: 8px;
border-radius: 50%;
display: block;
}
.iroha-page__dots span:nth-child(1) { background: #ff8aa4; }
.iroha-page__dots span:nth-child(2) { background: #ffd96b; }
.iroha-page__dots span:nth-child(3) { background: #b6dca7; }
.iroha-page__dots span:nth-child(4) { background: #a5d4ef; }
.iroha-page__dots span:nth-child(5) { background: #b68be3; }
.iroha-page__inner {
max-width: 820px;
margin: 0 auto;
padding: 48px 42px;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 24px 54px -24px rgba(232, 83, 123, .28),
0 10px 26px -16px rgba(232, 83, 123, .18);
position: relative;
z-index: 2;
color: #1f0f15;
}
.iroha-page__lead {
font-size: 18px;
font-weight: 800;
color: #c8375d;
text-align: center;
margin: 0 0 28px;
line-height: 1.6;
}
.iroha-page__inner h2 {
margin: 32px 0 14px;
font-size: 19px;
font-weight: 900;
color: #2a1a22;
padding-left: 14px;
border-left: 5px solid #ff87a5;
letter-spacing: .04em;
background: none;
border-top: none;
border-right: none;
border-bottom: none;
}
.iroha-page__inner p {
font-size: 14.5px;
line-height: 1.95;
margin: 0 0 16px;
font-weight: 600;
color: #1f0f15;
}
.iroha-page__inner ul,
.iroha-page__inner ol {
margin: 0 0 20px;
padding-left: 24px;
}
.iroha-page__inner li {
font-size: 14px;
line-height: 1.9;
font-weight: 600;
margin-bottom: 6px;
color: #1f0f15;
}
.iroha-page__inner a:not(.iroha-page__btn) {
color: #c8375d;
text-decoration: none;
border-bottom: 1px dashed rgba(200, 55, 93, .4);
}
.iroha-page__inner a:not(.iroha-page__btn):hover { color: #ff4f77; }
.iroha-page__btn {
display: inline-block;
margin-top: 24px;
padding: 15px 36px;
border-radius: 999px;
color: #ffffff !important;
background: linear-gradient(135deg, #ff4f77, #ff87a5);
font-size: 15px;
font-weight: 800;
letter-spacing: .08em;
text-decoration: none !important;
border: none !important;
box-shadow: 0 14px 24px -10px rgba(232, 83, 123, .42);
transition: transform .3s, filter .3s;
}
.iroha-page__btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
color: #ffffff !important;
}
@media (max-width: 820px) {
.iroha-page { padding: 48px 16px 80px; margin: 0 -14px; }
.iroha-page__inner { padding: 32px 22px; border-radius: 22px; }
.iroha-page__lead { font-size: 15px; }
.iroha-page__inner h2 { font-size: 16px; }
.iroha-page__inner p,
.iroha-page__inner li { font-size: 13.5px; }
}
/* ================================================================
iroha-about-page — tenri-nagomi style, iroha brand
================================================================ */
.iroha-about-page {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
color: #1f0f15;
background: #ffffff;
}
body.page-id-44 { background: #fdeef0 !important; }
body.page-id-44 #body,
body.page-id-44 .body,
body.page-id-44 .body-in,
body.page-id-44 #container,
body.page-id-44 .container {
background: #fdeef0 !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hide Cocoon TOC inside our custom about page */
.entry-content > .toc,
.entry-content #toc,
body.page-id-44 .toc,
body.page-id-44 #toc { display: none !important; }
/* Apply clutter hide to all iroha-about-page based pages */
body.page-id-44,
body.page-id-46,
body.page-id-45,
body.page-id-47,
body.page-id-48,
body.page-id-50 { background: #ffffff !important; }
body.page-id-44 #body,
body.page-id-46 #body,
body.page-id-45 #body,
body.page-id-47 #body,
body.page-id-48 #body,
body.page-id-50 #body,
body.page-id-44 .body,
body.page-id-46 .body,
body.page-id-45 .body,
body.page-id-47 .body,
body.page-id-48 .body,
body.page-id-50 .body,
body.page-id-44 .body-in,
body.page-id-46 .body-in,
body.page-id-45 .body-in,
body.page-id-47 .body-in,
body.page-id-48 .body-in,
body.page-id-50 .body-in,
body.page-id-44 #container,
body.page-id-46 #container,
body.page-id-45 #container,
body.page-id-47 #container,
body.page-id-48 #container,
body.page-id-50 #container,
body.page-id-44 .container,
body.page-id-46 .container,
body.page-id-45 .container,
body.page-id-47 .container,
body.page-id-48 .container,
body.page-id-50 .container {
background: #ffffff !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.page-id-50 #header-container,
body.page-id-50 #navi,
body.page-id-50 .navi-in,
body.page-id-50 .sns-share,
body.page-id-50 .sns-follow,
body.page-id-50 .entry-header,
body.page-id-50 .a-wrap,
body.page-id-50 .header-container,
body.page-id-50 .article-header,
body.page-id-50 .date-tags,
body.page-id-50 .post-date,
body.page-id-50 .post-update,
body.page-id-50 h1.entry-title,
body.page-id-50 .entry-title,
body.page-id-50 .pankuzu,
body.page-id-50 .breadcrumb,
body.page-id-50 .breadcrumbs,
body.page-id-50 #breadcrumb,
body.page-id-50 #sidebar,
body.page-id-50 .sidebar,
body.page-id-50 #footer-widgets,
body.page-id-50 .toc,
body.page-id-50 #toc { display: none !important; }
body.page-id-50 #main,
body.page-id-50 .main,
body.page-id-50 #main-content,
body.page-id-50 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-50 article.page,
body.page-id-50 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-50 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-47 #header-container,
body.page-id-47 #navi,
body.page-id-47 .navi-in,
body.page-id-47 .sns-share,
body.page-id-47 .sns-follow,
body.page-id-47 .entry-header,
body.page-id-47 .a-wrap,
body.page-id-47 .header-container,
body.page-id-47 .article-header,
body.page-id-47 .date-tags,
body.page-id-47 .post-date,
body.page-id-47 .post-update,
body.page-id-47 h1.entry-title,
body.page-id-47 .entry-title,
body.page-id-47 .pankuzu,
body.page-id-47 .breadcrumb,
body.page-id-47 .breadcrumbs,
body.page-id-47 #breadcrumb,
body.page-id-47 #sidebar,
body.page-id-47 .sidebar,
body.page-id-47 #footer-widgets,
body.page-id-47 .toc,
body.page-id-47 #toc,
body.page-id-48 #header-container,
body.page-id-48 #navi,
body.page-id-48 .navi-in,
body.page-id-48 .sns-share,
body.page-id-48 .sns-follow,
body.page-id-48 .entry-header,
body.page-id-48 .a-wrap,
body.page-id-48 .header-container,
body.page-id-48 .article-header,
body.page-id-48 .date-tags,
body.page-id-48 .post-date,
body.page-id-48 .post-update,
body.page-id-48 h1.entry-title,
body.page-id-48 .entry-title,
body.page-id-48 .pankuzu,
body.page-id-48 .breadcrumb,
body.page-id-48 .breadcrumbs,
body.page-id-48 #breadcrumb,
body.page-id-48 #sidebar,
body.page-id-48 .sidebar,
body.page-id-48 #footer-widgets,
body.page-id-48 .toc,
body.page-id-48 #toc { display: none !important; }
body.page-id-47 #main,
body.page-id-47 .main,
body.page-id-47 #main-content,
body.page-id-47 #content,
body.page-id-48 #main,
body.page-id-48 .main,
body.page-id-48 #main-content,
body.page-id-48 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-47 article.page,
body.page-id-47 .article,
body.page-id-48 article.page,
body.page-id-48 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-47 .entry-content,
body.page-id-48 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-45 #header-container,
body.page-id-45 #navi,
body.page-id-45 .navi-in,
body.page-id-45 .sns-share,
body.page-id-45 .sns-follow,
body.page-id-45 .entry-header,
body.page-id-45 .a-wrap,
body.page-id-45 .header-container,
body.page-id-45 .article-header,
body.page-id-45 .date-tags,
body.page-id-45 .post-date,
body.page-id-45 .post-update,
body.page-id-45 h1.entry-title,
body.page-id-45 .entry-title,
body.page-id-45 .pankuzu,
body.page-id-45 .breadcrumb,
body.page-id-45 .breadcrumbs,
body.page-id-45 #breadcrumb,
body.page-id-45 #sidebar,
body.page-id-45 .sidebar,
body.page-id-45 #footer-widgets,
body.page-id-45 .toc,
body.page-id-45 #toc { display: none !important; }
body.page-id-45 #main,
body.page-id-45 .main,
body.page-id-45 #main-content,
body.page-id-45 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-45 article.page,
body.page-id-45 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-45 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-46 #header-container,
body.page-id-46 #navi,
body.page-id-46 .navi-in,
body.page-id-46 .sns-share,
body.page-id-46 .sns-follow,
body.page-id-46 .entry-header,
body.page-id-46 .a-wrap,
body.page-id-46 .header-container,
body.page-id-46 .article-header,
body.page-id-46 .date-tags,
body.page-id-46 .post-date,
body.page-id-46 .post-update,
body.page-id-46 h1.entry-title,
body.page-id-46 .entry-title,
body.page-id-46 .pankuzu,
body.page-id-46 .breadcrumb,
body.page-id-46 .breadcrumbs,
body.page-id-46 #breadcrumb,
body.page-id-46 #sidebar,
body.page-id-46 .sidebar,
body.page-id-46 #footer-widgets,
body.page-id-46 .toc,
body.page-id-46 #toc { display: none !important; }
body.page-id-46 #main,
body.page-id-46 .main,
body.page-id-46 #main-content,
body.page-id-46 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-46 article.page,
body.page-id-46 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-46 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
/* Hide Cocoon header/nav/share/title clutter on sub pages */
body.page-id-44 #header-container,
body.page-id-44 #navi,
body.page-id-44 .navi-in,
body.page-id-44 .sns-share,
body.page-id-44 .sns-follow,
body.page-id-44 .entry-header,
body.page-id-44 .a-wrap,
body.page-id-44 .header-container,
body.page-id-44 .article-header,
body.page-id-44 .date-tags,
body.page-id-44 .post-date,
body.page-id-44 .post-update,
body.page-id-44 h1.entry-title,
body.page-id-44 .entry-title,
body.page-id-44 .pankuzu,
body.page-id-44 .breadcrumb,
body.page-id-44 .breadcrumbs,
body.page-id-44 #breadcrumb,
body.page-id-44 #sidebar,
body.page-id-44 .sidebar,
body.page-id-44 #footer-widgets { display: none !important; }
/* Full-width layout for the about page */
body.page-id-44 #main,
body.page-id-44 .main,
body.page-id-44 #main-content,
body.page-id-44 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
}
body.page-id-44 #main-content {
display: block !important;
}
body.page-id-44 .wrap,
body.page-id-44 .content-in {
max-width: 100% !important;
padding: 0 !important;
}
/* Remove main area padding to let the hero hit the top */
body.page-id-44 #main,
body.page-id-44 .main,
body.page-id-44 #content,
body.page-id-44 .content {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-44 article.page,
body.page-id-44 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-44 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
/* Hide Cocoon header/nav/share/title clutter on FAQ page (id 49) */
body.page-id-49 #header-container,
body.page-id-49 #navi,
body.page-id-49 .navi-in,
body.page-id-49 .sns-share,
body.page-id-49 .sns-follow,
body.page-id-49 .entry-header,
body.page-id-49 .a-wrap,
body.page-id-49 .header-container,
body.page-id-49 .article-header,
body.page-id-49 .date-tags,
body.page-id-49 .post-date,
body.page-id-49 .post-update,
body.page-id-49 h1.entry-title,
body.page-id-49 .entry-title,
body.page-id-49 .pankuzu,
body.page-id-49 .breadcrumb,
body.page-id-49 .breadcrumbs,
body.page-id-49 #breadcrumb,
body.page-id-49 #sidebar,
body.page-id-49 .sidebar,
body.page-id-49 #footer-widgets,
body.page-id-49 .toc,
body.page-id-49 #toc { display: none !important; }
body.page-id-49 #main,
body.page-id-49 .main,
body.page-id-49 #main-content,
body.page-id-49 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-49 #main-content {
display: block !important;
}
body.page-id-49 .wrap,
body.page-id-49 .content-in {
max-width: 100% !important;
padding: 0 !important;
}
body.page-id-49 #main,
body.page-id-49 .main,
body.page-id-49 #content,
body.page-id-49 .content {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-49 article.page,
body.page-id-49 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-49 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
/* Hide Cocoon header/nav/share/title clutter on info page (id 51) */
body.page-id-51 #header-container,
body.page-id-51 #navi,
body.page-id-51 .navi-in,
body.page-id-51 .sns-share,
body.page-id-51 .sns-follow,
body.page-id-51 .entry-header,
body.page-id-51 .a-wrap,
body.page-id-51 .header-container,
body.page-id-51 .article-header,
body.page-id-51 .date-tags,
body.page-id-51 .post-date,
body.page-id-51 .post-update,
body.page-id-51 h1.entry-title,
body.page-id-51 .entry-title,
body.page-id-51 .pankuzu,
body.page-id-51 .breadcrumb,
body.page-id-51 .breadcrumbs,
body.page-id-51 #breadcrumb,
body.page-id-51 #sidebar,
body.page-id-51 .sidebar,
body.page-id-51 #footer-widgets,
body.page-id-51 .toc,
body.page-id-51 #toc { display: none !important; }
body.page-id-51 #main,
body.page-id-51 .main,
body.page-id-51 #main-content,
body.page-id-51 #content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-51 #main-content {
display: block !important;
}
body.page-id-51 .wrap,
body.page-id-51 .content-in {
max-width: 100% !important;
padding: 0 !important;
}
body.page-id-51 #main,
body.page-id-51 .main,
body.page-id-51 #content,
body.page-id-51 .content {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-51 article.page,
body.page-id-51 .article {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body.page-id-51 .entry-content {
padding: 0 !important;
margin: 0 !important;
}
/* ---------- HOME BUTTON (SVG cloud logo, same as main hero) ---------- */
.iroha-about-page__topbar {
position: absolute;
top: 18px;
left: 0;
right: 0;
z-index: 20;
}
.iroha-about-page__logo {
display: inline-block;
text-decoration: none !important;
border: none !important;
transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s;
}
.iroha-about-page__logo:hover {
transform: translateY(-3px) scale(1.02);
filter: brightness(1.05);
}
.iroha-about-page__logo-svg {
display: block;
width: clamp(240px, 24vw, 360px);
height: auto;
overflow: visible;
}
.iroha-about-page__logo-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- GLASS-PILL NAVIGATION ---------- */
.iroha-about-page__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 22px 32px 0 0;
}
.iroha-about-page__topbar .iroha-about-page__logo {
margin-left: -24px;
}
.iroha-about-page__nav {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
max-width: none;
}
.iroha-about-page__nav ul {
list-style: none;
margin: 0;
padding: 10px 14px 10px 28px;
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-radius: 999px;
border: 1px solid rgba(255, 214, 225, 0.9);
box-shadow:
0 16px 36px -18px rgba(232, 83, 123, .32),
0 6px 18px -12px rgba(232, 83, 123, .22),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
position: relative;
overflow: hidden;
}
.iroha-about-page__nav ul::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .5) 48%, transparent 96%);
transform: translateX(-100%);
animation: iroha-about-nav-sheen 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes iroha-about-nav-sheen {
0%, 60%, 100% { transform: translateX(-100%); }
80% { transform: translateX(120%); }
}
.iroha-about-page__nav li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.iroha-about-page__nav li a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: .04em;
color: #2a1a22;
text-decoration: none;
border: none;
border-radius: 999px;
transition: color .3s, background .3s;
}
.iroha-about-page__nav li a:hover {
color: #c8375d;
background: rgba(255, 138, 164, 0.12);
}
.iroha-about-page__nav-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff8aa4;
opacity: 0;
transform: scale(.6);
transition: opacity .3s, transform .3s;
}
.iroha-about-page__nav li a:hover .iroha-about-page__nav-dot {
opacity: 1;
transform: scale(1);
}
.iroha-about-page__nav-cta a {
background: linear-gradient(135deg, #ff4f77, #ff87a5);
color: #ffffff !important;
padding: 16px 30px !important;
font-size: 15px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
box-shadow: 0 14px 24px -10px rgba(232, 83, 123, .5);
position: relative;
overflow: hidden;
}
.iroha-about-page__nav-cta a svg {
width: 20px;
height: 20px;
color: #ffe999;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.iroha-about-page__nav-cta a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
transform: translateX(-120%) skewX(-18deg);
animation: iroha-about-cta-sweep 4.5s ease-in-out infinite;
}
@keyframes iroha-about-cta-sweep {
0%, 70%, 100% { transform: translateX(-120%) skewX(-18deg); }
85% { transform: translateX(320%) skewX(-18deg); }
}
.iroha-about-page__nav-cta a:hover {
background: linear-gradient(135deg, #ff3565, #ff6f95);
color: #ffffff !important;
transform: translateY(-1px);
}
@media (max-width: 900px) {
.iroha-about-page__topbar {
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 16px 16px 0;
}
.iroha-about-page__nav {
width: 100%;
justify-content: center;
}
.iroha-about-page__nav ul {
flex-wrap: wrap;
justify-content: center;
padding: 8px 10px;
gap: 2px;
}
.iroha-about-page__nav li a {
font-size: 12px;
padding: 8px 12px;
}
.iroha-about-page__nav-cta a {
padding: 9px 18px !important;
font-size: 12px !important;
}
}
/* ---------- HERO ---------- */
.iroha-about-page__hero {
position: relative;
padding: 8px 24px 70px;
background: #fdeef0;
text-align: center;
overflow: hidden;
}
.iroha-about-page__en { margin-bottom: 8px !important; }
.iroha-about-page__breadcrumb { margin-top: 12px !important; }
.iroha-about-page__hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 20%, #ffc9d7 0%, transparent 32%),
radial-gradient(circle at 85% 18%, #fde3b8 0%, transparent 36%),
radial-gradient(circle at 78% 75%, #e6f4de 0%, transparent 38%),
radial-gradient(circle at 18% 82%, #ffd4dd 0%, transparent 34%);
opacity: .55;
filter: blur(40px);
pointer-events: none;
}
/* Decorative pattern */
.iroha-about-page__pattern {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.iroha-pat {
position: absolute;
display: block;
}
/* Stars (4-point sparkle) */
.iroha-pat--star {
width: 22px;
height: 22px;
background: #ffd96b;
clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
filter: drop-shadow(0 2px 4px rgba(255, 180, 50, .4));
animation: iroha-pat-twinkle 3.2s ease-in-out infinite;
}
.iroha-pat--1 { top: 8%; left: 18%; animation-delay: 0s; transform: scale(.8); }
.iroha-pat--2 { top: 14%; right: 22%; animation-delay: .8s; transform: scale(1.1); }
.iroha-pat--3 { top: 62%; left: 14%; animation-delay: -1.4s; transform: scale(.7); }
.iroha-pat--4 { top: 70%; right: 28%; animation-delay: -2.2s; transform: scale(.9); }
/* Dots */
.iroha-pat--dot {
width: 10px;
height: 10px;
border-radius: 50%;
animation: iroha-pat-float 4s ease-in-out infinite;
}
.iroha-pat--5 { top: 22%; left: 8%; background: #ff8aa4; }
.iroha-pat--6 { top: 32%; right: 12%; background: #a5d4ef; animation-delay: -1s; }
.iroha-pat--7 { top: 54%; left: 30%; background: #b6dca7; animation-delay: -2s; }
.iroha-pat--8 { top: 68%; right: 14%; background: #b68be3; animation-delay: -3s; }
/* Hearts */
.iroha-pat--heart {
width: 16px;
height: 14px;
background: #ff8aa4;
clip-path: path('M8 14 C 8 14, 0 8, 0 4 C 0 1, 3 0, 5 2 C 6 3, 8 5, 8 5 C 8 5, 10 3, 11 2 C 13 0, 16 1, 16 4 C 16 8, 8 14, 8 14 Z');
opacity: .8;
filter: drop-shadow(0 2px 4px rgba(255, 138, 164, .4));
animation: iroha-pat-float 3.6s ease-in-out infinite;
}
.iroha-pat--9 { top: 16%; left: 38%; animation-delay: -1.2s; }
.iroha-pat--10 { top: 78%; left: 58%; animation-delay: -2.4s; }
/* Rings (circle outline) */
.iroha-pat--ring {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid rgba(255, 138, 164, .35);
animation: iroha-pat-float 5s ease-in-out infinite;
}
.iroha-pat--11 { top: 34%; left: 44%; animation-delay: -.8s; }
.iroha-pat--12 { top: 56%; right: 42%; width: 28px; height: 28px; border-color: rgba(134, 198, 234, .38); animation-delay: -2.6s; }
/* Sparkles (small x shapes) */
.iroha-pat--sparkle {
width: 14px;
height: 14px;
background:
linear-gradient(90deg, transparent 46%, #ffffff 46%, #ffffff 54%, transparent 54%),
linear-gradient(0deg, transparent 46%, #ffffff 46%, #ffffff 54%, transparent 54%);
opacity: .85;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7));
animation: iroha-pat-twinkle 2.6s ease-in-out infinite;
}
.iroha-pat--13 { top: 42%; left: 24%; animation-delay: -.4s; }
.iroha-pat--14 { top: 24%; right: 38%; animation-delay: -1.3s; }
.iroha-pat--15 { top: 80%; left: 42%; animation-delay: -2.1s; }
@keyframes iroha-pat-twinkle {
0%, 100% { opacity: .35; transform: scale(.75) rotate(0deg); }
50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}
@keyframes iroha-pat-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.08); }
}
.iroha-about-page__hero-inner {
position: relative;
z-index: 2;
}
.iroha-about-page__en {
display: block;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif;
font-weight: 900;
font-size: clamp(32px, 4vw, 56px);
letter-spacing: .1em;
line-height: 1;
color: #2a1a22;
margin-bottom: 16px;
}
.iroha-about-page__title {
margin: 0;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 800;
font-size: clamp(18px, 1.8vw, 22px);
letter-spacing: .22em;
color: #c8375d;
}
.iroha-about-page__breadcrumb {
margin-top: 22px;
font-size: 12px;
color: #6b5158;
letter-spacing: .04em;
}
.iroha-about-page__breadcrumb a {
color: #6b5158;
text-decoration: none;
border-bottom: 1px dashed rgba(107, 81, 88, .4);
}
.iroha-about-page__breadcrumb a:hover { color: #c8375d; }
.iroha-about-page__sep { margin: 0 10px; color: #c8375d; }
.iroha-about-page__hero-wave {
position: absolute;
left: 0;
right: 0;
bottom: -2px;
width: 100%;
height: clamp(60px, 7vw, 110px);
display: block;
pointer-events: none;
z-index: 1;
}
/* Wave-side characters */
.iroha-about-page__wave-char {
position: absolute;
bottom: -30px;
width: clamp(110px, 12vw, 170px);
z-index: 3;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 14px 22px rgba(232, 83, 123, .22));
transform-origin: center bottom;
will-change: transform;
}
.iroha-about-page__wave-char--pumpkin {
left: 4%;
animation: iroha-about-char-bob-left 4.6s ease-in-out infinite;
animation-delay: 0s;
}
.iroha-about-page__wave-char--clover {
right: 4%;
animation: iroha-about-char-bob-right 4.8s ease-in-out infinite;
animation-delay: -2.2s;
}
@keyframes iroha-about-char-bob-left {
0%, 100% { transform: translateY(0) rotate(-4deg); }
25% { transform: translateY(-6px) rotate(-2deg); }
50% { transform: translateY(-14px) rotate(-6deg); }
75% { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes iroha-about-char-bob-right {
0%, 100% { transform: translateY(0) rotate(4deg); }
25% { transform: translateY(-6px) rotate(6deg); }
50% { transform: translateY(-14px) rotate(2deg); }
75% { transform: translateY(-7px) rotate(5deg); }
}
/* ---------- INTRO ---------- */
.iroha-about-page__intro {
max-width: 1680px;
margin: 0 auto;
padding: 28px 48px 24px;
text-align: left;
position: relative;
overflow: hidden;
}
.iroha-about-page__intro .iroha-intro-head { max-width: 1200px; }
/* ========= Decorative pattern inside intro ========= */
.iroha-intro-deco {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.iroha-intro-deco__star {
position: absolute;
width: 20px;
height: 20px;
background: #ffd96b;
clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
filter: drop-shadow(0 2px 4px rgba(255, 180, 50, .4));
animation: iroha-pat-twinkle 3.2s ease-in-out infinite;
}
.iroha-intro-deco__star--1 { top: 6%; left: 3%; transform: scale(.9); }
.iroha-intro-deco__star--2 { top: 22%; right: 6%; transform: scale(1.1); animation-delay: -1s; }
.iroha-intro-deco__star--3 { bottom: 10%; left: 8%; transform: scale(.75); animation-delay: -2s; }
.iroha-intro-deco__dot {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
animation: iroha-pat-float 4s ease-in-out infinite;
}
.iroha-intro-deco__dot--1 { top: 14%; left: 48%; background: #ff8aa4; }
.iroha-intro-deco__dot--2 { top: 76%; right: 12%; background: #a5d4ef; animation-delay: -1.5s; }
.iroha-intro-deco__dot--3 { top: 42%; left: 2%; background: #b6dca7; animation-delay: -2.5s; }
.iroha-intro-deco__heart {
position: absolute;
width: 18px;
height: 16px;
background: #ff8aa4;
clip-path: path('M9 16 C 9 16, 0 9, 0 4.5 C 0 1, 3 0, 5.5 2 C 7 3.5, 9 5.5, 9 5.5 C 9 5.5, 11 3.5, 12.5 2 C 15 0, 18 1, 18 4.5 C 18 9, 9 16, 9 16 Z');
filter: drop-shadow(0 3px 5px rgba(255, 138, 164, .42));
animation: iroha-pat-float 3.6s ease-in-out infinite;
}
.iroha-intro-deco__heart--1 { top: 38%; left: 46%; animation-delay: -.8s; }
.iroha-intro-deco__heart--2 { bottom: 18%; right: 40%; animation-delay: -2.2s; transform: scale(.85); }
.iroha-intro-deco__ring {
position: absolute;
border-radius: 50%;
border: 3px dashed rgba(255, 138, 164, .45);
animation: iroha-pat-float 5s ease-in-out infinite;
}
.iroha-intro-deco__ring--1 { top: 8%; right: 14%; width: 44px; height: 44px; animation-delay: -1s; }
.iroha-intro-deco__ring--2 { bottom: 6%; left: 34%; width: 32px; height: 32px; border-color: rgba(134, 198, 234, .45); animation-delay: -2.6s; }
/* ========= Two-column grid layout (legacy, kept for fallback) ========= */
.iroha-intro-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
}
.iroha-intro-grid__text { min-width: 0; }
.iroha-intro-grid__visual {
position: relative;
min-width: 0;
aspect-ratio: 1 / 1.05;
}
/* ========= v2 layout (horizontal, tight) ========= */
.iroha-intro-layout--v2 {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
.iroha-intro-head {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.iroha-intro-head .iroha-intro-tag {
display: inline-flex;
margin-bottom: 14px;
}
.iroha-intro-head .iroha-intro-catch {
text-align: center;
margin: 0 0 14px;
}
.iroha-intro-head .iroha-about-page__lead {
margin: 0 auto 0 !important;
max-width: 820px;
text-align: justify;
}
.iroha-intro-head .iroha-about-page__btn-row {
justify-content: center;
}
/* Horizontal 3-banner collage */
.iroha-intro-photos--row {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 44px;
align-items: stretch;
justify-content: center;
width: 100%;
margin: 0;
aspect-ratio: auto;
min-height: 0;
padding: 28px 0 20px;
}
@media (max-width: 820px) {
.iroha-intro-photos--row {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 28px !important;
max-width: 420px !important;
margin: 0 auto !important;
padding: 16px 8px 16px !important;
aspect-ratio: auto !important;
}
.iroha-intro-photos--row .iroha-intro-photo {
aspect-ratio: 4 / 3 !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
}
}
.iroha-intro-photos--row .iroha-intro-photo {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #fff;
}
/* Source photos are 1408x768 (~1.83:1). Banner is 4:3 (~1.33:1) so the
image gets cropped on the sides — use object-position to keep the
subject centered inside each banner. */
.iroha-intro-photos--row .iroha-intro-photo img {
object-position: center 40% !important;
}
.iroha-intro-photos--row .iroha-intro-photo--a img {
object-position: 15% 40% !important;
}
.iroha-intro-photos--row .iroha-intro-photo--b img {
object-position: 50% 25% !important;
}
.iroha-intro-photos--row .iroha-intro-photo--c img {
object-position: 50% 40% !important;
}
.iroha-intro-photos--row .iroha-intro-photo img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
max-width: none !important;
max-height: none !important;
}
.iroha-intro-photos--row .iroha-intro-photo--a {
border-radius: 26px;
box-shadow:
0 28px 60px -20px rgba(232, 83, 123, .38),
0 0 0 4px #fff,
0 0 0 6px #ffd6e1,
0 0 0 10px #fff,
0 0 0 12px rgba(232, 83, 123, .3);
transform: none;
animation: none;
transition: transform .35s ease, box-shadow .35s ease;
}
.iroha-intro-photos--row .iroha-intro-photo--a:hover {
transform: translateY(-4px);
box-shadow:
0 36px 70px -20px rgba(232, 83, 123, .48),
0 0 0 4px #fff,
0 0 0 6px #ffd6e1,
0 0 0 10px #fff,
0 0 0 12px rgba(232, 83, 123, .4);
}
.iroha-intro-photos--row .iroha-intro-photo--b {
border-radius: 26px;
box-shadow:
0 28px 60px -20px rgba(255, 154, 60, .38),
0 0 0 4px #fff,
0 0 0 6px #fde2c0,
0 0 0 10px #fff,
0 0 0 12px rgba(255, 154, 60, .3);
transform: none;
animation: none;
transition: transform .35s ease, box-shadow .35s ease;
}
.iroha-intro-photos--row .iroha-intro-photo--b:hover {
transform: translateY(-4px);
box-shadow:
0 36px 70px -20px rgba(255, 154, 60, .48),
0 0 0 4px #fff,
0 0 0 6px #fde2c0,
0 0 0 10px #fff,
0 0 0 12px rgba(255, 154, 60, .4);
}
.iroha-intro-photos--row .iroha-intro-photo--c {
border-radius: 26px;
box-shadow:
0 28px 60px -20px rgba(108, 192, 141, .38),
0 0 0 4px #fff,
0 0 0 6px #d7efde,
0 0 0 10px #fff,
0 0 0 12px rgba(108, 192, 141, .3);
transform: none;
animation: none;
transition: transform .35s ease, box-shadow .35s ease;
}
.iroha-intro-photos--row .iroha-intro-photo--c:hover {
transform: translateY(-4px);
box-shadow:
0 36px 70px -20px rgba(108, 192, 141, .48),
0 0 0 4px #fff,
0 0 0 6px #d7efde,
0 0 0 10px #fff,
0 0 0 12px rgba(108, 192, 141, .4);
}
/* ========= Legacy layout kept below ========= */
.iroha-intro-layout:not(.iroha-intro-layout--v2) {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 48px;
row-gap: 40px;
align-items: start;
}
.iroha-intro-vcatch {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0;
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: clamp(24px, 2.3vw, 34px);
line-height: 1.9;
letter-spacing: .08em;
color: #2a1a22;
min-height: 560px;
display: flex;
gap: 8px;
justify-self: center;
align-self: start;
}
.iroha-intro-vcatch__line {
display: inline-block;
padding: 0 4px;
}
.iroha-intro-vcatch em {
font-style: normal;
color: #e8537b;
position: relative;
}
.iroha-intro-vcatch em::before {
content: "";
position: absolute;
top: -2px;
bottom: -2px;
left: 50%;
width: 10px;
transform: translateX(-50%);
background: linear-gradient(180deg, #ffd96b 0%, #ffb347 100%);
border-radius: 6px;
opacity: .55;
z-index: -1;
}
.iroha-intro-body {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.iroha-intro-body .iroha-intro-tag { margin-bottom: 18px; }
.iroha-intro-body .iroha-about-page__lead {
margin: 0 0 24px !important;
font-size: 15px;
line-height: 2;
color: #1f0f15;
text-align: justify;
}
.iroha-intro-body .iroha-about-page__btn-row {
justify-content: flex-start;
}
/* Legacy overlapping layout removed — see .iroha-intro-photos--row above */
@media (max-width: 860px) {
.iroha-intro-layout {
grid-template-columns: 1fr;
row-gap: 24px;
}
.iroha-intro-vcatch {
grid-column: 1;
grid-row: auto;
writing-mode: horizontal-tb;
text-orientation: mixed;
min-height: 0;
flex-direction: column;
font-size: 22px;
line-height: 1.7;
text-align: center;
justify-self: stretch;
gap: 0;
}
.iroha-intro-vcatch__line { padding: 0; }
.iroha-intro-body { grid-column: 1; }
.iroha-intro-body .iroha-intro-tag { display: inline-flex; }
.iroha-intro-body .iroha-about-page__lead { text-align: justify; }
.iroha-intro-body .iroha-about-page__btn-row { justify-content: center; }
.iroha-intro-photos {
grid-column: 1;
aspect-ratio: 4 / 3;
min-height: 300px;
}
.iroha-intro-photos .iroha-intro-photo--a { width: 50%; }
.iroha-intro-photos .iroha-intro-photo--b { width: 50%; left: 28%; }
.iroha-intro-photos .iroha-intro-photo--c { width: 50%; }
}
/* ========= Rounded tag chip ========= */
.iroha-intro-tag {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px 8px 14px;
background: #fff;
color: #e8537b;
border-radius: 999px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: .12em;
box-shadow: 0 10px 22px -10px rgba(232, 83, 123, .3), 0 0 0 1px rgba(232, 83, 123, .15) inset;
margin-bottom: 20px;
}
.iroha-intro-tag svg { color: #ffb347; }
/* ========= Catch headline with accent ========= */
.iroha-intro-catch {
margin: 0 0 14px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: clamp(18px, 1.7vw, 26px);
font-weight: 900;
line-height: 1.55;
color: #2a1a22;
letter-spacing: .02em;
text-align: center;
white-space: nowrap;
}
@media (max-width: 820px) {
.iroha-intro-catch {
white-space: normal;
font-size: 18px;
line-height: 1.7;
}
}
.iroha-intro-catch em {
font-style: normal;
position: relative;
color: #e8537b;
padding: 0 4px;
}
.iroha-intro-catch em::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: 2px;
height: 10px;
background: linear-gradient(90deg, #ffd96b 0%, #ffb347 100%);
border-radius: 6px;
opacity: .55;
z-index: -1;
}
/* Tight lead inside intro grid */
.iroha-intro-grid__text .iroha-about-page__lead {
margin: 0 0 14px !important;
font-size: 14px;
line-height: 1.85;
}
/* ========= Point cards ========= */
.iroha-intro-points {
list-style: none;
margin: 14px 0 18px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.iroha-intro-point {
position: relative;
display: grid;
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 2px;
padding: 12px 18px 12px 14px;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(232, 83, 123, .1);
box-shadow: 0 14px 32px -20px rgba(232, 83, 123, .3), 0 2px 0 rgba(255, 255, 255, .9) inset;
transition: transform .35s ease, box-shadow .35s ease;
}
.iroha-intro-point:hover {
transform: translateY(-2px);
box-shadow: 0 24px 50px -22px rgba(232, 83, 123, .42), 0 2px 0 rgba(255, 255, 255, .9) inset;
}
.iroha-intro-point__icon {
grid-row: 1 / span 2;
width: 44px;
height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(135deg, #ff4f77, #ff87a5);
box-shadow: 0 10px 20px -10px rgba(232, 83, 123, .5);
}
.iroha-intro-point--2 .iroha-intro-point__icon { background: linear-gradient(135deg, #ff9a3c, #ffc45e); box-shadow: 0 10px 20px -10px rgba(255, 154, 60, .5); }
.iroha-intro-point--3 .iroha-intro-point__icon { background: linear-gradient(135deg, #6cc08d, #a6dcb3); box-shadow: 0 10px 20px -10px rgba(108, 192, 141, .5); }
.iroha-intro-point__icon svg { width: 26px; height: 26px; }
.iroha-intro-point h3 {
margin: 0;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: 15px;
font-weight: 800;
color: #2a1a22;
letter-spacing: .04em;
}
.iroha-intro-point p {
margin: 0;
font-size: 12.5px;
line-height: 1.6;
color: #5c4148;
}
/* ========= Photo collage base ========= */
.iroha-intro-photo img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
max-width: none !important;
max-height: none !important;
}
@keyframes iroha-intro-float-c {
0%, 100% { transform: rotate(-2deg) translateY(0); }
50% { transform: rotate(-1deg) translateY(-6px); }
}
.iroha-intro-photo__badge {
position: absolute;
top: 10%;
left: -6px;
padding: 9px 16px;
background: linear-gradient(135deg, #ff4f77, #ff87a5);
color: #fff;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 13px;
letter-spacing: .08em;
border-radius: 999px;
box-shadow: 0 12px 24px -10px rgba(232, 83, 123, .55);
transform: rotate(-8deg);
z-index: 5;
}
.iroha-intro-photo__badge--alt {
background: linear-gradient(135deg, #ff9a3c, #ffc45e);
box-shadow: 0 12px 24px -10px rgba(255, 154, 60, .55);
transform: rotate(6deg);
top: auto;
bottom: 12%;
left: auto;
right: -6px;
}
.iroha-intro-arrow {
position: absolute;
top: 40%;
left: 30%;
width: 100px;
height: 50px;
transform: rotate(14deg);
animation: iroha-intro-arrow-wiggle 4s ease-in-out infinite;
z-index: 4;
pointer-events: none;
}
@keyframes iroha-intro-float-a {
0%, 100% { transform: rotate(-3deg) translateY(0); }
50% { transform: rotate(-2deg) translateY(-8px); }
}
@keyframes iroha-intro-float-b {
0%, 100% { transform: rotate(4deg) translateY(0); }
50% { transform: rotate(3deg) translateY(-6px); }
}
@keyframes iroha-intro-arrow-wiggle {
0%, 100% { transform: rotate(-6deg) translate(0,0); }
50% { transform: rotate(-3deg) translate(2px,-2px); }
}
/* ========= Mobile override for intro ========= */
@media (max-width: 860px) {
.iroha-about-page__intro { padding: 32px 20px 32px; }
.iroha-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.iroha-intro-grid__visual {
aspect-ratio: 5 / 4;
max-width: 420px;
margin: 0 auto;
}
.iroha-intro-catch { font-size: 22px; line-height: 1.7; text-align: center; }
.iroha-intro-tag { display: inline-flex; }
.iroha-intro-grid__text { text-align: center; }
.iroha-intro-points {
text-align: left;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.iroha-intro-photo--a { left: 0; width: 72%; }
.iroha-intro-photo--b { right: 0; width: 62%; }
.iroha-intro-arrow { left: 28%; width: 90px; }
}
.iroha-about-page__catch {
margin: 0 0 28px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 900;
line-height: 1.7;
color: #2a1a22;
letter-spacing: .04em;
}
.iroha-about-page__lead {
margin: 0 0 40px;
font-size: 15px;
line-height: 2;
font-weight: 600;
color: #1f0f15;
text-align: justify;
}
.iroha-about-page__btn-row {
display: flex;
gap: 18px;
justify-content: center;
flex-wrap: wrap;
}
/* ========= Premium age CTA buttons ========= */
.iroha-about-page__btn {
--btn-hue-a: #ff3a6d;
--btn-hue-b: #ff7a98;
--btn-glow: rgba(232, 83, 123, .48);
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 230px;
padding: 12px 20px 12px;
color: #ffffff !important;
box-sizing: border-box;
text-decoration: none !important;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
border: none !important;
border-radius: 999px;
background:
radial-gradient(120% 160% at 50% -20%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(160deg, var(--btn-hue-a) 0%, var(--btn-hue-b) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, .55) inset,
0 -8px 18px rgba(0, 0, 0, .08) inset,
0 14px 28px -12px var(--btn-glow),
0 28px 44px -20px var(--btn-glow),
0 0 0 6px rgba(255, 255, 255, .9),
0 0 0 7px var(--btn-hue-b);
transition: transform .4s cubic-bezier(.22,.8,.2,1), box-shadow .4s cubic-bezier(.22,.8,.2,1), filter .4s;
isolation: isolate;
overflow: hidden;
}
/* Soft top gloss */
.iroha-about-page__btn::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: 6px;
height: 42%;
background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 100%);
border-radius: 999px;
pointer-events: none;
z-index: 1;
}
/* Shimmer sweep on hover */
.iroha-about-page__btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 36%, rgba(255,255,255,.38) 50%, transparent 64%);
transform: translateX(-110%);
transition: transform .8s cubic-bezier(.22,.8,.2,1);
pointer-events: none;
z-index: 2;
}
.iroha-about-page__btn:hover {
transform: translateY(-4px) scale(1.02);
filter: saturate(1.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, .6) inset,
0 -8px 18px rgba(0, 0, 0, .1) inset,
0 22px 42px -14px var(--btn-glow),
0 40px 60px -22px var(--btn-glow),
0 0 0 6px rgba(255, 255, 255, .95),
0 0 0 7px var(--btn-hue-b);
}
.iroha-about-page__btn:hover::after {
transform: translateX(110%);
}
.iroha-about-page__btn:active {
transform: translateY(-1px) scale(.995);
}
.iroha-about-page__btn-sub {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 11px;
margin-bottom: 1px;
background: rgba(255, 255, 255, .22);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .15em;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.iroha-about-page__btn-main {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 900;
letter-spacing: .05em;
white-space: nowrap;
text-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.iroha-about-page__btn-main::after {
content: "";
display: inline-block;
width: 22px;
height: 22px;
background:
radial-gradient(circle at 30% 30%, #fff 0%, rgba(255, 255, 255, .85) 55%, rgba(255, 255, 255, 0) 70%);
mask: url("data:image/svg+xml;utf8,") center / 18px no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 18px no-repeat;
transition: transform .4s cubic-bezier(.22,.8,.2,1);
}
.iroha-about-page__btn:hover .iroha-about-page__btn-main::after {
transform: translateX(4px);
}
/* Pink variant */
.iroha-about-page__btn--pink {
--btn-hue-a: #ff3a6d;
--btn-hue-b: #ff87a5;
--btn-glow: rgba(232, 83, 123, .55);
}
/* Orange variant */
.iroha-about-page__btn--orange {
--btn-hue-a: #ff8a28;
--btn-hue-b: #ffc05a;
--btn-glow: rgba(255, 138, 40, .5);
}
/* ---------- SECTIONS shared ---------- */
.iroha-about-page__section {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
}
.iroha-about-page__section-head {
text-align: center;
margin-bottom: 14px;
}
.iroha-about-page__section-en {
display: block;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif;
font-weight: 900;
font-size: clamp(26px, 3vw, 40px);
letter-spacing: .08em;
color: #2a1a22;
line-height: 1;
}
.iroha-about-page__section-ja {
margin: 12px 0 0 !important;
padding: 0 !important;
font-family: "Zen Maru Gothic", sans-serif !important;
font-weight: 800 !important;
font-size: clamp(16px, 1.6vw, 20px) !important;
letter-spacing: .22em !important;
color: #c8375d !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-left: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
.iroha-about-page__section-ja::before,
.iroha-about-page__section-ja::after {
display: none !important;
content: none !important;
}
.iroha-about-page__dots {
display: inline-flex;
gap: 10px;
margin-top: 10px;
}
.iroha-about-page__dots span {
width: 8px; height: 8px;
border-radius: 50%;
display: block;
}
.iroha-about-page__dots span:nth-child(1) { background: #ff8aa4; }
.iroha-about-page__dots span:nth-child(2) { background: #ffd96b; }
.iroha-about-page__dots span:nth-child(3) { background: #b6dca7; }
.iroha-about-page__dots span:nth-child(4) { background: #a5d4ef; }
.iroha-about-page__dots span:nth-child(5) { background: #b68be3; }
.iroha-about-page__section-lead {
max-width: 820px;
margin: 0 auto 14px;
text-align: center;
font-size: 15px;
line-height: 1.9;
font-weight: 600;
color: #1f0f15;
}
/* ---------- INTERVENTION cards (redesigned) ---------- */
.iroha-about-page__section--intervention {
max-width: 1180px;
margin: 24px auto 24px;
padding: 36px 24px 36px;
}
.iroha-about-page__section--intervention .iroha-about-page__section-head { margin-bottom: 6px; }
.iroha-about-page__section--intervention .iroha-about-page__section-lead { margin-bottom: 10px; }
.iroha-inter-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
width: 100% !important;
align-items: stretch;
}
/* ============ Cute cards (「療育で、何が変わる？」) ============ */
.iroha-cute-list {
list-style: none !important;
padding: 0 !important;
margin: 10px auto 0 !important;
max-width: 960px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.iroha-cute-card {
--num-bg: #ff8aa4;
--dot: #ff8aa4;
background: #ffffff;
border: 2px solid #cfeaf3;
border-radius: 18px;
padding: 14px 22px 16px;
box-shadow: 0 6px 16px -10px rgba(125, 211, 232, .35);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
list-style: none;
}
.iroha-cute-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px -14px rgba(125, 211, 232, .55);
border-color: #7dd3e8;
}
/* Card #5 → centered under 2+2 grid */
.iroha-cute-card--5 {
grid-column: 1 / -1;
justify-self: center;
width: 100%;
max-width: calc(50% - 13px);
}
.iroha-cute-card__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.iroha-cute-card__num {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--num-bg);
color: #ffffff;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 16px;
letter-spacing: .02em;
line-height: 1;
}
.iroha-cute-card__title {
margin: 0;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: 17px;
font-weight: 800;
color: #333333;
letter-spacing: .03em;
line-height: 1.5;
}
.iroha-cute-card__points {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.iroha-cute-card__points li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.75;
color: #4f3a40;
list-style: none;
}
.iroha-cute-card__points li::before {
content: "";
position: absolute;
left: 2px;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dot);
}
/* Per-card soft accents */
.iroha-cute-card--1 { --num-bg: #ff8aa4; --dot: #ff8aa4; }
.iroha-cute-card--2 { --num-bg: #ffb86b; --dot: #ffb86b; }
.iroha-cute-card--3 { --num-bg: #7ec988; --dot: #7ec988; }
.iroha-cute-card--4 { --num-bg: #86c5e8; --dot: #86c5e8; }
.iroha-cute-card--5 { --num-bg: #c3a0e8; --dot: #c3a0e8; }
@media (max-width: 820px) {
.iroha-cute-list {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 16px !important;
}
.iroha-cute-card--5 {
max-width: 100%;
grid-column: auto;
}
.iroha-cute-card { padding: 18px 20px 20px; }
.iroha-cute-card__num { width: 36px; height: 36px; font-size: 16px; }
.iroha-cute-card__title { font-size: 16px; }
.iroha-cute-card__points li { font-size: 13.5px; }
}
/* ============ Zigzag list (「療育で、何が変わる？」) ============ */
.iroha-zig-list {
list-style: none !important;
padding: 0 !important;
margin: 20px auto 0 !important;
max-width: 1080px;
display: flex;
flex-direction: column;
gap: 18px;
counter-reset: zig;
}
.iroha-zig-item {
--zig-a: #ff4f77;
--zig-b: #ff87a5;
--zig-soft: #ffe3ea;
--zig-ink: #2a1a22;
position: relative;
display: grid;
grid-template-columns: minmax(160px, 220px) 1fr;
align-items: center;
column-gap: 20px;
padding: 16px 28px;
background: #ffffff;
border-radius: 22px;
overflow: hidden;
box-shadow:
0 18px 40px -24px rgba(232, 83, 123, .24),
0 0 0 1px rgba(232, 83, 123, .08);
transition: transform .45s cubic-bezier(.22,.8,.2,1), box-shadow .45s cubic-bezier(.22,.8,.2,1);
}
.iroha-zig-item:hover {
transform: translateY(-4px);
box-shadow:
0 32px 60px -26px rgba(232, 83, 123, .32),
0 0 0 1px rgba(232, 83, 123, .14);
}
/* Alternate background tint from the left */
.iroha-zig-item::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--zig-soft) 0%, rgba(255,255,255,0) 55%);
opacity: .9;
pointer-events: none;
z-index: 0;
}
/* Mirror layout for even items */
.iroha-zig-item:nth-child(even) {
grid-template-columns: 1fr minmax(180px, 260px);
}
.iroha-zig-item:nth-child(even)::before {
background: linear-gradient(270deg, var(--zig-soft) 0%, rgba(255,255,255,0) 55%);
}
.iroha-zig-item:nth-child(even) .iroha-zig-item__ghost {
order: 2;
justify-self: end;
text-align: right;
}
.iroha-zig-item:nth-child(even) .iroha-zig-item__body {
order: 1;
}
/* Ghost number */
.iroha-zig-item__ghost {
position: relative;
z-index: 1;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: clamp(72px, 9vw, 140px);
line-height: .85;
letter-spacing: -.02em;
background: linear-gradient(160deg, var(--zig-a) 0%, var(--zig-b) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: .28;
pointer-events: none;
user-select: none;
text-shadow: 0 4px 0 rgba(0,0,0,.02);
}
/* Body */
.iroha-zig-item__body {
position: relative;
z-index: 1;
min-width: 0;
}
.iroha-zig-item__title {
margin: 0 0 8px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: clamp(17px, 1.6vw, 20px);
font-weight: 900;
color: var(--zig-ink);
letter-spacing: .04em;
position: relative;
padding-left: 16px;
}
.iroha-zig-item__title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 22px;
border-radius: 4px;
background: linear-gradient(180deg, var(--zig-a), var(--zig-b));
transform: translateY(-50%);
}
.iroha-zig-item__points {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 4px;
}
.iroha-zig-item__points li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
line-height: 1.6;
color: #4f3a40;
}
.iroha-zig-item__points li::before { display: none !important; content: none !important; }
.iroha-zig-check {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 3px;
color: var(--zig-a);
}
/* Per-item pastel accents */
.iroha-zig-item--1 {
--zig-a: #ff4f77;
--zig-b: #ff87a5;
--zig-soft: #ffe3ea;
}
.iroha-zig-item--2 {
--zig-a: #ff9a3c;
--zig-b: #ffc45e;
--zig-soft: #ffeacc;
}
.iroha-zig-item--3 {
--zig-a: #6cc08d;
--zig-b: #a6dcb3;
--zig-soft: #dff1e3;
}
.iroha-zig-item--4 {
--zig-a: #67b6e5;
--zig-b: #9fd2ef;
--zig-soft: #e0f0fb;
}
.iroha-zig-item--5 {
--zig-a: #b68be3;
--zig-b: #cdaeec;
--zig-soft: #efe4f9;
}
@media (max-width: 820px) {
.iroha-zig-list { gap: 24px; margin-top: 28px !important; }
.iroha-zig-item,
.iroha-zig-item:nth-child(even) {
grid-template-columns: 1fr;
row-gap: 6px;
padding: 22px 22px 24px;
}
.iroha-zig-item:nth-child(even)::before {
background: linear-gradient(90deg, var(--zig-soft) 0%, rgba(255,255,255,0) 55%);
}
.iroha-zig-item:nth-child(even) .iroha-zig-item__ghost {
order: 0;
justify-self: start;
text-align: left;
}
.iroha-zig-item:nth-child(even) .iroha-zig-item__body {
order: 1;
}
.iroha-zig-item__ghost { font-size: 64px; line-height: 1; }
.iroha-zig-item__title { font-size: 17px; }
.iroha-zig-item__points li { font-size: 13.5px; }
}
/* ============ Change cards (「療育で、何が変わる？」) ============ */
.iroha-change-list {
list-style: none !important;
padding: 0 !important;
margin: 48px auto 0 !important;
max-width: 1080px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
align-items: stretch;
}
.iroha-change-card {
--card-a: #ff4f77;
--card-b: #ff87a5;
--card-glow: rgba(232, 83, 123, .28);
--card-soft: #ffd6e1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 44px 28px 34px;
background: #ffffff;
border-radius: 28px;
overflow: hidden;
box-shadow:
0 22px 48px -24px var(--card-glow),
0 2px 0 rgba(255, 255, 255, .9) inset,
0 0 0 1px rgba(232, 83, 123, .08);
transition: transform .45s cubic-bezier(.22,.8,.2,1), box-shadow .45s cubic-bezier(.22,.8,.2,1);
}
.iroha-change-card::before {
/* Soft top band */
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--card-a), var(--card-b));
opacity: .9;
}
.iroha-change-card::after {
/* Blurred blob decoration */
content: "";
position: absolute;
top: -40px;
right: -30px;
width: 140px;
height: 140px;
background: radial-gradient(closest-side, var(--card-soft) 0%, transparent 70%);
filter: blur(8px);
opacity: .75;
pointer-events: none;
z-index: 0;
}
.iroha-change-card:hover {
transform: translateY(-6px);
box-shadow:
0 30px 60px -22px var(--card-glow),
0 2px 0 rgba(255, 255, 255, .95) inset,
0 0 0 1px rgba(232, 83, 123, .12);
}
.iroha-change-card__icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin-bottom: 18px;
border-radius: 26px;
color: #ffffff;
background: linear-gradient(145deg, var(--card-a) 0%, var(--card-b) 100%);
box-shadow:
0 14px 28px -10px var(--card-glow),
0 2px 0 rgba(255, 255, 255, .55) inset,
0 -6px 12px rgba(0, 0, 0, .06) inset;
}
.iroha-change-card__icon svg {
width: 34px;
height: 34px;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12));
}
.iroha-change-card__title {
position: relative;
z-index: 1;
margin: 0 0 12px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: 20px;
font-weight: 900;
color: #2a1a22;
letter-spacing: .04em;
}
.iroha-change-card__text {
position: relative;
z-index: 1;
margin: 0;
font-size: 14px;
line-height: 1.9;
color: #4f3a40;
}
/* Per-card accent colors */
.iroha-change-card--1 {
--card-a: #ff4f77;
--card-b: #ff87a5;
--card-glow: rgba(232, 83, 123, .3);
--card-soft: #ffd6e1;
}
.iroha-change-card--2 {
--card-a: #ff9a3c;
--card-b: #ffc45e;
--card-glow: rgba(255, 154, 60, .3);
--card-soft: #fde2c0;
}
.iroha-change-card--3 {
--card-a: #6cc08d;
--card-b: #a6dcb3;
--card-glow: rgba(108, 192, 141, .3);
--card-soft: #d7efde;
}
@media (max-width: 820px) {
.iroha-change-list {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 32px !important;
}
.iroha-change-card { padding: 32px 24px 26px; }
.iroha-change-card__icon { width: 64px; height: 64px; border-radius: 20px; }
.iroha-change-card__icon svg { width: 28px; height: 28px; }
.iroha-change-card__title { font-size: 18px; }
}
.iroha-inter-item {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
border-radius: 24px;
padding: 44px 18px 22px;
border: 1px solid #ffe3ea;
box-shadow: 0 16px 36px -18px rgba(232, 83, 123, .32);
transition: transform .35s ease, box-shadow .35s ease;
width: auto !important;
min-width: 0 !important;
list-style: none !important;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
}
.iroha-inter-item::after {
content: "";
position: absolute;
inset: auto -30% -40% auto;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 217, 107, .25), transparent 70%);
pointer-events: none;
}
.iroha-inter-item:hover {
transform: translateY(-6px);
box-shadow: 0 26px 50px -18px rgba(232, 83, 123, .42);
}
.iroha-inter-item--3 {
grid-column: auto !important;
max-width: none !important;
margin: 0 !important;
}
.iroha-inter-item__num {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 900;
font-size: 22px;
font-family: "M PLUS Rounded 1c", sans-serif;
border: 4px solid #ffffff;
box-shadow: 0 10px 18px -4px rgba(232, 83, 123, .42);
z-index: 2;
}
.iroha-inter-item--1 .iroha-inter-item__num { background: linear-gradient(135deg, #ff4f77, #ff87a5); }
.iroha-inter-item--2 .iroha-inter-item__num { background: linear-gradient(135deg, #ffb347, #ffd38a); }
.iroha-inter-item--3 .iroha-inter-item__num { background: linear-gradient(135deg, #6cc08d, #a2dab3); }
.iroha-inter-item--4 .iroha-inter-item__num { background: linear-gradient(135deg, #67b6e5, #8cc9ea); }
.iroha-inter-item--5 .iroha-inter-item__num { background: linear-gradient(135deg, #b68be3, #d6b8ff); }
.iroha-inter-item__title {
margin: 14px 0 14px;
font-size: 15px;
font-weight: 900;
color: #2a1a22;
letter-spacing: .02em;
text-align: center;
line-height: 1.5;
min-height: 3em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.iroha-inter-item ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
position: relative;
z-index: 1;
}
.iroha-inter-item ul li {
position: relative;
margin: 0 !important;
padding: 7px 0 7px 18px !important;
font-size: 12.5px;
line-height: 1.65;
font-weight: 600;
color: #1f0f15;
border: none !important;
border-top: 1px dashed rgba(200, 55, 93, .22) !important;
border-bottom: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
list-style: none !important;
width: auto !important;
max-width: none !important;
display: block !important;
text-align: left !important;
white-space: normal !important;
}
.iroha-inter-item ul li:first-child { border-top: none !important; }
.iroha-inter-item ul li::before {
content: "";
position: absolute;
left: 2px;
top: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: .85;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.iroha-inter-item--1 ul li::before { background: #ff5479; }
.iroha-inter-item--2 ul li::before { background: #ffb347; }
.iroha-inter-item--3 ul li::before { background: #6cc08d; }
.iroha-inter-item--4 ul li::before { background: #67b6e5; }
.iroha-inter-item--5 ul li::before { background: #b68be3; }
/* Tablet: 5-col grid is too cramped, switch to 6-col so 3+2 centered works */
@media (max-width: 1100px) and (min-width: 821px) {
.iroha-inter-list { grid-template-columns: repeat(6, 1fr); gap: 30px 22px; }
.iroha-inter-item--1 { grid-column: 1 / span 2; }
.iroha-inter-item--2 { grid-column: 3 / span 2; }
.iroha-inter-item--3 { grid-column: 5 / span 2; }
.iroha-inter-item--4 { grid-column: 2 / span 2; }
.iroha-inter-item--5 { grid-column: 4 / span 2; }
}
/* =====================================================================
SUBPAGE BACKGROUND — single flat pink across html/body/containers/
subhero/about-hero. Eliminates every visible color seam.
===================================================================== */
html:has(body:not(.home)) { background: #ffffff !important; }
body:not(.home),
body:not(.home) #container,
body:not(.home) #wrap,
body:not(.home) #main,
body:not(.home) .main,
body:not(.home) #content,
body:not(.home) .content,
/* Keep only the hero tinted pink; everything below it should be white */
body:not(.home) .content-in,
body:not(.home) article.article,
body:not(.home) article.page,
body:not(.home) .iroha-about-page,
body:not(.home) .iroha-about-page__intro {
background: #ffffff !important;
background-image: none !important;
}
/* Kill default article/page bottom margin so tc-contact touches access */
body:not(.home) .iroha-about-page,
body:not(.home) article.article,
body:not(.home) article.page,
body:not(.home) .main,
body:not(.home) #main,
body:not(.home) .content-in {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body:not(.home) .iroha-subhero {
background: #fdeef0 !important;
background-image: none !important;
margin: 0 !important;
padding-bottom: 0 !important;
}
body:not(.home) .iroha-about-page__hero { margin-top: 0 !important; }
@media (max-width: 820px) {
/* Let the pink hero extend to the very top of the page.
The subhero/mobilebar (iroha cloud logo + hamburger) floats on top
of the pink hero as a transparent bar. */
body:not(.home) .iroha-subhero {
position: absolute !important;
top: 0;
left: 0;
right: 0;
z-index: 20;
background: transparent !important;
background-image: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0;
}
body:not(.home) .iroha-mobilebar {
background: transparent !important;
background-image: none !important;
margin: 0 !important;
padding: 14px 16px 10px !important;
box-shadow: none !important;
border: none !important;
position: relative;
z-index: 21;
}
body:not(.home) .iroha-about-page {
position: relative;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Extend the pink hero up by 120px so it reaches the top of the page */
body:not(.home) .iroha-about-page__hero {
position: relative;
z-index: 1;
margin-top: -120px !important;
padding-top: 150px !important;
}
/* Make sure nothing above the hero has any white background */
body:not(.home) #container,
body:not(.home) #wrap,
body:not(.home) #main,
body:not(.home) .main,
body:not(.home) .content-in,
body:not(.home) #content,
body:not(.home) article.article,
body:not(.home) article.page,
body:not(.home) .iroha-about-page {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
}
html:has(body:not(.home)),
body:not(.home) {
background: #fdeef0 !important;
}
}
/* Subpage tc-contact → white background with its own wave divider above */
body:not(.home) .tc-contact.iroha-subfoot-contact {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* Hide Cocoon default footer/go-to-top on subpages — the theme already
outputs .iroha-footer via get_footer hook. */
body:not(.home) #footer,
body:not(.home) .footer,
body:not(.home) .footer-bottom,
body:not(.home) .navi-footer,
body:not(.home) #go-to-top,
body:not(.home) .go-to-top,
body:not(.home) .author-info,
body:not(.home) .author,
body:not(.home) .author-box,
body:not(.home) .a-wrap.author-info,
body:not(.home) span.author-name,
body:not(.home) .author-name,
body:not(.home) .vcard,
body:not(.home) .entry-author,
body:not(.home) .post-update-info,
body:not(.home) .date-tags {
display: none !important;
}
body:not(.home) .iroha-subhero {
position: relative;
z-index: 50;
}
/* Remove Cocoon default link underlines inside subhero nav (matches home .iroha-hero a) */
.iroha-subhero a,
.iroha-subhero a:hover,
.iroha-subhero a:focus,
.iroha-subhero a:visited { text-decoration: none !important; }
.iroha-subhero .iroha-hero__nav a { color: inherit; text-decoration: none !important; }
/* Subpage header tweaks — hide acorn char, remove nav dots, force white CTA text */
.iroha-subhero .iroha-hero__logo-chara,
.iroha-subhero .iroha-hero__logo-chara--right,
.iroha-subhero .iroha-hero__logo-chara--left { display: none !important; }
.iroha-subhero .iroha-hero__nav-dot { display: none !important; }
.iroha-subhero .iroha-hero__nav-cta a,
.iroha-subhero .iroha-hero__nav-cta a:hover,
.iroha-subhero .iroha-hero__nav-cta a:visited { color: #ffffff !important; }
.iroha-subhero .iroha-hero__nav-cta a * { color: #ffffff !important; }
.iroha-about-page__intro {
background: #ffffff;
position: relative;
z-index: 0;
}
/* ---------- About page WAVE dividers ---------- */
.iroha-about-page__wave {
display: block;
width: 100%;
height: 90px;
margin: 0;
position: relative;
z-index: 1;
}
.iroha-about-page__wave--into-intervention { height: 100px; }
.iroha-about-page__wave--into-outline { height: 90px; }
.iroha-about-page__wave--into-access { height: 90px; }
.iroha-about-page__wave--into-contact { height: 100px; }
/* ---------- Two-layer wave break (intervention → outline) ---------- */
.iroha-about-page__wavebreak {
position: relative;
width: 100%;
height: 120px;
margin: 0;
line-height: 0;
pointer-events: none;
z-index: 1;
}
.iroha-about-page__wavebreak svg {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: block;
}
.iroha-about-page__wavebreak-back { bottom: 0; z-index: 1; }
.iroha-about-page__wavebreak-front { bottom: 0; z-index: 2; }
.iroha-about-page__wavebreak--into-outline {
background: linear-gradient(180deg, #ffd8e3 0%, #ffd8e3 100%);
}
/* ============ Character decorations ============ */
.iroha-about-chara {
position: absolute;
z-index: 3;
pointer-events: none;
user-select: none;
width: clamp(90px, 10vw, 140px);
height: auto;
filter: drop-shadow(0 8px 18px rgba(232, 83, 123, .18));
animation: iroha-about-chara-bob 4.6s ease-in-out infinite;
}
@keyframes iroha-about-chara-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Hero — right of the iroha cloud logo (top area) */
.iroha-about-chara--hero {
top: 10px;
left: calc(50% + 120px);
width: clamp(80px, 8vw, 110px);
}
/* Intro — bottom right */
.iroha-about-chara--intro {
right: 2%;
bottom: 12px;
width: clamp(100px, 9vw, 130px);
animation-delay: -.8s;
}
/* Intervention — bottom left */
.iroha-about-chara--intervention {
left: 2%;
bottom: 12px;
width: clamp(100px, 10vw, 140px);
animation-delay: -1.4s;
}
/* Intervention — bottom right */
.iroha-about-chara--intervention-r {
left: auto !important;
right: 2% !important;
bottom: 12px !important;
width: clamp(100px, 10vw, 140px);
animation-delay: -2.2s;
}
/* Outline — bottom right */
.iroha-about-chara--outline {
right: 2%;
bottom: 12px;
width: clamp(100px, 9vw, 130px);
animation-delay: -2s;
}
/* Access — bottom left */
.iroha-about-chara--access {
left: 2%;
bottom: 12px;
width: clamp(100px, 9vw, 130px);
animation-delay: -2.4s;
}
@media (max-width: 820px) {
.iroha-about-chara--hero { display: none; }
.iroha-about-chara--intro,
.iroha-about-chara--intervention,
.iroha-about-chara--intervention-r,
.iroha-about-chara--outline,
.iroha-about-chara--access { width: 72px; }
}
/* Outline — mobile top-right only */
.iroha-about-chara--outline-mobtop { display: none; }
@media (max-width: 820px) {
.iroha-about-chara--outline-mobtop {
display: block;
top: 8px;
right: 8px;
left: auto;
bottom: auto;
width: 70px;
animation-delay: -1s;
}
}
/* Section background colors so waves blend correctly */
.iroha-about-page__section--intervention {
background: #fdeef0;
max-width: none !important;
margin: 0 !important;
padding: 10px 24px 18px !important;
position: relative;
}
.iroha-about-page__section--intervention .iroha-inter-list,
.iroha-about-page__section--intervention .iroha-about-page__section-head,
.iroha-about-page__section--intervention .iroha-about-page__section-lead {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.iroha-about-page__section--outline {
background: #ffffff;
max-width: none !important;
margin: 0 !important;
padding: 14px 24px 18px !important;
}
.iroha-about-page__section--outline .iroha-outline,
.iroha-about-page__section--outline .iroha-about-page__section-head {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.iroha-about-page__section--access {
background: #fdeef0;
max-width: none !important;
margin: 0 !important;
padding: 14px 24px 18px !important;
position: relative;
overflow: hidden;
}
.iroha-about-page__section--intervention { overflow: hidden; }
.iroha-about-page__pattern--section {
position: absolute !important;
inset: 0;
pointer-events: none;
z-index: 0;
}
.iroha-about-page__section--intervention > *:not(.iroha-about-page__pattern--section),
.iroha-about-page__section--access > *:not(.iroha-about-page__pattern--section) {
position: relative;
z-index: 1;
}
.iroha-about-page__section--access .iroha-access,
.iroha-about-page__section--access .iroha-about-page__section-head {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
/* ---------- OUTLINE ---------- */
.iroha-outline {
max-width: 820px;
margin: 0 auto;
background: #ffffff;
border-radius: 22px;
padding: 10px 28px;
border: 2px solid #ffe3ea;
box-shadow: 0 20px 44px -22px rgba(232, 83, 123, .22);
width: 100%;
box-sizing: border-box;
}
.iroha-outline__row {
display: flex;
gap: 24px;
padding: 8px 0;
border-bottom: 1px dashed rgba(200, 55, 93, .18);
}
.iroha-outline__row:last-child { border-bottom: none; }
.iroha-outline__row dt {
flex: 0 0 130px;
font-size: 14px;
font-weight: 800;
color: #c8375d;
letter-spacing: .06em;
position: relative;
padding-left: 14px;
}
.iroha-outline__row dt::before {
content: "●";
position: absolute;
left: 0;
top: 0;
color: #ff8aa4;
font-size: 10px;
}
.iroha-outline__row dd {
flex: 1;
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.8;
color: #1f0f15;
}
.iroha-outline__row dd a {
color: #c8375d;
text-decoration: none;
border-bottom: 1px dashed rgba(200, 55, 93, .4);
}
/* ---------- ACCESS ---------- */
.iroha-access {
max-width: 920px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 32px;
align-items: center;
}
.iroha-access__info {
background: #ffffff;
border-radius: 22px;
padding: 28px 32px;
border: 2px solid #ffe3ea;
box-shadow: 0 20px 44px -22px rgba(232, 83, 123, .22);
}
.iroha-access__name {
margin: 0 0 10px;
font-size: 16px;
font-weight: 900;
color: #2a1a22;
}
.iroha-access__addr {
margin: 0;
font-size: 14px;
line-height: 1.85;
font-weight: 600;
color: #1f0f15;
}
.iroha-access__map iframe {
display: block;
box-shadow: 0 20px 44px -22px rgba(232, 83, 123, .26);
}
/* ---------- ACTIVITY GRID (12 cards) ---------- */
.iroha-activity-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
max-width: 1080px;
width: 100%;
}
.iroha-activity-card {
list-style: none;
background: #ffffff;
border-radius: 22px;
padding: 30px 22px 24px;
border: 2px solid #ffe3ea;
box-shadow: 0 18px 38px -20px rgba(232, 83, 123, .26);
position: relative;
text-align: center;
transition: transform .4s, box-shadow .4s, border-color .4s;
overflow: hidden;
min-width: 0;
}
.iroha-activity-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--hue, #ff87a5);
border-radius: 22px 22px 0 0;
}
.iroha-activity-card:hover {
transform: translateY(-5px);
border-color: var(--hue, #ff87a5);
box-shadow: 0 28px 50px -22px rgba(232, 83, 123, .38);
}
.iroha-activity-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: color-mix(in srgb, var(--hue, #ff87a5) 18%, #ffffff);
font-size: 28px;
margin: 4px auto 14px;
box-shadow: 0 8px 14px -6px color-mix(in srgb, var(--hue, #ff87a5) 60%, transparent);
}
.iroha-activity-card h3 {
margin: 0 0 8px;
font-size: 16px;
font-weight: 900;
color: #2a1a22;
letter-spacing: .02em;
}
.iroha-activity-card p {
margin: 0;
font-size: 13px;
line-height: 1.85;
font-weight: 600;
color: #1f0f15;
}
@media (max-width: 1080px) {
.iroha-activity-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
.iroha-activity-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 520px) {
.iroha-activity-grid { grid-template-columns: 1fr; }
}
/* ---------- NEWS (tabs + list) ---------- */
.iroha-news-toolbar {
max-width: 860px;
margin: 0 auto 24px;
display: flex;
justify-content: center;
}
.iroha-news-toolbar__tabs {
display: inline-flex;
gap: 6px;
padding: 6px;
background: #ffffff;
border: 2px solid #ffe3ea;
border-radius: 999px;
box-shadow: 0 12px 24px -12px rgba(232, 83, 123, .22);
}
.iroha-news-tab {
border: none;
background: transparent;
padding: 10px 24px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-size: 13.5px;
font-weight: 800;
color: #6b5158;
border-radius: 999px;
cursor: pointer;
transition: color .3s, background .3s;
letter-spacing: .04em;
}
.iroha-news-tab:hover { color: #c8375d; }
.iroha-news-tab.is-active {
background: linear-gradient(135deg, #ff4f77, #ff87a5);
color: #ffffff;
box-shadow: 0 10px 18px -8px rgba(232, 83, 123, .4);
}
.iroha-news-list {
list-style: none;
max-width: 860px;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.iroha-news-list__item {
list-style: none;
margin: 0;
padding: 0;
}
.iroha-news-list__item a {
display: flex;
align-items: center;
gap: 22px;
padding: 20px 28px;
background: #ffffff;
border: 2px solid #ffe3ea;
border-radius: 18px;
text-decoration: none;
transition: transform .35s, border-color .35s, box-shadow .35s;
box-shadow: 0 14px 30px -18px rgba(232, 83, 123, .22);
flex-wrap: wrap;
}
.iroha-news-list__item a:hover {
transform: translateY(-4px);
border-color: #ffb6c9;
box-shadow: 0 22px 42px -20px rgba(232, 83, 123, .34);
}
.iroha-news-list__item time {
flex: 0 0 auto;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 800;
font-size: 13.5px;
color: #c8375d;
letter-spacing: .04em;
}
.iroha-news-list__cat {
flex: 0 0 auto;
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .04em;
color: #ffffff;
}
.iroha-news-list__cat--news { background: linear-gradient(135deg, #ff4f77, #ff87a5); }
.iroha-news-list__cat--blog { background: linear-gradient(135deg, #ffb347, #ffd38a); color: #7a4a10; }
.iroha-news-list__title {
flex: 1 1 auto;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
font-size: 14.5px;
font-weight: 700;
color: #1f0f15;
line-height: 1.6;
}
@media (max-width: 820px) {
.iroha-news-list__item a {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 18px 22px;
}
.iroha-news-list__title { font-size: 13.5px; }
}
/* ---------- LIFE (daily schedule timeline) ---------- */
.iroha-life {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 820px;
position: relative;
}
.iroha-life::before {
content: "";
position: absolute;
top: 24px;
bottom: 24px;
left: 78px;
width: 3px;
background: linear-gradient(180deg, #ff87a5 0%, #ffb347 30%, #6cc08d 55%, #67b6e5 80%, #b68be3 100%);
border-radius: 999px;
opacity: .6;
}
.iroha-life__step {
list-style: none;
position: relative;
display: flex;
align-items: flex-start;
gap: 28px;
padding: 16px 0;
margin-bottom: 12px;
}
.iroha-life__step:last-child { margin-bottom: 0; }
.iroha-life__time {
flex: 0 0 56px;
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 14px;
font-weight: 900;
color: #c8375d;
text-align: right;
padding-top: 18px;
letter-spacing: .04em;
}
.iroha-life__step::after {
content: "";
position: absolute;
top: 22px;
left: 72px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #ffffff;
border: 3px solid #ff87a5;
box-shadow: 0 4px 10px -2px rgba(232, 83, 123, .36);
z-index: 2;
}
.iroha-life__step:nth-child(2)::after { border-color: #ffb347; }
.iroha-life__step:nth-child(3)::after { border-color: #6cc08d; }
.iroha-life__step:nth-child(4)::after { border-color: #67b6e5; }
.iroha-life__step:nth-child(5)::after { border-color: #b68be3; }
.iroha-life__step:nth-child(6)::after { border-color: #ff87a5; }
.iroha-life__step:nth-child(7)::after { border-color: #ffb347; }
.iroha-life__step:nth-child(8)::after { border-color: #6cc08d; }
.iroha-life__body {
flex: 1 1 auto;
background: #ffffff;
border: 2px solid #ffe3ea;
border-radius: 18px;
padding: 16px 22px 16px 30px;
box-shadow: 0 16px 32px -18px rgba(232, 83, 123, .26);
transition: transform .35s, box-shadow .35s;
}
.iroha-life__body:hover {
transform: translateX(4px);
box-shadow: 0 22px 40px -18px rgba(232, 83, 123, .34);
}
.iroha-life__body h3 {
margin: 0 0 4px;
font-size: 16px;
font-weight: 900;
color: #2a1a22;
letter-spacing: .02em;
}
.iroha-life__body p {
margin: 0;
font-size: 13.5px;
line-height: 1.8;
font-weight: 600;
color: #1f0f15;
}
@media (max-width: 820px) {
.iroha-life::before { left: 58px; }
.iroha-life__step { gap: 16px; }
.iroha-life__time { flex-basis: 44px; font-size: 12px; }
.iroha-life__step::after { left: 52px; width: 13px; height: 13px; }
.iroha-life__body { padding: 14px 18px; }
.iroha-life__body h3 { font-size: 14.5px; }
.iroha-life__body p { font-size: 12.5px; }
}
/* ---------- Features list (3 cards) ---------- */
.iroha-features-list {
grid-template-columns: 1fr 1fr 1fr !important;
}
.iroha-features-list .iroha-inter-item--3 {
grid-column: auto !important;
max-width: none !important;
margin: 0 !important;
}
@media (max-width: 820px) {
.iroha-features-list { grid-template-columns: 1fr !important; }
}
/* ---------- FLOW (5 step list) ---------- */
.iroha-flow {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 820px;
counter-reset: iroha-flow;
position: relative;
}
.iroha-flow::before {
content: "";
position: absolute;
top: 30px;
bottom: 30px;
left: 36px;
width: 3px;
background: linear-gradient(180deg, #ff87a5 0%, #ffb347 25%, #6cc08d 50%, #67b6e5 75%, #b68be3 100%);
border-radius: 999px;
opacity: .7;
}
.iroha-flow__step {
list-style: none;
position: relative;
padding: 22px 24px 22px 90px;
margin-bottom: 18px;
background: #ffffff;
border-radius: 22px;
border: 2px solid #ffe3ea;
box-shadow: 0 20px 44px -22px rgba(232, 83, 123, .28);
transition: transform .4s, box-shadow .4s;
}
.iroha-flow__step:last-child { margin-bottom: 0; }
.iroha-flow__step:hover {
transform: translateX(4px);
box-shadow: 0 26px 50px -20px rgba(232, 83, 123, .36);
}
.iroha-flow__step::before {
counter-increment: iroha-flow;
content: counter(iroha-flow);
position: absolute;
top: 50%;
left: 18px;
transform: translateY(-50%);
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 22px;
background: linear-gradient(135deg, #ff4f77, #ff87a5);
box-shadow: 0 10px 18px -6px rgba(232, 83, 123, .4);
border: 3px solid #ffffff;
z-index: 2;
}
.iroha-flow__step:nth-child(2)::before { background: linear-gradient(135deg, #ffb347, #ffd38a); box-shadow: 0 10px 18px -6px rgba(232, 140, 40, .4); }
.iroha-flow__step:nth-child(3)::before { background: linear-gradient(135deg, #6cc08d, #a2dab3); box-shadow: 0 10px 18px -6px rgba(60, 160, 90, .4); }
.iroha-flow__step:nth-child(4)::before { background: linear-gradient(135deg, #67b6e5, #8cc9ea); box-shadow: 0 10px 18px -6px rgba(60, 120, 180, .4); }
.iroha-flow__step:nth-child(5)::before { background: linear-gradient(135deg, #b68be3, #d6b8ff); box-shadow: 0 10px 18px -6px rgba(120, 80, 180, .4); }
.iroha-flow__num {
display: block;
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
color: #c8375d;
margin-bottom: 4px;
}
.iroha-flow__title {
margin: 0 0 6px;
font-size: 17px;
font-weight: 900;
color: #2a1a22;
letter-spacing: .02em;
}
.iroha-flow__step p {
margin: 0;
font-size: 14px;
line-height: 1.85;
font-weight: 600;
color: #1f0f15;
}
@media (max-width: 820px) {
.iroha-flow::before { left: 28px; }
.iroha-flow__step { padding: 22px 20px 22px 80px; }
.iroha-flow__step::before { width: 46px; height: 46px; font-size: 18px; left: 12px; }
}
/* ---------- DIRECT CONTACT INFO CARDS ---------- */
.iroha-contact-direct {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 980px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.iroha-contact-direct__card {
list-style: none;
background: #ffffff;
border-radius: 22px;
padding: 30px 24px 26px;
border: 2px solid #ffe3ea;
box-shadow: 0 20px 44px -22px rgba(232, 83, 123, .26);
text-align: center;
transition: transform .4s, box-shadow .4s, border-color .4s;
min-width: 0;
}
.iroha-contact-direct__card:hover {
transform: translateY(-5px);
border-color: #ffb6c9;
box-shadow: 0 28px 52px -22px rgba(232, 83, 123, .34);
}
.iroha-contact-direct__card::before,
.iroha-contact-direct__card::after { display: none !important; }
.iroha-contact-direct__label {
display: inline-block;
padding: 5px 18px;
border-radius: 999px;
background: linear-gradient(135deg, #ff4f77, #ff87a5);
color: #ffffff;
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
margin-bottom: 16px;
}
.iroha-contact-direct__value {
display: block;
margin: 0 0 10px;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
font-size: clamp(18px, 2vw, 24px);
font-weight: 900;
color: #c8375d !important;
text-decoration: none !important;
border-bottom: none !important;
letter-spacing: .02em;
word-break: break-all;
}
.iroha-contact-direct__value:hover { color: #ff4f77 !important; }
.iroha-contact-direct__value--plain { color: #2a1a22 !important; }
.iroha-contact-direct__note {
display: block;
font-size: 12.5px;
color: #6b5158;
font-weight: 600;
letter-spacing: .04em;
}
/* ---------- CONTACT FORM (CF7) ---------- */
.iroha-contact-form {
max-width: 780px;
margin: 0 auto;
background: #ffffff;
border: 2px solid #ffe3ea;
border-radius: 28px;
padding: 48px 44px;
box-shadow: 0 28px 54px -24px rgba(232, 83, 123, .28),
0 10px 26px -16px rgba(232, 83, 123, .18);
}
.iroha-contact-form .wpcf7 { margin: 0; }
.iroha-contact-form form { margin: 0; }
.iroha-contact-form .iroha-form__row {
display: flex;
gap: 22px;
margin-bottom: 22px;
}
.iroha-contact-form .iroha-form__row--half > .iroha-form__field {
flex: 1 1 0;
min-width: 0;
}
.iroha-contact-form .iroha-form__field {
margin-bottom: 22px;
}
.iroha-contact-form .iroha-form__label {
display: block;
margin-bottom: 8px;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 14px;
color: #2a1a22;
letter-spacing: .04em;
}
.iroha-contact-form .iroha-form__req {
display: inline-block;
margin-left: 8px;
padding: 2px 10px;
border-radius: 999px;
background: linear-gradient(135deg, #ff4f77, #ff87a5);
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .08em;
vertical-align: middle;
}
.iroha-contact-form input[type="text"],
.iroha-contact-form input[type="email"],
.iroha-contact-form input[type="tel"],
.iroha-contact-form select,
.iroha-contact-form textarea {
width: 100% !important;
padding: 14px 18px !important;
border: 2px solid #ffe3ea !important;
border-radius: 14px !important;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
color: #1f0f15 !important;
background: #fffafc !important;
box-shadow: inset 0 2px 6px rgba(232, 83, 123, .06) !important;
transition: border-color .3s, box-shadow .3s, background .3s !important;
line-height: 1.6 !important;
}
.iroha-contact-form input[type="text"]:focus,
.iroha-contact-form input[type="email"]:focus,
.iroha-contact-form input[type="tel"]:focus,
.iroha-contact-form select:focus,
.iroha-contact-form textarea:focus {
outline: none !important;
border-color: #ff87a5 !important;
background: #ffffff !important;
box-shadow: 0 0 0 4px rgba(255, 138, 164, .18), inset 0 2px 6px rgba(232, 83, 123, .04) !important;
}
.iroha-contact-form textarea { resize: vertical; min-height: 0; }
.iroha-contact-form select {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #ff87a5 50%), linear-gradient(135deg, #ff87a5 50%, transparent 50%);
background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
background-size: 6px 6px;
background-repeat: no-repeat;
padding-right: 44px !important;
}
.iroha-contact-form .iroha-form__privacy {
margin: 24px 0 28px;
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
font-size: 13.5px;
font-weight: 600;
color: #1f0f15;
}
.iroha-contact-form .iroha-form__privacy .wpcf7-list-item {
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 10px;
}
.iroha-contact-form .iroha-form__privacy input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #ff4f77;
cursor: pointer;
}
.iroha-contact-form .iroha-form__privacy a {
color: #c8375d;
text-decoration: none;
border-bottom: 1px dashed rgba(200, 55, 93, .4);
}
.iroha-contact-form .iroha-form__submit {
text-align: center;
margin-top: 12px;
}
.iroha-contact-form input[type="submit"],
.iroha-contact-form button[type="submit"] {
display: inline-block !important;
padding: 18px 66px !important;
border: none !important;
border-radius: 999px !important;
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif !important;
font-size: 16px !important;
font-weight: 900 !important;
letter-spacing: .16em !important;
color: #ffffff !important;
background: linear-gradient(135deg, #ff4f77, #ff87a5) !important;
box-shadow: 0 18px 32px -12px rgba(232, 83, 123, .5) !important;
cursor: pointer !important;
transition: transform .3s, filter .3s, box-shadow .3s !important;
}
.iroha-contact-form input[type="submit"]:hover,
.iroha-contact-form button[type="submit"]:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 24px 40px -12px rgba(232, 83, 123, .6) !important;
}
/* CF7 status/validation messages */
.iroha-contact-form .wpcf7-not-valid-tip {
color: #c8375d !important;
font-size: 12.5px !important;
font-weight: 700 !important;
margin-top: 6px;
}
.iroha-contact-form .wpcf7-response-output {
margin: 20px 0 0 !important;
padding: 14px 18px !important;
border-radius: 14px !important;
font-size: 13.5px !important;
font-weight: 700 !important;
text-align: center !important;
}
@media (max-width: 820px) {
.iroha-contact-direct { grid-template-columns: 1fr !important; }
.iroha-contact-form { padding: 34px 22px; border-radius: 22px; }
.iroha-contact-form .iroha-form__row { flex-direction: column; gap: 0; margin-bottom: 0; }
.iroha-contact-form input[type="submit"],
.iroha-contact-form button[type="submit"] { padding: 16px 44px !important; font-size: 15px !important; }
}
/* ---------- CONTACT ---------- */
.iroha-about-page__section--contact {
background: #ffffff;
max-width: none;
padding: 14px 24px 18px;
margin: 0 !important;
position: relative;
}
.iroha-about-page__section--contact::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 15% 30%, rgba(255, 201, 215, .45) 0%, transparent 45%),
radial-gradient(circle at 85% 70%, rgba(253, 227, 184, .45) 0%, transparent 45%);
filter: blur(60px);
pointer-events: none;
}
.iroha-about-page__contact-lead {
text-align: center;
font-size: 14px;
line-height: 1.8;
font-weight: 600;
color: #1f0f15;
margin: 0 0 14px;
position: relative;
z-index: 2;
}
.iroha-about-page__contact-cta {
display: flex;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
position: relative;
z-index: 2;
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 980px;
}
.iroha-about-page__contact-cta li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
flex: 0 0 auto;
}
/* ---------- Utilities ---------- */
.iroha-hide-sm { display: inline; }
@media (max-width: 820px) {
.iroha-about-page { margin: 0 auto; width: 100%; }
.iroha-about-page__hero { padding: 6px 20px 50px; }
.iroha-about-page__intro { padding: 48px 20px 24px; }
.iroha-about-page__catch { font-size: 20px; line-height: 1.7; }
.iroha-about-page__lead { font-size: 14px; line-height: 1.95; }
.iroha-about-page__btn-row { flex-direction: column; align-items: center; gap: 14px; }
.iroha-about-page__btn { width: 100%; max-width: 320px; }
.iroha-about-page__section { margin: 44px auto; padding: 0 18px; }
.iroha-about-page__section--intervention { padding: 28px 18px 28px !important; }
.iroha-about-page__section--outline { padding: 44px 18px 50px !important; }
.iroha-about-page__section--access { padding: 44px 18px 50px !important; }
.iroha-inter-list { grid-template-columns: 1fr; gap: 28px 16px; }
.iroha-inter-item { padding: 38px 22px 22px; }
.iroha-inter-item__title { min-height: 0; font-size: 16px; }
.iroha-inter-item ul li { font-size: 13.5px; }
.iroha-about-page__wave { height: 60px; }
.iroha-outline { padding: 12px 20px; }
.iroha-outline__row { flex-direction: column; gap: 6px; padding: 12px 0; }
.iroha-outline__row dt { flex: auto; font-size: 13px; }
.iroha-outline__row dd { font-size: 13.5px; }
.iroha-access { grid-template-columns: 1fr; gap: 22px; }
.iroha-about-page__section--contact { padding: 60px 20px 80px; margin-top: 56px; }
.iroha-about-page__contact-cta { flex-direction: column; align-items: center; }
.iroha-hide-sm { display: none; }
}
/* ===== Subpage shell hosting injected hero header (mirror of front page) ===== */
/* Hoist hero CSS variables so iroha-hero.css gradients work outside .iroha-hero scope */
.iroha-subhero,
:root {
--iro-pink: #e8537b;
--iro-pink-soft: #ffd6e1;
--iro-pink-bg: #fff5f8;
--iro-yellow: #ffd96b;
--iro-ink: #2a1820;
--iro-ink-soft: #6b5560;
--iro-shadow-sm: 0 6px 18px rgba(232,83,123,.14);
--iro-shadow-md: 0 20px 52px -14px rgba(232,83,123,.34);
--iro-ease: cubic-bezier(.2,.8,.2,1);
}
.iroha-subhero {
position: relative;
z-index: 50;
padding: 18px 0 0;
background: transparent;
}
/* Hide Cocoon's fixed mobile footer button bar on every subpage (matches home) */
body:not(.home) .mobile-footer-menu-buttons,
body:not(.home) .mobile-menu-buttons,
body:not(.home) .navi-footer,
body:not(.home) #navi-footer { display: none !important; }
/* Hide original glass-pill nav site-wide — replaced by injected hero header */
.iroha-about-page__topbar { display: none !important; }
/* Fix Cocoon wrappers so .iroha-about-page can break out cleanly + sidebar hidden */
body:not(.home) #container,
body:not(.home) #main,
body:not(.home) .main,
body:not(.home) #wrap,
body:not(.home) .wrap,
body:not(.home) .content,
body:not(.home) .content-in,
body:not(.home) article.article,
body:not(.home) .entry-content,
body:not(.home) .post-content {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body:not(.home) #sidebar,
body:not(.home) .sidebar { display: none !important; }
@media (max-width: 820px) {
/* Kill horizontal scroll on subpages */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
/* Subhero shell — hide its desktop padding on mobile so mobilebar floats */
.iroha-subhero { padding: 0 !important; background: transparent !important; }
/* Neutralize 100vw breakout on mobile — parent is now full width */
html body .iroha-about-page {
width: 100% !important;
max-width: 100% !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow-x: hidden !important;
padding-top: 60px !important;
}
html body .iroha-about-page * { max-width: 100%; }
/* Hide injected desktop hero header on mobile (mobilebar takes over) */
html body .iroha-subhero .iroha-hero__header { display: none !important; }
}
@media (min-width: 821px) {
/* On desktop hide the mobile bar/drawer so only hero header shows */
html body .iroha-subhero .iroha-mobilebar { display: none !important; }
html body .iroha-subhero .iroha-mobile-drawer { display: none !important; }
}
/* ============================================================
About page — mobile fixes (charafix)
Scope: body.page-id-* / sub page only (uses .iroha-about-page__*)
Added: 2026-04-15
============================================================ */
@media (max-width: 820px) {
/* (1) Hero wave: pumpkin & clover — prevent overlap with breadcrumb */
.iroha-about-page__wave-char {
width: 72px !important;
bottom: -14px !important;
}
.iroha-about-page__wave-char--pumpkin { display: none !important; }
.iroha-about-page__wave-char--clover { right: 2% !important; }
/* (2) Intro character (blueberry) — pop ABOVE the blue intro box */
.iroha-about-page__intro { overflow: visible !important; }
.iroha-about-chara--intro {
top: -58px !important;
bottom: auto !important;
right: 8px !important;
width: 78px !important;
z-index: 5 !important;
}
/* (3) Intro photo — center the shifted image */
.iroha-intro-photos .iroha-intro-photo--b {
left: 0 !important;
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
.iroha-intro-photos--row .iroha-intro-photo--b {
left: 0 !important;
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* (4) INTERVENTION — keep only the apple (intervention-r) and pin to bottom-right */
.iroha-about-chara--intervention { display: none !important; }
.iroha-about-page__section--intervention { position: relative; }
.iroha-about-chara--intervention-r {
position: absolute !important;
top: auto !important;
left: auto !important;
right: 10px !important;
bottom: 10px !important;
width: 80px !important;
z-index: 3 !important;
}
}
/* About mobile — enlarge access bear */
@media (max-width: 820px) {
.iroha-about-chara--access {
width: 130px !important;
bottom: 10px !important;
left: 10px !important;
}
}
/* About mobile — hide intro pear character */
@media (max-width: 820px) {
.iroha-about-chara--intro { display: none !important; }
}
/* About desktop — raise hero wave characters higher */
@media (min-width: 821px) {
.iroha-about-page__wave-char { bottom: 40px !important; }
}
/* About desktop — pin intervention apple to bottom-right of section */
@media (min-width: 821px) {
.iroha-about-page__section--intervention { position: relative !important; }
.iroha-about-chara--intervention-r {
position: absolute !important;
top: auto !important;
left: auto !important;
right: 24px !important;
bottom: 24px !important;
width: clamp(110px, 11vw, 150px) !important;
}
}
/* About desktop — nudge intro pear slightly downward */
@media (min-width: 821px) {
.iroha-about-chara--intro {
display: none !important;
}
}
/* About mobile — show BOTH hero wave characters (pumpkin + clover) */
@media (max-width: 820px) {
.iroha-about-page__wave-char--pumpkin,
.iroha-about-page__wave-char--clover {
display: block !important;
width: 68px !important;
bottom: -10px !important;
z-index: 3 !important;
}
.iroha-about-page__wave-char--pumpkin { left: 2% !important; right: auto !important; }
.iroha-about-page__wave-char--clover { right: 2% !important; left: auto !important; }
}
/* ============================================================
About hero — match the homepage hero look
(no ellipse photo; only background, confetti dots, wave, chars)
============================================================ */
.iroha-about-page__hero {
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
radial-gradient(ellipse 50% 50% at 20% 90%, rgba(206,236,203,.5), transparent 70%),
radial-gradient(ellipse 60% 50% at 85% 95%, rgba(255,208,221,.55), transparent 70%),
linear-gradient(180deg, #fff 0%, #fff5f8 100%) !important;
background-color: transparent !important;
padding-bottom: 160px !important;
padding-top: 30px !important;
}
/* Confetti dots (::after holds them as radial-gradients) */
.iroha-about-page__hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background-image:
radial-gradient(circle at 10% 18%, #ffb8cc 0 5px, transparent 6px),
radial-gradient(circle at 22% 55%, #ffd96b 0 4px, transparent 5px),
radial-gradient(circle at 18% 82%, #a5d4ef 0 5px, transparent 6px),
radial-gradient(circle at 40% 25%, #b6dca7 0 4px, transparent 5px),
radial-gradient(circle at 58% 70%, #e8537b 0 4px, transparent 5px),
radial-gradient(circle at 72% 20%, #ffd96b 0 5px, transparent 6px),
radial-gradient(circle at 85% 50%, #b68be3 0 4px, transparent 5px),
radial-gradient(circle at 92% 80%, #ff8aa4 0 5px, transparent 6px);
background-repeat: no-repeat;
}
/* Use the existing pumpkin/clover IMG tags as the homepage-style chars */
.iroha-about-page__wave-char {
position: absolute !important;
z-index: 6 !important;
pointer-events: none;
}
.iroha-about-page__wave-char--pumpkin {
/* replace pumpkin -> homepage clover (3.webp) */
content: url("/wp-content/uploads/iroha-chara/3.webp");
left: 4% !important;
right: auto !important;
bottom: 60px !important;
width: clamp(90px, 11vw, 150px) !important;
display: block !important;
filter: drop-shadow(0 14px 22px rgba(109, 178, 95, .35));
}
.iroha-about-page__wave-char--clover {
/* replace clover -> sunflower char */
content: url("/wp-content/uploads/iroha-chara/iroha-feat-char-sun.webp");
right: 4% !important;
left: auto !important;
bottom: 70px !important;
width: clamp(100px, 12vw, 170px) !important;
display: block !important;
filter: drop-shadow(0 14px 22px rgba(255, 196, 60, .4));
}
/* Mobile tweaks */
@media (max-width: 820px) {
.iroha-about-page__hero {
padding-bottom: 130px !important;
padding-top: 20px !important;
}
.iroha-about-page__wave-char--pumpkin {
width: 88px !important;
left: 3% !important;
bottom: 48px !important;
}
.iroha-about-page__wave-char--clover {
width: 100px !important;
right: 3% !important;
bottom: 54px !important;
}
}
/* About desktop — unify subhero bg with hero gradient (remove pink band) */
@media (min-width: 821px) {
body:not(.home) .iroha-subhero {
background: transparent !important;
background-image: none !important;
}
/* Wrap subhero+hero in the same radial gradient so it looks seamless */
body:not(.home) .iroha-about-page__hero {
margin-top: -80px !important;
padding-top: 110px !important;
}
}
/* About desktop — extend hero gradient up to page top (remove white band above logo) */
@media (min-width: 821px) {
body.page:not(.home),
body:not(.home) #container,
body:not(.home) #main,
body:not(.home) .main,
body:not(.home) #wrap,
body:not(.home) .wrap,
body:not(.home) .content,
body:not(.home) .content-in,
body:not(.home) article.article,
body:not(.home) .entry-content {
background: transparent !important;
}
body:not(.home) {
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
linear-gradient(180deg, #fff5f8 0%, #fff5f8 45%, #ffffff 100%) !important;
background-repeat: no-repeat !important;
background-size: 100% 760px !important;
background-position: top center !important;
background-color: #ffffff !important;
}
}
/* About desktop — force top gradient on html + kill white from .content and .iroha-about-page */
@media (min-width: 821px) {
html {
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
linear-gradient(180deg, #fff5f8 0%, #fff5f8 45%, #ffffff 100%) !important;
background-repeat: no-repeat !important;
background-size: 100% 760px !important;
background-position: top center !important;
background-color: #ffffff !important;
}
body:not(.home) .content,
body:not(.home) .iroha-about-page {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* About desktop — final fix: paint gradient on body with max specificity */
@media (min-width: 821px) {
html body.page:not(.home),
html body.single:not(.home),
html body:not(.home) {
background-color: #fff !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
linear-gradient(180deg, #fff5f8 0%, #fff5f8 45%, #ffffff 100%) !important;
background-repeat: no-repeat !important;
background-size: 100% 760px !important;
background-position: top center !important;
background-attachment: scroll !important;
}
}
/* ============================================================
/jihatsu/ page — replace existing hero with homepage-like header
Scope: body.page-id-45 only
Added: 2026-04-15
============================================================ */
body.page-id-45 .iroha-about-page__hero { display: none !important; }
/* Re-paint body with home-hero-style gradient like /about/ did, scoped */
@media (min-width: 821px) {
html body.page-id-45:not(.home) {
background-color: #fff !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
linear-gradient(180deg, #fff5f8 0%, #fff5f8 45%, #ffffff 100%) !important;
background-repeat: no-repeat !important;
background-size: 100% 760px !important;
background-position: top center !important;
}
}
@media (max-width: 820px) {
body.page-id-45 { background: #fff5f8 !important; }
}
/* Give the subhero a little bottom spacing and add decorative wave + chars */
body.page-id-45 .iroha-subhero {
position: relative;
padding-bottom: 120px !important;
}
body.page-id-45 .iroha-subhero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: clamp(60px, 7vw, 110px);
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
/* Characters: left clover (3.webp) + right sunflower (iroha-feat-char-sun) */
body.page-id-45 .iroha-subhero::before {
content: "";
position: absolute;
left: 4%;
bottom: 30px;
width: clamp(90px, 11vw, 150px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/3.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom left;
filter: drop-shadow(0 14px 22px rgba(109, 178, 95, .35));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 4.6s ease-in-out infinite;
}
/* Sunflower — inject via an extra wrapper attr */
body.page-id-45 .iroha-subhero .iroha-hero__header::after {
content: "";
position: absolute;
right: 4%;
bottom: -140px;
width: clamp(100px, 12vw, 170px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/iroha-feat-char-sun.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
filter: drop-shadow(0 14px 22px rgba(255, 196, 60, .4));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 5.2s ease-in-out infinite -1.4s;
}
body.page-id-45 .iroha-subhero .iroha-hero__header { position: relative; }
@media (max-width: 820px) {
body.page-id-45 .iroha-subhero { padding-bottom: 90px !important; }
body.page-id-45 .iroha-subhero::before {
width: 80px; left: 3%; bottom: 20px;
}
body.page-id-45 .iroha-subhero .iroha-hero__header::after {
width: 92px; right: 3%; bottom: -100px;
}
}
/* ============================================================
/jihatsu/ page — full body section styles
Scope: body.page-id-45 (児童発達支援)
Added: 2026-04-15
============================================================ */
body.page-id-45 .iroha-jihatsu {
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
color: #2a1a22;
line-height: 1.8;
}
body.page-id-45 .iroha-jihatsu *,
body.page-id-45 .iroha-jihatsu *::before,
body.page-id-45 .iroha-jihatsu *::after { box-sizing: border-box; }
/* ---- HERO ---- */
body.page-id-45 .iroha-jihatsu__hero {
position: relative;
padding: 40px 24px 90px;
text-align: center;
background: transparent;
}
body.page-id-45 .iroha-jihatsu__hero-inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
body.page-id-45 .iroha-jihatsu__en {
display: block;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
font-weight: 900;
font-size: clamp(26px, 4vw, 48px);
letter-spacing: .08em;
color: #2a1a22;
line-height: 1.1;
margin-bottom: 10px;
}
body.page-id-45 .iroha-jihatsu__title {
margin: 0;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 800;
font-size: clamp(16px, 1.8vw, 22px);
letter-spacing: .18em;
color: #c8375d;
}
body.page-id-45 .iroha-jihatsu__breadcrumb {
margin-top: 18px;
font-size: 12px;
color: #6b5158;
letter-spacing: .04em;
}
body.page-id-45 .iroha-jihatsu__breadcrumb a {
color: #6b5158;
text-decoration: none;
border-bottom: 1px dashed rgba(107, 81, 88, .4);
}
body.page-id-45 .iroha-jihatsu__sep { margin: 0 10px; color: #c8375d; }
body.page-id-45 .iroha-jihatsu__hero-wave {
position: absolute;
left: 0; right: 0; bottom: -2px;
width: 100%;
height: clamp(60px, 7vw, 110px);
display: block;
pointer-events: none;
z-index: 1;
}
/* ---- Section base ---- */
body.page-id-45 .iroha-jihatsu__section {
padding: 60px 24px;
position: relative;
}
body.page-id-45 .iroha-jihatsu__container {
max-width: 1080px;
margin: 0 auto;
}
body.page-id-45 .iroha-jihatsu__section--intro,
body.page-id-45 .iroha-jihatsu__section--program,
body.page-id-45 .iroha-jihatsu__section--flow {
background: #ffffff;
}
body.page-id-45 .iroha-jihatsu__section--features,
body.page-id-45 .iroha-jihatsu__section--schedule {
background: #fdeef0;
}
body.page-id-45 .iroha-jihatsu__wave {
display: block;
width: 100%;
height: clamp(50px, 6vw, 90px);
margin: 0;
position: relative;
z-index: 1;
}
body.page-id-45 .iroha-jihatsu__wave--pink { background: #ffffff; }
body.page-id-45 .iroha-jihatsu__wave--white { background: #fdeef0; }
/* ---- Section head ---- */
body.page-id-45 .iroha-jihatsu__head {
text-align: center;
margin-bottom: 36px;
}
body.page-id-45 .iroha-jihatsu__section-en {
display: block;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: clamp(20px, 2.6vw, 32px);
letter-spacing: .12em;
color: #2a1a22;
line-height: 1;
margin-bottom: 8px;
}
body.page-id-45 .iroha-jihatsu__section-ja {
margin: 0;
font-size: clamp(14px, 1.5vw, 18px);
letter-spacing: .14em;
color: #c8375d;
font-weight: 800;
}
/* ---- S1: Intro ---- */
body.page-id-45 .iroha-jihatsu__lead {
max-width: 780px;
margin: 0 auto 18px;
text-align: center;
font-size: 15px;
line-height: 2;
font-weight: 600;
color: #1f0f15;
}
body.page-id-45 .iroha-jihatsu__info {
max-width: 780px;
margin: 28px auto 0;
padding: 0;
background: #fff;
border: 2px solid #ffd6e1;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 14px 32px -18px rgba(232, 83, 123, .25);
}
body.page-id-45 .iroha-jihatsu__info-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 0;
padding: 16px 24px;
border-bottom: 1px dashed #ffd6e1;
}
body.page-id-45 .iroha-jihatsu__info-row:last-child { border-bottom: 0; }
body.page-id-45 .iroha-jihatsu__info-row dt {
font-weight: 800;
color: #c8375d;
letter-spacing: .1em;
font-size: 14px;
}
body.page-id-45 .iroha-jihatsu__info-row dd {
margin: 0;
font-size: 14px;
line-height: 1.8;
color: #2a1a22;
}
/* ---- S2: Features ---- */
body.page-id-45 .iroha-jihatsu__feature-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
body.page-id-45 .iroha-jihatsu__feature {
background: #ffffff;
border-radius: 24px;
padding: 28px 24px 24px;
text-align: center;
box-shadow: 0 14px 32px -18px rgba(232, 83, 123, .22);
border: 2px solid #ffe7ec;
position: relative;
}
body.page-id-45 .iroha-jihatsu__feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 999px;
background: linear-gradient(135deg, #ff8aa4, #e8537b);
color: #ffffff;
font-weight: 900;
font-size: 14px;
letter-spacing: .06em;
margin-bottom: 14px;
box-shadow: 0 8px 18px -6px rgba(232, 83, 123, .5);
}
body.page-id-45 .iroha-jihatsu__feature h3 {
margin: 0 0 10px;
font-size: 17px;
font-weight: 800;
color: #c8375d;
}
body.page-id-45 .iroha-jihatsu__feature p {
margin: 0;
font-size: 14px;
color: #2a1a22;
line-height: 1.8;
text-align: left;
}
/* ---- S3: Program ---- */
body.page-id-45 .iroha-jihatsu__program-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
body.page-id-45 .iroha-jihatsu__program {
background: #fff7fa;
border: 2px solid #ffe0e8;
border-radius: 20px;
padding: 24px 22px;
position: relative;
}
body.page-id-45 .iroha-jihatsu__program::before {
content: "";
position: absolute;
top: 14px;
left: 14px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #ffd96b;
box-shadow: 0 0 0 4px rgba(255, 217, 107, .3);
}
body.page-id-45 .iroha-jihatsu__program h3 {
margin: 0 0 8px 22px;
font-size: 16px;
font-weight: 800;
color: #c8375d;
}
body.page-id-45 .iroha-jihatsu__program p {
margin: 0;
font-size: 14px;
line-height: 1.8;
color: #2a1a22;
}
/* ---- S4: Schedule ---- */
body.page-id-45 .iroha-jihatsu__schedule-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
body.page-id-45 .iroha-jihatsu__schedule-col {
background: #ffffff;
border-radius: 24px;
padding: 26px 22px;
border: 2px solid #d9edfb;
box-shadow: 0 14px 32px -18px rgba(83, 150, 232, .22);
}
body.page-id-45 .iroha-jihatsu__schedule-title {
margin: 0 0 18px;
font-size: 16px;
font-weight: 800;
color: #2a1a22;
text-align: center;
letter-spacing: .06em;
}
body.page-id-45 .iroha-jihatsu__schedule-title small {
display: block;
font-size: 12px;
color: #6b5158;
margin-top: 4px;
font-weight: 600;
letter-spacing: .04em;
}
body.page-id-45 .iroha-jihatsu__timeline {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body.page-id-45 .iroha-jihatsu__timeline li {
display: grid;
grid-template-columns: 70px 1fr;
align-items: center;
gap: 14px;
background: #f3faff;
border-radius: 999px;
padding: 10px 18px;
border: 1px solid #d9edfb;
}
body.page-id-45 .iroha-jihatsu__timeline time {
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 14px;
color: #3a93d1;
letter-spacing: .04em;
text-align: right;
}
body.page-id-45 .iroha-jihatsu__timeline span {
font-size: 13px;
color: #2a1a22;
font-weight: 700;
}
/* ---- S5: Flow ---- */
body.page-id-45 .iroha-jihatsu__steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
body.page-id-45 .iroha-jihatsu__step {
background: #ffffff;
border-radius: 24px;
padding: 28px 22px 24px;
text-align: center;
border: 2px solid #ffe7ec;
box-shadow: 0 14px 32px -18px rgba(232, 83, 123, .22);
position: relative;
}
body.page-id-45 .iroha-jihatsu__step-num {
display: inline-block;
background: linear-gradient(135deg, #ff8aa4, #e8537b);
color: #ffffff;
font-weight: 900;
font-size: 12px;
letter-spacing: .12em;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 14px;
}
body.page-id-45 .iroha-jihatsu__step h3 {
margin: 0 0 10px;
font-size: 17px;
font-weight: 800;
color: #c8375d;
}
body.page-id-45 .iroha-jihatsu__step p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.8;
color: #2a1a22;
text-align: left;
}
body.page-id-45 .iroha-jihatsu__cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ff6f96, #e8537b);
color: #ffffff !important;
font-weight: 800;
letter-spacing: .06em;
padding: 12px 22px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 12px 26px -8px rgba(232, 83, 123, .55);
transition: transform .2s ease;
}
body.page-id-45 .iroha-jihatsu__cta:hover { transform: translateY(-2px); }
/* ---- Responsive (mobile) ---- */
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__section { padding: 44px 18px; }
body.page-id-45 .iroha-jihatsu__info-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 14px 18px;
}
body.page-id-45 .iroha-jihatsu__info-row dt { font-size: 13px; }
body.page-id-45 .iroha-jihatsu__info-row dd { font-size: 13px; }
body.page-id-45 .iroha-jihatsu__feature-list,
body.page-id-45 .iroha-jihatsu__program-list,
body.page-id-45 .iroha-jihatsu__schedule-wrap,
body.page-id-45 .iroha-jihatsu__steps {
grid-template-columns: 1fr;
gap: 16px;
}
body.page-id-45 .iroha-jihatsu__feature,
body.page-id-45 .iroha-jihatsu__program,
body.page-id-45 .iroha-jihatsu__schedule-col,
body.page-id-45 .iroha-jihatsu__step {
padding: 22px 18px;
}
body.page-id-45 .iroha-jihatsu__timeline li {
grid-template-columns: 60px 1fr;
gap: 10px;
padding: 9px 14px;
}
body.page-id-45 .iroha-jihatsu__timeline time { font-size: 13px; }
body.page-id-45 .iroha-jihatsu__timeline span { font-size: 12.5px; }
body.page-id-45 .iroha-jihatsu__hero { padding: 24px 18px 70px; }
body.page-id-45 .iroha-jihatsu__lead { font-size: 14px; }
}
/* Hide the old auto-injected fake hero that we display:none'd earlier — keep it hidden */
body.page-id-45 .iroha-about-page__hero { display: none !important; }
/* Keep the subhero header transparent and contiguous with body gradient */
body.page-id-45 .iroha-jihatsu__section--intro { margin-top: 0; }
/* ============================================================
/jihatsu/ hero — match /about/ hero visual layout
Scope: body.page-id-45 only
============================================================ */
body.page-id-45 .iroha-jihatsu__hero {
position: relative;
padding: 60px 24px 150px !important;
text-align: center;
background: transparent;
overflow: visible;
}
/* Big English title style matches .iroha-about-page__en */
body.page-id-45 .iroha-jihatsu__en {
display: block;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif;
font-weight: 900;
font-size: clamp(32px, 4vw, 56px) !important;
letter-spacing: .1em;
line-height: 1.1;
color: #2a1a22;
margin-bottom: 16px;
}
body.page-id-45 .iroha-jihatsu__title {
margin: 0;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 800;
font-size: clamp(18px, 1.8vw, 22px);
letter-spacing: .22em;
color: #c8375d;
}
body.page-id-45 .iroha-jihatsu__breadcrumb {
margin-top: 22px;
font-size: 12px;
color: #6b5158;
}
/* Decorative clover (left) and sunflower (right) like about */
body.page-id-45 .iroha-jihatsu__hero::before {
content: "";
position: absolute;
left: 4%;
bottom: 30px;
width: clamp(90px, 11vw, 150px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/3.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
filter: drop-shadow(0 14px 22px rgba(109, 178, 95, .35));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 4.6s ease-in-out infinite;
}
body.page-id-45 .iroha-jihatsu__hero::after {
content: "";
position: absolute;
right: 4%;
bottom: 40px;
width: clamp(100px, 12vw, 170px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/iroha-feat-char-sun.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
filter: drop-shadow(0 14px 22px rgba(255, 196, 60, .4));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 5.2s ease-in-out infinite -1.4s;
}
/* Hide the duplicate subhero wave/chars we added earlier for /jihatsu/ */
body.page-id-45 .iroha-subhero { padding-bottom: 0 !important; }
body.page-id-45 .iroha-subhero::after,
body.page-id-45 .iroha-subhero::before,
body.page-id-45 .iroha-subhero .iroha-hero__header::after { content: none !important; display: none !important; }
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__hero {
padding: 40px 18px 110px !important;
}
body.page-id-45 .iroha-jihatsu__hero::before {
width: 72px;
left: 3%;
bottom: 22px;
}
body.page-id-45 .iroha-jihatsu__hero::after {
width: 84px;
right: 3%;
bottom: 30px;
}
}
/* ============================================================
/jihatsu/ hero — decorative blob shapes (home-style)
Scope: body.page-id-45 only
============================================================ */
body.page-id-45 .iroha-jihatsu__hero { position: relative; }
body.page-id-45 .iroha-jihatsu__blobs {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
body.page-id-45 .iroha-jihatsu-blob {
position: absolute;
opacity: .75;
filter: blur(1px) drop-shadow(0 14px 28px rgba(232,83,123,.08));
mix-blend-mode: multiply;
animation: jihatsu-blob-drift 18s ease-in-out infinite;
}
@keyframes jihatsu-blob-drift {
0%, 100% { translate: 0 0; }
33% { translate: 12px -14px; }
66% { translate: -10px 10px; }
}
body.page-id-45 .iroha-jihatsu-blob--1 { top: 2%; left: 20%; width: 170px; animation-delay: -1s; transform: rotate(12deg); }
body.page-id-45 .iroha-jihatsu-blob--2 { top: 6%; right: 18%; width: 200px; animation-delay: -5s; transform: rotate(-10deg); }
body.page-id-45 .iroha-jihatsu-blob--3 { top: 32%; left: 2%; width: 220px; animation-delay: -9s; transform: rotate(18deg); }
body.page-id-45 .iroha-jihatsu-blob--4 { top: 26%; right: 3%; width: 240px; animation-delay: -3s; transform: rotate(-14deg); }
body.page-id-45 .iroha-jihatsu-blob--5 { bottom: 22%; left: 16%; width: 160px; animation-delay: -7s; transform: rotate(8deg); }
body.page-id-45 .iroha-jihatsu-blob--6 { bottom: 16%; right: 14%; width: 180px; animation-delay: -11s; transform: rotate(-6deg); }
body.page-id-45 .iroha-jihatsu-blob--7 { top: 50%; left: 44%; width: 130px; opacity: .4; animation-delay: -13s; transform: rotate(22deg); }
body.page-id-45 .iroha-jihatsu-blob--8 { bottom: 40%; left: 38%; width: 110px; opacity: .45; animation-delay: -6s; transform: rotate(-16deg); }
/* Keep inner content above blobs */
body.page-id-45 .iroha-jihatsu__hero-inner { position: relative; z-index: 2; }
body.page-id-45 .iroha-jihatsu__hero::before,
body.page-id-45 .iroha-jihatsu__hero::after { z-index: 3; }
body.page-id-45 .iroha-jihatsu__hero-wave { z-index: 4; }
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu-blob--1 { width: 120px; }
body.page-id-45 .iroha-jihatsu-blob--2 { width: 140px; }
body.page-id-45 .iroha-jihatsu-blob--3 { width: 150px; }
body.page-id-45 .iroha-jihatsu-blob--4 { width: 160px; }
body.page-id-45 .iroha-jihatsu-blob--5 { width: 110px; }
body.page-id-45 .iroha-jihatsu-blob--6 { width: 120px; }
body.page-id-45 .iroha-jihatsu-blob--7 { display: none; }
body.page-id-45 .iroha-jihatsu-blob--8 { display: none; }
}
/* ============================================================
/jihatsu/ — unify subhero+hero background (remove seam line)
============================================================ */
body.page-id-45 .iroha-jihatsu__hero {
background: transparent !important;
background-image: none !important;
margin-top: -40px !important;
padding-top: 80px !important;
}
@media (min-width: 821px) {
body.page-id-45 .iroha-subhero {
background: transparent !important;
background-image: none !important;
}
}
/* /jihatsu/ — kill white background on .content and .iroha-jihatsu so body gradient shows through */
@media (min-width: 821px) {
body.page-id-45 .content,
body.page-id-45 .content-in,
body.page-id-45 .iroha-jihatsu,
body.page-id-45 article.article,
body.page-id-45 article.page,
body.page-id-45 .entry-content,
body.page-id-45 #main,
body.page-id-45 .main,
body.page-id-45 #container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
html body.page-id-45 { background-size: 100% 900px !important; }
}
@media (max-width: 820px) {
body.page-id-45 .content,
body.page-id-45 .content-in,
body.page-id-45 .iroha-jihatsu,
body.page-id-45 article.article,
body.page-id-45 article.page,
body.page-id-45 .entry-content,
body.page-id-45 #main,
body.page-id-45 .main,
body.page-id-45 #container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* /jihatsu/ — solid pink header background */
@media (min-width: 821px) {
html body.page-id-45 {
background-color: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.45), transparent 60%),
linear-gradient(180deg, #fdeef0 0%, #fdeef0 55%, #ffffff 100%) !important;
background-size: 100% 820px !important;
background-repeat: no-repeat !important;
background-position: top center !important;
}
}
@media (max-width: 820px) {
body.page-id-45 { background: #fdeef0 !important; }
}
/* /jihatsu/ — hero section itself gets solid pink bg */
body.page-id-45 .iroha-jihatsu__hero {
background: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.45), transparent 60%),
linear-gradient(180deg, #fdeef0 0%, #fdeef0 100%) !important;
}
/* /jihatsu/ mobile — push title down and fit to viewport */
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__hero {
padding-top: 180px !important;
padding-bottom: 110px !important;
}
body.page-id-45 .iroha-jihatsu__en {
font-size: clamp(22px, 7vw, 30px) !important;
line-height: 1.2 !important;
padding: 0 12px;
}
body.page-id-45 .iroha-jihatsu__title {
font-size: 14px !important;
}
}
/* /jihatsu/ — force kill white backgrounds above hero (max specificity) */
html body.page-id-45 .content,
html body.page-id-45 .content-in,
html body.page-id-45 #content,
html body.page-id-45 div.content,
html body.page-id-45 div.content-in,
html body.page-id-45 div.wrap,
html body.page-id-45 #wrap {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* /jihatsu/ — hide hero clover and sunflower chars */
body.page-id-45 .iroha-jihatsu__hero::before,
body.page-id-45 .iroha-jihatsu__hero::after { content: none !important; display: none !important; }
/* /jihatsu/ — hero: shiba (left) + rabbit (right) */
body.page-id-45 .iroha-jihatsu__hero::before {
content: "" !important;
display: block !important;
position: absolute;
left: 4%;
bottom: 30px;
width: clamp(140px, 16vw, 220px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/jihatsu-left-shiba.png");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
filter: drop-shadow(0 14px 22px rgba(200, 130, 60, .3));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 4.6s ease-in-out infinite;
}
body.page-id-45 .iroha-jihatsu__hero::after {
content: "" !important;
display: block !important;
position: absolute;
right: 4%;
bottom: 40px;
width: clamp(140px, 16vw, 220px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/jihatsu-right-rabbit.png");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
filter: drop-shadow(0 14px 22px rgba(180, 180, 180, .35));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 5.2s ease-in-out infinite -1.4s;
}
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__hero::before { width: 110px; left: 2%; bottom: 50px; }
body.page-id-45 .iroha-jihatsu__hero::after { width: 110px; right: 2%; bottom: 55px; }
}
/* subpages — match home contact button size on mobile */
@media (max-width: 820px) {
body:not(.home) .iroha-contact-list li {
max-width: 300px !important;
width: 100% !important;
}
body:not(.home) .iroha-contact-imgbtn {
max-width: 300px !important;
width: 100% !important;
height: 100px !important;
}
body:not(.home) .iroha-contact-imgbtn img {
max-width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* ============================================================
/houkago/ page — clean pink header, no title, no chars
Scope: body.page-id-46 only
============================================================ */
/* Make hero a short pink band with wave bottom */
body.page-id-46 .iroha-about-page__hero {
background: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.45), transparent 60%),
linear-gradient(180deg, #fdeef0 0%, #fdeef0 100%) !important;
padding: 8px 24px 70px !important;
min-height: 0;
position: relative;
}
/* Shared body pink gradient (like jihatsu) */
@media (min-width: 821px) {
html body.page-id-46 {
background-color: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.45), transparent 60%),
linear-gradient(180deg, #fdeef0 0%, #fdeef0 55%, #ffffff 100%) !important;
background-size: 100% 560px !important;
background-repeat: no-repeat !important;
background-position: top center !important;
}
body.page-id-46 .iroha-subhero { background: transparent !important; background-image: none !important; }
html body.page-id-46 .content,
html body.page-id-46 .content-in,
html body.page-id-46 article.article,
html body.page-id-46 article.page,
html body.page-id-46 .entry-content,
html body.page-id-46 #main,
html body.page-id-46 .main,
html body.page-id-46 #container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
@media (max-width: 820px) {
html body.page-id-46 .content,
html body.page-id-46 .content-in,
html body.page-id-46 article.article,
html body.page-id-46 article.page,
html body.page-id-46 .entry-content,
html body.page-id-46 #main,
html body.page-id-46 .main,
html body.page-id-46 #container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
body.page-id-46 { background: #fdeef0 !important; }
body.page-id-46 .iroha-about-page__hero { padding: 6px 18px 50px !important; min-height: 0; }
}
/* /houkago/ — extend pink body gradient behind subhero to kill seam */
@media (min-width: 821px) {
html body.page-id-46 {
background-size: 100% 520px !important;
}
body.page-id-46 .iroha-about-page__hero {
margin-top: -60px !important;
padding-top: 70px !important;
}
}
/* /jihatsu/ — CONTACT section pink background */
body.page-id-45 .tc-contact.iroha-subfoot-contact,
body.page-id-45 .iroha-subfoot-contact {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
}
body.page-id-45 .iroha-about-page__wave--into-subfoot {
background: #ffffff !important;
}
body.page-id-45 .iroha-about-page__wave--into-subfoot path {
fill: #fdeef0 !important;
}
/* /houkago/ — CONTACT section pink background */
body.page-id-46 .tc-contact.iroha-subfoot-contact,
body.page-id-46 .iroha-subfoot-contact {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot {
background: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot path {
fill: #fdeef0 !important;
}
/* ============================================================
/houkago/ page — full body section styles
Scope: body.page-id-46
============================================================ */
body.page-id-46 .iroha-houkago {
font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
color: #2a1a22;
line-height: 1.8;
}
body.page-id-46 .iroha-houkago *,
body.page-id-46 .iroha-houkago *::before,
body.page-id-46 .iroha-houkago *::after { box-sizing: border-box; }
body.page-id-46 .iroha-houkago__section {
padding: 60px 24px;
position: relative;
}
body.page-id-46 .iroha-houkago__container {
max-width: 1080px;
margin: 0 auto;
}
body.page-id-46 .iroha-houkago__section--intro,
body.page-id-46 .iroha-houkago__section--approach,
body.page-id-46 .iroha-houkago__section--schedule {
background: #ffffff;
}
body.page-id-46 .iroha-houkago__section--kyotaku,
body.page-id-46 .iroha-houkago__section--guide,
body.page-id-46 .iroha-houkago__section--flow {
background: #fdeef0;
}
body.page-id-46 .iroha-houkago__wave {
display: block;
width: 100%;
height: clamp(50px, 6vw, 90px);
margin: 0;
position: relative;
z-index: 1;
}
body.page-id-46 .iroha-houkago__wave--pink { background: #ffffff; }
body.page-id-46 .iroha-houkago__wave--white { background: #fdeef0; }
/* Section head */
body.page-id-46 .iroha-houkago__head {
text-align: center;
margin-bottom: 32px;
}
body.page-id-46 .iroha-houkago__tag {
display: inline-block;
background: #fff;
border: 2px solid #ffd6e1;
color: #c8375d;
padding: 6px 18px;
border-radius: 999px;
font-weight: 800;
font-size: 13px;
letter-spacing: .1em;
margin-bottom: 14px;
}
body.page-id-46 .iroha-houkago__section-en {
display: block;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: clamp(22px, 2.8vw, 36px);
letter-spacing: .12em;
color: #2a1a22;
line-height: 1;
margin-bottom: 8px;
}
body.page-id-46 .iroha-houkago__section-ja {
margin: 0;
font-size: clamp(16px, 1.7vw, 20px);
letter-spacing: .12em;
color: #c8375d;
font-weight: 800;
}
body.page-id-46 .iroha-houkago__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
body.page-id-46 .iroha-houkago__dots span {
width: 8px;
height: 8px;
border-radius: 50%;
}
body.page-id-46 .iroha-houkago__dots span:nth-child(1) { background: #ff8aa4; }
body.page-id-46 .iroha-houkago__dots span:nth-child(2) { background: #ffb467; }
body.page-id-46 .iroha-houkago__dots span:nth-child(3) { background: #ffd96b; }
body.page-id-46 .iroha-houkago__dots span:nth-child(4) { background: #8fd19e; }
body.page-id-46 .iroha-houkago__dots span:nth-child(5) { background: #6eb7e8; }
body.page-id-46 .iroha-houkago__dots span:nth-child(6) { background: #b68be3; }
body.page-id-46 .iroha-houkago__lead {
max-width: 820px;
margin: 0 auto 18px;
text-align: center;
font-size: 15px;
line-height: 2;
font-weight: 600;
color: #1f0f15;
}
/* S2: kyotaku special card */
body.page-id-46 .iroha-houkago__kyotaku-card {
max-width: 860px;
margin: 0 auto;
background: #f3faff;
border: 3px solid #a5d4ef;
border-radius: 28px;
padding: 40px 36px;
box-shadow: 0 18px 40px -22px rgba(83, 150, 232, .3);
position: relative;
}
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__head { margin-bottom: 20px; }
/* S3: APPROACH 5-domain diagram */
body.page-id-46 .iroha-houkago__approach-diagram {
position: relative;
max-width: 780px;
margin: 40px auto 0;
aspect-ratio: 1 / 0.75;
}
body.page-id-46 .iroha-houkago__approach-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(130px, 18vw, 180px);
height: clamp(130px, 18vw, 180px);
border-radius: 50%;
background: linear-gradient(135deg, #ff8aa4, #e8537b);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: clamp(18px, 2vw, 24px);
letter-spacing: .1em;
text-align: center;
line-height: 1.4;
box-shadow: 0 16px 40px -12px rgba(232, 83, 123, .55);
z-index: 2;
}
body.page-id-46 .iroha-houkago__approach-orbit { position: absolute; inset: 0; }
body.page-id-46 .iroha-houkago__approach-item {
position: absolute;
width: clamp(130px, 16vw, 170px);
background: #fff;
border: 2px solid #ffe7ec;
border-radius: 999px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
font-size: 13px;
font-weight: 800;
color: #2a1a22;
box-shadow: 0 10px 24px -14px rgba(232, 83, 123, .3);
}
body.page-id-46 .iroha-houkago__approach-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
body.page-id-46 .iroha-houkago__approach-item--1 { top: 0; left: 50%; transform: translateX(-50%); }
body.page-id-46 .iroha-houkago__approach-item--2 { top: 30%; left: 0; }
body.page-id-46 .iroha-houkago__approach-item--3 { top: 30%; right: 0; }
body.page-id-46 .iroha-houkago__approach-item--4 { bottom: 0; left: 15%; }
body.page-id-46 .iroha-houkago__approach-item--5 { bottom: 0; right: 15%; }
/* S4: GUIDE info list */
body.page-id-46 .iroha-houkago__info {
max-width: 780px;
margin: 0 auto;
padding: 0;
background: #fff;
border-radius: 24px;
border: 2px solid #ffd6e1;
overflow: hidden;
box-shadow: 0 14px 32px -18px rgba(232, 83, 123, .25);
}
body.page-id-46 .iroha-houkago__info-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 0;
padding: 18px 26px;
border-bottom: 1px dashed #ffd6e1;
}
body.page-id-46 .iroha-houkago__info-row:last-child { border-bottom: 0; }
body.page-id-46 .iroha-houkago__info-row dt {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
color: #c8375d;
letter-spacing: .1em;
font-size: 14px;
}
body.page-id-46 .iroha-houkago__info-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 4px currentColor;
color: rgba(0,0,0,.04);
}
body.page-id-46 .iroha-houkago__info-row dd {
margin: 0;
font-size: 14px;
line-height: 1.9;
color: #2a1a22;
}
/* S5: Schedule */
body.page-id-46 .iroha-houkago__schedule-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 960px;
margin: 0 auto;
}
body.page-id-46 .iroha-houkago__schedule-col {
background: #ffffff;
border-radius: 24px;
padding: 0 0 24px;
overflow: hidden;
border: 2px solid #d9edfb;
box-shadow: 0 14px 32px -18px rgba(83, 150, 232, .22);
}
body.page-id-46 .iroha-houkago__schedule-tab {
margin: 0 0 20px;
padding: 14px 20px;
color: #fff;
font-weight: 800;
font-size: 16px;
letter-spacing: .08em;
text-align: center;
}
body.page-id-46 .iroha-houkago__schedule-col--weekday .iroha-houkago__schedule-tab {
background: linear-gradient(135deg, #8ec7ef, #6eb7e8);
}
body.page-id-46 .iroha-houkago__schedule-col--weekend .iroha-houkago__schedule-tab {
background: linear-gradient(135deg, #ffc58f, #ffb467);
}
body.page-id-46 .iroha-houkago__timeline {
list-style: none;
padding: 0 20px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body.page-id-46 .iroha-houkago__timeline li {
display: grid;
grid-template-columns: 80px 1fr;
align-items: center;
gap: 14px;
background: #f3faff;
border-radius: 999px;
padding: 10px 18px;
border: 1px solid #d9edfb;
}
body.page-id-46 .iroha-houkago__schedule-col--weekend .iroha-houkago__timeline li {
background: #fff8f0;
border-color: #ffe0c0;
}
body.page-id-46 .iroha-houkago__timeline time {
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 13px;
color: #3a93d1;
letter-spacing: .04em;
text-align: right;
}
body.page-id-46 .iroha-houkago__schedule-col--weekend .iroha-houkago__timeline time {
color: #e8893b;
}
body.page-id-46 .iroha-houkago__timeline span {
font-size: 13px;
color: #2a1a22;
font-weight: 700;
}
/* S6: FLOW steps */
body.page-id-46 .iroha-houkago__steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
body.page-id-46 .iroha-houkago__step {
background: #ffffff;
border: 2px solid #a5d4ef;
border-radius: 24px;
padding: 30px 22px 24px;
text-align: center;
box-shadow: 0 14px 32px -18px rgba(83, 150, 232, .22);
position: relative;
}
body.page-id-46 .iroha-houkago__step-num {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: #ffd96b;
color: #ffffff;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px -6px rgba(255, 180, 50, .6);
border: 3px solid #ffffff;
}
body.page-id-46 .iroha-houkago__step h3 {
margin: 8px 0 10px;
font-size: 17px;
font-weight: 800;
color: #c8375d;
}
body.page-id-46 .iroha-houkago__step p {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.8;
color: #2a1a22;
text-align: left;
}
body.page-id-46 .iroha-houkago__cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ff6f96, #e8537b);
color: #ffffff !important;
font-weight: 800;
letter-spacing: .06em;
padding: 10px 20px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 12px 26px -8px rgba(232, 83, 123, .55);
}
body.page-id-46 .iroha-houkago__cta:hover { transform: translateY(-2px); }
/* ---- Mobile ---- */
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section { padding: 44px 18px; }
body.page-id-46 .iroha-houkago__kyotaku-card { padding: 28px 22px; }
body.page-id-46 .iroha-houkago__lead { font-size: 14px; text-align: left; }
body.page-id-46 .iroha-houkago__info-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 20px;
}
body.page-id-46 .iroha-houkago__schedule-wrap,
body.page-id-46 .iroha-houkago__steps {
grid-template-columns: 1fr;
gap: 28px;
}
body.page-id-46 .iroha-houkago__timeline li {
grid-template-columns: 66px 1fr;
gap: 10px;
padding: 9px 14px;
}
body.page-id-46 .iroha-houkago__approach-diagram {
aspect-ratio: auto;
min-height: 520px;
}
body.page-id-46 .iroha-houkago__approach-item {
width: 130px;
font-size: 11.5px;
padding: 9px 12px;
}
body.page-id-46 .iroha-houkago__approach-item--1 { top: 2%; left: 50%; transform: translateX(-50%); }
body.page-id-46 .iroha-houkago__approach-item--2 { top: 30%; left: 0; }
body.page-id-46 .iroha-houkago__approach-item--3 { top: 30%; right: 0; }
body.page-id-46 .iroha-houkago__approach-item--4 { bottom: 8%; left: 5%; }
body.page-id-46 .iroha-houkago__approach-item--5 { bottom: 8%; right: 5%; }
body.page-id-46 .iroha-houkago__approach-center {
width: 130px;
height: 130px;
font-size: 17px;
}
}
/* /houkago/ — hero title block (like about) */
body.page-id-46 .iroha-houkago__hero {
position: relative;
padding: 60px 24px 150px;
text-align: center;
background: transparent;
}
body.page-id-46 .iroha-houkago__hero-inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
body.page-id-46 .iroha-houkago__en {
display: block;
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif;
font-weight: 900;
font-size: clamp(30px, 4vw, 52px);
letter-spacing: .1em;
color: #2a1a22;
line-height: 1.15;
margin-bottom: 14px;
}
body.page-id-46 .iroha-houkago__title {
margin: 0;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 800;
font-size: clamp(18px, 1.8vw, 22px);
letter-spacing: .22em;
color: #c8375d;
}
body.page-id-46 .iroha-houkago__breadcrumb {
margin-top: 22px;
font-size: 12px;
color: #6b5158;
}
body.page-id-46 .iroha-houkago__breadcrumb a {
color: #6b5158;
text-decoration: none;
border-bottom: 1px dashed rgba(107, 81, 88, .4);
}
body.page-id-46 .iroha-houkago__sep { margin: 0 10px; color: #c8375d; }
body.page-id-46 .iroha-houkago__hero-wave {
position: absolute;
left: 0; right: 0; bottom: -2px;
width: 100%;
height: clamp(60px, 7vw, 110px);
display: block;
pointer-events: none;
z-index: 1;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__hero {
padding: 140px 18px 110px;
}
body.page-id-46 .iroha-houkago__en {
font-size: clamp(22px, 7vw, 30px);
}
}
/* /houkago/ — hero: solid pink, seamless with subhero bar above */
body.page-id-46 .iroha-houkago__hero {
background: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.45), transparent 60%),
linear-gradient(180deg, #fdeef0 0%, #fdeef0 100%) !important;
padding: 80px 24px 150px !important;
margin-top: -40px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__hero {
padding: 180px 18px 110px !important;
}
}
/* Ensure subhero (the logo+nav bar) is also transparent so the pink above comes from body, and no seam */
body.page-id-46 .iroha-subhero {
background: transparent !important;
background-image: none !important;
}
/* /houkago/ — kill gradient variation inside hero, solid flat pink */
body.page-id-46 .iroha-houkago__hero {
background: #fdeef0 !important;
background-image: none !important;
}
@media (min-width: 821px) {
html body.page-id-46 {
background-color: #fdeef0 !important;
background-image: linear-gradient(180deg, #fdeef0 0%, #fdeef0 70%, #ffffff 100%) !important;
background-size: 100% 760px !important;
background-repeat: no-repeat !important;
background-position: top center !important;
}
}
/* /houkago/ — hero chars: cat (left) + squirrel (right) */
body.page-id-46 .iroha-houkago__hero { position: relative; }
body.page-id-46 .iroha-houkago__hero::before {
content: "";
position: absolute;
left: 4%;
bottom: 30px;
width: clamp(140px, 16vw, 220px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/houkago-left-cat.png");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
filter: drop-shadow(0 14px 22px rgba(200, 150, 60, .28));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 4.6s ease-in-out infinite;
}
body.page-id-46 .iroha-houkago__hero::after {
content: "";
position: absolute;
right: 4%;
bottom: 40px;
width: clamp(140px, 16vw, 220px);
aspect-ratio: 1 / 1;
background-image: url("/wp-content/uploads/iroha-chara/houkago-right-squirrel.png");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
filter: drop-shadow(0 14px 22px rgba(200, 130, 60, .3));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 5.2s ease-in-out infinite -1.4s;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__hero::before { width: 110px; left: 2%; bottom: 50px; }
body.page-id-46 .iroha-houkago__hero::after { width: 110px; right: 2%; bottom: 55px; }
}
/* /houkago/ — pastel dot/sparkle pattern on pink sections */
body.page-id-46 .iroha-houkago__section--kyotaku,
body.page-id-46 .iroha-houkago__section--guide,
body.page-id-46 .iroha-houkago__section--flow {
position: relative;
overflow: hidden;
}
body.page-id-46 .iroha-houkago__section--kyotaku::before,
body.page-id-46 .iroha-houkago__section--guide::before,
body.page-id-46 .iroha-houkago__section--flow::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(circle at 8% 16%, #ffb8cc 0 6px, transparent 7px),
radial-gradient(circle at 22% 60%, #ffd96b 0 5px, transparent 6px),
radial-gradient(circle at 16% 82%, #a5d4ef 0 6px, transparent 7px),
radial-gradient(circle at 38% 24%, #b6dca7 0 5px, transparent 6px),
radial-gradient(circle at 54% 72%, #ff8aa4 0 5px, transparent 6px),
radial-gradient(circle at 70% 18%, #ffd96b 0 6px, transparent 7px),
radial-gradient(circle at 84% 50%, #b68be3 0 5px, transparent 6px),
radial-gradient(circle at 92% 80%, #ff8aa4 0 6px, transparent 7px),
radial-gradient(circle at 46% 48%, #a5d4ef 0 4px, transparent 5px),
radial-gradient(circle at 30% 30%, #ff8aa4 0 4px, transparent 5px);
background-repeat: no-repeat;
opacity: .75;
}
body.page-id-46 .iroha-houkago__section--kyotaku > *,
body.page-id-46 .iroha-houkago__section--guide > *,
body.page-id-46 .iroha-houkago__section--flow > * { position: relative; z-index: 1; }
/* /houkago/ — CONTACT section background white (override earlier pink) */
body.page-id-46 .tc-contact.iroha-subfoot-contact,
body.page-id-46 .iroha-subfoot-contact {
background: #ffffff !important;
background-color: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot {
background: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot path {
fill: #ffffff !important;
}
/* ============================================================
/houkago/ — S2 居宅・外出 & S3 APPROACH SPECIAL DESIGN
Scope: body.page-id-46
============================================================ */
/* ---------- S2: 居宅・外出支援 ---------- */
body.page-id-46 .iroha-houkago__section--kyotaku {
background:
radial-gradient(ellipse 70% 50% at 18% 22%, rgba(165, 212, 239, .35), transparent 70%),
radial-gradient(ellipse 65% 50% at 82% 78%, rgba(255, 208, 221, .35), transparent 70%),
linear-gradient(180deg, #fef7f9 0%, #f3faff 100%) !important;
padding: 80px 24px 120px !important;
}
body.page-id-46 .iroha-houkago__section--kyotaku::before { display: none !important; }
body.page-id-46 .iroha-houkago__kyotaku-card {
position: relative;
max-width: 920px;
margin: 0 auto;
padding: 56px 56px 56px !important;
background: #ffffff;
border: none;
border-radius: 36px !important;
box-shadow:
0 30px 60px -24px rgba(120, 180, 230, .35),
0 8px 20px -10px rgba(232, 83, 123, .18);
overflow: visible !important;
}
/* Ribbon header */
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__head {
position: relative;
margin-bottom: 22px !important;
padding-bottom: 24px;
}
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__head::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 120px; height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #ff8aa4, #a5d4ef, #ffd96b, #8fd19e);
}
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__section-ja {
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: .12em;
position: relative;
}
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__section-ja::before,
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__section-ja::after {
content: "♡";
color: #ff8aa4;
font-size: 18px;
margin: 0 10px;
vertical-align: middle;
}
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__lead {
text-align: justify;
font-size: 15.5px;
line-height: 2.1;
max-width: 720px;
margin: 0 auto;
}
/* Floating chars around the card — apple TL, clover BL, sunflower TR, group BR */
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container {
position: relative;
}
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::before,
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::after,
body.page-id-46 .iroha-houkago__kyotaku-card::before,
body.page-id-46 .iroha-houkago__kyotaku-card::after {
content: "";
position: absolute;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
pointer-events: none;
filter: drop-shadow(0 12px 22px rgba(232, 83, 123, .22));
z-index: 3;
}
/* Apple — left of card, slightly above */
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::before {
width: clamp(110px, 12vw, 160px);
aspect-ratio: 1 / 1;
top: -50px;
left: -10px;
background-image: url("/wp-content/uploads/iroha-chara/houkago-apple.png");
animation: iroha-about-chara-bob 5s ease-in-out infinite;
}
/* Sunflower — right of card, top */
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::after {
width: clamp(110px, 12vw, 160px);
aspect-ratio: 1 / 1;
top: -60px;
right: -10px;
background-image: url("/wp-content/uploads/iroha-chara/houkago-sunflower.png");
animation: iroha-about-chara-bob 5.6s ease-in-out infinite -2s;
}
/* Clover — bottom left outside card */
body.page-id-46 .iroha-houkago__kyotaku-card::before {
width: clamp(120px, 14vw, 180px);
aspect-ratio: 1 / 1;
bottom: -70px;
left: -40px;
background-image: url("/wp-content/uploads/iroha-chara/houkago-clover.png");
animation: iroha-about-chara-bob 5.2s ease-in-out infinite -1s;
}
/* Group — bottom right outside card */
body.page-id-46 .iroha-houkago__kyotaku-card::after {
width: clamp(140px, 16vw, 200px);
aspect-ratio: 1 / 1;
bottom: -70px;
right: -40px;
background-image: url("/wp-content/uploads/iroha-chara/houkago-group.png");
animation: iroha-about-chara-bob 4.8s ease-in-out infinite -3s;
}
/* ---------- S3: APPROACH (5領域) special ---------- */
body.page-id-46 .iroha-houkago__section--approach {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 208, 221, .35), transparent 70%),
linear-gradient(180deg, #ffffff 0%, #fffaf2 100%) !important;
padding: 80px 24px 100px !important;
position: relative;
overflow: hidden;
}
/* subtle sparkles */
body.page-id-46 .iroha-houkago__section--approach::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 10% 20%, #ffd96b 0 4px, transparent 5px),
radial-gradient(circle at 20% 70%, #ff8aa4 0 4px, transparent 5px),
radial-gradient(circle at 80% 30%, #8fd19e 0 4px, transparent 5px),
radial-gradient(circle at 88% 78%, #a5d4ef 0 4px, transparent 5px),
radial-gradient(circle at 34% 12%, #b68be3 0 4px, transparent 5px),
radial-gradient(circle at 62% 88%, #ffb467 0 4px, transparent 5px);
background-repeat: no-repeat;
opacity: .55;
}
body.page-id-46 .iroha-houkago__section--approach > * { position: relative; z-index: 1; }
/* Fancy section head */
body.page-id-46 .iroha-houkago__section--approach .iroha-houkago__section-en {
background: linear-gradient(135deg, #ff8aa4 0%, #b68be3 50%, #6eb7e8 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 4px 10px rgba(232, 83, 123, .18));
}
/* Diagram: bigger, rounded hexagon orbit, animated */
body.page-id-46 .iroha-houkago__approach-diagram {
position: relative;
max-width: 900px;
margin: 50px auto 0;
aspect-ratio: 1 / 0.85;
}
body.page-id-46 .iroha-houkago__approach-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(160px, 22vw, 220px);
height: clamp(160px, 22vw, 220px);
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffc9d9, #ff8aa4 50%, #e8537b 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: .1em;
text-align: center;
line-height: 1.4;
box-shadow:
0 24px 50px -14px rgba(232, 83, 123, .55),
inset 0 2px 10px rgba(255, 255, 255, .5);
z-index: 3;
animation: houkago-ring-pulse 4.5s ease-in-out infinite;
}
body.page-id-46 .iroha-houkago__approach-center::before {
content: "";
position: absolute;
inset: -18px;
border-radius: 50%;
border: 3px dashed rgba(232, 83, 123, .35);
animation: houkago-ring-rotate 18s linear infinite;
}
@keyframes houkago-ring-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes houkago-ring-rotate {
to { transform: rotate(360deg); }
}
/* 5 orbit items — positioned around the center */
body.page-id-46 .iroha-houkago__approach-orbit { position: absolute; inset: 0; }
body.page-id-46 .iroha-houkago__approach-item {
position: absolute;
width: clamp(150px, 18vw, 200px);
background: #ffffff;
border: none;
border-radius: 20px;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
text-align: left;
font-size: 13.5px;
font-weight: 800;
color: #2a1a22;
box-shadow: 0 18px 36px -18px rgba(40, 40, 80, .28);
transition: transform .3s ease;
}
body.page-id-46 .iroha-houkago__approach-item:hover {
transform: translateY(-4px) scale(1.04);
}
body.page-id-46 .iroha-houkago__approach-item::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
border-radius: 22px;
background: var(--glow, transparent);
filter: blur(30px);
opacity: .4;
z-index: -1;
}
body.page-id-46 .iroha-houkago__approach-item strong { font-size: 13px; line-height: 1.35; }
body.page-id-46 .iroha-houkago__approach-dot {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), 0 0 0 5px rgba(0,0,0,.05);
}
/* Positioning: penta around center */
body.page-id-46 .iroha-houkago__approach-item--1 { top: 2%; left: 50%; transform: translateX(-50%); --glow: #ffc9d9; }
body.page-id-46 .iroha-houkago__approach-item--2 { top: 32%; left: 2%; --glow: #c9e8cf; }
body.page-id-46 .iroha-houkago__approach-item--3 { top: 32%; right: 2%; --glow: #ffd9b3; }
body.page-id-46 .iroha-houkago__approach-item--4 { bottom: 5%; left: 14%; --glow: #dac4f0; }
body.page-id-46 .iroha-houkago__approach-item--5 { bottom: 5%; right: 14%; --glow: #c6dff2; }
/* Connecting lines (pseudo) */
body.page-id-46 .iroha-houkago__approach-orbit::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 72%;
height: 72%;
transform: translate(-50%, -50%);
border: 2px dashed rgba(232, 83, 123, .22);
border-radius: 50%;
animation: houkago-ring-rotate 30s linear infinite reverse;
}
/* ---------- Mobile ---------- */
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--kyotaku { padding: 60px 18px 140px !important; }
body.page-id-46 .iroha-houkago__kyotaku-card { padding: 40px 24px !important; }
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::before {
width: 82px; top: -30px; left: -4px;
}
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::after {
width: 82px; top: -36px; right: -4px;
}
body.page-id-46 .iroha-houkago__kyotaku-card::before {
width: 96px; bottom: -48px; left: -16px;
}
body.page-id-46 .iroha-houkago__kyotaku-card::after {
width: 110px; bottom: -48px; right: -16px;
}
body.page-id-46 .iroha-houkago__kyotaku-card .iroha-houkago__lead {
text-align: left;
font-size: 14px;
line-height: 2;
}
body.page-id-46 .iroha-houkago__section--approach { padding: 60px 18px 80px !important; }
body.page-id-46 .iroha-houkago__approach-diagram {
aspect-ratio: auto;
min-height: 600px;
}
body.page-id-46 .iroha-houkago__approach-item {
width: 140px;
font-size: 12px;
padding: 12px 14px;
}
body.page-id-46 .iroha-houkago__approach-center {
width: 150px; height: 150px; font-size: 18px;
}
body.page-id-46 .iroha-houkago__approach-item--1 { top: 0; }
body.page-id-46 .iroha-houkago__approach-item--2 { top: 32%; left: 0; }
body.page-id-46 .iroha-houkago__approach-item--3 { top: 32%; right: 0; }
body.page-id-46 .iroha-houkago__approach-item--4 { bottom: 4%; left: 4%; }
body.page-id-46 .iroha-houkago__approach-item--5 { bottom: 4%; right: 4%; }
body.page-id-46 .iroha-houkago__approach-orbit::before {
width: 84%; height: 84%;
}
}
/* ============================================================
/houkago/ overrides: restore pink S2 bg + distribute chars
============================================================ */
/* Restore pink background for S2 */
body.page-id-46 .iroha-houkago__section--kyotaku {
background: #fdeef0 !important;
padding: 70px 24px 110px !important;
}
body.page-id-46 .iroha-houkago__section--kyotaku::before {
display: block !important;
}
/* Remove 4-char cluster in S2 container */
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::before,
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__container::after,
body.page-id-46 .iroha-houkago__kyotaku-card::before,
body.page-id-46 .iroha-houkago__kyotaku-card::after {
content: none !important;
display: none !important;
}
/* Distribute chars across sections */
/* S1 intro — apple at top-right */
body.page-id-46 .iroha-houkago__section--intro { position: relative; overflow: hidden; }
body.page-id-46 .iroha-houkago__section--intro::after {
content: "";
position: absolute;
top: 30px;
right: 3%;
width: clamp(90px, 10vw, 130px);
aspect-ratio: 1 / 1;
background: url("/wp-content/uploads/iroha-chara/houkago-apple.png") no-repeat center/contain;
filter: drop-shadow(0 12px 22px rgba(232, 83, 123, .22));
pointer-events: none;
z-index: 2;
animation: iroha-about-chara-bob 4.8s ease-in-out infinite;
}
/* S2 kyotaku — sunflower at bottom-left */
body.page-id-46 .iroha-houkago__section--kyotaku { position: relative; overflow: hidden; }
body.page-id-46 .iroha-houkago__section--kyotaku::after {
content: "";
position: absolute;
bottom: 20px;
left: 2%;
width: clamp(90px, 10vw, 130px);
aspect-ratio: 1 / 1;
background: url("/wp-content/uploads/iroha-chara/houkago-sunflower.png") no-repeat center/contain;
filter: drop-shadow(0 12px 22px rgba(255, 196, 60, .3));
pointer-events: none;
z-index: 2;
animation: iroha-about-chara-bob 5.4s ease-in-out infinite -1.2s;
}
/* Kill the default confetti pattern on S2 pink so only sunflower shows */
body.page-id-46 .iroha-houkago__section--kyotaku::before {
opacity: .5 !important;
}
/* S4 GUIDE — clover at top-left */
body.page-id-46 .iroha-houkago__section--guide { position: relative; overflow: hidden; }
body.page-id-46 .iroha-houkago__section--guide::after {
content: "";
position: absolute;
top: 40px;
left: 3%;
width: clamp(100px, 11vw, 140px);
aspect-ratio: 1 / 1;
background: url("/wp-content/uploads/iroha-chara/houkago-clover.png") no-repeat center/contain;
filter: drop-shadow(0 12px 22px rgba(120, 190, 100, .3));
pointer-events: none;
z-index: 2;
animation: iroha-about-chara-bob 5.1s ease-in-out infinite -2.3s;
}
/* S6 FLOW — group chars at bottom-right */
body.page-id-46 .iroha-houkago__section--flow { position: relative; overflow: hidden; }
body.page-id-46 .iroha-houkago__section--flow::after {
content: "";
position: absolute;
bottom: 30px;
right: 2%;
width: clamp(120px, 13vw, 170px);
aspect-ratio: 1 / 1;
background: url("/wp-content/uploads/iroha-chara/houkago-group.png") no-repeat center/contain;
filter: drop-shadow(0 14px 24px rgba(232, 83, 123, .25));
pointer-events: none;
z-index: 2;
animation: iroha-about-chara-bob 5.6s ease-in-out infinite -3.1s;
}
/* Mobile: smaller + keep inside viewport */
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--intro::after { width: 70px; top: 14px; right: 2%; }
body.page-id-46 .iroha-houkago__section--kyotaku::after { width: 70px; bottom: 14px; left: 2%; }
body.page-id-46 .iroha-houkago__section--guide::after { width: 76px; top: 14px; left: 2%; }
body.page-id-46 .iroha-houkago__section--flow::after { width: 90px; bottom: 14px; right: 2%; }
}
/* ============================================================
/houkago/ — APPROACH cute + compact, white bg
CONTACT bg white
============================================================ */
body.page-id-46 .iroha-houkago__section--approach {
background: #ffffff !important;
padding: 50px 24px 60px !important;
}
body.page-id-46 .iroha-houkago__section--approach::before {
opacity: .35 !important;
}
/* Diagram compact */
body.page-id-46 .iroha-houkago__approach-diagram {
aspect-ratio: 1 / 0.6 !important;
max-width: 820px !important;
margin: 28px auto 0 !important;
}
/* Center circle — softer and smaller */
body.page-id-46 .iroha-houkago__approach-center {
width: clamp(130px, 16vw, 170px) !important;
height: clamp(130px, 16vw, 170px) !important;
font-size: clamp(17px, 1.9vw, 22px) !important;
background: radial-gradient(circle at 30% 25%, #ffe5ec, #ff9ab1 50%, #ff7a9a 100%) !important;
box-shadow:
0 20px 40px -14px rgba(232, 83, 123, .5),
inset 0 3px 14px rgba(255, 255, 255, .7) !important;
}
body.page-id-46 .iroha-houkago__approach-center::before {
inset: -14px !important;
}
/* Items — pastel rounded pills */
body.page-id-46 .iroha-houkago__approach-item {
width: clamp(140px, 15vw, 180px) !important;
padding: 14px 16px !important;
border-radius: 999px !important;
font-size: 13px !important;
box-shadow:
0 12px 28px -14px rgba(232, 83, 123, .28),
0 0 0 4px #ffffff inset !important;
background: var(--card-bg, #fff) !important;
border: 2px solid var(--card-border, #ffd6e1) !important;
}
body.page-id-46 .iroha-houkago__approach-item--1 { --card-bg: #fff5f7; --card-border: #ffc9d6; }
body.page-id-46 .iroha-houkago__approach-item--2 { --card-bg: #f4fbf1; --card-border: #c9e8cf; }
body.page-id-46 .iroha-houkago__approach-item--3 { --card-bg: #fff7ed; --card-border: #ffd9b3; }
body.page-id-46 .iroha-houkago__approach-item--4 { --card-bg: #faf5ff; --card-border: #dac4f0; }
body.page-id-46 .iroha-houkago__approach-item--5 { --card-bg: #f2f9fe; --card-border: #c6dff2; }
/* Tighten positioning so they are closer to center */
body.page-id-46 .iroha-houkago__approach-item--1 { top: 0 !important; left: 50%; transform: translateX(-50%); }
body.page-id-46 .iroha-houkago__approach-item--2 { top: 42% !important; left: 4% !important; }
body.page-id-46 .iroha-houkago__approach-item--3 { top: 42% !important; right: 4% !important; }
body.page-id-46 .iroha-houkago__approach-item--4 { bottom: 0 !important; left: 16% !important; }
body.page-id-46 .iroha-houkago__approach-item--5 { bottom: 0 !important; right: 16% !important; }
body.page-id-46 .iroha-houkago__approach-orbit::before {
width: 62% !important;
height: 62% !important;
opacity: .6;
}
/* CONTACT white background */
body.page-id-46 .tc-contact.iroha-subfoot-contact,
body.page-id-46 .iroha-subfoot-contact {
background: #ffffff !important;
background-color: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot {
background: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot path {
fill: #ffffff !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--approach {
padding: 40px 18px 50px !important;
}
body.page-id-46 .iroha-houkago__approach-diagram {
aspect-ratio: auto !important;
min-height: 480px !important;
}
body.page-id-46 .iroha-houkago__approach-item {
width: 132px !important;
font-size: 11.5px !important;
padding: 11px 12px !important;
}
body.page-id-46 .iroha-houkago__approach-center {
width: 120px !important;
height: 120px !important;
font-size: 17px !important;
}
}
/* /houkago/ APPROACH — mobile: clean vertical list, no overlap */
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__approach-diagram {
aspect-ratio: auto !important;
min-height: 0 !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 0 !important;
}
/* center pill moves to the top */
body.page-id-46 .iroha-houkago__approach-center {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 140px !important;
height: 140px !important;
font-size: 17px !important;
margin: 0 auto 8px !important;
}
body.page-id-46 .iroha-houkago__approach-center::before { display: none !important; }
/* hide decorative orbit ring on mobile */
body.page-id-46 .iroha-houkago__approach-orbit::before { display: none !important; }
/* orbit becomes a flex column */
body.page-id-46 .iroha-houkago__approach-orbit {
position: static !important;
inset: auto !important;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
/* items become full-width pills */
body.page-id-46 .iroha-houkago__approach-item,
body.page-id-46 .iroha-houkago__approach-item--1,
body.page-id-46 .iroha-houkago__approach-item--2,
body.page-id-46 .iroha-houkago__approach-item--3,
body.page-id-46 .iroha-houkago__approach-item--4,
body.page-id-46 .iroha-houkago__approach-item--5 {
position: static !important;
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100% !important;
max-width: 320px !important;
justify-content: center !important;
padding: 14px 18px !important;
font-size: 13px !important;
}
body.page-id-46 .iroha-houkago__approach-item strong { font-size: 13px !important; }
}
/* /houkago/ APPROACH — force pure white background, kill sparkle tint */
body.page-id-46 .iroha-houkago__section--approach {
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
}
body.page-id-46 .iroha-houkago__section--approach::before {
display: none !important;
content: none !important;
}
/* /houkago/ APPROACH — force white bg on mobile */
@media (max-width: 820px) {
html body.page-id-46 .iroha-houkago__section--approach {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
html body.page-id-46 .iroha-houkago__section--approach::before,
html body.page-id-46 .iroha-houkago__section--approach::after {
content: none !important;
display: none !important;
background: transparent !important;
}
}
/* /houkago/ mobile — override body pink so it does not bleed through approach */
@media (max-width: 820px) {
html body.page-id-46:not(.home) {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
}
/* /houkago/ — explicit backgrounds per section (mobile + pc) */
html body.page-id-46 .iroha-houkago__section--intro { background: #ffffff !important; }
html body.page-id-46 .iroha-houkago__section--kyotaku { background: #fdeef0 !important; }
html body.page-id-46 .iroha-houkago__section--approach { background: #ffffff !important; }
html body.page-id-46 .iroha-houkago__section--guide { background: #fdeef0 !important; }
html body.page-id-46 .iroha-houkago__section--schedule { background: #ffffff !important; }
html body.page-id-46 .iroha-houkago__section--flow { background: #fdeef0 !important; }
/* ============================================================
/activity/ (page-id-47) — seamless pink header like houkago
============================================================ */
@media (min-width: 821px) {
html body.page-id-47:not(.home) {
background-color: #fdeef0 !important;
background-image: linear-gradient(180deg, #fdeef0 0%, #fdeef0 70%, #ffffff 100%) !important;
background-size: 100% 720px !important;
background-repeat: no-repeat !important;
background-position: top center !important;
}
body.page-id-47 .iroha-subhero {
background: transparent !important;
background-image: none !important;
}
html body.page-id-47 .content,
html body.page-id-47 .content-in,
html body.page-id-47 article.article,
html body.page-id-47 article.page,
html body.page-id-47 .entry-content,
html body.page-id-47 #main,
html body.page-id-47 .main,
html body.page-id-47 #container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
body.page-id-47 .iroha-about-page__hero {
background: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.45), transparent 60%),
linear-gradient(180deg, #fdeef0 0%, #fdeef0 100%) !important;
margin-top: -40px !important;
padding-top: 70px !important;
}
}
@media (max-width: 820px) {
body.page-id-47 { background: #fdeef0 !important; }
html body.page-id-47 .content,
html body.page-id-47 .content-in,
html body.page-id-47 article.article,
html body.page-id-47 .entry-content,
html body.page-id-47 #main,
html body.page-id-47 .main,
html body.page-id-47 #container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
body.page-id-47 .iroha-about-page__hero {
background: #fdeef0 !important;
background-image: none !important;
}
}
/* /houkago/ — kill any grey/tint on mobile around APPROACH area */
@media (max-width: 820px) {
html body.page-id-46 .iroha-houkago,
html body.page-id-46 .iroha-houkago__container,
html body.page-id-46 .iroha-houkago__section--approach,
html body.page-id-46 .iroha-houkago__approach-diagram,
html body.page-id-46 .iroha-houkago__approach-orbit {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
html body.page-id-46 .iroha-houkago__section--approach::before,
html body.page-id-46 .iroha-houkago__section--approach::after,
html body.page-id-46 .iroha-houkago__approach-diagram::before,
html body.page-id-46 .iroha-houkago__approach-diagram::after,
html body.page-id-46 .iroha-houkago__approach-orbit::before,
html body.page-id-46 .iroha-houkago__approach-orbit::after {
content: none !important;
display: none !important;
background: transparent !important;
}
}
/* /houkago/ mobile — force white on html/body so grey edges disappear */
@media (max-width: 820px) {
html:has(body.page-id-46) {
background: #ffffff !important;
background-color: #ffffff !important;
}
html body.page-id-46 {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
html body.page-id-46 #wrap,
html body.page-id-46 #main,
html body.page-id-46 .main,
html body.page-id-46 #container,
html body.page-id-46 .container,
html body.page-id-46 #content,
html body.page-id-46 .content,
html body.page-id-46 .content-in,
html body.page-id-46 article.article,
html body.page-id-46 article.page,
html body.page-id-46 .entry-content,
html body.page-id-46 .post-content {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
}
/* ============================================================
/houkago/ APPROACH — rebuilt explanatory style (clean white)
Scope: body.page-id-46
============================================================ */
html body.page-id-46 .iroha-houkago__section--approach {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
padding: 70px 24px 70px !important;
}
html body.page-id-46 .iroha-houkago__section--approach::before,
html body.page-id-46 .iroha-houkago__section--approach::after {
content: none !important;
display: none !important;
}
body.page-id-46 .iroha-approach__head {
text-align: center;
margin-bottom: 18px;
position: relative;
}
body.page-id-46 .iroha-approach__en {
display: block;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: clamp(24px, 3vw, 38px);
letter-spacing: .14em;
line-height: 1;
background: linear-gradient(135deg, #ff8aa4 0%, #ffb467 35%, #8fd19e 65%, #6eb7e8 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 10px;
}
body.page-id-46 .iroha-approach__ja {
margin: 0;
font-size: clamp(15px, 1.6vw, 19px);
letter-spacing: .14em;
color: #2a1a22;
font-weight: 800;
}
body.page-id-46 .iroha-approach__accent {
width: 72px;
height: 4px;
margin: 14px auto 0;
border-radius: 999px;
background: linear-gradient(90deg, #ff8aa4, #ffb467, #8fd19e, #6eb7e8, #b68be3);
}
body.page-id-46 .iroha-approach__lead {
max-width: 820px;
margin: 24px auto 40px;
text-align: center;
font-size: 15px;
line-height: 2;
color: #2a1a22;
}
body.page-id-46 .iroha-approach__lead strong {
color: #c8375d;
font-weight: 900;
}
body.page-id-46 .iroha-approach__list {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 820px;
display: flex;
flex-direction: column;
gap: 18px;
}
body.page-id-46 .iroha-approach__item {
position: relative;
display: grid;
grid-template-columns: 74px 1fr 60px;
align-items: center;
gap: 20px;
background: #ffffff;
border: 2px solid var(--c2, #ffe0e8);
border-left: 6px solid var(--c, #ff8aa4);
border-radius: 18px;
padding: 20px 24px;
box-shadow: 0 14px 30px -18px rgba(40, 40, 80, .18);
transition: transform .25s ease, box-shadow .25s ease;
}
body.page-id-46 .iroha-approach__item:hover {
transform: translateY(-3px);
box-shadow: 0 22px 40px -18px rgba(40, 40, 80, .28);
}
body.page-id-46 .iroha-approach__num {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border-radius: 50%;
background: var(--c, #ff8aa4);
color: #ffffff;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
font-size: 18px;
letter-spacing: .04em;
box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .18);
}
body.page-id-46 .iroha-approach__body { min-width: 0; }
body.page-id-46 .iroha-approach__title {
margin: 0 0 6px;
font-size: 17px;
font-weight: 800;
color: var(--c, #c8375d);
letter-spacing: .06em;
}
body.page-id-46 .iroha-approach__desc {
margin: 0;
font-size: 14px;
line-height: 1.85;
color: #2a1a22;
}
body.page-id-46 .iroha-approach__icon {
font-size: 36px;
text-align: center;
line-height: 1;
filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}
/* Mobile */
@media (max-width: 820px) {
html body.page-id-46 .iroha-houkago__section--approach {
padding: 50px 16px 50px !important;
}
body.page-id-46 .iroha-approach__lead {
font-size: 14px;
line-height: 1.9;
text-align: left;
margin: 18px auto 28px;
}
body.page-id-46 .iroha-approach__item {
grid-template-columns: 54px 1fr;
gap: 14px;
padding: 16px 18px;
align-items: start;
}
body.page-id-46 .iroha-approach__num {
width: 48px;
height: 48px;
font-size: 15px;
}
body.page-id-46 .iroha-approach__icon {
display: none;
}
body.page-id-46 .iroha-approach__title { font-size: 15.5px; }
body.page-id-46 .iroha-approach__desc { font-size: 13px; }
}
/* /houkago/ — GUIDE section pink */
html body.page-id-46 .iroha-houkago__section--guide {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
}
/* /houkago/ — CONTACT wave: pink band turned white */
body.page-id-46 .iroha-about-page__wave--into-subfoot {
background: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot path {
fill: #ffffff !important;
}
/* /houkago/ — CONTACT wave: pink bg with white wave path (visible curve) */
body.page-id-46 .iroha-about-page__wave--into-subfoot {
background: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-subfoot path {
fill: #ffffff !important;
}
/* /houkago/ — kill white gap between FLOW and contact wave */
body.page-id-46 .iroha-houkago,
body.page-id-46 .iroha-houkago__section--flow { margin-bottom: 0 !important; }
/* The content-in and entry-content stay transparent on houkago, but
Cocoon may add padding-bottom. Kill that so FLOW pink touches wave. */
html body.page-id-46 .entry-content,
html body.page-id-46 .article-bottom,
html body.page-id-46 .article-footer,
html body.page-id-46 article.article,
html body.page-id-46 article.page,
html body.page-id-46 .content,
html body.page-id-46 .content-in,
html body.page-id-46 .main {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Also make the content-in background pink in the tail region by extending the pink on wave wrapper */
body.page-id-46 .iroha-about-page__wave--into-subfoot {
background: #fdeef0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ============================================================
/activity/ (page-id-47) — hero chars: group (left) + pear (right)
Hide default clover/sunflower, use uploaded images instead
============================================================ */
/* Hide existing hero wave chars */
body.page-id-47 .iroha-about-page__wave-char--pumpkin,
body.page-id-47 .iroha-about-page__wave-char--clover,
body.page-id-47 .iroha-about-chara--hero { display: none !important; }
/* /activity/ — hero chars: pear (left, just above wave) + group (right, just above wave) */
body.page-id-47 .iroha-about-page__hero { position: relative; overflow: visible; }
body.page-id-47 .iroha-about-page__hero::before {
content: "" !important;
display: block !important;
position: absolute;
left: 4%;
bottom: 60px;
width: clamp(110px, 12vw, 160px);
aspect-ratio: 1 / 1;
background: url("/wp-content/uploads/iroha-chara/activity-right-pear.png") no-repeat center/contain !important;
filter: drop-shadow(0 14px 22px rgba(200, 180, 60, .3));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 4.6s ease-in-out infinite;
}
body.page-id-47 .iroha-about-page__hero::after {
content: "" !important;
display: block !important;
position: absolute;
right: 4%;
bottom: 50px;
width: clamp(140px, 16vw, 200px);
aspect-ratio: 1 / 1;
background: url("/wp-content/uploads/iroha-chara/activity-left-group.png") no-repeat center/contain !important;
filter: drop-shadow(0 14px 22px rgba(232, 140, 60, .3));
z-index: 3;
pointer-events: none;
animation: iroha-about-chara-bob 5.2s ease-in-out infinite -1.4s;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-about-page__hero::before {
width: 82px;
left: 2%;
bottom: 40px;
}
body.page-id-47 .iroha-about-page__hero::after {
width: 108px;
right: 2%;
bottom: 35px;
}
}
/* /activity/ — hide all hero pseudo chars (final) */
body.page-id-47 .iroha-about-page__hero::before,
body.page-id-47 .iroha-about-page__hero::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/* ==========================================================
MOBILE CENTERING FIX v2
========================================================== */
.iroha-contact-direct,
.iroha-contact-direct *,
.iroha-news-list,
.iroha-news-list *{
box-sizing:border-box !important;
}
.iroha-contact-direct{
padding:0 !important;
margin:0 auto !important;
list-style:none !important;
}
.iroha-news-list{
padding:0 !important;
margin:0 auto !important;
list-style:none !important;
}
.iroha-contact-direct > li,
.iroha-news-list > li{
padding:0 !important;
margin:0 !important;
list-style:none !important;
background-image:none !important;
min-width:0 !important;
}
.iroha-contact-direct > li::before,
.iroha-contact-direct > li::after,
.iroha-news-list > li::before,
.iroha-news-list > li::after{
display:none !important;
content:none !important;
}
@media (max-width: 820px){
/* contact: 1 col, cards never exceed container */
.iroha-contact-direct{
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:16px !important;
width:100% !important;
max-width:100% !important;
}
.iroha-contact-direct__card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:24px 18px !important;
text-align:center !important;
}
.iroha-contact-direct__label,
.iroha-contact-direct__value,
.iroha-contact-direct__note{
max-width:100% !important;
word-break:break-word !important;
}
/* news list: 1 col, centered content */
.iroha-news-list{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
width:100% !important;
max-width:100% !important;
}
.iroha-news-list__item{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
.iroha-news-list__item a{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:8px !important;
padding:18px 18px !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
}
.iroha-news-list__item time,
.iroha-news-list__cat,
.iroha-news-list__title{
text-align:center !important;
width:auto !important;
max-width:100% !important;
margin:0 auto !important;
flex:0 0 auto !important;
}
}
/* ==========================================================
CONTACT DIRECT stacking fix v3
========================================================== */
.iroha-contact-direct__card{
display:block !important;
}
.iroha-contact-direct__label{
display:inline-block !important;
margin:0 auto 14px !important;
}
.iroha-contact-direct__value{
display:block !important;
width:100% !important;
margin:14px 0 10px !important;
text-align:center !important;
clear:both !important;
}
.iroha-contact-direct__note{
display:block !important;
width:100% !important;
text-align:center !important;
margin-top:6px !important;
}
@media (max-width: 820px){
.iroha-contact-direct__label{ margin:0 auto 12px !important; }
.iroha-contact-direct__value{ margin:12px 0 8px !important; font-size:20px !important; }
}
/* ================================================================
About page (page-id-44) — unified pink background between
subhero header and .iroha-about-page__hero to eliminate the
white band / background colour step. Matches home hero continuity.
================================================================ */
body.page-id-44,
body.page-id-44 #body,
body.page-id-44 .body,
body.page-id-44 .body-in,
body.page-id-44 #container,
body.page-id-44 .container,
body.page-id-44 #content,
body.page-id-44 .content,
body.page-id-44 .content-in,
body.page-id-44 .wrap {
background: #fdeef0 !important;
}
/* ================================================================
About page — subhero gradient must match .iroha-about-page__hero
so there is no visible seam between the nav header and the hero.
================================================================ */
body.page-id-44 .iroha-subhero {
background:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
radial-gradient(ellipse 50% 50% at 20% 90%, rgba(206,236,203,.5), transparent 70%),
radial-gradient(ellipse 60% 50% at 85% 95%, rgba(255,208,221,.55), transparent 70%),
linear-gradient(180deg, #fff 0%, #fff5f8 100%) !important;
background-color: transparent !important;
}
/* ================================================================
About page — pull hero behind subhero so one gradient covers both.
subhero becomes transparent; hero's gradient shows through.
================================================================ */
body.page-id-44 .iroha-subhero {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
}
body.page-id-44 .iroha-about-page__hero {
margin-top: -193px !important;
padding-top: 220px !important;
z-index: 1;
}
/* ================================================================
About page (page-id-44) — remove body gradient so only the hero
gradient is visible. Hero already covers the full top area.
================================================================ */
@media (min-width: 821px) {
html body.page.page-id-44:not(.home) {
background-image: none !important;
background-color: #fff !important;
background: #fff !important;
}
}
html body.page-id-44 {
background-image: none !important;
background-color: #fff !important;
background: #fff !important;
}
/* Fix: container must be transparent so hero gradient shows through */
html body.page-id-44 .container,
html body.page-id-44 #container {
background: transparent !important;
}
/* Extend the hero gradient to the very top of the page */
html body.page.page-id-44:not(.home),
html body.page-id-44 {
background-color: #fdeef0 !important;
background-image:
radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255,208,221,.55), transparent 60%),
radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255,233,176,.55), transparent 60%),
radial-gradient(ellipse 50% 50% at 20% 90%, rgba(206,236,203,.5), transparent 70%),
radial-gradient(ellipse 60% 50% at 85% 95%, rgba(255,208,221,.55), transparent 70%),
linear-gradient(180deg, #fdeef0 0%, #fff5f8 100%) !important;
background-repeat: no-repeat !important;
background-size: 100% 760px !important;
background-position: top center !important;
}
/* Hero background: transparent — body handles the gradient seamlessly */
body.page-id-44 .iroha-about-page__hero {
background-image: none !important;
background-color: transparent !important;
background: transparent !important;
}
/* Hide About page hero (About/私たちについて/breadcrumb) */
body.page-id-44 .iroha-about-page__hero { display: none !important; }
/* About page — shorter hero header */
body.page-id-44 .iroha-hero--subpage {
min-height: 500px !important;
padding-bottom: 60px !important;
}
@media (max-width: 820px) {
body.page-id-44 .iroha-hero--subpage {
min-height: 300px !important;
padding-bottom: 40px !important;
}
}
/* About page — hero page title */
.iroha-hero__page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
.iroha-hero__page-en {
display: block;
font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', Nunito, sans-serif;
font-weight: 900;
font-size: clamp(30px, 4vw, 52px);
letter-spacing: .08em;
color: #2a1a22;
line-height: 1.2;
}
.iroha-hero__page-ja {
margin: 8px 0 0;
font-family: "Zen Maru Gothic", sans-serif !important;
font-weight: 800 !important;
font-size: clamp(18px, 1.8vw, 22px) !important;
letter-spacing: .22em !important;
color: #c8375d !important;
border: none;
padding: 0;
background: none;
}
/* About page — hero characters */
/* About page — hero characters (floating animation like home) */
.iroha-about-hero__chara {
position: absolute;
z-index: 5;
height: auto;
object-fit: contain;
pointer-events: none;
animation: iroha-bob 6s ease-in-out infinite;
filter: drop-shadow(0 14px 22px rgba(232,83,123,.25));
}
.iroha-about-hero__chara--left {
left: 8%;
bottom: 22%;
width: clamp(140px, 14vw, 220px);
animation-delay: -2s;
}
.iroha-about-hero__chara--right {
right: 8%;
bottom: 26%;
width: clamp(120px, 12vw, 180px);
animation-delay: -4.5s;
}
@media (max-width: 820px) {
.iroha-about-hero__chara--left {
width: 100px;
left: 2%;
bottom: 20%;
}
.iroha-about-hero__chara--right {
width: 80px;
right: 2%;
bottom: 18%;
}
}
/* About page — hide pink/red dots only */
body.page-id-44 .iroha-intro-deco__dot--1,
body.page-id-44 .iroha-pat--5 { display: none !important; }
/* About page — remove btn bottom shadow/glow */
body.page-id-44 .iroha-about-page__btn {
box-shadow:
0 1px 0 rgba(255, 255, 255, .55) inset,
0 -8px 18px rgba(0, 0, 0, .08) inset,
0 0 0 6px rgba(255, 255, 255, .9),
0 0 0 7px var(--btn-hue-b) !important;
}
body.page-id-44 .iroha-about-page__btn:hover {
box-shadow:
0 1px 0 rgba(255, 255, 255, .6) inset,
0 -8px 18px rgba(0, 0, 0, .1) inset,
0 0 0 6px rgba(255, 255, 255, .95),
0 0 0 7px var(--btn-hue-b) !important;
}
/* About page — extra decorative dots (avoid text center) */
body.page-id-44 .iroha-intro-deco::after {
content: ;
position: absolute;
top: 8%;
right: 6%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #a5d4ef;
opacity: .6;
animation: iroha-bob 5s ease-in-out infinite;
animation-delay: -1s;
}
body.page-id-44 .iroha-intro-deco::before {
content: ;
position: absolute;
bottom: 12%;
left: 4%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffd96b;
opacity: .6;
animation: iroha-bob 6s ease-in-out infinite;
animation-delay: -3s;
}
body.page-id-44 .iroha-intro-deco__dot--2 {
top: 82% !important;
right: 8% !important;
}
body.page-id-44 .iroha-intro-deco__dot--3 {
top: 50% !important;
left: 1% !important;
}
body.page-id-44 .iroha-intro-deco__ring--1 {
top: 6% !important;
right: 18% !important;
}
body.page-id-44 .iroha-intro-deco__ring--2 {
bottom: 8% !important;
left: 12% !important;
}
body.page-id-44 .iroha-intro-deco__star--1 {
top: 2% !important;
left: 3% !important;
}
body.page-id-44 .iroha-intro-deco__star--2 {
top: 4% !important;
right: 3% !important;
}
body.page-id-44 .iroha-intro-deco__star--3 {
bottom: 6% !important;
right: 5% !important;
}
/* About page — CONTACT section white background */
body.page-id-44 .tc-contact {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
/* About page — CONTACT wave to footer also white */
body.page-id-44 .tc-contact .iroha-contact__wave path {
fill: #ffffff !important;
}
body.page-id-44 .tc-contact .iroha-contact__wave {
background: #ffffff !important;
}
/* About page — hide outline section character */
body.page-id-44 .iroha-about-chara--outline { display: none !important; }
/* INTERVENTION section — reduce padding */
body.page-id-44 .iroha-about-page__section--intervention {
padding-top: 0 !important;
padding-bottom: 10px !important;
}
/* About page — OUTLINE decorative dots/stars (visible) */
body.page-id-44 .iroha-about-page__section--outline {
position: relative;
}
body.page-id-44 .iroha-about-page__section--outline::before {
content: ;
position: absolute;
width: 14px; height: 14px;
top: 30px; left: 45px;
border-radius: 50%;
background: #ffd96b;
opacity: .8;
animation: iroha-bob 6s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
body.page-id-44 .iroha-about-page__section--outline::after {
content: ;
position: absolute;
width: 12px; height: 12px;
top: 45px; right: 50px;
border-radius: 50%;
background: #a5d4ef;
opacity: .75;
animation: iroha-bob 5s ease-in-out infinite;
animation-delay: -2s;
pointer-events: none;
z-index: 2;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-about-page__section-head {
position: relative;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-about-page__section-head::before {
content: ✦;
position: absolute;
top: 5px; left: -50px;
font-size: 18px;
color: #ffd96b;
opacity: .6;
animation: iroha-bob 7s ease-in-out infinite;
animation-delay: -1s;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-about-page__section-head::after {
content: ✦;
position: absolute;
bottom: 5px; right: -45px;
font-size: 14px;
color: #ffb2c9;
opacity: .55;
animation: iroha-bob 6s ease-in-out infinite;
animation-delay: -3.5s;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-outline {
position: relative;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-outline::before {
content: ;
position: absolute;
bottom: 50px; left: -35px;
width: 11px; height: 11px;
border-radius: 50%;
background: #b6dca7;
opacity: .75;
animation: iroha-bob 5.5s ease-in-out infinite;
animation-delay: -4s;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-outline::after {
content: ;
position: absolute;
top: 80px; right: -30px;
width: 13px; height: 13px;
border-radius: 50%;
background: #b68be3;
opacity: .7;
animation: iroha-bob 6.5s ease-in-out infinite;
animation-delay: -1.5s;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-about-page__dots {
position: relative;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-about-page__dots::before {
content: ♥;
position: absolute;
top: 100px; left: -50px;
font-size: 14px;
color: #ffb2c9;
opacity: .5;
animation: iroha-bob 6s ease-in-out infinite;
animation-delay: -2.5s;
}
body.page-id-44 .iroha-about-page__section--outline .iroha-about-page__dots::after {
content: ;
position: absolute;
top: 160px; right: -45px;
width: 22px; height: 22px;
border: 2.5px dashed #a5d4ef;
border-radius: 50%;
opacity: .4;
animation: iroha-bob 8s ease-in-out infinite;
animation-delay: -5s;
}
/* About page — intervention section head tighter */
body.page-id-44 .iroha-about-page__section--intervention .iroha-about-page__section-head {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.page-id-44 .iroha-about-page__section--intervention .iroha-about-page__pattern--section {
top: -40px !important;
}
/* About page — intervention even tighter */
body.page-id-44 .iroha-about-page__section--intervention .iroha-about-page__section-lead {
margin-top: 10px !important;
margin-bottom: 16px !important;
}
body.page-id-44 .iroha-about-page__section--intervention .iroha-cute-list {
margin-top: 10px !important;
margin-bottom: 0 !important;
}
body.page-id-44 .iroha-about-page__section--intervention .iroha-about-page__section-en {
margin-bottom: 4px !important;
}
/* About page — shrink wave + intervention spacing */
body.page-id-44 .iroha-about-page__wave--into-intervention {
height: 70px !important;
margin-bottom: 0 !important;
}
body.page-id-44 .iroha-about-page__section--intervention {
padding: 0 24px 10px !important;
}
body.page-id-44 .iroha-about-page__section--intervention .iroha-about-page__section-head {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
body.page-id-44 .iroha-about-page__section--intervention .iroha-about-page__section-en {
margin-bottom: 2px !important;
}
body.page-id-44 .iroha-about-page__section--intervention .iroha-cute-list {
margin-top: 8px !important;
gap: 14px !important;
}
/* About page — ACCESS section compact + map centered */
body.page-id-44 .iroha-about-page__section--access {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
body.page-id-44 .iroha-about-page__section--access .iroha-about-page__section-head {
margin-top: 0 !important;
margin-bottom: 10px !important;
}
body.page-id-44 .iroha-access {
display: flex !important;
align-items: center !important;
gap: 30px;
max-width: 1080px;
margin: 0 auto;
}
body.page-id-44 .iroha-access__info {
flex: 0 0 280px;
}
body.page-id-44 .iroha-access__map {
flex: 1;
}
body.page-id-44 .iroha-about-page__wave--into-access {
height: 50px !important;
}
@media (max-width: 820px) {
body.page-id-44 .iroha-access {
flex-direction: column !important;
}
}
/* About page — ACCESS: title at top, near bear character */
body.page-id-44 .iroha-about-page__section--access {
padding-top: 0 !important;
padding-bottom: 10px !important;
}
body.page-id-44 .iroha-about-page__section--access .iroha-about-page__section-head {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 10px !important;
}
body.page-id-44 .iroha-about-page__section--access .iroha-about-page__section-en {
margin-top: 0 !important;
}
/* Move access bear to top-left */
body.page-id-44 .iroha-about-chara--access {
bottom: auto !important;
top: 10px !important;
}
/* About page — CONTACT hide all decorations */
body.page-id-44 .tc-contact .iroha-contact__blobs,
body.page-id-44 .tc-contact .iroha-contact__char,
body.page-id-44 .tc-contact .iroha-blob {
display: none !important;
}