/* #############################################################
============================= only =============================
############################################################# */

.onlyPc_inline {
	display: none !important;
}

.onlyPc_block {
	display: none !important;
}

.onlyPc_flex {
	display: none !important;
}

.onlyPc_table {
	display: none !important;
}


.onlyTablet_inline {
	display: none !important;
}

.onlyTablet_block {
	display: none !important;
}

.onlyTablet_flex {
	display: none !important;
}

.onlyTablet_table {
	display: none !important;
}


.onlyMobile_inline {
	display: inline !important;
}

.onlyMobile_block {
	display: block !important;
}

.onlyMobile_flex {
	display: flex !important;
}

.onlyMobile_table {
	display: table !important;
}

/* =============================================================
============================== but =============================
============================================================= */

.butPc_inline {
	display: inline !important;
}

.butPc_block {
	display: block !important;
}

.butPc_flex {
	display: flex !important;
}

.butPc_table {
	display: table !important;
}


.butTablet_inline {
	display: inline !important;
}

.butTablet_block {
	display: block !important;
}

.butTablet_flex {
	display: flex !important;
}

.butTablet_table {
	display: table !important;
}


.butMobile_inline {
	display: none !important;
}

.butMobile_block {
	display: none !important;
}

.butMobile_flex {
	display: none !important;
}

.butMobile_table {
	display: none !important;
}

/* #############################################################
============================= page =============================
############################################################# */

/* =============================================================
============================= whole ============================
============================================================= */

html {
	font-size: 10px;
}

/* #############################################################
========================== pageHeader ==========================
############################################################# */

.pageHeader {
	line-height: 15vmin;
	padding: 30vmin 0;
	font-size: 10vmin;
}

.pageHeader > a {
	letter-spacing: 0.25em;
}

/* #############################################################
============================= nav =============================
############################################################# */

.flexNav {
	font-size: 1.6rem;
}

.flexNav > a {
	flex-basis: 50%;
	height: 20vmin;
	line-height: 20vmin;
	background: url(../Introduction_svg/darkgray_pattern_circle1.svg) #333 no-repeat center / 0% auto;
}

.flexNav > a:hover {
	background: url(../Introduction_svg/lightgray_pattern_circle1.svg) #ccc no-repeat center / 100% auto;
}

.flexNav > .pnl {
	top: -90.15vmin;
	height: 90.15vmin;
}

#pnl2onlyMob, #pnl3onlyMob, #pnl4onlyMob, #pnl5onlyMob, #pnl6onlyMob, #pnl7onlyMob, #pnl8onlyMob, #pnl9onlyMob, #pnl10onlyMob {
	line-height: 90vmin;
	font-size: 10vmin;
	letter-spacing: 0.22em;
}

#pnl1onlyMob {
	line-height: 15vmin;
	padding: 30vmin 0;
	font-size: 10vmin;
	letter-spacing: 0.2em;
}

.flexNav > a:hover + .pnl {
	transform: translateY(90.1vmin);
}

/* =============================================================
=========================== headers ============================
============================================================= */

/* -------------------------------------------------------------
------------------------------ h1 ------------------------------
------------------------------------------------------------- */

.articleHeader {
	font-size: 2.3rem;
}

/* -------------------------------------------------------------
------------------------------ h2 ------------------------------
------------------------------------------------------------- */

.aH2 > label {
	font-size: 2.1rem;
}

/* -------------------------------------------------------------
------------------------------ h3 ------------------------------
------------------------------------------------------------- */

.aH3 > label {
	font-size: 1.9rem;
}

/* -------------------------------------------------------------
------------------------------ h4 ------------------------------
------------------------------------------------------------- */

h4 {
	font-size: 1.4rem;
}

/* -------------------------------------------------------------
------------------------------ h5 ------------------------------
------------------------------------------------------------- */

h5 {
	font-size: 1.2rem;
}

/* =============================================================
=========================== flexBox ============================
============================================================= */

.flexBox {
	font-size: 1rem;
}

.flexBox > small {
	font-size: 0.8rem;
}

/* -------------------------------------------------------------
------------------------- flexBoxMax ---------------------------
------------------------------------------------------------- */

.flexBoxMax > small {
	font-size: 0.8rem;
}

/* -------------------------------------------------------------
-------------------------- videoBox ---------------------------
------------------------------------------------------------- */

.videoBox > .videoLabel {
	font-size: 0.9rem;
}

/* =============================================================
============================ table =============================
============================================================= */

table {
	font-size: 1.2rem;
}

.breakTh th {
	word-break: break-all;
}

/* =============================================================
========================= forOverFlow ==========================
============================================================= */

/* -------------------------------------------------------------
-------------------------- notifBox ----------------------------
------------------------------------------------------------- */

.articleBody > .contentBox > .notifBox {
	font-size: 1rem;
}

/* =============================================================
============================ form ==============================
============================================================= */

.formBox {
	padding: 3vmin;
	flex-wrap: wrap;
}

.formLabel {
	max-width: inherit;
	display: flex;
	align-items: center;
	font-size: 1.2rem;
}

.fLabel {
	padding-left: 1.5rem;
	background: url(../Introduction_svg/white_nikukyuu.svg) no-repeat;
	background-size: 1.1rem;
}

.formInput {
	margin: 2.5vmin 0 1vmin;
	padding: 3vmin 4vmin;
	flex: inherit;
	font-size: 1.1rem;
}

.formTextarea {
	margin: 2.5vmin 0 1vmin;
	padding: 3vmin 4vmin;
	flex: inherit;
	font-size: 1.2rem;
}

.formBtn {
	margin: 10vmin auto 3vmin;
	padding: 1vmin 15vmin;
	font-size: 1.3rem;
}

/* #############################################################
=========================== padding ============================
############################################################# */
/* #############################################################
========================== font-size ===========================
############################################################# */

/* =============================================================
============================== p ===============================
============================================================= */

.articleBody > .contentBox > p {
	padding: 0 5vmin 3vmin;
	font-size: 1.2rem;
}

/* -------------------------------------------------------------
--------------------------- colorBox ---------------------------
------------------------------------------------------------- */

.colorBox > p {
	padding: 3.5vmin 3.5vmin 2vmin;
	font-size: 1.2rem;
}

/* -------------------------------------------------------------
--------------------------- extraBox ---------------------------
------------------------------------------------------------- */

.extraBox > p {
	padding: 3.5vmin 3.5vmin 2vmin;
	font-size: 1.2rem;
}

/* -------------------------------------------------------------
-------------------------- h3TabBody ---------------------------
------------------------------------------------------------- */

/* ===================== h3TBoxTabLabel ===================== */

.aH3 > .contentBox > .tabBody > .boxTab {
	font-size: 1.4rem;
}

/* =============================================================
=========================== flexBox ============================
============================================================= */

/* ====================== flex30%@butMobile ================= */

/* ----------------------- flex45%@Mobile ------------------- */

.flexPart > p {
	flex-basis: 47.5%;
}

/* ====================== flex45%@butMobile ================= */

/* ----------------------- flex95%@Mobile ------------------- */

.flexPart > .videoBox {
	flex-basis: 95%;
	margin: 3%;
}

/* ====================== flex70%@butMobile ================= */

/* ----------------------- flex95%@Mobile ------------------- */

.flexPart > .pc70mob95 {
	flex-basis: 95%;
	margin: 3%;
}

/* #############################################################
========================== pageFooter ==========================
############################################################# */

small {
	font-size: 0.8rem;
}