/* リキッドレイアウト対応 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

ul,
ol {
	padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	line-height: 1.5;
	min-height: 100vh;
	text-rendering: optimizeLegibility;
}

main {
	background-color: #fcfcfc;
	margin: 0 auto;
	max-width: 100%;
	width: 750px;
}

ul,
ol {
	list-style: none;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* ホバー */

a {
	-webkit-text-decoration: none;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.wrapper::before {
	background-image: url(../images/bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

main {
	box-shadow: 0 0 70px rgba(187, 209, 214, 0.5);
}

.relative {
	position: relative;
}

/* --------------------------
  anime
-------------------------- */

.slide-in {
	opacity: 0;
}

.slide-in.active {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: slideIn;
	animation-timing-function: ease;
}

.delay01 {
	animation-delay: 0.2s;
}

.delay02 {
	animation-delay: 0.4s;
}

/* --------------------------
  fv
-------------------------- */

.fv__contents {
	position: relative;
}

.fv__food {
	animation: anime-food 1.2s ease;
	left: 0;
	position: absolute;
	top: 34.2666666667vw;
}

.fv__first {
	left: 4.2666666667vw;
	position: absolute;
	top: 5.4666666667vw;
	width: 91.3333333333vw;
}

/* --------------------------
  cv01
-------------------------- */

.cv01 {
	position: relative;
}

.cv__btn {
	animation: anime1 0.5s ease 0s infinite alternate;
	bottom: 11.3333333333vw;
	left: 4.7%;
	position: absolute;
	transform-origin: center;
	width: 94.1333333333vw;
}

/* --------------------------
  cnt01
-------------------------- */

.cnt01__ttl {
	left: 5.0666666667vw;
	position: absolute;
	top: 46.6666666667vw;
	width: 89.8666666667vw;
}

/* --------------------------
  cnt02
-------------------------- */

.cnt02 {
	margin-top: -11.2vw;
}

.cnt02__under {
	z-index: 1;
}

.cnt02__comment {
	left: 3.4666666667vw;
	position: absolute;
	top: 66vw;
	width: 96.5333333333vw;
	z-index: 2;
}

/* --------------------------
  cnt03
-------------------------- */

.cnt03 {
	z-index: 3;
}

.cnt03__01-ttl {
	left: 10.9333333333vw;
	position: absolute;
	top: 16.2666666667vw;
	width: 78.1333333333vw;
}

.cnt03__03-gif {
	left: 9.6vw;
	position: absolute;
	top: 6.6666666667vw;
	width: 80.8vw;
}

/* --------------------------
  cnt04
-------------------------- */

.cnt04 {
	z-index: 2;
}

.cnt04__01-under {
	margin-top: -13.7333333333vw;
}

.cnt04__01-ttl {
	left: 8.4vw;
	position: absolute;
	top: 24.9333333333vw;
	width: 83.2vw;
}

.cnt04__02-gif {
	left: 9.6vw;
	position: absolute;
	top: 34.6666666667vw;
	width: 80.8vw;
}

.cnt04__04-gif {
	left: 9.6vw;
	position: absolute;
	top: 39.0666666667vw;
	width: 80.8vw;
}

/* --------------------------
  cnt05
-------------------------- */

.cnt05 {
	z-index: 1;
}

.cnt05__under {
	margin-top: -23.0666666667vw;
}

.cnt05__ttl {
	left: 12.9333333333vw;
	position: absolute;
	top: 29.3333333333vw;
	width: 74.2666666667vw;
}

.cnt05__item-01 {
	bottom: 0;
	left: 2.5333333333vw;
	position: absolute;
	width: 46.6666666667vw;
}

.cnt05__item-02 {
	bottom: 0;
	position: absolute;
	right: 2.5333333333vw;
	width: 46.6666666667vw;
}

.cnt05__cross {
	bottom: 19.8666666667vw;
	left: 46.6666666667vw;
	position: absolute;
	width: 6.8vw;
}

/* --------------------------
  cnt06
-------------------------- */

.cnt06__01-ttl {
	left: 10.5333333333vw;
	position: absolute;
	top: 8vw;
	width: 78.8vw;
}

/* --------------------------
  cnt08
-------------------------- */

.cnt08__01-ttl {
	left: 4.1333333333vw;
	position: absolute;
	top: 16.2666666667vw;
	width: 74.2666666667vw;
}

.cnt08__03-food {
	position: absolute;
	right: 0;
	top: -18.1333333333vw;
	width: 96vw;
}

/* --------------------------
  cv02
-------------------------- */

.cv02__btn {
	animation: anime1 0.5s ease 0s infinite alternate;
	bottom: 13.0666666667vw;
	left: 4.7%;
	position: absolute;
	transform-origin: center;
	width: 94.1333333333vw;
}

.inner {
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

@media (any-hover: hover) {

a:hover {
	opacity: 0.6;
}

}

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

.fv__food {
	top: 257px;
}

.fv__first {
	left: 32px;
	top: 41px;
	width: 685px;
}

.cv__btn {
	bottom: 85px;
	width: 706px;
}

.cnt01__ttl {
	left: 38px;
	top: 350px;
	width: 674px;
}

.cnt02 {
	margin-top: -84px;
}

.cnt02__comment {
	left: 26px;
	top: 495px;
	width: 724px;
}

.cnt03__01-ttl {
	left: 82px;
	top: 122px;
	width: 586px;
}

.cnt03__03-gif {
	left: 72px;
	top: 50px;
	width: 606px;
}

.cnt04__01-under {
	margin-top: -103px;
}

.cnt04__01-ttl {
	left: 63px;
	top: 187px;
	width: 624px;
}

.cnt04__02-gif {
	left: 72px;
	top: 260px;
	width: 606px;
}

.cnt04__04-gif {
	left: 72px;
	top: 293px;
	width: 606px;
}

.cnt05__under {
	margin-top: -173px;
}

.cnt05__ttl {
	left: 97px;
	top: 220px;
	width: 557px;
}

.cnt05__item-01 {
	left: 19px;
	width: 350px;
}

.cnt05__item-02 {
	right: 19px;
	width: 350px;
}

.cnt05__cross {
	bottom: 149px;
	left: 350px;
	width: 51px;
}

.cnt06__01-ttl {
	left: 79px;
	top: 60px;
	width: 591px;
}

.cnt08__01-ttl {
	left: 31px;
	top: 122px;
	width: 557px;
}

.cnt08__03-food {
	top: -136px;
	width: 720px;
}

.cv02__btn {
	bottom: 98px;
	width: 706px;
}

.inner {
	max-width: 1150px;
	padding-left: 25px;
	padding-right: 25px;
}

}

@keyframes slideIn {

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

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

}

@keyframes anime-food {

from {
	transform: translateY(100px);
}

to {
	transform: translateY(0);
}

}

@keyframes anime1 {

from {
	transform: scale(0.9, 0.9);
}

to {
	transform: scale(1, 1);
}

}

@keyframes anime1 {

from {
	transform: scale(0.9, 0.9);
}

to {
	transform: scale(1, 1);
}

}


/*# sourceMappingURL=style.css.map */
/*---------------------------------------------------
 * 追従バナー ―― 常に中央配置
 *---------------------------------------------------*/

/* ===== 共通 ===== */
.floating-banner{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:99999;
}

.floating-banner__image{
  width:100%;
  height:auto;
  max-width:100%;
}

/* ===== 0 – 479 px：小型スマホ ===== */
@media (max-width:479px){
  .floating-banner{
    width:100%;
  }
}

/* ===== 480 – 767 px：一般スマホ ===== */
@media (min-width:480px) and (max-width:767px){
  .floating-banner{
    width:100%;
  }
}

/* ===== 768 – 1023 px：タブレット ===== */
@media (min-width:768px) and (max-width:1023px){
  .floating-banner{
    width:90%;
    bottom:20px;
  }
}

/* ===== 1024 px 以上：PC ===== */
@media (min-width:1024px){
  .floating-banner{
    width:750px; /* 必要なら変更可 */
    bottom:0;
  }
}

.floating-banner{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:99999;

  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}

.floating-banner.is-show{
  opacity:1;
  pointer-events:auto;
}