@charset "UTF-8";

/**************************************************************
The new CSS reset - version 1.11.2 (last updated 15.11.2023)
GitHub page: https://github.com/elad2412/the-new-css-reset
//MEMO customised 
added html,body{width:100%;height:100%}
added img{max-width:100%;height:auto}
**************************************************************/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

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

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

a,
button {
	cursor: revert;
}

ol,
ul,
menu,
summary {
	list-style: none;
}

img {
	max-inline-size: 100%;
	max-block-size: 100%;
}

table {
	border-collapse: collapse;
}

input,
textarea {
	-webkit-user-select: auto;
}

textarea {
	white-space: revert;
}

meter {
	-webkit-appearance: revert;
	appearance: revert;
}

:where(pre) {
	all: revert;
	box-sizing: border-box;
}

::placeholder {
	color: unset;
}

:where([hidden]) {
	display: none;
}

:where([contenteditable]:not([contenteditable="false"])) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	-webkit-user-select: auto;
}

:where([draggable="true"]) {
	-webkit-user-drag: element;
}

:where(dialog:modal) {
	all: revert;
	box-sizing: border-box;
}

::-webkit-details-marker {
	display: none;
}

html,
body {
	width: 100%;
	height: 100%;
	padding: 0 !important;
	font-family: var(--heading-font-family);
}

img {
	max-width: 100%;
	height: auto
}
/**************************************************************
* CSS vars
**************************************************************/
:root {
    --base-font-size-row-value: 22;
    /* 13px on 375px screen size */
    
}

@media all and (min-width: 1024px) {
    :root {
        --base-font-size-row-value: 14;
        /* 14px */
    }
}
/**************************************************************
* Base
**************************************************************/
html {
    font-size: 5.848vw;
    /* arbitrary & magic value to keep ratio with desktop "--base-font-size-row-value"'s value */
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

body {
    position: relative;
    overflow-x: hidden;
    min-width: 320px;
    font-family: var(--base-font-family);
    letter-spacing: 0;
    color: var(--foreground-color, #000);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color:  #fff;
    font-weight: 500;
}

@media (min-width: 768px) and (max-width: 1023px) {
    html {
        /* font-size: 1.5vw; */
        font-size: clamp(14px, 2vw, 16px);
        /* arbitrary value set between both mobile & desktop values  */
    }
}

@media (min-width: 1024px) {
    html {
        /* font-size: 1.25vw; */
        font-size: clamp(14px, 1vw, 16px);
        /* table / laptop */
    }
}

@media (min-width: 1366px) {
    html {
        /* font-size: 0.73vw; */
        font-size: clamp(14px, 0.73vw, 16px);
        /* wide desktop */
    }
}

header,
footer,
main {
    font-size: calc(14/var(--base-font-size-row-value) * 1rem);
}

@media (min-width: 768px) {
    header,
    footer,
    main {
        font-size: calc(16/var(--base-font-size-row-value) * 1rem);
    }
}

li,
dt,
dd {
    line-height: 1.5;
}

*::before,
*::after {
    pointer-events: none;
}
/**************************************************************
* カスタムプロパティ
**************************************************************/
:root {
	--white: #FFFFFF;
	--text-primary-color: #000;
	--text-secondary-color: #666666;
	--text-tertiary-color: #999999;
	--text-quaternary-color: #DDDDDD;
	--chart-line-color: #CCCCCC;
	--bg-color: #FFFFFF;
	--bg-sub-color: #F2F2F2;

	--primary-color: #3689C3;
	--primary-secondary-color: #1D4285;
	--primary-tertiary-color: #8EA1C2;
	--primary-bg-color: #EAF8FE;
	--primary-dark-color: #0686B8;

	--secondary-color: #3FB8CA;

	--accent-color-1: #E87493;
	--accent-color-2: #FFE57E;


	--conversion-color: #FF62B0;
	--conversion-secondary-color:#FFAFD7;
	--conversion-tertiary-color:#FFF0F7;
	--conversion-dark-color: #CC4E8C;

	--base-font-family: 'Zen Kaku Gothic New', sans-serif;
}

a,button {
	cursor: pointer;
}