@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Klee+One&family=Zen+Kurenaido&display=swap');

/* RESET */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, figure{
margin:0;
padding:0;
border:0;
font-weight:normal;
font-size:100%;
vertical-align:baseline;
}
ol, ul{
list-style:none;
padding-left:0;
}

/* BASIC */
*, *::before, *::after{
box-sizing:border-box;
}
html{
font-size:62.5%;
}
:root{
--momo-red:#7a2e2b;
--momo-text:#1c2b3a;
--momo-line:#cfc8bd;
--torn-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20L0 5.6L2.5 7.3L8.1 3.3L10.7 6.4L14.3 8L19 13.8L23.1 3.3L30.8 4.4L35.4 4.8L38.8 8.4L44.9 6.6L51.8 5L59.9 8.8L62.8 6.3L68.2 3.3L74.2 10L80.4 7.6L89 6.8L95.9 8.2L99.9 6.1L105.1 1.8L112.5 4L120.6 3.6L128.8 9.6L133.7 5.9L136.7 4.4L142.1 7.7L147.1 6L153.9 7.1L156.3 10.2L163.9 6.1L170.3 2L173.4 2.7L176.5 3.8L184.6 6.7L189 8.9L198 6.7L200.7 5.7L203.8 3.2L206.9 8L215.7 9.9L220.3 4.3L227.7 5.6L236.6 9.8L243.8 4.8L246 3.2L252.9 10.7L261.8 10.6L265.4 4.6L273.7 9.7L281.3 3.7L288.7 9L296.3 5.7L301 6.2L304.2 4L311.9 4.2L318.5 5.8L320.6 10.8L329.1 6.5L332.6 5L338.7 5.1L347.1 5.8L355.4 6.4L361.1 7.3L364.4 3L369.7 8.8L375.3 7.4L381.3 5L386.8 7.5L391.9 7.9L398.8 6.6L400 5.6L400 20Z'/%3E%3C/svg%3E");
--torn-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 14.4L2.5 12.7L8.1 16.7L10.7 13.6L14.3 12L19 6.2L23.1 16.7L30.8 15.6L35.4 15.2L38.8 11.6L44.9 13.4L51.8 15L59.9 11.2L62.8 13.7L68.2 16.7L74.2 10L80.4 12.4L89 13.2L95.9 11.8L99.9 13.9L105.1 18.2L112.5 16L120.6 16.4L128.8 10.4L133.7 14.1L136.7 15.6L142.1 12.3L147.1 14L153.9 12.9L156.3 9.8L163.9 13.9L170.3 18L173.4 17.3L176.5 16.2L184.6 13.3L189 11.1L198 13.3L200.7 14.3L203.8 16.8L206.9 12L215.7 10.1L220.3 15.7L227.7 14.4L236.6 10.2L243.8 15.2L246 16.8L252.9 9.3L261.8 9.4L265.4 15.4L273.7 10.3L281.3 16.3L288.7 11L296.3 14.3L301 13.8L304.2 16L311.9 15.8L318.5 14.2L320.6 9.2L329.1 13.5L332.6 15L338.7 14.9L347.1 14.2L355.4 13.6L361.1 12.7L364.4 17L369.7 11.2L375.3 12.6L381.3 15L386.8 12.5L391.9 12.1L398.8 13.4L400 14.4L400 0Z'/%3E%3C/svg%3E");
}
body{
background:#eee8dc url("../img/paper-bg.webp") repeat;
color:var(--momo-text);
font-family: "Kiwi Maru", serif;
font-size:1.4rem;
line-height:1.8;
-webkit-text-size-adjust:100%;
}
@media (min-width:768px){
body{
font-size:1.5rem;
}
}
@media (min-width:1200px){
body{
font-size:1.6rem;
}
}
#page{
min-height:100vh;
display:flex;
flex-direction:column;
}
#allcontents{
padding:8rem 0;
flex:1;
}
#allcontents section{
margin:0 auto 8rem;
}
#allcontents section:last-child{
margin-bottom:0;
}
#allcontents .row{
margin-bottom:2rem;
}
#allcontents [class*="col-"]{
margin-bottom:2rem;
}
@media (max-width:767px){
#allcontents{
padding:4rem 0;
}
#allcontents section{
margin:0 auto 4rem;
}
#allcontents .container{
width:96%;
}
}
img{
max-width:100%;
height:auto;
}
a img{
transition:opacity 1s ease;
}
a img:hover{
opacity:.7;
}
#wrapper-navbar a img:hover{
opacity:1;
}
a, a:visited{
color:inherit;
text-decoration:none;
transition:all 1s ease;
color:var(--momo-red);
}
a:hover, a:active{
color:inherit;
text-decoration:none;
opacity:.6;
}
a:focus-visible{
outline:2px solid currentColor;
outline-offset:2px;
}
p{
padding:0 0 2rem;
}

/* BASE */
.front-main{
overflow-x:hidden;
}
.front-main section{
position:relative;
padding:5rem 0;
}
.front-main .container{
position:relative;
z-index:2;
}
@media (max-width:991.98px){
.front-main section{
padding:3.5rem 0;
}
}
@media (max-width:767.98px){
.front-main .container{
width:96%;
}
}

/* 破れ紙の帯 */
.paper-section::before,
.paper-section::after{
content:"";
position:absolute;
left:0;
right:0;
pointer-events:none;
-webkit-mask-image:var(--torn-top),linear-gradient(#000,#000),var(--torn-bottom);
mask-image:var(--torn-top),linear-gradient(#000,#000),var(--torn-bottom);
-webkit-mask-position:left top,left 1.5rem,left bottom;
mask-position:left top,left 1.5rem,left bottom;
-webkit-mask-repeat:repeat-x,no-repeat,repeat-x;
mask-repeat:repeat-x,no-repeat,repeat-x;
}
.paper-section::before{
top:-1.5rem;
bottom:-1.5rem;
z-index:1;
background:linear-gradient(rgba(90,60,20,.08),rgba(90,60,20,.08)),#eee8dc url("../img/paper-bg.webp") repeat;
-webkit-mask-size:60rem 1.5rem,100% calc(100% - 3rem),60rem 1.5rem;
mask-size:60rem 1.5rem,100% calc(100% - 3rem),60rem 1.5rem;
}
.paper-section::after{
top:-1.8rem;
bottom:-1.8rem;
z-index:0;
background-color:#f8f4ec;
-webkit-mask-size:43rem 1.5rem,100% calc(100% - 3rem),43rem 1.5rem;
mask-size:43rem 1.5rem,100% calc(100% - 3rem),43rem 1.5rem;
}
.hero + .paper-section{
--torn-top:linear-gradient(#000,#000);
}
.hero + .paper-section::after{
top:-1.5rem;
}
.paper-section + section{
padding-top:8rem;
}
@media (max-width:991.98px){
.paper-section + section{
padding-top:6.5rem;
}
}

/* 手書き文字 */
.hand{
font-family: "Zen Kurenaido", sans-serif;
line-height:1.8;
}

/* COMMON */
.section-label{
margin-bottom:0.5rem;
color:var(--momo-red);
letter-spacing:0.15em;
font-size:1.2rem;
font-family:"Sawarabi Gothic", sans-serif;
}
.section-title{
font-size:3rem;
font-weight:700;
font-family:"Klee One",sans-serif;
margin-bottom:1.5rem;
line-height:1.5;
}
.btn-main{
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.75rem 1.75rem;
color:#fff;
background-color:var(--momo-red);
text-decoration:none;
transition:opacity 0.2s;
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
}
.btn-main:hover{
color:#fff;
opacity:0.85;
animation:wobble .5s ease;
}
.btn-main svg{
width:2.2rem;
height:auto;
}
@keyframes wobble{
0%,100%{transform:rotate(0);}
20%{transform:rotate(-4deg);}
40%{transform:rotate(3deg);}
60%{transform:rotate(-2deg);}
80%{transform:rotate(1deg);}
}

/* HEADER */
.site-header{
position:relative;
z-index:10;
background-color:transparent;
}
.site-header .navbar{
padding:1rem 0;
}
.header-brand{
display:flex;
align-items:center;
gap:1rem;
}
.header-logo img{
width:18rem;
}
.header-tagline{
padding-left:1rem;
border-left:1px solid var(--momo-line);
line-height:1.6;
font-size:1.2rem;
}
.header-nav{
align-items:center;
gap:0.5rem;
}
.header-nav .nav-link{
color:var(--momo-text);
border-radius:3px;
}
.header-nav .nav-link:hover{
color:var(--momo-red);
}
.header-cta{
margin-left:1rem;
}
.header-cta a{
color:#fff;
}
@media (max-width:991.98px){
.site-header .navbar{
padding:1.5rem 0;
}
.site-header .btn-main{
padding:.5rem 1.4rem;
}
.header-tagline{
display:none;
}
.header-nav{
align-items:flex-start;
padding:1rem 0;
}
.header-cta{
margin:0.5rem 0 0;
}
}

/* HERO */
.front-main .hero{
padding:8rem 0;
}
.hero::before,
.hero::after{
content:"";
position:absolute;
top:-1rem;
bottom:-1.5rem;
left:-1rem;
z-index:1;
background-image:url("../img/fv_left.webp");
background-repeat:no-repeat;
}
.hero::before{
width:calc(50% - 20rem);
background-position:left center;
background-size:auto 100%;
}
.hero::after{
width:calc(50% + 15rem);
background-position:right center;
background-size:cover;
}
.hero-photo{
position:absolute;
top:0;
bottom:0;
left:40%;
right:0;
z-index:0;
}
.hero-photo img{
width:100%;
height:100%;
object-fit:cover;
}
.hero-title{
font-size:4rem;
margin-bottom:2rem;
line-height:1.5;
font-family:"Klee One",sans-serif;
font-weight:700;
}
.hero-underline{
padding-bottom:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 15C40 11 90 9 150 8.5S250 7 296 5.5C299 5.4 299.5 7.6 297 8C250 10.5 190 11.5 140 12.5S50 15.5 6 18C2 18.3 0.5 15.4 3 15Z' fill='%237a2e2b'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:left bottom;
background-size:100% 1.2rem;
font-weight:700;
}
.hero-lead{
line-height:2.1;
}
.hero-hand{
margin-top:2.5rem;
transform:rotate(-6deg);
transform-origin:left center;
}
.hero-hand svg{
display:inline-block;
width:4.5rem;
height:auto;
margin-left:1rem;
vertical-align:bottom;
}
.hero-tag{
position:absolute;
bottom:-10rem;
right:1rem;
display:flex;
flex-direction:row-reverse;
align-items:flex-start;
gap:0.25rem;
font-family:"Klee One",sans-serif;
}
.hero-tag > span{
display:block;
padding:0.75rem 0.4rem;
writing-mode:vertical-rl;
background-color:#fff;
background-image:url("../img/paper-strip.png");
background-size:100% 100%;
letter-spacing:0.1em;
font-weight:500;
}
.hero-tag > span:nth-child(1){
transform:rotate(1.5deg);
clip-path:polygon(2% 0,98% 0.6%,100% 22%,98.5% 51%,100% 78%,97% 100%,1% 99.4%,0 73%,1.6% 46%,0 19%);
}
.hero-tag > span:nth-child(2){
margin-top:1.5rem;
transform:rotate(-1deg);
clip-path:polygon(0 0.8%,97% 0,100% 31%,98% 64%,99.5% 100%,3% 99%,1.2% 70%,0 38%);
}
.hero-tag > span:nth-child(3){
margin-top:3rem;
transform:rotate(0.6deg);
clip-path:polygon(1.5% 0,100% 0.4%,98.6% 18%,100% 47%,98.2% 76%,100% 99.6%,0 100%,1.4% 82%,0 55%,1.8% 27%);
}
@media (max-width:767.98px){
.front-main .hero{
padding:0 0 3.5rem;
}
.hero::before{
display:none;
}
.hero::after{
left:0;
right:0;
bottom:-1.5rem;
width:auto;
top:67vw;
background-image:url("../img/fv_left_sp.webp");
background-position:center top;
background-size:100% auto;
}
.hero-photo{
position:static;
margin-bottom:2rem;
}
.hero-photo img{
height:auto;
aspect-ratio:4/3;
}
.hero-hand{
margin-top:-2rem;
margin-bottom:2rem;
width:fit-content;
margin-left:auto;
transform-origin:right center;
}
.hero-tag{
display:none;
}
}
@media (min-width:768px) and (max-width:1199.98px){
.hero::after{
width:calc(50% + 21rem);
}
}
@media (min-width:1400px){
.hero::after{
width:calc(50% + 12rem);
}
}

/* SERVICE */
.service-note{
margin-top:2rem;
color:var(--momo-red);
line-height:2;
}
.service-item{
padding:0 1.5rem;
border-left:1px solid var(--momo-line);
}
.service-icon{
display:block;
width:5rem;
margin-bottom:1rem;
color:var(--momo-text);
}
.service-icon svg{
display:block;
width:100%;
height:auto;
}
.service-title{
margin-bottom:1rem;
font-weight:700;
}
.service-points li{
position:relative;
padding-left:1rem;
line-height:2;
}
.service-points li::before{
content:"・";
position:absolute;
left:0;
}
@media (min-width:768px){
.service-list{
display:grid;
grid-template-columns:repeat(2,auto);
justify-content:space-evenly;
}
.service-list > .service-item{
width:auto;
}
}
@media (max-width:991.98px){
.service-item{
padding:1.5rem 0;
border-left:none;
border-bottom:1px solid var(--momo-line);
}
}
@media (max-width:767.98px){
.service-item{
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
column-gap:1.5rem;
}
.service-icon{
margin-bottom:0;
}
.service-title{
margin-bottom:0;
}
.service-points{
grid-column:1 / -1;
display:flex;
flex-wrap:wrap;
column-gap:2rem;
margin-top:1.5rem;
}
.service-points li{
white-space:nowrap;
}
.service-list{
--bs-gutter-y:0;
}
.service-item{
padding-top:1.6rem;
}
}

/* WORKS */
.works-hand{
position:relative;
display:inline-block;
margin-top:6rem;
transform:rotate(-4deg);
transform-origin:left center;
}
.works-hand svg{
position:absolute;
left:100%;
bottom:2rem;
width:6rem;
height:auto;
margin-left:1rem;
}
.works-list{
display:grid;
grid-template-columns:fit-content(40%) 1fr;
padding:2rem 2.5rem;
background-color:rgba(255,255,255,0.6);
clip-path:polygon(0 .6rem, 12% .1rem, 27% .5rem, 41% 0, 58% .4rem, 73% .1rem, 88% .6rem, 100% .2rem, calc(100% - .3rem) 35%, 100% 68%, calc(100% - .2rem) calc(100% - .5rem), 84% 100%, 66% calc(100% - .4rem), 49% calc(100% - .1rem), 31% calc(100% - .6rem), 15% calc(100% - .2rem), .2rem 100%, .4rem 62%, 0 30%);
}
.works-item{
display:grid;
grid-column:1 / -1;
grid-template-columns:subgrid;
gap:1rem 3rem;
padding:0.9rem 0;
border-bottom:1px solid var(--momo-line);
}
.works-item:last-child{
border-bottom:none;
}
@media (max-width:575.98px){
.works-item{
grid-template-columns:1fr;
gap:0.25rem;
}
}
@media (max-width:767.98px){
.works-hand{
display:block;
width:fit-content;
margin-top:1.8rem;
margin-left:auto;
margin-right:7rem;
transform-origin:right center;
}
.front-main .works{
padding-bottom:6rem;
}
}

/* PROFILE */
.profile-photo{
position:absolute;
top:-1.5rem;
bottom:-1.5rem;
left:0;
z-index:1;
width:calc(50% - 12rem);
clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
-webkit-mask-image:var(--torn-top),linear-gradient(#000,#000),var(--torn-bottom);
mask-image:var(--torn-top),linear-gradient(#000,#000),var(--torn-bottom);
-webkit-mask-position:left top,left 1.5rem,left bottom;
mask-position:left top,left 1.5rem,left bottom;
-webkit-mask-repeat:repeat-x,no-repeat,repeat-x;
mask-repeat:repeat-x,no-repeat,repeat-x;
-webkit-mask-size:60rem 1.5rem,100% calc(100% - 3rem),60rem 1.5rem;
mask-size:60rem 1.5rem,100% calc(100% - 3rem),60rem 1.5rem;
}
.profile-photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:35% center;
}
.profile svg{
display:block;
width:5rem;
height:auto;
margin-left:auto;
margin-top:-7rem;
}
@media (max-width:767.98px){
.front-main .profile{
padding-top:0;
}
.profile::before,
.profile::after{
top:0;
}
.profile-photo{
position:relative;
top:0;
width:auto;
margin-top:-1.5rem;
margin-bottom:2rem;
clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
-webkit-mask-image:var(--torn-top),linear-gradient(#000,#000);
mask-image:var(--torn-top),linear-gradient(#000,#000);
-webkit-mask-size:60rem 1.5rem,100% calc(100% - 1.5rem);
mask-size:60rem 1.5rem,100% calc(100% - 1.5rem);
}
.profile-photo img{
height:auto;
aspect-ratio:4/3;
}
.profile svg{
margin-top:-5rem;
}
}

/* CONTACT */
.contact-hand{
position:relative;
display:block;
width:fit-content;
margin:3rem 12rem 0 auto;
transform:rotate(-4deg);
transform-origin:right center;
}
.contact-hand svg{
position:absolute;
left:100%;
bottom:2rem;
width:6rem;
height:auto;
margin-left:1rem;
}
.smf-item:has([data-validations*="required"]) .smf-item__label::before{
content:"必須";
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px;
background:var(--momo-red);
color:#fff;
line-height:1;
letter-spacing:.4em;
text-indent:.4em;
flex:0 0 auto;
font-size:1rem;
margin-right:.6rem;
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
}
.snow-monkey-forms-turnstile{
width:fit-content;
margin:0 auto;
}
.contact .smf-progress-tracker__item::before,
.contact .smf-progress-tracker__item::after{
background-color:var(--momo-line);
}
.contact .smf-progress-tracker__item__number{
background-color:var(--momo-line);
}
.contact .smf-progress-tracker__item__text{
color:var(--momo-text);
opacity:.4;
}
.contact .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number{
background-color:var(--momo-red);
}
.contact .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text{
color:var(--momo-red);
opacity:1;
}
.contact .smf-form--business .smf-item{
display:block;
padding:0 0 2.5rem;
border:0;
}
.contact .smf-form--business .smf-item__col{
max-width:none;
padding:0;
background:none;
border:0;
}
.contact .smf-item__label{
margin-bottom:.8rem;
}
.contact .smf-form .smf-text-control__control,
.contact .smf-form .smf-textarea-control__control{
width:100%;
padding:1rem 1.2rem;
background-color:rgba(255,255,255,.7);
border:1px solid var(--momo-line);
box-shadow:none;
font-family:inherit;
color:var(--momo-text);
}
.contact .smf-form .smf-text-control__control:focus,
.contact .smf-form .smf-textarea-control__control:focus{
border-color:var(--momo-red);
box-shadow:0 0 0 .3rem rgba(122,46,43,.15);
outline:0;
}
.contact .smf-form [data-invalid="1"]{
border:2px dashed var(--momo-red);
}
.contact .smf-error-messages{
color:var(--momo-red);
}
.contact .smf-action .smf-button-control__control{
display:inline-flex;
align-items:center;
gap:1rem;
padding:1rem 3rem;
color:#fff;
background:var(--momo-red);
border:0;
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
font-family:inherit;
cursor:pointer;
}
.contact .smf-action .smf-button-control__control::after{
content:"";
width:2.4rem;
height:1.1rem;
background-color:currentColor;
-webkit-mask:url("../img/icon-arrow.svg") no-repeat center / contain;
mask:url("../img/icon-arrow.svg") no-repeat center / contain;
}
.contact .smf-action .smf-button-control__control:hover{
animation:wobble .5s ease;
}
.contact .smf-action [data-action="back"]{
background:transparent;
color:var(--momo-red);
border:2px dashed var(--momo-red);
}
.contact .smf-action [data-action="back"]::after{
order:-1;
transform:scaleX(-1);
}
h3.thanksn{
color:var(--momo-red);
margin-bottom:1.8rem;
font-size:1.7rem;
}

/* PRIVACY */
.ppplink a{
display:inline-block;
text-align:center;
background:rgba(255,255,255,.3);
padding:.6rem 2rem;
border:2px dashed var(--momo-red);
color:var(--momo-red);
border-radius:3.4rem 2.4rem 3.2rem 2.6rem / 2.6rem 3.4rem 2.2rem 3rem;
}
.ppplink a:hover{
animation:wobble .5s ease;
}
.privacy{
position:fixed;
inset:0;
z-index:100;
display:flex;
align-items:center;
justify-content:center;
padding:2rem;
background-color:rgba(28,43,58,.55);
}
.privacy[hidden]{
display:none;
}
.privacy-paper{
position:relative;
width:100%;
max-width:72rem;
}
.privacy-sheet{
max-height:85vh;
overflow-y:auto;
padding:5rem 4rem;
background:#f8f4ec url("../img/paper-bg.webp") repeat;
border-radius:2.4rem .6rem 1.8rem .8rem / .8rem 2rem .6rem 2.6rem;
scrollbar-width:thin;
scrollbar-color:var(--momo-red) transparent;
}
.privacy-sheet section, .privacy-sheet .container{
padding:0;
}
h3.subttl{
font-weight:700;
color:var(--momo-red);
}
.privacy-close{
position:absolute;
top:-2rem;
right:-2rem;
z-index:1;
width:5.5rem;
padding:0;
border:0;
background:none;
cursor:pointer;
transition:transform .3s ease;
}
.privacy-close:hover{
transform:rotate(-12deg);
}
@media (max-width:767.98px){
.privacy-sheet{
padding:4rem 2rem;
}
}

/* FOOTER */
.site-footer{
padding:2rem 0;
text-align:center;
}
.footer-copy{
font-family:"Sawarabi Gothic", sans-serif;
font-size:.9rem;
}