@charset "UTF-8";

/* =========================
	トップページ
========================= */

/* FV */

body.home .p-fv {
position: relative;
isolation: isolate;

min-width: 1000px;

overflow: hidden;
}

.p-fv__visual {
position: relative;

background: 
#ffffff
url("../img/common/bg_fv.jpg")
center top / auto 100%
no-repeat;

overflow: hidden;
}

.p-fv__twin-kv {
position: absolute;
z-index: 2;
inset: 0;

background-image: 
url("../img/kv/kv_f5t4v23g.png");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;

pointer-events: none;
}

.p-fv__content {
position: relative;
z-index: 2;

width: 100%;
}

.p-fv__container {
position: relative;

display: flex;
justify-content: center;
align-items: center;

width: 100%;
max-width: 1280px;
min-width: 1000px;

margin-inline: auto;

overflow: visible;
}
.p-fv__content::after {
content: "";
position: absolute;
z-index: 10;
right: 0;
bottom: -1px;
left: 0;
height: 40px;
background: 
url("../img/common/bg_menu-t.png")
center top / auto 100%
repeat-x;
pointer-events: none;
}

/* =========================
	FVスライダー
========================= */

.p-fv__slider {
position: relative;
z-index: 4;

width: 33%;

margin-inline: auto;

overflow: visible;
}

.p-fv__slider img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 6px;
}

/* ページネーション */

.p-fv__slider .swiper-pagination {
position: static;
z-index: 5;

display: flex;
justify-content: center;
gap: 12px;

padding: 30px 0 60px;
}

.p-fv__slider .swiper-pagination-bullet {
width: 20px;
height: 20px;

margin: 0 !important;

background-color: #39d2ff;
background-image: url("../img/common/bg_crystal.png");
background-repeat: repeat;
background-position: center;
background-size: 160px 93px;
border-radius: 9999px;

opacity: 1;
transition: 
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}

.p-fv__slider .swiper-pagination-bullet-active {
background-color: #fb5086;
background-image: url("../img/common/bg_crystal.png");
background-repeat: repeat;
background-position: center;
background-size: 160px 93px;
border: 2px solid #ff0050;

transform: scale(1.4);
}

/* FVスライダー矢印 */

.p-fv .swiper-button-prev,
.p-fv .swiper-button-next {
z-index: 5;
top: calc(50% - 28px);
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
color: #000;
opacity: 1;
transform: translateY(-50%);
transition: transform 0.2s ease;
outline: none;
}
.p-fv .swiper-button-prev:focus,
.p-fv .swiper-button-next:focus,
.p-fv .swiper-button-prev:focus-visible,
.p-fv .swiper-button-next:focus-visible {
box-shadow: none;
outline: none;
}
.p-fv .swiper-button-prev:hover,
.p-fv .swiper-button-next:hover {
transform: translateY(calc(-50% - 2px));
}
.p-fv .swiper-button-prev::after,
.p-fv .swiper-button-next::after {
display: none;
}

.p-fv .p-fv__arrow {
display: block;

width: 64px;
height: 64px;

transition: all 0.2s ease;
}

.p-fv .swiper-button-prev {
left: 28%;

background-image: url("../img/common/arrow-l.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.p-fv .swiper-button-next {
right: 28%;

background-image: url("../img/common/arrow-r.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-fv .swiper-button-prev:hover {
background-image: url("../img/common/arrow-l_on.png");
}
.p-fv .swiper-button-next:hover {
background-image: url("../img/common/arrow-r_on.png");
}

/* =========================
	FV背景シェイプ
========================= */

.p-fv__bg-shape {
position: absolute;
z-index: 2;

background: rgb(255 255 255 / 8%);
border: 1px solid rgb(255 255 255 / 20%);
border-radius: 24px;
box-shadow: 0 10px 40px rgb(0 0 0 / 10%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

pointer-events: none;
}

/* 左上 */
.p-fv__bg-shape--1 {
top: 10%;
left: 6%;
width: 264px;
height: 264px;
}

/* 右下 */
.p-fv__bg-shape--2 {
right: 8%;
bottom: 12%;
width: 360px;
height: 360px;
}

/* 左中 */
.p-fv__bg-shape--3 {
top: 42%;
left: -4%;
width: 180px;
height: 180px;
border-radius: 20px;
}

/* 右上 */
.p-fv__bg-shape--4 {
top: 18%;
right: 4%;
width: 220px;
height: 220px;
}

/* 左下 */
.p-fv__bg-shape--5 {
bottom: 8%;
left: 12%;
width: 150px;
height: 150px;
border-radius: 18px;
}

/* 右中 */
.p-fv__bg-shape--6 {
top: 48%;
right: -3%;
width: 190px;
height: 190px;
border-radius: 20px;
}

/* =========================
	お散歩
========================= */

/* 本体 */

.p-walk {
position: relative;

width: 100%;

overflow: hidden;
}

/* シーン */

.p-walk__scene {
position: absolute;
inset: 0;

opacity: 0;
transition: opacity 3s linear;
}

.p-walk__scene.is-current {
opacity: 1;
}

/* コンテナ */

.p-walk__container {
position: relative;

width: 100%;
max-width: 1280px;
min-width: 1000px;
aspect-ratio: 1280 / 320;

margin-inline: auto;

background: #ffffff;

overflow: hidden;
}

/* 背景 */

.p-walk__scene .p-walk__back,
.p-walk__scene .p-walk__front {
position: absolute;
top: 0;
right: -320px;
bottom: 0;
left: -320px;

background-repeat: no-repeat;
background-position: center bottom;
background-size: auto 100%;
}

/* 背景 */

.p-walk__scene .p-walk__back {
z-index: 1;
animation: walkBack 12s linear infinite;
}

.p-walk__scene .p-walk__front {
z-index: 2;
animation: walkFront 12s linear infinite;
pointer-events: none;
}

/* =========================
	お散歩アニメーション
========================= */

@keyframes walkBack {
from {
transform: translateX(-12%);
}
to {
transform: translateX(5%);
}
}

@keyframes walkFront {
from {
transform: translateX(-12%);
}
to {
transform: translateX(10%);
}
}

/* 20周年ロゴ */

.p-walk__anniversary {
position: absolute;
z-index: 3;
top: 15%;
left: 28%;

width: 18%;

animation: anniversaryFloat 5s ease-in-out infinite;
pointer-events: none;
}

@keyframes anniversaryFloat {
0% {
transform: 
translateY(0)
rotate(-3deg);
}
50% {
transform: 
translateY(-15px)
rotate(1deg);
}
100% {
transform: 
translateY(0)
rotate(-3deg);
}
}

.p-walk__anniversary img {
display: block;
width: 100%;
height: auto;
}

/* キャラクター */

.p-walk__character {
position: absolute;
z-index: 3;
bottom: 8%;
left: 60%;

width: 25%;

transform: translateX(-50%);
}

.p-walk__img {
display: block;

width: 100%;
height: auto;
}

.p-walk__img--l {
animation: walkL 1s steps(1,end) infinite;
}

.p-walk__img--r {
position: absolute;
inset: 0;

animation: walkR 1s steps(1,end) infinite;
}

@keyframes walkL {
0%, 49.999% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}

@keyframes walkR {
0%, 49.999% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}

/* シーン1 朝 */
.p-walk--1a .p-walk__back {
background-image: url("../img/common/snp/sp-1a__back.png");
}
.p-walk--1a .p-walk__front {
background-image: url("../img/common/snp/sp-1a__front.png");
}

/* シーン1 夕 */
.p-walk--1b .p-walk__back {
background-image: url("../img/common/snp/sp-1b__back.png");
}
.p-walk--1b .p-walk__front {
background-image: url("../img/common/snp/sp-1b__front.png");
}

/* シーン2 朝 */
.p-walk--2a .p-walk__back {
background-image: url("../img/common/snp/sp-2a__back.png");
}
.p-walk--2a .p-walk__front {
background-image: url("../img/common/snp/sp-2a__front.png");
}

/* シーン2 夕 */
.p-walk--2b .p-walk__back {
background-image: url("../img/common/snp/sp-2b__back.png");
}
.p-walk--2b .p-walk__front {
background-image: url("../img/common/snp/sp-2b__front.png");
}

/* シーン3 朝 */
.p-walk--3a .p-walk__back {
background-image: url("../img/common/snp/sp-3a__back.png");
}
.p-walk--3a .p-walk__front {
background-image: url("../img/common/snp/sp-3a__front.png");
}

/* シーン3 夕 */
.p-walk--3b .p-walk__back {
background-image: url("../img/common/snp/sp-3b__back.png");
}
.p-walk--3b .p-walk__front {
background-image: url("../img/common/snp/sp-3b__front.png");
}

/* シーン4 朝 */
.p-walk--4a .p-walk__back {
background-image: url("../img/common/snp/sp-4a__back.png");
}
.p-walk--4a .p-walk__front {
background-image: url("../img/common/snp/sp-4a__front.png");
}

/* シーン4 夕 */
.p-walk--4b .p-walk__back {
background-image: url("../img/common/snp/sp-4b__back.png");
}
.p-walk--4b .p-walk__front {
background-image: url("../img/common/snp/sp-4b__front.png");
}

/* =========================
	FVミニキャラ
========================= */

/* ミニキャラエリア */

.p-fv__miniArea {
position: absolute;
z-index: 3;
inset: 0;

width: 100%;
max-width: 1280px;
min-width: 1000px;

margin-inline: auto;

pointer-events: none;
}

/* 共通 */

.p-fv__mini {
position: absolute;
z-index: 3;

width: 20%;

pointer-events: none;
}

.p-fv__mini img {
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
}

/* 左上 */
.p-fv__mini--1 {
top: 55%;
left: 1%;
transform: rotate(-15deg);
}

/* 左下 */
.p-fv__mini--2 {
bottom: 5%;
left: 14%;
transform: rotate(15deg);
}

/* 右上 */
.p-fv__mini--3 {
top: 55%;
right: 1%;
transform: rotate(15deg);
}

/* 右下 */
.p-fv__mini--4 {
right: 14%;
bottom: 5%;
transform: rotate(-15deg);
}

/* =========================
	星
========================= */

.p-fv__stars {
position: absolute;
z-index: 1;
inset: 0;

mix-blend-mode: screen;

overflow: hidden;
pointer-events: none;
}

.p-fv__star {
position: absolute;

display: block;

width: 0;
height: auto;

opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}

/* =========================
	効果線
========================= */

.p-fv__rays {
position: absolute;
z-index: 1;
inset: 0;

overflow: hidden;
pointer-events: none;
}

.p-fv__ray {
position: absolute;

display: block;

width: 0;
height: 4px;

background: linear-gradient(
90deg,
rgba(255,255,255,0)   0%,
rgba(255,255,255,.8) 30%,
rgba(255,255,255,.8) 90%,
rgba(255,255,255,0) 100%
);

opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}

/* =========================
	ローディング
========================= */

.p-loading {
position: fixed;
z-index: 99999;
inset: 0;

display: flex;
justify-content: center;
align-items: center;

background: #fff;
}

.p-loading__logo {
width: 240px;
height: auto;

transform: translateY(-50px);
}

/* =========================
スマホ
========================= */

@media (max-width: 768px) {

body.home .p-fv {
min-width: 0;
}

.p-fv__container {
max-width: none;
min-width: 0;
}

.p-walk__container {
max-width: none;
min-width: 0;
}

.p-fv__miniArea {
max-width: none;
min-width: 0;
}

.p-fv__slider {
width: 64%;
}

.p-fv .swiper-button-prev {
left: 1%;
}

.p-fv .swiper-button-next {
right: 1%;
}

.p-fv__slider .swiper-pagination {
padding: 15px 0 50px;
}

.p-loading__logo {
width: 160px;
}

.p-fv__content::after {
height: 32px;
}

/* 左上 */
.p-fv__mini--1 {
top: 70%;
left: -1%;
}

/* 左下 */
.p-fv__mini--2 {
bottom: 7%;
left: -1%;
}

/* 右上 */
.p-fv__mini--3 {
top: 70%;
right: -1%;
}

/* 右下 */
.p-fv__mini--4 {
right: -1%;
bottom: 7%;
}

.p-fv__visual {
background: 
#ffffff
url("../img/common/bg_fv-sp.jpg")
center top / auto 100%
no-repeat;
}

.p-fv__twin-kv {
background-image: 
url("../img/kv/kv_f5t4v23g-sp.png");
}

}