@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   Portfolio. — design system (hand-crafted / brush / paper)
   ========================================================================== */

.page .c-pageTitle{ display:none; }
.page #main_content,
.page .l-mainContent,
.page .l-mainContent__inner{ padding-top:0 !important; margin-top:0 !important; }
.page .post_content{ margin:0 !important; padding-top:0 !important; }
.page .l-mainContent__inner > :first-child{ margin-top:0 !important; }

.page .post_content h2,
.page .post_content h3,
.page .post_content h4{
	background:none !important;
	padding:0 !important;
	border:none !important;
	margin:0;
}
.page .post_content h2::before,
.page .post_content h3::before,
.page .post_content h4::before{ content:none !important; border:none !important; }

html, body{ overflow-x:hidden; max-width:100%; }
@media (max-width: 782px){
	.page .alignfull{ left:0 !important; width:100% !important; max-width:100% !important; }
}

:root{
	--d-cream:#f1ebe0;
	--d-cream2:#e8dfcf;
	--d-dark:#1a1714;
	--d-orange:#c1622e;
	--d-blue:#3e6e8e;
	--d-green:#6b8e4e;
	--d-text:#2b2620;
	--d-mincho:'Shippori Mincho', serif;
	--d-brush:'Caveat', cursive;
	--d-sans:'Noto Sans JP', sans-serif;
}

body{ font-family: var(--d-sans); color: var(--d-text); background: var(--d-cream); }
.d-mincho{ font-family: var(--d-mincho); }
.d-brush{ font-family: var(--d-brush); }

/* subtle paper grain */
.d-paper{ position:relative; }
.d-paper::before{
	content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
	background-image: radial-gradient(rgba(43,38,32,.045) 1px, transparent 1px);
	background-size: 3px 3px;
}

/* -------------------- layout -------------------- */
.d-section{ padding: clamp(56px, 8vw, 120px) 24px; position:relative; }
.d-section--tight{ padding: clamp(40px, 5vw, 64px) 24px; position:relative; }
.d-dark-bg{ background: var(--d-dark); color: var(--d-cream); }
.d-cream-bg{ background: var(--d-cream); }
.d-cream2-bg{ background: var(--d-cream2); }
.d-inner{ max-width: 1160px; margin: 0 auto; }
.d-inner--wide{ max-width: 1320px; margin: 0 auto; }
.d-inner--narrow{ max-width: 760px; margin: 0 auto; }

/* -------------------- brand / labels -------------------- */
.d-logo{ font-family: var(--d-brush); font-size: 30px; color: var(--d-dark); line-height:1; }
.d-logo small{ display:block; font-family: var(--d-sans); font-size:10px; letter-spacing:.14em; color:#7a6f60; margin-top:6px; }

.d-label{
	font-family: var(--d-sans); letter-spacing:.22em; font-size:12px; font-weight:700;
	color: var(--d-orange); text-transform:uppercase;
}
.d-title-center{ text-align:center; margin-bottom: 56px; }

.post_content h2.d-h2,
h2.d-h2{
	font-family: var(--d-mincho); font-weight:800;
	font-size: clamp(30px, 4.2vw, 48px); line-height:1.55; margin:14px 0 0; letter-spacing:.02em;
	background:none !important; padding:0 !important; color: var(--d-dark);
}
.post_content h2.d-h2::before{ content:none !important; border:none !important; }
.d-dark-bg .d-h2{ color: var(--d-cream); }
.d-lead{ max-width:560px; margin: 18px auto 0; line-height:2.1; color: #5c5245; font-size:15px; }
.d-title-center .d-lead{ margin-left:auto; margin-right:auto; }
.d-dark-bg .d-lead{ color: #cabfb0; }

/* hand-drawn underline (wobbly svg) */
.d-underline{ position:relative; display:inline-block; }
.d-underline::after{
	content:""; position:absolute; left:-4%; right:-4%; bottom:-.06em; height:.28em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 30 4, 60 18, 100 10 S 170 2, 198 12' stroke='%23c1622e' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	z-index:-1;
}

/* -------------------- buttons -------------------- */
.d-btn{
	display:inline-flex; align-items:center; gap:10px; padding: 15px 32px;
	font-family: var(--d-sans); font-weight:700; font-size:13.5px; letter-spacing:.08em;
	text-decoration:none !important; border:1.5px solid currentColor; transition: all .3s ease; white-space:nowrap;
}
.d-btn--solid{ background: var(--d-dark); border-color: var(--d-dark); color: var(--d-cream) !important; }
.d-btn--solid:hover{ background: transparent; color: var(--d-dark) !important; }
.d-btn--outline{ color: var(--d-dark) !important; border-color: var(--d-dark); }
.d-btn--outline:hover{ background: var(--d-dark); color: var(--d-cream) !important; }
.d-link-arrow{
	display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
	color: var(--d-dark) !important; text-decoration:none !important; letter-spacing:.04em;
}
.d-link-arrow::after{ content:"⟶"; transition: transform .3s ease; }
.d-link-arrow:hover::after{ transform: translateX(5px); }

/* -------------------- hero -------------------- */
.d-hero{ position:relative; background: var(--d-cream); overflow:hidden; }
.d-hero__grid{ display:grid; grid-template-columns: 42% 58%; min-height: 88vh; }
.d-hero__left{ position:relative; display:flex; flex-direction:column; justify-content:center; padding: 60px 5vw 60px 6vw; z-index:2; }
.d-hero__right{
	position:relative; overflow:hidden;
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.d-hero__right img{ width:100%; height:100%; object-fit:cover; display:block; animation: d-kenburns 24s ease-out forwards; }
@keyframes d-kenburns{ from{ transform: scale(1.12);} to{ transform: scale(1);} }
@media (prefers-reduced-motion: reduce){ .d-hero__right img{ animation:none; } }
.d-hero__dot{ position:absolute; border-radius:50%; background: var(--d-dark); opacity:.7; }

.d-hero__title{
	font-family: var(--d-mincho); font-weight:800; font-size: clamp(30px, 3.6vw, 46px);
	line-height:1.65; margin: 26px 0 22px; color: var(--d-dark);
	opacity:0; transform: translateY(16px); animation: d-fade-up .8s cubic-bezier(.2,.8,.3,1) .15s forwards;
}
.d-hero__sub{
	font-size:14px; line-height:2.1; color:#5c5245; max-width:380px;
	opacity:0; transform: translateY(16px); animation: d-fade-up .8s cubic-bezier(.2,.8,.3,1) .35s forwards;
}
.d-hero__label{
	font-family: var(--d-brush); font-size:24px; color: var(--d-dark);
	opacity:0; transform: translateY(16px); animation: d-fade-up .8s cubic-bezier(.2,.8,.3,1) 0s forwards;
}
@keyframes d-fade-up{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .d-hero__title, .d-hero__sub, .d-hero__label{ animation:none; opacity:1; transform:none; } }

.d-scroll{
	position:absolute; left: 6vw; bottom: 40px; z-index:2;
	display:flex; flex-direction:column; align-items:center; gap:12px;
	font-family: var(--d-sans); font-size:10px; letter-spacing:.32em; color: var(--d-dark);
	writing-mode: vertical-rl; cursor:pointer; background:none; border:none; padding:0;
}
.d-scroll span{ width:1px; height:52px; background: rgba(26,23,20,.5); display:block; }

.d-badge{
	position:absolute; right: 6%; bottom: 8%; z-index:3;
	width: 148px; height:148px; border-radius:50%;
	background: var(--d-orange); color:#fff;
	display:flex; align-items:center; justify-content:center; text-align:center;
	border: 2px dashed rgba(255,255,255,.55);
	font-family: var(--d-brush);
	box-shadow: 0 10px 30px -8px rgba(26,23,20,.45);
	animation: d-spin-slow 26s linear infinite;
}
.d-badge__inner{ animation: d-spin-slow-rev 26s linear infinite; padding: 10px; }
@keyframes d-spin-slow{ to{ transform: rotate(360deg); } }
@keyframes d-spin-slow-rev{ to{ transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){ .d-badge, .d-badge__inner{ animation:none; } }
.d-badge__label{ font-size:15px; display:block; margin-bottom:6px; }
.d-badge__text{ font-family: var(--d-sans); font-size:11.5px; font-weight:700; line-height:1.5; }

/* -------------------- works -------------------- */
.d-works-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.d-works-head__title{ font-family: var(--d-brush); font-size: clamp(40px,5vw,64px); color: var(--d-dark); line-height:1; transform: rotate(-2deg); display:inline-block; }
.d-works-head__desc{ font-size:13.5px; color:#7a6f60; margin-top:8px; }

.d-works-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.d-work{ }
.d-work__media{ overflow:hidden; margin-bottom:20px; position:relative; }
.d-work__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.d-work:hover .d-work__media img{ transform: scale(1.06); }
.d-work__num{ font-family: var(--d-brush); font-size:34px; line-height:1; margin-right:10px; vertical-align:middle; }
.d-work:nth-child(1) .d-work__num{ color: var(--d-orange); }
.d-work:nth-child(2) .d-work__num{ color: var(--d-blue); }
.d-work:nth-child(3) .d-work__num{ color: var(--d-green); }
.d-work__title{ font-family: var(--d-mincho); font-weight:700; font-size:19px; vertical-align:middle; }
.d-work__tag{
	display:inline-block; margin: 12px 0 10px; padding: 4px 14px; font-size:11.5px;
	border: 1px solid rgba(43,38,32,.3); border-radius:999px; color:#5c5245;
}
.d-work__desc{ font-size:13px; line-height:1.9; color:#7a6f60; margin-bottom:14px; }

/* -------------------- dark split w/ strengths -------------------- */
.d-story{ display:grid; grid-template-columns: .95fr 1.05fr; }
.d-story__media{ position:relative; background: var(--d-dark); min-height:520px; display:flex; align-items:center; padding: 60px; overflow:hidden; }
.d-story__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.d-story__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(26,23,20,.2), rgba(26,23,20,.75)); }
.d-story__quote{
	position:relative; z-index:1; font-family: var(--d-brush); font-size: clamp(26px,2.6vw,36px);
	color:#fff; line-height:1.5; transform: rotate(-1.5deg);
}
.d-story__body{ padding: clamp(40px,6vw,80px); background: var(--d-cream2); }
.d-story__body h2{ font-family: var(--d-mincho); font-size: clamp(24px,2.8vw,32px); font-weight:700; line-height:1.7; margin:0 0 22px; }

.d-icon-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-top:36px; }
.d-icon-item{ text-align:left; }
.d-icon-item__ico{ width:44px; height:44px; color: var(--d-dark); margin-bottom:14px; }
.d-icon-item__ico svg{ width:100%; height:100%; overflow:visible; }
.d-icon-item__ico svg *{ stroke-dasharray:120; stroke-dashoffset:120; transition: stroke-dashoffset 1.1s ease; }
.d-icon-item.is-inview .d-icon-item__ico svg *{ stroke-dashoffset:0; }
.d-icon-item h4{ font-family: var(--d-mincho); font-size:14.5px; font-weight:700; margin:0 0 8px; }
.d-icon-item p{ font-size:11.5px; line-height:1.8; color:#7a6f60; margin:0; }

.d-story__frame{
	position:absolute; right: 6%; top: -8%; width: 220px; height:220px; border-radius:50%;
	overflow:hidden; border: 6px solid var(--d-cream); box-shadow: 0 16px 34px -10px rgba(26,23,20,.35);
	z-index:2;
}
.d-story__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.d-story__peek{
	position:absolute; right: 4%; bottom: -6%; width:170px; border-radius:6px; overflow:hidden;
	box-shadow: 0 14px 30px -10px rgba(26,23,20,.4); z-index:2; display:none;
}
.d-story__peek img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.d-story{ position:relative; }
@media (min-width: 901px){ .d-story__peek{ display:block; } }

.d-sketch{ width:150px; opacity:.8; color: var(--d-dark); margin-top:44px; }

/* -------------------- CTA footer band -------------------- */
.d-cta-band{ display:grid; grid-template-columns: 1fr 1.3fr 1fr; align-items:center; gap:24px; }
.d-cta-band__script{ font-family: var(--d-brush); font-size: clamp(22px,2.4vw,30px); line-height:1.4; color: var(--d-cream); }
.d-cta-band__center{ text-align:center; }
.d-cta-band__center p{ font-size:13px; color:#cabfb0; margin: 10px 0 22px; }
.d-cta-band__deco{ justify-self:end; width:130px; color:#4a4137; opacity:.8; }

/* -------------------- generic content blocks reused across pages -------------------- */
.d-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.d-split.is-reverse .d-split__media{ order:2; }
.d-split__media{ overflow:hidden; }
.d-split__media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4/5; transition: transform .6s ease; }
.d-split__media:hover img{ transform: scale(1.05); }
.d-split__num{ font-family: var(--d-brush); font-size:22px; color: var(--d-orange); margin-bottom:12px; }
.d-split__body h3{ font-family: var(--d-mincho); font-weight:700; font-size: clamp(22px,2.6vw,28px); line-height:1.7; margin:0 0 20px; }
.d-split__body p{ line-height:2.1; color:#5c5245; font-size:14.5px; margin-bottom:14px; }

.d-flow-list{ counter-reset: flow; max-width:820px; margin:0 auto; }
.d-flow-item{ display:grid; grid-template-columns: 90px 1fr; gap:28px; padding: 34px 0; border-bottom:1px solid rgba(43,38,32,.14); }
.d-flow-item:first-child{ padding-top:0; }
.d-flow-item__num{ font-family: var(--d-brush); font-size:44px; color: var(--d-orange); line-height:1; }
.d-flow-item h4{ font-family: var(--d-mincho); font-size:19px; font-weight:700; margin:0 0 10px; }
.d-flow-item p{ font-size:13.5px; line-height:2; color:#5c5245; margin:0; }

.d-info-rows{ max-width:520px; }
.d-info-rows .row{ display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid rgba(241,235,224,.14); }
.d-info-rows .row dt{ font-family: var(--d-brush); font-size:18px; color: var(--d-orange); white-space:nowrap; }
.d-info-rows .row dd{ margin:0; text-align:right; font-size:13.5px; line-height:1.9; color:#cabfb0; }
.d-info-rows .row a{ color:#fff; text-decoration:underline; }

.d-faq{ max-width:760px; margin:0 auto; }
.d-faq__item{ border-bottom:1px solid rgba(43,38,32,.14); }
.d-faq__q{
	display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 4px;
	cursor:pointer; font-family: var(--d-mincho); font-weight:700; font-size:15px;
}
.d-faq__q::after{ content:"+"; font-size:22px; color: var(--d-orange); transition: transform .3s ease; flex-shrink:0; }
.d-faq__item.is-open .d-faq__q::after{ transform: rotate(45deg); }
.d-faq__a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.d-faq__a p{ padding: 0 4px 22px; font-size:13.5px; line-height:1.9; color:#7a6f60; margin:0; }

/* -------------------- scroll reveal -------------------- */
.d-title-center, .d-split__media, .d-split__body, .d-work, .d-icon-item,
.d-flow-item, .d-info-rows .row, .d-faq__item, .d-works-head{
	opacity:0; transform: translateY(24px);
	transition: opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1);
}
.is-inview{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
	.d-title-center, .d-split__media, .d-split__body, .d-work, .d-icon-item,
	.d-flow-item, .d-info-rows .row, .d-faq__item, .d-works-head{
		opacity:1 !important; transform:none !important; transition:none !important;
	}
}

.l-fixHeader{ transition: transform .4s ease, box-shadow .4s ease; }

/* -------------------- fix: SP header nav strip leaking onto desktop -------------------- */
@media (min-width: 960px){
	.l-header__spNav{ display:none !important; }
}

/* -------------------- header logo styling -------------------- */
.c-headLogo, .c-headLogo a{ font-family: var(--d-brush) !important; font-size: 30px !important; font-weight:600; }
.c-catchphrase{ font-family: var(--d-sans) !important; letter-spacing:.14em !important; font-size:10px !important; }

/* -------------------- responsive -------------------- */
@media (max-width: 900px){
	.d-hero__grid{ grid-template-columns: 1fr; min-height:auto; }
	.d-hero__right{ clip-path:none; aspect-ratio: 4/3; }
	.d-hero__left{ padding: 48px 24px 40px; }
	.d-scroll{ display:none; }
	.d-badge{ width:110px; height:110px; right:16px; bottom:-30px; }
	.d-works-grid{ grid-template-columns: 1fr; }
	.d-story{ grid-template-columns: 1fr; }
	.d-story__media{ min-height:320px; padding:36px; }
	.d-story__frame, .d-story__peek{ display:none; }
	.d-icon-grid{ grid-template-columns: repeat(2,1fr); }
	.d-cta-band{ grid-template-columns: 1fr; text-align:center; }
	.d-cta-band__deco{ justify-self:center; }
	.d-split, .d-split.is-reverse{ grid-template-columns:1fr; gap:28px; }
	.d-split.is-reverse .d-split__media{ order:0; }
	.d-flow-item{ grid-template-columns: 56px 1fr; gap:18px; }
	.d-flow-item__num{ font-size:32px; }
}
@media (max-width: 560px){
	.d-section{ padding: 48px 18px; }
	.d-icon-grid{ grid-template-columns: 1fr 1fr; }
}