@charset "utf-8";

/* ------------------------------------------------------------ common */
body{ min-width: 1300px; margin: 0 auto; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 500; font-style: normal; }
main{ padding: 100px 0 0; }
a,
#sturdy .btn-arrow,#history .scroll-slider,.iframe-area{ cursor: pointer; }
h2,h3,h4,p,span,figcaption{ word-break: normal; }
.inner{ width: 1200px; margin: 0 auto; padding: 0 50px; box-sizing: content-box; }
.SP{ display: none; }

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.txt-roop{ z-index: -1; position: absolute; top: 50px; overflow: hidden; display: flex; }
.txt-roop span{ padding: 0 20px; flex-shrink: 0; white-space: nowrap; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; }

.main-ttl{ font-size: 75px; text-align: center; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.1em; line-height: 140%; }
.main-ttl small{ display: block; padding: 10px 0 0; line-height: 140%; font-size: 26px; font-weight: 500; }

.logo{ display: flex; align-items: flex-end; justify-content: space-between; width: 400px; }


/* font */
.quasimoda{ font-family: "quasimoda", sans-serif; font-weight: 700; font-style: normal; }
.futura{ font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; }
.nuro{ font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 500; font-style: normal; }
.gennokaku{ font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; }
.quasimoda{ font-family: "quasimoda", sans-serif; font-weight: 700; font-style: normal; }

/* btn */
.btn{ white-space: nowrap; transition: all .8s; display: flex; align-items: center; justify-content: center; color: #fff!important; font-size: 20px; position: relative; margin: 0 auto; border-radius: 100px; text-align: center; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 500; font-style: normal; }
.btn:before{ position: absolute; content: ""; top: 50%; }
.btn-arrow:before{ transition: all .8s; right: 10%; transform: translate(0,-50%) skew(45deg); width: 10%; height: 5px; border-right: 2px solid #fff; border-bottom: 1px solid #fff; }
.btn-arrow:hover:before{ transition: all .8s; right: 6%; }

.pink{ background: #C14E4E; border: 1px solid #C14E4E; }
.gold{ background: #BFA35A; border: 1px solid #BFA35A; }
.scroll{ background: rgba(0,0,0,0.3); }

.white{ color: #E70011!important; background: #fff; border: 1px solid #E70011; }
.white:hover{ color: #fff!important; background: #E70011; }
.red{ color: #fff!important; background: #E70011; border: 1px solid #E70011; }
.red:hover{ color: #E70011!important; background: #fff; }
.black{ color: #000!important; background: #fff; border: 1px solid #707070; }
.black:hover{ color: #fff!important; background: #707070; }

.ast-item sub{ position: relative; top: -5px; }
.sb-word{ display: inline-block; }



/* ------------------------------------------------------------ header */
header{ min-width: 1300px; z-index: 100; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; padding: 20px 2% 25px; background: #000; }
header .logo p{ margin-left: 10px; }


nav{ width: 450px; }
nav ul{ display: flex; align-items: center; justify-content: flex-end; }
nav ul li{ padding: 0 30px; font-size: 19px; font-family: "quasimoda", sans-serif; font-weight: 700; font-style: normal; }
nav ul li a{ transition: .8s; position: relative; }
nav ul li a:hover{ transition: .8s; color: #C49632; }
nav ul li a::after { position: absolute; left: 0; content: ''; width: 100%; height: 2px; background: #C49632; bottom: -1px; transform: scale(0, 1); transform-origin: right top; transition: transform 0.3s; }
nav ul li a:hover::after { transform: scale(1, 1); transform-origin: left top; }


nav .btns{ display: flex; align-items: center; justify-content: flex-end; }
nav .btns a{ display: flex; align-items: center; justify-content: center; margin-left: 20px; padding: 10px 25px; height: 60px; background: #fff; border-radius: 100px; font-size: 16px; color: #C39631; font-family: "quasimoda", sans-serif; font-weight: 700; font-style: normal; }
nav .btns a:first-of-type{ margin: 0; }
nav .btns a img{ margin: 0 15px 0 0; }


#grobal-nav{ display: flex; align-items: center; justify-content: center; padding: 50px 0; }
#grobal-nav a{ position: relative; display: block; padding: 10px 40px 20px; font-weight: 600; font-size: 19px; }
#grobal-nav a:after{ position: absolute; content: ""; left: 50%; bottom: 0; transform: rotate(45deg) translate(-50%,0); width: 10px; height: 10px; border-right: 2px solid #C39631; border-bottom: 2px solid #C39631; }


/* ------------------------------------------------------------ link-area */
.item_white{ background-color: #fff; mask-image: url(../images/icn_yt.svg); -webkit-mask-image: url(../images/icn_yt.svg); }
.item_red{ background-color: #E70011; mask-image: url(../images/icn_yt.svg); -webkit-mask-image: url(../images/logo_sb.svg); }


.link-area{ padding: 100px 0 80px; background: url(../images/bg_03.jpg) center/cover no-repeat; }
.link-area .flex{ display: flex; align-items: center; justify-content: center; }
.link-area .btn{ width: 510px; height: 100px; margin: 0 15px; font-size: 20px; }
.link-area .btn img{ width: 100%; height: auto; }
.link-area .btn:hover{ opacity: .6; }
.link-area .btn span{ width: 35px; height: 35px; margin: 0 20px 0 0; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }


/* ------------------------------------------------------------ footer */
footer{ padding: 70px 0 40px; }
footer .logo{ width: 305px; margin: 0 auto; padding: 0 0 50px; }
footer .copy{ display: block; text-align: center; font-size: 12px; font-family: "quasimoda", sans-serif; font-weight: 700; font-style: normal; }






/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	/* ------------------------------------------------------------ common */
	body{ min-width: 100%; }
	main{ padding: 60px 0 0; }
	.inner{ width: 90%; padding: 0; }
	.PC{ display: none; }
	.SP{ display: block; }

	.main-ttl{ font-size: 30px; }
	.main-ttl small{ font-size: 18px; }
	.txt-roop{ top: 20px; }

	.btn{ font-size: 16px; }


	/* ------------------------------------------------------------ header */
	header{ min-width: 100%; padding: 15px 3%; }
	
	nav{ width: auto; }
	nav ul{ display: block; }
	nav ul li{ padding: 0 0 40px; font-size: 24px; }
	nav .link-area{ display: block; padding: 0; background: none; }
	
	nav .btns{ display: flex; justify-content: space-between; align-items: center; }
	nav .btns a{ width: initial; height: 40px; margin: 0; padding: 6px 10px; font-size: 12px; }
	nav .btns a img{ margin: 0 5px 0 0; }
	
	nav .btns a:first-of-type{ margin-right: 5px; }
	nav .btns a .recipe{ width: 16px; height: auto; }
	nav .btns a .nous{ width: 11px; height: auto; }
	
	.logo{ z-index: 150; width: initial; align-items: baseline; flex-direction: column; }
	.logo img{ width: 100%; height: auto; }
	.logo-sb{ width: 85px; margin: 0 0 3px; }
	.logo-golden{ width: 90px; }
	
	header .logo p{ width: 80px; margin: 0; }
	
	.burger_btn{ z-index: 150; position: relative; width: 30px; height: 30px; }
	.burger_btn span{ transition: .8s; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; }
	.burger_btn span:first-of-type{ top: 5px; }
	.burger_btn span:nth-of-type(2){ top: 15px; }
	.burger_btn span:last-of-type{ top: 25px; }
	
	
	/* active */
	nav.active{ transition: .8s; visibility: visible; opacity: 1; }
	.burger_btn.active{ transition: .8s; }
	.burger_btn.active span{ background: #000; }
	.burger_btn.active span:first-of-type{ top: 15px; transform: rotate(45deg); }
	.burger_btn.active span:nth-of-type(2){ opacity: 0; }
	.burger_btn.active span:last-of-type{ top: 15px; transform: rotate(-45deg); }
	
	
	#grobal-nav{ padding: 20px 0; }
	#grobal-nav a{ padding: 5px 10px 15px; font-size: 14px; }
	#grobal-nav a::after{ border-width: 1px; }
	
	
		/* ------------------------------------------------------------ link-area */
	.link-area{ padding: 50px 0; }
	.link-area .flex{ display: block; }
	.link-area .btn{ width: 100%; height: auto; margin: 0 0 20px; font-size: 16px; }
	.link-area .btn:last-of-type{ margin: 0; }
	.link-area .btn span{ width: 25px; height: 25px; }
		
	
	
	/* ------------------------------------------------------------ footer */	
	footer{ padding: 50px 0; }
	footer .logo-sb { width: 90px; }
	
	footer .logo{ width: 220px; padding: 0 0 55px; flex-direction: inherit;}
	footer .copy{ font-size: 10px; }
	
	
	
	
}