@charset "UTF-8";
/* -----------------------
リセット
----------------------- */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
}
article, header, footer, aside, figure, figcaption, nav, section {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
line-height: 1;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
ol, ul {
list-style: none;
list-style-type: none;
}
button {
background: none;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
a {
text-decoration: none;
}
img {
display: block;
}
/* -----------------------
C_character
----------------------- */
.C_character {
aspect-ratio: 1/1;
}
.C_character.character-1 {
background-image: url("../img/character-1.gif");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_character.character-1 {
width: 25vw;
}
}
@media screen and (max-width: 767px) {
.C_character.character-1 {
width: 56.4102564103vw;
}
}
.C_character.character-2 {
background-image: url("../img/character-2.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_character.character-2 {
width: 17.1875vw;
}
}
@media screen and (max-width: 767px) {
.C_character.character-2 {
width: 56.4102564103vw;
}
}
.display__character {
aspect-ratio: 234/274;
width: 100%;
position: relative;
}
.display__character .selected_items-character-character {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.display__character .selected_items-item {
position: absolute;
object-fit: contain;
object-position: center;
z-index: 1;
}
/* -----------------------
C_categorySide
----------------------- */
.C_categorySide {
background: #FFF;
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
overflow-y: scroll;
flex-shrink: 0;
height: 363px;
padding: 21px 19px 43px;
}
@media screen and (min-width: 768px) {
.C_categorySide {
width: 186px;
}
}
.C_categorySide--inner .TL {
color: #7FBF99;
font-weight: 800;
font-size: 20px;
}
.C_categorySide--inner ul {
margin-top: 6px;
}
.C_categorySide--inner ul li {
border-top: dashed 1px #7FBF99;
padding: 8px 9px;
min-height: 30px;
}
.C_categorySide--inner ul li:last-child {
border-bottom: dashed 1px #7FBF99;
}
.C_categorySide--inner ul li .TX a {
color: #BFBFBF;
font-weight: 600;
line-height: normal;
font-size: 14px;
}
.C_categorySide--inner ul li .TX.change a {
color: #4EA772;
}
/* -----------------------
C_menu-btn
----------------------- */
.C_all-menu-btn {
display: block;
border: solid #FFF;
background: linear-gradient(180deg, #F69082 0%, #F4BBB4 100%);
box-shadow: 0px 3.314px 6.629px 0px rgba(0, 0, 0, 0.25);
width: fit-content;
transition: all 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.C_all-menu-btn {
border-radius: clamp(3.31425px, 1.035703125vw, 9.94275px);
padding: clamp(3.25px, 1.015625vw, 9.75px) clamp(7px, 2.1875vw, 21px) clamp(4.25px, 1.328125vw, 12.75px) clamp(3.5px, 1.09375vw, 10.5px);
border-width: clamp(0.8285px, 0.25890625vw, 2.4855px);
}
}
@media screen and (max-width: 767px) {
.C_all-menu-btn {
border-radius: 3.3992307692vw;
padding: 0.7692307692vw 1.2820512821vw 1.0256410256vw 1.2820512821vw;
border-width: 0.5128205128vw;
}
}
.C_all-menu-btn.is-bk {
background: linear-gradient(180deg, #8291f6 0%, #b4c2f4 100%);
}
.C_all-menu-btn.is-green {
background: linear-gradient(180deg, #82f682 0%, #bcf4b4 100%);
}
.C_all-menu-btn__inner {
display: flex;
}
@media screen and (min-width: 768px) {
.C_all-menu-btn__inner {
align-items: flex-end;
gap: clamp(2.25px, 0.703125vw, 6.75px);
}
}
@media screen and (max-width: 767px) {
.C_all-menu-btn__inner {
align-items: center;
gap: 0.7692307692vw;
}
}
.C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.C_all-menu-btn__inner__img {
width: clamp(28.25px, 8.828125vw, 84.75px);
height: clamp(21.75px, 6.796875vw, 65.25px);
}
}
@media screen and (max-width: 767px) {
.C_all-menu-btn__inner__img {
width: 5.1282051282vw;
height: 4.358974359vw;
}
}
.C_all-menu-btn__inner__text {
position: relative;
}
.C_all-menu-btn__inner__text .TX {
color: #FFF;
font-weight: 600;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.C_all-menu-btn__inner__text .TX {
font-size: clamp(13.257px, 4.1428125vw, 39.771px);
letter-spacing: clamp(0.66275px, 0.207109375vw, 1.98825px);
}
}
@media screen and (max-width: 767px) {
.C_all-menu-btn__inner__text .TX {
font-size: 3.0769230769vw;
letter-spacing: 0.2564102564vw;
}
}
.C_all-menu-btn__inner__text .TX-sub {
color: #FFF;
font-weight: 600;
line-height: 1.5;
width: fit-content;
position: absolute;
right: 0;
bottom: 100%;
text-align: center;
background: linear-gradient(180deg, #82f682 0%, #bcf4b4 100%);
border: solid #FFF;
box-shadow: 0px 3.314px 6.629px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.C_all-menu-btn__inner__text .TX-sub {
font-size: clamp(7.5px, 2.34375vw, 22.5px);
letter-spacing: clamp(0.25px, 0.078125vw, 0.75px);
border-radius: clamp(3.31425px, 1.035703125vw, 9.94275px);
padding: clamp(1.25px, 0.390625vw, 3.75px);
border-width: clamp(0.5px, 0.15625vw, 1.5px);
}
}
@media screen and (max-width: 767px) {
.C_all-menu-btn__inner__text .TX-sub {
font-size: 2.5641025641vw;
letter-spacing: 0.1282051282vw;
border-radius: 3.3992307692vw;
padding: 0.7692307692vw;
border-width: 0.2564102564vw;
}
}
.C_all-menu-btn:hover {
box-shadow: unset;
transform: translate(3.314px, 3.314px);
}
.C_all-menu-btn:hover .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* -----------------------
commons
----------------------- */
@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: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
body.active {
overflow: hidden;
}
@media print {
body {
display: none;
}
}
.wappaer {
overflow: hidden;
}
.code {
padding: 10px;
border: solid #ff6600 1px;
background-color: #fff0e6;
}
.memo {
padding: 10px;
background-color: #f2f2f2;
}
iframe {
border: none;
}
/* -----------------------
anime
----------------------- */
.hover-opa {
transition: 0.3s;
}
.hover-opa:hover {
opacity: 0.6;
}
.hover-scale {
transition: 0.3s;
}
.hover-scale:hover {
transform: scale(1.1);
}
.up {
opacity: 0;
}
.up.show {
opacity: 0;
transform: translateY(100%);
animation: up 0.5s ease 0.5s forwards;
}
@keyframes up {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.down {
opacity: 0;
}
.down.show {
opacity: 0;
transform: translateY(-100%);
animation: down 0.5s ease 0.5s forwards;
}
@keyframes down {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.left {
opacity: 0;
}
.left.show {
opacity: 0;
transform: translateX(100%);
animation: left 0.5s ease 0.5s forwards;
}
@keyframes left {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.right {
opacity: 0;
}
.right.show {
opacity: 0;
transform: translateX(-100%);
animation: right 0.5s ease 0.5s forwards;
}
@keyframes right {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.pop {
opacity: 0;
transform: scale(0.5);
}
.pop.show {
opacity: 0;
transform: scale(0.5);
animation: pop 0.5s ease 0.5s forwards;
}
@keyframes pop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* -----------------------
header
----------------------- */
/* -----------------------
footer
----------------------- */
/* -----------------------
my
----------------------- */
.my {
height: 100vh;
width: 100%;
background-image: url("../img/page-my.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: bottom left;
position: relative;
}
@media screen and (min-width: 768px) {
.my {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.my {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.my {
padding: 1.5625vw 0 max(3.125vw, 40px) 3.125vw;
min-height: max(50.78125vw, 650px);
}
}
@media screen and (max-width: 767px) {
.my {
padding: 10.2564102564vw 5.1282051282vw;
}
}
@media screen and (max-width: 767px) and (max-width: 767px) and (min-width: 0px) {
.my {
min-height: 900px;
}
}
.my--inner {
display: flex;
height: 100%;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.my--inner {
gap: 10.9375vw;
}
}
.my--inner .my--title {
flex-shrink: 0;
height: 100%;
position: relative;
z-index: 9;
}
@media screen and (min-width: 768px) {
.my--inner .my--title {
width: max(28.984375vw, 371px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title {
width: 80%;
}
}
.my--inner .my--title--title {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 371/103;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--title {
width: 60%;
padding-top: max(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--title {
width: 60%;
padding-top: 1.7948717949vw;
}
}
.my--inner .my--title--title .TL {
text-align: center;
font-weight: 900;
color: #F8F7F8;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--title .TL {
font-size: max(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--title .TL {
font-size: 4.6153846154vw;
}
}
.my--inner .my--title--name {
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
position: relative;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--name {
width: max(22.65625vw, 290px);
padding: max(1.5625vw, 20px) max(1.953125vw, 25px);
margin-top: max(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--name {
width: 80%;
padding: min(3.8461538462vw, 10px) min(2.5641025641vw, 7px);
margin-top: 7.6923076923vw;
}
}
.my--inner .my--title--name .TX {
font-weight: 400;
color: #6B644D;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--name .TX {
font-size: max(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--name .TX {
font-size: min(4.1025641026vw, 16px);
}
}
.my--inner .my--title--name .badge {
position: absolute;
aspect-ratio: 450/100;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--name .badge {
width: max(10.15625vw, 130px);
right: max(0vw, 0px);
bottom: calc(100% + max(0.234375vw, 3px));
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--name .badge {
width: min(30.7692307692vw, 200px);
right: 0vw;
bottom: calc(100% + 0.7692307692vw);
}
}
@media screen and (min-width: 768px) {
.my--inner .my--title--points {
display: flex;
flex-direction: column;
gap: 0.390625vw;
margin-top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--points {
display: flex;
flex-direction: column;
gap: min(1.2820512821vw, 5px);
margin-top: 2.5641025641vw;
}
}
.my--inner .my--title--points .coin-point {
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--points .coin-point {
width: max(22.65625vw, 290px);
padding: max(0.78125vw, 10px);
display: flex;
flex-direction: column;
gap: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--points .coin-point {
width: 80%;
padding: min(2.5641025641vw, 10px) min(2.5641025641vw, 10px);
display: flex;
flex-direction: column;
gap: 1.2820512821vw;
}
}
.my--inner .my--title--points .coin-point .TX {
font-weight: 400;
color: #6B644D;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--points .coin-point .TX {
font-size: max(0.9375vw, 12px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--points .coin-point .TX {
font-size: min(3.0769230769vw, 12px);
}
}
.my--inner .my--title--points .coin-point .TX span {
font-weight: 400;
color: #6B644D;
word-break: break-all;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--points .coin-point .TX span {
font-size: max(1.09375vw, 14px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--points .coin-point .TX span {
font-size: min(3.5897435897vw, 12px);
}
}
.my--inner .my--title--points .coin-point-select {
display: flex;
}
@media screen and (min-width: 768px) {
.my--inner .my--title--points .coin-point-select {
gap: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--points .coin-point-select {
gap: 1.2820512821vw;
}
}
.my--inner .my--title--points .coin-point-select .coin-point_button {
width: 100%;
text-align: center;
cursor: pointer;
font-weight: 400;
color: #6B644D;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
.my--inner .my--title--points .coin-point-select .coin-point_button {
padding: 0.625vw 0;
font-size: max(1.09375vw, 14px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title--points .coin-point-select .coin-point_button {
padding: 1.2820512821vw 0;
font-size: min(2.8205128205vw, 11px);
}
}
.my--inner .my--title--points .coin-point-select .coin-point_button.blue {
background-color: #4bc7fb;
}
.my--inner .my--title--points .coin-point-select .coin-point_button.gold {
background-color: gold;
}
.my--inner .my--title .C_character {
margin: 0 auto;
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.my--inner .my--title .C_character {
width: clamp(100px, 23.4375vw, 200px);
bottom: 0;
}
.my--inner .my--title .C_character:hover .clothes--change__button {
pointer-events: auto;
opacity: 1;
bottom: 0;
transition: all 0.5s;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title .C_character {
width: clamp(0px, 51.2820512821vw, 180px);
bottom: 0;
}
.my--inner .my--title .C_character.js-character-edit.active .clothes--change__button {
pointer-events: auto;
opacity: 1;
}
}
.my--inner .my--title .C_character .clothes--change__button {
position: absolute;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 0.5s;
}
@media screen and (min-width: 768px) {
.my--inner .my--title .C_character .clothes--change__button {
width: max(7.8125vw, 100px);
height: max(1.953125vw, 25px);
font-size: max(0.78125vw, 10px);
bottom: -15%;
transition-delay: 0.5s;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--title .C_character .clothes--change__button {
width: 25.641025641vw;
height: 6.4102564103vw;
font-size: 2.5641025641vw;
bottom: 0;
}
}
.my--inner .my--info {
height: 100%;
position: absolute;
top: 0;
}
@media screen and (min-width: 768px) {
.my--inner .my--info {
width: 70%;
right: 0;
z-index: 8;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info {
width: 100%;
z-index: 9;
left: -100%;
transition: left 0.3s;
}
.my--inner .my--info.active {
left: 0;
}
.my--inner .my--info.active::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(143, 143, 143, 0.826);
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
.my--inner .my--info .bbs {
background-image: url("../img/bbs.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-position: center bottom;
aspect-ratio: 558/499;
position: absolute;
z-index: 1;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs {
width: clamp(500px, 43.59375vw, 750px);
height: clamp(400px, 38.984375vw, 600px);
left: 1.5625vw;
bottom: 3.125vw;
padding: clamp(40px, 7.03125vw, 80px) clamp(80px, 7.03125vw, 110px) clamp(140px, 12.5vw, 200px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs {
width: 90%;
left: 50%;
translate: -50% 0;
bottom: 30%;
padding: 12.8205128205vw 10.2564102564vw 20.5128205128vw;
}
}
.my--inner .my--info .bbs .chicken {
position: absolute;
z-index: 2;
display: flex;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .chicken {
right: 0vw;
bottom: 100%;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .chicken {
right: 0;
top: -10.2564102564vw;
}
}
.my--inner .my--info .bbs .chicken--serif {
background: #fff;
position: relative;
height: fit-content;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .chicken--serif {
padding: 1.5625vw 1.171875vw 1.5625vw 1.953125vw;
border-radius: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .chicken--serif {
padding: 2.5641025641vw;
border-radius: 25.641025641vw;
}
}
.my--inner .my--info .bbs .chicken--serif::before {
content: "";
display: block;
aspect-ratio: 22/16;
position: absolute;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 35deg;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .chicken--serif::before {
width: 1.71875vw;
right: -0.78125vw;
bottom: 0;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .chicken--serif::before {
width: 3.8461538462vw;
right: -1.2820512821vw;
bottom: 0;
}
}
.my--inner .my--info .bbs .chicken--serif .TX {
color: #3eaddc;
font-weight: 700;
letter-spacing: 0.125vw;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .chicken--serif .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .chicken--serif .TX {
font-size: 3.5897435897vw;
white-space: nowrap;
}
}
.my--inner .my--info .bbs .chicken--bird {
aspect-ratio: 150/109;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .chicken--bird {
width: 11.71875vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .chicken--bird {
width: 25.641025641vw;
}
}
.my--inner .my--info .bbs .chicken--bird iframe {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .title {
margin-bottom: clamp(20px, 2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .title {
margin-bottom: 2.5641025641vw;
}
}
.my--inner .my--info .bbs .title .TL {
color: #fff;
text-align: center;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs .title .TL {
font-size: clamp(14px, 1.25vw, 18px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs .title .TL {
font-size: 3.5897435897vw;
}
}
.my--inner .my--info .bbs--content {
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content {
height: 70%;
display: flex;
flex-direction: column;
gap: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content {
height: 65%;
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
}
}
.my--inner .my--info .bbs--content .sentence li {
border-top: dashed #d6ac87;
position: relative;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content .sentence li {
padding: clamp(7px, 0.625vw, 10px) clamp(18px, 1.71875vw, 25px) clamp(9px, 0.78125vw, 12px);
border-top-width: 0.078125vw;
display: flex;
flex-direction: column;
gap: 0.15625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content .sentence li {
padding: 1.2820512821vw 2.5641025641vw 1.2820512821vw;
border-top-width: 0.2564102564vw;
display: flex;
flex-direction: column;
gap: 0.5128205128vw;
}
}
.my--inner .my--info .bbs--content .sentence li:last-child {
border-bottom: dashed #d6ac87;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content .sentence li:last-child {
border-bottom-width: 0.078125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content .sentence li:last-child {
border-bottom-width: 0.2564102564vw;
}
}
.my--inner .my--info .bbs--content .sentence li .time {
color: #e0e0e0;
font-weight: 400;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content .sentence li .time {
font-size: clamp(8px, 0.78125vw, 12px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content .sentence li .time {
font-size: 2.5641025641vw;
}
}
.my--inner .my--info .bbs--content .sentence li .text {
color: #fff;
font-weight: 500;
line-height: normal;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content .sentence li .text {
font-size: clamp(12px, 1.09375vw, 16px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content .sentence li .text {
font-size: 3.0769230769vw;
}
}
.my--inner .my--info .bbs--content--pageNation {
width: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content--pageNation {
margin-top: clamp(20px, 2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content--pageNation {
margin-top: 2.5641025641vw;
}
}
.my--inner .my--info .bbs--content--pageNation a {
color: #fff;
}
.my--inner .my--info .bbs--content--pageNation span {
color: #333;
}
.my--inner .my--info .bbs--content--pageNation a,
.my--inner .my--info .bbs--content--pageNation span {
font-weight: 500;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .bbs--content--pageNation a,
.my--inner .my--info .bbs--content--pageNation span {
font-size: clamp(12px, 1.09375vw, 16px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .bbs--content--pageNation a,
.my--inner .my--info .bbs--content--pageNation span {
font-size: 3.0769230769vw;
}
}
.my--inner .my--info .spy {
position: absolute;
z-index: 2;
display: flex;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy {
left: -2.34375vw;
bottom: -2.34375vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy {
align-items: center;
left: -12.8205128205vw;
bottom: 20%;
}
}
.my--inner .my--info .spy .mole {
aspect-ratio: 150/109;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy .mole {
width: 23.4375vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy .mole {
width: 51.2820512821vw;
}
}
.my--inner .my--info .spy .mole iframe {
width: 100%;
height: 100%;
}
.my--inner .my--info .spy--text {
position: relative;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy--text {
display: flex;
flex-direction: column;
gap: 1.875vw;
top: 3.90625vw;
left: -4.6875vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy--text {
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
top: 2.5641025641vw;
left: -15.3846153846vw;
}
}
.my--inner .my--info .spy--text--serif {
background: #fff;
position: relative;
height: fit-content;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy--text--serif {
padding: 1.5625vw 1.171875vw 1.5625vw 1.953125vw;
border-radius: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy--text--serif {
padding: 2.5641025641vw;
border-radius: 25.641025641vw;
}
}
.my--inner .my--info .spy--text--serif::before {
content: "";
display: block;
aspect-ratio: 22/16;
position: absolute;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 333deg;
scale: -1 1;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy--text--serif::before {
width: 1.71875vw;
left: -0.78125vw;
bottom: 0;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy--text--serif::before {
width: 3.8461538462vw;
left: -1.2820512821vw;
bottom: 0;
}
}
.my--inner .my--info .spy--text--serif .TX {
color: #f69082;
font-weight: 700;
letter-spacing: 0.125vw;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy--text--serif .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy--text--serif .TX {
font-size: 3.5897435897vw;
white-space: nowrap;
}
}
.my--inner .my--info .spy--text--column {
rotate: -2.7deg;
}
.my--inner .my--info .spy--text--column a {
color: #7a6649;
text-shadow: 0px 4px 20px #b58f56;
font-weight: 900;
display: block;
width: fit-content;
transition: all 0.3s;
pointer-events: auto;
}
@media screen and (min-width: 768px) {
.my--inner .my--info .spy--text--column a {
margin-left: auto;
font-size: 2.03125vw;
letter-spacing: 0.203125vw;
}
}
@media screen and (min-width: 768px) and (min-width: 768px) {
.my--inner .my--info .spy--text--column a:hover {
translate: 5% 0;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--info .spy--text--column a {
font-size: 5.1282051282vw;
letter-spacing: 0.5128205128vw;
}
}
.my--inner .info_button {
position: absolute;
border-radius: 50%;
background: #F38549;
aspect-ratio: 1/1;
z-index: 10;
display: block;
transition: all 0.3s;
width: 51.2820512821vw;
top: -38.4615384615vw;
left: -30.7692307692vw;
cursor: pointer;
}
.my--inner .info_button .TX {
color: #FFFFFF;
position: absolute;
bottom: 25%;
right: 15%;
text-align: center;
line-height: 1.5;
font-weight: 900;
font-size: 1.40625vw;
font-size: 3.5897435897vw;
}
.my--inner .my--content {
transition: right 0.3s;
z-index: 11;
position: absolute;
}
@media screen and (min-width: 768px) {
.my--inner .my--content {
width: 50%;
height: 90%;
right: -48%;
top: 50%;
transform: translateY(-50%);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content {
width: 80%;
height: 98%;
right: -85%;
top: 0;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content.active {
right: -0.390625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content.active {
right: -5.1282051282vw;
}
}
.my--inner .my--content .pageClip {
position: absolute;
z-index: 6;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
top: 0;
}
@media screen and (min-width: 768px) {
.my--inner .my--content .pageClip {
right: -0.390625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content .pageClip {
right: -2.3076923077vw;
}
}
.my--inner .my--content .pageClip .item {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 48/28;
}
@media screen and (min-width: 768px) {
.my--inner .my--content .pageClip .item {
width: 3.75vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content .pageClip .item {
width: 7.6923076923vw;
}
}
.my--inner .my--content--container {
width: 100%;
height: 100%;
}
.my--inner .my--content--container .my--content--page {
background-image: url("../img/note-paper.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: solid #048664;
border-radius: 10px 0 0 10px;
height: 100%;
position: absolute;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .my--content--page {
width: 100%;
border-width: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .my--content--page {
width: 100%;
border-width: 0.7692307692vw;
}
}
.my--inner .my--content--container .my--content--page.page--1 {
top: 0;
right: 0;
z-index: 3;
}
.my--inner .my--content--container .my--content--page.page--2 {
z-index: 2;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .my--content--page.page--2 {
top: 0.46875vw;
right: -0.3125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .my--content--page.page--2 {
top: 1.0256410256vw;
right: -1.0256410256vw;
}
}
.my--inner .my--content--container .my--content--page.page--3 {
z-index: 1;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .my--content--page.page--3 {
top: 0.9375vw;
right: -0.625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .my--content--page.page--3 {
top: 2.0512820513vw;
right: -2.0512820513vw;
}
}
.my--inner .my--content--container .tab {
aspect-ratio: 118/290;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
translate: 0% -50%;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab {
right: 95%;
width: max(7.8125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab {
right: 98%;
width: 20.5128205128vw;
}
}
.my--inner .my--content--container .tab .tabGray {
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s;
}
.my--inner .my--content--container .tab.active {
z-index: 10;
}
.my--inner .my--content--container .tab.active .tabGray {
opacity: 0;
}
.my--inner .my--content--container .tab.tab--1 {
background-image: url('data:image/svg+xml;utf-8,');
top: 27%;
}
.my--inner .my--content--container .tab.tab--2 {
background-image: url('data:image/svg+xml;utf-8,');
top: 72%;
filter: drop-shadow(0 0 0.78125vw rgba(0, 0, 0, 0.5));
}
.my--inner .my--content--container .tab .TX {
text-align: center;
font-weight: 400;
color: #FFFFFF;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab .TX {
font-size: max(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab .TX {
font-size: 4.1025641026vw;
}
}
.my--inner .my--content--container .tab .TX-span {
display: block;
}
.my--inner .my--content--container .gorilla {
position: absolute;
z-index: 10;
aspect-ratio: 1/1;
cursor: pointer;
font-weight: bold;
text-decoration: none;
color: #048664;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .gorilla {
font-size: 1.5625vw;
left: 4.296875vw;
top: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .gorilla {
font-size: 5.1282051282vw;
left: 5.1282051282vw;
top: 3.8461538462vw;
}
}
.my--inner .my--content--container .gorilla:hover {
transform: scale(0.9);
opacity: 0.7;
}
.my--inner .my--content--container .tab--content {
width: 85%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 5;
overflow-y: scroll;
}
.my--inner .my--content--container .tab--content--progress {
display: none;
}
.my--inner .my--content--container .tab--content--progress.active {
display: block;
}
.my--inner .my--content--container .tab--content--progress .progress {
display: flex;
position: relative;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress {
gap: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress {
gap: 2.5641025641vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content {
height: fit-content;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content {
width: calc(70% - 1.5625vw);
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content {
width: calc(65% - 1.2820512821vw);
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item {
display: none;
}
.my--inner .my--content--container .tab--content--progress .progress--content .item.active {
display: block;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--title {
margin-bottom: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--title {
margin-bottom: 2.5641025641vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--title .TL {
font-weight: 700;
color: #F38549;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--title .TL {
font-size: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--title .TL {
font-size: 7.6923076923vw;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update {
display: flex;
flex-direction: column;
gap: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update {
display: flex;
flex-direction: column;
gap: 5.1282051282vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item {
background: rgba(221, 220, 185, 0.3137254902);
border-radius: 5px;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item {
padding: 3.125vw 2.734375vw 1.5625vw;
display: flex;
flex-direction: column;
gap: 2.734375vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item {
padding: 5.1282051282vw 2.5641025641vw 2.5641025641vw;
display: flex;
flex-direction: column;
gap: 5.1282051282vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title {
display: flex;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title {
flex-direction: column;
gap: 2.5641025641vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX {
font-weight: 500;
color: #6B644D;
display: flex;
align-items: center;
overflow-wrap: anywhere;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX {
font-size: 1.5625vw;
gap: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX {
font-size: 4.1025641026vw;
gap: 1.2820512821vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco {
flex-shrink: 0;
display: block;
aspect-ratio: 1/1;
border: solid #6B644D;
position: relative;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco {
border-width: 0.15625vw;
width: 1.484375vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco {
border-width: 0.5128205128vw;
width: 3.8461538462vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco::before {
content: "";
position: absolute;
top: 30%;
left: 55%;
translate: -50% -50%;
border-bottom: solid #6B644D;
border-right: solid #6B644D;
aspect-ratio: 1/2;
rotate: 45deg;
display: none;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco::before {
width: 0.390625vw;
border-width: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco::before {
width: 1.2820512821vw;
border-width: 0.7692307692vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .TX .deco.active::before {
display: block;
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .count {
font-weight: 500;
color: #4BC7FB;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .count {
font-size: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item--title .count {
font-size: 6.4102564103vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
background: #8acdff;
width: 100%;
border-radius: 10px;
border: solid 3px #dff1ff;
outline: 0;
position: relative;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar {
height: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar {
height: 1.2820512821vw;
margin: 0 auto;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar:focus {
box-shadow: 0 0 3px rgb(0, 161, 255);
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar::-webkit-slider-thumb {
-webkit-appearance: none;
width: 0;
height: 0;
border-style: solid;
border-right: solid transparent;
border-left: solid transparent;
border-top: solid #53aeff;
border-bottom: 0;
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
border-top-width: 1.953125vw;
border-right-width: 1.171875vw;
border-left-width: 1.171875vw;
transform: translateY(-50%);
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar::-moz-range-thumb {
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
-webkit-appearance: none;
width: 0;
height: 0;
border-style: solid;
border-right: solid transparent;
border-left: solid transparent;
border-top: solid #53aeff;
border-bottom: 0;
border-top-width: 2.34375vw;
border-right-width: 1.5625vw;
border-left-width: 1.5625vw;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar::-moz-focus-outer {
border: 0;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item .progressBar:active::-webkit-slider-thumb {
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.3));
}
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .update--item--title .count {
color: #f38549;
}
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .progressBar {
background: #f38549;
border: solid 3px rgba(255, 255, 255, 0.1921568627);
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .progressBar:focus {
box-shadow: 0 0 3px rgba(255, 255, 255, 0.1921568627);
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .progressBar::-webkit-slider-thumb {
border-top: solid #f38549;
border-bottom: 0;
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
border-top-width: 1.953125vw;
border-right-width: 1.171875vw;
border-left-width: 1.171875vw;
transform: translateY(-50%);
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .progressBar::-moz-range-thumb {
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
-webkit-appearance: none;
width: 0;
height: 0;
border-style: solid;
border-right: solid transparent;
border-left: solid transparent;
border-top: solid #f38549;
border-bottom: 0;
border-top-width: 2.34375vw;
border-right-width: 1.5625vw;
border-left-width: 1.5625vw;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .progressBar::-moz-focus-outer {
border: 0;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--content .item .progress--update .update--item.active .progressBar:active::-webkit-slider-thumb {
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.3));
}
}
.my--inner .my--content--container .tab--content--progress .progress--TOC {
background: rgba(221, 220, 185, 0.3137254902);
border-radius: 5px;
height: fit-content;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--TOC {
width: calc(30% - 1.5625vw);
margin-top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--TOC {
width: calc(35% - 1.2820512821vw);
margin-top: 10.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--TOC--ul {
padding: 2.34375vw 0;
display: flex;
flex-direction: column;
gap: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--TOC--ul {
padding: 5.1282051282vw 0;
display: flex;
flex-direction: column;
gap: 5.1282051282vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--TOC--ul--li .TX {
font-weight: 400;
cursor: pointer;
width: fit-content;
color: #6B644D;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--TOC--ul--li .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--TOC--ul--li .TX {
font-size: 3.5897435897vw;
}
}
.my--inner .my--content--container .tab--content--progress .progress--TOC--ul--li .TX.active {
color: #F38549;
}
.my--inner .my--content--container .tab--content--progress .progress--submit {
position: absolute;
top: 0;
right: 0;
}
.my--inner .my--content--container .tab--content--progress .progress--submit input[type=submit] {
background: #4BC7FB;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
@media screen and (min-width: 768px) {
.my--inner .my--content--container .tab--content--progress .progress--submit input[type=submit] {
padding: 0.78125vw 1.5625vw;
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content--container .tab--content--progress .progress--submit input[type=submit] {
padding: 1.2820512821vw 2.5641025641vw;
font-size: 3.5897435897vw;
}
}
.my--inner .my--content--container .tab--content--membership {
display: none;
}
.my--inner .my--content--container .tab--content--membership.active {
display: block;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table tr {
margin-bottom: 20px;
display: block;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table tr td {
display: block;
color: #877E61;
font-weight: 900;
font-size: 16px;
margin-bottom: 10px;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table tr td label {
font-weight: 900;
color: #877E61;
font-size: 16px;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table tr td:last-child {
font-weight: 900;
color: #877E61;
font-size: 16px;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table tr td:last-child input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 0;
border: none;
background: #F5EADE;
border-radius: 5px;
font-weight: 900;
color: #877E61;
font-size: 16px;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table .swpm-profile-company-row,
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form table .swpm-profile-country-row {
display: none;
}
.my--inner .my--content--container .tab--content--membership #swpm-editprofile-form input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 0;
border: none;
background: #F38549;
border-radius: 5px;
font-weight: 900;
color: #F8F7F8;
font-size: 16px;
}
.my--inner .my--content .logout--button {
display: block;
position: absolute;
z-index: 7;
background-color: gray;
color: white;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.my--inner .my--content .logout--button {
bottom: 1.5625vw;
right: 3.125vw;
padding: 0.78125vw;
border-radius: 0.390625vw;
font-size: 1.09375vw;
}
}
@media screen and (max-width: 767px) {
.my--inner .my--content .logout--button {
bottom: 5.1282051282vw;
right: 10.2564102564vw;
padding: 2.5641025641vw;
border-radius: 1.2820512821vw;
font-size: 3.5897435897vw;
}
}
.my--inner .my--contentbk {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 10;
}
.my--inner .my--contentbk.active {
opacity: 1;
visibility: visible;
}
.my .my--menu-btn {
position: absolute;
z-index: 10;
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.my .my--menu-btn {
top: min(0.78125vw, 12.5px);
right: min(0.78125vw, 12.5px);
gap: min(0.78125vw, 12.5px);
}
}
@media screen and (max-width: 767px) {
.my .my--menu-btn {
top: 2.5641025641vw;
right: 2.5641025641vw;
gap: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.my .my--menu-btn .C_all-menu-btn {
border-radius: min(1.035703125vw, 16.57125px);
padding: min(0.625vw, 10px) min(1.40625vw, 22.5px) min(0.546875vw, 8.75px) min(0.3125vw, 5px);
border-width: min(0.15625vw, 2.5px);
}
}
@media screen and (min-width: 768px) {
.my .my--menu-btn .C_all-menu-btn__inner {
align-items: flex-end;
gap: min(0.46875vw, 7.5px);
}
}
@media screen and (min-width: 768px) {
.my .my--menu-btn .C_all-menu-btn__inner__img {
width: min(6.25vw, 100px);
height: min(4.6875vw, 75px);
}
}
.my .my--menu-btn .C_all-menu-btn__inner__text .TX {
color: #fff;
font-weight: 600;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.my .my--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: min(2.96875vw, 47.5px);
letter-spacing: min(0.078125vw, 1.25px);
}
}
.my .my--menu-slack-bid {
position: absolute;
z-index: 10;
transform-origin: bottom right;
bottom: 1%;
right: 1%;
}
@media screen and (min-width: 768px) {
.my .my--menu-slack-bid {
transform: scale(0.5);
}
}
@media screen and (max-width: 767px) {
.my .my--menu-slack-bid {
transform: scale(0.7);
}
}
.my .curriculum--btn {
position: absolute;
border-radius: 50%;
background: #F38549;
aspect-ratio: 1/1;
z-index: 10;
display: block;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.my .curriculum--btn {
width: 21.875vw;
bottom: -14.0625vw;
left: -12.5vw;
}
}
@media screen and (max-width: 767px) {
.my .curriculum--btn {
width: 51.2820512821vw;
bottom: -33.3333333333vw;
left: -28.2051282051vw;
}
}
@media screen and (min-width: 768px) {
.my .curriculum--btn:hover {
transform: scale(1.05);
animation: shadow 0.5s forwards;
}
@keyframes shadow {
0% {
box-shadow: 20px -20px 0px #F38549;
}
100% {
box-shadow: 20px -20px 20px #F38549;
}
}
}
.my .curriculum--btn .TX {
color: #FFFFFF;
position: absolute;
top: 27%;
right: 13%;
text-align: center;
line-height: 1.5;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.my .curriculum--btn .TX {
font-size: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.my .curriculum--btn .TX {
font-size: 3.5897435897vw;
}
}
/* -----------------------
archive
----------------------- */
.archive--contents--tab {
display: flex;
overflow-x: scroll;
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.archive--contents--tab {
width: 100%;
gap: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--tab {
width: 95%;
gap: 5.1282051282vw;
}
}
.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;
}
/* -----------------------
anime Cooperator-2
----------------------- */
.vertical {
animation: vertical 1.5s ease 8s infinite;
}
@keyframes vertical {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(30%);
}
100% {
transform: translateY(0%);
}
}
.pop-late {
opacity: 0;
transform: scale(0.5);
animation: pop 0.5s ease 6s forwards;
}
@keyframes pop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.cloudAnime {
animation: cloudAnime 5s ease 0.5s infinite;
}
@keyframes cloudAnime {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(10%);
}
100% {
transform: translateY(0%);
}
}
.cloudAnime02 {
animation: cloudAnime 7s ease 1s infinite;
}
@keyframes cloudAnime {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(15%);
}
100% {
transform: translateY(0%);
}
}
.flowing {
animation: flowing 50s linear 0s infinite;
}
@keyframes flowing {
0% {
transform: translateX(0%) translateY(200%);
scale: 0.4;
}
100% {
transform: translateX(200%) translateY(-60vh);
scale: 1.8;
}
}
.flowing02 {
animation: flowing02 50s linear -10s infinite;
}
@keyframes flowing02 {
0% {
transform: translateX(0%) translateY(200%);
scale: 0.4;
}
100% {
transform: translateX(200%) translateY(-60vh);
scale: 1.8;
}
}
.flowing03 {
animation: flowing03 50s linear -25s infinite;
}
@keyframes flowing03 {
0% {
transform: translateX(0%) translateY(200%);
scale: 0.4;
}
100% {
transform: translateX(200%) translateY(-60vh);
scale: 1.8;
}
}
.flowing04 {
animation: flowing04 50s linear -40s infinite;
}
@keyframes flowing04 {
0% {
transform: translateX(0%) translateY(200%);
scale: 0.4;
}
100% {
transform: translateX(200%) translateY(-60vh);
scale: 1.8;
}
}
.get .icon {
animation: get 5s ease-in 0.5s infinite;
}
@keyframes get {
0% {
transform: rotateY(0);
/* Y軸を中心に0°回転 */
}
3% {
transform: rotateY(180deg);
/* Y軸を中心に180°回転（裏） */
}
6% {
transform: rotateY(0);
/* Y軸を中心に180°回転（裏） */
}
100% {
transform: rotateY(0);
/* Y軸を中心に180°回転（裏） */
}
}
.good-jamp {
animation: good-jamp 2s ease 1s infinite;
}
@keyframes good-jamp {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(15%);
}
100% {
transform: translateY(0%);
}
}
.start-img {
opacity: 0;
animation: start-img 0.3s ease 0s forwards;
}
@keyframes start-img {
0% {
opacity: 0;
transform: scale(-1, 1);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
.delay-11 {
animation-delay: 1.1s !important;
}
.delay-12 {
animation-delay: 1.2s !important;
}
.delay-13 {
animation-delay: 1.3s !important;
}
.delay-14 {
animation-delay: 1.4s !important;
}
.pyon.hover {
animation: pyon 1s linear 0s forwards;
}
@keyframes pyon {
0% {
transform: scale(1, 1) translate(0%, 0%);
}
40% {
transform: scale(0.95, 1.2) translate(0%, -25%);
}
50% {
transform: scale(1.1, 0.9) translate(0%, 5%);
}
60% {
transform: scale(0.95, 1.05) translate(0%, -3%);
}
70% {
transform: scale(1.05, 0.95) translate(0%, 3%);
}
80% {
transform: scale(1, 1) translate(0%, 0%);
}
100% {
transform: scale(1, 1) translate(0%, 0%);
}
}
.start-btn-anime {
animation: start-btn-anime 2.3s linear 0s infinite;
}
@keyframes start-btn-anime {
0% {
transform: scale(1, 1) translate(0%, 0%);
}
10% {
transform: scale(0.95, 1.1) translate(0%, -25%);
}
13% {
transform: scale(1.1, 0.9) translate(0%, 5%);
}
18% {
transform: scale(0.95, 1.03) translate(0%, -3%);
}
23% {
transform: scale(1.03, 0.95) translate(0%, 3%);
}
28% {
transform: scale(1, 1) translate(0%, 0%);
}
100% {
transform: scale(1, 1) translate(0%, 0%);
}
}
.bird iframe {
opacity: 0;
}
.bird iframe.show {
animation: fade-in 3s ease-in-out 1s forwards;
}
@keyframes fade-in {
0% {
transform: translate(150%, -100%);
opacity: 1;
}
100% {
transform: translate(0);
opacity: 1;
}
}
.bird02 {
animation: brid 8s ease 1s infinite alternate-reverse;
}
@keyframes brid {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%) translateY(20%);
}
100% {
transform: translateX(100%);
}
}
.rabbit iframe {
animation: yurayura 5s infinite 1s alternate;
transform-origin: center bottom;
}
@keyframes yurayura {
0%, 100% {
transform: rotate(10deg);
opacity: 1;
}
40%, 80% {
transform: rotate(-10deg);
opacity: 1;
}
}
.platypus01 {
animation: pyon01 2s infinite 1s alternate;
}
@keyframes pyon01 {
0%, 10%, 20%, 100% {
transform: translateY(0%);
}
5%, 15% {
transform: translateY(-5%);
}
}
.platypus02 {
animation: pyon02 2s infinite 4s alternate;
}
@keyframes pyon02 {
0%, 10%, 20%, 100% {
transform: translateY(0%);
}
5%, 15% {
transform: translateY(-5%);
}
}
/* -----------------------
single
----------------------- */
.single {
width: 100%;
user-select: none;
-webkit-user-select: none;
pointer-events: none; /* ドラッグ不可 */
-webkit-user-drag: none; /* Safari対策 */
}
@media screen and (min-width: 768px) {
.single {
padding: 3.90625vw 3.125vw;
}
}
@media screen and (max-width: 767px) {
.single {
padding: 7.6923076923vw;
}
}
.single a {
pointer-events: auto;
}
.single pre, .single code, .single button, .single iframe,
.single .mejs-mediaelement,
.single .hcb-clipboard,
.single .hdq_quiz_wrapper,
.single .close-area {
user-select: text !important;
-webkit-user-select: text !important;
pointer-events: auto !important;
-webkit-user-drag: auto !important; /* Safari対策 */
}
.single--img {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url("../img/page-my.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center left;
}
.single--link {
position: fixed;
right: -100%;
bottom: -100%;
transition: all 1s;
z-index: 100;
}
.single--link--chara {
background-image: url("../img/first_zero.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.single--link--chara {
width: 14.609375vw;
height: 16.25vw;
}
}
@media screen and (max-width: 767px) {
.single--link--chara {
width: 29.2307692308vw;
height: 32.5641025641vw;
}
}
.single--link--bg {
background-image: url("../img/single-link.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: rotate(-9.77deg);
position: absolute;
}
@media screen and (min-width: 768px) {
.single--link--bg {
width: 13.75vw;
height: 17.890625vw;
top: -5.625vw;
left: -6.5625vw;
padding: 1.328125vw 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.single--link--bg {
width: 27.4358974359vw;
height: 35.641025641vw;
top: -11.7948717949vw;
left: -13.5897435897vw;
padding: 0.7692307692vw;
}
}
.single--link--bg .single--link--text {
text-align: center;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.single--link--bg .single--link--text {
margin-top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.single--link--bg .single--link--text {
margin-top: 1.2820512821vw;
}
}
@media screen and (min-width: 768px) {
.single--link--bg .single--link--text {
font-size: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.single--link--bg .single--link--text {
font-size: 3.3333333333vw;
}
}
.single--link--bg .single--link--text:first-child {
margin-top: 0;
}
.single--link--bg .single--link--text a {
font-weight: 700;
display: inline-block;
color: #FFFFFF;
}
.single--link--bg .single--link--text:hover a {
color: #846a40;
transition: all 0.3s;
}
.single--link.show {
transition: all 1s;
}
@media screen and (min-width: 768px) {
.single--link.show {
right: -3.75vw;
bottom: -3.125vw;
}
}
@media screen and (max-width: 767px) {
.single--link.show {
right: -7.4358974359vw;
bottom: -4.358974359vw;
}
}
.single--wap {
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 20px;
width: 100%;
}
@media screen and (min-width: 768px) {
.single--wap {
max-width: 1100px;
}
}
.single--wap--content {
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
padding: 20px 20px 40px;
}
.single--wap--content--title {
border-bottom: 1px solid rgb(0, 0, 0);
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 10px;
}
.single--wap--content--title--img {
width: 90%;
margin: 0 auto;
background: rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
.single--wap--content--title--img {
padding: 30px;
}
}
@media screen and (max-width: 767px) {
.single--wap--content--title--img {
padding: 20px;
}
}
.single--wap--content--title--img .img {
width: 100%;
background-image: url("../img/page-my.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.single--wap--content--title--title .TL {
text-align: center;
color: #202020;
font-size: 30px;
font-weight: 700;
}
.single--wap--content--title--time .TX {
text-align: right;
color: #202020;
font-size: 10px;
}
@media screen and (min-width: 768px) {
.single--wap--content--text {
padding: 0 20px;
}
}
@media screen and (max-width: 767px) {
.single--wap--content--text {
padding: 0 10px;
}
}
.single--wap--content--text p {
line-height: 1.8;
color: #202020;
overflow-wrap: break-word;
word-wrap: break-word;
}
@media screen and (min-width: 768px) {
.single--wap--content--text p {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.single--wap--content--text p {
font-size: 14px;
}
}
.single--wap--content--text ul,
.single--wap--content--text ul li {
line-height: 1.8;
list-style: disc;
list-style-type: disc;
}
.single--wap--content--text .single-nation {
display: flex;
justify-content: center;
align-items: center;
margin: 100px auto 0;
gap: 20px;
}
.single--wap--content--text .single-nation-text, .single--wap--content--text .single-nation-text a {
color: #202020;
font-size: 11px;
white-space: nowrap;
}
.single--wap--content--text .swpm-post-no-access-msg,
.single--wap--content--text .swpm-post-not-logged-in-msg {
color: #6B644D;
}
.single--wap--content--text .swpm-post-no-access-msg .no-access-img-container,
.single--wap--content--text .swpm-post-not-logged-in-msg .no-access-img-container {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 15px;
aspect-ratio: 800/500;
width: 100%;
}
@media screen and (min-width: 768px) {
.single--wap--content--text .swpm-post-no-access-msg .no-access-img-container,
.single--wap--content--text .swpm-post-not-logged-in-msg .no-access-img-container {
margin: auto;
}
}
@media screen and (max-width: 767px) {
.single--wap--content--text .swpm-post-no-access-msg .no-access-img-container,
.single--wap--content--text .swpm-post-not-logged-in-msg .no-access-img-container {
margin: auto;
}
}
.single--wap--content--text .swpm-post-no-access-msg .character,
.single--wap--content--text .swpm-post-not-logged-in-msg .character {
background-image: url("../img/thankyou_play.webp");
}
@media screen and (min-width: 768px) {
.single--wap--content--text .swpm-post-no-access-msg,
.single--wap--content--text .swpm-post-not-logged-in-msg {
font-size: x-large;
line-height: 36px;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.single--wap--content--text .swpm-post-no-access-msg,
.single--wap--content--text .swpm-post-not-logged-in-msg {
font-size: clamp(20px, 5.1282051282vw, 26px);
line-height: 26px;
text-align: center;
}
}
.single--wap--content--text .swpm-post-no-access-msg a,
.single--wap--content--text .swpm-post-not-logged-in-msg a {
color: #F38549;
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.single--wap--content--text .swpm-post-no-access-msg a,
.single--wap--content--text .swpm-post-not-logged-in-msg a {
font-size: xx-large;
line-height: clamp(60px, 4.6875vw, 78px);
}
}
@media screen and (max-width: 767px) {
.single--wap--content--text .swpm-post-no-access-msg a,
.single--wap--content--text .swpm-post-not-logged-in-msg a {
font-size: x-large;
line-height: clamp(30px, 7.6923076923vw, 39px);
}
}
.single.movie {
padding: 0;
}
.single.movie .single--wap {
max-width: unset;
min-height: 100vh;
}
@media screen and (min-width: 768px) {
.single.movie .single--wap--content {
padding-top: 3.90625vw;
}
}
.single.movie .single--wap--content--title--img,
.single.movie .single--wap--content--title--time,
.single.movie .is-complete {
display: none;
}
.single.movie .wp-video {
width: 100% !important;
}
.hdq_toggle {
z-index: 0;
}
.progress-complete-button-wrapper {
display: flex;
}
.progress-complete-button-wrapper button {
color: #FFFFFF;
margin: 0 auto;
background: #ed863a;
box-shadow: 0px 2px 0px 0px #e28738, 0px 0px 34px 0px #f6d741 inset;
position: relative;
letter-spacing: 0.1rem;
font-weight: 700;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.progress-complete-button-wrapper button {
font-size: 1.875vw;
padding: 1.25vw 3.90625vw;
border-radius: 0.78125vw;
margin-top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.progress-complete-button-wrapper button {
font-size: 4.6153846154vw;
padding: 2.5641025641vw 7.6923076923vw;
border-radius: 1.2820512821vw;
margin-top: 7.6923076923vw;
}
}
.progress-complete-button-wrapper button::before {
content: "";
position: absolute;
background-image: url("../img/aptitude-result-characters/chatora.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.progress-complete-button-wrapper button::before {
width: 6.40625vw;
height: 7.5vw;
right: -4.296875vw;
bottom: -0.546875vw;
}
}
@media screen and (max-width: 767px) {
.progress-complete-button-wrapper button::before {
width: 10.5128205128vw;
height: 12.3076923077vw;
right: -7.6923076923vw;
bottom: -1.0256410256vw;
}
}
.progress-complete-button-wrapper button.is-complete {
background: #a5ed3a;
box-shadow: 0px 2px 0px 0px #38e252, 0px 0px 34px 0px #41f647 inset;
cursor: not-allowed;
}
.confetti {
height: 0;
width: 0;
position: fixed;
background: rgba(47, 47, 47, 0.5);
top: 0;
left: 0;
display: none;
inset: 0;
z-index: 999;
}
.confetti canvas {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
}
.confetti--main {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
@media screen and (max-width: 767px) {
.confetti--main {
bottom: -2.0512820513vw;
}
}
@media screen and (min-width: 768px) {
.confetti--main img {
width: 56.484375vw;
height: 12.421875vw;
}
}
@media screen and (max-width: 767px) {
.confetti--main img {
width: 95.641025641vw;
height: 20.7692307692vw;
}
}
.confetti--main-chara {
background-image: url("../img/single-complete-chara.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.confetti--main-chara {
width: 52.8125vw;
height: 38.046875vw;
}
}
@media screen and (max-width: 767px) {
.confetti--main-chara {
width: 71.0256410256vw;
height: 51.2820512821vw;
margin-top: 12.8205128205vw;
}
}
.confetti .close {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.confetti .close {
width: 3.90625vw;
height: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.confetti .close {
width: 10.2564102564vw;
height: 10.2564102564vw;
}
}
.confetti.show {
display: block;
width: 100vw;
height: 100vh;
transition: all 1s;
}
/* ここ */
body.no-scroll {
overflow: hidden;
}
.single .list-btn {
background: linear-gradient(180deg, #d9d5bb 0%, #b99e76 100%);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
color: #ffffff;
transition: all 0.3s ease-in-out;
font-weight: 600;
width: 13.28125vw;
height: 2.734375vw;
border-radius: 0.3125vw;
line-height: 2.734375vw;
padding-left: 1.015625vw;
position: fixed;
top: 1.5vw;
right: 1.5vw;
z-index: 1000;
pointer-events: auto;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.single .list-btn {
width: 13.28125vw;
height: 2.734375vw;
border-radius: 0.3125vw;
border: 0.078125vw solid #ffffff;
line-height: 2.734375vw;
padding-left: 1.015625vw;
}
}
@media screen and (max-width: 767px) {
.single .list-btn {
width: 25.641025641vw;
height: 5.1282051282vw;
border-radius: 0.7692307692vw;
border: 0.2564102564vw solid #fff;
line-height: 4.6153846154vw;
padding-left: 1.2820512821vw;
}
}
.single .list-btn::before {
content: "〉";
position: absolute;
top: 65%;
transform: translateY(-50%) rotate(90deg);
}
@media screen and (min-width: 768px) {
.single .list-btn::before {
font-size: 1.25vw;
right: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.single .list-btn::before {
font-size: 2.8205128205vw;
right: 0.5128205128vw;
}
}
.single .list-btn::after {
content: "道のり投稿一覧";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.single .list-btn::after {
letter-spacing: 0.0625vw;
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.single .list-btn::after {
font-size: 2.5641025641vw;
letter-spacing: 0.2051282051vw;
}
}
.single .list-btn.active::after {
content: "一覧を閉じる";
}
.single .list-btn:hover {
transition: all 0.3s ease-in-out;
box-shadow: unset;
transform: translate(2px, 2px);
}
.single .post-list {
background-color: #c9ebd9;
width: 100%;
height: 100%;
position: fixed;
top: -100%;
left: 0;
z-index: 35;
transition: all 0.3s;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.single .post-list-inner {
padding: 8.25vw 3.4375vw 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.single .post-list-inner {
padding: 11.3333333333vw 5.1282051282vw 12.8205128205vw;
}
}
.single .post-list-inner ul {
display: flex;
}
@media screen and (min-width: 768px) {
.single .post-list-inner ul {
flex-wrap: wrap;
gap: 1.171875vw 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.single .post-list-inner ul {
flex-direction: column;
gap: 3.8461538462vw;
}
}
.single .post-list-inner ul li {
background: #ffffff;
position: relative;
}
@media screen and (min-width: 768px) {
.single .post-list-inner ul li {
width: 45.78125vw;
padding: 0.703125vw 0.859375vw;
border-radius: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.single .post-list-inner ul li {
padding: 1.5384615385vw 2.0512820513vw;
border-radius: 0.5128205128vw;
}
}
.single .post-list-inner ul li .post-link {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.single .post-list-inner ul li .post-link .items--img {
background-color: #ffffff;
}
@media screen and (min-width: 768px) {
.single .post-list-inner ul li .post-link .items--img img {
width: 13.28125vw;
height: 7.578125vw;
border-radius: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.single .post-list-inner ul li .post-link .items--img img {
width: 23.0769230769vw;
height: 13.0769230769vw;
border-radius: 0.5128205128vw;
}
}
.single .post-list-inner ul li .post-link .items--title {
width: 100%;
background-color: #ffffff;
display: grid;
place-items: center center;
}
@media screen and (min-width: 768px) {
.single .post-list-inner ul li .post-link .items--title {
height: 7.578125vw;
}
}
@media screen and (max-width: 767px) {
.single .post-list-inner ul li .post-link .items--title {
height: 13.0769230769vw;
}
}
.single .post-list-inner ul li .post-link .items--title .TL {
color: #646464;
}
@media screen and (min-width: 768px) {
.single .post-list-inner ul li .post-link .items--title .TL {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.single .post-list-inner ul li .post-link .items--title .TL {
font-size: 3.0769230769vw;
}
}
.single .post-list-inner ul li::before {
content: "";
background: linear-gradient(93deg, #5bad83 1.53%, #acdec3 63.13%);
transition: all 0.3s;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.single .post-list-inner ul li:hover::before {
opacity: 1;
}
.single .post-list.active {
top: 0;
transition: all 0.3s;
}
/* ここ */
/* -----------------------
entry
----------------------- */
.entry {
height: 100vh;
width: 100%;
position: relative;
background: radial-gradient(73.57% 73.57% at 50% 50%, #FFFFFE 50%, #DFF675 95%);
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.entry {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.entry {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.entry.singin {
min-height: 100vh;
padding: 100px 0;
}
}
@media screen and (max-width: 767px) {
.entry.singin {
padding: 100px 0;
}
}
.entry.singin .entry--sheet {
top: unset;
left: unset;
translate: unset;
margin: 0 auto;
}
.entry--letter {
aspect-ratio: 698/759;
top: 30%;
left: 50%;
translate: -50% -50%;
z-index: 1;
background-image: url("../img/letter.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: fixed;
}
@media screen and (min-width: 768px) {
.entry--letter {
min-width: 750px;
}
}
@media screen and (max-width: 767px) {
.entry--letter {
width: 100%;
}
}
.entry--sheet {
background: #FFF8F1;
border-radius: 5px;
z-index: 2;
position: relative;
top: 50%;
left: 50%;
translate: -50% -50%;
}
@media screen and (min-width: 768px) {
.entry--sheet {
width: 523px;
padding: 50px 23px 70px;
}
}
@media screen and (max-width: 767px) {
.entry--sheet {
width: 80%;
padding: 50px 10px 70px;
}
}
.entry--sheet::before, .entry--sheet::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url("../img/entry-sheet-ribbon.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.entry--sheet::before, .entry--sheet::after {
height: 23px;
}
}
@media screen and (max-width: 767px) {
.entry--sheet::before, .entry--sheet::after {
height: 15px;
}
}
.entry--sheet::after {
rotate: 180deg;
top: unset;
bottom: 0;
}
@media screen and (min-width: 768px) {
.entry--sheet--title {
margin-bottom: 30px;
}
}
@media screen and (max-width: 767px) {
.entry--sheet--title {
margin-bottom: 20px;
}
}
.entry--sheet--title .TL {
font-weight: 800;
text-align: center;
letter-spacing: 0.04em;
color: #877E61;
}
@media screen and (min-width: 768px) {
.entry--sheet--title .TL {
font-size: 33px;
}
}
@media screen and (max-width: 767px) {
.entry--sheet--title .TL {
font-size: 25px;
}
}
.entry--sheet--inputs {
width: 100%;
}
.entry--sheet--inputs .swpm_error {
color: #cc0000;
}
.entry--sheet--inputs .swpm_error ul {
margin-bottom: 20px;
}
.entry--sheet--inputs .swpm_error ul li {
margin-top: 10px;
}
.entry--sheet--inputs form table {
width: 100%;
}
.entry--sheet--inputs form table tbody {
display: flex;
flex-direction: column;
}
.entry--sheet--inputs form table tr {
margin-bottom: 20px;
display: block;
}
.entry--sheet--inputs form table tr td {
display: block;
color: #877E61;
}
.entry--sheet--inputs form table tr td label {
font-weight: 900;
color: #877E61;
font-size: 16px;
}
.entry--sheet--inputs form table tr td:first-child {
margin-bottom: 10px;
}
.entry--sheet--inputs form table .swpm-registration-username-row {
order: 1;
}
.entry--sheet--inputs form table .swpm-registration-email-row {
order: 2;
}
.entry--sheet--inputs form table .swpm-registration-password-row {
order: 3;
}
.entry--sheet--inputs form table .swpm-registration-password-retype-row {
order: 4;
}
.entry--sheet--inputs form table .swpm-registration-password-retype-row .swpm-form-desc ul li {
color: transparent;
position: relative;
}
.entry--sheet--inputs form table .swpm-registration-password-retype-row .swpm-form-desc ul li::before {
content: "パスワードが一致しません";
position: absolute;
top: 50%;
left: 0;
translate: 0 -50%;
color: #cc0000;
}
.entry--sheet--inputs form table .swpm-registration-firstname-row {
order: 6;
}
.entry--sheet--inputs form table .swpm-registration-lastname-row {
order: 5;
}
.entry--sheet--inputs form table .swpm-registration-membership-level-row {
order: 7;
}
.entry--sheet--inputs form table .swpm-before-registration-submit-section {
order: 8;
}
.entry--sheet--inputs form input[type=text],
.entry--sheet--inputs form input[type=password],
.entry--sheet--inputs form input[type=submit],
.entry--sheet--inputs form button[type=submit],
.entry--sheet--inputs form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 0;
border: none;
background: #F5EADE;
border-radius: 5px;
font-weight: 900;
color: #877E61;
}
@media screen and (min-width: 768px) {
.entry--sheet--inputs form input[type=text],
.entry--sheet--inputs form input[type=password],
.entry--sheet--inputs form input[type=submit],
.entry--sheet--inputs form button[type=submit],
.entry--sheet--inputs form select {
font-size: 16px;
}
}
.entry--sheet--inputs form input[type=submit],
.entry--sheet--inputs form button[type=submit] {
background: #F38549;
color: #F8F7F8;
}
.entry--sheet--inputs form .swpm-subscription-button-submit {
margin: 0 auto !important;
display: block;
}
.entry--sheet--inputs form .swpm-remember-me {
display: flex;
}
@media screen and (min-width: 768px) {
.entry--sheet--inputs form .swpm-remember-me {
gap: 10px;
}
}
.entry--sheet--inputs form .swpm-forgot-pass-link .swpm-login-form-pw-reset-link,
.entry--sheet--inputs form .swpm-forgot-pass-link .swpm-login-form-register-link,
.entry--sheet--inputs form .swpm-join-us-link .swpm-login-form-pw-reset-link,
.entry--sheet--inputs form .swpm-join-us-link .swpm-login-form-register-link {
color: #877E61;
font-size: 12px;
}
.entry--sheet--inputs form .swpm-login-error-msg {
font-size: 12px;
}
.entry--sheet--inputs form .swpm-form-membership-level-value {
font-weight: 900;
color: #877E61;
}
@media screen and (min-width: 768px) {
.entry--sheet--inputs form .swpm-form-membership-level-value {
font-size: 20px;
}
}
.entry--sheet--inputs .swpm-login-widget-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.entry--sheet--inputs .swpm-login-widget-form label {
font-weight: 900;
color: #877E61;
font-size: 16px;
}
.entry--sheet--inputs .swpm-login-widget-form input {
font-weight: 600;
color: #877E61;
font-size: 16px;
margin-top: 10px;
}
.entry--sheet--inputs .swpm-login-widget-form .swpm-edit-profile-link a,
.entry--sheet--inputs .swpm-login-widget-form .swpm-logged-logout-link a,
.entry--sheet--inputs .swpm-login-widget-form .swpm-forgot-pass-link a,
.entry--sheet--inputs .swpm-login-widget-form .swpm-join-us-link a {
font-weight: 400;
color: #877E61;
font-size: 16px;
}
.entry--sheet--inputs .swpm-registration-success-msg {
color: #877E61;
font-size: 16px;
text-align: center;
width: 80%;
margin: 20px auto 0;
line-height: 1.5;
}
/* -----------------------
registered
----------------------- */
.registered {
height: 100vh;
background-image: url("../img/archive-img.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 768px) {
.registered {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.registered {
min-height: 650px;
}
}
@media screen and (max-width: 767px) {
.registered {
background-position: left center;
}
}
.registered--wap {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
display: flex;
flex-direction: column;
gap: 40px;
}
.registered--wap--title .TX {
text-align: center;
font-weight: 400;
color: #202020;
}
@media screen and (min-width: 768px) {
.registered--wap--title .TX {
font-size: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.registered--wap--title .TX {
font-size: 5.8974358974vw;
}
}
.registered--wap--back {
display: block;
text-align: center;
font-weight: 400;
color: #202020;
}
@media screen and (min-width: 768px) {
.registered--wap--back {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.registered--wap--back {
font-size: 4.1025641026vw;
}
}
/* -----------------------
control
----------------------- */
.control {
width: 100%;
}
/* -----------------------
column
----------------------- */
.columns {
width: 100%;
background-image: url("../img/board-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 768px) {
.columns {
height: 100vh;
padding: 63px 20px 55px;
display: flex;
justify-content: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (min-width: 768px) {
.columns {
min-height: 700px;
}
}
@media screen and (min-width: 768px) and (max-width: 767px) {
.columns {
min-height: 650px;
}
}
@media screen and (max-width: 767px) {
.columns {
height: 100vh;
min-height: 650px;
padding: 100px 10px 300px;
}
}
.columns--menu-btn {
position: absolute;
z-index: 10;
}
@media screen and (min-width: 768px) {
.columns--menu-btn {
top: 0.78125vw;
right: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.columns--menu-btn {
top: 2.5641025641vw;
right: 2.5641025641vw;
}
}
.columns--main {
display: flex;
justify-content: center;
}
@media screen and (min-width: 768px) {
.columns--main {
gap: 14px;
width: 100%;
}
}
@media screen and (max-width: 767px) {
.columns--main {
flex-direction: column-reverse;
gap: 20px;
}
}
.columns--main .columns--wrap {
position: relative;
max-width: 919px;
width: 100%;
height: fit-content;
}
.columns--main .columns--wrap .columns--title {
aspect-ratio: 558/105;
background-image: url("../img/column-title.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 3;
left: 50%;
translate: -50% 0;
top: calc(0% - 32px);
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .columns--title {
width: 558px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .columns--title {
width: 300px;
}
}
.columns--main .columns--wrap .columns--title .TL {
color: #F8F7F8;
font-weight: 700;
position: absolute;
left: 50%;
translate: -50% 0;
line-height: normal;
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .columns--title .TL {
font-size: 40px;
top: 6px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .columns--title .TL {
font-size: 20px;
top: 3px;
}
}
.columns--main .columns--wrap .pins .pin {
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #32995C;
position: absolute;
z-index: 3;
width: 10px;
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .pins .pin:nth-child(1) {
top: 16px;
left: 12px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .pins .pin:nth-child(1) {
top: 10px;
left: 6px;
}
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .pins .pin:nth-child(2) {
top: 16px;
right: 12px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .pins .pin:nth-child(2) {
top: 10px;
right: 6px;
}
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .pins .pin:nth-child(3) {
bottom: 18px;
left: 12px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .pins .pin:nth-child(3) {
bottom: 12px;
left: 6px;
}
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .pins .pin:nth-child(4) {
bottom: 18px;
right: 12px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .pins .pin:nth-child(4) {
bottom: 12px;
right: 6px;
}
}
.columns--main .columns--wrap .columns--container {
background: #FFF;
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.25);
width: 100%;
position: relative;
z-index: 1;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .columns--container {
padding: 88px 83px 38px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .columns--container {
padding: 50px 20px 30px;
}
}
.columns--main .columns--wrap .columns--container--inner .border {
border-bottom: dashed 1px #7FBF99;
}
.columns--main .columns--wrap .columns--container--inner .columns_category {
padding-bottom: 7px;
}
.columns--main .columns--wrap .columns--container--inner .columns_category .TX {
color: #BFBFBF;
font-weight: 600;
line-height: normal;
font-size: 10px;
}
.columns--main .columns--wrap .columns--container--inner .columns_search {
padding: 6px 3px;
}
.columns--main .columns--wrap .columns--container--inner .columns_search .search-item form {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4;
}
.columns--main .columns--wrap .columns--container--inner .columns_search .search-item form button {
aspect-ratio: 18/16;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
width: 18px;
}
.columns--main .columns--wrap .columns--container--inner .columns_search .search-item form input {
color: #7FBF99;
font-weight: 600;
line-height: 140%;
letter-spacing: 1px;
border: none;
border-radius: 20px;
background: #E2F9EB;
outline: none;
font-size: 10px;
width: 141px;
height: 20px;
padding: 0 12px;
}
.columns--main .columns--wrap .columns--container--inner .columns_search .search-item form input::placeholder {
color: #7FBF99;
}
.columns--main .columns--wrap .columns--container--inner .columns_contents {
padding: 21px 0;
}
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner {
display: flex;
flex-wrap: wrap;
gap: 16px 20px;
}
@media screen and (min-width: 768px) {
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li {
width: 171px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li {
width: 100%;
}
}
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li a {
display: block;
width: 100%;
}
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li a .thumbnail {
aspect-ratio: 171/99;
width: 100%;
border-radius: 3px;
overflow: hidden;
margin-bottom: 2px;
}
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li a .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li a .title .TL {
color: #2E2E2E;
font-weight: 600;
line-height: normal;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
letter-spacing: 0.26px;
}
.columns--main .columns--wrap .columns--container--inner .columns_contents--inner li a .time .TX {
color: #7FBF99;
font-weight: 600;
line-height: normal;
font-size: 10px;
}
.columns--main .columns--wrap .columns--container--inner .columns_pageNation {
padding: 15px 3px 0;
}
.columns--main .columns--wrap .columns--container--inner .columns_pageNation--inner .wp-pagenavi {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.columns--main .columns--wrap .columns--container--inner .columns_pageNation--inner .wp-pagenavi a {
aspect-ratio: 35/25;
border-radius: 2px;
background: #7FBF99;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
border: none;
padding: unset;
margin: unset;
color: #FFF;
font-weight: 600;
line-height: 1;
font-size: 13.571px;
}
@media screen and (min-width: 768px) {
.columns--main.columns--main--single {
height: 100%;
}
}
.columns--main .columns--single {
background: #FFF;
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.25);
position: relative;
z-index: 1;
overflow-y: scroll;
width: 100%;
}
@media screen and (min-width: 768px) {
.columns--main .columns--single {
max-width: 919px;
height: 100%;
padding: 49px min(6.484375vw, 83px);
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--single {
padding: 50px 20px 30px;
}
}
.columns--main .columns--single--inner .title {
border-bottom: solid 8px #7FBF99;
padding-bottom: 10px;
}
.columns--main .columns--single--inner .title .TL {
color: #32995C;
font-weight: 800;
line-height: normal;
}
@media screen and (min-width: 768px) {
.columns--main .columns--single--inner .title .TL {
font-size: 36px;
}
}
@media screen and (max-width: 767px) {
.columns--main .columns--single--inner .title .TL {
font-size: 25px;
}
}
.columns--main .columns--single--inner .content {
margin-top: 40px;
}
.columns--main .columns--single--inner .content .thumbnail {
width: 100%;
border: solid 1px #7FBF99;
border-radius: 5px;
}
.columns--main .columns--single--inner .content--text {
margin-top: 40px;
}
.columns--main .columns--single--inner .content--text p,
.columns--main .columns--single--inner .content--text span {
color: #2E2E2E;
font-size: 16px;
font-weight: 600;
line-height: normal;
word-break: break-all;
}
.columns--main .columns--single--inner .content--text img {
width: 100%;
}
.columns--main .columns--single--inner .single--nation {
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.columns--main .columns--single--inner .single--nation .single--nation--text a {
color: #2E2E2E;
font-size: 12px;
font-weight: 600;
line-height: normal;
word-break: break-all;
}
.columns .kinta {
aspect-ratio: 417/463;
background-image: url("../img/kinta.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 5;
rotate: 12deg;
}
@media screen and (min-width: 768px) {
.columns .kinta {
width: 450px;
left: -140px;
bottom: -180px;
}
.columns .kinta:hover {
animation: kinta 5s infinite;
}
@keyframes kinta {
0%, 100% {
left: -140px;
bottom: -180px;
rotate: 12deg;
}
20% {
left: -40px;
bottom: -80px;
rotate: 12deg;
}
25% {
left: -40px;
bottom: -80px;
rotate: 20deg;
}
30% {
left: -40px;
bottom: -80px;
rotate: 0deg;
}
35% {
left: -40px;
bottom: -80px;
rotate: 12deg;
}
40% {
left: -40px;
bottom: -80px;
rotate: 0deg;
}
45% {
left: -40px;
bottom: -80px;
rotate: 12deg;
}
80% {
left: -140px;
bottom: -180px;
rotate: 12deg;
}
}
}
@media screen and (max-width: 767px) {
.columns .kinta {
width: 300px;
left: -30px;
bottom: -50px;
}
}
/* -----------------------
user-control
----------------------- */
.user-control {
min-width: 1200px;
width: 1200px;
padding: 80px 0 300px;
margin: 0 auto;
}
.user-control_wrap {
width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 30px;
}
.user-control_inner {
width: 100%;
/* 検索機能のスタイル */
}
.user-control_inner .sortable {
cursor: pointer;
user-select: none;
transition: background-color 0.2s;
}
.user-control_inner .sortable:hover {
background-color: #f0f0f0;
}
.user-control_inner .sort-icon {
margin-left: 5px;
font-size: 12px;
color: #666;
}
.user-control_inner .sortable:hover .sort-icon {
color: #333;
}
.user-control_inner .search-section {
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.user-control_inner .search-input-group {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.user-control_inner #search-input {
flex: 1;
min-width: 200px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.user-control_inner #search-filter {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
font-size: 14px;
}
.user-control_inner .search-btn,
.user-control_inner .clear-btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.user-control_inner .search-btn {
background: #007cba;
color: white;
}
.user-control_inner .search-btn:hover {
background: #005a87;
}
.user-control_inner .clear-btn {
background: #6c757d;
color: white;
}
.user-control_inner .clear-btn:hover {
background: #545b62;
}
.user-control_inner .search-stats {
margin-top: 10px;
font-size: 14px;
color: #666;
}
.user-control_inner .user-row.hidden {
display: none;
}
.user-control_inner .user-row.highlight {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
}
.user-control_inner .user-control_list-top {
width: 100%;
}
.user-control_inner .user-control_list-top li {
display: flex;
}
.user-control_inner .user-control_list-top li:first-child .user_data {
border-top: solid 1px black;
background-color: rgb(167, 167, 167);
}
.user-control_inner .user-control_list-top li .user_data {
border: solid 1px black;
border-top: none;
border-left: none;
flex: 1;
padding: 1rem 0.5rem;
}
.user-control_inner .user-control_list-top li .user_data:first-child {
border-left: solid 1px black;
flex: 0.5;
display: flex;
justify-content: center;
align-items: center;
}
.user-control_inner .user-control_list-top li .user_data .TX {
text-align: center;
font-size: 0.8rem;
line-height: 1.5;
word-break: break-all;
}
.user-control_inner .user-control_list-bottom {
width: 100%;
}
.user-control_inner .user-control_list-bottom li {
display: flex;
}
.user-control_inner .user-control_list-bottom li:first-child .user_data {
background-color: rgb(255, 255, 255);
}
.user-control .button_area {
position: fixed;
bottom: 20px;
right: 20px;
width: fit-content;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.user-control .button_area .button {
width: 180px;
padding: 0 10px;
height: 50px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0.5;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.user-control .button_area .button:hover {
opacity: 1;
}
.user-control .button_area .button.pink {
background-color: pink;
}
.user-control .button_area .button.orange {
background-color: orange;
}
.user-control .button_area .button.sky {
background-color: skyblue;
}
.user-control .button_area .button input {
width: 50px;
height: 30px;
border-radius: 5px;
box-sizing: border-box;
display: block;
}
.user-control .button_area .button p {
cursor: pointer;
}
/* -----------------------
log-board
----------------------- */
.my-warp {
height: 100vh;
width: 100%;
background-image: url("../img/page-my.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: bottom left;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.my-warp {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.my-warp {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.my-warp {
padding: 1.5625vw 0 max(3.125vw, 40px) 3.125vw;
min-height: max(50.78125vw, 650px);
}
}
@media screen and (max-width: 767px) {
.my-warp {
padding: 10.2564102564vw 5.1282051282vw;
}
}
@media screen and (max-width: 767px) and (max-width: 767px) and (min-width: 550px) {
.my-warp {
min-height: 900px;
}
}
.log-board {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #BBE651;
z-index: 99;
}
@media screen and (min-width: 768px) {
.log-board {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.log-board {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.log-board {
min-height: max(54.6875vw, 700px);
}
}
@media screen and (max-width: 767px) and (max-width: 767px) and (min-width: 550px) {
.log-board {
min-height: 900px;
}
}
.log-board.none {
display: none;
}
.log-board .board-close {
position: absolute;
aspect-ratio: 1/1;
background: #000;
border-radius: 50%;
cursor: pointer;
z-index: 999;
}
@media screen and (min-width: 768px) {
.log-board .board-close {
width: 2.34375vw;
top: 1.5625vw;
right: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.log-board .board-close {
width: 5.1282051282vw;
top: 2.5641025641vw;
right: 2.5641025641vw;
}
}
.log-board .board-close span {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 60%;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.log-board .board-close span {
height: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.log-board .board-close span {
height: 0.5128205128vw;
}
}
.log-board .board-close span:nth-child(1) {
rotate: 40deg;
}
.log-board .board-close span:nth-child(2) {
rotate: -40deg;
}
.log-board--top {
height: 42.86%;
background-image: url("../img/log-board/log-board-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center top 60%;
position: relative;
z-index: 1;
overflow: hidden;
}
.log-board--top__hills {
width: 100%;
background-image: url("../img/log-board/log-board-top-hills.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center bottom;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
@media screen and (min-width: 768px) {
.log-board--top__hills {
height: 30%;
}
}
@media screen and (max-width: 767px) {
.log-board--top__hills {
height: 40%;
}
}
.log-board--top__trees .trees__img {
position: absolute;
z-index: 3;
}
.log-board--top__trees .trees__img.trees-01 {
background-image: url("../img/log-board/log-board-top-trees-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 488/633;
}
@media screen and (min-width: 768px) {
.log-board--top__trees .trees__img.trees-01 {
left: clamp(-70px, -5.46875vw, -10px);
bottom: 0;
width: clamp(400px, 46.875vw, 500px);
}
}
@media screen and (max-width: 767px) {
.log-board--top__trees .trees__img.trees-01 {
left: -30px;
bottom: 30px;
height: 100%;
}
}
.log-board--top__trees .trees__img.trees-02 {
background-image: url("../img/log-board/log-board-top-trees-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
right: 0;
aspect-ratio: 503/636;
}
@media screen and (min-width: 768px) {
.log-board--top__trees .trees__img.trees-02 {
right: clamp(-20px, -1.5625vw, -20px);
bottom: 0;
width: clamp(400px, 39.0625vw, 550px);
}
}
@media screen and (max-width: 767px) {
.log-board--top__trees .trees__img.trees-02 {
right: -30px;
bottom: 10px;
height: 100%;
}
}
.log-board--top__characters .characters__img {
position: absolute;
}
.log-board--top__characters .characters__img.characters-01 {
background-image: url("../img/log-board/log-board-chars-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 252/279;
z-index: 5;
rotate: 8deg;
}
@media screen and (min-width: 768px) {
.log-board--top__characters .characters__img.characters-01 {
width: clamp(200px, 19.6875vw, 230px);
left: clamp(60px, 14.0625vw, 200px);
bottom: clamp(15px, 2.34375vw, 30px);
}
}
@media screen and (min-width: 768px) and (max-width: 1100px) and (min-width: 768px) {
.log-board--top__characters .characters__img.characters-01 {
left: 30px;
}
}
@media screen and (max-width: 767px) {
.log-board--top__characters .characters__img.characters-01 {
width: clamp(0px, 38.4615384615vw, 150px);
left: 0px;
bottom: 30px;
}
}
.log-board--top__characters .characters__img.characters-02 {
background-image: url("../img/log-board/log-board-chars-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 222/183;
z-index: 2;
rotate: -5deg;
}
@media screen and (min-width: 768px) {
.log-board--top__characters .characters__img.characters-02 {
width: clamp(200px, 23.4375vw, 250px);
right: clamp(60px, 15.625vw, 230px);
bottom: clamp(15px, 3.90625vw, 50px);
}
}
@media screen and (min-width: 768px) and (max-width: 1100px) and (min-width: 768px) {
.log-board--top__characters .characters__img.characters-02 {
right: 30px;
}
}
@media screen and (max-width: 767px) {
.log-board--top__characters .characters__img.characters-02 {
width: clamp(0px, 38.4615384615vw, 150px);
right: 0px;
bottom: 30px;
}
}
.log-board--top__characters .characters__img.characters-03 {
background-image: url("../img/log-board/log-board-chars-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 89/133;
z-index: 2;
}
@media screen and (min-width: 768px) {
.log-board--top__characters .characters__img.characters-03 {
width: clamp(89px, 6.953125vw, 100px);
right: clamp(10px, 1.5625vw, 20px);
bottom: clamp(10px, 2.34375vw, 20px);
bottom: 6.25vw;
}
}
@media screen and (max-width: 767px) {
.log-board--top__characters .characters__img.characters-03 {
width: clamp(0px, 20.5128205128vw, 80px);
right: -20px;
bottom: 30px;
}
}
.log-board--top__main {
position: absolute;
left: 0;
width: 100%;
z-index: 5;
top: 50%;
translate: 0 -50%;
}
.log-board--top__main .main__title {
aspect-ratio: 467/80;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.log-board--top__main .main__title {
width: clamp(300px, 36.484375vw, 467px);
padding-top: clamp(5px, 0.390625vw, 5px);
}
}
@media screen and (max-width: 767px) {
.log-board--top__main .main__title {
width: clamp(0px, 51.2820512821vw, 300px);
padding-top: clamp(0px, 0.7692307692vw, 5px);
}
}
.log-board--top__main .main__title .TL {
text-align: center;
color: #FAFD76;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.15rem;
background: linear-gradient(180deg, #f26c59, #f7c06b 40%, #f26c59);
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media screen and (min-width: 768px) {
.log-board--top__main .main__title .TL {
font-size: clamp(20px, 2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.log-board--top__main .main__title .TL {
font-size: clamp(0px, 3.5897435897vw, 20px);
}
}
.log-board--top__main .main__month .TX {
text-align: center;
color: #f49754;
font-family: "Kavoon", serif;
font-weight: 400;
font-style: normal;
line-height: 0.8;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4196078431);
}
@media screen and (min-width: 768px) {
.log-board--top__main .main__month .TX {
font-size: clamp(100px, 19.921875vw, 255px);
}
}
@media screen and (max-width: 767px) {
.log-board--top__main .main__month .TX {
font-size: clamp(0px, 25.641025641vw, 100px);
}
}
.log-board--top__main .main__month .TX img {
margin: 0 auto;
aspect-ratio: 1.5/1;
object-fit: contain;
object-position: center;
}
@media screen and (min-width: 768px) {
.log-board--top__main .main__month .TX img {
margin-top: clamp(20px, 3.90625vw, 20px);
width: clamp(200px, 20vw, 256px);
}
}
@media screen and (max-width: 767px) {
.log-board--top__main .main__month .TX img {
margin-top: clamp(0px, 5.1282051282vw, 20px);
width: clamp(0px, 46.1538461538vw, 200px);
}
}
.log-board--top__grassy {
width: 100%;
background-image: url("../img/log-board/log-board-top-grassy.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center top;
position: absolute;
bottom: 0;
left: 0;
z-index: 6;
height: 60%;
}
.log-board--top__sunlight .sunlight__img {
position: absolute;
z-index: 7;
}
.log-board--top__sunlight .sunlight__img.sunlight-01 {
background-image: url("../img/log-board/log-board-top-sunlight-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 105/165;
opacity: 0.5;
}
@media screen and (min-width: 768px) {
.log-board--top__sunlight .sunlight__img.sunlight-01 {
width: clamp(100px, 8.203125vw, 105px);
bottom: 0.78125vw;
left: 0.78125vw;
}
}
.log-board--top__sunlight .sunlight__img.sunlight-02 {
background-image: url("../img/log-board/log-board-top-sunlight-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 251/236;
opacity: 0.5;
}
@media screen and (min-width: 768px) {
.log-board--top__sunlight .sunlight__img.sunlight-02 {
width: clamp(200px, 19.609375vw, 251px);
top: 1.5625vw;
left: 28%;
}
}
.log-board--top__sunlight .sunlight__img.sunlight-03 {
background-image: url("../img/log-board/log-board-top-sunlight-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 56/43;
opacity: 0.5;
}
@media screen and (min-width: 768px) {
.log-board--top__sunlight .sunlight__img.sunlight-03 {
width: clamp(100px, 4.375vw, 56px);
top: 11.71875vw;
right: 28%;
}
}
.log-board--top__sunlight .sunlight__img.sunlight-04 {
background-image: url("../img/log-board/log-board-top-sunlight-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 105/165;
opacity: 0.5;
}
@media screen and (min-width: 768px) {
.log-board--top__sunlight .sunlight__img.sunlight-04 {
width: clamp(100px, 8.203125vw, 105px);
bottom: 7.8125vw;
right: 2.34375vw;
}
}
.log-board--content {
height: 57.14%;
position: relative;
z-index: 2;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.log-board--content {
padding-bottom: 3.90625vw;
}
}
.log-board--content__lists {
padding: max(4.6875vw, 60px) 0 max(3.90625vw, 50px);
overflow: hidden;
}
.log-board--content__lists ul {
margin: 0 auto;
height: 100%;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.log-board--content__lists ul {
width: 92.1875vw;
gap: 2.1875vw 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.log-board--content__lists ul {
width: 89.7435897436vw;
gap: 2.5641025641vw 2.5641025641vw;
}
}
.log-board--content__lists ul li {
aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
.log-board--content__lists ul li {
width: calc(10% - 1.40625vw);
}
}
@media screen and (max-width: 767px) {
.log-board--content__lists ul li {
width: calc(20% - 2.0512820513vw);
}
}
.log-board--content__lists ul li.coins__cards .cards .item__img {
background-image: url("../img/log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 60%;
}
.log-board--content__lists ul li.todays__cards .cards {
position: relative;
}
.log-board--content__lists ul li.todays__cards .cards::before {
content: "";
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
border-radius: 15px;
animation: scaleHighlight 0.5s linear forwards;
}
@media screen and (min-width: 768px) {
.log-board--content__lists ul li.todays__cards .cards::before {
border: 0.234375vw solid #FFF400;
}
}
@media screen and (max-width: 767px) {
.log-board--content__lists ul li.todays__cards .cards::before {
border: 0.5128205128vw solid #FFF400;
}
}
.log-board--content__lists ul li.todays__cards .cards .item__highlight {
display: block;
animation: rotateHighlight 10s linear infinite, scaleHighlight 0.5s linear forwards;
}
@keyframes rotateHighlight {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scaleHighlight {
0% {
scale: 0;
}
100% {
scale: 1;
}
}
.log-board--content__lists ul li.checked__cards .cards::before {
content: "";
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4196078431);
border-radius: 10px;
animation: opacityCheck 0.3s linear forwards;
}
@keyframes opacityCheck {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.log-board--content__lists ul li.checked__cards .cards .cards__number {
z-index: 6;
}
.log-board--content__lists ul li.checked__cards .cards .cards__number::before {
content: "";
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4196078431);
border-radius: 50%;
animation: opacityCheck 0.3s linear forwards;
}
.log-board--content__lists ul li.checked__cards .cards .check__img {
display: block;
animation: scaleCheck 0.3s linear forwards;
}
@keyframes scaleCheck {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.log-board--content__lists ul li .cards {
width: 100%;
height: 100%;
border-radius: 10px;
background: #F9FAF8;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
position: relative;
}
.log-board--content__lists ul li .cards .cards__number {
position: absolute;
color: #FFF;
font-weight: 600;
aspect-ratio: 1/1;
background: #F49754;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
@media screen and (min-width: 768px) {
.log-board--content__lists ul li .cards .cards__number {
top: -0.78125vw;
left: -0.78125vw;
font-size: 1.5625vw;
width: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.log-board--content__lists ul li .cards .cards__number {
top: -2.5641025641vw;
left: -2.5641025641vw;
font-size: 2.5641025641vw;
width: 4.6153846154vw;
}
}
.log-board--content__lists ul li .cards .item__img {
background-image: url("../img/log-board/log-board-item-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 1/1;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 3;
}
@media screen and (min-width: 768px) {
.log-board--content__lists ul li .cards .item__img {
width: 80%;
}
}
@media screen and (max-width: 767px) {
.log-board--content__lists ul li .cards .item__img {
width: 80%;
}
}
.log-board--content__lists ul li .cards .item__highlight {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 2;
width: 180%;
aspect-ratio: 1/1;
background-image: url("../img/log-board/log-board-item-highlight.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: none;
mix-blend-mode: plus-lighter;
}
.log-board--content__lists ul li .cards .check__img {
aspect-ratio: 73/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
translate: -50% -50%;
display: none;
}
@media screen and (min-width: 768px) {
.log-board--content__lists ul li .cards .check__img {
width: 5.703125vw;
}
}
@media screen and (max-width: 767px) {
.log-board--content__lists ul li .cards .check__img {
width: 10.2564102564vw;
}
}
/* -----------------------
continuous-board
----------------------- */
.continuous-board {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(71, 71, 71, 0.6);
z-index: 100;
}
@media screen and (min-width: 768px) {
.continuous-board {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.continuous-board {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.continuous-board {
min-height: max(54.6875vw, 700px);
}
}
@media screen and (max-width: 767px) and (max-width: 767px) and (min-width: 550px) {
.continuous-board {
min-height: 900px;
}
}
.continuous-board.none {
display: none;
}
.continuous-board .board-close {
position: absolute;
aspect-ratio: 1/1;
background: #000;
border-radius: 50%;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.continuous-board .board-close {
width: 2.34375vw;
top: 1.5625vw;
right: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board .board-close {
width: 5.1282051282vw;
top: 2.5641025641vw;
right: 2.5641025641vw;
}
}
.continuous-board .board-close span {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 60%;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.continuous-board .board-close span {
height: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board .board-close span {
height: 0.5128205128vw;
}
}
.continuous-board .board-close span:nth-child(1) {
rotate: 40deg;
}
.continuous-board .board-close span:nth-child(2) {
rotate: -40deg;
}
.continuous-board__container {
background: #F4E7BC;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
border-radius: 10px;
}
@media screen and (min-width: 768px) {
.continuous-board__container {
width: 89.6875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container {
width: 95%;
}
}
.continuous-board__container::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
background-image: url("../img/log-board/continuous-board-wrap.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center top;
z-index: 3;
mix-blend-mode: plus-lighter;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__title {
padding: 0.78125vw 1.5625vw 0 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__title {
padding: 1.2820512821vw 2.5641025641vw 0 3.8461538462vw;
}
}
.continuous-board__container .container__title .TL {
line-height: 1.3;
font-weight: 900;
letter-spacing: 0.2rem;
position: relative;
-webkit-text-stroke-color: #887537;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__title .TL {
-webkit-text-stroke-width: 0.78125vw;
font-size: 4.453125vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__title .TL {
-webkit-text-stroke-width: 0.7692307692vw;
font-size: 3.8461538462vw;
}
}
.continuous-board__container .container__title .TL::before {
content: attr(data-text);
position: absolute;
-webkit-text-stroke: 0px;
top: 50%;
left: 50%;
translate: -50% -50%;
background: linear-gradient(358deg, #BAA661 11.27%, #FDF1C7 59.24%, #A7924D 89.55%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
}
.continuous-board__container .container__title .TL::after {
content: attr(data-text);
width: 100%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: -1;
text-shadow: 0px 0px 20px #fff;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__title .TL::after {
font-size: 4.453125vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__title .TL::after {
font-size: 3.8461538462vw;
}
}
.continuous-board__container .container__title .TX {
aspect-ratio: 510/158;
position: absolute;
rotate: 7deg;
z-index: 6;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__title .TX {
width: 39.84375vw;
right: -5.46875vw;
top: -1.25vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__title .TX {
width: 43.5897435897vw;
right: -2.5641025641vw;
top: -2.5641025641vw;
}
}
.continuous-board__container .container__title .TX img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.continuous-board__container .container__content {
width: 100%;
border-radius: 0 0 10px 10px;
position: relative;
z-index: 4;
background: linear-gradient(179deg, #aa9b6b 0%, #f4e7bc 15%, #786835 65%, #ede0b4 100%);
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content {
margin-top: 1.171875vw;
padding: 0 0.78125vw 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content {
margin-top: 2.0512820513vw;
padding: 0 1.2820512821vw 1.2820512821vw;
}
}
.continuous-board__container .container__content__inner {
width: 100%;
background: #fff;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner {
padding: 2.34375vw 2.34375vw 3.125vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner {
padding: 2.5641025641vw 2.5641025641vw 5.1282051282vw;
}
}
.continuous-board__container .container__content__inner .content__title {
background: linear-gradient(179deg, #aa9b6b 0%, #f4e7bc 15%, #786835 65%, #ede0b4 100%);
width: fit-content;
border-radius: 20px;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__title {
padding: 0.46875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__title {
padding: 0.7692307692vw;
}
}
.continuous-board__container .container__content__inner .content__title__inner {
background-color: #444444;
border-radius: 15px;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__title__inner {
padding: 0.078125vw 0.3125vw 0.46875vw 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__title__inner {
padding: 0.2564102564vw 0.5128205128vw 0.7692307692vw 1.5384615385vw;
}
}
.continuous-board__container .container__content__inner .content__title__inner .TX {
color: #FFF;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.115rem;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__title__inner .TX {
font-size: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__title__inner .TX {
font-size: 3.3333333333vw;
}
}
.continuous-board__container .container__content__inner .content__title__inner .TX span {
color: #75FC51;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__title__inner .TX span {
font-size: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__title__inner .TX span {
font-size: 3.8461538462vw;
}
}
.continuous-board__container .container__content__inner .content__stamp {
display: flex;
align-items: center;
position: relative;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp {
width: 67.8125vw;
margin-top: 2.65625vw;
gap: 2.03125vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp {
width: 66.6666666667vw;
margin-top: 2.5641025641vw;
gap: 1.2820512821vw;
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item {
aspect-ratio: 1/1;
border-radius: 50%;
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) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item {
width: calc(11.1111111111% - 1.8055555556vw);
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item {
width: calc(11.1111111111% - 1.1396011396vw);
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item.stamp-clear {
background-image: unset;
border: solid #D3BE74;
position: relative;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item.stamp-clear {
border-width: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item.stamp-clear {
border-width: 0.5128205128vw;
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item.stamp-clear::before {
content: "";
aspect-ratio: 70/51;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 90%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -37deg;
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale {
aspect-ratio: 1/1;
position: absolute;
background: linear-gradient(140deg, #d3be74 0%, #f2e7c2 40%, #c7b46f 100%);
border-radius: 50%;
bottom: 0;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale {
width: 11.09375vw;
left: calc(100% + 2.03125vw);
padding: 0.546875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale {
width: 12.8205128205vw;
left: calc(100% + 4.1025641026vw);
padding: 0.5128205128vw;
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale.stamp-clear .stamp__item__gale__inner .ticket-img {
animation: stamp-ticket-scale 2s linear infinite;
}
@keyframes stamp-ticket-scale {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale.stamp-clear .stamp__item__gale__inner .flash-img {
animation: stamp-flash-rotate 3.5s linear infinite;
display: block;
}
@keyframes stamp-flash-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ede5c7;
position: relative;
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner .ticket-img {
aspect-ratio: 199/118;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
translate: 0 -50%;
rotate: 162deg;
filter: drop-shadow(5px -5px 10px rgba(0, 0, 0, 0.3294117647));
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner .ticket-img {
width: 14.0625vw;
left: -0.390625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner .ticket-img {
width: 14.1025641026vw;
left: -0.5128205128vw;
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner .flash-img {
aspect-ratio: 167/180;
background-image: url("../img/log-board/log-board-item-highlight.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
opacity: 0.3;
mix-blend-mode: plus-lighter;
filter: blur(2px);
display: none;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner .flash-img {
width: 14.0625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__inner .flash-img {
width: 14.1025641026vw;
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text {
position: absolute;
width: fit-content;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text {
top: calc(100% + 0.15625vw);
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text {
top: calc(100% + 0.2564102564vw);
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text .TX {
color: #D5C27C;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text .TX {
letter-spacing: 0.115rem;
font-size: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text .TX {
letter-spacing: 0;
font-size: 2.5641025641vw;
}
}
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text .TX span {
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text .TX span {
letter-spacing: 0.115rem;
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__stamp .stamp__item__gale__text .TX span {
letter-spacing: 0;
font-size: 2.3076923077vw;
}
}
.continuous-board__container .container__content__inner .content__plus {
border-radius: 10px;
background: #FBF8D9;
position: relative;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus {
margin-top: 4.296875vw;
padding: 3.359375vw 0 3.359375vw 8.515625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus {
margin-top: 5.1282051282vw;
padding: 6.4102564103vw 0 5.1282051282vw 2.5641025641vw;
}
}
.continuous-board__container .container__content__inner .content__plus::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
background-image: url("../img/log-board/continuous-board-wrap.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center top;
z-index: 1;
mix-blend-mode: plus-lighter;
}
.continuous-board__container .container__content__inner .content__plus .plus__more {
background: linear-gradient(270deg, #F6E468 0%, #F2D50C 100%);
width: fit-content;
border-radius: 50%;
position: absolute;
z-index: 2;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus .plus__more {
padding: 2.109375vw 1.328125vw;
top: -1.71875vw;
left: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus .plus__more {
padding: 2.5641025641vw 1.5384615385vw;
top: -3.8461538462vw;
left: 1.2820512821vw;
}
}
.continuous-board__container .container__content__inner .content__plus .plus__more .TX {
color: #FFF;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.115rem;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus .plus__more .TX {
font-size: 2.1875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus .plus__more .TX {
font-size: 3.0769230769vw;
}
}
.continuous-board__container .container__content__inner .content__plus__inner {
position: relative;
z-index: 3;
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner {
gap: 3.984375vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner {
gap: 5.1282051282vw;
}
}
.continuous-board__container .container__content__inner .content__plus__inner .inner__text .TX {
color: #887537;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.115rem;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__text .TX {
font-size: 2.1875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__text .TX {
font-size: 3.0769230769vw;
}
}
.continuous-board__container .container__content__inner .content__plus__inner .inner__text .TX span {
color: #887537;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__text .TX span {
padding-left: 5.46875vw;
font-size: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__text .TX span {
padding-left: 2.5641025641vw;
font-size: 2.5641025641vw;
}
}
.continuous-board__container .container__content__inner .content__plus__inner .inner__img {
position: relative;
width: fit-content;
}
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--badge {
position: relative;
z-index: 3;
aspect-ratio: 301/67;
background-image: url("../img/badge-month.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--badge {
width: 23.515625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--badge {
width: 23.0769230769vw;
}
}
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--ticket {
aspect-ratio: 183/97;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
rotate: 17deg;
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--ticket {
width: 8.4375vw;
top: -0.78125vw;
right: -5.234375vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--ticket {
width: 10.2564102564vw;
top: -2.5641025641vw;
right: -5.1282051282vw;
}
}
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin {
background-image: url("../img/log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #fff;
border: solid #fff;
position: absolute;
z-index: 2;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3294117647);
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin {
width: 3.671875vw;
border-width: 0.15625vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin {
width: 3.8461538462vw;
border-width: 0.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin.coin-01 {
bottom: 0;
right: -1.875vw;
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin.coin-01 {
bottom: 0;
right: -2.0512820513vw;
}
}
@media screen and (min-width: 768px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin.coin-02 {
bottom: -0.9375vw;
left: calc(100% + 0.78125vw);
}
}
@media screen and (max-width: 767px) {
.continuous-board__container .container__content__inner .content__plus__inner .inner__img .img--coin.coin-02 {
bottom: -1.0256410256vw;
left: calc(100% + 0.7692307692vw);
}
}
/* -----------------------
comeback-board
----------------------- */
.comeback-board {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(180deg, #FFF 0%, #84C2DD 100%);
z-index: 101;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.comeback-board {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.comeback-board {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.comeback-board {
min-height: max(54.6875vw, 700px);
}
}
@media screen and (max-width: 767px) and (max-width: 767px) and (min-width: 550px) {
.comeback-board {
min-height: 900px;
}
}
.comeback-board.none {
display: none;
}
.comeback-board .board-close {
position: absolute;
aspect-ratio: 1/1;
background: #000;
border-radius: 50%;
cursor: pointer;
z-index: 50;
}
@media screen and (min-width: 768px) {
.comeback-board .board-close {
width: 2.34375vw;
top: 1.5625vw;
right: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board .board-close {
width: 5.1282051282vw;
top: 2.5641025641vw;
right: 2.5641025641vw;
}
}
.comeback-board .board-close span {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 60%;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.comeback-board .board-close span {
height: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board .board-close span {
height: 0.5128205128vw;
}
}
.comeback-board .board-close span:nth-child(1) {
rotate: 40deg;
}
.comeback-board .board-close span:nth-child(2) {
rotate: -40deg;
}
.comeback-board__bg .curtain__item {
position: absolute;
}
.comeback-board__bg .curtain__item.curtain-01 {
background-image: url("../img/log-board/comeback-board-curtain_top.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-position: center top;
z-index: 2;
width: 100%;
}
@media screen and (min-width: 768px) {
.comeback-board__bg .curtain__item.curtain-01 {
top: 0;
height: 12.5vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__bg .curtain__item.curtain-01 {
top: 0;
height: 20.5128205128vw;
}
}
.comeback-board__bg .curtain__item.curtain-02, .comeback-board__bg .curtain__item.curtain-03 {
background-image: url("../img/log-board/comeback-board-curtain_side.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
aspect-ratio: 380/900;
top: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.comeback-board__bg .curtain__item.curtain-02, .comeback-board__bg .curtain__item.curtain-03 {
height: 100%;
background-size: 100% 100%;
}
}
@media screen and (max-width: 767px) {
.comeback-board__bg .curtain__item.curtain-02, .comeback-board__bg .curtain__item.curtain-03 {
height: 100%;
background-size: 20% 100%;
background-position: left;
}
}
.comeback-board__bg .curtain__item.curtain-03 {
left: unset;
right: 0;
scale: -1 1;
}
.comeback-board__bg .cracker__item {
background-image: url("../img/log-board/comeback-board-cracker.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
z-index: 3;
aspect-ratio: 470/437;
}
@media screen and (min-width: 768px) {
.comeback-board__bg .cracker__item {
width: 36.71875vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__bg .cracker__item {
width: 38.4615384615vw;
}
}
.comeback-board__bg .cracker__item.cracker-01 {
left: 0;
}
.comeback-board__bg .cracker__item.cracker-02 {
left: unset;
right: 0;
scale: -1 1;
}
.comeback-board__container {
position: relative;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 5;
}
@media screen and (min-width: 768px) {
.comeback-board__container {
padding: 3.90625vw 0;
width: 78.125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container {
width: 89.7435897436vw;
}
}
.comeback-board__container .container__characters .characters {
position: absolute;
aspect-ratio: 320/365;
z-index: 1;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__characters .characters {
width: 20.3125vw;
top: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__characters .characters {
width: 30.7692307692vw;
top: 7.8125vw;
}
}
.comeback-board__container .container__characters .characters.character_01 {
background-image: url("../img/log-board/comeback-board-character_01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__characters .characters.character_01 {
left: -3.90625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__characters .characters.character_01 {
left: -10.2564102564vw;
}
}
.comeback-board__container .container__characters .characters.character_02 {
background-image: url("../img/log-board/comeback-board-character_02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__characters .characters.character_02 {
right: -3.90625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__characters .characters.character_02 {
right: -7.6923076923vw;
}
}
.comeback-board__container .container__title {
position: relative;
z-index: 2;
}
.comeback-board__container .container__title .TL {
aspect-ratio: 771/154;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__title .TL {
width: 44.609375vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__title .TL {
width: 76.9230769231vw;
}
}
.comeback-board__container .container__title .TL img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.comeback-board__container .container__text {
margin: 0 auto;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__text {
margin-top: 0.390625vw;
width: 37.5vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__text {
margin-top: 2.5641025641vw;
width: 51.2820512821vw;
}
}
.comeback-board__container .container__text .TX {
color: #6D6D6D;
font-weight: 500;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__text .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__text .TX {
font-size: 3.0769230769vw;
}
}
.comeback-board__container .container__content {
position: relative;
z-index: 2;
border-radius: 10px;
background: #FFF;
box-shadow: 0px 15px 4px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content {
margin-top: 1.71875vw;
width: 100%;
padding: 2.8125vw 0 2.734375vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content {
margin-top: 3.8461538462vw;
width: 100%;
padding: 2.5641025641vw 2.5641025641vw 2.5641025641vw 2.5641025641vw;
}
}
.comeback-board__container .container__content__inner {
display: flex;
justify-content: center;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner {
gap: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner {
gap: 5.1282051282vw;
}
}
.comeback-board__container .container__content__inner .content__sentence {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence {
gap: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence {
gap: 5.1282051282vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__title .TX {
color: #9D8C50;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__title .TX {
letter-spacing: 0.106796875vw;
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__title .TX {
font-size: 3.0769230769vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp {
display: flex;
align-items: center;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp {
width: 27.34375vw;
gap: 3.28125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp {
width: 33.3333333333vw;
gap: 2.5641025641vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item {
aspect-ratio: 1/1;
border-radius: 50%;
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) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item {
width: calc(33.3333333333% - 2.1875vw);
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item {
width: calc(33.3333333333% - 1.7094017094vw);
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item.stamp-clear {
background-image: unset;
border: solid #D3BE74;
position: relative;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item.stamp-clear {
border-width: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item.stamp-clear {
border-width: 0.7692307692vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item.stamp-clear::before {
content: "達成";
aspect-ratio: 70/51;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -17deg;
display: flex;
justify-content: center;
align-items: center;
color: #9D8C50;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item.stamp-clear::before {
font-size: 2.1875vw;
letter-spacing: 0.248203125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__stamp .stamp__item.stamp-clear::before {
font-size: 3.0769230769vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .TX {
color: #9D8C50;
font-weight: 900;
line-height: 1;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .TX {
letter-spacing: 0.106796875vw;
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .TX {
font-size: 3.3333333333vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .TX span {
color: #A4D0E4;
font-weight: 900;
line-height: 1;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .TX span {
font-size: 4.6875vw;
letter-spacing: 0.375vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .TX span {
font-size: 7.6923076923vw;
letter-spacing: 0.6153846154vw;
}
}
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .seal {
aspect-ratio: 136/55;
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) {
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .seal {
width: 5.46875vw;
margin-bottom: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__sentence .sentence__remainder .days .seal {
width: 10.2564102564vw;
margin-bottom: 0.5128205128vw;
}
}
.comeback-board__container .container__content__inner .content__item {
border-radius: 10px;
border: 6px solid #D3BE74;
background: #FAF2D4;
aspect-ratio: 450/231;
position: relative;
}
@media screen and (min-width: 768px) {
.comeback-board__container .container__content__inner .content__item {
width: 31.25vw;
}
}
@media screen and (max-width: 767px) {
.comeback-board__container .container__content__inner .content__item {
width: 76.9230769231vw;
}
}
.comeback-board__container .container__content__inner .content__item .item__body {
aspect-ratio: 1/1;
background-color: rgba(0, 0, 0, 0.462745098);
border-radius: 50%;
width: 40%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
/* -----------------------
change-clothes
----------------------- */
.change-clothes {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
@media screen and (min-width: 768px) {
.change-clothes {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.change-clothes {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.change-clothes {
min-height: max(54.6875vw, 700px);
}
}
@media screen and (max-width: 767px) and (max-width: 767px) and (min-width: 550px) {
.change-clothes {
min-height: 900px;
}
}
.change-clothes__display {
height: 53.86%;
background-image: url("../img/log-board/log-board-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center top 60%;
position: relative;
z-index: 1;
overflow: hidden;
}
.change-clothes__display .display__header {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 1;
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header {
padding: min(1.328125vw, 17px) min(1.953125vw, 25px) 0 min(2.1875vw, 28px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header {
padding: 4.358974359vw 5.1282051282vw 0 5.1282051282vw;
}
}
.change-clothes__display .display__header .return__button {
display: block;
aspect-ratio: 30/27;
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) {
.change-clothes__display .display__header .return__button {
width: min(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .return__button {
width: 5.1282051282vw;
}
}
.change-clothes__display .display__header .self__area {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area {
gap: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area {
gap: 1.2820512821vw;
}
}
.change-clothes__display .display__header .self__area .possession__area {
display: flex;
align-items: center;
border-radius: 4px;
background: #FFF;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .possession__area {
gap: min(2.8125vw, 36px);
height: min(3.125vw, 40px);
padding: 0 min(1.015625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .possession__area {
gap: 5.1282051282vw;
height: 7.6923076923vw;
padding: 0 2.5641025641vw;
}
}
.change-clothes__display .display__header .self__area .possession__area .possession__item {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item {
gap: min(0.390625vw, 5px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item {
gap: 1.2820512821vw;
}
}
.change-clothes__display .display__header .self__area .possession__area .possession__item .icon.icon-01 {
aspect-ratio: 1/1;
background-image: url("../img/log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item .icon.icon-01 {
width: min(2.265625vw, 29px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item .icon.icon-01 {
width: 5.1282051282vw;
}
}
.change-clothes__display .display__header .self__area .possession__area .possession__item .icon.icon-02 {
aspect-ratio: 84/71;
background-image: url("../img/log-board/log-board-item-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item .icon.icon-02 {
width: min(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item .icon.icon-02 {
width: 6.4102564103vw;
}
}
.change-clothes__display .display__header .self__area .possession__area .possession__item .TX {
color: #6D6D6D;
font-weight: 700;
line-height: 1;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item .TX {
font-size: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .possession__area .possession__item .TX {
font-size: 3.0769230769vw;
}
}
.change-clothes__display .display__header .self__area .saving__button {
border-radius: 4px;
background: #C7C8C6;
display: flex;
justify-content: center;
align-items: center;
cursor: not-allowed;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .saving__button {
height: min(3.125vw, 40px);
padding-inline: min(2.1875vw, 28px) min(1.875vw, 24px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .saving__button {
height: 7.6923076923vw;
padding-inline: 2.5641025641vw;
}
}
.change-clothes__display .display__header .self__area .saving__button:not(:disabled) {
background: #FF971C;
cursor: pointer;
}
.change-clothes__display .display__header .self__area .saving__button .TX {
color: #F9FAF8;
font-weight: 700;
line-height: 1;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__header .self__area .saving__button .TX {
font-size: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__header .self__area .saving__button .TX {
font-size: 3.0769230769vw;
}
}
.change-clothes__display .display_character-wap {
z-index: 2;
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display_character-wap {
bottom: min(1.640625vw, 21px);
width: min(23.4375vw, 300px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display_character-wap {
bottom: 7.6923076923vw;
width: 33.3333333333vw;
}
}
.change-clothes__display .display__character__ground {
position: absolute;
z-index: 1;
left: 50%;
translate: -50% 0;
border-radius: 50%;
background: linear-gradient(180deg, #EDF6AA 0%, #65AA2E 49%);
box-shadow: 0px -1px 15px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__ground {
top: calc(100% - min(3.59375vw, 46px));
width: min(92.578125vw, 1185px);
height: min(15.078125vw, 193px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__ground {
top: calc(100% - 12.8205128205vw);
width: 100%;
height: 25.641025641vw;
}
}
.change-clothes__display .display__character__serif {
background: #FFF;
position: absolute;
z-index: 3;
bottom: 15%;
opacity: 1;
translate: -50% 0;
transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif {
border-radius: 50px;
width: min(23.75vw, 304px);
padding: min(2.5vw, 32px) min(2.1875vw, 28px) min(2.65625vw, 34px) min(2.34375vw, 30px);
left: calc(50% + min(27.34375vw, 350px));
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif {
border-radius: 20px;
width: 33.3333333333vw;
padding: 2.5641025641vw;
left: calc(50% + 30.7692307692vw);
}
}
.change-clothes__display .display__character__serif.none {
opacity: 0;
pointer-events: none;
}
.change-clothes__display .display__character__serif::before {
content: "";
position: absolute;
z-index: -1;
display: block;
aspect-ratio: 23/17;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 190deg;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif::before {
width: min(1.796875vw, 23px);
top: min(2.578125vw, 33px);
right: calc(100% - 10px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif::before {
width: 3.8461538462vw;
bottom: 20.5128205128vw;
right: calc(100% - 5px);
}
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area {
display: flex;
flex-direction: column;
gap: min(1.328125vw, 17px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area {
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__serif .TX {
color: #6D6D6D;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__serif .TX {
font-size: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__serif .TX {
font-size: 3.3333333333vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__info {
display: flex;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__info {
align-items: flex-end;
gap: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__info {
flex-direction: column;
gap: 2.5641025641vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__img__frame {
aspect-ratio: 1/1;
border-radius: 7.259px;
background: #F9FAF8;
position: relative;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__img__frame {
width: min(6.5625vw, 84px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__img__frame {
width: 11.5384615385vw;
margin: 0 auto;
}
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__img__frame .item__img {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
aspect-ratio: 1/1;
object-fit: contain;
object-position: center;
width: 80%;
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost {
gap: min(0.15625vw, 2px);
margin-bottom: min(0.46875vw, 6px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost {
gap: 0.5128205128vw;
justify-content: center;
}
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon {
flex-shrink: 0;
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon.coin {
aspect-ratio: 1/1;
background-image: url("../img/log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon.coin {
width: min(2.03125vw, 26px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon.coin {
width: 3.8461538462vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon.point {
aspect-ratio: 84/71;
background-image: url("../img/log-board/log-board-item-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon.point {
width: min(2.8125vw, 36px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .icon.point {
width: 5.1282051282vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .TX {
color: #6D6D6D;
font-weight: 700;
line-height: 1.5;
word-break: break-all;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .TX {
font-size: min(1.796875vw, 23px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__info .item__cost .TX {
font-size: 3.8461538462vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__button {
display: flex;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__button {
gap: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__button {
flex-direction: column;
gap: 2.5641025641vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__button .buttons {
border-radius: 5px;
color: #FFF;
font-weight: 800;
line-height: 1.5;
letter-spacing: 0.12em;
cursor: pointer;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__button .buttons {
font-size: min(0.9375vw, 12px);
padding: min(0.46875vw, 6px) 0 min(0.546875vw, 7px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__serif .serif__area .item__button .buttons {
font-size: 3.0769230769vw;
padding: 1.5384615385vw 0 1.7948717949vw;
}
}
.change-clothes__display .display__character__serif .serif__area .item__button .buttons:active::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1764705882);
}
.change-clothes__display .display__character__serif .serif__area .item__button .buttons.cancel {
background: #C8C8C8;
box-shadow: 0px 0px 10px 0px #F1F9F4 inset;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__button .buttons.cancel {
flex: 0.6;
}
}
.change-clothes__display .display__character__serif .serif__area .item__button .buttons.exchange {
background: #7FBF99;
box-shadow: 0px 0px 10px 0px #BCF3D3 inset;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__serif .serif__area .item__button .buttons.exchange {
flex: 1;
}
}
.change-clothes__display .display__character__color {
border-radius: 10px;
background: #EAD5BA;
box-shadow: -4px -5px 10px 0px #CDAD91 inset, 5px 8px 11px 0px rgba(255, 255, 255, 0.44) inset;
position: absolute;
z-index: 3;
transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color {
width: min(25.390625vw, 325px);
padding: min(1.953125vw, 25px) min(2.8125vw, 36px) min(1.484375vw, 19px);
translate: -50% 0;
left: calc(50% - min(31.25vw, 400px));
bottom: 40%;
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color {
width: 33.3333333333vw;
padding: 2.5641025641vw;
left: calc(50% - 38.4615384615vw);
bottom: 20%;
}
}
.change-clothes__display .display__character__color.none {
opacity: 0;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color .color__area {
display: flex;
flex-direction: column;
gap: min(1.015625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color .color__area {
display: flex;
flex-direction: column;
gap: 1.2820512821vw;
}
}
.change-clothes__display .display__character__color .color__area .gradient__area .gradient__item {
width: 100%;
border-radius: 5px;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color .color__area .gradient__area .gradient__item {
aspect-ratio: 252/112;
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color .color__area .gradient__area .gradient__item {
aspect-ratio: 200/80;
}
}
.change-clothes__display .display__character__color .color__area .picker__area {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color .color__area .picker__area {
gap: min(0.390625vw, 5px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color .color__area .picker__area {
gap: 0.5128205128vw;
}
}
.change-clothes__display .display__character__color .color__area .picker__area .color__now {
aspect-ratio: 1/1;
border-radius: 10px;
border: 1px solid #B29975;
background: rgb(247, 251, 248);
flex-shrink: 0;
pointer-events: none;
color: transparent;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color .color__area .picker__area .color__now {
width: min(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color .color__area .picker__area .color__now {
width: 5.1282051282vw;
}
}
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container {
width: 100%;
position: relative;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container {
height: min(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container {
height: 2.0512820513vw;
}
}
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container .color__bar {
width: 100%;
height: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container .color__bar__marker {
position: absolute;
top: 50%;
transform: translateY(-50%);
aspect-ratio: 1/1;
height: 150%;
border-radius: 50%;
pointer-events: none;
z-index: 2;
border-radius: 26.866px;
border: solid #B39A76;
box-shadow: -0.269px -0.537px 1.612px 0px rgba(0, 0, 0, 0.25) inset, 0px 1.343px 1.612px 0px rgba(255, 243, 180, 0.45) inset;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container .color__bar__marker {
border-width: min(0.234375vw, 3px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__character__color .color__area .picker__area .color__bar__container .color__bar__marker {
border-width: 0.7692307692vw;
}
}
.change-clothes__display .display__sideButton {
position: absolute;
z-index: 4;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__sideButton {
bottom: min(2.5vw, 32px);
right: min(1.796875vw, 23px);
display: flex;
flex-direction: column;
gap: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__sideButton {
right: 2.5641025641vw;
bottom: 1.2820512821vw;
display: flex;
gap: 1.2820512821vw;
}
}
.change-clothes__display .display__sideButton .sideButton__button {
border-radius: 50%;
background: #B39A76;
box-shadow: -1px -2px 6px 0px rgba(0, 0, 0, 0.25) inset, 0px 5px 6px 0px rgba(255, 243, 180, 0.45) inset;
cursor: pointer;
aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__sideButton .sideButton__button {
width: min(5.15625vw, 66px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__sideButton .sideButton__button {
width: 10.2564102564vw;
}
}
.change-clothes__display .display__sideButton .sideButton__button:active {
background: #997D5C;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text {
display: flex;
flex-direction: column;
gap: min(0.234375vw, 3px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text {
display: flex;
flex-direction: column;
gap: 1.0256410256vw;
}
}
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text .icon {
aspect-ratio: 1/1;
width: 50%;
margin: 0 auto;
}
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text .icon.icon-01 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text .icon.icon-02 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text .TX {
color: #7E6A4C;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text .TX {
font-size: min(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__display .display__sideButton .sideButton__button .sideButton__text .TX {
font-size: 2.0512820513vw;
position: relative;
left: 50%;
translate: -50% 0;
text-align: center;
width: fit-content;
}
}
.change-clothes__control {
height: 46.24%;
position: relative;
z-index: 2;
}
.change-clothes__control .control__category {
background: #B29975;
box-shadow: 0px -6px 8px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 12px 0px rgba(255, 243, 180, 0.55) inset;
position: relative;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__category {
padding: min(1.171875vw, 15px) min(1.484375vw, 19px) min(1.484375vw, 19px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__category {
padding: 2.5641025641vw;
}
}
.change-clothes__control .control__category .category__list {
position: absolute;
left: 0;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__category .category__list {
bottom: calc(100% - min(0.859375vw, 11px));
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__category .category__list {
bottom: calc(100% - 1.2820512821vw);
}
}
.change-clothes__control .control__category .category__list .category__list__items {
display: flex;
align-items: center;
pointer-events: none;
}
.change-clothes__control .control__category .category__list .category__list__items li {
cursor: pointer;
position: relative;
z-index: -1;
pointer-events: auto;
}
.change-clothes__control .control__category .category__list .category__list__items li.active {
cursor: default;
z-index: 2;
}
.change-clothes__control .control__category .category__list .category__list__items li.active .category__item {
background-color: #B39A76;
}
.change-clothes__control .control__category .category__list .category__list__items li .category__item {
border-radius: 200px 200px 0px 0px;
background-color: #988364;
box-shadow: 0px 5px 6px 0px rgba(255, 243, 180, 0.45) inset;
aspect-ratio: 80/62;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__category .category__list .category__list__items li .category__item {
width: min(6.25vw, 80px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__category .category__list .category__list__items li .category__item {
width: 7.6923076923vw;
}
}
.change-clothes__control .control__category .category__list .category__list__items li .category__item .icon {
aspect-ratio: 30/34;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__category .category__list .category__list__items li .category__item .icon {
width: min(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__category .category__list .category__list__items li .category__item .icon {
width: 3.8461538462vw;
}
}
.change-clothes__control .control__category .tag__list .tag__list__area {
display: none;
}
.change-clothes__control .control__category .tag__list .tag__list__area.active {
display: block;
}
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items {
gap: min(0.9375vw, 12px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items {
gap: 1.2820512821vw;
}
}
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items li .tag__item {
aspect-ratio: 46/35;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items li .tag__item {
width: min(3.59375vw, 46px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items li .tag__item {
width: 5.1282051282vw;
}
}
.change-clothes__control .control__category .tag__list .tag__list__area .tag__list__items li .tag__item.active {
mix-blend-mode: luminosity;
cursor: default;
}
.change-clothes__control .control__item {
background-image: url("../img/control__item--bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__item {
padding: min(2.65625vw, 34px) min(3.515625vw, 45px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__item {
padding: 3.8461538462vw;
}
}
.change-clothes__control .control__item__inner {
height: 100%;
overflow-y: scroll;
}
.change-clothes__control .control__item__inner .control__list__wrap {
display: none;
}
.change-clothes__control .control__item__inner .control__list__wrap.active {
display: block;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list {
display: none;
height: 100%;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list.active {
display: block;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul {
gap: min(1.40625vw, 18px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul {
gap: 2.5641025641vw;
}
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li {
aspect-ratio: 1/1;
position: relative;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li {
width: max(11.1111111111% - min(1.40625vw, 18px) * 8 / 9, 120px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li {
width: calc(33.3333333333% - 1.7094017094vw);
}
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .category-tag__item--wrap {
border-radius: 10px;
margin: 0;
padding: 0;
background: #F9FAF8;
appearance: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .category-tag__item--wrap:checked::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 3;
width: 100%;
aspect-ratio: 1/1;
border: solid #FF971C;
box-sizing: border-box;
border-radius: 10px;
}
@media screen and (min-width: 768px) {
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .category-tag__item--wrap:checked::before {
border-width: min(0.390625vw, 5px);
}
}
@media screen and (max-width: 767px) {
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .category-tag__item--wrap:checked::before {
border-width: 0.5128205128vw;
}
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .category-tag__item {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
aspect-ratio: 1/1;
width: 75%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .category-tag__item img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .nothing-item {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
translate: -50% -50%;
aspect-ratio: 1/1;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
pointer-events: none;
width: 100%;
}
.change-clothes__control .control__item__inner .control__list__wrap .control__category-tag__list ul li .nothing-item.active {
display: none;
}
/* -----------------------
page-game-single
----------------------- */
@media screen and (min-width: 768px) {
.game-wrap #game-single_inner {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.game-wrap #game-single_inner {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.game-wrap #game-single_inner .game-single_wrap {
padding: min(5.1282051282vw, 20px) min(2.5641025641vw, 10px) min(38.4615384615vw, 150px);
}
}
.game-single_wrap {
display: flex;
}
@media screen and (min-width: 768px) {
.game-single_wrap {
height: 100%;
gap: 0.9375vw;
padding: max(3.671875vw, 47px) max(4.140625vw, 53px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap {
flex-direction: column;
gap: min(5.1282051282vw, 20px);
padding: min(2.5641025641vw, 10px);
flex-direction: column-reverse;
justify-content: flex-end;
}
}
.game-single_wrap .game-single_comment {
background: #3D5361;
height: fit-content;
position: relative;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment {
width: 30%;
min-height: max(19.53125vw, 250px);
padding: max(0.859375vw, 11px) max(0.859375vw, 11px) max(4.6875vw, 60px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment {
width: 100%;
padding: min(2.5641025641vw, 10px) min(2.5641025641vw, 10px) min(15.3846153846vw, 60px);
}
}
.game-single_wrap .game-single_comment .game-single_comment_title {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_title {
padding: max(0.625vw, 8px) max(2.65625vw, 34px) max(0.703125vw, 9px);
margin-bottom: max(1.328125vw, 17px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_title {
padding: min(2.0512820513vw, 8px) min(8.7179487179vw, 34px) min(2.3076923077vw, 9px);
margin-bottom: min(4.358974359vw, 17px);
}
}
.game-single_wrap .game-single_comment .game-single_comment_title .TL {
color: #F0FAED;
text-align: center;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_title .TL {
font-size: max(1.40625vw, 18px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_title .TL {
font-size: min(4.6153846154vw, 18px);
}
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_selection {
padding-left: max(0.859375vw, 11px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_selection {
padding-left: min(2.8205128205vw, 11px);
}
}
.game-single_wrap .game-single_comment .game-single_comment_selection p {
color: #F0FAED;
line-height: 150%;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_selection p {
font-size: max(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_selection p {
font-size: min(4.1025641026vw, 16px);
}
}
.game-single_wrap .game-single_comment .comment-list .comment-author,
.game-single_wrap .game-single_comment .comment-list .commentmetadata,
.game-single_wrap .game-single_comment .comment-list .reply {
display: none;
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-reply-title,
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .logged-in-as {
display: none;
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form {
display: flex;
align-items: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 90%;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form {
bottom: max(0.859375vw, 11px);
gap: max(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form {
bottom: min(2.8205128205vw, 11px);
gap: min(2.5641025641vw, 10px);
}
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment {
width: 100%;
position: relative;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment {
height: max(3.125vw, 40px);
padding-inline: max(0.234375vw, 3px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment {
height: min(10.2564102564vw, 40px);
padding-inline: min(0.7692307692vw, 3px);
}
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::before, .game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: #B6C3B2;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::before, .game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::after {
width: max(0.46875vw, 6px);
height: 80%;
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::before, .game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::after {
width: min(1.5384615385vw, 6px);
height: min(20.5128205128vw, 80%);
}
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment::after {
left: unset;
right: 0;
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment label {
display: none;
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
font-family: "BestTenDot", sans-serif;
background: #B6C3B2;
color: #3D5361;
outline: none;
resize: none;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment textarea {
padding: max(0.78125vw, 10px) max(0.78125vw, 10px);
font-size: max(1.09375vw, 14px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .comment-form-comment textarea {
padding: min(2.5641025641vw, 10px) min(2.5641025641vw, 10px);
font-size: min(3.5897435897vw, 14px);
}
}
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .form-submit .submit {
font-family: "BestTenDot", sans-serif;
flex-shrink: 0;
border: 3px solid #F0FAED;
background: #B6C3B2;
padding: 0;
margin: 0;
aspect-ratio: 1/1;
color: #3D5361;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .form-submit .submit {
width: max(3.125vw, 40px);
font-size: max(1.09375vw, 14px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_comment .game-single_comment_input .comment-respond .comment-form .form-submit .submit {
width: min(10.2564102564vw, 40px);
font-size: min(3.5897435897vw, 14px);
}
}
.game-single_wrap .game-single_content {
background: #3D5361;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_content {
width: 80%;
height: 95%;
padding: max(0.859375vw, 11px) max(0.78125vw, 10px) max(0.625vw, 8px);
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_content {
width: 100%;
padding: min(1.2820512821vw, 5px);
}
}
.game-single_wrap .game-single_content_wrap {
background: #3D5361;
border: solid #F0FAED;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_content_wrap {
border-width: max(0.234375vw, 3px);
height: 100%;
overflow-y: scroll;
padding: max(3.125vw, 40px) max(3.671875vw, 47px) max(2.34375vw, 30px) max(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_content_wrap {
border-width: min(0.5128205128vw, 2px);
padding: min(2.5641025641vw, 10px);
}
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_content_wrap_inner .game-single_content_title {
margin-bottom: max(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_content_wrap_inner .game-single_content_title {
margin-bottom: min(7.6923076923vw, 30px);
}
}
.game-single_wrap .game-single_content_wrap_inner .game-single_content_title .TL {
color: #F0FAED;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_content_wrap_inner .game-single_content_title .TL {
font-size: max(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_content_wrap_inner .game-single_content_title .TL {
font-size: min(5.1282051282vw, 20px);
}
}
.game-single_wrap .game-single_content_wrap_inner .game-single_content_text p,
.game-single_wrap .game-single_content_wrap_inner .game-single_content_text span {
color: #F0FAED;
line-height: 150%;
word-break: break-all;
}
@media screen and (min-width: 768px) {
.game-single_wrap .game-single_content_wrap_inner .game-single_content_text p,
.game-single_wrap .game-single_content_wrap_inner .game-single_content_text span {
font-size: max(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.game-single_wrap .game-single_content_wrap_inner .game-single_content_text p,
.game-single_wrap .game-single_content_wrap_inner .game-single_content_text span {
font-size: min(4.1025641026vw, 16px);
}
}
/* -----------------------
aptitude
----------------------- */
.aptitude {
background-image: url("../img/aptitude-bk.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
@media screen and (min-width: 768px) {
.aptitude {
height: 100vh;
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.aptitude {
padding: 12.8205128205vw 5.1282051282vw;
}
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
.aptitude {
height: 100vh;
min-height: 156.25vw;
padding: 3.90625vw 1.5625vw;
}
.aptitude .aptitude__inner {
position: unset;
transform: unset;
width: 100%;
height: 95%;
flex-direction: column;
gap: 3.90625vw;
}
.aptitude .aptitude__inner .aptitude__container {
width: 100%;
flex-shrink: unset;
height: clamp(700px, 62.5vw, 800px);
}
.aptitude .aptitude__inner .aptitude__container--contents {
height: 92%;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--memo .TX {
font-size: 1.953125vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item {
margin-bottom: min(1.5625vw, 20px);
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX {
font-size: 2.34375vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX span {
font-size: 1.5625vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item {
gap: 7.8125vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap {
width: 3.90625vw;
height: 3.90625vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-label p {
font-size: 1.5625vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn {
width: calc(50% - min(0.78125vw, 10px));
padding: 5.78125vw 3.515625vw 2.34375vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .icon {
width: 3.28125vw;
height: 3.046875vw;
margin-bottom: 1.484375vw;
}
.aptitude .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .TX {
font-size: 1.796875vw;
}
.aptitude .aptitude__inner .aptitude__character {
height: unset;
position: relative;
width: 80%;
margin: 0 auto;
}
.aptitude .aptitude__inner .aptitude__character .character--message {
position: unset;
margin: 0 auto 1.5625vw;
width: 100%;
margin: 0 auto;
}
.aptitude .aptitude__inner .aptitude__character .character--message--inner .TX {
color: #646464;
font-weight: 700;
line-height: 175%;
}
}
@media screen and (max-width: 1000px) and (min-width: 768px) and (min-width: 768px) {
.aptitude .aptitude__inner .aptitude__character .character--message--inner .TX {
font-size: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
.aptitude .aptitude__inner .aptitude__character .character--texture {
position: unset;
}
}
.aptitude__inner {
display: flex;
}
@media screen and (min-width: 768px) {
.aptitude__inner {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 49.5%;
width: 92.96875%;
height: 90%;
justify-content: space-between;
gap: 2.109375vw;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner {
flex-direction: column;
gap: 7.6923076923vw;
}
}
.aptitude__inner .aptitude__container {
border-radius: 10px;
background: #CFC6B6;
box-shadow: 0px 4px 8px 0px #EEE4D3 inset;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container {
width: max(59.6875vw, 600px);
height: 100%;
padding: min(3.125vw, 40px) min(3.90625vw, 50px) min(1.25vw, 16px);
flex-shrink: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container {
width: 100%;
padding: 5.1282051282vw 2.5641025641vw;
}
}
.aptitude__inner .aptitude__container--top {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.aptitude__inner .aptitude__container--top .aptitude--title .TL {
color: #7E7360;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 70%;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--top .aptitude--title .TL {
font-size: clamp(30px, 3.030859375vw, 40px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--top .aptitude--title .TL {
font-size: 5.1282051282vw;
}
}
.aptitude__inner .aptitude__container--top .aptitude--progress {
display: flex;
align-items: flex-end;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--top .aptitude--progress {
gap: min(0.625vw, 8px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--top .aptitude--progress {
gap: 2.0512820513vw;
}
}
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--wrap {
border-radius: 94.633px;
background: #948975;
position: relative;
border: solid #948975;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--wrap {
width: clamp(300px, 28.125vw, 500px);
height: min(0.78125vw, 10px);
border-width: clamp(1px, 0.078125vw, 2px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--wrap {
width: 43.5897435897vw;
height: 2.5641025641vw;
border-width: 0.2564102564vw;
}
}
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--wrap .progress--bar {
position: absolute;
height: 100%;
border-radius: 94.633px;
background: #80C868;
width: 6.6666666667%;
transition: all 0.3s ease;
}
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--text .TX {
color: #948975;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--text .TX {
font-size: 25.351px;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--text .TX {
font-size: 4.1025641026vw;
}
}
.aptitude__inner .aptitude__container--top .aptitude--progress .progress--text .TX--num {
font-weight: 700;
}
.aptitude__inner .aptitude__container--contents {
width: 100%;
background: #F4F6F8;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents {
margin-top: min(1.5625vw, 20px);
height: 95%;
padding: min(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents {
margin-top: 3.8461538462vw;
padding: 1.2820512821vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--memo {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(90deg, rgba(173, 199, 234, 0.5) 0%, rgba(234, 173, 173, 0.5) 100%);
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--memo {
padding: min(0.234375vw, 3px) min(0.46875vw, 6px) min(0.390625vw, 5px);
margin-bottom: min(0.703125vw, 9px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--memo {
padding: 0.7692307692vw 1.5384615385vw 1.2820512821vw;
margin-bottom: 1.2820512821vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--memo .TX {
color: #7CA9E4;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--memo .TX {
font-size: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--memo .TX {
font-size: 3.5897435897vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--memo .TX:nth-child(2) {
color: #E78181;
}
.aptitude__inner .aptitude__container--contents .contents--inner {
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner {
height: 95%;
}
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner {
height: 90%;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner {
max-height: 80vh;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists {
display: none;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists.active {
display: block;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists:first-child .list--btn .list--btn__area .prev-btn {
opacity: 0;
pointer-events: none;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists:last-child .list--btn .list--btn__area .next-btn {
display: none;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list {
position: relative;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list {
padding: min(2.34375vw, 30px) min(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list {
padding: 5.1282051282vw 1.2820512821vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::before, .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-position: left center;
background-repeat: repeat-x;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::before, .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::after {
height: clamp(2px, 0.15625vw, 3px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::before, .aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::after {
height: 0.5128205128vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list::after {
display: none;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list:last-child::after {
display: block;
top: unset;
bottom: 0;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item {
margin-bottom: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item {
margin-bottom: 6.4102564103vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX {
color: #333;
text-align: center;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX {
font-size: clamp(16px, 1.25vw, 25px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX {
font-size: 4.1025641026vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX span {
font-weight: 700;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX span {
font-size: clamp(13px, 1.015625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .question--item .TX span {
font-size: 3.0769230769vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item {
display: flex;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item {
justify-content: center;
gap: clamp(50px, 5.46875vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item {
justify-content: space-around;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap {
position: relative;
border-radius: 94.633px;
transition: all 0.3s ease;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:nth-child(1) .answer-radio {
background: #ADC7EA;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:nth-child(2) .answer-radio {
background: #D4E0F0;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:nth-child(3) .answer-radio {
background: #D9D9D9;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:nth-child(4) .answer-radio {
background: #F0DAD4;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:nth-child(5) .answer-radio {
background: #EAADAD;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:hover {
box-shadow: 0px 0px 20px 8px #80C868;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap:hover .answer-radio {
background: #80C868;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap {
width: clamp(30px, 2.34375vw, 50px);
height: clamp(30px, 2.34375vw, 50px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap {
width: 7.6923076923vw;
height: 7.6923076923vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-label p {
color: #FFF;
text-align: center;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-label p {
font-size: clamp(13px, 1.015625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-label p {
font-size: 3.3333333333vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-radio {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 94.633px;
margin: 0;
padding: 0;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-radio:checked {
background: #80C868;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list .answer--item .answer-wrap .answer-radio.change {
background: #9e9e9e;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn {
padding: 0;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area {
display: flex;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area {
gap: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area {
gap: 5.1282051282vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn {
cursor: pointer;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn {
width: calc(50% - min(0.78125vw, 10px));
padding: min(4.21875vw, 54px) min(1.953125vw, 25px) min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn {
width: calc(50% - 2.5641025641vw);
padding: 7.6923076923vw 6.4102564103vw 5.1282051282vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn.next-btn .btn--inner {
margin-left: auto;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn.result-btn {
padding: 0;
background: #80C868;
border-radius: 94.633px;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn.result-btn {
margin: min(0.78125vw, 10px) 0;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn.result-btn .btn--inner {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner {
width: fit-content;
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .icon {
width: min(2.5vw, 32px);
height: min(2.265625vw, 29px);
margin-bottom: min(0.703125vw, 9px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .icon {
width: 8.2051282051vw;
height: 7.4358974359vw;
margin-bottom: 2.3076923077vw;
}
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .icon.icon--next {
transform: scaleX(-1);
}
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .TX {
color: #948975;
text-align: center;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .TX {
font-size: min(1.015625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .TX {
font-size: 3.3333333333vw;
}
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .TX.TX-bg {
font-size: min(2.03125vw, 26px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__container--contents .contents--inner .inner--lists .list.list--btn .list--btn__area .btn--inner .TX.TX-bg {
font-size: 5.1282051282vw;
}
}
@media screen and (max-height: 1000px) and (min-height: 0px) and (min-width: 1000px) {
.aptitude__inner .aptitude__container .aptitude__container--contents {
height: 90%;
}
.aptitude__inner .aptitude__container .aptitude__container--contents .contents--inner {
height: 90%;
}
}
.aptitude__inner .aptitude__character {
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character {
width: 100%;
margin: 0 auto;
}
}
.aptitude__inner .aptitude__character .character--message {
border-radius: 30px;
background: #FFF;
width: 100%;
position: relative;
z-index: 99;
}
.aptitude__inner .aptitude__character .character--message.active {
animation: fade-one-time 1s ease;
}
@keyframes fade-one-time {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--message {
padding: min(2.34375vw, 30px) min(3.671875vw, 47px);
position: absolute;
bottom: min(39.0625vw, 500px);
left: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--message {
padding: 7.6923076923vw 5.1282051282vw;
}
}
.aptitude__inner .aptitude__character .character--message--inner .TX {
color: #646464;
font-weight: 700;
line-height: 175%;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--message--inner .TX {
font-size: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--message--inner .TX {
font-size: 4.1025641026vw;
}
}
.aptitude__inner .aptitude__character .character--texture {
width: 100%;
z-index: 99;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--texture {
position: absolute;
bottom: 0;
right: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--texture {
position: relative;
}
}
.aptitude__inner .aptitude__character .character--texture iframe {
width: 100%;
position: relative;
z-index: 99;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--texture iframe {
height: min(35.9375vw, 460px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--texture iframe {
height: 58.9743589744vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item {
position: absolute;
z-index: 1;
opacity: 1;
bottom: 10%;
}
.aptitude__inner .aptitude__character .character--animation .character-item:nth-child(odd) {
transform: translateX(-50%) rotate(30deg);
left: -100%;
}
.aptitude__inner .aptitude__character .character--animation .character-item:nth-child(odd).active {
animation: character-item-animation-type-01 3s ease;
}
.aptitude__inner .aptitude__character .character--animation .character-item:nth-child(even) {
transform: translateX(50%) rotate(-30deg);
right: -100%;
}
.aptitude__inner .aptitude__character .character--animation .character-item:nth-child(even).active {
animation: character-item-animation-type-02 3s ease;
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-01 {
background-image: url("../img/aptitude-characters/character-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 1203/885;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-01 {
width: clamp(250px, 23.4375vw, 450px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-01 {
width: 51.2820512821vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-02 {
background-image: url("../img/aptitude-characters/character-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 776/1229;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-02 {
width: clamp(160px, 12.5vw, 225px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-02 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-03 {
background-image: url("../img/aptitude-characters/character-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 842/1252;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-03 {
width: clamp(160px, 12.5vw, 225px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-03 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-04 {
background-image: url("../img/aptitude-characters/character-04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 795/839;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-04 {
width: clamp(160px, 12.5vw, 225px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-04 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-05 {
background-image: url("../img/aptitude-characters/character-05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 716/858;
opacity: 1;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-05 {
width: clamp(160px, 12.5vw, 225px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-05 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-06 {
background-image: url("../img/aptitude-characters/character-06.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 716/858;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-06 {
width: clamp(160px, 12.5vw, 225px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-06 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-07 {
background-image: url("../img/aptitude-characters/character-07.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 726/527;
bottom: 0%;
transform: translateX(50%) rotate(0deg);
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-07 {
width: clamp(140px, 12.5vw, 225px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-07 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-07.active {
animation: character-item-animation-type-03 3s ease;
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-08 {
background-image: url("../img/aptitude-characters/character-08.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 280/304;
bottom: 0%;
transform: translateX(-50%) rotate(0deg);
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-08 {
width: clamp(70px, 6.25vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-08 {
width: 20.5128205128vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-09 {
background-image: url("../img/aptitude-characters/character-09.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 817/998;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-09 {
width: clamp(200px, 19.53125vw, 300px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-09 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-10 {
background-image: url("../img/aptitude-characters/character-10.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 817/998;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-10 {
width: clamp(200px, 19.53125vw, 300px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-10 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-11 {
background-image: url("../img/aptitude-characters/character-11.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 817/998;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-11 {
width: clamp(200px, 19.53125vw, 300px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-11 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-12 {
background-image: url("../img/aptitude-characters/character-12.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 817/998;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-12 {
width: clamp(200px, 19.53125vw, 300px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-12 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-13 {
background-image: url("../img/aptitude-characters/character-13.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 987/979;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-13 {
width: clamp(200px, 19.53125vw, 300px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-13 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-14 {
background-image: url("../img/aptitude-characters/character-14.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 920/891;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-14 {
width: clamp(200px, 19.53125vw, 300px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-14 {
width: 33.3333333333vw;
}
}
.aptitude__inner .aptitude__character .character--animation .character-item.item-15 {
background-image: url("../img/aptitude-characters/character-15.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 817/998;
}
@media screen and (min-width: 768px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-15 {
width: clamp(150px, 15.625vw, 250px);
}
}
@media screen and (max-width: 767px) {
.aptitude__inner .aptitude__character .character--animation .character-item.item-15 {
width: 33.3333333333vw;
}
}
@keyframes character-item-animation-type-01 {
0%, 100% {
opacity: 0;
}
20%, 80% {
left: 0%;
opacity: 1;
}
50% {
left: 0%;
opacity: 1;
}
}
@keyframes character-item-animation-type-02 {
0%, 100% {
opacity: 0;
}
20%, 80% {
right: 0%;
opacity: 1;
}
50% {
right: 0%;
opacity: 1;
}
}
@keyframes character-item-animation-type-03 {
0%, 100% {
opacity: 0;
}
20%, 80% {
left: -22%;
opacity: 1;
}
50% {
left: -22%;
opacity: 1;
}
}
@media screen and (max-height: 1000px) and (min-height: 0px) and (min-width: 1000px) {
.aptitude__inner .aptitude__character .contents--inner {
overflow-y: scroll;
}
}
@media screen and (max-height: 1000px) and (min-height: 0px) and (min-width: 1000px) and (min-width: 768px) {
.aptitude__inner .aptitude__character .contents--inner {
height: 95%;
}
}
@media screen and (max-height: 1000px) and (min-height: 0px) and (min-width: 1000px) and (max-width: 767px) {
.aptitude__inner .aptitude__character .contents--inner {
max-height: 80vh;
}
}
@media screen and (max-height: 1000px) and (min-height: 0px) and (min-width: 1000px) {
.aptitude__inner .aptitude__character .character--message {
bottom: unset;
top: 0;
}
.aptitude__inner .aptitude__character .character--message--inner {
height: clamp(120px, 9.375vw, 120px);
overflow-y: scroll;
}
.aptitude__inner .aptitude__character .character--texture iframe {
height: min(35.9375vw, 460px);
}
}
/* -----------------------
aptitude-choice
----------------------- */
.aptitude-choice {
background-position: center bottom;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.aptitude-choice {
background-image: url("../img/aptitude-choice-BK.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
min-height: 700px;
}
}
@media screen and (min-width: 1500px) {
.aptitude-choice {
min-height: 1000px;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice {
min-height: 100vh;
padding: 12.8205128205vw 5.1282051282vw;
}
}
.aptitude-choice::before {
content: "";
background-image: url("../img/aptitude-choice-BK.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95.625%;
max-width: 1800px;
height: clamp(640px, 91.4285714286%, 700px);
}
}
.aptitude-choice__inner .choice--area {
display: flex;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area {
gap: clamp(18px, 1.875vw, 30px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area {
flex-direction: column;
gap: 2.5641025641vw;
margin-bottom: 12.8205128205vw;
}
}
.aptitude-choice__inner .choice--area .choice--item {
position: relative;
filter: drop-shadow(0px 3.734px 14.003px rgba(0, 0, 0, 0.25));
cursor: pointer;
transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item {
width: clamp(350px, 37.96875vw, 550px);
height: clamp(200px, 23.359375vw, 350px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item {
aspect-ratio: 486/299;
width: 70%;
}
}
.aptitude-choice__inner .choice--area .choice--item:hover {
transform: scale(1.05);
}
.aptitude-choice__inner .choice--area .choice--item.not-active {
filter: drop-shadow(0px 3.734px 14.003px rgba(0, 0, 0, 0.25)) brightness(70%);
}
.aptitude-choice__inner .choice--area .choice--item.active {
transform: scale(1.1);
}
.aptitude-choice__inner .choice--area .choice--item.active .choice--item--img .icon-star {
display: block;
}
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer {
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) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer {
margin-top: clamp(10px, 4.0625vw, 60px);
}
}
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer::before {
content: "";
display: block;
aspect-ratio: 103/83;
filter: drop-shadow(0px 3.734px 9.335px rgba(0, 0, 0, 0.25));
position: absolute;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer::before {
width: clamp(80px, 9.375vw, 130px);
bottom: -15%;
right: -10%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer::before {
width: 30%;
bottom: -50%;
left: 5%;
}
}
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer::after {
content: "";
display: block;
aspect-ratio: 41/41;
filter: drop-shadow(0px 3.734px 9.335px rgba(0, 0, 0, 0.25));
position: absolute;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer::after {
width: clamp(30px, 3.125vw, 45px);
bottom: -18%;
right: -25%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--engineer::after {
width: 20%;
bottom: -100%;
left: 15%;
}
}
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer {
margin-left: auto;
}
}
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer::before {
content: "";
display: block;
aspect-ratio: 103/83;
filter: drop-shadow(0px 3.734px 9.335px rgba(0, 0, 0, 0.25));
position: absolute;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer::before {
width: clamp(60px, 6.25vw, 100px);
bottom: -23%;
left: 35%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer::before {
width: 20%;
bottom: -30%;
right: 15%;
}
}
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer::after {
content: "";
display: block;
aspect-ratio: 41/41;
filter: drop-shadow(0px 3.734px 9.335px rgba(0, 0, 0, 0.25));
position: absolute;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer::after {
width: clamp(22px, 2.265625vw, 35px);
bottom: -35%;
left: 50%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item.choice--item--designer::after {
width: 10%;
bottom: -50%;
right: 33%;
}
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--title {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 15%;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--title {
z-index: 2;
}
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--title .TL {
width: clamp(120px, 23.90625vw, 350px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--title .TL {
width: 100%;
}
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--title .TL img {
width: 100%;
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img {
aspect-ratio: 236.186/156.835;
position: absolute;
z-index: 1;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img {
width: 48.5979423868%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img {
width: 40%;
}
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer {
background-image: url("../img/aptitude-choice-img-engineer.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer {
bottom: 7.3333333333%;
left: 14.1975308642%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer {
bottom: 10%;
left: 15%;
}
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer .icon-star {
top: 30%;
right: -15%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer .icon-star {
top: 0%;
right: -45%;
}
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer .icon-star::before {
top: 0;
right: 0;
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-engineer .icon-star::after {
bottom: 0;
left: 0;
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer {
background-image: url("../img/aptitude-choice-img-designer.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer {
bottom: 6.3333333333%;
right: 10.2880658436%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer {
bottom: 10%;
right: 15%;
}
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer .icon-star {
top: 30%;
left: -15%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer .icon-star {
top: 0%;
left: -45%;
}
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer .icon-star::before {
bottom: 0;
left: 0;
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img.img-designer .icon-star::after {
top: 0;
right: 0;
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img .icon-star {
position: absolute;
aspect-ratio: 51/57;
display: none;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img .icon-star {
width: clamp(40px, 3.984375vw, 57px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .choice--area .choice--item .choice--item--img .icon-star {
width: 45%;
}
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img .icon-star::before, .aptitude-choice__inner .choice--area .choice--item .choice--item--img .icon-star::after {
content: "";
display: block;
aspect-ratio: 25/35;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 43.8596491228%;
position: absolute;
}
.aptitude-choice__inner .choice--area .choice--item .choice--item--img .icon-star::after {
width: 35.0877192982%;
}
.aptitude-choice__inner .character--area {
z-index: 1;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .character--area {
display: flex;
flex-direction: column-reverse;
gap: 2.5641025641vw;
}
}
.aptitude-choice__inner .character--area .character--message {
border-radius: 30px;
background: #FFF;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--message {
width: clamp(300px, 54.6875vw, 1000px);
height: clamp(100px, 14.453125vw, 200px);
padding-left: clamp(40px, 4.921875vw, 80px);
padding-right: clamp(40px, 4.921875vw, 80px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .character--area .character--message {
width: 100%;
padding: 5.1282051282vw;
}
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--message.choice-engineer {
padding-right: clamp(100px, 15.625vw, 200px);
}
}
.aptitude-choice__inner .character--area .character--message.choice-engineer .character--message--inner .TX.no-choice {
display: none;
}
.aptitude-choice__inner .character--area .character--message.choice-engineer .character--message--inner .TX.TX-engineer {
display: block;
}
.aptitude-choice__inner .character--area .character--message.choice-engineer .character--message--inner .TX.TX-designer {
display: none;
}
.aptitude-choice__inner .character--area .character--message.choice-engineer .btn {
background-color: #64C4C6;
}
.aptitude-choice__inner .character--area .character--message.choice-engineer .btn.engineer-btn {
display: block;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--message.choice-designer {
padding-right: clamp(100px, 15.625vw, 200px);
}
}
.aptitude-choice__inner .character--area .character--message.choice-designer .character--message--inner .TX.no-choice {
display: none;
}
.aptitude-choice__inner .character--area .character--message.choice-designer .character--message--inner .TX.TX-engineer {
display: none;
}
.aptitude-choice__inner .character--area .character--message.choice-designer .character--message--inner .TX.TX-designer {
display: block;
}
.aptitude-choice__inner .character--area .character--message.choice-designer .btn {
background-color: #e58e8e;
}
.aptitude-choice__inner .character--area .character--message.choice-designer .btn.designer-btn {
display: block;
}
.aptitude-choice__inner .character--area .character--message .character--message--inner .TX {
color: #646464;
font-weight: 700;
line-height: 175%;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--message .character--message--inner .TX {
font-size: clamp(12px, 1.5625vw, 24px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .character--area .character--message .character--message--inner .TX {
font-size: 4.1025641026vw;
}
}
.aptitude-choice__inner .character--area .character--message .character--message--inner .TX.TX-engineer {
display: none;
}
.aptitude-choice__inner .character--area .character--message .character--message--inner .TX.TX-designer {
display: none;
}
.aptitude-choice__inner .character--area .character--message .btn {
display: block;
border-radius: 50%;
aspect-ratio: 1/1;
display: none;
animation: character-message-btn 1s ease infinite;
}
@keyframes character-message-btn {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.aptitude-choice__inner .character--area .character--message .btn:hover .btn-arrow {
animation: character-message-btn-arrow 1s ease infinite;
}
@keyframes character-message-btn-arrow {
0% {
left: 20%;
}
100% {
left: 80%;
}
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--message .btn {
right: clamp(30px, 3.671875vw, 60px);
width: clamp(50px, 4.921875vw, 80px);
position: absolute;
bottom: 15%;
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .character--area .character--message .btn {
width: 10.2564102564vw;
margin: 5.1282051282vw 0 0 auto;
}
}
.aptitude-choice__inner .character--area .character--message .btn .btn-arrow {
aspect-ratio: 34/31;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--texture {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
}
}
.aptitude-choice__inner .character--area .character--texture .img {
aspect-ratio: 507/563;
background-image: url("../img/character-2.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-choice__inner .character--area .character--texture .img {
width: clamp(200px, 39.609375vw, 700px);
}
}
@media screen and (max-width: 767px) {
.aptitude-choice__inner .character--area .character--texture .img {
width: 45%;
margin: 0 auto;
}
}
/* -----------------------
aptitude-result
----------------------- */
.aptitude-result {
background-image: url("../img/aptitude-bk.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.aptitude-result {
height: 100vh;
min-height: 700px;
}
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.aptitude-result {
min-height: 1000px;
}
}
@media screen and (min-width: 1500px) {
.aptitude-result {
min-height: 1000px;
}
}
@media screen and (max-width: 767px) {
.aptitude-result {
padding: 12.8205128205vw 5.1282051282vw;
}
}
.aptitude-result__inner {
width: 100%;
position: relative;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner {
height: 100%;
}
}
.aptitude-result__inner .aptitude-result__container {
background: #CFC6B6;
box-shadow: 0px 4px 8px 0px #EEE4D3 inset;
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container {
border-radius: 0 10px 10px 0;
width: 75.625%;
height: 100%;
padding: min(2.96875vw, 38px) min(3.359375vw, 43px) min(1.71875vw, 22px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container {
border-radius: 10px;
padding: 9.7435897436vw 8.9743589744vw 76.9230769231vw 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item {
position: relative;
display: none;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item {
width: 100%;
height: 100%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item.active {
display: block;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book {
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
border-radius: 5px 0 5px 5px;
background: #FFF;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book {
width: 60%;
min-width: 550px;
height: 100%;
padding: min(1.171875vw, 15px) min(1.09375vw, 14px) min(1.40625vw, 18px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book {
padding: 3.8461538462vw 2.5641025641vw 4.6153846154vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book--joint {
position: absolute;
top: 0;
left: 100%;
width: 10%;
background: #FFF;
border-radius: 0 5px 5px 0;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book--joint {
height: min(31.25vw, 400px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book--joint {
height: 51.2820512821vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book--joint::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
transform: translate(0%, 100%);
width: 10px;
aspect-ratio: 1/1;
border-radius: 50%;
box-shadow: -5px -5px 0px #FFF;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book--joint .joint--hole {
width: 30%;
aspect-ratio: 1/1;
border-radius: 50%;
background: #CFC6B6;
box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, 0.15) inset;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner {
height: 100%;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner {
gap: 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title {
position: relative;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title {
padding-left: min(12.5vw, 160px);
margin-bottom: min(1.015625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title {
padding-left: 15.3846153846vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .book--pict {
position: absolute;
z-index: 3;
aspect-ratio: 171/116;
background-color: #F4F6F8;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 25px 24px 0 25px;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .book--pict {
width: clamp(100px, min(13.359375vw, 171px), 200px);
padding: min(0.703125vw, 9px);
transform: translate(-20%, -50%);
top: 20%;
left: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .book--pict {
width: 25.641025641vw;
padding: 2.3076923077vw;
transform: translate(-45%, -50%);
top: 20%;
left: 0;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .book--pict .book--pict--inner {
background-color: #F4F6F8;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
border-radius: 25px 24px 0 25px;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .TL {
font-weight: 900;
line-height: 1.5;
text-wrap: nowrap;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .TL {
font-size: min(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--title .TL {
font-size: 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type {
border-radius: 14px;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type {
flex-shrink: 0;
padding: clamp(14px, 1.875vw, 30px) clamp(20px, 2.421875vw, 50px) clamp(14px, 1.328125vw, 30px) clamp(14px, 1.015625vw, 20px);
margin-bottom: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type {
padding: 5.1282051282vw 3.3333333333vw 9.4871794872vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner {
gap: min(2.890625vw, 37px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner {
flex-direction: column;
gap: 12.8205128205vw;
}
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents {
width: 54%;
flex-shrink: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text {
margin-bottom: min(1.5625vw, 20px);
padding-inline: min(0.625vw, 8px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text {
margin-bottom: 5.1282051282vw;
padding-inline: 2.0512820513vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border {
color: #646464;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
background-repeat: repeat-x;
background-position: left bottom;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border {
line-height: 300%;
background-image: linear-gradient(to right, #646464 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
background-size: clamp(8px, 0.3125vw, 4px) clamp(2px, 0.078125vw, 1px);
font-size: clamp(11px, 0.859375vw, 25px);
padding-bottom: min(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border {
line-height: 300%;
background-image: linear-gradient(to right, #646464 0.5128205128vw, transparent 0.5128205128vw);
background-size: 1.0256410256vw 0.2564102564vw;
font-size: 3.5897435897vw;
padding-bottom: 2.5641025641vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
line-height: 1;
font-weight: 700;
background: #F4F6F8;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
font-size: clamp(11px, 1.171875vw, 35px);
padding: min(0.234375vw, 3px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.2);
font-size: 4.6153846154vw;
padding: 0.7692307692vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items {
gap: min(0.9375vw, 12px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items {
flex-direction: column;
gap: 3.0769230769vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item {
aspect-ratio: 1;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item {
width: calc(33.3333333333% - min(0.9375vw, 12px) * 2 / 3);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item {
width: 50%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TL {
text-wrap: nowrap;
text-align: center;
color: #646464;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 190%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TL {
font-size: clamp(11px, 0.859375vw, 18px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TL {
font-size: 4.6153846154vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
text-wrap: nowrap;
text-align: center;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1.5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
font-size: clamp(16px, 1.25vw, 26px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
font-size: 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph {
aspect-ratio: 141/133;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX {
color: #646464;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1;
position: absolute;
text-wrap: nowrap;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX {
font-size: clamp(10px, 0.78125vw, 18px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX {
font-size: 3.0769230769vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX:nth-child(1) {
top: 0;
left: 50%;
transform: translate(-50%, -100%);
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX:nth-child(2) {
top: 45%;
right: 0;
transform: translate(90%, 0%);
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX:nth-child(3) {
bottom: 0%;
right: 0%;
transform: translate(-50%, 150%);
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX:nth-child(4) {
bottom: 0%;
left: 0%;
transform: translate(50%, 150%);
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--text .TX:nth-child(5) {
top: 45%;
left: 0;
transform: translate(-90%, 0%);
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
aspect-ratio: 147/133;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents {
border-radius: 10px;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents {
padding: min(1.953125vw, 25px) min(2.5vw, 32px) min(0.78125vw, 10px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents {
padding: 5.1282051282vw 2.5641025641vw 9.4871794872vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
transform: translate(-20%, -100%);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
aspect-ratio: 21/38;
}
@keyframes aptitude-result-book-contents-arrow {
0% {
transform: translate(-20%, -300%);
}
100% {
transform: translate(-20%, -100%);
}
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents::before {
width: min(1.640625vw, 21px);
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title {
width: fit-content;
position: relative;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title {
margin-bottom: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title {
margin: 0 auto 3.8461538462vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title::before {
content: "";
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
left: 0;
transform: translate(-100%, -20%);
aspect-ratio: 12/20;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title::before {
width: clamp(12px, 0.9375vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title::before {
width: 3.0769230769vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title::after {
content: "";
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom: 0;
right: 0;
transform: translate(150%, -10%);
aspect-ratio: 14/15;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title::after {
width: clamp(14px, 1.09375vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title::after {
width: 3.5897435897vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title .TL {
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1.5;
position: relative;
display: block;
width: fit-content;
z-index: 2;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title .TL {
font-size: clamp(16px, 1.875vw, 30px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title .TL {
font-size: 6.1538461538vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--title .TL::before {
content: attr(data-text);
-webkit-text-stroke-width: 8px;
-webkit-text-stroke-color: #F4F6F8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: -1;
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--inner .TX-border {
color: #646464;
font-family: fot-tsukuardgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 200%;
background-repeat: repeat-x;
background-position: left bottom;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--inner .TX-border {
background-size: clamp(8px, 0.3125vw, 4px) clamp(2px, 0.078125vw, 1px);
font-size: clamp(13px, 1.015625vw, 20px);
padding-bottom: min(0.46875vw, 6px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--inner .TX-border {
background-size: 1.0256410256vw 0.2564102564vw;
font-size: 4.1025641026vw;
padding-bottom: 1.5384615385vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .profile_book .profile_book--inner .book--contents--inner .TX-border .TX-color {
font-weight: 700;
}
.aptitude-result__inner .aptitude-result__container .result--item .paper {
aspect-ratio: 672/466.473;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
transform: rotate(3.054deg);
position: absolute;
z-index: 1;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .paper {
width: min(52.5vw, 672px);
top: min(10.9375vw, 140px);
right: 7.8125vw;
}
}
@media screen and (max-width: 1250px) and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .paper {
right: 0vw;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .paper {
width: 76.9230769231vw;
top: 15.3846153846vw;
right: -8.9743589744vw;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .paper .paper--mark {
position: absolute;
width: 20%;
aspect-ratio: 1/1;
background-image: url("../img/aptitude-result-paper-mark.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .paper .paper--mark {
bottom: 10%;
right: 15%;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .paper .paper--mark {
bottom: 5%;
right: 1%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .pict {
position: absolute;
z-index: 3;
aspect-ratio: 242/309;
background-color: #FFF;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
transform: rotate(5.905deg);
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .pict {
width: clamp(100px, min(18.90625vw, 242px), 300px);
padding: min(0.703125vw, 9px);
top: 0;
right: min(3.125vw, 40px);
}
}
@media screen and (max-width: 1250px) and (min-width: 1100px) {
.aptitude-result__inner .aptitude-result__container .result--item .pict {
width: min(12.5vw, 160px);
}
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item .pict {
top: unset;
bottom: 10%;
right: -5%;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item .pict {
width: 80%;
padding: 2.3076923077vw;
top: unset;
top: 100%;
left: 50%;
transform: translate(-50%, 0) rotate(5.905deg);
z-index: 1;
}
}
.aptitude-result__inner .aptitude-result__container .result--item .pict .pict--inner {
background-color: #F1F1F1;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #8DC47B;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--title .TL {
color: #8DC47B;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type {
background: rgba(141, 196, 123, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #679B56;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #679B56;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/20.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents {
background: rgba(141, 196, 123, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents::before {
width: min(1.640625vw, 21px);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents--title .TL {
color: #679B56;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #679B56 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #679B56 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #679B56;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .paper {
background: #8DC47B;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(1) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/Tanuki.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
width: 140%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #EE8E7E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--title .TL {
color: #EE8E7E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type {
background: rgba(238, 142, 126, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #EE8E7E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #EE8E7E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 50.627/22.032;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(50.627px, 3.955234375vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents {
background: rgba(238, 142, 126, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents--title .TL {
color: #EE8E7E;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #EE8E7E clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #EE8E7E 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #EE8E7E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .paper {
background: #EE8E7E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(2) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/Hashikamo.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 351/396;
position: absolute;
top: 50%;
left: 53%;
transform: translate(-50%, -50%);
width: 103%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #6D945E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 153/98;
width: 90%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--title .TL {
color: #6D945E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type {
background: rgba(109, 148, 94, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #6D945E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #6D945E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/23.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents {
background: rgba(109, 148, 94, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents--title .TL {
color: #6D945E;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #6D945E clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #6D945E 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #6D945E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .paper {
background: #6D945E;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(3) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/oinu.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 367/429;
position: absolute;
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
width: 101%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #EC9A4D;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--title .TL {
color: #EC9A4D;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type {
background: rgba(236, 154, 77, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #EC9A4D;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #EC9A4D;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/20.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(60px, 4.6875vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents {
background: rgba(236, 154, 77, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents--title .TL {
color: #EC9A4D;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #EC9A4D clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #EC9A4D 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #EC9A4D;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .paper {
background: #EC9A4D;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(4) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/usazou.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #DDCB72;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--title .TL {
color: #BDA948;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type {
background: rgba(231, 216, 138, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #BDA948;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #BDA948;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/20.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents {
background: rgba(231, 216, 138, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents--title .TL {
color: #BDA948;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #DDCB72 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #DDCB72 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #BDA948;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .paper {
background: #DDCB72;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(5) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/hashikuro.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #F1CDCD;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--title .TL {
color: #E6ABA1;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type {
background: rgba(241, 205, 205, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #E6ABA1;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #E6ABA1;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/30;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents {
background: rgba(241, 205, 205, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents--title .TL {
color: #E6ABA1;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #F1CDCD clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #F1CDCD 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #E6ABA1;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .paper {
background: #F1CDCD;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(6) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/usapo.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #7BC4C0;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--title .TL {
color: #7BC4C0;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type {
background: rgba(123, 196, 192, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #7BC4C0;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #7BC4C0;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/20.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents {
background: rgba(123, 196, 192, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents--title .TL {
color: #7BC4C0;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #7BC4C0 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #7BC4C0 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #7BC4C0;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .paper {
background: #7BC4C0;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(7) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/guruneko.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #CD82BE;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--title .TL {
color: #CD82BE;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type {
background: rgba(205, 130, 190, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #CD82BE;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #CD82BE;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/23.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents {
background: rgba(205, 130, 190, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents--title .TL {
color: #CD82BE;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #CD82BE clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #CD82BE 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #CD82BE;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .paper {
background: #CD82BE;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(8) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/tareusa.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #EB7A98;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--title .TL {
color: #EB7A98;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type {
background: rgba(235, 122, 152, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #EB7A98;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #EB7A98;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 72/21;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(72px, 5.625vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents {
background: rgba(235, 122, 152, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents--title .TL {
color: #EB7A98;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #EB7A98 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #EB7A98 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #EB7A98;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .paper {
background: #EB7A98;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(9) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/hituzi.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #E9B84F;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--title .TL {
color: #E9B84F;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type {
background: rgba(233, 184, 79, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #E9B84F;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #E9B84F;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/20.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents {
background: rgba(233, 184, 79, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents--title .TL {
color: #E9B84F;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #E9B84F clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #E9B84F 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #E9B84F;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .paper {
background: #E9B84F;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(10) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/tsukikuma.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 125%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #D86F6A;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--title .TL {
color: #D86F6A;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type {
background: rgba(216, 111, 106, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #D86F6A;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #D86F6A;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 69/16;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(69px, 5.390625vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents {
background: rgba(216, 111, 106, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents--title .TL {
color: #D86F6A;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #D86F6A clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #D86F6A 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #D86F6A;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .paper {
background: #D86F6A;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(11) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/chatora.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 53%;
transform: translate(-50%, -50%);
width: 140%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #A192C5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--title .TL {
color: #A192C5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type {
background: rgba(161, 146, 197, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #A192C5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #A192C5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 70/16.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(70px, 5.46875vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents {
background: rgba(161, 146, 197, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents--title .TL {
color: #A192C5;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #A192C5 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #A192C5 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #A192C5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .paper {
background: #A192C5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(12) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/haitora.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #73C8DA;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--title .TL {
color: #73C8DA;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type {
background: rgba(115, 200, 218, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #73C8DA;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #73C8DA;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 57/20.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents {
background: rgba(115, 200, 218, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents--title .TL {
color: #73C8DA;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #73C8DA clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #73C8DA 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #73C8DA;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .paper {
background: #73C8DA;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(13) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/kuroneko.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #A0DF69;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--title .TL {
color: #A0DF69;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type {
background: rgba(160, 223, 105, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #A0DF69;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #A0DF69;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 45/24.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(57px, 4.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents {
background: rgba(160, 223, 105, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents--title .TL {
color: #A0DF69;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #A0DF69 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #A0DF69 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #A0DF69;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .paper {
background: #A0DF69;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(14) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/kappa.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 38%;
transform: translate(-50%, -50%);
width: 140%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #698FA5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--title .book--pict .book--pict--inner .book--pict--img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--title .TL {
color: #698FA5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type {
background: rgba(105, 143, 165, 0.1);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #698FA5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #698FA5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
aspect-ratio: 46/17.332;
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) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: clamp(51px, 3.984375vw, 100px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .img-TX {
width: 80%;
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--type .book--type--inner .book--type--graph .graph--pict {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents {
background: rgba(105, 143, 165, 0.3);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents--title::before {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents--title::after {
background-image: url('data:image/svg+xml;utf-8,');
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents--title .TL {
color: #698FA5;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #698FA5 clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #698FA5 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #698FA5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .paper {
background: #698FA5;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(15) .pict .pict--inner .pict--img {
background-image: url("../img/aptitude-result-characters/yagisan.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 436/397;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 135%;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--joint .joint--hole:nth-child(n+3) {
background: #bababa;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--title .TL {
color: #bababa;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--type {
background: rgba(186, 186, 186, 0.062745098);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--type .book--type--inner .book--type--contents .text .TX-border .TX-BK {
color: #bababa;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--type .book--type--inner .book--type--contents .items .item .TX {
color: #bababa;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--contents {
background: rgba(186, 186, 186, 0.1882352941);
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--contents--title .TL {
color: #bababa;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #bababa clamp(4px, 0.15625vw, 2px), transparent clamp(4px, 0.15625vw, 2px));
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--contents--inner .TX-border {
background-image: linear-gradient(to right, #bababa 0.5128205128vw, transparent 0.5128205128vw);
}
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .profile_book--inner .book--contents--inner .TX-border .TX-color {
color: #bababa;
}
.aptitude-result__inner .aptitude-result__container .result--item:nth-child(16) .paper {
background: #bababa;
}
.aptitude-result__inner .aptitude-result__btns {
position: absolute;
display: flex;
justify-content: space-between;
z-index: 3;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__btns {
top: min(1.5625vw, 25px);
right: min(1.5625vw, 25px);
gap: min(1.5625vw, 25px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__btns {
top: -10.2564102564vw;
right: -2.5641025641vw;
gap: 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__btns .btn {
border-radius: 10px;
background: #F38549;
box-shadow: -4px -4px 8px 0px rgba(0, 0, 0, 0.15) inset, 4px 4px 8px 0px rgba(247, 229, 229, 0.25) inset;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__btns .btn {
padding: min(0.78125vw, 10px) min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__btns .btn {
padding: 2.5641025641vw 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__btns .btn:nth-child(2) {
background: #62C7D5;
}
.aptitude-result__inner .aptitude-result__btns .btn .TX {
font-weight: 700;
color: #FFF;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__btns .btn .TX {
font-size: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__btns .btn .TX {
font-size: 4.1025641026vw;
}
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__character {
position: absolute;
z-index: 2;
top: 0;
right: 0;
transform: translateX(20%);
width: clamp(600px, 50.78125vw, 700px);
height: 100%;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__character {
margin-top: 12.8205128205vw;
}
}
.aptitude-result__inner .aptitude-result__character .character--message {
border-radius: 30px;
background: #FFF;
margin: 0 auto;
aspect-ratio: 351/222;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__character .character--message {
width: 52%;
padding: min(2.734375vw, 35px) min(1.5625vw, 20px);
position: absolute;
top: 8%;
left: 0;
right: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__character .character--message {
padding: 8.9743589744vw 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__character .character--message .character--message--inner {
overflow-y: scroll;
height: 100%;
}
.aptitude-result__inner .aptitude-result__character .character--message .character--message--inner .TX {
color: #646464;
font-weight: 700;
line-height: 175%;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__character .character--message .character--message--inner .TX {
font-size: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude-result__inner .aptitude-result__character .character--message .character--message--inner .TX {
font-size: 5.1282051282vw;
}
}
.aptitude-result__inner .aptitude-result__character .character--texture {
aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
.aptitude-result__inner .aptitude-result__character .character--texture {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(30%);
width: 100%;
}
}
.aptitude-result__inner .aptitude-result__character .character--texture iframe {
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.aptitude-result__inner {
--padding-top: 50px;
padding-top: var(--padding-top);
}
.aptitude-result__inner .aptitude-result__container {
height: calc(80% - var(--padding-top));
width: 90%;
margin: 0 auto;
border-radius: 10px;
}
.aptitude-result__inner .aptitude-result__character {
position: absolute;
top: unset;
bottom: 0;
right: 0;
transform: translateX(0);
width: 100%;
height: 20%;
}
.aptitude-result__inner .aptitude-result__character .character--message {
margin: unset;
top: 7%;
left: 1.5625vw;
right: unset;
aspect-ratio: 351/100;
}
.aptitude-result__inner .aptitude-result__character .character--message .character--message--inner {
overflow-y: scroll;
height: 100%;
}
.aptitude-result__inner .aptitude-result__character .character--texture {
left: unset;
right: 0;
transform: translateY(30%);
width: clamp(300px, 43.828125vw, 600px);
}
}
/* -----------------------
loading
----------------------- */
.loading__parts {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #C6FBFF 0%, #FFF 100%);
z-index: 2025;
opacity: 0;
transition: opacity 1s ease-in-out;
pointer-events: none;
}
.loading__parts.active {
opacity: 1;
pointer-events: auto;
}
.loading__parts--animations {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
z-index: 3;
}
.loading__parts--animations .animations--character {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
transform: translateY(-30%);
}
@media screen and (max-width: 1000px) and (min-width: 0px) and (min-height: 700px) {
.loading__parts--animations .animations--character {
transform: translateY(-20%);
}
}
@media screen and (max-width: 700px) and (min-width: 0px) and (min-height: 700px) {
.loading__parts--animations .animations--character {
transform: translateY(-10%);
}
}
.loading__parts--animations .animations--character iframe {
width: 100%;
height: 100%;
}
.loading__parts--animations .animations--ground {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
aspect-ratio: 1/1;
border-radius: 50%;
width: 100%;
min-width: 1280px;
background-image: url("../img/loading_ground.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: loading__ground-rotate 15s linear infinite;
z-index: 2;
}
@keyframes loading__ground-rotate {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-360deg);
}
}
.loading__parts--text {
position: absolute;
z-index: 3;
}
@media screen and (min-width: 768px) {
.loading__parts--text {
bottom: 60px;
right: 60px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text {
bottom: 40px;
right: 40px;
}
}
.loading__parts--text .text--wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper {
gap: 10px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper {
gap: 5px;
}
}
.loading__parts--text .text--wrapper .TX {
filter: drop-shadow(0px 3.501px 7.002px rgba(0, 0, 0, 0.25));
}
.loading__parts--text .text--wrapper .TX:nth-child(odd) {
animation: loading__text-odd 1.2s linear infinite;
}
@keyframes loading__text-odd {
0% {
transform: translateY(-10%);
}
50% {
transform: translateY(10%);
}
100% {
transform: translateY(-10%);
}
}
.loading__parts--text .text--wrapper .TX:nth-child(even) {
animation: loading__text-even 1.2s linear infinite;
}
@keyframes loading__text-even {
0% {
transform: translateY(10%);
}
50% {
transform: translateY(-10%);
}
100% {
transform: translateY(10%);
}
}
.loading__parts--text .text--wrapper .TX:nth-child(1) {
aspect-ratio: 44/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -5deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(1) {
width: 44px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(1) {
width: 32px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(2) {
aspect-ratio: 53/53;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 7deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(2) {
width: 53px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(2) {
width: 38px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(3) {
aspect-ratio: 50/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 10deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(3) {
width: 50px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(3) {
width: 35px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(4) {
aspect-ratio: 48/53;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -12deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(4) {
width: 48px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(4) {
width: 33px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(5) {
aspect-ratio: 29/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -5deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(5) {
width: 29px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(5) {
width: 19px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(6) {
aspect-ratio: 47/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 5deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(6) {
width: 47px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(6) {
width: 32px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(7) {
aspect-ratio: 50/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 10deg;
}
@media screen and (min-width: 768px) {
.loading__parts--text .text--wrapper .TX:nth-child(7) {
width: 50px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(7) {
width: 35px;
}
}
.loading__parts--text .text--wrapper .TX:nth-child(8), .loading__parts--text .text--wrapper .TX:nth-child(9), .loading__parts--text .text--wrapper .TX:nth-child(10) {
aspect-ratio: 29/29;
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) {
.loading__parts--text .text--wrapper .TX:nth-child(8), .loading__parts--text .text--wrapper .TX:nth-child(9), .loading__parts--text .text--wrapper .TX:nth-child(10) {
width: 29px;
}
}
@media screen and (max-width: 767px) {
.loading__parts--text .text--wrapper .TX:nth-child(8), .loading__parts--text .text--wrapper .TX:nth-child(9), .loading__parts--text .text--wrapper .TX:nth-child(10) {
width: 14px;
}
}
/* -----------------------
main-menu
----------------------- */
.main-menu {
position: relative;
width: 100%;
--BK: #eff0ee;
--BK-shadow: 0px 3.889px 4.861px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.main-menu {
height: 100vh;
min-height: clamp(525px, 54.6875vw, 875px);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu {
min-height: clamp(900px, 93.75vw, 1500px);
}
}
@media screen and (max-width: 767px) {
.main-menu {
padding: 0 4.1025641026vw 20.5128205128vw;
}
}
.main-menu--BK {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@media screen and (min-width: 768px) {
.main-menu--BK {
background-image: url("../img/main-menu/main-menu-BK_pc.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
@media screen and (max-width: 767px) {
.main-menu--BK {
background-image: url("../img/main-menu/main-menu-BK_sp.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.main-menu--btn_exit a {
position: absolute;
z-index: 3;
position: fixed;
font-weight: bold;
text-decoration: none;
color: #fff;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
user-select: none;
}
@media screen and (min-width: 768px) {
.main-menu--btn_exit a {
top: 40px;
right: 50px;
font-size: 28px;
}
}
@media screen and (max-width: 767px) {
.main-menu--btn_exit a {
top: 15px;
right: 20px;
font-size: 20px;
}
}
.main-menu--btn_exit a:hover {
transform: rotate(90deg);
color: #fff;
}
.main-menu .total_title {
z-index: 3;
background-image: url("../img/main-menu/main-menu_signboard.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 451/120;
}
@media screen and (min-width: 768px) {
.main-menu .total_title {
position: absolute;
left: 50%;
bottom: calc(100% - clamp(67.5px, 7.03125vw, 112.5px));
width: clamp(338.25px, 35.234375vw, 563.75px);
transform: translate(-50%, 0);
}
}
@media screen and (max-width: 767px) {
.main-menu .total_title {
width: 57.6923076923vw;
position: relative;
margin: -3.8461538462vw auto 0;
}
}
.main-menu .total_title .TL {
aspect-ratio: 339/44;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .total_title .TL {
width: clamp(225px, 23.4375vw, 375px);
}
}
@media screen and (max-width: 767px) {
.main-menu .total_title .TL {
width: 65%;
}
}
.main-menu--inner {
z-index: 2;
}
@media screen and (min-width: 768px) {
.main-menu--inner {
width: min(93.75vw, 1500px);
height: 90%;
max-height: clamp(472.5px, 49.21875vw, 787.5px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu--inner {
min-height: clamp(750px, 78.125vw, 1250px);
}
}
@media screen and (max-width: 767px) {
.main-menu--inner {
position: relative;
margin-top: 6.4102564103vw;
display: flex;
flex-direction: column;
gap: 7.6923076923vw;
}
}
.main-menu .menu__item__map {
background: var(--BK);
box-shadow: var(--BK-shadow);
transform: rotate(-2.172deg);
z-index: 9;
display: block;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map {
width: clamp(506.02725px, 52.711171875vw, 843.37875px);
position: absolute;
top: clamp(45px, 4.6875vw, 75px);
left: 0;
padding: clamp(11.25px, 1.171875vw, 18.75px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map {
width: 100%;
padding: 2.5641025641vw;
position: relative;
}
}
.main-menu .menu__item__map::before {
content: "";
position: absolute;
left: 50%;
z-index: 1;
transform: translate(-50%, 0%);
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 71/81;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map::before {
width: clamp(53.25px, 5.546875vw, 88.75px);
bottom: calc(100% - clamp(37.5px, 3.90625vw, 62.5px));
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map::before {
width: 5.1282051282vw;
bottom: calc(100% - 2.5641025641vw);
}
}
.main-menu .menu__item__map__title {
position: absolute;
width: fit-content;
transform: rotate(-2.218deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map__title {
bottom: calc(100% - clamp(15px, 1.5625vw, 25px));
left: clamp(22.5px, 2.34375vw, 37.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map__title {
bottom: calc(100% - 3.8461538462vw);
left: 0vw;
}
}
.main-menu .menu__item__map__title .TL {
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
filter: drop-shadow(0px 4.452px 0px rgba(0, 0, 0, 0.25));
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map__title .TL {
font-size: clamp(35.3505px, 3.68234375vw, 58.9175px);
letter-spacing: clamp(1.41375px, 0.147265625vw, 2.35625px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map__title .TL {
font-size: 7.6923076923vw;
letter-spacing: 0.2051282051vw;
}
}
.main-menu .menu__item__map__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map__title .TL::before {
-webkit-text-stroke: clamp(11.25px, 1.171875vw, 18.75px) #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map__title .TL::before {
-webkit-text-stroke: 2.5641025641vw #eff0ee;
}
}
.main-menu .menu__item__map__img {
background-image: url("../img/main-menu/menu-map.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 645.538/219.716;
width: 100%;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map__text {
margin-top: clamp(8.25px, 0.859375vw, 13.75px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map__text {
margin-top: 2.5641025641vw;
}
}
.main-menu .menu__item__map__text .TX {
color: #6d6d6d;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__map__text .TX {
font-size: clamp(10.93725px, 1.139296875vw, 18.22875px);
letter-spacing: clamp(0.43725px, 0.045546875vw, 0.72875px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__map__text .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.1494871795vw;
}
}
.main-menu .menu__item__map:hover .menu__item__map__title .TL {
transform: scale(1.1);
}
.main-menu .menu__item__ranking {
background: var(--BK);
box-shadow: var(--BK-shadow);
transform: rotate(1.72deg);
z-index: 8;
display: block;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking {
width: clamp(301.5px, 31.40625vw, 502.5px);
position: absolute;
top: clamp(41.25px, 4.296875vw, 68.75px);
right: clamp(52.5px, 5.46875vw, 87.5px);
padding: clamp(11.25px, 1.171875vw, 18.75px) clamp(9px, 0.9375vw, 15px) clamp(11.25px, 1.171875vw, 18.75px);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu .menu__item__ranking {
top: clamp(341.25px, 35.546875vw, 568.75px);
right: unset;
left: clamp(52.5px, 5.46875vw, 87.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking {
width: 90%;
padding: 2.5641025641vw;
position: relative;
}
}
.main-menu .menu__item__ranking::before {
content: "";
position: absolute;
z-index: 1;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 148/61;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking::before {
width: clamp(111px, 11.5625vw, 185px);
right: calc(100% - clamp(90px, 9.375vw, 150px));
bottom: calc(100% - clamp(37.5px, 3.90625vw, 62.5px));
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking::before {
width: 20.5128205128vw;
right: calc(100% - 12.8205128205vw);
bottom: calc(100% - 5.1282051282vw);
}
}
.main-menu .menu__item__ranking::after {
content: "";
position: absolute;
z-index: 1;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 126/63;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking::after {
width: clamp(94.5px, 9.84375vw, 157.5px);
left: calc(100% - clamp(75px, 7.8125vw, 125px));
top: calc(100% - clamp(22.5px, 2.34375vw, 37.5px));
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking::after {
width: 20.5128205128vw;
left: calc(100% - 12.8205128205vw);
top: calc(100% - 5.1282051282vw);
}
}
.main-menu .menu__item__ranking__title {
position: absolute;
width: fit-content;
transform: rotate(2.218deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking__title {
bottom: calc(100% - clamp(15px, 1.5625vw, 25px));
right: clamp(7.5px, 0.78125vw, 12.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking__title {
bottom: calc(100% - 3.8461538462vw);
right: 2.5641025641vw;
}
}
.main-menu .menu__item__ranking__title .TL {
color: #3edf3e;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
filter: drop-shadow(0px 4.452px 0px rgba(0, 0, 0, 0.25));
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking__title .TL {
font-size: clamp(28.5px, 2.96875vw, 47.5px);
letter-spacing: clamp(1.125px, 0.1171875vw, 1.875px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking__title .TL {
font-size: 7.6923076923vw;
letter-spacing: 0.2051282051vw;
}
}
.main-menu .menu__item__ranking__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking__title .TL::before {
-webkit-text-stroke: clamp(7.5px, 0.78125vw, 12.5px) #e3f7c6;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking__title .TL::before {
-webkit-text-stroke: 2.5641025641vw #e3f7c6;
}
}
.main-menu .menu__item__ranking__img {
background-image: url("../img/main-menu/menu-ranking.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center top;
aspect-ratio: 371/142;
width: 100%;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking__text {
margin-top: clamp(2.25px, 0.234375vw, 3.75px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking__text {
margin-top: 2.5641025641vw;
}
}
.main-menu .menu__item__ranking__text .TX {
color: #6d6d6d;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__ranking__text .TX {
font-size: clamp(10.5px, 1.09375vw, 17.5px);
letter-spacing: clamp(0.43725px, 0.045546875vw, 0.72875px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__ranking__text .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.1494871795vw;
}
}
.main-menu .menu__item__ranking:hover .menu__item__ranking__title .TL {
transform: scale(1.1);
}
.main-menu .menu__item__mypage {
background: var(--BK);
box-shadow: var(--BK-shadow);
transform: rotate(1.72deg);
z-index: 8;
display: block;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage {
width: clamp(349.5px, 36.40625vw, 582.5px);
position: absolute;
bottom: clamp(18.75px, 1.953125vw, 31.25px);
left: clamp(30px, 3.125vw, 50px);
padding: clamp(12px, 1.25vw, 20px) clamp(15px, 1.5625vw, 25px) clamp(7.5px, 0.78125vw, 12.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage {
width: 90%;
padding: 2.5641025641vw;
margin-left: auto;
position: relative;
}
}
.main-menu .menu__item__mypage::before {
content: "";
position: absolute;
z-index: 1;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 148/61;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage::before {
width: clamp(111px, 11.5625vw, 185px);
right: calc(100% - clamp(90px, 9.375vw, 150px));
bottom: calc(100% - clamp(37.5px, 3.90625vw, 62.5px));
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage::before {
width: 20.5128205128vw;
right: calc(100% - 12.8205128205vw);
bottom: calc(100% - 5.1282051282vw);
}
}
.main-menu .menu__item__mypage::after {
content: "";
position: absolute;
z-index: 1;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 126/63;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage::after {
width: clamp(94.5px, 9.84375vw, 157.5px);
left: calc(100% - clamp(82.5px, 8.59375vw, 137.5px));
top: calc(100% - clamp(33.75px, 3.515625vw, 56.25px));
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage::after {
width: 20.5128205128vw;
left: calc(100% - 12.8205128205vw);
top: calc(100% - 5.1282051282vw);
}
}
.main-menu .menu__item__mypage__title {
position: absolute;
width: fit-content;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage__title {
top: clamp(97.5px, 10.15625vw, 162.5px);
right: clamp(22.5px, 2.34375vw, 37.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage__title {
top: 20.5128205128vw;
right: 2.5641025641vw;
}
}
.main-menu .menu__item__mypage__title .TL {
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
filter: drop-shadow(0px 4.452px 0px rgba(0, 0, 0, 0.25));
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage__title .TL {
font-size: clamp(29.25px, 3.046875vw, 48.75px);
letter-spacing: clamp(1.125px, 0.1171875vw, 1.875px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage__title .TL {
font-size: 7.6923076923vw;
letter-spacing: 0.2051282051vw;
}
}
.main-menu .menu__item__mypage__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage__title .TL::before {
-webkit-text-stroke: clamp(11.25px, 1.171875vw, 18.75px) #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage__title .TL::before {
-webkit-text-stroke: 2.5641025641vw #eff0ee;
}
}
.main-menu .menu__item__mypage__img {
background-image: url("../img/main-menu/menu-mypage.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center;
aspect-ratio: 428/169;
width: 100%;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage__text {
margin-top: clamp(7.5px, 0.78125vw, 12.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage__text {
margin-top: 2.5641025641vw;
}
}
.main-menu .menu__item__mypage__text .TX {
color: #6d6d6d;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__mypage__text .TX {
font-size: clamp(10.5px, 1.09375vw, 17.5px);
letter-spacing: clamp(0.43725px, 0.045546875vw, 0.72875px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__mypage__text .TX {
font-size: 3.3333333333vw;
letter-spacing: 0.1494871795vw;
}
}
.main-menu .menu__item__mypage:hover .menu__item__mypage__title .TL {
transform: scale(1.1);
}
.main-menu .menu__item__column {
filter: drop-shadow(0.972px 8.75px 8.75px rgba(0, 0, 0, 0.25));
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 7;
display: block;
aspect-ratio: 208/244;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column {
width: clamp(156px, 16.25vw, 260px);
position: absolute;
bottom: clamp(15px, 1.5625vw, 25px);
left: clamp(393.75px, 41.015625vw, 656.25px);
padding: clamp(21px, 2.1875vw, 35px) clamp(7.5px, 0.78125vw, 12.5px) clamp(0px, 0vw, 0px) clamp(15px, 1.5625vw, 25px);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu .menu__item__column {
left: unset;
right: clamp(243.75px, 25.390625vw, 406.25px);
}
}
@media screen and (max-width: 850px) and (min-width: 768px) {
.main-menu .menu__item__column {
left: unset;
right: clamp(150px, 15.625vw, 250px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column {
width: 70%;
padding: 5.1282051282vw 2.5641025641vw 0 5.1282051282vw;
margin: 0 auto;
position: relative;
}
}
.main-menu .menu__item__column::before, .main-menu .menu__item__column::after {
content: "";
position: absolute;
z-index: 1;
aspect-ratio: 1;
background-color: #32995c;
border-radius: 50%;
box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.25) inset;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column::before, .main-menu .menu__item__column::after {
top: clamp(4.5px, 0.46875vw, 7.5px);
left: clamp(10.5px, 1.09375vw, 17.5px);
width: clamp(6.75px, 0.703125vw, 11.25px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column::before, .main-menu .menu__item__column::after {
width: 2.3076923077vw;
top: 1.2820512821vw;
left: 5.1282051282vw;
}
}
.main-menu .menu__item__column::after {
left: unset;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column::after {
right: clamp(4.5px, 0.46875vw, 7.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column::after {
right: 2.5641025641vw;
}
}
.main-menu .menu__item__column__title {
position: absolute;
width: fit-content;
transform: rotate(9deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column__title {
bottom: calc(100% - clamp(30px, 3.125vw, 50px));
right: clamp(9.75px, 1.015625vw, 16.25px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column__title {
bottom: calc(100% - 10.2564102564vw);
right: 2.5641025641vw;
}
}
.main-menu .menu__item__column__title .TL {
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
filter: drop-shadow(0px 4.452px 0px rgba(0, 0, 0, 0.25));
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column__title .TL {
font-size: clamp(26.25px, 2.734375vw, 43.75px);
letter-spacing: clamp(1.05px, 0.109375vw, 1.75px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column__title .TL {
font-size: 7.6923076923vw;
letter-spacing: 0.2051282051vw;
}
}
.main-menu .menu__item__column__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column__title .TL::before {
-webkit-text-stroke: clamp(11.25px, 1.171875vw, 18.75px) #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column__title .TL::before {
-webkit-text-stroke: 2.5641025641vw #eff0ee;
}
}
.main-menu .menu__item__column__img {
background-image: url("../img/main-menu/menu-column.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center;
background-size: 130%;
aspect-ratio: 170/110;
width: 100%;
box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column__text {
margin-top: clamp(7.5px, 0.78125vw, 12.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column__text {
margin-top: 2.5641025641vw;
}
}
.main-menu .menu__item__column__text .TX {
color: #6d6d6d;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__column__text .TX {
font-size: clamp(9px, 0.9375vw, 15px);
letter-spacing: clamp(0.375px, 0.0390625vw, 0.625px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__column__text .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.1282051282vw;
}
}
.main-menu .menu__item__column:hover .menu__item__column__title .TL {
transform: scale(1.1);
}
.main-menu .menu__item__chat {
z-index: 6;
display: block;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: rotate(1.708deg);
aspect-ratio: 228/112;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__chat {
width: clamp(171px, 17.8125vw, 285px);
position: absolute;
bottom: clamp(180px, 18.75vw, 300px);
right: clamp(180px, 18.75vw, 300px);
padding: clamp(27px, 2.8125vw, 45px) clamp(15px, 1.5625vw, 25px) clamp(7.5px, 0.78125vw, 12.5px) clamp(46.5px, 4.84375vw, 77.5px);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu .menu__item__chat {
bottom: clamp(187.5px, 19.53125vw, 312.5px);
right: clamp(0px, 0vw, 0px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__chat {
width: 70%;
padding: 10.2564102564vw 2.5641025641vw 0 15.3846153846vw;
margin: 0 auto;
position: relative;
}
}
.main-menu .menu__item__chat__title {
position: absolute;
width: fit-content;
transform: rotate(-10deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__chat__title {
bottom: calc(100% - clamp(26.25px, 2.734375vw, 43.75px));
left: calc(clamp(22.5px, 2.34375vw, 37.5px) * -1);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__chat__title {
bottom: calc(100% - 7.6923076923vw);
left: 2.5641025641vw;
}
}
.main-menu .menu__item__chat__title .TL {
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
filter: drop-shadow(0px 4.452px 0px rgba(0, 0, 0, 0.25));
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__chat__title .TL {
font-size: clamp(23.25px, 2.421875vw, 38.75px);
letter-spacing: clamp(0.9px, 0.09375vw, 1.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__chat__title .TL {
font-size: 7.6923076923vw;
letter-spacing: 0.2051282051vw;
}
}
.main-menu .menu__item__chat__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__chat__title .TL::before {
-webkit-text-stroke: clamp(11.25px, 1.171875vw, 18.75px) #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__chat__title .TL::before {
-webkit-text-stroke: 2.5641025641vw #eff0ee;
}
}
.main-menu .menu__item__chat__text .TX {
color: #6d6d6d;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__chat__text .TX {
font-size: clamp(9px, 0.9375vw, 15px);
letter-spacing: clamp(0.375px, 0.0390625vw, 0.625px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__chat__text .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.1282051282vw;
}
}
.main-menu .menu__item__chat:hover .menu__item__chat__title .TL {
transform: scale(1.1);
}
.main-menu .menu__item__qa {
z-index: 5;
display: block;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 252/255;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa {
width: clamp(189px, 19.6875vw, 315px);
position: absolute;
bottom: clamp(0px, 0vw, 0px);
right: clamp(135px, 14.0625vw, 225px);
padding: clamp(27px, 2.8125vw, 45px) clamp(15px, 1.5625vw, 25px) clamp(7.5px, 0.78125vw, 12.5px) clamp(46.5px, 4.84375vw, 77.5px);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu .menu__item__qa {
bottom: clamp(266.25px, 27.734375vw, 443.75px);
right: clamp(187.5px, 19.53125vw, 312.5px);
}
}
@media screen and (max-width: 800px) and (min-width: 768px) {
.main-menu .menu__item__qa {
right: clamp(150px, 15.625vw, 250px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa {
position: relative;
width: 80%;
}
}
.main-menu .menu__item__qa__cover {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 237/169;
width: 94%;
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
}
.main-menu .menu__item__qa__title {
position: absolute;
width: fit-content;
transform: rotate(3.889deg);
z-index: 3;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__title {
bottom: clamp(18.75px, 1.953125vw, 31.25px);
left: clamp(0px, 0vw, 0px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__title {
bottom: 8.9743589744vw;
left: 7.6923076923vw;
}
}
.main-menu .menu__item__qa__title .TL {
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
filter: drop-shadow(0px 4.452px 0px rgba(0, 0, 0, 0.25));
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__title .TL {
font-size: clamp(23.25px, 2.421875vw, 38.75px);
letter-spacing: clamp(0.9px, 0.09375vw, 1.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__title .TL {
font-size: 7.6923076923vw;
letter-spacing: 0.2051282051vw;
}
}
.main-menu .menu__item__qa__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__title .TL::before {
-webkit-text-stroke: clamp(11.25px, 1.171875vw, 18.75px) #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__title .TL::before {
-webkit-text-stroke: 2.5641025641vw #eff0ee;
}
}
.main-menu .menu__item__qa__text {
background: #eff0ee;
transform: rotate(-9.893deg);
flex-shrink: 0;
position: absolute;
z-index: 1;
width: 80%;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__text {
min-height: clamp(105.63675px, 11.003828125vw, 176.06125px);
padding: clamp(7.5px, 0.78125vw, 12.5px) clamp(11.25px, 1.171875vw, 18.75px) 0;
bottom: 25%;
right: 9.5%;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__text {
min-height: 46.1538461538vw;
padding: 2.5641025641vw 3.8461538462vw 0;
bottom: 25%;
right: 11%;
}
}
.main-menu .menu__item__qa__text .TX {
color: #6d6d6d;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__text .TX {
font-size: clamp(9px, 0.9375vw, 15px);
letter-spacing: clamp(0.375px, 0.0390625vw, 0.625px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__text .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.1282051282vw;
}
}
.main-menu .menu__item__qa__text__deco .deco {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
aspect-ratio: 57/67;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__text__deco .deco {
width: clamp(42.75px, 4.453125vw, 71.25px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__text__deco .deco {
width: 14.6153846154vw;
}
}
.main-menu .menu__item__qa__text__deco .deco:nth-child(1) {
transform: rotate(-10.172deg);
top: -35%;
left: 10%;
}
.main-menu .menu__item__qa__text__deco .deco:nth-child(2) {
transform: rotate(5deg);
left: 40%;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__qa__text__deco .deco:nth-child(2) {
bottom: 11%;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__qa__text__deco .deco:nth-child(2) {
bottom: 13%;
}
}
.main-menu .menu__item__qa:hover .menu__item__qa__title .TL {
transform: scale(1.1);
}
.main-menu .menu__item__qa:hover .menu__item__qa__text .menu__item__qa__text__deco .deco:nth-child(1) {
animation: rotate-deco 0.5s ease-in-out infinite;
}
.main-menu .menu__item__qa:hover .menu__item__qa__text .menu__item__qa__text__deco .deco:nth-child(2) {
animation: rotate-deco 0.3s 0.3s ease-in-out infinite;
}
@keyframes rotate-deco {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
.main-menu .menu__item__minigame {
z-index: 9;
display: block;
}
@font-face {
font-family: "BestTenDot";
src: url("../font/BestTen-DOT.woff2") format("woff2"), url("../font/BestTen-DOT.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame {
position: absolute;
bottom: clamp(97.5px, 10.15625vw, 162.5px);
right: clamp(15px, 1.5625vw, 25px);
}
}
@media screen and (max-width: 950px) and (min-width: 768px) {
.main-menu .menu__item__minigame {
bottom: unset;
top: clamp(112.5px, 11.71875vw, 187.5px);
right: clamp(37.5px, 3.90625vw, 62.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame {
position: relative;
width: 70%;
margin: 0 7.6923076923vw 0 auto;
}
}
.main-menu .menu__item__minigame__title {
position: absolute;
z-index: 4;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 138/49;
transform: rotate(2.66deg);
filter: drop-shadow(0px 4.299px 4.299px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame__title {
width: clamp(103.5px, 10.78125vw, 172.5px);
top: clamp(7.5px, 0.78125vw, 12.5px);
left: clamp(30px, 3.125vw, 50px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame__title {
width: 46.1538461538vw;
top: 1.2820512821vw;
left: 15.3846153846vw;
}
}
.main-menu .menu__item__minigame__title .TL {
color: #43505f;
font-family: "BestTenDot", sans-serif;
font-weight: 400;
line-height: 1.5;
position: absolute;
z-index: 2;
width: 100%;
text-align: center;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame__title .TL {
font-size: clamp(14.63475px, 1.524453125vw, 24.39125px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame__title .TL {
font-size: 6.4102564103vw;
}
}
.main-menu .menu__item__minigame__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame__title .TL::before {
-webkit-text-stroke: clamp(0.375px, 0.0390625vw, 0.625px) #43505f;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame__title .TL::before {
-webkit-text-stroke: 0.1282051282vw #43505f;
}
}
.main-menu .menu__item__minigame__BK {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 155/239;
transform: rotate(-8.432deg);
position: relative;
z-index: 3;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame__BK {
width: clamp(116.25px, 12.109375vw, 193.75px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame__BK {
width: 100%;
}
}
.main-menu .menu__item__minigame__BK .TX {
color: #5b5b5b;
font-weight: 700;
line-height: 1.5;
position: absolute;
width: 100%;
text-align: center;
left: 3%;
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame__BK .TX {
font-size: clamp(10.18875px, 1.061328125vw, 16.98125px);
letter-spacing: clamp(0.40725px, 0.042421875vw, 0.67875px);
bottom: clamp(22.5px, 2.34375vw, 37.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame__BK .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.1282051282vw;
bottom: 12.8205128205vw;
}
}
.main-menu .menu__item__minigame__strap {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 26/146;
position: absolute;
z-index: 1;
filter: drop-shadow(2px 8px 2px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__minigame__strap {
width: clamp(19.5px, 2.03125vw, 32.5px);
bottom: calc(100% - clamp(15px, 1.5625vw, 25px));
right: clamp(7.5px, 0.78125vw, 12.5px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__minigame__strap {
width: 6.6666666667vw;
bottom: calc(100% - 5.1282051282vw);
right: 2.5641025641vw;
}
}
.main-menu .menu__item__minigame:hover .menu__item__minigame__title {
animation: scale-title 0.5s step-end infinite;
}
@keyframes scale-title {
0%, 100% {
transform: rotate(2.66deg) scale(1);
}
50% {
transform: rotate(2.66deg) scale(1.1);
}
}
.main-menu .menu__item__help {
z-index: 4;
display: block;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 104/83;
filter: drop-shadow(0px 4.8px 6.644px rgba(0, 0, 0, 0.25));
transform: rotate(-2deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__help {
position: absolute;
bottom: clamp(15px, 1.5625vw, 25px);
right: clamp(30px, 3.125vw, 50px);
width: clamp(78px, 8.125vw, 130px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__help {
position: relative;
width: 50%;
margin: 0 auto;
}
}
.main-menu .menu__item__help__inner {
position: absolute;
z-index: 2;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__help__inner {
top: 40%;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__help__inner {
top: 45%;
}
}
.main-menu .menu__item__help__text .TX {
filter: drop-shadow(0px 2.56px 0px rgba(0, 0, 0, 0.25));
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
margin: 0 auto;
transform: rotate(3.889deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__help__text .TX {
font-size: clamp(21.309px, 2.2196875vw, 35.515px);
letter-spacing: clamp(0.852px, 0.08875vw, 1.42px);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__help__text .TX {
font-size: 10.2564102564vw;
letter-spacing: 0.1282051282vw;
}
}
.main-menu .menu__item__help__text .TX::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__help__text .TX::before {
-webkit-text-stroke-width: clamp(5.25px, 0.546875vw, 8.75px);
-webkit-text-stroke-color: #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__help__text .TX::before {
-webkit-text-stroke-width: 1.7948717949vw;
-webkit-text-stroke-color: #eff0ee;
}
}
.main-menu .menu__item__help__title .TL {
filter: drop-shadow(0px 2.56px 0px rgba(0, 0, 0, 0.25));
color: #646464;
font-weight: 900;
line-height: 1.5;
position: relative;
z-index: 2;
width: fit-content;
margin: 0 auto;
text-align: center;
transform: rotate(3.889deg);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__help__title .TL {
font-size: clamp(9.75px, 1.015625vw, 16.25px);
letter-spacing: clamp(0.375px, 0.0390625vw, 0.625px);
margin-top: calc(clamp(3.75px, 0.390625vw, 6.25px) * -1);
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__help__title .TL {
font-size: 5.1282051282vw;
letter-spacing: 0.1282051282vw;
margin-top: -1.2820512821vw;
}
}
.main-menu .menu__item__help__title .TL::before {
content: attr(data-text);
z-index: -1;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .menu__item__help__title .TL::before {
-webkit-text-stroke-width: clamp(5.25px, 0.546875vw, 8.75px);
-webkit-text-stroke-color: #eff0ee;
}
}
@media screen and (max-width: 767px) {
.main-menu .menu__item__help__title .TL::before {
-webkit-text-stroke-width: 1.7948717949vw;
-webkit-text-stroke-color: #eff0ee;
}
}
.main-menu .menu__item__help:hover .menu__item__help__text {
animation: scale-help 0.5s step-end infinite;
transform-origin: center bottom;
}
@keyframes scale-help {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
.main-menu .deco__clover {
position: absolute;
z-index: 9;
}
@media screen and (min-width: 768px) {
.main-menu .deco__clover {
bottom: calc(clamp(22.5px, 2.34375vw, 37.5px) * -1);
left: calc(clamp(30px, 3.125vw, 50px) * -1);
}
}
@media screen and (max-width: 767px) {
.main-menu .deco__clover {
bottom: 12.8205128205vw;
left: -2.5641025641vw;
}
}
.main-menu .deco__clover__leaf {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 112/220;
transform: rotate(180deg);
transform: rotate(-9.183deg);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
.main-menu .deco__clover__leaf {
width: clamp(84px, 8.75vw, 140px);
}
}
@media screen and (max-width: 767px) {
.main-menu .deco__clover__leaf {
width: 28.7179487179vw;
}
}
.main-menu .deco__clover__tape {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 45/30;
transform: rotate(180deg);
transform: rotate(-9.183deg);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
position: absolute;
z-index: 1;
top: 60%;
left: 45%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.main-menu .deco__clover__tape {
width: clamp(33.75px, 3.515625vw, 56.25px);
}
}
@media screen and (max-width: 767px) {
.main-menu .deco__clover__tape {
width: 11.5384615385vw;
}
}
.main-menu--btn_area {
position: absolute;
z-index: 3;
}
@media screen and (min-width: 768px) {
.main-menu--btn_area {
bottom: clamp(15px, 1.5625vw, 25px);
right: clamp(30px, 3.125vw, 50px);
}
}
@media screen and (max-width: 767px) {
.main-menu--btn_area {
bottom: 5.1282051282vw;
right: 10.2564102564vw;
}
}
/* -----------------------
viewing-limit
----------------------- */
.page-viewing-limit {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.page-viewing-limit--content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.page-viewing-limit--content a {
color: #333;
border: 1px solid #333;
padding: 10px 20px;
border-radius: 10px;
}
/* -----------------------
slack-bid
----------------------- */
.slack-bid {
padding: 30px 30px 50px;
}
.slack-bid .ttl {
margin-bottom: 50px;
}
.slack-bid .ttl .TX {
font-weight: 600;
line-height: 1.5;
text-align: center;
}
@media screen and (min-width: 768px) {
.slack-bid .ttl .TX {
font-size: 30px;
}
}
@media screen and (max-width: 767px) {
.slack-bid .ttl .TX {
font-size: 25px;
}
}
.slack-bid .input-area {
margin-top: 100px;
}
.slack-bid .input-area .label {
display: block;
margin: 30px auto 0px;
width: fit-content;
}
.slack-bid .input-area .label-TL {
font-size: 16px;
width: 250px;
display: inline-block;
}
.slack-bid .input-area .label input {
height: 30px;
border: 1px solid #e4e4e4;
}
.slack-bid .input-area .label:first-child {
margin-top: 0;
}
.slack-bid .input-area .textbox {
margin: 100px auto 0px;
max-width: 560px;
}
.slack-bid .input-area .textbox .slack-bid--TL {
font-weight: 600;
font-size: 18px;
}
.slack-bid .input-area .textbox .slack-bid--TX {
font-size: 14px;
margin-top: 15px;
line-height: 140%;
}
.slack-bid .input-area .wpcf7-submit {
border: none;
background-color: #ffa36a;
border-radius: 5px;
padding: 10px 40px;
font-size: 18px;
font-weight: 600;
color: #FFF;
cursor: pointer;
margin: 60px auto 0px;
display: block;
transition: all 0.2s ease;
letter-spacing: 4px;
}
.slack-bid .input-area .wpcf7-submit:hover {
transition: all 0.2s ease;
opacity: 0.8;
}
.slack-bid .contents {
display: flex;
flex-direction: column;
gap: 20px;
}
.slack-bid .contents .item {
display: flex;
flex-direction: column;
gap: 10px;
}
.slack-bid .contents .item.checkbox__area {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
}
.slack-bid .contents .item .item--label .TL {
font-weight: 600;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.slack-bid .contents .item .item--label .TL {
font-size: 20px;
}
}
@media screen and (max-width: 767px) {
.slack-bid .contents .item .item--label .TL {
font-size: 18px;
}
}
.slack-bid .contents .item .item--input .TX {
width: 100%;
resize: none;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
font-size: 16px;
line-height: 1.5;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.slack-bid .contents .item .item--input .TX {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.slack-bid .contents .item .item--input .TX {
font-size: 14px;
}
}
.slack-bid .contents .item .item--checkbox .checkbox {
margin: 0;
}
.slack-bid .contents .item .item--submit .submit--btn {
width: 100%;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
font-size: 16px;
background-color: #fff;
color: #000;
cursor: pointer;
transition: all 0.3s ease;
}
.slack-bid .contents .item .item--submit .submit--btn:hover {
background-color: #000;
color: #fff;
}
@media screen and (min-width: 768px) {
.slack-bid .contents .item .item--submit .submit--btn {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.slack-bid .contents .item .item--submit .submit--btn {
font-size: 14px;
}
}
/* -----------------------
terms
----------------------- */
.terms {
padding: 100px 0;
}
.terms .terms-inner {
background-color: #FFF;
width: min(90%, 900px);
margin: 0 auto;
padding: 60px 50px 80px;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
color: #202020;
font-family: "Kavoon", serif;
font-weight: 400;
font-style: normal;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.terms .terms-inner {
padding-inline: 20px;
}
}
.terms .terms-inner .terms--contents {
display: flex;
flex-direction: column;
gap: 60px;
}
.terms .terms-inner .terms--contents .terms--sec {
display: flex;
flex-direction: column;
gap: 10px;
}
.terms .terms-inner .terms--contents .terms--sec .TL {
font-size: 16px;
font-weight: 700;
}
.terms .terms-inner .terms--contents .terms--sec .TX,
.terms .terms-inner .terms--contents .terms--sec li::marker {
font-size: 14px;
font-weight: 400;
}
.terms .terms-inner .terms--contents .terms--sec ol,
.terms .terms-inner .terms--contents .terms--sec ul {
padding-left: 3em;
}
.terms .terms-inner .terms--contents .terms--sec ol li {
list-style: decimal;
list-style-type: decimal;
}
.terms .terms-inner .terms--contents .terms--sec ul li {
list-style: disc;
list-style-type: disc;
}
.terms .terms-inner .terms--contents .terms--sec .terms--sec--ttl {
display: flex;
flex-direction: column;
gap: 20px;
}
.terms .terms-inner .terms--contents .terms--sec .terms--sec--ttl .TL {
text-align: center;
font-size: 24px;
white-space: pre-wrap;
word-break: keep-all;
}
.terms .terms-inner .terms--contents .terms--sec .terms--sec--txt {
display: flex;
flex-direction: column;
gap: 5px;
}
.terms .terms-inner .terms--contents .terms--sec .terms--sec--txt--contents {
display: flex;
flex-direction: column;
gap: 5px;
}
/* -----------------------
anime Cooperator-2
----------------------- */
.vertical {
animation: vertical 1.5s ease 8s infinite;
}
@keyframes vertical {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(30%);
}
100% {
transform: translateY(0%);
}
}
.pop-late {
opacity: 0;
transform: scale(0.5);
animation: pop 0.5s ease 6s forwards;
}
@keyframes pop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.cloudAnime {
animation: cloudAnime 5s ease 0.5s infinite;
}
@keyframes cloudAnime {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(10%);
}
100% {
transform: translateY(0%);
}
}
.cloudAnime02 {
animation: cloudAnime 7s ease 1s infinite;
}
@keyframes cloudAnime {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(15%);
}
100% {
transform: translateY(0%);
}
}
.zoomIn {
opacity: 0;
}
.zoomIn.show {
animation: zoomInAnime 0.5s ease 0s forwards;
}
@keyframes zoomInAnime {
from {
opacity: 0;
transform: scale(0.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* -----------------------
top-scroll
----------------------- */
.top-btn-box {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 900;
opacity: 1;
transition: opacity 0.5s ease;
pointer-events: auto;
}
@media screen and (min-width: 768px) {
.top-btn-box {
width: clamp(600px, 46.875vw, 780px);
top: 85%;
right: 0%;
display: flex;
gap: clamp(10px, 0.78125vw, 13px);
}
}
@media screen and (max-width: 767px) {
.top-btn-box {
right: 10px;
bottom: 40px;
display: flex;
flex-direction: column;
gap: clamp(10px, 2.5641025641vw, 13px);
}
}
.top-btn-box .btn {
display: flex;
justify-content: center;
align-items: center;
box-shadow: -4px -4px 8px 0px rgba(0, 0, 0, 0.15) inset, 4px 4px 8px 0px rgba(247, 229, 229, 0.25) inset;
}
@media screen and (min-width: 768px) {
.top-btn-box .btn {
width: clamp(250px, 19.53125vw, 325px);
height: clamp(65px, 5.078125vw, 84.5px);
border-radius: clamp(10px, 0.78125vw, 13px);
}
}
@media screen and (max-width: 767px) {
.top-btn-box .btn {
width: clamp(180px, 46.1538461538vw, 234px);
height: clamp(53px, 13.5897435897vw, 68.9px);
border-radius: 5px;
}
}
.top-btn-box .btn.top-btn {
background: #F38549;
}
.top-btn-box .btn.bottom-btn {
background: #62C7D5;
}
.top-btn-box .btn:hover {
animation: poyo 1s ease infinite;
}
.top-btn-box .TX {
color: #FFFFFF;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.top-btn-box .TX {
font-size: clamp(30px, 2.34375vw, 39px);
}
}
@media screen and (max-width: 767px) {
.top-btn-box .TX {
font-size: clamp(20px, 5.1282051282vw, 26px);
}
}
@keyframes poyo {
from, to {
transform: none;
}
10% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.04);
}
80% {
transform: scale(0.98);
}
}
.my-btn {
display: block;
background-color: #F38549;
}
@media screen and (min-width: 768px) {
.my-btn {
position: absolute;
z-index: 999;
top: -8.59375vw;
left: -7.8125vw;
width: 19.53125vw;
height: 19.53125vw;
border-radius: 15.625vw;
}
}
@media screen and (max-width: 767px) {
.my-btn {
position: absolute;
z-index: 999;
top: -35.8974358974vw;
left: -30.7692307692vw;
width: 64.1025641026vw;
height: 64.1025641026vw;
border-radius: 39.0625vw;
}
}
.my-btn:hover {
animation: poyo 1s ease 0s infinite;
}
@keyframes poyo {
from, to {
transform: none;
}
10% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.04);
}
80% {
transform: scale(0.98);
}
}
.my-btn .btntx {
color: #FFFFFF;
text-align: center;
display: block;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.my-btn .btntx {
font-size: 1.5625vw;
padding: 11.71875vw 0 0 7.03125vw;
}
}
@media screen and (max-width: 767px) {
.my-btn .btntx {
font-size: 4.1025641026vw;
padding: 43.5897435897vw 0 0 25vw;
}
}
.topPage-wrapper {
position: relative;
}
@media screen and (min-width: 768px) {
.topPage-wrapper {
height: 100vh;
}
}
@media screen and (min-width: 768px) and (min-width: 768px) {
.topPage-wrapper {
min-height: 700px;
}
}
@media screen and (min-width: 768px) and (max-width: 767px) {
.topPage-wrapper {
min-height: 650px;
}
}
.topPage-wrapper .mainchara-box {
position: absolute;
bottom: 0;
transition: transform 0.1s ease-out;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .mainchara-box {
width: clamp(300px, 23.4375vw, 390px);
height: clamp(300px, 23.4375vw, 390px);
left: 100px;
z-index: 400;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .mainchara-box {
width: clamp(200px, 51.2820512821vw, 260px);
height: clamp(200px, 51.2820512821vw, 260px);
position: fixed;
left: -10px;
bottom: 0px;
z-index: 700;
}
}
.topPage-wrapper .mainchara-box .mainchara {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage {
width: 100vw;
overflow-x: auto;
display: flex;
height: 100%;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage {
display: flex;
flex-direction: column;
}
}
.topPage-wrapper .topPage-bg {
position: relative;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg {
height: 100vh;
position: relative;
background-position: left;
margin-left: -1px;
aspect-ratio: 1280/700;
}
}
@media screen and (min-width: 768px) and (min-width: 768px) {
.topPage-wrapper .topPage-bg {
min-height: 700px;
}
}
@media screen and (min-width: 768px) and (max-width: 767px) {
.topPage-wrapper .topPage-bg {
min-height: 650px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg {
width: 100vw;
height: 100vh;
overflow: hidden;
}
}
.topPage-wrapper .topPage-bg .grass {
position: absolute;
z-index: 600;
}
.topPage-wrapper .topPage-bg .tree {
position: absolute;
z-index: 500;
}
.topPage-wrapper .topPage-bg .cloud {
position: absolute;
z-index: 100;
}
.topPage-wrapper .topPage-bg .cloud.cloud01 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.topPage-wrapper .topPage-bg .cloud.cloud02 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.topPage-wrapper .topPage-bg .cloud.cloud03 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.topPage-wrapper .topPage-bg .C_character {
z-index: 200;
position: absolute;
}
.topPage-wrapper .topPage-bg .C_character iframe {
width: 100%;
height: 100%;
}
.topPage-wrapper .topPage-bg .content {
position: relative;
text-align: center;
top: 13%;
width: fit-content;
left: 50%;
translate: -50% 0;
top: 13%;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg .content {
z-index: 300;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg .content {
z-index: 600;
}
}
.topPage-wrapper .topPage-bg .content .TL.TL-bg {
background: #FFFFFF;
border-radius: 9999px;
display: grid;
place-items: center center;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg .content .TL.TL-bg {
box-shadow: -5px -4px 12px 0px rgba(0, 0, 0, 0.13) inset, 7px 4px 14px 0px rgba(253, 237, 151, 0.42) inset;
padding-inline: clamp(40px, 3.125vw, 52px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg .content .TL.TL-bg {
width: fit-content;
box-shadow: -2.5px -2px 6px 0px rgba(0, 0, 0, 0.13) inset, 3.5px 2px 7px 0px rgba(253, 237, 151, 0.42) inset;
padding-inline: clamp(40px, 10.2564102564vw, 52px);
margin: 0 auto;
}
}
.topPage-wrapper .topPage-bg .content .TL.TL-bg .TL-text {
font-weight: 800;
color: #6D6D6D;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg .content .TL.TL-bg .TL-text {
display: flex;
align-items: center;
font-size: clamp(33px, 2.578125vw, 42.9px);
letter-spacing: clamp(1.32px, 0.103125vw, 1.716px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg .content .TL.TL-bg .TL-text {
font-size: clamp(20px, 5.1282051282vw, 26px);
letter-spacing: clamp(1px, 0.2564102564vw, 1.3px);
line-height: 1.7;
}
}
.topPage-wrapper .topPage-bg .content .textbox {
color: #FFFFFF;
}
.topPage-wrapper .topPage-bg .content .textbox-top {
font-weight: 800;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg .content .textbox-top {
font-size: clamp(30px, 2.34375vw, 39px);
text-shadow: 0px 0px clamp(15px, 1.171875vw, 19.5px) rgba(0, 0, 0, 0.35);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg .content .textbox-top {
font-size: clamp(18px, 4.6153846154vw, 23.4px);
text-shadow: 0px 0px clamp(15px, 3.8461538462vw, 19.5px) rgba(0, 0, 0, 0.35);
line-height: 1.7;
}
}
.topPage-wrapper .topPage-bg .content .textbox-under {
font-weight: 600;
line-height: 2.18;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg .content .textbox-under {
font-size: clamp(16px, 1.25vw, 20.8px);
letter-spacing: clamp(0.64px, 0.05vw, 0.832px);
margin-top: clamp(20px, 1.5625vw, 26px);
text-shadow: 0px 0px clamp(15px, 1.171875vw, 19.5px) rgba(0, 0, 0, 0.35);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg .content .textbox-under {
font-size: clamp(13px, 3.3333333333vw, 16.9px);
letter-spacing: clamp(0.64px, 0.1641025641vw, 0.832px);
margin-top: clamp(20px, 5.1282051282vw, 26px);
text-shadow: 0px 0px clamp(15px, 3.8461538462vw, 19.5px) rgba(0, 0, 0, 0.35);
}
}
.topPage-wrapper .topPage-bg .content-img {
position: absolute;
}
.topPage-wrapper .topPage-bg.bg01 {
background-image: url("../img/scl-bg-1.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 {
bottom: 0;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .cloud01 {
width: clamp(170px, 13.28125vw, 221px);
height: clamp(110px, 8.59375vw, 143px);
right: 390px;
top: 30px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .cloud01 {
width: clamp(90px, 23.0769230769vw, 117px);
height: clamp(70px, 17.9487179487vw, 91px);
right: 30px;
top: 30px;
}
}
.topPage-wrapper .topPage-bg.bg01 .grayneko {
background-image: url("../img/grayneko.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .grayneko {
width: clamp(151px, 11.796875vw, 196.3px);
height: clamp(170px, 13.28125vw, 221px);
bottom: 101px;
left: -21px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .grayneko {
width: clamp(70px, 17.9487179487vw, 91px);
height: clamp(90px, 23.0769230769vw, 117px);
bottom: 50px;
left: -10px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .rabbit {
width: clamp(419px, 32.734375vw, 544.7px);
height: clamp(309px, 24.140625vw, 401.7px);
right: -60px;
bottom: -30px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .rabbit {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(150px, 38.4615384615vw, 195px);
right: -80px;
bottom: -10px;
}
}
.topPage-wrapper .topPage-bg.bg01 .grass01 {
background-image: url("../img/top-grass01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .grass01 {
width: clamp(668px, 52.1875vw, 868.4px);
height: clamp(255px, 19.921875vw, 331.5px);
bottom: -62px;
left: -175px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .grass01 {
width: clamp(280px, 71.7948717949vw, 364px);
height: clamp(107px, 27.4358974359vw, 139.1px);
bottom: -20px;
left: -20px;
position: fixed;
z-index: 800;
}
}
.topPage-wrapper .topPage-bg.bg01 .grass02 {
background-image: url("../img/top-grass02.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .grass02 {
width: clamp(1004px, 78.4375vw, 1305.2px);
height: clamp(280px, 21.875vw, 364px);
bottom: -82px;
right: -311px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .grass02 {
width: clamp(236px, 60.5128205128vw, 306.8px);
height: clamp(90px, 23.0769230769vw, 117px);
bottom: -30px;
right: -20px;
position: fixed;
z-index: 800;
}
}
.topPage-wrapper .topPage-bg.bg01 .tree01 {
background-image: url("../img/top-tree01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .tree01 {
width: clamp(494px, 38.59375vw, 642.2px);
height: clamp(875px, 68.359375vw, 1137.5px);
bottom: 0;
left: -80px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .tree01 {
width: min(102.5641025641vw, 400px);
height: min(182.0512820513vw, 710px);
bottom: 0;
left: clamp(-180px, -51.2820512821vw, -200px);
position: fixed;
}
}
.topPage-wrapper .topPage-bg.bg01 .tree02 {
background-image: url("../img/top-tree02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .tree02 {
width: clamp(630px, 49.21875vw, 819px);
height: clamp(960px, 75vw, 1248px);
bottom: 0px;
right: -100px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .tree02 {
width: min(141.0256410256vw, 550px);
height: min(209.2307692308vw, 816px);
bottom: 0;
right: clamp(-300px, -84.6153846154vw, -330px);
position: fixed;
}
}
.topPage-wrapper .topPage-bg.bg01 .tree03 {
background-image: url("../img/top-tree03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .tree03 {
width: clamp(887px, 69.296875vw, 1153.1px);
height: clamp(1094px, 85.46875vw, 1422.2px);
bottom: -40px;
right: -455px;
z-index: 700;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .tree03 {
width: 300px;
height: 700px;
bottom: 0;
left: -100px;
position: fixed;
}
}
.topPage-wrapper .topPage-bg.bg01 .content {
z-index: 600;
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .content {
top: 20%;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .content .bird {
width: clamp(108px, 8.4375vw, 140.4px);
height: clamp(98px, 7.65625vw, 127.4px);
top: -70px;
right: 186px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .content .bird {
width: clamp(70px, 17.9487179487vw, 91px);
height: clamp(60px, 15.3846153846vw, 78px);
top: -60px;
right: 100px;
}
}
.topPage-wrapper .topPage-bg.bg01 .content .TL {
background-image: url("../img/top-TL-bg.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .content .TL {
width: clamp(707px, 55.234375vw, 919.1px);
height: clamp(164px, 12.8125vw, 213.2px);
padding-top: clamp(20px, 1.5625vw, 26px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .content .TL {
width: clamp(258px, 66.1538461538vw, 335.4px);
height: clamp(60px, 15.3846153846vw, 78px);
padding-top: clamp(15px, 3.8461538462vw, 19.5px);
}
}
.topPage-wrapper .topPage-bg.bg01 .content .TL-text {
text-shadow: 0px 2px 3px #7E6746;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
background-color: #313029;
color: transparent;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .content .TL-text {
font-size: clamp(49px, 3.828125vw, 63.7px);
display: inline-grid;
place-items: center center;
line-height: 1.2;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .content .TL-text {
font-size: clamp(16px, 4.1025641026vw, 20.8px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg01 .content .TL-text span {
font-size: clamp(20px, 1.5625vw, 26px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg01 .content .TL-text span {
font-size: clamp(10px, 2.5641025641vw, 13px);
}
}
.topPage-wrapper .topPage-bg.bg01 .content .textbox {
font-weight: 800;
}
.topPage-wrapper .topPage-bg.bg02 {
background-image: url("../img/scl-bg-2.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .page02-cloud01 {
width: clamp(120px, 9.375vw, 156px);
height: clamp(102px, 7.96875vw, 132.6px);
left: 300px;
top: 0;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .page02-cloud01 {
width: clamp(80px, 20.5128205128vw, 104px);
height: clamp(67px, 17.1794871795vw, 87.1px);
left: 100px;
top: 25px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .page02-cloud02 {
width: clamp(160px, 12.5vw, 208px);
height: clamp(108px, 8.4375vw, 140.4px);
right: 200px;
top: -30px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .page02-cloud02 {
width: clamp(120px, 30.7692307692vw, 156px);
height: clamp(80px, 20.5128205128vw, 104px);
right: 0px;
top: -20px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .mole {
width: clamp(292px, 22.8125vw, 379.6px);
height: clamp(212px, 16.5625vw, 275.6px);
right: clamp(-30px, -2.34375vw, -39px);
bottom: clamp(20px, 1.5625vw, 26px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .mole {
width: clamp(200px, 51.2820512821vw, 260px);
height: clamp(150px, 38.4615384615vw, 195px);
right: 0px;
bottom: -10px;
}
}
.topPage-wrapper .topPage-bg.bg02 .grass03 {
background-image: url("../img/top-grass03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .grass03 {
width: clamp(924px, 72.1875vw, 1201.2px);
height: clamp(252px, 19.6875vw, 327.6px);
left: 0;
bottom: clamp(-64px, -5vw, -83.2px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .grass03 {
width: clamp(300px, 76.9230769231vw, 390px);
height: clamp(90px, 23.0769230769vw, 117px);
left: -100px;
bottom: -10px;
z-index: 400;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .content {
margin-left: clamp(50px, 3.90625vw, 65px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .content .TL-text img {
width: clamp(334px, 26.09375vw, 434.2px);
height: clamp(94px, 7.34375vw, 122.2px);
margin: 0 clamp(5px, 0.390625vw, 6.5px) clamp(15px, 1.171875vw, 19.5px) 0;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .content .TL-text img {
width: clamp(168px, 43.0769230769vw, 218.4px);
height: clamp(48px, 12.3076923077vw, 62.4px);
display: inline;
margin-bottom: clamp(-10px, -2.5641025641vw, -13px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .content .textbox-under {
margin-top: clamp(30px, 2.34375vw, 39px);
}
}
.topPage-wrapper .topPage-bg.bg02 .content-img01 {
background-image: url("../img/content-img01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .content-img01 {
width: clamp(248px, 19.375vw, 322.4px);
height: clamp(163px, 12.734375vw, 211.9px);
rotate: 6.5deg;
bottom: -68.0379746835%;
left: -4.6296296296%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .content-img01 {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(100px, 25.641025641vw, 130px);
rotate: 6.5deg;
bottom: -40%;
left: -10px;
}
}
.topPage-wrapper .topPage-bg.bg02 .content-img02 {
background-image: url("../img/content-img02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .content-img02 {
width: clamp(256px, 20vw, 332.8px);
height: clamp(129px, 10.078125vw, 167.7px);
rotate: -6.7deg;
bottom: -55.3797468354%;
right: -8.3333333333%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .content-img02 {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(75px, 19.2307692308vw, 97.5px);
rotate: -6.7deg;
bottom: -35%;
right: 0;
}
}
.topPage-wrapper .topPage-bg.bg02 .content-img02::before {
content: "";
position: absolute;
background-image: url("../img/top-butterfly01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg02 .content-img02::before {
width: clamp(140px, 10.9375vw, 182px);
height: clamp(135px, 10.546875vw, 175.5px);
top: clamp(-60px, -4.6875vw, -78px);
right: clamp(-50px, -3.90625vw, -65px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg02 .content-img02::before {
width: clamp(50px, 12.8205128205vw, 65px);
height: clamp(45px, 11.5384615385vw, 58.5px);
top: -10px;
right: 0px;
}
}
.topPage-wrapper .topPage-bg.bg03 {
background-image: url("../img/scl-bg-3.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 {
background-position: 40% center;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .cloud03 {
width: clamp(310px, 24.21875vw, 403px);
height: clamp(124px, 9.6875vw, 161.2px);
right: -16px;
top: 0;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .cloud03 {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(75px, 19.2307692308vw, 97.5px);
right: -16px;
top: 0;
}
}
.topPage-wrapper .topPage-bg.bg03 .platypus01 {
background-image: url("../img/platypus01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .platypus01 {
width: clamp(166px, 12.96875vw, 215.8px);
height: clamp(197px, 15.390625vw, 256.1px);
right: 22.65625%;
bottom: 35px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .platypus01 {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(120px, 30.7692307692vw, 156px);
right: clamp(90px, 23.0769230769vw, 117px);
bottom: 10px;
}
}
.topPage-wrapper .topPage-bg.bg03 .platypus02 {
background-image: url("../img/platypus02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .platypus02 {
width: clamp(163px, 12.734375vw, 211.9px);
height: clamp(190px, 14.84375vw, 247px);
right: 10.9375%;
bottom: 35px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .platypus02 {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(120px, 30.7692307692vw, 156px);
right: 0;
bottom: 10px;
}
}
.topPage-wrapper .topPage-bg.bg03 .tree04 {
background-image: url("../img/top-tree04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .tree04 {
width: clamp(887px, 69.296875vw, 1153.1px);
height: clamp(1094px, 85.46875vw, 1422.2px);
left: -358px;
bottom: -37px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content {
margin-left: clamp(110px, 8.59375vw, 143px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content .TL {
height: clamp(107px, 8.359375vw, 139.1px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content .TL-text img {
width: clamp(170px, 13.28125vw, 221px);
height: clamp(82px, 6.40625vw, 106.6px);
margin: 0 clamp(5px, 0.390625vw, 6.5px) clamp(10px, 0.78125vw, 13px) 0;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .content .TL-text img {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(50px, 12.8205128205vw, 65px);
display: inline;
margin-bottom: clamp(-15px, -3.8461538462vw, -19.5px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content .textbox-under {
margin-top: clamp(30px, 2.34375vw, 39px);
}
}
.topPage-wrapper .topPage-bg.bg03 .content-img03 {
background-image: url("../img/content-img03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content-img03 {
width: clamp(319px, 24.921875vw, 414.7px);
height: clamp(207px, 16.171875vw, 269.1px);
left: -38.3480825959%;
bottom: -66.3900414938%;
rotate: -4.4deg;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .content-img03 {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(100px, 25.641025641vw, 130px);
left: -10px;
bottom: -40%;
rotate: -4.4deg;
}
}
.topPage-wrapper .topPage-bg.bg03 .content-img04 {
background-image: url("../img/content-img04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content-img04 {
width: clamp(253px, 19.765625vw, 328.9px);
height: clamp(165px, 12.890625vw, 214.5px);
right: -42.7728613569%;
top: 0px;
rotate: 6.57deg;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .content-img04 {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(100px, 25.641025641vw, 130px);
right: -10px;
bottom: -40%;
rotate: 6.57deg;
}
}
.topPage-wrapper .topPage-bg.bg03 .content-img04::before {
content: "";
position: absolute;
background-image: url("../img/content-img04-deco.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: clamp(194px, 15.15625vw, 252.2px);
height: clamp(112px, 8.75vw, 145.6px);
bottom: -50px;
right: -30px;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg03 .content-img04::before {
width: clamp(194px, 15.15625vw, 252.2px);
height: clamp(112px, 8.75vw, 145.6px);
bottom: -50px;
right: -30px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg03 .content-img04::before {
width: clamp(90px, 23.0769230769vw, 117px);
height: clamp(60px, 15.3846153846vw, 78px);
bottom: -25px;
right: 0px;
}
}
.topPage-wrapper .topPage-bg.bg04 {
background-image: url("../img/scl-bg-4.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .cloud01 {
width: clamp(190px, 14.84375vw, 247px);
height: clamp(108px, 8.4375vw, 140.4px);
right: 266px;
top: -80px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .cloud01 {
width: clamp(120px, 30.7692307692vw, 156px);
height: clamp(80px, 20.5128205128vw, 104px);
right: 266px;
top: 0px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .sheep {
width: clamp(234px, 18.28125vw, 304.2px);
height: clamp(223px, 17.421875vw, 289.9px);
left: 18px;
bottom: 56px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .sheep {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(150px, 38.4615384615vw, 195px);
right: -10px;
bottom: 56px;
}
}
.topPage-wrapper .topPage-bg.bg04 .grass04 {
background-image: url("../img/top-grass04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .grass04 {
width: clamp(924px, 72.1875vw, 1201.2px);
height: clamp(139px, 10.859375vw, 180.7px);
bottom: 0;
left: -129px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .grass04 {
width: clamp(346px, 88.7179487179vw, 449.8px);
height: clamp(52px, 13.3333333333vw, 67.6px);
bottom: 0;
right: -20px;
z-index: 400;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .TL {
height: clamp(107px, 8.359375vw, 139.1px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .TL-text img {
width: clamp(364px, 28.4375vw, 473.2px);
height: clamp(91px, 7.109375vw, 118.3px);
margin: 0 clamp(5px, 0.390625vw, 6.5px) clamp(5px, 0.390625vw, 6.5px) 0;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .TL-text img {
width: clamp(200px, 51.2820512821vw, 260px);
height: clamp(50px, 12.8205128205vw, 65px);
display: inline;
margin-top: clamp(-5px, -1.2820512821vw, -6.5px);
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img {
width: clamp(340px, 26.5625vw, 442px);
height: clamp(224px, 17.5vw, 291.2px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img {
width: clamp(120px, 30.7692307692vw, 156px);
height: clamp(79px, 20.2564102564vw, 102.7px);
}
}
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img05 {
background-image: url("../img/content-img05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -4.4deg;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img05 {
left: -7.3275862069%;
bottom: -100%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img05 {
left: 0;
bottom: -35%;
}
}
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img05::before {
content: "";
position: absolute;
background-image: url("../img/butterfly01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img05::before {
width: clamp(92px, 7.1875vw, 119.6px);
height: clamp(89px, 6.953125vw, 115.7px);
top: 50px;
left: -53px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img05::before {
width: clamp(40px, 10.2564102564vw, 52px);
height: clamp(38px, 9.7435897436vw, 49.4px);
top: 20px;
left: -10px;
}
}
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img06 {
background-image: url("../img/content-img06.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: 3.6deg;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img06 {
left: 37.0689655172%;
bottom: -106.6666666667%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img06 {
left: 50%;
translate: -50% 0;
bottom: -40%;
}
}
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img06::before {
content: "";
position: absolute;
background-image: url("../img/butterfly02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img06::before {
width: clamp(94px, 7.34375vw, 122.2px);
height: clamp(67px, 5.234375vw, 87.1px);
bottom: 30px;
right: 80px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img06::before {
width: clamp(40px, 10.2564102564vw, 52px);
height: clamp(30px, 7.6923076923vw, 39px);
bottom: 10px;
right: 30px;
}
}
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img07 {
background-image: url("../img/content-img07.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
rotate: -4.35deg;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img07 {
right: -18.9655172414%;
bottom: -93.3333333333%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img07 {
right: -10px;
bottom: -35%;
}
}
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img07::before {
content: "";
position: absolute;
background-image: url("../img/butterfly03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img07::before {
width: clamp(89px, 6.953125vw, 115.7px);
height: clamp(83px, 6.484375vw, 107.9px);
top: -30px;
right: 20px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg04 .content .content-img.content-img07::before {
width: clamp(40px, 10.2564102564vw, 52px);
height: clamp(38px, 9.7435897436vw, 49.4px);
top: -10px;
right: 10px;
}
}
.topPage-wrapper .topPage-bg.bg05 {
background-image: url("../img/scl-bg-5.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .cloud01 {
width: clamp(158px, 12.34375vw, 205.4px);
height: clamp(87px, 6.796875vw, 113.1px);
left: 382px;
top: 10px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .cloud01 {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(60px, 15.3846153846vw, 78px);
left: 10px;
top: 10px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .cloud03 {
width: clamp(297px, 23.203125vw, 386.1px);
height: clamp(124px, 9.6875vw, 161.2px);
right: 0;
top: -20px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .cloud03 {
width: clamp(160px, 41.0256410256vw, 208px);
height: clamp(70px, 17.9487179487vw, 91px);
right: -20px;
top: 30px;
}
}
.topPage-wrapper .topPage-bg.bg05 .balloon {
background-image: url("../img/balloon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .balloon {
width: clamp(259px, 20.234375vw, 336.7px);
height: clamp(291px, 22.734375vw, 378.3px);
top: 60px;
left: 576px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .balloon {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(200px, 51.2820512821vw, 260px);
top: 120px;
right: 10px;
}
}
.topPage-wrapper .topPage-bg.bg05 .rabbit02 {
background-image: url("../img/rabbit02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .rabbit02 {
width: clamp(188px, 14.6875vw, 244.4px);
height: clamp(283px, 22.109375vw, 367.9px);
left: 20px;
bottom: 67px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .bird02 {
width: clamp(120px, 9.375vw, 156px);
height: clamp(110px, 8.59375vw, 143px);
top: 50px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .bird02 {
width: clamp(60px, 15.3846153846vw, 78px);
height: clamp(50px, 12.8205128205vw, 65px);
top: 120px;
left: 100px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .cat {
width: clamp(279px, 21.796875vw, 362.7px);
height: clamp(331px, 25.859375vw, 430.3px);
bottom: 40px;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .cat {
width: clamp(130px, 33.3333333333vw, 169px);
height: clamp(180px, 46.1538461538vw, 234px);
bottom: 20px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .cat.gray-cat {
left: 29.6875%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .cat.gray-cat {
right: 110px;
}
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .cat.brown-cat {
right: 0%;
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .cat.brown-cat {
right: -10px;
}
}
.topPage-wrapper .topPage-bg.bg05 .grass05 {
background-image: url("../img/top-grass05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .grass05 {
width: clamp(455px, 35.546875vw, 591.5px);
height: clamp(214px, 16.71875vw, 278.2px);
bottom: -15px;
right: 0;
}
}
.topPage-wrapper .topPage-bg.bg05 .grass06 {
background-image: url("../img/top-grass04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .grass06 {
width: clamp(924px, 72.1875vw, 1201.2px);
height: clamp(139px, 10.859375vw, 180.7px);
bottom: 0px;
right: 201px;
scale: -1 1;
}
}
.topPage-wrapper .topPage-bg.bg05 .content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
top: 50%;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .content {
translate: 0 -50%;
gap: clamp(53px, 4.140625vw, 68.9px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .content {
left: 50%;
translate: -50% -50%;
gap: clamp(20px, 5.1282051282vw, 26px);
}
}
.topPage-wrapper .topPage-bg.bg05 .content .btn {
display: grid;
place-items: center center;
box-shadow: -4px -4px 8px 0px rgba(0, 0, 0, 0.15) inset, 4px 4px 8px 0px rgba(247, 229, 229, 0.25) inset;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .content .btn {
width: clamp(438px, 34.21875vw, 569.4px);
height: clamp(85px, 6.640625vw, 110.5px);
border-radius: clamp(10px, 0.78125vw, 13px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .content .btn {
width: clamp(300px, 76.9230769231vw, 390px);
height: clamp(58px, 14.8717948718vw, 75.4px);
border-radius: 5px;
}
}
.topPage-wrapper .topPage-bg.bg05 .content .btn.top-btn {
background: #F38549;
}
.topPage-wrapper .topPage-bg.bg05 .content .btn.bottom-btn {
background: #62C7D5;
}
.topPage-wrapper .topPage-bg.bg05 .content .btn.terms-btn {
background: #9462d5;
}
.topPage-wrapper .topPage-bg.bg05 .content .btn .TX {
color: #FFFFFF;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.topPage-wrapper .topPage-bg.bg05 .content .btn .TX {
font-size: clamp(40px, 3.125vw, 52px);
}
}
@media screen and (max-width: 767px) {
.topPage-wrapper .topPage-bg.bg05 .content .btn .TX {
font-size: clamp(26px, 6.6666666667vw, 33.8px);
}
}
.topPage-wrapper .topPage-bg.bg05 .content .btn:hover {
animation: poyo 1s ease 0s infinite;
}
@keyframes poyo {
from, to {
transform: none;
}
10% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.04);
}
80% {
transform: scale(0.98);
}
}
/* -----------------------
C_example
----------------------- */
/* -----------------------
page-01
----------------------- */
.page-wappaer {
background: linear-gradient(180deg, #ACF9FF 0%, #FFF 68.5%, #FFF 100%);
}
.page-wappaer .page {
height: 100vh;
position: relative;
background-image: url("../img/test-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.page-wappaer .page {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page {
min-height: 650px;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page {
background-position: 20%;
}
}
@media screen and (min-width: 768px) {
.page-wappaer .page .inner {
height: 100%;
}
}
.page-wappaer .page .inner .page-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.page-wappaer .page .inner .page-content .C_character {
margin: auto;
}
@media screen and (min-width: 768px) {
.page-wappaer .page .inner .page-content .C_character {
width: clamp(450px, 42.96875vw, 550px);
height: 100%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .inner .page-content .C_character {
width: clamp(220px, 76.9230769231vw, 300px);
height: 100%;
}
}
@media screen and (min-width: 768px) {
.page-wappaer .page .inner .page-content .C_test {
margin-top: clamp(-90px, -7.03125vw, -90px);
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .inner .page-content .C_test {
margin-top: clamp(-55px, -17.9487179487vw, -70px);
}
}
/* -----------------------
page-02
----------------------- */
.page-wappaer .page-content .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.page-wappaer .page-content .icon {
width: clamp(100px, 13.28125vw, 170px);
height: clamp(100px, 12.03125vw, 154px);
top: 10%;
left: 15%;
}
}
.page-wappaer .page-content .icon .TX {
color: #1E673C;
font-family: "Reggae One", system-ui;
text-align: center;
}
@media screen and (min-width: 768px) {
.page-wappaer .page-content .icon .TX {
font-size: clamp(75px, 6.640625vw, 85px);
line-height: clamp(100px, 11.71875vw, 150px);
}
}
/* -----------------------
page-04
----------------------- */
.page-wappaer .page .flag {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
@media screen and (min-width: 768px) {
.page-wappaer .page .flag {
width: 60.15625vw;
height: 17.890625vw;
top: -2%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .flag {
width: 89.7435897436vw;
height: 25.641025641vw;
top: -1.5%;
}
}
.page-wappaer .page .flag .TX {
color: #FFF;
}
@media screen and (min-width: 768px) {
.page-wappaer .page .flag .TX {
font-size: 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .flag .TX {
font-size: 7.1794871795vw;
}
}
.page-wappaer .page .flag .TX span {
font-weight: 900;
position: absolute;
}
.page-wappaer .page .flag .TX span:nth-child(1) {
transform: rotate(11.003deg);
}
@media screen and (min-width: 768px) {
.page-wappaer .page .flag .TX span:nth-child(1) {
top: 26%;
left: 14%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .flag .TX span:nth-child(1) {
top: 26%;
left: 14%;
}
}
.page-wappaer .page .flag .TX span:nth-child(2) {
transform: rotate(1.236deg);
}
@media screen and (min-width: 768px) {
.page-wappaer .page .flag .TX span:nth-child(2) {
top: 35%;
left: 34.5%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .flag .TX span:nth-child(2) {
top: 35%;
left: 34.5%;
}
}
.page-wappaer .page .flag .TX span:nth-child(3) {
transform: rotate(-1.236deg);
}
@media screen and (min-width: 768px) {
.page-wappaer .page .flag .TX span:nth-child(3) {
top: 35%;
right: 35.5%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .flag .TX span:nth-child(3) {
top: 35%;
right: 35.5%;
}
}
.page-wappaer .page .flag .TX span:nth-child(4) {
transform: rotate(-10.328deg);
}
@media screen and (min-width: 768px) {
.page-wappaer .page .flag .TX span:nth-child(4) {
top: 26%;
right: 14%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .flag .TX span:nth-child(4) {
top: 26%;
right: 14%;
}
}
@media screen and (min-width: 768px) {
.page-wappaer .page .TX-bg {
height: clamp(200px, 19.53125vw, 250px);
}
}
.page-wappaer .page .TX-wrap .result {
text-align: center;
color: #F69082;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.page-wappaer .page .TX-wrap .result {
font-size: clamp(80px, 8.59375vw, 110px);
}
}
@media screen and (max-width: 767px) {
.page-wappaer .page .TX-wrap .result {
font-size: clamp(40px, 17.9487179487vw, 70px);
}
}
.page-wappaer .page .TX-wrap .result span {
font-weight: 900;
}
/* -----------------------
page-05
----------------------- */
.page-wappaer #page-05 {
position: relative;
overflow: hidden;
}
.page-wappaer #page-05 .btn-wrap {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.page-wappaer #page-05 .btn-wrap {
width: clamp(650px, 54.6875vw, 700px);
top: 14%;
}
}
@media screen and (max-width: 767px) {
.page-wappaer #page-05 .btn-wrap {
width: clamp(300px, 89.7435897436vw, 350px);
top: 20%;
}
}
.page-wappaer #page-05 .btn-wrap .top-TX {
text-align: center;
color: #F69082;
display: block;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.page-wappaer #page-05 .btn-wrap .top-TX {
font-size: clamp(30px, 2.734375vw, 35px);
}
}
@media screen and (max-width: 767px) {
.page-wappaer #page-05 .btn-wrap .top-TX {
font-size: clamp(16px, 5.1282051282vw, 20px);
line-height: 1.5;
}
}
.page-wappaer #page-05 .btn-wrap .btn {
display: flex;
background: #F38549;
}
@media screen and (min-width: 768px) {
.page-wappaer #page-05 .btn-wrap .btn {
width: clamp(350px, 34.21875vw, 438px);
height: clamp(70px, 6.640625vw, 85px);
margin: 40px auto 0;
border-radius: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.page-wappaer #page-05 .btn-wrap .btn {
width: clamp(200px, 64.1025641026vw, 250px);
height: clamp(45px, 12.8205128205vw, 50px);
margin: 33px auto 0;
border-radius: 3.8461538462vw;
}
}
.page-wappaer #page-05 .btn-wrap .btn .TX {
color: #FFFFFF;
text-align: center;
margin: 0 auto;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.page-wappaer #page-05 .btn-wrap .btn .TX {
font-size: clamp(35px, 3.125vw, 40px);
line-height: clamp(70px, 6.640625vw, 85px);
}
}
@media screen and (max-width: 767px) {
.page-wappaer #page-05 .btn-wrap .btn .TX {
font-size: clamp(20px, 6.4102564103vw, 25px);
line-height: clamp(45px, 12.8205128205vw, 50px);
}
}
.page-wappaer #page-05 .btn-wrap .btn a {
position: absolute;
z-index: 999;
}
@media screen and (min-width: 768px) {
.page-wappaer #page-05 .btn-wrap .btn a {
width: clamp(350px, 34.21875vw, 438px);
height: clamp(70px, 6.640625vw, 85px);
}
}
@media screen and (max-width: 767px) {
.page-wappaer #page-05 .btn-wrap .btn a {
width: clamp(200px, 64.1025641026vw, 250px);
height: clamp(45px, 12.8205128205vw, 50px);
}
}
.page-wappaer #page-05 .btn-wrap .btn:hover {
animation: poyo 1s ease 0s infinite;
}
@keyframes poyo {
from, to {
transform: none;
}
10% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.04);
}
80% {
transform: scale(0.98);
}
}
.page-wappaer #page-05 .C_character {
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
@media screen and (min-width: 768px) {
.page-wappaer #page-05 .C_character {
width: clamp(450px, 42.96875vw, 550px);
height: 100%;
bottom: -190px;
}
}
@media screen and (max-width: 767px) {
.page-wappaer #page-05 .C_character {
width: clamp(220px, 76.9230769231vw, 300px);
bottom: 30px;
}
}
/* -----------------------
top 2ページ目
----------------------- */
#top-02 {
z-index: 4;
position: relative;
}
@media screen and (min-width: 768px) {
#top-02 {
height: 100%;
width: 100%;
}
}
#top-02 .cloud01 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
#top-02 .cloud01 {
width: 240px;
height: 113px;
left: -52px;
top: -29px;
}
}
#top-02 .cloud02 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
#top-02 .cloud02 {
width: 480px;
height: 263px;
right: 50px;
top: -130px;
}
}
#top-02 .butterfly {
background-image: url("../img/top-butterfly01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 300;
}
@media screen and (min-width: 768px) {
#top-02 .butterfly {
width: 140px;
height: 135px;
bottom: 150px;
right: 300px;
}
}
#top-02 .C_feature {
position: relative;
z-index: 500;
}
@media screen and (min-width: 768px) {
#top-02 .C_feature {
padding-top: 117px;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
#top-02 .C_feature {
padding-top: 15vh;
}
}
#top-02 .tree .tree04 {
position: absolute;
background-image: url("../img/top-tree04.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
#top-02 .tree .tree04 {
width: 886px;
height: 1094px;
bottom: -100px;
right: -447px;
}
}
#top-02 .grass .grass03 {
background-image: url("../img/top-grass03.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
#top-02 .grass .grass03 {
width: 942px;
height: 200px;
bottom: -2.421875vw;
left: -9.375vw;
position: absolute;
}
}
@media screen and (max-width: 767px) {
#top-02 .grass .grass03 {
width: 236px;
height: 90px;
bottom: -10px;
left: -20px;
position: fixed;
}
}
/* -----------------------
top 3ページ目
----------------------- */
#top-03 {
z-index: 3;
position: relative;
}
@media screen and (min-width: 768px) {
#top-03 {
height: 100%;
width: 100%;
}
}
#top-03 .C_feature {
position: relative;
z-index: 500;
}
@media screen and (min-width: 768px) {
#top-03 .C_feature {
padding-top: 117px;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
#top-03 .C_feature {
padding-top: 15vh;
}
}
#top-03 .cloud01 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
#top-03 .cloud01 {
width: 221px;
height: 104px;
left: 160px;
top: 186px;
}
}
#top-03 .cloud02 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
#top-03 .cloud02 {
width: 351px;
height: 321px;
right: -25px;
top: -69px;
transform: scaleX(-1);
}
}
#top-03 .tree .tree05 {
position: absolute;
background-image: url("../img/top-tree05.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
#top-03 .tree .tree05 {
width: 439px;
height: 495px;
bottom: 86px;
right: -191px;
}
}
#top-03 .grass .grass04 {
background-image: url("../img/top-grass04.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
#top-03 .grass .grass04 {
width: 924px;
height: 140px;
bottom: 0;
right: -735px;
position: absolute;
}
}
@media screen and (max-width: 767px) {
#top-03 .grass .grass04 {
width: 236px;
height: 90px;
bottom: -10px;
left: -20px;
position: fixed;
}
}
/* -----------------------
top 4ページ目
----------------------- */
#top-04 {
z-index: 2;
position: relative;
}
@media screen and (min-width: 768px) {
#top-04 {
height: 100%;
width: 100%;
}
}
#top-04 .C_feature {
position: relative;
z-index: 500;
}
@media screen and (min-width: 768px) {
#top-04 .C_feature {
padding-top: 117px;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
#top-04 .C_feature {
padding-top: 15vh;
}
}
#top-04 .C_image {
position: relative;
justify-content: center;
z-index: 200;
}
@media screen and (min-width: 768px) {
#top-04 .C_image {
margin-top: 30px;
}
}
/* -----------------------
top 5ページ目
----------------------- */
#top-05 {
z-index: 3;
position: relative;
}
@media screen and (min-width: 768px) {
#top-05 {
height: 100%;
width: 100%;
}
}
#top-05 .C_feature {
position: relative;
z-index: 500;
}
@media screen and (min-width: 768px) {
#top-05 .C_feature {
padding-top: 117px;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
#top-05 .C_feature {
padding-top: 15vh;
}
}
#top-05 .cloud01 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
#top-05 .cloud01 {
width: 221px;
height: 104px;
left: 200px;
top: 114px;
}
}
#top-05 .cloud03 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
#top-05 .cloud03 {
width: 390px;
height: 368px;
right: -71px;
top: -175px;
}
}
#top-05 .balloon {
background-image: url("../img/balloon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
left: 30%;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
#top-05 .balloon {
width: 283px;
height: 331px;
}
}
#top-05 .btn-group {
position: absolute;
top: 12%;
z-index: 999;
display: flex;
flex-direction: column;
gap: 30px;
}
@media screen and (min-width: 768px) {
#top-05 .btn-group {
right: 100px;
}
}
#top-05 .btn-group .btn {
background: #D9D9D9;
display: block;
}
@media screen and (min-width: 768px) {
#top-05 .btn-group .btn {
width: 34.21875vw;
height: 6.640625vw;
margin: 3.125vw auto 0;
}
}
#top-05 .btn-group .btn .TX {
text-align: center;
display: block;
font-weight: 500;
}
@media screen and (min-width: 768px) {
#top-05 .btn-group .btn .TX {
font-size: 3.125vw;
line-height: 6.640625vw;
}
}
/* -----------------------
page-chat
----------------------- */
.chat {
background: rgba(122, 122, 122, 0.75);
width: 100%;
height: 100%;
}
.chat .header {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
display: grid;
position: relative;
place-items: center left;
}
@media screen and (min-width: 768px) {
.chat .header {
height: 5.703125vw;
padding-left: 2.65625vw;
}
}
@media screen and (max-width: 767px) {
.chat .header {
height: min(15.3846153846vw, 60px);
padding-left: min(5.1282051282vw, 20px);
}
}
.chat .header .TL {
color: #FFFFFF;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.chat .header .TL {
font-size: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .TL {
font-size: min(5.1282051282vw, 20px);
}
}
.chat .header .TL a {
color: #FFFFFF;
font-weight: 900;
cursor: pointer;
text-decoration: underline;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.chat .header .TL a {
font-size: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .TL a {
font-size: min(5.1282051282vw, 20px);
}
}
.chat .header .chat--menu-btn {
position: absolute;
}
@media screen and (min-width: 768px) {
.chat .header .chat--menu-btn {
top: 0.625vw;
right: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .chat--menu-btn {
top: clamp(1px, 0.7692307692vw, 5px);
right: clamp(2px, 1.2820512821vw, 8px);
}
}
.chat .header .chat--menu-btn .C_all-menu-btn {
box-shadow: 0px 3.314px 6.629px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.chat .header .chat--menu-btn .C_all-menu-btn {
border-radius: 1.035703125vw;
padding: 0.390625vw 0.78125vw 0.46875vw 0.546875vw;
border-width: 0.15625vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .chat--menu-btn .C_all-menu-btn {
border-radius: clamp(12px, 3.8461538462vw, 118px);
padding: clamp(1px, 0.7692307692vw, 5px) clamp(2px, 1.2820512821vw, 8px) clamp(2px, 1.0256410256vw, 6px) clamp(2px, 1.2820512821vw, 8px);
border-width: 0.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.chat .header .chat--menu-btn .C_all-menu-btn__inner {
gap: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .chat--menu-btn .C_all-menu-btn__inner {
gap: clamp(1px, 0.7692307692vw, 5px);
}
}
@media screen and (min-width: 768px) {
.chat .header .chat--menu-btn .C_all-menu-btn__inner__img {
width: 3.90625vw;
height: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .chat--menu-btn .C_all-menu-btn__inner__img {
width: clamp(30px, 8.9743589744vw, 40px);
height: clamp(20px, 6.4102564103vw, 30px);
}
}
.chat .header .chat--menu-btn .C_all-menu-btn__inner__text .TX {
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.chat .header .chat--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 1.875vw;
letter-spacing: 0.078125vw;
}
}
@media screen and (max-width: 767px) {
.chat .header .chat--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: clamp(12px, 3.8461538462vw, 18px);
}
}
.chat .header .chat--menu-btn .C_all-menu-btn:hover {
transform: translate(3.314px, 3.314px);
}
@media screen and (max-width: 767px) {
.chat .header .chat--menu-btn .C_all-menu-btn:hover {
transform: translate(2px, 2px);
}
}
.chat .header .chat--menu-btn .C_all-menu-btn:hover .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.chat .chat-content {
position: relative;
}
@media screen and (min-width: 768px) {
.chat .chat-content {
background: #F69064;
width: 92.34375vw;
height: 81.2857142857%;
display: flex;
border-radius: 1.171875vw;
margin: 3.203125vw auto 0;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content {
height: 84%;
padding-top: 12.8205128205vw;
}
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal {
padding: 2.03125vw 1.953125vw 5.390625vw 1.71875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal {
display: none;
height: 100%;
width: min(90vw, 450px);
position: relative;
margin: 0 auto;
background: #F69064;
padding: min(6.4102564103vw, 25px) min(3.8461538462vw, 15px) min(23.0769230769vw, 100px);
border-radius: 2.0512820513vw;
}
}
.chat .chat-content .timeline-modal .timeline-TL {
position: absolute;
color: #F69064;
background: #FFDFAF;
border-radius: 20px 20px 20px 0px;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-TL {
font-size: 1.25vw;
letter-spacing: 0.125vw;
padding: 0.625vw 1.171875vw;
top: -1.171875vw;
left: 0;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-TL {
font-size: min(4.1025641026vw, 20px);
letter-spacing: min(0.4102564103vw, 1.6px);
padding: min(2.0512820513vw, 8px) min(3.8461538462vw, 15px);
top: -3.8461538462vw;
left: 0;
}
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap {
min-width: 30.390625vw;
height: 100%;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap {
height: 100%;
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline {
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 201, 61, 0) 0%, rgba(255, 201, 61, 0.13) 100%), #EFFAFF;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline {
border-radius: 1.171875vw;
height: 100%;
padding: 1.484375vw 0.546875vw;
gap: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline {
height: 100%;
border-radius: 2.0512820513vw;
padding: min(5.1282051282vw, 20px) min(2.5641025641vw, 10px) min(21.7948717949vw, 85px);
gap: min(5.1282051282vw, 20px);
}
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item {
padding: 0 1.5625vw 0.9375vw 0.859375vw;
border-bottom: 0.078125vw solid #6D6D6D;
max-width: 30.15625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item {
padding: 0 min(5.1282051282vw, 20px) min(3.0769230769vw, 12px) min(2.8205128205vw, 11px);
border-bottom: 0.2564102564vw solid #6D6D6D;
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item h3 {
font-weight: 600;
color: #6D6D6D;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item h3 {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item h3 {
font-size: min(3.5897435897vw, 18px);
}
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item div {
font-size: 1.015625vw !important;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item div {
font-size: min(2.5641025641vw, 12px) !important;
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap {
display: flex;
justify-content: right;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap {
gap: 1.953125vw;
margin-top: 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap {
gap: min(7.1794871795vw, 28px);
margin-top: min(1.2820512821vw, 5px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button {
background-color: #FFFFFF;
border-radius: 50px;
position: relative;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button {
width: 2.5vw;
height: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button {
width: min(8.9743589744vw, 45px);
height: min(8.9743589744vw, 45px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button .icon {
position: absolute;
background-size: contain;
background-repeat: no-repeat;
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: 2;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button .icon {
width: 1.484375vw;
height: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button .icon {
width: min(4.8717948718vw, 25px);
height: min(4.1025641026vw, 23px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button .like-TX {
white-space: nowrap;
color: #6D6D6D;
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button .like-TX {
font-size: 0.78125vw;
bottom: -0.546875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button .like-TX {
font-size: min(3.0769230769vw, 14px);
bottom: min(-1.2820512821vw, -5px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.heart .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.heart.liked .icon {
background-image: url('data:image/svg+xml;utf-8,');
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.heart.liked .like-TX {
color: #F29A9A;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.hand .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.hand.liked .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.hand.liked .like-TX {
color: #EFC73C;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.cat .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.cat.liked .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.cat.liked .like-TX {
color: #8CCBF5;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button::before {
content: "";
position: absolute;
background-image: url("../img/like-icon-back.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 0;
}
.chat .chat-content .timeline-modal .timeline-wrap .timeline .timeline-item .like-button-wrap .like-button.click::before {
animation: like 0.8s ease-out forwards;
}
@keyframes like {
0% {
opacity: 0;
transform: translate(-50%, -50%);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.2);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction {
display: flex;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction {
margin-top: 0.9375vw;
gap: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction {
margin-top: min(3.0769230769vw, 12px);
gap: min(3.0769230769vw, 12px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter {
background: #FFFFFF;
display: flex;
align-items: center;
width: fit-content;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter {
border-radius: 1.5625vw;
padding: 0.3125vw 1.25vw 0.3125vw 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter {
border-radius: 12.8205128205vw;
padding: min(1.2820512821vw, 5px) min(3.8461538462vw, 15px) min(1.2820512821vw, 5px) min(2.5641025641vw, 10px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter .icon {
background-image: url("../img//log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter .icon {
width: 2.8125vw;
height: 2.8125vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter .icon {
width: min(7.6923076923vw, 30px);
height: min(7.6923076923vw, 30px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter .number {
color: #F69064;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter .number {
font-size: 2.03125vw;
margin-left: 0.546875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .coin-counter .number {
font-size: min(5.641025641vw, 25px);
margin-left: min(1.2820512821vw, 5px);
}
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .textbox .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .textbox .TX {
font-size: min(4.1025641026vw, 20px);
}
}
@media screen and (min-width: 768px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .textbox .reaction-counter {
font-size: 1.25vw;
margin-top: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal .timeline-wrap .C_reaction .textbox .reaction-counter {
font-size: min(4.1025641026vw, 18px);
margin-top: min(0.7692307692vw, 3px);
}
}
.chat .chat-content .timeline-modal .timeline-wrap .chat-back {
display: flex;
align-items: center;
margin: min(1.2820512821vw, 5px) 0 0 min(1.2820512821vw, 10px);
}
.chat .chat-content .timeline-modal .timeline-wrap .chat-back .icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: min(5.8974358974vw, 33px);
height: min(6.4102564103vw, 35px);
}
.chat .chat-content .timeline-modal .timeline-wrap .chat-back .TX {
font-weight: 800;
color: #857763;
font-size: min(3.0769230769vw, 14px);
}
@media screen and (max-width: 767px) {
.chat .chat-content .timeline-modal.show {
display: block;
}
}
.chat .chat-content .chat-wrap {
background: #4BC7FB;
position: relative;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap {
border-radius: 1.171875vw;
padding: 1.484375vw 1.640625vw 5.390625vw;
flex: 1;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap {
width: min(90vw, 450px);
height: 100%;
margin: 0 auto;
border-radius: 2.0512820513vw;
padding: min(3.8461538462vw, 15px) min(3.8461538462vw, 15px) min(15.3846153846vw, 60px);
}
}
.chat .chat-content .chat-wrap .chat-TL {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
translate: -50% 0;
z-index: 10;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap .chat-TL {
width: 45.3125vw;
height: 9.609375vw;
padding-top: 2.34375vw;
top: -2.734375vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap .chat-TL {
width: min(82.5641025641vw, 400px);
height: min(17.1794871795vw, 85px);
top: min(-5.1282051282vw, -20px);
padding-top: min(3.0769230769vw, 18px);
}
}
.chat .chat-content .chat-wrap .chat-TL .TL {
color: #C7B82F;
text-align: center;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap .chat-TL .TL {
font-size: 2.34375vw;
letter-spacing: 0.1015625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap .chat-TL .TL {
font-size: min(5.1282051282vw, 24px);
letter-spacing: 0.3333333333vw;
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat {
height: 100%;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-output {
background: radial-gradient(50% 50% at 50% 50%, rgba(61, 255, 255, 0) 0%, rgba(61, 255, 255, 0.13) 100%), #EFFAFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25) inset;
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-output {
padding: 7.03125vw 3.90625vw 1.5625vw 3.515625vw;
border-radius: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-output {
border-radius: 2.0512820513vw;
padding: min(11.2820512821vw, 44px) min(2.5641025641vw, 10px) min(21.7948717949vw, 85px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-output #sac-latest-message {
display: none;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel {
float: none;
position: absolute;
bottom: 0;
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel {
width: 100%;
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form {
gap: 1.5625vw;
margin-bottom: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form {
gap: 2.0512820513vw;
margin-bottom: min(1.2820512821vw, 5px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-info {
display: none;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-chat {
margin-bottom: 0;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-chat label {
display: none;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-chat #sac_chat {
border: none;
float: none;
outline: none;
position: relative;
display: border-box;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-chat #sac_chat {
width: 42.1875vw;
height: 1.953125vw;
border-radius: 0.78125vw;
padding: 0.859375vw 1.875vw;
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-chat #sac_chat {
width: 80.3418803419%;
height: min(7.4358974359vw, 29px);
border-radius: 1.2820512821vw;
padding: 1.2820512821vw 2.5641025641vw;
font-size: min(4.1025641026vw, 16px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-chat #sac_chat::placeholder {
font-size: 0;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit {
position: relative;
background: linear-gradient(0deg, rgba(75, 199, 251, 0) 0%, #5DCFFF 100%), #307DF1;
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.54) inset, 0px 2px 3px 0px #3C5C8A;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit {
min-width: 7.1875vw;
height: 3.515625vw;
border-radius: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit {
width: 10.2564102564vw;
height: 4.8717948718vw;
border-radius: 3.8461538462vw;
right: min(8.9743589744vw, 35px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit .submit {
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit::before {
content: "";
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
position: absolute;
display: block;
z-index: 20;
left: 50%;
top: 50%;
translate: -50% -50%;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit::before {
width: 2.96875vw;
height: 2.96875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form #sac-user-submit::before {
width: 4.6153846154vw;
height: 4.6153846154vw;
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form::before {
content: "コメントを入力する";
position: absolute;
pointer-events: none;
z-index: 10;
color: #D2D2D2;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form::before {
font-size: 1.25vw;
padding: 0.859375vw 1.875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form::before {
font-size: min(3.5897435897vw, 14px);
padding-left: min(2.5641025641vw, 10px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-panel #sac-form.input-has-value::before {
display: none;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages {
display: flex;
flex-direction: column;
position: relative;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message {
position: relative;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .chat-avatar {
overflow: hidden;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .chat-avatar {
width: 4.140625vw;
height: 4.140625vw;
border: #C7B82F solid 0.15625vw;
padding-top: 0.625vw;
border-radius: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .chat-avatar {
width: min(8.4615384615vw, 43px);
height: min(8.4615384615vw, 43px);
border: #C7B82F solid 0.3846153846vw;
padding-top: min(1.2820512821vw, 5px);
border-radius: min(1.2820512821vw, 5px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.sac-user-::before {
content: "";
background-image: url("../img/staff-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.sac-user-::before {
width: 4.140625vw;
height: 4.140625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.sac-user-::before {
width: min(8.4615384615vw, 43px);
height: min(8.4615384615vw, 43px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .sac-chat-name-wrap {
position: absolute;
overflow: hidden;
top: 0;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .sac-chat-name-wrap {
left: 5.703125vw;
height: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .sac-chat-name-wrap {
top: min(-0.7692307692vw, -3px);
left: min(12.8205128205vw, 65px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .sac-chat-name-wrap .sac-chat-name {
display: block;
color: #857763;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .sac-chat-name-wrap .sac-chat-name {
white-space: nowrap;
font-size: 1.25vw;
letter-spacing: 0.125vw;
margin-right: -0.78125vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .sac-chat-name-wrap .sac-chat-name {
font-size: min(3.0769230769vw, 14px);
letter-spacing: 0.2564102564vw;
margin-right: min(-2.0512820513vw, -8px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .highlight-text {
color: #B29975;
position: relative;
font-weight: 600;
display: grid;
place-items: center left;
background-color: #FFFFFF;
line-height: 1.2;
filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.15));
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .highlight-text {
width: 35.9375vw;
font-size: 1.25vw;
padding: 0.625vw 2.34375vw;
top: -2.34375vw;
left: 5.46875vw;
border-radius: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .highlight-text {
width: min(56.4102564103vw, 308px);
font-size: min(3.0769230769vw, 16px);
top: -3.8461538462vw;
left: min(12.8205128205vw, 60px);
padding: min(2.0512820513vw, 10px) min(3.8461538462vw, 20px);
border-radius: min(0.7692307692vw, 3px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .highlight-text::before {
content: "";
clip-path: polygon(75% 0, 100% 100%, 10% 100%);
background: #FFFFFF;
position: absolute;
bottom: 0;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .highlight-text::before {
width: 2.109375vw;
height: 1.25vw;
left: -0.9375vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message .highlight-text::before {
width: 20px;
height: 12px;
left: -7px;
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .sac-chat-name-wrap {
left: auto;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .sac-chat-name-wrap {
right: 5.703125vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .sac-chat-name-wrap {
right: min(12.8205128205vw, 65px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .sac-chat-name-wrap .sac-chat-name {
color: #F6AA64;
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .highlight-text {
color: #F6AA64;
place-items: center right;
left: auto;
background: #FFFDED;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .highlight-text {
right: -3.90625vw;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .highlight-text {
right: min(-1.2820512821vw, -15px);
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .highlight-text::before {
content: "";
clip-path: polygon(10% 0%, 100% 100%, 10% 100%);
background: #FFFDED;
position: absolute;
bottom: 0;
}
@media screen and (min-width: 768px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .highlight-text::before {
width: 2.109375vw;
height: 1.25vw;
right: -0.9375vw;
left: initial;
}
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .highlight-text::before {
right: -6px;
left: initial;
}
}
.chat .chat-content .chat-wrap #simple-ajax-chat #sac-messages .sac-chat-message.me .chat-avatar {
margin-left: auto;
}
.chat .chat-content .chat-wrap .C_reaction {
background: #F69064;
width: fit-content;
border-radius: min(2.5641025641vw, 10px);
padding: min(1.2820512821vw, 5px) min(3.8461538462vw, 15px);
position: absolute;
bottom: min(19.2307692308vw, 75px);
right: min(7.6923076923vw, 30px);
}
.chat .chat-content .chat-wrap .C_reaction .textbox .reaction-counter {
margin-top: min(1.2820512821vw, 5px);
}
.chat .chat-content .chat-wrap .C_reaction .coin-counter {
margin-left: auto;
margin-top: min(-2.5641025641vw, -10px);
}
@media screen and (max-width: 767px) {
.chat .chat-content .chat-wrap.show {
display: none;
}
}
#sac-latest-message {
font-size: 0px !important;
}
#sac-latest-message::before {
content: "チャットのタイトル";
font-size: 14px;
}
/* group_aユーザーにはgroup_bとgroup_cのメッセージを非表示 */
.group_a_user .group_b,
.group_a_user .group_c {
display: none;
}
/* group_bユーザーにはgroup_aとgroup_cのメッセージを非表示 */
.group_b_user .group_a,
.group_b_user .group_c {
display: none;
}
/* group_cユーザーにはgroup_aとgroup_bのメッセージを非表示 */
.group_c_user .group_a,
.group_c_user .group_b {
display: none;
}
#sac-output {
background-color: rgba(255, 255, 255, 0.5);
}
#sac-messages {
opacity: 0;
animation: showMessage 0s 0.3s forwards;
}
@keyframes showMessage {
to {
opacity: 1;
}
}
/* -----------------------
page-01
----------------------- */
.ranking {
position: relative;
height: 100vh;
background-image: url("../img/ranking-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.ranking {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.ranking {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.ranking {
min-height: 54.6875vw;
}
}
@media screen and (max-width: 767px) {
.ranking {
background-position: 20%;
min-height: 100vh;
}
}
.ranking .bg {
position: relative;
width: 100%;
height: 100%;
}
.ranking .bg-left {
background-image: url("../img/ranking-bg-left.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
@media screen and (min-width: 768px) {
.ranking .bg-left {
width: max(33.59375vw, 430px);
height: fit-content;
height: max(26.875vw, 344px);
}
}
@media screen and (max-width: 767px) {
.ranking .bg-left {
width: 66.6666666667vw;
height: 53.3333333333vw;
}
}
.ranking .bg-right {
background-image: url("../img/ranking-bg-right.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
height: 100vh;
}
@media screen and (min-width: 768px) {
.ranking .bg-right {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.ranking .bg-right {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.ranking .bg-right {
width: 520px;
}
}
@media screen and (max-width: 767px) {
.ranking .bg-right {
width: clamp(430px, 110.2564102564vw, 450px);
right: clamp(-135px, -34.6153846154vw, -115px);
}
}
.ranking .bg .stump-back {
background-image: url("../img/stump-back.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.ranking .bg .stump-back {
width: 12.5vw;
height: 11.328125vw;
bottom: 7.8125vw;
left: 0;
}
}
@media screen and (max-width: 767px) {
.ranking .bg .stump-back {
width: clamp(104px, 26.6666666667vw, 130px);
height: clamp(94px, 24.1025641026vw, 117px);
bottom: clamp(60px, 15.3846153846vw, 70px);
left: 0;
}
}
.ranking .bg .rank-character-box {
position: absolute;
z-index: 3;
}
@media screen and (min-width: 768px) {
.ranking .bg .rank-character-box {
bottom: 1.5625vw;
left: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .bg .rank-character-box {
bottom: 20px;
left: 5.1282051282vw;
}
}
@media screen and (min-width: 768px) {
.ranking .bg .rank-character-box .C_character {
width: 27.34375vw;
margin-bottom: -4.6875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .bg .rank-character-box .C_character {
width: clamp(180px, 46.1538461538vw, 195px);
margin-bottom: clamp(-30px, -7.6923076923vw, -10px);
}
}
.ranking .bg .rank-character-box .stump {
background-image: url("../img/stump.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.ranking .bg .rank-character-box .stump {
width: 26.5625vw;
height: 8.90625vw;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.ranking .bg .rank-character-box .stump {
width: clamp(166px, 42.5641025641vw, 180px);
height: clamp(56px, 14.358974359vw, 61px);
margin: 0 auto;
}
}
.ranking .bg .stump-front {
background-image: url("../img/stump-front.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 3;
}
@media screen and (min-width: 768px) {
.ranking .bg .stump-front {
width: 31.25vw;
height: 21.875vw;
bottom: 0;
left: 0;
}
}
@media screen and (max-width: 767px) {
.ranking .bg .stump-front {
width: clamp(242px, 62.0512820513vw, 263px);
height: clamp(170px, 43.5897435897vw, 184px);
bottom: 0;
left: 0;
}
}
.ranking .ranking-header {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: grid;
position: relative;
z-index: 999;
width: 100%;
}
@media screen and (min-width: 768px) {
.ranking .ranking-header {
place-items: center left;
padding-left: 3.359375vw;
height: 5.703125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header {
place-items: center center;
height: clamp(50px, 15.3846153846vw, 60px);
}
}
.ranking .ranking-header .TL {
color: #FFFFFF;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .ranking-header .TL {
font-size: 2.03125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .TL {
font-size: clamp(16px, 4.6153846154vw, 18px);
margin-top: -0.7692307692vw;
}
}
.ranking .ranking-header .rank--menu-btn {
position: absolute;
}
@media screen and (min-width: 768px) {
.ranking .ranking-header .rank--menu-btn {
top: 0.625vw;
right: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .rank--menu-btn {
top: clamp(1px, 0.7692307692vw, 5px);
right: clamp(2px, 1.2820512821vw, 8px);
}
}
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn {
box-shadow: 0px 3.314px 6.629px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn {
border-radius: 1.035703125vw;
padding: 0.390625vw 0.78125vw 0.46875vw 0.546875vw;
border-width: 0.15625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn {
border-radius: clamp(12px, 3.8461538462vw, 118px);
padding: clamp(1px, 0.7692307692vw, 5px) clamp(2px, 1.2820512821vw, 8px) clamp(2px, 1.0256410256vw, 6px) clamp(2px, 1.2820512821vw, 8px);
border-width: 0.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner {
gap: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner {
gap: clamp(1px, 0.7692307692vw, 5px);
}
}
@media screen and (min-width: 768px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner__img {
width: 3.90625vw;
height: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner__img {
width: clamp(30px, 8.9743589744vw, 40px);
height: clamp(20px, 6.4102564103vw, 30px);
}
}
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner__text .TX {
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 1.875vw;
letter-spacing: 0.078125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: clamp(12px, 3.8461538462vw, 18px);
}
}
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn:hover {
transform: translate(3.314px, 3.314px);
}
@media screen and (max-width: 767px) {
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn:hover {
transform: translate(2px, 2px);
}
}
.ranking .ranking-header .rank--menu-btn .C_all-menu-btn:hover .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.ranking .inner {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.ranking .inner {
top: 45%;
translate: 0 -50%;
}
}
@media screen and (max-width: 767px) {
.ranking .inner {
top: 5%;
}
}
.ranking .inner .main {
display: flex;
align-items: start;
height: fit-content;
}
@media screen and (min-width: 768px) {
.ranking .inner .main {
gap: 2.265625vw;
padding-left: 3.359375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main {
margin: 0 auto;
width: fit-content;
max-width: 424px;
flex-direction: column;
position: relative;
}
}
.ranking .inner .main .my-info {
background: #D1D1D1;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info {
width: 23.4375vw;
padding: 1.40625vw 1.171875vw;
border-radius: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info {
width: clamp(190px, 52.8205128205vw, 223px);
padding: clamp(8px, 3.3333333333vw, 15px) clamp(13px, 6.3106796117%, 15px);
border-radius: clamp(5px, 1.2820512821vw, 10px);
}
}
.ranking .inner .main .my-info .name-box {
display: flex;
align-items: center;
height: auto;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .name-box {
padding-left: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .name-box {
padding-left: clamp(7px, 3.3653846154%, 12px);
}
}
.ranking .inner .main .my-info .name-box .img {
border-radius: 50%;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .name-box .img {
width: 2.8125vw;
height: 2.8125vw;
border: 0.3125vw solid #FFFFFF;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .name-box .img {
width: clamp(26px, 6.6666666667vw, 36px);
height: clamp(26px, 6.6666666667vw, 36px);
border: clamp(3px, 0.7692307692vw, 4px) solid #FFFFFF;
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .name-box .display__character {
margin-top: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .name-box .display__character {
margin-top: 0.5128205128vw;
}
}
.ranking .inner .main .my-info .name-box .display__character .selected_items-character-character {
width: 90%;
margin: 0 auto;
}
.ranking .inner .main .my-info .name-box .name {
color: #FFFFFF;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .name-box .name {
font-size: 1.25vw;
margin-left: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .name-box .name {
font-size: clamp(14px, 3.5897435897vw, 16px);
margin-left: clamp(5px, 2.4038461538vw, 10px);
}
}
.ranking .inner .main .my-info .result-box {
background: #FFFFFF;
display: flex;
align-items: center;
color: #F5A274;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .result-box {
padding: 0.46875vw 1.40625vw;
margin-top: 1.015625vw;
border-radius: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .result-box {
padding: clamp(5px, 1.2820512821vw, 6px) clamp(12px, 3.0769230769vw, 13px);
border-radius: clamp(5px, 1.2820512821vw, 10px);
margin-top: clamp(5px, 1.2820512821vw, 13px);
}
}
.ranking .inner .main .my-info .result-box .number {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .result-box .number {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .result-box .number {
font-size: clamp(12px, 3.5897435897vw, 16px);
}
}
.ranking .inner .main .my-info .result-box .icon {
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) {
.ranking .inner .main .my-info .result-box .icon {
width: 2.34375vw;
height: 2.34375vw;
margin-left: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .result-box .icon {
width: clamp(13px, 4.8717948718vw, 20px);
height: clamp(21px, 5.3846153846vw, 30px);
margin-left: auto;
}
}
.ranking .inner .main .my-info .result-box .point {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .result-box .point {
font-size: 2.1875vw;
margin-left: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .result-box .point {
font-size: clamp(16px, 4.6153846154vw, 20px);
margin-left: clamp(9px, 2.3076923077vw, 15px);
}
}
.ranking .inner .main .my-info .result-box .point span {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .my-info .result-box .point span {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .my-info .result-box .point span {
font-size: clamp(7px, 3.0769230769vw, 16px);
}
}
.ranking .inner .main .my-info.rank-1 {
background: linear-gradient(105deg, #FFECAB 4.94%, #CFBC7A 30.71%, #FFECAB 49.25%, #9E8B48 72.31%, #BBA865 94.92%);
}
.ranking .inner .main .my-info.rank-2 {
background: linear-gradient(105deg, #E5E1E1 4.94%, #C1C0C0 30.71%, #D9D7D7 49.25%, #7F7D7D 72.31%, #ADADAD 94.92%);
}
.ranking .inner .main .my-info.rank-3 {
background: linear-gradient(105deg, #CB9C65 4.94%, #AA8355 30.71%, #CB9C65 49.25%, #86653E 72.31%, #A78153 94.92%);
}
.ranking .inner .main .ranking-bord {
background-color: rgba(251, 193, 142, 0.74);
position: relative;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord {
width: 57.421875vw;
height: 41.875vw;
border-radius: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord {
width: clamp(300px, 94.6153846154vw, 424px);
height: clamp(200px, 62.3076923077vw, 280px);
margin-top: 5.1282051282vw;
}
}
.ranking .inner .main .ranking-bord .TL-bg {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .TL-bg {
width: 46.875vw;
height: 8.359375vw;
margin: -1.953125vw auto 0;
padding-top: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .TL-bg {
position: relative;
width: clamp(180px, 52.0512820513vw, 250px);
height: clamp(30px, 11.0256410256vw, 50px);
margin: 0 auto;
top: clamp(-20px, -4.1025641026vw, -10px);
padding-top: clamp(5px, 1.2820512821vw, 10px);
}
}
.ranking .inner .main .ranking-bord .TL-bg .TL {
text-align: center;
color: #FFFFFF;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .TL-bg .TL {
font-size: 3.125vw;
letter-spacing: 0.15625vw;
margin-left: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .TL-bg .TL {
font-size: clamp(12px, 4.1025641026vw, 18px);
margin-left: clamp(3px, 1.2820512821vw, 8px);
}
}
.ranking .inner .main .ranking-bord .ranking-list {
margin: 0 auto;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list {
width: 88.4353741497%;
height: 35.234375vw;
margin-top: -2.34375vw;
border-radius: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list {
width: clamp(240px, 74.2547425474%, 300px);
height: clamp(150px, 48.4615384615vw, 210px);
margin-top: -2.0512820513vw;
border-radius: clamp(3px, 1.2820512821vw, 10px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item {
background: #FFFFFF;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item {
border-radius: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item {
border-radius: clamp(3px, 1.2820512821vw, 10px);
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group {
padding: 1.71875vw 3.125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group {
padding: clamp(4px, 1.5384615385vw, 10px) clamp(10px, 3.8461538462vw, 30px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank {
display: flex;
align-items: end;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank {
gap: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank {
justify-content: space-between;
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item {
width: clamp(65px, 19.2307692308vw, 75px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img {
position: relative;
border-radius: 50%;
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img .user-icon {
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
translate: -50% -50%;
background: #FFFFFF;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img .user-icon .display__character {
margin-top: 0.625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img .user-icon .display__character {
margin-top: 1.0256410256vw;
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img .user-icon .display__character .selected_items-character-character {
width: 90%;
margin: 0 auto;
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img::before {
position: absolute;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img::before {
top: 0.625vw;
left: -2.109375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .img::before {
top: clamp(3px, 1.2820512821vw, 8px);
left: -2.5641025641vw;
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box {
background: linear-gradient(180deg, #FCC491 0%, #F5A274 100%);
width: 100%;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box {
border-radius: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box {
border-radius: clamp(2px, 0.7692307692vw, 5px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .name {
color: #FFFFFF;
text-align: center;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .name {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .name {
font-size: clamp(7px, 2.3076923077vw, 9px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box {
background: #F9C1A1;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box {
border-radius: 0.234375vw;
padding: 0.390625vw 0.625vw;
margin-top: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box {
border-radius: clamp(1px, 0.5128205128vw, 3px);
padding: clamp(1px, 0.5128205128vw, 4px) clamp(2px, 0.7692307692vw, 5px);
margin-top: clamp(1px, 0.5128205128vw, 5px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .icon {
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) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .icon {
width: 1.40625vw;
height: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .icon {
width: clamp(6px, 2.0512820513vw, 10px);
height: clamp(6px, 2.0512820513vw, 10px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .point {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .point {
font-size: 1.796875vw;
margin-left: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .point {
font-size: clamp(8px, 2.5641025641vw, 12px);
margin-left: clamp(2px, 0.7692307692vw, 5px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .point span {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .point span {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item .name-box .point-box .point span {
font-size: clamp(7px, 2.3076923077vw, 9px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img {
background: linear-gradient(160deg, #E5E1E1 12.75%, #ADADAD 34.61%, #E5E1E1 55.68%, #ADADAD 78.32%);
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img {
width: 7.8125vw;
height: 7.8125vw;
margin-bottom: -1.171875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img {
width: clamp(30px, 10.2564102564vw, 50px);
height: clamp(30px, 10.2564102564vw, 50px);
margin-bottom: -1.7948717949vw;
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img .user-icon {
width: 5.859375vw;
height: 5.859375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img .user-icon {
width: clamp(20px, 8.2051282051vw, 40px);
height: clamp(20px, 8.2051282051vw, 40px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img::before {
content: "2nd";
color: #AFAFAF;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img::before {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .img::before {
font-size: clamp(6px, 2.0512820513vw, 10px);
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .name-box {
padding: 1.640625vw 1.25vw 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .name-box {
padding: clamp(5px, 2.5641025641vw, 12px) clamp(3px, 1.5384615385vw, 8px) clamp(3px, 1.5384615385vw, 8px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.second .point-box .point {
color: #AAA3A3;
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img {
background: linear-gradient(147deg, #FFECAB 21.97%, #96833F 44.46%, #FFECAB 67.64%, #96833F 90.13%);
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img {
width: 8.203125vw;
height: 8.203125vw;
margin-bottom: -1.796875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img {
width: clamp(34px, 11.2820512821vw, 50px);
height: clamp(34px, 11.2820512821vw, 50px);
margin-bottom: -2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img .user-icon {
width: 6.640625vw;
height: 6.640625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img .user-icon {
width: clamp(28px, 8.9743589744vw, 40px);
height: clamp(28px, 8.9743589744vw, 40px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img::before {
content: "1st";
color: #9B8845;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img::before {
font-size: 1.875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .img::before {
font-size: clamp(8px, 2.5641025641vw, 12px);
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .name-box {
padding: 3.125vw 1.25vw 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .name-box {
padding: clamp(10px, 4.1025641026vw, 20px) clamp(4px, 1.7948717949vw, 10px) clamp(3px, 1.5384615385vw, 8px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.r-first .point-box .point {
color: #A79451;
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img {
background: linear-gradient(147deg, #CC9D66 21.97%, #917048 44.46%, #CC9D66 67.64%, #917048 90.13%);
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img {
width: 6.640625vw;
height: 6.640625vw;
margin-bottom: -0.625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img {
width: clamp(26px, 9.2307692308vw, 40px);
height: clamp(26px, 9.2307692308vw, 40px);
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img .user-icon {
width: 5.078125vw;
height: 5.078125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img .user-icon {
width: clamp(18px, 6.9230769231vw, 30px);
height: clamp(18px, 6.9230769231vw, 30px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img::before {
content: "3rd";
color: #96734B;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img::before {
font-size: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .img::before {
font-size: clamp(6px, 2.0512820513vw, 10px);
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .name-box {
padding: 0.625vw 1.25vw 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .name-box {
padding: clamp(3px, 1.2820512821vw, 7px) clamp(4px, 1.7948717949vw, 10px) clamp(3px, 1.5384615385vw, 8px);
}
}
.ranking .inner .main .ranking-bord .ranking-list .list-item.top-group .rank .rank-item.third .point-box .point {
color: #A79451;
}
.ranking .inner .main .ranking-bord .onward {
display: flex;
flex-direction: column;
counter-reset: rank 3;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward {
gap: 0.78125vw;
margin-top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward {
gap: clamp(2px, 1.0256410256vw, 6px);
margin-top: 1.0256410256vw;
}
}
.ranking .inner .main .ranking-bord .onward li {
background: #FFFFFF;
display: flex;
align-items: center;
position: relative;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li {
border-radius: 0.78125vw;
padding: 0.390625vw 3.515625vw 0.390625vw 3.984375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li {
border-radius: clamp(2px, 1.2820512821vw, 10px);
padding: clamp(1px, 0.5128205128vw, 3px) clamp(5px, 2.3076923077vw, 12px) clamp(1px, 0.5128205128vw, 3px) clamp(15px, 5.3846153846vw, 30px);
}
}
.ranking .inner .main .ranking-bord .onward li .img {
position: relative;
border-radius: 50%;
background: #B29975;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li .img {
width: 4.6875vw;
height: 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .img {
width: clamp(15px, 6.4102564103vw, 30px);
height: clamp(15px, 6.4102564103vw, 30px);
}
}
.ranking .inner .main .ranking-bord .onward li .img .user-icon {
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
translate: -50% -50%;
background: #FFFFFF;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li .img .user-icon {
width: 3.90625vw;
height: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .img .user-icon {
width: clamp(10px, 5.1282051282vw, 25px);
height: clamp(10px, 5.1282051282vw, 25px);
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li .img .user-icon .display__character {
margin-top: 0.46875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .img .user-icon .display__character {
margin-top: 0.2564102564vw;
}
}
.ranking .inner .main .ranking-bord .onward li .img .user-icon .display__character .selected_items-character-character {
width: 90%;
margin: 0 auto;
}
.ranking .inner .main .ranking-bord .onward li .name {
font-weight: 900;
color: #B29975;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li .name {
font-size: 1.25vw;
margin-left: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .name {
font-size: clamp(8px, 2.5641025641vw, 12px);
margin-left: 1.2820512821vw;
}
}
.ranking .inner .main .ranking-bord .onward li .point-box {
display: flex;
align-items: center;
margin-left: auto;
}
.ranking .inner .main .ranking-bord .onward li .point-box .icon {
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) {
.ranking .inner .main .ranking-bord .onward li .point-box .icon {
width: 2.265625vw;
height: 2.421875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .point-box .icon {
width: clamp(8px, 3.0769230769vw, 15px);
height: clamp(8px, 3.3333333333vw, 15px);
}
}
.ranking .inner .main .ranking-bord .onward li .point-box .point {
color: #F5A274;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li .point-box .point {
font-size: 1.5625vw;
margin-left: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .point-box .point {
font-size: clamp(8px, 2.5641025641vw, 12px);
margin-left: clamp(2px, 0.7692307692vw, 5px);
}
}
.ranking .inner .main .ranking-bord .onward li .point-box .point span {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li .point-box .point span {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li .point-box .point span {
font-size: clamp(7px, 2.3076923077vw, 9px);
}
}
.ranking .inner .main .ranking-bord .onward li::before {
content: counter(rank);
counter-increment: rank;
color: #F5A274;
position: absolute;
font-weight: 900;
top: 50%;
translate: 0 -50%;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .ranking-bord .onward li::before {
font-size: 1.25vw;
margin-right: 1.5625vw;
left: 1.640625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .ranking-bord .onward li::before {
font-size: clamp(5px, 2.0512820513vw, 10px);
margin-right: 2.0512820513vw;
left: 1.7948717949vw;
}
}
.ranking .inner .main .btn-area {
position: absolute;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area {
right: 3.125vw;
bottom: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area {
right: clamp(-15px, -3.8461538462vw, -19.5px);
bottom: 2.5641025641vw;
}
}
.ranking .inner .main .btn-area .ranking-btn {
color: #FFFFFF;
background: linear-gradient(143deg, #F3A22E 21.68%, #DFCA79 80.36%);
border-radius: 50%;
display: grid;
place-items: center center;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area .ranking-btn {
width: 11.71875vw;
height: 11.71875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area .ranking-btn {
width: clamp(48px, 16.6666666667vw, 70px);
height: clamp(48px, 16.6666666667vw, 70px);
}
}
.ranking .inner .main .btn-area .ranking-btn p {
position: relative;
z-index: 1;
text-align: center;
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area .ranking-btn p {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area .ranking-btn p {
font-size: clamp(6px, 2.0512820513vw, 10px);
}
}
.ranking .inner .main .btn-area .ranking-btn::before {
content: "";
background: linear-gradient(143deg, #B29975 21.68%, #DFCA79 80.36%);
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: all 0.3s ease;
}
.ranking .inner .main .btn-area .switch-btn {
background-image: url("../img/rank-switch-btn.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
cursor: pointer;
opacity: 0;
display: none;
transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area .switch-btn {
width: 11.71875vw;
height: 5.3125vw;
padding-top: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area .switch-btn {
width: clamp(48px, 16.6666666667vw, 70px);
height: clamp(24px, 7.6923076923vw, 35px);
padding-top: clamp(6px, 2.0512820513vw, 10px);
}
}
.ranking .inner .main .btn-area .switch-btn-TX {
text-align: center;
font-weight: 800;
color: #B29975;
transition: all 0.2s ease;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area .switch-btn-TX {
font-size: 1.09375vw;
letter-spacing: 0.046875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area .switch-btn-TX {
font-size: clamp(5px, 1.5384615385vw, 7px);
letter-spacing: clamp(0.3px, 0.1025641026vw, 0.6px);
}
}
.ranking .inner .main .btn-area .switch-btn-TX:hover {
color: #F3A32E;
transition: all 0.2s ease;
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area .switch-btn.switch-btn01 {
top: -10.9375vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area .switch-btn.switch-btn01 {
top: -70px;
}
}
@media screen and (min-width: 768px) {
.ranking .inner .main .btn-area .switch-btn.switch-btn02 {
top: -5.46875vw;
}
}
@media screen and (max-width: 767px) {
.ranking .inner .main .btn-area .switch-btn.switch-btn02 {
top: -35px;
}
}
.ranking .inner .main .btn-area.click .ranking-btn {
animation: poyon 0.8s ease 0s forwards;
}
@keyframes poyon {
0% {
transform: scale(1, 1) translate(0%, 0%);
}
15% {
transform: scale(0.9, 0.9) translate(0%, 5%);
}
30% {
transform: scale(1.3, 0.8) translate(0%, 10%);
}
50% {
transform: scale(0.8, 1.3) translate(0%, -10%);
}
70% {
transform: scale(1.1, 0.9) translate(0%, 5%);
}
100% {
transform: scale(1, 1) translate(0%, 0%);
}
}
.ranking .inner .main .btn-area.click .ranking-btn::before {
opacity: 0;
transition: all 0.3s ease;
}
.ranking .inner .main .btn-area.click .switch-btn {
opacity: 0;
display: block;
transition: all 0.3s ease;
transform: translateY(100%);
animation: up 0.5s ease 0s forwards;
}
@keyframes up {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hidden {
display: none;
}
/* -----------------------
load
----------------------- */
.btn-box {
position: relative;
}
@media screen and (min-width: 768px) {
.btn-box .columns_search {
padding: 0.46875vw 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.btn-box .columns_search {
padding: 1.5384615385vw 0.7692307692vw;
position: absolute;
bottom: -5.1282051282vw;
left: -5.1282051282vw;
}
}
.btn-box .columns_search .search-item form {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4;
}
.btn-box .columns_search .search-item form button {
aspect-ratio: 18/16;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
width: 18px;
}
@media screen and (max-width: 767px) {
.btn-box .columns_search .search-item form button {
width: 4.6153846154vw;
}
}
.btn-box .columns_search .search-item form input {
color: #7fbf99;
font-weight: 600;
line-height: 140%;
letter-spacing: 1px;
border: none;
background: #e2f9eb;
outline: none;
}
@media screen and (min-width: 768px) {
.btn-box .columns_search .search-item form input {
border-radius: 1.5625vw;
font-size: 0.78125vw;
width: 11.015625vw;
height: 1.5625vw;
padding: 0vw 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.btn-box .columns_search .search-item form input {
letter-spacing: 0.2564102564vw;
border-radius: 5.1282051282vw;
width: 20.5128205128vw;
height: 5.1282051282vw;
padding: 0vw 3.0769230769vw;
font-size: 2.5641025641vw;
}
}
.btn-box .columns_search .search-item form input::placeholder {
color: #7fbf99;
}
@media screen and (max-width: 767px) {
.sp-wrap {
height: 100vh;
position: relative;
}
}
.sp-wrap .road-wappaer {
background: linear-gradient(180deg, #bcfaff 0%, #fff 100%);
position: relative;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer {
width: 100%;
height: 100vh;
}
}
@media screen and (min-width: 768px) and (min-width: 768px) {
.sp-wrap .road-wappaer {
min-height: 700px;
}
}
@media screen and (min-width: 768px) and (max-width: 767px) {
.sp-wrap .road-wappaer {
min-height: 650px;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer {
width: 100%;
height: 100vh;
}
}
.sp-wrap .road-wappaer .daytime-deco {
background-image: url("../img/daytime.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
opacity: 0;
position: absolute;
bottom: 0;
right: 0;
transition: all 1s;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .daytime-deco {
width: 42.890625vw;
height: 33.90625vw;
bottom: 19.53125vw;
z-index: 30;
}
}
.sp-wrap .road-wappaer .moon-deco {
position: absolute;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .moon-deco {
width: 7.1875vw;
height: 7.109375vw;
bottom: 44.0625vw;
left: 21.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .moon-deco {
width: 92px;
height: 91px;
bottom: 564px;
left: 76px;
}
}
.sp-wrap .road-wappaer.morning {
background: linear-gradient(180deg, #7abbe7 0%, #f3d4c4 26.92%, #fcf3c6 35.58%);
}
.sp-wrap .road-wappaer.daytime {
background: linear-gradient(180deg, #47a2f7 0%, #72e3f9 24.04%, #c5f3fc 33.42%);
}
.sp-wrap .road-wappaer.daytime .daytime-deco.show {
opacity: 1;
transition: all 1s;
}
.sp-wrap .road-wappaer.afternoon {
background: linear-gradient(180deg, #76d8ff 0%, #e8be8d 23.08%, #d58a6d 37.98%);
}
.sp-wrap .road-wappaer.afternoon .moon-deco {
background-image: url("../img/afternoon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer.night {
background: linear-gradient(180deg, #012658 0%, #155796 22.6%, #62c6d4 36.54%);
}
.sp-wrap .road-wappaer.night .moon-deco {
background-image: url("../img/night.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .cloud-box .road-cloud {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(1), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(7) {
width: 19.53125vw;
height: 12.5vw;
bottom: 43.046875vw;
left: -7.03125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(1), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(7) {
width: 250px;
height: 160px;
bottom: 551px;
left: -90px;
}
}
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(2) {
z-index: 10;
scale: -1 1;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(2) {
width: 11.484375vw;
height: 8.4375vw;
bottom: 37.03125vw;
left: 0;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(2) {
width: 120px;
height: 77px;
bottom: 510px;
left: -20px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(3), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(9) {
width: 13.125vw;
height: 9.6875vw;
bottom: 38.671875vw;
left: 15.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(3), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(9) {
width: 168px;
height: 124px;
bottom: 395px;
left: 95px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(4), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(8) {
width: 11.484375vw;
height: 8.4375vw;
bottom: 43.28125vw;
right: 39.21875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(4), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(8) {
width: 147px;
height: 108px;
bottom: 554px;
right: 502px;
}
}
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(5), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(10) {
scale: -1 1;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(5), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(10) {
width: 9.921875vw;
height: 7.265625vw;
bottom: 45vw;
right: 6.328125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(5), .sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(10) {
width: 127px;
height: 93px;
bottom: 476px;
right: 81px;
}
}
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(6) {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(6) {
width: 11.484375vw;
height: 8.4375vw;
bottom: 38.828125vw;
right: -1.5625vw;
}
}
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(11) {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(11) {
width: 22.65625vw;
height: 16.40625vw;
bottom: -4.6875vw;
left: -5.46875vw;
}
}
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(12) {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .cloud-box .road-cloud:nth-child(12) {
width: 17.578125vw;
height: 13.28125vw;
bottom: -3.125vw;
right: -7.8125vw;
}
}
.sp-wrap .road-wappaer .cloud-box .road-cloud.road-cloud02 {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .archive--contents--tab {
z-index: 40;
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--tab {
top: 0;
padding: 4.6875vw 0 0 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--tab {
top: 5.1282051282vw;
gap: 2.5641025641vw;
padding: 6.4102564103vw 0 0 3.8461538462vw;
}
}
.sp-wrap .road-wappaer .archive--contents--tab .archive--item {
background-image: url("../img/icon-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item {
min-width: 6.484375vw;
height: 9.84375vw;
top: -2.734375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item {
min-width: 16.6666666667vw;
height: 26.9230769231vw;
top: -5.1282051282vw;
}
}
.sp-wrap .road-wappaer .archive--contents--tab .archive--item--img {
position: relative;
left: 50%;
top: 65%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item--img {
width: 4.6875vw;
height: 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item--img {
width: 12.8205128205vw;
height: 12.8205128205vw;
}
}
.sp-wrap .road-wappaer .archive--contents--tab .archive--item--title {
text-align: center;
}
.sp-wrap .road-wappaer .archive--contents--tab .archive--item--title .TX {
display: none;
}
.sp-wrap .road-wappaer .archive--contents--tab .archive--item:hover {
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item:hover {
top: -3.359375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item:hover {
top: -6.4102564103vw;
}
}
.sp-wrap .road-wappaer .archive--contents--tab .archive--item.active {
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item.active {
top: -0.78125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--tab .archive--item.active {
top: -1.2820512821vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap {
display: none;
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap {
overflow-x: scroll;
width: 115%;
position: absolute;
bottom: -42px;
left: 0;
flex-direction: end;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap.active {
display: block;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 40;
width: 100%;
top: 0;
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header {
height: 4.6875vw;
padding-inline: 2.65625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header {
height: 15.3846153846vw;
position: fixed;
padding-inline: 2.5641025641vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .TL {
color: #FFFFFF;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .TL {
font-size: 1.796875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .TL {
font-size: 3.5897435897vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box {
display: flex;
margin-left: auto;
align-items: center;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box {
gap: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box {
gap: 2.0512820513vw;
align-items: start;
margin-top: -2.5641025641vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn {
background: linear-gradient(180deg, #d9d5bb 0%, #b99e76 100%);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
color: #FFFFFF;
position: relative;
cursor: pointer;
transition: all 0.3s ease-in-out;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn {
width: 13.28125vw;
height: 2.734375vw;
border-radius: 0.3125vw;
border: 0.078125vw solid #FFFFFF;
line-height: 2.734375vw;
padding-left: 1.015625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn {
width: 25.641025641vw;
height: 5.1282051282vw;
border-radius: 0.7692307692vw;
border: 0.2564102564vw solid #fff;
line-height: 4.6153846154vw;
padding-left: 1.2820512821vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn::before {
content: "〉";
position: absolute;
top: 65%;
transform: translateY(-50%) rotate(90deg);
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn::before {
font-size: 1.25vw;
right: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn::before {
font-size: 2.8205128205vw;
right: 0.5128205128vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn::after {
content: "道のり投稿一覧";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn::after {
letter-spacing: 0.0625vw;
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn::after {
font-size: 2.5641025641vw;
letter-spacing: 0.2051282051vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn.active::after {
content: "一覧を閉じる";
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .list-btn:hover {
transition: all 0.3s ease-in-out;
box-shadow: unset;
transform: translate(2px, 2px);
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn {
border-radius: 0.3125vw;
padding: 0.3125vw 0.625vw 0.390625vw 0.3125vw;
border-width: 0.078125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn {
border-radius: 1.0256410256vw;
padding: 0.7692307692vw 1.2820512821vw 0.7692307692vw 1.0256410256vw;
border-width: 0.2564102564vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner {
display: flex;
align-items: flex-end;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner {
gap: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner {
gap: 0.7692307692vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner__img {
width: 2.578125vw;
height: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner__img {
width: 6.4102564103vw;
height: 4.6153846154vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner__text .TX {
color: #fff;
font-weight: 600;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 1.25vw;
letter-spacing: 0.0625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 3.5897435897vw;
letter-spacing: 0.2051282051vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn:hover {
box-shadow: unset;
transform: translate(2px, 2px);
}
.sp-wrap .road-wappaer .archive--contents--items--wap .road-header .btn-box .road-menu-btn .C_all-menu-btn:hover .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list {
background-color: #C9EBD9;
width: 100%;
height: 100%;
position: fixed;
top: -100%;
left: 0;
z-index: 35;
transition: all 0.3s;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner {
padding: 16.25vw 3.4375vw 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner {
padding: 33.3333333333vw 5.1282051282vw 12.8205128205vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul {
display: flex;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul {
flex-wrap: wrap;
gap: 1.171875vw 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul {
flex-direction: column;
gap: 3.8461538462vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li {
background: #FFFFFF;
position: relative;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li {
width: 45.78125vw;
padding: 0.703125vw 0.859375vw;
border-radius: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li {
padding: 1.5384615385vw 2.0512820513vw;
border-radius: 0.5128205128vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--img {
background-color: #FFFFFF;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--img img {
width: 13.28125vw;
height: 7.578125vw;
border-radius: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--img img {
width: 23.0769230769vw;
height: 13.0769230769vw;
border-radius: 0.5128205128vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--title {
width: 100%;
background-color: #FFFFFF;
display: grid;
place-items: center center;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--title {
height: 7.578125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--title {
height: 13.0769230769vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--title .TL {
color: #646464;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--title .TL {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li .post-link .items--title .TL {
font-size: 3.0769230769vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li::before {
content: "";
background: linear-gradient(93deg, #5bad83 1.53%, #acdec3 63.13%);
transition: all 0.3s;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list-inner ul li:hover::before {
opacity: 1;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .post-list.active {
top: 0;
transition: all 0.3s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section {
z-index: 5;
position: absolute;
bottom: 0;
display: none;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section {
width: 100vw;
height: 54.6875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section {
position: static;
margin-left: -50px;
width: 1280px;
height: 700px;
overflow: hidden;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner {
position: relative;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner {
width: 80.625vw;
height: 28.125vw;
margin: 17.8125vw 0 0 16.40625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner {
position: absolute;
width: 983px;
height: 360px;
bottom: 16%;
margin-left: 210px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content {
width: 100%;
height: 100%;
pointer-events: none;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content {
position: relative;
width: 100%;
height: 100%;
pointer-events: none;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents {
width: 100%;
height: 80%;
position: absolute;
z-index: 9;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents {
top: 53%;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents {
top: 50%;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents .not-login {
text-align: center;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents::before {
content: "";
position: absolute;
top: 4%;
aspect-ratio: 30/45;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
animation: arrow 1s infinite;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents::before {
width: 2.34375vw;
right: 0%;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents::before {
width: 5.1282051282vw;
right: 0%;
}
}
@keyframes arrow {
0%, 100% {
transform: translateX(0%);
}
50% {
transform: translateX(-50%);
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items {
position: absolute;
overflow-x: scroll;
overflow-y: hidden;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items {
width: 80%;
top: 60%;
right: 0;
translate: 0 -50%;
padding: 6.25vw 0 0;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items {
width: 95%;
height: fit-content;
margin: 0 auto;
top: 50%;
left: 50%;
translate: -50% -50%;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap {
display: none;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap {
gap: 2.734375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap {
gap: 5.1282051282vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap.active {
display: flex;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items {
aspect-ratio: 2/1;
flex-shrink: 0;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items {
width: 32.109375vw;
display: flex;
flex-direction: column;
gap: 1.796875vw;
padding-right: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items {
width: 50%;
display: flex;
flex-direction: column;
gap: 5.1282051282vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items:hover .items--title {
background-color: #f38549;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items:hover .items--title .TL {
color: #FFFFFF;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--img {
width: 100%;
aspect-ratio: 411/268;
border-radius: 5px;
background-color: #ffffff;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--img {
padding: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--img {
padding: 2.5641025641vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--img .img {
aspect-ratio: 376/236;
width: 100%;
height: fit-content;
object-fit: cover;
object-position: center;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--title {
width: 100%;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.7058823529);
border: solid #f38549;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--title {
padding: 0.234375vw 0;
border-width: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--title {
padding: 0.7692307692vw 0;
border-width: 0.5128205128vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--title .TL {
text-align: center;
font-weight: 800;
color: #f38549;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--title .TL {
font-size: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .road-content .archive--contents--items--wap .archive--items .items--title .TL {
font-size: 4.1025641026vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination {
position: absolute;
pointer-events: auto;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap {
position: relative;
left: 73%;
width: fit-content;
display: block;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal {
display: block;
background-image: url("../img/goal.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 21;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal {
width: 8.359375vw;
height: 4.84375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal {
width: 107px;
height: 62px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.clear {
background-image: url("../img/clear.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not {
background-image: url("../img/not.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not {
width: 6.484375vw;
height: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not {
width: 83px;
height: 40px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not ~ .title-board {
filter: brightness(0.5);
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next {
background-image: url("../img/next-goal.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next {
width: 7.890625vw;
height: 5.3125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next {
width: 101px;
height: 68px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next ~ .title-board {
filter: none;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next::before {
content: "";
position: absolute;
pointer-events: none;
bottom: -30%;
left: 50%;
translate: -50% 0;
background-image: url("../img/next-goal-bg.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform-style: preserve-3d;
backface-visibility: hidden;
animation: next-goal-bg 3s infinite linear;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next::before {
width: 19.53125vw;
height: 19.53125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal.not.next::before {
width: 250px;
height: 250px;
}
}
@keyframes next-goal-bg {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal-bg {
position: relative;
z-index: 5;
background-image: url("../img/goal-bg.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal-bg {
width: 9.921875vw;
height: 4.765625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .goal-bg {
width: 127px;
height: 61px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .title-board {
background-image: url("../img/road-board.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 20;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .title-board {
width: 6.71875vw;
height: 6.171875vw;
top: -3.90625vw;
left: -0.390625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .title-board {
width: 86px;
height: 79px;
top: -50px;
left: 0;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .title-board .board-TX {
color: #FFFFFF;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .title-board .board-TX {
width: 6.5625vw;
height: 2.96875vw;
line-height: 2.96875vw;
padding: 0.390625vw 0 0 0.78125vw;
font-size: 0.859375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap .title-board .board-TX {
width: 84px;
height: 38px;
line-height: 38px;
padding: 5px 0 0 10px;
font-size: 11px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .goal-wrap:hover .goal {
transition: all 0.2s;
scale: 1.15;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box {
bottom: 0;
translate: -50% 0;
z-index: 21;
pointer-events: none;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .character {
transition: left 0.5s ease;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .character {
width: 4.453125vw;
height: 4.21875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .character {
width: 57px;
height: 54px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .name {
position: relative;
width: 100%;
font-weight: 600;
letter-spacing: 0.05em;
padding: 4px 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 13px;
font-size: 12px;
color: #333;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .name::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
background: #fff;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
transform: translateX(-50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .name {
font-size: 0.78125vw;
text-align: center;
bottom: -1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box .name {
font-size: 13px;
text-align: center;
bottom: -10px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me {
z-index: 100;
animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-5%);
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me {
top: -7.8125vw !important;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me {
top: -100px !important;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me .display__character {
position: relative;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me .display__character {
width: 4.375vw;
height: 5.078125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me .display__character {
width: 56px;
height: 65px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me .display__character::after {
content: "";
position: absolute;
background-image: url("../img/me.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me .display__character::after {
width: 12.890625vw;
height: 20.078125vw;
top: -13.28125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination .character-box.me .display__character::after {
width: 165px;
height: 257px;
top: -170px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me) .character {
animation: purun 0.8s linear 0s 1;
}
@keyframes purun {
0% {
transform: scale(1, 1) translate(0%, 0%);
}
15% {
transform: scale(0.9, 0.9) translate(0%, 5%);
}
30% {
transform: scale(1.3, 0.8) translate(0%, 10%);
}
50% {
transform: scale(0.8, 1.3) translate(0%, -50%);
}
70% {
transform: scale(1.1, 0.9) translate(0%, 5%);
}
100% {
transform: scale(1, 1) translate(0%, 0%);
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(1) .character {
animation-delay: 0.05s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(2) .character {
animation-delay: 0.1s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(3) .character {
animation-delay: 0.15s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(4) .character {
animation-delay: 0.2s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(5) .character {
animation-delay: 0.25s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(6) .character {
animation-delay: 0.3s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(7) .character {
animation-delay: 0.35s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(8) .character {
animation-delay: 0.4s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(9) .character {
animation-delay: 0.45s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .content .destination:hover .character-box:not(.me):nth-child(10) .character {
animation-delay: 0.5s;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .section-arrow {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
pointer-events: auto;
position: absolute;
z-index: 22;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .section-arrow {
width: 3.59375vw;
height: 9.375vw;
bottom: 19.53125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .section-arrow {
width: 46px;
height: 120px;
bottom: 200px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .section-arrow.next-section {
right: 0;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .section-arrow.back-section {
scale: -1 1;
left: 0;
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section .road-inner .section-arrow.back-section {
left: -140px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section::before {
content: "";
position: absolute;
mix-blend-mode: plus-lighter;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1 {
background-image: url("../img/road-bg.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1 {
margin-bottom: -3.125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1 .road-inner {
margin-bottom: -30px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1 .content .tree {
background-image: url("../img/page1-tree.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 15;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1 .content .tree {
width: 10.3125vw;
height: 11.796875vw;
right: 23.75vw;
bottom: 10.15625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1 .content .tree {
width: 132px;
height: 151px;
right: 304px;
bottom: 159px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1::before {
background-image: url("../img/filter-A.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page1::before {
width: 84.921875vw;
height: 32.421875vw;
bottom: 7.8125vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6 {
background-image: url("../img/bg-b.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6 {
margin-bottom: -3.125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2 .road-inner, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3 .road-inner, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4 .road-inner, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5 .road-inner, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6 .road-inner {
margin-bottom: -30px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6 .road-inner .content .tree {
background-image: url("../img/page2-tree.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
position: absolute;
z-index: 15;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6 .road-inner .content .tree {
width: 19.140625vw;
height: 18.28125vw;
left: 14.53125vw;
bottom: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5 .road-inner .content .tree, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6 .road-inner .content .tree {
width: 245px;
height: 234px;
left: 186px;
bottom: 50px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6::before {
background-image: url("../img/filter-B.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
left: 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6::before {
width: 90.234375vw;
height: 31.015625vw;
bottom: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page2::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page3::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-5::before, .sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page4-6::before {
width: 1155px;
height: 397px;
bottom: 100px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 {
background-image: url("../img/bg-c.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 {
margin-bottom: -3.125vw;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .load {
background-image: url("../img/load-c.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .load {
width: 55.859375vw;
height: 17.1875vw;
left: 0;
bottom: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .load {
width: 715px;
height: 220px;
left: -66px;
bottom: 100px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content {
pointer-events: none;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .tree {
position: absolute;
z-index: 5;
pointer-events: none;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .tree-left {
background-image: url("../img/page5-left.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .tree-left {
width: 48.4375vw;
height: 44.140625vw;
left: -11.484375vw;
bottom: 14.765625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .tree-left {
width: 620px;
height: 565px;
left: -147px;
bottom: 189px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .tree-right {
background-image: url("../img/page5-right.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 56.953125vw;
height: 45.859375vw;
right: -22.890625vw;
bottom: 14.21875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .tree-right {
background-image: url("../img/page5-right-sp.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 472px;
height: 675px;
right: -74px;
bottom: 157px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .castle {
background-image: url("../img/goal-castle.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
pointer-events: auto;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .castle {
width: 30.078125vw;
height: 35.46875vw;
right: 25.46875vw;
bottom: 12.734375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .castle {
width: 385px;
height: 454px;
right: 294px;
bottom: 163px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination {
pointer-events: auto;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(1) {
left: -11.640625vw;
bottom: 4.765625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(1) {
left: -149px;
bottom: 58px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(2) {
left: 3.515625vw;
bottom: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(2) {
left: 45px;
bottom: 24px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(3) {
left: 17.1875vw;
bottom: -1.71875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(3) {
left: 220px;
bottom: -22px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) {
rotate: -90deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) {
left: 33.4375vw;
bottom: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) {
left: 410px;
bottom: 20px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .goal-wrap,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .character-box {
rotate: 90deg;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .character-box.me {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .character-box.me {
bottom: -7.8125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .character-box.me {
bottom: -100px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .character-box .title-board {
left: -5.46875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5 .road-inner .content .road-content .destination:nth-child(4) .character-box .title-board {
left: -70px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5::before {
background-image: url("../img/filter-C.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
left: 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5::before {
width: 91.953125vw;
height: 19.84375vw;
bottom: 5.46875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5::before {
width: 1177px;
height: 254px;
bottom: 70px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage {
display: block;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination {
rotate: -11deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination {
width: 39.0625vw;
left: 2.890625vw !important;
bottom: 4.453125vw !important;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination {
width: 500px;
left: 49px !important;
bottom: 79px !important;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination .goal-wrap,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination .character-box {
rotate: 11deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination .character-box .title-board {
left: -5.46875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.one-post .destination .character-box .title-board {
left: -70px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road {
width: 6.71875vw;
height: 15.46875vw;
left: 49.53125vw;
bottom: 7.578125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road {
width: 86px;
height: 198px;
left: 563px;
bottom: 97px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(1) {
left: 18.90625vw;
bottom: -1.796875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(1) {
left: 270px;
bottom: -23px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) {
rotate: -90deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) {
width: 6.25vw;
left: 34.765625vw;
bottom: 2.734375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) {
left: 409px;
bottom: 20px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .goal-wrap,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .character-box {
rotate: 90deg;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .character-box.me {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .character-box.me {
bottom: -21.015625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .character-box.me {
bottom: -269px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .character-box .title-board {
left: -5.46875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.two-posts .road-inner .content .road-content .destination:nth-child(2) .character-box .title-board {
left: -70px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road {
width: 27.65625vw;
height: 16.015625vw;
left: 28.4375vw;
bottom: 7.03125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road {
width: 354px;
height: 205px;
left: 298px;
bottom: 90px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(1) {
left: 0.78125vw;
bottom: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(1) {
left: 10px;
bottom: 32px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(2) {
left: 20.15625vw;
bottom: -2.734375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(2) {
left: 218px;
bottom: -35px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) {
rotate: -90deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) {
left: 33.203125vw;
bottom: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) {
left: 408px;
bottom: 20px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .goal-wrap,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .character-box {
rotate: 90deg;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .character-box.me {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .character-box.me {
bottom: -21.015625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .character-box.me {
bottom: -269px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .character-box .title-board {
left: -5.46875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.three-posts .road-inner .content .road-content .destination:nth-child(3) .character-box .title-board {
left: -70px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road {
width: 51.015625vw;
height: 16.015625vw;
left: 8.75vw;
bottom: 6.796875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road {
width: 653px;
height: 205px;
left: 45px;
bottom: 87px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(1) {
left: -13.515625vw;
bottom: 3.28125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(1) {
left: -173px;
bottom: 42px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(2) {
left: 2.34375vw;
bottom: 1.71875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(2) {
left: 30px;
bottom: 13px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(3) {
left: 20.15625vw;
bottom: -2.734375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(3) {
left: 258px;
bottom: -35px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) {
rotate: -90deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) {
left: 33.203125vw;
bottom: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) {
left: 409px;
bottom: 20px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .goal-wrap,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .character-box {
rotate: 90deg;
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .character-box.me {
z-index: 10;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .character-box.me {
bottom: -21.015625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .goal-wrap.me,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .character-box.me {
bottom: -269px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .character-box .title-board {
left: -5.46875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .goal-wrap .title-board,
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.page5.onepage.four-posts .road-inner .content .road-content .destination:nth-child(4) .character-box .title-board {
left: -70px;
}
}
.sp-wrap .road-wappaer .archive--contents--items--wap .page-section.show {
display: block;
}
.sp-wrap .road-wappaer .road-chat {
position: absolute;
z-index: 30;
height: fit-content;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .road-chat {
left: 0;
bottom: 3.515625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat {
bottom: 45px;
left: 0;
}
}
.sp-wrap .road-wappaer .road-chat #simple-ajax-chat {
display: none;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content #latest-messages {
padding-left: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content #latest-messages {
padding-left: 15px;
}
}
.sp-wrap .road-wappaer .road-chat .C_chat-content #latest-messages .sac-chat-name {
display: none;
}
.sp-wrap .road-wappaer .road-chat .C_chat-content .timeline-wrap .timeline {
background: linear-gradient(0deg, rgba(92, 92, 92, 0) 0%, rgba(92, 92, 92, 0.4) 15.5%, rgba(92, 92, 92, 0.6) 29%, rgba(92, 92, 92, 0.6) 71.5%, rgba(92, 92, 92, 0.4) 87.5%, rgba(92, 92, 92, 0) 100%);
color: #F1FCD4;
position: relative;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .timeline-wrap .timeline {
font-size: 0.78125vw;
width: 12.890625vw;
height: fit-content;
padding: 1.171875vw 0.78125vw;
margin-top: 1.796875vw;
line-height: 1.5;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .timeline-wrap .timeline {
font-size: 10px;
width: 165px;
height: fit-content;
padding: 15px 10px;
margin-top: 23px;
line-height: 1.5;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .timeline-wrap .timeline::before {
content: "CHAT";
color: #857763;
background: #FFFDED;
position: absolute;
font-size: 14px;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
top: -20px;
animation: good-jamp 2s ease 1s infinite;
}
@keyframes good-jamp {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(15%);
}
100% {
transform: translateY(0%);
}
}
}
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction {
background: #F69064;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction {
width: 12.890625vw;
border-radius: 0 1.171875vw 1.171875vw 0;
margin-top: 1.796875vw;
padding: 0.78125vw 0.625vw 0.78125vw 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction {
width: 165px;
border-radius: 0 15px 15px 0;
margin-top: 23px;
padding: 10px 8px 10px 10px;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .TX {
font-size: 13px;
}
}
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .reaction-counter {
position: absolute;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .reaction-counter {
top: 2.34375vw;
right: 5.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .reaction-counter {
top: 30px;
right: 67px;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .reaction-counter {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .coin-counter {
margin: 0.234375vw 0 0 auto;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .road-chat .C_chat-content .C_reaction .coin-counter {
margin: 3px 0 0 auto;
}
}
.sp-wrap .road-wappaer .under-menu {
position: absolute;
z-index: 99;
background: rgba(92, 92, 92, 0.5);
width: 100%;
transition: all 0.5s;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu {
padding: 5vw 2.96875vw 2.65625vw;
bottom: -12.5vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu {
padding: 53px 10px 18px 10px;
bottom: -87px;
}
}
.sp-wrap .road-wappaer .under-menu .menu-arrow {
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow {
top: 1.09375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow {
top: 15px;
}
}
.sp-wrap .road-wappaer .under-menu .menu-arrow::before, .sp-wrap .road-wappaer .under-menu .menu-arrow::after {
content: "";
position: absolute;
background-color: #FFFFFF;
top: 0;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow::before, .sp-wrap .road-wappaer .under-menu .menu-arrow::after {
border-radius: 0.3125vw;
width: 2.34375vw;
height: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow::before, .sp-wrap .road-wappaer .under-menu .menu-arrow::after {
width: 14px;
height: 2px;
border-radius: 2px;
}
}
.sp-wrap .road-wappaer .under-menu .menu-arrow::before {
rotate: -30deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow::before {
right: -0.234375vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow::before {
right: -1px;
}
}
.sp-wrap .road-wappaer .under-menu .menu-arrow::after {
rotate: 30deg;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow::after {
left: -0.3125vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu .menu-arrow::after {
left: -2px;
}
}
.sp-wrap .road-wappaer .under-menu .menu-box {
display: flex;
justify-content: right;
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu .menu-box {
gap: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu .menu-box {
gap: 10px;
}
}
@media screen and (min-width: 768px) {
.sp-wrap .road-wappaer .under-menu .menu-box .btn {
width: 7.1875vw;
height: 7.1875vw;
}
}
@media screen and (max-width: 767px) {
.sp-wrap .road-wappaer .under-menu .menu-box .btn {
width: 57px;
height: 57px;
}
}
.sp-wrap .road-wappaer .under-menu .menu-box .btn.road-my-btn {
background-image: url("../img/my-btn.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .under-menu .menu-box .btn.road-ranking-btn {
background-image: url("../img/ranking-btn.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .under-menu .menu-box .btn.road-column-btn {
background-image: url("../img/column-btn.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .under-menu .menu-box .btn.road-question-btn {
background-image: url("../img/question-btn.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .under-menu .menu-box .btn.road-game-btn {
background-image: url("../img/game-btn.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-wrap .road-wappaer .under-menu.open {
bottom: 0;
transition: all 0.5s;
}
/* -----------------------
archive-question
----------------------- */
.question {
background: linear-gradient(180deg, #9EC653 0%, #FDFFEF 98.5%);
}
@media screen and (min-width: 768px) {
.question {
padding: 3.75vw 0 3.046875vw;
height: 100vh;
}
}
@media screen and (max-width: 767px) {
.question {
height: 100vh;
padding: 80px 0 25px;
}
}
@media screen and (max-width: 767px) and (min-width: 768px) {
.question {
min-height: 700px;
}
}
@media screen and (max-width: 767px) and (max-width: 767px) {
.question {
min-height: 650px;
}
}
.question .question-main {
background: #FDFFEF;
position: relative;
}
@media screen and (min-width: 768px) {
.question .question-main {
width: 89.140625vw;
height: 87.5714285714vh;
margin: auto;
border-radius: 1.40625vw;
padding: 7.578125vw 5.078125vw 3.125vw 4.765625vw;
box-shadow: inset 0px 0px 0.78125vw 0px rgba(0, 0, 0, 0.25);
display: flex;
}
}
@media screen and (max-width: 767px) {
.question .question-main {
width: clamp(300px, 76.9230769231vw, 420px);
height: 580px;
margin: auto;
border-radius: 3.8461538462vw;
padding: 40px 5.1282051282vw;
box-shadow: inset 0px 0px 2.5641025641vw 0px rgba(0, 0, 0, 0.25);
}
}
.question .question-main .question--menu-btn {
position: absolute;
}
@media screen and (min-width: 768px) {
.question .question-main .question--menu-btn {
top: 0.625vw;
right: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main .question--menu-btn {
top: -60px;
right: min(-7.6923076923vw, -30px);
}
}
@media screen and (max-width: 370px) {
.question .question-main .question--menu-btn {
right: 0vw;
}
}
.question .question-main .question--menu-btn .C_all-menu-btn {
box-shadow: 0px 3.314px 6.629px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.question .question-main .question--menu-btn .C_all-menu-btn {
border-radius: 1.035703125vw;
padding: 0.390625vw 0.78125vw 0.46875vw 0.546875vw;
border-width: 0.15625vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main .question--menu-btn .C_all-menu-btn {
border-radius: clamp(12px, 3.8461538462vw, 118px);
padding: clamp(1px, 0.7692307692vw, 5px) clamp(2px, 1.2820512821vw, 8px) clamp(2px, 1.0256410256vw, 6px) clamp(2px, 1.2820512821vw, 8px);
border-width: 0.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.question .question-main .question--menu-btn .C_all-menu-btn__inner {
gap: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main .question--menu-btn .C_all-menu-btn__inner {
gap: clamp(1px, 0.7692307692vw, 5px);
}
}
@media screen and (min-width: 768px) {
.question .question-main .question--menu-btn .C_all-menu-btn__inner__img {
width: 3.90625vw;
height: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main .question--menu-btn .C_all-menu-btn__inner__img {
width: clamp(30px, 8.9743589744vw, 40px);
height: clamp(20px, 6.4102564103vw, 30px);
}
}
.question .question-main .question--menu-btn .C_all-menu-btn__inner__text .TX {
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.question .question-main .question--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 1.875vw;
letter-spacing: 0.078125vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main .question--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: clamp(12px, 3.8461538462vw, 18px);
}
}
.question .question-main .question--menu-btn .C_all-menu-btn:hover {
transform: translate(3.314px, 3.314px);
}
@media screen and (max-width: 767px) {
.question .question-main .question--menu-btn .C_all-menu-btn:hover {
transform: translate(2px, 2px);
}
}
.question .question-main .question--menu-btn .C_all-menu-btn:hover .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.question .question-main-TL {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.question .question-main-TL {
width: 50.78125vw;
height: 9.53125vw;
top: -3.125vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main-TL {
width: clamp(250px, 64.1025641026vw, 330px);
height: 12.8205128205vw;
top: -5.1282051282vw;
}
}
.question .question-main-TL .TL {
color: #FFFFFF;
font-weight: 900;
text-align: center;
}
@media screen and (min-width: 768px) {
.question .question-main-TL .TL {
font-size: 3.125vw;
margin-top: 1.5625vw;
letter-spacing: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.question .question-main-TL .TL {
font-size: clamp(14px, 4.358974359vw, 25px);
margin-top: clamp(0px, 3.0769230769vw, 30px);
letter-spacing: 0.4358974359vw;
}
}
@media screen and (min-width: 768px) {
.question .question-main-post {
width: 54.6875vw;
padding-right: 3.671875vw;
border-right: 0.15625vw dashed #7FBF99;
}
}
@media screen and (max-width: 767px) {
.question .question-main-post {
padding-bottom: clamp(10px, 5.1282051282vw, 20px);
border-bottom: 0.5128205128vw dashed #7FBF99;
}
}
.question .post-modal {
display: none;
position: relative;
z-index: 10;
overflow: scroll;
}
.question .post-modal .letter {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
translate: -50% -50%;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter {
width: clamp(848px, 66.25vw, 1102.4px);
height: clamp(848px, 66.25vw, 1102.4px);
top: 45%;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter {
width: clamp(360px, 92.3076923077vw, 468px);
height: clamp(368px, 94.358974359vw, 478.4px);
top: 40%;
}
}
.question .post-modal .letter .note-bg {
background: #FFFFFF;
position: absolute;
left: 50%;
translate: -50% -50%;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg {
height: clamp(578px, 45.15625vw, 751.4px);
top: 55%;
aspect-ratio: 619/578;
padding: clamp(32px, 2.5vw, 41.6px) clamp(40px, 3.125vw, 52px) clamp(70px, 5.46875vw, 91px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg {
height: clamp(247px, 63.3333333333vw, 321.1px);
aspect-ratio: 619/578;
top: 60%;
padding: clamp(13px, 3.3333333333vw, 16.9px) clamp(18px, 4.6153846154vw, 23.4px) clamp(32px, 8.2051282051vw, 41.6px);
}
}
.question .post-modal .letter .note-bg .img-icon {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .img-icon {
width: clamp(20px, 1.5625vw, 26px);
height: clamp(20px, 1.5625vw, 26px);
margin: clamp(-17px, -1.328125vw, -22.1px) 0 0 auto;
top: clamp(15px, 1.171875vw, 19.5px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .img-icon {
width: clamp(9px, 2.3076923077vw, 11.7px);
height: clamp(9px, 2.3076923077vw, 11.7px);
margin: clamp(-12px, -3.0769230769vw, -15.6px) 0 0 auto;
top: clamp(15px, 3.8461538462vw, 19.5px);
}
}
.question .post-modal .letter .note-bg .img-icon::before {
content: "↑";
position: absolute;
z-index: 10;
color: #7FBF99;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .img-icon::before {
font-size: clamp(10px, 0.78125vw, 13px);
top: clamp(-5px, -0.390625vw, -6.5px);
right: clamp(0px, 0vw, 0px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .img-icon::before {
font-size: clamp(6px, 1.5384615385vw, 7.8px);
top: clamp(-3px, -0.7692307692vw, -3.9px);
right: 0;
}
}
.question .post-modal .letter .note-bg .img-icon::after {
content: "";
position: absolute;
background: #FFFFFF;
top: 0;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .img-icon::after {
width: clamp(3px, 0.234375vw, 3.9px);
height: clamp(2px, 0.15625vw, 2.6px);
right: clamp(3px, 0.234375vw, 3.9px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .img-icon::after {
width: clamp(2px, 0.5128205128vw, 2.6px);
height: clamp(1px, 0.2564102564vw, 1.3px);
right: clamp(2px, 0.5128205128vw, 2.6px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .C_menu {
justify-content: left;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .C_menu .menu-item {
padding: 3px 6px;
}
}
.question .post-modal .letter .note-bg .comment-form-content .C_menu .select-content {
z-index: 1;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-respond .comment-reply-title {
display: none;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form {
position: relative;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .error-message {
position: absolute;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .error-message {
margin-top: clamp(-12px, -0.9375vw, -15.6px);
font-size: clamp(10px, 0.78125vw, 13px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .error-message {
margin-top: clamp(-10px, -2.5641025641vw, -13px);
font-size: clamp(8px, 2.0512820513vw, 10.4px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .logged-in-as {
display: none;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-image {
position: absolute;
opacity: 0;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-image {
top: clamp(-35px, -2.734375vw, -45.5px);
right: 0;
width: clamp(30px, 2.34375vw, 39px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-image {
top: clamp(-40px, -10.2564102564vw, -52px);
right: clamp(-4px, -1.0256410256vw, -5.2px);
width: clamp(20px, 5.1282051282vw, 26px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-image label {
display: none;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-image .comment_image {
max-width: 100%;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title {
display: flex;
position: relative;
align-items: center;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title {
border-top: clamp(2px, 0.15625vw, 2.6px) solid #7FBF99;
border-bottom: clamp(2px, 0.15625vw, 2.6px) solid #7FBF99;
margin-top: clamp(15px, 1.171875vw, 19.5px);
padding: clamp(13px, 1.015625vw, 16.9px) 0;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title {
border-top: clamp(1px, 0.2564102564vw, 1.3px) solid #7FBF99;
border-bottom: clamp(1px, 0.2564102564vw, 1.3px) solid #7FBF99;
margin-top: clamp(12px, 3.0769230769vw, 15.6px);
padding: clamp(5px, 1.2820512821vw, 6.5px) 0;
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title label {
display: none;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title #comtitle {
width: 100%;
height: 100%;
border: none;
outline: none;
color: #6D6D6D;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title #comtitle {
margin-left: clamp(11px, 0.859375vw, 14.3px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title #comtitle {
margin-left: clamp(6px, 1.5384615385vw, 7.8px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title::before {
content: "";
background-image: url("../img/staff-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title::before {
width: clamp(30px, 2.34375vw, 39px);
height: clamp(30px, 2.34375vw, 39px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title::before {
width: clamp(13px, 3.3333333333vw, 16.9px);
height: clamp(13px, 3.3333333333vw, 16.9px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title::after {
content: "タイトルを記入";
position: absolute;
color: #D9D9D9;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title::after {
left: clamp(40px, 3.125vw, 52px);
font-size: clamp(16px, 1.25vw, 20.8px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title::after {
left: clamp(23px, 5.8974358974vw, 29.9px);
font-size: clamp(10px, 2.5641025641vw, 13px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-title.input-has-value::after {
display: none;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment {
width: 100%;
color: #6D6D6D;
background-image: linear-gradient(90deg, rgba(127, 191, 153, 0) 0%, rgba(127, 191, 153, 0) 55%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%), linear-gradient(180deg, rgba(127, 191, 153, 0) 0%, rgba(127, 191, 153, 0) 96.5%, rgb(127, 191, 153) 96%);
background-repeat: repeat-x, repeat-y;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment {
font-size: clamp(12px, 0.9375vw, 15.6px);
height: clamp(382px, 29.84375vw, 496.6px);
line-height: 2em;
background-size: clamp(6px, 0.46875vw, 7.8px) 100%, 100% 2em;
padding: 0 clamp(10px, 0.78125vw, 13px);
border-bottom: clamp(2px, 0.15625vw, 2.6px) solid #7FBF99;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment {
font-size: clamp(10px, 2.5641025641vw, 13px);
height: clamp(148px, 37.9487179487vw, 192.4px);
line-height: 1.7em;
background-size: clamp(6px, 1.5384615385vw, 7.8px) 100%, 100% 1.7em;
padding: 0 clamp(5px, 1.2820512821vw, 6.5px);
border-bottom: clamp(1px, 0.2564102564vw, 1.3px) solid #7FBF99;
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment label {
display: none;
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment #comment {
width: 100%;
height: 95%;
background: none;
border: none;
outline: none;
color: #6D6D6D;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment #comment {
font-size: clamp(14px, 1.09375vw, 18.2px);
line-height: 1.7em;
padding-left: clamp(10px, 0.78125vw, 13px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .comment-form-comment #comment {
font-size: clamp(10px, 2.5641025641vw, 13px);
line-height: 1.7em;
padding-left: clamp(5px, 1.2820512821vw, 6.5px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit {
position: absolute;
width: fit-content;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit {
margin: 3% 0 0 auto;
right: 0;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit {
margin-left: auto;
bottom: -13%;
right: 0;
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit input {
background: #7FBF99;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 0;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25), inset 0px 0px 10px 0px #BCF3D3;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit input {
width: clamp(141px, 11.015625vw, 183.3px);
height: clamp(27px, 2.109375vw, 35.1px);
padding: clamp(7px, 0.546875vw, 9.1px) clamp(25px, 1.953125vw, 32.5px);
border-radius: clamp(5px, 0.390625vw, 6.5px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit input {
width: clamp(81px, 20.7692307692vw, 105.3px);
height: clamp(15px, 3.8461538462vw, 19.5px);
border-radius: clamp(3px, 0.7692307692vw, 3.9px);
}
}
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit::before {
content: "質問を送る";
position: absolute;
color: #FFFFFF;
pointer-events: none;
top: 50%;
left: 50%;
translate: -50% -50%;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit::before {
font-size: clamp(12px, 0.9375vw, 15.6px);
letter-spacing: clamp(1.2px, 0.09375vw, 1.56px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .comment-form .form-submit::before {
width: 100%;
font-size: clamp(10px, 2.5641025641vw, 13px);
letter-spacing: clamp(1.2px, 0.3076923077vw, 1.56px);
margin: auto;
text-align: center;
top: 60%;
}
}
.question .post-modal .letter .note-bg .comment-form-content .C_back-btn {
position: absolute;
}
@media screen and (min-width: 768px) {
.question .post-modal .letter .note-bg .comment-form-content .C_back-btn {
bottom: 4%;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .letter .note-bg .comment-form-content .C_back-btn {
bottom: 5%;
}
}
.question .post-modal .success {
display: none;
}
.question .post-modal .success-content {
position: absolute;
background: #FFFFFF;
top: 50%;
left: 50%;
translate: -50% -50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(20px, 1.5625vw, 26px);
}
@media screen and (min-width: 768px) {
.question .post-modal .success-content {
width: 56.640625vw;
height: 37.1875vw;
border-radius: clamp(30px, 2.34375vw, 39px);
padding-top: clamp(20px, 1.5625vw, 26px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .success-content {
width: clamp(300px, 76.9230769231vw, 390px);
aspect-ratio: 1/1;
border-radius: clamp(20px, 5.1282051282vw, 26px);
padding-top: clamp(20px, 5.1282051282vw, 26px);
}
}
.question .post-modal .success-content .TX {
font-weight: 800;
color: #6D6D6D;
text-align: center;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.question .post-modal .success-content .TX {
font-size: clamp(20px, 1.5625vw, 26px);
letter-spacing: clamp(2px, 0.15625vw, 2.6px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .success-content .TX {
font-size: clamp(10px, 2.5641025641vw, 13px);
letter-spacing: clamp(2px, 0.5128205128vw, 2.6px);
}
}
.question .post-modal .success-content .img {
background-image: url("../img/goat.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.question .post-modal .success-content .img {
width: clamp(175px, 13.671875vw, 227.5px);
height: clamp(167px, 13.046875vw, 217.1px);
margin-left: clamp(-50px, -3.90625vw, -65px);
}
}
@media screen and (max-width: 767px) {
.question .post-modal .success-content .img {
width: clamp(72px, 18.4615384615vw, 93.6px);
height: clamp(68px, 17.4358974359vw, 88.4px);
margin-left: -8%;
}
}
@media screen and (min-width: 768px) {
.question .post-modal .success-content .C_back-btn {
margin: clamp(10px, 0.78125vw, 13px) clamp(30px, 2.34375vw, 39px) 0 0;
}
}
@media screen and (max-width: 767px) {
.question .post-modal .success-content .C_back-btn {
margin: clamp(5px, 1.2820512821vw, 6.5px) clamp(15px, 3.8461538462vw, 19.5px) 0 0;
}
}
.question .post-modal.open {
display: block;
width: 100%;
height: 100%;
background: rgba(71, 71, 71, 0.5);
position: fixed;
top: 0;
left: 0;
}
.question-grass {
background-image: url("../img/question-grass.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
bottom: 0;
left: 0;
position: fixed;
}
@media screen and (min-width: 768px) {
.question-grass {
width: clamp(1280px, 100vw, 1664px);
height: clamp(117px, 9.140625vw, 152.1px);
}
}
@media screen and (max-width: 767px) {
.question-grass {
width: 205.1282051282vw;
height: 18.7179487179vw;
}
}
/* -----------------------
single-question
----------------------- */
.question-content {
overflow: scroll;
}
@media screen and (min-width: 768px) {
.question-content {
height: 90.9441233141%;
margin-top: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.question-content {
height: 210px;
margin-top: 22px;
}
}
.question-content .comments-area .comment-list {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list {
gap: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list {
gap: 3.5897435897vw;
}
}
.question-content .comments-area .comment-list li {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li {
gap: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li {
gap: 3.5897435897vw;
}
}
.question-content .comments-area .comment-list li .comment-body {
background: #FFFFFF;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body {
width: 48.359375vw;
padding: 2.5vw 3.203125vw 2.03125vw;
box-shadow: 0 0.078125vw 0.3125vw 0 rgba(0, 0, 0, 0.25);
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body {
width: clamp(220px, 62.8205128205vw, 300px);
padding: 2.8205128205vw 4.1025641026vw 3.8461538462vw;
box-shadow: 0 0.2564102564vw 1.0256410256vw 0 rgba(0, 0, 0, 0.25);
}
}
.question-content .comments-area .comment-list li .comment-body .comment-title {
color: #6D6D6D;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body .comment-title {
font-size: 1.25vw;
margin: -1.953125vw 0 0.390625vw 3.125vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body .comment-title {
font-size: clamp(10px, 3.0769230769vw, 18px);
margin: -3.8461538462vw 0 1.2820512821vw 6.6666666667vw;
}
}
.question-content .comments-area .comment-list li .comment-body .vcard, .question-content .comments-area .comment-list li .comment-body .reply-comment-title {
display: none;
}
.question-content .comments-area .comment-list li .comment-body .commentmetadata {
font-size: 0;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body .commentmetadata {
padding-top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body .commentmetadata {
padding-top: 5px;
}
}
.question-content .comments-area .comment-list li .comment-body .commentmetadata::before {
content: "";
display: block;
width: 100%;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body .commentmetadata::before {
border-bottom: 0.15625vw solid #7FBF99;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body .commentmetadata::before {
border-bottom: 0.2564102564vw solid #7FBF99;
}
}
.question-content .comments-area .comment-list li .comment-body p {
width: 100%;
color: #6D6D6D;
background-image: linear-gradient(90deg, rgba(127, 191, 153, 0) 0%, rgba(127, 191, 153, 0) 55%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%), linear-gradient(180deg, rgba(127, 191, 153, 0) 0%, rgba(127, 191, 153, 0) 96.5%, rgb(127, 191, 153) 96%);
background-repeat: repeat-x, repeat-y;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body p {
font-size: 0.9375vw;
line-height: 2em;
background-size: 0.46875vw 100%, 100% 2em;
padding-left: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body p {
font-size: clamp(10px, 2.5641025641vw, 12px);
line-height: 2em;
background-size: 1.5384615385vw 100%, 100% 2em;
padding-left: 1.2820512821vw;
}
}
.question-content .comments-area .comment-list li .comment-body .post-title {
background: rgba(156, 196, 83, 0.24);
color: #7FBF99;
width: fit-content;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body .post-title {
font-size: 0.78125vw;
letter-spacing: 0.078125vw;
padding: 0.390625vw 1.09375vw;
border-radius: 1.5625vw;
margin: 1.09375vw 0vw 0vw auto;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body .post-title {
font-size: clamp(8px, 2.0512820513vw, 12px);
letter-spacing: 0.2051282051vw;
padding: 0.7692307692vw 2.5641025641vw;
border-radius: 5.1282051282vw;
margin: 2.0512820513vw 0 0 auto;
}
}
.question-content .comments-area .comment-list li .comment-body .comment-image img {
width: 100%;
}
.question-content .comments-area .comment-list li .comment-body .reply {
display: none;
}
.question-content .comments-area .comment-list li .comment-body::before {
content: "";
background-image: url("../img/staff-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
top: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list li .comment-body::before {
width: 2.5vw;
height: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list li .comment-body::before {
width: clamp(19px, 4.8717948718vw, 32px);
height: clamp(19px, 4.8717948718vw, 32px);
}
}
.question-content .comments-area .comment-list .children .comment-body {
margin-left: auto;
position: relative;
}
.question-content .comments-area .comment-list .children .comment-body .commentmetadata::before {
border-bottom: 0.15625vw solid #F1D23E;
}
.question-content .comments-area .comment-list .children .comment-body p {
background-image: linear-gradient(90deg, rgba(127, 191, 153, 0) 0%, rgba(127, 191, 153, 0) 55%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%), linear-gradient(180deg, rgba(127, 191, 153, 0) 0%, rgba(127, 191, 153, 0) 96.5%, rgb(241, 210, 62) 96%);
}
.question-content .comments-area .comment-list .children .comment-body .post-title {
display: none;
}
.question-content .comments-area .comment-list .children .comment-body::before {
background-image: url("../img/teacher-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.question-content .comments-area .comment-list .children .comment-body::after {
content: "講師からの回答";
position: absolute;
background: #FCF2C0;
color: #F1B43E;
left: 0;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.question-content .comments-area .comment-list .children .comment-body::after {
padding: 0.46875vw 1.640625vw 0.46875vw 1.171875vw;
border-radius: 1.5625vw 1.5625vw 1.5625vw 0;
font-size: 1.25vw;
letter-spacing: 0.125vw;
top: -1.171875vw;
}
}
@media screen and (max-width: 767px) {
.question-content .comments-area .comment-list .children .comment-body::after {
padding: 0.7692307692vw 2.5641025641vw 0.7692307692vw 1.2820512821vw;
border-radius: 5.1282051282vw 5.1282051282vw 5.1282051282vw 0;
font-size: clamp(12px, 3.0769230769vw, 15px);
letter-spacing: 0.2564102564vw;
top: -2.5641025641vw;
}
}
.question-content .comments-area .comment-respond {
display: none;
}
/* -----------------------
page-cover
----------------------- */
.cover-wrapper {
position: relative;
background: linear-gradient(180deg, #BCFAFF 0%, #FFF 100%);
height: 100vh;
}
@media screen and (min-width: 768px) {
.cover-wrapper {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper {
min-height: 650px;
}
}
.cover-wrapper .cover {
background-image: url("../img/cover-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover {
width: 100%;
height: 100%;
}
}
.cover-wrapper .cover-header {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
z-index: 20;
width: 100%;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-header {
height: 4.6875vw;
padding: 1.171875vw 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-header {
height: clamp(32px, 8.2051282051vw, 41.6px);
padding: clamp(7px, 1.7948717949vw, 9.1px) clamp(10px, 2.5641025641vw, 13px);
}
}
.cover-wrapper .cover-header .TL {
color: #FFFFFF;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-header .TL {
font-size: min(1.796875vw, 23px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-header .TL {
font-size: 3.0769230769vw;
}
}
.cover-wrapper .cover-header .TL a {
font-weight: 500;
color: #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}
.cover-wrapper .cover-header .TL a:hover {
opacity: 0.7;
}
.cover-wrapper .cover-header .btn {
background-image: url("../img/butterfly03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-header .btn {
width: min(7.34375vw, 94px);
height: min(6.953125vw, 89px);
top: min(0.78125vw, 10px);
right: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-header .btn {
width: 10.2564102564vw;
height: 9.2307692308vw;
top: 5.1282051282vw;
right: 2.5641025641vw;
}
}
.cover-wrapper .cover-header .btn::before {
content: "ジャンル選択";
position: relative;
color: #C2DFE7;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-header .btn::before {
font-size: min(1.09375vw, 14px);
right: min(5.078125vw, 65px);
letter-spacing: min(0.1171875vw, 1.5px);
top: 0;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-header .btn::before {
font-size: 2.5641025641vw;
right: 8.9743589744vw;
letter-spacing: 0.3846153846vw;
white-space: nowrap;
top: -5.1282051282vw;
}
}
.cover-wrapper .cover-header .btn::after {
content: "";
position: relative;
border-right: min(0.234375vw, 3px) solid #C2DFE7;
border-bottom: min(0.234375vw, 3px) solid #C2DFE7;
rotate: -135deg;
display: block;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-header .btn::after {
width: min(0.859375vw, 11px);
height: min(0.859375vw, 11px);
right: min(1.953125vw, 25px);
top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-header .btn::after {
width: 1.5384615385vw;
height: 1.5384615385vw;
right: 2.5641025641vw;
top: -3.0769230769vw;
}
}
.cover-wrapper .cover .tab-wrap {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: -500px;
z-index: 10;
transition: all 0.5s;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tab-wrap {
width: 100vw;
height: 15.625vw;
padding: 5.234375vw min(0vw, 0px) 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .tab-wrap {
width: 100%;
height: clamp(100px, 25.641025641vw, 130px);
}
}
.cover-wrapper .cover .tab-wrap .archive--contents--tab {
z-index: 20;
position: absolute;
width: 98%;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tab-wrap .archive--contents--tab {
top: 5.703125vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .tab-wrap .archive--contents--tab {
top: clamp(35px, 8.9743589744vw, 45.5px);
width: 98%;
gap: clamp(15px, 3.8461538462vw, 19.5px);
}
}
.cover-wrapper .cover .tab-wrap .archive--contents--tab .archive--item--img {
margin: 0 auto;
aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tab-wrap .archive--contents--tab .archive--item--img {
width: 6.25vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .tab-wrap .archive--contents--tab .archive--item--img {
width: clamp(40px, 10.2564102564vw, 52px);
}
}
.cover-wrapper .cover .tab-wrap .archive--contents--tab .archive--item--title {
text-align: center;
}
.cover-wrapper .cover .tab-wrap.show {
top: 0;
transition: all 0.5s;
z-index: 11;
}
.cover-wrapper .cover .chara-link {
position: absolute;
}
.cover-wrapper .cover .chara-link .link {
background: #FFFFFF;
color: #898069;
position: absolute;
z-index: 10;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link .link {
white-space: nowrap;
padding: min(1.640625vw, 21px) min(2.5vw, 32px);
border-radius: min(7.8125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link .link {
white-space: nowrap;
padding: clamp(5px, 1.2820512821vw, 6.5px) clamp(10px, 2.5641025641vw, 13px);
border-radius: min(7.8125vw, 100px);
}
}
.cover-wrapper .cover .chara-link .link::before {
content: "";
background: #FFFFFF;
position: absolute;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link .link::before {
width: min(1.953125vw, 25px);
height: min(0.78125vw, 10px);
bottom: min(-0.625vw, -8px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link .link::before {
width: clamp(10px, 2.5641025641vw, 13px);
height: clamp(5px, 1.2820512821vw, 6.5px);
bottom: clamp(-2px, -0.5128205128vw, -2.6px);
}
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.koinubox {
bottom: min(14.0625vw, 180px);
left: min(6.25vw, 80px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.koinubox {
bottom: clamp(140px, 35.8974358974vw, 182px);
left: clamp(-20px, -5.1282051282vw, -26px);
}
}
.cover-wrapper .cover .chara-link.koinubox .koinu {
background-image: url("../img/koinu.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: all 1s;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.koinubox .koinu {
width: min(14.609375vw, 187px);
height: min(15.46875vw, 198px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.koinubox .koinu {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(100px, 25.641025641vw, 130px);
}
}
.cover-wrapper .cover .chara-link.koinubox .koinu:hover {
transform-origin: center bottom;
transition: all 2s;
rotate: 20deg;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.koinubox .link {
top: min(-6.640625vw, -85px);
left: min(5.46875vw, 70px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.koinubox .link {
top: clamp(-50px, -12.8205128205vw, -65px);
left: clamp(20px, 5.1282051282vw, 26px);
}
}
.cover-wrapper .cover .chara-link.koinubox .link::before {
clip-path: polygon(90% 0, 100% 100%, 10% 100%);
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.koinubox .link::before {
right: min(2.5vw, 32px);
rotate: -45deg;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.koinubox .link::before {
right: clamp(20px, 5.1282051282vw, 26px);
rotate: -45deg;
bottom: clamp(-5px, -1.2820512821vw, -6.5px);
}
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.goatbox {
bottom: min(9.375vw, 120px);
right: clamp(0.625vw, 0.625vw, 8px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.goatbox {
bottom: clamp(100px, 25.641025641vw, 130px);
right: clamp(-20px, -5.1282051282vw, -26px);
}
}
.cover-wrapper .cover .chara-link.goatbox .goat {
background-image: url("../img/goat.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: all 1s;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.goatbox .goat {
width: min(18.75vw, 240px);
height: min(17.96875vw, 230px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.goatbox .goat {
width: clamp(130px, 33.3333333333vw, 169px);
height: clamp(130px, 33.3333333333vw, 169px);
}
}
.cover-wrapper .cover .chara-link.goatbox .goat:hover {
transform-origin: center bottom;
transition: all 2s;
rotate: -20deg;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.goatbox .link {
top: min(-4.765625vw, -61px);
left: min(-1.5625vw, -20px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.goatbox .link {
top: clamp(-30px, -7.6923076923vw, -39px);
left: clamp(10px, 2.5641025641vw, 13px);
}
}
.cover-wrapper .cover .chara-link.goatbox .link::before {
clip-path: polygon(10% 0, 100% 100%, 10% 100%);
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .chara-link.goatbox .link::before {
rotate: 45deg;
left: min(1.953125vw, 25px);
bottom: min(-0.390625vw, -5px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .chara-link.goatbox .link::before {
rotate: 45deg;
left: clamp(10px, 2.5641025641vw, 13px);
bottom: clamp(-5px, -1.2820512821vw, -6.5px);
}
}
.cover-wrapper .cover .tree {
background-image: url("../img/top-tree05.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tree.tree01 {
width: min(46.40625vw, 594px);
height: min(52.421875vw, 671px);
bottom: min(12.578125vw, 161px);
left: clamp(-162px, -12.65625vw, -100px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .tree.tree01 {
width: clamp(280px, 71.7948717949vw, 364px);
height: clamp(380px, 97.4358974359vw, 494px);
bottom: min(36.1538461538vw, 141px);
left: clamp(-180px, -30.7692307692vw, -120px);
}
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tree.tree02 {
width: min(43.984375vw, 563px);
height: min(51.09375vw, 654px);
bottom: min(8.828125vw, 113px);
right: clamp(-230px, -16.796875vw, -180px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .tree.tree02 {
width: clamp(300px, 76.9230769231vw, 390px);
height: clamp(400px, 102.5641025641vw, 520px);
bottom: min(25.8974358974vw, 101px);
right: clamp(-200px, -38.4615384615vw, -150px);
}
}
.cover-wrapper .cover .tree01-02 {
background-image: url("../img/top-tree01-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tree01-02 {
width: clamp(500px, 53.125vw, 680px);
height: clamp(800px, 85.3125vw, 1092px);
bottom: -3.90625vw;
right: clamp(-220px, -51.2820512821vw, -200px);
z-index: 10;
}
}
.cover-wrapper .cover .tree03 {
background-image: url("../img/cover-tree.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .tree03 {
width: clamp(470px, 43.984375vw, 43.984375vw);
height: clamp(550px, 51.09375vw, 51.09375vw);
bottom: 113px;
right: clamp(-22.65625vw, -15.625vw, -215px);
}
}
.cover-wrapper .cover-content {
height: 100%;
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content {
width: 43.59375vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content {
width: fit-content;
}
}
.cover-wrapper .cover-content .intermediate-page {
position: absolute;
left: 50%;
translate: -50% -50%;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page {
top: 40%;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page {
top: 32%;
}
}
.cover-wrapper .cover-content .intermediate-page .TL-wrap {
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) {
.cover-wrapper .cover-content .intermediate-page .TL-wrap {
width: min(43.59375vw, 558px);
height: auto;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .TL-wrap {
width: clamp(280px, 71.7948717949vw, 364px);
height: auto;
}
}
.cover-wrapper .cover-content .intermediate-page .TL-wrap .post-TL {
color: #7F8180;
text-align: center;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .TL-wrap .post-TL {
padding: min(1.171875vw, 15px) min(6.25vw, 80px) min(3.671875vw, 47px);
font-size: min(2.34375vw, 30px);
line-height: 1.2;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .TL-wrap .post-TL {
padding: clamp(30px, 7.6923076923vw, 39px) clamp(40px, 10.2564102564vw, 52px) clamp(43px, 11.0256410256vw, 55.9px);
font-size: clamp(18px, 4.6153846154vw, 23.4px);
line-height: 1.2;
}
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .TL-wrap .post-TL.error {
margin-top: min(-3.125vw, -40px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .TL-wrap .post-TL.error {
margin-top: clamp(-40px, -10.2564102564vw, -52px);
}
}
.cover-wrapper .cover-content .intermediate-page .post-thumbnail {
position: relative;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail {
width: min(43.59375vw, 558px);
height: min(26.09375vw, 334px);
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail {
width: clamp(280px, 71.7948717949vw, 364px);
height: clamp(168px, 43.0769230769vw, 218.4px);
margin: 0 auto;
}
}
.cover-wrapper .cover-content .intermediate-page .post-thumbnail a img {
background-size: contain;
height: 100%;
width: 100%;
}
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy {
border-radius: 999px;
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 100;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy {
height: min(4.921875vw, 63px);
line-height: min(4.921875vw, 63px);
padding-inline: min(1.484375vw, 19px);
box-shadow: 0 min(0.46875vw, 6px) min(0.78125vw, 10px) rgba(0, 0, 0, 0.2);
top: min(-2.34375vw, -30px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy {
height: clamp(43px, 11.0256410256vw, 55.9px);
line-height: clamp(43px, 11.0256410256vw, 55.9px);
padding-inline: clamp(19px, 4.8717948718vw, 24.7px);
box-shadow: 0 clamp(6px, 1.5384615385vw, 7.8px) clamp(10px, 2.5641025641vw, 13px) rgba(0, 0, 0, 0.2);
top: min(-5.1282051282vw, -20px);
}
}
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy_TX {
font-weight: 700;
color: #898069;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy_TX {
font-size: min(1.25vw, 16px);
letter-spacing: min(0.125vw, 1.6px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy_TX {
font-size: clamp(12px, 3.0769230769vw, 15.6px);
letter-spacing: clamp(1.2px, 0.3076923077vw, 1.56px);
}
}
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy_TX span {
font-weight: 700;
color: #F75F9E;
position: relative;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy_TX span {
font-size: min(2.96875vw, 38px);
letter-spacing: min(0.296875vw, 3.8px);
vertical-align: middle;
top: min(-0.390625vw, -5px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .post-thumbnail .buddy_TX span {
font-size: clamp(22px, 5.641025641vw, 28.6px);
letter-spacing: clamp(2.4px, 0.6153846154vw, 3.12px);
vertical-align: middle;
top: clamp(-5px, -1.2820512821vw, -6.5px);
}
}
.cover-wrapper .cover-content .intermediate-page .start-btn-wrap {
position: relative;
}
.cover-wrapper .cover-content .intermediate-page .start-btn {
background: #ED863A;
color: #FFFFFF;
display: block;
width: fit-content;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .intermediate-page .start-btn {
box-shadow: 0px min(0.15625vw, 2px) 0px 0px #E28738, 0px 0px min(2.65625vw, 34px) 0px #F6D741 inset;
padding: min(1.171875vw, 15px) min(5.703125vw, 73px);
border-radius: min(0.390625vw, 5px);
margin: min(4.296875vw, 55px) auto 0;
letter-spacing: min(0.0859375vw, 1.1px);
font-size: min(1.796875vw, 23px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .intermediate-page .start-btn {
box-shadow: 0px clamp(2px, 0.5128205128vw, 2.6px) 0px 0px #E28738, 0px 0px clamp(34px, 8.7179487179vw, 44.2px) 0px #F6D741 inset;
padding: clamp(15px, 3.8461538462vw, 19.5px) clamp(53px, 13.5897435897vw, 68.9px);
border-radius: clamp(5px, 1.2820512821vw, 6.5px);
margin: clamp(25px, 6.4102564103vw, 32.5px) auto 0;
letter-spacing: clamp(1.1px, 0.2820512821vw, 1.43px);
font-size: clamp(18px, 4.6153846154vw, 23.4px);
}
}
.cover-wrapper .cover-content .shironeko-wrap {
position: absolute;
z-index: 50;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .shironeko-wrap {
width: min(20.078125vw, 257px);
height: min(19.53125vw, 250px);
left: min(-10.46875vw, -134px);
bottom: 7.03125vw;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .shironeko-wrap {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(150px, 38.4615384615vw, 195px);
left: clamp(-150px, -38.4615384615vw, -195px);
bottom: clamp(90px, 23.0769230769vw, 117px);
}
}
.cover-wrapper .cover-content .shironeko-wrap .shironeko {
background-image: url("../img/shironeko.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .shironeko-wrap .shironeko {
width: min(20.078125vw, 257px);
height: min(19.53125vw, 250px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .shironeko-wrap .shironeko {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(150px, 38.4615384615vw, 195px);
}
}
.cover-wrapper .cover-content .shironeko-wrap .shadow {
background-image: url("../img/shironeko-shadow.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover-content .shironeko-wrap .shadow {
width: min(15.078125vw, 193px);
height: min(3.046875vw, 39px);
margin: -15px auto;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover-content .shironeko-wrap .shadow {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(20px, 5.1282051282vw, 26px);
margin: -10px auto;
}
}
.cover-wrapper .cover .back-wrap {
position: absolute;
pointer-events: none;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .back-wrap {
width: min(44.453125vw, 569px);
height: min(82.109375vw, 1051px);
bottom: 0;
left: clamp(-300px, -23.4375vw, -200px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .back-wrap {
width: clamp(200px, 51.2820512821vw, 260px);
height: clamp(370px, 94.8717948718vw, 481px);
top: clamp(-160px, -41.0256410256vw, -208px);
left: clamp(-100px, -25.641025641vw, -130px);
}
}
.cover-wrapper .cover .back-wrap .back {
background-image: url("../img/back-balloon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .back-wrap .back {
width: min(44.453125vw, 569px);
height: min(82.109375vw, 1051px);
bottom: 0;
left: clamp(-300px, -23.4375vw, -200px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .back-wrap .back {
width: clamp(200px, 51.2820512821vw, 260px);
height: clamp(370px, 94.8717948718vw, 481px);
top: clamp(-160px, -41.0256410256vw, -208px);
left: clamp(-100px, -25.641025641vw, -130px);
}
}
.cover-wrapper .cover .back-wrap .TX {
position: absolute;
color: #FFFFFF;
pointer-events: fill;
}
@media screen and (min-width: 768px) {
.cover-wrapper .cover .back-wrap .TX {
font-size: min(1.5625vw, 20px);
letter-spacing: 0.09375vw;
height: min(3.90625vw, 50px);
bottom: min(19.921875vw, 255px);
right: min(14.765625vw, 189px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .cover .back-wrap .TX {
font-size: clamp(10px, 2.5641025641vw, 13px);
letter-spacing: clamp(1.2px, 0.3076923077vw, 1.56px);
height: clamp(30px, 7.6923076923vw, 39px);
bottom: clamp(80px, 20.5128205128vw, 104px);
right: clamp(65px, 16.6666666667vw, 84.5px);
}
}
.cover-wrapper .board {
position: absolute;
z-index: 20;
}
@media screen and (min-width: 768px) {
.cover-wrapper .board {
width: min(15.78125vw, 202px);
height: min(14.453125vw, 185px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .board {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(91px, 23.3333333333vw, 118.3px);
}
}
.cover-wrapper .board .link-TX {
color: #FFFFFF;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.cover-wrapper .board .link-TX {
font-size: min(2.109375vw, 27px);
letter-spacing: min(0.1015625vw, 1.3px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .board .link-TX {
font-size: clamp(16px, 4.1025641026vw, 20.8px);
letter-spacing: clamp(1.3px, 0.3333333333vw, 1.69px);
}
}
.cover-wrapper .board.next {
background-image: url("../img/next.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.cover-wrapper .board.next {
bottom: -3.125vw;
right: 60px;
padding: min(2.734375vw, 35px) 0 0 min(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .board.next {
bottom: -10px;
right: 0;
padding: clamp(15px, 3.8461538462vw, 19.5px) 0 0 clamp(10px, 2.5641025641vw, 13px);
}
}
.cover-wrapper .board.prev {
background-image: url("../img/back.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.cover-wrapper .board.prev {
bottom: -51px;
right: clamp(210px, 21.484375vw, 275px);
padding: min(2.1875vw, 28px) 0 0 min(3.75vw, 48px);
width: min(13.671875vw, 175px);
height: min(11.71875vw, 150px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .board.prev {
bottom: -27px;
right: 130px;
padding: clamp(17px, 4.358974359vw, 22.1px) 0 0 clamp(23px, 5.8974358974vw, 29.9px);
width: clamp(88px, 22.5641025641vw, 114.4px);
height: clamp(85px, 21.7948717949vw, 110.5px);
}
}
@media screen and (min-width: 768px) {
.cover-wrapper .board.prev .link-TX {
font-size: min(1.796875vw, 23px);
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .board.prev .link-TX {
font-size: clamp(13px, 3.3333333333vw, 16.9px);
}
}
.cover-wrapper .grass {
position: absolute;
}
.cover-wrapper .grass.grass01 {
background-image: url("../img/cover-grass01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.cover-wrapper .grass.grass01 {
width: min(30.390625vw, 389px);
height: min(16.796875vw, 215px);
bottom: -81px;
left: -140px;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .grass.grass01 {
width: clamp(150px, 38.4615384615vw, 195px);
height: clamp(83px, 21.2820512821vw, 107.9px);
bottom: -30px;
left: -10px;
}
}
.cover-wrapper .grass.grass02 {
background-image: url("../img/cover-grass02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
z-index: 30;
}
@media screen and (min-width: 768px) {
.cover-wrapper .grass.grass02 {
width: min(26.328125vw, 337px);
height: min(15.703125vw, 201px);
right: -114px;
bottom: -104px;
}
}
@media screen and (max-width: 767px) {
.cover-wrapper .grass.grass02 {
width: clamp(100px, 25.641025641vw, 130px);
height: clamp(60px, 15.3846153846vw, 78px);
right: -20px;
bottom: -20px;
}
}
/* -----------------------
top new
----------------------- */
/* -----------------------
page-game
----------------------- */
@font-face {
font-family: "BestTenDot";
src: url("../font/BestTen-DOT.woff2") format("woff2"), url("../font/BestTen-DOT.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
.game-main {
height: 100vh;
font-family: "BestTenDot", sans-serif;
background-image: url("../img/game-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: relative;
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.game-main {
min-height: 700px;
}
}
@media screen and (max-width: 767px) {
.game-main {
min-height: 650px;
}
}
@media screen and (min-width: 768px) {
.game-main {
overflow-x: auto;
}
}
.game-main .game-wrap {
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: max(94.53125vw, 1000px);
height: max(52.03125vw, 550px);
padding: 1.40625vw max(3.90625vw, 50px) 0;
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: min(90%, 378px);
aspect-ratio: 378/681;
}
}
.game-main .game-wrap .game--menu-btn {
position: fixed;
z-index: 99;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .game--menu-btn {
top: 0.78125vw;
right: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .game--menu-btn {
top: 10px;
right: 20px;
}
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn {
border-radius: max(1.035703125vw, 13.257px);
padding: max(0.625vw, 8px) max(1.40625vw, 18px) max(0.859375vw, 11px) max(0.625vw, 8px);
border-width: max(0.25890625vw, 3.314px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn {
border-radius: 13.257px;
padding: 3px 5px 4px 5px;
border-width: 2px;
}
}
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner {
display: flex;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner {
gap: max(0.390625vw, 5px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner {
gap: 3px;
}
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner__img {
width: max(6.25vw, 80px);
height: max(3.90625vw, 50px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner__img {
width: 35px;
height: 32px;
}
}
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner__text .TX {
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: max(2.65625vw, 34px);
letter-spacing: max(0.207109375vw, 2.651px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .game--menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 16px;
letter-spacing: 2px;
}
}
.game-main .game-wrap .game--menu-btn .C_all-menu-btn:hover {
transform: translate(3.314px, 3.314px);
}
.game-main .game-wrap .inner {
position: relative;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: max(86.5625vw, 900px);
height: max(42.1875vw, 450px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 80%;
aspect-ratio: 334/569;
top: 5%;
overflow-y: scroll;
}
}
.game-main .game-wrap .inner .game-container {
position: relative;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container {
z-index: 1;
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container {
z-index: 2;
}
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top {
padding: max(4.296875vw, 40px) max(10.15625vw, 90px) max(4.296875vw, 40px) max(8.59375vw, 90px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top {
padding: 5% 3%;
}
}
.game-main .game-wrap .inner .game-container.game-top .TL-box {
display: flex;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .TL-box {
gap: max(2.96875vw, 38px);
align-items: end;
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .TL-box {
flex-direction: column;
gap: min(1.2820512821vw, 5px);
}
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .TL-box .TL img {
width: max(25.859375vw, 266px);
height: max(8.125vw, 83px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .TL-box .TL img {
width: 60%;
height: auto;
}
}
.game-main .game-wrap .inner .game-container.game-top .TL-box .TX {
color: #43505F;
line-height: 1.68;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .TL-box .TX {
font-size: max(1.25vw, 14px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .TL-box .TX {
font-size: min(2.8205128205vw, 11px);
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list {
display: flex;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .level-list {
justify-content: space-between;
width: max(63.984375vw, 700px);
align-items: center;
margin: max(8.4375vw, 80px) auto 0;
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .level-list {
flex-direction: column;
width: 60%;
gap: min(6.4102564103vw, 25px);
margin: min(7.6923076923vw, 30px) auto 0;
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list li .level-item {
display: block;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li .level-item {
width: max(15.625vw, 150px);
height: max(15.625vw, 150px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li .level-item {
width: 100%;
aspect-ratio: 1/1;
margin: 0 auto;
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list li .level-item .item-bg {
background: #B4C1B0;
width: 100%;
height: 100%;
display: grid;
place-items: center center;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li .level-item .item-bg .chara {
width: max(9.453125vw, 100px);
height: max(10.703125vw, 110px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li .level-item .item-bg .chara {
width: 50%;
aspect-ratio: 1/1;
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.beginner .chara {
background-image: url("../img/beginner-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.intermediate .chara {
background-image: url("../img/intermediate-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.advanced .chara {
background-image: url("../img/advanced-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active {
position: relative;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active .level-item .item-bg {
background-image: url("../img/level-hover-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 200%;
background-repeat: repeat;
animation: level 4s linear infinite;
}
@keyframes level {
0% {
background-position: -100% 100%;
}
10% {
background-position: -75% 75%;
}
20% {
background-position: -50% 50%;
}
30% {
background-position: -25% 25%;
}
50% {
background-position: 0 0;
}
70% {
background-position: 25% -25%;
}
80% {
background-position: 50% -50%;
}
90% {
background-position: 75% -75%;
}
100% {
background-position: 100% -100%;
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active::before {
content: "";
background: #45565E;
position: absolute;
z-index: -1;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li.active::before {
width: max(18.671875vw, 190px);
height: max(21.328125vw, 210px);
bottom: max(-1.796875vw, -18px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li.active::before {
width: 110%;
aspect-ratio: 239/260;
bottom: -5%;
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active::after {
content: "";
background-image: url("../img/level01.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li.active::after {
width: max(3.59375vw, 35px);
height: max(1.953125vw, 20px);
top: max(-3.515625vw, -40px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .game-container.game-top .level-list li.active::after {
width: 18%;
aspect-ratio: 46/25;
top: -11%;
}
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active.beginner .item-bg .chara {
background-image: url("../img/beginner-icon-hover.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active.beginner::after {
background-image: url("../img/level01.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active.intermediate .item-bg .chara {
background-image: url("../img/intermediate-icon-hover.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active.intermediate::after {
background-image: url("../img/level02.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active.advanced .item-bg .chara {
background-image: url("../img/advanced-icon-hover.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.game-main .game-wrap .inner .game-container.game-top .level-list li.active.advanced::after {
background-image: url("../img/level03.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box {
position: relative;
display: flex;
bottom: 5%;
}
}
.game-main .game-wrap .inner .chara-box .game-character {
animation: scale 2s infinite 0s reverse;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .game-character {
position: absolute;
z-index: 2;
bottom: max(1.5625vw, 20px);
left: max(5.46875vw, 50px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .game-character {
position: relative;
z-index: 1;
bottom: 5%;
left: 10%;
}
}
@keyframes scale {
0%, 21%, 100% {
transform: scale(1);
}
1%, 20% {
transform: scale(-1, 1);
}
}
.game-main .game-wrap .inner .chara-box .game-character .img {
background-image: url("../img/beginner-icon-hover.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 121/137;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .game-character .img {
width: max(9.453125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .game-character .img {
width: min(25.641025641vw, 100px);
}
}
.game-main .game-wrap .inner .chara-box .text-frame {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 146/52;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .text-frame {
position: absolute;
padding: max(1.09375vw, 12px) 0 max(1.640625vw, 20px);
width: max(11.40625vw, 120px);
left: 13%;
bottom: 29%;
z-index: 2;
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .text-frame {
position: absolute;
padding: min(2.5641025641vw, 10px) 0 min(3.5897435897vw, 12px);
width: min(30.7692307692vw, 120px);
z-index: 1;
left: 40%;
bottom: 100%;
}
}
.game-main .game-wrap .inner .chara-box .text-frame .TX {
color: #43505F;
line-height: 1;
text-align: center;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .text-frame .TX {
font-size: max(1.015625vw, 12px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .text-frame .TX {
font-size: min(3.0769230769vw, 12px);
}
}
.game-main .game-wrap .inner .chara-box .game-mob .img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 82/63;
animation: game-pyon 3s infinite;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .game-mob .img {
position: absolute;
width: max(6.40625vw, 75px);
z-index: 2;
bottom: max(1.5625vw, 20px);
right: max(9.375vw, 100px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .game-mob .img {
position: absolute;
width: min(19.2307692308vw, 75px);
z-index: 1;
bottom: 0;
right: 10%;
}
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .game-mob .img:nth-child(2) {
right: max(18.75vw, 220px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .game-mob .img:nth-child(2) {
display: none;
}
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .inner .chara-box .game-mob .img:nth-child(3) {
right: max(28.125vw, 340px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .inner .chara-box .game-mob .img:nth-child(3) {
display: none;
}
}
@keyframes game-pyon {
0% {
transform: translateY(0%);
}
10% {
transform: translateY(15%);
}
20% {
transform: translateY(-50%);
}
40%, 100% {
transform: translateY(0%);
}
}
.game-main .game-wrap .lever {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .lever {
width: max(4.53125vw, 50px);
height: max(9.921875vw, 100px);
bottom: max(3.90625vw, 40px);
left: max(7.8125vw, 80px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .lever {
width: 10%;
aspect-ratio: 58/127;
bottom: 7%;
left: 10%;
}
}
.game-main .game-wrap .btn {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.game-main .game-wrap .btn {
width: max(9.21875vw, 90px);
height: max(4.21875vw, 40px);
bottom: max(2.34375vw, 20px);
right: max(7.8125vw, 80px);
}
}
@media screen and (max-width: 767px) {
.game-main .game-wrap .btn {
width: 16%;
aspect-ratio: 118/54;
bottom: 7%;
right: 10%;
}
}
.game-main .game-wrap .hdq_aria_label {
color: #43505F !important;
}
/* -----------------------
page-gameTag
----------------------- */
.level-select {
display: flex;
}
@media screen and (min-width: 768px) {
.level-select {
gap: max(3.125vw, 30px);
padding: max(6.25vw, 60px) max(7.8125vw, 80px) 0 max(8.984375vw, 95px);
}
}
@media screen and (max-width: 767px) {
.level-select {
flex-direction: column;
gap: min(3.8461538462vw, 15px);
padding: min(5.1282051282vw, 20px) min(2.5641025641vw, 10px) min(38.4615384615vw, 150px);
}
}
.level-select .category-list ul {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.level-select .category-list ul {
gap: max(2.34375vw, 20px);
}
}
@media screen and (max-width: 767px) {
.level-select .category-list ul {
gap: min(2.5641025641vw, 10px);
padding-left: min(7.6923076923vw, 30px);
}
}
.level-select .category-list ul li a {
color: #EDEFD1;
text-shadow: 0 0 2px #505D51, 0 0 2px #505D51, 0 0 2px #505D51, 0 0 2px #505D51, 0 0 2px #505D51, 0 0 2px #505D51, 0 0 2px #505D51, 0 0 2px #505D51, 0 0 0px #505D51, 0 0 0px #505D51, 0 0 0px #505D51, 0 0 0px #505D51, 0 0 0px #505D51, 0 0 0px #505D51, 0 0 0px #505D51, 0 0 0px #505D51;
text-wrap: nowrap;
}
.level-select .category-list ul li.active {
position: relative;
}
.level-select .category-list ul li.active a {
text-shadow: 0 0 2px #191F22, 0 0 2px #191F22, 0 0 2px #191F22, 0 0 2px #191F22, 0 0 2px #191F22, 0 0 2px #191F22, 0 0 2px #191F22, 0 0 2px #191F22, 0 0 0px #191F22, 0 0 0px #191F22, 0 0 0px #191F22, 0 0 0px #191F22, 0 0 0px #191F22, 0 0 0px #191F22, 0 0 0px #191F22, 0 0 0px #191F22;
}
.level-select .category-list ul li.active::before {
content: "";
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
translate: 0 -50%;
animation: arrow 1s infinite;
}
@keyframes arrow {
0% {
opacity: 1;
transform: translateX(0%);
}
50% {
opacity: 0.3;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@media screen and (min-width: 768px) {
.level-select .category-list ul li.active::before {
width: max(1.5625vw, 15px);
height: max(2.109375vw, 20px);
left: max(-3.515625vw, -35px);
}
}
@media screen and (max-width: 767px) {
.level-select .category-list ul li.active::before {
width: min(5.1282051282vw, 15px);
height: min(6.9230769231vw, 20px);
left: -10%;
}
}
@media screen and (min-width: 768px) {
.level-select .game-post {
width: max(62.5vw, 600px);
overflow-x: scroll;
padding-bottom: max(1.5625vw, 15px);
}
}
@media screen and (max-width: 767px) {
.level-select .game-post {
width: 90%;
margin: 0 auto;
}
}
.level-select .game-post .post-list {
display: flex;
}
@media screen and (min-width: 768px) {
.level-select .game-post .post-list {
gap: max(2.34375vw, 20px);
}
}
@media screen and (max-width: 767px) {
.level-select .game-post .post-list {
flex-direction: column;
gap: min(2.5641025641vw, 10px);
}
}
.level-select .game-post .post-list .game .content {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: grid;
place-items: center center;
}
@media screen and (min-width: 768px) {
.level-select .game-post .post-list .game .content {
width: max(27.5vw, 266px);
height: max(20.390625vw, 198px);
}
}
@media screen and (max-width: 767px) {
.level-select .game-post .post-list .game .content {
width: 100%;
aspect-ratio: 352/261;
}
}
.level-select .game-post .post-list .game .content .thumbnail img {
object-fit: cover;
object-position: center;
}
@media screen and (min-width: 768px) {
.level-select .game-post .post-list .game .content .thumbnail img {
width: max(25.78125vw, 250px);
height: max(18.90625vw, 183px);
}
}
@media screen and (max-width: 767px) {
.level-select .game-post .post-list .game .content .thumbnail img {
width: 90%;
margin: 0 auto;
aspect-ratio: 330/242;
}
}
@media screen and (min-width: 768px) {
.level-select .game-post .post-list .game .post-TL {
margin-top: max(3.125vw, 30px);
}
}
@media screen and (max-width: 767px) {
.level-select .game-post .post-list .game .post-TL {
margin-top: min(5.1282051282vw, 20px);
}
}
.level-select .game-post .post-list .game .post-TL .TL {
color: #505D51;
text-align: center;
display: block;
}
@media screen and (min-width: 768px) {
.level-select .game-post .post-list .game .post-TL .TL {
font-size: max(1.5625vw, 15px);
}
}
@media screen and (max-width: 767px) {
.level-select .game-post .post-list .game .post-TL .TL {
font-size: min(3.8461538462vw, 15px);
}
}
/* -----------------------
result
----------------------- */
.whopper {
background-color: #fff8d7;
width: 100%;
height: 100vh;
}
.whopper .answer {
display: none;
padding: 300px;
}
.whopper .answer.active {
display: block;
}
/* -----------------------
top 1ページ目
----------------------- */
.aptitude-start {
background-color: #CFC6B6;
position: relative;
overflow: hidden;
height: 100vh;
}
@media screen and (max-width: 767px) {
.aptitude-start {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.aptitude-start .TL-wrap {
width: 100%;
}
@media screen and (min-width: 768px) {
.aptitude-start .TL-wrap {
position: absolute;
top: 23.5714285714vh;
padding: max(2.34375vw, 30px) max(3.515625vw, 45px) max(1.796875vw, 23px);
}
}
@media screen and (max-width: 767px) {
.aptitude-start .TL-wrap {
top: 35.3846153846vw;
padding: 3.8461538462vw 0;
font-size: 5.3846153846vw;
order: 1;
display: flex;
flex-direction: column;
gap: 5.1282051282vw;
}
}
@media screen and (min-width: 768px) {
.aptitude-start .TL-wrap .TL {
width: min(39.765625vw, 509px);
}
}
@media screen and (max-width: 767px) {
.aptitude-start .TL-wrap .TL {
width: 54.6153846154vw;
margin: 0 auto;
}
}
.aptitude-start .TL-wrap .TX {
color: #7E7360;
line-height: 160%;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.aptitude-start .TL-wrap .TX {
font-size: min(1.5625vw, 20px);
margin-top: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.aptitude-start .TL-wrap .TX {
font-size: 2.5641025641vw;
text-align: center;
}
}
.aptitude-start .TL-wrap .start-btn {
background-color: #80C868;
display: block;
box-shadow: 1.254px 1.672px 2.508px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
.aptitude-start .TL-wrap .start-btn {
border: min(0.78125vw, 10px) solid #FFFFFF;
border-radius: min(0.625vw, 8px);
width: clamp(230px, 22.34375vw, 300px);
padding: 5px min(2.34375vw, 30px) 5px min(5.46875vw, 70px);
top: min(2.1875vw, 28px);
right: min(3.125vw, 40px);
position: absolute;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .TL-wrap .start-btn {
border: 1.0256410256vw solid #FFFFFF;
border-radius: 0.7692307692vw;
width: 30.7692307692vw;
padding: 0.7692307692vw 3.3333333333vw 0.7692307692vw 7.1794871795vw;
margin: 0 auto;
}
}
.aptitude-start .TL-wrap .start-btn .start-TX {
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.aptitude-start .TL-wrap .start-btn .start-TX {
font-size: clamp(26px, 2.421875vw, 36px);
}
}
@media screen and (max-width: 767px) {
.aptitude-start .TL-wrap .start-btn .start-TX {
font-size: 3.3333333333vw;
}
}
.aptitude-start .TL-wrap .start-btn .start-TX::after {
content: "";
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block;
}
@media screen and (min-width: 768px) {
.aptitude-start .TL-wrap .start-btn .start-TX::after {
width: clamp(13px, 1.171875vw, 20px);
height: clamp(15px, 1.328125vw, 22px);
}
}
@media screen and (max-width: 767px) {
.aptitude-start .TL-wrap .start-btn .start-TX::after {
width: 1.7948717949vw;
height: 2.0512820513vw;
}
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap {
display: flex;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap {
display: contents;
}
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .sp-group {
display: contents;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .sp-group {
display: flex;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .sp-group:nth-child(1) {
order: 0;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .sp-group:nth-child(2) {
order: 2;
}
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img {
height: 23.5714285714vh;
aspect-ratio: 256/165;
flex: 1;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img {
height: 28.4615384615vw;
aspect-ratio: 128/111;
flex: 1;
}
}
.aptitude-start .img-wrap .img .animal {
width: 100%;
height: 100%;
background-size: 95% !important;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img .animal {
max-width: 256px;
margin: 0 auto;
}
}
.aptitude-start .img-wrap .img.img1 {
background-color: #8DC47B;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img1 {
margin-bottom: max(16.015625vw, 205px);
margin-bottom: clamp(130px, 16.015625vw, 235px);
background-size: 95%;
}
}
.aptitude-start .img-wrap .img.img1 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara01.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img1 .animal {
background-position: center -5% !important;
background-size: 118% !important;
max-width: 400px;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img1 .animal {
background-size: 148% !important;
background-position: center -46%;
}
}
.aptitude-start .img-wrap .img.img2 {
background-color: #A0DF69;
}
.aptitude-start .img-wrap .img.img2 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara02.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img2 .animal {
background-position: center 10%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img2 .animal {
background-position: center -35%;
}
}
.aptitude-start .img-wrap .img.img3 {
background-color: #E7D88A;
}
.aptitude-start .img-wrap .img.img3 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara03.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img3 .animal {
background-position: center 0%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img3 .animal {
background-position: center -46%;
}
}
.aptitude-start .img-wrap .img.img4 {
background-color: #E9B84F;
}
.aptitude-start .img-wrap .img.img4 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara04.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img4 .animal {
background-position: center 0%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img4 .animal {
background-position: center -46%;
}
}
.aptitude-start .img-wrap .img.img5 {
background-color: #EC9A4D;
}
.aptitude-start .img-wrap .img.img5 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara05.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img5 .animal {
background-position: center 40%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img5 .animal {
background-position: center 40%;
}
}
.aptitude-start .img-wrap .img.img6 {
background-color: #D86F6A;
}
.aptitude-start .img-wrap .img.img6 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara06.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img6 .animal {
background-position: center 23%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img6 .animal {
background-position: center -46%;
}
}
.aptitude-start .img-wrap .img.img7 {
background-color: #EE8E7E;
}
.aptitude-start .img-wrap .img.img7 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara07.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img7 .animal {
background-position: center 5%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img7 .animal {
background-position: center -46%;
}
}
.aptitude-start .img-wrap .img.img8 {
background-color: #F1CDCD;
}
.aptitude-start .img-wrap .img.img8 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara08.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img8 .animal {
background-position: center 36%;
}
}
.aptitude-start .img-wrap .img.img9 {
background-color: #EB7A98;
}
.aptitude-start .img-wrap .img.img9 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara09.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img9 .animal {
background-position: center 25%;
background-size: 103% !important;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img9 .animal {
background-position: center -16%;
background-size: 110% !important;
}
}
.aptitude-start .img-wrap .img.img10 {
background-color: #CD82BE;
}
.aptitude-start .img-wrap .img.img10 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara10.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img10 .animal {
background-position: center top 5%;
background-size: 115% !important;
max-width: 400px;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img10 .animal {
background-position: center -76%;
background-size: 140% !important;
}
}
.aptitude-start .img-wrap .img.img11 {
background-color: #698FA5;
}
.aptitude-start .img-wrap .img.img11 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara11.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img11 .animal {
background-position: center 23%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img11 .animal {
background-position: center -46%;
}
}
.aptitude-start .img-wrap .img.img12 {
background-color: #73C8DA;
}
.aptitude-start .img-wrap .img.img12 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara12.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img12 .animal {
background-position: center 20%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img12 .animal {
background-position: center -26%;
}
}
.aptitude-start .img-wrap .img.img13 {
background-color: #7BC4C0;
}
.aptitude-start .img-wrap .img.img13 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara13.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img13 .animal {
background-position: center 20%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img13 .animal {
background-position: center -60%;
}
}
.aptitude-start .img-wrap .img.img14 {
background-color: #6D945E;
}
.aptitude-start .img-wrap .img.img14 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara14.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img14 .animal {
background-position: center 0%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img14 .animal {
background-position: center -80%;
background-size: 100% !important;
}
}
.aptitude-start .img-wrap .img.img15 {
background-color: #A192C5;
}
.aptitude-start .img-wrap .img.img15 .animal {
background-image: url("../img/aptitude-start-chara/apti-chara15.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.aptitude-start .img-wrap .img.img15 .animal {
background-position: center 10%;
}
}
@media screen and (max-width: 767px) {
.aptitude-start .img-wrap .img.img15 .animal {
background-position: center -46%;
}
}
/* -----------------------
はじめに
----------------------- */
.first {
background-image: url("../img/first-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
position: relative;
}
@media screen and (min-width: 768px) {
.first {
height: max(100vh, 700px);
}
}
@media screen and (max-width: 767px) {
.first {
height: max(100vh, 179.4871794872vw);
}
}
.first-inner .first-content {
position: absolute;
top: 50%;
}
@media screen and (min-width: 768px) {
.first-inner .first-content {
transform: translate(-50%, -50%);
left: 50%;
padding-inline: min(9.296875vw, 119px) min(1.015625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content {
transform: translateY(-50%);
right: 0;
}
}
.first-inner .first-content .book-bg {
position: relative;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg {
background-image: url("../img/book.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: min(89.6875vw, 1148px);
aspect-ratio: 1148/676;
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg {
background-image: url("../img/book-sp.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 96.9230769231vw;
aspect-ratio: 378/581;
}
}
.first-inner .first-content .book-bg .book-tag {
position: absolute;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book-tag {
gap: min(0.390625vw, 5px);
left: -9.2%;
top: min(3.046875vw, 39px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book-tag {
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: center;
gap: 0.5128205128vw;
left: 5.1282051282vw;
top: -7.6923076923vw;
width: 55%;
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book-tag .page--first--tags:nth-child(-n+3) {
transform: translateY(-40%);
}
}
.first-inner .first-content .book-bg .book--contents--wrapper {
height: 100%;
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents {
height: 100%;
display: none;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents {
padding: min(4.6875vw, 60px) min(4.6875vw, 60px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents {
width: 88%;
padding: 10.2564102564vw 5.1282051282vw;
}
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents.active {
display: block;
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner {
height: 100%;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner {
display: flex;
column-gap: min(7.8125vw, 100px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner {
height: 100%;
overflow-y: scroll;
}
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner.book--contents__inner__page {
display: none;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner.book--contents__inner__page.active {
display: flex;
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner.book--contents__inner__page.active {
display: block;
}
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents__inner .book--contents__page {
width: calc(50% - min(7.8125vw, 100px) * 1 / 2);
height: 100%;
overflow-y: scroll;
}
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 0;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn {
bottom: min(2.34375vw, 30px);
padding-inline: min(4.6875vw, 60px);
width: 100%;
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn {
bottom: 5.1282051282vw;
padding-inline: 5.1282051282vw;
width: 88%;
}
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn .TX {
color: #6B960E;
cursor: pointer;
font-weight: 600;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn .TX {
font-size: min(1.25vw, 16px);
letter-spacing: min(0.0625vw, 0.8px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn .TX {
font-size: 3.0769230769vw;
letter-spacing: 0.2051282051vw;
}
}
.first-inner .first-content .book-bg .book--contents--wrapper .book--contents .book--contents--nation__btn .TX.active {
opacity: 0;
pointer-events: none;
}
.first-inner .first-all-menu-btn {
position: absolute;
}
@media screen and (min-width: 768px) {
.first-inner .first-all-menu-btn {
bottom: min(1.5625vw, 20px);
left: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-all-menu-btn {
top: 2.5641025641vw;
right: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.first-inner .first-all-menu-btn .C_all-menu-btn {
padding: clamp(3.25px, 1.015625vw, 6.5px) clamp(7px, 2.1875vw, 14px) clamp(4.25px, 1.328125vw, 8.5px) clamp(3.5px, 1.09375vw, 7px);
border-width: clamp(0.8285px, 0.25890625vw, 1.657px);
}
}
.first-inner .first-all-menu-btn .C_all-menu-btn__inner {
display: flex;
}
@media screen and (min-width: 768px) {
.first-inner .first-all-menu-btn .C_all-menu-btn__inner {
align-items: flex-end;
gap: clamp(2.25px, 0.703125vw, 4.5px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-all-menu-btn .C_all-menu-btn__inner {
align-items: center;
gap: 0.7692307692vw;
}
}
.first-inner .first-all-menu-btn .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
.first-inner .first-all-menu-btn .C_all-menu-btn__inner__img {
width: clamp(28.25px, 8.828125vw, 56.5px);
height: clamp(21.75px, 6.796875vw, 43.5px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-all-menu-btn .C_all-menu-btn__inner__img {
width: 5.1282051282vw;
height: 4.358974359vw;
}
}
.first-inner .first-all-menu-btn .C_all-menu-btn__inner__text .TX {
color: #FFF;
font-weight: 600;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.first-inner .first-all-menu-btn .C_all-menu-btn__inner__text .TX {
font-size: clamp(13.257px, 4.1428125vw, 26.514px);
letter-spacing: clamp(0.66275px, 0.207109375vw, 1.3255px);
}
}
@media screen and (max-width: 767px) {
.first-inner .first-all-menu-btn .C_all-menu-btn__inner__text .TX {
font-size: 3.0769230769vw;
letter-spacing: 0.2564102564vw;
}
}
.first-inner .first-all-menu-btn .C_all-menu-btn:hover {
box-shadow: unset;
transform: translate(3.314px, 3.314px);
}
.first-inner .first-all-menu-btn .C_all-menu-btn:hover .C_all-menu-btn__inner__img {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* -----------------------
はじめに 2
----------------------- */
.book--contents__inner.page01 .first-top {
background-image: url("../img/first-top.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}
@media screen and (min-width: 768px) {
.book--contents__inner.page01 .first-top {
height: min(16.25vw, 208px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page01 .first-top {
height: 34.6153846154vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page01 .C_first-TX {
margin-top: min(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page01 .C_first-TX {
margin-top: 7.6923076923vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page02 .page02-left-TX {
margin-top: min(3.125vw, 40px);
letter-spacing: min(0.0546875vw, 0.7px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page02 .page02-left-TX {
margin-top: 7.6923076923vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page02 .C_first_rec {
margin-top: min(3.125vw, 40px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page02 .C_first_rec {
margin-top: 7.6923076923vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page02 .label-box {
margin-top: min(3.90625vw, 50px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page02 .label-box {
margin-top: 10.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page02 .label-box .page02-right-TX {
margin: min(1.5625vw, 20px) auto 0;
width: min(33.125vw, 424px);
}
}
@media screen and (max-width: 767px) and (max-width: 767px) {
.book--contents__inner.page02 .label-box .page02-right-TX {
margin: 3.8461538462vw auto 0;
width: 90%;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page02 .label-box:first-child {
margin-top: 0;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .C_first_zero {
margin-top: min(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .C_first_zero {
margin-top: 5.1282051282vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .page03-left-TX {
margin-top: min(1.875vw, 24px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .page03-left-TX {
margin: 5.1282051282vw auto 0;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .label-box {
margin-top: min(2.34375vw, 30px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .label-box {
margin-top: 10.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .label-box .C_first_genre {
margin-top: min(1.40625vw, 18px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .label-box .C_first_genre {
margin-top: 3.8461538462vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .label-box .page03-right-TX {
margin-top: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .label-box .page03-right-TX {
margin-top: 3.8461538462vw;
}
}
.book--contents__inner.page03 .label-box .imgbox {
display: flex;
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .label-box .imgbox {
gap: min(0.78125vw, 10px);
margin-top: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .label-box .imgbox {
gap: 2.0512820513vw;
margin-top: 3.8461538462vw;
}
}
.book--contents__inner.page03 .label-box .imgbox li .img {
display: block;
aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .label-box .imgbox li .img {
width: min(10.15625vw, 130px);
border-radius: min(0.46875vw, 6px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page03 .label-box .imgbox li .img {
width: 20.5128205128vw;
border-radius: 0.7692307692vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page03 .label-box:first-child {
margin-top: 0;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page04 .page04-left-TX {
margin-top: min(2.8125vw, 36px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page04 .page04-left-TX {
margin-top: 6.4102564103vw;
}
}
.book--contents__inner.page04 .first-ranking {
width: 100%;
}
@media screen and (min-width: 768px) {
.book--contents__inner.page04 .first-ranking {
height: min(15.15625vw, 194px);
margin-top: min(3.4375vw, 44px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page04 .first-ranking {
height: 32.8205128205vw;
margin-top: 7.6923076923vw;
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page05 {
padding-bottom: 2.5641025641vw;
}
}
.book--contents__inner.page05 .first-my {
background-image: url("../img/first-my.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}
@media screen and (min-width: 768px) {
.book--contents__inner.page05 .first-my {
height: min(17.8125vw, 228px);
margin-top: min(1.5625vw, 20px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page05 .first-my {
height: 37.1794871795vw;
margin-top: 5.1282051282vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page05 .C_first_label {
margin-top: min(2.265625vw, 29px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page05 .C_first_label {
margin-top: 3.8461538462vw;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page05 .page05-TX {
margin: min(1.171875vw, 15px) auto 0;
width: min(33.75vw, 432px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page05 .page05-TX {
margin: 2.5641025641vw auto 0;
width: 90%;
}
}
@media screen and (min-width: 768px) {
.book--contents__inner.page05 .label-right-top {
margin-top: 0;
}
}
.book--contents__inner.page05 .first-my-video {
width: 100%;
}
@media screen and (min-width: 768px) {
.book--contents__inner.page05 .first-my-video {
margin-top: min(1.953125vw, 25px);
}
}
@media screen and (max-width: 767px) {
.book--contents__inner.page05 .first-my-video {
margin-top: 3.8461538462vw;
}
}
.book--contents__inner.page05 .first-my-video video {
width: 100%;
height: 100%;
}
/* -----------------------
道のり 1ページ目
----------------------- */
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(1) {
left: -6.484375vw;
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(1) {
left: -83px;
bottom: 30px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(2) {
left: 13.828125vw;
bottom: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(2) {
left: 177px;
bottom: 45px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(3) {
right: 36.5625vw;
bottom: -1.171875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(3) {
right: 468px;
bottom: 27px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(4) {
right: 18.90625vw;
bottom: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(4) {
right: 200px;
bottom: 42px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(5) {
rotate: -119deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(5) {
right: 11.09375vw;
bottom: 3.984375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(5) {
right: 100px;
bottom: 88px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(5) .character-box {
rotate: 119deg;
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) {
rotate: -140deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) {
right: 21.875vw;
bottom: 16.640625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) {
right: 230px;
bottom: 243px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .character-box {
rotate: 140deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap {
top: -3.4375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap {
top: -44px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap .goal-bg {
opacity: 0;
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap .title-board {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap .title-board {
top: -6.25vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap .title-board {
top: -80px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .character-box {
top: -4.0625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(6) .character-box {
top: -52px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) {
rotate: 180deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) {
left: 26.5625vw;
bottom: 20.546875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) {
left: 230px;
bottom: 283px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) .character-box {
rotate: 180deg;
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(7) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) {
rotate: 160deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) {
width: 15.625vw;
left: 9.375vw;
top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) {
width: 200px;
left: 104px;
top: 50px;
}
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) .character-box {
rotate: -160deg;
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(8) .title-board .board-TX {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(9) {
width: 15.625vw;
left: 5.46875vw;
top: 12.890625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(9) {
width: 200px;
left: 70px;
top: 138px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(10) {
width: 15.625vw;
left: 23.4375vw;
top: 15.625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(10) {
width: 200px;
left: 268px;
top: 179px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(11) {
width: 15.625vw;
right: 25.78125vw;
bottom: 6.25vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(11) {
width: 200px;
right: 301px;
bottom: 111px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(12) {
width: 15.625vw;
right: 6.25vw;
bottom: 5.46875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(12) {
width: 200px;
right: 62px;
bottom: 100px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(13) {
right: 8.515625vw;
bottom: 5.3125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page1 .road-content .destination:nth-child(13) {
right: 80px;
bottom: 98px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(2) {
width: 19.53125vw;
right: 51.953125vw;
bottom: 1.09375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(2) {
width: 250px;
right: 665px;
bottom: 45px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(3) {
width: 19.53125vw;
right: 28.515625vw;
bottom: -1.09375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(3) {
width: 250px;
right: 365px;
bottom: 15px;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(4) {
rotate: -73deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(4) {
width: 19.53125vw;
right: 12.96875vw;
bottom: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(4) {
width: 250px;
right: 122px;
bottom: 52px;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(4) .goal-wrap,
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(4) .character-box {
rotate: 73deg;
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) {
rotate: -140deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) {
width: 17.96875vw;
right: 17.421875vw;
bottom: 15.625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) {
width: 230px;
right: 178px;
bottom: 235px;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .character-box {
rotate: 140deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap {
top: -3.4375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap {
top: -40px;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap .goal-bg {
opacity: 0;
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board {
top: -6.25vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board {
top: -80px;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(5) .character-box {
top: -4.0625vw;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) {
rotate: 160deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) {
width: 15.625vw;
left: 9.375vw;
top: 4.6875vw;
bottom: auto;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) {
width: 200px;
left: 104px;
top: 20px;
bottom: auto;
}
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) .character-box {
rotate: -160deg;
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) .goal-bg {
opacity: 1 !important;
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap.HTML .page1 .road-content .destination:nth-child(6) .title-board .board-TX {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:last-child {
right: 8.515625vw;
bottom: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page1 .road-content .destination:last-child {
right: 80px;
bottom: 150px;
}
}
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(2) {
left: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(2) {
right: 24.53125vw;
bottom: 0;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(2) {
right: 314px;
bottom: 20px;
}
}
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(3) {
rotate: 58deg;
right: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(3) {
left: 8.359375vw;
bottom: 16.953125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(3) {
left: 107px;
bottom: 247px;
}
}
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap.jQuery .page1 .road-content .destination:nth-child(3) .character-box {
rotate: -58deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(2), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(2), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(2) {
left: 13.828125vw;
bottom: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(2), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(2), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(2) {
left: 177px;
bottom: 45px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(3), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(3), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(3) {
right: 36.5625vw;
bottom: -1.171875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(3), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(3), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(3) {
right: 468px;
bottom: 27px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(4), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(4), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(4) {
rotate: -119deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(4), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(4), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(4) {
right: 11.09375vw;
bottom: 3.984375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(4), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(4), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(4) {
right: 100px;
bottom: 88px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(4) .goal-wrap,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(4) .character-box, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(4) .goal-wrap,
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(4) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(4) .goal-wrap,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(4) .character-box {
rotate: 119deg;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) {
rotate: -140deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) {
right: 21.875vw;
bottom: 16.640625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) {
right: 250px;
bottom: 243px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .character-box {
rotate: 140deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap {
top: -3.4375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap {
top: -44px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap .goal-bg, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap .goal-bg, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap .goal-bg {
opacity: 0;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board {
top: -6.25vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board {
top: -80px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .character-box {
top: -4.0625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(5) .character-box {
top: -52px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) {
rotate: 180deg;
right: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) {
left: 26.5625vw;
bottom: 24.21875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6), .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) {
left: 270px;
bottom: 340px;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .character-box, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .character-box {
rotate: 180deg;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .goal-wrap .goal-bg,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .character-box .goal-bg, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .goal-wrap .goal-bg,
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .character-box .goal-bg, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .goal-wrap .goal-bg,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .character-box .goal-bg {
opacity: 1;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .character-box .title-board, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .character-box .title-board, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(6) .character-box .title-board .board-TX, .archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(6) .character-box .title-board .board-TX, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(6) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) {
rotate: unset;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) {
left: 7.8125vw;
bottom: 11.09375vw;
z-index: 17;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) {
left: 100px;
bottom: 162px;
z-index: 17;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) .character-box {
rotate: unset;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7) .character-box .title-board, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) .character-box .title-board {
transform: unset;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(7) .character-box .title-board .board-TX, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(7) .character-box .title-board .board-TX {
transform: unset;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) {
rotate: unset;
left: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) {
right: 42.96875vw;
top: 15.625vw;
z-index: 17;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) {
right: 500px;
top: 170px;
z-index: 17;
}
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8) .character-box, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) .character-box {
rotate: unset;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8) .character-box .title-board, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) .character-box .title-board {
transform: unset;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(8) .character-box .title-board .board-TX, .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(8) .character-box .title-board .board-TX {
transform: unset;
}
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(9), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(9) {
left: auto;
top: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(9), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(9) {
right: 9.140625vw;
bottom: 5.625vw;
z-index: 17;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Java .page1 .road-content .destination:nth-child(9), .archive--contents--items--wap.SQL .page1 .road-content .destination:nth-child(9) {
right: 60px;
bottom: 110px;
z-index: 17;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(7) {
left: 18.75vw;
bottom: 10.78125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(7) {
left: 240px;
bottom: 175px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(8) {
left: auto;
top: auto;
right: 27.34375vw;
bottom: 10.15625vw;
z-index: 17;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(8) {
left: auto;
top: auto;
right: 350px;
bottom: 170px;
z-index: 17;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(9) {
right: 29.6875vw;
bottom: 6.5625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(9) {
right: 360px;
bottom: 114px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(9) .title-board {
left: -3.90625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.Design .page1 .road-content .destination:nth-child(9) .title-board {
left: -50px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(n+2) {
width: 23.4375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(n+2) {
width: 300px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(2) {
left: 14.6875vw;
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(2) {
left: 188px;
bottom: 30px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) {
bottom: auto;
rotate: -136deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) {
right: 15.390625vw;
top: 11.5625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) {
right: 147px;
top: 118px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .character-box {
rotate: 136deg;
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .goal-bg {
opacity: 0;
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .title-board {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .title-board {
top: -6.25vw;
left: -1.171875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .title-board {
top: -80px;
left: -15px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(3) .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) {
rotate: 180deg;
bottom: auto;
right: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) {
left: 8.59375vw;
top: 6.09375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) {
left: 110px;
top: 48px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .goal-wrap,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .character-box {
rotate: 180deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .goal-wrap.me,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .character-box.me {
bottom: -5.9375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .goal-wrap.me,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .character-box.me {
bottom: -76px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .goal-wrap .title-board,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(4) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(5) {
rotate: unset;
right: auto;
top: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(5) {
left: 2.96875vw;
bottom: 10.15625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(5) {
left: 38px;
bottom: 150px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(5) .character-box {
rotate: unset;
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) {
rotate: unset;
left: auto;
top: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) {
right: 7.03125vw;
bottom: 2.265625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) {
right: 40px;
bottom: 60px;
}
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .character-box {
rotate: unset;
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .goal-wrap .goal-bg,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .character-box .goal-bg {
opacity: 1;
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .character-box .title-board {
transform: unset;
}
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.WordPress .page1 .road-content .destination:nth-child(6) .character-box .title-board .board-TX {
transform: unset;
}
/* -----------------------
道のり 2ページ目
----------------------- */
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(1) {
left: -7.8125vw;
bottom: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(1), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(1) {
left: -100px;
bottom: 130px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(2) {
rotate: -15deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(2) {
left: 1.5625vw;
bottom: 12.578125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(2), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(2) {
left: 20px;
bottom: 181px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(2) .goal-wrap,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(2) .character-box, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(2) .goal-wrap,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(2) .character-box, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(2) .goal-wrap,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(2) .character-box, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(2) .goal-wrap,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(2) .character-box, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(2) .goal-wrap,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(2) .character-box {
rotate: 15deg;
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(3) {
rotate: -15deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(3) {
left: 15.625vw;
bottom: 17.265625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(3), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(3) {
left: 200px;
bottom: 255px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(3) .character-box, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(3) .character-box, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(3) .character-box, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(3) .character-box, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(3) .character-box {
rotate: 15deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(4) {
right: 40.625vw;
bottom: 19.921875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(4), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(4) {
right: 484px;
bottom: 283px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) {
rotate: 60deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) {
right: 27.34375vw;
bottom: 19.53125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) {
right: 300px;
bottom: 288px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5) .character-box, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) .character-box {
rotate: -60deg;
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5) .character-box .title-board, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5) .character-box .title-board, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5) .character-box .title-board, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5) .character-box .title-board, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(5) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(5) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(5) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(5) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(5) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) {
rotate: 128deg;
z-index: 30;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) {
right: 21.875vw;
bottom: 10vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) {
right: 254px;
bottom: 146px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6) .character-box, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6) .character-box, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6) .character-box, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6) .character-box, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) .character-box {
rotate: -128deg;
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6) .character-box .title-board, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6) .character-box .title-board, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6) .character-box .title-board, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6) .character-box .title-board, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(6) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(6) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(6) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(6) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(6) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) {
rotate: 180deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) {
right: 32.8125vw;
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) {
right: 420px;
bottom: 30px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7) .character-box, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7) .character-box, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7) .character-box, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7) .character-box, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) .character-box {
rotate: -180deg;
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7) .character-box .title-board, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7) .character-box .title-board, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7) .character-box .title-board, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7) .character-box .title-board, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(7) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(7) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(7) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(7) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(7) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) {
rotate: -156deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) {
left: 19.53125vw;
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) {
left: 250px;
bottom: 21px;
}
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8) .character-box, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8) .character-box, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8) .character-box, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8) .character-box, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) .goal-wrap,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) .character-box {
rotate: 156deg;
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8) .character-box .title-board, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8) .character-box .title-board, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8) .character-box .title-board, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8) .character-box .title-board, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) .goal-wrap .title-board,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(8) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(8) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(8) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(8) .character-box .title-board .board-TX, .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(8) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(9) {
left: 27.34375vw;
bottom: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(9), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(9) {
left: 350px;
bottom: 170px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(10) {
right: 23.203125vw;
bottom: 7.03125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(10), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(10) {
right: 278px;
bottom: 127px;
}
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(11) {
right: 9.921875vw;
bottom: 5.3125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section.page2 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page3 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page4 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page4-5 .road-content .destination:nth-child(11), .archive--contents--items--wap .page-section.page4-6 .road-content .destination:nth-child(11) {
right: 127px;
bottom: 98px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(1) {
rotate: -30deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(1) {
left: 5.3125vw;
bottom: 12.578125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(1) {
left: 68px;
bottom: 191px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(1) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(1) .character-box {
rotate: 30deg;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(2) {
rotate: -15deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(2) {
left: 21.875vw;
bottom: 18.046875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(2) {
left: 280px;
bottom: 261px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(2) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(2) .character-box {
rotate: 15deg;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(3) {
rotate: 30deg;
left: auto;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(3) {
right: 31.484375vw;
bottom: 19.921875vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(3) {
right: 352px;
bottom: 296px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(3) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(3) .character-box {
rotate: -30deg;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) {
rotate: 180deg;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) {
right: 32.8125vw;
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) {
right: 420px;
bottom: 30px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) .character-box {
rotate: -180deg;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) .goal-wrap .title-board,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(4) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) {
rotate: -156deg;
right: unset;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) {
left: 19.53125vw;
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) {
left: 250px;
bottom: 21px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) .character-box {
rotate: 156deg;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) .goal-wrap .title-board,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) .character-box .title-board {
transform: scale(-1, 1);
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) .goal-wrap .title-board .board-TX,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(5) .character-box .title-board .board-TX {
transform: scale(-1, 1);
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) {
right: unset;
top: unset;
rotate: unset;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) {
left: 27.34375vw;
bottom: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) {
left: 350px;
bottom: 170px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) .character-box {
rotate: unset;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) .title-board {
transform: unset !important;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(6) .title-board .board-TX {
transform: unset !important;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) {
rotate: unset;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) {
right: 23.203125vw;
bottom: 7.03125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) {
right: 278px;
bottom: 127px;
}
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) .goal-wrap,
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) .character-box {
rotate: unset;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) .title-board {
transform: unset !important;
}
.archive--contents--items--wap.HTML .page2 .road-content .destination:nth-child(7) .title-board .board-TX {
transform: unset !important;
}
/* -----------------------
road-nime
----------------------- */
.tree-anime {
transform-origin: bottom center;
animation: sway 4s ease infinite alternate;
}
@keyframes sway {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(0deg);
}
}
.tree-anime-animal {
transform-origin: bottom center;
animation: tree-anime-animal 13s linear infinite;
}
@keyframes tree-anime-animal {
0% {
transform: rotate(0deg);
}
1% {
transform: rotate(4deg);
}
2% {
transform: rotate(0deg);
}
3% {
transform: rotate(4deg);
}
4% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.tree-animal {
position: absolute;
top: 30%;
left: 52%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
animation: tree-animal 13s linear infinite;
z-index: 10;
}
.tree-animal iframe {
object-fit: contain;
width: 100%;
height: 100%;
}
@keyframes tree-animal {
0% {
top: 30%;
}
8% {
top: 30%;
}
10% {
top: -10%;
}
11% {
top: -3%;
}
30% {
top: -3%;
}
32% {
top: -15%;
}
34% {
top: 30%;
}
100% {
top: 30%;
}
}
.castle {
overflow: hidden;
cursor: pointer;
}
.castle .castle-animal {
position: absolute;
bottom: -7%;
right: 0;
width: 30%;
height: 30%;
transition: all 0.3s;
opacity: 0;
}
.castle .castle-animal iframe {
width: 100%;
height: 100%;
}
.castle .castle-animal.show {
opacity: 1;
}
.sec3-anime-bird {
position: absolute;
top: 20%;
/* おばけ作例を完全再現 */
left: 40%;
display: block;
cursor: pointer;
transform: scaleX(-1);
offset-path: path("m121.751,142.925c64.965-20.713,84.009-62.201,150.823-86.711,66.408-24.361,234.912-41.807,268.334-33.531,87.588,21.69-55.881,58.35-64.818,60.362-66.889,15.06-249.619,5.261-394.356-14.993-60.509-8.468-217.503-63.352-269.682-15.503-46.047,42.634,42.209,84.58,151.569,64.34,129.467-23.961,245.478-4.758,377.373,10.994,72.906,8.707,250.124,19.277,168.227,47.34-55.167,18.904-197.598,7.721-297.612,1.747C90.175,166.1-13.368,291.142,1.296,201.323c9.853-60.352,263.745-23.933,361.33-58.398");
offset-rotate: 0deg;
animation: move 50s linear infinite, flip 50s linear infinite;
animation-play-state: running;
z-index: 30;
}
@media screen and (min-width: 768px) {
.sec3-anime-bird {
width: 4.6875vw;
height: 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.sec3-anime-bird {
width: 60px;
height: 60px;
}
}
.sec3-anime-bird iframe {
width: 100%;
height: 100%;
object-fit: contain;
}
/* そのままICS MEDIAのアニメーションを適用 */
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
@keyframes flip {
15% {
transform: scaleX(-1);
}
16% {
transform: scaleX(1);
}
40% {
transform: scaleX(1);
}
41% {
transform: scaleX(-1);
}
67% {
transform: scaleX(-1);
}
68% {
transform: scaleX(1);
}
87% {
transform: scaleX(1);
}
88% {
transform: scaleX(-1);
}
}
/* ホバーやタップの時のshakeもそのまま */
@keyframes shake {
0% {
transform: translateX(-4%);
}
50% {
transform: translateX(5%);
}
100% {
transform: translateX(-4%);
}
}
/* 修正版: ホバー・タップでアニメーションを止めるだけ（上書きしない） */
@media (any-hover: hover) {
.sec3-anime-bird:hover {
animation-play-state: paused;
/* ここでanimationを上書きしない！ */
}
}
@media (any-hover: none) {
.sec3-anime-bird:active {
animation-play-state: paused;
}
}
/* -----------------------
鳥ここまで
----------------------- */
.road-action {
position: absolute;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.road-action {
width: 14.296875vw;
height: 3.90625vw;
top: 11.328125vw;
left: 30.46875vw;
}
}
@media screen and (max-width: 767px) {
.road-action {
width: 183px;
height: 50px;
top: 145px;
left: 339px;
}
}
.road-action .action-hover {
opacity: 0;
transition: all 0.8s;
background-image: url("../img/road-action-bubble.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.road-action .action-hover {
width: 2.734375vw;
height: 5.078125vw;
top: -2.109375vw;
}
}
.road-action:hover .action-hover {
opacity: 1;
transition: all 0.8s;
}
.action-modal {
background: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
display: none;
}
.action-modal .modal-content {
background-image: url("../img/road-action.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 1/1;
transform: scale(0);
}
@media screen and (min-width: 768px) {
.action-modal .modal-content {
width: 23.4375vw;
}
}
@media screen and (max-width: 767px) {
.action-modal .modal-content {
width: 70%;
}
}
.action-modal .lost-button {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
@media screen and (min-width: 768px) {
.action-modal .lost-button {
width: 80%;
height: 3.90625vw;
bottom: -7.8125vw;
border-radius: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.action-modal .lost-button {
width: 80%;
height: 50px;
bottom: -100px;
border-radius: 10px;
}
}
.action-modal .lost-button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
color: #FFFFFF;
}
@media screen and (min-width: 768px) {
.action-modal .lost-button::before {
font-size: 1.40625vw;
}
}
.action-modal .lost-pass-button {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
@media screen and (min-width: 768px) {
.action-modal .lost-pass-button {
width: 80%;
height: 3.90625vw;
bottom: -7.8125vw;
border-radius: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.action-modal .lost-pass-button {
width: 80%;
height: 50px;
bottom: -100px;
border-radius: 10px;
}
}
.action-modal .lost-pass-button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
color: #FFFFFF;
}
@media screen and (min-width: 768px) {
.action-modal .lost-pass-button::before {
font-size: 1.40625vw;
}
}
.action-modal .action-close {
position: absolute;
cursor: pointer;
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) {
.action-modal .action-close {
width: 5.78125vw;
height: 3.4375vw;
top: 3.90625vw;
right: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.action-modal .action-close {
width: 74px;
height: 44px;
top: 20px;
right: 20px;
}
}
.action-modal.HTML .modal-content {
background-image: url("../img/road-lost-HTML.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.action-modal.HTML .lost-button {
display: block;
background: #3A96ED;
box-shadow: 0px 2px 0px 0px #38A1E2, 0px 0px 34px 0px #41F3F6 inset;
}
.action-modal.HTML .lost-button::before {
content: "落とし物を拾う";
}
.action-modal.HTML-lostchara .modal-content {
background-image: url("../img/HTML-lostchara.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.action-modal.HTML-lostchara .lost-pass-button {
display: block;
background: #3A96ED;
box-shadow: 0px 2px 0px 0px #38A1E2, 0px 0px 34px 0px #41F3F6 inset;
}
.action-modal.HTML-lostchara .lost-pass-button::before {
content: "落とし物を渡す";
}
.action-modal.HTML-pass .modal-content {
background-image: url("../img/HTML-passchara.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.action-modal.jQuery .modal-content {
background-image: url("../img/road-lost-jQuery.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.action-modal.jQuery .lost-button {
display: block;
background: #3A96ED;
box-shadow: 0px 2px 0px 0px #38A1E2, 0px 0px 34px 0px #41F3F6 inset;
}
.action-modal.jQuery .lost-button::before {
content: "jQueryの落とし物を拾う";
}
.action-modal.jQuery-lostchara .modal-content {
background-image: url("../img/jQuery-lostchara.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.action-modal.jQuery-lostchara .lost-pass-button {
display: block;
background: #3A96ED;
box-shadow: 0px 2px 0px 0px #38A1E2, 0px 0px 34px 0px #41F3F6 inset;
}
.action-modal.jQuery-lostchara .lost-pass-button::before {
content: "落とし物を渡す";
}
.action-modal.jQuery-pass .modal-content {
background-image: url("../img/jQuery-passchara.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.action-modal.show {
display: flex;
justify-content: center;
align-items: center;
}
.action-modal.show .modal-content {
animation: road-action 1s ease-in-out 1s;
animation-fill-mode: forwards;
}
@keyframes road-action {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
/* -----------------------
quiz
----------------------- */
.hdq-options-check input[type=checkbox]:checked + .hdq_toggle:before {
background: #5fc7ca !important;
}
.hdq_quiz_wrapper .hdq_button.hdq_next_button, .hdq_quiz_wrapper .hdq_button.hdq_finsh_button {
background: #36c544 !important;
}
.hdq_quiz_wrapper .hdq_button.hdq_prev_button {
background: #a3a0a0 !important;
}
/* -----------------------
locked-screen
----------------------- */
.lock {
width: 100%;
}
@media screen and (min-width: 768px) {
.lock {
padding: 3.90625vw 3.125vw;
}
}
@media screen and (max-width: 767px) {
.lock {
padding: 7.6923076923vw;
}
}
.lock-board {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url("../img/page-my.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center left;
}
.lock-wrap {
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lock-inner {
background: #FFFFFF;
white-space: nowrap;
position: relative;
}
@media screen and (min-width: 768px) {
.lock-inner {
padding: 6.25vw 7.8125vw 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.lock-inner {
padding: 12.8205128205vw 7.6923076923vw 30.7692307692vw;
}
}
.lock-title {
text-align: center;
font-weight: 700;
color: #7F8180;
}
@media screen and (min-width: 768px) {
.lock-title {
font-size: 2.1875vw;
}
}
@media screen and (max-width: 767px) {
.lock-title {
font-size: 5.641025641vw;
}
}
.lock-message {
text-align: center;
letter-spacing: 0.1rem;
}
@media screen and (min-width: 768px) {
.lock-message {
font-size: 1.5625vw;
margin-top: 3.125vw;
line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
.lock-message {
font-size: 3.0769230769vw;
margin-top: 5.1282051282vw;
line-height: 1.5;
}
}
.lock-link {
display: block;
background: #3A96ED;
box-shadow: 0px 2px 0px 0px #38A1E2, 0px 0px 34px 0px #41F3F6 inset;
width: fit-content;
color: #FFFFFF;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.lock-link {
margin: 4.6875vw auto 0;
border-radius: 0.390625vw;
padding: 0.78125vw 1.5625vw;
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.lock-link {
margin: 7.6923076923vw auto 0;
border-radius: 1.2820512821vw;
padding: 2.5641025641vw 3.8461538462vw;
font-size: 3.5897435897vw;
}
}
.lock-chara {
position: absolute;
background-image: url("../img/lock.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.lock-chara {
width: 10.15625vw;
height: 11.09375vw;
bottom: 0;
left: 17.96875vw;
}
}
@media screen and (max-width: 767px) {
.lock-chara {
width: 24.358974359vw;
height: 26.6666666667vw;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
/* -----------------------
落とし物関係 ・ランダムイベント
----------------------- */
.archive--contents--items--wap .page-section .road-lost {
position: absolute;
display: none;
z-index: 40;
pointer-events: auto;
cursor: pointer;
}
.archive--contents--items--wap .page-section .road-lost.is-visible {
display: block;
}
.archive--contents--items--wap .page-section .road-lost:hover {
animation: lostItem 2s infinite;
}
@keyframes lostItem {
0%, 100% {
transform: translateY(0%);
}
50% {
transform: translateY(15%);
}
}
.archive--contents--items--wap .page-section .goal-wrap .lost-chara {
position: absolute;
filter: brightness(0.3);
z-index: 40;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap .page-section .goal-wrap .lost-chara {
width: 5.546875vw;
height: 6.5625vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap .page-section .goal-wrap .lost-chara {
width: 71px;
height: 84px;
}
}
.archive--contents--items--wap .page-section .goal-wrap .lost-chara.disabled {
cursor: default;
}
.archive--contents--items--wap .page-section .goal-wrap .goal:not(.not) ~ .lost-chara {
filter: none;
}
.archive--contents--items--wap.HTML .road-lost.HTML {
background-image: url("../img/avatar-img/item-hat-01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .road-lost.HTML {
top: 23.4375vw;
left: 46.875vw;
width: 5.078125vw;
height: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.HTML .road-lost.HTML {
top: 300px;
left: 600px;
width: 65px;
height: 32px;
}
}
.archive--contents--items--wap.HTML .goal-wrap .lost-chara {
background-image: url("../img/aptitude-result-characters/tsukikuma.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.HTML .goal-wrap .lost-chara {
bottom: -4.84375vw;
right: -4.140625vw;
}
}
.archive--contents--items--wap.jQuery .road-lost {
background-image: url("../img/avatar-img/item-hat-03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.archive--contents--items--wap.jQuery .road-lost.jQuery {
top: 23.4375vw;
left: 39.0625vw;
width: 5.546875vw;
height: 3.28125vw;
}
}
@media screen and (max-width: 767px) {
.archive--contents--items--wap.jQuery .road-lost.jQuery {
top: 300px;
left: 500px;
width: 71px;
height: 42px;
}
}
.archive--contents--items--wap.jQuery .goal-wrap .lost-chara {
background-image: url("../img/aptitude-result-characters/usapo.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.random-glitter {
background-image: url("../img/kira.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 40px;
height: 40px;
cursor: pointer;
pointer-events: auto;
animation: sparkle 3s infinite ease-in-out;
z-index: 10;
}
@media screen and (min-width: 768px) {
.random-glitter {
width: 3.828125vw;
height: 4.53125vw;
}
}
@media screen and (max-width: 767px) {
.random-glitter {
width: 49px;
height: 58px;
}
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
35%, 75% {
opacity: 1;
transform: scale(1.3);
}
}
.random-coin-get {
display: flex;
}
.random-coin-get button {
color: #FFFFFF;
margin: 0 auto;
background: #ED863A;
box-shadow: 0px 2px 0px 0px #E28738, 0px 0px 34px 0px #F6D741 inset;
position: relative;
letter-spacing: 0.1rem;
font-weight: 700;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.random-coin-get button {
font-size: 1.875vw;
padding: 1.25vw 3.90625vw;
border-radius: 0.78125vw;
margin-top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.random-coin-get button {
font-size: 4.6153846154vw;
padding: 16px 50px;
border-radius: 10px;
margin-top: 50px;
}
}
.random-coin-get button::before {
content: "";
position: absolute;
background-image: url("../img/aptitude-result-characters/chatora.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.random-coin-get button::before {
width: 6.40625vw;
height: 7.5vw;
right: -4.296875vw;
bottom: -0.546875vw;
}
}
@media screen and (max-width: 767px) {
.random-coin-get button::before {
width: 82px;
height: 96px;
right: -55px;
bottom: -7px;
}
}
.random-coin-get button.is-complete {
background: #A5ED3A;
box-shadow: 0px 2px 0px 0px #38E252, 0px 0px 34px 0px #41F647 inset;
cursor: not-allowed;
}
@media screen and (max-width: 767px) {
.random-coin-get {
font-size: 4.6153846154vw;
padding: 16px 50px;
border-radius: 10px;
margin-top: 50px;
}
}
/* -----------------------
ランダム別ページ
----------------------- */
.random-wrap {
background-image: url("../img/board-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.random-wrap {
padding: 10.15625vw 15.625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap {
padding: 7.6923076923vw 12.8205128205vw;
}
}
.random-wrap .randomevent-close-btn {
position: absolute;
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) {
.random-wrap .randomevent-close-btn {
width: 3.90625vw;
height: 3.90625vw;
top: 2.34375vw;
right: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .randomevent-close-btn {
width: 5.1282051282vw;
height: 5.1282051282vw;
top: 2.5641025641vw;
right: 2.5641025641vw;
}
}
.random-wrap .inner {
background-color: #FFF;
width: 100%;
min-height: 100%;
position: relative;
}
@media screen and (min-width: 768px) {
.random-wrap .inner {
padding: 7.8125vw 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner {
padding: 7.6923076923vw 5.1282051282vw;
}
}
.random-wrap .inner .TL_wrap {
position: relative;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .TL_wrap {
padding: 1.5625vw 11.71875vw 1.5625vw 0.78125vw;
border-radius: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .TL_wrap {
padding: 2.5641025641vw 14.1025641026vw 2.5641025641vw 2.5641025641vw;
border-radius: 0.7692307692vw;
}
}
.random-wrap .inner .TL_wrap h1 {
color: #FFF;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .TL_wrap h1 {
font-size: 2.96875vw;
line-height: 130%;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .TL_wrap h1 {
font-size: 4.6153846154vw;
line-height: 120%;
}
}
.random-wrap .inner .TL_wrap h1 span {
display: none;
}
.random-wrap .inner .TL_wrap .event_character {
position: absolute;
bottom: 0;
}
.random-wrap .inner .event-content {
line-height: 150%;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .event-content {
margin-top: 3.90625vw;
font-size: 1.40625vw;
letter-spacing: 0.140625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .event-content {
margin-top: 7.6923076923vw;
font-size: 3.3333333333vw;
letter-spacing: 0.3333333333vw;
}
}
.random-wrap .inner .random-coin-get .get-content {
position: relative;
background-color: #FFFCE8;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get .get-content {
border: 0.859375vw solid rgba(255, 234, 74, 0.89);
border-radius: 1.5625vw;
padding: 0.625vw 2.34375vw 0.625vw 2.34375vw;
margin: 7.8125vw auto 0;
gap: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get .get-content {
border: 1.2820512821vw solid rgba(255, 234, 74, 0.89);
border-radius: 2.5641025641vw;
padding: 1.2820512821vw 3.8461538462vw 1.2820512821vw 3.8461538462vw;
margin: 12.8205128205vw auto 0;
gap: 1.2820512821vw;
}
}
.random-wrap .inner .random-coin-get .get-content .get-coin {
background-image: url("../img/log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 1/1;
animation: getcoin 2s infinite;
}
@keyframes getcoin {
0%, 40%, 60%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(-1, 1);
}
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get .get-content .get-coin {
width: 3.203125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get .get-content .get-coin {
width: 5.1282051282vw;
}
}
.random-wrap .inner .random-coin-get .get-content .get-TX {
font-weight: 700;
color: #BAA661;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get .get-content .get-TX {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get .get-content .get-TX {
font-size: 3.3333333333vw;
}
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get .get-content .get-TX span {
font-size: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get .get-content .get-TX span {
font-size: 5.1282051282vw;
}
}
.random-wrap .inner .random-coin-get.received {
position: relative;
background-color: #FFFCE8;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get.received {
border: 0.859375vw solid rgba(255, 234, 74, 0.89);
border-radius: 1.5625vw;
padding: 0.625vw 2.34375vw 0.625vw 2.34375vw;
margin: 7.8125vw auto 0;
gap: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get.received {
border: 1.2820512821vw solid rgba(255, 234, 74, 0.89);
border-radius: 2.5641025641vw;
padding: 1.2820512821vw 3.8461538462vw 1.2820512821vw 3.8461538462vw;
margin: 12.8205128205vw auto 0;
gap: 1.2820512821vw;
}
}
.random-wrap .inner .random-coin-get.received .get-coin {
background-image: url("../img/log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 1/1;
animation: getcoin 2s infinite;
}
@keyframes getcoin {
0%, 40%, 60%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(-1, 1);
}
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get.received .get-coin {
width: 3.203125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get.received .get-coin {
width: 5.1282051282vw;
}
}
.random-wrap .inner .random-coin-get.received .get-TX {
font-weight: 700;
color: #BAA661;
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get.received .get-TX {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get.received .get-TX {
font-size: 3.3333333333vw;
}
}
@media screen and (min-width: 768px) {
.random-wrap .inner .random-coin-get.received .get-TX span {
font-size: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner .random-coin-get.received .get-TX span {
font-size: 5.1282051282vw;
}
}
.random-wrap .inner::before {
content: "";
position: absolute;
left: 50%;
transform: trasnlateX(-50%);
}
@media screen and (min-width: 768px) {
.random-wrap .inner::before {
width: 6.71875vw;
height: 6.875vw;
top: -0.78125vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap .inner::before {
width: 11.0256410256vw;
height: 11.2820512821vw;
top: -5.1282051282vw;
}
}
.random-wrap.cat-info .inner .TL_wrap {
background: linear-gradient(96deg, #25DAFF 49.88%, #017E98 93.55%);
}
.random-wrap.cat-info .inner .TL_wrap .event_character {
background-image: url("../img/newspaper.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.random-wrap.cat-info .inner .TL_wrap .event_character {
width: 10.546875vw;
height: 10.546875vw;
right: 0.78125vw;
}
}
.random-wrap.cat-info .inner::before {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.random-wrap.cat-quiz .inner .TL_wrap {
background: linear-gradient(96deg, #f5c9ff 49.88%, #ff8ff8 93.55%);
}
.random-wrap.cat-quiz .inner .TL_wrap .event_character {
background-image: url("../img/lock.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.random-wrap.cat-quiz .inner .TL_wrap .event_character {
width: 10.546875vw;
height: 10.546875vw;
right: 0.78125vw;
}
}
.random-wrap.cat-quiz .inner .hdq_button.hdq_finsh_button {
background: #ff8ff8 !important;
}
.random-wrap.cat-quiz .inner .random-coin-get {
display: none;
width: fit-content;
margin: 0 auto;
}
.random-wrap.cat-quiz .inner .random-coin-get .get-content {
margin: 0;
}
.random-wrap.cat-quiz .inner::before {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.random-wrap.cat-letter {
color: #4EA772;
}
@media screen and (min-width: 768px) {
.random-wrap.cat-letter {
padding: 10.9375vw 19.53125vw;
}
}
@media screen and (min-width: 768px) {
.random-wrap.cat-letter .inner {
padding: 4.6875vw 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap.cat-letter .inner {
padding: 7.6923076923vw 5.1282051282vw;
}
}
.random-wrap.cat-letter .inner .TL_wrap {
border-bottom: 0.3125vw dotted #4EA772;
}
.random-wrap.cat-letter .inner .TL_wrap h1 {
color: unset;
}
@media screen and (min-width: 768px) {
.random-wrap.cat-letter .inner .TL_wrap h1 {
font-size: 2.1875vw;
}
}
.random-wrap.cat-letter .inner::before {
display: none;
}
.random-wrap.cat-letter::before {
content: "";
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.random-wrap.cat-letter::before {
width: 66.25vw;
height: 67.109375vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap.cat-letter::before {
width: 102.5641025641vw;
height: 102.5641025641vw;
}
}
.random-wrap.post .inner .TL_wrap {
background: linear-gradient(96deg, #FFD073 49.88%, #FA0 93.55%);
}
.random-wrap.post .inner .TL_wrap h1 span {
font-weight: 700;
display: inline-block;
}
@media screen and (min-width: 768px) {
.random-wrap.post .inner .TL_wrap h1 span {
font-size: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap.post .inner .TL_wrap h1 span {
font-size: 3.0769230769vw;
}
}
.random-wrap.post .inner .TL_wrap .event_character {
background-image: url("../img/aptitude-choice-img-engineer.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.random-wrap.post .inner .TL_wrap .event_character {
width: 14.921875vw;
height: 9.921875vw;
right: 0vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap.post .inner .TL_wrap .event_character {
width: 19.4871794872vw;
height: 12.8205128205vw;
right: -2.5641025641vw;
}
}
.random-wrap.post .inner .event-content {
display: none;
}
.random-wrap.post .inner .hint {
width: 100%;
height: auto;
}
@media screen and (min-width: 768px) {
.random-wrap.post .inner .hint {
margin-top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.random-wrap.post .inner .hint {
margin-top: 7.6923076923vw;
}
}
.random-wrap.post .inner::before {
content: "";
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
transform: trasnlateX(-50%);
}
@media screen and (min-width: 768px) {
.random-wrap.post .inner::before {
width: 6.71875vw;
height: 6.875vw;
top: -0.78125vw;
}
}
.random-wrap.post .inner::before {
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) {
.control {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: min(25.641025641vw, 100px);
}
}
@media screen and (max-width: 767px) {
.control {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: min(2.5641025641vw, 10px);
}
}
@media screen and (max-width: 767px) {
.control--wap {
width: 100%;
height: auto;
border-radius: 6px;
background: #756347;
animation: dropIn 1.5s ease-out both;
padding: min(5.1282051282vw, 20px);
}
.control--wap .control--paper {
background: #ffffff;
width: 100%;
padding: min(2.5641025641vw, 10px);
}
.binder-clip {
width: 170px;
height: 12px;
background-color: #bfbfbf;
border-radius: 6px;
margin: 10px auto 8px auto;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
@media screen and (min-width: 768px) {
.control--wap {
position: relative;
height: auto;
width: 90%;
background: #756347;
border-radius: 12px;
padding: min(10.2564102564vw, 40px);
overflow: hidden;
animation: dropIn 1.5s ease-out both;
box-sizing: content-box;
}
.control--wap .control--paper {
background: #ffffff;
width: 100%;
max-width: 950px;
margin: auto;
padding: 20px 0;
}
.control--wap .binder-clip {
width: 230px;
height: 12px;
background-color: #bfbfbf;
border-radius: 6px;
margin: 10px auto 15px auto;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
.responsive-form {
width: 100%;
border: none;
border-radius: 8px;
}
.responsive-form .control {
background-color: #f0f0f0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: min(10.2564102564vw, 40px);
}
.responsive-form .control--wap {
position: relative;
max-width: 800px;
width: 100%;
background: #fff;
border-radius: 12px;
padding: min(4.1025641026vw, 16px);
overflow: hidden;
animation: fadeIn 0.6s ease-out both;
}
.responsive-form .control--wap::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
background: radial-gradient(#aaa 20%, transparent 70%);
border-radius: 5px;
margin-top: min(2.0512820513vw, 8px);
}
.responsive-form .control--wap::after {
content: "";
position: absolute;
top: 20px;
left: 15px;
width: 6px;
height: 6px;
background: #555;
border-radius: 50%;
box-shadow: 0 20px 0 #555, 0 40px 0 #555, calc(100% - 6px) 0 #555, calc(100% - 6px) 20px 0 #555, calc(100% - 6px) 40px 0 #555;
}
.responsive-form .responsive-form {
width: 100%;
height: 100vh;
border: none;
border-radius: 8px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}
.responsive-form {
height: 100vh;
}
@keyframes dropIn {
0% {
opacity: 0;
transform: translateY(-40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
body {
position: relative;
background-color: #b9e5ff;
}
.context {
width: 100%;
position: absolute;
top: 50vh;
}
.context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 95%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
.circles li:nth-child(11) {
left: 30%;
width: 50px;
height: 50px;
animation-delay: 5s;
animation-duration: 30s;
}
.circles li:nth-child(12) {
left: 60%;
width: 40px;
height: 40px;
animation-delay: 7s;
animation-duration: 25s;
}
.circles li:nth-child(13) {
left: 22%;
width: 70px;
height: 70px;
animation-delay: 9s;
animation-duration: 28s;
}
.circles li:nth-child(14) {
left: 78%;
width: 35px;
height: 35px;
animation-delay: 3.5s;
animation-duration: 32s;
}
.circles li:nth-child(15) {
left: 45%;
width: 90px;
height: 90px;
animation-delay: 12s;
animation-duration: 20s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-3000px) rotate(720deg);
opacity: 1;
border-radius: 50%;
}
}
.subscription {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: min(10.2564102564vw, 40px);
background-color: #c1e9ff;
position: relative;
overflow: hidden;
}
.subscription-inner {
width: 100%;
padding: min(5.1282051282vw, 20px);
}
.subscription-content {
display: flex;
flex-direction: column;
gap: min(10.2564102564vw, 40px);
align-items: center;
}
h1.plan-title {
text-align: center;
font-size: 2.5rem;
color: #0070ba;
font-weight: 700;
}
.plan {
width: 100%;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.plan h2 {
padding: 20px 20px 5px;
color: #fff;
margin-bottom: min(2.5641025641vw, 10px);
font-size: 28px;
font-weight: 700;
}
.plan h2 span.recommend {
font-size: 18px;
color: #ffd700;
margin-left: min(2.0512820513vw, 8px);
font-weight: 500;
}
.plan ul {
padding: 20px;
color: #fff;
list-style: none;
margin: min(2.5641025641vw, 10px) 0 0 0;
line-height: normal;
}
.plan ul li {
margin-bottom: min(1.5384615385vw, 6px);
}
.plan ul li span {
font-size: 1.2rem;
margin-bottom: min(2.5641025641vw, 10px);
}
.plan ul li span.no1 {
font-weight: 500;
margin-top: min(5.1282051282vw, 20px);
display: block;
color: #caf0ff;
}
/* Proプラン 青系グラデーション */
.pro-plan {
background: linear-gradient(135deg, #4da6ff, #1a75ff);
}
/* Masterプラン 紫系グラデーション */
.master-plan-monthly {
background: linear-gradient(135deg, #b266ff, #8000ff);
}
.master-plan-yearly {
background: linear-gradient(135deg, #3596bf, #6709c5);
}
.swpm-payment-button {
background: linear-gradient(90deg, #ffffff 0%, #ffd700 100%);
display: flex;
justify-content: end;
align-items: center;
padding: 10px 15px;
}
/* --------------------
PC / SP調整
-------------------- */
@media screen and (min-width: 768px) {
.plan {
max-width: 900px;
}
}
@media screen and (max-width: 767px) {
.subscription {
padding: min(2.5641025641vw, 10px);
}
.subscription .subscription-inner {
padding: min(1.2820512821vw, 5px);
}
.plan {
padding: 0;
}
.plan ul {
padding: 15px;
}
.plan h2 {
padding: 15px;
}
}
@media screen and (max-width: 430px) {
.swpm-payment-button {
justify-content: center;
}
.plan h2 span {
display: block;
margin: 5px 0 0 0 !important;
}
}
/* -------------------- 背景アニメーション -------------------- */
/* --------------------
スライドインアニメーション
-------------------- */
@keyframes slideInRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.plan {
opacity: 0;
animation: slideInRight 0.8s ease-out forwards;
}
.plan1 {
animation-delay: 0s;
}
.plan2 {
animation-delay: 0.2s;
}
.plan3 {
animation-delay: 0.4s;
}
/* -----------------------
C_top
----------------------- */
.C_top {
text-align: center;
color: #FFF;
z-index: 500;
position: relative;
}
.C_top .C_topTL {
font-family: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-style: normal;
position: relative;
}
.C_top .C_topTL .TL-top {
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_top .C_topTL .TL-top {
font-size: 45px;
text-shadow: 0 4px 0 rgba(150, 27, 0, 0.25);
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTL .TL-top {
font-size: 7.6923076923vw;
text-shadow: 0 0.5128205128vw 0 rgba(150, 27, 0, 0.25);
}
}
.C_top .C_topTL .bird iframe {
position: absolute;
}
@media screen and (min-width: 768px) {
.C_top .C_topTL .bird iframe {
width: 130px;
height: 100%;
top: -70px;
right: 186px;
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTL .bird iframe {
width: 16.6666666667vw;
height: 16.6666666667vw;
top: -5.1282051282vw;
right: 15.3846153846vw;
}
}
.C_top .C_topTL .TL-main {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_top .C_topTL .TL-main {
background-image: url("../img/bg-wood.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 810px;
height: 110px;
margin-top: 15px;
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTL .TL-main {
background-image: url("../img/bg-woodSP.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 82.0512820513vw;
height: 25.641025641vw;
margin-top: 1.2820512821vw;
display: grid;
place-items: center center;
}
}
.C_top .C_topTL .TL-main .TX {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.C_top .C_topTL .TL-main .TX {
font-size: 45px;
line-height: 100px;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTL .TL-main .TX {
font-size: 6.4102564103vw;
line-height: 12.8205128205vw;
text-shadow: 0 0.5128205128vw 0 rgba(0, 0, 0, 0.25);
line-height: 150%;
}
}
.C_top .C_topTL .TL-main .TX .yellow {
font-weight: 900;
color: #FFFF00;
}
.C_top .C_topTL .TL-main .TX .large {
font-weight: 900;
}
@media screen and (min-width: 768px) {
.C_top .C_topTL .TL-main .TX .large {
font-size: 55px;
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTL .TL-main .TX .large {
font-size: 8.9743589744vw;
}
}
.C_top .C_topTX {
font-family: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
@media screen and (min-width: 768px) {
.C_top .C_topTX {
text-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
margin-top: 59px;
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTX {
text-shadow: 0 0 1.7948717949vw rgba(0, 0, 0, 0.35);
margin-top: 7.6923076923vw;
}
}
.C_top .C_topTX .TX-TL {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.C_top .C_topTX .TX-TL {
font-size: 40px;
letter-spacing: 4px;
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTX .TX-TL {
font-size: 5.1282051282vw;
letter-spacing: 0.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.C_top .C_topTX .TX {
font-size: 16px;
line-height: 2.18;
letter-spacing: 0.64px;
margin-top: 20px;
}
}
@media screen and (max-width: 767px) {
.C_top .C_topTX .TX {
width: 76.9230769231vw;
margin: 0 auto;
font-size: 3.5897435897vw;
line-height: 1.5;
margin-top: 5.1282051282vw;
}
}
.C_bubble {
background-image: url("../img/bubble.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_bubble {
width: 33.125vw;
height: 17.5vw;
padding-top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.C_bubble {
width: 56.4102564103vw;
height: 30.7692307692vw;
padding-top: 6.4102564103vw;
}
}
.C_bubble .TX {
color: #6B644D;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.C_bubble .TX {
width: 20.234375vw;
font-size: 1.953125vw;
margin: 0 auto;
line-height: 1.5;
}
}
@media screen and (max-width: 767px) {
.C_bubble .TX {
width: 38.4615384615vw;
font-size: 3.5897435897vw;
margin: 0 auto;
line-height: 1.5;
}
}
.C_feature .TL-bg {
background: #fff;
position: relative;
z-index: 9;
margin: 0 auto;
}
.C_feature .TL-bg .TL {
font-family: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: #6B644D;
font-weight: 800;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL {
font-size: 3.515625vw;
letter-spacing: 0.140625vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL {
font-size: 4.6153846154vw;
letter-spacing: 0.4615384615vw;
}
}
.C_feature .TL-bg .TL span {
font-weight: 800;
position: relative;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL span {
font-size: 4.296875vw;
letter-spacing: 0.171875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL span {
font-size: 5.641025641vw;
letter-spacing: 0.3846153846vw;
}
}
.C_feature .TL-bg .TL .orange {
color: #F38549;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL .orange {
height: 5vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL .orange {
height: 6.4102564103vw;
}
}
.C_feature .TL-bg .TL .orange span {
position: absolute;
}
.C_feature .TL-bg .TL .orange span:nth-child(1) {
animation: bound-anime 0.8s 0.2s forwards;
left: 0;
}
.C_feature .TL-bg .TL .orange span:nth-child(2) {
animation: bound-anime 0.8s 0.3s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL .orange span:nth-child(2) {
left: 4.609375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL .orange span:nth-child(2) {
left: 5.641025641vw;
}
}
.C_feature .TL-bg .TL .orange span:nth-child(3) {
animation: bound-anime 0.8s 0.4s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL .orange span:nth-child(3) {
left: 9.21875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL .orange span:nth-child(3) {
left: 11.2820512821vw;
}
}
@keyframes bound-anime {
0%, 100% {
top: 0;
transform: scale(1);
}
30% {
top: -25%;
}
50% {
transform: scale(1);
}
90% {
top: 0;
transform: scale(1.2, 0.8);
}
}
.C_feature .TL-bg .TL .blue {
color: #4BBFCF;
display: flex;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL .blue {
height: 5vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL .blue {
height: 6.4102564103vw;
}
}
.C_feature .TL-bg .TL .blue span {
position: absolute;
}
.C_feature .TL-bg .TL .blue span:nth-child(1) {
animation: bound-anime 0.8s 0.5s forwards;
}
.C_feature .TL-bg .TL .blue span:nth-child(2) {
animation: bound-anime 0.8s 0.6s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL .blue span:nth-child(2) {
left: 4.609375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL .blue span:nth-child(2) {
left: 5.641025641vw;
}
}
.C_feature .TL-bg .TL .blue span:nth-child(3) {
animation: bound-anime 0.8s 0.7s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .TL-bg .TL .blue span:nth-child(3) {
left: 9.21875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .TL-bg .TL .blue span:nth-child(3) {
left: 11.2820512821vw;
}
}
@keyframes bound-anime {
0%, 100% {
top: 0;
transform: scale(1);
}
30% {
top: -25%;
}
50% {
transform: scale(1);
}
90% {
top: 0;
transform: scale(1.2, 0.8);
}
}
.C_feature .TL-bg::before {
content: "";
background: #fff;
display: block;
position: absolute;
z-index: -1;
}
@media screen and (min-width: 768px) {
.C_feature .feature01 {
width: 62.5vw;
height: 8.359375vw;
border-radius: 9.296875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature01 {
width: 89.7435897436vw;
height: 11.5384615385vw;
border-radius: 30.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature01::before {
width: 60.9375vw;
height: 6.40625vw;
border-radius: 9.296875vw;
top: -3.28125vw;
left: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature01::before {
width: 84.6153846154vw;
height: 10.2564102564vw;
border-radius: 30.5128205128vw;
top: -5.1282051282vw;
left: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature01 .TL .orange {
width: 13.359375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature01 .TL .orange {
width: 16.6666666667vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature01 .TL .blue {
width: 13.359375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature01 .TL .blue {
width: 16.6666666667vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature02 {
width: 38.515625vw;
height: 8.359375vw;
border-radius: 9.296875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature02 {
width: 56.4102564103vw;
height: 11.5384615385vw;
border-radius: 30.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature02::before {
width: 36.71875vw;
height: 5.859375vw;
border-radius: 9.296875vw;
top: -2.265625vw;
left: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature02::before {
width: 51.2820512821vw;
height: 10.2564102564vw;
border-radius: 30.5128205128vw;
top: -5.1282051282vw;
left: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature02 .TL .orange {
width: 8.90625vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature02 .TL .orange {
width: 11.5384615385vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature03 {
width: 58.046875vw;
height: 8.359375vw;
border-radius: 9.296875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 {
width: 76.9230769231vw;
height: 11.5384615385vw;
border-radius: 30.5128205128vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature03::before {
width: 55.390625vw;
height: 6.40625vw;
border-radius: 9.296875vw;
top: -3.4375vw;
left: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03::before {
width: 71.7948717949vw;
height: 10.2564102564vw;
border-radius: 30.5128205128vw;
top: -5.1282051282vw;
left: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.C_feature .feature03 .TL .blue {
width: 26.953125vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 .TL .blue {
width: 33.3333333333vw;
}
}
.C_feature .feature03 .TL .blue span:nth-child(1) {
animation: bound-anime 0.8s 0.2s forwards;
}
.C_feature .feature03 .TL .blue span:nth-child(2) {
animation: bound-anime 0.8s 0.3s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .feature03 .TL .blue span:nth-child(2) {
left: 4.609375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 .TL .blue span:nth-child(2) {
left: 5.641025641vw;
}
}
.C_feature .feature03 .TL .blue span:nth-child(3) {
animation: bound-anime 0.8s 0.4s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .feature03 .TL .blue span:nth-child(3) {
left: 9.21875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 .TL .blue span:nth-child(3) {
left: 11.2820512821vw;
}
}
.C_feature .feature03 .TL .blue span:nth-child(4) {
animation: bound-anime 0.8s 0.5s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .feature03 .TL .blue span:nth-child(4) {
left: 13.828125vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 .TL .blue span:nth-child(4) {
left: 16.9230769231vw;
}
}
.C_feature .feature03 .TL .blue span:nth-child(5) {
animation: bound-anime 0.8s 0.6s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .feature03 .TL .blue span:nth-child(5) {
left: 18.4375vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 .TL .blue span:nth-child(5) {
left: 22.5641025641vw;
}
}
.C_feature .feature03 .TL .blue span:nth-child(6) {
animation: bound-anime 0.8s 0.7s forwards;
}
@media screen and (min-width: 768px) {
.C_feature .feature03 .TL .blue span:nth-child(6) {
left: 23.046875vw;
}
}
@media screen and (max-width: 767px) {
.C_feature .feature03 .TL .blue span:nth-child(6) {
left: 28.2051282051vw;
}
}
.C_feature .TX {
font-family: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: #fff;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_feature .TX {
font-size: 1.25vw;
line-height: 2.18;
letter-spacing: 0.05vw;
width: 54.140625vw;
margin-top: 3.75vw;
font-weight: 700;
}
}
@media screen and (max-width: 767px) {
.C_feature .TX {
font-size: 3.5897435897vw;
line-height: 1.5;
width: 89.7435897436vw;
margin-top: 12.3076923077vw;
font-weight: 500;
}
}
.zoomIn {
animation: zoomInAnime 0.5s ease 0s forwards;
}
@keyframes zoomInAnime {
from {
opacity: 0;
transform: scale(0.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
.C_test {
font-family: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.C_test .TX-bg {
background: #FEFFFF;
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg {
width: clamp(700px, 82.8125vw, 1060px);
height: clamp(100px, 17.03125vw, 218px);
border-radius: 9.296875vw;
display: grid;
place-items: center center;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg {
width: 89.7435897436vw;
height: 38.4615384615vw;
border-radius: 12.8205128205vw;
display: grid;
place-items: center center;
}
}
.C_test .TX-bg .TX {
color: #877E61;
font-weight: 600;
position: relative;
word-break: break-all;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .TX {
font-size: clamp(18px, 1.953125vw, 25px);
width: clamp(600px, 62.34375vw, 798px);
line-height: 1.5;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .TX {
font-size: 3.5897435897vw;
width: 74.358974359vw;
line-height: 1.5;
}
}
.C_test .TX-bg .TX span {
display: none;
}
.C_test .TX-bg .TX::after {
content: "|";
animation: typinganime 0.8s ease infinite;
}
@keyframes typinganime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.C_test .TX-bg .arrow {
background-image: url("../img/testarrow.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .arrow {
width: clamp(30px, 2.578125vw, 33px);
height: 2.8125vw;
right: 8%;
bottom: 2.890625vw;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .arrow {
width: 3.8461538462vw;
height: 4.358974359vw;
right: 7.6923076923vw;
bottom: 3.8461538462vw;
}
}
.C_test .TX-bg .name {
background: #F69082;
position: absolute;
display: grid;
place-items: center center;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .name {
width: clamp(200px, 19.21875vw, 246px);
height: clamp(55px, 5.078125vw, 65px);
border-radius: 3.125vw;
transform: rotate(-4.466deg);
top: -20%;
left: -1.328125vw;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .name {
width: 25.641025641vw;
height: 7.6923076923vw;
border-radius: 10.2564102564vw;
transform: rotate(-8deg);
top: -2.5641025641vw;
left: -2.5641025641vw;
}
}
.C_test .TX-bg .name .name-TX {
color: #fff;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .name .name-TX {
font-size: clamp(26px, 2.03125vw, 26px);
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .name .name-TX {
font-size: 4.1025641026vw;
}
}
.C_test .TX-bg .select {
background: #FFF8BB;
position: absolute;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .select {
border-radius: 1.5625vw;
border: 0.390625vw solid #FFEB36;
width: 19.21875vw;
padding: 3.203125vw 0 3.203125vw 3.203125vw;
top: -10.3125vw;
right: -3.4375vw;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .select {
border-radius: 5.1282051282vw;
border: 0.7692307692vw solid #FFEB36;
width: 35.8974358974vw;
padding: 5.3846153846vw 0 5.3846153846vw 5.3846153846vw;
top: -15.3846153846vw;
right: -2.5641025641vw;
}
}
.C_test .TX-bg .select .case {
color: #9B9B9B;
font-weight: 600;
display: flex;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .select .case {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .select .case {
font-size: 3.0769230769vw;
}
}
.C_test .TX-bg .select .case::before {
content: "";
clip-path: polygon(0 0, 100% 50%, 0 100%);
background: #F38549;
display: block;
opacity: 0;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .select .case::before {
width: 1.40625vw;
height: 1.71875vw;
margin: auto 1.328125vw auto 0;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .select .case::before {
width: 2.3076923077vw;
height: 2.5641025641vw;
margin: auto 2.0512820513vw auto 0;
}
}
.C_test .TX-bg .select .case:hover::before {
opacity: 1;
}
.C_test .TX-bg .select .case:hover {
color: #F38549;
}
@media screen and (min-width: 768px) {
.C_test .TX-bg .select .caseA {
margin-bottom: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.C_test .TX-bg .select .caseA {
margin-bottom: 3.8461538462vw;
}
}
.C_image {
display: flex;
gap: 40px;
}
.C_image .bg {
background: #FFF;
display: flex;
position: relative;
}
@media screen and (min-width: 768px) {
.C_image .bg {
width: 234px;
height: 140px;
}
}
.C_image .bg .img {
margin: auto;
}
@media screen and (min-width: 768px) {
.C_image .bg .img {
width: 206px;
height: 120px;
}
}
.C_image .image01 {
transform: rotate(-4.443deg);
}
.C_image .image01 .img {
background-image: url("../img/image01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_image .image01 .butterfly {
background-image: url("../img/butterfly01.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.C_image .image01 .butterfly {
width: 68px;
height: 65px;
top: -30px;
left: 105px;
}
}
.C_image .image02 {
transform: rotate(3.885deg);
}
.C_image .image02 .img {
background-image: url("../img/image01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_image .image02 .butterfly {
background-image: url("../img/butterfly02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.C_image .image02 .butterfly {
width: 70px;
height: 50px;
bottom: 33px;
left: 20px;
}
}
.C_image .image03 {
transform: rotate(-5.816deg);
}
.C_image .image03 .img {
background-image: url("../img/image01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_image .image03 .butterfly {
background-image: url("../img/butterfly03.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.C_image .image03 .butterfly {
width: 66px;
height: 62px;
top: -30px;
right: 5px;
}
}
/* -----------------------
C_menu
----------------------- */
.C_menu {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_menu {
gap: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_menu {
flex-wrap: wrap;
justify-content: center;
gap: 2.5641025641vw;
}
}
.C_menu .menu-item {
color: #7FBF99;
}
@media screen and (min-width: 768px) {
.C_menu .menu-item {
width: 11.015625vw;
font-size: 0.78125vw;
letter-spacing: 0.078125vw;
border-radius: 1.5625vw;
padding: 0.3125vw 0.9375vw;
border: 0.078125vw solid #7FBF99;
}
}
@media screen and (max-width: 767px) {
.C_menu .menu-item {
width: clamp(120px, 30.7692307692vw, 160px);
font-size: clamp(10px, 2.5641025641vw, 12px);
letter-spacing: 0.2564102564vw;
border-radius: 5.1282051282vw;
padding: 0.7692307692vw 2.5641025641vw;
border: 0.2564102564vw solid #7FBF99;
}
}
.C_menu .post {
background: #7FBF99;
color: #FFFFFF;
}
@media screen and (min-width: 768px) {
.C_menu .post {
box-shadow: 0px 0.15625vw 0.3125vw 0px rgba(0, 0, 0, 0.25), inset 0px 0px 0.78125vw 0px #BCF3D3;
padding: 0.546875vw 1.953125vw;
border-radius: 0.390625vw;
font-size: 0.9375vw;
letter-spacing: 0.09375vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .post {
box-shadow: 0px 0.5128205128vw 1.0256410256vw 0px rgba(0, 0, 0, 0.25), inset 0px 0px 2.5641025641vw 0px #BCF3D3;
padding: 0.7692307692vw clamp(12px, 5.3846153846vw, 27px) 1.0256410256vw;
border-radius: 0.7692307692vw;
font-size: clamp(10px, 2.5641025641vw, 12px);
letter-spacing: 0.2564102564vw;
}
}
@media screen and (min-width: 768px) {
.C_menu .post .post-content {
font-weight: 800;
}
}
@media screen and (max-width: 767px) {
.C_menu .post .post-content {
font-weight: 600;
}
}
.C_menu .category .category-content {
position: relative;
cursor: pointer;
}
.C_menu .category .category-content .select-content {
display: none;
opacity: 0;
transition: 0.3s;
position: absolute;
z-index: 10;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content .select-content {
top: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content .select-content {
top: 4.1025641026vw;
}
}
.C_menu .category .category-content .select-content .select {
color: #FFFFFF;
width: 100%;
background: #7FBF99;
left: 0;
display: flex;
flex-direction: column;
overflow: scroll;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content .select-content .select {
padding: 0.78125vw;
border-radius: 0.390625vw;
gap: 0.78125vw;
height: 12.5vw;
width: 11.71875vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content .select-content .select {
padding: clamp(4px, 2.0512820513vw, 10px);
border-radius: 0.7692307692vw;
gap: 1.7948717949vw;
height: clamp(160px, 41.0256410256vw, 208px);
width: clamp(150px, 38.4615384615vw, 195px);
}
}
.C_menu .category .category-content .select-content .select .TX {
color: #1E673C;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content .select-content .select .TX {
font-size: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content .select-content .select .TX {
font-size: clamp(12px, 3.0769230769vw, 14px);
}
}
.C_menu .category .category-content .select-content .select a {
color: #FFFFFF;
display: inline-block;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content .select-content .select a {
font-size: 0.78125vw;
margin: 0.390625vw 0 0 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content .select-content .select a {
font-size: clamp(10px, 2.5641025641vw, 12px);
margin: 1.0256410256vw 0 0 1.0256410256vw;
}
}
.C_menu .category .category-content .select-content .select li {
white-space: nowrap;
}
.C_menu .category .category-content .select-content.show {
display: block;
opacity: 0;
animation: down 0.8s ease 0s forwards;
}
@keyframes down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.C_menu .category .category-content::before, .C_menu .category .category-content::after {
content: "";
position: absolute;
right: 0;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content::before, .C_menu .category .category-content::after {
width: 0.234375vw;
height: 0.234375vw;
border-right: 0.078125vw solid #7FBF99;
border-bottom: 0.078125vw solid #7FBF99;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content::before, .C_menu .category .category-content::after {
width: 0.5128205128vw;
height: 0.5128205128vw;
border-right: 0.2564102564vw solid #7FBF99;
border-bottom: 0.2564102564vw solid #7FBF99;
}
}
.C_menu .category .category-content::before {
rotate: -135deg;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content::before {
top: 0vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content::before {
top: clamp(0px, 0.5128205128vw, 2px);
}
}
.C_menu .category .category-content::after {
rotate: 45deg;
}
@media screen and (min-width: 768px) {
.C_menu .category .category-content::after {
bottom: 0vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .category .category-content::after {
bottom: clamp(0px, 0.5128205128vw, 2px);
}
}
.C_menu .search {
position: relative;
}
@media screen and (min-width: 768px) {
.C_menu .search {
margin-left: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .search {
margin-left: 3.8461538462vw;
}
}
.C_menu .search-content {
background: rgba(156, 196, 83, 0.24);
position: relative;
border: none;
}
@media screen and (min-width: 768px) {
.C_menu .search-content {
width: 10.78125vw;
height: 1.5625vw;
padding: 0.15625vw 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .search-content {
width: clamp(100px, 27.1794871795vw, 132px);
height: clamp(15px, 4.6153846154vw, 25px);
}
}
.C_menu .search-content .search-input {
background: none;
border: none;
outline: none;
color: #7FBF99;
max-width: 100%;
}
@media screen and (min-width: 768px) {
.C_menu .search-content .search-input {
margin-top: 0.15625vw;
font-size: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .search-content .search-input {
font-size: clamp(10px, 2.5641025641vw, 12px);
}
}
.C_menu .search-content .search-input::placeholder {
color: #7FBF99;
}
.C_menu .search::before {
content: "";
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
translate: 0 -50%;
}
@media screen and (min-width: 768px) {
.C_menu .search::before {
width: 1.5625vw;
height: 1.328125vw;
left: -1.71875vw;
}
}
@media screen and (max-width: 767px) {
.C_menu .search::before {
width: clamp(16px, 4.6153846154vw, 20px);
height: clamp(14px, 4.1025641026vw, 18px);
left: max(-5.1282051282vw, -24px);
}
}
/* -----------------------
C_chatbot
----------------------- */
.C_chatbot {
background: #F9FFD2;
position: relative;
flex: 1;
}
@media screen and (min-width: 768px) {
.C_chatbot {
border-radius: 2.34375vw;
padding: 2.265625vw 1.640625vw 5.9375vw;
margin-left: 1.640625vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot {
border-radius: clamp(20px, 6.9230769231vw, 30px);
padding: 12px 25px;
margin-top: 15px;
height: 37.1329879102%;
}
}
.C_chatbot .chatbot-content {
height: 100%;
overflow: scroll;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content {
padding-bottom: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content {
padding-bottom: clamp(50px, 15.3846153846vw, 60px);
}
}
.C_chatbot .chatbot-content .bot-message {
display: flex;
}
.C_chatbot .chatbot-content .bot-message .icon {
background-image: url("../img/bot.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .bot-message .icon {
width: 2.109375vw;
height: 2.109375vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .bot-message .icon {
width: clamp(25px, 6.4102564103vw, 35px);
height: clamp(25px, 6.4102564103vw, 35px);
}
}
.C_chatbot .chatbot-content .bot-message .textbox {
background: #FFFFFF;
color: #B29975;
line-height: 1.5;
margin-right: auto;
flex: 1;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .bot-message .textbox {
width: 16.09375vw;
font-size: 0.9375vw;
padding: 0.625vw 0.9375vw;
margin-left: 0.9375vw;
letter-spacing: 0.046875vw;
border-radius: 0.234375vw;
filter: drop-shadow(0 0.234375vw 0.390625vw rgba(0, 0, 0, 0.15));
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .bot-message .textbox {
font-size: clamp(12px, 3.0769230769vw, 14px);
padding: 8px 15px;
margin-left: 2.5641025641vw;
letter-spacing: 0.2564102564vw;
border-radius: 0.7692307692vw;
filter: drop-shadow(0 0.7692307692vw 1.2820512821vw rgba(0, 0, 0, 0.15));
}
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .bot-message .textbox h2 {
font-weight: 600;
font-size: 1.015625vw;
margin-bottom: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .bot-message .textbox h2 {
font-size: clamp(12px, 3.0769230769vw, 14px);
margin-bottom: 2.5641025641vw;
}
}
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li {
background: #A2C859;
display: grid;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li {
margin-top: 0.859375vw;
padding: 0.390625vw 0 0.390625vw 0.9375vw;
border-radius: 0.234375vw;
filter: drop-shadow(0 0.234375vw 0.390625vw rgba(0, 0, 0, 0.15));
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li {
margin-top: 2.5641025641vw;
padding: 1.2820512821vw 0 1.2820512821vw 2.5641025641vw;
}
}
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li .chatbot-title {
color: #FFFFFF;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li .chatbot-title {
font-size: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li .chatbot-title {
font-size: clamp(11px, 2.8205128205vw, 13px);
}
}
.C_chatbot .chatbot-content .q-and-a #q-and-a-list li.show {
animation: up 0.8s ease 0.5s forwards;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .answer-message {
margin-top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .answer-message {
margin: 2.5641025641vw 0;
}
}
.C_chatbot .chatbot-content .answer-message.show {
animation: up 0.8s ease 0.5s forwards;
}
.C_chatbot .chatbot-content .search-word {
display: flex;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search-word {
margin-top: 0.78125vw;
}
}
.C_chatbot .chatbot-content .search-word .word {
background: #FFFFFF;
color: #B29975;
margin-left: auto;
line-height: 1.5;
display: block;
font-weight: 600;
flex: 1;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search-word .word {
max-width: 16.09375vw;
font-size: 0.9375vw;
padding: 0.625vw 0.9375vw;
letter-spacing: 0.046875vw;
border-radius: 0.234375vw;
filter: drop-shadow(0 0.234375vw 0.390625vw rgba(0, 0, 0, 0.15));
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .search-word .word {
max-width: 90%;
font-size: clamp(12px, 3.0769230769vw, 14px);
padding: 1.2820512821vw 2.5641025641vw;
border-radius: 0.7692307692vw;
filter: drop-shadow(0 0.7692307692vw 1.2820512821vw rgba(0, 0, 0, 0.15));
}
}
.C_chatbot .chatbot-content .search-word .icon {
background-image: url("../img/staff-icon.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search-word .icon {
width: 2.109375vw;
height: 2.109375vw;
margin-left: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .search-word .icon {
width: clamp(25px, 6.4102564103vw, 27px);
height: clamp(25px, 6.4102564103vw, 27px);
margin-left: 2.5641025641vw;
}
}
.C_chatbot .chatbot-content .search-word.show {
animation: up 0.8s ease 0.5s forwards;
}
.C_chatbot .chatbot-content .search-result {
color: #B29975;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search-result {
margin-top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .search-result {
margin-top: 2.5641025641vw;
}
}
.C_chatbot .chatbot-content .search-result.show {
animation: up 0.8s ease 1s forwards;
}
.C_chatbot .chatbot-content .search {
position: absolute;
background: #FFFFFF;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search {
width: 19.453125vw;
height: 4.0625vw;
bottom: 0.9375vw;
border-radius: 1.5625vw;
padding: 0 0 1.171875vw 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .search {
width: clamp(227px, 52.5641025641vw, 282px);
height: clamp(40px, 10.2564102564vw, 50px);
bottom: 10px;
border-radius: clamp(14px, 4.1025641026vw, 25px);
margin: 0 auto;
padding: 1.2820512821vw 0 3.8461538462vw 5.1282051282vw;
}
}
.C_chatbot .chatbot-content .search #search-input {
position: relative;
border: none;
background: none;
outline: none;
color: #B29975;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search #search-input {
width: 100%;
height: 100%;
font-size: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .search #search-input {
font-size: clamp(12px, 3.0769230769vw, 14px);
}
}
.C_chatbot .chatbot-content .search #search-input::placeholder {
color: #D9D9D9;
}
@media screen and (min-width: 768px) {
.C_chatbot .chatbot-content .search #search-input::placeholder {
font-size: 0.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_chatbot .chatbot-content .search #search-input::placeholder {
font-size: clamp(12px, 3.0769230769vw, 14px);
}
}
/* -----------------------
C_back-btn
----------------------- */
.C_back-btn {
background: #C8C8C8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25), inset 0px 0px 10px 0px #F1F9F4;
color: #FFFFFF;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_back-btn {
width: clamp(81px, 6.328125vw, 105.3px);
border-radius: clamp(5px, 0.390625vw, 6.5px);
padding: clamp(7px, 0.546875vw, 9.1px) clamp(25px, 1.953125vw, 32.5px);
letter-spacing: clamp(1.2px, 0.09375vw, 1.56px);
font-size: clamp(12px, 0.9375vw, 15.6px);
}
}
@media screen and (max-width: 767px) {
.C_back-btn {
width: clamp(46px, 11.7948717949vw, 59.8px);
height: clamp(15px, 3.8461538462vw, 19.5px);
border-radius: clamp(3px, 0.7692307692vw, 3.9px);
letter-spacing: clamp(1.2px, 0.3076923077vw, 1.56px);
font-size: clamp(10px, 2.5641025641vw, 13px);
display: grid;
place-items: center center;
}
}
/* -----------------------
C_chat-content
----------------------- */
.C_chat-content #latest-messages {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.C_chat-content #latest-messages {
gap: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.C_chat-content #latest-messages {
display: none;
gap: 15px;
}
}
.C_chat-content #latest-messages .sac-chat-message {
color: #B29975;
background: #FFFFFF;
position: relative;
}
@media screen and (min-width: 768px) {
.C_chat-content #latest-messages .sac-chat-message {
width: 10.3125vw;
font-size: 0.78125vw;
padding: 0.546875vw 1.25vw;
border-radius: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.C_chat-content #latest-messages .sac-chat-message {
width: 132px;
font-size: 10px;
padding: 7px 16px;
border-radius: 3px;
}
}
.C_chat-content #latest-messages .sac-chat-message::before {
content: "";
clip-path: polygon(75% 0, 100% 100%, 10% 100%);
background: #FFFFFF;
position: absolute;
bottom: 0;
}
@media screen and (min-width: 768px) {
.C_chat-content #latest-messages .sac-chat-message::before {
width: 1.328125vw;
height: 0.46875vw;
left: -0.546875vw;
}
}
@media screen and (max-width: 767px) {
.C_chat-content #latest-messages .sac-chat-message::before {
width: 17px;
height: 6px;
left: -7px;
}
}
@media screen and (max-width: 767px) {
.C_chat-content.open #latest-messages {
display: flex;
}
}
.C_reaction {
position: relative;
display: block;
}
.C_reaction .TX {
color: #F4FFCB;
line-height: 1.3;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_reaction .TX {
font-size: 1.015625vw;
letter-spacing: 0.09375vw;
}
}
@media screen and (max-width: 767px) {
.C_reaction .TX {
font-size: min(3.0769230769vw, 12px);
letter-spacing: 0.2564102564vw;
}
}
.C_reaction .reaction-counter {
color: #FFFFFF;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_reaction .reaction-counter {
font-size: 1.015625vw;
letter-spacing: 0.09375vw;
}
}
@media screen and (max-width: 767px) {
.C_reaction .reaction-counter {
font-size: min(2.5641025641vw, 10px);
letter-spacing: 0.2564102564vw;
}
}
.C_reaction .coin-counter {
background: #FFFFFF;
display: flex;
align-items: center;
filter: brightness(70%);
width: fit-content;
}
@media screen and (min-width: 768px) {
.C_reaction .coin-counter {
border-radius: 1.5625vw;
padding: 0.3125vw 1.015625vw 0.3125vw 0.625vw;
}
}
@media screen and (max-width: 767px) {
.C_reaction .coin-counter {
border-radius: min(5.1282051282vw, 20px);
padding: min(0.5128205128vw, 2px) min(2.5641025641vw, 10px) min(0.5128205128vw, 2px) min(1.5384615385vw, 6px);
}
}
.C_reaction .coin-counter .icon {
background-image: url("../img//log-board/log-board-item-02.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_reaction .coin-counter .icon {
width: 2.34375vw;
height: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.C_reaction .coin-counter .icon {
width: min(5.1282051282vw, 20px);
height: min(5.1282051282vw, 20px);
}
}
.C_reaction .coin-counter .number {
font-weight: 800;
color: #F69064;
}
@media screen and (min-width: 768px) {
.C_reaction .coin-counter .number {
font-size: 1.640625vw;
margin-left: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.C_reaction .coin-counter .number {
font-size: min(3.5897435897vw, 14px);
margin-left: min(0.7692307692vw, 3px);
}
}
.C_reaction .coin-counter.get {
filter: brightness(100%);
}
/* -----------------------
C_first
----------------------- */
.C_first_label {
border-radius: 999px;
display: flex;
align-items: center;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_first_label {
width: min(34.375vw, 440px);
height: min(3.671875vw, 47px);
padding-left: min(1.796875vw, 23px);
gap: min(0.546875vw, 7px);
}
}
@media screen and (max-width: 767px) {
.C_first_label {
width: 95%;
height: 8.9743589744vw;
padding-left: 3.8461538462vw;
gap: 1.7948717949vw;
}
}
.C_first_label .number {
background-color: #F8F8F8;
display: grid;
place-items: center;
}
@media screen and (min-width: 768px) {
.C_first_label .number {
width: min(2.421875vw, 31px);
height: min(2.265625vw, 29px);
border-radius: min(0.3125vw, 4px);
font-size: min(1.328125vw, 17px);
}
}
@media screen and (max-width: 767px) {
.C_first_label .number {
width: 5.641025641vw;
height: 5.1282051282vw;
border-radius: 0.7692307692vw;
font-size: 3.5897435897vw;
}
}
.C_first_label--TX {
font-weight: 500;
text-shadow: 0 0 0.5px;
}
@media screen and (min-width: 768px) {
.C_first_label--TX {
font-size: min(1.484375vw, 19px);
letter-spacing: min(0.04453125vw, 0.57px);
line-height: min(3.671875vw, 47px);
}
}
@media screen and (max-width: 767px) {
.C_first_label--TX {
font-size: 4.1025641026vw;
letter-spacing: 0.1025641026vw;
line-height: 8.9743589744vw;
}
}
.C_first_label.label01 {
background: rgba(159, 201, 68, 0.3);
}
.C_first_label.label01 .number {
color: #007B5A;
}
.C_first_label.label01 .C_first_label--TX {
color: #6B960E;
}
.C_first_label.label02 {
background: #CBE8F4;
}
.C_first_label.label02 .number {
color: #405164;
}
.C_first_label.label02 .C_first_label--TX {
color: #6593A6;
}
.C_first_TL {
color: #4C4C4C;
}
@media screen and (min-width: 768px) {
.C_first_TL {
border-bottom: min(0.390625vw, 5px) solid;
padding-bottom: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.C_first_TL {
border-bottom: 0.7692307692vw solid;
padding-bottom: 1.2820512821vw;
}
}
.C_first_TL--TX {
font-weight: 800;
text-align: center;
}
@media screen and (min-width: 768px) {
.C_first_TL--TX {
font-size: min(2.5vw, 32px);
}
}
@media screen and (max-width: 767px) {
.C_first_TL--TX {
font-size: 5.3846153846vw;
}
}
/* -----------------------
PC
①はじめに・学べること：126px
②はじめに・学べること：118px
③はじめに・はじめに：111px
----------------------- */
.C_first_tag {
background: #6B960E;
overflow: hidden;
display: grid;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.C_first_tag {
border-radius: 999px 0px 0px 999px;
height: min(3.515625vw, 45px);
line-height: min(3.515625vw, 45px);
padding-left: min(1.25vw, 16px);
}
}
@media screen and (max-width: 767px) {
.C_first_tag {
border-radius: 10px 10px 0px 0px;
height: 6.1538461538vw;
padding: 1.2820512821vw 2.5641025641vw 0;
width: fit-content;
}
}
.C_first_tag--TX {
color: #FFFFFF;
white-space: nowrap;
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_first_tag--TX {
font-size: min(1.40625vw, 18px);
}
}
@media screen and (max-width: 767px) {
.C_first_tag--TX {
font-size: 3.0769230769vw;
}
}
@media screen and (min-width: 768px) {
.C_first_tag.tag01 {
width: min(9.84375vw, 126px);
}
}
@media screen and (min-width: 768px) {
.C_first_tag.tag02 {
width: min(9.21875vw, 118px);
}
}
@media screen and (min-width: 768px) {
.C_first_tag.tag03 {
width: min(8.75vw, 112px);
}
}
@media screen and (max-width: 767px) {
.C_first_tag.sp-type02 {
height: 9.2307692308vw;
background: #73A800;
}
}
.C_first_tag.active {
background: #9FC944;
}
@media screen and (min-width: 768px) {
.C_first_tag.active {
width: min(12.65625vw, 162px);
}
}
@media screen and (max-width: 767px) {
.C_first_tag.active {
height: 9.2307692308vw;
}
}
.C_first_tag.active .C_first_tag--TX {
color: #FBFF00;
}
.cssbk-wrap {
background-image: url("../img/book.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.cssbk-wrap .cssbk {
position: relative;
width: 100%;
padding-bottom: 72%;
}
.cssbk-wrap .cssbk input {
display: none;
}
.cssbk-wrap .cssbk input ~ span {
transition: 1.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
width: 45%;
height: 75%;
top: 12%;
transform: translateY(-50%);
background-color: #F8F8F8;
}
.cssbk-wrap .cssbk input + span {
left: 53%;
transform-origin: left;
transform: perspective(1500px) rotateY(0deg);
}
.cssbk-wrap .cssbk input + span + span {
right: 50%;
transform-origin: right;
transform: perspective(1500px) rotateY(180deg);
}
.cssbk-wrap .cssbk input:checked + span {
transform: perspective(1500px) rotateY(-180deg);
}
.cssbk-wrap .cssbk input:checked + span + span {
transform: perspective(1500px) rotateY(0deg);
}
/* -----------------------
C_first_genre
----------------------- */
.C_first_genre {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.C_first_genre {
padding-inline: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.C_first_genre {
padding-inline: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.C_first_genre li {
width: min(10.625vw, 136px);
}
}
@media screen and (max-width: 767px) {
.C_first_genre li {
width: 20.5128205128vw;
}
}
.C_first_genre li .genre_img {
aspect-ratio: 1/1;
display: block;
width: 100%;
transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
.C_first_genre li .genre_img {
box-shadow: 0px 0px 0.3125vw 0px rgba(0, 0, 0, 0.25);
border-radius: min(0.46875vw, 6px);
}
}
@media screen and (max-width: 767px) {
.C_first_genre li .genre_img {
border-radius: 0.7692307692vw;
box-shadow: 0px 0px 1.0256410256vw 0px rgba(0, 0, 0, 0.25);
}
}
.C_first_genre li .genre_img.img_01 {
background-image: url("../img/html.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_genre li .genre_img.img_02 {
background-image: url("../img/java.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_genre li .genre_img.img_03 {
background-image: url("../img/react.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_genre li .genre_TL {
font-weight: 500;
}
@media screen and (min-width: 768px) {
.C_first_genre li .genre_TL {
font-size: min(1.171875vw, 15px);
letter-spacing: min(0.03515625vw, 0.45px);
margin-top: 0.625vw;
}
}
@media screen and (max-width: 767px) {
.C_first_genre li .genre_TL {
font-size: 3.0769230769vw;
margin-top: 2.0512820513vw;
}
}
.C_first_genre li .genre_TX {
line-height: normal;
}
@media screen and (min-width: 768px) {
.C_first_genre li .genre_TX {
font-size: min(0.78125vw, 10px);
letter-spacing: min(0.0234375vw, 0.3px);
margin-top: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.C_first_genre li .genre_TX {
font-size: 2.5641025641vw;
margin-top: 1.2820512821vw;
}
}
.C_first_genre li:hover .genre_img {
transform: scale(1.1);
transition: all 0.3s ease;
}
/* -----------------------
C_first_zero
----------------------- */
.C_first_zero {
background: #96CDE4;
color: #FFFFFF;
position: relative;
display: block;
}
@media screen and (min-width: 768px) {
.C_first_zero {
padding: min(1.328125vw, 17px) min(10.859375vw, 139px) min(1.875vw, 24px) min(2.03125vw, 26px);
box-shadow: min(0.15625vw, 2px) min(0.234375vw, 3px) min(0.390625vw, 5px) 0px rgba(0, 0, 0, 0.25);
}
}
@media screen and (max-width: 767px) {
.C_first_zero {
padding: 2.5641025641vw 16.6666666667vw 3.0769230769vw 3.3333333333vw;
box-shadow: 0.2564102564vw 0.5128205128vw 0.7692307692vw 0px rgba(0, 0, 0, 0.25);
}
}
.C_first_zero--TL {
font-weight: 800;
}
@media screen and (min-width: 768px) {
.C_first_zero--TL {
letter-spacing: min(0.04453125vw, 0.57px);
font-size: min(1.484375vw, 19px);
}
}
@media screen and (max-width: 767px) {
.C_first_zero--TL {
letter-spacing: 0.0769230769vw;
font-size: 3.5897435897vw;
}
}
.C_first_zero--TX {
font-weight: 500;
line-height: normal;
}
@media screen and (min-width: 768px) {
.C_first_zero--TX {
font-size: min(1.015625vw, 13px);
letter-spacing: min(0.03046875vw, 0.39px);
margin: min(1.171875vw, 15px) 0 0 min(0.46875vw, 6px);
}
}
@media screen and (max-width: 767px) {
.C_first_zero--TX {
font-size: 2.5641025641vw;
letter-spacing: 0.0512820513vw;
margin: 2.0512820513vw 0 0 0.7692307692vw;
}
}
.C_first_zero .imgbox {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_first_zero .imgbox {
margin-top: min(0.78125vw, 10px);
justify-content: space-between;
}
}
@media screen and (max-width: 767px) {
.C_first_zero .imgbox {
margin-top: 2.0512820513vw;
gap: 2.0512820513vw;
}
}
.C_first_zero .imgbox .img {
aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
.C_first_zero .imgbox .img {
width: min(4.921875vw, 63px);
}
}
@media screen and (max-width: 767px) {
.C_first_zero .imgbox .img {
width: 10.2564102564vw;
}
}
.C_first_zero .imgbox .img.img01 {
background-image: url("../img/html.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_zero .imgbox .img.img02 {
background-image: url("../img/jquery.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_zero .imgbox .img.img03 {
background-image: url("../img/lp.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_zero .imgbox .img.img04 {
background-image: url("../img/fam.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.C_first_zero--chara {
background-image: url("../img/first_zero.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
right: 0;
}
@media screen and (min-width: 768px) {
.C_first_zero--chara {
width: min(8.828125vw, 113px);
height: min(10.15625vw, 130px);
bottom: min(1.328125vw, 17px);
right: min(1.09375vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_first_zero--chara {
width: 17.9487179487vw;
height: 20.5128205128vw;
bottom: 1.2820512821vw;
right: 1.2820512821vw;
}
}
/* -----------------------
C_first_rec
----------------------- */
.C_first_rec {
background: rgba(159, 201, 68, 0.3);
position: relative;
}
@media screen and (min-width: 768px) {
.C_first_rec {
border-radius: min(1.5625vw, 20px);
padding: min(1.328125vw, 17px) min(1.09375vw, 14px) min(2.96875vw, 38px);
}
}
@media screen and (max-width: 767px) {
.C_first_rec {
border-radius: 2.5641025641vw;
padding: 3.0769230769vw 1.7948717949vw 22.3076923077vw;
}
}
.C_first_rec--TL {
background: #FFFFFF;
color: #6B960E;
width: fit-content;
margin: 0 auto;
font-weight: 800 !important;
}
@media screen and (min-width: 768px) {
.C_first_rec--TL {
padding: min(0.546875vw, 7px) min(1.71875vw, 22px);
border-radius: min(0.390625vw, 5px);
}
}
@media screen and (max-width: 767px) {
.C_first_rec--TL {
padding: 1.0256410256vw 2.8205128205vw;
border-radius: 0.7692307692vw;
}
}
@media screen and (min-width: 768px) {
.C_first_rec .textbox {
margin-top: min(1.953125vw, 25px);
display: flex;
flex-direction: column;
gap: min(1.171875vw, 15px);
}
}
@media screen and (max-width: 767px) {
.C_first_rec .textbox {
margin-top: 2.5641025641vw;
display: flex;
flex-direction: column;
gap: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.C_first_rec .textbox p {
font-size: min(1.015625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.C_first_rec .textbox p {
font-size: 3.0769230769vw;
line-height: normal;
}
}
.C_first_rec .chara {
background-image: url("../img/first_rec.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
right: 0;
}
@media screen and (min-width: 768px) {
.C_first_rec .chara {
width: min(10.15625vw, 130px);
height: min(6.875vw, 88px);
}
}
@media screen and (max-width: 767px) {
.C_first_rec .chara {
width: 30.7692307692vw;
height: 20.5128205128vw;
}
}
/* -----------------------
C_first-TX15
----------------------- */
.C_first-TX15 {
font-weight: 500;
text-shadow: 0 0 0;
line-height: normal;
}
@media screen and (min-width: 768px) {
.C_first-TX15 {
font-size: min(1.171875vw, 15px);
letter-spacing: min(0.03515625vw, 0.45px);
}
}
@media screen and (max-width: 767px) {
.C_first-TX15 {
font-size: 3.3333333333vw;
letter-spacing: 0.0897435897vw;
}
}
/* -----------------------
C_first-TX
----------------------- */
.book--contents__page {
color: #4C4C4C;
}
.C_first-TX {
font-weight: 500;
text-shadow: 0 0 0;
line-height: normal;
}
@media screen and (min-width: 768px) {
.C_first-TX {
font-size: min(1.25vw, 16px);
letter-spacing: 0.0375vw;
}
}
@media screen and (max-width: 767px) {
.C_first-TX {
font-size: 3.3333333333vw;
letter-spacing: 0.1025641026vw;
}
}
/* -----------------------
archive-search
----------------------- */
.columns_search {
padding: 6px 3px;
}
.columns_search .search-item form {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4;
}
.columns_search .search-item form button {
aspect-ratio: 18/16;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
width: 18px;
}
.columns_search .search-item form input {
color: #7FBF99;
font-weight: 600;
line-height: 140%;
letter-spacing: 1px;
border: none;
border-radius: 20px;
background: #E2F9EB;
outline: none;
font-size: 10px;
width: 141px;
height: 20px;
padding: 0 12px;
}
.columns_search .search-item form input::placeholder {
color: #7FBF99;
}
/*# sourceMappingURL=main.css.map */