@charset "utf-8";

/* ====================
reset
==================== */
.breadcrumb-wrap {
	padding-top: 37px;
}
.sc-container {
	background: #ffffff;
}
.sc-container, .sc-container div, 
.sc-container ul, .sc-container ol, .sc-container li,
.sc-container h1, .sc-container h2, .sc-container h3, .sc-container h4,
.sc-container p, .sc-container span {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

.sc-container img {
	border: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* width: 100%; */
	width: auto;
	height: auto;
	max-width: max-content;
}

.sc-container li {
	list-style: none;
}

.sc-container h1, .sc-container h2,
.sc-container h3, .sc-container h4 {
	font-size: 100%;
	font-weight: normal;
	border: none;
}

.sc-container dl {
	font-size: 0;
}

button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/* ====================
***
==================== */
.sc-container {
    width: 100%;
    margin: 35px auto;
    /* background: #252525; */
	background: #252525 url(../img/bg_contents-wrapper.gif) center top repeat-y;
    color: #1a1a1a;
    font-size: 16px;
    font-family: "Noto Sans JP","Yu Gothic Medium","Yu Gothic","YuGothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    line-height: 1.75;
    overflow: visible;
	/* letter-spacing: 0.05em; */
	padding-bottom: 100px;
}

.sc-container strong {
	font-weight: bold;
}

.sc-container a,
.sc-container a:link,
.sc-container a:visited,
.sc-container a:active {
	text-decoration: none;
}

.sc-container a span {
	-webkit-transition: .4s;
	transition: .4s;
}

.sc-container a:hover,
.sc-container a:active {
	opacity: 0.7;
	text-decoration: none;
}

#page-top a {
	background: url(../img/btn_pagetop.png) left top;
	width: 100px;
	height: 100px;
	display: block;
	-webkit-transition: .4s;
	transition: .4s;
}

#page-top a:hover {
	opacity: 0.9;
}

.text {
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	color: #ffffff;
	letter-spacing: 0.1em;
	text-shadow: 2px 2px 3px rgba(64, 64, 64, 0.7);
}

/* ====================
animation
==================== */
body {
    position: relative;
}
.animation {
    width: 100%;
    height: 100%;
    background-color: #252525;
    position: fixed;
    top: 0;
    z-index: 100000000000;
	/* display: none; */
}
.animation {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform: translateY(0);
    opacity: 1;
}

.animation.hide {
    transform: translateY(-100%);
    opacity: 0;
}

.animation-inner {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.animation-box {
    width: 590px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	position: relative;
}
.fortieth {
    width: 590px;
    height: auto;
	opacity: 0;
}
.animation-logo {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.animation-aniv {
	opacity: 0;
    transform: rotate(-10deg);
    position: absolute;
    bottom: -45px;
    right: -50px;
}

.background-transition{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .background-transition{
    display: block;
    content: "";
    position:fixed;
	z-index: 100000000000;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
    background-color: #252525;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

}

@keyframes PageAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/

.sc-container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear .sc-container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}


/* .st0{fill:#231815;} */
/* .st1{fill:none;stroke:#ffffff;stroke-width:23;stroke-linecap:round;stroke-miterlimit:10;} */
/* .st2{fill:none;stroke:#ffffff;stroke-width:17;stroke-linecap:round;stroke-miterlimit:10;} */
/* .st3{fill:none;stroke:#ffffff;stroke-width:22;stroke-linecap:round;stroke-miterlimit:10;} */
/* .st0{fill:#af9400;} 
.st1{fill:none;stroke:#ffffff;stroke-width:23;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#ffffff;stroke-width:17;stroke-linecap:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#ffffff;stroke-width:22;stroke-linecap:round;stroke-miterlimit:10;} */
.cls-1 {
	fill: #af9400;
}

.cls-2 {
	stroke-width: 22px;
}

.cls-2, .cls-3, .cls-4 {
	fill: none;
	stroke: #ffffff;
	stroke-linecap: round;
	stroke-miterlimit: 10;
}

.cls-3 {
	stroke-width: 17px;
}

.cls-4 {
	stroke-width: 23px;
}
/* ====================
contents-wrapper
==================== */
.sc-container .contents-wrapper {
	width: 1180px;
	/* background: #252525 url(../img/bg_contents-wrapper_pc.gif) center top repeat-y; */
	margin: 0 auto;
}


/* ====================
title-area
==================== */
.sc-container .title-area {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	padding-top: 78px;
}
.sc-container .title-area-logo {
	width: 117px;
	height: 41px;
	margin: 0 auto;
}
.sc-container .title-area-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 34px;
}
.sc-container .title-main-wrapper {
	width: 100%;
	display: inline-flex;
	align-items: baseline;
	justify-content: space-between;
}
.sc-container .title-main01 {
	font-family: "Pinyon Script", cursive;
	font-size: 150px;
	color: #af9400;
	text-shadow: 7px 7px 4px rgba(104, 102, 103, 1);
	line-height: 1;
}
.sc-container .title-main02 {
	font-family: "Lora", serif;
	font-weight: 500;
	font-size: 52px;
	color: #ffffff;
	letter-spacing: -0.01em;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	line-height: 1;
}
.sc-container .title-sub {
	font-family: "Lora", serif;
	font-weight: 500;
	font-size: 52px;
	color: #ffffff;
	letter-spacing: -0.01em;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	line-height: 1;
	margin-top: -20px;
}
/* ====================
lead
==================== */
.sc-container .lead {
	width: 100%;
	margin: 0 auto;
	padding-top: 30px;
}
.sc-container .lead-text {
	font-size: 15px;
	text-align: center;
	line-height: 2.67;
}
/* ====================
nav
==================== */
.sc-container .nav {
	width: 100%;
	margin: 0 auto;
	padding-top: 59px;
}
.sc-container .nav-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 900px;
	margin: 0 auto;
}
.sc-container .nav-list-item {
	width: 180px;
}
.sc-container .nav-list-item-image {
	width: 180px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sc-container .nav-list-item-title {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-align: center;
	padding-top: 10px;
	line-height: normal;
}
.sc-container .nav-list-item a {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
}
.sc-container .nav-list-item a::after {
	content: "";
	display: block;
	background: url(../img/arrow_nav_pc.png) center top no-repeat;
	position: absolute;
	bottom: -13px;
	left: calc(50% - 6px);
	width: 12px;
	height: 8px;
}
/* ====================
section
==================== */
.sc-container .section-title {
	font-family: "Lora", serif;
	font-weight: 400;
	font-size: 60px;
	color: #ffffff;
	letter-spacing: normal;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	line-height: 1;
	text-align: center;
	padding-top: 0;
}
.sc-container .section-lead {
	text-align: center;
	font-size: 15px;
	padding-top: 17px;
}
.sc-container .item-detail {
	width: 100%;
	margin: 0;
	padding-top: 74px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.sc-container .item-detail-box-wrapper {
	width: 786px;
}
.sc-container .item-detail-box {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 690px;
}
.sc-container .item-detail-box~.item-detail-box {
	padding-top: 60px;
}
.sc-container .item-detail-box.rev {
	flex-direction: row-reverse;
}
.sc-container .item-detail-box.first {
	width: 786px;
	justify-content: space-between;
}
.sc-container .item-detail-box-image {
	width: 300px;
}
.sc-container .item-detail-box.first .item-detail-box-image {
	width: 360px;
}
.sc-container .item-detail-box-image img {
	margin: 0;
	box-shadow: 0px 0px 10px 2px rgb(16 16 16 / 60%);
	width: 100%;
	height: auto;
}
.sc-container .item-detail-box-text {
	width: 340px;
	padding-left: 30px;
	padding-right: 0;
}
.sc-container .item-detail-box.rev .item-detail-box-text {
	padding-right: 30px;
	padding-left: 0;
}
.sc-container .item-detail-box.first .item-detail-box-text {
	width: 397px;
	padding-left: 0;
	padding-right: 0;
}
.sc-container .item-deteil-text {
	font-size: 14px;
	line-height: 2;
	letter-spacing: 0.05em;
	margin-top: -8px;
}
.sc-container .item-detail-box.first .item-deteil-text {
	position: relative;
	padding-left: 0;
	text-indent: 87px;
}
.sc-container .item-detail-box.first .item-deteil-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(14px - 1px);
	width: 60px;
	height: 1px;
	background-color: #ffffff;
}
.sc-container .item-detail-box.first .item-deteil-text::first-line {
	padding-left: 87px;
}
.sc-container .item-detail-title {
	font-size: 20px;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	letter-spacing: 0.05em;
    padding-top: 18px;
    padding-bottom: 20px;
}
.sc-container .item-detail-image a:hover {
	opacity: 1;
}
/* 
.sc-container .item-detail-title span {
	background-color: #ffffff;
	padding: 0 8px;
} */
/* ====================
section01
==================== */
.sc-container #sec01 {
	margin-top: 92px;
	padding-top: 92px;
	padding-bottom: 80px;
}
.sc-container #sec01 .item-detail-image {
	margin-top: -34px;
	margin-left: -45px;
	width: 531px;
	height: 887px;
	position: sticky;
	top: 68px;
}
/* ====================
section02
==================== */
.sc-container .contents-wrapper.sec02 {
	margin-top: 91px;
}
.sc-container #sec02 {
	padding-top: 92px;
	padding-bottom: 80px;
}
.sc-container #sec02 .item-detail {
	flex-direction: row-reverse;
}
.sc-container #sec02 .item-detail-box~.item-detail-box {
	padding-left: 96px;
	padding-top: 56px;
}
.sc-container #sec02 .item-detail-box-text.wide {
	width: 360px;
}
.sc-container #sec02 .item-detail-box-text.wide .item-detail-title {
	letter-spacing: 0.01em;
}
.sc-container #sec02 .item-detail-image {
    margin-top: -33px;
    margin-right: -42px;
	width: 520px;
	height: 880px;
	position: sticky;
	top: 68px;
}
/* ====================
section03
==================== */
.sc-container .contents-wrapper.sec03 {
	margin-top: 91px;
}
.sc-container #sec03 {
	padding-top: 92px;
	padding-bottom: 80px;
}
.sc-container #sec03 .item-detail-image {
	margin-top: -34px;
	margin-left: 55px;
	width: 501px;
	height: 958px;
	position: sticky;
	top: 68px;
}
/* ====================
section04
==================== */
.sc-container .contents-wrapper.sec04 {
	margin-top: 91px;
}
.sc-container #sec04 {
	padding-top: 92px;
	padding-bottom: 80px;
}
.sc-container #sec04 .item-detail {
	flex-direction: row-reverse;
}
.sc-container #sec04 .item-detail-box {
	padding-left: 96px;
}
.sc-container #sec04 .item-detail-box:nth-of-type(2) {
	padding-top: 60px;
}
.sc-container #sec04 .item-detail-box:nth-of-type(3) {
	padding-top: 76px;
}
.sc-container #sec04 .item-detail-box:nth-of-type(4) {
	padding-top: 60px;
}
.sc-container #sec04 .item-detail-box-text.wide {
	width: 360px;
}
.sc-container #sec04 .item-detail-box-text.wide .item-detail-title {
	letter-spacing: 0.01em;
}
.sc-container #sec04 .item-detail-image {
    margin-top: -58px;
    margin-right: -34px;
	width: 520px;
	height: 880px;
	position: sticky;
	top: 68px;
}
/* ====================
section05
==================== */
.sc-container .contents-wrapper.sec05 {
	margin-top: 46px;
}
.sc-container #sec05 {
	padding-top: 92px;
	padding-bottom: 80px;
}
.sc-container #sec05 .item-detail-image {
	margin-top: -41px;
	margin-left: 61px;
	width: 501px;
	height: 958px;
	position: sticky;
	top: 68px;
}
.sc-container #sec05 .item-detail {
	padding-top: 80px;
}
/* ====================
item-info-wrapper
==================== */
.sc-container .item-info-wrapper {
	width: 100%;
	background-color: #1e1e1e;
	margin: 0 auto;
}
.sc-container .item-info {
	width: 1180px;
	background: url(../img/bg_item_info_pc.gif) center top repeat-y;
	margin: 0 auto;
	padding-top: 46px;
	padding-bottom: 53px;
}
.sc-container .item-info-name {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-align: center;
}
.sc-container .item-info-name a,
.sc-container .item-info-name a:link,
.sc-container .item-info-name a:visited,
.sc-container .item-info-name a:active {
	color: #ffffff;
}
.sc-container .item-info-name a:hover {
	opacity: 1;
}
.sc-container .item-info-price {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-align: center;
	padding-top: 7px;
}
.sc-container .item-info-price span {
	font-size: 14px;
}
.sc-container .item-info-button {
	padding-top: 30px;
	width: 380px;
	margin: 0 auto;
}
.sc-container .item-info-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 380px;
	height: 50px;
	box-sizing: border-box;
	border: solid 1px #ffffff;
	position: relative;
}
.sc-container .item-info-button a::after {
	content: "";
	display: block;
	background: url(../img/arrow_btn_pc.png) center top no-repeat;
	position: absolute;
	right: 20px;
	top: calc(50% - 6px);
	width: 8px;
	height: 12px;
    transition: .4s;
}
.sc-container .item-info-button a span {
	font-size: 15px;
}
.sc-container .item-info-button a:hover {
	background-color: #ffffff;
	border: solid 1px #000000;
	opacity: 1;
}
.sc-container .item-info-button a:hover::after {
	content: "";
	display: block;
	background: url(../img/arrow_btn_pc_hover.png) center top no-repeat;
	background-color: #ffffff;
	position: absolute;
	right: 20px;
	top: calc(50% - 6px);
	width: 8px;
	height: 12px;
}
.sc-container .item-info-button a:hover span {
	color: #000000;
	text-shadow: none;
}


/* ====================
スクロール
==================== */
.sc-container .item-detail-title.scrollin .bg-wrap {
	position: relative;
	display: inline-block;
    margin-bottom: 5px;
}
.sc-container .item-detail-title.scrollin.is-animated .bg-wrap::before {
	animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	background: #ffffff;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: left center;
}
.sc-container .item-detail-title .bg-wrap .inner {
	position: relative;
	z-index: 1;
	padding: 0 8px;
	line-height: 1.5;
}
@keyframes bg {
	0% {
	opacity: 0;
	transform: scaleX(0) translateX(-5%);
	}
	30% {
	transform: scaleX(1) translateX(0);
	}
	100% {
	transform: scaleX(1) translateX(0);
	}
	30%, 100% {
	opacity: 1;
	}
}



/* その場ふわっと */
.sc-container .item-detail-title .bg-wrap .inner.fadein {
	color: transparent;
	opacity: 0;
}
.sc-container .item-detail-title .bg-wrap .inner.fadein.scrollin {
	color: #000000;
	opacity: 1;
	transition:.4s .2s ease;
	transform: none;
}




/* 下からふわっと */
.sc-container .nav-list-item.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .nav-list-item.fadein.scrollin:nth-child(1) {
	opacity: 1;
	transition:.8s .4s ease;
	transform: none;
}
.sc-container .nav-list-item.fadein.scrollin:nth-child(2) {
	opacity: 1;
	transition:.8s .6s ease;
	transform: none;
}
.sc-container .nav-list-item.fadein.scrollin:nth-child(3) {
	opacity: 1;
	transition:.8s .8s ease;
	transform: none;
}
.sc-container .nav-list-item.fadein.scrollin:nth-child(4) {
	opacity: 1;
	transition:.8s 1s ease;
	transform: none;
}
.sc-container .nav-list-item.fadein.scrollin:nth-child(5) {
	opacity: 1;
	transition:.8s 1.2s ease;
	transform: none;
}

.sc-container .section-title.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .section-title.fadein.scrollin {
	opacity: 1;
	transition:.4s .4s ease;
	transform: none;
}
.sc-container .section-lead.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .section-lead.fadein.scrollin {
	opacity: 1;
	transition:.6s .4s ease;
	transform: none;
}
.sc-container .item-detail-box-image.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .item-detail-box-image.fadein.scrollin {
	opacity: 1;
	transition:.4s .4s ease;
	transform: none;
}
.sc-container .item-deteil-text.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .item-deteil-text.fadein.scrollin {
	opacity: 1;
	transition:.6s .4s ease;
	transform: none;
}


.sc-container .item-info-name.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .item-info-name.fadein.scrollin {
	opacity: 1;
	transition:.4s .4s ease;
	transform: none;
}
.sc-container .item-info-price.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .item-info-price.fadein.scrollin {
	opacity: 1;
	transition:.4s .6s ease;
	transform: none;
}
.sc-container .item-info-button.fadein {
	opacity: 0;
	transform: translateY(40px);
}
.sc-container .item-info-button.fadein.scrollin {
	opacity: 1;
	transition:.4s .8s ease;
	transform: none;
}