@charset "UTF-8";
/* CSS Document */

@import url(reset.css);

html { scroll-behavior: smooth; }
img { vertical-align: bottom; }

:root {
	--logo_green: #01adaf;
	--corner_beige: #b59a4d;
}



::selection { background: var(--logo_green); color: #fff; }



body {
	font-family: "Zen Old Mincho", serif;
	font-size: 15px;
	line-height: 1;
	background-color: #000;
}
body#en { font-family: "Cinzel", serif; }

img.auto { width: 100%; height: auto; }

@keyframes objApr {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes objAprTop {
	0% {
		opacity: 0;
		transform: translate(0, -20px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

a { transition: .3s; }

/* Google Fonts */
/*
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho-bold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

// <weight>: Use a value from 400 to 900
// <uniquifier>: Use a unique and descriptive class name

.cinzel-<uniquifier> {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*/

.txtB { font-weight: 700; }
/* SP用記述*/
.br4pc { display: none; }
.forPC { display: none; }

/* 言語切替ボタン */
p.langbtn {
	position: fixed;
	z-index: 500;
	right: 10px;
	top: 10px;
	/* mix-blend-mode: screen; */
}
p.langbtn.hide {
	visibility: hidden;
}
p.langbtn a {
	display: block;
	border: solid 1px var(--logo_green);
	color: var(--logo_green);
	background-color: rgba(255, 255, 255, .3);
	backdrop-filter: blur(5px);
	text-decoration: none;
	font-family: "Cinzel", serif;
	font-weight: 700;
	font-size: 14px;
	padding: 6px 21px 4px 12px;
	position: relative;
}
p.langbtn a::after { 
	content: "";
	display: block;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translate(0, -50%);
	width: 9px;
	height: 9px;
	border-right: solid 2px var(--logo_green);
	border-bottom: solid 2px var(--logo_green);
	border-radius: 2px;
	transform: translate(0, -50%) rotate(-45deg);
}
#en p.langbtn a {
  font-family: "Zen Old Mincho", serif;
	padding: 5px 21px 5px 12px;
}



/* タイトル・メイン画像 */
.kv {
	min-height: 100dvh;
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	background: url(../images/main_pic.webp) center center / cover no-repeat;
	display: flex;
	flex-direction: column;
}
.kv .main_area {
	flex: 1;
	position: relative;
	background-image: url(../images/corner_lu.svg), url(../images/corner_ru.svg), url(../images/corner_rd.svg), url(../images/corner_ld.svg);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top 44px left 10px, top 44px right 10px, bottom 8px right 10px, bottom 8px left 10px;
	background-size: 20vw auto, 20vw auto, 20vw auto, 20vw auto;
}
.kv .main_area .line_top,
.kv .main_area .line_bottom {
	position: absolute;
	width: calc(100vw - 40vw - 24px);
	height: 2px;
	background-color: var(--corner_beige);
	left: calc(20vw + 12px);
}
.kv .main_area .line_top { top: 46px; }
.kv .main_area .line_bottom { bottom: 10px; }
.kv .main_area .line_left,
.kv .main_area .line_right {
	position: absolute;
	width: 2px;
	height: calc(100vh - 40vw - 76px);
	background-color: var(--corner_beige);
	top: calc(46px + 20vw);
}
.kv .main_area .line_left { left: 12px; }
.kv .main_area .line_right { right: 12px; }

.kv .main_area .ttl {
	position: absolute;
	top: 13vw;
	left: 50%;
	transform: translateX(-50%);
	width: 66vw;
}
.kv .main_area .watch_1 {
	position: absolute;
	bottom: 22vw;
	left: 16px;
	width: 40vw;
	max-width: 270px;
	animation: objAprTop 1s .3s both;
}
.kv .main_area .watch_2 {
	position: absolute;
	bottom: 10vw;
	right: 16px;
	width: 40vw;
	max-width: 270px;
	animation: objAprTop 1s .4s both;
}

/* iPad対応 */
@media only screen and (min-width:600px) {
	.kv .main_area .ttl {
		top: 6vw;
		width: 54vw;
	}
	.kv .main_area .watch_1 {
		left: 27px;
		bottom: 154px;
	}
	.kv .main_area .watch_2 {
		right: 27px;
		bottom: 48px;
	}
}

.kv p.copy {
	padding: 5px;
	font-size: 10px;
	color: #fff;
	text-align: right;
}



/* コンテンツ部 */
main {
	padding-top: 100dvh;
	position: relative;
}
.wrapper { padding: 0 4vw; }

.bg_fixed_sec .bg {
	position: sticky;
	top: 0;
	height: 100dvh;
	background: center center / cover no-repeat;
}
.bg_fixed_sec .cont_area {
	margin-top: -100dvh;
	position: relative;
	padding: 40px 0;
}

.ttl_area {
	color: var(--logo_green);
	text-align: center;
}
.ttl_area .ttl_eng {
	font-family: "Cinzel", serif;
	font-weight: 700;
	font-size: 36px;
}
.ttl_area .ttl_cap {
	margin-top: 5px;
	font-size: 21px;
}



.txt_green_shadow {
	text-shadow: 0px 1px 8px var(--logo_green), 1px 0px 8px var(--logo_green), 0px -1px 8px var(--logo_green), -1px 0px 8px var(--logo_green), 1px 1px 8px var(--logo_green), 1px -1px 8px var(--logo_green), -1px 1px 8px var(--logo_green), -1px -1px 8px var(--logo_green);
}
.txt_white_shadow {
	text-shadow: 0px 1px 8px rgba(255, 255, 255, .3), 1px 0px 8px rgba(255, 255, 255, .3), 0px -1px 8px rgba(255, 255, 255, .3), -1px 0px 8px rgba(255, 255, 255, .3), 1px 1px 8px rgba(255, 255, 255, .3), 1px -1px 8px rgba(255, 255, 255, .3), -1px 1px 8px rgba(255, 255, 255, .3), -1px -1px 8px rgba(255, 255, 255, .3);
}



/* marker */
.txtLB {
	font-size: 132%;
	font-weight: 700;
	line-height: 1.5;
	padding: 0 3px;
	/* display: inline-block; */
	background-repeat: repeat-x;
	background-size: 200% 100%;
	background-position: 0 .8em;
	transition: all 1.6s ease;
	background-image: linear-gradient(to left, var(--logo_green) 50%, transparent 50%);
}
.txtLB.marker { background-position-x: -100%; }
.about_panel .txtLB {
	background-image: linear-gradient(to left, var(--corner_beige) 50%, transparent 50%);
}



/* 注記 */
.watch_note {
	color: #fff;
	font-size: 11px;
	text-align: right;
}
.pic .watch_note {
	width: 100%;
	padding: 3px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .6);
}
.watch_about .watch_note {
	margin-top: 10px;
	color: #fff;
	text-align: center;
}
.watch_about.watch_02 .watch_note {
	color: #000;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, .6), 1px 0px 1px rgba(255, 255, 255, .6), 0px -1px 1px rgba(255, 255, 255, .6), -1px 0px 1px rgba(255, 255, 255, .6), 1px 1px 1px rgba(255, 255, 255, .6), 1px -1px 1px rgba(255, 255, 255, .6), -1px 1px 1px rgba(255, 255, 255, .6), -1px -1px 1px rgba(255, 255, 255, .6);
}
.preorder .watches_sec .watch_note {
	margin-top: 10px;
	color: var(--corner_beige);
	text-align: center;
}
/* 英語版 */
#en .watch_note p {
	line-height: 1.35;
	text-align: left;
	text-indent: -.6em;
	margin-left: .6em;
}

@media only screen and (min-width:560px) {
	#en .watch_about .watch_note p,
	#en .preorder .watches_sec .watch_note p {
		text-align: center;
	}
}



/* About Watch */
.watch_about .about_ttl {
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 39px;
}
.watch_about .pic_area {
	margin-top: 20px;
	position: relative;
}
.watch_about .pic_area .scene_pic {
	position: absolute;
	width: 48vw;
	max-width: 360px;
	transform: translate(-20px, -50%);
	opacity: 0;
	transition: 1s;
}
.watch_about .pic_area .scene_pic.apr {
	transform: translate(0, -50%);
	opacity: 1;
}
.watch_about .pic_area .scene_pic.s01 {
	top: calc(25% - 12px);
	left: 0;
}
.watch_about .pic_area .scene_pic.s02 {
	top: calc(50% - 12px);
	left: 8%;
}
.watch_about .pic_area .scene_pic.s03 {
	top: calc(75% - 12px);
	left: 0;
}
.watch_about .pic_area .watch {
	margin-left: auto;
	width: 54vw;
	max-width: 320px;
	position: relative;
}
/* iPad対応 */
@media only screen and (min-width:768px) {
	.watch_about .pic_area .scene_pic.s01 {
		top: calc(18% - 12px);
		left: 5vw;
	}
	.watch_about .pic_area .scene_pic.s02 {
		top: calc(50% - 12px);
		left: 10vw;
	}
	.watch_about .pic_area .scene_pic.s03 {
		top: calc(82% - 12px);
		left: 5vw;
	}
	.watch_about .pic_area .watch { margin-right: 8vw; }
}

.watch_about .about_panel {
	margin: 20px auto 0;
	max-width: 540px;
	padding: 24px 20px 16px;
	background-color: rgba(255, 255, 255, .7);
	border: solid 3px var(--logo_green);
	box-shadow: 0 0 3px var(--logo_green) inset;
	border-radius: 6px;
	backdrop-filter: blur(5px);
}
.watch_about .about_panel .ttl {
	font-family: "Cinzel", serif;
	font-weight: 700;
	color: var(--logo_green);
	font-size: 32px;
	text-align: center;
}
.watch_about .about_panel .txt {
	margin-top: 16px;
	line-height: 1.8;
}
.watch_about .about_panel .txt p + p { margin-top: 16px; }

/* ゾルトラーク */
.bg_fixed_sec.watch_about.watch_01 .bg {
	background-image: url(../images/watch_01_bg_01.webp);
}
/* 花畑を出す魔法 */
.bg_fixed_sec.watch_about.watch_02 .bg {
	background-image: url(../images/watch_02_bg_01.webp);
}



/* デザイン紹介 */
.detail_list {
	margin: 30px auto 0;
	max-width: 540px;
}
.detail_list li + li { margin-top: 60px; }
.detail_list li .pic { position: relative; }
.detail_list li .detail_panel {
	margin-top: 10px;
	padding: 24px 30px;
	background-color: rgba(255, 255, 255, .7);
	border: solid 2px var(--corner_beige);
	backdrop-filter: blur(5px);
	background-image: url(../images/corner_lu.svg), url(../images/corner_ru.svg), url(../images/corner_rd.svg), url(../images/corner_ld.svg);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top 5px left 5px, top 5px right 5px, bottom 5px right 5px, bottom 5px left 5px;
	background-size: 10vw auto, 10vw auto, 10vw auto, 10vw auto;
}

/* iPad対応 */
@media only screen and (min-width:600px) {
	.detail_list li .detail_panel {
		padding: 30px 48px 36px;
		background-size: 60px auto, 60px auto, 60px auto, 60px auto;
	}
}

.detail_list li .detail_panel h3 {
	font-size: 24px;
	text-align: center;
	font-weight: 700;
	text-shadow: 0px 1px 8px var(--corner_beige), 1px 0px 8px var(--corner_beige), 0px -1px 8px var(--corner_beige), -1px 0px 8px var(--corner_beige), 1px 1px 8px var(--corner_beige), 1px -1px 8px var(--corner_beige), -1px 1px 8px var(--corner_beige), -1px -1px 8px var(--corner_beige);
	color: #fff;
}
.detail_list li .detail_panel p {
	margin-top: 20px;
	line-height: 1.8;
}

/* ゾルトラーク */
.bg_fixed_sec.watch_detail.watch_01 .bg {
	background-image: url(../images/watch_01_bg_02_sp.webp);
}
/* 花畑を出す魔法 */
.bg_fixed_sec.watch_detail.watch_02 .bg {
	background-image: url(../images/watch_02_bg_02_sp.webp);
}



/* プレオーダー */
.preorder .bg {
	background-image: url(../images/spec_bg.webp);
}
/* スペック表 */
.preorder .spec_sec { margin-top: 30px; }
.preorder .spec_table {
	display: grid;
	grid-template-columns: 100px auto;
	row-gap: 1px;
}
.preorder .spec_table + .spec_table { margin-top: 1px; }
.preorder .spec_table .ttl,
.preorder .spec_table .spec {
	font-size: 13px;
	padding: 4px 8px 2px;
	line-height: 1.3;
	display: flex;
	align-items: center;
}
.preorder .spec_table .ttl {
	background-color: var(--logo_green);
	color: #fff;
	text-align: right;
	justify-content: flex-end;
}
.preorder .spec_table .spec {
	color: #000;
	background-color: #fff;
}
/* プレオーダー */
.preorder .panel_bg {
	padding: 20px 10px 16px;
	background-color: rgba(255, 255, 255, .6);
	border: 2px solid var(--logo_green);
	border-radius: 6px;
}

.preorder .watches_sec {
	margin: 80px auto 0;
	max-width: 540px;
}
.preorder .watches_list {
	margin-top: 20px;
	display: flex;
	gap: 0 24px;
}
.preorder .watches_list li { flex: 1; }
.preorder .watches_list li .pic { position: relative; }
.preorder .watches_list li .watch_info {
	margin-top: 6px;
	text-align: center;
	padding: 8px 8px 16px;
}
.preorder .watches_list li .watch_info .watch_name {
	line-height: 1.35;
	font-weight: 700;
	border-bottom: dashed var(--logo_green) 1px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.preorder .watches_list li .watch_info .watch_name h3 {
	font-size: 12px;
	color: var(--logo_green);
}
.preorder .watches_list li .watch_info .watch_name h4 {
	margin-top: 6px;
	font-size: 16px;
}
.preorder .watches_list li .watch_info .price span {
	font-size: 135%;
	font-weight: 700;
	margin: 0 2px;
	color: var(--logo_green);
}
.preorder .watches_list li .watch_info .limit { margin-top: 10px; }
.preorder .watches_list li .watch_info .limit span {
	font-size: 120%;
	font-weight: 700;
	margin: 0 2px;
	color: var(--logo_green);
}

.preorder .btn_area {
	margin: 24px auto 0;
	padding: 20px 15px;
	border-width: 3px;
	text-align: center;
	border-radius: 8px;
}
.preorder .btn_area.kentex_only { max-width: 300px; }
.preorder .btn_area .lead {
	color: var(--logo_green);
	font-weight: 700;
	font-size: 21px;
}
.preorder .btn_area .btns {
	margin-top: 16px;
	display: flex;
	column-gap: 10px;
}
.preorder .btn_area .btns li { flex: 1; }
.preorder .btn_area .btns li a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	border-radius: 4px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.preorder .btn_area .btns li.kentex a {
	background-color: #002C5D;
	padding: 16px 20px;
}
.preorder .btn_area .btns li.animate a {
	background-color: #fff;
	padding: 10px;
}
.preorder .btn_area .btns li.yodobashi a {
	background-color: #fff;
	padding: 10px;
}



/* フッタ */
footer.page_foot {
	position: relative;
	color: #fff;
	background-color: #000;
	text-align: center;
}
footer.page_foot ul.sns{
	padding: 16px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 30px;
}
footer.page_foot ul.sns li.instagram { width: 24px; }
footer.page_foot ul.sns li.x { width: 22px; }
footer.page_foot ul.sns li.youtube { width: 34px; }
footer.page_foot ul.sns li a { display: block; }
footer.page_foot .copy_area {
	border-top: 1px solid rgba(255, 255, 255, .6);
	padding: 10px 5px;
}
footer.page_foot .copy {
	font-size: 12px;
	line-height: 1.6;
}





@media only screen and (min-width:960px) {
	/* PC用記述 */
	a[href^="tel:"] { pointer-events: none; }
	a.fade:hover { opacity: .6; }
	
	.br4sp { display: none; }
	.br4pc { display: inline; }
	.forSP { display: none; }
	.forPC { display: block; }

	.wrapper {
		padding: 0 20px;
		max-width: 1200px;
		margin: 0 auto;
	}

	/* 言語切替ボタン */
	p.langbtn { right: 20px; }
	p.langbtn a {
		font-size: 17px;
		padding: 6px 28px 4px 16px;
	}
	p.langbtn a::after { 
		right: 11px;
		width: 10px;
		height: 10px;
	}
	p.langbtn a:hover { background-color: rgba(255, 255, 255, .8); }
	#en p.langbtn a {
		font-size: 16px;
		padding: 5px 28px 5px 16px;
	}

	/* タイトル・メイン画像 */
	.kv { background-position: center 32%; }
	.kv .main_area {
		background-position: top 48px left 12px, top 48px right 12px, bottom 8px right 12px, bottom 8px left 12px;
		background-size: 160px auto, 160px auto, 160px auto, 160px auto;
	}
	.kv .main_area .line_top,
	.kv .main_area .line_bottom {
		width: calc(100vw - 320px - 32px);
		height: 3px;
		left: calc(160px + 16px);
	}
	.kv .main_area .line_top { top: 56px; }
	.kv .main_area .line_bottom { bottom: 16px; }
	.kv .main_area .line_left,
	.kv .main_area .line_right {
		width: 3px;
		height: calc(100vh - 320px - 66px - 21px);
		top: calc(52px + 160px);
	}
	.kv .main_area .line_left { left: 16px; }
	.kv .main_area .line_right { right: 16px; }

	.kv .main_area .ttl {
		top: auto;
		bottom: 30px;
		width: 600px;
	}
	.kv .main_area .watch_1 {
		bottom: 66px;
		left: 30px;
	}
	.kv .main_area .watch_2 {
		bottom: 66px;
		right: 30px;
	}
	.kv p.copy {
		padding: 2px 12px 8px;
		font-size: 11px;
	}

	/* コンテンツ部 */
	.bg_fixed_sec .cont_area { padding: 60px 0; }

	@media only screen and (max-height:840px) {
		.ttl_area {
			color: #fff;
	text-shadow: 0px 1px 8px var(--logo_green), 1px 0px 8px var(--logo_green), 0px -1px 8px var(--logo_green), -1px 0px 8px var(--logo_green), 1px 1px 8px var(--logo_green), 1px -1px 8px var(--logo_green), -1px 1px 8px var(--logo_green), -1px -1px 8px var(--logo_green);
		}
	}

	.ttl_area .ttl_eng { font-size: 48px; }
	.ttl_area .ttl_cap {
		margin-top: 8px;
		font-size: 24px;
	}

	/* 注記 */
	.watch_about .watch_note {
		margin-top: 15px;
		text-align: right;
	}
	/* 英語版 */
	#en .watch_about .watch_note p { display: inline-block;}

	/* About Watch */
	.watch_about .about_ttl { font-size: 48px; }
	.watch_about .container {
		margin-top: 30px;
		display: flex;
		align-items: center;
		gap: 0 10px;
	}
	.watch_about .pic_area { margin-top: 0; }
	.watch_about .container .pic_area { flex: 1; }
	.watch_about .pic_area .scene_pic.s01 { left: 0; }
	.watch_about .pic_area .scene_pic.s02 { left: 50px; }
	.watch_about .pic_area .scene_pic.s03 { left: 0; }
	.watch_about .pic_area .watch { margin-right: 0; }
	.watch_about .about_panel {
		margin: 20px auto 0;
		max-width: 410px;
	}

	/* デザイン紹介 */
	.detail_list {
		margin-top: 40px;
		max-width: 720px;
	}
	.detail_list li + li { margin-top: 80px; }

	.detail_list li .detail_panel {
		margin-top: 15px;
		padding: 40px 60px;
		border: solid 3px var(--corner_beige);
		background-position: top 5px left 5px, top 5px right 5px, bottom 5px right 5px, bottom 5px left 5px;
		background-size: 72px auto, 72px auto, 72px auto, 72px auto;
		min-height: 200px;
	}
	.detail_list li .detail_panel h3 { font-size: 28px; }
	.detail_list li .detail_panel p {
		margin-top: 30px;
		font-size: 18px;
	}

	/* ゾルトラーク */
	.bg_fixed_sec.watch_detail.watch_01 .bg {
		background-image: url(../images/watch_01_bg_02.webp);
	}
	/* 花畑を出す魔法 */
	.bg_fixed_sec.watch_detail.watch_02 .bg {
		background-image: url(../images/watch_02_bg_02.webp);
	}

	/* プレオーダー */
	.preorder .cont_wrap { padding: 48px 0 40px; }
	.preorder .sec_ttl { font-size: 60px; }

	/* スペック表 */
	.preorder .spec_table {
		margin-top: 36px;
		width: 100%;
		grid-template-columns: 1fr 5fr;
	}
	.preorder .spec_table + .spec_table { grid-template-columns: 1fr 2fr 1fr 2fr; }
	.preorder .spec_table .ttl {
		justify-content: center;
		text-align: center;
	}
	.preorder .spec_table .ttl,
	.preorder .spec_table .spec {
		font-size: 15px;
		padding: 8px 20px;
	}

	/* プレオーダー */
	.preorder .watches_sec {
		margin-top: 60px;
		max-width: 640px;
	}
	.preorder .watches_list {
		margin-top: 48px;
		gap: 0 60px;
	}
	.preorder .watches_list li a { display: block; }
	.preorder .watches_list li a .pic { transition: .3s; }
	.preorder .watches_list li a:hover .pic { transform: scale(1.08); }
	.preorder .watches_list li .watch_info {
		margin-top: 10px;
		padding: 24px 8px 20px;
		font-size: 16px;
		transition: .3s;
	}
	.preorder .watches_list li a:hover .watch_info { transform: scale(1.08); }
	.preorder .watches_list li .watch_info .price span { font-size: 160%; }
	.preorder .watches_list li .watch_info .limit span { font-size: 135%; }

	.preorder .btn_area {
		margin: 24px auto 0;
		padding: 27px 30px 24px;
		max-width: 640px;
	}
	.preorder .btn_area.kentex_only { max-width: 360px; }
	.preorder .btn_area .lead { font-size: 24px; }

	.preorder .btn_area .btns {
		margin-top: 24px;
		column-gap: 20px;
	}
	.preorder .btn_area .btns li.kentex a { padding: 24px 36px; }
	.preorder .btn_area .btns li.animate a { padding: 20px; }
	.preorder .btn_area .btns li.yodobashi a { padding: 20px; }



	/* フッタ */
	footer.page_foot ul.sns{
		padding: 20px;
		justify-content: flex-end;
		column-gap: 48px;
	}
	footer.page_foot ul.sns li.instagram { width: 30px; }
	footer.page_foot ul.sns li.x { width: 26px; }
	footer.page_foot ul.sns li.youtube { width: 40px; }
	footer.page_foot .copy_area {
		padding: 90px 20px 10px;
		display: flex;
		justify-content: flex-end;
		column-gap: 12px;
	}





}