@charset "UTF-8";
.sec_mv {
	width:100%;
	height:100vh;
	position:relative;
}

.sec_mv::before {
	content:"";
	display:block;
	background:rgba(0,0,0,.2);
	width:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	z-index:1;
}


.txt_v {
	font-size:3.3rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight:500;
	writing-mode: vertical-rl;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:#FFF;
	z-index:10;
}


@media all and (max-width:560px) {
.txt_v {
	font-size:2.6rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight:500;
	writing-mode: vertical-rl;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:#FFF;
	z-index:10;
}	
}


.logo {
	width:100px;
	position:absolute;
	top:30px;
	left:50%;
	transform:translateX(-50%);
	z-index:10;
}

.logo img {
	width:100%;
}

.sec_begining {
	width:100%;
	margin:0;
	padding:0;
	background:url("../images/bg_summary.jpg") no-repeat center center;
	background-size:cover;
	color:#362e2b;
}

.body_begining {
	width:96%;
	max-width:1280px;
	margin:0 auto;
	padding:100px 0;
	font-size:1.6rem;
}

@media all and (max-width: 560px) {
.body_begining {
	width:96%;
	max-width:1280px;
	margin:0 auto;
	padding:70px 0;
	font-size:1.6rem;
}
}


.block_flex {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items:center;
}

.block_flex > div {
	width:45%;
}


@media all and (max-width: 560px) {
.block_flex > div {
	width:100%;
}
}


.block_flex > div > img {
	width:100%;
}


.body_begining h2 {
	font-size:3rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin:0 0 30px;
	font-weight:400;
}


.body_begining h3 {
	font-size:2.3rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin:0 0 15px;
	font-weight:400;
}


.list_flavour {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	text-align:center;
}


.list_flavour li {
	width:23%;
}

@media all and (max-width:560px) {
.list_flavour li {
	width:48%;
	margin:0 0 20px;
}	
}

.list_flavour li img {
	width:100%;
}


.sec_feature {
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-size: cover;
  background-position: center center;
}
.area_feature {
  width: 96%;
  max-width: 1024px;
  height: inherit;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #FFF;
}
.btn_feature {
  display: inline-block;
  width: 30%;
  padding: 1.5em;
  font-size: 1.6rem;
  border: 1px solid #FFF;
  color: #FFF;
  background: rgba(0,0,0,.6);
  transition: all .3s linear;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  margin: 0;
}
.btn_feature:hover {
  background: rgba(0,0,0,1);
  color: #FFF;
}
.block_feature {
  width: 100%;
  padding: 0 50% 150px 0;
  position: relative;
  transition: all .3s linear;
  font-size: 1.6rem;
  text-align: left;
  display: none;
}
.block_feature h3 {
  font-size: 2.8rem;
  font-weight: 300;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  margin: 0 0 15px;
  transition: all .3s linear;
}
.btn_backToContent {
	display:inline-block;
	color:#FFF;
	border:1px solid #FFF;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	padding:1em 2em 1em 3em;
	position:relative;
	transition:all .3s linear;
	background:rgba(0,0,0,.3);
}
.btn_backToContent::before {
	content:"";
	display:block;
	width:10px;
	height:10px;
	border-top:1px solid #FFF;
	border-left:1px solid #FFF;
	position:absolute;
	top:50%;
	left:30px;
	transform:rotate(-45deg) translateY(-50%);
	transition:all .3s linear;
}
.btn_backToContent:hover {
	display:inline-block;
	color:#FFF;
	border:1px solid #FFF;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	padding:1em 2em 1em 3em;
	position:relative;
	transition:all .3s linear;
	background:rgba(0,0,0,.6);
}
.btn_backToContent:hover::before {
	content:"";
	display:block;
	width:10px;
	height:10px;
	border-top:1px solid #FFF;
	border-left:1px solid #FFF;
	position:absolute;
	top:50%;
	left:25px;
	transform:rotate(-45deg) translateY(-50%);
	transition:all .3s linear;
}
.img_feature {
  width: 48%;
  padding-top:100%;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all .3s linear;
}
.img_feature img {
  width: inherit;
}
/* 背景フェード用の2レイヤー（下:常時表示 / 上:ホバー時の一時表示） */
.sec_feature {
  position: relative;
  overflow: hidden;
}
.sec_feature .bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity .4s ease;
  z-index: 0;
}
.sec_feature .bg-base {
  opacity: 1;
}
.sec_feature .bg-hover {
  opacity: 0;
}
/* コンテンツは背景レイヤーの上に載せる */
.area_feature {
  position: relative;
  z-index: 2;
}
/* 初期は .block_feature を非表示。段階表示のために子要素も初期透明 */
.block_feature {
  display: none;
}
.block_feature._prep h3, .block_feature._prep p, .block_feature._prep .img_feature {
  opacity: 0;
}
/* クリック後にボタンを消してからコンテンツを出す演出 */
.btns-wrap {
  width: 100%;
  display: flex;
  gap: 2%;
  justify-content: center;
}
.btn_feature {
  cursor: pointer;
}
/* 画像ボックスの見た目微調整（サンプル） */
.img_feature {
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}
/* レスポンシブ: ボタンが窮屈なら2段落ち許容 */
@media (max-width: 768px) {
  .btns-wrap {
    flex-wrap: wrap;
  }
  .btn_feature {
    width: 48%;
    margin-bottom: 10px;
  }
  .block_feature {
    padding: 120px 0 120px 0;
  }
  .img_feature {
    width: 80%;
    position: static;
    padding-top:80%;
    margin: 20px auto 0;
	
  }
}
@media all and (max-width: 560px) {
.block_feature {
  width: 100%;
  padding: 0;
  position: relative;
  transition: all .3s linear;
  font-size: 1.4rem;
  text-align: left;
  display: none;
}
.block_feature h3 {
  font-size: 2.3rem;
  font-weight: 300;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  margin: 0 0 15px;
  transition: all .3s linear;
}
.btn_feature {
    width: 100%;
    margin-bottom: 10px;
  }
.img_feature {
    width: 100%;
    position: static;
    height: 220px;
    padding-top: 100%;
  }
.btn_backToContent {
	display:inline-block;
	color:#FFF;
	border:1px solid #FFF;
	font-size:1.4rem;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	padding:.6em 2em .6em 3em;
	position:relative;
	transition:all .3s linear;
	background:rgba(0,0,0,.3);
}
}
/* 移動量50pxの fadeInUp（animate.css互換名） */
.animate__fadeInUpShort {
  -webkit-animation-name: fadeInUpShort;
  animation-name: fadeInUpShort;
}
/* デフォルトより少し短めの速度に（好みで調整可） */
.animate__animated.animate__fadeInUpShort {
  --animate-duration: 0.6s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1); /* ぐっと止まる */
}
@-webkit-keyframes fadeInUpShort {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpShort {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* パフォーマンス（念のため） */
.img_feature {
  will-change: transform, opacity;
}
/* 黒オーバーレイ */
.bg-layer.bg-black {
  background-color: #000;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1; /* 背景層の上に置くが、テキスト等はarea_featureのz-index:2なので隠さない */
}

.block_title {
	width:100%;
	text-align:center !important;
	height:auto;
	margin:0 0 100px;
}


.block_title h2 {
	font-size:3.6rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight:normal;
	margin:0 0 10px;
	text-shadow: 0px 1px 5px rgba(0,0,0,.5);
}

.block_title p {
	font-size:1.8rem;
	text-shadow: 0px 1px 5px rgba(0,0,0,.5);
}

.sec_price {
	width:96%;
	max-width:768px;
	margin:0 auto;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding:100px 0;
	text-align:center;
}

.sec_price h3 {
	width:100%;
	font-size:3rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin:0 0 30px;
	font-weight:400;
	text-align:center;
	color:#362e2b;
}

.product_lineup {
	width:47%;
	margin:0;
}


.product_lineup img {
	display:inline-block;
	width:100%;
	padding:0 0 10px;
}

.priceTag {
	font-size:1.6rem;
	margin:0 0 15px;
}

.priceTag span {
	font-size:2.6rem;
	font-weight:600;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.product_lineup a {
	display: inline-block;
	font-size: 1.8rem;
	line-height: 48px;
	height: 48px;
	color: #ffffff;
	min-width: 100%;
	background-color:#8B6969;
	text-align: center;
	box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
	transition:all .3s linear;
	opacity:1;
}

.product_lineup a:hover {
	opacity:.8;
}



@media all and (max-width: 560px) {
.sec_price {
	width:96%;
	max-width:768px;
	margin:0 auto;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding:70px 0;
	text-align:center;
}
}


.sec_info {
	width:100%;
	margin:0;
	padding:0;
	background:#efede4;
	color:#362e2b;
}

.body_info {
	width:96%;
	max-width:1280px;
	margin:0 auto;
	padding:100px 0;
	font-size:1.6rem;
}

.sec_info h3 {
	width:100%;
	font-size:3rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin:0 0 30px;
	font-weight:400;
	text-align:center;
}

.sec_info h4 {
	width:100%;
	font-size:2.1rem;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	padding:.4em;
	background:#362e2b;
	color:#FFF;
	margin:0 0 20px;
	font-weight:400;
	text-align:center;
}


footer {
	width:100%;
	text-align:center;
	padding:50px 0;
}