@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: #f91c46;
}

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

header {
  position: fixed;
  top: 15px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  width: 1000px; /* 変更！ */
  max-width: 100%;
  left: 50%;     /* 追加 */
  transform: translateX(-50%); /* 追加：中央に寄せる */
  padding: 0 0;
  box-sizing: border-box;
}

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

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

.eye {
font-family: "Rum Raisin", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 50px;
color: #f91c46;
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: 450px;
}

.carousel {
  width: 100vw;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  overflow: hidden;
  height: 630px;
}
	
.slides {
display: flex;
width: calc(100% * 39);
animation: smoothScroll 110s linear infinite;
margin-top: 130px;
}

.slides img {
width: auto;
height: 500px;
flex-shrink: 0;
margin-right: 20px;
}

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

.marquee-wrapper {
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
margin-top: 30px;
}

.marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: slideRight 15s linear infinite;
}

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

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

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

#flexbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 1000px;
margin: 50px auto 0 auto;
gap: 20px;
}

.box-item {
width: calc(50% - 10px);
box-sizing: border-box;
}

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

li::marker {
color: #a48846;
}

.t-small {
font-size: 22px;
line-height: 1.2;
margin-bottom: 30px;
}

.gold {
color: #a48846;
}

.text {
font-size: 24px;
margin-bottom: 30px;
}

.list {
padding-left: 20px;	
}

.bottom {
margin-bottom: 70px;
}

.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);
}
}




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

body {
font-size: 23px;
}

#container {
max-width: 740px;
}

header {
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: 300px;
}

.slides {
margin-top: 100px;
}
	
.sns {
width: 50px;
right:20px;
}

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

.marquee-wrapper {
margin-top: -5px;
}
	
#flexbox {
margin-top: 50px;
}

.box-item {
margin-bottom: 0px;
}

.box-item img {
width: 355px;
}
	
.text {
font-size: 22px;
}

}



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

body {
font-size: 22px;
}

header {
width: 100%;
max-width: none;
margin: 0;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
	
 header ul {
padding: 0;
}

header li {
margin: 10px 0 0 5px;
}

.eye {
font-size: 25px;
padding-left: 35px;
}

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

#top {
width: 200px;
}

#container {
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}

#flexbox {
width: 100%;
max-width: none;
box-sizing: border-box;
margin-top: -25px;
gap: 0;
}

.box-item {
width: 100% !important;
box-sizing: border-box;
display: block;
margin-bottom: 25px;
}

.box-item img {
width: 100%;
height: auto;
display: block;
margin-bottom: -20px;
}

.marquee-wrapper {
margin-top: 0px;
}

.bottom {
margin-bottom: 40px;
}
	
.text {
padding-bottom: 20px;
}	
}

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

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