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

.area-title{left: 4%; width: 92%;}
.area-subtitle{left: 4%; width: 92%;}
.area-subtitle-caption{left: 4%; width: 92%;}
.area-paragraph{left: 4%; width: 92%;}

.header-line{display: none;}

.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%;}

.half-visual-area{height: calc(var(--content-width) * 1.00); transition: all .5s ease;}
.half-visual-area.show-extra-menu{height: calc(var(--content-width) * 1.50); transition: all .5s ease;}
.half-visual-area .image{width: 100%; height: calc(var(--content-width) * 1.00);}
.half-visual-area.right .image{left: 0;}
.half-visual-area.left .content{left: 0;}
.half-visual-area .button-plus.image{display: block; width: 18%; height: calc(var(--content-width) * 0.18); left: 41%; top: calc(var(--content-width) * 0.77); opacity: 1; transition: all .5s ease;}
.half-visual-area.show-extra-menu .button-plus.image{opacity: 0; transition: all .5s ease;}
.half-visual-area .button-minus.image{display: block; width: 18%; height: calc(var(--content-width) * 0.18); left: 41%; top: calc(var(--content-width) * 0.77); opacity: 0; transition: all .5s ease;}
.half-visual-area.show-extra-menu .button-minus.image{opacity: 1; transition: all .5s ease;}
.half-visual-area .content{width: 100%; height: calc(var(--content-width) * 0.50); top: calc(var(--content-width) * 1.00);}
.half-visual-area .content p.title{width: 100%; left: 50%; top: -100%; transform: translate(-50%, -50%); font-size: calc(var(--font-base) * 3.2); color: white;}
.half-visual-area .content div.paragraph{width: 70%; left: 50%; top: 36%; display: none;}
.half-visual-area .content p.paragraph.rectangle-text{width: 80%; left: 10%; top: 20%; transform: none; color:white;}
.half-visual-area.left .link-button{
	width: 30%; left: 35%; top: calc(var(--content-width) * 1.37); height: 5%;
}
.half-visual-area.right .link-button{
	width: 30%; left: 35%; top: calc(var(--content-width) * 1.37); height: 5%;
}

.twoblock-visual{width: 100%; height: calc(var(--content-width) * 1.22);}
.twoblock-visual .image{width: 96%; height: calc(var(--content-width) * 0.60);}
.twoblock-visual-block1{top: 0%; left: 2%;}
.twoblock-visual-block2{top: 50%; left: 2%;}

.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: 90%; left: 5%; height: calc(var(--content-width) * 0.80);
	border-bottom: 1px solid dimgray;
}
.border-top{border-top: 1px solid dimgray;}
.block-news-list .image,.block-news-list .image-full{width: 60%; height: 40%; left: 20%; top: 20%;}
.news-list-date{left: 50%; top: 7%; transform: translate(-50%,0%);}
.news-list-title{width: 90%; left: 50%; top: 80%; transform: translate(-50%,-50%); text-align: center; white-space: normal;}

.block-news-detail{width: 92%; left: 4%;}
.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;}

body.side-open{
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

.overlay {
	display: block; position: fixed; visibility: hidden;
	width: 100%; height: 100%; top: 0; left: 0;
	background: rgba(0,0,0,0);
	transition: all .5s ease;
	z-index: 20;
}
.side-open .overlay {
	visibility: visible; cursor: pointer;
	background: rgba(0,0,0,.2);
	transition: all .5s ease;
}

.side-menu{
	display: block; position: fixed;
	width: 60%; height: 100%; top: 0; right: -60%;
	text-align: left;
	z-index: 21;
	transition: all .5s ease;
}
.side-open .side-menu{
	right: 0;
	transition: all .5s ease;
}

.side-menu-ul{
	position: absolute;
	width: 100%;
	height: 90%;
	top: 5%;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.side-menu-ul::-webkit-scrollbar{
	display: none;
}
.side-menu-ul li{
	display: block; position: relative;
	height: 7%;
	padding: 0 calc(var(--font-base) * 2.4);
}
.side-menu-ul li p{display: block; position: absolute; top: 50%; transform: translate(0,-50%); padding: 0 calc(var(--font-base) * 2.4);}
.side-menu-ul li p.category{padding: 0 0;}

.side-menu-btn {
	display: block; position: fixed;
	top: calc(var(--font-base) * 1);
	right: calc(var(--font-base) * 1);
	width: calc(var(--font-base) * 4);
	height: calc(var(--font-base) * 4);
	padding: 0;
	cursor: pointer;
	z-index: 24;
	background: rgba(255, 255, 255, 0.9);
}
.side-open .side-menu-btn{
	background: none;
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 50%;
	left: 25%;
	height: 50%;
	top: 25%;
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 4px;
	margin: auto;
	background: #333;
	transition: all .3s;
}

.ellipsis-v .point.top {
	top: 0;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 0;
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left top;
	transform: rotate(45deg);
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left bottom;
	transform: rotate(-45deg);
	}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: #ccc;
}