@charset "UTF-8";
/*** The new CSS reset - version 1.11.1 (last updated 24.10.2023) ***/
/* https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css */

*: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}

/* fix by Yoshinori Hirama */
:root{
	/* color setting */
	--c_fb     : #1877F2; /* color for facebook */
	--c_tx     : #1A1A1A; /* color for x-twitter */
	--c_ig     : #833AB4; /* color for instagram */
	--c_ln     : #00C300; /* color for LINE */
	--c_black  : #161716;
	--c_gray   : #2d2f2d;
	--c_white  : #f8f4f1;
	--c_success: #42ba96;
	--c_warning: #ffc107;
	--c_danger : #df4759;
	--c_primary: #467fd0;
	--c_info   : #5bc0de;

	/* default setting */
	--w_full   : 100dvw;    /* full width */
	--h_full   : 100dvh;    /* full height */
	--m_default: 10px;      /* default margins for between elements */
	--m_min    : 5px;       /* min margins for between elements */
	/* header & footer setting */
	--h_header : 64px;      /* height for header */
	--h_footer : 45px;      /* height for footer */
	--p_tb_hf  : 5px;       /* top-bottom padding for header & footer*/
	/* main setting */
	--w_main_pc: 1200px;     /* width for main (default pc size) */
	--m_main_pc: auto;      /* left-right margin for main (default pc size) */
	--m_main_sp: 0;         /* left-right margin for main (mobile size) */
	/* font setting */
	--s_d_font : 16px;      /* default font size */
	/* button setting */
	--r_button : 7px;       /* radius for button */
	/* content width */
	--w_triple: 30%;
	--w_double: 46%;
	--w_single: 100%;

	/* flag for smart phone */
	@media(1200px <  width)        { --is_triple: true; }
	@media(800px < width <= 1200px){ --is_double: true; }
	@media(width <=  800px)        { --is_single: true; }
	@media screen and (orientation: landscape) { --is_h: true; } /* horizontal view */
	@media screen and (orientation: portrait)  { --is_v: true; } /* vertical view */
}

*{
	margin : 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold !important; }
html {
	container-type: inline-size;
	min-width     : var(--w_full);
	min-height    : var(--h_full);
	overflow-x    : hidden;

	> body {
		background: var(--c_gray);
		position  : relative;

		/* header and footer design */
		> header {
			height: var(--h_header);
			top   : 0;
		}

		> footer {
			bottom: 0;
			height: var(--h_footer);
		}

		> header,
		> footer {
			left      : 0;
			min-width : var(--w_full);
			position  : fixed;
			text-align: center;
		}
		/* main design */
		> main {
			background    : var(--c_white);
			min-height    : var(--h_full);
			height        : 100%;
			padding-top   : Calc(var(--h_header) + var(--m_default));
			padding-bottom: Calc(var(--h_footer) + var(--m_default));

			/* size fix for pc */
			@container style(--is_triple) {
				margin-left : var(--m_main_pc);
				margin-right: var(--m_main_pc);
				width       : var(--w_main_pc);
			}

			/* size fix for smart phone */
			@container style(--is_double) or style(--is_single) {
				margin-left : var(--m_main_sp);
				margin-right: var(--m_main_sp);
				width       : var(--w_full);
			}
		}
	}
}