@charset "utf-8";
/*---------------------------------------------------------------------
Common Style
common.css
-----------------------------------------------------------------------
Copyright 2025 (c) linkpath Allrights Reserved.
Coding: Hinako Hayashi
Last Update: 2025.06.12
---------------------------------------------------------------------*/
@media screen and (max-width: 959px) {}
@media screen and (max-width: 482px) {}
/*===========================================================
    root
===========================================================*/
:root {
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --grey: rgb(233, 231, 231);
    --lightgrey: rgb(240, 240, 240);
    --darkgrey: rgb(77, 77, 77);

    --black-transparent: rgba(0, 0, 0, 0.5);
    --white-transparent: rgba(255, 255, 255, 0.5);

    --orange: rgb(236, 101, 0);
    --lightorange: rgb(243, 149, 0);
    --green: rgb(134, 190, 36);
    --lightgreen: rgb(203, 234, 134);

    --blue: rgb(0, 76, 209);
    --pink: rgb(196, 0, 118);
    --red: rgb(196, 0, 0);

    /*border-radius*/
    --box-radius: 2em;
    --box-radius-small: 1em;
    --section-radius: 0.5em;
}
/*===========================================================
    common
===========================================================*/
html ,body ,.wrap {
    margin: 0;
    padding: 0;
    width: 100vw;
    width: 100dvw;
}
html ,body {
    scroll-behavior: smooth;
}

/*===========================================================
    body
===========================================================*/
body {
    font-family: "zen-maru-gothic", sans-serif;
    font-style: normal;
    overflow-x: hidden;
    height: 100vh;
    height: 100dvh;
    position: relative;
    font-size: 0.8rem;
    line-height: 1.5em;
    color: var(--darkgrey);
    background: var(--orange);
}
body::-webkit-scrollbar {
    display: none;
}
a {
    color: var(--darkgrey);
}

/*===========================================================
    font
===========================================================*/
.noto {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-style: normal;
}
.acumin {
    font-family: "acumin-variable", "noto-sans-cjk-jp";
    font-style: normal;
}
.zen {
    font-family: "zen-maru-gothic", sans-serif;
    font-style: normal;
}

/*===========================================================
    base
===========================================================*/
/*background*/
.back-black { background: var(--black);}
.back-white { background: var(--white);}
.back-grey { background: var(--grey);}
.back-lightgrey { background: var(--lightgrey);}
.back-darkgrey { background: var(--darkgrey);}

.back-orange {background: var(--orange);}
.back-lightorange {background: var(--lightorange);}
.back-green {background: var(--green);}
.back-lightgreen {background: var(--lightgreen);}

.back-blue {background: var(--blue);}
.back-pink {background: var(--pink);}
.back-red {background: var(--red);}

/*color*/
.text-black { color: var(--black);}
.text-white { color: var(--white);}
.text-grey { color: var(--grey);}
.text-lightgrey { color: var(--lightgrey);}
.text-darkgrey { color: var(--darkgrey);}

.text-orange { color: var(--orange);}
.text-lightorange { color: var(--lightorange);}
.text-green { color: var(--green);}
.text-lightgreen { color: var(--lightgreen);}

/*path*/
path.white { fill: var(--white);}
path.darkgrey { fill: var(--darkgrey);}
path.orange { fill: var(--orange);}
path.lightorange {fill: var(--lightorange);}
path.green { fill: var(--green);}
path.pink {fill: var(--pink);}