:root {
	--vw: 100vw;
	--content-width: var(--vw);
	--content-left: calc(50% - var(--content-width) / 2);
	--font-base: calc(var(--content-width) * 0.02);
	--margin-base: calc(var(--content-width) * 0.08);
	--offset-base: calc(var(--font-base) * 0.2);
}

body{margin: 0; padding: 0; letter-spacing: 0;}

p{margin:0; padding: 0;}
span{margin:0; padding: 0; display: inline-block;}
div{margin:0; padding: 0;}
a{color: inherit; text-decoration: none;}
button {
	cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	vertical-align: middle;
	background: transparent; color: inherit; font: inherit;
	border: 0; padding: 0; margin: 0; border-radius: 0; outline: none;
}

.area{
	display: block; position: relative;
	width: 100%; left: 0;
	overflow: hidden;
}
.area-content{
	display: block; position: relative;
	width: var(--content-width); left: var(--content-left);
	height: 100%;
}

.block-fixed{display: block; position: fixed;}
.block-relative{display: block; position: relative;}
.block-absolute{display: block; position: absolute;}

.image{display: block; position: absolute; object-fit: cover; user-select: none;}
.image-relative{display: block; position: relative; object-fit: cover; user-select: none;}
.image-fixed{ display: block; position: fixed; object-fit: cover; user-select: none;}
.image-full{display: block; position: relative; object-fit: contain; user-select: none;}

.filled{width: 100%; height: 100%; top:0; left:0;}
.centered{left: 50%; transform: translate(-50%,0); text-align: center;}
.cozy{line-height: 1.8;}
.vertical{writing-mode: vertical-rl; text-orientation: upright;}

.black{color: black;}
.brown{color: rgb(65, 46, 13);}
.gray{color: dimgray;}
.white{color: white;}
.red{color: firebrick;}
.blue{color: steelblue;}
.green{color: darkgreen;}

.no-margin{margin: 0;}
.margin-both-space, .margin-top-space{margin-top: calc(var(--margin-base) * 2);}
.margin-both-space, .margin-bottom-space{margin-bottom: calc(var(--margin-base) * 2);}
.margin-both, .margin-top{margin-top: calc(var(--margin-base) * 1);}
.margin-both, .margin-bottom{margin-bottom: calc(var(--margin-base) * 1);}
.margin-both-inblock, .margin-top-inblock{margin-top: calc(var(--margin-base) * 0.25);}
.margin-both-inblock, .margin-bottom-inblock{margin-bottom: calc(var(--margin-base) * 0.25);}
.padding-top{padding-top: calc(var(--margin-base) * 0.5);}
.padding-bottom{padding-bottom: calc(var(--margin-base) * 0.5);}

.area-title{left: 0%;}
.area-subtitle{left: 4%;}
.area-subtitle-caption{left: 4%;}
.area-paragraph{left: 8%; width: 76%;}
.whiteblock{background-color: rgba(255,255,255,0.8); padding: calc(var(--margin-base) * 0.75) 0 calc(var(--margin-base) * 0.75) 0; margin-bottom: calc(var(--margin-base) * 0.75);}
.inwhiteblock{padding: 0 calc(var(--margin-base) * 0.5) 0  calc(var(--margin-base) * 0.5);}

.main-visual{width: 100%; height: calc(var(--content-width) * 0.70);}

.header-line{
	display: block; position: absolute;
	width: 100%; height: calc(var(--content-width) * 0.05);
}
.header-button-block{
	display: flex; position: absolute;
	width: var(--content-width); left: var(--content-left); height: 100%;
}
.header-button-belt-left, .header-button-belt-right{
	display: block; position: absolute;
	width: var(--content-left); height: 100%;
}
.header-button-belt-left{right: calc(100% - var(--content-left));}
.header-button-belt-left-cover{
	display: block; position: absolute;
	width: calc(100% - var(--offset-base)); height: calc(100% - var(--offset-base) * 2);
	left: 0; top: var(--offset-base);
}
.header-button-belt-right{left: calc(100% - var(--content-left));}
.header-button-belt-right-cover{
	display: block; position: absolute;
	width: calc(100% - var(--offset-base)); height: calc(100% - var(--offset-base) * 2);
	right: 0; top: var(--offset-base);
}
.header-button{
	display: block; position: relative;
	width: 100%; height: 100%;
	text-align: center;
	margin: 0 var(--offset-base) 0 var(--offset-base);
}
.header-button-cover{
	display: block; position: absolute;
	width: calc(100% - var(--offset-base) * 2); height: calc(100% - var(--offset-base) * 2);
	left: var(--offset-base); top: var(--offset-base);
	transition: 0.4s;
}
.header-button:hover .header-button-cover{opacity: 0;}
.header-button-base{
	display: block; position: relative;
	width: 100%; height: 100%; transition: 0.4s; cursor: pointer;
}
.header-button p{
	display: block; position: relative;
	width: 100%;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}
.header-button .covered p{transition: 0.4s;}
.header-button-extend-list{
	display: block; position: relative;
	width: 100%; height: 100%;
	opacity: 0; pointer-events: none; transition: 0.4s; cursor: pointer;
}
.header-button:hover .header-button-extend-list{opacity: 1; pointer-events: auto;}
.header-button-extend-block{
	display: flex; position: relative;
	opacity: 0; pointer-events: none; transition: 0.4s; cursor: pointer;
}
.header-button:hover .header-button-extend-block{opacity: 1; pointer-events: auto;}
.header-button-extend-part{display: block; position: relative; height: 100%; transition: 0.4s;}
.header-button-extend-part .image{width: 90%; left: 5%; height: 80%; top: 4%;}
.header-button .header-button-extend-part p{top: 92%;}

.link-button{cursor: pointer;}
.link-button p{left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;}
.link-button-cover{
	width: calc(100% - var(--offset-base) * 2); height: calc(100% - var(--offset-base) * 2);
	left: var(--offset-base); top: var(--offset-base);
	transition: 0.4s;
}
.link-button:hover .link-button-cover{opacity: 0;}

.half-visual-area{height: 50vw;}
.half-visual-area .image{width: 50%; height: 100%;}
.half-visual-area.right .image{left: 50%;}
.half-visual-area .content{width: 50%; height: 100%;}
.half-visual-area.left .content{left: 50%;}
.half-visual-area .content p.title{left: 50%; top: 24%; transform: translate(-50%, -50%); font-size: calc(var(--font-base) * 2.4); text-align: center;}
.half-visual-area .content p.paragraph.rectangle-text{width: 64%; left: 18%; top: 40%; transform: none;}
.half-visual-area.left .link-button{width: 16%; left: 67%; height: 7%; top: 75%;}
.half-visual-area.right .link-button{width: 16%; left: 17%; height: 7%; top: 75%;}

.twoblock-visual{width: 100%; height: calc(var(--content-width) * 0.30);}
.twoblock-visual .image{width: 40%; height: calc(var(--content-width) * 0.30);}
.twoblock-visual-block1{left: 8%;}
.twoblock-visual-block2{left: 52%;}

.twoblock-visual-captioned{width: 100%; height: calc(var(--content-width) * 0.50);}
.twoblock-visual-captioned .image{width: 49%; height: calc(var(--content-width) * 0.36);}
.twoblock-visual-captioned p{
	display: block; position: absolute;
	text-align: center;
	width: 49%; top: calc(var(--content-width) * 0.37);
}
.twoblock-visual-captioned-block1{left: 0%;}
.twoblock-visual-captioned-block2{left: 51%;}

.block-leftimage{width: 100%; height: calc(var(--content-width) * 0.24); background-color: white;}
.block-leftimage .image{width: 40%; left: 0; height: 100%;}
.block-leftimage .subtitle{font-size: calc(var(--font-base)* 1.1); width: 56%; left: 70%; transform: translate(-50%,0); top: 15%;}
.block-leftimage .paragraph.subtitled{width: 50%; left: 45%; top: 32%; font-size: calc(var(--font-base) * 0.7);}
.block-leftimage .paragraph.nosubtitled{width: 50%; left: 45%; top: 50%; transform: translate(0,-50%); font-size: calc(var(--font-base) * 0.7);}

.block-rightimage{width: 100%; height: calc(var(--content-width) * 0.24); background-color: white;}
.block-rightimage .image{width: 40%; left: 60%; height: 100%;}
.block-rightimage .subtitle{font-size: calc(var(--font-base)* 1.1); width: 56%; left: 30%; transform: translate(-50%,0); top: 15%;}
.block-rightimage .paragraph.subtitled{width: 50%; left: 5%; top: 32%; font-size: calc(var(--font-base) * 0.7);}
.block-rightimage .paragraph.nosubtitled{width: 50%; left: 5%; top: 50%; transform: translate(0,-50%); font-size: calc(var(--font-base) * 0.7);}

.block-news-list{
	width: 100%; height: calc(var(--content-width) * 0.20);
	border-bottom: 1px solid dimgray;
}
.border-top{border-top: 1px solid dimgray;}
.block-news-list .image,.block-news-list .image-full{width: 25%; height: 90%; left: 2.5%; top: 5%;}
.news-list-date{left: 65%; top: 5%; transform: translate(-50%,0%);}
.news-list-title{width: 70%; left: 65%; top: 55%; transform: translate(-50%,-50%); text-align: center; white-space: normal;}

.block-news-detail{width: 60%; left: 20%;}
.block-news-detail .image-full{width: 100%; height: calc(var(--content-width) * 0.40);}
.block-news-detail p{white-space: normal;}

#screen-full{z-index: 10; background-color:rgba(99, 99, 99, 0.60);}
#screen-full.disabled{display: none;}
#popup-full{z-index: 11; background-color: rgb(235, 235, 235);
	width: 40%; left: 30%; height: 20%; top: 40%;}
#popup-full p{top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
#popup-full.disabled{display: none;}

.overlay{display: none;}
.side-menu{display: none;}
.side-menu-btn{display: none;}
.sp-block{display: none;}