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

body, div, p, ul, ol, dl, li, dt, dd, a {
    font-size:1.6rem;
}
h1, h2, h3, h4, h5, h6 {
    font-size:2rem;
	font-weight: 700;
	margin:0 0 45;
	/*margin:0 0 45px;カンプ上h2の下余白が45pxで統一されていたので記述※違う部分は直接指定*/
}
img {
	width:100%;
    max-width:100%;
    height:auto;
}
html {
  scroll-behavior: smooth;
}
/*container*/
#container {
	width:100%;
	height:100%;
	background:white;
	margin:0 auto;
}
#nav {
	width:100%;
	height: 100px;
	padding:25px 0 0;
	background: black;
	display: flex;
	position: fixed;
	top:0;
	z-index: 4;
}
h1 {
	width:12%;
	margin:0 0 0 60px;
}
#nav ul {
	display:flex;
	position: absolute;
	right: 0;
}
#nav ul li {
	width:150px;
	height:45px;
	font-size:20px;
	font-weight:700;
	background: black;
	color:#FFCC00;
	border:solid 1px #FFCC00;
	margin:0 25px 0;
	border-radius: 5px;
	text-align: center;
	padding:11px;
}
#nav ul li:hover {
	transition: 0.5s;
	background:#FFCC00;
	border: solid 1px #FFCC00;
	color:black;
}
#fv {
	width:100%;
	height:800px;
	text-align: center;
	padding: 100px;
	margin-top:100px;
	position: relative;
}
#fv h2 {
	margin:0 0 100px;
	font-size:4.0rem;
}
#fv img {
	width:10%;
	margin-bottom: 100px;
	animation:3s linear infinite rotation1;
}
#fv .sub_mv {
	width:25%;
	position: absolute;
	right:150px;
	top:0;
	z-index: 2;
	animation: 0;
}
@keyframes rotation1{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}


#fv p {
	line-height:24px;
}
#search {
	width:100%;
	height: auto;
	background: #FFD027;
	padding: 48px 0 50px;
}
#search #guzai {
	width:812px;
	height:64px;
	display:flex;
	margin:0 auto 48px;
}
from {
}
input {
	width:487px;
	height:64px;
	background:white;
	border-radius:5px;
	font-size:2.5rem;
	font-weight: 700;
	padding: 20px;
}
button {
	width:100px;
	height:64px;
	background: white;
	border-radius: 5px;
	font-size:2.0rem;
}
button:hover {
	background: #B3B3B3;
	transition: 0.5s;
}
#search  #guzai h2 {
	text-align: center;
	padding:20px;
}
#search #genre {
	width:1212px;
	height:auto;
	background:white; 
	border-radius: 10px;
	margin: 0 auto;
	padding: 27px 0 30px 80px;
}
#search #genre_01 {
	width:1000px;
	height:auto;
}
#search #genre_01 summary {
	margin-bottom:29px;
}
#search #genre_01 ul {
	display: flex;
	margin:0 0 30px;
}
#search #genre_01 ul li {
}
#search #genre_01 ul li a {
	display: block;
	width:100px;
	height:100px;
	background: pink;
	border:solid 1px black;
	border-radius: 5px;
	margin-right:64px;
}
#search #genre_01 ul li a:hover {
	background:rgba(123,123,123,0.75) ;
}
search #genre_02 {
	width:584px;
	height:157px;
	margin-bottom: 37px;
}
#search #genre_02 summary {
	margin-bottom:29px;
}
#search #genre_02 ul {
	display: flex;
	margin:0 0 30px;
}
#search #genre_02 ul li {
	width:100px;
	height:100px;
	background: blue;
	border-radius: 5px;
	margin-right:64px;
}
#search #genre_03 {
	width:1000px;
	height: auto;
}
#search #genre_03 summary {
}

details[open] ul {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
#delivery {
	width:100%;
	height:500px;
	padding:50px;
}
#delivery #dl_all {
	display:flex;
}
#delivery #dl_tx {
	width:500px;
	margin:0 auto;
	padding-top: 145px;
}
#delivery #dl_tx ul {
}
#delivery #dl_tx ul li {
	margin-bottom:10px;
	font-size:1.8rem;
	font-weight:700;
}

#delivery #dl_logo {
	width:500px;
	margin: 0 auto;
}
#delivery #dl_logo .dl {
	display: flex;
	width:50%;
}
#delivery #dl_logo p {
	font-size:5.0rem;
	font-weight:700;
	margin:0 0 30px 60px;
}
#delivery #dl_logo img {
	margin:0 0 30px 20px;
}
footer {
	background:white;
	width:100%;
	height:300px;
	padding: 80px 0 0 80px;
}
footer img {
	width: 30%;
}