/* ==========================================================
   BASE
   北村千佳 Official Website
========================================================== */

/* ==========================================================
   Variables
========================================================== */

:root{
    --bg:#FFFFFF;
    --bg-soft:#F8F6F4;

    --ink:#332F2C;
    --ink-soft:#726C67;
    --black:#000000;

    --magenta:#E93861;
    --pink:#FBE7EA;
    --pink-deep:#FFD3E4;
    --line:#FFD3E4;

    --radius-s:16px;
    --radius-m:24px;
    --radius-l:32px;

    --shadow:0 18px 40px rgba(0,0,0,.06);

    --transition:.25s ease;
}

/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--ink);
    font-family:"IBM Plex Sans JP",sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:2;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* ==========================================================
   Typography
========================================================== */

h1,h2,h3,h4{
    font-family:'Noto Sans JP', sans-serif;
    font-weight:900;
}

p{
    margin:0;
}

strong{
    font-weight:700;
}

small{
    font-size:.85em;
}

/* ==========================================================
   Common Elements
========================================================== */

img{
    display:block;
    max-width:100%;
    height:auto;
}


a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition);
}

button{
    border:none;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

ul,
ol{
    list-style:none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/* ==========================================================
   Utility
========================================================== */

.wrap{
    width:min(100%,960px);
    margin-inline:auto;
    padding-inline:28px;
}

section{
    position:relative;
}

.pc-only{
    display:block;
}

.sp-only{
    display:none;
}
