@charset "UTF-8";
/* 
フレッシュネス カニクリーム2026 キャンペーンLP
style.css
*/

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

html,
body {
	font-family: "Arial", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt" 1;
	letter-spacing: 0;
	line-break: strict;
	/* normalは句読点のみ*/
}

div {
	padding: 0;
	margin: 0;
}

body {
	color: #fff;
	line-height: 1;
	margin: 0;
	padding: 0;
	font-size: 15px;
	background: #480608;
	overflow-x: hidden;
}

body:not(.inited) {
	overflow: hidden;
	height: 100vh;
}

a {
	color: inherit;
	text-decoration: none;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	cursor: pointer;
}

a {
	text-decoration: none;
}

a:hover img {
	filter: brightness(1.2);
}

*[onClick] {
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
table {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.6;
	font-weight: 900;
}

h2 {}

h3 {}

h4 {}

p {
	line-height: 1.8;
	letter-spacing: 1px;
}

ul {
	text-align: left;
}

li {
	list-style: none;
}

.forPC {
	display: block;
}

.forSP {
	display: none;
}

.inlineblock {
	display: inline-block;
}

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

	body {
		font-size: 14px;
	}

	p {
		line-height: 2;
	}

	.forPC {
		display: none;
	}

	.forSP {
		display: block;
	}

}

img {
	display: block;
	border: none;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.container {
	position: relative;
	margin: 0 auto;
	overflow-x: hidden;
	background: #fff;
}

.main {
	position: relative;
}

body.pc .main {}

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

.w1920content {
	margin: 0 auto;
}

/*
.w1920content > img{
  width:160%;
  max-width: none;
  margin:0 -30%;
}
*/
.header_space {
	opacity: 0;
}

.container {
	padding-top: 90px;
	/* header分*/
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #9c6a01;
	background-size: cover;
	height: 90px;
	transition: 0.3s ease-out;
	z-index: 10000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* box-shadow: 0 0 10px #fffbd957; */
}

.header_logo,
.header_date {
	height: auto;
	width: 33.816%;
	max-width: 320px;
	margin: 0;
}

.header_date {
	width: 65.454%;
	max-width: 484px;
}

@media screen and (max-width:500px) {
	.container {
		padding-top: 50px;
		/* header分*/
	}

	.header {
		height: 50px;
	}

	.header_logo,
	.header_date {
		margin: 0;
	}


}

/*
body.top_pc .header_space{
	display: none;
}
body.top_pc .header{
	transform:translateY(-100%);
	transition:0.3s ease-out;
}
body.top_pc.in_header .header{
	transform:translateY(0%);
}
*/

.floating {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 74px;

}

body.pc .floating {
	right: 0;
}

@media screen and (max-width:767px) {
	.floating {
		width: 50px;
	}
}

.floating_header {
	position: fixed;
	bottom: 5px;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	z-index: 10;
	color: #000;
}

@media screen and (max-width:767px) {
	.floating_header {
		top: auto;
		bottom: 10px;
	}
}

.floating_header_btn {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 0.4em;
	text-align: center;
	font-weight: bold;
	padding: 0;
	width: 45px;
	height: 80px;
	box-sizing: border-box;
	background: #fff;
	padding: 5px 0 0;
	margin: 0 0 0;
	border-radius: 6px 0 0 6px;
	box-shadow: 0 10px 17px #340a0a26;
	font-size: 14px;
	line-height: 1.1;
}

.floating_header_btn:before {
	content: "";
	display: block;
	background: url(/images/icon_store.png) center bottom no-repeat;
	width: 100%;
	height: 24px;
	background-size: auto 100%;
	margin: 0;
}

.floating_header_btn-app {
	color: #005e3c;
}

.floating_header_btn-app:before {
	background-image: url(../images/icon_app.png);
}

.floating_header_btn-coupon {
	color: #005e3c;
}

.floating_header_btn-coupon:before {
	background-image: url(../images/icon_coupon.png);
}

@media screen and (min-width:768px) {
	.floating_header_btn-coupon_text {
		transform: scaleX(0.7);
	}

	.floating_header_btn br {
		display: none;
	}

	.floating_header_btn {
		width: 100px;
		height: 100px;
		font-size: 18px;
	}

	.floating_header_btn:before {
		height: 27px;
	}
}


#footer {
	background: #035d3c;
	padding: 70px 20px 50px;
	color: #fff;
}

.footer_link {
	text-align: center;
	font-size: 15px;
	color: inherit;
	text-decoration: none;
}

#copyright {
	text-align: center;
	font-size: 11px;
	margin: 50px 0 0;
	opacity: 0.7;
}


/*----------------------------------------● コンテンツ*/
.container {
	/* background: url(../images/bg.jpg?ver=2) center top #000; */
	background: #480608;
	background-size: 1200px auto;
	/* background:#f9f6d6; */
	overflow-x: hidden;
	transition: 0.3s;
}

body:not(.inited) .container {
	opacity: 0;
}

@media screen and (max-width:828px) {
	.container {
		background-size: 144.9275vw auto;
	}
}

.container.phase2 {}

.content {
	position: relative;
	margin: 0 auto;
}

.container.phase2 .content {}

.container,
.content {
	/* background-size:138px auto, 100% 100%; */
}

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

	.container,
	.content {}

}



.content_inner {
	max-width: 828px;
	margin: 0 auto;
	position: relative;
}

.content_img_wrapper {
	width: 1200px;
	margin: 0 -186px;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width:828px) {
	.content_img_wrapper {
		width: 144.9275%;
		margin: 0 -22.463%;
	}
}

/*
#drink{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin: 756% 0 0;
}
*/


@media screen and (max-width:767px) {
	.content {}
}

.content_texts {}

.btns {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40px auto 0;
	max-width: 86%;
}

.btn {
	cursor: pointer;
}

.content_btns {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 0 10%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.content_btn {}

.content_btn_img {
	;
}

.bottom_btns {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	padding: 1px 0 50px;
	/* background: #222; */
}

.bottom_notes {
	color: #fff;
	margin: 0 auto;
	width: auto;
	padding: 30px 6%;
	/* background: #222; */
	max-width: 600px;
}

.bottom_notes .note {
	max-width: 700px;
}

.content_btn {
	margin: auto;
}

.content_btn_img {}

.btn_coupon {
	width: 460px;
}


.btn {
	background: #fff;
	width: 88vw;
	max-width: 480px;
	color: #005e3c;
	text-align: center;
	padding: 15px 20px 13px;
	font-weight: bold;
	letter-spacing: 2px;
	border-radius: 10px;
	min-height: 80px;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 1.2;
	/* border: #005e3c 3px solid; */
}

@media screen and (min-width:768px) {
	.btn {
		font-size: 24px;
		min-height: 100px;
	}
}

.btn_1 {}

.btn_2 {
	color: #ffe70c;
	background: #005e3c;
}

.btn_x {
	background: #000;
	border: 0;
	color: #fff;
	width: 76vw;
	max-width: 380px;
}

.btn_coupon {
	width: 460px;
}

@media screen and (max-width:767px) {
	.btn_1 {}

	.btn_2 {}

}


/*----------------------------------------● ヘッダー*/

.header_content {}

.header_content_img {}

.heacer_nav {
	display: flex;
	align-items: stretch;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.header_nav_item {
	width: 230px;
	background: #fff;
}

.header_nav_item,
.heacer_nav .separator {
	padding: 19px 0;
}

.heacer_nav .separator {
	width: 0.6px;
	background: #fff;
	display: flex;
	align-items: stretch;

}

.heacer_nav .separator:before {
	content: "";
	display: block;
	width: 0.6px;
	background: #513e32;
}

.header_nav_item:not(:first-child) .header_nav_item_img {
	/* border-left:#222 0.6px solid; */

}

@media screen and (max-width:767px) {
	.heacer_nav {
		display: flex;
	}

	.header_nav_item {
		width: 110px;
		max-width: 30vw;
	}

	.header_nav_item,
	.heacer_nav .separator {
		padding: 16px 0;
	}
}

/*----------------------------------------● 共通要素*/
.close_overlay {
	position: absolute;
	left: 0;
	top: 20px;
	bottom: 20px;
	right: 0;
	margin: 0 auto;
	width: 95%;
	background: #474040a8;
	z-index: 3;
	border-radius: 20px;
	max-width: 96vw;
}

.close_overlay_text {
	color: #ffffffee;
	text-shadow: 0 0 6px #000000aa;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	display: block;
	padding: 80% 0 0;
	line-height: 1.5;
	letter-spacing: 1px;
	font-size: 30px;
}

@media screen and (max-width:767px) {
	.close_overlay_text {
		font-size: 18px;
	}
}

/*----------------------------------------● コンテント詳細*/



.text {
	margin: 0;
	line-height: 1.4;
	text-align: justify;
	word-break: break-all;
}

.notes {
	margin: 2em 0 0;
}

.note {
	padding: 0 0 0 1em;
	font-size: 15px;
	line-height: 1.4;
	text-indent: -1em;
	margin: 0.3em 0 0;
}

.note:before {
	content: "●";
	padding: 0 0.3em 0 0
}

.img_wrapper {
	position: relative;
}

.content_img {
	position: relative;
}

.w60 {
	width: 60%;
}

.content_img_base {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
}

.img_group {
	position: relative;
	z-index: 1;
	background: center top no-repeat;
	background-size: 100% auto;
}

.mashs {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

#mashs2 {
	animation-delay: 4s;
}


/*
713.3%
1426.6%
*/
.mash {
	width: 10%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-713%);
	animation: fallindown1 10s linear 0s;
	animation-iteration-count: infinite;
}

.mash:nth-child(odd) {
	animation: fallindown2 10s linear 0s;
	animation-iteration-count: infinite;
}

#mashs2 .mash,
#mashs2 .mash:nth-child(odd) {
	animation-delay: 5s;
}

.mash-1 {
	margin: 1.5% 0 0 2%
}

.mash-2 {
	margin: 13% 0 0 10%
}

.mash-3 {
	margin: 19% 0 0 20%
}

.mash-4 {
	margin: -1% 0 0 25%
}

.mash-5 {
	margin: 17% 0 0 58.5%
}

.mash-6 {
	margin: -2% 0 0 69%
}

.mash-7 {
	margin: 12% 0 0 78%
}

.mash-8 {
	margin: 2% 0 0 84.5%
}

.mash-9 {
	margin: 7% 0 0 94%
}

.mash-10 {
	margin: 41.5% 0 0 62%
}

.mash-11 {
	margin: 413% 0 0 69%
}

.mash-12 {
	margin: 49% 0 0 78%
}

.mash-13 {
	margin: 30% 0 0 84.5%
}

.mash-14 {
	margin: 60% 0 0 -3%
}

.mash-15 {
	margin: 35% 0 0 10%
}

.mash-16 {
	margin: 52% 0 0 20%
}

.mash-17 {
	margin: 42% 0 0 33%;
}

.mash-18 {
	margin: 47% 0 0 4%
}

@keyframes fallindown1 {
	0% {
		transform: translateY(-713%) rotate(-30deg);
	}

	100% {
		transform: translateY(713%) rotate(30deg);
	}
}

@keyframes fallindown2 {
	0% {
		transform: translateY(-713%) rotate(30deg);
	}

	100% {
		transform: translateY(713%) rotate(-30deg);
	}
}

#fv {
	overflow: hidden;
}

#fv_title {
	opacity: 0;
	transition: 1s ease-out 1s;
	transform: translateY(2%);
}

body.inited #fv_title {
	opacity: 1;
	transform: translateY(0);
}

#fv_img {
	opacity: 0;
	transition: 1s ease-out 1.5s;
	transform: translateY(2%);
}

body.inited #fv_img {
	opacity: 1;
	transform: translateY(0);
}


#burger {}

#drink {}

#campaign {}


#campaign .btn_img {
	width: 225px;
}

@media screen and (max-width:767px) {
	#campaign .btn_img {
		width: 165px;
	}
}

.content_img-cirlce {
	clip-path: circle(30% at center);
	transition: clip-path 1s cubic-bezier(0.04, 0.58, 0.05, 1) 0.8s, opacity 0.5s ease-out 0.8s;
	opacity: 0;
	width: 30%;
}

.in+.content_img-cirlce {
	clip-path: circle(50% at center);
	opacity: 1;
}

#drink .content_img-cirlce {
	position: absolute;
	width: 30%;
}

#img_group-2-1 .content_img-cirlce {
	left: 0;
	top: 0.3%;
	margin-left: 20.8%;
}

#img_group-2-2 .content_img-cirlce {
	right: 0;
	top: 0.3%;
	margin-right: 20.8%;
}

.drink_note {
	padding: 15px 10px;
	display: block;
	margin: 0 auto;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	max-width: 100vw;
}

.drink_note_text {
	display: inline-block;
}

.video_box {
	position: relative;
	width: 41.5%;
	padding: 23.333% 0 0;
	overflow: hidden;
	border-radius: 4px;
	margin: 0 0 0 24%;

}

.video_box video {
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: 100%;
	clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px,
			100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%,
			0 calc(100% - 20px), 0 20px);
}

.video_box-R {
	margin: 0 24% 0 auto;
}

.campaign_link {
	display: block;

	position: relative;
}

.campaign_link:before {
	content: "";
	width: 88%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	padding: 24.1666% 0 0;
	width: 64.83333%;
	max-width: 970px;
	background: #fff000;
	transition: 0.3s ease-out;
}

.campaign_link:hover:before {
	background: #ffd400;
}

.campaign_link .content_img {
	position: relative;
	z-index: 1;
}

.campaign_link-disabled {
	pointer-events: none;
}

.campaign_link-disabled:before {
	background: #eee;

}

.campaign_link-finished {
	pointer-events: none;
	position: relative;
	overflow: hidden;
}

.campaign_link-finished .content_img {
	opacity: 0.6;
}

.campaign_link-finished:before {
	background: #f3f1bf;
}

.campaign_link-finished:after {
	content: "FINISHED";
	background: #9e9999f2;
	color: #ffffffa1;
	padding: 3% 10%;
	font-size: 5vw;
	font-weight: bold;
	position: absolute;
	left: 50%;
	top: 43%;
	margin: auto;
	text-align: center;
	transform: translate(-50%);
	z-index: 2;
	box-sizing: border-box;
	letter-spacing: 5px;
	width: 64.83333%;


}

@media screen and (min-width:767px) {
	.campaign_link-finished:after {
		font-size: 40px;
	}
}

.cafe2025_btn {
	position: absolute;
	left: 0;
	top: 0;
	padding: 10.6% 27.3% 0 0;
}

#cafe2025_btn_morning {
	margin: 182.8% 0 0 22%;
}

#cafe2025_btn_coffee {
	margin: 182.8% 0 0 50.8%;

}

#cafe2025_btn_hamburger {
	margin: 319.5% 0 0 22%;
}

#cafe2025_btn_set {
	margin: 319.5% 0 0 50.8%;
}

#cafe2025_btn_drink {
	margin: 456.1% 0 0 22%;
}

#cafe2025_btn_sweets {
	margin: 456.1% 0 0 50.8%;
}

#cafe2025_btn_frebar {
	margin: 606.5% 0 0 30.3%;
	padding-right: 39.5%;
}

#cafe2025_btn_wifi {
	margin: 945.8% 0 0 26.8%;
	padding-right: 45%;
	border-radius: 10px;
}

#cafe2025_btn_power {
	margin: 1000.9% 0 0 26.8%;
	padding-right: 45%;
	border-radius: 10px;
}

#scroll_img_wrapper {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	margin: 750% 0 0;
}

#scroll_img {
	width: 363%;
	height: auto;
	max-width: none;
	animation: scrollInfinite 20s linear 0s;
	animation-iteration-count: infinite;
}

@keyframes scrollInfinite {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}


/*----------------------------------------● クーポン*/
.img_group-coupon {
	background: #fff;
	color: #000;
	padding: 10% 0;
}

#couponinfo {
	padding-bottom: 100px;
}


.coupon {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	align-items: flex-start;
	justify-content: center;
	background: #6e616185;
	backdrop-filter: blur(10px);
	z-index: 10000;
	max-height: 100vh;
	pointer-events: none;
	opacity: 0;
	transform: scale(1.03);
	transition: 0.3s ease-out;
}

body.open_coupon .coupon {
	display: flex;
	pointer-events: auto;
	opacity: 1;
	transform: scale(1);
}

.coupon_inner {
	background: #fff;
	margin: 5% 2% 0;
	border-radius: 20px;
	position: relative;
	max-height: calc(100% - 10vw);
	display: flex;
	flex-direction: column;
}

.coupon_content {
	margin: 0 auto;
	overflow-y: auto;
	max-height: 100%;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	color: #000;
}

.btn_close {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	margin: -10px -10px 0 0;
	/*  top: 3px;

  right: 3px;*/
	background: #73625d;
	width: 70px;
	height: 70px;
	border-radius: 100px;
	box-shadow: 0 3px 7px rgb(76 50 44 / 30%);
	z-index: 1;
	cursor: pointer;
	z-index: 10000;
}

.btn_close:hover {
	filter: brightness(1.2);
}

@media screen and (min-width:415px) {
	.btn_close {
		width: 60px;
		height: 60px;
	}

	body.sp .menu_info {}
}

.btn_close:before,
.btn_close:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 12px;
	right: 12px;
	height: 1px;
	background: #ffffff6e;
}

.btn_close:before {
	transform: rotate(135deg);
}

.btn_close:after {
	transform: rotate(45deg);
}

.coupon_img {
	flex-shrink: 0;
	object-fit: contain;
	max-width: 390px;
}

.coupon_texts {
	margin: 20px auto 0;
	max-width: 820px;
	font-size: 16px;
	width: 86vw;
	text-align: center;
	display: flex;
	flex-direction: column;
}

@media screen and (min-width:768px) {
	.coupon_texts {
		/* width:60%; */
	}
}

.coupon .coupon_texts {
	width: 86%;
	padding-bottom: 40px;
}

.coupon_texts h3 {
	background: #333;
	color: #fff;
	padding: 5px 15px 3px;
	line-height: 1.2;
	display: inline-block;
	letter-spacing: 2px;
	margin: 0 auto;
}

.coupon_texts h3:not(:first-child) {
	margin-top: 1em;
}

.shoplinks {
	margin: 0.5em 0 0;
	line-height: 2;
}

.shop {
	text-decoration: underline;
	display: inline-block;
}

.coupon_limit {
	font-weight: bold;
	font-size: 110%;
	margin: 0.5em 0 0;
	line-height: 1.3;
}

.coupon_texts .notes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	margin: 2em auto 0;
}



/*////////
//ロード・アニメーション
////////*/

#loading {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	/* background:#f0efed; */
	background: #480608;
	z-index: 1000000;
	transform: translate(0, 0);
	transform-origin: 50vh 0;
	z-index: 100000000000;
	overflow:visible;
}


body.inited #loading {
	animation: fadeOut 0.5s ease-out 0.2s;
	animation-fill-mode: both;
	pointer-events: none;
}

body.inited #loading:after {
	opacity: 0;
}

body:after {
	content: "";
	font-size: 10px;
	letter-spacing: 1px;
	color: #005e3c;
	color: #fff;
	text-align: center;
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 130px;
	height: 130px;
	padding: 0;
	background: url(../images/loading_w.png) center top no-repeat;
	background-size: 130px auto;
	transition: 0.6s ease-out;
	animation: zooming 1s ease 0s;
	animation-iteration-count: infinite;
	pointer-events:none;
	z-index: 100000000000;
}
body.init:after {
	opacity:0;
	animation: none;
}
body.inited:after {
	content:none;
}
@media screen and (max-width:767px) {
	body:after {
		width: 90px;
		height: 90px;
		background-size: 90px auto;
	}
}

@keyframes upOut {
	0% {
		transform: translateY(0%);
	}

	99% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(-100%);
		display: none;
	}
}

@keyframes zooming {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.06);
	}

	100% {
		transform: scale(1);
	}
}


@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


@keyframes scaleIn {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes scalezoomIn {
	0% {
		opacity: 0;
		transform: scale(0.94);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes scalezoom {
	0% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes upIn {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

/* 
フレッシュネス カニクリーム2026 キャンペーンLP
style.css
*/