﻿#container {position:relative;}
#contents {position:static;}

.top .logo a {width:100%; font-size:170%; text-align:center; position:absolute; top:10vh; left:0;}
.top .logo a > span {font-weight:800; display:block;}
.top .logo a > span:nth-of-type(1) {letter-spacing:0.3em;}
.top .logo a > span:nth-of-type(2) {letter-spacing:0.1em; margin:0.2em 0 0 0;}

.mv-catch {font-size:3.0rem; font-weight:600; letter-spacing:0.3em; text-align:center; text-shadow:0 0 20px #000, 0 0 20px #000, 0 0 20px #000; color:#fff; padding:150px 0 350px 0; position:relative; z-index:10;}
.mv-bg {width:100%; padding:142% 0 0 0; position:fixed; top:0; left:0;}
.mv-bg > div {width:100%; height:100%; background-repeat:no-repeat; background-position:left top; background-size:100% auto; position:absolute; top:0; left:0;}
.mv-bg .bg1 {background-image:url(../img/bg_01.webp);}
.mv-bg .bg2 {background-image:url(../img/bg_02.webp); transform-origin:0 24%;}
.mv-bg .bg3 {background-image:url(../img/bg_03.webp);}
.mv-bg .bg4 {background-image:url(../img/bg_04.webp);}
.mv-bg .bg5 {background-image:url(../img/bg_05.webp);}
.mv-bg .bg6 {background-image:url(../img/bg_06.webp);}
.mv-bg .bg7 > div {width:100%; height:100%; background:url(../img/bg_07.svg) no-repeat left top; background-size:100% auto; transform-origin:37% 50%; position:absolute; top:0; left:0; filter:blur(15px); transform:translate(0,0) scale(0.4, 0.2); opacity:0; animation-name:steamMove; animation-duration:6.0s; animation-timing-function:linear; animation-iteration-count:infinite;}
.mv-bg .bg7 > div:nth-of-type(1) {animation-duration:6.0s; animation-delay:0.0s;}
.mv-bg .bg7 > div:nth-of-type(2) {animation-duration:5.0s; animation-delay:3.0s;}
@keyframes steamMove {
	0% {transform:translate(0,0) scale(0.2, 0.2); opacity:0;}
	50% {transform:translate(0,-15%) scale(1, 1); opacity:0.7;}
	100% {transform:translate(0,-30%) scale(0.8, 1.2); opacity:0;}
}

.news-list-sec {margin:50px 0 0 0; position:relative; z-index:10;}
.news-list-sec .box {padding:5px 0; background-color:rgba(255,255,255,0.8); box-shadow:0 0 5px rgba(0,0,0,0.1); border:solid 1px #ccc; border-radius:5px; box-sizing:border-box; position:relative;}
.news-list-sec .ttl {font-size:1.8rem; font-weight:600; letter-spacing:0.2em; padding:10px 0;}
.news-list-sec .more {position:absolute; top:15px; right:10px;}
.news-list-sec .more a {line-height:1; padding:0 1.0em 0 0; display:block;}
.news-list-sec .more a::before {content:'\bb'; position:absolute; top:-0.1em; right:0; transition:right 0.3s ease;}
.news-list-sec .more a:hover {text-decoration:none;}
.news-list-sec .more a:hover::before {right:-3px;}
.news-list-sec .list a {text-decoration:none; display:block; transition:background-color 0.3s ease;}
.news-list-sec .list a:hover {background-color:rgba(0,0,0,0.05);}
.news-list-sec .list a:last-of-type dl {border-bottom:none;}
.news-list-sec .list dl {text-align:left; padding:10px 20px; border-bottom:solid 1px rgba(0,0,0,0.1); display:flex;}
.news-list-sec .list dt {width:9em;}

@media screen and (max-width:767px){
	.mv-catch {font-size:2.6rem; padding:20.0vh 0;}

	.news-list-sec {margin:30px 0 0 0;}
	.news-list-sec .list dl {display:block;}
	.news-list-sec .list dt {width:auto; font-size:80%;}
}
