: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;}