/* ==========================================================

	デザインを等倍で再現するための倍率
    デザイン値 × var(--design-px)

========================================================== */
html {
    container-type: inline-size;
}


/* ================ 基準幅指定 ================*/
/* PC・タブレット：1400px幅基準 */
:root {
    --design-base-width: 1400;
}
 /* スマホ：400px幅基準 */
@media (max-width: 768px) {
    :root {
        --design-base-width: 400;
    }
}

/* ================ px計算用関数 ================*/
:root {
    --design-px: calc(100cqw / var(--design-base-width));
}


body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(16 * var(--design-px));
    color: #3E3A39;
}

img { max-width: 100%;}



/* ==========================================================

	a

========================================================== */
a {
    color: inherit;
    text-decoration: none;
}

a.a_default {
    color: #06c;
    text-decoration: underline;
}



/* ==========================================================

	非表示

========================================================== */
/* PC */
@media screen and (width >= 768px) {
    .pc_non { display: none;}
}

/* SP */
@media screen and (width < 768px) {
    .sp_non { display: none;}
}



/* ==========================================================

	ボタン

========================================================== */
[class^="btn-sc"] {
    border-radius: calc(1px / 0);
    display: flex;
    justify-content: center; align-items: center;
}

.btn-sc_navy {
    background: #003067;
    color: #fff;
}

.btn-sc_navy:hover { background: #806D3E;}
.btn-sc_navy:active { background: #A6997A;}

.btn-sc_bd-navy {
    border: 1px solid #003067;
    color: #003067;
    background: #fff;
}

.btn-sc_bd-navy:hover { border: 1px solid ; color: #806D3E;}
.btn-sc_bd-navy:active { border: 1px solid #A6997A; color: #A6997A;}




/* ==========================================================

	container

========================================================== */
[class^="cnt_"] { margin-inline: auto;}

/* PC */
@media screen and (width >= 768px) {
	.cnt_1280 { width: calc(1280 * var(--design-px));}
    .cnt_1100 { width: calc(1100 * var(--design-px));}
    .cnt_1120 { width: calc(1120 * var(--design-px));}
}

/* SP */
@media screen and (width < 768px) {
	.cnt_1280,
    .cnt_1100,
    .cnt_1120 { width: calc(360 * var(--design-px));}

}