@charset "UTF-8";
/* CSS Document */

*{
margin: 0;
padding: 0;
}

html {
background-color: #000000;
scroll-behavior: smooth;
}

body {
font-family: "Smooch Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 30px;
color: #FFFFFF;
}

a {	
text-decoration: none;
color: #00E2DB;
}

#container {
position: relative;
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
}

header {
position: fixed;
top: 10px;
z-index: 999;
display: flex;
align-items: center;
}

header ul {
list-style: none;
margin: 0;
display: flex;
}

header li {
margin: 0 0 0 40px;
}

.eye {
font-family: "Rum Raisin", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 50px;
color: #00E2DB;
margin-bottom: 20px;
position: relative;
padding-left: 50px;
}

.eye:before {
content: url('../images/eye.png');
transform: scale(0.5);
position: absolute;
top: -11px;
left: -20px;
}

.shadow {
filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.5));
}

#top {
width: 250px;
}

.sns {
width: 60px;
position:fixed;
right:30px;
bottom:10px;
}

.sns img {
width: 60px;
margin-bottom: 20px;
}

#flexbox {
display: flex;
flex-wrap: wrap;
height: auto;
justify-content: space-between;
margin-top: 40px;
}

.box-item {
text-align: center;
padding-bottom: 80px;
}

.box-item img {
width: 485px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

li::marker {
color: #51046B;
}

.text {
padding-bottom: 100px;
font-size: 24px;
}

.list {
padding-left: 20px;	
}

.fadeDown{
animation-name: fadeDownAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeDownAnime{

from {
opacity: 0;
transform: translateY(-100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.fadeRight {
animation-name: fadeRightAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeRightAnime{
from {
opacity: 0;
transform: translateX(100px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

.shop {
padding-top: 150px;
}

.shop img {
max-width: 1000px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}


/* タブレット用 */
@media screen and (max-width: 960px) {

body {
font-size: 23px;
}

#container {
max-width: 740px;
}

header li {
margin: 0 0 0 30px;
}
	
.eye {
font-size: 40px;
margin-bottom: 12px;
padding-left: 45px;
}

.eye:before {
transform: scale(0.4);
top: -18px;
left: -20px;
}

#top {
width: 220px;
}

.sns {
width: 50px;
right:20px;
}

.sns img {
width: 50px;
margin-bottom: 15px;
}

#flexbox {
margin-top: 30px;
}

.box-item {
padding-bottom: 60px;
}

.box-item img {
width: 355px;
}

.text {
padding-bottom: 60px;
font-size: 22px;
}

.fadeUpTrigger {
opacity: 0;
}

.shop {
padding-top: 160px;
}
	
.shop img {
max-width: 740px;
}
}

/* スマホ用 */
@media screen and (max-width: 600px) {

body {
font-size: 22px;
}

#container {
max-width: 375px;
}

header li {
margin: 0 0 0 3px;
}
	
.eye {
font-size: 25px;
margin-bottom: 12px;
padding-left: 35px;
}

.eye:before {
transform: scale(0.25);
top: -27px;
left: -20px;
}

#top {
width: 130px;
margin-left: 8px;
}

.sns {
width: 45px;
right:8px;
bottom:10px;
}

.sns img {
width: 45px;
margin-bottom: 10px;
}

#flexbox {
width: 375px;
margin-top: 30px;
}

.box-item {
padding-bottom: 35px;
}

.box-item img {
width: 340px;
}

.text {
max-width: 340px;
padding-bottom: 40px;
margin-left: 8px;
font-size: 21px;
}

.shop {
padding-top: 110px;
}

.shop img {
max-width: 375px;
}
}

/* hoverの設定 */
@media (hover: hover) {
.hover:hover {
opacity: 0.6;
}
}

@media (hover: none) {
.hover:active {
opacity: 0.6;
}
}