/*幅と高さの定義*/
.width-max{width:100%;}
.width-max-1px{width:calc(100% - 1px);}
.width-half{width:50%;}
.width-half-1px{width:calc((100% / 2) - 1px);}
.width-3div{width:calc(100% / 3);}
.width-4div{width:calc(100% / 4);}

.height-max{height:100%;}
.height-max-1px{height:calc(100% - 1px);}
.height-half{height:50%;}
.height-half-1px{height:calc((100% / 2) - 1px);}
.height-3div{height:calc(100% / 3);}
.height-4div{height:calc(100% / 4);}

/* 文字サイズに関する定義 */
/*指定方法：px*/
.font-size-8px{font-size:8px;}
.font-size-9px{font-size:9px;}
.font-size-10px{font-size:10px;}
.font-size-11px{font-size:11px;}
.font-size-12px{font-size:12px;}
.font-size-14px{font-size:14px;}
.font-size-16px{font-size:16px;}
.font-size-18px{font-size:18px;}
.font-size-20px{font-size:20px;}
.font-size-22px{font-size:22px;}
.font-size-24px{font-size:24px;}
.font-size-28px{font-size:28px;}
.font-size-32px{font-size:32px;}
.font-size-36px{font-size:36px;}
.font-size-40px{font-size:40px;}
.font-size-48px{font-size:48px;}
.font-size-56px{font-size:56px;}
.font-size-64px{font-size:64px;}
.font-size-72px{font-size:72px;}

/*指定方法：em*/
.font-size-0_5em{font-size:0.5em;}
.font-size-1_0em{font-size:1em;}
.font-size-1_5em{font-size:1.5em;}
.font-size-2_0em{font-size:2em;}
.font-size-2_5em{font-size:2.5em;}
.font-size-3_0em{font-size:3em;}
.font-size-3_5em{font-size:3.5em;}
.font-size-4_0em{font-size:4em;}
.font-size-4_5em{font-size:4.5em;}
.font-size-5_0em{font-size:5em;}

/*文字色関連*/
.font-color-black{color:black;}
.font-color-white{color:white;}
.font-color-red{color:red;}
.font-color-blue{color:blue;}
.font-color-yellow{color:yellow;}

/*背景色関連*/
.bg-color-black{background-color:black;}
.bg-color-white{background-color:white;}
.bg-color-red{background-color:red;}
.bg-color-blue{background-color:blue;}
.bg-color-yellow{background-color:yellow;}

/*透過率関連*/
.opacity-min{opacity:0;}
.opacity-25per{opacity:calc(1/4);}
.opacity-33per{opacity:calc(1/3);}
.opacity-half{opacity:0.5;}
.opacity-75per{opacity:calc(3/4);}
.opacity-max{opacity:1;}

/*表示/非表示関連*/
.display-none{display:none;}
.display-block{display:block;}

/*Under Line関連*/
.border-bottom-solid-black{
	border-bottom:1px solid black;
}
.border-bottom-solid-gray{
	border-bottom:1px solid gray;
}

/* position関連*/
.position-relative{position:relative;}

.position-absolute{position: absolute;}
.position-absolute-top{
	position: absolute;
	top:0;
}
.position-absolute-bottom{
	position: absolute;
	bottom:0;
}
.position-absolute-top-left{
	position: absolute;
	top:0;
	left:0;
}
.position-absolute-center{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.position-sticky{position: sticky;}

/*横並び関連*/
.wrapper-block{
	width:100%;
	list-style: none;
	display:flex;
	flex-wrap: wrap;
	margin:0;
	padding:0;
	justify-content: space-around;
}
.box-half{
	width:calc(100% / 2);
}

/*中央寄せ関連*/
.text-center{text-align:center;}
.margin-center{margin:0 auto;}
.top-bottom-center-parent{
	height:100%;
	display: table;
}
.top-bottom-center-child{
	height:100%;
	display: table-cell;
	vertical-align: middle;
}

/*正円*/
.border-circle-100px{
	width:100px;
	height:100px;
	padding:1.5em;
	border:10px double black;
	border-radius:50%;
}

.border-circle-150px{
	width:150px;
	height:150px;
	padding:1.5em;
	border:10px double black;
	border-radius:50%;
}

.border-circle-200px{
	width:200px;
	height:200px;
	padding:1.5em;
	border:10px double black;
	border-radius:50%;
}

.border-circle-300px{
	width:300px;
	height:300px;
	padding:1.5em;
	border:10px double black;
	border-radius:50%;
}

/*縦線/横線*/
/*縦線*/
.vertical-line-center{
	position:relative;
	top:0;
	left:0;
	width:50%;
	height:100%;	
}

.vertical-line-center::after{
	position: absolute;
	top: 0;
	left: 100%;
	content: "";
	width: 1px;
	height: 100%;
	background-color: black;
}

/*横線*/
.horizontal-line-center{
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:50%;
}

.horizontal-line-center::after{
	position: absolute;
	top: 100%;
	left: 0;
	content: "";
	width: 100%;
	height: 1px;
	background-color: black;
}

/*aタグの下線を消す*/
a{text-decoration: none;}

/*【スクロールスナップ】スクロールすると上下または左右に自動で移動する*/
/*左右方向で移動*/
.container-scroll-snap-x{
	overflow		: auto;
	scroll-snap-type: x mandatory;
	height			: 100vh;
}

/*上下方向で移動*/
.container-scroll-snap-y{
	overflow		: auto;
	scroll-snap-type: y mandatory;
	height			: 100vh;
}

/*上下左右で移動*/
.container-scroll-snap-both{
	overflow		: auto;
	scroll-snap-type: both mandatory;
	height			: 100vh;
}

/*高さを画面いっぱいにする*/
.section-100vh{height:100vh;}

/*自動移動後の位置調整*/
/*上部分(クラスのstart部分)で止まる*/
.section-scroll-snap-start{scroll-snap-align : start;}

/*下部分(クラスのend部分)で止まる*/
.section-scroll-snap-end{scroll-snap-align : end;}

/*中央部分(クラスの中央部分)で止まる*/
.section-scroll-snap-center{scroll-snap-align : center;}

/*スクロールバーを非表示にする*/
.scrollbar-hidden{
    -ms-overflow-style	: none;
    scrollbar-width		: none;
}
.scrollbar-hidden::-webkit-scrollbar{
    display: none;
}