@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * RESET...............リセット
 * FONT-FACE...........ブランドフォントの設定
 * GLOBAL-VARIABLES....グローバル変数
 * ELEMENTS............要素
 */





/*------------------------------------*\
    $RESET
\*------------------------------------*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after { box-sizing: border-box }

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
}

textarea {
    form-sizing: content;
    white-space: revert;
}

:focus {
    outline: none;
}

a, button, select {
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #feffc7 inset !important;
    -webkit-text-fill-color: inherit !important;
}

input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input:where(:not([type=datetime]):not([type=date]):not([type=month]):not([type=week]):not([type=time]):not([type=datetime-local]))::-webkit-calendar-picker-indicator {
    display: none !important;
}





/*------------------------------------*\
    $GLOBAL-VARIABLES
\*------------------------------------*/
:root {
    /**
     * Color set
     */
    --gray : gray;
    --red  : #f00;
    --green: #0f0;
    --blue : #00f;

    /**
     * Font size
     */
    --font10: clamp(0.625rem, 0rem + 2.666vw, 0.853rem);
    --font11: clamp(0.688rem, 0rem + 2.934vw, 0.939rem);
    --font12: clamp(0.75rem, 0rem + 3.2vw, 1.024rem);
    --font13: clamp(0.813rem, 0rem + 3.466vw, 1.109rem);
    --font14: clamp(0.875rem, 0rem + 3.734vw, 1.195rem);
    --font15: clamp(0.938rem, 0rem + 4vw, 1.28rem);
    --font16: clamp(1rem, 1.56vw + 0.63rem, 1.37rem);
    --font18: clamp(1.125rem, 0rem + 4.8vw, 1.536rem);
    --font20: clamp(1.25rem, 0rem + 5.334vw, 1.707rem);
    --font24: clamp(1.5rem, 0rem + 6.4vw, 2.048rem);
    --font32: clamp(2rem, 0rem + 8.534vw, 2.731rem);
    --font48: clamp(3rem, 0rem + 12.8vw, 4.096rem);

    /**
     * Size
     * ※ 上限は512pxに対し
     */
    --px1 : clamp( 1px, 100vw *  (1 / 375),  1.365px);
    --px2 : clamp( 2px, 100vw *  (2 / 375),  2.731px);
    --px3 : clamp( 3px, 100vw *  (3 / 375),  4.096px);
    --px4 : clamp( 4px, 100vw *  (4 / 375),  5.461px);
    --px5 : clamp( 5px, 100vw *  (5 / 375),  6.827px);
    --px6 : clamp( 6px, 100vw *  (6 / 375),  8.192px);
    --px7 : clamp( 7px, 100vw *  (7 / 375),  9.557px);
    --px8 : clamp( 8px, 100vw *  (8 / 375), 10.923px);
    --px9 : clamp( 9px, 100vw *  (9 / 375), 12.288px);
    --px10: clamp(10px, 100vw * (10 / 375), 13.653px);
    --px11: clamp(11px, 100vw * (11 / 375), 15.019px);
    --px12: clamp(12px, 100vw * (12 / 375), 16.384px);
    --px13: clamp(13px, 100vw * (13 / 375), 17.749px);
    --px14: clamp(14px, 100vw * (14 / 375), 19.115px);
    --px15: clamp(15px, 100vw * (15 / 375), 20.48px);
    --px16: clamp(16px, 100vw * (16 / 375), 21.845px);
    --px17: clamp(17px, 100vw * (17 / 375), 23.211px);
    --px18: clamp(18px, 100vw * (18 / 375), 24.576px);
    --px19: clamp(19px, 100vw * (19 / 375), 25.941px);
    --px20: clamp(20px, 100vw * (20 / 375), 27.307px);
    --px21: clamp(21px, 100vw * (21 / 375), 28.672px);
    --px22: clamp(22px, 100vw * (22 / 375), 30.037px);
    --px23: clamp(23px, 100vw * (23 / 375), 31.403px);
    --px24: clamp(24px, 100vw * (24 / 375), 32.768px);
    --px25: clamp(25px, 100vw * (25 / 375), 34.133px);
    --px26: clamp(26px, 100vw * (26 / 375), 35.499px);
    --px27: clamp(27px, 100vw * (27 / 375), 36.864px);
    --px28: clamp(28px, 100vw * (28 / 375), 38.229px);
    --px30: clamp(30px, 100vw * (30 / 375), 40.96px);
    --px32: clamp(32px, 100vw * (32 / 375), 43.691px);
    --px34: clamp(34px, 100vw * (34 / 375), 46.421px);
    --px35: clamp(35px, 100vw * (35 / 375), 47.787px);
    --px37: clamp(37px, 100vw * (37 / 375), 50.517px);
    --px38: clamp(38px, 100vw * (38 / 375), 51.883px);
    --px39: clamp(39px, 100vw * (39 / 375), 53.248px);
    --px40: clamp(40px, 100vw * (40 / 375), 54.613px);
    --px43: clamp(43px, 100vw * (43 / 375), 58.709px);
    --px44: clamp(44px, 100vw * (44 / 375), 60.075px);
    --px45: clamp(45px, 100vw * (45 / 375), 61.44px);
    --px48: clamp(48px, 100vw * (48 / 375), 65.536px);
    --px50: clamp(50px, 100vw * (50 / 375), 68.267px);
    --px51: clamp(51px, 100vw * (51 / 375), 69.632px);
    --px52: clamp(52px, 100vw * (52 / 375), 70.337px);
    --px66: clamp(66px, 100vw * (66 / 375), 90.112px);
    --px70: clamp(70px, 100vw * (70 / 375), 95.573px);
    --px74: clamp(74px, 100vw * (74 / 375), 101.035px);
    --px76: clamp(76px, 100vw * (76 / 375), 103.765px);
    --px86: clamp(86px, 100vw * (86 / 375), 117.419px);

    /**
     * Types of easing
     */
    --linear        : cubic-bezier(0.250, 0.250, 0.750, 0.750);
    --easeOutQuart  : cubic-bezier(0.165, 0.84,  0.44,  1    );

}





/*------------------------------------*\
    $ELEMENTS
\*------------------------------------*/
html {
    height: -webkit-fill-available;
    background-color: white;
    color: black;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 100%;
    font-weight: 700;
    scroll-behavior: smooth;
    /* iPhone Safariの横向きで基本フォントサイズ拡大を防ぐ */
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
}

body {
    max-width: 512px;
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
}

picture, img {
    display: block;
    max-width: 100%;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700 }

strong { font-weight: 700 }

a, button, label {
    cursor: pointer;
}