/* -----------------------
unity
----------------------- */
@media screen and (min-width: 768px) {
.sp {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.pc {
display: none !important;
}
}
html {
scroll-behavior: smooth;
scroll-padding-top: 10%;
}
body {
font-family: "sicuveiw-dsp", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
color: #505050;
}
@media screen and (max-width: 767px) {
body.active {
overflow: hidden;
}
}
body:has(.loading.active) {
overflow: hidden;
}
.wrapper {
overflow: hidden;
}
a {
color: #505050;
}
/* -----------------------
loading
----------------------- */
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 999;
overflow: scroll;
transition: transform 1s ease, opacity 0.5s ease 0.5s;
transform-origin: center top 30px;
opacity: 1;
}
.loading:not(.active) {
transform: scale(10);
opacity: 0;
pointer-events: none;
}
.loading--bg {
background-image: url("../img/loading-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.loading--bg {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.loading--bg {
min-height: 179.4871794872vw;
}
}
.loading--bg .loading--container {
position: absolute;
top: 20%;
transform: translate(-50%, -50%);
z-index: 1;
}
@media screen and (min-width: 768px) {
.loading--bg .loading--container {
left: 40%;
}
}
@media screen and (max-width: 767px) {
.loading--bg .loading--container {
left: 30%;
}
}
.loading--bg .loading--container .loading--balloon {
animation: balloon-move 3s ease-in-out infinite;
}
@keyframes balloon-move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20%);
}
100% {
transform: translateY(0);
}
}
.loading--bg .loading--container .loading--balloon--img {
aspect-ratio: 162/251;
background-image: url("../img/loading-balloon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: balloon-swing 2s ease-in-out infinite;
transform-origin: center top;
}
@media screen and (min-width: 768px) {
.loading--bg .loading--container .loading--balloon--img {
width: 100px;
}
}
@media screen and (max-width: 767px) {
.loading--bg .loading--container .loading--balloon--img {
width: 20.5128205128vw;
}
}
@keyframes balloon-swing {
0% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
.loading--bg .loading--text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.loading--bg .txt {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.loading--bg .txt {
gap: 5px;
}
}
@media screen and (max-width: 767px) {
.loading--bg .txt {
gap: 1.2820512821vw;
}
}
.loading--bg .txt .TX {
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
color: #fff;
}
@media screen and (min-width: 768px) {
.loading--bg .txt .TX {
font-size: 36px;
}
}
@media screen and (max-width: 767px) {
.loading--bg .txt .TX {
font-size: 7.1794871795vw;
}
}
.loading--bg .txt .TX span {
display: block;
overflow: hidden;
white-space: nowrap;
animation: loading-text 1s ease infinite;
width: 0%;
}
@keyframes loading-text {
100% {
width: 100%;
}
}
/* -----------------------
header
----------------------- */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 998;
transition: backdrop-filter 0.3s ease-in-out;
}
.header--inner {
display: flex;
align-items: flex-end;
white-space: nowrap;
position: relative;
}
@media screen and (min-width: 768px) {
.header--inner {
padding: 15px 345px 21px 10px;
}
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
.header--inner {
align-items: center;
}
}
@media screen and (max-width: 767px) {
.header--inner {
padding: 3.8461538462vw 5.1282051282vw 4.358974359vw;
}
}
.header--inner .logo {
display: block;
width: fit-content;
}
.header--inner .logo .TL {
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
line-height: 85%;
}
@media screen and (min-width: 768px) {
.header--inner .logo .TL {
font-size: 40px;
}
}
@media screen and (max-width: 767px) {
.header--inner .logo .TL {
font-size: 10.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper {
margin-left: 34px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100vh;
background: #FFF366;
z-index: 999;
padding: 14.1025641026vw 0 8.9743589744vw;
overflow-x: scroll;
transform: scaleY(0);
transition: transform 0.3s ease-in-out;
transform-origin: top;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav {
min-height: 256.4102564103vw;
}
}
.header--inner .nav--wrapper nav ul {
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul {
gap: 10px 19px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul {
flex-direction: column;
align-items: center;
gap: 7.6923076923vw;
}
}
.header--inner .nav--wrapper nav ul li:not(:last-child) a::before {
content: "";
display: block;
width: 100%;
background-color: #F49047;
position: absolute;
bottom: 0;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul li:not(:last-child) a::before {
height: 2px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li:not(:last-child) a::before {
height: 0.5128205128vw;
}
}
.header--inner .nav--wrapper nav ul li:not(:last-child) a:hover::before {
transform: scaleX(1);
}
.header--inner .nav--wrapper nav ul li:last-child {
background: rgba(244, 144, 71, 0.5);
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul li:last-child {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
border-radius: 10px;
padding: 2px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li:last-child {
position: relative;
border-radius: 2.5641025641vw;
padding: 0.5128205128vw;
margin-top: 48.7179487179vw;
}
}
.header--inner .nav--wrapper nav ul li:last-child::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(244, 144, 71, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul li:last-child::before {
border-radius: 10px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li:last-child::before {
border-radius: 2.5641025641vw;
}
}
.header--inner .nav--wrapper nav ul li:last-child:hover::before {
transform: translate(-50%, -50%) scale(1.1);
}
.header--inner .nav--wrapper nav ul li:last-child a {
display: block;
background: #F49047;
z-index: 2;
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul li:last-child a {
border-radius: 8px;
padding: 10px 12px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li:last-child a {
border-radius: 2.0512820513vw;
padding: 2.5641025641vw 3.0769230769vw;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li:last-child a::after {
content: "";
display: block;
aspect-ratio: 174/195;
width: 44.358974359vw;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 0;
right: 0;
bottom: 94%;
margin: 0 auto;
z-index: 2;
}
}
.header--inner .nav--wrapper nav ul li:last-child a:hover::after {
animation: jumping 2s linear infinite;
}
@keyframes jumping {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-10px) translateX(10px);
}
20% {
transform: translateY(0) translateX(10px);
}
30% {
transform: translateY(-10px) translateX(-10px);
}
40% {
transform: translateY(0) translateX(-10px);
}
50% {
transform: translateY(-10px) translateX(10px);
}
60% {
transform: translateY(0) translateX(10px);
}
70% {
transform: translateY(-10px) translateX(0px);
}
80% {
transform: translateY(0) translateX(0px);
}
90% {
transform: translateY(-10px) translateX(0px);
}
100% {
transform: translateY(0);
}
}
.header--inner .nav--wrapper nav ul li:last-child a .TX {
color: #FFF;
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul li:last-child a .TX {
font-size: 20px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li:last-child a .TX {
font-size: 5.1282051282vw;
}
}
.header--inner .nav--wrapper nav ul li a {
position: relative;
display: block;
}
.header--inner .nav--wrapper nav ul li a .TX {
font-style: normal;
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.header--inner .nav--wrapper nav ul li a .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.header--inner .nav--wrapper nav ul li a .TX {
font-size: 5.1282051282vw;
}
}
.header--inner .owl-position {
position: absolute;
aspect-ratio: 140/168;
transform: rotate(180deg);
z-index: 3;
}
@media screen and (min-width: 768px) {
.header--inner .owl-position {
top: -5px;
right: 245px;
width: 88px;
}
}
@media screen and (max-width: 767px) {
.header--inner .owl-position {
top: 0;
right: 27.9487179487vw;
width: 12.3076923077vw;
}
}
.header--inner .owl-position .owl-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease-in-out;
transform-origin: center bottom;
}
.header--inner .owl-position .owl-img:hover {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(5deg);
}
40% {
transform: rotate(0deg);
}
60% {
transform: rotate(-5deg);
}
80% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.header--inner .burger {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #F49047;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.header--inner .burger {
display: none;
}
}
@media screen and (max-width: 767px) {
.header--inner .burger {
right: 5.1282051282vw;
width: 17.9487179487vw;
border-radius: 1.2820512821vw;
padding-block: 2.8205128205vw 3.3333333333vw;
}
}
.header--inner .burger .TX {
color: #FFF;
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
line-height: 68%;
}
@media screen and (max-width: 767px) {
.header--inner .burger .TX {
font-size: 4.1025641026vw;
}
}
.header--inner .burger .TX:last-child {
display: none;
}
@media screen and (max-width: 767px) {
.header.active {
background: #FFF;
}
}
@media screen and (max-width: 767px) {
.header.active .nav--wrapper {
transform: scaleY(1);
}
}
.header.active .burger {
background: #A7A7A7;
}
.header.active .burger .TX:first-child {
display: none;
}
.header.active .burger .TX:last-child {
display: block;
}
.header.on {
backdrop-filter: blur(4px);
}
/* -----------------------
KV
----------------------- */
.KV {
background-color: #FFF;
position: relative;
z-index: 1;
height: 100svh;
}
@media screen and (min-width: 768px) {
.KV {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.KV {
min-height: 179.4871794872vw;
max-height: 230.7692307692vw;
}
}
.KV.active .KV--character_area .chara {
animation: chara-appear 1s ease forwards;
}
@keyframes chara-appear {
0% {
transform: scaleY(0);
}
50% {
transform: scaleY(1);
}
60% {
transform: scaleY(1) translateY(10%);
}
70% {
transform: scaleY(1) translateY(0%);
}
80% {
transform: scaleY(1) translateY(5%);
}
90% {
transform: scaleY(1) translateY(0%);
}
100% {
transform: scaleY(1);
}
}
.KV.active .KV--character_area .chara.chara-01 {
animation: chara-hero 2.5s ease-out 1s forwards;
}
@media screen and (min-width: 768px) {
@keyframes chara-hero {
to {
right: min(-2.421875vw, -31px);
}
}
}
@media screen and (max-width: 767px) {
@keyframes chara-hero {
to {
right: -3.0769230769vw;
}
}
}
.KV.active .KV--character_area .chara.chara-02 {
animation: chara-bird 1.5s ease 0.1s forwards;
}
@media screen and (min-width: 768px) {
@keyframes chara-bird {
to {
top: 149px;
left: min(12.96875vw, 166px);
}
}
}
@media screen and (max-width: 767px) {
@keyframes chara-bird {
to {
top: 26.9230769231vw;
left: 7.1794871795vw;
}
}
}
.KV.active .KV--character_area .chara.chara-03 {
animation-delay: 0.5s;
}
.KV.active .KV--character_area .chara.chara-04 {
animation-delay: 0.1s;
}
.KV.active .KV--character_area .chara.chara-05 {
animation-delay: 0.4s;
}
.KV.active .KV--character_area .chara.chara-06 {
animation-delay: 0.1s;
}
.KV.active .KV--character_area .chara.chara-07 {
animation-delay: 0.2s;
}
.KV.active .KV--character_area .chara.chara-08 {
animation-delay: 0.5s;
}
.KV.active .KV--character_area .chara.chara-09 {
animation-delay: 0.3s;
}
.KV.active .KV--character_area .chara.chara-10 {
animation-delay: 0.3s;
}
.KV.active .KV--character_area .chara.chara-11 {
animation-delay: 0.5s;
}
.KV.active .KV--character_area .chara.chara-12 {
animation-delay: 0.2s;
}
.KV.active .KV--character_area .chara.chara-13 {
animation-delay: 0.2s;
}
.KV--title_area {
width: fit-content;
text-align: center;
position: absolute;
left: 0;
right: 0;
margin-inline: auto;
z-index: 3;
}
@media screen and (min-width: 768px) {
.KV--title_area {
top: 25%;
}
}
@media screen and (max-width: 767px) {
.KV--title_area {
top: 15%;
}
}
@media screen and (min-width: 768px) {
.KV--title_area .ttl {
margin-bottom: 30px;
}
}
@media screen and (max-width: 767px) {
.KV--title_area .ttl {
margin-bottom: 2.5641025641vw;
}
}
.KV--title_area .ttl .TL {
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
line-height: 1;
}
@media screen and (min-width: 768px) {
.KV--title_area .ttl .TL {
font-size: 160px;
}
}
@media screen and (max-width: 767px) {
.KV--title_area .ttl .TL {
font-size: 32.8205128205vw;
line-height: 126%;
}
}
.KV--title_area .txt .TX {
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.KV--title_area .txt .TX {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.KV--title_area .txt .TX {
font-size: 5.1282051282vw;
}
}
.KV--title_area .txt .TX span {
color: #F49047;
}
.KV--character_area {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 60%;
z-index: 2;
margin: auto;
}
@media screen and (min-width: 768px) {
.KV--character_area {
max-width: 1280px;
min-height: 750px;
}
}
@media screen and (max-width: 767px) {
.KV--character_area {
min-height: 179.4871794872vw;
}
}
.KV--character_area .chara {
position: absolute;
transform-origin: center bottom;
transform: scaleY(0);
}
.KV--character_area .chara.chara-01 {
aspect-ratio: 312/354;
background-image: url('data:image/svg+xml;utf-8, ');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: scale(1);
right: -100%;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-01 {
width: min(24.375vw, 312px);
z-index: 13;
bottom: 0;
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-01 {
width: 43.8461538462vw;
z-index: 13;
bottom: 2.5641025641vw;
}
}
.KV--character_area .chara.chara-02 {
aspect-ratio: 85/81;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: scale(1);
top: -100%;
left: -100%;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-02 {
width: min(6.640625vw, 85px);
z-index: 12;
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-02 {
width: 12.0512820513vw;
z-index: 12;
}
}
.KV--character_area .chara.chara-03 {
aspect-ratio: 136/133;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-03 {
width: min(10.625vw, 136px);
z-index: 11;
bottom: 0;
left: min(42.265625vw, 541px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-03 {
width: 18.7179487179vw;
z-index: 7;
bottom: 46.9230769231vw;
right: 0.7692307692vw;
}
}
.KV--character_area .chara.chara-04 {
aspect-ratio: 212/238;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-04 {
width: min(16.5625vw, 212px);
z-index: 10;
bottom: 0;
right: min(19.375vw, 248px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-04 {
width: 29.4871794872vw;
z-index: 10;
bottom: 6.9230769231vw;
left: 29.4871794872vw;
}
}
.KV--character_area .chara.chara-05 {
aspect-ratio: 234/237;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-05 {
width: min(18.28125vw, 234px);
z-index: 9;
bottom: 0;
left: min(22.421875vw, 287px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-05 {
width: 32.0512820513vw;
z-index: 6;
bottom: 50.2564102564vw;
right: 27.9487179487vw;
}
}
.KV--character_area .chara.chara-06 {
aspect-ratio: 236/220;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-06 {
width: min(18.4375vw, 236px);
z-index: 8;
bottom: min(2.890625vw, 37px);
right: min(32.5vw, 416px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-06 {
width: 33.0769230769vw;
z-index: 11;
bottom: 4.1025641026vw;
left: 4.358974359vw;
}
}
.KV--character_area .chara.chara-07 {
aspect-ratio: 189/220;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-07 {
width: min(14.765625vw, 189px);
z-index: 7;
bottom: min(1.71875vw, 22px);
left: min(10vw, 128px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-07 {
width: 25.8974358974vw;
z-index: 5;
bottom: 33.0769230769vw;
left: 19.2307692308vw;
}
}
.KV--character_area .chara.chara-08 {
aspect-ratio: 182/182;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-08 {
width: min(14.21875vw, 182px);
z-index: 6;
bottom: min(1.25vw, 16px);
left: max(-1.09375vw, -14px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-08 {
width: 24.8717948718vw;
z-index: 2;
bottom: 30.5128205128vw;
left: -0.5128205128vw;
}
}
.KV--character_area .chara.chara-09 {
aspect-ratio: 217/245;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-09 {
width: min(16.953125vw, 217px);
z-index: 5;
bottom: min(4.6875vw, 60px);
left: min(35.3125vw, 452px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-09 {
width: 28.2051282051vw;
z-index: 3;
bottom: 57.4358974359vw;
right: 5.3846153846vw;
}
}
.KV--character_area .chara.chara-10 {
aspect-ratio: 177/196;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-10 {
width: min(13.828125vw, 177px);
z-index: 4;
bottom: min(9.375vw, 120px);
right: min(26.5625vw, 340px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-10 {
width: 24.6153846154vw;
z-index: 9;
bottom: 26.9230769231vw;
right: 34.8717948718vw;
}
}
.KV--character_area .chara.chara-11 {
aspect-ratio: 216/246;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-11 {
width: min(16.875vw, 216px);
z-index: 3;
bottom: min(11.71875vw, 150px);
left: min(16.09375vw, 206px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-11 {
width: 26.1538461538vw;
z-index: 4;
bottom: 58.7179487179vw;
left: 17.4358974359vw;
}
}
.KV--character_area .chara.chara-12 {
aspect-ratio: 183/220;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-12 {
width: min(14.296875vw, 183px);
z-index: 2;
bottom: min(11.015625vw, 141px);
left: min(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-12 {
width: 23.5897435897vw;
z-index: 1;
bottom: 46.6666666667vw;
left: -0.5128205128vw;
}
}
.KV--character_area .chara.chara-13 {
aspect-ratio: 206/235;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--character_area .chara.chara-13 {
width: min(16.09375vw, 206px);
z-index: 1;
bottom: min(13.75vw, 176px);
right: min(14.921875vw, 191px);
}
}
@media screen and (max-width: 767px) {
.KV--character_area .chara.chara-13 {
width: 28.9743589744vw;
z-index: 8;
bottom: 34.8717948718vw;
right: 13.8461538462vw;
}
}
.KV--marbles_area {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-inline: auto;
width: 100%;
max-width: 1900px;
height: 100%;
z-index: 1;
}
.KV--marbles_area .marble {
position: absolute;
}
.KV--marbles_area .marble.marble-01 {
background-image: url("../img/marbles/marble-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 506/748;
}
@media screen and (min-width: 768px) {
.KV--marbles_area .marble.marble-01 {
width: 506px;
top: -470px;
left: 92px;
}
}
@media screen and (max-width: 767px) {
.KV--marbles_area .marble.marble-01 {
width: 129.7435897436vw;
top: -117.1794871795vw;
left: -25.1282051282vw;
}
}
.KV--marbles_area .marble.marble-02 {
background-image: url("../img/marbles/marble-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 362/567;
}
@media screen and (min-width: 768px) {
.KV--marbles_area .marble.marble-02 {
width: 362px;
top: 136px;
left: -231px;
}
}
@media screen and (max-width: 767px) {
.KV--marbles_area .marble.marble-02 {
width: 92.8205128205vw;
top: 49.4871794872vw;
left: -66.6666666667vw;
}
}
.KV--marbles_area .marble.marble-03 {
background-image: url("../img/marbles/marble-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 586/426;
}
@media screen and (min-width: 768px) {
.KV--marbles_area .marble.marble-03 {
width: 586px;
top: 90px;
right: -270px;
}
}
@media screen and (max-width: 767px) {
.KV--marbles_area .marble.marble-03 {
width: 115.8974358974vw;
top: 71.7948717949vw;
right: -66.6666666667vw;
}
}
/* -----------------------
footer
----------------------- */
.footer {
background: #FFF366;
}
@media screen and (min-width: 768px) {
.footer {
padding: 30px 0 26px;
}
}
@media screen and (max-width: 767px) {
.footer {
padding: 7.6923076923vw 0;
}
}
.footer .TX {
color: #F49047;
font-weight: 800;
text-align: center;
}
@media screen and (min-width: 768px) {
.footer .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.footer .TX {
font-size: 3.3333333333vw;
}
}
/* -----------------------
C_title
----------------------- */
.C_title {
width: fit-content;
}
.C_title .C_title--inner .sub--title {
background: #F49047;
width: fit-content;
}
@media screen and (min-width: 768px) {
.C_title .C_title--inner .sub--title {
border-radius: 50px;
padding: 3px 18px;
}
}
@media screen and (max-width: 767px) {
.C_title .C_title--inner .sub--title {
border-radius: 12.8205128205vw;
padding: 0.7692307692vw 3.5897435897vw;
}
}
.C_title .C_title--inner .sub--title .TX {
color: #FFF;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_title .C_title--inner .sub--title .TX {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.C_title .C_title--inner .sub--title .TX {
font-size: 5.1282051282vw;
}
}
.C_title .C_title--inner .main--title .TL {
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.C_title .C_title--inner .main--title .TL {
font-size: 64px;
}
}
@media screen and (max-width: 767px) {
.C_title .C_title--inner .main--title .TL {
font-size: 10.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.C_title.type-01 .C_title--inner {
display: flex;
flex-direction: column;
gap: 10px;
}
}
@media screen and (max-width: 767px) {
.C_title.type-01 .C_title--inner {
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
}
}
.C_title.type-02 {
margin-inline: auto;
}
.C_title.type-02 .C_title--inner {
align-items: center;
}
@media screen and (min-width: 768px) {
.C_title.type-02 .C_title--inner {
display: flex;
flex-direction: column;
gap: 10px;
}
}
@media screen and (max-width: 767px) {
.C_title.type-02 .C_title--inner {
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
}
}
.C_title.type-03 {
margin-inline: auto;
}
.C_title.type-03 .C_title--inner {
align-items: center;
}
@media screen and (min-width: 768px) {
.C_title.type-03 .C_title--inner {
display: flex;
flex-direction: column;
gap: 0;
}
}
@media screen and (max-width: 767px) {
.C_title.type-03 .C_title--inner {
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
}
}
.C_title.type-03 .C_title--inner .main--title .TL {
display: flex;
}
@media screen and (min-width: 768px) {
.C_title.type-03 .C_title--inner .main--title .TL {
align-items: baseline;
}
}
@media screen and (max-width: 767px) {
.C_title.type-03 .C_title--inner .main--title .TL {
flex-direction: column;
align-items: center;
gap: 5.1282051282vw;
}
}
.C_title.type-03 .C_title--inner .main--title .TL span {
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
line-height: 1;
display: inline-block;
position: relative;
}
@media screen and (min-width: 768px) {
.C_title.type-03 .C_title--inner .main--title .TL span {
font-size: 96px;
margin-right: 14px;
transform: translateY(5px);
}
}
@media screen and (max-width: 767px) {
.C_title.type-03 .C_title--inner .main--title .TL span {
width: fit-content;
font-size: 24.6153846154vw;
line-height: 83%;
}
}
.C_title.type-03 .C_title--inner .main--title .TL span::before {
content: "";
display: block;
width: 100%;
background: #F49047;
position: absolute;
left: 0;
}
@media screen and (min-width: 768px) {
.C_title.type-03 .C_title--inner .main--title .TL span::before {
top: 100%;
height: 5px;
}
}
@media screen and (max-width: 767px) {
.C_title.type-03 .C_title--inner .main--title .TL span::before {
top: calc(100% + 2.5641025641vw);
height: 1.2820512821vw;
}
}
.C_title.type-04 {
margin-inline: auto;
}
.C_title.type-04 .C_title--inner .main--title {
position: relative;
}
.C_title.type-04 .C_title--inner .main--title .TL {
position: relative;
z-index: 1;
}
.C_title.type-04 .C_title--inner .main--title .img--wrapper {
aspect-ratio: 66/73;
position: absolute;
z-index: 2;
transform: rotate(6.945deg);
}
@media screen and (min-width: 768px) {
.C_title.type-04 .C_title--inner .main--title .img--wrapper {
width: 66px;
bottom: calc(100% - 24px);
left: calc(100% - 50px);
}
}
@media screen and (max-width: 767px) {
.C_title.type-04 .C_title--inner .main--title .img--wrapper {
width: 7.9487179487vw;
bottom: calc(100% - 3.8461538462vw);
left: calc(100% - 5.8974358974vw);
}
}
.C_title.type-04 .C_title--inner .main--title .img--wrapper .img {
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_title.type-05 {
margin-inline: auto;
}
.C_title.type-06 .C_title--inner .main--title .TL {
display: flex;
align-items: baseline;
}
@media screen and (min-width: 768px) {
.C_title.type-06 .C_title--inner .main--title .TL {
gap: 5px;
}
}
@media screen and (max-width: 767px) {
.C_title.type-06 .C_title--inner .main--title .TL {
gap: 1.7948717949vw;
}
}
.C_title.type-06 .C_title--inner .main--title .TL span {
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
line-height: 1;
display: inline-block;
position: relative;
}
@media screen and (min-width: 768px) {
.C_title.type-06 .C_title--inner .main--title .TL span {
font-size: 96px;
transform: translateY(5px);
}
}
@media screen and (max-width: 767px) {
.C_title.type-06 .C_title--inner .main--title .TL span {
font-size: 24.6153846154vw;
line-height: 83%;
transform: translateY(1.2820512821vw);
}
}
.C_title.type-06 .C_title--inner .main--title .TL span::before {
content: "";
display: block;
width: 100%;
background: #F49047;
position: absolute;
left: 0;
}
@media screen and (min-width: 768px) {
.C_title.type-06 .C_title--inner .main--title .TL span::before {
top: 100%;
height: 5px;
}
}
@media screen and (max-width: 767px) {
.C_title.type-06 .C_title--inner .main--title .TL span::before {
top: calc(100% + 2.5641025641vw);
height: 1.2820512821vw;
}
}
/* -----------------------
C_btn
----------------------- */
.C_btn--link {
margin-inline: auto;
background: rgba(244, 144, 71, 0.5);
position: relative;
display: block;
width: 100%;
}
@media screen and (min-width: 768px) {
.C_btn--link {
border-radius: 20px;
max-width: 1080px;
}
}
@media screen and (max-width: 767px) {
.C_btn--link {
border-radius: 5.1282051282vw;
}
}
.C_btn--link::before {
content: "";
position: absolute;
background: rgba(244, 144, 71, 0.5);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.3s ease-in-out;
z-index: 1;
}
@media screen and (min-width: 768px) {
.C_btn--link::before {
width: calc(100% + 10px);
height: calc(100% + 10px);
border-radius: 20px;
}
}
@media screen and (max-width: 767px) {
.C_btn--link::before {
width: calc(100% + 2.5641025641vw);
height: calc(100% + 2.5641025641vw);
border-radius: 5.1282051282vw;
}
}
.C_btn--link:hover {
padding: 0;
}
.C_btn--link:hover::before {
transform: translate(-50%, -50%) scale(1.1);
}
.C_btn--link:hover .img--wrapper {
animation: jumping 2s linear infinite;
}
.C_btn--link .link--inner {
background: #F49047;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.C_btn--link .link--inner {
padding: 22px min(40px, 3.125vw) 29px;
border-radius: 15px;
}
}
@media screen and (max-width: 767px) {
.C_btn--link .link--inner {
padding: 2.0512820513vw 0 19.4871794872vw;
border-radius: 3.8461538462vw;
}
}
.C_btn--link .link--inner .TX {
color: #FFF;
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.C_btn--link .link--inner .TX {
text-align: end;
font-size: min(64px, 5vw);
}
}
@media screen and (max-width: 767px) {
.C_btn--link .link--inner .TX {
display: flex;
flex-direction: column;
gap: 4.6153846154vw;
align-items: center;
font-size: 6.1538461538vw;
}
}
.C_btn--link .link--inner .TX span {
font-family: "Monomaniac One", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
position: relative;
}
@media screen and (min-width: 768px) {
.C_btn--link .link--inner .TX span {
display: inline-block;
font-size: min(96px, 7.5vw);
margin-right: min(14px, 1.09375vw);
transform: translateY(3px);
line-height: 92.708%;
}
}
@media screen and (max-width: 767px) {
.C_btn--link .link--inner .TX span {
display: block;
width: fit-content;
margin-inline: auto;
font-size: 24.6153846154vw;
line-height: 83.333%;
}
}
.C_btn--link .link--inner .TX span::before {
content: "";
position: absolute;
background: #FFF;
width: 100%;
left: 0;
}
@media screen and (min-width: 768px) {
.C_btn--link .link--inner .TX span::before {
height: 5px;
bottom: -9px;
}
}
@media screen and (max-width: 767px) {
.C_btn--link .link--inner .TX span::before {
height: 1.2820512821vw;
top: calc(100% + 2.5641025641vw);
}
}
.C_btn--link .img--wrapper {
position: absolute;
z-index: 2;
aspect-ratio: 174/195;
}
@media screen and (min-width: 768px) {
.C_btn--link .img--wrapper {
width: min(438px, 34.21875vw);
top: max(-85px, -6.640625vw);
left: max(-65px, -5.078125vw);
}
}
@media screen and (max-width: 1080px) and (min-width: 768px) {
.C_btn--link .img--wrapper {
width: 27.34375vw;
}
}
@media screen and (max-width: 865px) and (min-width: 768px) {
.C_btn--link .img--wrapper {
left: -7.8125vw;
}
}
@media screen and (max-width: 767px) {
.C_btn--link .img--wrapper {
width: 66.6666666667vw;
top: 28.9743589744vw;
left: 0;
right: 0;
margin-inline: auto;
}
}
.C_btn--link .img--wrapper .img {
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* -----------------------
C_community_board
----------------------- */
.C_community_board {
display: flex;
}
@media screen and (min-width: 768px) {
.C_community_board {
gap: 15px;
}
}
@media screen and (max-width: 767px) {
.C_community_board {
gap: 2.0512820513vw;
}
}
.C_community_board:hover .C_community_board--lists {
animation-play-state: paused;
}
.C_community_board--lists {
display: flex;
animation: scroll 20s linear infinite;
}
@media screen and (min-width: 768px) {
.C_community_board--lists {
gap: 15px;
}
}
@media screen and (max-width: 767px) {
.C_community_board--lists {
gap: 2.0512820513vw;
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.C_community_board--lists .item {
width: fit-content;
}
.C_community_board--lists .item--inner {
position: relative;
width: fit-content;
}
.C_community_board--lists .item--inner .img {
aspect-ratio: 450/250;
border: solid #FFF;
}
@media screen and (min-width: 768px) {
.C_community_board--lists .item--inner .img {
border-radius: 20px;
border-width: 10px;
width: 450px;
}
}
@media screen and (max-width: 767px) {
.C_community_board--lists .item--inner .img {
border-radius: 11px;
border-width: 1.2820512821vw;
width: 68.2051282051vw;
}
}
.C_community_board--lists .item--inner .img.img-01 {
background-image: url("../img/C_community_board/C_community_board-img-01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_community_board--lists .item--inner .img.img-02 {
background-image: url("../img/C_community_board/C_community_board-img-02.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_community_board--lists .item--inner .img.img-03 {
background-image: url("../img/C_community_board/C_community_board-img-03.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_community_board--lists .item--inner .img.img-04 {
background-image: url("../img/C_community_board/C_community_board-img-04.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_community_board--lists .item--inner .txt {
position: absolute;
left: 6.66%;
bottom: -11%;
}
.C_community_board--lists .item--inner .txt .TX {
font-family: "sicuveiw-dsp", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
position: relative;
-webkit-text-stroke-color: #FFF;
font-weight: 800;
line-height: 1;
width: fit-content;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.C_community_board--lists .item--inner .txt .TX {
font-size: 40px;
-webkit-text-stroke-width: 10px;
}
}
@media screen and (max-width: 767px) {
.C_community_board--lists .item--inner .txt .TX {
font-size: 6.1538461538vw;
-webkit-text-stroke-width: 1.7948717949vw;
}
}
.C_community_board--lists .item--inner .txt .TX::before {
content: attr(data-text);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-text-stroke-width: 0;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* -----------------------
C_dress_up-tab
----------------------- */
.C_dress_up-tab {
aspect-ratio: 1;
border-radius: 50%;
flex-shrink: 0;
transition: all 0.3s ease;
transform-origin: center;
position: relative;
cursor: pointer;
border-style: solid;
border-color: #C9C8C8;
background-color: #FFF;
}
@media screen and (min-width: 768px) {
.C_dress_up-tab {
border-width: 10px;
}
}
@media screen and (max-width: 767px) {
.C_dress_up-tab {
border-width: 1.0256410256vw;
}
}
.C_dress_up-tab.is-active.hover-opa {
opacity: 1;
}
.C_dress_up-tab .icon {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.C_dress_up-tab.dress_up-tab__icon-01 .icon {
background-image: url('data:image/svg+xml;utf-8,');
aspect-ratio: 59/56;
width: 55.7692307692%;
}
.C_dress_up-tab.dress_up-tab__icon-01.is-active {
box-shadow: 0 0 15px 0 #77CAF4;
border-color: #77CAF4;
}
.C_dress_up-tab.dress_up-tab__icon-01.is-active .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
.C_dress_up-tab.dress_up-tab__icon-02 .icon {
background-image: url('data:image/svg+xml;utf-8,');
aspect-ratio: 59/54;
width: 55.7692307692%;
}
.C_dress_up-tab.dress_up-tab__icon-02.is-active {
box-shadow: 0 0 15px 0 #78D070;
border-color: #78D070;
}
.C_dress_up-tab.dress_up-tab__icon-02.is-active .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
.C_dress_up-tab.dress_up-tab__icon-03 .icon {
background-image: url('data:image/svg+xml;utf-8,');
aspect-ratio: 59/59;
width: 55.7692307692%;
}
.C_dress_up-tab.dress_up-tab__icon-03.is-active {
box-shadow: 0 0 15px 0 #EC9A4D;
border-color: #EC9A4D;
}
.C_dress_up-tab.dress_up-tab__icon-03.is-active .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
.C_dress_up-tab.dress_up-tab__icon-04 .icon {
background-image: url('data:image/svg+xml;utf-8,');
aspect-ratio: 77/47;
width: 73.0769230769%;
}
.C_dress_up-tab.dress_up-tab__icon-04.is-active {
box-shadow: 0 0 15px 0 #AD8764;
border-color: #AD8764;
}
.C_dress_up-tab.dress_up-tab__icon-04.is-active .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
.C_dress_up-tab.dress_up-tab__icon-05 .icon {
background-image: url('data:image/svg+xml;utf-8,');
aspect-ratio: 49/50;
width: 47.1153846154%;
}
.C_dress_up-tab.dress_up-tab__icon-05.is-active {
box-shadow: 0 0 15px 0 #D87E6A;
border-color: #D87E6A;
}
.C_dress_up-tab.dress_up-tab__icon-05.is-active .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
/* -----------------------
C_dress_up-content
----------------------- */
.C_dress_up-content {
aspect-ratio: 400/460;
position: relative;
overflow: hidden;
position: relative;
border-radius: var(--radius);
display: none;
}
@media screen and (min-width: 768px) {
.C_dress_up-content {
--radius: 20px;
width: 400px;
}
}
@media screen and (max-width: 767px) {
.C_dress_up-content {
--radius: calc((17 / 390) * 100vw);
width: 89.7435897436vw;
}
}
.C_dress_up-content::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius);
border: solid;
transition: border-width 0.3s ease;
border-width: 0;
}
.C_dress_up-content.is-active {
display: block;
}
@media screen and (min-width: 768px) {
.C_dress_up-content.is-active::before {
border-width: 10px;
}
}
@media screen and (max-width: 767px) {
.C_dress_up-content.is-active::before {
border-width: 1.2820512821vw;
}
}
.C_dress_up-content.dress_up-content__img-01::before {
border-color: #77CAF4;
}
.C_dress_up-content.dress_up-content__img-01 .img {
background-image: url("../img/C_dress_up-content/C_dress_up-content-img-01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_dress_up-content.dress_up-content__img-02::before {
border-color: #78D070;
}
.C_dress_up-content.dress_up-content__img-02 .img {
background-image: url("../img/C_dress_up-content/C_dress_up-content-img-02.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_dress_up-content.dress_up-content__img-03::before {
border-color: #EC9A4D;
}
.C_dress_up-content.dress_up-content__img-03 .img {
background-image: url("../img/C_dress_up-content/C_dress_up-content-img-03.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_dress_up-content.dress_up-content__img-04::before {
border-color: #AD8764;
}
.C_dress_up-content.dress_up-content__img-04 .img {
background-image: url("../img/C_dress_up-content/C_dress_up-content-img-04.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_dress_up-content.dress_up-content__img-05::before {
border-color: #D87E6A;
}
.C_dress_up-content.dress_up-content__img-05 .img {
background-image: url("../img/C_dress_up-content/C_dress_up-content-img-05.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_dress_up-content .img {
width: 100%;
height: 100%;
border-radius: var(--radius);
}
/* -----------------------
C_possible_tab
----------------------- */
.C_possible_tab {
width: fit-content;
position: relative;
}
.C_possible_tab::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
aspect-ratio: 96/10;
background-color: #C8C8C8;
border-radius: 50%;
filter: blur(2px);
width: 0;
transition: all 0.3s ease-in-out;
}
.C_possible_tab:hover::before {
width: 60%;
}
.C_possible_tab:hover .icon {
transform: translateY(-15%);
}
.C_possible_tab.is-active::before {
width: 96%;
}
.C_possible_tab.is-active .icon {
transform: translateY(-30%);
}
.C_possible_tab .icon {
aspect-ratio: 1;
cursor: pointer;
position: relative;
z-index: 2;
transition: all 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.C_possible_tab .icon {
border-radius: 7.05px;
width: 100px;
}
}
@media screen and (max-width: 767px) {
.C_possible_tab .icon {
border-radius: 0.7692307692vw;
width: 12.8205128205vw;
}
}
.C_possible_tab .icon.icon-01 {
background-image: url("../img/C_possible/possible_icon-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_tab .icon.icon-02 {
background-image: url("../img/C_possible/possible_icon-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_tab .icon.icon-03 {
background-image: url("../img/C_possible/possible_icon-06.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_tab .icon.icon-04 {
background-image: url("../img/C_possible/possible_icon-07.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_tab .icon.icon-05 {
background-image: url("../img/C_possible/possible_icon-10.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* -----------------------
C_possible_content
----------------------- */
.C_possible_content {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
background: #FFF;
display: none;
}
@media screen and (min-width: 768px) {
.C_possible_content {
width: 100%;
max-width: 920px;
border-radius: 20px;
}
}
@media screen and (max-width: 767px) {
.C_possible_content {
width: 92.3076923077vw;
border-radius: 5.1282051282vw;
}
}
.C_possible_content.is-active {
display: block;
}
@media screen and (min-width: 768px) {
.C_possible_content .img__area {
padding: 10px 10px 0;
}
}
@media screen and (max-width: 767px) {
.C_possible_content .img__area {
padding: 1.2820512821vw 1.2820512821vw 0;
}
}
.C_possible_content .img__area .img {
aspect-ratio: 900/486;
width: 100%;
}
@media screen and (min-width: 768px) {
.C_possible_content .img__area .img {
border-radius: 20px 20px 0 0;
}
}
@media screen and (max-width: 767px) {
.C_possible_content .img__area .img {
border-radius: 5.1282051282vw 5.1282051282vw 0 0;
}
}
.C_possible_content .img__area .img.img-01 {
background-image: url("../img/C_possible_content/possible_content_img-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.C_possible_content .img__area .img.img-01::before {
content: "";
display: block;
aspect-ratio: 83/191;
background-image: url("../img/C_possible_content/possible_content_img-01-mini.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
transform: rotate(7.425deg);
position: absolute;
}
@media screen and (min-width: 768px) {
.C_possible_content .img__area .img.img-01::before {
width: 9.2222222222%;
bottom: -78px;
right: 31px;
}
}
@media screen and (max-width: 960px) and (min-width: 768px) {
.C_possible_content .img__area .img.img-01::before {
bottom: 0;
}
}
@media screen and (max-width: 767px) {
.C_possible_content .img__area .img.img-01::before {
width: 12.8205128205vw;
bottom: -7.4358974359vw;
right: 1.7948717949vw;
}
}
.C_possible_content .img__area .img.img-02 {
background-image: url("../img/C_possible_content/possible_content_img-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_content .img__area .img.img-03 {
background-image: url("../img/C_possible_content/possible_content_img-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_content .img__area .img.img-04 {
background-image: url("../img/C_possible_content/possible_content_img-04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_content .img__area .img.img-05 {
background-image: url("../img/C_possible_content/possible_content_img-05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_content .img__area .img video {
width: 100%;
}
@media screen and (min-width: 768px) {
.C_possible_content .img__area .img video {
border-radius: 20px 20px 0 0;
}
}
@media screen and (max-width: 767px) {
.C_possible_content .img__area .img video {
border-radius: 5.1282051282vw 5.1282051282vw 0 0;
}
}
@media screen and (min-width: 768px) {
.C_possible_content .txt__area {
padding: 25px 47px 36px;
}
}
@media screen and (max-width: 767px) {
.C_possible_content .txt__area {
padding: 7.4358974359vw 6.1538461538vw;
}
}
.C_possible_content .txt__area .TX {
font-family: "sicuveiw-dsp", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.3;
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.C_possible_content .txt__area .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.C_possible_content .txt__area .TX {
font-size: 4.1025641026vw;
}
}
/* -----------------------
C_possible_other
----------------------- */
.C_possible_other {
display: flex;
}
@media screen and (min-width: 768px) {
.C_possible_other {
gap: 20px;
}
}
@media screen and (max-width: 767px) {
.C_possible_other {
gap: 5.1282051282vw;
}
}
.C_possible_other:hover .icon--list {
animation-play-state: paused;
}
.C_possible_other .icon--list {
display: flex;
animation: scroll 20s linear infinite;
}
@media screen and (min-width: 768px) {
.C_possible_other .icon--list {
gap: 20px;
}
}
@media screen and (max-width: 767px) {
.C_possible_other .icon--list {
gap: 5.1282051282vw;
}
}
.C_possible_other .icon--list .icon {
aspect-ratio: 1/1;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.C_possible_other .icon--list .icon {
border-radius: 6px;
width: 83px;
}
}
@media screen and (max-width: 767px) {
.C_possible_other .icon--list .icon {
border-radius: 1.5384615385vw;
width: 21.2820512821vw;
}
}
.C_possible_other .icon--list .icon.icon-01 {
background-image: url("../img/C_possible/possible_icon-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-02 {
background-image: url("../img/C_possible/possible_icon-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-03 {
background-image: url("../img/C_possible/possible_icon-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-04 {
background-image: url("../img/C_possible/possible_icon-04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-05 {
background-image: url("../img/C_possible/possible_icon-05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-06 {
background-image: url("../img/C_possible/possible_icon-06.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-07 {
background-image: url("../img/C_possible/possible_icon-07.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-08 {
background-image: url("../img/C_possible/possible_icon-08.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-09 {
background-image: url("../img/C_possible/possible_icon-09.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-10 {
background-image: url("../img/C_possible/possible_icon-10.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-11 {
background-image: url("../img/C_possible/possible_icon-11.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-12 {
background-image: url("../img/C_possible/possible_icon-12.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-13 {
background-image: url("../img/C_possible/possible_icon-13.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-14 {
background-image: url("../img/C_possible/possible_icon-14.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_possible_other .icon--list .icon.icon-15 {
background-image: url("../img/C_possible/possible_icon-15.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* -----------------------
C_question
----------------------- */
.C_question {
position: relative;
}
@media screen and (min-width: 768px) {
.C_question {
margin-inline: auto;
max-width: 900px;
}
}
.C_question::before {
content: "";
display: block;
aspect-ratio: 258/181;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
}
@media screen and (min-width: 768px) {
.C_question::before {
width: 258px;
bottom: -161px;
right: -81px;
}
}
@media screen and (max-width: 767px) {
.C_question::before {
width: 41.5384615385vw;
bottom: -25.8974358974vw;
right: 4.8717948718vw;
}
}
@media screen and (min-width: 768px) {
.C_question .question--list {
display: flex;
flex-direction: column;
gap: 20px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list {
display: flex;
flex-direction: column;
gap: 5.1282051282vw;
}
}
.C_question .question--list .list--item.is-active .question__area {
transition: border-radius 0s ease-in-out;
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item.is-active .question__area {
border-radius: 10px 10px 0 0;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item.is-active .question__area {
border-radius: 2.5641025641vw 2.5641025641vw 0 0;
}
}
.C_question .question--list .list--item.is-active .question__area .icon--arrow {
transform: translateY(-50%) rotate(0deg);
}
.C_question .question--list .list--item .question__area {
background: #FFFEF1;
position: relative;
cursor: pointer;
transition: border-radius 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item .question__area {
border-radius: 10px;
padding: 21px 60px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item .question__area {
border-radius: 2.5641025641vw;
padding: 5.641025641vw 12.8205128205vw;
}
}
.C_question .question--list .list--item .question__area .ttl {
color: #FFF;
font-weight: 800;
line-height: 1.5;
background: #F49047;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
aspect-ratio: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item .question__area .ttl {
width: 35px;
font-size: 16px;
left: 19px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item .question__area .ttl {
width: 8.9743589744vw;
font-size: 3.3333333333vw;
left: 2.3076923077vw;
}
}
.C_question .question--list .list--item .question__area .txt .TX {
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item .question__area .txt .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item .question__area .txt .TX {
font-size: 4.1025641026vw;
}
}
.C_question .question--list .list--item .question__area .icon--arrow {
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(540deg);
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item .question__area .icon--arrow {
aspect-ratio: 18/10;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
right: 25px;
width: 18px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item .question__area .icon--arrow {
aspect-ratio: 16/6;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
right: 2.0512820513vw;
width: 4.1025641026vw;
}
}
.C_question .question--list .list--item .answer__area {
background: #FFEFB4;
display: none;
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item .answer__area {
border-radius: 0 0 10px 10px;
padding: 23px 31px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item .answer__area {
border-radius: 0 0 2.5641025641vw 2.5641025641vw;
padding: 4.6153846154vw 5.3846153846vw;
}
}
.C_question .question--list .list--item .answer__area .TX {
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.C_question .question--list .list--item .answer__area .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.C_question .question--list .list--item .answer__area .TX {
font-size: 3.3333333333vw;
}
}
/* -----------------------
C_plan
----------------------- */
.C_plan .plan--container {
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container {
max-width: 1080px;
}
}
.C_plan .plan--container .plan--content {
display: flex;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content {
flex-wrap: wrap;
justify-content: center;
gap: 20px;
row-gap: 50px;
margin-bottom: 40px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content {
flex-direction: column;
gap: 7.6923076923vw;
margin-bottom: 7.6923076923vw;
}
}
.C_plan .plan--container .plan--content .plan--item {
flex: 1;
position: relative;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item {
min-width: 320px;
}
}
.C_plan .plan--container .plan--content .plan--item .recommend__area {
width: fit-content;
position: absolute;
z-index: 3;
animation: bird-move 4s 0.5s linear infinite;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .recommend__area {
top: -13%;
right: -3%;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .recommend__area {
top: -10%;
right: 7%;
}
}
@keyframes bird-move {
0% {
transform: translate(0, 0%);
}
10% {
transform: translate(0, -10%);
}
20% {
transform: translate(10%, 0%);
}
30% {
transform: translate(10%, -10%);
}
40% {
transform: translate(0%, 0%);
}
50% {
transform: translate(-10%, -10%);
}
60% {
transform: translate(-10%, 0%);
}
70% {
transform: translate(-10%, -10%);
}
80% {
transform: translate(-10%, 0%);
}
90% {
transform: translate(0%, -10%);
}
100% {
transform: translate(0, 0%);
}
}
.C_plan .plan--container .plan--content .plan--item .recommend__area .bird-wrap {
transform: scale(-1, 1);
}
.C_plan .plan--container .plan--content .plan--item .recommend__area .bird-wrap .bird-img {
aspect-ratio: 85/81;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .recommend__area .bird-wrap .bird-img {
width: 85px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .recommend__area .bird-wrap .bird-img {
width: 15.3846153846vw;
}
}
.C_plan .plan--container .plan--content .plan--item .recommend__area .TX {
color: #51493F;
font-weight: 800;
transform: rotate(16.001deg);
white-space: nowrap;
position: absolute;
top: -20%;
right: -40%;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .recommend__area .TX {
font-size: 13px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .recommend__area .TX {
font-size: 3.0769230769vw;
}
}
.C_plan .plan--container .plan--content .plan--item.beginner__plan .plan__name {
background: linear-gradient(90deg, #9B9B9B 0%, #C9C9C9 100%);
}
.C_plan .plan--container .plan--content .plan--item.beginner__plan .plan__price .TX {
color: #9C9C9C;
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item.pro__plan {
margin-top: 7.6923076923vw;
}
}
.C_plan .plan--container .plan--content .plan--item.pro__plan .plan__name {
background: linear-gradient(90deg, #42AFA4 0%, #BAE8E4 100%);
}
.C_plan .plan--container .plan--content .plan--item.pro__plan .plan__price .TX {
color: #42AFA4;
}
.C_plan .plan--container .plan--content .plan--item.pro__plan .plan__detail ul li p:nth-child(1) {
color: #42AFA4;
}
.C_plan .plan--container .plan--content .plan--item.master__plan .plan__name {
background: linear-gradient(90deg, #AF4254 0%, #E8BAC3 100%);
}
.C_plan .plan--container .plan--content .plan--item.master__plan .plan__price .TX {
color: #AF4254;
}
.C_plan .plan--container .plan--content .plan--item.master__plan .plan__detail ul li p:nth-child(1) {
color: #AF4254;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__name {
border-radius: 10px 10px 0 0;
padding: 13px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__name {
border-radius: 2.5641025641vw 2.5641025641vw 0 0;
padding: 2.5641025641vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__name .TL {
color: #FFF;
font-weight: 800;
text-align: center;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__name .TL {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__name .TL {
font-size: 6.1538461538vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__price {
background-color: #FFF;
text-align: center;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__price {
padding: 25px 10px 10px;
min-height: 120px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__price {
padding: 5.1282051282vw 2.5641025641vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__price .TX {
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__price .TX {
font-size: 48px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__price .TX {
font-size: 11.5384615385vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__price .TX span {
color: #C9C9C9;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__price .TX span {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__price .TX span {
font-size: 5.1282051282vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__price .TX-sub {
text-align: center;
white-space: pre-line;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__price .TX-sub {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__price .TX-sub {
font-size: 3.5897435897vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__detail ul {
width: 100%;
display: block;
}
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li {
width: 100%;
background-color: #FFF;
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li {
min-height: 35px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li {
min-height: 7.6923076923vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li:nth-child(odd) {
background: #F2F2F2;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li:last-child {
border-radius: 0 0 10px 10px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li:last-child {
border-radius: 0 0 2.5641025641vw 2.5641025641vw;
}
}
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li p {
height: 100%;
vertical-align: middle;
color: #51493F;
font-weight: 800;
text-align: center;
width: 100%;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li p {
font-size: 16px;
padding-inline: 10px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--content .plan--item .plan__detail ul li p {
font-size: 4.1025641026vw;
padding-inline: 2.5641025641vw;
}
}
.C_plan .plan--container .plan--method {
border-top: solid #C9C9C9;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--method {
border-top-width: 2px;
padding: 13px 22px 0;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--method {
border-top-width: 0.5128205128vw;
padding: 2.5641025641vw 5.1282051282vw;
}
}
.C_plan .plan--container .plan--method .TX-wrap {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--method .TX-wrap {
gap: 16px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--method .TX-wrap {
gap: 4.1025641026vw;
}
}
.C_plan .plan--container .plan--method .TX-wrap .TX {
color: #51493F;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_plan .plan--container .plan--method .TX-wrap .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.C_plan .plan--container .plan--method .TX-wrap .TX {
font-size: 4.1025641026vw;
}
}
/* -----------------------
C_voice--tabs
----------------------- */
.C_voice--tabs {
display: flex;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.C_voice--tabs {
max-width: 1080px;
margin-inline: auto;
border-radius: 20px;
}
}
@media screen and (max-width: 767px) {
.C_voice--tabs {
border-radius: 5.1282051282vw;
}
}
.C_voice--tabs .tsb {
flex: 1;
background: #D9D9D9;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.C_voice--tabs .tsb {
padding-block: 6px;
}
}
@media screen and (max-width: 767px) {
.C_voice--tabs .tsb {
padding-block: 1.5384615385vw;
}
}
.C_voice--tabs .tsb .TX {
white-space: nowrap;
text-align: center;
color: #A7A7A7;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_voice--tabs .tsb .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.C_voice--tabs .tsb .TX {
font-size: 4.1025641026vw;
}
}
.C_voice--tabs .tsb.is-active {
background: #42AFA4;
opacity: 1;
}
.C_voice--tabs .tsb.is-active .TX {
color: #FFF;
}
/* -----------------------
C_voice
----------------------- */
.C_voice {
display: none;
}
.C_voice.active {
display: block;
}
.C_voice--inr {
background: #FFF;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.C_voice--inr {
max-width: 1080px;
padding: min(5.859375vw, 75px) min(2.578125vw, 33px);
}
}
@media screen and (max-width: 767px) {
.C_voice--inr {
padding: 3.5897435897vw 5.641025641vw 10.7692307692vw;
}
}
.C_voice--inr .voice--messages {
width: 100%;
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages {
position: relative;
height: min(15.625vw, 200px);
}
}
@media screen and (max-width: 767px) {
.C_voice--inr .voice--messages {
display: flex;
flex-direction: column;
gap: 10.2564102564vw;
}
}
.C_voice--inr .voice--messages .message {
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message {
position: absolute;
border-radius: min(1.5625vw, 20px);
width: min(21.5625vw, 276px);
height: min(4.84375vw, 62px);
}
}
@media screen and (max-width: 767px) {
.C_voice--inr .voice--messages .message {
position: relative;
border-radius: 5.1282051282vw;
width: 70.7692307692vw;
height: 15.8974358974vw;
margin: 0 auto;
}
}
.C_voice--inr .voice--messages .message::before {
content: "";
position: absolute;
aspect-ratio: 41/20.5;
clip-path: polygon(0 0, 100% 0, 50% 100%);
width: 14.8550724638%;
left: 0;
right: 0;
margin-inline: auto;
top: 99%;
background: #000;
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message.show {
transform: translateY(-50%);
}
}
@media screen and (max-width: 767px) {
.C_voice--inr .voice--messages .message.show {
transform: scale(1.1);
}
}
.C_voice--inr .voice--messages .message.message--01 {
background: #EEA2B4;
}
.C_voice--inr .voice--messages .message.message--01::before {
background: #EEA2B4;
}
.C_voice--inr .voice--messages .message.message--02 {
background: #98CDB3;
}
.C_voice--inr .voice--messages .message.message--02::before {
background: #98CDB3;
}
.C_voice--inr .voice--messages .message.message--03 {
background: #A8A3CF;
}
.C_voice--inr .voice--messages .message.message--03::before {
background: #A8A3CF;
}
.C_voice--inr .voice--messages .message.message--04 {
background: #FFD346;
}
.C_voice--inr .voice--messages .message.message--04::before {
background: #FFD346;
}
.C_voice--inr .voice--messages .message.message--05 {
background: #77CAF4;
}
.C_voice--inr .voice--messages .message.message--05::before {
background: #77CAF4;
}
.C_voice--inr .voice--messages .message.message--06 {
background: #DB6883;
}
.C_voice--inr .voice--messages .message.message--06::before {
background: #DB6883;
}
.C_voice--inr .voice--messages .message.message--07 {
background: #63BB8F;
}
.C_voice--inr .voice--messages .message.message--07::before {
background: #63BB8F;
}
.C_voice--inr .voice--messages .message.message--08 {
background: #7A71BE;
}
.C_voice--inr .voice--messages .message.message--08::before {
background: #7A71BE;
}
.C_voice--inr .voice--messages .message.message--09 {
background: #E4B728;
}
.C_voice--inr .voice--messages .message.message--09::before {
background: #E4B728;
}
.C_voice--inr .voice--messages .message.message--10 {
background: #50AAD7;
}
.C_voice--inr .voice--messages .message.message--10::before {
background: #50AAD7;
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--01, .C_voice--inr .voice--messages .message.message--05, .C_voice--inr .voice--messages .message.message--06, .C_voice--inr .voice--messages .message.message--10 {
left: 0;
top: min(3.125vw, 40px);
}
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--02, .C_voice--inr .voice--messages .message.message--07, .C_voice--inr .voice--messages .message.message--04, .C_voice--inr .voice--messages .message.message--09 {
left: 18.9349112426%;
bottom: 0;
}
}
@media screen and (max-width: 960px) and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--02, .C_voice--inr .voice--messages .message.message--07, .C_voice--inr .voice--messages .message.message--04, .C_voice--inr .voice--messages .message.message--09 {
left: 14.7928994083%;
}
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--03, .C_voice--inr .voice--messages .message.message--08 {
left: 0;
right: 0;
margin-inline: auto;
top: 0;
}
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--04, .C_voice--inr .voice--messages .message.message--09 {
left: unset;
right: 18.9349112426%;
}
}
@media screen and (max-width: 960px) and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--04, .C_voice--inr .voice--messages .message.message--09 {
right: 14.7928994083%;
}
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message.message--05, .C_voice--inr .voice--messages .message.message--10 {
left: unset;
right: 0;
}
}
.C_voice--inr .voice--messages .message .TX {
color: #FFF;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--messages .message .TX {
font-size: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.C_voice--inr .voice--messages .message .TX {
font-size: 4.1025641026vw;
}
}
.C_voice--inr .voice--animals {
display: flex;
gap: var(--gap);
}
@media screen and (min-width: 768px) {
.C_voice--inr .voice--animals {
--item: 5;
--gap: 9px;
margin-top: min(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.C_voice--inr .voice--animals {
--item: 2;
--gap: calc((6 / 390) * 100vw);
flex-wrap: wrap;
justify-content: center;
margin-top: 2.5641025641vw;
}
}
.C_voice--inr .voice--animals .animal {
aspect-ratio: 187/190;
transition: transform 0.3s ease;
transform-origin: center bottom;
width: calc(100% / var(--item) - var(--gap) * (var(--item) - 1) / var(--item));
}
.C_voice--inr .voice--animals .animal:hover {
transform: scale(1.1);
}
.C_voice--inr .voice--animals .animal.animal--img01 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img02 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img03 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img04 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img05 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img06 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img07 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img08 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img09 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_voice--inr .voice--animals .animal.animal--img10 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* -----------------------
C_floating_btn
----------------------- */
.C_floating_btn {
position: fixed;
z-index: 100;
aspect-ratio: 1;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
.C_floating_btn {
padding: 10px;
bottom: 0px;
right: 20px;
}
}
@media screen and (max-width: 767px) {
.C_floating_btn {
padding: 2.5641025641vw;
bottom: -7.6923076923vw;
right: 0vw;
}
}
.C_floating_btn.is-active {
opacity: 1;
pointer-events: auto;
}
.C_floating_btn a {
position: relative;
z-index: 3;
display: block;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.C_floating_btn a:hover .TX {
transform: scale(1.2);
}
.C_floating_btn a .TX {
color: #505050;
font-weight: 800;
white-space: nowrap;
transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.C_floating_btn a .TX {
font-size: 20px;
}
}
@media screen and (max-width: 767px) {
.C_floating_btn a .TX {
font-size: 3.5897435897vw;
}
}
.C_floating_btn .decorations {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
margin: auto;
z-index: 2;
animation: deco-move 40s ease infinite;
}
@keyframes deco-move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.C_floating_btn .decorations .deco {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
position: absolute;
}
.C_floating_btn .decorations .deco.deco-01 {
aspect-ratio: 1;
z-index: 2;
width: 50%;
top: 0;
left: 0;
animation: deco-move01 25s ease-out infinite;
}
@keyframes deco-move01 {
0%, 100% {
top: 0;
left: 0;
}
50% {
top: 50%;
left: 50%;
}
}
.C_floating_btn .decorations .deco.deco-01 .radius {
width: 100%;
height: 100%;
background-color: #ffde63;
border-radius: 26% 74% 54% 46%/42% 30% 70% 58%;
}
.C_floating_btn .decorations .deco.deco-02 {
aspect-ratio: 1;
z-index: 1;
width: 90%;
inset: 0;
margin: auto;
}
@keyframes deco-move02 {
0%, 100% {
top: 30%;
right: 0;
}
50% {
top: 30%;
right: 30%;
}
}
.C_floating_btn .decorations .deco.deco-02 .radius {
width: 100%;
height: 100%;
background-color: #ffefb4;
border-radius: 48% 52% 28% 72%/58% 49% 51% 42%;
}
.C_floating_btn .decorations .deco.deco-03 {
aspect-ratio: 1;
z-index: 3;
width: 110%;
bottom: 0;
right: 0;
animation: deco-move03 30s ease infinite;
}
@keyframes deco-move03 {
0%, 100% {
bottom: 0%;
right: 0%;
}
50% {
bottom: 30%;
right: 30%;
}
}
.C_floating_btn .decorations .deco.deco-03 .radius {
width: 100%;
height: 100%;
border: solid #fcb245;
border-radius: 26% 74% 54% 46%/42% 30% 70% 58%;
}
@media screen and (min-width: 768px) {
.C_floating_btn .decorations .deco.deco-03 .radius {
border-width: 2px;
}
}
/* -----------------------
sec-about
----------------------- */
.sec-about {
position: relative;
}
@media screen and (min-width: 768px) {
.sec-about {
padding: 231px 50px 271px;
}
}
@media screen and (max-width: 767px) {
.sec-about {
padding: 19.2307692308vw 5.1282051282vw 81.7948717949vw;
}
}
.sec-about--inr {
display: flex;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-about--inr {
max-width: 1080px;
margin-inline: auto;
justify-content: space-between;
gap: 60px;
}
}
@media screen and (max-width: 1080px) and (min-width: 768px) {
.sec-about--inr {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 90px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr {
flex-direction: column;
align-items: center;
gap: 20.7692307692vw;
}
}
.sec-about--inr .sec-about--img_area {
position: relative;
height: fit-content;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--img_area {
display: flex;
flex-direction: column;
gap: 8px;
width: 450px;
margin-left: 70px;
}
}
@media screen and (max-width: 1080px) and (min-width: 768px) {
.sec-about--inr .sec-about--img_area {
margin-left: 0;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--img_area {
width: 84.1025641026vw;
}
}
.sec-about--inr .sec-about--img_area .img {
aspect-ratio: 450/245;
border: solid #FFF;
box-shadow: 0 14px 20px 0 rgba(0, 0, 0, 0.2);
width: 100%;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--img_area .img {
border-width: 10px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--img_area .img {
border-width: 1.5384615385vw;
}
}
.sec-about--inr .sec-about--img_area .img.img-01 {
background-image: url("../img/about-img-01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: rotate(-4.877deg);
position: relative;
z-index: 1;
}
.sec-about--inr .sec-about--img_area .img.img-02 {
background-image: url("../img/about-img-02.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: rotate(8.406deg);
position: relative;
z-index: 3;
}
.sec-about--inr .sec-about--img_area .chara {
background-image: url('data:image/svg+xml;utf-8, ');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 174/284;
position: absolute;
transform: rotate(-18deg);
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--img_area .chara {
z-index: 2;
width: 38.6666666667%;
bottom: 10%;
left: -30%;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--img_area .chara {
z-index: 4;
width: 30vw;
bottom: 9.2307692308vw;
right: -16.6666666667vw;
}
}
.sec-about--inr .sec-about--txt_area {
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area--inr {
width: 448px;
display: flex;
flex-direction: column;
gap: 20px;
}
}
@media screen and (max-width: 1080px) and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area--inr {
align-items: center;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area--inr .C_title {
margin-inline: auto;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area--inr .sub--ttl {
margin-top: 12.0512820513vw;
}
}
.sec-about--inr .sec-about--txt_area--inr .sub--ttl .TX {
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area--inr .sub--ttl .TX {
font-size: 32px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area--inr .sub--ttl .TX {
text-align: center;
font-size: 6.1538461538vw;
}
}
.sec-about--inr .sec-about--txt_area--inr .sub--ttl .TX span {
color: #F49047;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area--inr .txt {
width: 400px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area--inr .txt {
margin-top: 2.5641025641vw;
}
}
.sec-about--inr .sec-about--txt_area--inr .txt .TX {
font-weight: 800;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area--inr .txt .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area--inr .txt .TX {
font-size: 4.1025641026vw;
}
}
.sec-about--inr .sec-about--txt_area .characters {
position: relative;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area .characters {
margin-top: 106px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area .characters {
margin-top: 9.7435897436vw;
}
}
.sec-about--inr .sec-about--txt_area .characters .chara {
width: fit-content;
}
.sec-about--inr .sec-about--txt_area .characters .chara.chara-02 {
transform: rotate(-5.745deg);
}
.sec-about--inr .sec-about--txt_area .characters .chara.chara-03 {
transform: rotate(7.775deg);
position: absolute;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area .characters .chara.chara-03 {
top: -26%;
right: -25%;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area .characters .chara.chara-03 {
top: -14.358974359vw;
right: -10.7692307692vw;
}
}
.sec-about--inr .sec-about--txt_area .characters .chara-02--img {
aspect-ratio: 181/258;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation-delay: 0.5s;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area .characters .chara-02--img {
width: 181px;
margin-left: 105px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area .characters .chara-02--img {
width: 32.0512820513vw;
margin-left: 23.3333333333vw;
}
}
.sec-about--inr .sec-about--txt_area .characters .chara-03--img {
aspect-ratio: 241/256;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation-delay: 1s;
}
@media screen and (min-width: 768px) {
.sec-about--inr .sec-about--txt_area .characters .chara-03--img {
width: 241px;
}
}
@media screen and (max-width: 767px) {
.sec-about--inr .sec-about--txt_area .characters .chara-03--img {
width: 42.5641025641vw;
}
}
.sec-about .decorations {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1900px;
}
.sec-about .decorations .deco {
position: absolute;
}
.sec-about .decorations .deco.deco-01 {
aspect-ratio: 484/530;
background-image: url("../img/marbles/marble-04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sec-about .decorations .deco.deco-01 {
width: 484px;
bottom: 86px;
left: -224px;
}
}
@media screen and (max-width: 767px) {
.sec-about .decorations .deco.deco-01 {
width: 57.1794871795vw;
top: 33.8461538462vw;
left: -25.1282051282vw;
}
}
.sec-about .decorations .deco.deco-02 {
aspect-ratio: 556/613;
background-image: url("../img/marbles/marble-05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sec-about .decorations .deco.deco-02 {
width: 556px;
top: 10px;
right: -451px;
}
}
@media screen and (max-width: 767px) {
.sec-about .decorations .deco.deco-02 {
width: 63.0769230769vw;
bottom: 71.7948717949vw;
right: -43.3333333333vw;
}
}
/* -----------------------
sec-function
----------------------- */
.sec-function {
position: relative;
}
@media screen and (min-width: 768px) {
.sec-function {
padding: 0 0 233px;
}
}
@media screen and (max-width: 767px) {
.sec-function {
padding: 19.2307692308vw 0 22.8205128205vw;
}
}
.sec-function--inr {
background-image: url("../img/function-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 768px) {
.sec-function--inr {
background-position: center top;
width: 100%;
height: max(919px, 71.796875vw);
height: 919px;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 767px) {
.sec-function--inr {
background-position: left 67% top;
width: 100%;
height: 144.358974359vw;
}
}
.sec-function--inr .sec-function--contents {
position: absolute;
z-index: 2;
left: 0;
right: 0;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.sec-function--inr .sec-function--contents {
max-width: 1080px;
top: -114px;
padding-inline: 50px;
}
}
@media screen and (max-width: 767px) {
.sec-function--inr .sec-function--contents {
top: -69.2307692308vw;
padding-left: 5.1282051282vw;
}
}
@media screen and (min-width: 768px) {
.sec-function--inr .sec-function--contents .txt {
margin-top: 20px;
}
}
@media screen and (max-width: 870px) and (min-width: 767px) {
.sec-function--inr .sec-function--contents .txt {
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 10px;
}
}
@media screen and (max-width: 767px) {
.sec-function--inr .sec-function--contents .txt {
margin-top: 5.1282051282vw;
padding-right: 5.1282051282vw;
}
}
.sec-function--inr .sec-function--contents .txt .TX {
font-weight: 800;
}
@media screen and (min-width: 768px) {
.sec-function--inr .sec-function--contents .txt .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.sec-function--inr .sec-function--contents .txt .TX {
font-size: 4.1025641026vw;
}
}
.sec-function--inr .sec-function--community_board {
position: absolute;
left: 0;
right: 0;
margin-inline: auto;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-function--inr .sec-function--community_board {
bottom: -77px;
}
}
@media screen and (max-width: 767px) {
.sec-function--inr .sec-function--community_board {
bottom: -9.2307692308vw;
}
}
.sec-function--inr .decorations {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.sec-function--inr .decorations {
max-width: 1900px;
}
}
.sec-function--inr .decorations .deco-01 {
position: absolute;
background-image: url("../img/marbles/marble-06.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 314/354;
}
@media screen and (min-width: 768px) {
.sec-function--inr .decorations .deco-01 {
width: 314.959px;
top: -150px;
right: -130px;
}
}
/* -----------------------
sec-dress-up
----------------------- */
.sec-dress-up {
position: relative;
background-position: center;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.sec-dress-up {
background-image: radial-gradient(circle, #666666 2px, transparent 2px);
background-size: 38px 38px;
padding: 115px 50px 135px;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up {
background-image: radial-gradient(circle, #666666 0.2564102564vw, transparent 0.2564102564vw);
background-size: 7.6923076923vw 7.6923076923vw;
padding: 17.6923076923vw 5.1282051282vw 15.3846153846vw;
}
}
.sec-dress-up--inr {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-dress-up--inr {
max-width: 1080px;
margin-inline: auto;
}
}
.sec-dress-up--inr .sec-dress-up--container {
display: flex;
}
@media screen and (min-width: 768px) {
.sec-dress-up--inr .sec-dress-up--container {
align-items: center;
justify-content: space-between;
gap: 20px;
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.sec-dress-up--inr .sec-dress-up--container {
gap: 60px;
flex-direction: column;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up--inr .sec-dress-up--container {
flex-direction: column;
gap: 7.6923076923vw;
}
}
@media screen and (min-width: 768px) {
.sec-dress-up--inr .sec-dress-up--container .sec-dress-up--ttl .txt {
margin-top: 30px;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up--inr .sec-dress-up--container .sec-dress-up--ttl .txt {
margin-top: 7.6923076923vw;
}
}
.sec-dress-up--inr .sec-dress-up--container .sec-dress-up--ttl .txt .TX {
font-weight: 800;
}
@media screen and (min-width: 768px) {
.sec-dress-up--inr .sec-dress-up--container .sec-dress-up--ttl .txt .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up--inr .sec-dress-up--container .sec-dress-up--ttl .txt .TX {
font-size: 4.1025641026vw;
}
}
.sec-dress-up--inr .sec-dress-up--tabs {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
--item: 5;
}
@media screen and (min-width: 768px) {
.sec-dress-up--inr .sec-dress-up--tabs {
margin-top: 30px;
--gap: 40px;
max-width: 860px;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up--inr .sec-dress-up--tabs {
margin-top: 11.5384615385vw;
--gap: calc((16 / 390) * 100vw);
}
}
.sec-dress-up--inr .sec-dress-up--tabs .C_dress_up-tab {
width: calc(100% / var(--item) - var(--gap) * (var(--item) - 1) / var(--item));
}
.sec-dress-up .decorations {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-inline: auto;
z-index: 1;
}
@media screen and (min-width: 768px) {
.sec-dress-up .decorations {
max-width: 1900px;
}
}
.sec-dress-up .decorations .deco {
position: absolute;
}
.sec-dress-up .decorations .deco.deco-01 {
aspect-ratio: 727/1136;
background-image: url("../img/marbles/marble-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sec-dress-up .decorations .deco.deco-01 {
width: 422px;
top: -110px;
left: -140px;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up .decorations .deco.deco-01 {
width: 56.6666666667vw;
top: -24.8717948718vw;
right: -20.7692307692vw;
}
}
.sec-dress-up .decorations .deco.deco-02 {
aspect-ratio: 421/298;
background-image: url("../img/marbles/marble-07.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sec-dress-up .decorations .deco.deco-02 {
width: 421px;
bottom: -90px;
right: -93px;
}
}
@media screen and (max-width: 767px) {
.sec-dress-up .decorations .deco.deco-02 {
display: none;
}
}
/* -----------------------
sec-possible
----------------------- */
.sec-possible {
position: relative;
}
.sec-possible--inr {
background-color: #FFFEF1;
}
@media screen and (min-width: 768px) {
.sec-possible--inr {
padding: 117px 50px 135px;
}
}
@media screen and (max-width: 767px) {
.sec-possible--inr {
padding: 15.641025641vw 5.1282051282vw 21.5384615385vw;
}
}
@media screen and (min-width: 768px) {
.sec-possible--inr .sec-possible--container {
margin-top: 90px;
}
}
@media screen and (max-width: 767px) {
.sec-possible--inr .sec-possible--container {
margin-top: 12.0512820513vw;
}
}
.sec-possible--inr .sec-possible--container .sec-possible--container--tabs {
display: flex;
justify-content: center;
gap: var(--gap);
--item: 5;
}
@media screen and (min-width: 768px) {
.sec-possible--inr .sec-possible--container .sec-possible--container--tabs {
--gap: 50px;
margin-bottom: 60px;
max-width: 700px;
margin-inline: auto;
}
}
@media screen and (max-width: 767px) {
.sec-possible--inr .sec-possible--container .sec-possible--container--tabs {
--gap: calc(( 27 / 390) * 100vw);
margin-bottom: 15.3846153846vw;
}
}
.sec-possible--inr .sec-possible--container .sec-possible--container--tabs .C_possible_tab {
width: calc(100% / var(--item) - var(--gap) * (var(--item) - 1) / var(--item));
}
.sec-possible--inr .sec-possible--container .sec-possible--container--contents {
display: flex;
justify-content: center;
}
.sec-possible--outer {
position: relative;
background-color: #FFF366;
}
@media screen and (min-width: 768px) {
.sec-possible--outer {
padding-block: 37px 35px;
}
}
@media screen and (max-width: 767px) {
.sec-possible--outer {
padding-block: 9.2307692308vw 9.4871794872vw;
}
}
.sec-possible--outer .sec-possible--outer--ttl {
position: absolute;
top: 0;
left: 50%;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.sec-possible--outer .sec-possible--outer--ttl {
transform: translate(-50%, -50%);
}
}
@media screen and (max-width: 767px) {
.sec-possible--outer .sec-possible--outer--ttl {
transform: translate(-50%, -70%);
}
}
.sec-possible--outer .sec-possible--outer--ttl .TL {
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.sec-possible--outer .sec-possible--outer--ttl .TL {
text-align: center;
}
}
.sec-possible--outer .sec-possible--outer--ttl .TL span {
color: transparent;
-webkit-text-stroke-color: #ffffff;
font-weight: 800;
position: relative;
color: #505050;
}
@media screen and (min-width: 768px) {
.sec-possible--outer .sec-possible--outer--ttl .TL span {
-webkit-text-stroke-width: 6px;
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.sec-possible--outer .sec-possible--outer--ttl .TL span {
-webkit-text-stroke-width: 1.5384615385vw;
font-size: 4.1025641026vw;
}
}
.sec-possible--outer .sec-possible--outer--ttl .TL span::before {
content: attr(data-text);
-webkit-text-stroke-width: 0;
-webkit-text-stroke-color: unset;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
font-weight: 800;
color: #505050;
}
/* -----------------------
sec-voice
----------------------- */
.sec-voice {
position: relative;
background-position: center;
}
@media screen and (min-width: 768px) {
.sec-voice {
background-image: radial-gradient(circle, #666666 2px, transparent 2px);
background-size: 38px 38px;
padding: 123px 50px 114px;
}
}
@media screen and (max-width: 767px) {
.sec-voice {
background-image: radial-gradient(circle, #666666 0.2564102564vw, transparent 0.2564102564vw);
background-size: 7.6923076923vw 7.6923076923vw;
padding: 17.6923076923vw 5.1282051282vw 15.3846153846vw;
}
}
.sec-voice--inr {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-voice--inr .sec-voice--container {
margin-top: 60px;
}
}
@media screen and (max-width: 767px) {
.sec-voice--inr .sec-voice--container {
margin-top: 15.3846153846vw;
}
}
@media screen and (min-width: 768px) {
.sec-voice--inr .sec-voice--container .sec-voice--container--tabs {
margin-bottom: 13px;
}
}
@media screen and (max-width: 767px) {
.sec-voice--inr .sec-voice--container .sec-voice--container--tabs {
margin-bottom: 5.1282051282vw;
}
}
.sec-voice .decorations {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.sec-voice .decorations {
max-width: 1900px;
margin-inline: auto;
}
}
.sec-voice .decorations .deco {
position: absolute;
aspect-ratio: 384/509;
background-image: url("../img/marbles/marble-08.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sec-voice .decorations .deco.deco-01 {
width: 268px;
top: 20px;
right: -100px;
}
}
@media screen and (max-width: 767px) {
.sec-voice .decorations .deco.deco-01 {
width: 56.1538461538vw;
top: 10.2564102564vw;
right: -23.0769230769vw;
}
}
@media screen and (min-width: 768px) {
.sec-voice .decorations .deco.deco-02 {
width: 410px;
bottom: -20px;
left: -133px;
}
}
@media screen and (max-width: 767px) {
.sec-voice .decorations .deco.deco-02 {
width: 82.0512820513vw;
bottom: -10.2564102564vw;
left: -26.4102564103vw;
}
}
/* -----------------------
sec-question
----------------------- */
.sec-question {
position: relative;
}
@media screen and (min-width: 768px) {
.sec-question {
padding: 126px 50px 166px;
}
}
@media screen and (max-width: 767px) {
.sec-question {
padding: 15.3846153846vw 5.1282051282vw 41.2820512821vw;
}
}
.sec-question--inr {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-question--inr .sec-question--ttl {
margin-bottom: 72px;
}
}
@media screen and (max-width: 767px) {
.sec-question--inr .sec-question--ttl {
margin-bottom: 15.3846153846vw;
}
}
.sec-question .decorations {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.sec-question .decorations {
max-width: 1900px;
margin-inline: auto;
}
}
.sec-question .decorations .deco {
position: absolute;
}
.sec-question .decorations .deco.deco-01 {
background-image: url("../img/marbles/marble-09.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 360/578;
}
@media screen and (min-width: 768px) {
.sec-question .decorations .deco.deco-01 {
width: 360px;
top: 0px;
left: -30px;
}
}
@media screen and (max-width: 767px) {
.sec-question .decorations .deco.deco-01 {
width: 38.4615384615vw;
top: -5.1282051282vw;
left: -15.3846153846vw;
}
}
/* -----------------------
sec-plan
----------------------- */
.sec-plan {
position: relative;
background-color: #FFFEF1;
}
@media screen and (min-width: 768px) {
.sec-plan {
padding: 126px 50px;
}
}
@media screen and (max-width: 767px) {
.sec-plan {
padding: 15.3846153846vw 5.1282051282vw;
}
}
.sec-plan--inr {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-plan--inr .sec-plan--ttl {
margin-bottom: 150px;
}
}
@media screen and (max-width: 767px) {
.sec-plan--inr .sec-plan--ttl {
margin-bottom: 12.8205128205vw;
}
}
.sec-plan .decorations {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.sec-plan .decorations {
max-width: 1900px;
margin-inline: auto;
}
}
.sec-plan .decorations .deco {
position: absolute;
}
.sec-plan .decorations .deco.deco-01 {
background-image: url("../img/marbles/marble-09.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 360/578;
}
@media screen and (min-width: 768px) {
.sec-plan .decorations .deco.deco-01 {
width: 360px;
top: 0px;
right: -30px;
}
}
@media screen and (max-width: 767px) {
.sec-plan .decorations .deco.deco-01 {
width: 38.4615384615vw;
top: -5.1282051282vw;
right: -15.3846153846vw;
}
}
/* -----------------------
sec-start
----------------------- */
.sec-start {
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.sec-start {
padding: 50px 100px 120px;
}
}
@media screen and (max-width: 767px) {
.sec-start {
padding: 15.3846153846vw 5.1282051282vw 30.2564102564vw;
}
}
.sec-start--inr {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.sec-start--inr .sec-start--ttl {
margin-bottom: 100px;
}
}
@media screen and (max-width: 767px) {
.sec-start--inr .sec-start--ttl {
margin-bottom: 11.7948717949vw;
}
}
.sec-start--inr .sec-start--ttl .C_title .C_title--inner .main--title .TL {
white-space: nowrap;
}
.sec-start .decorations {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.sec-start .decorations {
max-width: 1900px;
margin-inline: auto;
}
}
.sec-start .decorations .deco {
position: absolute;
}
.sec-start .decorations .deco.deco-01 {
background-image: url("../img/marbles/marble-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 441/685;
}
@media screen and (min-width: 768px) {
.sec-start .decorations .deco.deco-01 {
width: 441px;
top: 0px;
right: -10px;
}
}
@media screen and (max-width: 767px) {
.sec-start .decorations .deco.deco-01 {
width: 71.7948717949vw;
top: 38.4615384615vw;
right: -33.3333333333vw;
}
}
/* -----------------------
anime
----------------------- */
.hover-opa {
transition: 0.3s;
}
.hover-opa:hover {
opacity: 0.6;
}
.hover-scale {
transition: 0.3s;
}
.hover-scale:hover {
transform: scale(1.05);
}
.move-rotate-type01 {
animation: move-rotate-type01 ease-in-out infinite;
}
@keyframes move-rotate-type01 {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(-90deg) scale(0.6);
}
50% {
transform: rotate(0deg) scale(1.2);
}
75% {
transform: rotate(60deg) scale(0.6);
}
100% {
transform: rotate(0deg) scale(1);
}
}
.move-rotate-type02 {
animation: move-rotate-type02 ease-in-out infinite;
}
@keyframes move-rotate-type02 {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(90deg) scale(1.2);
}
50% {
transform: rotate(0deg) scale(0.6);
}
75% {
transform: rotate(-60deg) scale(1.2);
}
100% {
transform: rotate(0deg) scale(1);
}
}
.move-rotate-type03 {
animation: move-rotate-type03 ease-in-out infinite;
}
@keyframes move-rotate-type03 {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(60deg) scale(1.5);
}
50% {
transform: rotate(0deg) scale(0.5);
}
75% {
transform: rotate(90deg) scale(1.2);
}
100% {
transform: rotate(0deg) scale(1);
}
}
.up {
opacity: 0;
transform: translateY(100px);
}
.up.show {
animation: up 0.5s ease forwards;
}
@keyframes up {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.down {
opacity: 0;
transform: translateY(-100px);
}
.down.show {
animation: down ease forwards;
}
@keyframes down {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.left {
opacity: 0;
transform: translateX(100%);
}
.left.show {
animation: left ease forwards;
}
@keyframes left {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.right {
opacity: 0;
transform: translateX(-100%);
}
.right.show {
animation: right ease forwards;
}
@keyframes right {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.pop {
opacity: 0;
transform: scale(0.5);
}
.pop.show {
animation: pop ease forwards;
}
@keyframes pop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.loadUp {
opacity: 0;
transform: translateY(100%);
}
.loadUp.show {
animation: loadUp ease forwards;
}
@keyframes loadUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.loadDown {
opacity: 0;
transform: translateY(-100%);
}
.loadDown.show {
animation: loadDown ease forwards;
}
@keyframes loadDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.loadLeft {
opacity: 0;
transform: translateX(100%);
}
.loadLeft.show {
animation: loadLeft ease forwards;
}
@keyframes loadLeft {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.loadRight {
opacity: 0;
transform: translateX(-100%);
}
.loadRight.show {
animation: loadRight ease forwards;
}
@keyframes loadRight {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.loadPop {
opacity: 0;
transform: scale(0.5);
}
.loadPop.show {
animation: loadPop ease forwards;
}
@keyframes loadPop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.delay-01 {
animation-delay: 0.1s !important;
}
.delay-02 {
animation-delay: 0.2s !important;
}
.delay-03 {
animation-delay: 0.3s !important;
}
.delay-04 {
animation-delay: 0.4s !important;
}
.delay-05 {
animation-delay: 0.5s !important;
}
.delay-06 {
animation-delay: 0.6s !important;
}
.delay-07 {
animation-delay: 0.7s !important;
}
.delay-08 {
animation-delay: 0.8s !important;
}
.delay-09 {
animation-delay: 0.9s !important;
}
.delay-10 {
animation-delay: 1s !important;
}
.delay-15 {
animation-delay: 1.5s !important;
}
.duration-01 {
animation-duration: 0.1s !important;
}
.duration-02 {
animation-duration: 0.2s !important;
}
.duration-03 {
animation-duration: 0.3s !important;
}
.duration-04 {
animation-duration: 0.4s !important;
}
.duration-05 {
animation-duration: 0.5s !important;
}
.duration-06 {
animation-duration: 0.6s !important;
}
.duration-07 {
animation-duration: 0.7s !important;
}
.duration-08 {
animation-duration: 0.8s !important;
}
.duration-09 {
animation-duration: 0.9s !important;
}
.duration-10 {
animation-duration: 1s !important;
}
.duration-15 {
animation-duration: 1.5s !important;
}
.duration-20 {
animation-duration: 2s !important;
}
.duration-30 {
animation-duration: 3s !important;
}
.duration-400 {
animation-duration: 40s !important;
}
.duration-500 {
animation-duration: 50s !important;
}
.duration-600 {
animation-duration: 60s !important;
}
/*# sourceMappingURL=main.css.map */