/* ==================================================
  /css/top.css
  => トップページ用スタイルシート
　最終更新 2022.06.21
　編集者 a.kajiwara@crank-ry.com
================================================== */

/* レイアウト
==================================================================================================== */
main {
	position: relative;
}
main > section > .inner {
	margin: 0 auto;
}
/* mobile用 */
@media screen and (max-width:768px) {
	main > section > .inner {
		margin: 0 auto;
	}
}
/* HERO
==================================================================================================== */
.hero {
}
/* mobile用 */
@media screen and (max-width:768px) {
	.hero {
		position: relative;
		width: 100%;
		height: auto;
	}
}
.hero > .inner {
	position: relative;
}
/* メインビジュアル
============================================================ */
.hero_mv {
	position: relative;
	background-color: #f9f4f3;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	transition: all 0.5s;
	overflow: hidden;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.hero_mv {
		height: 133.33vw;
	}
}
.hero_mv_pic {
	display: block;
	position: absolute;
	opacity: 0;
	transition: all 0.8s;
}
@keyframes hero_animation_img_lt {
  0% {
    opacity: 0;
    transform: translate(-100%,-100%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes hero_animation_img_rt {
  0% {
    opacity: 0;
    transform: translate(100%,-100%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes hero_animation_img_lb {
  0% {
    opacity: 0;
    transform: translate(-100%,100%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes hero_animation_img_rb {
  0% {
    opacity: 0;
    transform: translate(100%,100%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes hero_animation_img_fadeIn {
  0% {
    opacity: 0;
		transform: scale(1.5,1.5) translate(-50%,-50%) rotate(-15deg);
    transform-origin: 0 0;
  }
  100% {
    opacity: 1;
		transform: scale(1,1) translate(-50%,-50%) rotate(0);
    transform-origin: 0 0;
  }
}
@keyframes hero_animation_img_fadeInSp {
  0% {
    opacity: 0;
		transform: scale(1.5,1.5) translate(0,0) rotate(-15deg);
    transform-origin: 0 0;
  }
  100% {
    opacity: 1;
		transform: scale(1,1) translate(0,0) rotate(0);
    transform-origin: 0 0;
  }
}
.hero_mv_pic.animation_01_01 {
	left: 0;
	top: 0;
	width: 42.73vw;
	height: auto;
	z-index: 1;
  animation: hero_animation_img_lt 2s cubic-bezier(1, 0, 0, 1) forwards;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_01_01 {
		width: 90.00vw;
	}
}
.hero_mv_pic.animation_01_01 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_01_02 {
	right: 0;
	top: 0;
	width: 15.31vw;
	width: auto;
	height: 100%;
	z-index: 5;
  animation: hero_animation_img_rt 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.1s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_01_02 {
		width: auto;
		height: 100%;
	}
}
.hero_mv_pic.animation_01_02 > img {
	width: auto;
	height: 100%;
}
.hero_mv_pic.animation_01_03 {
	left: 0;
	bottom: 0;
	width: 35.47vw;
	height: auto;
	z-index: 10;
  animation: hero_animation_img_lb 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.2s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_01_03 {
		width: 60.47vw;
		height: auto;
	}
}
.hero_mv_pic.animation_01_03 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_01_04 {
	right: 0;
	bottom: 0;
	width: 65.82vw;
	height: auto;
	z-index: 15;
  animation: hero_animation_img_rb 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.3s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_01_04 {
    width: 72vw;
		height: auto;
	}
}
.hero_mv_pic.animation_01_04 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_02_01 {
	left: 0;
	bottom: 0;
	width: 21.13vw;
	height: auto;
	z-index: 20;
  animation: hero_animation_img_lb 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.5s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_02_01 {
		width: 36.07vw;
		height: auto;
	}
}
.hero_mv_pic.animation_02_01 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_02_02 {
	right: 22.19vw;
	top: 0;
	width: 30.86vw;
	height: auto;
	z-index: 25;
  animation: hero_animation_img_rt 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.6s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_02_02 {
		right: 0;
		width: 56.13vw;
		height: auto;
	}
}
.hero_mv_pic.animation_02_02 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_02_03 {
	left: 0;
	top: calc(4.69vw + 45px);
	width: 24.38vw;
	height: auto;
	z-index: 30;
  animation: hero_animation_img_lt 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.7s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_02_03 {
		top: calc(8vw + 8.2vw);
    width: 52.33vw;
		height: auto;
	}
}
.hero_mv_pic.animation_02_03 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_02_04 {
	right: 0;
	bottom: 0;
	width: 20.66vw;
	height: auto;
	z-index: 35;
  animation: hero_animation_img_rb 2s cubic-bezier(1, 0, 0, 1) forwards;
	animation-delay: 0.8s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_02_04 {
		width: 38vw;
		height: auto;
	}
}
.hero_mv_pic.animation_02_04 > img {
	width: 100%;
	height: auto;
}
.hero_mv_pic.animation_03 {
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%,-50%);
	z-index: 40;
  animation: hero_animation_img_fadeIn 1.5s cubic-bezier(.47, 0, .745, .715) forwards;
	animation-delay: 1.8s;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_03 {
		left: 4vw;
		top: 0;
		width: auto;
		height: 100%;
		transform: translate(0,0);
		animation: hero_animation_img_fadeInSp 1.5s cubic-bezier(.47, 0, .745, .715) forwards;
		animation-delay: 1.8s;
	}
}
.hero_mv_pic.animation_03 > img {
	width: 100%;
	height: auto;
}
@media screen and (max-width:768px) {
	.hero_mv_pic.animation_03 > img {
    max-width: 9999px;
		width: auto;
		height: 100%;
	}
}
/* メインキャッチ
============================================================ */
@keyframes hero_animation_catchcopy {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hero_copy {
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: 50%;
	text-align: left;
	opacity: 0;
	/*transform: translate(-50%,50%);*/
	transform: translate(-50%,60%);
	z-index: 50;
  animation: hero_animation_catchcopy 2s cubic-bezier(.47, 0, .745, .715) forwards;
	animation-delay: 2.4s;
}
@media screen and (max-width:768px) {
	.hero_copy {
    /*left: 6.4vw;
    bottom: 12vw;
		text-align: left;
		transform: translate(0,0);*/
	}
}
.hero_copy_catchcopy_en {
	display: block;
}
@media screen and (max-width:768px) {
	.hero_copy_catchcopy_en {
	}
}
.hero_copy_catchcopy_en > img {
	max-width: 9999px;
	width: auto;
	height: 11.41vw;
}
@media screen and (max-width:768px) {
	.hero_copy_catchcopy_en > img {
		max-width: 9999px;
		width: auto;
		height: 21vw;
	}
}
.hero_copy_catchcopy_en_01,
.hero_copy_catchcopy_en_02 {
	display: inline-block;
}
@media screen and (max-width:768px) {
	.hero_copy_catchcopy_en_01,
	.hero_copy_catchcopy_en_02 {
		display: block;
	}
	.hero_copy_catchcopy_en_02 {
		margin-top: 2vw;
	}
}
.hero_copy_catchcopy_en_01 > img,
.hero_copy_catchcopy_en_02 > img {
	width: auto;
	height: 4.53vw;
}
@media screen and (max-width:768px) {
	.hero_copy_catchcopy_en_01 > img,
	.hero_copy_catchcopy_en_02 > img {
		max-width: 9999px;
		width: auto;
		height: 10.13vw;
	}
}
.hero_copy_catchcopy_jp {
	display: inline-block;
	position: relative;
	color: #181919;
	font-family: YakuHanMP, 'Zen Old Mincho', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", 'Noto Serif JP', "HGS明朝E", serif;
	/*font-size: 35px;
	font-size: 1.73vw;*/
	font-size: 1.875vw;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.0;
	/*margin-top: 2.34vw;*/
	top: -1.1vw;
	left: 0.2vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.hero_copy_catchcopy_jp {
		/*font-size: 4.8vw;*/
		font-size: 4.27vw;
    /*margin-top: 4.2vw;*/
    top: -3.6vw;
    left: 0.4vw;
	}
}
/* Scroll Down
============================================================ */
.hero_scrolldown {
	display: block;
	position: absolute;
	right: 50%;
	bottom: 0;
	/*transform: translate(50%,0);*/
  z-index: 50;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.hero_scrolldown {
		/*right: 3.5vw;
		transform: translate(0,0);*/
	}
}
.hero_scrolldown_link {
  display: inline-block;
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: 0;
  color: #3c4245;
  font-size: 11px;
	font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  padding: 10px 10px 85px;
	transform: translate(50%,0);
}
/* mobile用 */
@media screen and (max-width:768px) {
	.hero_scrolldown_link {
		/*color: #ffffff;
		font-size: 1.87vw;*/
		font-size: 2.4vw;
		letter-spacing: .2em;
		padding: 10px 10px 11.33vw;
	}
}
.hero_scrolldown_link::after {
  content: '';
  position: absolute;
  background: #3c4245;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 70px;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.hero_scrolldown_link::after {
		/*background: #ffffff;*/
		height: 9.33vw;
	}
}
.hero_scrolldown_link::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  30.1%, 70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    opacity: 0;
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/* contents
==================================================================================================== */
.contents {
	width: 75vw;
	margin: 0 auto;
	padding: 0 0 11.72vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents {
		width: 71.47vw;
		padding: 0 0 16vw;
	}
}
.contents_unit {
	position: relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	padding: 11.72vw 0 0;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit {
		display: block;
		padding: 16vw 0 0;
	}
}
.contents_unit.is-reverse {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.contents_unit_pic {
	position: relative;
	width: 58.33%;
	z-index: 100;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_pic {
		width: auto;
	}
}
.contents_unit_pic_figure {
}
.contents_unit_content {
	width: 37.5%;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content {
		width: auto;
	}
}
.contents_unit_content_body {
	padding: 0 0 3.13vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body {
		padding: 9.07vw 0 5.33vw;
	}
}
.contents_unit_content_body_heading {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.14em;
	line-height: 1.0;
	text-transform: uppercase;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_heading {
		font-size: 4.0vw;
		font-size: 3.73vw;
	}
}
.contents_unit_content_body_leadcopy {
	font-family: YakuHanMP, 'Zen Old Mincho', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", 'Noto Serif JP', "HGS明朝E", serif;
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.0;
	margin-top: 1.17vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_leadcopy {
		font-size: 5.87vw;
		line-height: 1.6;
		margin-top: 2.13vw;
	}
}
.contents_unit_content_body_bodycopy {
	font-size: 15px;
	line-height: 2.0;
	margin-top: 3.52vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_bodycopy {
		font-size: 3.73vw;
		margin-top: 6.13vw;
	}
}
.contents_unit_content_body_button {
	margin-top: 2.73vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_button {
		text-align: right;
	}
}
.contents_unit_content_body_button_link {
	position: relative;
	display: block;
	text-align: right;
	padding: 15px 0;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_button_link {
		display: inline-block;
		padding: 2.67vw 0;
	}
}
.contents_unit_content_body_button_link::after,
.contents_unit_content_body_button_link::before {
	content: '';
	position: absolute;
	display: block;
	right: 0;
	bottom: 0;
	width: 41.67vw;
	height: 1px;
	transition: all 0.8s;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_button_link::after,
	.contents_unit_content_body_button_link::before {
		content: '';
		position: absolute;
		display: block;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		transition: all 0.8s;
	}
}
.contents_unit_content_body_button_link::before {
	background-color: #cccccc;
	z-index: 10;
}
.contents_unit_content_body_button_link::after {
	background-color: #3c4245;
	z-index: 20;
}
.contents_unit.is-reverse .contents_unit_content_body_button_link::before,
.contents_unit.is-reverse .contents_unit_content_body_button_link::after {
	right: auto;
	left: 0;
}
.contents_unit_content_body_button_link:hover::after {
	width: 0;
}
.contents_unit_content_body_button_link_txt {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.0;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.contents_unit_content_body_button_link_txt {
		font-size: 3.73vw;
	}
}
/* オンラインショップブロック
============================================================ */
.onlineshop {
}
.onlineshop_content {
}
.onlineshop_content_pic {
}
.onlineshop_content_body {
	position: relative;
	background-color: #ffffff;
	width: 59.38vw;
	margin: -4.69vw auto 0;
	padding: 6.25vw 100px 8.59vw;
	z-index: 100;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.onlineshop_content_body {
		width: 86.4vw;
		margin: -9.07vw auto 0;
		padding: 10.67vw 7.73vw 21.33vw;
	}
}
.onlineshop_content_body_title {
}
/* mobile用 */
@media screen and (max-width:768px) {
	.onlineshop_content_body_title {
		text-align: center;
	}
}
.onlineshop_content_body_title_sub {
	display: block;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.14em;
	line-height: 1.0;
	text-transform: uppercase;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.onlineshop_content_body_title_sub {
		font-size: 3.73vw;
	}
}
.onlineshop_content_body_title_main {
	display: block;
	width: 150px;
	margin-top: 1.56vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.onlineshop_content_body_title_main {
		display: inline-block;
		width: 32vw;
		margin-top: 4.27vw;
	}
}
.onlineshop_content_body_bodycopy {
	font-size: 15px;
	line-height: 2.0;
	margin-top: 3.13vw;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.onlineshop_content_body_bodycopy {
		font-size: 3.73vw;
		margin-top: 7.73vw;
	}
}
.onlineshop_content_body_button {
	margin-top: 1.95vw;
	text-align: right;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.onlineshop_content_body_button {
		margin-top: 3.73vw;
	}
}
/* 仕切り - イメージフォト
============================================================ */
.imagephotoBlock {
}
.imagephotoBlock_figure {
	position: relative;
}
.imagephotoBlock_figure::before {
  content: '';
  display: block;
  padding-top: 26.56%;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.imagephotoBlock_figure::before {
		padding-top: 50%;
	}
}
.imagephotoBlock_figure_img {
  display: block;
  position: absolute;
	object-fit: cover;
	object-position: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}