@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	-webkit-text-size-adjust: 100%;
	font-family: "Sawarabi Gothic", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
	background-color: #040000;
	/* overflow-y: scroll; */
}

/* ゴールド:#BC8703　シルバー:#8A8A8A */
html, body {
  height: 100%;
	min-height: 100%;
}

.wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: #000000;
	text-decoration: none;
}

*:focus {
	outline: none;
}

img {
	width: 100%;
	border: none;
	vertical-align: bottom;
}

ul {
	display: flex;
}

ul li {
	list-style: none;
	justify-content: left;
	flex-wrap: wrap;
	padding: 0 15px;
}

section.wrap {
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {

	body {
		font-size: 1.5rem;
	}

}

/* ----------------------------------
	ローディング画面
---------------------------------- */
/* ローディング中はスクロール禁止 */
.no-scroll {
  overflow: hidden;
  height: 100vh;
  /* position: fixed; */
  width: 100%;
}

#first-loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100%;
  /*height: calc(var(--vh) * 100); */
  background-color: #040000;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ★ 動画コンテナ */
#loading-video {
  position: absolute;
  top: 50%;
  left: 50%;
	width: 100vw;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* ★ 動画本体（これだけでOK） */
#loading-video source,
#loading-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ロゴ */
#loading-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 20px));
  width: 200px;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
}

#loading-logo img {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 768px) {

  #loading-video {
    width: auto;
    height: auto;
    /* ★ 最大サイズを制限 */
    max-width: 80vw;   /* 画面幅の80%まで */
    max-height: 80vh;  /* 画面高さの80%まで */
    object-fit: contain; /* はみ出さない */
  }

}

@media screen and (max-width: 480px) {

	#loading-logo {
	  transform: translate(-50%, calc(-50% - 3px));
	  width: 150px;
	}

}

/* フェードアウト */
.fade-out {
  animation: fadeOut 0.8s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* フェードイン */
.fade-in {
  animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----------------------------------
   縦向き（portrait）
---------------------------------- */
@media (orientation: portrait) {

  #first-loading {
    padding-top: calc(40px + env(safe-area-inset-top));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* ★ 縦向きは 100vh は使わない（全て var(--vh)） */
  #loading-video video {
    width: 100%;
    height: calc(var(--vh) * 100);
  }
}

/* ----------------------------------
   横向き（landscape）
---------------------------------- */
@media (orientation: landscape) {

  #first-loading {
    padding-top: calc(80px + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }

  /* ★ 横向きも var(--vh) に統一（上下バー対応） */
  #loading-video,
  #loading-video video {
    width: 100vw;
    height: calc(var(--vh) * 100);
  }
}

#first-loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease;
}

/* フェードアップの keyframes */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ロゴ表示用クラス */
#loading-logo.visible {
  opacity: 1;
}

/* ----------------------------------
	safe-area bottom 黒埋め
---------------------------------- */
.safe-area-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* 100vw */
  height: env(safe-area-inset-bottom);
  background-color: #040000;
  pointer-events: none;
  z-index: 100000;
}

/* ----------------------------------
	Scroll Down
---------------------------------- */
.scroll-down {
  height: 300px;
  background-color: #BC8703;
}

.scroll-down_in {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #BC8703;
  font-size: 1.2rem;
  text-decoration: none;
  z-index: 1;
}

.mouse-icon {
  width: 30px;
  height: 50px;
  border: 1px solid #BC8703;
  border-radius: 20px;
  position: relative;
  margin-inline:auto;
  margin-bottom: 6px;
}

.mouse-icon::before {
  content: "";
  width: 1px;
  height: 8px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #BC8703;
  border-radius: 2px;
  animation: scroll 2s infinite;
}

@keyframes scroll {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
}

/* ----------------------------------
	アニメーション
---------------------------------- */
/* 共通（初期状態） */
.fade {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示後 */
.fade.is-show {
  opacity: 1;
  transform: translate(0, 0);
}

/* 上から */
.fade-up {
  transform: translateY(60px);
}

/* 右から */
.fade-right {
  transform: translateX(60px);
}

/* 下から */
.fade-down {
  transform: translateY(-60px);
}

/* 左から */
.fade-left {
  transform: translateX(-60px);
}

.fade-up.delay-1 { transition-delay: 0.2s; }
.fade-up.delay-2 { transition-delay: 0.4s; }
.fade-up.delay-3 { transition-delay: 0.6s; }
.fade-left.delay-4 { transition-delay: 0.8s; }
.fade-right.delay-4 { transition-delay: 0.8s; }
.fade-left.delay-5 { transition-delay: 1s; }
.fade-right.delay-5 { transition-delay: 1s; }

/* ----------------------------------
	見出し
---------------------------------- */
h2 {
	color: #BC8703;
	margin: 0 0 20px;
}

h2 span.en {
	font-family: "Italianno", cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 4rem;
	margin: 0 0 30px;
	position: relative;
	overflow: hidden;
}

h2 span.jp {
	font-size: 1.5rem;
  font-weight: normal;
  padding: 0 1rem 0 0.75rem;
}

@media screen and (max-width: 480px) {

	h2 span.en {
		font-size: 3.5rem;
	}

	h2 span.jp {
		font-size: 1.2rem;
	}

}

/* ----------------------------------
	header
---------------------------------- */
header {
	width: 100%;
	margin: 0 auto; /* 0 auto 30px */
	background-color: #040000;
}

header .inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

header ul li img {
	height: 80px; /* 100px */
}

header ul li a {
  color: transparent !important; /* #BC8703 */
  font-family: "Italianno", cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 3.5rem !important;
  background: linear-gradient(to right, #BC8703 50%, #8A8A8A 50%) 100%;
  /* 背景をテキストで切り抜く */
  background-clip: text;
  /* 横幅は200%にしてグラデーションの青部分は見えないようにする */
  background-size: 200% 100%;
  transition: background-position 0.3s;
}

header ul li:nth-child(5) a{
	width: 120%;
	display: block;
}

header ul li a:hover {
	background-position: 0 100%;
}

#fixed-header {
	position: fixed;
	top: 0; /* -80px */
	z-index: 4;
	width: 100%;
	height: 80px;
	line-height: 80px;
	text-align: center;
	background-color: #040000;
	box-sizing: border-box;
	transition: .5s;
	opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

#fixed-header.is-show {
	top: 0;
  transform: translateY(0);
  opacity: 1;
}

#fixed-header ul {
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}

#fixed-header ul li a {
	color: #ffffff;
}

#fixed-header ul li:nth-child(1) {
	padding: 0;
}

#fixed-header ul li img {
	height: 80px;
}

.spmenu {
	display: none;
}

@media screen and (max-width: 768px) {

	header {
		margin: 0 auto; /* 0 auto 30px */
	}

	#fixed-header {
		position: static;
		top: 0;
		transition: 0s;
		height: 0;
		line-height: 0;
	}

	#fixed-header ul {
		display: none;
	}

	.spmenu {
		position: relative;
		display: block !important;
		width: 90%;
		margin: 0 auto;
	}

	.splogo {
    position: absolute;
    top: 0; /* -110px */
    left: 15px;
    z-index: 3;
	}

	.splogo img {
		width: auto;
		height: 80px;
	}

	.hamburger {
		display: block !important;
	}

}

main {
	overflow: hidden;
}

/* ----------------------------------
	ticker
---------------------------------- */
.ticker-wrap {
	height: 100px;
	margin: 0 0 50px;
}

.ticker-wrap .inner {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}

.ticker {
	line-height: 20px !important;
	height: 100% !important;
	background-color: #040000 !important;
}

.ticker-item a {
	white-space: normal !important;
	color: #8A8A8A !important;
}

.ticker-date {
	vertical-align: top;
	margin: 0 15px 0 0;
}

.ticker-title {
		width: calc(100% - 165px); /* calc(100% - 105px); */
		display: inline-block;
		box-sizing: border-box;
}

/* ----------------------------------
	ニュース記事
---------------------------------- */
.modal {
	margin: 200px 0 0; /* 30px 0 0 */
}

.fancybox-content {
	max-width: 900px !important;
	width: 60%;
	margin: 0 auto;
}

.posttitle {
	font-size: 2.5rem;
	text-align: center;
	margin: 0 0 15px;
}

time {
	font-size: 2rem;
	text-align: right;
	display: block;
	margin: 0 0 15px;
}

.image_before {
	margin: 0 0 30px;
}

.image_after {
	margin: 30px 0 0;
}

.image_before img,
.image_after img {
	width: 90%;
	height: auto;
	margin: 0 auto;
	display: block;
}

@media screen and (max-width: 800px) {

	.fancybox-content {
		width: 80%;
	}

}

@media screen and (max-width: 768px) {

	.posttitle {
		font-size: 2rem;
	}

	time {
		font-size: 1.8rem;
	}

}

@media screen and (max-width: 712px) {

	.ticker-title {
		width: 100%;
		display: block;
		margin-left: 0 !important;
	}

}

@media screen and (max-width: 600px) {

	.ticker-title {
		width: 100%;
		display: block;
		margin-left: 0 !important;
	}

}

@media screen and (max-width: 480px) {

	.fancybox-content {
		width: 90%;
		padding: 24px !important;
		box-sizing: border-box;
	}

	.image_before img,
	.image_after img {
		width: 100%;
		height: auto;
	}

}

/* ----------------------------------
	Single
---------------------------------- */
body.single main {
	max-width: 1200px;
	width: 60%;
	box-sizing: border-box;
	display: block;
	background-color: #ffffff;
	margin: 100px auto !important;
	padding: 44px !important;
	/*
	margin: 0 auto !important;
	padding: 0 45px 45px;
	*/
}

body.single.recruit main {
	background-color: transparent;
	margin: 100px auto !important;
	padding: 45px !important;
}

body.single.cast main,
body.single.boys main {
	margin: 100px auto !important;
	padding: 45px !important;
	background-color: transparent !important;
}

body.single main .casttitle,
body.single main .boystitle {
	display: none;
	color: #8A8A8A;
	font-size: 3.5rem;
	text-align: center;
	margin: 0 0 30px;
}

body.single.staff main {
	margin: 100px auto !important;
	padding: 45px !important;
}

body.single main .stafftitle {
	font-size: 2.5rem;
	text-align: center;
	margin: 0 0 15px;
}

body.single main .cast_text,
body.single main .boys_text {
	color: #8A8A8A;
}

body.single main .imgbox {
	max-width: 500px;
	width: 60%;
	margin: 15px auto 30px;
}

body main .post_item {
	 max-width: 800px;
	width: 70% !important; /* 100% */
	margin: 15px auto 30px;
}

body.fancybox-active .post_item,
body.single main .imgbox.recruit {
	width: 100% !important;
	margin: 15px auto 30px;
}

/* ----------------------------------
	slider
---------------------------------- */
.slider {
  opacity: 0;
  transition: opacity .3s linear;
	height: 100%;
	overflow: hidden;
}

.slider.slick-initialized {
  opacity: 1;
}

.slick-slide img {
	width: 100%;
	height: 100%;
}

.slick-prev {
	left: 50px !important;
	z-index: -1;
}

.slick-next {
	right: 50px !important;
	z-index: -1;
}

.slick-dots {
	bottom: 15px !important;
}

.slick-dots li button:before {
	color: #ffffff !important;
	font-size: 12px !important;
}

@media screen and (max-width: 768px) {

	section.next.slick-slider {
		padding: 0; /* 50px 0 0 */
	}

	.slick-dotted.slick-slider {
		margin: 0 0 30px !important;
	}

}

@media screen and (max-width: 480px) {

}

/* ----------------------------------
	clm3
---------------------------------- */
section.clm3 {
	width: 100%;
	margin-top: 0!important;
}

section.clm3 .inner {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}

section.clm3 .inner:nth-child(2) {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

section.clm3 .box {
	width: 30%;
	/* position: relative; */
  overflow: hidden;
}

section.clm3 .box a {
	position: relative;
	display: block;
	height: 100%;
}

section.clm3 .box a img.sp,
section.clm3 .box img.sp {
	display: none;
}

section.clm3 .box a img.pc {
  width: 100%;
  height: auto;
  transition: transform .6s ease;
}

section.clm3 .box:hover a img.pc {
  transform: scale(1.1);
  transition: transform .6s ease;
}

.fancybox-image {
	width: 100% !important; /* 70% */
	height: auto !important;
	top: 50% !important;
	right: 0 !important;
	transform: translate(0, -50%);
	margin: 0 auto !important;
}

section.clm3 .box .title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 2rem;
	font-family: "Abril Fatface", serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 2px;
	background-color: rgba(255,255,255,0.7); /* #ffffff */
	padding: 10px;
}

section.clm3 .box .title span {
	display: block;
	font-family: "Sawarabi Gothic", sans-serif;
	font-size: 1.1rem;
}

section.clm3 .box a img {
  width: 100%;
  height: auto;
  transition: transform .6s ease;
}

section.clm3 .box:hover a img {
  transform: scale(1.1);
  transition: transform .6s ease;
}

.fancybox-caption__body {
	/* line-height: 0; */
}

.fancybox-caption a {
	line-height: 0 !important;
	display: block;
}

.recruit_link {
	position: relative;
	background-color: #8A8A8A;
	overflow: hidden;
	width: 150px;
	margin: 30px auto 0;
	display: block; /* inline-block */
}

.recruit_link a.btn-flat {
	/* width: 150px; */
	display: block; /* inline-block */
  overflow: hidden;
  padding: 10px 25px;
  color: #fff;
  border-radius: 0;
}

.recruit_link a.btn-flat span {
  position: relative;
  line-height: normal;
}

.recruit_link a.btn-flat:hover {
	text-decoration: none !important;
}

.recruit_link a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%); /* translateX(-96%) */
  transform: translateX(-96%); /* translateX(-96%) */
  background: #BC8703;
}

.recruit_link a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

/*
.recruit_link a {
	display: inline-block;
	padding: 10px 15px;
	font-size: 1.5rem;
	color: #cccccc;
	background-color: #BC8703;
}

.recruit_link a:hover {
	text-decoration: none;
}
*/

@media screen and (max-width: 768px) {

	section.clm3 {
		margin-top: 70px !important; /* 50px */
	}

	section.clm3 .box {
		width: 32%;
	}

	section.clm3 .box .title {
		font-size: 1.8rem;
	}

}

@media screen and (max-width: 600px) {

	section.clm3 .box .title {
		font-size: 1.6rem;
	}

	section.clm3 .box .title span {
		font-size: 1rem;
	}

}

@media screen and (max-width: 480px) {

	section.clm3 .inner:nth-child(2) {
		display: block;
	}

	section.clm3 .box {
		width: 100%;
	}

	section.clm3 .box:nth-child(2) {
		margin: 30px 0;
	}

	section.clm3 .box .title {
		font-size: 2rem;
	}

	section.clm3 .box .title span {
		font-size: 1.1rem;
	}

	section.clm3 .box {
		width: 100%;
		/*
		height: 190px;
		position: relative;
		*/
	}

	section.clm3 .box a img.pc,
	section.clm3 .box img.pc {
		display: none;
	}

	section.clm3 .box a img.sp,
	section.clm3 .box img.sp {
		display: block;
	  width: 100%;
	  height: auto;
	}

	.fancybox-image {
		width: 80% !important;
	}

}

/* ----------------------------------
	clm2
---------------------------------- */
section.clm2 {
	width: 100%;
	margin: 0 0 80px;
}

section.clm2 .inner {
	max-width: 1200px;
	width: 90%;
	margin: 50px auto;
	/*
	display: flex;
	justify-content: space-between;
	*/
}

section.clm2 .mainbox {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

section.clm2 .mainbox:nth-child(even) {
	margin: 50px 0;
}

section.clm2 .mainbox .boxL,
section.clm2 .mainbox:nth-child(even) .boxR {
	width: 40%;
	overflow: hidden;
	position: relative;
}

section.clm2 .mainbox .boxL a img,
section.clm2 .mainbox:nth-child(even) .boxR a img {
  width: 100%;
  height: auto;
  transition: transform .6s ease;
}

section.clm2 .mainbox .boxL:hover a img,
section.clm2 .mainbox:nth-child(even) .boxR:hover a img {
  transform: scale(1.1);
  transition: transform .6s ease;
}

section.clm2 .mainbox:nth-child(even) .boxL,
section.clm2 .mainbox .boxR {
	width: 60%;
	position: relative;
}

section.clm2 .mainbox:nth-child(even) .boxL .in,
section.clm2 .mainbox .boxR .in {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

section.clm2 .mainbox .subtitle {
	color: #BC8703;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	font-size: 1.2rem;
	letter-spacing: 1px;
}

section.clm2 .mainbox .maintitle {
	color: #BC8703;
	font-family: "Abril Fatface", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.5rem;
	line-height: 1.1;
	margin: 15px 0 10px;
	letter-spacing: 2px;
}

section.clm2 .mainbox .txt {
	font-size: 1.3rem;
	color: #8A8A8A;
	white-space: nowrap;
}

.fancybox-caption__body span.pcbr {
	display: block;
}

@media screen and (max-width: 768px) {

	section.clm2 {
		margin: 0 0 50px;
	}

	section.clm2 .mainbox .maintitle {
		font-size: 2rem;
		margin: 10px 0;
	}

}

@media screen and (max-width: 480px) {

	section.clm2 .inner {
		margin: 30px auto;
	}

	section.clm2 .mainbox .boxL,
	section.clm2 .mainbox:nth-child(even) .boxR {
		width: 47%;
	}

	section.clm2 .mainbox:nth-child(even) {
		margin: 30px 0;
	}

	section.clm2 .mainbox .boxL a img,
	section.clm2 .mainbox:nth-child(even) .boxR a img {
	  transition: none;
	}

	section.clm2 .mainbox .boxL:hover a img,
	section.clm2 .mainbox:nth-child(even) .boxR:hover a img {
	  transform: none;
	  transition: none;
	}

	.fancybox-caption__body span.spbr {
		display: block;
	}

}

/* ----------------------------------
	Staff
---------------------------------- */
section.staff {
	width: 100%;
	margin: 0 0 80px;
}

section.staff .inner {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
  display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  gap: 20px; /* 20px */
}

section.staff .staff_box {
	width: calc(50% - 18px);
}

section.staff .titlebox {
	width: 100%;
	display: block;
}

section.staff .staff_slider {
  width: 100%;
}

/*
section.staff .slick-list {
  margin: 0 -30px;
}

section.staff .slick-slide {
	padding: 0 30px;
  box-sizing: border-box;
}
*/

section.staff .imgbox {
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
}

section.staff .staff_box .imgbox img {
  width: calc(100% - 1px);
  height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
	border: 1px solid #BC8703;
	box-sizing: border-box;
}

section.staff .slick-prev,
section.staff .slick-next {
	display: none !important;
}

@media screen and (max-width: 800px) {

	section.staff .staff_box {
		width: calc(50% - 16px);
	}

}

@media screen and (max-width: 768px) {

	section.staff {
		margin: 0 0 50px;
	}

}

@media screen and (max-width: 600px) {

	section.staff .staff_box {
		width: 48%;
	}

}

@media screen and (max-width: 555px) {

	section.staff .staff_box {
		width: 47%;
	}

}

@media screen and (max-width: 480px) {

	section.staff .inner {
		max-width: 100%;
		width: 90%;
		margin: 0 auto;
	  display: flex;
	  gap: 30px;
	}

	section.staff .staff_box {
		width: 46%;
	}

}

@media screen and (max-width: 416px) {

	section.staff .staff_box {
		width: 45%;
	}

}

/* ----------------------------------
	Instagram
---------------------------------- */
section.insta {
	width: 100%;
	margin: 0 0 30px; /* 0 0 80px */
}

section.insta .inner {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}

section.insta .inner:nth-child(2) {
	/*
	max-width: 100%;
	width: 100%;
	height: 350px;
	background-color: #9C9C9C;
	*/
}

/*
#sb_instagram .sb_instagram_header .sbi_header_text,
.sb_instagram_header .sbi_header_text,
#sb_instagram .sb_instagram_header,
.sb_instagram_header {
	display: none !important;
}
*/

@media screen and (max-width: 768px) {

	section.insta {
		margin: 0 0 50px !important;
	}

}

/* ----------------------------------
	Shop Info
---------------------------------- */
section.shop {
	width: 100%;
	margin: 0 0 80px;
}

section.shop .inner {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}

section.shop .inner:nth-child(2) {
	display: flex;
	justify-content: left;
}

section.shop .boxL {
	width: 200px;
	margin: 0 0 0 -15px;
}

section.shop .boxL img {
	width: 100%;
	height: 100%;
}

section.shop .boxR {
	width: calc(100% - 200px);
	position: relative;
	color: #ffffff;
}

section.shop .boxR ul {
	width: 100%;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}

section.shop .boxR ul li {
	color: #8A8A8A;
	text-decoration:none;
}

section.shop .boxR ul li:nth-child(1) {
	font-size: 1.8rem;
}

section.shop .boxR ul li:nth-child(3):before {
	content: '\f017';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding: 0 5px 0 0;
}

section.shop .boxR ul li:nth-child(4):before {
	content: '\f3cd';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding: 0 5px 0 3px;
}

section.shop .boxR ul li:nth-child(5) {
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	font-size: 3.5rem;
}

section.shop .boxR ul li a {
	color: #BC8703;
}

@media screen and (max-width: 768px) {

	section.shop {
		margin: 0 0 50px;
	}

	section.shop .boxL {
		width: 160px;
	}

	section.shop .boxR {
		width: calc(100% - 160px);
	}

	section.shop .boxR ul li:nth-child(2) span:nth-child(1) {
		display: block;
	}

	section.shop .boxR ul li:nth-child(5) {
		right: 3px; /* -15px */
	}

}

@media screen and (max-width: 600px) {

	section.shop .inner:nth-child(2) {
		display: block;
	}

	section.shop .boxL {
		margin: 0 auto 30px;
	}

	section.shop .boxR {
		width: 100%;
	}

	section.shop .boxR ul {
		position: static;
		top: 0;
		transform: translate(0, 0);
	}

	section.shop .boxR ul li {
		padding: 0;
	}

	section.shop .boxR ul li:nth-child(5) {
		right: 16px; /* 0 */
	}

}

@media screen and (max-width: 480px) {

	section.shop .boxR ul li:nth-child(2) span:nth-child(2) {
		display: block;
	}

}

/* ----------------------------------
	page-top
---------------------------------- */
#page-top {
  position: fixed;
  bottom: 0; /* 20px */
  right: 20px;
  font-size: 16px;
  line-height: 1;
  z-index: 1;
}

#page-top a {
  background-color: #040000;
  text-decoration: none;
  color: #ffffff;
  width: 56px; /* 60px */
  padding: 20px 0; /* 25px 5px */
  text-align: center;
  display: block;
  transition: all .3s ease;
}

#page-top a:hover {
  text-decoration: none;
  opacity: .8;
}

@media screen and (max-width: 768px) {

	#page-top {
		right: 5%;
	}

}

/* ----------------------------------
	footer
---------------------------------- */
footer {
	width: 100%;
	margin-top: auto;
	padding: 15px 0;
	color: #ffffff;
	font-size: 1.8rem;
	text-align: center;
	background-color: #040000;
}