@charset "UTF-8";
html {font-size: 16px;}
img {width: 100%; height: auto;}
a {display: block;}

.content-container {
    margin-top: 180px;
}
.top-wrap__mv--picture .pc{display: none;}
.top-wrap__mv--clone img{display: none;}

.npc {
display: none;
}

.fixed {
position: fixed;
width: 100%;
height: auto;
}
.slide-toggle {
position: absolute;
visibility: hidden;
overflow: hidden;
}

.slide-toggle.st-open {
position: relative;
visibility: visible;
}

.button {
font-family: A1明朝;
font-size: 16px;
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 15px 25px;
position: relative;
display: flex;
align-items: center;
transition: 0.4s;
justify-content: center;
}

.button::before {
content: "";
position: absolute;
width: calc(100% - 5px);
border-top: solid 1px #000;
top: 0;
right: 0;
transition: 0.4s;
}

.button::after {
content: "";
position: absolute;
width: calc(100% - 5px);
border-top: solid 1px #000;
bottom: 0;
left: 0;
transition: 0.4s;
}

.button:hover {
background: rgba(255, 255, 255, 0.2);
}

.button:hover::before {
width: calc(100%);
}

.button:hover::after {
width: calc(100%);
}

.button-arrow {
font-size: 0.6em;
margin-left: 1em;
}

.top {
width: 100%;
}

.top-wrap__mv {
position: relative;
}

.top-wrap__mv--logo {
position: absolute;
top: -28px;
}

.top-wrap__mv--logo img {
height: 56px;
width: auto;
}

.top-wrap__mv--catch {
position: absolute;
}

.top-wrap__mv--catch img {
width: 24px;
}

.top-wrap__mv--scroll {
position: absolute;
left: 20px;
bottom: -30px;
animation: scroll 5s infinite;
}

.top-wrap__mv--scroll img {
height: 130px;
width: auto;
}

.top-wrap__mv--play {
position: absolute;
bottom: -150px;
left: 50%;
transform: translate(-50%, 0);
}

.top-wrap__mv--play img {
height: 110px;
width: auto;
}

.top-wrap__mv--clone .sp{
position: absolute;
display: block;
top: 0;
left: 0;
animation: fade-mv 16s infinite;
}

.top-wrap__server {
display: none;
}

.top-logo {
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: center;
}

.top-logo--company {
width: 80px;
}

.top-logo--text {
width: 150px;
margin-left: 10px;
padding-top: 4px;
}
.concept-movie__list {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 3% 5vw 2% 5vw;
border-bottom: solid 1px #333;
cursor: pointer;
font-size: 180%;
}
.concept-movie__list--active {
border-bottom: none;
border-left: solid 1px #333;
border-top: solid 1px #333;
border-right: solid 1px #333;
border-radius: 15px 15px 0 0;
}
.concept-movie__list img {
width: 160px;
}
.concept-movie__container {
position: relative;
}
.concept {
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
/*padding-top: calc(10vw + 10px);*/
/*padding-bottom: 40px;*/
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
}

.concept p {
font-family: A1明朝;
line-height: 2;
/*letter-spacing: 0.2em;*/
}

.concept p + p {
margin-top: 1em;
}

.concept-button {
margin: 50px auto;
width: 70%;
}

.concept-movie {
display: none;
}

.concept-movie--active {
display: block;
}

.concept-head {
display: none;
}



.making {
margin-top: 100px;
}

.making-title {
display: flex;
justify-content: center;
}

.making-title img {
max-width: 150px;
}

.making-movie {
margin-top: 30px;
background: #999;
width: 100%;
}

.making-list {
padding: 50px 20px;
background: url("/shopping/img/water/making-bg.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}

.making-list__column {
margin-bottom: 50px;
display: flex;
}

.making-list__column--left {
width: 35%;
margin-right: 20px;
max-width: 140px;
}

.making-list__column--left p {
font-family: sans-serif;
font-size: 10px;
text-align: right;
margin-top: 0.5em;
}

.making-list__column--right {
flex: 1;
}

.making-list__column--right p {
font-family: A1明朝;
font-size: 12px;
margin-top: 14px;
line-height: 1.5;
text-align: left;
}

.making-list__column--child {
text-align: center;
letter-spacing: 0.3em;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.making-list__column--child h5 {
font-family: A1明朝;
font-size: 16px;
position: relative;
}


.making-list__column--child h4 {
font-family: A1明朝;
font-size: 24px;
letter-spacing: 0.3em;
margin-left: 0.5em;
}

.making-staff {
text-align: center;
padding-bottom: 50px;
}

/*2023*/
.message{
background: url("/shopping/img/genre/water/2023/bk_2023_03_sp.png") center top no-repeat;
color: #7E7E7E;
text-align: left;
padding-bottom: 10px;
background-size: cover;
}

.message-head h2{
font-size: 430%;
text-align: center;
font-weight: lighter;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"!important;
line-height: 1.7;
}

.message-head p{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"!important;
margin: 10vw 0 18vw 0;
text-align: center;
font-size: 4.5vw;
}

.message-content{
background: url("/shopping/img/genre/water/2023/bk_2023_02_sp.png") center top no-repeat;
background-size: 100%;
}

.message-content h2{
color: #fff;
font-size: 8vw;
padding: 48vw 5vw 5vw 0;
text-align: center;
font-weight: lighter;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"!important;
}

.message-content p{
margin: 0 auto;
padding: 5vw 12vw;
font-size: 3.5vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"!important;
}

.message-content h3{
font-size: 8vw;
padding: 12vw 5vw 2vw 0;
text-align: center;
font-weight: lighter;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"!important;
}

.appli{text-align: center;}
.appli img{width: auto;}

.making-area{background: none; padding: 5vw 0 20vw 0;}

.footer2023 {
background: url("/shopping/img/genre/water/2023/footer_bk_2023_sp.png") center top no-repeat;
background-size: cover;
min-height: 99vw;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;	
}

.footer2023 .pc{display: none;}

.footer2023 .sp{
position: absolute;
top: -12%;
left: 15%;
width: 44%;
text-align: left;
}
.footer2023 .sp img.oricon{width: 25vw;}
.footer2023 .sp img.oricon_text{width: 30vw;}
.footer2023 .sp .footer-button{width: 100%; margin: 0 auto; padding: 10px;}
.footer-button {
margin-top: 20px;
color: #fff;
border-right: solid 1px #fff;
border-left: solid 1px #fff;
}

.footer-button::before {
border-top: solid 1px #fff;
}

.footer-button::after {
border-top: solid 1px #fff;
}
.copyright {
background: #405064;
text-align: center;
padding: 30px 10px 100px;
}

.copyright img {
max-width: 300px;
}

.follow {
display: none;
}

.modal {
display: flex;
visibility: hidden;
opacity: 0;
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
justify-content: center;
align-items: center;
transition: 0.4s;
z-index: 100;
}

.modal-bg {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}

.modal--active {
visibility: visible;
opacity: 1;
}

.modal-wrap {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
padding-top: calc(9 / 16 * 100%);
}

.modal-wrap iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.linkbar {
position: fixed;
width: 100%;
height: 70px;
left: 0;
bottom: -70px;
background: rgba(47, 107, 177, 0.69);
display: flex;
align-items: center;
justify-content: center;
transition: 1.2s;
}

.linkbar-button {
color: #fff;
border-right: solid 1px #fff;
border-left: solid 1px #fff;
}

.linkbar-button::before {
border-top: solid 1px #fff;
}

.linkbar-button::after {
border-top: solid 1px #fff;
}

.linkbar--active {
bottom: 0px;
}

.footer2 .pcft{display: none;}
.footer2 .spft{display: block;}

.content .pcct{display: none;}
.content .spct{display: block; zoom: 2;}

@keyframes fade-mv {
0% {
opacity: 0;
}
35% {
opacity: 0;
}
50% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes fade-mv2 {
0% {
animation-delay: 16s;
opacity: 0;
}
35% {
opacity: 0;
}
50% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes scroll {
0% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
0% {
transform: translateY(0);
}
}

/* PC用スタイルセッティング */
@media screen and (min-width: 768px) {
.top-wrap__mv--picture .pc{display: block;}
.top-wrap__mv--picture .sp{display: none;}
.content-container {margin-top: 100px;}
.npc {
display: block;
}
.top {
height: auto;
}
.top-wrap__sp {
display: none;
}
.top-wrap__mv {
align-items: flex-end;
min-height: 55vw;
}
.top-wrap__mv--logo {
top: 20px;
right: 20px;
}
.top-wrap__mv--catch {
left: 10%;
top: 30%;
}
.top-wrap__mv--play {
display: none;
}
.top-wrap__mv--scroll {
bottom: 50px;
}
.top-wrap__mv--scroll img {
height: 160px;
}
.top-wrap__mv--clone {
position: absolute;
top: 0;
left: 0;
animation: fade-mv 16s infinite;
}
.top-wrap__server {
display: block;
position: absolute;
width: 20vw;
max-width: 200px;
bottom: 7.5%;
right: 2.5%;
}
.top-logo {
padding: 10px;
}
.top-logo--company {
width: 140px;
}
.top-logo--text {
width: 250px;
margin-left: 20px;
}
.concept {
padding-bottom: 0;
background-position: top center;
}
.concept-movie__menu{
margin-bottom: 20px;
max-width: 900px;
}
.concept-movie {
display: block;
max-width: 900px;
width: 100%;	  
margin: 0 auto;
}
.concept p {
font-size: 18px;
}
.concept-button {
display: none;
}
.making {
background: url("/shopping/img/water/making-bg_pc.jpg");
background-size: 100% 100%;
background-position: top center;
background-repeat: no-repeat;
}
.making-movie {
max-width: 800px;
margin: 30px auto;
}
.making-list {
background: none;
max-width: 940px;
margin: auto;
}

/*2023*/
.message{
background: url("/shopping/img/genre/water/2023/bk_2023_03.png") center top no-repeat;
background-size: cover;
color: #7E7E7E;
text-align: left;
padding-bottom: 10px;
}

.message-head h2{
font-size: 560%;
text-align: center;
padding: 60px 0 50px 0;
line-height: 1.7;
}

.message-head p{
margin: 0 0 140px 0;
text-align: center;
letter-spacing: 0.1em!important;
}

.message-content{
background: url("/shopping/img/genre/water/2023/bk_2023_02.png") center top no-repeat;
background-size: 100%;
}

.message-content h2{
color: #fff;
font-size: 560%;
padding: 27vw 30vw 5vw 0;
text-align: center;
}

.message-content p{
width: 48%;
margin: 0 auto;
padding: 0 0 0 10vw;
font-size: 158%;
letter-spacing: 0.1em!important;
}

.message-content h3{
font-size: 560%;
padding: 10vw 30vw 3vw 0;
text-align: center;
}

.appli{text-align: center; padding: 0 0 0 48vw;}
.appli img{width: auto;}

.making-area{background: none; padding: 5vw 0 8vw 0;}

.footer2023 {
background: url("/shopping/img/genre/water/2023/footer_bk_2023_pc.png") center top no-repeat;
background-size: cover;
min-height: calc(91vh - 70px);
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;	
}

.footer2023 .sp{display: none;}

.footer2023 .pc{
display: block;
position: absolute;
top: 10vw;
left: 260px;
width: 270px;
text-align: center;
}

.footer2023 .pc img.oricon{
position: absolute;
left: -100px;
top: -45px;
}

.footer2023 .pc img{width: auto;}
.footer2023 .ft_logo{padding: 2vw 0 4vw 0;}
.footer2023 .pc .footer-button{
width: 210px;
margin: 0 auto;
position: relative;
right: 0px;
bottom: -10px;
font-size: 16px;
}

.oricon{
width: 900px;
position: relative;
}

.footer {
background-image: url("/shopping/img/water/footer-bg_pc.jpg");
min-height: calc(100vh - 70px);
display: flex;
justify-content: center;
}
.footer-logo {
bottom: auto;
top: 15%;
}
.footer-logo img {
width: 220px;
}
.footer-button {
font-size: 20px;
padding: 20px 30px;
position: absolute;
top: 25%;
}
.footer-oricon {
position: absolute;
padding-right: 500px;
top: 10%;
}
.footer-oricon__img {
margin: 0;
}
.copyright {
height: 70px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.copyright img {
max-width: 400px;
}
.follow {
display: block;
position: fixed;
right: 50px;
bottom: 50px;
width: 160px;
visibility: hidden;
opacity: 0;
transition: 1.5s;
z-index: 100;
}
.follow-container {
position: relative;
}
.follow-clone {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition: 0.4s;
}
.follow-clone:hover {
opacity: 0.7;
}
.follow--active {
visibility: visible;
opacity: 1;
}
.linkbar {
display: none;
}
.footer2 .pcft{display: block;}
.footer2 .spft{display: none;}
.content .pcct{display: block;}
.content .spct{display: none;}
}

.animation-blur {
filter: blur(4px);
}

.animation-blur.animation--active {
animation: blur 1s ease-out forwards;
}

.animation-blur.animation--top {
animation: blur 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animation-fade {
opacity: 0;
}

.animation-fade.animation--active {
animation: fade 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animation-fade_top {
transform: translateY(-40px);
opacity: 0;
}

.animation-fade_top.animation--active {
animation: fade_top 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animation-fade_left {
transform: translateX(-40px);
opacity: 0;
}

.animation-fade_left.animation--active {
animation: fade_left 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animation-mask_left {
position: relative;
overflow: hidden;
}

.animation-mask_left::before {
content: "";
position: absolute;
background: #fff;
height: 100%;
width: 100%;
top: 0;
left: 0;
}

.animation-mask_left.animation--active::before {
animation: mask_left 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animation-mask_right {
position: relative;
overflow: hidden;
}

.animation-mask_right::before {
content: "";
position: absolute;
background: #fff;
height: 100%;
width: 100%;
top: 0;
left: 0;
}

.animation-mask_right.animation--active::before {
animation: mask_right 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}



@keyframes blur {
0% {
filter: blur(4px);
}
100% {
filter: blur(0);
}
}

@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}

@keyframes fade_top {
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 100;
}
}

@keyframes fade_left {
0% {
transform: translateX(-40px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 100;
}
}

@keyframes mask_left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

@keyframes mask_right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

.youtube-container {
margin: 0;
}

.youtube-container .movie--ready::after {
content: "";
background: url("/shopping/img/water/play.svg");
background-size: contain;
background-repeat: no-repeat;
height: 120px;
width: 120px;
top: 50%;
left: 50%;
bottom: auto;
right: auto;
transform: translate(-50%, -50%);
}

.loader,
.loader:after {
border-radius: 50%;
width: 140px;
height: 140px;
}

.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 5px solid rgba(255, 255, 255, 0.2);
border-right: 5px solid rgba(255, 255, 255, 0.2);
border-bottom: 5px solid rgba(255, 255, 255, 0.2);
border-left: 5px solid #fff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}

.loader-wrap {
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #b0bec5;
background-repeat: no-repeat;
background-size: cover;
z-index: 999999;
transition: 0.8s;
}

.loader-img {
position: absolute;
max-width: 100%;
max-height: 800px;
height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.loader-img img {
height: 100%;
width: auto;
}

.loader-wlogo {
height: 10%;
}

.loader-server {
height: 40%;
margin: 10% 0;
}

.loader-container {
height: 140px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 10%;
}

.loader-text {
position: absolute;
height: 40%;
max-height: 50px;
}

.loader--loaded {
visibility: hidden;
opacity: 0;
}

.loader-logo {
height: 5%;
}

@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}