/*===============================================================================
***CSS
================================================================================*/
html {
	font-size: 3.6vw;
}
@media (min-width: 600px){
	html {
		font-size: 1rem;
	}
}
body {
	position: relative;
	font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	color: var(--c-main--light);
	background-color: var(--c-bgc);
}
body::before{
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	content: "";
	display: inline-block;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	background-image: url(/wp-content/uploads/back-img.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: .1;
}

.container, .container-lg, .container-md, .container-sm, .container-xl{
	max-width: calc(var(--container_size, 0px) + var(--container_pad, 0px)*2);
	margin-inline: auto;
	padding-left: var(--container_pad,0);
	padding-right: var(--container_pad,0);
}

/*===============================
* 装飾
* =================================*/
.main{
	position: relative;
	margin-bottom: var(--g-sec--lg);
}
.main:has(.main__deco) .main__inner{
	padding: var(--g-sec--lg) 0;
}

.main__deco{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 100vw;
	height: 100%;
}
.main__deco-illust{
	position: absolute;
	width: 8%;
}
.main__deco-illust.--top-left{
	top: 0;
	left: 0;
	transform: rotate(180deg)
}
.main__deco-illust.--top-right{
	top: 0;
	right: 0;
	transform: rotate(-90deg)
}
.main__deco-illust.--bottom-left{
	bottom: 0;
	left: 0;
	transform: rotate(90deg)
}
.main__deco-illust.--bottom-right{
	bottom: 0;
	right: 0;
}
.main__deco-line{
	position: absolute;
	background: var(--c-main);
}
.main__deco-line.--top,
.main__deco-line.--bottom{
	--posi-y: .4%;
	width: 82%;
	height: 1px;
	left: 50%;
	transform: translateX(-50%);
}
@media (min-width: 600px){
	.main__deco-line.--top,
	.main__deco-line.--bottom{
		--posi-y: 1%;
		height: 2px;
	}
}
.main__deco-line.--top{
	top: var(--posi-y);
}
.main__deco-line.--bottom{
	bottom: var(--posi-y);
}
.main__deco-line.--left,
.main__deco-line.--right{
	--posi-x: .6%;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 88%;
}
@media (min-width: 600px){
	.main__deco-line.--left,
	.main__deco-line.--right{
		width: 2px;
		height: 74%;
	}
}
.main__deco-line.--left{
	left: var(--posi-x);
}
.main__deco-line.--right{
	right: var(--posi-x);
}



/*===============================
デフォルトのCSS
=================================*/
dl, ol, ul, li {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

picture {
	display: block;
}
figure {
	margin-bottom: 0;
}
img {
	vertical-align: middle;
}
svg {
	color: currentColor;
	height: auto;
}
path {
	fill: currentColor;
}

a:is(:hover, :focus){
	text-decoration: none;
}