﻿* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

html {
	font-size: 62.5%;
	overflow: auto;
}

body {
	line-height: 1.8;
	font-size: 1.4rem;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: 'palt';
	/*iosのバグは【font-feature-settings: "pkna"】で対応*/
	letter-spacing: 0.1rem;
}

a {
	color: #fff;
}

a:hover {
	color: #bd9817;
	text-decoration: none;
}

img {
	border: 0;
	vertical-align: bottom;
}

@media screen and (min-width:768px) and (max-width:1250px) {}

@media screen and (max-width: 768px) {
	body {
		font-size: 1.2rem;
		line-height: 1.4;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}


/* 携帯のみ電話
-----------------------------------------------------------*/
@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
		color: #000;
	}
}

/* 分岐
-----------------------------------------------------------*/
[data-device="sp"] {
	display: none;
}

@media screen and (max-width: 768px) {
	[data-device="pc"] {
		display: none;
	}

	[data-device="sp"] {
		display: block;
	}
}





/*　レイアウト
---------------------------------------------------------- */
#main_outer {
	background-image: url(../images/main_bg02.png), url(../images/main_bg.jpg);
	background-position: center 0, 0 0;
	background-repeat: no-repeat, repeat;
	background-size: contain, auto auto;
	width: 100%;
	padding: 60px 0 100px;
}

.wrapper {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px
}

@media screen and (max-width: 768px) {
	#main_outer {
		padding: 30px 0 30px;
	}

	.wrapper {
		width: 100%;
		padding: 0 4%;
	}

}

/*　メイン
---------------------------------------------------------- */
.cont_main {
	width: 100%;
	background: url(../images/slide_bg.jpg) center 0 repeat;
	background-size: cover;
	position: relative;
	text-align: center;
	animation-name: suika;
	/*アニメーション名 */
	animation-duration: 30s;
	/* アニメーション時間 */
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes suika {
	0% {
		background-position: -300px 0;
	}

	50% {
		background-position: 0 0;
	}

	100% {
		background-position: -300px 0;
	}
}

.cont_main h1 {
	position: absolute;
	top: 30px;
	left: 20px;
	width: 89px;
	height: 50px;
}

.cont_main h1 img {
	width: 100%;
}

.cont_main .main_letter02 {
	padding-top: 165px;
	width: 100%;
	max-width: 501px;
	margin: 0 auto;
	overflow: hidden;
}

.cont_main .main_letter02 img {
	width: 100%;
}

.cont_main .main_letter03 {
	padding-top: 80px;
	width: 100%;
	max-width: 597px;
	margin: 0 auto;
	overflow: hidden;
}

.cont_main .main_letter04 {
	padding-top: 65px;
	padding-bottom: 220px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.cont_main .main_letter04 .pulse {
	max-width: 518px;
	margin: 0 auto;
}

.cont_main .main_letter05 {
	position: absolute;
	bottom: 40px;
	right: calc(50% - 550px);
	margin: 0 auto;
	overflow: hidden;
}

.cont_main .main_letter05 .b_t {
	max-width: 260px;
	margin: 0 auto;
}

.cont_main .main_letter02 img,
.cont_main .main_letter03 img,
.cont_main .main_letter04 img,
.cont_main .main_letter05 img {
	width: 100%;
}

@media screen and (max-width: 1240px) {
	.cont_main .main_letter02 {
		padding-top: calc(165 / 1240 * 100vw);
		max-width: calc(500 / 1240 * 100vw);
	}

	.cont_main .main_letter03 {
		padding-top: calc(80 / 1240 * 100vw);
		max-width: calc(597 / 1240 * 100vw);
	}

	.cont_main .main_letter04 {
		padding-top: calc(65 / 1240 * 100vw);
		padding-bottom: calc(220 / 1240 * 100vw);
	}

	.cont_main .main_letter04 .pulse {
		max-width: calc(518 / 1240 * 100vw);
	}

	.cont_main .main_letter05 {
		position: absolute;
		bottom: calc(40 / 1240 * 100vw);
		right: calc(50% - calc(550 / 1240 * 100vw));
	}

	.cont_main .main_letter05 .b_t {
		max-width: calc(260 / 1240 * 100vw);
	}

}

@media screen and (max-width: 768px) {
	.cont_main {
		background-size: cover;
		height: auto;
		padding: 0 0px 0px;
	}

	.cont_main h1 {
		top: 15px;
		left: 15px;
		width: 45px;
		height: 25px;
	}

	.cont_main h1 img {
		width: 60px;
	}

	.cont_main .main_letter02 {
		max-width: calc(500 / 850 * 100vw);
	}

	.cont_main .main_letter03 {
		max-width: calc(597 / 850 * 100vw);
	}

	.cont_main .main_letter04 {
		padding-bottom: calc(350 / 1240 * 100vw);
	}

	.cont_main .main_letter04 .pulse {
		max-width: calc(518 / 850 * 100vw);
	}




	.cont_main .main_letter02 {
		padding-top: 80px;
	}


}

/* メインテキスト */


.l_r {
	animation-name: play;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	position: relative;
}


@keyframes play {
	0% {
		transform: translateX(-105%);
		opacity: 1 !important;

	}

	50% {
		transform: translateX(-100%);
		opacity: 1 !important;

	}

	100% {
		transform: translateX(0);
	}
}



.b_t {
	animation-name: play02;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	position: relative;
}

@keyframes play02 {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}

	50% {
		transform: translateY(100%);
		opacity: 1;
	}

	100% {
		transform: translateY(0);
	}
}


.pulse {
	animation-name: play03;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
}

@keyframes play03 {
	0% {
		transform: scale(1.1);
		opacity: 0;
	}

	50% {
		transform: scale(1.1);
		opacity: 0;
	}

	60% {
		transform: scale(0.8);
		opacity: 1;
	}

	80% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1.0);
	}
}

/*　グロナビ
---------------------------------------------------------- */
.g_navi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 55px;
}

.g_navi li {
	display: flex;
	width: 14.2857%;
	border-right: 1px solid #f7f6f6;
}

.g_navi li:last-child {
	border-right: none;
}

.g_navi li a {
	width: 100%;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.8rem;
	color: #fff;
	background: #70080d;
	font-family: 'Montserrat', sans-serif;
	line-height: 1;
	padding: 15px;
	transition: 0.5s;
}

.g_navi li a:hover,
.g_navi li a.current {
	background: #bd9817;
}

@media screen and (max-width: 768px) {
	.g_navi {
		margin-bottom: 30px;
	}

	.g_navi li {
		width: calc(1 / 3 * 100%);
		border-bottom: 1px solid #f7f6f6;
	}

	.g_navi li a {
		font-size: 1.8rem;
		padding: 13px 0;
	}

	.g_navi li:nth-child(3) {
		border-right: none;
	}

}

/*　コンテンツ
---------------------------------------------------------- */
.cont_floor_ttl {
	text-align: center;
	margin-bottom: 20px;
	opacity: 0;
}

.cont_floor_ttl h2 {
	display: inline-block;
	background: #bd9817;
	color: #fff;
	font-size: 3.5rem;
	line-height: 1;
	padding: 18px 60px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.2rem;
}

@media screen and (max-width: 768px) {
	.cont_floor_ttl {
		margin-bottom: 20px;
	}

	.cont_floor_ttl h2 {
		width: 80%;
		text-align: center;
		font-size: 2.0rem;
		padding: 12px 0;
	}

}

.cont_atention {
	text-align: center;
	margin-bottom: 40px;
	opacity: 0;
}

.cont_atention .icon {
	width: 100%;
	max-width: 210px;
	margin: 0 auto 10px;
}

.cont_atention .icon img {
	width: 100%;
}

.cont_atention p {
	font-size: 2.0rem;
	color: #fff;
}

@media screen and (max-width: 768px) {
	.cont_atention .icon {
		width: calc(210 / 768 * 100vw);
	}

	.cont_atention {
		margin-bottom: 20px;
	}

	.cont_atention p {
		font-size: 1.2rem;
		color: #fff;
	}
}

.cont_shop {
	margin-bottom: 70px;
	opacity: 0;
}

[data-scroll="true"] {
	animation-name: fade01;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;

}

@keyframes fade01 {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.cont_shop ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.33%;
}

.cont_shop ul li {
	display: flex;
	width: 24%;
	margin-bottom: 1.33%;
}

.cont_shop ul li img {
	width: 100%;
}

.cont_shop ul li h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0d1b1d;
	text-align: center;
	color: #fff;
	line-height: 1.2;
	font-size: 1.5rem;
	padding: 5px 10px;
}

.cont_shop ul li div {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 85px;
	padding: 10px 0;
}


.cont_shop ul li p {
	color: #df2725;
	font-size: 1.6rem;
	line-height: 1.3;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cont_shop ul li a:hover {
	transform: translateY(-10px);
	box-shadow: 0px 3px 3px 3px rgba(112, 8, 13, 0.3);
}

.cont_shop ul li:not(.none) a {
	width: 100%;
	display: inline-block;
	align-items: center;
	position: relative;
	border: none;
	color: #fff;
	background: #fff;
	padding: 5px;
	text-decoration: none;
}

.cont_shop ul li.none a {
	pointer-events: none;
}

.cont_shop ul li a span {
	display: block;
}

.cont_shop .attention {
	color: #fff;
	margin: 20px 0;
}

.cont_shop ul li.space {
	display: none;
}

@media screen and (max-width: 768px) {
	.cont_shop ul li:not(.none) a {
		border: none;
	}

	.cont_shop {
		margin-bottom: 10px;
	}

	.cont_shop ul {
		gap: 0 4%;
	}

	.cont_shop ul li {
		display: flex;
		width: 48%;
		margin-bottom: 10px;
	}

	.cont_shop ul li a::before,
	.cont_shop ul li a::after,
	.cont_shop ul li a span::before,
	.cont_shop ul li a span::after {
		display: none;
	}

	.cont_shop ul li a:hover {
		transform: translateY(0px);
	}

	.cont_shop .attention {
		margin: 10px 0 20px;
	}

	.cont_shop ul li.space {
		display: block;
	}
}

/*----- button -----*/

.cont_shop ul li a::before,
.cont_shop ul li a::after {
	content: "";
	width: 0;
	height: 4px;
	position: absolute;
	transition: all 0.2s linear;
	background: #70080d;
}

.cont_shop ul li a span::before,
.cont_shop ul li a span::after {
	content: "";
	width: 4px;
	height: 0;
	position: absolute;
	transition: all 0.2s linear;
	background: #bd9817;
}

.cont_shop ul li a:hover::before,
.cont_shop ul li a:hover::after {
	width: calc(100% + 4px);
}

.cont_shop ul li a:hover span::before,
.cont_shop ul li a:hover span::after {
	height: calc(100% + 0px);
}

.cont_shop ul li a::before,
.cont_shop ul li a::after {
	transition-delay: 0.2s;
}

.cont_shop ul li a span::before,
.cont_shop ul li a span::after {
	transition-delay: 0s;
}

.cont_shop ul li a::before {
	right: -2px;
	top: -2px;
}

.cont_shop ul li a::after {
	left: -2px;
	bottom: -2px;
}

.cont_shop ul li a span::before {
	left: -2px;
	top: 2px;
}

.cont_shop ul li a span::after {
	right: -2px;
	bottom: -2px;
}

.cont_shop ul li a:hover::before,
.cont_shop ul li a:hover::after {
	transition-delay: 0s;
}

.cont_shop ul li a:hover span::before,
.cont_shop ul li a:hover span::after {
	transition-delay: 0.2s;
}


/* バナー */
.bnr_insta {
	width: 100%;
	background: url(../images/bnr_insta_bg.jpg) -100px 0 repeat;
	margin-bottom: 45px;
	transition: 0.5s;
	opacity: 0;
	box-shadow: 0px 3px 3px 3px rgba(112, 8, 13, 0.3);
}

.bnr_insta a {
	display: block;
}

.bnr_insta img {
	width: 100%;
}

.bnr_insta:hover {
	background-position: -100px -50px;
	transition: 0.5s;
	/*transform:translateY(-10px);*/
}


@media screen and (max-width: 768px) {
	.bnr_insta {
		background: url(../images/bnr_insta_bg.jpg) -100px 0 repeat;
		background-size: auto 100%;
		margin-bottom: 20px;
	}

}




.cont_customer {
	padding: 50px 0px;
	text-align: center;
}


.cont_customer img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.cont_customer {
		padding: 20px 0;
	}


	.cont_customer .wrapper {
		padding: 0 4%;
	}

}



/*　header
---------------------------------------------------------- */

header {
	width: 100%;
	background: #ff0;
	position: relative;
	z-index: 99;
}

/* gototop
---------------------------------------------------------- */
#gototop {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 75px;
	height: 75px;
}

#gototop img {
	width: 100%;
}

#gototop a:hover {
	opacity: 0.8;
}

@media screen and (max-width: 768px) {
	#gototop {
		bottom: 20px;
		right: 20px;
		width: 37px;
		height: 37px;
	}

	#gototop img {
		width: 45px;
	}
}

.bounce {
	animation: bounce_2535 2.6s ease infinite;
	transform-origin: 50% 50%;
}

@keyframes bounce_2535 {
	0% {
		transform: translateY(0)
	}

	7.69231% {
		transform: translateY(0)
	}

	15.38462% {
		transform: translateY(0)
	}

	30.76923% {
		transform: translateY(-15px)
	}

	38.46154% {
		transform: translateY(0)
	}

	46.15385% {
		transform: translateY(-15px)
	}

	61.53846% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(0)
	}
}


/* footer
---------------------------------------------------------- */


/* footer01 */
.footer01 {
	background: #0f0c0c;
	padding: 60px 0;
}

.footer01 .wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.footer01 .wrapper>div {
	width: 30%;
	margin-right: 5%;
}


.footer01 .wrapper>div:last-child {
	margin-right: 0;
}


.footer01 p {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	color: #fff;
	line-height: 2.0;
}

@media screen and (max-width: 768px) {


	.footer01 {
		padding: 20px 0 20px;

	}

	.footer01 .wrapper {
		display: block;
	}

	.footer01 .wrapper>div {
		width: 100%;
		margin-right: 0%;
		margin-bottom: 20px;
	}


	.footer01 .wrapper>div:last-child {
		margin-bottom: 0;
	}

	.footer01 .wrapper>div:not(:las-child) {
		margin-left: 0%;
		margin-bottom: 50px;
	}

	.footer01 p {
		font-size: 1.2rem;
		margin-bottom: 0.8rem;
		color: #fff;
		line-height: 1.8;
	}

}


/* footer02 */
.footer02 {
	background: #c82336;
	padding: 45px 0;
}

.footer02 .wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.footer02 .wrapper ul.sns {
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
}

.footer02 .wrapper ul.sns li {
	margin: 0 15px;
	width: 42px;
}

.footer02 .wrapper ul.sns li:nth-child(2) {
	width: 50px;
}

.footer02 .wrapper ul.sns li:hover {
	animation: hvr-buzz-out 2.6s ease;
	transform-origin: 50% 50%;
}

.footer02 .wrapper ul.sns li img {
	width: 100%;
}


@media screen and (max-width: 768px) {
	.footer02 .wrapper ul.sns li {
		margin: 0 15px;
	}
}

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
	10% {
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	20% {
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	30% {
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	40% {
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	50% {
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	60% {
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	70% {
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	80% {
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	90% {
		-webkit-transform: translateX(1px) rotate(0);
		transform: translateX(1px) rotate(0);
	}

	100% {
		-webkit-transform: translateX(-1px) rotate(0);
		transform: translateX(-1px) rotate(0);
	}
}

@keyframes hvr-buzz-out {
	10% {
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	20% {
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	30% {
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	40% {
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	50% {
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	60% {
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	70% {
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	80% {
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	90% {
		-webkit-transform: translateX(1px) rotate(0);
		transform: translateX(1px) rotate(0);
	}

	100% {
		-webkit-transform: translateX(-1px) rotate(0);
		transform: translateX(-1px) rotate(0);
	}
}

.hvr-buzz-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-buzz-out:hover,
.hvr-buzz-out:focus,
.hvr-buzz-out:active {
	-webkit-animation-name: hvr-buzz-out;
	animation-name: hvr-buzz-out;
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}


.copyright {
	text-align: center;
	color: #fff;
	font-size: 1.1rem;
}

@media screen and (max-width: 768px) {
	.footer02 {
		padding: 30px 0 20px;
	}

	.footer02 .f_company {
		display: block;
		margin-bottom: 20px;
		margin: 0 auto;
	}

	.footer02 .wrapper ul.sns li {
		width: 30px;
	}


	.footer02 .wrapper ul.sns li:nth-child(2) {
		width: 35px;
	}

	.footer02 .wrapper ul.sns li img {
		width: 100%;
	}


	.copyright {
		font-size: 1.0rem;
	}

}


/* コンテンツ
---------------------------------------------------------- */



/* ttl
---------------------------------------------------------- */




/*　tableの横スクロール 【.scroll】
---------------------------------------------------------- */

@media screen and (max-width: 768px) {
	.scroll table {
		overflow: auto;
		white-space: nowrap;
	}

	.scroll {
		overflow: auto;
		white-space: nowrap;
	}

	.scroll::-webkit-scrollbar {
		height: 5px;
	}

	.scroll::-webkit-scrollbar-track {
		background: #F1F1F1;
	}

	.scroll::-webkit-scrollbar-thumb {
		background: #BCBCBC;
	}
}