@charset "utf-8";
/*---------------------------------------------------------------------
Common Style
common.css
-----------------------------------------------------------------------
Copyright 2026 (c) linkpath Allrights Reserved.
Created: linkpath
Coding: Hinako Hayashi
Last Update: 2026.02.25
---------------------------------------------------------------------*/
@media screen and (max-width: 959px) {}
@media screen and (max-width: 482px) {}
/*===========================================================
    root
===========================================================*/
:root {
    --color-main: rgb(242, 175, 214);
    --color-base: rgb(255, 255, 255);
    --color-accent: rgb(255, 146, 185);
    --color-point: rgb(239, 120, 173);

    --color-normal: rgb(112, 98, 107);

    --color-red: rgb(249, 135, 151);
    --color-blue: rgb(156, 215, 222);

    --color-main__transparent: rgba(242, 175, 214, 0.5);
    --color-base__transparent: rgba(255, 255, 255, 0.5);
    --color-accent__transparent: rgba(255, 146, 185, 0.3);
    --color-point__transparent: rgba(239, 120, 194, 0.5);

    --color-grad__purple: rgb(238, 134, 168), rgb(192, 188, 221);
    --color-grad__purple__pastel: rgba(238, 134, 168, 0.3), rgba(192, 188, 221, 0.3);
    --color-grad__purple__pastel__2: rgba(238, 134, 168, 0.75), rgba(192, 188, 221, 0.75);
    --color-grad__pink: rgb(255, 131, 172), rgb(255, 208, 214);
    --color-grad__pink__pastel: rgba(255, 131, 172, 0.3), rgba(255, 208, 214, 0.3);

    --color-grad__red: rgb(237, 102, 109), rgb(255, 208, 214);
    --color-grad__blue: rgb(156, 215, 222), rgb(238, 208, 228);
}


/*===========================================================
    common
===========================================================*/
html ,body ,.wrap {
    margin: 0;
    padding: 0;
    width: 100vw;
    width: 100dvw;
}
html ,body {
    scroll-behavior: smooth;
}

/*===========================================================
    body
===========================================================*/
body {
    font-family: "gotti-variable", "Zen Maru Gothic";
    font-style: normal;
    font-variation-settings: "wght" 400;
    overflow-x: hidden;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.5em;
    background: var(--color-base);
}
body, a {
    color: var(--color-normal);
}
/* body::-webkit-scrollbar {
    display: none;
} */

/*===========================================================
    font
===========================================================*/
.maru {
    font-family: "Zen Maru Gothic", sans-serif;
    font-style: normal;
}
.mega {
    font-family: "vdl-megamarupop-futoline", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.mega-shadow {
    font-family: "vdl-megamarupop-shadow", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.gotti {
    font-family: "gotti-variable", sans-serif;
    font-variation-settings: "wght" 400;
}
.bimbo {
    font-family: "bimbo-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*===========================================================
    base
===========================================================*/
/* width */
.width-1350 {
    max-width: 1350px;
    width: 90%;
    margin: 0 auto;
}

/*background*/
.back-main { background: var(--color-main);}
.back-base { background: var(--color-base);}
.back-accent { background: var(--color-accent);}
.back-point { background: var(--color-point);}
.back-main__transparent { background: var(--color-main__transparent);}
.back-base__transparent { background: var(--color-base__transparent);}
.back-accent__transparent { background: var(--color-accent__transparent);}
.back-point__transparent { background: var(--color-point__transparent);}
.back-red { background: var(--color-red);}
.back-blue { background: var(--color-blue);}

/* background grad */
.back-grad__aurora__pink {
	background-blend-mode: hue, color, overlay, screen;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		    radial-gradient(ellipse at 80% 5%, #d9beec 0%, rgb(255 40 184 / 0%) 30%),
		    radial-gradient(ellipse at bottom left, #ffbdd6 0%, rgb(255 189 214 / 31%) 60%),
		    linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #ffe5ec 100%),
		    linear-gradient(82deg, #ffbdd6 0%, #d9beec 27%, #ffbdd6 74%, #ffd8ea 100%);
}
.back-grad__aurora__purple {
	background-blend-mode: hue, color, overlay, screen;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		    radial-gradient(ellipse at 80% 5%, #caa6df 0%, rgb(255 40 184 / 0%) 30%),
		    radial-gradient(ellipse at bottom left, #ffbdea 0%, rgb(255 189 214 / 31%) 60%),
		    linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #ffe5ec 100%),
		    linear-gradient(82deg, #ffbdea 0%, #caa6df 27%, #ffbdea 74%, #ffd8ea 100%);
}
.back-grad__aurora__red {
	background-blend-mode: hue, color, overlay, screen;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		    radial-gradient(ellipse at 80% 5%, rgb(249, 135, 151) 0%, rgb(255 40 184 / 0%) 30%),
		    radial-gradient(ellipse at bottom left, #ffbdd6 0%, rgb(255 189 214 / 31%) 60%),
		    linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #ffe5ec 100%),
		    linear-gradient(82deg, #ffbdd6 0%, rgb(249, 135, 151) 27%, #ffbdd6 74%, #ffd8ea 100%);
}
.back-grad__aurora__blue {
	background-blend-mode: hue, color, overlay, screen;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		    radial-gradient(ellipse at 80% 5%, rgb(156, 215, 222) 0%, rgb(255 40 184 / 0%) 30%),
		    radial-gradient(ellipse at bottom left, #ffbdd6 0%, rgb(255 189 214 / 31%) 60%),
		    linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #ffe5ec 100%),
		    linear-gradient(82deg, #ffbdd6 0%, rgb(156, 215, 222) 27%, #ffbdd6 74%, #ffd8ea 100%);
}
/* 左から右へ */
.back-grad__lr__purple {
    background: linear-gradient(90deg, var(--color-grad__purple));
}
.back-grad__lr__purple__pastel {
    background-color: var(--color-base);
    background-image: linear-gradient(90deg, var(--color-grad__purple__pastel));
}
.back-grad__lr__pink {
    background: linear-gradient(90deg, var(--color-grad__pink));
}
.back-grad__lr__pink__pastel {
    background-color: var(--color-base);
    background-image: linear-gradient(90deg, var(--color-grad__pink__pastel));
}
.back-grad__lr__red {
    background: linear-gradient(90deg, var(--color-grad__red));
}
.back-grad__lr__blue {
    background: linear-gradient(90deg, var(--color-grad__blue));
}

/* 左上から右下 */
.back-grad__tb__purple__pastel {
    background-color: var(--color-base);
    background-image: linear-gradient(135deg, var(--color-grad__purple__pastel__2));
}

/* back-check */
.back-check {
    background-color: #ffffff;
    background-image: linear-gradient(90deg, #ef78c21a 2px, transparent 2px), linear-gradient(#ef78c21a 2px, transparent 2px);
    background-position: 10px 10px;
    background-size: 42px 42px;
}

/* back-stripe */
.back-stripe {
    background-image: repeating-linear-gradient(90deg, #fdf1f8, #fdf1f8 30px, #fce8f4 30px, #fce8f4 60px);
}


/* border */
.border-main { border: solid 2px var(--color-main);}
.border-base { border: solid 2px var(--color-base);}
.border-accent { border: solid 2px var(--color-accent);}
.border-point { border: solid 2px var(--color-point);}


/*color*/
.text-main { color: var(--color-main);}
.text-base { color: var(--color-base);}
.text-accent { color: var(--color-accent);}
.text-point { color: var(--color-point);}
.text-normal { color: var(--color-normal);}
.text-red { color: var(--color-red);}
.text-blue { color: var(--color-blue);}

.text-grad__purple {
    background: linear-gradient(180deg, var(--color-grad__purple));
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
    text-box: unset;
}
.text-grad__pink {
    background: linear-gradient(135deg, var(--color-grad__pink));
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
    text-box: unset;
}


/* font weight */
.weight-300 { font-weight: 300;}
.weight-400 { font-weight: 400;}
.weight-500 { font-weight: 500;}
.weight-600 { font-weight: 600;}
.weight-700 { font-weight: 700;}
.weight-800 { font-weight: 800;}
.weight-900 { font-weight: 900;}

/*svg fill*/
svg path.main, svg polygon.main, svg circle.main { fill: var(--color-main);}
svg path.base, svg polygon.base, svg circle.base { fill: var(--color-base);}
svg path.accent, svg polygon.accent, svg circle.accent { fill: var(--color-accent);}
svg path.point, svg polygon.point, svg circle.point { fill: var(--color-point);}
svg path.red, svg polygon.red, svg circle.red { fill: var(--color-red);}
svg path.blue, svg polygon.blue, svg circle.blue { fill: var(--color-blue);}

/* shadow */
.shadow-main { box-shadow: 2px 2px 0 var(--color-main);}
.shadow-base { box-shadow: 2px 2px 0 var(--color-base);}
.shadow-accent { box-shadow: 2px 2px 0 var(--color-accent);}
.shadow-point { box-shadow: 2px 2px 0 var(--color-point);}
.shadow-red { box-shadow: 2px 2px 0 var(--color-red);}
.shadow-blue { box-shadow: 2px 2px 0 var(--color-blue);}

/* shadow border */
.shadow-border {
    position: relative;
    padding-bottom: 1em;
}
.shadow-border::before {
    content: "";
    width: 100%;
    height: 1em;
    background-image: repeating-linear-gradient(125deg, #edcce5, #edcce5 2px, transparent 2px, transparent 7px);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

/* wave-parts */
article:has(.wave-parts),
main:has(.wave-parts) {
    position: relative;
    z-index: 2;
}
.wave-parts {
    width: 100%;
    height: 15px;
    position: absolute;
}
.wave-parts.pc {
    display: none;
}
.wave-parts path {
    width: 100%;
}
.wave-border__top {
    filter: drop-shadow(0 -3px 0 var(--color-main));
    left: 0;
    top: -14px;
}
.wave-border__bottom {
    filter: drop-shadow(0 -3px 0 var(--color-main));
    transform: rotate(180deg);
    left: 0;
    bottom: -14px;
}
.wave-shadow__top {
    filter: drop-shadow(0 -3px 2px var(--color-main__transparent));
    left: 0;
    top: -14px;
}
.wave-shadow__bottom {
    filter: drop-shadow(0 -3px 2px var(--color-main__transparent));
    transform: rotate(180deg);
    left: 0;
    bottom: -14px;
}
@media screen and (min-width: 960px) {
.wave-parts.pc {
    display: block;
}
.wave-parts.sp {
    display: none;
}
}