/********************************************************************************
** 基本表示
********************************************************************************/
.container {
	padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/********************************************************************************
** 非表示
********************************************************************************/
@media screen and (max-width: 991px) {
.spnone { display: none}
}
@media screen and (max-width: 1199px) {
.sptbnone { display: none}
}
@media screen and (max-width: 767px) {/*タブレット*/
.ssptbnone { display: none}
}
@media screen and (min-width: 576px) {/*スマホ大*/
.splgnone { display: none}
}
@media screen and (min-width: 768px) {/*タブレット*/
.tbnone { display: none}
}
@media screen and (min-width: 992px) {/*PC （メニュー切り替え）*/
.pcnone { display: none}
}
@media screen and (min-width: 1200px) {/*PC大*/
.xpcnone { display: none}
}

/********************************************************************************
** カラム　PC・スマホ表示順入れ替え
********************************************************************************/
.reversebox { display: flex;}
.reversebox { flex-direction: column; }
.clmorder1 { order: 1;}
.clmorder2 { order: 2;}
@media screen and (min-width: 992px) {/*PC （メニュー切り替え）*/
.reversebox { flex-direction: row;}
.clmorder1 { order: 2;}
.clmorder2 { order: 1;}
}

/********************************************************************************
** テーブル　スマホ横スクロール
********************************************************************************/
.scroll table{ width:100%;}
.scroll{
	overflow: auto;/*tableをスクロールさせる*/
	white-space: nowrap;/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{/*tableにスクロールバーを追加*/
	height: 5px;
}
.scroll::-webkit-scrollbar-track{/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

/********************************************************************************
** margin
********************************************************************************/
/* --------------------------------
top （0 5 10 15 20 30 45 60）
-------------------------------- */
.mt0 { margin-top: 0px;}
.mt5 { margin-top: 5px;}
.mt10 { margin-top: 10px;}
.mt15 { margin-top: 15px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}
.mt45 { margin-top: 45px;}
.mt60 { margin-top: 60px;}
/* --------------------------------
bottom （0 5 10 15 20 30 45 60）
-------------------------------- */
.mb0 { margin-bottom: 0px;}
.mb5 { margin-bottom: 5px;}
.mb10 { margin-bottom: 10px;}
.mb15 { margin-bottom: 15px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}
.mb45 { margin-bottom: 45px;}
.mb60 { margin-bottom: 60px;}
.mb150 { margin-bottom: 150px;}
/* --------------------------------
right （0 5 10 15 20 30 45 60）
-------------------------------- */
.mr0 { margin-right: 0px;}
.mr5 { margin-right: 5px;}
.mr10 { margin-right: 10px;}
.mr15 { margin-right: 15px;}
.mr20 { margin-right: 20px;}
.mr30 { margin-right: 30px;}
.mr45 { margin-right: 45px;}
.mr60 { margin-right: 60px;}
/* --------------------------------
left （0 5 10 15 20 30 45 60）
-------------------------------- */
.ml0 { margin-left: 0px;}
.ml5 { margin-left: 5px;}
.ml10 { margin-left: 10px;}
.ml15 { margin-left: 15px;}
.ml20 { margin-left: 20px;}
.ml30 { margin-left: 30px;}
.ml45 { margin-left: 45px;}
.ml60 { margin-left: 60px;}
/* --------------------------------
top and bottom
-------------------------------- */
.mh0 {
	margin-top: 0px;
	margin-bottom: 0px;
}
.mh5 {
	margin-top: 5px;
	margin-bottom: 5px;
}
.mh10 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.mh15 {
	margin-top: 15px;
	margin-bottom: 15px;
}
.mh20 {
	margin-top: 20px;
	margin-bottom: 20px;
}
.mh30 {
	margin-top: 30px;
	margin-bottom: 30px;
}
.mh45 {
	margin-top: 45px;
	margin-bottom: 45px;
}
.mh60 {
	margin-top: 60px;
	margin-bottom: 60px;
}
/* --------------------------------
right and left
-------------------------------- */
.mw0 {
	margin-right: 0px;
	margin-left: 0px;
}
.mw5 {
	margin-right: 5px;
	margin-left: 5px;
}
.mw10 {
	margin-right: 10px;
	margin-left: 10px;
}
.mw15 {
	margin-right: 15px;
	margin-left: 15px;
}
.mw20 {
	margin-right: 20px;
	margin-left: 20px;
}
.mw30 {
	margin-right: 30px;
	margin-left: 30px;
}
.mw45 {
	margin-right: 45px;
	margin-left: 45px;
}
.mw60 {
	margin-right: 60px;
	margin-left: 60px;
}
.mauto {
	margin-left: auto;
	margin-right: auto;
}

/********************************************************************************
** padding
********************************************************************************/
/* --------------------------------
top （0 5 10 15 20 30 45 60）
-------------------------------- */
.pt0 { padding-top: 0px;}
.pt5 { padding-top: 5px;}
.pt10 { padding-top: 10px;}
.pt15 { padding-top: 15px;}
.pt20 { padding-top: 20px;}
.pt30 { padding-top: 30px;}
.pt45 { padding-top: 45px;}
.pt60 { padding-top: 60px;}
/* --------------------------------
bottom （0 5 10 15 20 30 45 60）
-------------------------------- */
.pb0 { padding-bottom: 0px;}
.pb5 { padding-bottom: 5px;}
.pb10 { padding-bottom: 10px;}
.pb15 { padding-bottom: 15px;}
.pb20 { padding-bottom: 20px;}
.pb30 { padding-bottom: 30px;}
.pb45 { padding-bottom: 45px;}
.pb60 { padding-bottom: 60px;}
/* --------------------------------
right （0 5 10 15 20 30 45 60）
-------------------------------- */
.pr0 { padding-right: 0px;}
.pr5 { padding-right: 5px;}
.pr10 { padding-right: 10px;}
.pr15 { padding-right: 15px;}
.pr20 { padding-right: 20px;}
.pr30 { padding-right: 30px;}
.pr45 { padding-right: 45px;}
.pr60 { padding-right: 60px;}
/* --------------------------------
left （0 5 10 15 20 30 45 60）
-------------------------------- */
.pl0 { padding-left: 0px;}
.pl5 { padding-left: 5px;}
.pl10 { padding-left: 10px;}
.pl15 { padding-left: 15px;}
.pl20 { padding-left: 20px;}
.pl30 { padding-left: 30px;}
.pl45 { padding-left: 45px;}
.pl60 { padding-left: 60px;}
/* --------------------------------
top and bottom
-------------------------------- */
.ph0 {
	padding-top: 0px;
	padding-bottom: 0px;
}
.ph5 {
	padding-top: 5px;
	padding-bottom: 5px;
}
.ph10 {
	padding-top: 10px;
	padding-bottom: 10px;
}
.ph15 {
	padding-top: 15px;
	padding-bottom: 15px;
}
.ph20 {
	padding-top: 20px;
	padding-bottom: 20px;
}
.ph30 {
	padding-top: 30px;
	padding-bottom: 30px;
}
.ph45 {
	padding-top: 45px;
	padding-bottom: 45px;
}
.ph60 {
	padding-top: 60px;
	padding-bottom: 60px;
}
/* --------------------------------
right and left
-------------------------------- */
.pw0 {
	padding-right: 0px;
	padding-left: 0px;
}
.pw5 {
	padding-right: 5px;
	padding-left: 5px;
}
.pw10 {
	padding-right: 10px;
	padding-left: 10px;
}
.pw15 {
	padding-right: 15px;
	padding-left: 15px;
}
.pw20 {
	padding-right: 20px;
	padding-left: 20px;
}
.pw30 {
	padding-right: 30px;
	padding-left: 30px;
}
.pw45 {
	padding-right: 45px;
	padding-left: 45px;
}
.pw60 {
	padding-right: 60px;
	padding-left: 60px;
}
.row .np0 {
	padding-right: 0px;
	padding-left: 0px;
}