@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * RESET...............リセット
 * 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 #fff 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
     */
    --primaryColor  : #1d569c;
    --secondaryColor: #f3f9fb;
    --accentColor   : #ffea00; 
    --pastelColor1  : #2bb991;
    --pastelColor2  : #1c85b8;
    --pastelColor3  : #fe960b;

    /**
     * Font set
     */
    --font: 'Noto Sans JP', sans-serif;

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

    /**
     * Border radius
     */
    --borderRadius: clamp(25px, 100vw * (25 / 375), 50px);

}





/*------------------------------------*\
    $ELEMENTS
\*------------------------------------*/
html {
    height: -webkit-fill-available;
    background-color: white;
    color: var(--primaryColor);
    font-family: var(--font);
    font-size: 62.5%;
    font-weight: 700;
    scroll-behavior: smooth;
    /* iPhone Safariの横向きで基本フォントサイズ拡大を防ぐ */
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
    word-break: auto-phrase; /* 日本語自動折返し */
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

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

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

strong { font-weight: 700 }

mark {
    background-image: linear-gradient(var(--accentColor), var(--accentColor));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 50%;
}

@media (any-hover:hover) {
    a {
        transition: opacity 1s var(--easeOutQuart);
    }
    a:hover {
        opacity: .6;
    }
}

input[type=text], input[type=email], input[type=tel], textarea {
    width: 100%;
    height: 50px;
    padding-inline: 1em;
    border: 1px solid var(--primaryColor);
    border-radius: 5px;
    background-color: white;
    font-size: 1.6rem;
    line-height: 3;
}
textarea {
    resize: none;
    height: 240px;
    padding-top: .625em;
    line-height: 1.75;
}