/* ================================================================
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: none;
}
.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(140px, 14vw, 220px);
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: 100px;
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;
align-items: stretch !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;
}
/* About page — CONTACT pattern positioning */
body.page-id-44 .tc-contact {
position: relative !important;
overflow: hidden;
}
body.page-id-44 .iroha-about-page__pattern--contact {
position: absolute !important;
inset: 0;
pointer-events: none;
z-index: 0;
}
body.page-id-44 .tc-contact .tc-contact-wrap {
position: relative;
z-index: 1;
}
/* About page — ACCESS info card redesign */
body.page-id-44 .iroha-access__info {
background: #ffffff !important;
border: 2.5px solid #ffd6e1 !important;
border-radius: 24px !important;
padding: 28px 32px !important;
box-shadow: 0 8px 24px rgba(232,83,123,.08) !important;
font-family: 'Zen Maru Gothic', sans-serif !important;
}
body.page-id-44 .iroha-access__name {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 800 !important;
font-size: 18px !important;
color: #c8375d !important;
margin: 0 0 12px !important;
letter-spacing: .08em !important;
}
body.page-id-44 .iroha-access__zip {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
color: #6b5560 !important;
margin: 0 0 4px !important;
}
body.page-id-44 .iroha-access__addr {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
color: #2a1a22 !important;
margin: 0 !important;
line-height: 1.6 !important;
}
/* Mobile fixes — CONTACT not cut off + ACCESS card auto height */
@media (max-width: 820px) {
body.page-id-44 .tc-contact {
padding-bottom: 60px !important;
overflow: visible !important;
}
body.page-id-44 .tc-contact .iroha-contact__wave {
position: relative !important;
}
body.page-id-44 .iroha-access__info {
height: auto !important;
min-height: 0 !important;
flex: none !important;
padding: 22px 24px !important;
}
}
/* Jihatsu page — hide content hero + match about header height */
body.page-id-45 .iroha-jihatsu__hero { display: none !important; }
body.page-id-45 .iroha-hero--subpage {
min-height: 500px !important;
padding-bottom: 60px !important;
}
body.page-id-45 .iroha-hero__page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
/* Jihatsu page — mobile header height */
@media (max-width: 820px) {
body.page-id-45 .iroha-hero--subpage {
min-height: 300px !important;
padding-bottom: 30px !important;
}
}
/* ============================================================
Jihatsu page — section background designs
============================================================ */
/* --- ABOUT (intro): dots/stars pattern --- */
body.page-id-45 .iroha-jihatsu__section--intro {
position: relative;
}
body.page-id-45 .iroha-jihatsu__section--intro::before {
content: "";
position: absolute;
width: 12px; height: 12px;
top: 30px; left: 40px;
border-radius: 50%;
background: #ffd96b;
opacity: .7;
animation: iroha-bob 6s ease-in-out infinite;
pointer-events: none; z-index: 1;
}
body.page-id-45 .iroha-jihatsu__section--intro::after {
content: "✦";
position: absolute;
top: 25px; right: 50px;
font-size: 16px;
color: #ffb2c9;
opacity: .5;
animation: iroha-bob 5s ease-in-out infinite;
animation-delay: -2s;
pointer-events: none; z-index: 1;
}
/* --- FEATURES: blob watercolor background --- */
body.page-id-45 .iroha-jihatsu__section--features {
position: relative;
overflow: hidden;
}
body.page-id-45 .iroha-jihatsu__section--features::before {
content: "";
position: absolute;
width: 280px; height: 280px;
top: -60px; left: -80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,208,221,.4) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
body.page-id-45 .iroha-jihatsu__section--features::after {
content: "";
position: absolute;
width: 240px; height: 240px;
bottom: -40px; right: -60px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,233,176,.4) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
/* --- PROGRAM: dots/stars pattern --- */
body.page-id-45 .iroha-jihatsu__section--program {
position: relative;
}
body.page-id-45 .iroha-jihatsu__section--program::before {
content: "";
position: absolute;
width: 10px; height: 10px;
top: 35px; right: 45px;
border-radius: 50%;
background: #a5d4ef;
opacity: .65;
animation: iroha-bob 5.5s ease-in-out infinite;
animation-delay: -1s;
pointer-events: none; z-index: 1;
}
body.page-id-45 .iroha-jihatsu__section--program::after {
content: "✦";
position: absolute;
bottom: 30px; left: 45px;
font-size: 15px;
color: #ffd96b;
opacity: .5;
animation: iroha-bob 7s ease-in-out infinite;
animation-delay: -3s;
pointer-events: none; z-index: 1;
}
/* --- DAILY SCHEDULE: blob watercolor background --- */
body.page-id-45 .iroha-jihatsu__section--schedule {
position: relative;
overflow: hidden;
}
body.page-id-45 .iroha-jihatsu__section--schedule::before {
content: "";
position: absolute;
width: 260px; height: 260px;
top: -50px; right: -70px;
border-radius: 50%;
background: radial-gradient(circle, rgba(206,236,203,.4) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
body.page-id-45 .iroha-jihatsu__section--schedule::after {
content: "";
position: absolute;
width: 220px; height: 220px;
bottom: -30px; left: -50px;
border-radius: 50%;
background: radial-gradient(circle, rgba(165,212,239,.35) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
/* --- FLOW: dots/stars pattern --- */
body.page-id-45 .iroha-jihatsu__section--flow {
position: relative;
}
body.page-id-45 .iroha-jihatsu__section--flow::before {
content: "♥";
position: absolute;
top: 25px; left: 50px;
font-size: 13px;
color: #ffb2c9;
opacity: .45;
animation: iroha-bob 6s ease-in-out infinite;
animation-delay: -2.5s;
pointer-events: none; z-index: 1;
}
body.page-id-45 .iroha-jihatsu__section--flow::after {
content: "";
position: absolute;
width: 11px; height: 11px;
bottom: 30px; right: 50px;
border-radius: 50%;
background: #b6dca7;
opacity: .6;
animation: iroha-bob 5s ease-in-out infinite;
animation-delay: -4s;
pointer-events: none; z-index: 1;
}
/* --- CONTACT: white background, hide decorations --- */
body.page-id-45 .tc-contact {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
}
body.page-id-45 .tc-contact .iroha-contact__blobs,
body.page-id-45 .tc-contact .iroha-contact__char,
body.page-id-45 .tc-contact .iroha-blob {
display: none !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave path {
fill: #ffe3ea !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave {
background: #fdeef0 !important;
}
/* Jihatsu page — footer white background */
body.page-id-45 .iroha-footer {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* Jihatsu — fix wave before contact (match pink bg) */
body.page-id-45 .iroha-jihatsu__wave--pink path {
fill: #fdeef0 !important;
}
body.page-id-45 .iroha-jihatsu .iroha-about-page__wave--into-contact {
background: #ffffff !important;
}
/* Jihatsu — footer fully white */
body.page-id-45 .iroha-footer,
body.page-id-45 .iroha-footer *,
body.page-id-45 footer.iroha-footer {
background-color: #ffffff !important;
background-image: none !important;
background: #ffffff !important;
}
body.page-id-45 .iroha-footer__inner {
background: #ffffff !important;
}
/* Jihatsu — last wave before contact: white fill on pink bg */
body.page-id-45 .iroha-jihatsu__wave--white:last-of-type {
background: #fdeef0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--white:last-of-type path {
fill: #fdeef0 !important;
}
/* Jihatsu — contact wave into footer */
body.page-id-45 .tc-contact .iroha-contact__wave path {
fill: #ffffff !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave {
background: #fdeef0 !important;
}
/* Jihatsu — fix all wave divider backgrounds */
/* intro(white) → features(pink): wave bg = white, fill = pink */
body.page-id-45 .iroha-jihatsu__section--intro + .iroha-jihatsu__wave--pink {
background: #ffffff !important;
display: block !important;
}
/* features(pink) → program(white): wave bg = pink, fill = white */
body.page-id-45 .iroha-jihatsu__section--features + .iroha-jihatsu__wave--white {
background: #fdeef0 !important;
display: block !important;
}
/* program(white) → schedule(pink): wave bg = white, fill = pink */
body.page-id-45 .iroha-jihatsu__section--program + .iroha-jihatsu__wave--pink {
background: #ffffff !important;
display: block !important;
}
/* schedule(pink) → flow(white): wave bg = pink, fill = white */
body.page-id-45 .iroha-jihatsu__section--schedule + .iroha-jihatsu__wave--white {
background: #fdeef0 !important;
display: block !important;
}
/* Jihatsu — section backgrounds explicit */
body.page-id-45 .iroha-jihatsu__section--intro {
background: #ffffff !important;
}
body.page-id-45 .iroha-jihatsu__section--features {
background: #fdeef0 !important;
}
body.page-id-45 .iroha-jihatsu__section--program {
background: #ffffff !important;
}
body.page-id-45 .iroha-jihatsu__section--schedule {
background: #fdeef0 !important;
}
body.page-id-45 .iroha-jihatsu__section--flow {
background: #ffffff !important;
}
/* ============================================================
Jihatsu — FINAL wave/footer/contact color fixes (override all)
============================================================ */
/* All jihatsu waves: correct bg based on position */
body.page-id-45 .iroha-jihatsu__wave {
display: block !important;
height: 70px !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--pink {
background: #ffffff !important;
}
body.page-id-45 .iroha-jihatsu__wave--pink path {
fill: #fdeef0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--white {
background: #fdeef0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--white path {
fill: #ffffff !important;
}
/* FLOW(white) → template wave → CONTACT(pink) */
body.page-id-45 .iroha-about-page__wave--into-contact {
background: #ffffff !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact path {
fill: #fdeef0 !important;
}
/* CONTACT(pink) wave → FOOTER(white) */
body.page-id-45 .tc-contact .iroha-contact__wave {
background: #fdeef0 !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave path {
fill: #ffe3ea !important;
}
/* Template wave → FOOTER */
body.page-id-45 .iroha-about-page__wave--into-footer {
background: #ffe3ea !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
/* FOOTER — pure white everywhere */
body.page-id-45 .iroha-footer {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-45 .iroha-footer__inner {
background: #ffffff !important;
background-color: #ffffff !important;
}
body.page-id-45 .iroha-footer__grid,
body.page-id-45 .iroha-footer__brand,
body.page-id-45 .iroha-footer__info,
body.page-id-45 .iroha-footer__nav {
background: transparent !important;
}
/* Jihatsu — section decoration patterns */
body.page-id-45 .iroha-jihatsu__deco {
position: absolute !important;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: visible;
}
body.page-id-45 .iroha-jihatsu__section--intro,
body.page-id-45 .iroha-jihatsu__section--features,
body.page-id-45 .iroha-jihatsu__section--program,
body.page-id-45 .iroha-jihatsu__section--schedule,
body.page-id-45 .iroha-jihatsu__section--flow {
position: relative !important;
}
body.page-id-45 .iroha-jihatsu__deco ~ * {
position: relative;
z-index: 1;
}
/* Jihatsu — unified font for all section body text */
body.page-id-45 .iroha-jihatsu__section {
font-family: 'Zen Maru Gothic', sans-serif !important;
}
/* ABOUT section — info table text */
body.page-id-45 .iroha-jihatsu__info dt,
body.page-id-45 .iroha-jihatsu__info dd {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
body.page-id-45 .iroha-jihatsu__lead {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
}
/* FEATURES section — description text */
body.page-id-45 .iroha-jihatsu__feature p {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
body.page-id-45 .iroha-jihatsu__feature h3 {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 800 !important;
}
/* PROGRAM section — description text */
body.page-id-45 .iroha-jihatsu__section--program p,
body.page-id-45 .iroha-jihatsu__section--program li,
body.page-id-45 .iroha-jihatsu__section--program dd {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
/* DAILY SCHEDULE section — text */
body.page-id-45 .iroha-jihatsu__section--schedule p,
body.page-id-45 .iroha-jihatsu__section--schedule li,
body.page-id-45 .iroha-jihatsu__section--schedule dt,
body.page-id-45 .iroha-jihatsu__section--schedule dd {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
/* FLOW section — description text */
body.page-id-45 .iroha-jihatsu__section--flow p,
body.page-id-45 .iroha-jihatsu__section--flow li,
body.page-id-45 .iroha-jihatsu__section--flow dd {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
/* Jihatsu — footer FULLY white (final override) */
body.page-id-45 footer,
body.page-id-45 footer.iroha-footer,
body.page-id-45 .iroha-footer,
body.page-id-45 .iroha-footer__inner,
body.page-id-45 .iroha-footer__grid,
body.page-id-45 .iroha-footer__brand,
body.page-id-45 .iroha-footer__info,
body.page-id-45 .iroha-footer__nav,
body.page-id-45 .iroha-footer__copy {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
/* Jihatsu — footer fix border/padding/margin */
body.page-id-45 footer.iroha-footer {
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding-top: 0 !important;
}
body.page-id-45 .iroha-footer__inner {
border: none !important;
box-shadow: none !important;
}
/* Jihatsu — ABOUT(intro) section tighter */
body.page-id-45 .iroha-jihatsu__section--intro {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Jihatsu — body/article bg white below contact */
body.page-id-45 {
background-color: #ffffff !important;
}
body.page-id-45 .tenri-clone {
background-color: #ffffff !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
background: #fdeef0 !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
/* ================================================================
Jihatsu page — LIFE→FLOW wave divider
================================================================ */
body.page-id-45 .iroha-jihatsu__wave--life-to-flow {
display: block !important;
width: 100%;
height: 70px;
margin: 0;
background: #ffffff !important;
}
body.page-id-45 .iroha-jihatsu__wave--life-to-flow path {
fill: #fdeef0 !important;
}
/* ================================================================
Jihatsu page — Character decorations (4 characters)
================================================================ */
body.page-id-45 .iroha-jihatsu__chara {
position: absolute;
z-index: 3;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 6px 14px rgba(232, 83, 123, .15));
animation: iroha-jihatsu-chara-bob 5s ease-in-out infinite;
}
@keyframes iroha-jihatsu-chara-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Bear — FEATURES section, right side */
body.page-id-45 .iroha-jihatsu__chara--bear {
width: clamp(70px, 9vw, 120px);
height: auto;
right: 2%;
top: 10px;
animation-delay: -1s;
}
/* Squirrel — OUTLINE section, left side */
body.page-id-45 .iroha-jihatsu__chara--squirrel {
width: clamp(65px, 8vw, 110px);
height: auto;
left: 1%;
bottom: 20px;
animation-delay: -2.5s;
}
/* Cat — FLOW section, right side */
body.page-id-45 .iroha-jihatsu__chara--cat {
width: clamp(70px, 9vw, 120px);
height: auto;
right: 2%;
bottom: 40px;
animation-delay: -3.5s;
}
/* Group (pumpkin/clover/acorn) — CONTACT section, left side */
body.page-id-45 .iroha-jihatsu__chara--group {
width: clamp(90px, 11vw, 160px);
height: auto;
left: 2%;
bottom: 30px;
animation-delay: -0.5s;
}
/* Make sections position:relative so characters can be absolutely positioned */
body.page-id-45 .iroha-about-page__section {
position: relative !important;
overflow: visible !important;
}
/* ================================================================
Jihatsu page — CONTACT section background design
================================================================ */
body.page-id-45 .iroha-about-page__section--contact {
background:
radial-gradient(circle at 15% 30%, rgba(255, 201, 215, .5) 0%, transparent 45%),
radial-gradient(circle at 85% 70%, rgba(253, 227, 184, .5) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(206, 236, 203, .3) 0%, transparent 50%),
#ffffff !important;
overflow: hidden;
padding: 50px 24px 60px !important;
border-radius: 32px;
margin: 20px auto !important;
max-width: 980px;
box-shadow: 0 12px 40px -16px rgba(232, 83, 123, .15);
}
/* Decorative blobs in CONTACT */
body.page-id-45 .iroha-jihatsu-contact__blobs {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
body.page-id-45 .iroha-jihatsu-contact__blob {
position: absolute;
border-radius: 50%;
filter: blur(50px);
opacity: .5;
}
body.page-id-45 .iroha-jihatsu-contact__blob--1 {
width: 200px; height: 200px;
top: -40px; left: -30px;
background: radial-gradient(circle, #ffd0dc 0%, transparent 70%);
}
body.page-id-45 .iroha-jihatsu-contact__blob--2 {
width: 180px; height: 180px;
bottom: -30px; right: -20px;
background: radial-gradient(circle, #fde3b8 0%, transparent 70%);
}
body.page-id-45 .iroha-jihatsu-contact__blob--3 {
width: 150px; height: 150px;
top: 30%; left: 60%;
background: radial-gradient(circle, #ceeccb 0%, transparent 70%);
}
/* Ensure CONTACT content is above blobs */
body.page-id-45 .iroha-about-page__section--contact .iroha-about-page__section-head,
body.page-id-45 .iroha-about-page__section--contact .iroha-about-page__contact-lead,
body.page-id-45 .iroha-about-page__section--contact .iroha-about-page__contact-cta {
position: relative;
z-index: 2;
}
/* ================================================================
Jihatsu page — FOOTER fully white (final ultimate override)
================================================================ */
body.page-id-45 .iroha-about-page__wave--into-footer {
background: #fdeef0 !important;
height: 70px !important;
display: block !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
body.page-id-45 footer,
body.page-id-45 footer.iroha-footer,
body.page-id-45 .iroha-footer {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
border-top: none !important;
}
body.page-id-45 .iroha-footer__inner,
body.page-id-45 .iroha-footer__grid,
body.page-id-45 .iroha-footer__brand,
body.page-id-45 .iroha-footer__info,
body.page-id-45 .iroha-footer__nav,
body.page-id-45 .iroha-footer__copy,
body.page-id-45 .iroha-footer__logo,
body.page-id-45 .iroha-footer__tagline,
body.page-id-45 .iroha-footer__name,
body.page-id-45 .iroha-footer__line {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
/* Fix the contact-to-footer wave transition */
body.page-id-45 .tc-contact {
background: #ffffff !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave {
display: none !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact {
background: #ffffff !important;
display: block !important;
height: 70px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact path {
fill: #fdeef0 !important;
}
/* ================================================================
Jihatsu page — MOBILE responsive (≤820px)
================================================================ */
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__chara--bear {
width: 60px;
right: -5px;
top: 5px;
}
body.page-id-45 .iroha-jihatsu__chara--squirrel {
width: 55px;
left: -5px;
bottom: 10px;
}
body.page-id-45 .iroha-jihatsu__chara--cat {
width: 60px;
right: -5px;
bottom: 20px;
}
body.page-id-45 .iroha-jihatsu__chara--group {
width: 80px;
left: -5px;
bottom: 15px;
}
body.page-id-45 .iroha-about-page__section--contact {
padding: 40px 16px 50px !important;
border-radius: 22px;
margin: 10px 8px !important;
}
body.page-id-45 .iroha-jihatsu__wave--life-to-flow {
height: 50px;
}
}
/* Hide characters on very small screens to prevent overlap */
@media (max-width: 480px) {
body.page-id-45 .iroha-jihatsu__chara--bear,
body.page-id-45 .iroha-jihatsu__chara--squirrel,
body.page-id-45 .iroha-jihatsu__chara--cat {
width: 45px;
opacity: .7;
}
body.page-id-45 .iroha-jihatsu__chara--group {
width: 65px;
opacity: .7;
}
}
/* ================================================================
Jihatsu — move CONTACT pair character higher
================================================================ */
body.page-id-45 .tc-contact .iroha-contact__char--pair {
bottom: 120px !important;
}
/* Show CONTACT blobs and char on jihatsu page (override the hide) */
body.page-id-45 .tc-contact .iroha-contact__blobs {
display: block !important;
position: absolute !important;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
body.page-id-45 .tc-contact .iroha-contact__char {
display: block !important;
}
body.page-id-45 .tc-contact .iroha-blob {
display: block !important;
}
/* Add nice background gradient to CONTACT on jihatsu */
body.page-id-45 .tc-contact {
background:
radial-gradient(circle at 20% 40%, rgba(255, 207, 222, .35) 0%, transparent 50%),
radial-gradient(circle at 80% 60%, rgba(255, 228, 181, .35) 0%, transparent 50%),
radial-gradient(circle at 50% 20%, rgba(206, 234, 203, .25) 0%, transparent 50%),
#fdeef0 !important;
}
/* ================================================================
Jihatsu — FOOTER ultimate white fix (make absolutely everything white)
================================================================ */
body.page-id-45 .iroha-about-page__wave--into-footer {
background: #fdeef0 !important;
height: 70px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
body.page-id-45 .iroha-footer,
body.page-id-45 footer.iroha-footer,
body.page-id-45 .tenri-clone > footer,
body.page-id-45 article.tenri-clone > footer {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-45 .iroha-footer *:not(a):not(img):not(svg):not(path) {
background-color: transparent !important;
background-image: none !important;
}
body.page-id-45 .iroha-footer__inner {
background: #ffffff !important;
}
/* ================================================================
Jihatsu — ensure characters are visible (override overflow:hidden)
================================================================ */
body.page-id-45 .iroha-jihatsu__section--features,
body.page-id-45 .iroha-jihatsu__section--program,
body.page-id-45 .iroha-jihatsu__section--schedule,
body.page-id-45 .iroha-jihatsu__section--flow {
overflow: visible !important;
}
/* ================================================================
Jihatsu — character images positioning (definitive)
================================================================ */
body.page-id-45 .iroha-jihatsu__chara {
position: absolute !important;
z-index: 5 !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 6px 14px rgba(232, 83, 123, .18));
animation: iroha-jihatsu-chara-float 5s ease-in-out infinite;
}
@keyframes iroha-jihatsu-chara-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Bear — FEATURES section (pink bg), right side top area */
body.page-id-45 .iroha-jihatsu__chara--bear {
width: clamp(70px, 9vw, 120px);
height: auto;
right: 3%;
top: 20px;
animation-delay: -1s;
}
/* Squirrel — PROGRAM section (white bg), left side bottom */
body.page-id-45 .iroha-jihatsu__chara--squirrel {
width: clamp(65px, 8vw, 110px);
height: auto;
left: 2%;
bottom: 30px;
animation-delay: -2.5s;
}
/* Group (pumpkin/clover/acorn) — DAILY SCHEDULE section (pink bg), left side */
body.page-id-45 .iroha-jihatsu__chara--group {
width: clamp(90px, 11vw, 160px);
height: auto;
left: 2%;
top: 30px;
animation-delay: -0.5s;
}
/* Cat — FLOW section (white bg), right side bottom */
body.page-id-45 .iroha-jihatsu__chara--cat {
width: clamp(70px, 9vw, 120px);
height: auto;
right: 3%;
bottom: 30px;
animation-delay: -3.5s;
}
/* ================================================================
Mobile character sizing (≤820px)
================================================================ */
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__chara--bear {
width: 55px;
right: 5px;
top: 10px;
}
body.page-id-45 .iroha-jihatsu__chara--squirrel {
width: 50px;
left: 5px;
bottom: 15px;
}
body.page-id-45 .iroha-jihatsu__chara--group {
width: 75px;
left: 5px;
top: 15px;
}
body.page-id-45 .iroha-jihatsu__chara--cat {
width: 55px;
right: 5px;
bottom: 15px;
}
}
/* Very small screens — reduce further */
@media (max-width: 480px) {
body.page-id-45 .iroha-jihatsu__chara {
opacity: .6;
}
body.page-id-45 .iroha-jihatsu__chara--bear { width: 40px; }
body.page-id-45 .iroha-jihatsu__chara--squirrel { width: 38px; }
body.page-id-45 .iroha-jihatsu__chara--group { width: 60px; }
body.page-id-45 .iroha-jihatsu__chara--cat { width: 40px; }
}
/* ================================================================
Jihatsu — SCHEDULE→FLOW wave: make it clearly visible
Final definitive override — higher, with proper colors
================================================================ */
body.page-id-45 .iroha-jihatsu__section--schedule + .iroha-jihatsu__wave--white {
display: block !important;
width: 100% !important;
height: 100px !important;
margin: 0 !important;
padding: 0 !important;
background: #fdeef0 !important;
position: relative !important;
z-index: 1 !important;
line-height: 0 !important;
}
body.page-id-45 .iroha-jihatsu__section--schedule + .iroha-jihatsu__wave--white path {
fill: #ffffff !important;
}
/* Also increase ALL jihatsu waves to 100px for consistency */
body.page-id-45 .iroha-jihatsu__wave {
height: 100px !important;
line-height: 0 !important;
}
/* ================================================================
Jihatsu — ensure SVG wave renders full width, no gaps
================================================================ */
body.page-id-45 .iroha-jihatsu__wave svg,
body.page-id-45 svg.iroha-jihatsu__wave {
display: block !important;
width: 100% !important;
height: 100% !important;
}
/* ================================================================
Jihatsu — CONTACT solid pink + FOOTER pure white (FINAL FIX)
================================================================ */
/* CONTACT section: solid pink, no gradients */
body.page-id-45 .tc-contact {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
}
/* Hide blobs/decorations inside contact that cause color variation */
body.page-id-45 .tc-contact .iroha-contact__blobs,
body.page-id-45 .tc-contact .iroha-blob,
body.page-id-45 .tc-contact .iroha-ct-blob--1,
body.page-id-45 .tc-contact .iroha-ct-blob--2,
body.page-id-45 .tc-contact .iroha-ct-blob--3 {
display: none !important;
}
/* wave into contact: white bg, pink fill */
body.page-id-45 .iroha-about-page__wave--into-contact {
background: #ffffff !important;
height: 100px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact path {
fill: #fdeef0 !important;
}
/* Kill the removed inner contact wave just in case */
body.page-id-45 .tc-contact .iroha-contact__wave {
display: none !important;
}
/* wave into footer: pink bg, white fill */
body.page-id-45 .iroha-about-page__wave--into-footer {
background: #fdeef0 !important;
height: 100px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
/* FOOTER: absolute pure white, no gradients, no background images */
body.page-id-45 .iroha-footer,
body.page-id-45 footer.iroha-footer,
body.page-id-45 .tenri-clone > footer {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-45 .iroha-footer::before,
body.page-id-45 .iroha-footer::after {
display: none !important;
}
body.page-id-45 .iroha-footer__inner {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-45 .iroha-footer__grid {
background: transparent !important;
}
body.page-id-45 .iroha-footer__brand,
body.page-id-45 .iroha-footer__info,
body.page-id-45 .iroha-footer__nav,
body.page-id-45 .iroha-footer__copy,
body.page-id-45 .iroha-footer__name,
body.page-id-45 .iroha-footer__tagline,
body.page-id-45 .iroha-footer__line,
body.page-id-45 .iroha-footer__logo {
background: transparent !important;
background-image: none !important;
}
/* ================================================================
Jihatsu — mobile character sizes BIGGER (override all previous)
================================================================ */
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__chara {
opacity: 1 !important;
}
/* Bear — FEATURES right top */
body.page-id-45 .iroha-jihatsu__chara--bear {
width: 90px !important;
right: -5px !important;
top: 8px !important;
}
/* Squirrel — PROGRAM left bottom */
body.page-id-45 .iroha-jihatsu__chara--squirrel {
width: 80px !important;
left: -5px !important;
bottom: 15px !important;
}
/* Group — DAILY SCHEDULE left top */
body.page-id-45 .iroha-jihatsu__chara--group {
width: 110px !important;
left: -5px !important;
top: 15px !important;
}
/* Cat — FLOW right bottom */
body.page-id-45 .iroha-jihatsu__chara--cat {
width: 90px !important;
right: -5px !important;
bottom: 15px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 .iroha-jihatsu__chara {
opacity: .85 !important;
}
body.page-id-45 .iroha-jihatsu__chara--bear {
width: 80px !important;
}
body.page-id-45 .iroha-jihatsu__chara--squirrel {
width: 70px !important;
}
body.page-id-45 .iroha-jihatsu__chara--group {
width: 100px !important;
}
body.page-id-45 .iroha-jihatsu__chara--cat {
width: 80px !important;
}
}
/* ================================================================
Jihatsu — footer logo pink effect kill (FINAL)
================================================================ */
body.page-id-45 .iroha-footer::before,
body.page-id-45 .iroha-footer::after,
body.page-id-45 footer.iroha-footer::before,
body.page-id-45 footer.iroha-footer::after,
body.page-id-45 .tenri-clone .iroha-footer::before,
body.page-id-45 .tenri-clone .iroha-footer::after {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
body.page-id-45 .iroha-footer__logo-img {
filter: none !important;
}
/* ================================================================
Jihatsu — Sunflower character in ABOUT section (right top)
================================================================ */
body.page-id-45 .iroha-jihatsu__chara--sunflower {
width: clamp(80px, 10vw, 130px);
height: auto;
right: 3%;
top: 15px;
animation-delay: -1.8s;
}
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__chara--sunflower {
width: 90px !important;
right: -5px !important;
top: 8px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 .iroha-jihatsu__chara--sunflower {
width: 80px !important;
}
}
/* ================================================================
Houkago page — dot pattern backgrounds for all sections
================================================================ */
/* Base dot pattern using radial-gradient */
body.page-id-46 .iroha-houkago__section {
position: relative !important;
}
body.page-id-46 .iroha-houkago__section::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: .35 !important;
}
/* Ensure content is above dots */
body.page-id-46 .iroha-houkago__container,
body.page-id-46 .iroha-houkago__head,
body.page-id-46 .iroha-approach__head {
position: relative;
z-index: 1;
}
/* INTRO (white bg) — soft pink dots */
body.page-id-46 .iroha-houkago__section--intro::before {
background-image:
radial-gradient(circle, #ffb2c9 1.2px, transparent 1.2px),
radial-gradient(circle, #ffd96b .8px, transparent .8px);
background-size: 32px 32px, 48px 48px;
background-position: 0 0, 16px 16px;
}
/* KYOTAKU (pink bg) — white + yellow dots */
body.page-id-46 .iroha-houkago__section--kyotaku::before {
background-image:
radial-gradient(circle, rgba(255,255,255,.7) 1.2px, transparent 1.2px),
radial-gradient(circle, #ffd96b .8px, transparent .8px);
background-size: 36px 36px, 52px 52px;
background-position: 0 0, 18px 18px;
}
/* APPROACH (white bg) — green + blue dots */
body.page-id-46 .iroha-houkago__section--approach::before {
background-image:
radial-gradient(circle, #b6dca7 1.2px, transparent 1.2px),
radial-gradient(circle, #a5d4ef .8px, transparent .8px);
background-size: 34px 34px, 50px 50px;
background-position: 0 0, 17px 17px;
}
/* GUIDE (pink bg) — white + pink dots */
body.page-id-46 .iroha-houkago__section--guide::before {
background-image:
radial-gradient(circle, rgba(255,255,255,.7) 1.2px, transparent 1.2px),
radial-gradient(circle, #ffb2c9 .8px, transparent .8px);
background-size: 30px 30px, 46px 46px;
background-position: 0 0, 15px 15px;
}
/* SCHEDULE (pink bg) — white + green dots */
body.page-id-46 .iroha-houkago__section--schedule::before {
background-image:
radial-gradient(circle, rgba(255,255,255,.7) 1.2px, transparent 1.2px),
radial-gradient(circle, #b6dca7 .8px, transparent .8px);
background-size: 38px 38px, 54px 54px;
background-position: 0 0, 19px 19px;
}
/* FLOW (white bg) — pink + yellow dots */
body.page-id-46 .iroha-houkago__section--flow::before {
background-image:
radial-gradient(circle, #ffb2c9 1.2px, transparent 1.2px),
radial-gradient(circle, #ffd96b .8px, transparent .8px);
background-size: 40px 40px, 56px 56px;
background-position: 0 0, 20px 20px;
}
/* ================================================================
Houkago — footer/contact same fixes as jihatsu
================================================================ */
body.page-id-46 .tc-contact {
background: #fdeef0 !important;
background-image: none !important;
}
body.page-id-46 .tc-contact .iroha-contact__blobs,
body.page-id-46 .tc-contact .iroha-blob {
display: none !important;
}
body.page-id-46 .tc-contact .iroha-contact__wave {
display: none !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact {
background: #ffffff !important;
height: 100px !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact path {
fill: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer {
background: #fdeef0 !important;
height: 100px !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
body.page-id-46 .iroha-footer,
body.page-id-46 footer.iroha-footer {
background: #ffffff !important;
background-image: none !important;
}
body.page-id-46 .iroha-footer::before,
body.page-id-46 .iroha-footer::after {
content: none !important;
display: none !important;
}
body.page-id-46 .iroha-footer__inner {
background: #ffffff !important;
}
body.page-id-46 .iroha-footer__logo-img {
filter: none !important;
}
/* ================================================================
Houkago — hero height shorter
================================================================ */
body.page-id-46 .iroha-hero--subpage {
min-height: 340px !important;
padding-bottom: 40px !important;
}
body.page-id-46 .iroha-hero__page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-hero--subpage {
min-height: 240px !important;
padding-bottom: 20px !important;
}
}
/* Hide old houkago hero if any remnant */
body.page-id-46 .iroha-houkago__hero {
display: none !important;
}
/* ================================================================
Houkago — repeating dot pattern via ::after (avoids ::before conflict)
================================================================ */
body.page-id-46 .iroha-houkago__section {
overflow: visible !important;
}
body.page-id-46 .iroha-houkago__section::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: .3 !important;
}
body.page-id-46 .iroha-houkago__container,
body.page-id-46 .iroha-houkago__head,
body.page-id-46 .iroha-approach,
body.page-id-46 .iroha-approach__head,
body.page-id-46 .iroha-approach__list,
body.page-id-46 .iroha-approach__lead {
position: relative !important;
z-index: 1 !important;
}
/* INTRO (white) — pink + yellow */
body.page-id-46 .iroha-houkago__section--intro::after {
background-image:
radial-gradient(circle, #ffb2c9 1.5px, transparent 1.5px),
radial-gradient(circle, #ffd96b 1px, transparent 1px) !important;
background-size: 28px 28px, 44px 44px !important;
background-position: 0 0, 14px 14px !important;
}
/* KYOTAKU (pink) — white + yellow */
body.page-id-46 .iroha-houkago__section--kyotaku::after {
background-image:
radial-gradient(circle, rgba(255,255,255,.8) 1.5px, transparent 1.5px),
radial-gradient(circle, #ffd96b 1px, transparent 1px) !important;
background-size: 32px 32px, 48px 48px !important;
background-position: 0 0, 16px 16px !important;
}
/* APPROACH (white) — green + blue */
body.page-id-46 .iroha-houkago__section--approach::after {
background-image:
radial-gradient(circle, #b6dca7 1.5px, transparent 1.5px),
radial-gradient(circle, #a5d4ef 1px, transparent 1px) !important;
background-size: 30px 30px, 46px 46px !important;
background-position: 0 0, 15px 15px !important;
}
/* GUIDE (pink) — white + pink */
body.page-id-46 .iroha-houkago__section--guide::after {
background-image:
radial-gradient(circle, rgba(255,255,255,.8) 1.5px, transparent 1.5px),
radial-gradient(circle, #ffb2c9 1px, transparent 1px) !important;
background-size: 26px 26px, 42px 42px !important;
background-position: 0 0, 13px 13px !important;
}
/* SCHEDULE (pink) — white + green */
body.page-id-46 .iroha-houkago__section--schedule::after {
background-image:
radial-gradient(circle, rgba(255,255,255,.8) 1.5px, transparent 1.5px),
radial-gradient(circle, #b6dca7 1px, transparent 1px) !important;
background-size: 34px 34px, 50px 50px !important;
background-position: 0 0, 17px 17px !important;
}
/* FLOW (white) — pink + purple */
body.page-id-46 .iroha-houkago__section--flow::after {
background-image:
radial-gradient(circle, #ffb2c9 1.5px, transparent 1.5px),
radial-gradient(circle, #b68be3 1px, transparent 1px) !important;
background-size: 36px 36px, 52px 52px !important;
background-position: 0 0, 18px 18px !important;
}
/* ================================================================
Jihatsu — CONTACT section dot pattern background
================================================================ */
body.page-id-45 .tc-contact::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: .25 !important;
background-image:
radial-gradient(circle, rgba(255,255,255,.9) 1.5px, transparent 1.5px),
radial-gradient(circle, #ffb2c9 1px, transparent 1px) !important;
background-size: 30px 30px, 46px 46px !important;
background-position: 0 0, 15px 15px !important;
}
body.page-id-45 .tc-contact {
position: relative !important;
}
body.page-id-45 .tc-contact .tc-contact-wrap,
body.page-id-45 .tc-contact .tc-contact-head,
body.page-id-45 .tc-contact .iroha-contact__char {
position: relative !important;
z-index: 1 !important;
}
/* ================================================================
Houkago — hero height SAME as jihatsu (override previous)
================================================================ */
body.page-id-46 .iroha-hero--subpage {
min-height: 500px !important;
padding-bottom: 60px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-hero--subpage {
min-height: 300px !important;
padding-bottom: 30px !important;
}
}
/* ================================================================
Houkago — CONTACT section dot pattern
================================================================ */
body.page-id-46 .tc-contact {
position: relative !important;
}
body.page-id-46 .tc-contact::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: .25 !important;
background-image:
radial-gradient(circle, rgba(255,255,255,.9) 1.5px, transparent 1.5px),
radial-gradient(circle, #ffb2c9 1px, transparent 1px) !important;
background-size: 30px 30px, 46px 46px !important;
background-position: 0 0, 15px 15px !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap,
body.page-id-46 .tc-contact .tc-contact-head,
body.page-id-46 .tc-contact .iroha-contact__char {
position: relative !important;
z-index: 1 !important;
}
/* ================================================================
Houkago — CONTACT background white (override)
================================================================ */
body.page-id-46 .tc-contact {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact {
background: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact path {
fill: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer {
background: #ffffff !important;
}
body.page-id-46 .tc-contact::after {
opacity: .2 !important;
background-image:
radial-gradient(circle, #ffb2c9 1.5px, transparent 1.5px),
radial-gradient(circle, #ffd96b 1px, transparent 1px) !important;
background-size: 30px 30px, 46px 46px !important;
background-position: 0 0, 15px 15px !important;
}
/* ================================================================
Jihatsu + Houkago — CONTACT dot pattern FINAL (stronger)
================================================================ */
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact {
position: relative !important;
overflow: visible !important;
}
body.page-id-45 section.tc-contact::after,
body.page-id-46 section.tc-contact::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: .35 !important;
background-image:
radial-gradient(circle, rgba(255,178,201,.6) 2px, transparent 2px),
radial-gradient(circle, rgba(255,217,107,.5) 1.5px, transparent 1.5px) !important;
background-size: 28px 28px, 44px 44px !important;
background-position: 0 0, 14px 14px !important;
background-repeat: repeat !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-45 section.tc-contact .tc-contact-head,
body.page-id-45 section.tc-contact .tc-contact-inner,
body.page-id-45 section.tc-contact .iroha-contact__char,
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-head,
body.page-id-46 section.tc-contact .tc-contact-inner,
body.page-id-46 section.tc-contact .iroha-contact__char {
position: relative !important;
z-index: 2 !important;
}
/* ================================================================
CONTACT section — deco pattern (same as ABOUT sections)
================================================================ */
section.tc-contact {
position: relative !important;
overflow: hidden !important;
}
.iroha-contact__deco {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
overflow: visible !important;
}
section.tc-contact .tc-contact-wrap,
section.tc-contact .tc-contact-head,
section.tc-contact .tc-contact-inner,
section.tc-contact .iroha-contact__char {
position: relative !important;
z-index: 2 !important;
}
/* ================================================================
Houkago — deco pattern display (same as jihatsu sections)
================================================================ */
body.page-id-46 .iroha-houkago__section {
position: relative !important;
overflow: hidden !important;
}
body.page-id-46 .iroha-jihatsu__deco {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
overflow: visible !important;
}
body.page-id-46 .iroha-houkago__section > .iroha-houkago__container,
body.page-id-46 .iroha-houkago__section > .iroha-approach,
body.page-id-46 .iroha-houkago__container,
body.page-id-46 .iroha-approach__head,
body.page-id-46 .iroha-approach__lead,
body.page-id-46 .iroha-approach__list {
position: relative !important;
z-index: 1 !important;
}
/* ================================================================
Jihatsu — CONTACT section compact height (PC)
================================================================ */
@media (min-width: 821px) {
body.page-id-45 section.tc-contact {
padding: 6px 24px 40px !important;
padding-bottom: 40px !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin-top: -40px !important;
}
}
/* ================================================================
Jihatsu — CONTACT even shorter (override all padding)
================================================================ */
body.page-id-45 .tc-contact {
padding-top: 0px !important;
padding-bottom: 20px !important;
}
body.page-id-45 .tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.page-id-45 .tc-contact .tc-contact-head p {
margin-bottom: 8px !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ================================================================
Jihatsu — CONTACT ultra compact (final override)
================================================================ */
body.page-id-45 section.tc-contact {
padding: 30px 24px 30px !important;
}
body.page-id-45 .tc-contact .tc-sec-title {
margin-bottom: 8px !important;
}
body.page-id-45 .tc-contact .tc-sec-title .tc-en {
font-size: 28px !important;
margin-bottom: 2px !important;
}
body.page-id-45 .tc-contact .tc-sec-title .tc-ja {
margin-bottom: 0 !important;
}
body.page-id-45 .tc-contact .tc-contact-head p {
margin: 4px 0 12px !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin-top: 0 !important;
padding: 0 !important;
}
body.page-id-45 .tc-contact .iroha-contact-list {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 .tc-contact .iroha-contact-imgbtn img {
max-height: 70px !important;
width: auto !important;
}
/* ================================================================
Jihatsu — CONTACT fix: restore buttons, compact spacing only
================================================================ */
body.page-id-45 .tc-contact .iroha-contact-imgbtn img {
max-height: none !important;
width: auto !important;
height: auto !important;
}
body.page-id-45 section.tc-contact {
padding: 20px 24px 20px !important;
}
body.page-id-45 .tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 !important;
}
body.page-id-45 .tc-contact .tc-contact-head p {
margin: 4px 0 10px !important;
}
body.page-id-45 .tc-contact .tc-sec-title {
margin: 0 0 4px !important;
padding: 0 !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 .tc-contact .iroha-contact-list {
margin: 0 !important;
padding: 0 !important;
gap: 16px !important;
}
/* ================================================================
Jihatsu — CONTACT: match homepage exactly (restore all)
================================================================ */
body.page-id-45 .tc-contact {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
position: relative !important;
overflow: hidden !important;
padding: 6px 24px 160px !important;
}
body.page-id-45 .tc-contact .iroha-contact__blobs {
display: block !important;
}
body.page-id-45 .tc-contact .iroha-blob,
body.page-id-45 .tc-contact .iroha-ct-blob--1,
body.page-id-45 .tc-contact .iroha-ct-blob--2,
body.page-id-45 .tc-contact .iroha-ct-blob--3,
body.page-id-45 .tc-contact .iroha-ct-blob--4,
body.page-id-45 .tc-contact .iroha-ct-blob--5,
body.page-id-45 .tc-contact .iroha-ct-blob--6 {
display: block !important;
}
body.page-id-45 .tc-contact .iroha-contact__char {
display: block !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave {
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
z-index: 1 !important;
background: transparent !important;
}
body.page-id-45 .tc-contact .iroha-contact__wave path {
fill: #ffe3ea !important;
}
body.page-id-45 .tc-contact .tc-contact-wrap {
position: relative !important;
z-index: 5 !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin-top: -70px !important;
}
/* ================================================================
Jihatsu — CONTACT shorter vertical (final)
================================================================ */
body.page-id-45 .tc-contact {
padding: 6px 24px 80px !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin-top: -30px !important;
}
/* ================================================================
Jihatsu — CONTACT section tighter vertical spacing + smaller bg
================================================================ */
body.page-id-45 .tc-contact {
padding: 0px 24px 40px !important;
}
body.page-id-45 .tc-contact .tc-contact-wrap {
padding-top: 10px !important;
padding-bottom: 0 !important;
}
body.page-id-45 .tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 20px !important;
}
body.page-id-45 .tc-contact .tc-contact-head p {
margin: 4px 0 8px !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
body.page-id-45 .tc-contact .tc-sec-title {
margin-bottom: 4px !important;
}
body.page-id-45 .tc-contact .tc-contact-inner {
margin-top: -10px !important;
padding: 0 !important;
}
body.page-id-45 .tc-contact .iroha-contact-list {
margin-top: 8px !important;
gap: 16px !important;
}
/* Shrink the wave-into-contact divider */
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 50px !important;
}
/* Shrink the wave-into-footer divider */
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 50px !important;
}
@media (max-width: 820px) {
body.page-id-45 .tc-contact {
padding: 0px 16px 30px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 40px !important;
}
}
/* ================================================================
Jihatsu — CONTACT section narrower vertical (override section selector)
================================================================ */
body.page-id-45 section.tc-contact {
padding: 0px 24px 30px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding-top: 10px !important;
padding-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 20px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 4px 0 8px !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title {
margin-bottom: 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
margin-top: 8px !important;
gap: 16px !important;
}
/* Shrink the wave dividers */
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 50px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 50px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0px 16px 24px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 40px !important;
}
}
/* ================================================================
Jihatsu — CONTACT buttons smaller + section tighter
================================================================ */
body.page-id-45 section.tc-contact .iroha-contact-list {
gap: 20px !important;
margin-top: 8px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
width: 280px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
height: auto !important;
max-width: 280px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 260px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 260px !important;
}
}
/* ================================================================
Jihatsu — CONTACT even more compact buttons
================================================================ */
body.page-id-45 section.tc-contact .iroha-contact-list {
justify-content: center !important;
align-items: center !important;
gap: 20px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
width: auto !important;
max-width: 200px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn {
display: block !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
height: auto !important;
max-width: 200px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .iroha-contact-list li {
max-width: 180px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 180px !important;
}
}
/* ================================================================
Jihatsu — CONTACT button size balance (not too small)
================================================================ */
body.page-id-45 section.tc-contact .iroha-contact-list li {
max-width: 240px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 240px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .iroha-contact-list li {
max-width: 200px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 200px !important;
}
}
/* ================================================================
Jihatsu — CONTACT section even shorter
================================================================ */
body.page-id-45 section.tc-contact {
padding: 0px 24px 10px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding-top: 4px !important;
padding-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title {
margin: 0 0 2px !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
font-size: 24px !important;
margin-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
font-size: 13px !important;
margin-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 2px 0 6px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
margin-top: 4px !important;
gap: 14px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
max-width: 180px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 180px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 36px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 36px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0px 16px 8px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
max-width: 160px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 160px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 28px !important;
}
}
/* ================================================================
Jihatsu — CONTACT: restore text/button sizes, keep tight spacing
================================================================ */
/* Reset font sizes back to original */
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
font-size: 32px !important;
margin-bottom: 4px !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
font-size: 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
font-size: 17px !important;
line-height: 1.8 !important;
margin: 6px 0 12px !important;
}
/* Restore button sizes to original */
body.page-id-45 section.tc-contact .iroha-contact-list li {
width: 340px !important;
max-width: 340px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 340px !important;
height: auto !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
gap: 30px !important;
margin-top: 12px !important;
}
/* Keep tight vertical padding on section */
body.page-id-45 section.tc-contact {
padding: 10px 24px 20px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding-top: 8px !important;
padding-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 40px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 0 !important;
padding: 0 40px !important;
}
/* Wave dividers compact */
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 40px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 40px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 8px 16px 16px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 300px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
max-width: 300px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 30px !important;
}
}
/* ================================================================
Jihatsu — CONTACT ultra compact: shrink everything vertically
================================================================ */
body.page-id-45 section.tc-contact {
padding: 4px 24px 10px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin: 0 !important;
padding: 0 40px !important;
}
body.page-id-45 section.tc-contact .tc-sec-title {
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 2px 0 6px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin: 0 !important;
padding: 0 40px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
margin-top: 6px !important;
}
/* Crop button images: show only the horizontal center strip */
body.page-id-45 section.tc-contact .iroha-contact-imgbtn {
display: block !important;
overflow: hidden !important;
border-radius: 16px !important;
height: 120px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
height: auto !important;
max-width: 340px !important;
margin-top: -110px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 30px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 30px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 2px 16px 8px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn {
height: 100px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
margin-top: -90px !important;
max-width: 300px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 24px !important;
}
}
/* ================================================================
Jihatsu — CONTACT slightly more vertical breathing room
================================================================ */
body.page-id-45 section.tc-contact {
padding: 20px 24px 24px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 4px 0 10px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
margin-top: 10px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 40px !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 40px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 14px 16px 18px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 32px !important;
}
}
/* ================================================================
Jihatsu — CONTACT center everything
================================================================ */
body.page-id-45 section.tc-contact .tc-contact-wrap {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-sec-title {
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
/* ================================================================
Houkago — CONTACT white bg + FOOTER pink bg
================================================================ */
/* CONTACT section: white background */
body.page-id-46 .tc-contact,
body.page-id-46 section.tc-contact {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
/* Wave into contact: previous section → white contact */
body.page-id-46 .iroha-about-page__wave--into-contact {
background: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact path {
fill: #ffffff !important;
}
/* Wave into footer: white contact → pink footer */
body.page-id-46 .iroha-about-page__wave--into-footer {
background: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer path {
fill: #fdeef0 !important;
}
/* FOOTER: pink background */
body.page-id-46 .iroha-footer,
body.page-id-46 footer.iroha-footer,
body.page-id-46 .tenri-clone > footer,
body.page-id-46 article.tenri-clone > footer {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
}
body.page-id-46 .iroha-footer__inner {
background: #fdeef0 !important;
}
body.page-id-46 .iroha-footer *:not(a):not(img):not(svg):not(path) {
background-color: transparent !important;
background-image: none !important;
}
/* Contact blobs: hide on white bg (they're pink-tinted) */
body.page-id-46 .tc-contact .iroha-contact__blobs,
body.page-id-46 .tc-contact .iroha-blob,
body.page-id-46 .tc-contact .iroha-contact__char {
display: none !important;
}
/* Contact dot pattern: adjust for white bg */
body.page-id-46 section.tc-contact::after {
opacity: .15 !important;
}
/* ================================================================
Jihatsu — CONTACT: move buttons closer to text
================================================================ */
body.page-id-45 section.tc-contact .tc-contact-head p {
margin-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
margin-top: 2px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: -4px !important;
}
/* ================================================================
Houkago — FLOW→CONTACT wave: pink bg → white fill
================================================================ */
body.page-id-46 .iroha-about-page__wave--into-contact {
background: #fdeef0 !important;
height: 70px !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact path {
fill: #ffffff !important;
}
/* ================================================================
Houkago — CONTACT section compact vertical
================================================================ */
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 10px 24px 20px !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding-top: 4px !important;
padding-bottom: 0 !important;
}
body.page-id-46 .tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 40px !important;
text-align: center !important;
}
body.page-id-46 .tc-contact .tc-contact-head p {
margin: 4px 0 8px !important;
}
body.page-id-46 .tc-contact .tc-sec-title {
margin: 0 0 4px !important;
}
body.page-id-46 .tc-contact .tc-contact-inner {
margin: 0 !important;
padding: 0 40px !important;
}
body.page-id-46 .tc-contact .iroha-contact-list {
margin-top: 6px !important;
}
/* Crop buttons horizontally like jihatsu */
body.page-id-46 .tc-contact .iroha-contact-imgbtn {
display: block !important;
overflow: hidden !important;
border-radius: 16px !important;
height: 120px !important;
}
body.page-id-46 .tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
height: auto !important;
max-width: 340px !important;
margin-top: -110px !important;
}
/* CONTACT→FOOTER wave: white bg → pink fill */
body.page-id-46 .iroha-about-page__wave--into-footer {
background: #ffffff !important;
height: 70px !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer path {
fill: #fdeef0 !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 8px 16px 16px !important;
}
body.page-id-46 .tc-contact .iroha-contact-imgbtn {
height: 100px !important;
}
body.page-id-46 .tc-contact .iroha-contact-imgbtn img {
margin-top: -90px !important;
max-width: 300px !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact,
body.page-id-46 .iroha-about-page__wave--into-footer {
height: 50px !important;
}
}
/* ================================================================
Houkago — CONTACT center everything
================================================================ */
body.page-id-46 .tc-contact .tc-contact-wrap {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto !important;
}
body.page-id-46 .tc-contact .tc-contact-head {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
body.page-id-46 .tc-contact .tc-contact-head p {
text-align: center !important;
}
body.page-id-46 .tc-contact .tc-sec-title {
text-align: center !important;
}
body.page-id-46 .tc-contact .tc-contact-inner {
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
body.page-id-46 .tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
/* ================================================================
2026-04-17 FIX: Jihatsu + Houkago CONTACT section
Match front-page CONTACT layout exactly (screenshot reference)
================================================================ */
/* --- Jihatsu (page-id-45) CONTACT: full-size buttons, proper spacing --- */
body.page-id-45 section.tc-contact {
padding: 60px 24px 160px !important;
background: #fdeef0 !important;
position: relative !important;
overflow: hidden !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 60px 0 0 !important;
max-width: 1040px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 5 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
text-align: center !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif !important;
font-weight: 900 !important;
font-size: clamp(28px, 3.4vw, 44px) !important;
letter-spacing: .08em !important;
color: #2a1a22 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
margin: 10px 0 0 !important;
font-weight: 700 !important;
font-size: clamp(12px, 1vw, 14px) !important;
letter-spacing: .26em !important;
color: #6b5158 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.85 !important;
color: #1f0f15 !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 20px !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
gap: 32px !important;
flex-wrap: wrap !important;
max-width: 860px !important;
margin: 0 auto !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
flex: 1 1 320px !important;
max-width: 380px !important;
width: auto !important;
}
/* Remove crop: show full button image */
body.page-id-45 section.tc-contact .iroha-contact-imgbtn {
display: block !important;
overflow: visible !important;
border-radius: 0 !important;
height: auto !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
height: auto !important;
max-width: none !important;
margin-top: 0 !important;
border-radius: 0 !important;
filter: drop-shadow(0 18px 30px rgba(232, 83, 123, .28)) !important;
}
/* Blobs: ensure visible */
body.page-id-45 section.tc-contact .iroha-contact__blobs {
display: block !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
/* Character: ensure visible */
body.page-id-45 section.tc-contact .iroha-contact__char {
display: block !important;
}
body.page-id-45 section.tc-contact .iroha-contact__char--pair {
position: absolute !important;
bottom: 36px !important;
left: 3% !important;
width: clamp(140px, 14vw, 200px) !important;
z-index: 3 !important;
pointer-events: none !important;
filter: drop-shadow(0 14px 22px rgba(232, 83, 123, .22)) !important;
}
/* Wave dividers */
body.page-id-45 .iroha-about-page__wave--into-contact {
height: 100px !important;
background: #ffffff !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact path {
fill: #fdeef0 !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 100px !important;
background: #fdeef0 !important;
}
body.page-id-45 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
/* Contact bottom wave */
body.page-id-45 section.tc-contact .iroha-contact__wave {
position: absolute !important;
left: 0 !important; right: 0 !important;
bottom: -2px !important;
width: 100% !important;
height: clamp(38px, 4.5vw, 60px) !important;
display: block !important;
z-index: 3 !important;
pointer-events: none !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 40px 16px 120px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 40px 0 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 340px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__blobs {
display: none !important;
}
body.page-id-45 section.tc-contact .iroha-contact__char--pair {
width: clamp(100px, 28vw, 150px) !important;
bottom: 16px !important;
}
body.page-id-45 .iroha-about-page__wave--into-contact,
body.page-id-45 .iroha-about-page__wave--into-footer {
height: 60px !important;
}
}
/* --- Houkago (page-id-46) CONTACT: match front-page exactly --- */
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 60px 24px 160px !important;
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
position: relative !important;
overflow: hidden !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding: 60px 0 0 !important;
max-width: 1040px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 5 !important;
}
body.page-id-46 .tc-contact .tc-contact-head {
text-align: center !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
body.page-id-46 .tc-contact .tc-sec-title .tc-en {
font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", Nunito, sans-serif !important;
font-weight: 900 !important;
font-size: clamp(28px, 3.4vw, 44px) !important;
letter-spacing: .08em !important;
color: #2a1a22 !important;
}
body.page-id-46 .tc-contact .tc-sec-title .tc-ja {
margin: 10px 0 0 !important;
font-weight: 700 !important;
font-size: clamp(12px, 1vw, 14px) !important;
letter-spacing: .26em !important;
color: #6b5158 !important;
}
body.page-id-46 .tc-contact .tc-contact-head p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.85 !important;
color: #1f0f15 !important;
text-align: center !important;
}
body.page-id-46 .tc-contact .tc-contact-inner {
margin-top: 20px !important;
padding: 0 !important;
}
body.page-id-46 .tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
gap: 32px !important;
flex-wrap: wrap !important;
max-width: 860px !important;
margin: 0 auto !important;
}
body.page-id-46 .tc-contact .iroha-contact-list li {
flex: 1 1 320px !important;
max-width: 380px !important;
width: auto !important;
}
/* Remove crop: show full button image */
body.page-id-46 .tc-contact .iroha-contact-imgbtn {
display: block !important;
overflow: visible !important;
border-radius: 0 !important;
height: auto !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
body.page-id-46 .tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
height: auto !important;
max-width: none !important;
margin-top: 0 !important;
border-radius: 0 !important;
filter: drop-shadow(0 18px 30px rgba(232, 83, 123, .28)) !important;
}
/* Blobs: restore on pink bg */
body.page-id-46 .tc-contact .iroha-contact__blobs,
body.page-id-46 .tc-contact .iroha-blob {
display: block !important;
}
body.page-id-46 .tc-contact .iroha-contact__blobs {
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
/* Character: restore */
body.page-id-46 .tc-contact .iroha-contact__char {
display: block !important;
}
body.page-id-46 .tc-contact .iroha-contact__char--pair {
position: absolute !important;
bottom: 36px !important;
left: 3% !important;
width: clamp(140px, 14vw, 200px) !important;
z-index: 3 !important;
pointer-events: none !important;
filter: drop-shadow(0 14px 22px rgba(232, 83, 123, .22)) !important;
}
/* Wave dividers — pink bg */
body.page-id-46 .iroha-about-page__wave--into-contact {
height: 100px !important;
background: #ffffff !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact path {
fill: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer {
height: 100px !important;
background: #fdeef0 !important;
}
body.page-id-46 .iroha-about-page__wave--into-footer path {
fill: #ffffff !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 40px 16px 120px !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding: 40px 0 0 !important;
}
body.page-id-46 .tc-contact .iroha-contact-list {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
body.page-id-46 .tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 340px !important;
}
body.page-id-46 .tc-contact .iroha-contact__blobs {
display: none !important;
}
body.page-id-46 .tc-contact .iroha-contact__char--pair {
width: clamp(100px, 28vw, 150px) !important;
bottom: 16px !important;
}
body.page-id-46 .iroha-about-page__wave--into-contact,
body.page-id-46 .iroha-about-page__wave--into-footer {
height: 60px !important;
}
}
/* ================================================================
2026-04-17 FIX #2: Match top-page CONTACT vertical height exactly
Top page: tc-contact-wrap padding 70px top + 60px bottom,
section padding-bottom 160px (wave space)
================================================================ */
/* --- Jihatsu (page-id-45) --- */
body.page-id-45 section.tc-contact {
padding: 0 24px 160px !important;
background: linear-gradient(180deg, #fff4f8 0%, #ffeaf1 100%) !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 70px 0 60px !important;
max-width: 1040px !important;
margin: 0 auto !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 8px 0 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 20px !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn {
height: auto !important;
overflow: visible !important;
border-radius: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img {
margin-top: 0 !important;
max-width: none !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0 16px 120px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 56px 0 40px !important;
}
}
/* --- Houkago (page-id-46) --- */
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 0 24px 160px !important;
background: linear-gradient(180deg, #fff4f8 0%, #ffeaf1 100%) !important;
background-color: transparent !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding: 70px 0 60px !important;
max-width: 1040px !important;
margin: 0 auto !important;
}
body.page-id-46 .tc-contact .tc-contact-head {
margin-bottom: 0 !important;
padding: 0 !important;
}
body.page-id-46 .tc-contact .tc-contact-head p {
margin: 8px 0 0 !important;
}
body.page-id-46 .tc-contact .tc-contact-inner {
margin-top: 20px !important;
padding: 0 !important;
}
body.page-id-46 .tc-contact .iroha-contact-imgbtn {
height: auto !important;
overflow: visible !important;
border-radius: 0 !important;
}
body.page-id-46 .tc-contact .iroha-contact-imgbtn img {
margin-top: 0 !important;
max-width: none !important;
}
/* Restore blobs + character on pink gradient bg */
body.page-id-46 .tc-contact .iroha-contact__blobs,
body.page-id-46 .tc-contact .iroha-blob,
body.page-id-46 .tc-contact .iroha-contact__char {
display: block !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 0 16px 120px !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding: 56px 0 40px !important;
}
}
/* ================================================================
2026-04-17 FIX #3: CONTACT — exact replica of top page
Reset all previous page-id overrides; let iroha-hero.css base
styles do their job (same as front-page rendering).
================================================================ */
/* --- Both jihatsu + houkago: undo ALL previous contact overrides --- */
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding: 0 !important;
padding-bottom: 160px !important;
background: linear-gradient(180deg, #fff4f8 0%, #ffeaf1 100%) !important;
position: relative !important;
overflow: hidden !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-46 .tc-contact .tc-contact-wrap {
padding: 70px 0 60px !important;
max-width: 1040px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 5 !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-head,
body.page-id-46 .tc-contact .tc-contact-head {
text-align: center !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p,
body.page-id-46 .tc-contact .tc-contact-head p {
margin: 8px 0 0 !important;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.85 !important;
color: #1f0f15 !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner,
body.page-id-46 .tc-contact .tc-contact-inner {
margin-top: 20px !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list,
body.page-id-46 .tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
gap: 32px !important;
flex-wrap: wrap !important;
max-width: 860px !important;
margin: 0 auto !important;
list-style: none !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li,
body.page-id-46 .tc-contact .iroha-contact-list li {
flex: 1 1 320px !important;
max-width: 380px !important;
width: auto !important;
list-style: none !important;
}
/* Full-size image buttons — NO crop */
body.page-id-45 section.tc-contact .iroha-contact-imgbtn,
body.page-id-46 .tc-contact .iroha-contact-imgbtn {
display: block !important;
height: auto !important;
overflow: visible !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
text-decoration: none !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img,
body.page-id-46 .tc-contact .iroha-contact-imgbtn img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
margin-top: 0 !important;
border-radius: 0 !important;
filter: drop-shadow(0 18px 30px rgba(232, 83, 123, .28)) !important;
}
/* Blobs visible */
body.page-id-45 section.tc-contact .iroha-contact__blobs,
body.page-id-46 .tc-contact .iroha-contact__blobs {
display: block !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
body.page-id-45 section.tc-contact .iroha-contact__blobs .iroha-blob,
body.page-id-46 .tc-contact .iroha-contact__blobs .iroha-blob {
display: block !important;
}
/* Character visible */
body.page-id-45 section.tc-contact .iroha-contact__char,
body.page-id-46 .tc-contact .iroha-contact__char {
display: block !important;
}
body.page-id-45 section.tc-contact .iroha-contact__char--pair,
body.page-id-46 .tc-contact .iroha-contact__char--pair {
position: absolute !important;
bottom: 36px !important;
left: 3% !important;
width: clamp(140px, 14vw, 200px) !important;
z-index: 3 !important;
pointer-events: none !important;
filter: drop-shadow(0 14px 22px rgba(232, 83, 123, .22)) !important;
}
/* Contact wave */
body.page-id-45 section.tc-contact .iroha-contact__wave,
body.page-id-46 .tc-contact .iroha-contact__wave {
position: absolute !important;
left: 0 !important; right: 0 !important; bottom: -2px !important;
width: 100% !important;
height: clamp(38px, 4.5vw, 60px) !important;
display: block !important;
z-index: 3 !important;
pointer-events: none !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
padding-bottom: 120px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-46 .tc-contact .tc-contact-wrap {
padding: 56px 16px 40px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list,
body.page-id-46 .tc-contact .iroha-contact-list {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li,
body.page-id-46 .tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 340px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__blobs,
body.page-id-46 .tc-contact .iroha-contact__blobs {
display: none !important;
}
body.page-id-45 section.tc-contact .iroha-contact__char--pair,
body.page-id-46 .tc-contact .iroha-contact__char--pair {
width: clamp(100px, 28vw, 150px) !important;
bottom: 16px !important;
}
}
/* ================================================================
2026-04-17 FIX #4 — FINAL: Subpage CONTACT = exact top-page clone
Remove ALL previous subpage-specific contact overrides by
resetting to the same values iroha-hero.css applies on top page.
================================================================ */
/* Section itself: no extra padding on top; bottom 160px for wave */
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact,
body.page-id-47 section.tc-contact,
body.page-id-48 section.tc-contact,
body.page-id-50 section.tc-contact {
padding: 0 0 160px 0 !important;
background: linear-gradient(180deg, #fff4f8 0%, #ffeaf1 100%) !important;
position: relative !important;
overflow: hidden !important;
}
/* Wrap: 70px top + 60px bottom = same as top page */
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-47 section.tc-contact .tc-contact-wrap,
body.page-id-48 section.tc-contact .tc-contact-wrap,
body.page-id-50 section.tc-contact .tc-contact-wrap {
padding: 70px 0 60px !important;
max-width: 1040px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 5 !important;
text-align: center !important;
}
/* Head */
body.page-id-45 section.tc-contact .tc-contact-head,
body.page-id-46 section.tc-contact .tc-contact-head,
body.page-id-47 section.tc-contact .tc-contact-head,
body.page-id-48 section.tc-contact .tc-contact-head,
body.page-id-50 section.tc-contact .tc-contact-head {
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Desc text */
body.page-id-45 section.tc-contact .tc-contact-head p,
body.page-id-46 section.tc-contact .tc-contact-head p,
body.page-id-47 section.tc-contact .tc-contact-head p,
body.page-id-48 section.tc-contact .tc-contact-head p,
body.page-id-50 section.tc-contact .tc-contact-head p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.85 !important;
color: #1f0f15 !important;
text-align: center !important;
}
/* Inner */
body.page-id-45 section.tc-contact .tc-contact-inner,
body.page-id-46 section.tc-contact .tc-contact-inner,
body.page-id-47 section.tc-contact .tc-contact-inner,
body.page-id-48 section.tc-contact .tc-contact-inner,
body.page-id-50 section.tc-contact .tc-contact-inner {
margin: 20px 0 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
/* Button list */
body.page-id-45 section.tc-contact .iroha-contact-list,
body.page-id-46 section.tc-contact .iroha-contact-list,
body.page-id-47 section.tc-contact .iroha-contact-list,
body.page-id-48 section.tc-contact .iroha-contact-list,
body.page-id-50 section.tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
gap: 32px !important;
flex-wrap: wrap !important;
max-width: 860px !important;
margin: 0 auto !important;
list-style: none !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li,
body.page-id-46 section.tc-contact .iroha-contact-list li,
body.page-id-47 section.tc-contact .iroha-contact-list li,
body.page-id-48 section.tc-contact .iroha-contact-list li,
body.page-id-50 section.tc-contact .iroha-contact-list li {
flex: 1 1 320px !important;
max-width: 380px !important;
width: auto !important;
list-style: none !important;
}
/* Image buttons: full size, NO crop */
body.page-id-45 section.tc-contact .iroha-contact-imgbtn,
body.page-id-46 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-48 section.tc-contact .iroha-contact-imgbtn,
body.page-id-50 section.tc-contact .iroha-contact-imgbtn {
display: block !important;
height: auto !important;
overflow: visible !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
text-decoration: none !important;
}
body.page-id-45 section.tc-contact .iroha-contact-imgbtn img,
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img,
body.page-id-48 section.tc-contact .iroha-contact-imgbtn img,
body.page-id-50 section.tc-contact .iroha-contact-imgbtn img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
margin-top: 0 !important;
border-radius: 0 !important;
filter: drop-shadow(0 18px 30px rgba(232,83,123,.28)) !important;
}
/* Blobs + char visible */
body.page-id-45 section.tc-contact .iroha-contact__blobs,
body.page-id-46 section.tc-contact .iroha-contact__blobs,
body.page-id-47 section.tc-contact .iroha-contact__blobs,
body.page-id-48 section.tc-contact .iroha-contact__blobs,
body.page-id-50 section.tc-contact .iroha-contact__blobs {
display: block !important;
}
body.page-id-45 section.tc-contact .iroha-contact__char,
body.page-id-46 section.tc-contact .iroha-contact__char,
body.page-id-47 section.tc-contact .iroha-contact__char,
body.page-id-48 section.tc-contact .iroha-contact__char,
body.page-id-50 section.tc-contact .iroha-contact__char {
display: block !important;
}
/* Contact wave */
body.page-id-45 section.tc-contact > .iroha-contact__wave,
body.page-id-46 section.tc-contact > .iroha-contact__wave,
body.page-id-47 section.tc-contact > .iroha-contact__wave,
body.page-id-48 section.tc-contact > .iroha-contact__wave,
body.page-id-50 section.tc-contact > .iroha-contact__wave {
position: absolute !important;
left: 0 !important; right: 0 !important; bottom: -2px !important;
width: 100% !important;
height: clamp(38px,4.5vw,60px) !important;
display: block !important;
z-index: 3 !important;
pointer-events: none !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact,
body.page-id-47 section.tc-contact,
body.page-id-48 section.tc-contact,
body.page-id-50 section.tc-contact {
padding-bottom: 120px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-47 section.tc-contact .tc-contact-wrap,
body.page-id-48 section.tc-contact .tc-contact-wrap,
body.page-id-50 section.tc-contact .tc-contact-wrap {
padding: 56px 16px 40px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list,
body.page-id-46 section.tc-contact .iroha-contact-list,
body.page-id-47 section.tc-contact .iroha-contact-list,
body.page-id-48 section.tc-contact .iroha-contact-list,
body.page-id-50 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
body.page-id-45 section.tc-contact .iroha-contact-list li,
body.page-id-46 section.tc-contact .iroha-contact-list li,
body.page-id-47 section.tc-contact .iroha-contact-list li,
body.page-id-48 section.tc-contact .iroha-contact-list li,
body.page-id-50 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 340px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__blobs,
body.page-id-46 section.tc-contact .iroha-contact__blobs,
body.page-id-47 section.tc-contact .iroha-contact__blobs,
body.page-id-48 section.tc-contact .iroha-contact__blobs,
body.page-id-50 section.tc-contact .iroha-contact__blobs {
display: none !important;
}
}
/* ============================================================
FINAL: /jihatsu/ & /houkago/ — CONTACT tight vertical padding
Override ALL earlier rules. Text & button sizes untouched.
============================================================ */
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact {
padding: 4px 24px 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-top: 8px !important;
padding-bottom: 12px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head,
body.page-id-46 section.tc-contact .tc-contact-head {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner,
body.page-id-46 section.tc-contact .tc-contact-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 12px !important;
}
body.page-id-45 section.tc-contact > img[src*="nami-r"],
body.page-id-46 section.tc-contact > img[src*="nami-r"] {
display: none !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave,
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 30px !important;
margin-bottom: -1px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact,
body.page-id-46 section.tc-contact {
padding: 2px 16px 2px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-top: 6px !important;
padding-bottom: 10px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner,
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 8px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave,
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 22px !important;
}
}
/* ============================================================
/houkago/ — CONTACT extra tight vertical padding
============================================================ */
body.page-id-46 section.tc-contact {
padding: 0 24px 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-top: 2px !important;
padding-bottom: 6px !important;
}
body.page-id-46 section.tc-contact .tc-contact-head {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head p {
margin: 4px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-maru {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
padding: 0 !important;
margin-top: 6px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 20px !important;
margin-bottom: -1px !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact {
padding: 0 16px 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-top: 2px !important;
padding-bottom: 4px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 14px !important;
}
}
/* ============================================================
/houkago/ — CONTACT extreme tight
============================================================ */
body.page-id-46 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 0 24px !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head p {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-en,
body.page-id-46 section.tc-contact .tc-sec-title .tc-ja {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-maru {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
padding: 0 24px !important;
margin: 2px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .iroha-contact__blobs {
display: none !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 10px !important;
margin: 0 !important;
display: block !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-inner {
padding-left: 16px !important;
padding-right: 16px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 8px !important;
}
}
/* ============================================================
/houkago/ — CONTACT ultimate tight (line-heights + gaps)
============================================================ */
body.page-id-46 section.tc-contact .tc-contact-head p {
line-height: 1.3 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-ja {
margin-top: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
gap: 20px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list li {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 0 !important;
display: none !important;
}
/* ============================================================
/houkago/ — CONTACT ultra tight: section + surrounding gaps
============================================================ */
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 20px !important;
margin-bottom: 0 !important;
}
body.page-id-46 .iroha-houkago {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.page-id-46 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 8px 24px 8px !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
padding: 0 24px !important;
margin: 4px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-list li a img {
display: block !important;
}
body.page-id-46 .iroha-footer {
margin-top: 0 !important;
padding-top: 20px !important;
}
/* ============================================================
/houkago/ — CONTACT crush visible vertical space
============================================================ */
/* Cocoon main/content container padding reset on this page */
body.page-id-46 #main,
body.page-id-46 .main,
body.page-id-46 #content,
body.page-id-46 .content,
body.page-id-46 .entry-content,
body.page-id-46 article.post-45,
body.page-id-46 article {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Flow section: slash bottom padding hard */
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.page-id-46 .iroha-houkago {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Contact section itself */
body.page-id-46 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 2px 24px 2px !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
padding: 0 24px !important;
margin: 2px 0 2px !important;
}
body.page-id-46 section.tc-contact .tc-contact-head p {
margin: 0 !important;
line-height: 1.2 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-maru {
display: none !important;
}
/* Remove gap between contact and footer */
body.page-id-46 .iroha-footer {
margin-top: 0 !important;
padding-top: 10px !important;
}
body.page-id-46 section.tc-contact + * {
margin-top: 0 !important;
}
/* ============================================================
/jihatsu/ — Show FLOW→CONTACT and CONTACT→FOOTER waves
============================================================ */
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
display: block !important;
width: 100%;
height: 80px;
background: #ffffff !important;
margin: 0 !important;
margin-bottom: -1px !important;
line-height: 0 !important;
vertical-align: bottom;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact path {
fill: #fdeef0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
display: block !important;
width: 100%;
height: 50px !important;
background: #fdeef0 !important;
margin: 0 !important;
margin-top: -1px !important;
line-height: 0 !important;
vertical-align: bottom;
}
body.page-id-45 section.tc-contact .iroha-contact__wave path {
fill: #ffffff !important;
}
@media (max-width: 820px) {
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 50px;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 30px !important;
}
}
/* ============================================================
/jihatsu/ — Force wave fill == CONTACT bg (exact match)
============================================================ */
body.page-id-45 section.tc-contact {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
border-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-45 section.tc-contact > img[src*="nami-r"] {
display: none !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #ffffff !important;
background-color: #ffffff !important;
margin: 0 !important;
margin-bottom: -2px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact path {
fill: #fdeef0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
display: block !important;
width: 100% !important;
height: 50px !important;
background: #fdeef0 !important;
background-color: #fdeef0 !important;
margin: 0 !important;
margin-top: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave path {
fill: #ffffff !important;
}
/* ============================================================
/jihatsu/ — SP: center buttons vertically & horizontally
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-inner {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 16px !important;
margin-top: 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
max-width: 360px !important;
list-style: none !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li {
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li a {
display: block !important;
width: 100% !important;
margin: 0 auto !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li a img {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 auto !important;
}
}
/* ============================================================
/jihatsu/ — SP: pull reserve button up (close gap between buttons)
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -120px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -100px !important;
}
}
/* ============================================================
/jihatsu/ — SP: pull reserve button up MORE
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -220px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -180px !important;
}
}
/* ============================================================
/jihatsu/ — SP: push CONTACT heading & text down
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 80px !important;
padding-top: 20px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 60px !important;
padding-top: 16px !important;
}
}
/* ============================================================
/jihatsu/ — SP: push CONTACT heading & text DOWN more
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 160px !important;
padding-top: 24px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 130px !important;
padding-top: 20px !important;
}
}
/* ============================================================
/jihatsu/ — SP: shrink CONTACT section vertical height
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 0 16px 10px !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 40px !important;
padding-top: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 8px !important;
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 10px !important;
}
body.page-id-45 section.tc-contact .iroha-jihatsu__wave--flow-to-contact {
height: 40px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 40px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 24px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 30px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding-bottom: 8px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 8px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 30px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 20px !important;
}
}
/* ============================================================
/jihatsu/ — SP: push CONTACT heading ONLY down
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 80px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 70px !important;
}
}
/* ============================================================
/jihatsu/ — SP: push CONTACT heading further down
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 160px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 140px !important;
}
}
/* ============================================================
/jihatsu/ — SP: shrink overall CONTACT section height
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding-top: 0 !important;
padding-bottom: 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 60px !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin-top: 6px !important;
margin-bottom: 0 !important;
line-height: 1.5 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 20px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 40px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -180px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 50px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding-bottom: 2px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 16px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 30px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -150px !important;
}
}
/* ============================================================
/jihatsu/ — SP: buttons stacked tight (no big gap, no overlap)
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 12px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: 0 !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 10px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: 0 !important;
}
}
/* ============================================================
/about/ — Hide CONTACT char pair (sunflower+clover) definitively
============================================================ */
body.page-id-44 .tc-contact .iroha-contact__char,
body.page-id-44 .tc-contact .iroha-contact__char--pair,
body.page-id-44 section.tc-contact img.iroha-contact__char,
body.page-id-44 section.tc-contact img.iroha-contact__char--pair {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
/* ============================================================
/jihatsu/ — CONTACT minimal vertical height (FINAL)
============================================================ */
body.page-id-45 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 12px 24px 12px !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 4px 0 0 !important;
line-height: 1.5 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-maru {
display: none !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
padding: 0 24px !important;
margin: 10px 0 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
margin: 0 !important;
padding: 0 !important;
gap: 20px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 40px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 24px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 8px 16px 8px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 60px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 6px !important;
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 12px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 28px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 16px !important;
}
}
/* ============================================================
/jihatsu/ — SP ONLY: CONTACT section ultra short (PC unchanged)
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 4px 16px 4px !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 20px !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 2px 0 0 !important;
line-height: 1.4 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 6px !important;
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 8px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li {
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: 0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 18px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 10px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 14px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 2px 16px 2px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 6px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 14px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 8px !important;
}
}
/* ============================================================
/jihatsu/ — SP ONLY: CONTACT extreme short
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 0 !important;
line-height: 1.3 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 2px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 2px !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
line-height: 1 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
line-height: 1 !important;
margin: 2px 0 0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 8px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 4px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 2px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 6px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 2px !important;
}
}
/* ============================================================
/jihatsu/ — SP ONLY: target compact look (match target screenshot)
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 20px 16px 20px !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 0 !important;
padding: 0 !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
font-size: 28px !important;
line-height: 1.1 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
font-size: 12px !important;
line-height: 1.2 !important;
margin: 4px 0 0 !important;
letter-spacing: 0.3em !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
font-size: 13px !important;
line-height: 1.6 !important;
margin: 10px 0 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 18px !important;
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
margin: 0 auto !important;
padding: 0 !important;
max-width: 300px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li {
width: 100% !important;
max-width: 260px !important;
margin: 0 auto !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li a,
body.page-id-45 section.tc-contact .tc-contact-list li a img {
display: block !important;
width: 100% !important;
height: auto !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 20px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 16px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 16px 16px 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 14px !important;
}
}
/* ============================================================
/jihatsu/ — SP ONLY: shrink PINK section total height
============================================================ */
@media (max-width: 820px) {
body.page-id-45 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 16px 16px 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 10px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 4px !important;
margin: 0 auto !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li,
body.page-id-45 section.tc-contact .tc-contact-list li:first-child,
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2),
body.page-id-45 section.tc-contact .tc-contact-list li:last-child {
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 12px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 8px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 12px 16px 12px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 8px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 2px !important;
}
body.page-id-45 .iroha-jihatsu__wave--flow-to-contact {
height: 8px !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 6px !important;
}
}
/* ============================================================
/jihatsu/ — Bigger white wave divider between CONTACT and FOOTER
============================================================ */
body.page-id-45 section.tc-contact .iroha-contact__wave {
display: block !important;
width: 100% !important;
height: 70px !important;
background: #fdeef0 !important;
margin: 0 !important;
margin-top: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-45 section.tc-contact .iroha-contact__wave path {
fill: #ffffff !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 50px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 40px !important;
}
}
/* ============================================================
/jihatsu/ — Even bigger white wave divider
============================================================ */
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 140px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 90px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .iroha-contact__wave {
height: 70px !important;
}
}
/* ============================================================
/jihatsu/ — Hide CONTACT pair character (sunflower+clover)
============================================================ */
body.page-id-45 section.tc-contact .iroha-contact__char,
body.page-id-45 section.tc-contact .iroha-contact__char--pair,
body.page-id-45 section.tc-contact img.iroha-contact__char,
body.page-id-45 section.tc-contact img.iroha-contact__char--pair {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
/* ============================================================
/jihatsu/ — CONTACT section MINIMAL total height (SP & PC)
============================================================ */
body.page-id-45 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 8px 16px 8px !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
line-height: 1 !important;
margin: 0 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
line-height: 1 !important;
margin: 2px 0 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 4px 0 0 !important;
line-height: 1.4 !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin: 6px 0 0 !important;
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 4px !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li,
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin: 0 auto !important;
padding: 0 !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 6px 16px 6px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 2px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 4px 16px 4px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 2px !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 0 !important;
}
}
/* ============================================================
/jihatsu/ — CONTACT section ZERO padding (all environments)
============================================================ */
body.page-id-45 section.tc-contact,
body.page-id-45 section.tc-contact *,
body.page-id-45 section.tc-contact .tc-contact-wrap,
body.page-id-45 section.tc-contact .tc-contact-head,
body.page-id-45 section.tc-contact .tc-contact-inner,
body.page-id-45 section.tc-contact .tc-contact-list,
body.page-id-45 section.tc-contact .tc-contact-list li,
body.page-id-45 section.tc-contact .tc-sec-title,
body.page-id-45 section.tc-contact .tc-sec-title .tc-en,
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja,
body.page-id-45 section.tc-contact .tc-contact-head p {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-45 section.tc-contact {
min-height: 0 !important;
padding: 2px 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
padding: 0 16px !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-en {
line-height: 1 !important;
}
body.page-id-45 section.tc-contact .tc-sec-title .tc-ja {
line-height: 1 !important;
margin: 2px 0 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-head p {
line-height: 1.3 !important;
margin: 2px 0 0 !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
gap: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li a img {
display: block !important;
line-height: 0 !important;
}
/* ============================================================
/jihatsu/ — Push CONTACT heading & text down significantly
============================================================ */
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 80px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 100px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 80px !important;
}
}
/* ============================================================
/jihatsu/ — Pull "Web from" button up
============================================================ */
body.page-id-45 section.tc-contact .tc-contact-list li:first-child {
margin-top: -40px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:first-child {
margin-top: -30px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:first-child {
margin-top: -20px !important;
}
}
/* ============================================================
/jihatsu/ — Pull "Web from" button up MORE
============================================================ */
body.page-id-45 section.tc-contact .tc-contact-list li:first-child {
margin-top: -100px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:first-child {
margin-top: -80px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:first-child {
margin-top: -60px !important;
}
}
/* ============================================================
/jihatsu/ — Pull "Reserve" (2nd) button up
============================================================ */
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -100px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -80px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -60px !important;
}
}
/* ============================================================
/jihatsu/ — Pull Reserve button up MUCH MORE
============================================================ */
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -240px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -200px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -160px !important;
}
}
/* ============================================================
/jihatsu/ — Pull Reserve button up more (tighter)
============================================================ */
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -300px !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -250px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2) {
margin-top: -210px !important;
}
}
/* ============================================================
/jihatsu/ — Show pair character at CONTACT bottom-left
============================================================ */
body.page-id-45 section.tc-contact .iroha-contact__char--jihatsu-bottomleft {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
left: 20px !important;
bottom: 20px !important;
width: 140px !important;
height: auto !important;
z-index: 3 !important;
pointer-events: none !important;
}
@media (max-width: 820px) {
body.page-id-45 section.tc-contact .iroha-contact__char--jihatsu-bottomleft {
left: 8px !important;
bottom: 12px !important;
width: 90px !important;
}
}
@media (max-width: 480px) {
body.page-id-45 section.tc-contact .iroha-contact__char--jihatsu-bottomleft {
left: 6px !important;
bottom: 8px !important;
width: 70px !important;
}
}
body.page-id-45 section.tc-contact {
position: relative !important;
overflow: visible !important;
}
/* ============================================================
/jihatsu/ — PC RESET: remove previous negative margins on buttons
Keep SP overrides intact (those have their own @media blocks).
============================================================ */
@media (min-width: 821px) {
body.page-id-45 section.tc-contact .tc-contact-list {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 30px !important;
margin: 20px auto 0 !important;
padding: 0 !important;
max-width: 900px !important;
list-style: none !important;
}
body.page-id-45 section.tc-contact .tc-contact-list li,
body.page-id-45 section.tc-contact .tc-contact-list li:first-child,
body.page-id-45 section.tc-contact .tc-contact-list li:nth-child(2),
body.page-id-45 section.tc-contact .tc-contact-list li:last-child {
margin: 0 !important;
padding: 0 !important;
width: 340px !important;
max-width: 340px !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
margin-top: 20px !important;
}
body.page-id-45 section.tc-contact .tc-contact-wrap {
padding: 30px 24px 30px !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
margin-top: 20px !important;
}
}
/* ============================================================
/jihatsu/ — PC ONLY: shift CONTACT heading & text to the right
============================================================ */
@media (min-width: 821px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-left: 200px !important;
text-align: center !important;
}
}
/* ============================================================
/jihatsu/ — PC ONLY: center CONTACT heading in section
============================================================ */
@media (min-width: 821px) {
body.page-id-45 section.tc-contact .tc-contact-head {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
max-width: 600px !important;
}
}
/* ============================================================
/jihatsu/ — PC ONLY: truly center heading & buttons against FULL section
============================================================ */
@media (min-width: 821px) {
body.page-id-45 section.tc-contact .tc-contact-wrap {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 30px 24px 30px !important;
display: block !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-head {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-sec-title {
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-inner {
width: 100% !important;
max-width: 100% !important;
margin: 20px auto 0 !important;
padding: 0 !important;
text-align: center !important;
}
body.page-id-45 section.tc-contact .tc-contact-list {
margin: 0 auto !important;
justify-content: center !important;
}
}
/* ============================================================
/houkago/ — PC ONLY: center CONTACT against full section width
============================================================ */
@media (min-width: 821px) {
body.page-id-46 section.tc-contact .tc-contact-wrap {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 30px 24px 30px !important;
display: block !important;
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-head {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-sec-title {
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
width: 100% !important;
max-width: 100% !important;
margin: 20px auto 0 !important;
padding: 0 !important;
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 30px !important;
margin: 0 auto !important;
padding: 0 !important;
max-width: 900px !important;
list-style: none !important;
}
body.page-id-46 section.tc-contact .tc-contact-list li,
body.page-id-46 section.tc-contact .tc-contact-list li:first-child,
body.page-id-46 section.tc-contact .tc-contact-list li:nth-child(2),
body.page-id-46 section.tc-contact .tc-contact-list li:last-child {
margin: 0 !important;
padding: 0 !important;
width: 340px !important;
max-width: 340px !important;
}
}
/* ============================================================
/houkago/ — CONTACT section background WHITE
============================================================ */
body.page-id-46 section.tc-contact {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
background: #ffffff !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact path {
fill: #ffffff !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
background: #ffffff !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave path {
fill: #ffffff !important;
}
/* ============================================================
/houkago/ — CONTACT section tight vertical (match jihatsu)
============================================================ */
body.page-id-46 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 12px 24px 12px !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head p {
margin: 4px 0 0 !important;
line-height: 1.4 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-en {
line-height: 1 !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-ja {
line-height: 1 !important;
margin: 2px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-maru {
display: none !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
padding: 0 24px !important;
margin: 10px auto 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
margin: 0 auto !important;
padding: 0 !important;
gap: 30px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list li,
body.page-id-46 section.tc-contact .tc-contact-list li:nth-child(2) {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
height: 40px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 24px !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 8px 16px 8px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 6px !important;
padding: 0 16px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
gap: 12px !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
height: 28px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 16px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 4px 16px 4px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
gap: 6px !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
height: 18px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 10px !important;
}
}
/* ============================================================
/houkago/ — FLOW section: add bottom padding
============================================================ */
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 80px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 60px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 40px !important;
}
}
/* ============================================================
/houkago/ — FLOW section: MORE bottom padding
============================================================ */
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 180px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 130px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 100px !important;
}
}
/* ============================================================
/houkago/ — CONTACT section ultra tight (top & bottom)
============================================================ */
body.page-id-46 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 0 24px !important;
margin: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head {
margin-top: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin: 4px auto 0 !important;
padding: 0 24px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
height: 0 !important;
display: none !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 0 !important;
display: none !important;
}
body.page-id-46 .iroha-houkago {
margin: 0 !important;
padding-bottom: 0 !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 0 16px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 2px !important;
padding: 0 16px !important;
}
}
/* ============================================================
/houkago/ — CONTACT section CRUSH (total height tiny)
============================================================ */
body.page-id-46 section.tc-contact,
body.page-id-46 section.tc-contact *,
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-head,
body.page-id-46 section.tc-contact .tc-contact-inner,
body.page-id-46 section.tc-contact .tc-contact-list,
body.page-id-46 section.tc-contact .tc-contact-list li,
body.page-id-46 section.tc-contact .tc-contact-head p,
body.page-id-46 section.tc-contact .tc-sec-title,
body.page-id-46 section.tc-contact .tc-sec-title .tc-en,
body.page-id-46 section.tc-contact .tc-sec-title .tc-ja {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-46 section.tc-contact {
min-height: 0 !important;
line-height: 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding: 0 24px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
padding: 0 24px !important;
margin: 2px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-en {
line-height: 1 !important;
}
body.page-id-46 section.tc-contact .tc-sec-title .tc-ja {
line-height: 1 !important;
margin: 2px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-head p {
line-height: 1.3 !important;
margin: 2px 0 0 !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
gap: 20px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-list li a img {
display: block !important;
line-height: 0 !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-inner {
padding-left: 16px !important;
padding-right: 16px !important;
}
body.page-id-46 section.tc-contact .tc-contact-list {
flex-direction: column !important;
gap: 6px !important;
}
}
/* ============================================================
/houkago/ — FLOW bottom + CONTACT bottom spacing + waves
============================================================ */
/* FLOW section: extend bottom padding more */
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 260px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 180px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 140px !important;
}
}
/* CONTACT section: a bit more bottom space */
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-bottom: 30px !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-bottom: 20px !important;
}
}
/* Show FLOW → CONTACT wave (white into white — subtle line accent) */
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #ffffff !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact path {
fill: #fdeef0 !important;
}
/* Show CONTACT → FOOTER wave */
body.page-id-46 section.tc-contact .iroha-contact__wave {
display: block !important;
width: 100% !important;
height: 70px !important;
background: #ffffff !important;
margin: 0 !important;
margin-top: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave path {
fill: #fdeef0 !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
height: 50px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 40px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-jihatsu__wave--flow-to-contact {
height: 40px !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 30px !important;
}
}
/* ============================================================
/houkago/ — FLOW bottom wave styles
============================================================ */
body.page-id-46 .iroha-houkago__wave--flow-bottom {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #ffffff !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-46 .iroha-houkago__wave--flow-bottom path {
fill: #fdeef0 !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 50px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 40px !important;
}
}
/* ================================================================
Houkago — FLOW (pink) → CONTACT (white) wave divider fix v2
Match the "--white" wave style used between other sections:
bg = previous section color (pink), path = next section color (white).
================================================================ */
body.page-id-46 .iroha-houkago__wave--flow-bottom {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.page-id-46 .iroha-houkago__wave--flow-bottom path {
fill: #ffffff !important;
}
body.page-id-46 section.tc-contact,
body.page-id-46 .tc-contact {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave {
display: none !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 50px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 40px !important;
}
}
/* ================================================================
Houkago — CONTACT (white) → FOOTER (pink) wave divider
================================================================ */
body.page-id-46 section.tc-contact .iroha-contact__wave {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
position: relative !important;
z-index: 2 !important;
}
body.page-id-46 section.tc-contact .iroha-contact__wave path {
fill: #fdeef0 !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 50px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 section.tc-contact .iroha-contact__wave {
height: 40px !important;
}
}
/* ================================================================
Houkago — CONTACT section height compact
================================================================ */
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 16px !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn {
max-width: 340px !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img {
max-height: 180px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img {
max-height: 130px !important;
}
}
/* ================================================================
Houkago — CONTACT button size 340x340 + center alignment
================================================================ */
body.page-id-46 section.tc-contact {
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-head {
text-align: center !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin-top: 16px !important;
}
body.page-id-46 section.tc-contact .iroha-contact-list {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 40px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.page-id-46 section.tc-contact .iroha-contact-list > li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn {
display: inline-block !important;
width: 340px !important;
max-width: 340px !important;
height: auto !important;
max-height: none !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img {
width: 340px !important;
height: 340px !important;
max-height: none !important;
max-width: 340px !important;
object-fit: contain !important;
display: block !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
gap: 20px !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn,
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img {
width: 260px !important;
height: 260px !important;
max-width: 260px !important;
}
}
/* ================================================================
Houkago — CONTACT vertical padding match jihatsu
================================================================ */
body.page-id-46 section.tc-contact {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: 20px !important;
}
/* ================================================================
Houkago — hide floating sunflower char in CONTACT (matches jihatsu)
================================================================ */
body.page-id-46 section.tc-contact .iroha-contact__char--pair,
body.page-id-46 section.tc-contact .iroha-contact__char {
display: none !important;
}
/* ================================================================
Houkago — FLOW→CONTACT wave: larger amplitude
================================================================ */
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 140px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 90px !important;
}
}
@media (max-width: 480px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 70px !important;
}
}
/* ================================================================
Houkago — deco pattern inside CONTACT section
================================================================ */
body.page-id-46 section.tc-contact {
position: relative !important;
overflow: hidden !important;
}
body.page-id-46 section.tc-contact > .iroha-jihatsu__deco {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
body.page-id-46 section.tc-contact > .iroha-jihatsu__deco .iroha-pat {
display: block !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap,
body.page-id-46 section.tc-contact .tc-contact-head,
body.page-id-46 section.tc-contact .tc-contact-inner {
position: relative !important;
z-index: 2 !important;
}
/* ================================================================
Houkago — CONTACT mobile: larger width buttons, tighter spacing
================================================================ */
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
gap: 8px !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn,
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img {
width: 320px !important;
height: 320px !important;
max-width: 320px !important;
max-height: 320px !important;
}
body.page-id-46 section.tc-contact .iroha-contact-list > li {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
body.page-id-46 section.tc-contact .iroha-contact-imgbtn img {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
}
/* ================================================================
Houkago — CONTACT mobile: overlap buttons to remove visual gap
The PNG graphic has ~30% transparent padding top+bottom, so use
negative margin to pull the second button up under the first's
bottom whitespace.
================================================================ */
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .iroha-contact-list {
gap: 0 !important;
}
body.page-id-46 section.tc-contact .iroha-contact-list > li:nth-child(2) {
margin-top: -80px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: -30px !important;
}
body.page-id-46 section.tc-contact .tc-contact-wrap {
padding-bottom: 0 !important;
}
}
/* ================================================================
Houkago — CONTACT mobile: stronger button overlap
================================================================ */
@media (max-width: 820px) {
body.page-id-46 section.tc-contact .iroha-contact-list > li:nth-child(2) {
margin-top: -160px !important;
}
body.page-id-46 section.tc-contact .tc-contact-inner {
margin-top: -40px !important;
}
}
/* ================================================================
Houkago — Kyotaku section redesigned with photo cards
================================================================ */
body.page-id-46 .iroha-houkago__kyotaku-card {
background: #ffffff !important;
border-radius: 24px !important;
padding: 40px !important;
box-shadow: 0 12px 40px rgba(233, 100, 140, .08) !important;
position: relative !important;
z-index: 2 !important;
}
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__head {
text-align: center !important;
margin-bottom: 16px !important;
}
body.page-id-46 .iroha-houkago__section--kyotaku .iroha-houkago__section-en {
display: block !important;
font-size: 14px !important;
letter-spacing: 0.3em !important;
color: #e8537b !important;
font-weight: 700 !important;
margin-bottom: 6px !important;
}
body.page-id-46 .iroha-houkago__kyotaku-intro {
text-align: center !important;
line-height: 1.9 !important;
margin: 0 auto 36px !important;
max-width: 720px !important;
}
body.page-id-46 .iroha-houkago__kyotaku-intro strong {
color: #e8537b !important;
font-weight: 700 !important;
}
body.page-id-46 .iroha-kyotaku-cards {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
margin: 0 auto !important;
}
body.page-id-46 .iroha-kyotaku-card {
background: linear-gradient(180deg, #fff8fa 0%, #ffffff 100%) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 8px 24px rgba(233, 100, 140, .08) !important;
transition: transform .3s ease, box-shadow .3s ease !important;
display: flex !important;
flex-direction: column !important;
}
body.page-id-46 .iroha-kyotaku-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 32px rgba(233, 100, 140, .14) !important;
}
body.page-id-46 .iroha-kyotaku-card__media {
position: relative !important;
aspect-ratio: 16 / 10 !important;
overflow: hidden !important;
}
body.page-id-46 .iroha-kyotaku-card__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform .5s ease !important;
}
body.page-id-46 .iroha-kyotaku-card:hover .iroha-kyotaku-card__media img {
transform: scale(1.06) !important;
}
body.page-id-46 .iroha-kyotaku-card__chip {
position: absolute !important;
top: 16px !important;
left: 16px !important;
background: #ffffff !important;
color: #e8537b !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.22em !important;
padding: 6px 14px !important;
border-radius: 999px !important;
box-shadow: 0 4px 12px rgba(233, 100, 140, .18) !important;
}
body.page-id-46 .iroha-kyotaku-card--home .iroha-kyotaku-card__chip {
color: #f39a4d !important;
}
body.page-id-46 .iroha-kyotaku-card__body {
padding: 24px 26px 26px !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
flex: 1 !important;
}
body.page-id-46 .iroha-kyotaku-card__title {
font-size: 22px !important;
font-weight: 800 !important;
color: #3d2b31 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
position: relative !important;
padding-left: 16px !important;
}
body.page-id-46 .iroha-kyotaku-card__title::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 6px !important;
height: 22px !important;
background: linear-gradient(180deg, #f7a6bd, #e8537b) !important;
border-radius: 3px !important;
}
body.page-id-46 .iroha-kyotaku-card--home .iroha-kyotaku-card__title::before {
background: linear-gradient(180deg, #ffd089, #f39a4d) !important;
}
body.page-id-46 .iroha-kyotaku-card__desc {
font-size: 14.5px !important;
line-height: 1.85 !important;
color: #564b4f !important;
margin: 0 !important;
}
body.page-id-46 .iroha-kyotaku-card__tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 6px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.page-id-46 .iroha-kyotaku-card__tags > li {
font-size: 12px !important;
font-weight: 600 !important;
color: #e8537b !important;
background: #ffeef3 !important;
padding: 5px 12px !important;
border-radius: 999px !important;
list-style: none !important;
}
body.page-id-46 .iroha-kyotaku-card--home .iroha-kyotaku-card__tags > li {
color: #d87a2c !important;
background: #fff1e0 !important;
}
body.page-id-46 .iroha-houkago__kyotaku-note {
text-align: center !important;
margin: 32px 0 0 !important;
font-size: 14px !important;
color: #7a6a6f !important;
}
body.page-id-46 .iroha-houkago__kyotaku-note a {
color: #e8537b !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__kyotaku-card {
padding: 28px 18px !important;
border-radius: 18px !important;
}
body.page-id-46 .iroha-kyotaku-cards {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
body.page-id-46 .iroha-kyotaku-card__body {
padding: 20px 20px 22px !important;
}
body.page-id-46 .iroha-kyotaku-card__title {
font-size: 19px !important;
}
}
/* ================================================================
Houkago — GUIDE dt/dd: bolder weight + black color (match body)
================================================================ */
body.page-id-46 .iroha-houkago__info dt,
body.page-id-46 .iroha-houkago__info dd {
color: #3d2b31 !important;
font-weight: 600 !important;
font-family: inherit !important;
}
body.page-id-46 .iroha-houkago__info dt {
font-weight: 700 !important;
}
/* ================================================================
Houkago — INTRO section side characters
================================================================ */
body.page-id-46 .iroha-houkago__section--intro {
position: relative !important;
overflow: visible !important;
}
body.page-id-46 .iroha-houkago__intro-chara {
position: absolute !important;
width: 220px !important;
height: auto !important;
z-index: 1 !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 8px 16px rgba(233, 100, 140, .15)) !important;
animation: iroha-intro-chara-bob 5s ease-in-out infinite !important;
}
body.page-id-46 .iroha-houkago__intro-chara--left {
left: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
animation-delay: 0s !important;
}
body.page-id-46 .iroha-houkago__intro-chara--right {
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
animation-delay: 1s !important;
}
@keyframes iroha-intro-chara-bob {
0%, 100% { transform: translateY(-50%) translateY(0); }
50% { transform: translateY(-50%) translateY(-10px); }
}
body.page-id-46 .iroha-houkago__section--intro .iroha-houkago__container {
position: relative !important;
z-index: 2 !important;
}
@media (max-width: 1200px) {
body.page-id-46 .iroha-houkago__intro-chara {
width: 170px !important;
}
}
@media (max-width: 960px) {
body.page-id-46 .iroha-houkago__intro-chara {
width: 130px !important;
opacity: .85 !important;
}
body.page-id-46 .iroha-houkago__intro-chara--left {
left: 4px !important;
}
body.page-id-46 .iroha-houkago__intro-chara--right {
right: 4px !important;
}
}
@media (max-width: 640px) {
body.page-id-46 .iroha-houkago__intro-chara {
display: none !important;
}
}
/* ================================================================
Houkago — APPROACH & FLOW body text: match weight and color
================================================================ */
body.page-id-46 .iroha-approach__lead,
body.page-id-46 .iroha-approach__title,
body.page-id-46 .iroha-approach__desc,
body.page-id-46 .iroha-houkago__step h3,
body.page-id-46 .iroha-houkago__step p {
color: #3d2b31 !important;
font-family: inherit !important;
}
body.page-id-46 .iroha-approach__lead,
body.page-id-46 .iroha-approach__desc,
body.page-id-46 .iroha-houkago__step p {
font-weight: 600 !important;
}
body.page-id-46 .iroha-approach__title,
body.page-id-46 .iroha-houkago__step h3 {
font-weight: 700 !important;
}
/* ================================================================
Houkago — FLOW bottom note
================================================================ */
body.page-id-46 .iroha-houkago__flow-note {
text-align: center !important;
max-width: 720px !important;
margin: 40px auto 0 !important;
padding: 24px 28px !important;
background: #ffffff !important;
border-radius: 18px !important;
box-shadow: 0 8px 24px rgba(233, 100, 140, .08) !important;
font-size: 15px !important;
line-height: 2 !important;
color: #3d2b31 !important;
font-weight: 600 !important;
position: relative !important;
z-index: 2 !important;
}
body.page-id-46 .iroha-houkago__flow-note::before {
content: "💌" !important;
display: block !important;
font-size: 28px !important;
margin-bottom: 6px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__flow-note {
margin: 30px 16px 0 !important;
padding: 20px !important;
font-size: 14px !important;
line-height: 1.9 !important;
}
}
/* ---------- HOUKAGO FLOW PHOTOS (two horizontal ovals) ---------- */
.iroha-houkago__flow-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 980px;
margin: 40px auto 12px;
padding: 0 8px;
position: relative;
z-index: 1;
}
.iroha-houkago__flow-photos--wide { max-width: 1040px; gap: 44px; }
.iroha-houkago__flow-photos::before,
.iroha-houkago__flow-photos::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
filter: blur(36px);
opacity: .55;
z-index: -1;
}
.iroha-houkago__flow-photos::before {
width: 240px; height: 240px;
background: radial-gradient(circle, #ffd4e0 0%, rgba(255, 212, 224, 0) 70%);
top: -60px; left: -70px;
}
.iroha-houkago__flow-photos::after {
width: 260px; height: 260px;
background: radial-gradient(circle, #ffe8b3 0%, rgba(255, 232, 179, 0) 72%);
bottom: -70px; right: -70px;
}
.iroha-houkago__flow-photo {
position: relative;
margin: 0;
aspect-ratio: 1.55 / 1;
border-radius: 50% / 50%;
overflow: hidden;
background: #fff;
box-shadow:
0 28px 56px -22px rgba(232, 83, 123, .35),
0 10px 22px -10px rgba(103, 182, 229, .25),
inset 0 0 0 6px rgba(255, 255, 255, .95);
border: 4px solid #ffffff;
transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s;
}
.iroha-houkago__flow-photo::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 2px rgba(255, 214, 225, .85);
pointer-events: none;
}
.iroha-houkago__flow-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.iroha-houkago__flow-photo:hover {
box-shadow:
0 34px 66px -20px rgba(232, 83, 123, .42),
0 12px 26px -8px rgba(103, 182, 229, .3),
inset 0 0 0 6px rgba(255, 255, 255, .98);
}
.iroha-houkago__flow-photo:hover img { transform: scale(1.06); }
.iroha-houkago__flow-photo--left {
transform: rotate(-2deg) translateY(-6px);
border-color: #ffe3ea;
}
.iroha-houkago__flow-photo--right {
transform: rotate(2deg) translateY(14px);
border-color: #fff1d4;
}
.iroha-houkago__flow-photo--left:hover {
transform: rotate(-2deg) translateY(-12px);
}
.iroha-houkago__flow-photo--right:hover {
transform: rotate(2deg) translateY(8px);
}
/* Tiny sparkle accents on the photo pair */
.iroha-houkago__flow-photos .iroha-houkago__flow-photo--left::before,
.iroha-houkago__flow-photos .iroha-houkago__flow-photo--right::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle, #fff5b2 0%, rgba(255, 220, 120, 0) 70%);
box-shadow: 0 0 16px 4px rgba(255, 217, 107, .7);
z-index: 2;
pointer-events: none;
}
.iroha-houkago__flow-photos .iroha-houkago__flow-photo--left::before {
top: 18px;
right: 26px;
}
.iroha-houkago__flow-photos .iroha-houkago__flow-photo--right::before {
bottom: 22px;
left: 22px;
}
@media (max-width: 820px) {
.iroha-houkago__flow-photos,
.iroha-houkago__flow-photos--wide {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 32px;
padding: 0 4px;
}
.iroha-houkago__flow-photo { aspect-ratio: 1.6 / 1; }
.iroha-houkago__flow-photo--left { transform: rotate(-1.6deg); }
.iroha-houkago__flow-photo--right { transform: rotate(1.6deg); }
.iroha-houkago__flow-photo--left:hover { transform: rotate(-1.6deg) translateY(-4px); }
.iroha-houkago__flow-photo--right:hover { transform: rotate(1.6deg) translateY(-4px); }
}
/* Trim bottom whitespace under FLOW photos before wave divider */
body.page-id-46 .iroha-houkago__section--flow { padding-bottom: 12px; }
body.page-id-46 .iroha-houkago__flow-photos { margin-bottom: 0; }
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__section--flow { padding-bottom: 10px; }
}
/* Houkago — tighten CONTACT section top whitespace (right below FLOW wave) */
body.page-id-46 section.tc-contact {
padding-top: 8px !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-46 .tc-contact .tc-contact-head {
margin-top: 0 !important;
padding-top: 0 !important;
}
@media (max-width: 820px) {
body.page-id-46 section.tc-contact { padding-top: 4px !important; }
}
/* Houkago — aggressive whitespace removal under FLOW photos */
body.page-id-46 .iroha-houkago__section--flow {
padding-bottom: 0 !important;
}
body.page-id-46 .iroha-houkago__flow-photos {
margin-bottom: 0 !important;
}
/* FLOW-bottom wave: shrink its height */
body.page-id-46 .iroha-houkago__wave--flow-bottom {
height: 40px !important;
margin: 0 !important;
display: block !important;
}
/* Kill any space between wave and CONTACT */
body.page-id-46 section.tc-contact {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-46 .tc-contact .tc-contact-wrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.page-id-46 .tc-contact .tc-contact-head {
margin-top: 0 !important;
padding-top: 0 !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__wave--flow-bottom { height: 28px !important; }
}
/* Houkago FLOW — mascot characters tucked beside the photo pair */
body.page-id-46 .iroha-houkago__flow-photos {
overflow: visible;
}
body.page-id-46 .iroha-houkago__flow-chara {
position: absolute;
width: 130px;
height: auto;
pointer-events: none;
z-index: 3;
filter: drop-shadow(0 10px 16px rgba(120, 80, 40, .18));
animation: irohaFlowCharaFloat 5.5s ease-in-out infinite;
}
body.page-id-46 .iroha-houkago__flow-chara--left {
left: -18px;
bottom: -70px;
transform: rotate(-6deg);
animation-delay: .2s;
}
body.page-id-46 .iroha-houkago__flow-chara--right {
right: -18px;
bottom: -60px;
transform: rotate(8deg);
width: 120px;
animation-delay: 1.1s;
}
@keyframes irohaFlowCharaFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__flow-chara { width: 84px; }
body.page-id-46 .iroha-houkago__flow-chara--right { width: 78px; }
body.page-id-46 .iroha-houkago__flow-chara--left { left: -8px; bottom: -46px; }
body.page-id-46 .iroha-houkago__flow-chara--right { right: -8px; bottom: -40px; }
}
/* Nudge FLOW characters — both shift up and to the left */
body.page-id-46 .iroha-houkago__flow-chara--left {
left: -90px !important;
bottom: 40px !important;
}
body.page-id-46 .iroha-houkago__flow-chara--right {
right: auto !important;
left: 52% !important;
bottom: 60px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__flow-chara--left {
left: -30px !important;
bottom: 20px !important;
}
body.page-id-46 .iroha-houkago__flow-chara--right {
right: auto !important;
left: 50% !important;
bottom: 30px !important;
}
}
/* Move sunflower (right chara) back to the right side */
body.page-id-46 .iroha-houkago__flow-chara--right {
left: auto !important;
right: -90px !important;
bottom: 60px !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__flow-chara--right {
left: auto !important;
right: -30px !important;
bottom: 30px !important;
}
}
/* Nudge both FLOW characters further down */
body.page-id-46 .iroha-houkago__flow-chara--left {
bottom: -10px !important;
}
body.page-id-46 .iroha-houkago__flow-chara--right {
bottom: 0 !important;
}
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__flow-chara--left {
bottom: -20px !important;
}
body.page-id-46 .iroha-houkago__flow-chara--right {
bottom: -10px !important;
}
}
/* Hide FLOW mascot characters on mobile */
@media (max-width: 820px) {
body.page-id-46 .iroha-houkago__flow-chara,
body.page-id-46 .iroha-houkago__flow-chara--left,
body.page-id-46 .iroha-houkago__flow-chara--right {
display: none !important;
}
}
/* ================================================================
Activity — hero height match other subpages (jihatsu/houkago)
================================================================ */
body.page-id-47 .iroha-hero--subpage {
min-height: 500px !important;
padding-bottom: 60px !important;
}
body.page-id-47 .iroha-hero__page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-hero--subpage {
min-height: 300px !important;
padding-bottom: 30px !important;
}
}
/* Activity — hide duplicate "Activity 活動紹介" banner (.iroha-act2__hero) */
body.page-id-47 .iroha-act2__hero {
display: none !important;
}
/* And hide the wave directly below it to avoid a leftover divider */
body.page-id-47 .iroha-act2__hero + .iroha-wave {
display: none !important;
}
/* Activity — shrink CONCEPT section vertical space */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept {
padding: 20px 24px 24px !important;
}
body.page-id-47 .iroha-act2__concept {
gap: 32px !important;
align-items: center !important;
}
body.page-id-47 .iroha-act2__catch {
min-height: 0 !important;
padding: 6px 8px !important;
}
body.page-id-47 .iroha-act2__concept p {
line-height: 1.75 !important;
margin-bottom: 8px !important;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept {
padding: 18px 18px 20px !important;
}
body.page-id-47 .iroha-act2__concept { gap: 18px !important; }
}
/* ================================================================
Activity — CONCEPT redesign (.iroha-conceptx)
Inspired by reference: vertical catch + soft copy +
5-field bubble cluster + organic-blob photo
================================================================ */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-conceptx {
padding: 72px 24px 88px !important;
position: relative;
overflow: hidden;
}
/* --- decorative background blobs + dots --- */
.iroha-conceptx__bg {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
}
.iroha-conceptx__blob {
position: absolute;
border-radius: 50%;
filter: blur(48px);
opacity: .55;
}
.iroha-conceptx__blob--1 {
width: 420px; height: 420px;
background: radial-gradient(circle, #ffd4e0 0%, rgba(255,212,224,0) 70%);
top: -120px; left: -120px;
}
.iroha-conceptx__blob--2 {
width: 380px; height: 380px;
background: radial-gradient(circle, #d8edff 0%, rgba(216,237,255,0) 70%);
bottom: -140px; right: -120px;
}
.iroha-conceptx__blob--3 {
width: 300px; height: 300px;
background: radial-gradient(circle, #fff1c2 0%, rgba(255,241,194,0) 72%);
top: 40%; right: 28%;
}
.iroha-conceptx__dot {
position: absolute;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,.04);
opacity: .85;
}
.iroha-conceptx__dot--1 { width: 18px; height: 18px; background: #ffd3dc; top: 12%; left: 8%; }
.iroha-conceptx__dot--2 { width: 10px; height: 10px; background: #ffd84a; top: 20%; left: 18%; }
.iroha-conceptx__dot--3 { width: 14px; height: 14px; background: #cfeaff; bottom: 22%; left: 6%; }
.iroha-conceptx__dot--4 { width: 16px; height: 16px; background: #e8d9ff; top: 14%; right: 10%; }
.iroha-conceptx__dot--5 { width: 12px; height: 12px; background: #d9f2d6; bottom: 14%; right: 18%; }
/* --- inner wrapper --- */
.iroha-conceptx__inner {
position: relative;
z-index: 1;
max-width: 1120px !important;
}
/* --- grid --- */
.iroha-conceptx__grid {
display: grid;
grid-template-columns: minmax(180px, 220px) 1fr;
gap: 44px;
align-items: start;
}
/* =================== LEFT: vertical catch =================== */
.iroha-conceptx__catch {
position: relative;
writing-mode: vertical-rl;
display: flex;
gap: 14px;
justify-content: flex-start;
align-items: flex-start;
font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif !important;
font-weight: 900 !important;
font-size: clamp(22px, 2.4vw, 30px) !important;
line-height: 1.9 !important;
letter-spacing: .2em !important;
color: #2a1a22 !important;
padding: 10px 4px;
min-height: 420px;
}
.iroha-conceptx__catch-line {
display: inline-block;
padding: 0 4px;
}
.iroha-conceptx__catch .acc-pink { color: #e8537b !important; }
.iroha-conceptx__catch .acc-green { color: #5ab770 !important; }
.iroha-conceptx__catch .acc-orange { color: #f08c3a !important; }
.iroha-conceptx__catch .acc-blue { color: #4fa9dc !important; }
.iroha-conceptx__catch-mark {
position: absolute;
top: 0; left: -4px;
width: 10px; height: 10px;
border-radius: 50%;
background: #e8537b;
box-shadow: 0 4px 10px rgba(232,83,123,.4);
}
/* =================== RIGHT column =================== */
.iroha-conceptx__right { position: relative; }
/* Copy block — quote-card feel */
.iroha-conceptx__copy {
position: relative;
background: #ffffff;
border: 1px solid #ffe3ea;
border-radius: 22px;
padding: 26px 28px;
box-shadow:
0 24px 48px -24px rgba(232,83,123,.25),
0 6px 14px -8px rgba(103,182,229,.18);
margin-bottom: 40px;
}
.iroha-conceptx__copy::before {
content: "";
position: absolute;
top: -14px; left: 28px;
width: 28px; height: 28px;
background: linear-gradient(135deg, #ff87a5, #ffb7c8);
border-radius: 10px 10px 4px 14px;
transform: rotate(-18deg);
box-shadow: 0 8px 14px -4px rgba(232,83,123,.35);
}
.iroha-conceptx__copy p {
margin: 0 !important;
font-size: 15.5px !important;
line-height: 2 !important;
color: #3a2730 !important;
letter-spacing: .02em;
}
.iroha-conceptx__copy strong {
color: #e8537b;
font-weight: 900;
background: linear-gradient(transparent 60%, #ffe3ea 60%);
padding: 0 2px;
}
/* Figure: 5 bubbles + photo side by side */
.iroha-conceptx__figure {
display: grid;
grid-template-columns: minmax(300px, 420px) 1fr;
gap: 32px;
align-items: center;
position: relative;
}
/* =================== 5 BUBBLES =================== */
.iroha-conceptx__five {
position: relative;
aspect-ratio: 1 / 1;
max-width: 420px;
width: 100%;
justify-self: center;
}
.iroha-conceptx__five-core {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 108px; height: 108px;
border-radius: 50%;
background: linear-gradient(135deg, #ff6e91 0%, #ff98b2 100%);
color: #fff;
font-family: "M PLUS Rounded 1c","Zen Maru Gothic",sans-serif !important;
font-weight: 900;
font-size: 26px;
display: flex;
flex-direction: column;
align-items: center; justify-content: center;
box-shadow:
0 18px 34px -12px rgba(232,83,123,.5),
inset 0 0 0 4px rgba(255,255,255,.55);
z-index: 2;
text-align: center;
line-height: 1;
}
.iroha-conceptx__five-core small {
font-size: 12px;
font-weight: 800;
margin-top: 6px;
letter-spacing: .15em;
opacity: .95;
}
.iroha-conceptx__bubble {
position: absolute;
width: 112px; height: 112px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center; justify-content: center;
color: #fff;
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-weight: 700;
font-size: 11.5px;
letter-spacing: .05em;
text-align: center;
line-height: 1.25;
box-shadow:
0 14px 26px -10px rgba(0,0,0,.18),
inset 0 0 0 4px rgba(255,255,255,.6);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
animation: irohaBubbleFloat 6s ease-in-out infinite;
}
.iroha-conceptx__bubble b {
display: block;
font-size: 15px;
font-weight: 900;
letter-spacing: .08em;
margin-bottom: 2px;
}
.iroha-conceptx__bubble:hover { transform: scale(1.06); }
@keyframes irohaBubbleFloat {
0%,100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
.iroha-conceptx__bubble--health { top: 4%; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #5ab770, #8cd39e); animation-delay: 0s; }
.iroha-conceptx__bubble--body { top: 30%; right: 0; background: linear-gradient(135deg, #f08c3a, #ffb575); animation-delay: .8s; }
.iroha-conceptx__bubble--mind { bottom: 6%; right: 12%; background: linear-gradient(135deg, #c66bb2, #e48ed1); animation-delay: 1.6s; }
.iroha-conceptx__bubble--word { bottom: 6%; left: 12%; background: linear-gradient(135deg, #4fa9dc, #80c6ea); animation-delay: 2.4s; }
.iroha-conceptx__bubble--social { top: 30%; left: 0; background: linear-gradient(135deg, #8b70c7, #b098df); animation-delay: 3.2s; }
/* connector lines */
.iroha-conceptx__five::before {
content: "";
position: absolute;
inset: 20%;
border-radius: 50%;
border: 2px dashed rgba(232,83,123,.2);
pointer-events: none;
}
/* =================== PHOTO =================== */
.iroha-conceptx__photo {
position: relative;
aspect-ratio: 1 / 0.9;
border-radius: 62% 42% 58% 48% / 50% 58% 42% 52%;
overflow: hidden;
background: #fff;
box-shadow:
0 30px 60px -24px rgba(232,83,123,.35),
0 10px 22px -10px rgba(103,182,229,.25);
border: 4px solid #fff;
transform: rotate(1.5deg);
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.iroha-conceptx__photo::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 2px rgba(255,214,225,.85);
pointer-events: none;
}
.iroha-conceptx__photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.iroha-conceptx__photo:hover { transform: rotate(0) scale(1.01); }
.iroha-conceptx__photo:hover img { transform: scale(1.06); }
/* =================== RESPONSIVE =================== */
@media (max-width: 900px) {
.iroha-conceptx__grid { grid-template-columns: 1fr; gap: 28px; }
.iroha-conceptx__catch {
writing-mode: horizontal-tb;
min-height: 0;
flex-direction: column;
gap: 6px;
align-items: flex-start;
font-size: clamp(18px, 5.2vw, 22px) !important;
line-height: 1.7 !important;
letter-spacing: .05em !important;
}
.iroha-conceptx__catch-mark { left: 0; top: -6px; }
.iroha-conceptx__figure { grid-template-columns: 1fr; gap: 28px; }
.iroha-conceptx__five { max-width: 340px; }
.iroha-conceptx__bubble { width: 98px; height: 98px; font-size: 10.5px; }
.iroha-conceptx__bubble b { font-size: 13px; }
.iroha-conceptx__five-core { width: 92px; height: 92px; font-size: 22px; }
.iroha-conceptx__copy { padding: 22px 22px; margin-bottom: 28px; }
.iroha-conceptx__copy p { font-size: 14.5px !important; line-height: 1.95 !important; }
}
@media (max-width: 520px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-conceptx {
padding: 48px 18px 64px !important;
}
.iroha-conceptx__five { max-width: 300px; }
.iroha-conceptx__bubble { width: 84px; height: 84px; font-size: 10px; }
.iroha-conceptx__bubble b { font-size: 12px; }
.iroha-conceptx__five-core { width: 80px; height: 80px; font-size: 18px; }
}
/* ==============================================================
Activity CONCEPT — balance fixes
============================================================== */
/* Grid: narrower left column, tighter gap */
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: 200px 1fr !important;
gap: 56px !important;
align-items: start !important;
}
/* Vertical catch — fix bloated size & proper vertical typography */
body.page-id-47 .iroha-conceptx__catch {
writing-mode: vertical-rl !important;
text-orientation: upright !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
font-weight: 800 !important;
line-height: 1.55 !important;
letter-spacing: .08em !important;
gap: 18px !important;
min-height: 440px !important;
padding: 30px 0 0 !important;
justify-content: flex-start !important;
align-items: flex-start !important;
color: #2a1a22 !important;
position: relative;
}
body.page-id-47 .iroha-conceptx__catch-line {
padding: 0 !important;
white-space: nowrap;
}
/* Ornamental dot positioned above top of catch */
body.page-id-47 .iroha-conceptx__catch-mark {
top: 6px !important;
right: 10px !important;
left: auto !important;
width: 12px; height: 12px;
}
/* Accent colours keep but slightly softer */
body.page-id-47 .iroha-conceptx__catch .acc-pink { color: #e8537b !important; }
body.page-id-47 .iroha-conceptx__catch .acc-green { color: #4fa766 !important; }
body.page-id-47 .iroha-conceptx__catch .acc-orange { color: #ea8232 !important; }
body.page-id-47 .iroha-conceptx__catch .acc-blue { color: #3a9dd4 !important; }
/* Right column — more breathing room */
body.page-id-47 .iroha-conceptx__copy {
padding: 24px 28px !important;
margin-bottom: 36px !important;
}
body.page-id-47 .iroha-conceptx__copy p {
font-size: 15px !important;
line-height: 1.95 !important;
}
/* Figure layout: 5 bubbles slightly smaller, better balance w/ photo */
body.page-id-47 .iroha-conceptx__figure {
grid-template-columns: 380px 1fr !important;
gap: 36px !important;
align-items: center !important;
}
body.page-id-47 .iroha-conceptx__five { max-width: 380px !important; }
body.page-id-47 .iroha-conceptx__bubble {
width: 104px !important;
height: 104px !important;
}
/* Photo aspect keeps organic blob; compact */
body.page-id-47 .iroha-conceptx__photo {
aspect-ratio: 1 / 0.95 !important;
transform: rotate(1deg) !important;
}
/* Section overall padding tight but not cramped */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-conceptx {
padding: 56px 24px 72px !important;
}
/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: 170px 1fr !important;
gap: 36px !important;
}
body.page-id-47 .iroha-conceptx__figure {
grid-template-columns: 340px 1fr !important;
gap: 28px !important;
}
body.page-id-47 .iroha-conceptx__five { max-width: 340px !important; }
body.page-id-47 .iroha-conceptx__bubble { width: 94px !important; height: 94px !important; }
}
/* ---------- Mobile ---------- */
@media (max-width: 820px) {
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
body.page-id-47 .iroha-conceptx__catch {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
min-height: 0 !important;
padding: 0 !important;
gap: 4px !important;
font-size: clamp(19px, 5vw, 24px) !important;
line-height: 1.7 !important;
letter-spacing: .04em !important;
flex-direction: column !important;
align-items: flex-start !important;
}
body.page-id-47 .iroha-conceptx__catch-mark {
top: -6px !important; left: 0 !important; right: auto !important;
}
body.page-id-47 .iroha-conceptx__figure {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
body.page-id-47 .iroha-conceptx__five { max-width: 320px !important; justify-self: center; }
body.page-id-47 .iroha-conceptx__bubble { width: 88px !important; height: 88px !important; font-size: 10.5px !important; }
body.page-id-47 .iroha-conceptx__bubble b { font-size: 13px !important; }
body.page-id-47 .iroha-conceptx__five-core { width: 88px !important; height: 88px !important; font-size: 20px !important; }
}
/* Catch: force vertical 3 lines (RTL) — 3 columns of text */
body.page-id-47 .iroha-conceptx__catch {
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 20px !important;
min-height: 420px !important;
padding: 20px 8px 0 !important;
justify-content: flex-start !important;
align-items: flex-start !important;
font-size: clamp(20px, 1.8vw, 26px) !important;
font-weight: 900 !important;
line-height: 1.5 !important;
letter-spacing: .18em !important;
}
body.page-id-47 .iroha-conceptx__catch-line {
display: block !important;
padding: 0 !important;
white-space: nowrap;
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-conceptx__catch {
writing-mode: horizontal-tb !important;
flex-direction: column !important;
min-height: 0 !important;
padding: 0 !important;
gap: 4px !important;
letter-spacing: .04em !important;
line-height: 1.7 !important;
}
body.page-id-47 .iroha-conceptx__catch-line {
writing-mode: horizontal-tb !important;
}
}
/* Catch: horizontal 3 lines (left column stacked) */
body.page-id-47 .iroha-conceptx__catch {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 14px !important;
min-height: 0 !important;
padding: 20px 0 0 !important;
justify-content: flex-start !important;
align-items: flex-start !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
font-weight: 900 !important;
line-height: 1.55 !important;
letter-spacing: .06em !important;
white-space: nowrap !important;
}
body.page-id-47 .iroha-conceptx__catch-line {
writing-mode: horizontal-tb !important;
display: block !important;
padding: 0 !important;
white-space: nowrap !important;
}
body.page-id-47 .iroha-conceptx__catch-mark {
top: 0 !important;
left: -6px !important;
right: auto !important;
width: 10px; height: 10px;
}
/* Give the left column enough horizontal room for the longest line */
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: minmax(260px, 300px) 1fr !important;
gap: 40px !important;
}
@media (max-width: 1024px) {
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: minmax(240px, 270px) 1fr !important;
gap: 28px !important;
}
body.page-id-47 .iroha-conceptx__catch {
font-size: clamp(16px, 1.7vw, 20px) !important;
}
}
@media (max-width: 820px) {
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: 1fr !important;
}
body.page-id-47 .iroha-conceptx__catch {
font-size: clamp(19px, 5vw, 24px) !important;
gap: 6px !important;
letter-spacing: .04em !important;
}
}
/* Catch: vertical text, 3 columns side by side (right→left reading) */
body.page-id-47 .iroha-conceptx__catch {
writing-mode: horizontal-tb !important; /* outer container is horizontal flex */
display: flex !important;
flex-direction: row-reverse !important; /* right-to-left reading for Japanese */
flex-wrap: nowrap !important;
gap: 14px !important;
min-height: 420px !important;
padding: 20px 4px 0 !important;
justify-content: flex-start !important;
align-items: flex-start !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
font-weight: 900 !important;
line-height: 1.7 !important;
letter-spacing: .12em !important;
}
/* Each line itself is vertical */
body.page-id-47 .iroha-conceptx__catch-line {
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
display: inline-block !important;
white-space: nowrap !important;
padding: 0 !important;
}
body.page-id-47 .iroha-conceptx__catch-mark {
top: 6px !important;
right: 8px !important;
left: auto !important;
width: 10px; height: 10px;
}
/* Grid left column needs just enough for 3 narrow vertical lines */
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: minmax(200px, 240px) 1fr !important;
gap: 44px !important;
}
@media (max-width: 1024px) {
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: minmax(180px, 210px) 1fr !important;
gap: 32px !important;
}
}
@media (max-width: 820px) {
body.page-id-47 .iroha-conceptx__grid { grid-template-columns: 1fr !important; }
body.page-id-47 .iroha-conceptx__catch {
min-height: 0 !important;
padding: 0 !important;
gap: 10px !important;
justify-content: center !important;
}
body.page-id-47 .iroha-conceptx__catch-line {
font-size: 18px !important;
}
}
/* ==============================================================
CONCEPT — reference-style tuning
============================================================== */
/* Section background: soft mint/white like ref */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-conceptx {
background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%) !important;
padding: 72px 24px 88px !important;
}
/* Catch: bigger, per-line single color + white stroke shadow */
body.page-id-47 .iroha-conceptx__catch {
gap: 22px !important;
font-size: clamp(24px, 2.6vw, 34px) !important;
font-weight: 900 !important;
line-height: 1.5 !important;
letter-spacing: .2em !important;
min-height: 520px !important;
padding: 32px 4px 0 !important;
flex-direction: row-reverse !important;
}
body.page-id-47 .iroha-conceptx__catch-line {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
text-shadow:
2px 2px 0 #ffffff,
-2px 2px 0 #ffffff,
2px -2px 0 #ffffff,
-2px -2px 0 #ffffff,
0 6px 12px rgba(0,0,0,.08);
}
/* Per-line colors (right → left reading for Japanese) */
body.page-id-47 .iroha-conceptx__catch-line:nth-child(1) { color: #2f3b7a !important; } /* 一人ひとりに合わせて — navy */
body.page-id-47 .iroha-conceptx__catch-line:nth-child(2) { color: #e8537b !important; } /* できるところを大いに — pink */
body.page-id-47 .iroha-conceptx__catch-line:nth-child(3) { color: #3a9dd4 !important; } /* 褒めて意欲につなげる — blue */
/* Kill per-word color spans so the line stays single-color */
body.page-id-47 .iroha-conceptx__catch .acc-pink,
body.page-id-47 .iroha-conceptx__catch .acc-green,
body.page-id-47 .iroha-conceptx__catch .acc-orange,
body.page-id-47 .iroha-conceptx__catch .acc-blue {
color: inherit !important;
}
/* Grid: give left column a touch more room for larger text */
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: minmax(260px, 300px) 1fr !important;
gap: 52px !important;
align-items: start !important;
}
/* Copy: flat, no heavy card */
body.page-id-47 .iroha-conceptx__copy {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 6px 4px 0 !important;
margin-bottom: 36px !important;
}
body.page-id-47 .iroha-conceptx__copy::before { display: none !important; }
body.page-id-47 .iroha-conceptx__copy p {
font-size: 15.5px !important;
line-height: 2 !important;
color: #3a2730 !important;
letter-spacing: .02em !important;
}
body.page-id-47 .iroha-conceptx__copy strong {
background: linear-gradient(transparent 60%, #ffe3ea 60%) !important;
color: #e8537b !important;
}
/* Figure: center the 5-bubble cluster with photo beside */
body.page-id-47 .iroha-conceptx__figure {
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
align-items: center !important;
}
/* 5-bubble cluster refinements to match ref palette */
body.page-id-47 .iroha-conceptx__five-core {
width: 118px !important; height: 118px !important;
background: linear-gradient(135deg, #ff6e91 0%, #ff98b2 100%) !important;
font-size: 26px !important;
letter-spacing: .08em !important;
}
body.page-id-47 .iroha-conceptx__bubble { font-size: 11px !important; }
body.page-id-47 .iroha-conceptx__bubble b { font-size: 14.5px !important; }
/* Photo: softer blob + lighter shadow */
body.page-id-47 .iroha-conceptx__photo {
aspect-ratio: 1 / 0.85 !important;
border-radius: 58% 42% 56% 44% / 48% 58% 42% 52% !important;
transform: rotate(0.6deg) !important;
box-shadow:
0 24px 50px -22px rgba(80,100,140,.28),
0 8px 18px -10px rgba(232,83,123,.18) !important;
}
/* Dots slightly more visible */
body.page-id-47 .iroha-conceptx__dot { opacity: .9 !important; }
/* ---------- tablet ---------- */
@media (max-width: 1024px) {
body.page-id-47 .iroha-conceptx__grid {
grid-template-columns: minmax(220px, 260px) 1fr !important;
gap: 36px !important;
}
body.page-id-47 .iroha-conceptx__catch {
font-size: clamp(22px, 2.6vw, 28px) !important;
min-height: 460px !important;
gap: 18px !important;
}
body.page-id-47 .iroha-conceptx__figure { grid-template-columns: 1fr 1fr !important; }
}
/* ---------- mobile ---------- */
@media (max-width: 820px) {
body.page-id-47 .iroha-conceptx__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
body.page-id-47 .iroha-conceptx__catch {
min-height: 0 !important;
padding: 0 !important;
gap: 8px !important;
justify-content: center !important;
font-size: clamp(22px, 6vw, 28px) !important;
}
body.page-id-47 .iroha-conceptx__figure { grid-template-columns: 1fr !important; gap: 22px !important; }
}
/* ==============================================================
CONCEPT v2 — Editorial × Soft Neumorphism (.iroha-cx2)
============================================================== */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
--cx2-ink: #1a1520;
--cx2-ink-soft: #594858;
--cx2-paper: #fbf7f4;
--cx2-warm: #f5ece4;
--cx2-accent-hot: #ff5a7d;
--cx2-accent-blush: #ffb7c8;
--cx2-accent-sun: #f4a02a;
--cx2-accent-mint: #6ec7a6;
--cx2-accent-lav: #8b7fd9;
background:
linear-gradient(180deg, #fbf7f4 0%, #fff 60%, #fdf2f4 100%) !important;
padding: 92px 24px 104px !important;
position: relative !important;
overflow: hidden !important;
}
/* Hide old conceptx overrides (we have a new scope now) */
body.page-id-47 .iroha-cx2 .iroha-conceptx__bg,
body.page-id-47 .iroha-cx2 .iroha-conceptx__grid { display: none !important; }
/* ---------- Ambient background ---------- */
.iroha-cx2__bg {
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
}
.iroha-cx2__grain {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: .5;
mix-blend-mode: multiply;
}
.iroha-cx2__orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .55;
}
.iroha-cx2__orb--1 {
width: 520px; height: 520px;
background: radial-gradient(circle, #ffc9d4 0%, rgba(255,201,212,0) 70%);
top: -180px; left: -140px;
}
.iroha-cx2__orb--2 {
width: 480px; height: 480px;
background: radial-gradient(circle, #d9e8ff 0%, rgba(217,232,255,0) 70%);
bottom: -160px; right: -120px;
}
.iroha-cx2__orb--3 {
width: 320px; height: 320px;
background: radial-gradient(circle, #ffefc9 0%, rgba(255,239,201,0) 70%);
top: 42%; right: 30%;
}
.iroha-cx2__inner {
position: relative;
z-index: 1;
max-width: 1160px !important;
}
/* ---------- Editorial header ---------- */
.iroha-cx2__header {
display: grid;
grid-template-columns: minmax(0, 720px);
gap: 22px;
margin-bottom: 72px;
}
.iroha-cx2__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Pacifico","Caveat","Zen Maru Gothic",cursive !important;
color: var(--cx2-accent-hot);
font-size: 16px;
letter-spacing: .02em;
width: fit-content;
padding: 4px 0;
}
.iroha-cx2__eyebrow-dot {
width: 10px; height: 10px;
background: var(--cx2-accent-hot);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255,90,125,.18);
flex: none;
}
.iroha-cx2__eyebrow-label {
font-size: 18px;
font-style: italic;
}
.iroha-cx2__eyebrow-num {
font-family: "Playfair Display","Zen Kaku Gothic New",serif !important;
color: var(--cx2-ink-soft);
letter-spacing: .2em;
font-size: 13px;
margin-left: 6px;
}
.iroha-cx2__display {
margin: 0 !important;
font-family: "Zen Kaku Gothic New","Zen Maru Gothic",sans-serif !important;
font-weight: 900 !important;
font-size: clamp(32px, 5.2vw, 64px) !important;
line-height: 1.18 !important;
letter-spacing: -.01em !important;
color: var(--cx2-ink) !important;
}
.iroha-cx2__display-line {
display: block;
}
.iroha-cx2__display em {
font-style: normal;
color: var(--cx2-accent-hot);
position: relative;
background: linear-gradient(transparent 70%, rgba(255,183,200,.55) 70%);
padding: 0 .08em;
}
.iroha-cx2__lede {
margin: 0 !important;
max-width: 620px;
font-size: 16px !important;
line-height: 2.1 !important;
color: var(--cx2-ink-soft) !important;
letter-spacing: .01em !important;
}
.iroha-cx2__lede b {
color: var(--cx2-ink);
font-weight: 800;
border-bottom: 2px dashed var(--cx2-accent-hot);
padding-bottom: 1px;
}
.iroha-cx2__lede mark {
background: linear-gradient(transparent 60%, rgba(255,183,200,.6) 60%);
color: var(--cx2-ink);
font-weight: 700;
padding: 0 2px;
}
/* ---------- Stage: asymmetric 2-col (photo + chip list) ---------- */
.iroha-cx2__stage {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 56px;
align-items: center;
}
/* ---------- Hero photo card ---------- */
.iroha-cx2__hero-photo {
position: relative;
margin: 0;
aspect-ratio: 5 / 4;
border-radius: 32px;
overflow: hidden;
background: #000;
box-shadow:
30px 40px 80px -30px rgba(60, 40, 60, .35),
-18px -18px 40px -20px rgba(255,255,255,.9),
0 0 0 1px rgba(0,0,0,.04);
transform: rotate(-1.2deg);
transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
}
.iroha-cx2__hero-photo:hover {
transform: rotate(0deg);
box-shadow:
38px 50px 96px -30px rgba(60, 40, 60, .4),
-18px -18px 40px -20px rgba(255,255,255,.9),
0 0 0 1px rgba(0,0,0,.04);
}
.iroha-cx2__hero-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.iroha-cx2__hero-photo:hover img { transform: scale(1.06); }
.iroha-cx2__hero-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
pointer-events: none;
}
.iroha-cx2__hero-caption {
position: absolute;
left: 28px; bottom: 24px;
color: #fff;
display: grid;
gap: 4px;
z-index: 2;
}
.iroha-cx2__hero-caption-jp {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-weight: 900;
font-size: clamp(18px, 2vw, 24px);
letter-spacing: .04em;
text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.iroha-cx2__hero-caption-en {
font-family: "Pacifico","Caveat",cursive !important;
font-size: 16px;
opacity: .95;
letter-spacing: .04em;
color: #ffd4dc;
}
/* Floating number badge over photo corner */
.iroha-cx2__hero-badge {
position: absolute;
top: -28px; right: -28px;
width: 140px; height: 140px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, #ffffff 0%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.35) 70%),
linear-gradient(135deg, #ff5a7d 0%, #ff98b2 100%);
background-blend-mode: screen, normal;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
transform: rotate(8deg);
box-shadow:
0 22px 44px -12px rgba(255,90,125,.55),
inset 0 0 0 6px rgba(255,255,255,.35);
z-index: 3;
animation: cx2BadgeSpin 14s linear infinite;
}
.iroha-cx2__hero-badge-num {
font-family: "Playfair Display","Zen Kaku Gothic New",serif !important;
font-weight: 900;
font-size: 56px;
line-height: 1;
letter-spacing: -.04em;
text-shadow: 0 3px 8px rgba(180,40,70,.3);
}
.iroha-cx2__hero-badge-label {
font-family: "Zen Kaku Gothic New",sans-serif !important;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.25;
opacity: .95;
}
@keyframes cx2BadgeSpin {
0% { transform: rotate(8deg); }
50% { transform: rotate(-4deg); }
100% { transform: rotate(8deg); }
}
/* ---------- Vertical chip stack ---------- */
.iroha-cx2__chips {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
counter-reset: cx2chip;
}
.iroha-cx2__chip {
list-style: none !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
gap: 18px !important;
align-items: center !important;
padding: 16px 20px 16px 18px !important;
background: #ffffff !important;
border-radius: 18px !important;
box-shadow:
10px 14px 28px -18px rgba(60,40,60,.22),
-6px -8px 18px -12px rgba(255,255,255,1),
inset 0 0 0 1px rgba(0,0,0,.03) !important;
transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, background .45s !important;
cursor: default;
position: relative;
margin: 0 !important;
}
.iroha-cx2__chip::before {
content: "";
position: absolute;
left: 0; top: 18%;
width: 4px; height: 64%;
border-radius: 4px;
background: currentColor;
opacity: .85;
}
.iroha-cx2__chip--01 { color: var(--cx2-accent-mint); }
.iroha-cx2__chip--02 { color: var(--cx2-accent-sun); }
.iroha-cx2__chip--03 { color: var(--cx2-accent-hot); }
.iroha-cx2__chip--04 { color: #3a9dd4; }
.iroha-cx2__chip--05 { color: var(--cx2-accent-lav); }
.iroha-cx2__chip:hover {
transform: translateX(6px);
box-shadow:
14px 20px 36px -18px rgba(60,40,60,.3),
-6px -8px 18px -12px rgba(255,255,255,1),
inset 0 0 0 1px rgba(0,0,0,.04) !important;
}
.iroha-cx2__chip-idx {
font-family: "Playfair Display","Zen Kaku Gothic New",serif !important;
font-weight: 900;
font-size: 28px;
line-height: 1;
color: currentColor;
letter-spacing: -.02em;
min-width: 42px;
text-align: center;
}
.iroha-cx2__chip-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.iroha-cx2__chip-title {
font-family: "Zen Kaku Gothic New","Zen Maru Gothic",sans-serif !important;
font-weight: 900;
font-size: 15.5px;
color: var(--cx2-ink);
letter-spacing: .04em;
}
.iroha-cx2__chip-desc {
font-size: 12.5px;
color: var(--cx2-ink-soft);
letter-spacing: .03em;
line-height: 1.55;
}
.iroha-cx2__chip-arrow {
font-family: sans-serif;
font-size: 20px;
color: currentColor;
transform: translateX(0);
transition: transform .45s cubic-bezier(.2,.8,.2,1);
opacity: .7;
}
.iroha-cx2__chip:hover .iroha-cx2__chip-arrow {
transform: translateX(6px);
opacity: 1;
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.iroha-cx2__stage {
grid-template-columns: 1fr;
gap: 44px;
}
.iroha-cx2__hero-photo { transform: rotate(0deg); }
.iroha-cx2__hero-badge {
width: 120px; height: 120px;
top: -22px; right: -22px;
}
.iroha-cx2__hero-badge-num { font-size: 46px; }
}
@media (max-width: 820px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 64px 20px 72px !important;
}
.iroha-cx2__header { margin-bottom: 48px; gap: 18px; }
.iroha-cx2__display { font-size: clamp(26px, 7.5vw, 38px) !important; line-height: 1.3 !important; }
.iroha-cx2__lede { font-size: 14.5px !important; line-height: 1.95 !important; }
.iroha-cx2__stage { gap: 32px; }
.iroha-cx2__hero-photo { aspect-ratio: 5 / 4.3; border-radius: 24px; }
.iroha-cx2__hero-caption { left: 20px; bottom: 18px; }
.iroha-cx2__hero-badge {
width: 92px; height: 92px;
top: -14px; right: -10px;
}
.iroha-cx2__hero-badge-num { font-size: 34px; }
.iroha-cx2__hero-badge-label { font-size: 8.5px; letter-spacing: .12em; }
.iroha-cx2__chip { padding: 14px 16px 14px 14px !important; gap: 12px !important; }
.iroha-cx2__chip-idx { font-size: 22px; min-width: 32px; }
.iroha-cx2__chip-title { font-size: 14px; }
.iroha-cx2__chip-desc { font-size: 11.5px; }
}
@media (max-width: 520px) {
.iroha-cx2__eyebrow-label { font-size: 15px; }
.iroha-cx2__display em::after { display: none; }
}
/* ==============================================================
CONCEPT v3 — Pure white, refined editorial
Replaces v2 ambient orbs with precise, elegant details
============================================================== */
/* Force pure white background, remove orbs & grain */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
background: #ffffff !important;
padding: 110px 32px 120px !important;
}
body.page-id-47 .iroha-cx2__bg,
body.page-id-47 .iroha-cx2__grain,
body.page-id-47 .iroha-cx2__orb { display: none !important; }
/* Fine hairline corner marks (top-left & bottom-right) */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::before,
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::after {
content: "";
position: absolute;
width: 56px; height: 56px;
border-color: #1a1520;
border-style: solid;
opacity: .9;
z-index: 2;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::before {
top: 44px; left: 44px;
border-width: 1.5px 0 0 1.5px;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::after {
bottom: 44px; right: 44px;
border-width: 0 1.5px 1.5px 0;
}
.iroha-cx2__inner {
max-width: 1200px !important;
position: relative;
}
/* ==============================================================
HEADER — magazine-style
============================================================== */
.iroha-cx2__header {
display: grid !important;
grid-template-columns: minmax(0, 820px) !important;
gap: 24px !important;
margin: 0 0 84px 0 !important;
padding-left: 48px !important;
position: relative;
}
/* Vertical hairline with small circle (left-side rail) */
.iroha-cx2__header::before {
content: "";
position: absolute;
left: 0; top: 10px;
width: 1px; height: calc(100% - 24px);
background: linear-gradient(180deg, #1a1520 0%, #1a1520 70%, transparent 100%);
opacity: .2;
}
.iroha-cx2__header::after {
content: "";
position: absolute;
left: -4px; top: 4px;
width: 9px; height: 9px;
border-radius: 50%;
background: #ff5a7d;
box-shadow: 0 0 0 4px rgba(255,90,125,.14);
}
/* Eyebrow — kerned caps */
body.page-id-47 .iroha-cx2__eyebrow {
font-family: "Zen Kaku Gothic New", sans-serif !important;
color: #1a1520 !important;
font-size: 12px !important;
letter-spacing: .35em !important;
text-transform: uppercase !important;
padding: 0 !important;
gap: 14px !important;
align-items: center !important;
}
body.page-id-47 .iroha-cx2__eyebrow-dot { display: none !important; }
body.page-id-47 .iroha-cx2__eyebrow-label {
font-style: normal !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .35em !important;
color: #1a1520 !important;
}
body.page-id-47 .iroha-cx2__eyebrow-num {
font-family: "Playfair Display", serif !important;
font-style: italic !important;
font-weight: 400 !important;
color: #a38f95 !important;
font-size: 12px !important;
letter-spacing: .15em !important;
margin-left: 0 !important;
position: relative;
padding-left: 14px;
}
body.page-id-47 .iroha-cx2__eyebrow-num::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 6px; height: 1px;
background: currentColor;
}
/* Display type — Playfair + Zen Kaku mix */
body.page-id-47 .iroha-cx2__display {
font-family: "Zen Kaku Gothic New", "Zen Maru Gothic", sans-serif !important;
font-weight: 900 !important;
font-size: clamp(36px, 5.4vw, 68px) !important;
line-height: 1.22 !important;
letter-spacing: -.012em !important;
color: #1a1520 !important;
margin: 6px 0 !important;
}
body.page-id-47 .iroha-cx2__display em {
font-family: "Playfair Display", "Zen Kaku Gothic New", serif !important;
font-style: italic !important;
font-weight: 800 !important;
color: #ff5a7d !important;
background: none !important;
padding: 0 .04em !important;
position: relative;
}
body.page-id-47 .iroha-cx2__display em::after {
content: "";
position: absolute;
left: 4%; right: 4%;
bottom: .08em;
height: .18em;
background: rgba(255, 90, 125, .18);
border-radius: 2px;
z-index: -1;
}
/* Lede */
body.page-id-47 .iroha-cx2__lede {
max-width: 640px !important;
font-size: 15.5px !important;
line-height: 2.15 !important;
color: #4a3c46 !important;
letter-spacing: .015em !important;
margin: 10px 0 0 !important;
}
body.page-id-47 .iroha-cx2__lede b {
color: #1a1520 !important;
font-weight: 800 !important;
border: 0 !important;
padding: 0 2px !important;
position: relative;
}
body.page-id-47 .iroha-cx2__lede b::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -2px;
height: 2px;
background: #ff5a7d;
}
body.page-id-47 .iroha-cx2__lede mark {
background: none !important;
color: #1a1520 !important;
font-weight: 800 !important;
padding: 0 2px !important;
box-shadow: inset 0 -7px 0 rgba(255,90,125,.14) !important;
}
/* ==============================================================
STAGE
============================================================== */
.iroha-cx2__stage {
display: grid !important;
grid-template-columns: 1.15fr 1fr !important;
gap: 72px !important;
align-items: center !important;
}
/* Hero photo — squared, premium, tasteful shadow */
body.page-id-47 .iroha-cx2__hero-photo {
aspect-ratio: 4 / 5 !important;
border-radius: 4px !important;
transform: rotate(0deg) !important;
box-shadow:
0 40px 80px -30px rgba(26, 21, 32, .35),
0 1px 0 0 rgba(0,0,0,.04) !important;
background: #ffffff !important;
overflow: visible !important;
isolation: isolate;
}
body.page-id-47 .iroha-cx2__hero-photo > img {
border-radius: 4px;
position: relative;
z-index: 1;
}
body.page-id-47 .iroha-cx2__hero-photo::after {
content: "";
position: absolute;
inset: 0;
border-radius: 4px;
background: linear-gradient(180deg, rgba(26,21,32,0) 55%, rgba(26,21,32,.6) 100%);
z-index: 2;
}
body.page-id-47 .iroha-cx2__hero-photo::before {
/* thin frame */
content: "";
position: absolute;
inset: -14px;
border: 1px solid rgba(26,21,32,.08);
border-radius: 6px;
z-index: 0;
pointer-events: none;
}
body.page-id-47 .iroha-cx2__hero-photo:hover {
transform: translateY(-4px) !important;
}
body.page-id-47 .iroha-cx2__hero-caption {
left: 32px !important;
bottom: 28px !important;
z-index: 3 !important;
}
body.page-id-47 .iroha-cx2__hero-caption-jp {
font-family: "Playfair Display", "Zen Maru Gothic", serif !important;
font-style: italic !important;
font-weight: 800 !important;
font-size: clamp(20px, 2.2vw, 26px) !important;
letter-spacing: .04em !important;
color: #fff !important;
}
body.page-id-47 .iroha-cx2__hero-caption-en {
font-family: "Zen Kaku Gothic New", sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .36em !important;
text-transform: uppercase !important;
color: rgba(255, 212, 220, .9) !important;
margin-top: 2px !important;
}
/* Number badge — refined, no spin */
body.page-id-47 .iroha-cx2__hero-badge {
width: 120px !important; height: 120px !important;
top: -32px !important; right: -32px !important;
background:
radial-gradient(circle at 32% 28%, #ffffff 0%, rgba(255,255,255,.2) 55%),
linear-gradient(135deg, #1a1520 0%, #3a2a38 100%) !important;
background-blend-mode: screen, normal !important;
box-shadow:
0 20px 40px -12px rgba(26,21,32, .4),
inset 0 0 0 1px rgba(255,255,255,.16) !important;
transform: rotate(6deg) !important;
animation: none !important;
z-index: 4 !important;
}
body.page-id-47 .iroha-cx2__hero-badge-num {
font-family: "Playfair Display", serif !important;
font-style: italic !important;
font-weight: 900 !important;
font-size: 54px !important;
color: #fff !important;
text-shadow: none !important;
}
body.page-id-47 .iroha-cx2__hero-badge-label {
font-size: 9px !important;
letter-spacing: .28em !important;
opacity: .85 !important;
margin-top: 2px !important;
}
/* ==============================================================
CHIPS — ultra-clean list with hairlines
============================================================== */
body.page-id-47 .iroha-cx2__chips {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
body.page-id-47 .iroha-cx2__chip {
background: transparent !important;
border-radius: 0 !important;
border-top: 1px solid rgba(26,21,32, .12) !important;
box-shadow: none !important;
padding: 22px 8px 22px 0 !important;
grid-template-columns: 64px 1fr 32px !important;
gap: 20px !important;
position: relative;
transition: padding .5s cubic-bezier(.2,.8,.2,1), background .5s !important;
}
body.page-id-47 .iroha-cx2__chip:last-child {
border-bottom: 1px solid rgba(26,21,32, .12) !important;
}
body.page-id-47 .iroha-cx2__chip::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 0; height: 2px;
background: currentColor;
transition: width .6s cubic-bezier(.2,.8,.2,1);
border-radius: 0;
opacity: 1;
}
body.page-id-47 .iroha-cx2__chip:hover {
transform: none !important;
background: linear-gradient(90deg, rgba(255,90,125,.025), transparent 80%) !important;
padding-left: 14px !important;
}
body.page-id-47 .iroha-cx2__chip:hover::before { width: 100%; }
body.page-id-47 .iroha-cx2__chip-idx {
font-family: "Playfair Display", serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 40px !important;
line-height: 1 !important;
color: #1a1520 !important;
opacity: .9 !important;
text-align: left !important;
min-width: 0 !important;
position: relative;
}
body.page-id-47 .iroha-cx2__chip-idx::after {
content: "";
position: absolute;
left: 0; bottom: -6px;
width: 20px; height: 2px;
background: currentColor;
}
body.page-id-47 .iroha-cx2__chip--01 .iroha-cx2__chip-idx::after { background: #6ec7a6; }
body.page-id-47 .iroha-cx2__chip--02 .iroha-cx2__chip-idx::after { background: #f4a02a; }
body.page-id-47 .iroha-cx2__chip--03 .iroha-cx2__chip-idx::after { background: #ff5a7d; }
body.page-id-47 .iroha-cx2__chip--04 .iroha-cx2__chip-idx::after { background: #3a9dd4; }
body.page-id-47 .iroha-cx2__chip--05 .iroha-cx2__chip-idx::after { background: #8b7fd9; }
body.page-id-47 .iroha-cx2__chip-title {
font-family: "Zen Kaku Gothic New", "Zen Maru Gothic", sans-serif !important;
font-weight: 900 !important;
font-size: 16.5px !important;
color: #1a1520 !important;
letter-spacing: .04em !important;
margin-bottom: 2px !important;
}
body.page-id-47 .iroha-cx2__chip-desc {
font-size: 12.5px !important;
color: #6a5d66 !important;
letter-spacing: .02em !important;
line-height: 1.6 !important;
}
body.page-id-47 .iroha-cx2__chip-arrow {
font-family: "Playfair Display", serif !important;
font-size: 18px !important;
color: #1a1520 !important;
opacity: .35 !important;
transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s !important;
}
body.page-id-47 .iroha-cx2__chip:hover .iroha-cx2__chip-arrow {
transform: translateX(8px) !important;
opacity: 1 !important;
color: currentColor !important;
}
/* ==============================================================
Responsive
============================================================== */
@media (max-width: 1024px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 84px 28px 96px !important;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::before,
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::after {
width: 40px; height: 40px;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::before {
top: 28px; left: 28px;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::after {
bottom: 28px; right: 28px;
}
.iroha-cx2__stage {
grid-template-columns: 1fr !important;
gap: 56px !important;
}
body.page-id-47 .iroha-cx2__hero-photo { aspect-ratio: 5 / 4 !important; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 820px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 64px 22px 76px !important;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::before,
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::after {
display: none;
}
.iroha-cx2__header { padding-left: 28px !important; margin-bottom: 52px !important; }
body.page-id-47 .iroha-cx2__display { font-size: clamp(28px, 7.6vw, 40px) !important; line-height: 1.28 !important; }
body.page-id-47 .iroha-cx2__lede { font-size: 14.5px !important; line-height: 2 !important; }
body.page-id-47 .iroha-cx2__chip { grid-template-columns: 48px 1fr 24px !important; gap: 14px !important; padding: 18px 4px 18px 0 !important; }
body.page-id-47 .iroha-cx2__chip-idx { font-size: 30px !important; }
body.page-id-47 .iroha-cx2__chip-title { font-size: 14.5px !important; }
body.page-id-47 .iroha-cx2__chip-desc { font-size: 11.5px !important; }
body.page-id-47 .iroha-cx2__hero-badge {
width: 88px !important; height: 88px !important;
top: -18px !important; right: -14px !important;
}
body.page-id-47 .iroha-cx2__hero-badge-num { font-size: 36px !important; }
body.page-id-47 .iroha-cx2__hero-badge-label { font-size: 8px !important; letter-spacing: .2em !important; }
}
/* ==============================================================
CONCEPT v4 — Cute, soft, playful (white bg kept)
============================================================== */
/* Remove austere corner hairlines from v3 */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::before,
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2::after {
display: none !important;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
background: #ffffff !important;
padding: 88px 28px 100px !important;
}
/* Re-soften header rail */
body.page-id-47 .iroha-cx2__header {
padding-left: 40px !important;
margin-bottom: 64px !important;
}
body.page-id-47 .iroha-cx2__header::before {
background: linear-gradient(180deg, #ffb7c8 0%, #ffe3ea 70%, transparent 100%) !important;
opacity: 1 !important;
width: 2px !important;
}
body.page-id-47 .iroha-cx2__header::after {
background: #ff87a5 !important;
width: 11px !important; height: 11px !important;
left: -4.5px !important;
box-shadow: 0 0 0 5px rgba(255,135,165,.2) !important;
}
/* Eyebrow — softer */
body.page-id-47 .iroha-cx2__eyebrow-label {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
text-transform: none !important;
letter-spacing: .15em !important;
font-size: 13px !important;
color: #e8537b !important;
}
body.page-id-47 .iroha-cx2__eyebrow-num {
color: #c7a3ab !important;
}
/* Display — rounded, friendlier */
body.page-id-47 .iroha-cx2__display {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-weight: 900 !important;
font-size: clamp(30px, 4.4vw, 52px) !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
color: #2a1a22 !important;
}
body.page-id-47 .iroha-cx2__display em {
font-family: "Pacifico","Caveat","Zen Maru Gothic",cursive !important;
font-style: normal !important;
color: #ff5a7d !important;
font-size: 1.05em !important;
padding: 0 .06em !important;
}
body.page-id-47 .iroha-cx2__display em::after {
background: rgba(255,183,200,.35) !important;
bottom: .06em !important;
height: .24em !important;
}
/* Lede — softer */
body.page-id-47 .iroha-cx2__lede {
font-size: 15px !important;
line-height: 2.1 !important;
color: #594858 !important;
}
body.page-id-47 .iroha-cx2__lede b::after { background: #ff87a5 !important; }
body.page-id-47 .iroha-cx2__lede mark {
box-shadow: inset 0 -8px 0 rgba(255,183,200,.45) !important;
}
/* ==============================================================
STAGE — rebalanced so photo is smaller, chips get more room
============================================================== */
body.page-id-47 .iroha-cx2__stage {
grid-template-columns: 1fr 1.1fr !important;
gap: 60px !important;
align-items: center !important;
max-width: 980px;
margin: 0 auto;
}
/* ==============================================================
HERO PHOTO — small, rounded, cute sticker-style
============================================================== */
body.page-id-47 .iroha-cx2__hero-photo {
aspect-ratio: 1 / 1 !important;
max-width: 360px !important;
width: 100% !important;
margin: 0 auto !important;
border-radius: 36px !important;
border: 6px solid #ffffff !important;
box-shadow:
0 28px 44px -22px rgba(232,83,123, .35),
0 8px 16px -10px rgba(103,182,229, .22),
inset 0 0 0 1px rgba(0,0,0,.02) !important;
transform: rotate(-2.4deg) !important;
transition: transform .6s cubic-bezier(.2,.8,.2,1) !important;
overflow: visible !important;
isolation: isolate;
background: #fff !important;
}
body.page-id-47 .iroha-cx2__hero-photo img {
border-radius: 30px !important;
width: 100% !important; height: 100% !important;
object-fit: cover !important;
position: relative;
z-index: 1;
}
body.page-id-47 .iroha-cx2__hero-photo::before {
/* kill v3 external frame */
display: none !important;
}
body.page-id-47 .iroha-cx2__hero-photo::after {
/* softer dark gradient for caption contrast */
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: 30px !important;
background: linear-gradient(180deg, rgba(26,21,32,0) 55%, rgba(26,21,32,.5) 100%) !important;
z-index: 2 !important;
pointer-events: none;
}
body.page-id-47 .iroha-cx2__hero-photo:hover { transform: rotate(0deg) !important; }
/* Sparkle deco around photo */
body.page-id-47 .iroha-cx2__hero-photo {
position: relative;
}
body.page-id-47 .iroha-cx2__hero-photo .iroha-cx2__hero-caption {
left: 22px !important;
bottom: 20px !important;
z-index: 3 !important;
}
body.page-id-47 .iroha-cx2__hero-caption-jp {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-style: normal !important;
font-size: clamp(15px, 1.6vw, 18px) !important;
letter-spacing: .06em !important;
}
body.page-id-47 .iroha-cx2__hero-caption-en {
font-family: "Pacifico","Caveat",cursive !important;
font-size: 13px !important;
text-transform: none !important;
letter-spacing: .04em !important;
color: #ffd4dc !important;
font-weight: 400 !important;
}
/* ==============================================================
Badge — bubbly pink, playful
============================================================== */
body.page-id-47 .iroha-cx2__hero-badge {
width: 96px !important; height: 96px !important;
top: -22px !important; right: -22px !important;
background:
radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.2) 55%),
linear-gradient(135deg, #ff5a7d 0%, #ffb7c8 100%) !important;
background-blend-mode: screen, normal !important;
box-shadow:
0 16px 28px -10px rgba(255,90,125, .45),
inset 0 0 0 5px rgba(255,255,255,.55) !important;
transform: rotate(10deg) !important;
animation: cx4Wiggle 5.5s ease-in-out infinite !important;
z-index: 4 !important;
}
@keyframes cx4Wiggle {
0%,100% { transform: rotate(10deg) translateY(0); }
50% { transform: rotate(4deg) translateY(-4px); }
}
body.page-id-47 .iroha-cx2__hero-badge-num {
font-family: "Zen Maru Gothic","M PLUS Rounded 1c",sans-serif !important;
font-style: normal !important;
font-weight: 900 !important;
font-size: 40px !important;
color: #fff !important;
letter-spacing: 0 !important;
}
body.page-id-47 .iroha-cx2__hero-badge-label {
font-family: "Zen Kaku Gothic New",sans-serif !important;
font-size: 9px !important;
letter-spacing: .2em !important;
opacity: .95 !important;
text-transform: uppercase !important;
}
/* ==============================================================
CHIPS — cute rounded pills instead of hairlines
============================================================== */
body.page-id-47 .iroha-cx2__chips {
gap: 12px !important;
}
body.page-id-47 .iroha-cx2__chip {
background: #fff !important;
border: 0 !important;
border-top: 0 !important;
border-radius: 22px !important;
padding: 16px 20px 16px 16px !important;
grid-template-columns: 46px 1fr 28px !important;
gap: 14px !important;
box-shadow:
0 10px 22px -14px rgba(232,83,123,.18),
0 2px 6px -2px rgba(103,182,229,.1),
inset 0 0 0 1.5px #fff0f3 !important;
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, padding .4s !important;
}
body.page-id-47 .iroha-cx2__chip:last-child { border-bottom: 0 !important; }
body.page-id-47 .iroha-cx2__chip::before {
content: "" !important;
position: absolute !important;
left: 8px !important; top: 50% !important;
transform: translateY(-50%) !important;
width: 4px !important;
height: 60% !important;
background: currentColor !important;
border-radius: 999px !important;
opacity: .85 !important;
transition: height .4s !important;
}
body.page-id-47 .iroha-cx2__chip:hover {
transform: translateY(-3px) !important;
padding-left: 20px !important;
background: linear-gradient(180deg, #fff, #fff9fb) !important;
box-shadow:
0 16px 30px -14px rgba(232,83,123,.26),
0 3px 8px -2px rgba(103,182,229,.14),
inset 0 0 0 1.5px #ffe3ea !important;
}
body.page-id-47 .iroha-cx2__chip:hover::before { height: 72% !important; }
/* Number — friendly, rounded */
body.page-id-47 .iroha-cx2__chip-idx {
font-family: "M PLUS Rounded 1c","Zen Maru Gothic",sans-serif !important;
font-style: normal !important;
font-weight: 900 !important;
font-size: 24px !important;
line-height: 1 !important;
color: #fff !important;
background: currentColor !important;
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 8px 14px -6px rgba(0,0,0,.18), inset 0 0 0 3px rgba(255,255,255,.55) !important;
min-width: 0 !important;
text-align: center !important;
position: relative;
}
body.page-id-47 .iroha-cx2__chip-idx::after {
/* write the number in white on top */
display: none !important;
}
/* The number text itself — override color so it shows white, not currentColor */
body.page-id-47 .iroha-cx2__chip-idx {
text-indent: 0;
}
body.page-id-47 .iroha-cx2__chip-idx::before {
content: attr(data-shadow);
}
/* Because original markup has plain "01" text, make text white using a wrapper trick: set color on chip to accent, but keep number legible */
body.page-id-47 .iroha-cx2__chip-idx {
color: #fff !important;
}
/* But the bg uses currentColor, so we need a different approach — wrap via mix:
solution: use filter inversion NOT good. Instead, use background-color fixed per variant
We'll override per-chip below.
*/
/* Per-chip color — set on root so ::before bar uses it, but idx gets explicit bg */
body.page-id-47 .iroha-cx2__chip--01 { color: #6ec7a6 !important; }
body.page-id-47 .iroha-cx2__chip--02 { color: #f4a02a !important; }
body.page-id-47 .iroha-cx2__chip--03 { color: #ff6e91 !important; }
body.page-id-47 .iroha-cx2__chip--04 { color: #4fa9dc !important; }
body.page-id-47 .iroha-cx2__chip--05 { color: #8b7fd9 !important; }
body.page-id-47 .iroha-cx2__chip--01 .iroha-cx2__chip-idx { background: linear-gradient(135deg, #6ec7a6, #a2dab3) !important; }
body.page-id-47 .iroha-cx2__chip--02 .iroha-cx2__chip-idx { background: linear-gradient(135deg, #f4a02a, #ffc875) !important; }
body.page-id-47 .iroha-cx2__chip--03 .iroha-cx2__chip-idx { background: linear-gradient(135deg, #ff6e91, #ffb2c9) !important; }
body.page-id-47 .iroha-cx2__chip--04 .iroha-cx2__chip-idx { background: linear-gradient(135deg, #4fa9dc, #8cc9ea) !important; }
body.page-id-47 .iroha-cx2__chip--05 .iroha-cx2__chip-idx { background: linear-gradient(135deg, #8b7fd9, #b098df) !important; }
body.page-id-47 .iroha-cx2__chip-title {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-weight: 900 !important;
font-size: 15.5px !important;
letter-spacing: .03em !important;
color: #2a1a22 !important;
margin-bottom: 2px !important;
}
body.page-id-47 .iroha-cx2__chip-desc {
font-size: 12px !important;
color: #7c6670 !important;
line-height: 1.6 !important;
}
body.page-id-47 .iroha-cx2__chip-arrow {
font-family: "Zen Maru Gothic",sans-serif !important;
color: currentColor !important;
opacity: .55 !important;
}
/* ==============================================================
Responsive
============================================================== */
@media (max-width: 1024px) {
body.page-id-47 .iroha-cx2__stage {
grid-template-columns: 1fr !important;
gap: 44px !important;
max-width: 560px;
}
body.page-id-47 .iroha-cx2__hero-photo { max-width: 320px !important; }
}
@media (max-width: 820px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 58px 20px 72px !important;
}
body.page-id-47 .iroha-cx2__header { padding-left: 24px !important; margin-bottom: 44px !important; }
body.page-id-47 .iroha-cx2__display { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.4 !important; }
body.page-id-47 .iroha-cx2__hero-photo { max-width: 280px !important; border-width: 5px !important; border-radius: 30px !important; }
body.page-id-47 .iroha-cx2__hero-photo img { border-radius: 25px !important; }
body.page-id-47 .iroha-cx2__hero-badge { width: 78px !important; height: 78px !important; top: -16px !important; right: -10px !important; }
body.page-id-47 .iroha-cx2__hero-badge-num { font-size: 32px !important; }
body.page-id-47 .iroha-cx2__chip { padding: 14px 16px 14px 14px !important; grid-template-columns: 40px 1fr 22px !important; gap: 12px !important; }
body.page-id-47 .iroha-cx2__chip-idx { width: 40px !important; height: 40px !important; font-size: 20px !important; border-radius: 12px !important; }
body.page-id-47 .iroha-cx2__chip-title { font-size: 14px !important; }
body.page-id-47 .iroha-cx2__chip-desc { font-size: 11.5px !important; }
}
/* ==============================================================
CONCEPT v5 — Cute decorations (stars, dots, sparkles, hearts)
+ rounded friendly typography
============================================================== */
/* Background must stay white */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
background: #ffffff !important;
position: relative !important;
overflow: hidden !important;
}
/* Decoration layer */
body.page-id-47 .iroha-cx2__bg {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
overflow: hidden;
}
body.page-id-47 .iroha-cx2__deco {
position: absolute;
display: block;
pointer-events: none;
}
/* ---- Dots ---- */
body.page-id-47 .iroha-cx2__deco--dot {
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,.04);
animation: cx5Float 6s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__deco--1 { width: 22px; height: 22px; background: #ffd3dc; top: 6%; left: 5%; animation-delay: 0s; }
body.page-id-47 .iroha-cx2__deco--2 { width: 12px; height: 12px; background: #ffd84a; top: 14%; left: 18%; animation-delay: .6s; }
body.page-id-47 .iroha-cx2__deco--3 { width: 16px; height: 16px; background: #cfeaff; top: 24%; right: 10%; animation-delay: 1.2s; }
body.page-id-47 .iroha-cx2__deco--4 { width: 10px; height: 10px; background: #d9f2d6; top: 62%; left: 8%; animation-delay: 1.8s; }
body.page-id-47 .iroha-cx2__deco--5 { width: 14px; height: 14px; background: #e8d9ff; bottom: 12%; right: 16%; animation-delay: 2.4s; }
body.page-id-47 .iroha-cx2__deco--6 { width: 18px; height: 18px; background: #ffd3dc; bottom: 20%; left: 22%; animation-delay: 3s; }
/* ---- Rings (outline dots) ---- */
body.page-id-47 .iroha-cx2__deco--ring {
border-radius: 50%;
background: transparent;
animation: cx5Float 7s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__deco--7 {
width: 36px; height: 36px;
border: 2.5px solid #ffb7c8;
top: 40%; right: 4%;
animation-delay: .8s;
}
body.page-id-47 .iroha-cx2__deco--8 {
width: 28px; height: 28px;
border: 2.5px solid #ffd84a;
bottom: 30%; left: 3%;
animation-delay: 2s;
}
/* ---- Stars ---- */
body.page-id-47 .iroha-cx2__deco--star {
width: 30px; height: 30px;
fill: #ffd84a;
filter: drop-shadow(0 4px 8px rgba(244,160,42,.3));
animation: cx5Twinkle 3.5s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__deco--9 { top: 8%; right: 22%; animation-delay: 0s; }
body.page-id-47 .iroha-cx2__deco--10 { width: 22px; height: 22px; bottom: 10%; right: 30%; fill: #ff87a5; animation-delay: 1.2s; }
body.page-id-47 .iroha-cx2__deco--11 { width: 26px; height: 26px; top: 52%; left: 12%; fill: #80c6ea; animation-delay: 2.4s; }
/* ---- 4-point sparkles ---- */
body.page-id-47 .iroha-cx2__deco--sparkle {
width: 20px; height: 20px;
fill: #ff87a5;
filter: drop-shadow(0 0 6px rgba(255,135,165,.45));
animation: cx5Twinkle 2.8s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__deco--12 { top: 32%; left: 42%; animation-delay: .4s; }
body.page-id-47 .iroha-cx2__deco--13 { width: 16px; height: 16px; bottom: 44%; right: 44%; fill: #80c6ea; animation-delay: 1.8s; }
/* ---- Hearts ---- */
body.page-id-47 .iroha-cx2__deco--heart {
width: 22px; height: 22px;
fill: #ff87a5;
filter: drop-shadow(0 4px 8px rgba(255,135,165,.3));
animation: cx5Pulse 3s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__deco--14 { bottom: 6%; left: 40%; animation-delay: 0s; }
body.page-id-47 .iroha-cx2__deco--15 { top: 4%; left: 56%; width: 16px; height: 16px; fill: #ffb7c8; animation-delay: 1s; }
/* ---- Wavy squiggles ---- */
body.page-id-47 .iroha-cx2__deco--squiggle {
width: 60px; height: 16px;
color: #ff87a5;
opacity: .5;
}
body.page-id-47 .iroha-cx2__deco--16 { top: 18%; right: 36%; transform: rotate(-8deg); color: #80c6ea; }
body.page-id-47 .iroha-cx2__deco--17 { bottom: 22%; left: 38%; transform: rotate(6deg); color: #6ec7a6; }
/* ---- Plus signs ---- */
body.page-id-47 .iroha-cx2__deco--plus {
width: 18px; height: 18px;
color: #ffd84a;
opacity: .85;
animation: cx5Twinkle 4s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__deco--18 { top: 70%; right: 26%; animation-delay: .8s; color: #b098df; }
body.page-id-47 .iroha-cx2__deco--19 { top: 28%; left: 32%; width: 14px; height: 14px; animation-delay: 2.2s; }
/* ---- Animations ---- */
@keyframes cx5Float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes cx5Twinkle {
0%,100% { opacity: 1; transform: scale(1) rotate(0deg); }
50% { opacity: .4; transform: scale(.85) rotate(12deg); }
}
@keyframes cx5Pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Lift real content above the deco layer */
body.page-id-47 .iroha-cx2__inner { position: relative; z-index: 1; }
/* ==============================================================
Cuter typography
============================================================== */
/* Header eyebrow with a heart before the label */
body.page-id-47 .iroha-cx2__eyebrow {
gap: 10px !important;
}
body.page-id-47 .iroha-cx2__eyebrow-label {
font-family: "Pacifico","Caveat","Zen Maru Gothic",cursive !important;
font-size: 20px !important;
letter-spacing: .04em !important;
color: #e8537b !important;
font-weight: 400 !important;
position: relative;
padding-left: 4px;
}
body.page-id-47 .iroha-cx2__eyebrow-label::before {
content: "♡";
display: inline-block;
margin-right: 8px;
color: #ff87a5;
font-size: 18px;
transform: translateY(-1px);
}
body.page-id-47 .iroha-cx2__eyebrow-num {
font-family: "Zen Maru Gothic",sans-serif !important;
font-style: normal !important;
color: #c7a3ab !important;
font-size: 12px !important;
letter-spacing: .25em !important;
}
/* Display: rounded + gradient for em */
body.page-id-47 .iroha-cx2__display {
font-family: "Zen Maru Gothic","M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif !important;
font-weight: 900 !important;
line-height: 1.42 !important;
color: #2a1a22 !important;
}
body.page-id-47 .iroha-cx2__display em {
font-family: "Pacifico","Caveat",cursive !important;
font-style: normal !important;
background: linear-gradient(135deg, #ff5a7d 0%, #f4a02a 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-size: 1.15em !important;
padding: 0 .05em !important;
position: relative;
}
body.page-id-47 .iroha-cx2__display em::after {
content: "";
position: absolute;
left: 5%; right: 5%;
bottom: .04em;
height: .25em;
background: repeating-linear-gradient(90deg, rgba(255,183,200,.55) 0 6px, transparent 6px 10px);
border-radius: 999px;
z-index: -1;
}
/* Tiny twinkle before em */
body.page-id-47 .iroha-cx2__display em::before {
content: "✦";
position: absolute;
left: -1.1em;
top: -.2em;
font-size: .55em;
color: #ffd84a;
-webkit-text-fill-color: #ffd84a;
filter: drop-shadow(0 0 6px rgba(255,216,74,.6));
animation: cx5Twinkle 2.4s ease-in-out infinite;
}
/* Lede: softer, with wave decoration at end */
body.page-id-47 .iroha-cx2__lede {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-size: 15px !important;
line-height: 2.15 !important;
color: #5a4852 !important;
letter-spacing: .02em !important;
position: relative;
}
body.page-id-47 .iroha-cx2__lede b {
color: #e8537b !important;
font-weight: 900 !important;
background: linear-gradient(transparent 62%, #ffe3ea 62%) !important;
border: 0 !important;
padding: 0 3px !important;
}
body.page-id-47 .iroha-cx2__lede b::after { display: none !important; }
body.page-id-47 .iroha-cx2__lede mark {
background: linear-gradient(transparent 55%, #fff4c8 55%) !important;
color: #2a1a22 !important;
font-weight: 900 !important;
box-shadow: none !important;
padding: 0 3px !important;
}
/* Display line wrap: ensure block to let em gradient render cleanly */
body.page-id-47 .iroha-cx2__display-line {
display: block;
}
/* Hero caption JP — kawaii */
body.page-id-47 .iroha-cx2__hero-caption-jp {
font-family: "Zen Maru Gothic",sans-serif !important;
font-style: normal !important;
font-weight: 900 !important;
}
body.page-id-47 .iroha-cx2__hero-caption-en {
font-family: "Pacifico","Caveat",cursive !important;
font-size: 14px !important;
}
/* Chips: cuter number tile — add subtle tilt on hover */
body.page-id-47 .iroha-cx2__chip-title {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
}
body.page-id-47 .iroha-cx2__chip-desc {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
}
body.page-id-47 .iroha-cx2__chip:hover .iroha-cx2__chip-idx {
transform: rotate(-8deg) scale(1.06);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
body.page-id-47 .iroha-cx2__chip-idx {
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
/* ---------- Responsive tweaks ---------- */
@media (max-width: 820px) {
/* hide some decos on mobile to reduce clutter */
body.page-id-47 .iroha-cx2__deco--16,
body.page-id-47 .iroha-cx2__deco--17,
body.page-id-47 .iroha-cx2__deco--12,
body.page-id-47 .iroha-cx2__deco--13,
body.page-id-47 .iroha-cx2__deco--19 { display: none !important; }
body.page-id-47 .iroha-cx2__eyebrow-label { font-size: 17px !important; }
body.page-id-47 .iroha-cx2__display em::before { display: none !important; }
}
/* Display heading — all pink */
body.page-id-47 .iroha-cx2__display,
body.page-id-47 .iroha-cx2__display-line {
color: #e8537b !important;
}
body.page-id-47 .iroha-cx2__display em {
/* keep em distinct with a slightly warmer pink gradient */
background: linear-gradient(135deg, #ff4f77 0%, #ff98b2 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Revert display heading color to dark ink */
body.page-id-47 .iroha-cx2__display,
body.page-id-47 .iroha-cx2__display-line {
color: #2a1a22 !important;
}
/* Restore em gradient (pink→orange) for 「できた！」 */
body.page-id-47 .iroha-cx2__display em {
background: linear-gradient(135deg, #ff5a7d 0%, #f4a02a 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* CONCEPT section — tighter vertical rhythm */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 56px 28px 64px !important;
}
body.page-id-47 .iroha-cx2__header {
margin-bottom: 40px !important;
gap: 14px !important;
}
body.page-id-47 .iroha-cx2__display {
font-size: clamp(26px, 3.8vw, 44px) !important;
line-height: 1.32 !important;
margin: 0 !important;
}
body.page-id-47 .iroha-cx2__lede {
font-size: 14.5px !important;
line-height: 1.95 !important;
margin-top: 4px !important;
}
body.page-id-47 .iroha-cx2__stage {
gap: 44px !important;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 40px 20px 48px !important;
}
body.page-id-47 .iroha-cx2__header {
margin-bottom: 28px !important;
}
body.page-id-47 .iroha-cx2__display {
font-size: clamp(22px, 6.2vw, 30px) !important;
line-height: 1.36 !important;
}
body.page-id-47 .iroha-cx2__stage { gap: 28px !important; }
}
/* CONCEPT section — even tighter */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 28px 28px 32px !important;
}
body.page-id-47 .iroha-cx2__header {
margin-bottom: 20px !important;
gap: 8px !important;
}
body.page-id-47 .iroha-cx2__display {
font-size: clamp(22px, 3.2vw, 34px) !important;
line-height: 1.3 !important;
}
body.page-id-47 .iroha-cx2__lede {
font-size: 13.5px !important;
line-height: 1.85 !important;
margin-top: 2px !important;
}
body.page-id-47 .iroha-cx2__stage {
gap: 28px !important;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding: 20px 20px 24px !important;
}
body.page-id-47 .iroha-cx2__header { margin-bottom: 14px !important; }
body.page-id-47 .iroha-cx2__display { font-size: clamp(19px, 5.8vw, 26px) !important; line-height: 1.34 !important; }
body.page-id-47 .iroha-cx2__stage { gap: 18px !important; }
}
/* CONCEPT — corner mascot characters */
body.page-id-47 .iroha-cx2__chara {
position: absolute;
width: 150px;
height: auto;
pointer-events: none;
z-index: 1;
filter: drop-shadow(0 14px 22px rgba(120, 80, 40, .22));
animation: cx2CharaFloat 6s ease-in-out infinite;
}
body.page-id-47 .iroha-cx2__chara--bl {
left: 16px;
bottom: 10px;
transform: rotate(-6deg);
animation-delay: 0s;
}
body.page-id-47 .iroha-cx2__chara--tr {
right: 16px;
top: 10px;
transform: rotate(6deg);
width: 170px;
animation-delay: 1.5s;
}
@keyframes cx2CharaFloat {
0%,100% { translate: 0 0; }
50% { translate: 0 -10px; }
}
@media (max-width: 1024px) {
body.page-id-47 .iroha-cx2__chara { width: 110px; }
body.page-id-47 .iroha-cx2__chara--tr { width: 130px; }
}
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara { width: 80px; }
body.page-id-47 .iroha-cx2__chara--tr { width: 92px; }
body.page-id-47 .iroha-cx2__chara--bl { left: 4px; bottom: 4px; }
body.page-id-47 .iroha-cx2__chara--tr { right: 4px; top: 4px; }
}
@media (max-width: 520px) {
body.page-id-47 .iroha-cx2__chara--bl,
body.page-id-47 .iroha-cx2__chara--tr {
opacity: .85;
}
}
/* Make sure the chara imgs are visible above the section background
regardless of .iroha-cx2__bg overflow/z-index context */
body.page-id-47 .iroha-cx2__bg {
overflow: visible !important;
}
body.page-id-47 .iroha-cx2__chara {
position: absolute !important;
z-index: 3 !important;
display: block !important;
pointer-events: none;
filter: drop-shadow(0 14px 22px rgba(120, 80, 40, .22));
}
/* Place them anchored to the SECTION corners, not the tiny bg layer.
.iroha-cx2__bg is inset:0 so the corners match section corners anyway. */
body.page-id-47 .iroha-cx2__chara--bl {
left: 24px !important;
bottom: -20px !important;
top: auto !important;
right: auto !important;
width: 140px !important;
transform: rotate(-6deg) !important;
}
body.page-id-47 .iroha-cx2__chara--tr {
right: 24px !important;
top: -16px !important;
bottom: auto !important;
left: auto !important;
width: 160px !important;
transform: rotate(6deg) !important;
}
@media (max-width: 1024px) {
body.page-id-47 .iroha-cx2__chara--bl { width: 110px !important; bottom: -10px !important; }
body.page-id-47 .iroha-cx2__chara--tr { width: 120px !important; top: -8px !important; }
}
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--bl { width: 80px !important; left: 6px !important; bottom: -6px !important; }
body.page-id-47 .iroha-cx2__chara--tr { width: 90px !important; right: 6px !important; top: -4px !important; }
}
/* Force characters to show: keep inside section, high z-index */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
overflow: visible !important;
position: relative !important;
}
body.page-id-47 .iroha-cx2__bg {
overflow: visible !important;
}
body.page-id-47 .iroha-cx2__chara {
position: absolute !important;
z-index: 20 !important;
display: block !important;
pointer-events: none;
visibility: visible !important;
opacity: 1 !important;
filter: drop-shadow(0 14px 22px rgba(120, 80, 40, .22));
}
body.page-id-47 .iroha-cx2__chara--bl {
left: 24px !important;
bottom: 24px !important;
top: auto !important;
right: auto !important;
width: 140px !important;
height: auto !important;
transform: rotate(-6deg) !important;
}
body.page-id-47 .iroha-cx2__chara--tr {
right: 24px !important;
top: 24px !important;
bottom: auto !important;
left: auto !important;
width: 160px !important;
height: auto !important;
transform: rotate(6deg) !important;
}
@media (max-width: 1024px) {
body.page-id-47 .iroha-cx2__chara--bl { width: 110px !important; bottom: 14px !important; left: 14px !important; }
body.page-id-47 .iroha-cx2__chara--tr { width: 120px !important; top: 14px !important; right: 14px !important; }
}
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--bl { width: 80px !important; left: 6px !important; bottom: 6px !important; }
body.page-id-47 .iroha-cx2__chara--tr { width: 90px !important; right: 6px !important; top: 6px !important; }
}
/* Enable houkago-style decoration pattern inside activity CONCEPT */
body.page-id-47 .iroha-cx2 .iroha-jihatsu__deco {
display: block !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
}
body.page-id-47 .iroha-cx2 .iroha-pat {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Sparkles default white — change to pink so they stand out on white bg */
body.page-id-47 .iroha-cx2 .iroha-pat--sparkle {
background:
linear-gradient(90deg, transparent 44%, #ff8aa4 44%, #ff8aa4 56%, transparent 56%),
linear-gradient(0deg, transparent 44%, #ff8aa4 44%, #ff8aa4 56%, transparent 56%) !important;
filter: drop-shadow(0 0 6px rgba(255,138,164,.55)) !important;
opacity: .9 !important;
}
/* Dots: slightly softer for white bg */
body.page-id-47 .iroha-cx2 .iroha-pat--dot {
box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
/* Lift real content above the new pattern layer */
body.page-id-47 .iroha-cx2__inner { position: relative; z-index: 2 !important; }
/* Keep existing v5 decos (stars/hearts) too, stacked below new pattern is fine */
/* The .iroha-act2 * reset kills background/border for our decorations.
Force restore inside activity CONCEPT section. */
/* STARS (4-point diamond shape via clip-path) */
body.page-id-47 .iroha-cx2 .iroha-pat--star {
background: #ffd96b !important;
clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%) !important;
filter: drop-shadow(0 2px 4px rgba(255, 180, 50, .4)) !important;
width: 22px !important; height: 22px !important;
}
/* DOTS (colored) */
body.page-id-47 .iroha-cx2 .iroha-pat--dot {
border-radius: 50% !important;
width: 10px !important; height: 10px !important;
box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
body.page-id-47 .iroha-cx2 .iroha-pat--5 { background: #ff8aa4 !important; }
body.page-id-47 .iroha-cx2 .iroha-pat--6 { background: #a5d4ef !important; }
body.page-id-47 .iroha-cx2 .iroha-pat--7 { background: #b6dca7 !important; }
body.page-id-47 .iroha-cx2 .iroha-pat--8 { background: #b68be3 !important; }
/* HEARTS */
body.page-id-47 .iroha-cx2 .iroha-pat--heart {
background: #ff8aa4 !important;
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') !important;
width: 16px !important; height: 14px !important;
opacity: .85 !important;
filter: drop-shadow(0 2px 4px rgba(255,138,164,.4)) !important;
}
/* RINGS (outline circles) */
body.page-id-47 .iroha-cx2 .iroha-pat--ring {
background: transparent !important;
border: 3px solid rgba(255,138,164,.45) !important;
border-radius: 50% !important;
width: 36px !important; height: 36px !important;
}
body.page-id-47 .iroha-cx2 .iroha-pat--12 {
border-color: rgba(134,198,234,.45) !important;
width: 28px !important; height: 28px !important;
}
/* SPARKLES (plus-cross) — pink on white bg */
body.page-id-47 .iroha-cx2 .iroha-pat--sparkle {
background:
linear-gradient(90deg, transparent 44%, #ff8aa4 44%, #ff8aa4 56%, transparent 56%),
linear-gradient(0deg, transparent 44%, #ff8aa4 44%, #ff8aa4 56%, transparent 56%) !important;
width: 14px !important; height: 14px !important;
filter: drop-shadow(0 0 6px rgba(255,138,164,.6)) !important;
opacity: .9 !important;
}
/* Allow lede paragraph to use full width so "げる。" stays on same line */
body.page-id-47 .iroha-cx2__lede {
max-width: none !important;
width: 100% !important;
}
/* Make the lede body text heavier */
body.page-id-47 .iroha-cx2__lede {
font-weight: 700 !important;
color: #2a1a22 !important;
}
/* Mobile: push bottom-left chara well below the chip list so it doesn't overlap */
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--bl {
left: 8px !important;
bottom: -48px !important;
width: 80px !important;
z-index: 5 !important; /* below chips */
}
body.page-id-47 .iroha-cx2__chara--tr {
right: 8px !important;
top: -40px !important;
width: 90px !important;
z-index: 5 !important;
}
/* Ensure chip list sits above any chara that strays */
body.page-id-47 .iroha-cx2__chips,
body.page-id-47 .iroha-cx2__chip { position: relative; z-index: 10 !important; }
/* Add breathing room at bottom of section so the chara has a home */
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding-bottom: 80px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 .iroha-cx2__chara--bl {
width: 64px !important;
bottom: -36px !important;
left: 4px !important;
}
body.page-id-47 .iroha-cx2__chara--tr {
width: 72px !important;
top: -32px !important;
right: 4px !important;
}
}
/* Authoritative chara positioning (desktop + mobile) */
body.page-id-47 .iroha-cx2__chara--bl {
left: 24px !important;
bottom: 24px !important;
top: auto !important;
right: auto !important;
width: 140px !important;
height: auto !important;
z-index: 5 !important;
transform: rotate(-4deg) !important;
}
body.page-id-47 .iroha-cx2__chara--tr {
right: 24px !important;
top: 24px !important;
bottom: auto !important;
left: auto !important;
width: 160px !important;
height: auto !important;
z-index: 5 !important;
transform: rotate(6deg) scaleX(-1) !important;
}
/* Chip list above chara on all viewports */
body.page-id-47 .iroha-cx2__chips,
body.page-id-47 .iroha-cx2__chip {
position: relative;
z-index: 10 !important;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--bl {
width: 80px !important;
bottom: -46px !important;
left: 6px !important;
}
body.page-id-47 .iroha-cx2__chara--tr {
width: 90px !important;
top: -38px !important;
right: 6px !important;
}
body.page-id-47 .iroha-act2 .iroha-act2__sec--concept.iroha-cx2 {
padding-bottom: 80px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 .iroha-cx2__chara--bl {
width: 64px !important;
bottom: -32px !important;
left: 4px !important;
}
body.page-id-47 .iroha-cx2__chara--tr {
width: 72px !important;
top: -28px !important;
right: 4px !important;
}
}
/* Nudge mobile bottom-left chara UP so it sits near the last chip, above the wave */
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--bl {
bottom: 40px !important;
left: 6px !important;
width: 84px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 .iroha-cx2__chara--bl {
bottom: 32px !important;
left: 4px !important;
width: 72px !important;
}
}
/* Keep the trio chara fully in view on mobile */
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--tr {
width: 72px !important;
top: 12px !important;
right: 10px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 .iroha-cx2__chara--tr {
width: 58px !important;
top: 10px !important;
right: 8px !important;
}
}
/* Nudge bottom-left bear slightly downward on mobile so it clears chip 05 */
@media (max-width: 820px) {
body.page-id-47 .iroha-cx2__chara--bl {
bottom: 16px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 .iroha-cx2__chara--bl {
bottom: 12px !important;
}
}
/* ==============================================================
Activity List (iroha-al) — unified, no section dividers
Alternating row layout with soft pastel media tiles
============================================================== */
/* Container section */
body.page-id-47 .iroha-act2 .iroha-act2__sec--white.iroha-al {
background: #ffffff !important;
padding: 56px 24px 80px !important;
position: relative !important;
}
body.page-id-47 .iroha-al__inner {
max-width: 1120px;
margin: 0 auto;
display: grid;
gap: 56px;
position: relative;
}
/* Thin vertical guide line connecting the items */
body.page-id-47 .iroha-al__inner::before {
content: "";
position: absolute;
left: 50%;
top: 20px;
bottom: 20px;
width: 2px;
background: repeating-linear-gradient(180deg, #ffd3dc 0 6px, transparent 6px 14px);
transform: translateX(-50%);
opacity: .6;
pointer-events: none;
z-index: 0;
}
/* Each item row */
body.page-id-47 .iroha-al__item {
display: grid;
grid-template-columns: 340px 1fr;
gap: 52px;
align-items: center;
position: relative;
z-index: 1;
}
body.page-id-47 .iroha-al__item:nth-child(even) {
grid-template-columns: 1fr 340px;
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__body { order: 1; }
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__media { order: 2; }
/* Media tile: rounded square with gradient, large emoji, number badge */
body.page-id-47 .iroha-al__media {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 38px;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
font-size: 110px;
line-height: 1;
box-shadow:
0 30px 50px -22px rgba(232,83,123,.3),
0 8px 18px -10px rgba(103,182,229,.2),
inset 0 0 0 6px rgba(255,255,255,.7);
transform: rotate(-3deg);
transition: transform .6s cubic-bezier(.2,.8,.2,1) !important;
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__media {
transform: rotate(3deg);
}
body.page-id-47 .iroha-al__media:hover { transform: rotate(0deg) scale(1.02) !important; }
/* Per-card gradients */
body.page-id-47 .iroha-al__item--c1 .iroha-al__media { background: linear-gradient(135deg, #ffd3dc 0%, #ffe6b0 100%) !important; }
body.page-id-47 .iroha-al__item--c2 .iroha-al__media { background: linear-gradient(135deg, #d9f2d6 0%, #cfeaff 100%) !important; }
body.page-id-47 .iroha-al__item--c3 .iroha-al__media { background: linear-gradient(135deg, #e8d9ff 0%, #ffd3dc 100%) !important; }
body.page-id-47 .iroha-al__item--c4 .iroha-al__media { background: linear-gradient(135deg, #cfeaff 0%, #e8d9ff 100%) !important; }
body.page-id-47 .iroha-al__item--c5 .iroha-al__media { background: linear-gradient(135deg, #ffe6b0 0%, #ffd3dc 100%) !important; }
body.page-id-47 .iroha-al__item--c6 .iroha-al__media { background: linear-gradient(135deg, #ffd3dc 0%, #ffe6b0 100%) !important; }
body.page-id-47 .iroha-al__item--c7 .iroha-al__media { background: linear-gradient(135deg, #ffe6b0 0%, #d9f2d6 100%) !important; }
body.page-id-47 .iroha-al__item--c8 .iroha-al__media { background: linear-gradient(135deg, #d9f2d6 0%, #cfeaff 100%) !important; }
body.page-id-47 .iroha-al__item--c9 .iroha-al__media { background: linear-gradient(135deg, #ffd3dc 0%, #e8d9ff 100%) !important; }
body.page-id-47 .iroha-al__media-emoji {
filter: drop-shadow(0 8px 10px rgba(0,0,0,.15));
transform: translateY(-4px);
}
/* Number badge floating top-right corner of media */
body.page-id-47 .iroha-al__media-num {
position: absolute;
top: -18px;
right: -18px;
width: 66px; height: 66px;
border-radius: 50%;
background: #ffffff;
color: #e8537b !important;
font-family: "Playfair Display","Zen Kaku Gothic New",serif !important;
font-style: italic;
font-weight: 900;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: -.02em;
box-shadow:
0 12px 22px -8px rgba(232,83,123,.4),
inset 0 0 0 2px #ffe3ea;
transform: rotate(-6deg);
z-index: 2;
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__media-num {
left: -18px;
right: auto;
transform: rotate(6deg);
}
/* Body */
body.page-id-47 .iroha-al__body {
display: flex;
flex-direction: column;
gap: 14px;
}
body.page-id-47 .iroha-al__title {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-weight: 900 !important;
font-size: clamp(22px, 2.4vw, 30px) !important;
color: #2a1a22 !important;
letter-spacing: .04em !important;
line-height: 1.45 !important;
margin: 0 !important;
position: relative;
padding-bottom: 10px;
}
body.page-id-47 .iroha-al__title::after {
content: "";
display: block;
width: 54px;
height: 4px;
border-radius: 999px;
margin-top: 10px;
background: linear-gradient(90deg, #ff87a5 0%, #ffd96b 100%);
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__title { text-align: right; }
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__title::after { margin-left: auto; }
body.page-id-47 .iroha-al__desc {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-size: 15px !important;
line-height: 2.05 !important;
color: #3a2730 !important;
letter-spacing: .02em !important;
margin: 0 !important;
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__desc { text-align: right; }
/* Tags */
body.page-id-47 .iroha-al__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__tags { justify-content: flex-end; }
body.page-id-47 .iroha-al__tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
height: 32px;
padding: 0 16px;
border-radius: 999px;
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-weight: 800 !important;
font-size: 12px !important;
color: #fff !important;
letter-spacing: .08em !important;
box-shadow:
0 6px 12px -6px rgba(0,0,0,.18),
inset 0 0 0 2px rgba(255,255,255,.5) !important;
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
body.page-id-47 .iroha-al__tag:hover { transform: translateY(-2px) scale(1.04); }
body.page-id-47 .iroha-al__tag--body { background: linear-gradient(135deg, #f08c3a, #ffb575) !important; }
body.page-id-47 .iroha-al__tag--heart { background: linear-gradient(135deg, #c66bb2, #e48ed1) !important; }
body.page-id-47 .iroha-al__tag--word { background: linear-gradient(135deg, #4fa9dc, #80c6ea) !important; }
body.page-id-47 .iroha-al__tag--life { background: linear-gradient(135deg, #5ab770, #8cd39e) !important; }
body.page-id-47 .iroha-al__tag--mate { background: linear-gradient(135deg, #8b70c7, #b098df) !important; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
body.page-id-47 .iroha-al__inner::before { display: none; }
body.page-id-47 .iroha-al__item,
body.page-id-47 .iroha-al__item:nth-child(even) {
grid-template-columns: 1fr;
gap: 22px;
text-align: left !important;
}
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__body,
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__media { order: initial; }
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__title,
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__desc { text-align: left !important; }
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__tags { justify-content: flex-start; }
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__title::after { margin-left: 0; }
body.page-id-47 .iroha-al__item:nth-child(even) .iroha-al__media-num {
left: auto; right: -14px; transform: rotate(-6deg);
}
body.page-id-47 .iroha-al__media {
max-width: 280px;
margin: 0 auto;
font-size: 80px;
border-radius: 30px;
}
body.page-id-47 .iroha-al__media-num {
width: 52px; height: 52px; font-size: 20px;
top: -12px; right: -12px;
}
body.page-id-47 .iroha-al__title { font-size: 22px !important; }
body.page-id-47 .iroha-al__desc { font-size: 14px !important; line-height: 1.95 !important; }
}
@media (max-width: 520px) {
body.page-id-47 .iroha-act2 .iroha-act2__sec--white.iroha-al {
padding: 40px 18px 64px !important;
}
body.page-id-47 .iroha-al__inner { gap: 40px; }
}
/* Activity list descriptions — bolder + darker for readability */
body.page-id-47 .iroha-al__desc {
font-weight: 700 !important;
color: #1a1520 !important;
font-size: 15.5px !important;
line-height: 2.1 !important;
letter-spacing: .03em !important;
}
@media (max-width: 900px) {
body.page-id-47 .iroha-al__desc {
font-size: 14.5px !important;
line-height: 2 !important;
}
}
/* Activity list — photo media variant */
body.page-id-47 .iroha-al__media--photo {
overflow: hidden;
font-size: 0 !important;
background: #fff !important;
padding: 0 !important;
}
body.page-id-47 .iroha-al__media-img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 32px;
display: block;
transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
body.page-id-47 .iroha-al__media--photo:hover .iroha-al__media-img {
transform: scale(1.06);
}
body.page-id-47 .iroha-al__media--photo .iroha-al__media-num {
z-index: 3;
}
/* Fix: allow number badge to float outside photo media container */
body.page-id-47 .iroha-al__media--photo {
overflow: visible !important;
}
body.page-id-47 .iroha-al__media--photo .iroha-al__media-img {
/* clip only the image itself, not the badge */
border-radius: 32px;
clip-path: inset(0 round 32px);
z-index: 1;
}
body.page-id-47 .iroha-al__media--photo::after {
/* shadow layer matching rounded photo */
content: "";
position: absolute;
inset: 0;
border-radius: 38px;
pointer-events: none;
}
body.page-id-47 .iroha-al__media--photo .iroha-al__media-num {
z-index: 10 !important;
}
/* Activity — shorter CONTACT section */
body.page-id-47 section.tc-contact {
padding: 0 0 60px 0 !important;
}
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 32px 0 28px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact {
padding: 0 0 40px 0 !important;
}
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 22px 0 20px !important;
}
}
/* Wave divider between activity list and contact */
body.page-id-47 .iroha-al__wave-to-contact {
display: block;
width: 100%;
line-height: 0;
font-size: 0;
margin: 0;
padding: 0;
background: #ffffff;
overflow: hidden;
}
body.page-id-47 .iroha-al__wave-to-contact svg {
display: block;
width: 100%;
height: 90px;
max-width: none;
}
@media (max-width: 820px) {
body.page-id-47 .iroha-al__wave-to-contact svg { height: 56px; }
}
/* Trim the activity list bottom so the wave sits flush */
body.page-id-47 .iroha-act2 .iroha-act2__sec--white.iroha-al {
padding-bottom: 48px !important;
}
/* Activity CONTACT — center everything (title, lede, buttons) */
body.page-id-47 section.tc-contact .tc-contact-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
min-height: 320px !important;
padding: 48px 24px 48px !important;
gap: 24px !important;
}
body.page-id-47 section.tc-contact .tc-contact-head {
width: 100% !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
}
body.page-id-47 section.tc-contact .tc-contact-head p {
text-align: center !important;
margin: 0 auto !important;
max-width: 640px !important;
}
body.page-id-47 section.tc-contact .tc-sec-title {
text-align: center !important;
margin: 0 auto !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 20px !important;
margin: 0 auto !important;
padding: 0 !important;
list-style: none !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
min-height: 260px !important;
padding: 32px 18px 32px !important;
gap: 18px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
gap: 14px !important;
}
}
/* Activity CONTACT — put buttons ABOVE the text (CONTACT / お問い合わせ / lede) */
body.page-id-47 section.tc-contact .tc-contact-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
}
/* Buttons first */
body.page-id-47 section.tc-contact .tc-contact-inner {
order: 1 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
/* Text block after */
body.page-id-47 section.tc-contact .tc-contact-head {
order: 2 !important;
text-align: center !important;
}
/* Activity CONTACT — match About page layout (text above, buttons below, all centered) */
body.page-id-47 section.tc-contact .tc-contact-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 28px !important;
min-height: 380px !important;
padding: 56px 24px 56px !important;
}
/* Restore natural order: text first, then buttons */
body.page-id-47 section.tc-contact .tc-contact-head {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
text-align: center !important;
}
body.page-id-47 section.tc-contact .tc-contact-head p {
text-align: center !important;
margin: 0 auto !important;
max-width: 640px !important;
}
body.page-id-47 section.tc-contact .tc-sec-title {
text-align: center !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
order: 2 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin-top: 8px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 24px !important;
margin: 0 auto !important;
padding: 0 !important;
list-style: none !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
min-height: 300px !important;
padding: 40px 18px 40px !important;
gap: 20px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list { gap: 14px !important; }
}
/* Activity CONTACT — pull buttons closer to the text */
body.page-id-47 section.tc-contact .tc-contact-wrap {
gap: 14px !important;
min-height: 320px !important;
padding: 40px 24px 48px !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: -4px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
gap: 12px !important;
min-height: 260px !important;
padding: 28px 18px 32px !important;
}
}
/* Activity CONTACT — pull buttons visually up (tighter gap + remove top margin) */
body.page-id-47 section.tc-contact .tc-contact-wrap {
gap: 10px !important;
min-height: 0 !important;
padding: 32px 24px 40px !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: -20px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
gap: 18px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
flex: 0 0 auto !important;
max-width: 320px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
gap: 8px !important;
padding: 22px 18px 28px !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: -14px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list { gap: 12px !important; }
}
/* Activity CONTACT — enlarge both buttons to about-page size */
body.page-id-47 section.tc-contact .iroha-contact-list li {
flex: 0 0 auto !important;
max-width: 420px !important;
width: 420px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 420px !important;
height: auto !important;
}
@media (max-width: 900px) {
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: 360px !important;
max-width: 360px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
max-width: 360px !important;
}
}
@media (max-width: 560px) {
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 360px !important;
}
}
/* Push CONTACT text block down a bit */
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 28px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 20px !important;
}
}
/* Push CONTACT text block further down */
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 72px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 48px !important;
}
}
/* Fix: ensure photo media displays on mobile (aspect-ratio collapse workaround) */
body.page-id-47 .iroha-al__media {
width: 100%;
min-height: 260px;
}
body.page-id-47 .iroha-al__media--photo {
position: relative !important;
min-height: 260px !important;
}
body.page-id-47 .iroha-al__media--photo .iroha-al__media-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
@media (max-width: 900px) {
body.page-id-47 .iroha-al__media {
max-width: 320px !important;
width: 100%;
min-height: 280px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto !important;
}
body.page-id-47 .iroha-al__media--photo {
min-height: 280px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 .iroha-al__media {
max-width: 280px !important;
min-height: 240px !important;
}
body.page-id-47 .iroha-al__media--photo {
min-height: 240px !important;
}
}
/* Mobile: pull buttons up close to the text */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
min-height: 0 !important;
padding: 20px 16px 24px !important;
gap: 10px !important;
}
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 8px !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: 6px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
gap: 10px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
}
}
@media (max-width: 560px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 14px 14px 18px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
max-width: 300px !important;
}
}
/* Mobile CONTACT — match the reference (text + 2 stacked buttons, tight rhythm) */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact {
padding: 0 0 30px 0 !important;
}
body.page-id-47 section.tc-contact .tc-contact-wrap {
min-height: 0 !important;
padding: 36px 20px 28px !important;
gap: 16px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 0 !important;
gap: 8px !important;
width: 100% !important;
}
body.page-id-47 section.tc-contact .tc-contact-head p {
margin: 4px auto 0 !important;
line-height: 1.85 !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
width: 100% !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 360px !important;
margin: 0 auto !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 360px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 28px 16px 24px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
max-width: 320px !important;
}
}
/* Mobile CONTACT — squeeze all vertical space between the two buttons */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list {
gap: 10px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* Kill any top margin the --reserve button might carry */
body.page-id-47 section.tc-contact .iroha-contact-imgbtn--reserve,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn--reserve img {
margin-top: 0 !important;
transform: none !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: 0 !important;
}
}
/* Mobile CONTACT — aggressively shorten overall section height */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-47 section.tc-contact .tc-contact-wrap {
min-height: 0 !important;
padding: 18px 16px 18px !important;
gap: 8px !important;
}
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 0 !important;
gap: 4px !important;
}
body.page-id-47 section.tc-contact .tc-contact-head p {
margin: 2px auto 0 !important;
line-height: 1.75 !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
}
/* Buttons: row (side-by-side) if screen allows, tight */
body.page-id-47 section.tc-contact .iroha-contact-list {
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: calc(50% - 6px) !important;
max-width: 200px !important;
margin: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 420px) {
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: calc(50% - 4px) !important;
max-width: 170px !important;
}
}
/* Mobile CONTACT — match reference layout exactly
CONTACT / お問い合わせ / lede / [Web btn] / [Reserve btn] — stacked, moderate spacing */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact {
padding: 0 !important;
}
body.page-id-47 section.tc-contact .tc-contact-wrap {
min-height: 0 !important;
padding: 36px 20px 36px !important;
gap: 18px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
body.page-id-47 section.tc-contact .tc-contact-head {
margin: 0 !important;
gap: 8px !important;
text-align: center !important;
width: 100%;
}
body.page-id-47 section.tc-contact .tc-contact-head p {
margin: 4px auto 0 !important;
line-height: 1.9 !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: 4px !important;
width: 100% !important;
}
/* Stack buttons vertically, centered, with modest gap */
body.page-id-47 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
flex: 0 0 auto !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 340px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 28px 16px 28px !important;
gap: 14px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
max-width: 300px !important;
}
}
/* Activity CONTACT — shorter overall height (desktop + mobile) */
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 20px 24px 24px !important;
gap: 10px !important;
min-height: 0 !important;
}
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 0 !important;
gap: 6px !important;
}
body.page-id-47 section.tc-contact .tc-contact-head p {
margin: 2px auto 0 !important;
line-height: 1.85 !important;
}
body.page-id-47 section.tc-contact .tc-contact-inner {
margin-top: 2px !important;
}
body.page-id-47 section.tc-contact {
padding-bottom: 30px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-wrap {
padding: 16px 18px 18px !important;
gap: 8px !important;
}
body.page-id-47 section.tc-contact {
padding-bottom: 18px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list { gap: 10px !important; }
}
/* Force second button up — collapse any gap between Web and Reserve */
body.page-id-47 section.tc-contact .iroha-contact-list {
gap: 0 !important;
row-gap: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -40px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-list li .iroha-contact-imgbtn img {
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -30px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -24px !important;
}
}
/* More aggressive pull-up for the Reserve button */
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -120px !important;
}
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -80px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -60px !important;
}
}
/* Mobile: normal centered stacked layout, no negative margins */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
row-gap: 12px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
max-width: 340px !important;
flex: 0 0 auto !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .iroha-contact-list li,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
max-width: 300px !important;
}
}
/* PC / tablet: horizontal row, equal vertical alignment */
body.page-id-47 section.tc-contact .iroha-contact-list {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
row-gap: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* Restore mobile override after this rule */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
gap: 12px !important;
}
}
/* PC: force true horizontal row, no wrap */
@media (min-width: 821px) {
body.page-id-47 section.tc-contact .tc-contact-inner {
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
width: auto !important;
max-width: 920px !important;
margin: 0 auto !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li {
flex: 0 0 auto !important;
width: 420px !important;
max-width: 420px !important;
margin: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 420px !important;
margin: 0 !important;
}
}
@media (min-width: 821px) and (max-width: 1000px) {
body.page-id-47 section.tc-contact .iroha-contact-list li {
width: 360px !important;
max-width: 360px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-imgbtn,
body.page-id-47 section.tc-contact .iroha-contact-imgbtn img {
max-width: 360px !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list { gap: 16px !important; }
}
/* Mobile only: pull the second button up close to the first */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list {
gap: 0 !important;
row-gap: 0 !important;
}
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -80px !important;
}
}
@media (max-width: 560px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -70px !important;
}
}
@media (max-width: 420px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -56px !important;
}
}
/* Mobile: push the CONTACT/お問い合わせ/lede block down */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 40px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .tc-contact-head {
margin-top: 32px !important;
}
}
/* Mobile: pull the first (Web) button upward */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list li:first-child {
margin-top: -40px !important;
}
}
@media (max-width: 520px) {
body.page-id-47 section.tc-contact .iroha-contact-list li:first-child {
margin-top: -32px !important;
}
}
/* Mobile: pull Reserve button further up, right under text */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -220px !important;
}
}
@media (max-width: 560px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -180px !important;
}
}
@media (max-width: 420px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -150px !important;
}
}
/* Mobile: pull Reserve button a bit more */
@media (max-width: 820px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -260px !important;
}
}
@media (max-width: 560px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -220px !important;
}
}
@media (max-width: 420px) {
body.page-id-47 section.tc-contact .iroha-contact-list li + li {
margin-top: -190px !important;
}
}
/* News - hero layout matches CONTACT page (use base .iroha-hero sizing) */
body.page-id-48 .iroha-hero__page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
/* News — hide duplicate about-page hero banner and its wave */
body.page-id-48 .iroha-about-page__hero,
body.page-id-48 .iroha-about-page__hero-wave {
display: none !important;
}
/* News — hide duplicate CONTACT CTA block (iroha-about-page__section--contact) */
body.page-id-48 .iroha-about-page__section--contact {
display: none !important;
}
/* News — shorter CONTACT section */
body.page-id-48 section.tc-contact {
padding: 0 0 60px 0 !important;
}
body.page-id-48 section.tc-contact .tc-contact-wrap {
padding: 32px 0 32px !important;
min-height: 0 !important;
}
@media (max-width: 820px) {
body.page-id-48 section.tc-contact {
padding: 0 0 36px 0 !important;
}
body.page-id-48 section.tc-contact .tc-contact-wrap {
padding: 22px 0 24px !important;
}
}
/* News — add breathing room below the news list before CONTACT */
body.page-id-48 .iroha-about-page__section--news-top {
padding-bottom: 72px !important;
}
body.page-id-48 .iroha-news-list {
margin-bottom: 16px !important;
}
@media (max-width: 820px) {
body.page-id-48 .iroha-about-page__section--news-top {
padding-bottom: 48px !important;
}
}
/* News — center contact text horizontally + add top wave divider */
body.page-id-48 section.tc-contact {
position: relative !important;
}
body.page-id-48 section.tc-contact::before {
content: "";
display: block;
height: 90px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
width: 100%;
}
@media (max-width: 820px) {
body.page-id-48 section.tc-contact::before { height: 56px; }
}
body.page-id-48 section.tc-contact .tc-contact-wrap {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
max-width: 1040px !important;
margin: 0 auto !important;
}
body.page-id-48 section.tc-contact .tc-contact-head {
width: 100% !important;
text-align: center !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
}
body.page-id-48 section.tc-contact .tc-sec-title {
text-align: center !important;
margin: 0 auto !important;
}
body.page-id-48 section.tc-contact .tc-contact-head p {
text-align: center !important;
margin: 4px auto 0 !important;
max-width: 640px !important;
}
body.page-id-48 section.tc-contact .tc-contact-inner {
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin-top: 16px !important;
}
body.page-id-48 section.tc-contact .iroha-contact-list {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 24px !important;
margin: 0 auto !important;
padding: 0 !important;
}
@media (max-width: 820px) {
body.page-id-48 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
gap: 14px !important;
}
}
/* News — push CONTACT text block down */
body.page-id-48 section.tc-contact .tc-contact-head {
margin-top: 48px !important;
}
@media (max-width: 820px) {
body.page-id-48 section.tc-contact .tc-contact-head {
margin-top: 32px !important;
}
}
/* Ensure wave divider renders between news list and contact (news page) */
body.page-id-48 section.tc-contact::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 90px !important;
background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat !important;
background-color: transparent !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
position: relative !important;
z-index: 2 !important;
}
/* Trim the space ABOVE the wave (news list section) so it doesn't leave a big white gap */
body.page-id-48 .iroha-about-page__section--news-top {
padding-bottom: 40px !important;
}
/* Kill default tc-contact top offset so wave sits flush */
body.page-id-48 section.tc-contact .tc-contact-wrap {
padding-top: 24px !important;
}
@media (max-width: 820px) {
body.page-id-48 section.tc-contact::before { height: 56px !important; }
body.page-id-48 .iroha-about-page__section--news-top { padding-bottom: 28px !important; }
}
/* ==============================================================
News list — card layout with thumbs + excerpts
============================================================== */
body.page-id-48 .iroha-news-list--cards {
list-style: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
max-width: 1080px !important;
}
body.page-id-48 .iroha-news-list--cards .iroha-news-list__item {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.page-id-48 .iroha-news-card {
display: grid !important;
grid-template-columns: 160px 1fr !important;
gap: 20px !important;
align-items: stretch !important;
background: #ffffff !important;
border-radius: 22px !important;
padding: 18px !important;
text-decoration: none !important;
color: inherit !important;
box-shadow:
0 18px 34px -22px rgba(232,83,123,.25),
0 4px 10px -4px rgba(103,182,229,.14),
inset 0 0 0 1px #ffe3ea !important;
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s !important;
position: relative;
overflow: hidden;
height: 100%;
}
body.page-id-48 .iroha-news-card:hover {
transform: translateY(-4px);
box-shadow:
0 24px 40px -20px rgba(232,83,123,.32),
0 6px 12px -4px rgba(103,182,229,.2),
inset 0 0 0 1px #ffd3dc !important;
}
/* Thumbnail */
body.page-id-48 .iroha-news-card__thumb {
aspect-ratio: 1 / 1;
width: 100%;
border-radius: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 56px !important;
line-height: 1 !important;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 0 4px rgba(255,255,255,.6);
}
body.page-id-48 .iroha-news-card__thumb::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 50%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 50%);
pointer-events: none;
}
body.page-id-48 .iroha-news-card__emoji {
filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
position: relative;
z-index: 1;
}
body.page-id-48 .iroha-news-card__thumb--pink { background: linear-gradient(135deg, #ffb7c8 0%, #ffe3ea 100%) !important; }
body.page-id-48 .iroha-news-card__thumb--yellow { background: linear-gradient(135deg, #ffd96b 0%, #fff1b3 100%) !important; }
body.page-id-48 .iroha-news-card__thumb--blue { background: linear-gradient(135deg, #80c6ea 0%, #d8edff 100%) !important; }
body.page-id-48 .iroha-news-card__thumb--peach { background: linear-gradient(135deg, #ffb7a3 0%, #ffe4c7 100%) !important; }
body.page-id-48 .iroha-news-card__thumb--mint { background: linear-gradient(135deg, #8cd39e 0%, #d9f2d6 100%) !important; }
body.page-id-48 .iroha-news-card__thumb--orange { background: linear-gradient(135deg, #ffb575 0%, #ffe6b0 100%) !important; }
body.page-id-48 .iroha-news-card__thumb--lavender { background: linear-gradient(135deg, #b098df 0%, #e8d9ff 100%) !important; }
/* Body */
body.page-id-48 .iroha-news-card__body {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
min-width: 0 !important;
justify-content: flex-start !important;
padding: 4px 4px 4px 0 !important;
}
body.page-id-48 .iroha-news-card__meta {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap;
}
body.page-id-48 .iroha-news-card__date {
font-family: "Playfair Display","Zen Kaku Gothic New",serif !important;
font-style: italic !important;
font-weight: 700 !important;
font-size: 13px !important;
color: #c7a3ab !important;
letter-spacing: .05em !important;
}
/* Keep existing cat chip colors */
body.page-id-48 .iroha-news-card__meta .iroha-news-list__cat {
flex: 0 0 auto;
}
body.page-id-48 .iroha-news-card__title {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-size: 16px !important;
font-weight: 900 !important;
color: #2a1a22 !important;
line-height: 1.5 !important;
letter-spacing: .02em !important;
margin: 2px 0 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.page-id-48 .iroha-news-card__excerpt {
font-family: "Zen Maru Gothic","Zen Kaku Gothic New",sans-serif !important;
font-size: 13px !important;
color: #594852 !important;
line-height: 1.7 !important;
letter-spacing: .01em !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1 1 auto;
}
body.page-id-48 .iroha-news-card__more {
margin-top: 2px !important;
align-self: flex-start;
font-family: "Zen Maru Gothic",sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #e8537b !important;
letter-spacing: .06em !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
body.page-id-48 .iroha-news-card__more span {
transition: transform .3s cubic-bezier(.2,.8,.2,1);
display: inline-block;
}
body.page-id-48 .iroha-news-card:hover .iroha-news-card__more span {
transform: translateX(6px);
}
/* ---------- Responsive ---------- */
@media (max-width: 820px) {
body.page-id-48 .iroha-news-list--cards {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.page-id-48 .iroha-news-card {
grid-template-columns: 110px 1fr !important;
gap: 14px !important;
padding: 14px !important;
}
body.page-id-48 .iroha-news-card__thumb {
border-radius: 14px !important;
font-size: 42px !important;
}
body.page-id-48 .iroha-news-card__title { font-size: 14.5px !important; }
body.page-id-48 .iroha-news-card__excerpt { font-size: 12px !important; -webkit-line-clamp: 2; }
}
@media (max-width: 460px) {
body.page-id-48 .iroha-news-card {
grid-template-columns: 86px 1fr !important;
gap: 12px !important;
padding: 12px !important;
}
body.page-id-48 .iroha-news-card__thumb { font-size: 32px !important; }
body.page-id-48 .iroha-news-card__meta { gap: 8px !important; }
body.page-id-48 .iroha-news-card__date { font-size: 12px !important; }
}
/* News — mobile: pull Reserve button close to Web button */
@media (max-width: 820px) {
body.page-id-48 section.tc-contact .iroha-contact-list {
flex-direction: column !important;
gap: 0 !important;
row-gap: 0 !important;
align-items: center !important;
}
body.page-id-48 section.tc-contact .iroha-contact-list li {
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
body.page-id-48 section.tc-contact .iroha-contact-list li + li {
margin-top: -220px !important;
}
body.page-id-48 section.tc-contact .iroha-contact-imgbtn,
body.page-id-48 section.tc-contact .iroha-contact-imgbtn img {
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
display: block !important;
}
}
@media (max-width: 560px) {
body.page-id-48 section.tc-contact .iroha-contact-list li,
body.page-id-48 section.tc-contact .iroha-contact-imgbtn,
body.page-id-48 section.tc-contact .iroha-contact-imgbtn img {
max-width: 300px !important;
}
body.page-id-48 section.tc-contact .iroha-contact-list li + li {
margin-top: -180px !important;
}
}
@media (max-width: 420px) {
body.page-id-48 section.tc-contact .iroha-contact-list li + li {
margin-top: -150px !important;
}
}
/* Footer — solid white background for all pages (PC + mobile) */
body .iroha-footer,
body footer.iroha-footer {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body .iroha-footer::before,
body .iroha-footer::after,
body footer.iroha-footer::before,
body footer.iroha-footer::after {
background: #ffffff !important;
background-image: none !important;
}
body .iroha-footer .iroha-footer__inner,
body .iroha-footer .iroha-footer__wrap,
body .iroha-footer .iroha-footer__top,
body .iroha-footer .iroha-footer__bottom {
background: transparent !important;
background-color: transparent !important;
}
/* ============================================================
News page only: make contact section background white
(scoped to .tc-contact--news so other pages are untouched)
============================================================ */
.tc-contact.tc-contact--news {
background-image: none !important;
background-color: #ffffff !important;
}
.tc-contact.tc-contact--news .iroha-contact__wave path {
fill: #ffffff !important;
}
/* News page only: make all wave dividers white */
body.iroha-page-news .iroha-hero__wave path,
body.iroha-page-news .iroha-contact__wave path {
fill: #ffffff !important;
opacity: 1 !important;
}
/* News page: force white background on news list section and wrappers (all viewports, incl. mobile) */
body.page-id-48 .iroha-about-page,
body.page-id-48 .iroha-news-page,
body.page-id-48 .iroha-about-page__section--news-top,
body.page-id-48 .iroha-about-page__section--news-top *:not(.iroha-news-card):not(.iroha-news-card__thumb):not(.iroha-news-list__cat):not(.iroha-news-tab):not([class*='iroha-news-card__thumb--']):not([class*='iroha-news-list__cat--']):not([class*='is-active']) {
background-color: transparent !important;
}
body.page-id-48 .iroha-about-page,
body.page-id-48 .iroha-news-page,
body.page-id-48 .iroha-about-page__section--news-top {
background: #ffffff !important;
background-image: none !important;
}
@media (max-width: 820px) {
body.page-id-48 .iroha-about-page,
body.page-id-48 .iroha-news-page,
body.page-id-48 .iroha-about-page__section--news-top,
body.page-id-48 .iroha-news-list,
body.page-id-48 .iroha-news-toolbar {
background: #ffffff !important;
background-image: none !important;
}
}
/* Contact page: hide breadcrumb (Home / お問い合わせ) */
body.page-id-50 .iroha-about-page__breadcrumb {
display: none !important;
}
/* Contact page: hide decorative ring/heart/dot/sparkle/star patterns around title */
body.page-id-50 .iroha-pat,
body.page-id-50 .iroha-about-page__pattern,
body.page-id-50 .iroha-about-page__dots {
display: none !important;
}
/* Contact page: hide duplicate about-page hero banner + wave */
body.page-id-50 .iroha-about-page__hero,
body.page-id-50 .iroha-about-page__hero-inner,
body.page-id-50 .iroha-about-page__hero-wave {
display: none !important;
}
/* News page: shorter hero (compact header) */
body.page-id-48 .iroha-hero.iroha-hero--subpage {
min-height: 520px !important;
padding-top: 6px !important;
padding-bottom: 80px !important;
}
@media (max-width: 820px) {
body.page-id-48 .iroha-hero.iroha-hero--subpage {
min-height: 340px !important;
padding-bottom: 50px !important;
}
}
/* Contact page: shorter hero (match news page) */
body.page-id-50 .iroha-hero.iroha-hero--subpage {
min-height: 520px !important;
padding-top: 6px !important;
padding-bottom: 80px !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-hero.iroha-hero--subpage {
min-height: 340px !important;
padding-bottom: 50px !important;
}
}
/* Contact page: hide the redundant tc-contact (CONTACT) section at the bottom */
body.page-id-50 section.tc-contact {
display: none !important;
}
/* Contact page: add extra gap between DIRECT and FORM sections */
body.page-id-50 .iroha-about-page__section + .iroha-about-page__section {
margin-top: 120px !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section + .iroha-about-page__section {
margin-top: 72px !important;
}
}
/* Contact page: trim gap between FORM section and footer */
body.page-id-50 article.tenri-clone > .iroha-about-page {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.page-id-50 .iroha-about-page__section:last-of-type {
margin-bottom: 0 !important;
}
@media (max-width: 820px) {
body.page-id-50 article.tenri-clone > .iroha-about-page {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.page-id-50 .iroha-about-page__section:last-of-type {
margin-bottom: 0 !important;
}
}
/* Contact page: pink background for FORM section (last section on contact page) */
body.page-id-50 .iroha-about-page__section:last-of-type {
background: #fdeef0 !important;
border-radius: 24px !important;
padding: 56px 40px !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section:last-of-type {
padding: 36px 20px !important;
border-radius: 18px !important;
}
}
/* Contact page: FORM section — extend pink background full-width (edge to edge) */
body.page-id-50 .iroha-about-page__section:last-of-type {
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
border-radius: 0 !important;
padding: 80px 40px !important;
}
body.page-id-50 .iroha-about-page__section:last-of-type > * {
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section:last-of-type {
padding: 56px 20px !important;
}
}
/* Contact page: FORM section - decorative waves on top and bottom */
body.page-id-50 .iroha-about-page__section:last-of-type {
padding-top: 140px !important;
padding-bottom: 140px !important;
overflow: hidden !important;
}
body.page-id-50 .iroha-about-page__section:last-of-type::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
width: 100%;
height: 90px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
pointer-events: none;
z-index: 1;
}
body.page-id-50 .iroha-about-page__section:last-of-type::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
width: 100%;
height: 90px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
pointer-events: none;
z-index: 1;
}
body.page-id-50 .iroha-about-page__section:last-of-type > * {
position: relative;
z-index: 2;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section:last-of-type {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
body.page-id-50 .iroha-about-page__section:last-of-type::before,
body.page-id-50 .iroha-about-page__section:last-of-type::after {
height: 56px;
}
}
/* Contact page: intro catch + lead — bolder & more readable */
body.page-id-50 .iroha-about-page__catch {
font-weight: 800 !important;
color: #2a1820 !important;
font-size: clamp(24px, 3.2vw, 34px) !important;
line-height: 1.5 !important;
letter-spacing: 0.02em !important;
}
body.page-id-50 .iroha-about-page__lead {
font-weight: 600 !important;
color: #2a1820 !important;
font-size: clamp(16px, 1.6vw, 18px) !important;
line-height: 1.9 !important;
letter-spacing: 0.02em !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__catch {
font-size: 22px !important;
}
body.page-id-50 .iroha-about-page__lead {
font-size: 15px !important;
line-height: 1.85 !important;
}
}
/* Contact page: decorative dots, stars, hearts scattered in each section */
body.page-id-50 .iroha-about-page__section {
position: relative !important;
overflow: visible;
}
/* Decorative floating shapes for DIRECT section (first section) */
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::before,
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::before {
top: 10%;
left: 4%;
width: 18px;
height: 18px;
background: #ff8aa4;
border-radius: 50%;
box-shadow:
120px 40px 0 -4px #a5d4ef,
260px -10px 0 -2px #ffd96b,
60px 180px 0 -3px #b6dca7,
320px 220px 0 -5px #b68be3,
520px 80px 0 -4px #ff8aa4;
animation: iroha-float 6s ease-in-out infinite;
}
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::after {
top: 20%;
right: 6%;
width: 22px;
height: 22px;
background:
radial-gradient(circle at 30% 30%, #ffb6c8 0%, #ff8aa4 70%);
clip-path: path("M11,4 C8,0 0,2 0,8 C0,14 11,22 11,22 C11,22 22,14 22,8 C22,2 14,0 11,4 Z");
box-shadow:
-160px 80px 0 -2px rgba(134,198,234,.55),
-280px 20px 0 -6px rgba(255,217,107,.65),
-380px 160px 0 -4px rgba(182,220,167,.6);
animation: iroha-float 7s ease-in-out infinite reverse;
}
/* Scatter decorations on FORM section (last section) — inside pink area */
body.page-id-50 .iroha-about-page__section:last-of-type {
position: relative !important;
}
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-deco-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
/* add a decorative layer using ::before we keep; use SVG as bg */
body.page-id-50 .iroha-about-page__section:last-of-type > *:first-child {
position: relative;
z-index: 2;
}
/* Small floating animation */
@keyframes iroha-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Add star/heart/ring SVG background sprinkle on FORM pink area */
body.page-id-50 .iroha-about-page__section:last-of-type {
background-image:
radial-gradient(circle 8px at 8% 18%, #ff8aa4 0 6px, transparent 7px),
radial-gradient(circle 6px at 92% 22%, #a5d4ef 0 5px, transparent 6px),
radial-gradient(circle 7px at 14% 78%, #ffd96b 0 6px, transparent 7px),
radial-gradient(circle 6px at 86% 82%, #b6dca7 0 5px, transparent 6px),
radial-gradient(circle 5px at 50% 10%, #b68be3 0 4px, transparent 5px),
radial-gradient(circle 5px at 30% 92%, #ff8aa4 0 4px, transparent 5px),
radial-gradient(circle 5px at 72% 8%, #ffd96b 0 4px, transparent 5px),
#fdeef0 !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::before {
box-shadow:
80px 40px 0 -4px #a5d4ef,
160px -10px 0 -4px #ffd96b,
40px 140px 0 -5px #b6dca7,
200px 180px 0 -6px #b68be3;
}
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::after {
box-shadow:
-100px 60px 0 -4px rgba(134,198,234,.55),
-180px 20px 0 -6px rgba(255,217,107,.65);
}
}
/* Contact page: FORM section - add floating decorative shapes (matches DIRECT section style) */
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-form-deco-left,
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-form-deco-right {
/* placeholders if JS adds spans later — for now use extra pseudo via ::before on inner wrapper */
}
/* Use ::before on the form container inside FORM section */
body.page-id-50 .iroha-about-page__section:last-of-type {
/* enable stacking */
isolation: isolate;
}
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-contact-form {
position: relative;
}
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-contact-form::before {
content: "";
position: absolute;
top: -60px;
left: -40px;
width: 18px;
height: 18px;
background: #ff8aa4;
border-radius: 50%;
pointer-events: none;
z-index: 0;
box-shadow:
-40px 120px 0 -4px #a5d4ef,
-10px 260px 0 -2px #ffd96b,
-60px 460px 0 -3px #b6dca7,
-30px 680px 0 -5px #b68be3,
-50px 900px 0 -4px #ff8aa4;
animation: iroha-float 6s ease-in-out infinite;
}
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-contact-form::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 16px;
height: 16px;
background: #a5d4ef;
border-radius: 50%;
pointer-events: none;
z-index: 0;
box-shadow:
20px 180px 0 -2px #ffd96b,
-20px 340px 0 -4px #b68be3,
30px 520px 0 -3px #ff8aa4,
-10px 760px 0 -4px #b6dca7,
20px 960px 0 -5px #a5d4ef;
animation: iroha-float 7s ease-in-out infinite reverse;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-contact-form::before,
body.page-id-50 .iroha-about-page__section:last-of-type .iroha-contact-form::after {
display: none;
}
}
/* Contact page: fix - remove decorations overlapping DIRECT cards, make mobile bg white */
/* 1. Remove the ::before/::after dot shadows on DIRECT section entirely
(they were bleeding over the heading text and into cards) */
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::before,
body.page-id-50 .iroha-about-page__section:not(:last-of-type)::after {
display: none !important;
}
/* 2. Ensure DIRECT card interior has NO decorations */
body.page-id-50 .iroha-contact-direct__card::before,
body.page-id-50 .iroha-contact-direct__card::after,
body.page-id-50 .iroha-contact-direct::before,
body.page-id-50 .iroha-contact-direct::after {
display: none !important;
content: none !important;
}
/* 3. Add more decorative dots on the DIRECT section background only
(outside the cards) — use radial gradients on the section background */
body.page-id-50 .iroha-about-page__section:not(:last-of-type) {
background:
radial-gradient(circle 7px at 4% 12%, #ff8aa4 0 6px, transparent 7px),
radial-gradient(circle 6px at 96% 14%, #a5d4ef 0 5px, transparent 6px),
radial-gradient(circle 7px at 8% 48%, #ffd96b 0 6px, transparent 7px),
radial-gradient(circle 5px at 92% 44%, #b6dca7 0 4px, transparent 5px),
radial-gradient(circle 6px at 3% 78%, #b68be3 0 5px, transparent 6px),
radial-gradient(circle 7px at 97% 82%, #ff8aa4 0 6px, transparent 7px),
radial-gradient(circle 5px at 50% 4%, #ffd96b 0 4px, transparent 5px),
radial-gradient(circle 5px at 50% 96%, #a5d4ef 0 4px, transparent 5px),
#ffffff !important;
padding-top: 60px !important;
padding-bottom: 60px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 4. Mobile: force white background on DIRECT section (override any pink leakage) */
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page__section:not(:last-of-type) {
background:
radial-gradient(circle 6px at 6% 10%, #ff8aa4 0 5px, transparent 6px),
radial-gradient(circle 5px at 94% 12%, #a5d4ef 0 4px, transparent 5px),
radial-gradient(circle 6px at 4% 50%, #ffd96b 0 5px, transparent 6px),
radial-gradient(circle 5px at 96% 52%, #b6dca7 0 4px, transparent 5px),
radial-gradient(circle 5px at 6% 86%, #b68be3 0 4px, transparent 5px),
radial-gradient(circle 6px at 94% 88%, #ff8aa4 0 5px, transparent 6px),
#ffffff !important;
}
body.page-id-50 .iroha-contact-direct__card {
background: #ffffff !important;
}
}
/* Contact page mobile: force all background containers above DIRECT section to white */
@media (max-width: 820px) {
body.page-id-50 .iroha-about-page,
body.page-id-50 .iroha-about-page__intro,
body.page-id-50 .iroha-about-page__catch,
body.page-id-50 .iroha-about-page__lead,
body.page-id-50 article.tenri-clone,
body.page-id-50 article.tenri-clone > .iroha-about-page {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
/* Kill any decorative wave / strip between intro and DIRECT section */
body.page-id-50 .iroha-about-page__intro::before,
body.page-id-50 .iroha-about-page__intro::after,
body.page-id-50 .iroha-about-page::before,
body.page-id-50 .iroha-about-page::after {
display: none !important;
content: none !important;
}
}
/* Contact page: tighter spacing between form fields */
body.page-id-50 .iroha-contact-form .iroha-form__row {
gap: 12px !important;
margin-bottom: 10px !important;
}
body.page-id-50 .iroha-contact-form .iroha-form__field {
margin-bottom: 10px !important;
}
body.page-id-50 .iroha-contact-form .iroha-form__label {
margin-bottom: 4px !important;
}
@media (max-width: 820px) {
body.page-id-50 .iroha-contact-form .iroha-form__row {
gap: 0 !important;
margin-bottom: 0 !important;
}
body.page-id-50 .iroha-contact-form .iroha-form__field {
margin-bottom: 8px !important;
}
}
/* ============================================================
Reserve page (page-id-213) — base styles matching contact/news
============================================================ */
/* Body cleanup (same as other subpages) */
body.page-id-213 { background: #ffffff !important; }
body.page-id-213 #body,
body.page-id-213 .body,
body.page-id-213 .body-in,
body.page-id-213 #container,
body.page-id-213 .container {
background: #ffffff !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hide Cocoon clutter */
body.page-id-213 #header-container,
body.page-id-213 #navi,
body.page-id-213 .navi-in,
body.page-id-213 .sns-share,
body.page-id-213 .sns-follow,
body.page-id-213 .entry-header,
body.page-id-213 .a-wrap,
body.page-id-213 .header-container,
body.page-id-213 .article-header,
body.page-id-213 .date-tags,
body.page-id-213 .post-date,
body.page-id-213 .post-update,
body.page-id-213 h1.entry-title,
body.page-id-213 .entry-title,
body.page-id-213 .pankuzu,
body.page-id-213 .breadcrumb,
body.page-id-213 .breadcrumbs,
body.page-id-213 #breadcrumb,
body.page-id-213 #sidebar,
body.page-id-213 .sidebar,
body.page-id-213 #footer-widgets,
body.page-id-213 .toc,
body.page-id-213 #toc { display: none !important; }
body.page-id-213 #main,
body.page-id-213 .main,
body.page-id-213 #main-content,
body.page-id-213 #content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; background: transparent !important; }
body.page-id-213 article.page,
body.page-id-213 .article { padding: 0 !important; margin: 0 !important; max-width: 100% !important; background: transparent !important; }
body.page-id-213 .entry-content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
/* Hero height match news/contact */
body.page-id-213 .iroha-hero.iroha-hero--subpage {
min-height: 520px !important;
padding-top: 6px !important;
padding-bottom: 80px !important;
}
@media (max-width: 820px) {
body.page-id-213 .iroha-hero.iroha-hero--subpage {
min-height: 340px !important;
padding-bottom: 50px !important;
}
}
/* ============================================================
Reserve content
============================================================ */
.iroha-reserve-page {
max-width: 960px;
margin: 60px auto 80px;
padding: 0 24px;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
color: #1f0f15;
}
.iroha-reserve__title-wrap {
text-align: center;
margin-bottom: 32px;
}
.iroha-reserve__title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
color: #e8537b;
margin: 0 0 8px;
letter-spacing: .04em;
}
.iroha-reserve__subtitle {
font-size: clamp(16px, 1.6vw, 18px);
font-weight: 700;
color: #2a1820;
margin: 0;
padding-bottom: 16px;
border-bottom: 2px dotted #e8537b;
}
.iroha-reserve__desc {
background: #ffffff;
padding: 32px 28px;
border-radius: 16px;
margin-bottom: 40px;
font-size: 15px;
line-height: 1.95;
color: #2a1820;
}
.iroha-reserve__desc p {
margin: 0 0 14px;
}
.iroha-reserve__desc p:last-child { margin-bottom: 0; }
/* Calendar */
.iroha-reserve__calendar-wrap {
margin-top: 32px;
}
.iroha-reserve-cal {
max-width: 720px;
margin: 0 auto;
}
.iroha-reserve-cal__nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding: 0 8px;
}
.iroha-reserve-cal__ym {
font-size: 22px;
font-weight: 800;
color: #2a1820;
letter-spacing: .06em;
}
.iroha-reserve-cal__prev,
.iroha-reserve-cal__next {
color: #e8537b;
font-weight: 700;
text-decoration: none;
font-size: 15px;
padding: 6px 14px;
border-radius: 999px;
transition: background .2s;
}
.iroha-reserve-cal__prev:hover,
.iroha-reserve-cal__next:hover {
background: #fdeef0;
}
.iroha-reserve-cal__table {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;
font-size: 14px;
}
.iroha-reserve-cal__table th,
.iroha-reserve-cal__table td {
border: 1px solid #d9d9d9;
text-align: center;
padding: 10px 4px;
vertical-align: middle;
}
.iroha-reserve-cal__table th {
background: #f5f5f5;
font-weight: 700;
color: #333;
padding: 8px 4px;
}
.iroha-reserve-cal__wl--0 { color: #e8537b; }
.iroha-reserve-cal__wl--6 { color: #4a90d0; }
.iroha-reserve-cal__cell {
height: 56px;
position: relative;
background: #fff;
}
.iroha-reserve-cal__cell.is-outside {
background: #fafafa;
color: #bbb;
}
.iroha-reserve-cal__cell.is-sun .iroha-reserve-cal__day { color: #e8537b; }
.iroha-reserve-cal__cell.is-sat .iroha-reserve-cal__day { color: #4a90d0; }
.iroha-reserve-cal__day {
display: block;
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.iroha-reserve-cal__mark {
display: block;
font-size: 18px;
font-weight: 700;
margin-top: 2px;
}
.iroha-reserve-cal__mark--o { color: #4caf50; }
.iroha-reserve-cal__mark--x { color: #e8537b; }
.iroha-reserve-cal__legend {
display: flex;
gap: 24px;
justify-content: center;
align-items: center;
margin-top: 16px;
font-size: 14px;
color: #555;
}
.iroha-reserve-cal__lg {
display: inline-flex;
align-items: center;
gap: 6px;
}
.iroha-reserve-cal__lg .iroha-reserve-cal__mark {
display: inline;
font-size: 16px;
margin: 0;
}
@media (max-width: 820px) {
.iroha-reserve-page {
margin: 32px auto 48px;
padding: 0 16px;
}
.iroha-reserve__desc {
padding: 20px 16px;
font-size: 14px;
line-height: 1.8;
}
.iroha-reserve-cal__table th,
.iroha-reserve-cal__table td {
padding: 6px 2px;
font-size: 13px;
}
.iroha-reserve-cal__cell {
height: 48px;
}
.iroha-reserve-cal__mark {
font-size: 15px;
}
}
/* Reserve page: shorter hero */
body.page-id-213 .iroha-hero.iroha-hero--subpage {
min-height: 380px !important;
padding-top: 6px !important;
padding-bottom: 50px !important;
}
@media (max-width: 820px) {
body.page-id-213 .iroha-hero.iroha-hero--subpage {
min-height: 240px !important;
padding-bottom: 32px !important;
}
}
/* Reserve page: wave divider above CONTACT section (like news page) */
body.page-id-213 section.tc-contact {
position: relative !important;
padding-top: 100px !important;
}
body.page-id-213 section.tc-contact::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 90px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
pointer-events: none;
z-index: 1;
}
body.page-id-213 section.tc-contact > *:not(::before) {
position: relative;
z-index: 2;
}
@media (max-width: 820px) {
body.page-id-213 section.tc-contact { padding-top: 70px !important; }
body.page-id-213 section.tc-contact::before { height: 56px; }
}
/* Reserve page: make all wave dividers fully white (override hero pink bleed-through) */
body.page-id-213 .iroha-hero__wave path,
body.page-id-213 .iroha-contact__wave path {
fill: #ffffff !important;
opacity: 1 !important;
}
/* Reserve page: prevent hero chara from overlapping the logo on PC */
@media (min-width: 821px) {
body.page-id-213 .iroha-about-hero__chara--left {
left: 3%;
bottom: 8%;
width: clamp(120px, 12vw, 180px);
}
body.page-id-213 .iroha-about-hero__chara--right {
right: 3%;
bottom: 10%;
width: clamp(120px, 12vw, 180px);
}
}
/* Reserve page: force white background on main content section */
body.page-id-213 .iroha-reserve-page {
background: #ffffff !important;
position: relative;
z-index: 1;
}
body.page-id-213 article.tenri-clone {
background: #ffffff !important;
}
/* ============================================================
Reserve page — Contact Form 7 styling
============================================================ */
.iroha-reserve-form-section {
background: #ffffff;
padding: 60px 24px 80px;
}
.iroha-reserve-form-wrap {
max-width: 760px;
margin: 0 auto;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
color: #2a1820;
}
.iroha-reserve-form__title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
color: #e8537b;
text-align: center;
margin: 0 0 8px;
letter-spacing: .04em;
}
.iroha-reserve-form__lead {
text-align: center;
font-size: 15px;
color: #2a1820;
margin: 0 0 32px;
padding-bottom: 16px;
border-bottom: 2px dotted #e8537b;
}
.iroha-cf7-form .iroha-cf7-note {
font-size: 13px;
color: #777;
margin: 0 0 20px;
}
.iroha-cf7-form .iroha-cf7-field {
display: block;
margin-bottom: 10px;
padding: 0;
border: 0;
}
.iroha-cf7-form fieldset.iroha-cf7-field { margin-bottom: 10px; }
.iroha-cf7-form .iroha-cf7-label {
display: block;
font-weight: 700;
font-size: 15px;
color: #2a1820;
margin-bottom: 4px;
}
.iroha-cf7-form .iroha-cf7-req {
display: inline-block;
background: #e8537b;
color: #fff;
font-size: 11px;
font-style: normal;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
margin-left: 8px;
vertical-align: middle;
letter-spacing: .04em;
}
.iroha-cf7-form input[type="text"],
.iroha-cf7-form input[type="email"],
.iroha-cf7-form input[type="tel"],
.iroha-cf7-form input[type="date"],
.iroha-cf7-form textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-size: 15px;
font-family: inherit;
color: #2a1820;
background: #fff;
border: 1.5px solid #e2d1d7;
border-radius: 10px;
transition: border-color .2s, box-shadow .2s;
}
.iroha-cf7-form input:focus,
.iroha-cf7-form textarea:focus {
outline: none;
border-color: #e8537b;
box-shadow: 0 0 0 3px rgba(232,83,123,.15);
}
.iroha-cf7-form textarea { resize: vertical; min-height: 96px; }
.iroha-cf7-form .wpcf7-list-item {
display: inline-block;
margin: 6px 14px 6px 0;
font-size: 15px;
}
.iroha-cf7-form .wpcf7-list-item label {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.iroha-cf7-form input[type="checkbox"],
.iroha-cf7-form input[type="radio"] {
width: 18px;
height: 18px;
accent-color: #e8537b;
cursor: pointer;
}
.iroha-cf7-form .iroha-cf7-submit-wrap {
text-align: center;
margin: 40px 0 0;
}
.iroha-cf7-form .iroha-cf7-submit,
.iroha-cf7-form input.wpcf7-submit {
display: inline-block;
background: linear-gradient(135deg, #e8537b 0%, #ff7a9a 100%);
color: #fff;
font-size: 17px;
font-weight: 800;
font-family: inherit;
letter-spacing: .08em;
padding: 16px 56px;
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 8px 20px -6px rgba(232,83,123,.45);
transition: transform .2s, box-shadow .2s;
}
.iroha-cf7-form .iroha-cf7-submit:hover,
.iroha-cf7-form input.wpcf7-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -6px rgba(232,83,123,.55);
}
.iroha-cf7-form .wpcf7-not-valid-tip {
color: #e8537b;
font-size: 13px;
margin-top: 6px;
display: block;
}
.iroha-cf7-form .wpcf7-response-output {
border: 1.5px solid #e2d1d7 !important;
border-radius: 10px;
padding: 14px 16px !important;
font-size: 14px;
margin-top: 24px !important;
}
.iroha-cf7-form .wpcf7 form.sent .wpcf7-response-output { border-color: #4caf50 !important; background: #f1faf0; }
.iroha-cf7-form .wpcf7 form.invalid .wpcf7-response-output,
.iroha-cf7-form .wpcf7 form.unaccepted .wpcf7-response-output { border-color: #e8537b !important; background: #fdf0f3; }
@media (max-width: 820px) {
.iroha-reserve-form-section { padding: 40px 16px 60px; }
.iroha-cf7-form input[type="text"],
.iroha-cf7-form input[type="email"],
.iroha-cf7-form input[type="tel"],
.iroha-cf7-form input[type="date"],
.iroha-cf7-form textarea { font-size: 16px; }
.iroha-cf7-form input.wpcf7-submit { width: 100%; padding: 16px 24px; }
}
/* ============================================================
Reserve form — compact override
============================================================ */
.iroha-reserve-form-section { padding: 32px 16px 56px !important; }
.iroha-reserve-form-wrap { max-width: 640px !important; }
.iroha-reserve-form__title { font-size: clamp(20px, 2.2vw, 26px) !important; margin: 0 0 4px !important; }
.iroha-reserve-form__lead { font-size: 13px !important; margin: 0 0 18px !important; padding-bottom: 10px !important; }
.iroha-cf7-form .iroha-cf7-note { font-size: 12px !important; margin: 0 0 12px !important; }
.iroha-cf7-form .iroha-cf7-field { margin-bottom: 6px !important; }
.iroha-cf7-form fieldset.iroha-cf7-field { margin-bottom: 6px !important; }
.iroha-cf7-form .iroha-cf7-label { font-size: 13px !important; margin-bottom: 2px !important; }
.iroha-cf7-form .iroha-cf7-req { font-size: 10px !important; padding: 1px 6px !important; margin-left: 6px !important; }
.iroha-cf7-form input[type="text"],
.iroha-cf7-form input[type="email"],
.iroha-cf7-form input[type="tel"],
.iroha-cf7-form input[type="date"],
.iroha-cf7-form textarea {
padding: 7px 10px !important;
font-size: 14px !important;
border-radius: 6px !important;
border-width: 1px !important;
}
.iroha-cf7-form textarea { min-height: 52px !important; line-height: 1.4 !important; }
.iroha-cf7-form .wpcf7-list-item { font-size: 13px !important; margin: 2px 12px 2px 0 !important; }
.iroha-cf7-form input[type="checkbox"],
.iroha-cf7-form input[type="radio"] { width: 15px !important; height: 15px !important; }
.iroha-cf7-form .iroha-cf7-submit-wrap { margin: 20px 0 0 !important; }
.iroha-cf7-form .iroha-cf7-submit,
.iroha-cf7-form input.wpcf7-submit {
font-size: 15px !important;
padding: 12px 40px !important;
letter-spacing: .06em !important;
}
@media (max-width: 820px) {
.iroha-reserve-form-section { padding: 24px 14px 40px !important; }
.iroha-cf7-form input[type="text"],
.iroha-cf7-form input[type="email"],
.iroha-cf7-form input[type="tel"],
.iroha-cf7-form input[type="date"],
.iroha-cf7-form textarea { font-size: 15px !important; padding: 8px 10px !important; }
}
/* ============================================================
Single post page — eyecatch sizing & layout
============================================================ */
.single-post .eye-catch,
.single-post .eye-catch-wrap {
max-width: 640px !important;
margin: 24px auto !important;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 24px -10px rgba(232,83,123,.25);
}
.single-post .eye-catch-image,
.single-post .eye-catch img,
.single-post img.eye-catch-image {
width: 100% !important;
height: auto !important;
max-height: 420px !important;
object-fit: cover;
display: block;
}
.single-post .entry-content img,
.single-post .post-content img {
max-width: 100%;
height: auto;
}
@media (max-width: 820px) {
.single-post .eye-catch,
.single-post .eye-catch-wrap {
max-width: 100% !important;
margin: 16px auto !important;
border-radius: 10px;
}
.single-post .eye-catch-image,
.single-post .eye-catch img { max-height: 240px !important; }
}
/* ============================================================
Single post page layout
============================================================ */
.iroha-single-page {
max-width: 780px;
margin: 40px auto 60px;
padding: 0 24px;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
color: #2a1820;
background: #ffffff;
}
.iroha-single__meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.iroha-single__date {
font-size: 14px;
color: #6b5560;
letter-spacing: .06em;
}
.iroha-single__cat {
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 3px 12px;
border-radius: 999px;
background: #fdeef0;
color: #e8537b;
letter-spacing: .04em;
}
.iroha-single__cat--oshirase { background: #e4f3fb; color: #4a90d0; }
.iroha-single__cat--blog { background: #e6f4de; color: #6fa85c; }
.iroha-single__title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 800;
color: #2a1820;
margin: 0 0 24px;
padding-bottom: 20px;
border-bottom: 2px dotted #e8537b;
line-height: 1.45;
}
.iroha-single__thumb {
margin: 0 auto 32px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 28px -12px rgba(232,83,123,.3);
}
.iroha-single__thumb img {
width: 100%;
height: auto;
display: block;
max-height: 420px;
object-fit: cover;
}
.iroha-single__content {
font-size: 16px;
line-height: 1.9;
}
.iroha-single__content p { margin: 0 0 18px; }
.iroha-single__content h2,
.iroha-single__content h3,
.iroha-single__content h4 {
color: #e8537b;
font-weight: 800;
margin: 32px 0 14px;
line-height: 1.4;
}
.iroha-single__content h2 { font-size: 22px; padding-bottom: 8px; border-bottom: 2px dotted #e8537b; }
.iroha-single__content h3 { font-size: 19px; }
.iroha-single__content h4 { font-size: 17px; }
.iroha-single__content a { color: #e8537b; text-decoration: underline; }
.iroha-single__content ul, .iroha-single__content ol { padding-left: 1.4em; margin: 0 0 18px; }
.iroha-single__content li { margin-bottom: 6px; }
.iroha-single__content img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 16px auto;
display: block;
}
.iroha-single__content blockquote {
border-left: 4px solid #e8537b;
background: #fdeef0;
padding: 14px 18px;
margin: 18px 0;
color: #6b5560;
border-radius: 0 10px 10px 0;
}
.iroha-single__back {
margin-top: 40px;
text-align: center;
}
.iroha-single__back a {
display: inline-block;
padding: 12px 28px;
background: #ffffff;
border: 2px solid #e8537b;
color: #e8537b;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: background .2s, color .2s;
}
.iroha-single__back a:hover {
background: #e8537b;
color: #ffffff;
}
@media (max-width: 820px) {
.iroha-single-page { margin: 24px auto 40px; padding: 0 16px; }
.iroha-single__title { font-size: 20px; }
.iroha-single__content { font-size: 15px; line-height: 1.85; }
.iroha-single__thumb img { max-height: 240px; }
}
/* Single post: reuse Cocoon chrome suppression like other subpages */
body.single-post #header-container,
body.single-post #navi,
body.single-post .navi-in,
body.single-post .sns-share,
body.single-post .sns-follow,
body.single-post .entry-header,
body.single-post .pankuzu,
body.single-post .breadcrumb,
body.single-post .breadcrumbs,
body.single-post #breadcrumb,
body.single-post #sidebar,
body.single-post .sidebar,
body.single-post #footer-widgets,
body.single-post .toc,
body.single-post #toc,
body.single-post .footer,
body.single-post #footer { display: none !important; }
body.single-post #body,
body.single-post .body,
body.single-post .body-in,
body.single-post #container,
body.single-post .container {
background: #ffffff !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.single-post #main,
body.single-post .main,
body.single-post #main-content,
body.single-post #content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; background: transparent !important; }
/* Single post: compact brand text for mobilebar & hero logo */
.iroha-single .iroha-mobilebar__brand {
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
font-size: 22px;
font-weight: 900;
color: #e8537b;
letter-spacing: .08em;
line-height: 1;
padding: 8px 12px;
}
.iroha-single .iroha-hero__logo-text {
display: inline-block;
font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
font-size: 14px;
color: #67b6e5;
font-weight: 700;
text-align: center;
line-height: 1.2;
letter-spacing: .04em;
}
.iroha-single .iroha-hero__logo-text strong {
display: block;
font-size: 42px;
color: #e8537b;
font-weight: 900;
letter-spacing: .08em;
margin-top: 4px;
}
/* ============================================================
Single post — force full-width like other subpages
============================================================ */
body.single-post {
background: #ffffff !important;
max-width: 100% !important;
}
body.single-post #body,
body.single-post .body,
body.single-post .body-in,
body.single-post #container,
body.single-post .container,
body.single-post #main,
body.single-post .main,
body.single-post #main-content,
body.single-post #content,
body.single-post article.page,
body.single-post article.post,
body.single-post article.article,
body.single-post .entry-content,
body.single-post .post,
body.single-post .post-content,
body.single-post .elementor-section-wrap,
body.single-post .elementor-page,
body.single-post [data-elementor-type] {
background: transparent !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
body.single-post #header-container,
body.single-post #navi,
body.single-post .navi-in,
body.single-post #navi-footer,
body.single-post .sns-share,
body.single-post .sns-follow,
body.single-post .entry-header,
body.single-post .entry-title,
body.single-post h1.entry-title,
body.single-post .date-tags,
body.single-post .post-date,
body.single-post .post-update,
body.single-post .pankuzu,
body.single-post .breadcrumb,
body.single-post .breadcrumbs,
body.single-post #breadcrumb,
body.single-post #sidebar,
body.single-post .sidebar,
body.single-post #footer-widgets,
body.single-post .footer,
body.single-post #footer,
body.single-post .footer-bottom,
body.single-post .toc,
body.single-post #toc,
body.single-post .eye-catch-wrap,
body.single-post .author-box,
body.single-post .comment-area,
body.single-post #comment-area,
body.single-post .related-entries,
body.single-post .related-entry-heading,
body.single-post .under-entry-content,
body.single-post .pager-post-navi,
body.single-post .article-footer { display: none !important; }
/* Also: Cocoon wraps .article with a boxed width; kill it */
body.single-post .cf,
body.single-post .wrap {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Single post: shorter hero height (match news/contact pages) */
body.single-post .iroha-hero.iroha-hero--subpage {
min-height: 520px !important;
padding-top: 6px !important;
padding-bottom: 80px !important;
}
@media (max-width: 820px) {
body.single-post .iroha-hero.iroha-hero--subpage {
min-height: 340px !important;
padding-bottom: 50px !important;
}
}
/* Single post: force white background on content wrapper */
body.single-post article.tenri-clone {
background: #ffffff !important;
}
body.single-post .iroha-single-page {
background: #ffffff !important;
position: relative;
z-index: 1;
}
/* Single post: thumbnail optimized for smartphone portrait photos (3:4 / 4:5) */
body.single-post .iroha-single__thumb {
max-width: 480px !important;
margin: 0 auto 32px !important;
border-radius: 14px !important;
overflow: hidden !important;
background: #ffffff;
box-shadow: 0 10px 28px -12px rgba(232,83,123,.3);
}
body.single-post .iroha-single__thumb img {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
background: #ffffff;
}
@media (max-width: 820px) {
body.single-post .iroha-single__thumb {
max-width: 92% !important;
}
body.single-post .iroha-single__thumb img {
max-height: none !important;
}
}
/* Single post: thumbnail — larger display for phone portrait photos */
body.single-post .iroha-single__thumb {
max-width: 640px !important;
}
body.single-post .iroha-single__thumb img {
width: 100% !important;
max-height: 900px !important;
object-fit: contain !important;
}
@media (max-width: 820px) {
body.single-post .iroha-single__thumb {
max-width: 100% !important;
}
body.single-post .iroha-single__thumb img {
max-height: 720px !important;
}
}
/* Single post: increase vertical size of content section */
body.single-post .iroha-single-page {
min-height: 80vh !important;
padding: 60px 24px 100px !important;
margin: 0 auto !important;
max-width: 100% !important;
}
body.single-post .iroha-single-page > * {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 820px) {
body.single-post .iroha-single-page {
padding: 40px 16px 70px !important;
}
}
/* Single post: widen content area */
body.single-post .iroha-single-page > * {
max-width: 1000px !important;
}
body.single-post .iroha-single__content {
max-width: 960px !important;
margin: 0 auto !important;
font-size: 17px !important;
line-height: 2 !important;
}
body.single-post .iroha-single__content p {
margin: 0 0 22px !important;
word-break: break-word;
}
@media (max-width: 820px) {
body.single-post .iroha-single__content {
font-size: 15px !important;
line-height: 1.9 !important;
}
}
/* Single post: thumbnail — smaller override */
body.single-post .iroha-single__thumb {
max-width: 360px !important;
margin: 0 auto 28px !important;
}
body.single-post .iroha-single__thumb img {
max-height: 480px !important;
}
@media (max-width: 820px) {
body.single-post .iroha-single__thumb {
max-width: 75% !important;
}
body.single-post .iroha-single__thumb img {
max-height: 380px !important;
}
}
/* Single post: even shorter hero */
body.single-post .iroha-hero.iroha-hero--subpage {
min-height: 380px !important;
padding-top: 6px !important;
padding-bottom: 40px !important;
}
@media (max-width: 820px) {
body.single-post .iroha-hero.iroha-hero--subpage {
min-height: 260px !important;
padding-bottom: 30px !important;
}
}
/* Single post: hide left character (keep right) */
body.single-post .iroha-about-hero__chara--left {
display: none !important;
}
/* Single post: restore left chara and position near logo center-left area */
body.single-post .iroha-about-hero__chara--left {
display: block !important;
left: 20% !important;
bottom: 6% !important;
width: clamp(100px, 11vw, 160px) !important;
z-index: 6 !important;
}
@media (max-width: 820px) {
body.single-post .iroha-about-hero__chara--left {
left: 14% !important;
bottom: 4% !important;
width: 80px !important;
}
}
/* Single post: move left chara higher */
body.single-post .iroha-about-hero__chara--left {
bottom: 28% !important;
}
@media (max-width: 820px) {
body.single-post .iroha-about-hero__chara--left {
bottom: 22% !important;
}
}
/* Single post: smaller CONTACT section & buttons */
body.single-post .tc-contact {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
body.single-post .tc-contact-head {
margin-bottom: 20px !important;
}
body.single-post .tc-contact-head .tc-en {
font-size: 28px !important;
}
body.single-post .tc-contact-head .tc-ja {
font-size: 18px !important;
}
body.single-post .tc-contact-head p {
font-size: 13px !important;
line-height: 1.7 !important;
margin: 10px 0 0 !important;
}
body.single-post .iroha-contact-list {
gap: 16px !important;
}
body.single-post .iroha-contact-list li {
max-width: 260px !important;
}
body.single-post .iroha-contact-imgbtn img {
max-width: 220px !important;
width: 100% !important;
height: auto !important;
}
body.single-post .iroha-contact__char,
body.single-post .iroha-contact__char--pair {
max-width: 120px !important;
}
@media (max-width: 820px) {
body.single-post .tc-contact {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
body.single-post .iroha-contact-list li {
max-width: 200px !important;
}
body.single-post .iroha-contact-imgbtn img {
max-width: 180px !important;
}
}
/* Single post: hide CONTACT section character pair */
body.single-post .tc-contact .iroha-contact__char,
body.single-post .tc-contact .iroha-contact__char--pair {
display: none !important;
}
/* ==========================================================
Single post: CONTACT section dividers.
CONTACT = pink bg. Pre-wave: white bg with pink path (white body
→ pink contact). Post-wave: pink bg with white path (pink contact
→ footer).
========================================================== */
/* Pre-CONTACT wave (white bg, pink wave path) */
body.single-post .iroha-single__pre-contact-wave {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #ffffff !important;
background-color: #ffffff !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
}
body.single-post .iroha-single__pre-contact-wave path {
fill: #fdeef0 !important;
}
/* CONTACT section — PINK background */
body.single-post section.tc-contact.tc-contact--single,
body.single-post .tc-contact.tc-contact--single {
background: #fdeef0 !important;
background-color: #fdeef0 !important;
background-image: none !important;
}
/* Post-CONTACT wave (pink bg with white wave path, overlays footer) */
body.single-post section.tc-contact.tc-contact--single .iroha-contact__wave {
display: block !important;
width: 100% !important;
height: 80px !important;
background: #fdeef0 !important;
background-color: #fdeef0 !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
position: relative !important;
z-index: 2 !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact__wave path {
fill: #ffffff !important;
}
@media (max-width: 820px) {
body.single-post .iroha-single__pre-contact-wave,
body.single-post section.tc-contact.tc-contact--single .iroha-contact__wave {
height: 50px !important;
}
}
@media (max-width: 480px) {
body.single-post .iroha-single__pre-contact-wave,
body.single-post section.tc-contact.tc-contact--single .iroha-contact__wave {
height: 40px !important;
}
}
/* Single post: CONTACT (pink) → footer (white) boundary wave, thin and only curve */
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave {
display: block !important;
width: 100% !important;
height: 40px !important;
background: transparent !important;
margin: 0 !important;
margin-bottom: -1px !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
position: relative !important;
z-index: 2 !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave path {
fill: #ffffff !important;
}
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave {
height: 28px !important;
}
}
/* Single post: remove extra pink padding below the post-contact wave */
body.single-post section.tc-contact.tc-contact--single {
padding-bottom: 0 !important;
}
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single {
padding-bottom: 0 !important;
}
}
/* Single post: CONTACT → footer seamless (no white gap from body bg) */
body.single-post article.tenri-clone {
background: transparent !important;
margin-bottom: 0 !important;
}
body.single-post .iroha-footer {
margin-top: 0 !important;
}
body.single-post section.tc-contact.tc-contact--single {
margin-bottom: 0 !important;
}
/* Single post: disable footer ::before radial glow that bleeds into wave area */
body.single-post .iroha-footer::before {
display: none !important;
content: none !important;
}
/* Single post: slim footer (reduce top/bottom padding) */
body.single-post .iroha-footer {
padding-top: 14px !important;
padding-bottom: 10px !important;
}
body.single-post .iroha-footer__copy {
margin-top: 8px !important;
padding-top: 8px !important;
padding-bottom: 0 !important;
}
body.single-post .iroha-footer__grid {
row-gap: 12px !important;
margin-bottom: 0 !important;
}
@media (max-width: 820px) {
body.single-post .iroha-footer {
padding-top: 12px !important;
padding-bottom: 8px !important;
}
}
/* Single post: white footer background (remove pink gradient) */
body.single-post .iroha-footer {
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
}
body.single-post .iroha-footer::before,
body.single-post .iroha-footer::after {
display: none !important;
content: none !important;
}
/* Single post: force white bg on all containers to kill pink side bleed around wave */
html:has(body.single-post),
body.single-post,
body.single-post article.tenri-clone,
body.single-post .tenri-clone,
body.single-post main,
body.single-post #main,
body.single-post .main,
body.single-post #content,
body.single-post #body,
body.single-post .body,
body.single-post .body-in,
body.single-post #container,
body.single-post .container,
body.single-post #wrap,
body.single-post .wrap {
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
}
/* Single post: nuke any pink bleed around the post-contact wave sides */
body.single-post section.tc-contact.tc-contact--single {
overflow: hidden !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
body.single-post section.tc-contact.tc-contact--single::before,
body.single-post section.tc-contact.tc-contact--single::after {
display: none !important;
content: none !important;
}
body.single-post .iroha-single__post-contact-wave {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100vw !important;
max-width: 100% !important;
display: block !important;
}
body.single-post .iroha-single__post-contact-wave + *,
body.single-post section.tc-contact.tc-contact--single + * {
background: #ffffff !important;
}
/* ==========================================================
Single post: article card with soft decoration.
- Card container: white bg + pastel border + soft shadow
- Decorative dots in corners
- Title accent bar (gradient)
- Meta pill refinements
- Thumb with subtle ring
========================================================== */
body.single-post .iroha-single-page {
position: relative;
max-width: 860px !important;
margin: 48px auto 72px !important;
padding: 44px 48px 48px !important;
background: #ffffff !important;
border: 1px solid #fde2ea !important;
border-radius: 24px !important;
box-shadow:
0 18px 40px -24px rgba(232,83,123,0.18),
0 4px 14px -6px rgba(232,83,123,0.08) !important;
overflow: hidden;
}
/* Decorative dots — top-left and bottom-right */
body.single-post .iroha-single-page::before,
body.single-post .iroha-single-page::after {
content: "";
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(40px);
opacity: .55;
}
body.single-post .iroha-single-page::before {
top: -60px;
left: -60px;
background: radial-gradient(circle, rgba(255,214,225,.9) 0%, rgba(255,214,225,0) 70%);
}
body.single-post .iroha-single-page::after {
bottom: -70px;
right: -70px;
background: radial-gradient(circle, rgba(255,228,181,.9) 0%, rgba(255,228,181,0) 70%);
}
body.single-post .iroha-single-page > * {
position: relative;
z-index: 1;
}
/* Meta refinement */
body.single-post .iroha-single__meta {
margin-bottom: 18px !important;
gap: 12px !important;
}
body.single-post .iroha-single__date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px !important;
color: #a67b86 !important;
font-weight: 600;
letter-spacing: .08em;
}
body.single-post .iroha-single__date::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #e8537b;
}
/* Title — gradient accent bar on left */
body.single-post .iroha-single__title {
position: relative;
font-size: clamp(24px, 3.2vw, 34px) !important;
font-weight: 800 !important;
line-height: 1.5 !important;
padding: 4px 0 22px 18px !important;
margin: 0 0 28px !important;
border-bottom: 1px dashed #f2c4d1 !important;
color: #2a1820 !important;
}
body.single-post .iroha-single__title::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 24px;
width: 6px;
border-radius: 999px;
background: linear-gradient(180deg, #e8537b 0%, #ffb347 100%);
}
/* Thumbnail with soft ring + inner radius */
body.single-post .iroha-single__thumb {
margin: 10px auto 36px !important;
padding: 8px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #fff5f8 0%, #fff8ea 100%) !important;
box-shadow: 0 14px 32px -18px rgba(232,83,123,.35) !important;
}
body.single-post .iroha-single__thumb img {
border-radius: 12px !important;
max-height: 440px !important;
}
/* Content typography */
body.single-post .iroha-single__content {
font-size: 16.5px !important;
line-height: 2.0 !important;
color: #3a2530 !important;
}
body.single-post .iroha-single__content p { margin: 0 0 20px !important; }
body.single-post .iroha-single__content h2 {
position: relative;
font-size: 22px !important;
padding: 8px 0 8px 14px !important;
border-bottom: 2px dotted #f2a8bd !important;
border-left: 6px solid #e8537b !important;
background: linear-gradient(90deg, rgba(255,227,234,.6) 0%, rgba(255,227,234,0) 70%) !important;
border-radius: 4px 8px 8px 4px !important;
}
body.single-post .iroha-single__content h3 {
font-size: 19px !important;
padding-left: 14px !important;
border-left: 4px solid #ffb347 !important;
line-height: 1.5 !important;
}
body.single-post .iroha-single__content blockquote {
position: relative;
background: linear-gradient(135deg, #fff5f8 0%, #fff8ea 100%) !important;
border-left: 4px solid #e8537b !important;
padding: 18px 22px 18px 48px !important;
border-radius: 0 14px 14px 0 !important;
}
body.single-post .iroha-single__content blockquote::before {
content: "“";
position: absolute;
left: 14px;
top: 2px;
font-family: Georgia, serif;
font-size: 44px;
color: #f2a8bd;
line-height: 1;
}
/* Back link — pill with gradient */
body.single-post .iroha-single__back {
margin-top: 48px !important;
padding-top: 24px !important;
border-top: 1px dashed #f2c4d1 !important;
}
body.single-post .iroha-single__back a {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 12px 32px !important;
border: 0 !important;
background: linear-gradient(135deg, #ffb3c5 0%, #ffd9a0 100%) !important;
color: #ffffff !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: .04em;
border-radius: 999px !important;
box-shadow: 0 10px 22px -12px rgba(232,83,123,.55) !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
body.single-post .iroha-single__back a:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px -12px rgba(232,83,123,.6) !important;
background: linear-gradient(135deg, #e8537b 0%, #ffb347 100%) !important;
color: #ffffff !important;
}
@media (max-width: 820px) {
body.single-post .iroha-single-page {
margin: 24px 14px 48px !important;
padding: 28px 20px 32px !important;
border-radius: 18px !important;
}
body.single-post .iroha-single__title {
font-size: 22px !important;
padding-left: 14px !important;
}
body.single-post .iroha-single__title::before { width: 5px; top: 6px; bottom: 20px; }
body.single-post .iroha-single__content { font-size: 15.5px !important; line-height: 1.95 !important; }
body.single-post .iroha-single__thumb img { max-height: 260px !important; }
}
/* ==========================================================
Single post: background decoration layer (pattern dots)
========================================================== */
body.single-post .iroha-single-page {
position: relative !important;
}
body.single-post .iroha-single__deco {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
overflow: visible !important;
}
/* Ensure all child content sits above the deco layer */
body.single-post .iroha-single-page > *:not(.iroha-single__deco) {
position: relative;
z-index: 1;
}
/* Slightly reduce overall deco intensity so text stays primary */
body.single-post .iroha-single__deco .iroha-pat {
opacity: .85;
}
body.single-post .iroha-single__deco .iroha-pat--sparkle {
background:
linear-gradient(90deg, transparent 46%, #ffd6e1 46%, #ffd6e1 54%, transparent 54%),
linear-gradient(0deg, transparent 46%, #ffd6e1 46%, #ffd6e1 54%, transparent 54%) !important;
}
/* ==========================================================
Single post: WHITE background + decorative patterns on sides.
No gradient tint — only floating shapes around the card.
========================================================== */
/* Outer wrapper — solid white bg */
body.single-post article.tenri-clone {
position: relative !important;
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
}
/* Left side pattern band */
body.single-post .iroha-single-page {
position: relative;
}
body.single-post .iroha-single-page::before {
content: "";
position: fixed;
left: 0;
top: 0;
width: clamp(40px, 10vw, 180px);
height: 100vh;
pointer-events: none;
z-index: 0;
background-color: transparent;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 160px 240px;
background-repeat: repeat-y;
opacity: .85;
}
body.single-post .iroha-single-page::after {
content: "";
position: fixed;
right: 0;
top: 0;
width: clamp(40px, 10vw, 180px);
height: 100vh;
pointer-events: none;
z-index: 0;
background-color: transparent;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 160px 240px;
background-repeat: repeat-y;
opacity: .85;
}
@media (max-width: 900px) {
body.single-post .iroha-single-page::before,
body.single-post .iroha-single-page::after {
display: none !important;
}
}
/* ==========================================================
Single post: mobile CONTACT layout — match jihatsu page style.
- Heading right above text
- Two buttons stacked tightly (no big gaps)
- Compact section padding
========================================================== */
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
body.single-post section.tc-contact.tc-contact--single .tc-contact-wrap {
padding: 0 16px !important;
}
body.single-post section.tc-contact.tc-contact--single .tc-contact-head {
margin-bottom: 18px !important;
}
body.single-post section.tc-contact.tc-contact--single .tc-contact-head .tc-en {
font-size: 26px !important;
margin-bottom: 4px !important;
}
body.single-post section.tc-contact.tc-contact--single .tc-contact-head .tc-ja {
font-size: 14px !important;
letter-spacing: .3em !important;
margin-bottom: 10px !important;
}
body.single-post section.tc-contact.tc-contact--single .tc-contact-head p {
font-size: 13px !important;
line-height: 1.7 !important;
margin: 0 !important;
}
body.single-post section.tc-contact.tc-contact--single .tc-contact-inner {
margin-top: 0 !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list li {
margin: 0 !important;
padding: 0 !important;
max-width: 260px !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn {
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 240px !important;
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
}
}
@media (max-width: 480px) {
body.single-post section.tc-contact.tc-contact--single {
padding-top: 26px !important;
padding-bottom: 26px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list {
gap: 2px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 220px !important;
}
}
/* Single post mobile: limit CONTACT button image height to match jihatsu */
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 220px !important;
max-height: 110px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list {
gap: 6px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list li {
max-width: 240px !important;
}
}
@media (max-width: 480px) {
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 200px !important;
max-height: 100px !important;
}
}
/* === Single post mobile: make CONTACT buttons BIGGER again === */
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 300px !important;
max-height: none !important;
width: 100% !important;
height: auto !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list li {
max-width: 300px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list {
gap: 8px !important;
}
}
@media (max-width: 480px) {
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 280px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list li {
max-width: 280px !important;
}
}
/* === Single post: fix CONTACT → footer wave double-band bug ===
Issue: wave leaves both a white strip AND a pink strip below it.
Fix: pull the wave flush against the footer and hide any ghost
band that comes from body/footer ::before glow. */
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave {
margin-bottom: 0 !important;
position: relative !important;
bottom: 0 !important;
display: block !important;
z-index: 4 !important;
}
body.single-post section.tc-contact.tc-contact--single {
overflow: hidden !important;
margin-bottom: 0 !important;
}
body.single-post article.tenri-clone > .iroha-footer {
margin-top: -1px !important;
position: relative !important;
z-index: 1 !important;
}
/* Footer glow already disabled; re-assert on single-post */
body.single-post .iroha-footer,
body.single-post .iroha-footer::before,
body.single-post .iroha-footer::after {
background-image: none !important;
}
body.single-post .iroha-footer {
background: #ffffff !important;
background-color: #ffffff !important;
}
body.single-post .iroha-footer::before,
body.single-post .iroha-footer::after {
display: none !important;
content: none !important;
background: transparent !important;
}
/* Single post mobile: slightly reduce CONTACT button size */
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 260px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list li {
max-width: 260px !important;
}
}
@media (max-width: 480px) {
body.single-post section.tc-contact.tc-contact--single .iroha-contact-imgbtn img {
max-width: 240px !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-contact-list li {
max-width: 240px !important;
}
}
/* Single post: bottom wave displayed properly on mobile (no pink bleed) */
@media (max-width: 820px) {
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave {
display: block !important;
width: 100% !important;
height: 36px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: bottom !important;
background: transparent !important;
position: relative !important;
z-index: 4 !important;
}
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave path {
fill: #ffffff !important;
}
}
@media (max-width: 480px) {
body.single-post section.tc-contact.tc-contact--single .iroha-single__post-contact-wave {
height: 28px !important;
}
}