@charset "utf-8";

/*=============================================================
	root
=============================================================*/
:root {
--clr-primary: #0278C7;
--clr-primary-light: #57C3E8;
--clr-primary-dark: #0E2B5C;
--clr-accent:#F09DA5;

--clr-bg:#FBF5F0;
--clr-bg-blue:#EFFAFD;

--font-en:'YakuHanJP', 'Outfit', serif;

--fs-sm: 1.2rem; 
--fs-base: clamp(1.4rem, 1.317rem + 0.221vw, 1.6rem); 
--fs-md: clamp(1.6rem, 1.434rem + 0.442vw, 2.0rem); 
--fs-lg: clamp(2.0rem, 1.834rem + 0.442vw, 2.4rem); 
--fs-xl: clamp(2.4rem, 2.069rem + 0.884vw, 3.2rem);
--fs-2xl: clamp(2.8rem, 2.303rem + 1.326vw, 4.0rem);

--fw-base: 400;
--fw-md:600;
--fw-bold:900;

--lh-tight:1.2em;
--lh-base: 1.6em;
--lh-loose:2.0em;

--sp-sm: 16px;
--sp-md: 24px;
--sp-base: 32px;
--sp-lg: 64px;
--sp-xl: 96px;

--radius-sm: 4px;
--radius-md: 8px;
--radius-lg:16px;
--radius-xl:24px;
--radius-full: 9999px;

/* ── シャドウ ── */
--shadow-sm:0 2px 8px var(--color-shadow);
--shadow-md:0 4px 20px var(--color-shadow);
--shadow-lg:0 8px 40px rgba(26,42,74,0.18);
--shadow-card: 0 2px 12px rgba(26,42,74,0.08);

/* ── トランジション ── */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
--transition-smooth: 0.6s cubic-bezier(0.16,1,0.3,1);

/* ── レイアウト ── */
--content-max-width: 480px;
--sidebar-width: 220px;
--header-height-sp:56px;
--header-height-pc:64px;
}
/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: YakuHanJP, "Helvetica Neue", Arial,"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif;
	font-optical-sizing: auto;
	color: #333;
	background: #FFF;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: rgba(51,51,51,1.0); text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: rgba(51,51,51,0.64); text-decoration:none;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}
input[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
figure{ padding: 0; margin: 0;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}