/*ファーストビュー*/
.fv,
ul.sliderTop,.sliderTop li{
	width: 100%;
	height: 75vh;
	min-height: 630px;
	max-height: 850px;
	position: relative;
    overflow: hidden;
    background-color: #c1c1c1;
    z-index: -1;
}
/*ファーストビューの画像指定*/
.fv .sliderTop li:first-child {
    background: url(/assets/img/top/top_fv_slide01.png) no-repeat center;
    background-size: cover;
    mix-blend-mode: multiply;
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    animation:movie 15s linear;
}

.fv h1{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 40px;
    font-feature-settings:initial;
	letter-spacing: 0.2em;
    width: fit-content;
    height: fit-content;
    color: #fff;
    filter: drop-shadow(0 0 10px rgba(0,0,0,1));
	position: absolute;
    left: 0;
	right: 0;
	top: 0;
    bottom: 0;
    margin: auto;
    padding-bottom: 20px;
    animation:fade 2s linear;
    z-index: 1;
}
@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes movie {
    0% {transform: scale(1.15);}
    100% {transform: scale(1);}
}

/*ファーストビューのキャッチコピー改行*/
.fv h1 br.height,
.fv h1 span{
    display: none;
}
@media only screen and (max-height: 730px) {
    .fv h1 br.height{
        display: block;
        padding-top: 20px;
    }
    .fv h1 span{
        display: inline-block;
        padding-top: 60px;
    }
}

@media only screen and (max-width: 890px) {
    .fv h1{
        font-size: 28px;
    }
    .fv, ul.sliderTop, .sliderTop li{
        width: 100%;
        height: calc(100vh - 165px);
        min-height: auto;
        max-height: 620px;
    }
}
/*いま、地方では-併載画像のレイアウト*/
ul.contents li.left {
    position: relative;
    height: 640px;
}
ul.contents li.left .top img{
    position: absolute;
    top: -40%;
    bottom: 0;
    left: -25%;
    right: 0;
    margin: auto;
    height: auto;
    width: 80%;
}
ul.contents li.left .bottom img{
    position: absolute;
    top: 0;
    bottom: -50%;
    right: -8%;
    left: 0;
    margin: auto;
    height: auto;
    width: 92%;
}
@media only screen and (max-width: 890px) {
    ul.contents li.left {
        height: 520px;
    }
    ul.contents li.left .top img{
        top: 0%;
        bottom: 0;
        left: 0;
        width: 60%;
        margin: 30px auto auto 10px;
    }
    ul.contents li.left .bottom img{
        top: 0;
        bottom: 0;
        right: 0;
        width: 80%;
        margin: auto 10px 30px auto;
    }
    
    /*いま、地方では-h2テキストのレイアウト*/
    .text h2 {
        text-align: center;
    }
}
@media only screen and (max-width: 680px) {
    ul.contents li.left {
        height: 450px;
    }
}
@media only screen and (max-width: 450px) {
    ul.contents li.left {
        height: 380px;
    }
}