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

@import url(reset.css);

html { scroll-behavior: smooth; }
img { vertical-align: bottom; }
ul { list-style-type: none; }


:root {
  --mn_blue: #00a0ff;
  --mn_orange: #ff6400;
}


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


body {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 15px;
	line-height: 1;
}

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

@keyframes objApr {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

a { transition: .3s; }

/* Google Fonts */
/*
// <weight>: Use a value from 300 to 700
// <uniquifier>: Use a unique and descriptive class name

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

.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
*/



/* SP用記述*/
.br4pc { display: none; }
.forPC { display: none; }

/* ロゴ関連 */
.logo_area.hrzntl .mono { width: 55%; }
.logo_area.hrzntl .cross {
	width: 10%;
	margin: 0 5.6% 0 4.4%;
}
.logo_area.hrzntl .andc { width: 25%; }

/* ドロワー内 */
nav.drawer .logo_area.hrzntl { 
	width: 72vw;
	max-width: 270px;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* ハンバーガーボタン */
p.hamburger {
	width: 85px;
	height: 85px;
	position: fixed;
	z-index: 500;
	left: 0;
	top: 0;
	overflow: hidden;
}
@keyframes hmbgApr {
	0% { top: -85px; }
	100% { top: 0; }
}
p.hamburger::before {
	content: "";
	display: block;
	width: 120px;
	height: 120px;
	background-color: var(--mn_orange);
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%) rotate(45deg);
}
p.hamburger span {
	display: block;
	height: 1px;
	left: 12px;
	background-color: #fff;
	position: absolute;
	transition: all .4s ease;
}
p.hamburger span:first-child {
	top:20px;
	width: 36px
}
p.hamburger span:nth-child(2) {
	top:28px;
	width: 28px
}
p.hamburger span:nth-child(3) {
	top:36px;
	width: 20px
}

p.hamburger.close span:first-child,
p.hamburger.close span:nth-child(2),
p.hamburger.close span:nth-child(3) {
	top: 28px;
	width: 28px
}
p.hamburger.close span:first-child { transform: rotate(45deg); }
p.hamburger.close span:nth-child(2) { transform: rotate(-45deg); }
p.hamburger.close span:nth-child(3) { transform: rotate(-45deg); opacity: 0; }

/* ドロワー */
nav.drawer {
	background-color: rgba(0, 0, 0, .9);
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0;
	position: fixed;
	z-index: 400;
	padding: 60px 0;
	box-sizing: border-box;
	overflow: auto;
	transition: all .5s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
nav.drawer.open { top: 0; }
nav.drawer ul.main_nav { margin-top: 48px; }
nav.drawer ul.main_nav li { margin-top: 16px; }
nav.drawer ul.main_nav li a {
	display: block;
	color: var(--mn_orange);
	text-decoration: none;
	font-family: "Comfortaa", sans-serif;
	font-weight: 700;
	font-size: 24px;
	padding: 10px;
}
nav.drawer .order_btn_area { margin-top: 40px; }
nav.drawer .order_btn_area .cap {
	color: #fff;
	font-size: 14px;
	letter-spacing: .05em;
	padding-left: .05em;
}
nav.drawer .order_btn_area a {
	margin-top: 12px;
	display: inline-block;
	border: solid 1px #fff;
	color: #fff;
	text-decoration: none;
	font-family: "Comfortaa", sans-serif;
	font-weight: 700;
	font-size: 25px;
	padding: 9px 60px 6px;
}



/* タイトル・メイン画像 */
.logo_kv {
	min-height: 100dvh;
	transition: .3s;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.logo_kv .logo_area {
	flex: 1;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo_area .inner {
	width: 80vw;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* 言語切替ボタン */
p.langbtn {
	position: fixed;
	z-index: 500;
	right: 10px;
	top: 12px;
}
p.langbtn a {
	display: block;
	border: solid 1px var(--mn_orange);
	color: var(--mn_orange);
	background-color: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px);
	text-decoration: none;
	font-family: "Comfortaa", sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 7px 21px 4px 12px;
	position: relative;
}
p.langbtn a::before { 
	content: "";
	display: block;
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translate(0, -50%);
	width: 7px;
	height: 10px;
	background: url(../images/icon_arrow.svg) center center / contain no-repeat;
}
p.langbtn.eng a {
	font-size: 13px;
	padding: 6px 21px 4px 12px;
}


/* コンテンツ部 */
main {
	padding-top: 100dvh;
	position: relative;
}
.wrapper { padding: 0 4vw; }
.txt_orange_shadow {
	text-shadow: 0px 1px 8px var(--mn_orange), 1px 0px 8px var(--mn_orange), 0px -1px 8px var(--mn_orange), -1px 0px 8px var(--mn_orange), 1px 1px 8px var(--mn_orange), 1px -1px 8px var(--mn_orange), -1px 1px 8px var(--mn_orange), -1px -1px 8px var(--mn_orange);
}
.panel {
	margin: 0 4vw;
	padding: 24px 20px 16px;
	backdrop-filter: blur(20px);
	background-color: rgba(255, 255, 255, .5);
	border-radius: 8px;
	box-shadow: 0px 0px 5px 5px rgba(255, 102, 0, .4);
}
.panel .ttl {
	font-size: 24px;
	line-height: 1.3;
	font-weight: 500;
	text-align: center;
	color: #fff;
}
.panel .ttl.eng {
	font-family: "Comfortaa", sans-serif;
	font-size: 27px;
	font-weight: 700;
}
.panel .txt { line-height: 1.6; }
.panel .ttl + .txt { margin-top: 18px; }
.panel .txt + .txt { margin-top: 12px; }
.panel .txt .txtL {
	font-size: 21px;
	font-weight: 700;
	padding: 0 3px;
}
.panel .txt .txtB {
	font-weight: 700;
	padding: 0 3px;
}


/* marker */
.panel .txt span {
	line-height: 1.5;
	display: inline-block;
	background-repeat: repeat-x;
	background-size: 200% 36%;
	background-position: 0 .85em;
	transition: all 1.6s ease;
	background-image: linear-gradient(to left, var(--mn_orange) 50%, transparent 50%);
}
.panel .txt span.marker { background-position-x: -100%; }



/* 注記 */
#about .pic span,
#model .pic span,
#preorder .watch span,
.cont .spec_cont .pic span,
.cont .spec_cont .pic .note {
	color: #000;
	margin-top: 8px;
	display: inline-block;
	font-size: 11px;
	line-height: 1.4;
	text-indent: -1.35em;
	text-align: left;
}
#preorder .watch span.eng { text-indent: -1.35em; }
#preorder .watch span { color: #fff; }
.cont .spec_cont .pic { position: relative; }
.cont .spec_cont .pic span {
	color: #fff;
	margin-top: 0;
	text-indent: 0;
	width: 100%;
	padding: 2px 5px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .6);
}
.cont .spec_cont .pic .note {
	display: block;
	text-indent: 0;
	text-align: center;
}
.cont .spec_cont .pic span.eng {
	text-indent: -.8em;
	padding-left: calc(5px + .8em);
}


/* About Watch */
.about_bg .chara {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0 5vw;
}
.about_bg .chara .chara_base {
	max-width: 722px;
	margin: 0 auto;
}
.about_bg .chara .chara_pic2 {
	position: absolute;
	width: 100%;
	max-width: 722px;
	width: 90vw;
	left: 50%;
	bottom: 0;
	transform: translate(-53%, 0);
	opacity: 0;
}
.about_bg .chara.pic2 .chara_base { opacity: 0; }
.about_bg .chara.pic2 .chara_pic2 { opacity: 1; }
.about_bg .bg_pic {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100vh;
	width: 100%;
	background: center center / cover no-repeat;
}
.about_bg .bg_pic.bg1 { background-image: url(../images/about_bg01.jpg); }
.about_bg .bg_pic.bg2 { background-image: url(../images/about_bg02.jpg); }

#about, #model {
	padding: 20vw 0 44vw;
	min-height: 100vh;
}
#about .pic {
	padding-left: 0;
	width: 54vw;
	margin: -16px auto 0;
	position: relative;
}
#model .pic {
	width: 62vw;
	margin: 40px auto 0;
	position: relative;
}



/* スペック紹介 */
.bg_fixed .bg {
	min-height: 100vh;
	background: center center / cover no-repeat;
	position: sticky;
	top: 0;
}
.bg_fixed > .bg.bg1 { background-image: url(../images/bg_design.jpg) ; }
.bg_fixed > .bg.bg2 { background-image: url(../images/bg_spec.jpg) ; }
.bg_fixed > .wrapper {
	margin-top: -100vh;
	padding-bottom: 60px;
	position: relative;
}

/* 各種スペック */
.cont {
	margin-top: 60px;
	padding-top: 40px;
}
.sec_ttl {
	font-family: "Comfortaa", sans-serif;
	font-size: 38px;
	font-weight: 700;
	color: var(--mn_orange);
	line-height: 1.4;
	text-align: center;
	text-shadow: 0px 1px 8px #fff, 1px 0px 8px #fff, 0px -1px 8px #fff, -1px 0px 8px #fff, 1px 1px 8px #fff, 1px -1px 8px #fff, -1px 1px 8px #fff, -1px -1px 8px #fff;
	letter-spacing: .05em;
	padding-left: .05em;
}
.cont .sec_ttl + .spec_cont { margin-top: 30px; }
.cont .spec_cont + .spec_cont { margin-top: 60px; }
.cont .spec_cont .panel { margin: 15px 0 0; }

/* スペック表 */
.specinfo {
	background: url(../images/bg_specinfo.jpg) center center / cover no-repeat;
	padding: 100px 0;
}
.spec_table_area .spec_table {
	display: grid;
	grid-template-columns: 98px auto;
	row-gap: 1px;
}
.spec_table_area .spec_table + .spec_table { margin-top: 1px; }
.spec_table_area .spec_table .ttl,
.spec_table_area .spec_table .spec {
	font-size: 13px;
	padding: 4px 8px 2px;
	line-height: 1.3;
}
.spec_table_area .spec_table .ttl {
	background-color: rgba(255, 102, 0, .8);
	color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: right;
}
.spec_table_area .spec_table .spec {
	color: #000;
	background-color: rgba(255, 255, 255, .8);
}



/* プレオーダー */
#preorder { text-align: center; }
#preorder .bg {
	position: sticky;
	top: 0;
	height: 100vh;
	background: url(../images/bg_preorder.jpg) center center / cover no-repeat;
}
#preorder .wrapper {
	padding-top: 60px;
	min-height: calc(100vh - 56px);
	display: flex;
	align-items: center;
	justify-content: center;
}
#preorder .cat {
	position: absolute;
	width: 90px;
	right: 12px;
	top: 50px;
}
#preorder .inner { position: relative; }
#preorder .watch {
	padding-left: 0;
	width: 56vw;
	margin: 20px auto 0;
}
#preorder .panel { background-color: rgba(255, 255, 255, .8); }
#preorder .panel.price_bg {
	margin-top: 10px;
	display: inline-block;
	padding: 16px 36px;
  font-weight: 700;
}
#preorder .panel.price_bg .price { font-size: 15px; }
#preorder .panel.price_bg .limited {
	margin-top: 8px;
	font-size: 18px;
}
#preorder .panel.price_bg .price span,
#preorder .panel.price_bg .limited span {
	margin: 0 5px;
	color: var(--mn_orange);
}
#preorder .panel.price_bg .price span { font-size: 21px; }
#preorder .panel.price_bg .limited span { font-size: 28px; }
#preorder .dlvry { margin-top: 40px; }
#preorder .dlvry p {
	display: inline-block;
	font-size: 20px;
	color: #fff;
	font-weight: 700;
}
#preorder .panel.btn_area {
	margin: 12px auto 0;
	padding: 20px 15px;
	max-width: 480px;
}
#preorder .panel.btn_area.kentex_only { max-width: 320px; }
#preorder .panel.btn_area .lead { font-size: 18px; }
#preorder .panel.btn_area .btns {
	margin-top: 16px;
	display: flex;
	column-gap: 10px;
}
#preorder .panel.btn_area .btns li { flex: 1; }
#preorder .panel.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 .panel.btn_area .btns li.kentex a {
	background-color: #002C5D;
	padding: 16px 20px;
}
#preorder .panel.btn_area .btns li.animate 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; }


	/* 言語切替ボタン */
	p.langbtn {
		right: 20px;
		top: 20px;
	}
	p.langbtn a {
		font-size: 18px;
		padding: 8px 28px 5px 16px;
	}
	p.langbtn a::before { 
		right: 10px;
		width: 10px;
		height: 14px;
		top: 53%;
	}
	p.langbtn a:hover { background-color: rgba(255, 255, 255, .2); }
	p.langbtn.eng a {
		font-size: 16px;
		padding: 6px 28px 4px 16px;
	}


	/* タイトル・メイン画像 */
	.logo_kv {
		flex-direction: row;
	}
	.logo_kv .logo_area {
		flex: none;
		width: 27%;
	}
	.logo_kv .logo_area .inner {
		width: 240px;
		display: block;
	}
	.logo_kv .logo_area.hrzntl .mono { width: 100%; }
	.logo_kv .logo_area.hrzntl .cross {
		margin: 44px auto 40px;
		width: 32px;
	}
	.logo_area.hrzntl .andc {
		width: 112px;
		margin: 0 auto;
	}
	.logo_kv .bg.forPC {
		flex: 1;
		background: url(../images/main_pc.jpg) center center / cover no-repeat;
	}


	/* コンテンツ部 */
	.wrapper {
		padding: 0 20px;
		max-width: 1200px;
		margin: 0 auto;
	}
	.panel {
		margin: 0;
		padding: 36px 36px 32px;
	}
	.panel .ttl { font-size: 32px; }
	.panel .ttl.eng { font-size: 36px; }
	.panel .txt { font-size: 16px; }
	.panel .ttl + .txt { margin-top: 30px; }
	.panel .txt + .txt { margin-top: 18px; }
	.panel .txt .txtL { font-size: 24px; }
	
	
	
	/* 注記 */
	#about .pic span,
	#model .pic span,
	#preorder .watch span,
	.cont .spec_cont .pic span {
		margin-top: 10px;
		font-size: 12px;
	}
	#about .pic span,
	#model .pic span,
	#preorder .watch span {
		text-indent: 0;
		white-space: nowrap;
	}


	#model .pic span.eng,
	#about .pic span.eng {
		white-space: normal;
	}


	.cont .spec_cont .pic span { text-align: right; }
	#about .pic span.eng,
	#model .pic span.eng {
		text-indent: -.8em;
		white-space: wrap;
	}
	
	
	/* About Watch */
	.about_bg .chara { padding: 0; }
	.about_bg .chara .chara_base { margin: 0 0 0 50px; }
	.about_bg .chara .chara_pic2 {
		left: 40px;
		transform: translate(0, 0);
	}
	#about {
		padding: 100px 60px 30px 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	#about .panel {
		margin-top: 60px;
		width: 540px;
	}
	#about .pic {
		padding-left: 0;
		width: 320px;
		margin: 0;
	}
	#model {
		padding: 100px 30px 30px 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0 20px;
	}
	#model .pic {
		width: 380px;
		margin: 0;
		text-align: center;
	}
	#model .panel {
		margin-top: 60px;
		width: 540px;
	}


	/* ページナビ */
	.page_nav {
		position: fixed;
		left: 0;
		top: 160px;
		backdrop-filter: blur(20px);
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 400;
		transition: .3s;
		transform: translate(-100%, 0);
		padding: 30px 30px;
		border-radius: 0 6px 6px 0;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-left: none;
	}
	.page_nav.show { transform: translate(0, 0); }
	.page_nav ul li { margin-top: 24px; }
	.page_nav ul li:first-child { margin-top: 0; }
	.page_nav ul li a {
		font-family: "Comfortaa", sans-serif;
		font-weight: 700;
		text-decoration: none;
		color: #fff;
		font-size: 21px;
		letter-spacing: .05em;
	}
	.page_nav ul li a:hover { color: var(--mn_orange); }

	/* ページナビ領域 */
	.pc_nav_area { padding-left: 160px; }


	/* 各種スペック */
	.cont {
		margin-top: 40px;
		padding-top: 80px;
	}
	.sec_ttl { font-size: 48px; }
	.cont .spec_cont {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cont .spec_cont .pic { width: 49%; }
	.cont .spec_cont .panel {
		margin: 0;
		width: 49%;
	}
	.cont .spec_cont:nth-child(even) .pic { order: 1; }
	.cont .spec_cont .panel { margin: 0; }

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



	/* Pre-order */
	#preorder .wrapper {
		padding-top: 80px;
		min-height: 0;
		display: block;
	}
	#preorder .cat {
		width: 120px;
		top: 486px;
		left: calc(50% + 270px);
		z-index: 10;
	}
	#preorder .watch {
		width: 380px;
		text-align: center;
	}
	#preorder .watch a {
		display: block;
		padding: 0 30px;
		transition: .3s;
	}
	#preorder .watch a:hover { transform: scale(1.08); }

	#preorder .panel.price_bg {
		margin-top: 0;
		position: absolute;
		top: 560px;
		left: calc(50% + 150px);
	}
	#preorder .panel.price_bg .price { font-size: 16px; }
	#preorder .panel.price_bg .limited {
		margin-top: 12px;
		font-size: 21px;
	}
	#preorder .panel.price_bg .price span { font-size: 28px; }
	#preorder .panel.price_bg .limited span { font-size: 36px; }
	#preorder .dlvry p { font-size: 24px; }
	#preorder .panel.btn_area {
		margin: 20px auto 0;
		padding: 24px 30px;
		max-width: 640px;
	}
	#preorder .panel.btn_area.kentex_only { max-width: 380px; }
	#preorder .panel.btn_area .lead { font-size: 21px; }
	#preorder .panel.btn_area .btns {
		margin-top: 24px;
		column-gap: 20px;
	}
	#preorder .panel.btn_area .btns li.kentex a { padding: 24px 36px; }
	#preorder .panel.btn_area .btns li.kentex a:hover { background-color: rgba(0, 43, 93, 0.6); }
	#preorder .panel.btn_area .btns li.animate a { padding: 20px; }
	#preorder .panel.btn_area .btns li.animate a:hover { background-color: rgba(255, 255, 255, 0.6); }


	/* フッタ */
	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: 100px 20px 10px;
		display: flex;
		justify-content: flex-end;
		column-gap: 12px;
	}

}