@charset "utf-8"; #mv-content{ width: 100%; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; margin-bottom: 15vh;} #mv-content .inner{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;} /*------------ テキスト --------------*/ #mv-content .inner .pTtl{ width: calc(100% - 500px); height: 100vh; min-height: 300px; display: flex; flex-direction: column;} #mv-content .inner .pTtl h1{ width: 100%; height: 66vh; display: flex; align-items: center; justify-content: flex-start;} #mv-content .inner .pTtl h1 span{ font-size: 18px; line-height: 1.8em; letter-spacing: 0.5em; margin-top: 15vh;} #mv-content .inner .pTtl .tBottom{ width: 100%; height: 30vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;} #mv-content .inner .pTtl .tBottom .eng{ display: flex; flex-direction: column;} #mv-content .inner .pTtl .tBottom .eng > span{ margin: 4px 0;} #mv-content .inner .pTtl .tBottom .eng *{ font-size: 20px; color: #777; letter-spacing: 0.3em;} #mv-content .inner .pTtl .tBottom .jp{ } #mv-content .inner .pTtl .tBottom .jp *{ font-size: 13px; margin: 10px 0; letter-spacing: 0.6em;} /*----------- ギャラリー -------------*/ #mv-content .inner #newMv{ width: 400px; height: 60vh; min-height: 500px; display: block; background: #ddd; position: relative;} #newMv #newMv_gallery {width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; opacity: 1; transition: 1.8s;} .opBody1 #newMv #newMv_gallery{ opacity: 1;} #newMv #newMv_gallery .mvArea{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden;} #newMv #newMv_gallery .mvArea.play { z-index: 10;} #newMv #newMv_gallery .mvArea.play-after { z-index: 15;} /**/ #newMv #newMv_gallery .mvArea .backImg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 3px;} #newMv #newMv_gallery .mvArea .backImg div{ width: 100%; height: 100%; display: block;} #newMv #newMv_gallery .mvArea .c1, #newMv #newMv_gallery .mvArea .c2, #newMv #newMv_gallery .mvArea .c3, #newMv #newMv_gallery .mvArea .c4, #newMv #newMv_gallery .mvArea .c5, #newMv #newMv_gallery .mvArea .c6, #newMv #newMv_gallery .mvArea .c7, #newMv #newMv_gallery .mvArea .c8, #newMv #newMv_gallery .mvArea .c9, #newMv #newMv_gallery .mvArea .c10{ mask-image: url("../img/index/en.svg"); mask-repeat: no-repeat; -webkit-mask-image: url("../img/index/en.svg"); -webkit-mask-repeat: no-repeat; mask-size: 0 0; -webkit-mask-size: 0 0;} /**/ @media screen and (max-width: 1140px) { #mv-content .inner{ width: 96%; margin: 0 2%;} } @media screen and (max-width: 1040px) { #mv-content .inner .pTtl{ width: 50%; } #mv-content .inner #newMv{ width: 45%; height: 80vh; margin-top: 5vh;} } @media screen and (max-width: 800px) { #mv-content .inner .pTtl h1 span{ letter-spacing: 0.3em;} #mv-content .inner .pTtl .tBottom .jp *{ letter-spacing: 0.3em;} } @media screen and (max-width: 700px) { #mv-content{ height: auto; min-height: 0px;} #mv-content .inner{ flex-direction: column; justify-content: center;} #mv-content .inner .pTtl{ width: auto; height: auto; min-height: 0px;} #mv-content .inner .pTtl h1{ width: auto; height: auto;} #mv-content .inner .pTtl h1 span{ letter-spacing: 0.5em; margin-top: 28vh;} #mv-content .inner .pTtl .tBottom{ width: auto; height: auto; margin: 10vh 0;} #mv-content .inner .pTtl .tBottom .jp *{ font-size: 13px; margin: 5px 0; letter-spacing: 0.6em;} #mv-content .inner #newMv{ width: 80%; height: 90vh; margin: 0 0 10vh;} } @media screen and (max-width: 600px) { #mv-content .inner .pTtl h1 span{ font-size: 4.2vw; letter-spacing: 0.4em;} #mv-content .inner .pTtl .tBottom .eng *{ font-size: 4.6vw; } #mv-content .inner .pTtl .tBottom .jp *{ font-size: 2.6vw; } } /*------------------------------------------*/ /*■■ newMV0 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV0::after, #newMv #newMv_gallery .mvArea#newMV0 .backImg div{ background: url("../img/index/0sp.webp") 50% 50% no-repeat #000; background-size: cover;} } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV0::after, #newMv #newMv_gallery .mvArea#newMV0 .backImg div{ background: url("../img/index/0sp.webp") 50% 50% no-repeat #000; background-size: cover;} } #newMv #newMv_gallery .mvArea#newMV0 .c1{ transition: 2.0s; mask-position: 10% 95%; -webkit-mask-position: 10% 95%;} #newMv #newMv_gallery .mvArea#newMV0 .c2{ transition: 1.8s; mask-position: 45% 5%; -webkit-mask-position: 45% 5%;} #newMv #newMv_gallery .mvArea#newMV0 .c3{ transition: 1.6s; mask-position: 30% 62%; -webkit-mask-position: 30% 62%;} #newMv #newMv_gallery .mvArea#newMV0 .c4{ transition: 1.7s; mask-position: 22% 23%; -webkit-mask-position: 22% 23%;} #newMv #newMv_gallery .mvArea#newMV0 .c5{ transition: 2.0s; mask-position: 90% 30%; -webkit-mask-position: 88% 30%;} #newMv #newMv_gallery .mvArea#newMV0 .c6{ transition: 1.6s; mask-position: 72% 8%; -webkit-mask-position: 72% 8%;} #newMv #newMv_gallery .mvArea#newMV0 .c7{ transition: 1.8s; mask-position: 55% 65%; -webkit-mask-position: 55% 65%;} #newMv #newMv_gallery .mvArea#newMV0 .c8{ transition: 1.8s; mask-position: 68% 92%; -webkit-mask-position: 68% 92%;} #newMv #newMv_gallery .mvArea#newMV0 .c9{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV0 .c10{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} /**/ #newMv #newMv_gallery .mvArea#newMV0.play .c1 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV0.play .c2 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV0.play .c3 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV0.play .c4 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV0.play .c5 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV0.play .c6 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV0.play .c7 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV0.play .c8 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV0.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV0.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV0 .c1{ transition: 2.0s; mask-position: 10% 78%; -webkit-mask-position: 10% 78%;} #newMv #newMv_gallery .mvArea#newMV0 .c5{ transition: 2.0s; mask-position: 78% 30%; -webkit-mask-position: 78% 30%;} #newMv #newMv_gallery .mvArea#newMV0 .c6{ transition: 2.6s; mask-position: 62% 8%; -webkit-mask-position: 62% 8%;} #newMv #newMv_gallery .mvArea#newMV0 .c7{ transition: 2.8s; mask-position: 55% 65%; -webkit-mask-position: 55% 65%;} #newMv #newMv_gallery .mvArea#newMV0 .c8{ transition: 2.8s; mask-position: 68% 92%; -webkit-mask-position: 68% 92%;} #newMv #newMv_gallery .mvArea#newMV0 .c9{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV0 .c10{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV0.play .c1 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;} #newMv #newMv_gallery .mvArea#newMV0.play .c2 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV0.play .c3 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV0.play .c4 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV0.play .c5 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV0.play .c6 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV0.play .c7 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV0.play .c8 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV0.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV0.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*■■ newMV1 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV1::after, #newMv #newMv_gallery .mvArea#newMV1 .backImg div{ background: url("../img/index/1sp.webp") 50% 50% no-repeat #000; background-size: cover;} } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV1::after, #newMv #newMv_gallery .mvArea#newMV1 .backImg div{ background: url("../img/index/1sp.webp") 50% 50% no-repeat #000; background-size: cover;} } #newMv #newMv_gallery .mvArea#newMV1 .c1{ transition: 2.2s; mask-position: 30% 35%; -webkit-mask-position: 30% 35%;} #newMv #newMv_gallery .mvArea#newMV1 .c2{ transition: 1.8s; mask-position: 12% 40%; -webkit-mask-position: 12% 40%;} #newMv #newMv_gallery .mvArea#newMV1 .c3{ transition: 1.7s; mask-position: 18% 77%; -webkit-mask-position: 18% 77%;} #newMv #newMv_gallery .mvArea#newMV1 .c4{ transition: 2.3s; mask-position: 45% 30%; -webkit-mask-position: 45% 30%;} #newMv #newMv_gallery .mvArea#newMV1 .c5{ transition: 2.2s; mask-position: 90% 9%; -webkit-mask-position: 90% 9%;} #newMv #newMv_gallery .mvArea#newMV1 .c6{ transition: 1.9s; mask-position: 65% 50%; -webkit-mask-position: 65% 50%;} #newMv #newMv_gallery .mvArea#newMV1 .c7{ transition: 1.6s; mask-position: 81% 40%; -webkit-mask-position: 81% 40%;} #newMv #newMv_gallery .mvArea#newMV1 .c8{ transition: 2.2s; mask-position: 72% 88%; -webkit-mask-position: 72% 88%;} #newMv #newMv_gallery .mvArea#newMV1 .c9{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} #newMv #newMv_gallery .mvArea#newMV1 .c10{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV1.play .c1 { mask-size: 1400px 1400px; -webkit-mask-size: 1400px 1400px;} #newMv #newMv_gallery .mvArea#newMV1.play .c2 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV1.play .c3 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV1.play .c4 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV1.play .c5 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV1.play .c6 { mask-size: 1400px 1400px; -webkit-mask-size: 1400px 1400px;} #newMv #newMv_gallery .mvArea#newMV1.play .c7 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV1.play .c8 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV1.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV1.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV1 .c1{ transition: 2.2s; } #newMv #newMv_gallery .mvArea#newMV1 .c2{ transition: 2.8s; } #newMv #newMv_gallery .mvArea#newMV1 .c3{ transition: 2.7s; } #newMv #newMv_gallery .mvArea#newMV1 .c4{ transition: 2.3s; } #newMv #newMv_gallery .mvArea#newMV1 .c5{ transition: 2.2s; mask-position: 80% 9%; -webkit-mask-position: 80% 9%;} #newMv #newMv_gallery .mvArea#newMV1 .c6{ transition: 2.9s; } #newMv #newMv_gallery .mvArea#newMV1 .c7{ transition: 2.6s; mask-position: 61% 50%; -webkit-mask-position: 61% 50%;} #newMv #newMv_gallery .mvArea#newMV1 .c8{ transition: 2.2s; mask-position: 72% 88%; -webkit-mask-position: 72% 88%;} #newMv #newMv_gallery .mvArea#newMV1 .c9{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV1 .c10{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV1.play .c1 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV1.play .c2 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV1.play .c3 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV1.play .c4 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV1.play .c5 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;} #newMv #newMv_gallery .mvArea#newMV1.play .c6 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV1.play .c7 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV1.play .c8 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV1.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV1.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*■■ newMV2 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV2::after, #newMv #newMv_gallery .mvArea#newMV2 .backImg div{ background: url("../img/index/2sp.webp") 50% 50% no-repeat #000; background-size: cover;} } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV2::after, #newMv #newMv_gallery .mvArea#newMV2 .backImg div{ background: url("../img/index/2sp.webp") 50% 50% no-repeat #000; background-size: cover;} } #newMv #newMv_gallery .mvArea#newMV2 .c1{ transition: 2.2s; mask-position: 15% 22%; -webkit-mask-position: 15% 22%;} #newMv #newMv_gallery .mvArea#newMV2 .c2{ transition: 1.6s; mask-position: 2% 70%; -webkit-mask-position: 2% 70%;} #newMv #newMv_gallery .mvArea#newMV2 .c3{ transition: 1.4s; mask-position: 32% 10%; -webkit-mask-position: 32% 10%;} #newMv #newMv_gallery .mvArea#newMV2 .c4{ transition: 1.8s; mask-position: 40% 89%; -webkit-mask-position: 40% 89%;} #newMv #newMv_gallery .mvArea#newMV2 .c5{ transition: 1.8s; mask-position: 53% 55%; -webkit-mask-position: 53% 55%;} #newMv #newMv_gallery .mvArea#newMV2 .c6{ transition: 1.9s; mask-position: 69% 8%; -webkit-mask-position: 69% 8%;} #newMv #newMv_gallery .mvArea#newMV2 .c7{ transition: 2.4s; mask-position: 72% 78%; -webkit-mask-position: 72% 78%;} #newMv #newMv_gallery .mvArea#newMV2 .c8{ transition: 2.0s; mask-position: 95% 42%; -webkit-mask-position: 95% 42%;} #newMv #newMv_gallery .mvArea#newMV2 .c10{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} #newMv #newMv_gallery .mvArea#newMV2 .c9{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV2.play .c1 { mask-size: 1700px 1700px; -webkit-mask-size: 1700px 1700px;} #newMv #newMv_gallery .mvArea#newMV2.play .c2 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV2.play .c3 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV2.play .c4 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV2.play .c5 { mask-size: 1600px 1600px; -webkit-mask-size: 1600px 1600px;} #newMv #newMv_gallery .mvArea#newMV2.play .c6 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV2.play .c7 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV2.play .c8 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV2.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV2.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV2 .c1{ transition: 2.2s; } #newMv #newMv_gallery .mvArea#newMV2 .c2{ transition: 2.6s;} #newMv #newMv_gallery .mvArea#newMV2 .c3{ transition: 2.4s; } #newMv #newMv_gallery .mvArea#newMV2 .c4{ transition: 2.8s; mask-position: 40% 62%; -webkit-mask-position: 40% 62%;} #newMv #newMv_gallery .mvArea#newMV2 .c5{ transition: 2.8s; } #newMv #newMv_gallery .mvArea#newMV2 .c6{ transition: 2.9s;} #newMv #newMv_gallery .mvArea#newMV2 .c7{ transition: 2.4s; mask-position: 72% 78%; -webkit-mask-position: 72% 78%;} #newMv #newMv_gallery .mvArea#newMV2 .c8{ transition: 2.0s; mask-position: 45% 92%; -webkit-mask-position: 45% 92%;} #newMv #newMv_gallery .mvArea#newMV2 .c9{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV2 .c10{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV2.play .c1 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV2.play .c2 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV2.play .c3 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV2.play .c4 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV2.play .c5 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV2.play .c6 { mask-size: 1000px 1800px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV2.play .c7 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV2.play .c8 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV2.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV2.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*■■ newMV3 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV3::after, #newMv #newMv_gallery .mvArea#newMV3 .backImg div{ background: url("../img/index/3sp.webp") 50% 50% no-repeat #000; background-size: cover;} } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV3::after, #newMv #newMv_gallery .mvArea#newMV3 .backImg div{ background: url("../img/index/3sp.webp") 50% 50% no-repeat #000; background-size: cover;} } #newMv #newMv_gallery .mvArea#newMV3 .c1{ transition: 2.3s; mask-position: 56% 35%; -webkit-mask-position: 56% 35%;} #newMv #newMv_gallery .mvArea#newMV3 .c2{ transition: 1.5s; mask-position: 72% 9%; -webkit-mask-position: 72% 9%;} #newMv #newMv_gallery .mvArea#newMV3 .c3{ transition: 2.1s; mask-position: 84% 94%; -webkit-mask-position: 84% 94%;} #newMv #newMv_gallery .mvArea#newMV3 .c4{ transition: 1.8s; mask-position: 95% 72%; -webkit-mask-position: 95% 72%;} #newMv #newMv_gallery .mvArea#newMV3 .c5{ transition: 1.9s; mask-position: 2% 84%; -webkit-mask-position: 2% 84%;} #newMv #newMv_gallery .mvArea#newMV3 .c6{ transition: 2.0s; mask-position: 12% 22%; -webkit-mask-position: 12% 22%;} #newMv #newMv_gallery .mvArea#newMV3 .c7{ transition: 1.8s; mask-position: 32% 78%; -webkit-mask-position: 32% 78%;} #newMv #newMv_gallery .mvArea#newMV3 .c8{ transition: 2.2s; mask-position: 42% 32%; -webkit-mask-position: 42% 32%;} #newMv #newMv_gallery .mvArea#newMV3 .c9{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} #newMv #newMv_gallery .mvArea#newMV3 .c10{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV3.play .c1 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV3.play .c2 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV3.play .c3 { mask-size: 1600px 1600px; -webkit-mask-size: 1600px 1600px;} #newMv #newMv_gallery .mvArea#newMV3.play .c4 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV3.play .c5 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV3.play .c6 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV3.play .c7 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV3.play .c8 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV3.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV3.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV3 .c1{ transition: 2.3s; } #newMv #newMv_gallery .mvArea#newMV3 .c2{ transition: 2.5s; } #newMv #newMv_gallery .mvArea#newMV3 .c3{ transition: 2.1s; mask-position: 65% 84%; -webkit-mask-position: 65% 84%;} #newMv #newMv_gallery .mvArea#newMV3 .c4{ transition: 2.8s; mask-position: 45% 22%; -webkit-mask-position: 45% 22%;} #newMv #newMv_gallery .mvArea#newMV3 .c5{ transition: 2.9s; mask-position: 2% 66%; -webkit-mask-position: 2% 66%;} #newMv #newMv_gallery .mvArea#newMV3 .c6{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV3 .c7{ transition: 2.8s;} #newMv #newMv_gallery .mvArea#newMV3 .c8{ transition: 2.2s;} #newMv #newMv_gallery .mvArea#newMV3 .c9{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV3 .c10{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV3.play .c1 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV3.play .c2 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV3.play .c3 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV3.play .c4 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV3.play .c5 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV3.play .c6 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV3.play .c7 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV3.play .c8 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV3.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV3.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*■■ newMV4 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV4::after, #newMv #newMv_gallery .mvArea#newMV4 .backImg div{background: url("../img/index/4sp.webp") 50% 50% no-repeat #064892; background-size: cover; } } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV4::after, #newMv #newMv_gallery .mvArea#newMV4 .backImg div{background: url("../img/index/4sp.webp") 50% 50% no-repeat #064892; background-size: cover; } } #newMv #newMv_gallery .mvArea#newMV4 .c1{ transition: 1.9s; mask-position: 5% 38%; -webkit-mask-position: 5% 38%;} #newMv #newMv_gallery .mvArea#newMV4 .c2{ transition: 2.4s; mask-position: 50% 6%; -webkit-mask-position: 50% 6%;} #newMv #newMv_gallery .mvArea#newMV4 .c3{ transition: 1.5s; mask-position: 38% 70%; -webkit-mask-position: 38% 70%;} #newMv #newMv_gallery .mvArea#newMV4 .c4{ transition: 1.8s; mask-position: 12% 85%; -webkit-mask-position: 12% 85%;} #newMv #newMv_gallery .mvArea#newMV4 .c5{ transition: 1.7s; mask-position: 80% 66%; -webkit-mask-position: 80% 66%;} #newMv #newMv_gallery .mvArea#newMV4 .c6{ transition: 2.2s; mask-position: 72% 5%; -webkit-mask-position: 72% 5%;} #newMv #newMv_gallery .mvArea#newMV4 .c7{ transition: 2.0s; mask-position: 60% 38%; -webkit-mask-position: 60% 38%;} #newMv #newMv_gallery .mvArea#newMV4 .c8{ transition: 1.8s; mask-position: 100% 90%; -webkit-mask-position: 100% 90%;} #newMv #newMv_gallery .mvArea#newMV4 .c9{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV4 .c10{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} #newMv #newMv_gallery .mvArea#newMV4.play .c1 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV4.play .c2 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV4.play .c3 { mask-size: 1100px 1100px; -webkit-mask-size: 1100px 1100px;} #newMv #newMv_gallery .mvArea#newMV4.play .c4 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV4.play .c5 { mask-size: 1400px 1400px; -webkit-mask-size: 1400px 1400px;} #newMv #newMv_gallery .mvArea#newMV4.play .c6 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV4.play .c7 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV4.play .c8 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV4.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV4.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV4 .menuDesign::before{ box-shadow: 0 0 0 10px #3c9fc3 inset;} #newMv #newMv_gallery .mvArea#newMV4 .c1{ transition: 2.5s; } #newMv #newMv_gallery .mvArea#newMV4 .c2{ transition: 2.4s; } #newMv #newMv_gallery .mvArea#newMV4 .c3{ transition: 2.2s; } #newMv #newMv_gallery .mvArea#newMV4 .c4{ transition: 2.8s; mask-position: 12% 75%; -webkit-mask-position: 12% 75%;} #newMv #newMv_gallery .mvArea#newMV4 .c5{ transition: 2.7s; mask-position: 80% 45%; -webkit-mask-position: 80% 45%;} #newMv #newMv_gallery .mvArea#newMV4 .c6{ transition: 2.2s; mask-position: 72% 5%; -webkit-mask-position: 72% 5%;} #newMv #newMv_gallery .mvArea#newMV4 .c7{ transition: 2.0s; mask-position: 60% 38%; -webkit-mask-position: 60% 38%;} #newMv #newMv_gallery .mvArea#newMV4 .c8{ transition: 2.8s; mask-position: 100% 90%; -webkit-mask-position: 100% 90%;} #newMv #newMv_gallery .mvArea#newMV4 .c9{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV4 .c10{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV4.play .c1 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV4.play .c2 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV4.play .c3 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV4.play .c4 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV4.play .c5 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV4.play .c6 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV4.play .c7 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV4.play .c8 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV4.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV4.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*■■ newMV5 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV5::after, #newMv #newMv_gallery .mvArea#newMV5 .backImg div{background: url("../img/index/5sp.webp") 50% 50% no-repeat #064892; background-size: cover; } } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV5::after, #newMv #newMv_gallery .mvArea#newMV5 .backImg div{background: url("../img/index/5sp.webp") 50% 50% no-repeat #064892; background-size: cover; } } #newMv #newMv_gallery .mvArea#newMV5 .c1{ transition: 2.2s; mask-position: 15% 22%; -webkit-mask-position: 15% 22%;} #newMv #newMv_gallery .mvArea#newMV5 .c2{ transition: 1.6s; mask-position: 2% 70%; -webkit-mask-position: 2% 70%;} #newMv #newMv_gallery .mvArea#newMV5 .c3{ transition: 1.4s; mask-position: 32% 10%; -webkit-mask-position: 32% 10%;} #newMv #newMv_gallery .mvArea#newMV5 .c4{ transition: 1.8s; mask-position: 40% 89%; -webkit-mask-position: 40% 89%;} #newMv #newMv_gallery .mvArea#newMV5 .c5{ transition: 1.8s; mask-position: 53% 55%; -webkit-mask-position: 53% 55%;} #newMv #newMv_gallery .mvArea#newMV5 .c6{ transition: 1.9s; mask-position: 69% 8%; -webkit-mask-position: 69% 8%;} #newMv #newMv_gallery .mvArea#newMV5 .c7{ transition: 2.4s; mask-position: 72% 78%; -webkit-mask-position: 72% 78%;} #newMv #newMv_gallery .mvArea#newMV5 .c8{ transition: 2.0s; mask-position: 95% 42%; -webkit-mask-position: 95% 42%;} #newMv #newMv_gallery .mvArea#newMV5 .c10{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} #newMv #newMv_gallery .mvArea#newMV5 .c9{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV5.play .c1 { mask-size: 1700px 1700px; -webkit-mask-size: 1700px 1700px;} #newMv #newMv_gallery .mvArea#newMV5.play .c2 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV5.play .c3 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV5.play .c4 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV5.play .c5 { mask-size: 1600px 1600px; -webkit-mask-size: 1600px 1600px;} #newMv #newMv_gallery .mvArea#newMV5.play .c6 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV5.play .c7 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV5.play .c8 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV5.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV5.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV5 .c1{ transition: 2.2s; } #newMv #newMv_gallery .mvArea#newMV5 .c2{ transition: 2.6s;} #newMv #newMv_gallery .mvArea#newMV5 .c3{ transition: 2.4s; } #newMv #newMv_gallery .mvArea#newMV5 .c4{ transition: 2.8s; mask-position: 40% 62%; -webkit-mask-position: 40% 62%;} #newMv #newMv_gallery .mvArea#newMV5 .c5{ transition: 2.8s; } #newMv #newMv_gallery .mvArea#newMV5 .c6{ transition: 2.9s;} #newMv #newMv_gallery .mvArea#newMV5 .c7{ transition: 2.4s; mask-position: 72% 78%; -webkit-mask-position: 72% 78%;} #newMv #newMv_gallery .mvArea#newMV5 .c8{ transition: 2.0s; mask-position: 45% 92%; -webkit-mask-position: 45% 92%;} #newMv #newMv_gallery .mvArea#newMV5 .c9{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV5 .c10{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV5.play .c1 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV5.play .c2 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV5.play .c3 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV5.play .c4 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV5.play .c5 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV5.play .c6 { mask-size: 1000px 1800px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV5.play .c7 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV5.play .c8 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV5.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV5.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*■■ newMV6 ■■■■■■■■■■■■■■■-*/ @media screen and (min-width: 701px) { #newMv #newMv_gallery .mvArea#newMV6::after, #newMv #newMv_gallery .mvArea#newMV6 .backImg div{background: url("../img/index/6sp.webp") 50% 50% no-repeat #fff; background-size: cover; } } @media screen and (max-width: 700px) { #newMv #newMv_gallery .mvArea#newMV6::after, #newMv #newMv_gallery .mvArea#newMV6 .backImg div{background: url("../img/index/6sp.webp") 50% 100% no-repeat #fff; background-size: cover; } } #newMv #newMv_gallery .mvArea#newMV6 .c1{ transition: 2.3s; mask-position: 56% 35%; -webkit-mask-position: 56% 35%;} #newMv #newMv_gallery .mvArea#newMV6 .c2{ transition: 1.5s; mask-position: 72% 9%; -webkit-mask-position: 72% 9%;} #newMv #newMv_gallery .mvArea#newMV6 .c3{ transition: 2.1s; mask-position: 84% 94%; -webkit-mask-position: 84% 94%;} #newMv #newMv_gallery .mvArea#newMV6 .c4{ transition: 1.8s; mask-position: 95% 72%; -webkit-mask-position: 95% 72%;} #newMv #newMv_gallery .mvArea#newMV6 .c5{ transition: 1.9s; mask-position: 2% 84%; -webkit-mask-position: 2% 84%;} #newMv #newMv_gallery .mvArea#newMV6 .c6{ transition: 2.0s; mask-position: 12% 22%; -webkit-mask-position: 12% 22%;} #newMv #newMv_gallery .mvArea#newMV6 .c7{ transition: 1.8s; mask-position: 32% 78%; -webkit-mask-position: 32% 78%;} #newMv #newMv_gallery .mvArea#newMV6 .c8{ transition: 2.2s; mask-position: 42% 32%; -webkit-mask-position: 42% 32%;} #newMv #newMv_gallery .mvArea#newMV6 .c9{ transition: 1.0s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;} #newMv #newMv_gallery .mvArea#newMV6 .c10{ transition: 1.4s; mask-position: 10% 20%; -webkit-mask-position: 10% 20%;} #newMv #newMv_gallery .mvArea#newMV6.play .c1 { mask-size: 1200px 1200px; -webkit-mask-size: 1200px 1200px;} #newMv #newMv_gallery .mvArea#newMV6.play .c2 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV6.play .c3 { mask-size: 1600px 1600px; -webkit-mask-size: 1600px 1600px;} #newMv #newMv_gallery .mvArea#newMV6.play .c4 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV6.play .c5 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} #newMv #newMv_gallery .mvArea#newMV6.play .c6 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} #newMv #newMv_gallery .mvArea#newMV6.play .c7 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV6.play .c8 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV6.play .c9 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} #newMv #newMv_gallery .mvArea#newMV6.play .c10 { mask-size: 1800px 1800px; -webkit-mask-size: 1800px 1800px;} /**/ #newMv #newMv_gallery .mvArea#newMV6 .c1{ transition: 2.3s; } #newMv #newMv_gallery .mvArea#newMV6 .c2{ transition: 2.5s; } #newMv #newMv_gallery .mvArea#newMV6 .c3{ transition: 2.1s; mask-position: 65% 84%; -webkit-mask-position: 65% 84%;} #newMv #newMv_gallery .mvArea#newMV6 .c4{ transition: 2.8s; mask-position: 45% 22%; -webkit-mask-position: 45% 22%;} #newMv #newMv_gallery .mvArea#newMV6 .c5{ transition: 2.9s; mask-position: 2% 66%; -webkit-mask-position: 2% 66%;} #newMv #newMv_gallery .mvArea#newMV6 .c6{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV6 .c7{ transition: 2.8s;} #newMv #newMv_gallery .mvArea#newMV6 .c8{ transition: 2.2s;} #newMv #newMv_gallery .mvArea#newMV6 .c9{ transition: 1.6s;} #newMv #newMv_gallery .mvArea#newMV6 .c10{ transition: 2.0s;} #newMv #newMv_gallery .mvArea#newMV6.play .c1 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} #newMv #newMv_gallery .mvArea#newMV6.play .c2 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV6.play .c3 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV6.play .c4 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;} #newMv #newMv_gallery .mvArea#newMV6.play .c5 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;} #newMv #newMv_gallery .mvArea#newMV6.play .c6 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;} #newMv #newMv_gallery .mvArea#newMV6.play .c7 { mask-size: 500px 500px; -webkit-mask-size: 500px 500px;} #newMv #newMv_gallery .mvArea#newMV6.play .c8 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV6.play .c9 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} #newMv #newMv_gallery .mvArea#newMV6.play .c10 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;} /*------------------*/ #message-cont { width: 100%; min-height: 100vh; padding: 0 3% 35vh; display: flex; align-items: flex-start; justify-content: center;} #message-cont > *{ display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;} #message-cont #message-wrap{ width: 54%; display: flex; flex-direction: column;} #message-cont #message-wrap .ttlarea{ width: 100%; display: flex; flex-direction: column-reverse;} #message-cont #message-wrap .ttlarea .focus_ttl{ display: block; font-size: 15px; letter-spacing: 0.1em; line-height: 1.8em; padding-bottom: 5px;} #message-cont #message-wrap .ttl{} #message-cont #message-wrap .ttl .en{ position: relative;} #message-cont #message-wrap .ttl .en::before{ width: 1px; height: 0px; top: 50%; margin-top: 0px; right: -22px;} #message-cont #message-wrap .ttl .en::after{ width: 0px; height: 1px; top: 50%; right: -22px;} #message-cont #message-wrap .ttl .en::before, #message-cont #message-wrap .ttl .en::after{ content: ""; background: #555; position: absolute; transition: 1.4s;} #message-cont #message-wrap .ttl .en.setView::before{ height: 20px; margin-top: -10px;} #message-cont #message-wrap .ttl .en.setView::after{ width: 20px; right: -32px;} #message-cont #message-wrap .ttl .en, #message-cont #message-wrap .ttl .en *{ font-size: 20px; letter-spacing: 2px; font-weight: 200;} #message-cont #message-wrap .ttl .txt{ padding: 40px 0 60px; margin-left: -0.4em;} #message-cont #message-wrap .ttl .txt, #message-cont #message-wrap .ttl .txt *{ font-size: 24px; font-weight: 300; letter-spacing: 0.4em; } #message-cont #message-wrap p { display: flex; flex-direction: column; align-items: flex-start;} #message-cont #message-wrap p > span{ display: block; margin: 15px 0; line-height: 2.0em; font-size: 15px; letter-spacing: 3px; vertical-align: baseline;} #message-cont #message-wrap p > span b{ display: inline; vertical-align: baseline; font-weight: 500;} /**/ #message-cont .mslink-p{ display: block; margin:0 0 5vh 10%; } #message-cont .mslink-p a{ padding: 15px; border: solid 1px #ccc; border-radius: 50px;} #message-cont .mslink-p a:hover{border: solid 1px #fff;} #message-cont .mslink-p a .t{ font-size: 14px; font-weight: 500; color: #666;} #message-cont .mslink-p a:hover .t{ color: #111;} @media screen and (max-width: 1100px) { #message-cont #message-wrap{ width: auto; flex:1;} } @media screen and (max-width:800px) { #message-cont { min-height: 50vh; padding:10vh 10%;} #message-cont .inner1100{ flex-direction: column; align-items: flex-start;} #message-cont #message-wrap{ width: 100%; flex:1;} #message-cont #message-wrap p{ margin-bottom: 430;} #message-cont .mslink-p{ margin:30px 0; flex: 1;} } @media screen and (max-width:600px) { #message-cont #message-wrap .ttl .txt, #message-cont #message-wrap .ttl .txt *{ font-size: 3.2vw;} } /**/ body, main{ overflow-y: visible !important;} .focus-border{ pointer-events: none; width: 90vw; height: 86vh; position: fixed; left: 5vw; top: 8vh; border: solid 10px #fff; z-index: 100;} body::before{ width: 100%; height: 300%; position: absolute; left: 0; top: 0; content: ""; background: #fff; content: ""; opacity: 1; transition: 3.4s; pointer-events: none;} body.opBody::before{ opacity: 0; z-index: 99999999999;} /* マスク */ #top-mv-start { position: fixed; top: 50%; left: 50%; width: 250px; height: 300px; min-width: 250px !important; min-height: 300px !important; transform: translate(-50%, -50%); border: 80px solid rgba(180,180,180,.85); box-sizing: border-box; z-index: 999999999999; background: rgba(255,255,255,1); box-shadow: 0 0 0 9999px #fff; box-sizing: border-box;} .opBody #top-mv-start{ background: rgba(255,255,255,0.0); pointer-events: none;} /*=========================== #topMv ===========================*/ #topMv{ } #topMv #mv-ttl{ width: 100%; height: 60vh; min-height: 300px; display: flex; flex-direction: row; align-items: center; justify-content: center;} #topMv #mv-ttl .inner{ max-width: 900px; display: flex; justify-content: flex-start; align-items: flex-start; padding:60px 15px 0;} #topMv #mv-ttl .inner .ttl{ display: flex; flex-direction: column-reverse; } #topMv #mv-ttl .inner .ttl h1{ font-size: 13px; letter-spacing: 7.4px; color:#555; padding: 8px 0;} #topMv #mv-ttl .inner .ttl h2{ font-size: 19px; letter-spacing: 5px; color:#666;} #topMv #mv-ttl .inner .ttl .eng{ font-size: 48px; letter-spacing: 4px; color: #999; margin-bottom: 8px;} @media screen and (max-width: 600px) { #topMv #mv-ttl{ height: 60vh;} #topMv #mv-ttl .inner .ttl h1{ font-size: 3.4vw; letter-spacing: 0.05vw;} #topMv #mv-ttl .inner .ttl h2{ font-size: 4.0vw; letter-spacing: 0.05vw;} #topMv #mv-ttl .inner .ttl .eng{ font-size: 12.2vw; letter-spacing: 0.05vw; line-height: 1.4em; margin-bottom: 20px;} } /*=========================== #concept ===========================*/ #concept{ width: 100%; position: relative; background: #fff; margin-bottom: 250px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; z-index: 1;} #concept .image-wrap{ width: 100%; height: 100vh; position: sticky; top: 0vh; left: 0; display: flex; align-items: center; justify-content: center; z-index: 3;} #concept .image-wrap .imageBox{ width: 80%; height: 90vh; border-radius: 60px; background: url(../img/top/image.webp) 0 70% no-repeat; background-size: cover; position: relative; z-index: 1; overflow: hidden;} @media screen and (min-width: 800.01px) { #concept .image-wrap .imageBox{ background: url(../img/top/image.webp) 0 70% no-repeat; background-size: cover;} } @media screen and (max-width: 800px) { #concept .image-wrap .imageBox{ background: url(../img/top/sp/image.webp) 50% 50% no-repeat; background-size: cover;} } #concept .image-wrap .imageBox span.overray{ width: 100%; height: 100vh; content: ""; position: absolute; left: 0; top: 0; background: rgba(110,110,110,.92); z-index: 10; opacity: 0; transition: 0.8s;} /**/ #concept #concept_info{ display:flex; justify-content: center; padding:0px 3% 300px ; position: relative; z-index: 100;} #concept #concept_info .txt-wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center;} #concept #concept_info .txt-wrap .ttl{ display: flex; flex-direction: column; margin-bottom: 50px;} #concept #concept_info .txt-wrap .ttl .txt{ margin-left: -0.5em;} #concept #concept_info .txt-wrap .ttl span{ color: #fff;} #concept #concept_info .ttl .txt.setTit > span{ font-size: 24px; letter-spacing: 0.6em; font-weight: 200;} #concept #concept_info .txt-wrap > p{ display: block; text-align: center;} #concept #concept_info .txt-wrap > p span{ display: block; text-align: center; font-size: 18px; line-height: 2.2em; letter-spacing: 0.2em; color: #fff; margin: 10px 0 40px;} @media screen and (max-width: 750px) { #concept #concept_info .txt-wrap .ttl{ width: 100%; padding: 0 2%;} #concept #concept_info .txt-wrap .ttl .txt{ margin-left: 0;} #concept #concept_info .ttl .txt.setTit > span{ letter-spacing: 0.05vw; font-size: 5.0vw;} #concept #concept_info .txt-wrap > p span{ display: block; text-align: left; line-height: 2.0em; padding: 0 2%;} #concept #concept_info .txt-wrap > p br{ display: none;} } /*=========================== #focus ===========================*/ #focus{ padding:0 5%;} #focus #tag-menu{ width: 100%; display: flex; justify-content: center;} #focus #tag-menu .inner-wrap{ display: flex; flex-direction: row; justify-content: space-between;} /*left*/ #focus #tag-menu .inner-wrap .left { width: 48%; min-width: 400px; display: flex; flex-direction: column;} #focus #tag-menu .inner-wrap .left .c-tag{ width: 100%; display: block; height: 1px;} #focus #tag-menu .inner-wrap .left .box{ width: 100%; display: flex; flex-direction: column; border-top: solid 1px #ddd;} /*------- .left #focus1 --------*/ #focus #tag-menu .inner-wrap .left .box#focus1{ padding-bottom: 60px; border-top: none; padding-left: 10px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttlarea{ width: 100%; display: flex; flex-direction: column-reverse;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttlarea .focus_ttl{ display: block; font-size: 15px; letter-spacing: 0.1em; line-height: 1.8em; padding-bottom: 5px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl{} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en{ position: relative;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::before{ width: 1px; height: 0px; top: 50%; margin-top: 0px; right: -22px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::after{ width: 0px; height: 1px; top: 50%; right: -22px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::before, #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en::after{ content: ""; background: #555; position: absolute; transition: 1.4s;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en.setView::before{ height: 20px; margin-top: -10px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en.setView::after{ width: 20px; right: -32px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en, #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .en *{ font-size: 20px; letter-spacing: 2px; font-weight: 200;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt{ padding: 40px 0 60px; margin-left: -0.8em;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt, #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt *{ font-size: 24px; font-weight: 300; letter-spacing: 0.4em; } #focus #tag-menu .inner-wrap .left .box p { display: flex; flex-direction: column; align-items: flex-start;} #focus #tag-menu .inner-wrap .left .box p > span{ display: block; margin: 8px 0; line-height: 1.2em; font-size: 14px; vertical-align: baseline;} #focus #tag-menu .inner-wrap .left .box p > span b{ display: inline; vertical-align: baseline; font-weight: 500;} /*------- .left .ser --------*/ #focus #tag-menu .inner-wrap .left .box.ser{} #focus #tag-menu .inner-wrap .left .box.ser a{ padding: 120px 100px 120px 10px;} #focus #tag-menu .inner-wrap .left .box.ser a:hover *{ color: #000;} #focus #tag-menu .inner-wrap .left .box.ser a:hover h3 .txt *{ letter-spacing: 3px;} #focus #tag-menu .inner-wrap .left .box.ser a p{ font-size: 14px; position: relative; padding-top: 25px; margin-top: 10px;} #focus #tag-menu .inner-wrap .left .box.ser a p span{ width: 0; height: 5px; display: block; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.8s; animation: bk-color 120.0s ease-in infinite forwards; border-radius: 3px;} #focus #tag-menu .inner-wrap .left .box.ser a:hover p span{ width: 100px;} /*right*/ #focus #tag-menu .inner-wrap .right { width: 36%; position: relative;} #focus #tag-menu .inner-wrap .right .bk_imgbox{ width: 100%; height: 66vh; max-height:700px; display: block; position: sticky; top: 20vh;} #focus #tag-menu .inner-wrap .right .bk_imgbox::before{ width: 100%; height: calc(100% + 30px); position: absolute; left: 0; bottom: 0; content: ""; z-index: 10; background: #fff; transition: 2.2s;} #focus.setView #tag-menu .inner-wrap .right .bk_imgbox::before { height: 0;} /**/ #focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox1, #focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox2{ width:100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 4px; overflow: hidden; transition: 0.6s; opacity: 1; filter: blur(0px);} #focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox1, #focus #tag-menu .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0 0 0px 0 round 20px);} /*move*/ #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0px 51% 100px 0 round 4px);} #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(100px 0 0px 51% round 4px);} #focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0px 50% 50% 0 round 600px);} #focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(25% 0 0 25% round 600px);} #focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0 0 51% 0 round 60px 60px 0 0);} #focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(51% 0 0 0 round 0 0 60px 60px);} #focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(30% 0 0 10% round 600px);} #focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0px 39% 55% 0% round 600px);} #focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0 75% 0% 0 round 200px 0 0 20px);} #focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0% 0 0 28% round 0 20px 200px 0);} #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox .imgbox1{ clip-path: inset(0px 52% 0 0 round 50% 0 0 50%);} #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox .imgbox2{ clip-path: inset(0 0 0px 52% round 0 50% 50% 0);} #focus #tag-menu .inner-wrap .right .bk_imgbox div span{ width: 100%; height: 100%; display: flex; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; transition: 2.4s;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span > *{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} /* @media screen and (min-width: 800.01px) { #focus #tag-menu .inner-wrap .right .bk_imgbox div span > img.pcimg{ display: block !important;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span > img.spimg{ display: none !important;} } @media screen and (max-width: 800px) { #focus #tag-menu .inner-wrap .right .bk_imgbox div span > img.pcimg{ display: none !important;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span > img.spimg{ display: block !important;} } */ #focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no1{ z-index: 30;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no2{ z-index: 25;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no3{ z-index: 20;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no4{ z-index: 15;} #focus #tag-menu .inner-wrap .right .bk_imgbox div span.image_no5{ z-index: 10;} /**/ #focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no1, #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no1{ } /**/ #focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no1, #focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no1, #focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no1, #focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no1, #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no1{ width: 100%; opacity: 0; filter: blur(30px);} /**/ #focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no2, /*#focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no2, */ /*#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no2, */ #focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no2, #focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no2, #focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no2, #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no2{ width: 100%; opacity: 0; filter: blur(30px);} /**/ #focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no3, #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no3, /*#focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no3, */ /*#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no3, */ #focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no3, #focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no3, #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no3{ width: 100%; opacity: 0; filter: blur(30px);} /**/ /**/ #focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no4, #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no4, #focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no4, /*#focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no4, */ /*#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no4, */ #focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no4, #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no4{ width: 100%; opacity: 0; filter: blur(30px);} /**/ /**/ #focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no5, #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no5, #focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no5, #focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no5, /*#focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no5, */ /*#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no5, */ #focus #tag-menu.tag6 .inner-wrap .right .bk_imgbox div span.image_no5{ width: 100%; opacity: 0; filter: blur(30px);} /**/ /**/ #focus #tag-menu.tag0 .inner-wrap .right .bk_imgbox div span.image_no6, #focus #tag-menu.tag1 .inner-wrap .right .bk_imgbox div span.image_no6, #focus #tag-menu.tag2 .inner-wrap .right .bk_imgbox div span.image_no6, #focus #tag-menu.tag3 .inner-wrap .right .bk_imgbox div span.image_no6, #focus #tag-menu.tag4 .inner-wrap .right .bk_imgbox div span.image_no6{ width: 100%; opacity: 0; filter: blur(30px);} /**/ /*#focus #tag-menu.tag5 .inner-wrap .right .bk_imgbox div span.image_no6, #focus #tag-menu.tag6 .inner1100 .right .bk_imgbox div span.image_no6{ width: 0%;}*/ @media screen and (max-width: 800px) { #focus{ padding:0 0 100px; } #focus #tag-menu .inner-wrap{ flex-direction: column-reverse;} #focus #tag-menu .inner-wrap .left { width: 100%; min-width: auto; position: relative; z-index: 1;} #focus #tag-menu .inner-wrap .left .box{ width: 90%; margin: 3vh 5%; border: none;} #focus #tag-menu .inner-wrap .left .box#focus1{ padding: 120px 0; margin-bottom: 0; border-radius: 150px 150px 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0.9) 55%,rgba(255,255,255,0) 100%);} #focus #tag-menu .inner-wrap .left .box.ser a{ padding: 6vh 5% 12vh; background:rgba(255,255,255,.9) ; border-radius: 20px; border: solid 8px rgba(100,100,100,.2);} #focus #tag-menu .inner-wrap .left .box.ser a:hover *{ color: #000;} #focus #tag-menu .inner-wrap .left .box.ser a:hover h3 .txt *{ letter-spacing: 3px;} #focus #tag-menu .inner-wrap .left .box.ser a p{ font-size: 14px; color: #555; position: relative; padding-top: 25px; margin-top: 10px;} #focus #tag-menu .inner-wrap .left .box.ser a p span{ width: 0; height: 5px; display: block; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.8s; animation: bk-color 120.0s ease-in infinite forwards; border-radius: 3px;} #focus #tag-menu .inner-wrap .left .box.ser a:hover p span{ width: 100px;} #focus #tag-menu .inner-wrap .left .box#focus1 .ttlarea .focus_ttl, #focus #tag-menu .inner-wrap .left .box p > span, #focus #tag-menu .inner-wrap .left .box.ser a p, #focus #tag-menu .inner-wrap .left .box.ser a:hover p{ font-weight: 400; color: #111;} #focus #tag-menu .inner-wrap .left .box.ser a.linkBoxR .i{ right: 50%; top: auto; bottom: 20px; margin-top: 0; margin-right: -34px;} /*right*/ #focus #tag-menu .inner-wrap .right { width: 46%; position: relative;} #focus #tag-menu .inner-wrap .right .bk_imgbox{ width: 100%; height: 80vh; max-height:800px; display: block; position: sticky; top: 10vh;} #focus #tag-menu .inner-wrap .right .bk_imgbox::before{ width: 100%; height: calc(100% + 30px); position: absolute; left: 0; bottom: 0; content: ""; z-index: 10; background: #fff; transition: 2.2s;} #focus.setView #tag-menu .inner-wrap .right .bk_imgbox::before { height: 0;} /**/ #focus #tag-menu .inner-wrap .right{ width: 80%; height: 80vh; position: sticky; left: 10%; top: 10vh;} } @media screen and (max-width: 600px) { #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt, #focus #tag-menu .inner-wrap .left .box#focus1 .ttl .txt *{ font-size: 6.2vw; letter-spacing: 0.2em; } } /*=========================== #seo ===========================*/ #seo{ padding:100px 5% ;} #seo .inner-wrap{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding:70px 50px; border: solid 6px #efefef; border-radius: 20px;} /*left*/ #seo .inner-wrap .left { width: 46%; display: flex; flex-direction: column;} #seo .inner-wrap .left .ttl{ display: flex; flex-direction: column; margin-bottom:20px;} #seo .inner-wrap .left .ttl .en{ font-size: 12px; letter-spacing: 0; line-height: 1em; margin: 0;} #seo .inner-wrap .left .ttl .txt, #seo .inner-wrap .left .ttl .txt *{ font-size: 22px;} #seo .inner-wrap .left h3, #seo .inner-wrap .left p span{ display: flex; font-size: 14px; margin: 4px 0;} /*right*/ #seo .inner-wrap .right { width: 46%; position: relative; display: flex; align-items: stretch; flex-direction: column-reverse;} #seo .inner-wrap .right .seo-ser{ width: 100%; display: flex; flex-direction: column; padding: 10px; position: relative; border-radius: 10px; margin-top: 20px;} #seo .inner-wrap .right .seo-ser .bk-color{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 10px; z-index: -1; opacity: 0.2;} #seo .inner-wrap .right .seo-ser h4{ font-size: 12px; padding: 0 4px 4px;} #seo .inner-wrap .right .seo-ser p{ display: flex; flex-wrap: wrap;} #seo .inner-wrap .right .seo-ser p span{ font-size: 11px; line-height: 1.2em; padding: 3px;} #seo .inner-wrap .right .seo-ser p span::after{ content: "|"; margin-left: 5px; color: #ccc;} #seo .inner-wrap .right .seo-ser p span:last-child:after{ content: ""; display: none;} /**/ #seo .inner-wrap .right .pageLinks{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0 5px;} #seo .inner-wrap .right .pageLinks a{ width: auto; display: block; font-size: 14px; padding: 4px 10px; border-radius: 30px; border: solid 1px #aaa; margin: 5px 10px 5px 0; overflow: hidden; position: relative; color: #444;} #seo .inner-wrap .right .pageLinks a::before{ content: "・";} #seo .inner-wrap .right .pageLinks a::after{ content: ""; width: 0; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; z-index: -1; transition: 0.6s;} #seo .inner-wrap .right .pageLinks a:hover::after{ width: 100%;} #seo .inner-wrap .right .pageLinks a:hover{ border: solid 1px #111; color: #000;} @media screen and (max-width: 900px) { #seo .inner-wrap{ padding:40px 3%; flex-direction: column;} #seo .inner-wrap .left .ttl .en{ margin-bottom: 10px;} #seo .inner-wrap .left { width: 100%; padding: 0 10px 20px;} #seo .inner-wrap .right { width: 100%;} } @media screen and (max-width: 500px) { #seo .inner-wrap .right .pageLinks a{ width: 100%; padding: 10px; border: solid 1px #222; color: #111; margin: 5px 0;} } /*========================= 画像 ==========================*/ #imageBox.spanBox{ display: none !important;} #imageBox.spanBox{ width: 96%; max-width: 100%; height: 500px; margin: 0 2% 40px; display: flex; justify-content: center; align-items: center; background: #777; border-radius: 30px;} #imageBox.spanBox > div{ width: 100%; height: 100%; display: block; position: relative; border-radius: 30px; overflow: hidden; opacity: 0.5;} #imageBox.spanBox > div span{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; display: flex; align-items: center; justify-content: center;} #imageBox.spanBox > div span *{ min-width: 100%; min-height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1;} /*pc本体*/ #imageBox.spanBox > div.spanSet0 span.img0, #imageBox.spanBox > div.spanSet1 span.img1, #imageBox.spanBox > div.spanSet2 span.img2, #imageBox.spanBox > div.spanSet3 span.img3, #imageBox.spanBox > div.spanSet4 span.img4{ opacity: 0; z-index: 10; animation: spanBox 1.4s ease-in forwards;} /**/ #imageBox.spanBox > div.spanSet1 span.img0, #imageBox.spanBox > div.spanSet2 span.img1, #imageBox.spanBox > div.spanSet3 span.img2, #imageBox.spanBox > div.spanSet4 span.img3, #imageBox.spanBox > div.spanSet0 span.img4 { opacity: 1; z-index: 1;} @keyframes spanBox{ 0%{ opacity: 0; z-index: 10;} 10%{ opacity: 0; z-index: 10;} 90%{ opacity: 1; z-index: 10;} 100%{ opacity: 1; z-index: 2;} } /*========================= 事例 ==========================*/ #works{ margin: 140px 0;} #works .inner-wrap{ flex-direction: column; justify-content: space-between;} /**/ #works .inner-wrap .works-txt{ width: 100%; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 15px;} #works .inner-wrap .works-txt h2{ display: flex; flex-direction: row; align-items: flex-end;} #works .inner-wrap .works-txt h2 .en{ font-size: 15px; margin: 0 15px 7px 16%;} #works .inner-wrap .works-txt h2 .en *{ font-size: 15px;} #works .inner-wrap .works-txt h2 .txt{ white-space: nowrap;} #works .inner-wrap .works-txt p{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-right: 3%;} #works .inner-wrap .works-txt p a{ padding: 6px; border: solid 1px #ddd; border-radius: 50px;} #works .inner-wrap .works-txt p a span{ font-size: 14px;} #works .inner-wrap .works-txt p a span.t{ padding-right: 15px;} /**/ #works .inner-wrap .img-wrap{ width: 100%; display: block;} #works .inner-wrap .img-wrap .item-list { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;} #works .inner-wrap .img-wrap .item-list .item { width: 23%; display: block; margin: 0 1% 30px;} #works .inner-wrap .img-wrap .item-list .item a{ display: flex; width: 100%; flex-direction: column; position: relative; background: #000; border-radius: 5px; overflow: hidden; border: solid 1px #ddd;} #works .inner-wrap .img-wrap .item-list .item a .image{ display: block; position: relative; z-index: 1;} #works .inner-wrap .img-wrap .item-list .item a .image img{ width: 100%; height: auto; display: block; transition: 0.8s;} #works .inner-wrap .img-wrap .item-list .item a .txt{ width: 100%; display: block; opacity: 0; position: absolute; padding: 50px 15px 20px; left: 0; bottom: -20px; z-index: 10; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0.4) 100%); transition: 0.8s; pointer-events: none;} #works .inner-wrap .img-wrap .item-list .item a .txt h3{ font-size: 10.5px; color: #fff;} #works .inner-wrap .img-wrap .item-list .item a .txt p{ font-size: 14px; font-weight: bold; color: #fff;} @media screen and (min-width: 600px) { #works .inner-wrap .img-wrap .item-list .item a:hover .image img{ opacity: 0.85; transform: scale(1.1,1.1);} #works .inner-wrap .img-wrap .item-list .item a:hover .txt{ bottom: 0; opacity: 1;} } @media screen and (max-width: 800px) { #works .inner-wrap{ flex-direction: column; justify-content: flex-start; padding: 0;} /**/ #works .inner-wrap .works-txt{ width: 100%; padding: 0 40px 10px;} #works .inner-wrap .works-txt{ position: relative; top: auto; left: auto; margin-bottom: 0;} #works .inner-wrap .works-txt h2{ display: flex; flex-direction: row; justify-content: flex-start;} #works .inner-wrap .works-txt h2 span{ margin-right: 10px;} #works .inner-wrap .works-txt p span{ margin: 10px 0;} #works .inner-wrap .works-txt p span br{ display: none;} #works .inner-wrap .works-txt a{ padding: 2px 30px 2px 2px; border: solid 1px #ccc; border-radius: 60px; margin-top: 20px;} #works .inner-wrap .works-txt a.linkBtn .i{ height: 30px;} #works .inner-wrap .works-txt p span{ margin: 0;} /**/ #works .inner-wrap .img-wrap { width: 100%; display: flex; margin: 0; flex:auto; overflow-x: scroll; overflow-y: hidden; padding: 30px;} #works .inner-wrap .img-wrap .item-list{ width: auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: nowrap;} #works .inner-wrap .img-wrap .item-list .item { width: 200px; display: block; margin: 0 10px;} #works .inner-wrap .img-wrap .item-list .item a .txt{ opacity: 1; position: relative; padding: 10px 10px 25px; left: auto; bottom: auto; z-index: 10; background:#fff; transition: 0s; pointer-events: all;} #works .inner-wrap .img-wrap .item-list .item a .txt h3{ color: #111; text-align: left; line-height: 1.2em;} #works .inner-wrap .img-wrap .item-list .item a .txt p{ font-size: 12px; font-weight: 500; color: #555; text-align: left; line-height: 1.2em;} } /*=========================== #column ===========================*/ #column{ margin: 120px 0 150px;} #column > .wrap{ display: flex; justify-content: center; align-items: center; flex-direction: column;} #column > .wrap .inner800{ max-width:1100px; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 20px; padding: 0 20px;} #column > .wrap .inner800 .list-box {display: flex; flex-direction: column;} #column > .wrap .inner800 .list-box .tit { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin-bottom: 15px;} #column > .wrap .inner800 .list-box .tit h2{ display: flex; flex-direction: row; align-items: flex-end;} #column > .wrap .inner800 .list-box .tit h2 .en{ margin-right: 5px; margin-bottom: -2px;} #column > .wrap .inner800 .list-box .tit h2 .en, #column > .wrap .inner800 .list-box .tit h2 .en *{ font-size: 18px; } #column > .wrap .inner800 .list-box .tit h2 .jpn{ margin-bottom: 2px;} #column > .wrap .inner800 .list-box .tit h2 .jpn, #column > .wrap .inner800 .list-box .tit h2 .jpn *{ font-size: 10px; color: #555; font-weight: 300;} #column > .wrap .inner800 .list-box .tit p{ display: flex;} #column > .wrap .inner800 .list-box .tit p a{ display: flex; align-items: center; justify-content: center; padding: 2px 3px; border-radius: 4px; border: solid 1px #ddd; color: #666; font-weight: 400; font-size: 10px; margin-right: 15px; position: relative;} /**/ #column > .wrap .inner800 .list-box .tit p .bkhover:hover{ color: #111; border: solid 1px #111;} #column > .wrap .inner800 .list-box .tit p .bkhover::before, #column > .wrap .inner800 .list-box .tit p .bkhover::after{ content: ""; width: 100%; height: 100%; position: absolute; right: 0; top: 0;} #column > .wrap .inner800 .list-box .tit p .bkhover::before{ background: #f5f5f5; z-index: -1; transition: 0.4s;} #column > .wrap .inner800 .list-box .tit p .bkhover::after{ z-index: -10;} #column > .wrap .inner800 .list-box .tit p .bkhover:hover:before{ width: 0;} /**/ #column > .wrap .list-box#c { width: 53%;} #column > .wrap .list-box#n { width: 40%;} #column > .wrap ul::-webkit-scrollbar {width: 4px;} #column > .wrap ul::-webkit-scrollbar-track { background-color:#ddd;} #column > .wrap ul::-webkit-scrollbar-thumb { background-color:#555; border-radius:0px; box-shadow:0 0 0 1px rgba(255, 255, 255, .3);} #column > .wrap #column-list{width: 100%; display: block; max-height: 400px; overflow-y: scroll; padding:0 8px 30px;} #column > .wrap #column-list li{width: 100%; display: block; border-bottom: solid 1px #ddd; position: relative; z-index: 1;} #column > .wrap #column-list li:nth-child(1){ border-top: solid 1px #ddd;} #column > .wrap #column-list li:hover{ z-index: 10;} #column > .wrap #column-list li a{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-content: center; padding:20px 5px; background: #fff;} #column > .wrap #column-list li a:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.3);} #column > .wrap #column-list li a .image{ width: 80px; height: auto; display: flex; overflow: hidden; border-radius: 4px; background: #000;} #column > .wrap #column-list li a .image img{ display: block;} #column > .wrap #column-list li a:hover .image img{ opacity: 0.7; transform: scale(1.1,1.1);} /**/ #column > .wrap #column-list li a .text{ flex:1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding:0 10px 0 20px;} #column > .wrap #column-list li a .text h4{ display: flex; flex-direction: row; width: 100%; margin-bottom: 4px;} #column > .wrap #column-list li a .text h4 .date{ font-size: 11px; text-align: center; margin-bottom: 5px; font-weight: 300; letter-spacing: 0; color: #000;} #column > .wrap #column-list li a .text h4 .cate{ height: 16px; display: flex; align-items: center; font-size: 11px; padding:0 4px; border-radius: 1px; border: solid 1px #ddd; color: #555; text-align: center; font-weight: 300; line-height: 1.1em; margin-left: 10px;} #column > .wrap #column-list li a .text p{ font-size: 15px; line-height: 1.6em;} /**/ #column > .wrap #news-list{width: 100%; display: block; max-height: 400px; overflow-y: auto; padding:0px 10px 20px;} #column > .wrap #news-list li { width: 100%; display: block; border-top: solid 1px #ddd;} #column > .wrap #news-list li a{ display: flex; flex-wrap: wrap; padding: 15px 8px;} #column > .wrap #news-list li a:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.3);} #column > .wrap #news-list li a .date{ font-size: 11px; letter-spacing: 0;} #column > .wrap #news-list li a .tag{ font-size: 9px; padding: 2px 4px; border: solid 1px #ccc; border-radius: 1px; margin-left: 10px;} #column > .wrap #news-list li a .txt{ width: 100%; display: block; font-size: 13px; line-height: 1.4em; margin-top: 10px;} #column > .wrap #news-list li a:hover .txt{text-decoration: underline;} @media screen and (max-width: 850px){ #column > .wrap .inner800{ flex-direction: column-reverse; justify-content: center;} #column > .wrap .list-box#c{ width: 100%;} #column > .wrap .list-box#n { width: 100%; margin-bottom: 50px;} #column > .wrap.tit .inner800 p a{ font-size: 11px;} } @media screen and (max-width: 700px){ #column > .wrap #column-list li a{ padding:10px;} #column > .wrap #column-list li a .text{ flex-direction: column; padding: 10px 10px 10px 30px;} #column > .wrap #column-list li a .text h4{ width: 100%; margin: 0; flex-direction: row; align-items: center;} #column > .wrap #column-list li a .text h4 .date{ margin: 0 10px 0 0; font-weight: 400; font-size: 12px;} } @media screen and (max-width: 600px){ #column > .wrap .inner800 .list-box .tit{ align-items: center;} #column > .wrap .inner800 .list-box .tit h2{ flex-direction: column; align-items: flex-start; padding-right: 15px;} #column > .wrap .inner800 .list-box .tit h2 .jpn{ margin-bottom: 0;} #column > .wrap .inner800 .list-box .tit p a{ background: #fff; border: solid 1px #ccc; color: #777;} /**/ #column > .wrap #column-list{ padding: 10px 5px 10px 0;} #column > .wrap.tit .inner800{ align-items: baseline;} #column > .wrap.tit .inner800 p a{ display: block; padding: 4px 10px;} #column > .wrap.tit .inner800 h2{ flex-direction: column; justify-content: flex-start;} #column > .wrap.tit .inner800 h2 .en, #column > .wrap.tit .inner800 h2 .en *{ font-size: 6.0vw; font-weight: bold;} #column > .wrap.tit .inner800 h2 .jpn{width: 100%; } #column > .wrap.tit .inner800 h2 .jpn, #column > .wrap.tit .inner800 h2 .jpn *{ font-size: 2.0vw;} #column > .wrap #column-list li a .image{ width: 80px;} #column > .wrap #column-list li a .text p{ font-size: 13px;} }