@charset "UTF-8";
*:focus {outline:none;}
html{overflow:auto; height:100%; color:#000;}
html {font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0;font-variant:normal}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display:block}
img {vertical-align:middle;}
main {display:block;/* for IE */}
li {list-style: none;}
/*==================================================
Body_Bace
==================================================*/
html{
	scroll-behavior: smooth;
	overflow:hidden !important;
}
body {
	width: 100%;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 100%;
	background: #070b20;
	font-family: YuGothic, Yu Gothic, "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	word-wrap: break-word;
	overflow:hidden !important;
	height:100%;
}
/*------ link ------*/
a { color: #fff; text-decoration: none;}
/*------ common ------*/
sup {
	display: inline-block;
	font-size: 10px;
	margin-top: -1em;
}
@media screen and (max-width:750px) {
	sup {
		font-size: 3.5vw;
	}
}
.main p,
.modal p {
	font-family: 'Calibre-Regular';
	line-height: 160%;
}
.txt_kerning {
	font-feature-settings: "palt";
	font-style: normal;
	font-family: 'Calibre-Regular';
}
p::selection,
h2::selection,
h3::selection,
h4::selection,
span::selection,
a::selection,
dt::selection,
dd::selection,
li::selection,
td::selection {
	background: #ce0614;
	color: #fff;
}
p::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
span::-moz-selection,
a::-moz-selection,
dt::-moz-selection,
dd::-moz-selection,
li::-moz-selection,
td::-moz-selection {
	background: #ce0614;
	color: #fff;
}
#wrapper {
	width:100%;
	position:relative;
	overflow:hidden;
	background: #070b20;
	opacity:0;
	height:100%;
}
#wrapper::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_layer.png) repeat 0 0;
}
#bgwrap{
	position:fixed;
	width:100%;
	height:100%;
	z-index:1;
}
#scrollctr{
	height:100%;
	overflow: hidden;
	position:fixed;
	width:100%;
	z-index:2;
}
	@media screen and (max-width: 750px) {
		#scrollctr {
			overflow:auto;
			-webkit-overflow-scrolling : touch
		}
	}
.para {
	position:relative;
	-webkit-transition: top 0.4s ease 0s;
	-moz-transition: top 0.4s ease 0s;
	-o-transition: top 0.4s ease 0s;
	-ms-transition: top 0.4s ease 0s;
	transition: top 0.4s ease 0s;
}
.shuffletext{
	display:none;
}
/*------ font-family ------*/
.enLight {
	font-family: teko, sans-serif;
	font-weight: 300;
	font-style: normal;
}
.enRegular {
	font-family: teko, sans-serif;
	font-weight: 400;
	font-style: normal;
}
.enMedium {
	font-family: teko, sans-serif;
	font-weight: 500;
	font-style: normal;
}
.enBold {
	font-family: teko, sans-serif;
	font-weight: 700;
	font-style: normal;
}
.txt_kerning {
	font-feature-settings: "palt";
	font-style: normal;
	font-family: "游ゴシック";
}
/*------ animation ------*/
/* txt_container */
.txt_container {
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	line-height: 100%;
	width: 100%;
	box-sizing: border-box;
}
a:hover .txt_container .txt_ov {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	-webkit-animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
/* underline */
.underline {
	position: relative;
}
.underline:after {
	display: block;
	position: absolute;
	content: "";
	right: 0;
	bottom: -11px;
	width: 0;
	height: 4px;
	background: #fff;
	-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
	transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}
.underline.red:after {
	background: #df0615;
}
.underline:hover:after {
	left: 0;
	width: 100%;
}
/* txtline */
.txtline {
	display: inline-block;
	overflow: hidden;
	line-height: 100%;
}
.txtline .txtline_inr {
	display: inline-block;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.4s ease;
	transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.4s ease;
	opacity: 0;
}
.txtline.init .txtline_inr {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}
/* txtline / fade_anim */
.txtblock p,
.fade_anim {
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	-webkit-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease;
	transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease;
	opacity: 0;
}
.txtblock p.init,
.fade_anim.init {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}
/* zoom */
@media (min-width:751px) { /* for PC */
	.zoom .zoom_img {
		overflow: hidden;
	}
	.zoom .zoom_img img {
		transition: transform 1.5s ease-in-out;
	}
	.zoom .zoom_hover:hover .zoom_img img {
		-webkit-transform: scale(1.05,1.05);
		-moz-transform: scale(1.05,1.05);
		-ms-transform: scale(1.05,1.05);
		transform: scale(1.05,1.05);
	}
}
/*==================================================
@keyframes
==================================================*/
/* spin */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* spin2 */
@-webkit-keyframes spin2 {
	0% {
		-webkit-transform: rotate(-30deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}
@keyframes spin2 {
	0% {
		transform: rotate(-30deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
/* up */
@-webkit-keyframes up {
	0% {
		-webkit-transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%);
		transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%)
	}
	30% {
		-webkit-transform: matrix(1, -0.15, 0.15, 1, 0, 0) translate(0%, -130%);
		transform: matrix(1, -0.15, 0.15, 1, 0, 0) translate(0%, -130%)
	}
	30.1% {
		-webkit-transform: matrix(1, 0.15, 0.15, 1, 0, 0) translate(0%, 100%);
		transform: matrix(1, 0.15, 0.15, 1, 0, 0) translate(0%, 100%)
	}
	100% {
		-webkit-transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%);
		transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%)
	}
}
@keyframes up {
	0% {
		-webkit-transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%);
		transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%)
	}
	30% {
		-webkit-transform: matrix(1, -0.15, 0.15, 1, 0, 0) translate(0%, -130%);
		transform: matrix(1, -0.15, 0.15, 1, 0, 0) translate(0%, -130%)
	}
	30.1% {
		-webkit-transform: matrix(1, 0.15, 0.15, 1, 0, 0) translate(0%, 100%);
		transform: matrix(1, 0.15, 0.15, 1, 0, 0) translate(0%, 100%)
	}
	100% {
		-webkit-transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%);
		transform: matrix(1, 0, 0, 1, 0, 0) translate(0%, 0%)
	}
}
/* pinAnim */
@-webkit-keyframes pinAnim {
	0% {
		opacity: .5;
		-webkit-transform: translate(-50%,22%) scale(1.5, 1.5);
		transform: translate(-50%,22%) scale(1.5, 1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(-50%,22%) scale(1.8, 1.8);
		transform: translate(-50%,22%) scale(1.8, 1.8);
	}
}
@keyframes pinAnim {
	0% {
		opacity: .5;
		-webkit-transform: translate(-50%,22%) scale(1.5, 1.5);
		transform: translate(-50%,22%) scale(1.5, 1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(-50%,22%) scale(1.8, 1.8);
		transform: translate(-50%,22%) scale(1.8, 1.8);
	}
}
/* notpinAnim */
@-webkit-keyframes notpinAnim {
	0% {
		opacity: 0;
		-webkit-transform: translate(-50%,22%) scale(1.5, 1.5);
		transform: translate(-50%,22%) scale(1.5, 1.5);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%,22%) scale(1.8, 1.8);
		transform: translate(-50%,22%) scale(1.8, 1.8);
	}
}
@keyframes notpinAnim {
	0% {
		opacity: 0;
		-webkit-transform: translate(-50%,22%) scale(1.5, 1.5);
		transform: translate(-50%,22%) scale(1.5, 1.5);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%,22%) scale(1.8, 1.8);
		transform: translate(-50%,22%) scale(1.8, 1.8);
	}
}
/*==================================================
landscape
==================================================*/
#landscape {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #070b20;
	overflow: hidden;
	display: none;
}
#landscape.is-active {
	display: block;
}
#landscape .landscape_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
#landscape .landscape_inner img {
	width: 5.4%;
}
#landscape .landscape_inner p {
	color: #fff;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 1.35vw;
	letter-spacing: 0.05em;
	padding-top: 1.55%;
}
/*==================================================
loader
==================================================*/
#loader {
	display: block;
	position: fixed;
	background: #070b20;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
#loader .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 299px;
	padding-top: 298px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.6s ease;
}
#loader.init .loader {
	opacity: 1;
}
#loader .loader .txt_wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#loader .loader p {
	color: #fff;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 90%;
	text-align: center;
}
#loader .loader .shuffle {
	font-size: 13px;
	padding-top: 15px;
}
#loader .loader .bg_ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 1;
	transform: none;
	height: auto;
}
#loader .loader .bg_ring img {
	width: 100%;
	-webkit-animation: spin 10s linear infinite;
	animation: spin 10s linear infinite;
}
#loader .shuffletext{
	display:none;
}
#loader .shuffletext.show{
	display:block;
}
	@media screen and (max-width:750px) {
		#loader .loader {
			width: 46.7%;
			padding-top: 46.56%;
		}
		#loader .loader p {
			font-size: 5.6vw;
		}
		#loader .loader .shuffle {
			font-size: 3vw;
			padding-top: 5%;
		}
	}
/*=================================================
#header
==================================================*/
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 6999;
	opacity:0;
}
#header.init {
	opacity:1;
	-webkit-transition: opacity 0.6s ease 1.6s;
	-moz-transition: opacity 0.6s ease 1.6s;
	-o-transition: opacity 0.6s ease 1.6s;
	-ms-transition: opacity 0.6s ease 1.6s;
	transition: opacity 0.6s ease 1.6s;
}
#header .header {
	position: absolute;
	width: 100%;
	padding: 22px 0 0;
	height: 100%;
	box-sizing: border-box;
}
#header .header #header_bg0 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_header.png) repeat-x 0 100%;
	opacity: 1;
	-webkit-transition: opacity 0.3s ease 0s;
	-moz-transition: opacity 0.3s ease 0s;
	-o-transition: opacity 0.3s ease 0s;
	-ms-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}
#header .header #header_bg1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_header_fixed.png) repeat-x 0 100%;
	opacity:1;
	-webkit-transition: opacity 0.3s ease 0s;
	-moz-transition: opacity 0.3s ease 0s;
	-o-transition: opacity 0.3s ease 0s;
	-ms-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}
#header .header.header_fixed #header_bg0 {
	opacity: 0;
}
#header .header.header_fixed #header_bg1 {
	opacity: 1;
}
#header ul {
	position: relative;
}
#header .menu {
	display: block;
	position: absolute;
	top: 50%;
	left: 5%;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
#header .menu .menu_inner {
	display: flex;
	align-items: center;
}
#header .menu p {
	font-size: 20px;
	font-family: teko, sans-serif;
	font-weight: 300;
}
#header .logo {
	text-align: center;
}
#header .map {
	position: absolute;
	top: 4px;
	right: 5%;
	margin-right: 147px;
}
#header .map a {
	position: relative;
	display: block;
	padding: 29px 0 0;
	font-size: 14px;
	font-family: teko, sans-serif;
	font-weight: 300;
}
#header .map a:before {
	display: block;
	position: absolute;
	top: -5px;
	left: 50%;
	width: 52px;
	height: 28px;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_worldmap_wt.svg) no-repeat 0 0 / contain;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#header .logo_citizen {
	position: absolute;
	top: 3px;
	right: 5%;
}
#header .logo img {
	width: 336px;
	height: 45px;
}
#header .logo_citizen img {
	width: 129px;
	height: 39px;
}
	@media (min-width:751px) {
		#header .map a {
			transition: opacity 0.3s ease;
		}
		#header .map a:hover {
			opacity: 0.7;
		}
	}
	@media screen and (max-width:1000px) {
		#header .menu p {
			display: none;
		}
		#header .map {
			display: none;
		}
	}
	@media screen and (max-width:750px) {
		#header {
			height: auto;
			padding: 23% 0 0;
		}
		#header .header {
			padding: 4% 0 0;
		}
		#header .header #header_bg0,
		#header .header #header_bg1 {
			opacity: 0;
		}
		#header .menu {
			display: block;
		}
		#header .logo {
			padding-left: 0;
			text-align: center;
		}
		#header .logo img {
			width: 52.5%;
			height: auto;
		}
		#header .logo_citizen {
			top: 50%;
			right: 3.125%;
			width: 15.6%;
			-webkit-transform: translate(0,-50%);
			-ms-transform: translate(0,-50%);
			transform: translate(0,-50%);
		}
		#header .logo_citizen img {
			width: 100%;
			height: auto;
		}
		.menu_open #header {
			padding: 13% 0 0;
		}
	}
/* .header_menu */
#header .header_menu {
	background: none !important;
	height: auto;
	top: -1000px;
	opacity: 0;
	-webkit-transition: top 0.05s ease 1.0s,opacity 0.5s ease 0.5s;
	-moz-transition: top 0.05s ease 1.0s,opacity 0.5s ease 0.5s;
	-o-transition: top 0.05s ease 1.0s,opacity 0.5s ease 0.5s;
	-ms-transition: top 0.05s ease 1.0s,opacity 0.5s ease 0.5s;
	transition: top 0.05s ease 1.0s,opacity 0.5s ease 0.5s;
	display:none !important;
}
body.openmenu #header .header_menu {
	top: 0px;
	opacity: 1;
	-webkit-transition: top 0.05s ease 0s,opacity 0.5s ease 0.05s;
	-moz-transition: top 0.05s ease 0s,opacity 0.5s ease 0.05s;
	-o-transition: top 0.05s ease 0s,opacity 0.5s ease 0.05s;
	-ms-transition: top 0.05s ease 0s,opacity 0.5s ease 0.05s;
	transition: top 0.05s ease 0s,opacity 0.5s ease 0.05s;
}
#header .header_nomal {
	opacity: 1;
	top: 0px;
	-webkit-transition: top 0.05s ease 0s,opacity 0.5s ease 0.55s;
	-moz-transition: top 0.05s ease 0s,opacity 0.5s ease 0.55s;
	-o-transition: top 0.05s ease 0s,opacity 0.5s ease 0.55s;
	-ms-transition: top 0.05s ease 0s,opacity 0.5s ease 0.55s;
	transition: top 0.05s ease 0s,opacity 0.5s ease 0.55s;
}
/* menu
------------------------------------------*/
.btn_line {
	position: relative;
	width: 52px;
	height: 52px;
	cursor: pointer;
}
.btn_line::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_close.png) no-repeat 50% 50% / contain;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease;
}
.btn_line .btnline_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 37px;
	height: 37px;
	overflow: hidden;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.btn_line .line_bar {
	display: block;
	position: absolute;
	width: 50px;
	height: 2px;
	background: #FFF;
	transition: top 0.3s;
	left: -6px;
	z-index: 10;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
}
.menu_open .btn_line::before,
.btn_close .btn_line::before {
	opacity: 1;
}
.menu_open .btn_line .line_bar,
.btn_close .btn_line .line_bar {
	background: #FFF;
	transition: top 0.3s, transform 0.6s ease;
	width: 12px;
}
.menu_open .btn_line .line_bar01,
.btn_close .btn_line .line_bar01 {
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
	top: 18px;
	left: 12px;
}
.menu_open .btn_line .line_bar02,
.btn_close .btn_line .line_bar02 {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 18px;
	left: 12px;
}
.menu_open .btn_line .txt_container,
.menu_open .btn_line .txt_ov,
.btn_close .btn_line .txt_container,
.btn_close .btn_line .txt_ov {
	height: 100%;
}
.menu_open .btn_line:hover .line_bar,
.btn_close .btn_line:hover .line_bar {
	-webkit-animation: none;
	animation: none
}
.btn_line.hover:hover .close .txt_container .txt_ov,
.btn_close .btn_line:hover .txt_container .txt_ov {
	-webkit-animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
/* top */
.btn_line .txt {
	display: inline-block;
	font-family: teko, sans-serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: 0.05em;
	padding-top: 10px;
	transition: opacity 0.3s ease;
}
.btn_line .txt::before {
	display: block;
	position: absolute;
	content: "";
	bottom: -11px;
	right: 0;
	left: 2%;
	width: 96%;
	height: 4px;
	background: #fff;
	-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn_line:hover .txt::before {
	left: auto;
	width: 0;
}
.btn_line .txt:hover:after {
	left: 2%;
	width: 96%;
}
.btn_line:hover .txt .txt_container .txt_ov {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	-webkit-animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
html:not(.menu_open) .btn_line .btnline_inner.close {
	width: 0;
	height: 0;
	opacity: 0;
}
.menu_open .btn_line .txt {
	opacity: 0;
}
	@media screen and (max-width:750px) {
		.btn_line .txt::before {
			width: 96%!important;
		}
	}
	@media screen and (max-width:480px) {
		.btn_line {
			width: 36px;
			height: 36px;
		}
		.btn_line .line_bar {
			height: 2px;
		}
		.btn_line .btnline_inner {
			width: 30px;
			height: 30px;
		}
		.btn_line .line_bar01 {
			top: 0;
		}
		.btn_line .line_bar02 {
			top: 24px;
		}
		.menu_open .btn_line .line_bar,
		.btn_close .btn_line .line_bar {
			width: 8px;
		}
		.menu_open .btn_line .line_bar01,
		.menu_open .btn_line .line_bar02,
		.btn_close .btn_line .line_bar01,
		.btn_close .btn_line .line_bar02 {
			top: 14px;
			left: 11px;
		}
		.btn_line .txt {
			font-size: 20px;
			padding-top: 6px;
		}
	}
/*=================================================
#bgslidearea
==================================================*/
#bgslidearea{
	position:absolute;
	top:0px;
	left:0px;
	overflow:hidden;
	width:100%;
	z-index:3;
}
#storiesbgslider{
	position:absolute;
	overflow:hidden;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	opacity: 0;
	background-image:url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_stories.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: opacity 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s;
	transition: opacity 1s ease 0.2s;
}
	@media screen and (max-width: 750px) {
		#storiesbgslider{
			background-image:url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_stories_sp.jpg);
		}
	}
#storiesbgslider.init,
#stories.init #storiesbgslider{
	opacity: 1;
}
#storiesbgslider canvas{
	width:100% !important;
	height:100% !important;
	position:absolute;
	top:0px;
	left:0px;
}
#introductionsbgslider{
	overflow:hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height:100%;
    z-index:1;
    opacity: 0;
    background-image:url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_introduction.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity 1s ease 0.2s;
    -moz-transition: opacity 1s ease 0.2s;
    -o-transition: opacity 1s ease 0.2s;
    -ms-transition: opacity 1s ease 0.2s;
    transition: opacity 1s ease 0.2s;
}
	@media screen and (max-width: 750px) {
		#introductionsbgslider{
			background-image:url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_introduction_sp.jpg);
		}
	}
#introductionsbgslider.init {
	opacity: 1;
}
#introductionsbgslider canvas{
	width:100% !important;
	height:100% !important;
	position:absolute;
	top:0px;
	left:0px;
}
#otherstoriesbgslider {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	height:100%;
	overflow:hidden;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 0;
	background-image:url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_otherstories.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: opacity 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s;
	transition: opacity 1s ease 0.2s;
}
	@media screen and (max-width: 750px) {
		#otherstoriesbgslider{
			background-image:url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_otherstories_sp.jpg);
		}
	}
#otherstoriesbgslider.init,
#otherstories.init #otherstoriesbgslider {
		opacity: 1;
}
#otherstoriesbgslider canvas{
	width:100% !important;
	height:100% !important;
	position:absolute;
	top:0px;
	left:0px;
}
/*=================================================
#bgringwrap
==================================================*/
#bgringwrap{
	position:fixed;
	width:100%;
	height:100%;
	z-index:4;
}
#bg_ringPC,
#bg_ringSP {
	transform: translate(-50%,-50%);
	transition: opacity 0.6s ease;
	z-index: 2;
}
#bg_ringPC.init img,
#bg_ringSP.init img {
	-webkit-animation: spin2 2s ease-out forwards;
	animation: spin2 2s ease-out forwards;
}
	@media screen and (max-width: 1000px) {
		#bg_ringPC {
			display: none!important;
		}
	}
/*=================================================
#main
==================================================*/
/* common
------------------------------------------*/
#main {
	position:relative;
	z-index:5;
}
.main {
	overflow: hidden;
}
/* btn_base
------------------------------------------*/
.btn_base {
	position: relative;
	display: block;
	width: 210px;
	height: 80px;
	line-height: 80px;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 22px;
	border: 3px solid #fff;
	box-sizing: border-box;
}
.btn_base .txt_container {
	padding: 0 20px 5px 30px;
}
.btn_base .txt_container .arrow,
.btn_base .txt_container .link {
	position: relative;
	display: inline-block;
	width: 100%;
}
.btn_base .txt_container .arrow:before {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 8px;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_arrow_wt.svg) no-repeat 50% 50% / contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.btn_base .txt_container .link:before {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 8px;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_link.svg) no-repeat 50% 50% / contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.btn_base .txt_container .txt_ov span {
	display: inline-block;
	padding-top: 0.25em;
}
	@media screen and (max-width: 750px) {
		.btn_base {
			position: relative;
			display: block;
			max-width: 210px;
			width: 37%;
			font-size: 3.43vw;
			padding: 4.5% 0;
			height: auto;
			line-height: 100%;
			border: 2px solid #fff;
		}
		.btn_base .txt_container {
			padding: 0 9% 1% 14%;
		}
	}
/* sns_share
------------------------------------------*/
.sns_share dl {
	display: flex;
	align-items: center;
}
.sns_share dt {
	position: relative;
	margin-right: 15px;
	font-size: 20px;
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
}
.sns_share dt:before {
	display: block;
	position: absolute;
	bottom: -14px;
	left: 0;
	width: 0;
	height: 4px;
	content: "";
	background: #fff;
}
.sns_share dt.underline:hover:after {
	left: auto;
	width: 0;
}
.sns_share dt.underline.on:after {
	left: 0;
	width: 100%;
}
.sns_share dt span {
	display: inline-block;
	padding-top: 0.25em;
}
.sns_share ul {
	display: flex;
	align-items: center;
}
.sns_share li {
	margin: 0 15px;
}
.sns_share li:last-child {
	margin-right: 0;
}
.sns_share li:nth-child(1) img {
	width: 26px;
}
.sns_share li:nth-child(2) img {
	width: 26px;
}
.sns_share li:nth-child(3) img {
	width: 27px;
}
/* bg_ring
------------------------------------------*/
.bg_ring {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 719px;
	height: 719px;
	content: "";
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.bg_ring img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.bg_ring.init {
	opacity: 1;
	-webkit-transition: opacity 0.6s ease;
	-moz-transition: opacity 0.6s ease;
	-o-transition: opacity 0.6s ease;
	-ms-transition: opacity 0.6s ease;
	transition: opacity 0.6s ease;
}
	@media (min-width: 1001px) {
		.bg_ring.sp {
			display: none;
		}
	}
	@media screen and (max-width: 750px) {
		.bg_ring {
			width: 89.8%;
			height: auto;
			padding: 89.8% 0 0;
		}
	}
/* bottomPager
------------------------------------------*/
.bottomPager {
	position: absolute;
	bottom: 80px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	z-index: 30;
}
.bottomPager ul {
	display: flex;
	align-items: flex-end;
}
.bottomPager li {
	display: block;
	width: 5px;
	height: 16px;
	margin: 0 4px;
	content: "";
	background: #df0615;
}
.bottomPager li.current {
	height: 28px;
}
	@media screen and (max-width:750px) {
		.bottomPager li {
			display: block;
			width: 3px;
			height: 13px;
			margin: 0 4px;
			content: "";
			background: #df0615;
		}
		.bottomPager li.current {
			height: 23px;
		}
	}
/*=================================================
#top
==================================================*/
#top {
	position: relative;
	z-index: 10;
	overflow:hidden;
}
#top::before {
	position: absolute;
	content: "";
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 15%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_header.png) repeat-x 0 0;
	transform: rotate(180deg);
	z-index: 3;
	opacity: 0;
	transition: opacity 0.6s ease 1.6s;
}
#top.init::before {
	opacity: 1;
}
#top.init.hide::before{
	transition: opacity 0.7s ease 0s;
	opacity: 0;
}
#top .cont {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
	z-index: 10;
}
#top h1 {
	width: 445px;
	margin: 0 auto;
	padding: 0 0 20px;
}
#top h1 img {
	width: 100%;
}
#top .sub_ttl {
	font-size: 80px;
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 100%;
	letter-spacing: 0.01em;
	padding-bottom: 5px;
}
#top .img_logo img {
	width: 225px;
	height: auto;
}
	@media screen and (max-width:1480px) {
		#top h1 {
			width: 30%;
		}
		#top .sub_ttl {
			font-size: 5.4vw;
		}
	}
	@media screen and (max-width:1000px) {
		#top h1 {
			width: 36.2%;
			padding: 0 0 2%;
		}
		#top .sub_ttl {
			font-size: 6.6vw;
			padding-bottom: 1%;
		}
		#top .img_logo {
			width: 22.5%;
			margin: 0 auto;
		}
		#top .img_logo img {
			width: 100%;
			vertical-align: top;
		}
	}
	@media screen and (max-width:750px) {
		#top::before {
			content: none;
		}
		#top .cont {
			position: absolute;
			top: 44%;
		}
		#top h1 {
			width: 65%;
			padding: 0 0 4%;
		}
		#top .sub_ttl {
			font-size: 10.1vw;
		}
		#top .img_logo {
			width: 43.9%;
		}
	}
/* box_ring */
#top .box_ring {
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 3;
}
#top .box_ring .txt {
	position: absolute;
	top: 50%;
	left: 8%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	max-width: 135px;
	width: 50%;
}
#top .box_ring .txt01 {
	margin: 0 0 5px;
	font-size: 36px;
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 90%;
	letter-spacing: 0.01em;
}
#top .box_ring .txt01 .shuffletext{
	display:none;
}
#top .box_ring .txt01 .shuffletext.show{
	display:block;
}
#top .box_ring .txt02 {
	font-size: 18px;
	font-family: teko, sans-serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0.05em;
}
#top .box_ring .txt02 .shuffletext{
	display:none;
}
#top .box_ring .txt02 .shuffletext.show{
	display:block;
}
#top .box_ring .img_ring {
	width: 380px;
	-webkit-transform: translate(-40%, 0);
   transform: translate(-40%, 0);
}
#top .box_ring .img_ring img {
	width: 100%;
}
	@media screen and (max-width:1480px) {
		#top .box_ring {
			width: 25%;
		}
		#top .box_ring .img_ring {
			max-width: 380px;
			width: 115%;
		}
	}
	@media screen and (max-width:1000px) {
		#top .box_ring {
			width: 23%;
		}
		#top .box_ring .txt {
			width: 60%;
		}
		#top .box_ring .img_ring {
			width: 160%;
		}
		#top .box_ring .txt01 {
			margin: 0 0 5px;
			font-size: 3.6vw;
		}
		#top .box_ring .txt02 {
			font-size: 1.8vw;
		}
	}
	@media screen and (max-width:750px) {
		#top {
			overflow: hidden;
		}
		#top .box_ring {
			top: auto;
			bottom: 0;
			left: 50%;
			width: 75%;
			padding: 33% 0 0;
			-webkit-transform: translate(-50%, 0);
		   transform: translate(-50%, 0);
		}
		#top .box_ring .img_ring {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
			max-width: 100%;
		}
		#top .box_ring .txt {
			position: absolute;
			left: 50%;
			text-align: center;
			top:auto;
			bottom:18%;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
			max-width: 100%;
		}
		#top .box_ring .txt01 {
			margin: 0 0 5%;
			font-size: 5.6vw;
		}
		#top .box_ring .txt02 {
			font-size: 3.12vw;
		}
		#top .box_ring .txt02 br {
			display: none;
		}
		#top .box_ring .txt02 .shuffletext + .shuffletext {
			padding-left: 0.5em;
		}
		#top .box_ring .txt02 .shuffletext.show{
			display:inline-block;
		}
	}
/* btn_explore */
#top .btn_explore {
	position: absolute;
	top: 50%;
	right: 80px;
	width: 60px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 1;
	z-index: 11;
}
#top .btn_explore.init {
	opacity:1;
	-webkit-transition: opacity 0.4s ease 0s;
	-moz-transition: opacity 0.4s ease 0s;
	-o-transition: opacity 0.4s ease 0s;
	-ms-transition: opacity 0.4s ease 0s;
	transition: opacity 0.4s ease 0s;
}
#top .btn_explore a {
	display: block;
	color: #fff;
}
#top .btn_explore .txt {
	position: absolute;
	top: -25px;
	left: 0;
	font-size: 20px;
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
}
#top .btn_explore .bar_wrap {
	position: absolute;
	width: 60px;
	height: 4px;
	top: 2px;
	left:0px;
	margin: 0 auto;
	overflow: hidden;
}
#top .btn_explore .bar {
	top:0px;
	position: absolute;
	width: 60px;
	height: 4px;
	margin: 0 auto;
	background-color: #ffffff;
	display:block;
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
	-webkit-animation: scroll-line-move 2s infinite;
	animation: scroll-line-move 2s infinite;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
#top .btn_explore a:hover .bar {
	opacity: 0;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-animation: scroll-line-move2 2s infinite;
	animation: scroll-line-move2 2s infinite;
}
@-webkit-keyframes scroll-line-move {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	to {
		-webkit-transform: translate3d(0, 0, 100%);
		transform: translate3d(0, 0, 100%)
	}
}
@keyframes scroll-line-move {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
	to {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}
}
	@media screen and (max-width:1000px) {
		#top .btn_explore {
			right: 30px;
		}
	}
	@media screen and (max-width:750px) {
		#top .btn_explore {
			top: auto;
			right: auto;
			bottom: 32%;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
		}
	}
/* sns_share */
#top .sns_share {
	position: absolute;
	bottom: 74px;
	right: 80px;
	z-index: 11;
}
	@media screen and (max-width:1000px) {
		#top .sns_share {
			right: 30px;
		}
	}
	@media screen and (max-width:750px) {
		#top .sns_share {
			display: none;
		}
	}
/* kv */
#top .kv {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	opacity: 1;
	overflow:hidden;
	z-index:1;
	-webkit-transition: opacity 0.7s ease 0s;
	-moz-transition: opacity 0.7s ease 0s;
	-o-transition: opacity 0.7s ease 0s;
	-ms-transition: opacity 0.7s ease 0s;
	transition: opacity 0.7s ease 0s;
}
#top_inner{
	position:absolute;
	z-index:5;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	opacity:1;
	-webkit-transition: opacity 0.6s ease 0s;
	-moz-transition: opacity 0.6s ease 0s;
	-o-transition: opacity 0.6s ease 0s;
	-ms-transition: opacity 0.6s ease 0s;
	transition: opacity 0.6s ease 0s;
}
#top.hide .kv{
	opacity:0;
}
#top.hide #top_inner{
	opacity:0;
}
#local_nav_pc{
	-webkit-transition: opacity 0.6s ease 0s;
	-moz-transition: opacity 0.6s ease 0s;
	-o-transition: opacity 0.6s ease 0s;
	-ms-transition: opacity 0.6s ease 0s;
	transition: opacity 0.6s ease 0s;
	opacity:0;
}
#local_nav_pc.init{
	opacity:1;
}
#local_nav_pc.init.hide{
	opacity:0;
}
	@media (max-width:1100px) {
		#top .subnav #subnavslider {
			margin-left: 50px;
			overflow: visible;
		}
		#top .take_action3 {
			padding-right: 50px;
		}
		#top .subnav #subnavslider .swiper-wrapper .slide-take_action3 {
			width: 290px;
		}
	}
#kvliquidslider{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
	opacity:0;
	overflow:hidden;
}
#kvliquidslider.init{
	opacity:1;
	-webkit-transition: opacity 1.5s ease 0s;
	-moz-transition: opacity 1.5s ease 0s;
	-o-transition: opacity 1.5s ease 0s;
	-ms-transition: opacity 1.5s ease 0s;
	transition: opacity 1.5s ease 0s;
}
#kvliquidslider canvas{
	position:absolute;
	width:100% !important;
	height:100% !important;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) !important;
	transform: translate(-50%, -50%) !important;
}
main#main .main #top .cont h1 img{
	position:relative;
	opacity:0;
	top:50px;
	-webkit-transition: top 0.6s ease 0.6s,opacity 0.6s ease 0.6s;
	-moz-transition: top 0.6s ease 0.6s,opacity 0.6s ease 0.6s;
	-o-transition: top 0.6s ease 0.6s,opacity 0.6s ease 0.6s;
	-ms-transition: top 0.6s ease 0.6s,opacity 0.6s ease 0.6s;
	transition: top 0.6s ease 0.6s,opacity 0.6s ease 0.6s;
}
main#main .main #top.init .cont h1 img{
	opacity:1;
	top:0px;
}
main#main .main #top .cont p.sub_ttl{
	position:relative;
	opacity:0;
	top:50px;
	-webkit-transition: top 0.6s ease 0.8s,opacity 0.6s ease 0.8s;
	-moz-transition: top 0.6s ease 0.8s,opacity 0.6s ease 0.8s;
	-o-transition: top 0.6s ease 0.8s,opacity 0.6s ease 0.8s;
	-ms-transition: top 0.6s ease 0.8s,opacity 0.6s ease 0.8s;
	transition: top 0.6s ease 0.8s,opacity 0.6s ease 0.8s;
}
main#main .main #top.init .cont p.sub_ttl{
	opacity:1;
	top:0px;
}
main#main .main #top .cont p.img_logo img{
	position:relative;
	opacity:0;
	top:50px;
	-webkit-transition: top 0.6s ease 1.0s,opacity 0.6s ease 1.0s;
	-moz-transition: top 0.6s ease 1.0s,opacity 0.6s ease 1.0s;
	-o-transition: top 0.6s ease 1.0s,opacity 0.6s ease 1.0s;
	-ms-transition: top 0.6s ease 1.0s,opacity 0.6s ease 1.0s;
	transition: top 0.6s ease 1.0s,opacity 0.6s ease 1.0s;
}
main#main .main #top.init .cont p.img_logo img{
	opacity:1;
	top:0px;
}
#top .box_ring .img_ring {
	opacity:0;
}
#top.init .box_ring .img_ring{
    opacity:1;
    -webkit-transition: opacity 0.6s ease 0.8s;
    -moz-transition: opacity 0.6s ease 0.8s;
    -o-transition: opacity 0.6s ease 0.8s;
    -ms-transition: opacity 0.6s ease 0.8s;
    transition: opacity 0.6s ease 0.8s;
}
#top .box_ring .img_ring img {
	opacity:1;
}
#main #top .btn_explore a,
#main #top .sns_share dl{
	position:relative;
	top:50px;
	opacity:0;
	-webkit-transition: top 0.6s ease 1.2s,opacity 0.6s ease 1.2s;
	-moz-transition: top 0.6s ease 1.2s,opacity 0.6s ease 1.2s;
	-o-transition: top 0.6s ease 1.2s,opacity 0.6s ease 1.2s;
	-ms-transition: top 0.6s ease 1.2s,opacity 0.6s ease 1.2s;
	transition: top 0.6s ease 1.2s,opacity 0.6s ease 1.2s;
}
#main #top.init .btn_explore a,
#main #top.init .sns_share dl{
	top:0px;
	opacity:1;
}
/*=================================================
 local_nav
==================================================*/
.local_nav,
.local_nav p {
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
}
.local_nav img {
	width: 100%;
}
.local_nav ul {
	display: flex;
}
.local_nav ul li a {
	display: block;
}
.local_nav ul li figure {
	padding-bottom: 10px;
}
/* local_nav_pc */
#local_nav_pc {
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 39%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	padding-bottom: 74px;
	min-width: 370px;
	z-index: 11;
}
#local_nav_pc ul li {
	font-size: 1.35vw;
	width: 31.25%;
	margin: 0 1%;
}
/* local_nav_sp */
#local_nav_sp {
	position: relative;
	padding: 10% 0 8.6%;
	background: #09071c;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	-webkit-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease;
	transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease;
	opacity: 0;
}
#local_nav_sp.init {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}
#local_nav_sp .ttl_wrap {
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 76.25%;
	margin: 0 auto;
}
#local_nav_sp .ttl_wrap p,
#local_nav_sp .ttl_wrap figure {
	width: 50%;
}
#local_nav_sp .ttl_wrap p {
	font-size: 9vw;
	line-height: 90%;
	letter-spacing: 0.01em;
}
#local_nav_sp .ttl_wrap p span {
	display: block;
	font-size: 6.25vw;
}
#local_nav_sp ul {
	width: 76.25%;
	margin: 0 auto;
	padding-top: 7.2%;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
#local_nav_sp .ttl_wrap figure img {
	width: 100%;
}
#local_nav_sp ul li {
	font-size: 3.75vw;
	margin: 0;
}
	@media (min-width:751px) { /* for PC */
		#local_nav_sp {
			display: none;
		}
	}
	@media screen and (max-width:750px) {
		#local_nav_pc {
			display: none;
		}
	}
/*=================================================
 contents_area
==================================================*/
#contents_area {
	position:relative;
	overflow:hidden;
}
.bgline1 {
	position: absolute;
	top: 0px;
	left: 16.6%;
	width: 1px;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.04;
}
.bgline2 {
	position: absolute;
	top: 0px;
	left: 33.3%;
	width: 1px;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.04;
}
.bgline3 {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 1px;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.04;
}
.bgline4 {
	position: absolute;
	top: 0px;
	left: 66.6%;
	width: 1px;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.04;
}
.bgline5 {
	position: absolute;
	top: 0px;
	left: 83.33%;
	width: 1px;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.04;
}
	@media screen and (max-width: 750px) {
		.bgline1,
		.bgline5 {
			display: none !important;
		}
		.bgline2 {
			left: 11.7%;
		}
		.bgline4 {
			left: 88.3%;
		}
	}
/*=================================================
#contents_area common
==================================================*/
#contents_area .inner {
	position: relative;
	max-width: 1320px;
	width: 90%;
	margin: 0 auto;
	z-index: 10;
}
	@media screen and (max-width: 1000px) {
		#contents_area .inner {
			width: 76.5%;
			margin: 0 auto;
		}
	}
/* ttl */
#contents_area h2 {
	position: relative;
	font-size: 136px;
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.01em;
}
#contents_area h2:before {
	display: block;
	position: absolute;
	top: -50px;
	left: 0;
	width: 100px;
	height: 4px;
	content: "";
	background: #df0615;
}
#contents_area h2 .txtline {
	line-height: 83%;
}
#contents_area h3 {
	position: relative;
	font-size: 80px;
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.01em;
}
#contents_area h3:before {
	display: block;
	position: absolute;
	top: -40px;
	left: 0;
	width: 100px;
	height: 4px;
	content: "";
	background: #df0615;
}
#contents_area h3 .txtline {
	line-height: 85%;
}
	@media screen and (max-width: 1400px) {
		#contents_area h2 {
			font-size: 9.7vw;
		}
		#contents_area h3 {
			font-size: 5.7vw;
		}
	}
	@media screen and (max-width: 1000px) {
		#contents_area h2 {
			padding: 7% 0 0;
			font-size: 97px;
		}
		#contents_area h2:before {
			top: 0;
		}
		#contents_area h3 {
			padding: 5% 0 0;
			font-size: 70px;
		}
		#contents_area h3:before {
			top: 0;
		}
	}
	@media screen and (max-width: 750px) {
		#contents_area h2 {
			padding: 10% 0 0;
			font-size: 18vw;
		}
		#contents_area h2:before {
			width: 20%;
		}
		#contents_area h3 {
			padding: 7.5% 0 0;
			font-size: 14vw;
		}
		#contents_area h3:before {
			width: 20%;
		}
	}
/*=================================================
 #mainTop
==================================================*/
#mainTop {
	position: relative;
	padding: 270px 0 170px;
}
#mainTop .inner {
	max-width: 100%;
}
#mainTop .ttl_wrap h2 {
	margin: 0 0 35px;
}
#mainTop .ttl_wrap h2::before {
	opacity: 0;
	transition: opacity 0.6s ease;
}
#mainTop .ttl_wrap h2.init::before {
	opacity: 1;
}
#mainTop .ttl_wrap .img_map,
#mainTop .img {
	opacity: 0;
	transition: opacity 0.6s ease;
}
#mainTop .ttl_wrap .img_map.init,
#mainTop .img.init {
	opacity: 1;
}
#mainTop .ttl_wrap .img_map {
	width: 90%;
}
#mainTop .ttl_wrap .img_map img {
	width: 100%;
}
#mainTop .txt_wrap p {
	margin: 0 0 40px;
	font-size: 2.13vw;
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 120%;
}
#mainTop .img {
	position: absolute;
	top: 50%;
	right: 0;
	width: 350px;
	-webkit-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
	z-index: 10;
}
#mainTop .img img {
	width: 100%;
}
	@media (min-width: 1001px) {
		#mainTop .coluumn02 {
			display: flex;
		}
		#mainTop .ttl_wrap {
			width: 50%;
		}
		#mainTop .txt_wrap {
			width: 37.2%;
		}
		#mainTop .txt_wrap p .txtline .txtline_inr {
			transition-duration: 0.6s;
		}
		#mainTop .txt_wrap.sp {
			display: none;
		}
	}
	@media screen and (max-width: 1400px) {
		#mainTop .img {
			width: 260px;
		}
		#mainTop .txt_wrap p {
			margin: 0 0 35px 0;
			font-size: 2.13vw;
		}
	}
	@media screen and (max-width: 1000px) {
		#mainTop {
			padding: 180px 0 200px;
			z-index: 1;
		}
		#mainTop .ttl_wrap .img_map {
			width: 76.5%;
			margin: 0 auto 47%;
		}
		#mainTop .ttl_wrap .img_map img {
			width: 100%;
			-webkit-transform: translateY(30px);
			transform: translateY(30px);
			-webkit-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease;
			transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease;
			opacity: 0;
		}
		#mainTop .ttl_wrap .img_map.init img {
			-webkit-transform: translateY(0);
			transform: translateY(0);
			opacity: 1;
		}
		#mainTop .ttl_wrap h2 {
			margin: 0 0 40%;
		}
		#mainTop .txt_wrap p {
			margin-right: 0;
			font-size: 36px;
		}
		#mainTop .txt_wrap p .txtline .txtline_inr {
			line-height: 220%;
		}
		#mainTop .txt_wrap p br {
			display: none;
		}
		#mainTop .img {
			position: relative;
			top: auto;
			right: auto;
			width: 175px;
			-webkit-transform: translate(0, 0);
			 transform: translate(0, 0);
		}
		#mainTop .img {
			position: relative;
			width: 100%;
		}
		#mainTop .img > img {
			display: block;
			max-width: 320px;
			width: 42.8%;
			margin: 27% auto 0;
			opacity: 0;
			transition: opacity 0.6s ease 0.6s;
		}
		#mainTop .img.init > img {
			opacity: 1;
		}
		#mainTop .bg_ring01 {
			top: 17%;
			-webkit-transform: translate(-50%, 0);
		   transform: translate(-50%, 0);
		   width: 89.8%;
			height: auto;
			padding: 89.8% 0 0;
		}
		#mainTop .bg_ring01.init img,
		#mainTop .bg_ring02.init img {
			-webkit-animation: spin2 2s ease-out forwards;
			animation: spin2 2s ease-out forwards;
		}
		#mainTop .txt_wrap.pc {
			display: none;
		}
	}
	@media screen and (max-width: 750px) {
		#mainTop {
			padding: 28% 0 45.3%;
		}
		#mainTop .ttl_wrap .img_map,
		#mainTop .txt_wrap {
			width: 100%;
		}
		#mainTop .ttl_wrap h2 {
			margin: 0 0 36%;
		}
		#mainTop .txt_wrap p {
			margin: 0 0 10%;
			font-size: 5.5vw;
			line-height: 150%;
		}
		#mainTop .bg_ring01 {
			top: 16.8%;
		}
		#mainTop .img .bg_ring02 {
			width: 89.8%;
			height: auto;
			padding: 89.8% 0 0;
		}
	}
/*=================================================
#introductions
==================================================*/
#introductions .bg_image{
	display:none;
}
#introductionCont02 .inner .fade_anim.para2,
#introductionCont03 .inner .fade_anim.para3{
  -webkit-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease,top 0.4s ease 0s;
	transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s ease,top 0.4s ease 0s;
}
/* introductionCont01
------------------------------------------------------------------------------------ */
#introductionCont01 {
	position: relative;
	padding: 210px 0 250px;
	overflow: hidden;
}
#introductionCont01::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_dot.png) repeat 0 0;
}
#introductionCont01 h3 {
	font-size: 32px;
	padding: 0;
}
#introductionCont01 h3:before {
	top: -20px;
	opacity: 0;
	transition: opacity 0.6s ease;
}
#introductionCont01 h3.init:before {
	opacity: 1;
}
#introductionCont01 .txt_wrap p {
	width: 500px;
	line-height: 150%;
}
#introductionCont01 .txt_wrap p + p {
	padding-top: 1em;
}
#introductionCont01 .txt_wrap .ttl_txt {
	margin: 0 0 30px;
	font-size: 50px;
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 90%;
}
#introductionCont01 .txt_wrap .txt {
	font-size: 0.945vw;
}
#introductionCont01 .txt_wrap .txt span {
	line-height: 220%;
}
#introductionCont01 .bg_image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.6s ease;
}
#introductionCont01 .bg_image.init {
	opacity: 1;
}
	@media (min-width: 1481px) {
		#introductionCont01 .txt_wrap p {
			font-size: 0.94vw;
		}
	}
	@media (min-width: 1001px) {
		#introductionCont01 .inner {
			max-width: 100%;
			width: 100%;
		}
		#introductionCont01 h3 {
			max-width: 1320px;
			width: 90%;
			margin: 0 auto;
		}
		#introductionCont01 .txt_wrap .ttl_txt {
			font-size: 3.3vw;
			letter-spacing: 0.01em;
			line-height: 60%;
		}
		#introductionCont01 .txt_wrap {
			width: 33.3%;
			margin: 0 auto;
			-webkit-transform: translateY(-36px);
			-ms-transform: translateY(-36px);
			transform: translateY(-36px);
			padding-top: 6px;
		}
		#introductionCont01 .txt_wrap p {
			width: auto;
		}
	}
	@media (min-width: 800px) {
		#introductionCont01 .bg_image .sp {
			display: none;
		}
	}
	@media (min-width: 751px) and (max-width: 1000px) {
		#introductionCont01 .txt_wrap .ttl_txt {
			line-height: unset;
		}
		#introductionCont01 .txt_wrap .ttl_txt .txtline {
			line-height: 93%;
		}
	}
	@media screen and (max-width: 1000px) {
		#introductionCont01 h3 {
			width: 28%;
			margin-bottom: 10%;
		}
		#introductionCont01 .txt_wrap .ttl_txt {
			margin: 0 0 3%;
			font-size: 7vw;
		}
		#introductionCont01 .txt_wrap p {
			width: 100%;
		}
		#introductionCont01 .txt_wrap .txt {
			font-size: 1.4vw;
		}
	}
	@media screen and (max-width: 750px) {
		#introductionCont01 {
			padding: 21% 0 60%;
		}
		#introductionCont01 h3 {
			width: 100%;
			font-size: 5vw;
		}
		#introductionCont01 .txt_wrap .ttl_txt {
			font-size: 8vw;
			letter-spacing: 0.01em;
			line-height: 80%;
			margin-bottom: 4%;
		}
		#introductionCont01 .txt_wrap .txt {
			font-size: 3.4vw;
			line-height: 150%;
		}
		#introductionCont01 .bg_image .pc {
			display: none;
		}
	}
/* introduction_detail
------------------------------------------------------------------------------------ */
.introduction_detail {
	position: relative;
	padding: 0 0 210px;
}
.introduction_detail .img_column {
	position: relative;
	overflow: hidden;
}
.introduction_detail .img_column figure {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.introduction_detail .img_column img {
	width: 100%;
}
.introduction_detail h4 span {
	display: block;
}
.introduction_detail h4 .en01 {
	margin: 0 0 15px;
	font-family: teko, sans-serif;
	font-weight: 300;
	color: #e60012;
	font-size: 20px;
	letter-spacing: 0.01em;
}
.introduction_detail h4 .en02 {
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 60px;
	letter-spacing: 0.01em;
	line-height: 100%;
}
.introduction_detail h4 .jp {
	font-size: 16px;
	font-weight: 700;
}
.introduction_detail .btn_base {
	margin-top: 45px;
}
	@media (min-width: 751px) {
		.introduction_detail .inner {
			display: flex;
			align-items: center;
		}
		.introduction_detail .img_column {
			width: 54.6%;
		}
		.introduction_detail .txt_column {
			flex: 1;
		}
	}
	@media screen and (max-width: 750px) {
		.introduction_detail {
			padding: 0 0 28.9%;
		}
		#contents_area .introduction_detail .inner {
			width: 100%;
			padding: 5% 0 0 11.7%;
			box-sizing: border-box;
		}
		.introduction_detail h4 .en01 {
			margin: 0 0 2%;
			font-size: 3.12vw;
		}
		.introduction_detail h4 .en02 {
			margin: 0 0 1%;
			font-size: 9.37vw;
		}
		.introduction_detail h4 .jp {
			font-size: 3.12vw;
		}
		.introduction_detail .btn_base {
			margin-top: 6%;
		}
	}
/* introductionCont02
------------------------------------------------------------------------------------ */
#introductionCont02 {
	margin: -85px 0 95px;
}
#introductionCont02 .inner {
	max-width: 100%;
}
#introductionCont02 .txt_column {
	padding: 0 0 160px 150px;
}
#introductionCont02 .img_column {
	padding: 35% 0 0;
}
	@media (min-width: 751px) and (max-width: 1400px) {
		#introductionCont02 .txt_column {
			display: flex;
			justify-content: center;
			padding: 0 0 40px;
		}
	}
	@media (min-width: 751px) and (max-width: 1000px) {
		#introductionCont02 .inner {
			width: 90%;
			padding-top: 40px;
		}
		#introductionCont02 .txt_column {
			margin-top: -12%;
		}
	}
	@media screen and (max-width: 750px) {
		#introductionCont02 {
			margin: -40% 0 15.6%;
		}
		#introductionCont02 .img_column {
			padding: 0;
			-webkit-transform: translateY(-20%);
			transform: translateY(-20%);
		}
		#introductionCont02 .img_column figure {
			overflow: hidden;
			position: relative;
			padding: 71% 0 0;
			top: 0;
			-webkit-transform: translate(-50%, 0%);
			transform: translate(-50%, 0%);
		}
		#introductionCont02 .img_column figure img {
			position: absolute;
			top: 50%;
			left: 0;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
		}
		#introductionCont02 .txt_column {
			padding: 0;
			margin-top: -7.5%;
		}
	}
/* introductionCont03
------------------------------------------------------------------------------------ */
#introductionCont03 .inner {
	max-width: 100%;
	flex-flow: row-reverse;
}
#introductionCont03 .img_column {
	width: 66.4%;
}
#introductionCont03 .txt_column {
	padding: 0 0 100px 80px;
}
#introductionCont03 .img_column .movie {
	position: relative;
	padding: 52.6% 0 0;
	overflow: hidden;
}
#introductionCont03 .img_column .movie::after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 16%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/img_introduction02_watch.png) no-repeat 50% 50% / contain;
}
#introductionCont03 .img_column .movie .icn_movie {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	-webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   z-index: 1;
   opacity: 0;
   transition: opacity 0.6s ease;
}
#introductionCont03 .img_column .movie .icn_movie.init {
	opacity: 1;
}
#introductionCont03 .img_column .movie .icn_movie .icn_play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#introductionCont03 .img_column .movie .icn_movie .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-animation: spin 6s linear infinite;
	animation: spin 6s linear infinite;
}
#introductionCont03 .img_column .movie figure {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#introductionCont03 .img_column .movie .txt {
	font-family: teko, sans-serif;
	font-weight: 300;
	color: #df0615;
	font-size: 80px;
	line-height: 80%;
	letter-spacing: 0.01em;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transform: translate(0%,-50%);
	-ms-transform: translate(0%,-50%);
	transform: translate(0%,-50%);
	margin-left: 12.9%;
	z-index: 1;
}
#introductionCont03 .img_column .movie .txt .txt_ov {
	display: inline-block;
	line-height: 80%;
}
	@media (min-width: 751px) and (max-width: 1400px) {
		#introductionCont03 .txt_column {
			display: flex;
			justify-content: center;
			padding: 0 0 100px;
		}
		#introductionCont03 .img_column .movie .txt {
			font-size: 5.7vw;
		}
	}
	@media (min-width: 751px) and (max-width: 1000px) {
		#introductionCont03 .inner {
			width: 90%;
		}
		#introductionCont03 .txt_column {
			margin-top: -12%;
		}
	}
	@media screen and (max-width: 750px) {
		#introductionCont03 .img_column {
			width: 100%;
		}
		#introductionCont03 .txt_column {
			padding: 10.6% 0 0;
		}
		#introductionCont03 .img_column .movie {
			padding: 71.4% 0 0;
		}
		#introductionCont03 .img_column .movie .icn_movie {
			width: 15%;
			height: auto;
			padding: 15% 0 0;
		}
		#introductionCont03 .img_column .movie .icn_movie .icn_play {
			width: 75%;
			height: 75%;
		}
		#introductionCont03 .img_column .movie .txt {
			font-size: 12.5vw;
			margin-right: 10.6%;
		}
	}
/*=================================================
#stories
==================================================*/
#stories {
	position: relative;
	padding: 150px 0 0;
	z-index: 10;
}
#stories::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_dot.png) repeat 0 0;
}
#stories .inner {
	max-width: 100%;
}
#stories .bg_image {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.6s ease;
}
#stories .bg_image.init {
	opacity: 1;
}
#stories .bg_image img{
	display:none;
	opacity:0;
}
	@media (min-width: 751px) {
		#stories .bg_image .sp {
			display: none;
		}
	}
	@media screen and (max-width: 750px) {
		#stories {
			padding: 21.8% 0 0;
		}
		#stories .bg_image .pc {
			display: none;
		}
	}
/* column02 */
#stories .column02 {
	margin:  0 0 90px;
}
#stories .map_column {
	position: relative;
}
#stories .map_column img {
	width: 100%;
}
#stories h3 {
	margin: 0 0 14px;
}
#stories h3::before {
	opacity: 0;
	transition: opacity 0.6s ease;
}
#stories h3.init::before {
	opacity: 1;
}
#stories .txt {
	font-size: 0.945vw;
	margin: 0 0 26px;
	line-height: 200%;
}
#stories .txt .note {
	color: #9c9c9c;
	font-size: 0.81vw;
	line-height: 150%;
	padding-top: 5px;
}
#stories .txt .txt_link {
	position: relative;
	display: inline-block;
	margin-top: 25px;
}
#stories .txt .txt_link::after {
	position: absolute;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_link.svg) no-repeat 0 50%;
	background-size: contain;
	top: 50%;
	right: -20px;
	width: 10px;
	height: 8px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-top: -0.05em;
}
#stories .txt .txt_link a {
	display: inline-block;
	font-family: teko, sans-serif;
	font-weight: 300;
	color: #df0615;
	font-size: 1.62vw;
	line-height: 90%;
}
#stories .txt .txt_link a::before {
	display: block;
	position: absolute;
	content: "";
	bottom: -11px;
	right: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: #df0615;
	-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#stories .txt .txt_link a:hover::before {
	left: auto;
	width: 0;
}
#stories .txt .txt_link a:after {
	background: #df0615;
}
#stories .txt .txt_link a:hover:after {
	left: 0;
	width: 100%;
}
	@media (min-width: 1001px) {
		#stories .column02 {
			display: flex;
		}
		#stories .txt_column {
			width: 31%;
			padding: 0 7% 0 0;
		}
		#stories .map_column {
			width: 59%;
		}
	}
	@media (min-width: 1001px) and (max-width: 1480px) {
		#stories .column02 {
			align-items: flex-end;
		}
	}
	@media screen and (max-width: 1200px) {
		#stories .txt_column {
			padding: 0 6% 0 0;
		}
	}
	@media screen and (max-width: 1000px) {
		#stories .inner {
			width: 100%;
		}
		#stories .txt_column {
			margin: 0 0 20%;
		}
		#stories .column02 {
			width: 76.5%;
			margin: 0 auto 10%;
		}
		#stories .txt {
			font-size: 1.4vw;
		}
		#stories .txt .note {
			font-size: 1.2vw;
		}
		#stories .txt .txt_link a {
			font-size: 2.4vw;
		}
	}
	@media screen and (max-width: 750px) {
		#stories .column02 {
			margin: 0 auto 15%;
		}
		#stories .txt {
			margin: 0 0 30px;
			font-size: 3.4vw;
			line-height: 150%;
		}
		#stories .txt .note {
			font-size: 3vw;
			padding-top: 1%;
		}
		#stories .txt .txt_link {
			margin-top: 5%;
		}
		#stories .txt .txt_link a {
			font-size: 4.68vw;
		}
		#stories .txt_column {
			margin: 0 0 26%;
		}
		#stories .map_column {
			width: 116%;
			margin: 0 0 6.7% -11%;
		}
	}
/* list-pin */
#stories .list-pin li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#stories .list-pin li p {
	position: absolute;
	bottom: 115%;
	left: 1.2%;
	transform: translateX(-50%);
	color: #df0615;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 1.08vw;
	line-height: 90%;
	transition: all 0.5s ease;
}
#stories .list-pin .pin01 {
	margin: 24.4% 0 0 15.9%;
}
#stories .list-pin .pin02 {
	margin: 31.6% 0 0 27%;
}
#stories .list-pin .pin03 {
	margin: 30% 0 0 33.8%;
}
#stories .list-pin .pin04 {
	margin: 38% 0 0 49.4%;
}
#stories .list-pin .pin05 {
	margin: 37% 0 0 56.9%;
}
#stories .list-pin .pin06 {
	margin: 28.8% 0 0 63.4%;
}
#stories .list-pin .pin07 {
	margin: 32.8% 0 0 82.8%;
}
#stories .list-pin .pin08 {
	margin: 33.8% 0 0 100%;
}
#stories .list-pin li span {
	position: relative;
	display: inline-block;
	width: 2.45%;
	cursor: pointer;
}
#stories .list-pin li span::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 50%;
	width: 100%;
	height: 56.4%;
	background: rgba(223,6,21,0.5);
	border-radius: 50%;
	transform: translate(0%,20%);
	animation: notpinAnim 0.6s infinite alternate;
}
#stories .list-pin li.current span::before {
	animation: pinAnim 0.6s infinite alternate;
}
#stories .list-pin li img {
	position: relative;
	width: 99%;
	height: 100%;
}
#stories .list-pin .on {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity 0.5s ease;
	opacity: 0;
}
#stories .list-pin li.current .on {
	opacity: 1;
}
#stories .list-pin li.current p {
	color: #fff;
}
	@media (min-width:769px) {
		#stories .list-pin li span:hover .on {
			opacity: 1;
		}
	}
	@media screen and (max-width:1000px) {
		#stories .list-pin li p {
			left: 1.8%;
			font-size: 3.125vw;
			opacity: 0;
		}
		#stories .list-pin li:last-child p {
			left: 0;
		}
		#stories .list-pin .pin01 {
			margin: 21.9% 0 0 15%;
		}
		#stories .list-pin .pin02 {
			margin: 29% 0 0 26%;
		}
		#stories .list-pin .pin03 {
			margin: 28.2% 0 0 32.5%;
		}
		#stories .list-pin .pin04 {
			margin: 35.6% 0 0 48%;
		}
		#stories .list-pin .pin05 {
			margin: 34.7% 0 0 55.5%;
		}
		#stories .list-pin .pin06 {
			margin: 26.3% 0 0 62.4%;
		}
		#stories .list-pin .pin07 {
			margin: 30.57% 0 0 80.8%;
		}
		#stories .list-pin .pin08 {
			margin: 30.8% 0 0 98.1%;
		}
		#stories .list-pin li span {
			width: 3.6%;
		}
		#stories .list-pin li.current p {
			opacity: 1;
		}
	}
/* #storiesSlider
---------------------------------------*/
#storiesSlider {
	padding: 15px 0 252px;
	opacity:0;
}
#stories.init #storiesSlider{
	opacity:1;
	-webkit-transition: opacity 1.5s ease 0.3s;
	-moz-transition: opacity 1.5s ease 0.3s;
	-o-transition: opacity 1.5s ease 0.3s;
	-ms-transition: opacity 1.5s ease 0.3s;
	transition: opacity 1.5s ease 0.3s;
}
#storiesSlider li img {
	width: 100%;
}
#storiesSlider li {
	position: relative;
	transform: scale(0.861);
	transition: transform 1s ease, opacity 1s ease;
	opacity: 0.5;
}
#storiesSlider li.swiper-slide-active {
	transform: scale(1.033);
	opacity: 1;
}
#storiesSlider li .txt_wrap {
	position: absolute;
	bottom: 7.5%;
	left: 0;
	width: 100%;
	padding-left: 5%;
	box-sizing: border-box;
	transition: opacity 0.7s ease;
	opacity: 0;
}
#storiesSlider li.swiper-slide-active .txt_wrap {
	opacity: 1;
}
#storiesSlider li .txt_wrap p {
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 100%;
}
#storiesSlider li .txt_wrap .txt01 {
	font-size: 20px;
	padding-bottom: 1%;
}
#storiesSlider li .txt_wrap .txt02 {
	font-size: 70px;
}
#storiesSlider li .txt_wrap .txt03 {
	font-size: 32px;
}
#storiesSlider li .txt_discover {
	position: absolute;
	top: 50%;
	right: 0;
	margin-right: 38px;
	transform: translateY(-50%);
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 100%;
	font-size: 26px;
	transition: opacity 0.3s ease;
	opacity: 0;
}
#storiesSlider li a:hover .txt_discover::after {
	left: 0;
	width: 100%;
}
#storiesSlider li.swiper-slide-active .txt_discover {
	opacity: 1;
}
	@media (min-width:1481px) {
		#storiesSlider li {
			width: 767px!important;
		}
	}
	@media screen and (max-width:1480px) {
		#storiesSlider {
			transform: translateX(-0.3%);
			padding: 1% 0 18%;
		}
		#storiesSlider li .txt_wrap .txt01 {
			font-size: 1.35vw;
		}
		#storiesSlider li .txt_wrap .txt02 {
			font-size: 4.7vw;
		}
		#storiesSlider li .txt_wrap .txt03 {
			font-size: 2.16vw;
		}
		#storiesSlider li .txt_discover {
			margin-right: 4.8%;
			font-size: 1.756vw;
		}
	}
	@media screen and (max-width:1000px) {
		#storiesSlider {
			padding: 1% 0 31%;
		}
		#storiesSlider li.swiper-slide-active {
			transform: scale(1.052);
		}
		#storiesSlider li .txt_wrap {
			padding-left: 6%;
		}
		#storiesSlider li .txt_wrap .txt01 {
			font-size: 2.8vw;
		}
		#storiesSlider li .txt_wrap .txt02 {
			font-size: 6.56vw;
		}
		#storiesSlider li .txt_wrap .txt03 {
			font-size: 4.375vw;
		}
		#storiesSlider li .txt_discover {
			display: none;
		}
	}
/* bgcircle */
#storiesSlider .bgcircle {
	position: absolute;
	content: "";
	bottom: -9%;
	left: 50%;
	border: solid 3px rgba(230,0,18,0.2);
	border-radius: 50%;
	box-sizing: border-box;
	-webkit-transform: translate(-50%, 50%);
	-ms-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
}
#storiesSlider .bgcircle01 {
	width: 54%;
	padding-top: 54%;
}
#storiesSlider .bgcircle02 {
	width: 81%;
	padding-top: 81%;
}
	@media screen and (max-width:1480px) {
		#storiesSlider .bgcircle01 {
			width: 800px;
			padding-top: 800px;
		}
		#storiesSlider .bgcircle02 {
			width: 1200px;
			padding-top: 1200px;
		}
	}
	@media screen and (max-width:1000px) {
		#storiesSlider .bgcircle {
			bottom: -16%;
		}
		#storiesSlider .bgcircle01 {
			width: 100%;
			padding-top: 100%;
		}
		#storiesSlider .bgcircle02 {
			width: 150%;
			padding-top: 150%;
		}
	}
/* storiesSlider_pager */
#storiesSlider_pager {
	position: absolute;
	bottom: -9%;
	left: 50%;
	-webkit-transform: translate(-50%, 50%) rotate(0deg);
	transform: translate(-50%, 50%) rotate(0deg);
	border-radius: 50%;
	box-sizing: border-box;
	width: 518px;
	padding-top: 518px;
	transition: all 2700ms cubic-bezier(0.23, 1, 0.32, 1);
}
#storiesSlider_pager.init {
	transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
#storiesSlider_pager.before {
	-webkit-transform: translate(-50%, 50%) rotate(180deg) !important;
	transform: translate(-50%, 50%) rotate(180deg) !important;
}
#storiesSlider_pager.restart {
	transform: translate(-50%, 50%) rotate(-360deg)!important;
}
#storiesSlider_pager.next {
	-webkit-transform: translate(-50%, 50%) rotate(0deg)!important;
	transform: translate(-50%, 50%) rotate(0deg)!important;
	transition-duration: 0s!important;
}
#storiesSlider_pager.return {
	transform: translate(-50%, 50%) rotate(45deg)!important;
}
#storiesSlider_pager.prev {
	-webkit-transform: translate(-50%, 50%) rotate(-315deg)!important;
	transform: translate(-50%, 50%) rotate(-315deg)!important;
	transition-duration: 0s!important;
}
#storiesSlider_pager::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	width: 92.57%;
	height: 92.57%;
	border: solid 3px rgba(230,0,18,0.4);
	border-radius: 50%;
	box-sizing: border-box;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#storiesSlider_pager .swiper-pagination-bullet {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	margin: 0;
	opacity: 1;
	position: relative;
	display: block;
	width: 100%;
	position: absolute;
	transform-origin: bottom;
}
#storiesSlider_pager .swiper-pagination-bullet::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 50%;
	padding: 8px;
	-webkit-transform: translate(-50%, 100%);
	-ms-transform: translate(-50%, 100%);
	transform: translate(-50%, 100%);
	transition: transform 0.2s ease, background 0.2s ease;
	margin-bottom: -12px;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_circle.png) no-repeat 50% 50% / contain;
}
#storiesSlider_pager .swiper-pagination-bullet-active::after {
	padding: 12px;
	-webkit-transform: translate(-50%, 100%);
	-ms-transform: translate(-50%, 100%);
	transform: translate(-50%, 100%);
	margin-bottom: -9px;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_circle_active.png) no-repeat 50% 50% / contain;
}
#storiesSlider_pager .swiper-pagination-bullet span {
	display: inline-block;
	color:rgba(230,0,18,0.4);
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 100%;
}
#storiesSlider_pager .swiper-pagination-bullet-active span {
	color: #fff;
}
#storiesSlider_pager .page0 {
	transform: translateY(-50%) rotate(0deg);
}
#storiesSlider_pager .page1 {
	transform: translateY(-50%) rotate(45deg);
}
#storiesSlider_pager .page2 {
	transform: translateY(-50%) rotate(90deg);
}
#storiesSlider_pager .page3 {
	transform: translateY(-50%) rotate(135deg);
}
#storiesSlider_pager .page4 {
	transform: translateY(-50%) rotate(180deg);
}
#storiesSlider_pager .page5 {
	transform: translateY(-50%) rotate(225deg);
}
#storiesSlider_pager .page6 {
	transform: translateY(-50%) rotate(270deg);
}
#storiesSlider_pager .page7 {
	transform: translateY(-50%) rotate(315deg);
}
	@media screen and (max-width:1480px) {
		#storiesSlider_pager {
			width: 35%;
			padding-top: 35%;
		}
		#storiesSlider_pager .swiper-pagination-bullet::after {
			padding: 1.6%;
			-webkit-transform: translate(-50%, 175%);
			-ms-transform: translate(-50%, 175%);
			transform: translate(-50%, 175%);
			margin-bottom: 0;
		}
		#storiesSlider_pager .swiper-pagination-bullet-active::after {
			padding: 2.4%;
			-webkit-transform: translate(-50%, 138%);
			-ms-transform: translate(-50%, 138%);
			transform: translate(-50%, 138%);
		}
		#storiesSlider_pager .swiper-pagination-bullet span {
			font-size: 1.6vw;
		}
	}
	@media screen and (max-width:1000px) {
		#storiesSlider_pager {
			bottom: -16%;
			width: 60%;
			padding-top: 60%;
		}
		#storiesSlider_pager::before {
			border-width: 3px;
		}
		#storiesSlider_pager .swiper-pagination-bullet::after {
			padding: 2.1%;
			transform: translate(-50%, 147%);
		}
		#storiesSlider_pager .swiper-pagination-bullet-active::after {
			padding: 3.2%;
			transform: translate(-50%, 118%);
		}
		#storiesSlider_pager .swiper-pagination-bullet span {
			font-size: 3.125vw;
		}
	}
/* button */
#storiesSlider .storiesSlider-prev,
#storiesSlider .storiesSlider-next {
	width: auto;
	height: auto;
	background: none;
	margin: 0;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 1.75vw;
	line-height: 90%;
	cursor: pointer;
	margin-top: -9%;
	opacity: 0.4;
	transition: opacity 0.6s ease;
}
#storiesSlider .storiesSlider-prev:hover,
#storiesSlider .storiesSlider-next:hover {
	opacity: 1;
}
#storiesSlider .storiesSlider-prev:hover .txt_container .txt_ov,
#storiesSlider .storiesSlider-next:hover .txt_container .txt_ov {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	-webkit-animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
#storiesSlider .storiesSlider-prev {
	left: 5.4%;
}
#storiesSlider .storiesSlider-next {
	right: 5.4%;
}
	@media screen and (max-width:1000px) {
		#storiesSlider .storiesSlider-prev,
		#storiesSlider .storiesSlider-next {
			display: none;
		}
	}
/*=================================================
#product
==================================================*/
#product {
	padding: 210px 0;
	position: relative;
	z-index: 10;
}
	@media screen and (max-width: 750px) {
		#product {
			padding: 27.3% 0;
		}
		#contents_area #product .inner {
			width: 100%;
		}
		#product .product_main {
			width: 76.5%;
			margin: 0 auto;
		}
		#product .product_sub {
			width: 88.25%;
			margin: 0 0 0 auto;
		}
	}
/* product_main */
#product .product_main h3 {
	opacity: 0;
	transition: opacity 0.6s ease;
}
#product .product_main h3.init {
	opacity: 1;
}
#product .product_main .img_column {
	position: relative;
	width: 576px;
	padding: 576px 0 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#product .product_main .img_column figure {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	 transform: translate(-50%, -50%);
}
#product .product_main .img_column figure img {
	width: 275px;
}
#product .product_main .img_column .product_ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease;
}
#product .product_main .img_column .product_ring img {
	width: 100%;
}
#product .product_main .img_column .product_ring.init {
	opacity: 1;
}
#product .product_main .img_column .product_ring.init img {
	-webkit-animation: spin2 2s ease-out forwards;
	animation: spin2 2s ease-out forwards;
}
#product .product_main .cont_column .txt_wrap {
	display: inline-block;
	text-align: left;
}
#product .product_main .cont_column h4 {
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 58px;
	letter-spacing: 0.01em;
	line-height: 90%;
	padding-bottom: 60px;
}
#product .product_main .cont_column dt {
	color: #e60012;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 26px;
	padding-bottom: 15px;
}
#product .product_main .cont_column dl + dl {
	padding-top: 35px;
}
	@media (min-width: 1001px) {
		#product .product_main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 160px;
		}
		#product .product_main .ttl_column {
			width: 28%;
		}
		#product .product_main .cont_column {
			width: 28%;
			text-align: right;
			padding-left: 25px;
			box-sizing: border-box;
		}
	}
	@media screen and (max-width: 1400px) {
		#product .product_main .cont_column h4 {
			font-size: 4.0vw;
		}
		#product .product_main .img_column {
			width: 42%;
			padding: 42% 0 0;
		}
		#product .product_main .img_column figure {
			width: 50%;
		}
		#product .product_main .img_column figure img {
			width: 100%;
		}
		#product .product_main .cont_column {
			padding: 0;
		}
	}
	@media screen and (max-width: 1000px) {
		#product .product_main .ttl_column {
			margin: 0 0 75px;
		}
		#product .product_main .img_column {
			position: relative;
			width: 100%;
			margin: 0 auto;
			padding: 100% 0 0;
			margin: 0 0 60px;
		}
		#product .product_main .cont_column .txt_wrap {
			display: block;
		}
		#product .product_main .cont_column h4 {
			font-size: 48px;
		}
		#product .product_main .box-info {
			display: flex;
			margin: 0 0 100px;
		}
		#product .product_main .box-info dl {
			width: 38%;
			margin-right: 5%;
		}
		#product .product_main .cont_column dl + dl {
			padding-top: 0;
		}
	}
	@media screen and (max-width: 750px) {
		#product .product_main .ttl_column {
			margin: 0 0 12%;
		}
		#product .product_main .img_column {
			width: 117%;
			padding: 117% 0 0;
			margin: 0 0 13% -8.5%;
		}
		#product .product_main .img_column figure img {
			width: 100%;
		}
		#product .product_main .cont_column h4 {
			padding-bottom: 10.2%;
			font-size: 9.37vw;
		}
		#product .product_main .box-info {
			margin: 0 0 24%;
		}
		#product .product_main .box-info dl {
			width: 45%;
		}
		#product .product_main .box-info dt {
			font-size: 4.0625vw;
		}
		#product .product_main .cont_column .btn_base {
			width: 95%;
			padding: 11% 0;
		}
	}
/* product_sub */
#product .product_sub h5 {
	color: #e60012;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 40px;
	letter-spacing: 0.01em;
	line-height: 90%;
	padding-bottom: 40px;
}
#product .product_sub h5 br {
	display: none;
}
#product .product_sub .product_sub_inner figure img {
	width: 100%;
}
#product .product_sub .product_sub_inner .txt_wrap .logo {
	width: 233px;
}
#product .product_sub .product_sub_inner .txt_wrap .logo img {
	width: 100%;
}
#product .product_sub .product_sub_inner .txt_wrap .txt {
	padding: 15px 0 22px;
	line-height: 127%;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 22px;
}
#product .product_sub .product_sub_inner .txt_wrap .ttl {
	color: #e60012;
	font-size: 13px;
	padding-bottom: 12px;
}
#product .product_sub .product_sub_inner .txt_wrap .ttl span {
	display: inline-block;
	vertical-align: middle;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 24px;
}
	@media (min-width: 1201px) {
		#product .product_sub .product_sub_inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
		}
		#product .product_sub .product_sub_inner::before {
			position: absolute;
			content: "";
			top: 0;
			left: 69.6%;
			width: 100%;
			height: 100%;
			background: #020017;
		}
		#product .product_sub .product_sub_inner figure {
			width: 69.6%;
		}
		#product .product_sub .product_sub_inner .txt_wrap {
			flex: 1;
			display: flex;
			justify-content: center;
		}
	}
	@media screen and (max-width: 1200px) {
		#product .product_sub .product_sub_inner figure {
			margin: 0 0 20px;
			width: 105.6%;
		}
	}
	@media screen and (max-width: 1000px) {
		#product .product_sub .product_sub_inner figure {
			width: 115.3%;
		}
	}
	@media screen and (max-width: 750px) {
		#product .product_sub h5 {
			font-size: 7.8vw;
			padding-bottom: 4%;
		}
		#product .product_sub h5 br {
			display: block;
		}
		#product .product_sub .product_sub_inner figure {
			margin: 0 0 5%;
			width: 100%;
		}
		#product .product_sub .product_sub_inner .txt_wrap .logo {
			width: 48%;
		}
		#product .product_sub .product_sub_inner .txt_wrap .txt {
			font-size: 5vw;
			line-height: 120%;
			padding: 2% 0 7%;
		}
		#product .product_sub .product_sub_inner .txt_wrap .ttl {
			font-size: 3.125vw;
			padding-bottom: 2%;
		}
		#product .product_sub .product_sub_inner .txt_wrap .ttl span {
			font-size: 4.0625vw;
		}
	}
/*=================================================
#otherstories
==================================================*/
#otherstories {
	padding: 196px 0 120px;
	position: relative;
	z-index: 10;
}
#otherstories::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_dot.png) repeat 0 0;
}
#otherstories h3 {
	padding-bottom: 50px;
}
#otherstories h3::before {
	opacity: 0;
	transition: opacity 0.6s ease;
}
#otherstories h3.init::before {
	opacity: 1;
}
#otherstories h3 .row {
	display: inline-block;
	padding-left: 15px;
}
#otherstories h3 .sub {
	display: block;
	font-size: 0.75em;
	line-height: 90%;
}
#otherstories .otherstories_slider {
	padding-bottom: 77px;
	overflow: visible;
}
#otherstories .otherstories_slider .slider {
	width: 2360px;
}
#otherstories .otherstories_slider .slider li {
	width: 25%!important;
	padding-right: 1.6%;
	box-sizing: border-box;
	opacity: 0;
	transform: translateX(30px);
	transition: all 1s ease;
}
	#otherstories .otherstories_slider .slider .number2 {
		transition-delay: 0.2s;
	}
	#otherstories .otherstories_slider .slider .number3 {
		transition-delay: 0.4s;
	}
	#otherstories .otherstories_slider .slider .number4 {
		transition-delay: 0.6s;
	}
#otherstories .otherstories_slider .slider li.init {
	opacity: 1;
	transform: translateX(0);
}
#otherstories .otherstories_slider .slider li a {
	display: block;
}
#otherstories .otherstories_slider .slider li img {
	width: 100%;
}
#otherstories .otherstories_slider h4 {
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 26px;
	letter-spacing: 0.05em;
	line-height: 90%;
	padding-bottom: 16px;
	opacity: 0;
	transition: opacity 1s ease;
	transition-delay: 0.4s;
}
#otherstories .otherstories_slider li.init h4 {
	opacity: 1;
}
#otherstories .otherstories_slider h4 span {
	font-size: 0.77em;
}
#otherstories .otherstories_slider .img_wrap {
	position: relative;
}
#otherstories .otherstories_slider .img_wrap .txt {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 83%;
	margin-bottom: 5.4%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#otherstories .otherstories_slider .img_wrap .txt p {
	opacity: 0;
	transition: opacity 1s ease;
	font-family: teko, sans-serif;
	font-weight: 300;
}
#otherstories .otherstories_slider li.init .img_wrap .txt p {
	opacity: 1;
}
#otherstories .otherstories_slider .img_wrap .txt .txt01,
#otherstories .otherstories_slider .number1 .img_wrap .txt .txt02 {
	font-size: 60px;
	letter-spacing: 0.01em;
	line-height: 85%;
	transition-delay: 0.6s;
}
#otherstories .otherstories_slider .img_wrap .txt .txt02 {
	font-size: 36px;
	letter-spacing: 0.01em;
	line-height: 105%;
	padding-bottom: 6px;
	transition-delay: 0.8s;
}
#otherstories .otherstories_slider .img_wrap .txt .txt03 {
	font-size: 16px;
	line-height: 137%;
	transition-delay: 1s;
}
#otherstories .otherstories_slider .bottomPager {
	bottom: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
#otherstories .otherstories_slider .bottomPager.init {
	opacity: 1;
}
#otherstories .bg_image {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.6s ease;
	display:none;
}
#otherstories .bg_image.init {
	opacity: 1;
}
#otherstories .otherstories_slider .number1 .img_wrap .txt .txt02 {
	margin-bottom: -3%;
}
	@media (min-width: 751px) {
		#otherstories .bg_image .sp {
			display: none;
		}
	}
	@media (min-width: 1001px) and (max-width: 1480px) {
		#otherstories .otherstories_slider .slider {
			width: 166%;
		}
		#otherstories .otherstories_slider .img_wrap .txt .txt01,
		#otherstories .otherstories_slider .number1 .img_wrap .txt .txt02 {
			font-size: 4vw;
		}
		#otherstories .otherstories_slider .img_wrap .txt .txt02 {
			font-size: 2.4vw;
		}
	}
	@media screen and (max-width: 1000px) {
		#otherstories h3 .row {
			display: block;
			padding-left: 0;
		}
	}
	@media screen and (max-width: 750px) {
		#otherstories {
			padding: 21.8% 0 22.6%;
		}
		#otherstories .otherstories_slider h4 {
			padding-bottom: 5%;
			font-size: 4.06vw;
		}
		#otherstories .otherstories_slider .slider {
			width: 410%;
		}
		#otherstories .otherstories_slider .img_wrap .txt {
			width: 88%;
			margin-bottom: 8%;
		}
		#otherstories .otherstories_slider .img_wrap .txt .txt01,
		#otherstories .otherstories_slider .number1 .img_wrap .txt .txt02 {
			font-size: 8.0vw;
			line-height: 90%;
		}
		#otherstories .otherstories_slider .img_wrap .txt .txt02 {
			font-size: 4.8vw;
			line-height: 100%;
		}
		#otherstories .otherstories_slider .img_wrap .txt .txt03 {
			font-size: 2.66vw;
		}
		#otherstories .otherstories_slider .number1 .img_wrap .txt .txt02 {
			padding-bottom: 0;
		}
		#otherstories .bg_image .pc {
			display: none;
		}
	}
/* swiper */
#otherstoriesSlider_pager {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	bottom: 0;
}
#otherstoriesSlider_pager > span {
	display: block;
	width: 5px;
	height: 16px;
	margin: 0 4px;
	content: "";
	background: #df0615;
	border-radius: 0;
	opacity: 1;
	transition: height 0.3s ease;
}
#otherstoriesSlider_pager .swiper-pagination-bullet-active {
	height: 28px;
}
	@media screen and (max-width:750px) {
		#otherstoriesSlider_pager > span {
			display: block;
			width: 3px;
			height: 13px;
			margin: 0 4px;
			content: "";
			background: #df0615;
		}
		#otherstoriesSlider_pager .swiper-pagination-bullet-active {
			height: 23px;
		}
	}
/* 2021 */
#otherstories h3 {
	padding-bottom: 0;
}
#otherstories .scroll-tab .tab-wrap {
	width: 100%;
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#otherstories .scroll-tab .tab-wrap::-webkit-scrollbar {
	display: none;
}
#otherstories .slide-tab {
	display: inline-flex;
	padding: calc(35 / 1160 * 100%) 0 calc(35 / 1160 * 100%);
}
#otherstories .slide-tab li {
	cursor: pointer;
	transition: opacity 0.3s ease;
}
#otherstories .slide-tab li .txt_container .txt_ov {
	display: flex;
}
#otherstories .slide-tab li:not(.current) {
  opacity: 0.5;
}
#otherstories .slide-tab li:hover {
  opacity: 1;
}
#otherstories .slide-tab li:hover .txt_container .txt_ov {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
#otherstories .slide-tab li p {
	font-family: teko, sans-serif;
	font-weight: 300;
}
#otherstories .slide-tab li .year {
  font-size: calc(60 / 1480 * 100vw);
  line-height: 84%;
  margin-right: calc(16 / 1480 * 100vw);
}
#otherstories .slide-tab li .ttl {
  position: relative;
  font-size: calc(24 / 1480 * 100vw);
  line-height: 100%;
}
#otherstories .slide-tab li .sup {
	position: absolute;
    top: 0;
    left: 100%;
	font-size: calc(11 / 1480 * 100vw);
	font-family: initial;
	line-height: 200%;
}
#otherstories .slide-tab li + li {
  margin-left: calc(44 / 1480 * 100vw);
}
#otherstoriesSlider .pagination {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	font-size: calc(14 / 1480 * 100vw);
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: calc(32 / 1480 * 100vw);
	line-height: 100%;
}
#otherstoriesSlider .pagination p {
	font-family: inherit;
	line-height: 100%;
}
#otherstoriesSlider .pagination .swiper-pagination {
	position: static;
	padding-left: calc(34 / 1480 * 100vw);
	color: #e60012;
}
#otherstoriesSlider .pagination .swiper-pagination .swiper-pagination-current {
	color: #fff;
	padding-right: 0.2em;
}
#otherstoriesSlider .pagination .swiper-pagination .swiper-pagination-total {
	padding-left: 0.1em;
}
	@media screen and (max-width: 750px) {
		#otherstories .scroll-tab .tab-wrap {
			width: 100vw;
			margin-left: calc(-60 / 640 * 100vw);
		}
		#otherstories .slide-tab {
			padding: calc(46 / 640 * 100vw) 0 calc(53 / 640 * 100vw);
		}
		#otherstories .slide-tab li:first-child {
			padding-left: calc(60 / 640 * 100vw);
		}
		#otherstories .slide-tab li:last-child {
			padding-right: calc(60 / 640 * 100vw);
		}
		#otherstories .slide-tab li .year {
			font-size: calc(80 / 640 * 100vw);
			margin-right: calc(15 / 640 * 100vw);
		}
		#otherstories .slide-tab li .ttl {
			font-size: calc(32 / 640 * 100vw);
		}
		#otherstories .slide-tab li .sup {
			font-size: calc(14 / 640 * 100vw);
		}
		#otherstories .slide-tab li + li {
			margin-left: calc(44 / 640 * 100vw);
		}
		#otherstoriesSlider .pagination {
			font-size: calc(32 / 640 * 100vw);
		}
		#otherstoriesSlider .pagination .swiper-pagination {
			padding-left: calc(33 / 640 * 100vw);
		}
	}
/*=================================================
#footer
==================================================*/
#footer {
	position: relative;
	text-align: center;
	background: #080c20;
}
/* hashtag */
#footer .hashtag {
	padding: 184px 0 45px;
	color: #df0615;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 90px;
	letter-spacing: 0.05em;
	line-height: 90%;
	position: relative;
	z-index: 5;
}
	@media screen and (max-width:750px) {
		#footer .hashtag {
			padding: 25.7% 0 15.6%;
			font-size: 13.59vw;
		}
		#footer .hashtag img {
			width: 76.7%;
			height: auto;
		}
	}
/* sns_share */
#footer .sns_share {
	padding-bottom: 180px;
	position: relative;
	z-index: 5;
}
#footer .sns_share dl {
	justify-content: center;
}
	@media screen and (max-width:750px) {
		#footer .sns_share {
			padding-bottom: 27.3%;
		}
		#footer .sns_share dt {
			font-size: 18px;
		}
	}
/* footer_link */
#footer .footer_link {
	background: #020017;
	position: relative;
	z-index: 5;
}
#footer .footer_link a {
	position: relative;
	display: block;
	padding: 80px 0 88px;
}
#footer .footer_link a::after {
	position: absolute;
	content: "";
	background: #df0615;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	transition: all .3s;
}
#footer .footer_link .logo {
	position: relative;
	width: 300px;
	height: 0;
	padding: 38px 0 0;
	margin: 0 auto 30px;
	z-index: 10;
}
#footer .footer_link .logo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .3s;
}
#footer .footer_link .logo img.on {
	opacity: 0;
}
#footer .footer_link .txt {
	font-family: teko, sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 90%;
	letter-spacing: 0.05em;
	position: relative;
	z-index: 1;
}
#footer .footer_link .txt p {
	position: relative;
	display: inline-block;
	padding: 0.25em 13px 0 0;
	vertical-align: middle;
}
#footer .footer_link .txt .icn_link {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 8px;
	vertical-align: middle;
}
#footer .footer_link .txt .icn_link img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .3s;
}
#footer .footer_link .txt .icn_link img.on {
	opacity: 0;
}
#footer .footer_link a:hover::after {
	height: 100%;
}
#footer .footer_link a:hover .logo img.off,
#footer .footer_link a:hover .txt .icn_link img.off {
	opacity: 0;
}
#footer .footer_link a:hover .logo img.on,
#footer .footer_link a:hover .txt .icn_link img.on {
	opacity: 1;
}
	@media screen and (max-width:750px) {
		#footer .footer_link a {
			padding: 14% 0 10.9%;
		}
		#footer .footer_link .logo {
			width: 47%;
			padding: 6% 0 0;
			margin-bottom: 4.7%;
		}
		#footer .footer_link .txt {
			font-size: 4.3vw;
		}
	}
/* footer_global */
#footer .footer_global {
	background: #01000d;
	position: relative;
	z-index: 5;
	padding: 105px 0 115px;
	border-bottom: 1px solid #0c0c10;
}
#footer .footer_global .ttl,
#footer .footer_global li p {
	font-family: teko, sans-serif;
	font-weight: 300;
}
#footer .footer_global .ttl {
	font-size: 36px;
	line-height: 100%;
}
#footer .footer_global li + li {
	margin-left: 37px;
}
#footer .footer_global li p {
	font-size: 24px;
	line-height: 100%;
}
#footer .footer_global li p .link {
	position: relative;
	padding-right: 17px;
}
#footer .footer_global li p .link::after {
	position: absolute;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_link.svg) no-repeat 0 50%;
	background-size: contain;
	top: 50%;
	right: 0;
	width: 10px;
	height: 8px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-top: -0.05em;
}
#footer .footer_global li a {
	display: inline-block;
}
#footer .footer_global .note {
	color: #9c9c9c;
	font-family: 'Calibre-Regular';
	font-size: 12px;
}
	@media(min-width: 751px) {
		#footer .footer_global ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding: 35px 0 30px;
		}
	}
	@media screen and (max-width:750px) {
		#footer .footer_global {
			padding: 25% 0;
		}
		#footer .footer_global .ttl {
			text-align: left;
			width: 76.5%;
			margin: 0 auto;
			font-size: 10vw;
		}
		#footer .footer_global ul {
			text-align: left;
			width: 76.5%;
			margin: 0 auto;
			padding: 16.3% 0 8.57%;
		}
		#footer .footer_global li + li {
			margin: 7.1% 0 0;
		}
		#footer .footer_global li p {
			font-size: 6.25vw;
		}
		#footer .footer_global .note {
			text-align: left;
			width: 76.5%;
			margin: 0 auto;
			font-size: 2.5vw;
		}
	}
/* .footer */
#footer .footer {
	padding: 60px 0;
	background: #01000d;
	position: relative;
	z-index: 5;
}
#footer .footer .footer_inner {
	max-width: 1320px;
	width: 90%;
	margin: 0 auto;
}
	@media screen and (max-width:750px) {
		#footer .footer {
			padding: 10.9% 0 7.8%;
		}
	}
/* ( .footer > ul ) */
#footer .footer ul {
	padding-left: 24px;
}
#footer .footer li {
	display: inline-block;
	font-family: teko, sans-serif;
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 90%;
}
#footer .footer li + li {
	padding-left: 24px;
}
#footer .footer li a {
	position: relative;
	display: block;
}
	@media screen and (max-width:750px) {
		#footer .footer ul {
			padding: 0;
			margin: 0 0 7%;
		}
		#footer .footer li {
			font-size: 3.75vw;
		}
		#footer .footer li + li {
			padding-left: 4.6%;
		}
	}
/* copy */
#footer .footer .copy small {
	font-family: teko, sans-serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.05em;
}
#footer .footer .copy small br {
	display: none;
}
	@media screen and (max-width: 1000px) {
		#footer .footer .copy small {
			font-size: 10px;
		}
	}
	@media screen and (max-width:750px) {
		#footer .footer .copy small {
			font-size: 2.5vw;
		}
	}
/*=================================================
#menu
==================================================*/
#menu {
	display: block;
	backface-visibility: hidden;
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: auto;
	right: auto;
	background: #070b20;
	width:100%;
	height:0px;
	opacity:1;
	overflow:hidden;
	-webkit-transition: height 0.6s ease 0.6s;
	-moz-transition: height 0.6s ease 0.6s;
	-o-transition: height 0.6s ease 0.6s;
	-ms-transition: height 0.6s ease 0.6s;
	transition: height 0.6s ease 0.6s;
	z-index: -1;
}
.menu_open #menu {
	top: auto;
	bottom:0px;
	height:100%;
	-webkit-transition: height 0.6s ease 0s;
	-moz-transition: height 0.6s ease 0s;
	-o-transition: height 0.6s ease 0s;
	-ms-transition: height 0.6s ease 0s;
	transition: height 0.6s ease 0s;
	z-index: 100;
}
#menu #menuscrollwrap {
	/*AP*/
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	height:100%;
	background: #070b20;
	box-sizing:border-box;
}
#menu .inner {
	max-width: 1100px;
	width: 84%;
	margin: 240px auto !important;
}
#menu > * {
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 90%;
}
#menu .jp {
	font-family: YuGothic, Yu Gothic, "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	font-weight: 700;
}
#menu .cont_wrap {
	padding-bottom: 80px;
}
#menu a {
	display: block;
	opacity:1;
	transition: opacity 0.3s ease 0s;
	top:0px;
	position:relative;
	margin-top:0px;
}
#menu a.testlink {
	position:absolute;
	top: 50%;
	z-index: 9999;
}
#menu .menu_ttl {
	color: #df0615;
	font-size: 60px;
	line-height: 90%;
}
#menu .ttl {
	position: relative;
	font-size: 24px;
	padding: 0 0 15px;
	margin: 0 0 35px;
}
#menu .ttl::after {
	position: absolute;
	content: "";
	background: #df0615;
	width: 20px;
	height: 4px;
	bottom: 0;
	left: 0;
}
#menu .main_ttl {
	font-size: 80px;
	line-height: 90%;
}
#menu .sub_ttl {
	font-size: 26px;
	letter-spacing: 0.01em;
}
#menu .sub_ttl .txt_container {
	line-height: 90%;
}
#menu .sub_ttl .unit {
	font-size: 20px;
}
#menu .sub_ttl .sub {
	display: block;
	font-size: 20px;
}
#menu .cont02_03 p {
	font-size: 20px;
}
	@media (min-width: 1001px) {
		#menu .cont02_03 {
			position: fixed;
			left: 50%;
			margin-left: 165px;
			display: flex;
		}
		#menu .cont02 {
			padding-right: 70px;
		}
	}
	@media (min-width: 751px) and (max-width: 1350px) {
		#menu .cont02_03 {
			left: auto;
			right: 0;
			margin: 0 10% 0 0;
		}
	}
	@media (min-width: 751px) {
		#menu .cont_wrap {
			display: flex;
			justify-content: space-between;
		}
		#menu .menu_ttl {
			position: absolute;
			margin-top: -85px;
		}
		#menu .cont01 {
			position: relative;
			flex: 1;
		}
	}
	@media screen and (max-width: 1400px) {
		#menu .main_ttl {
			font-size: 5.71vw;
		}
		#menu .sub_ttl {
			font-size: 1.9vw;
		}
		#menu .sub_ttl .sub {
			font-size: 1.43vw;
		}
	}
	@media screen and (max-width: 1100px) {
		#menu .cont02 {
			padding-right: 40px;
		}
	}
	@media screen and (max-width: 1000px) {
		#menu .cont02_03 .ttl {
			margin: 0 0 20px;
		}
		#menu .cont02 {
			padding-bottom: 50px;
		}
		#menu .sub_ttl {
			font-size: 2.6vw;
		}
	}
	@media screen and (max-width: 750px) {
		#menu .inner {
			position: static;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;
			width: auto;
			margin: 30% 4% 46% !important;
			box-sizing: border-box;
			padding: 0 50px;
		}
		#menu .cont_wrap {
			padding-bottom: 24.4%;
		}
		#menu .menu_ttl {
			font-size: 9.375vw;
			padding-bottom: 10%;
		}
		#menu .main_ttl {
			font-size: 9.375vw;
		}
		#menu .ttl {
			font-size: 4.687vw;
			letter-spacing: 0.05em;
			padding: 0 0 3.75%;
			margin: 0 0 11.2%;
		}
		#menu .ttl::after {
			width: 8.3%;
		}
		#menu .sub_ttl {
			font-size: 4.687vw;
		}
		#menu .sub_ttl .unit {
			font-size: 3.125vw;
		}
		#menu .sub_ttl .sub {
			font-size: 3.75vw;
		}
		#menu a p,
		#menu div p,
		#menu .cont02_03 p {
			font-size: 4.687vw;
		}
		#menu .cont02 {
			padding: 0 0 11%;
		}
	}
	@media screen and (max-width: 480px) {
		#menu .inner {
			padding: 0 36px;
		}
	}
/* cont01
------------------------------------------------ */
#menu .menu_contents {
	padding-bottom: 80px;
}
#menu .menu_contents li a {
	display: inline-block;
}
#menu .menu_contents li + li {
	padding-top: 10px;
}
#menu .menu_contents li br {
	display: none;
}
#menu .list_link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 56%;
	padding: 0 0 35px;
}
#menu .list_link li {
	width: 22.58%;
	padding-right: 3.2%;
	padding-top: 20px;
}
#menu .list_link li + li {
	padding-top: 20px;
}
#menu .list_link li:nth-child(4n) {
	padding-right: 0;
}
#menu .list_link li figure img {
	width: 100%;
}
#menu .list_link li p {
	padding-top: 16px;
}
#menu .list_link li p .sub {
	padding-top: 2px;
}
/* 2021 */
#menu .list_link2021 li .sp {
	display: none;
}
	@media screen and (max-width: 1000px) {
		#menu .list_link {
			width: 90%;
		}
	}
	@media screen and (max-width: 750px) {
		#menu .cont01 {
			padding: 0 0 20%;
		}
		#menu .menu_contents {
			padding-bottom: 20%;
		}
		#menu .menu_contents li + li {
			padding-top: 20px;
		}
		#menu .menu_contents li br {
			display: block;
		}
		#menu .list_link {
			width: 100%;
			padding: 0 0 6%;
		}
		#menu .list_link li {
			width: 43%;
			padding-right: 5.5%;
		}
		#menu .list_link li:nth-child(2n) {
			padding-right: 0;
		}
		#menu .list_link li p {
			padding: 6% 0 0;
		}
		#menu .list_link li p .sub {
			padding-top: 0;
		}
		/* 2021 */
		#menu .list_link2021 li .pc {
			display: none;
		}
		#menu .list_link2021 li .sp {
			display: block;
		}
		#menu .list_link2021 li {
			padding-right: 0;
		}
		#menu .list_link2021 li:first-child {
			width: 91.5%;
		}
		#menu .list_link2021 li:first-child p {
			padding: 3% 0 10%;
		}
		#menu .list_link2021 li:nth-child(2n) {
			padding-right: 5.5%;
		}
		#menu .list_link:last-of-type li:nth-last-of-type(1) p,
		#menu .list_link:last-of-type li:nth-last-of-type(2) p {
			padding-bottom: 0;
		}
		#menu .menu_otherstories li p {
			padding-bottom: 20%;
		}
	}
/* cont02
------------------------------------------------ */
#menu .menu_language li + li {
	padding-top: 10px;
}
#menu .menu_language p .sub {
	display: block;
	color: #df0615;
	font-size: 16px;
}
#menu .menu_language li p .jp {
	font-size: 12px;
}
	@media screen and (max-width: 750px) {
		#menu .menu_languageli {
			font-size: 4.16%;
		}
		#menu .menu_language li {
			margin: 0 0 4%;
		}
		#menu .menu_language p .sub {
			font-size: 3.75vw;
		}
		#menu .menu_language li p .jp {
			font-size: 2.8vw;
		}
	}
/* cont03
------------------------------------------------ */
#menu .menu_links .jp {
	font-weight: 700;
}
#menu .menu_links > ul > li {
	padding: 0 0 30px;
}
#menu .menu_links p .sub {
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	line-height: 100%;
}
#menu .menu_links p .link {
	position: relative;
	margin-top: 10px;
	padding-right: 17px;
}
#menu .menu_links p .link::after {
	position: absolute;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_link.svg) no-repeat 0 50%;
	background-size: contain;
	top: 8px;
	right: 0;
	width: 10px;
	height: 8px;
}
	@media screen and (max-width:1000px) {
		#menu .menu_links p .link {
			margin-top: 0;
		}
		#menu .menu_links > ul > li:first-child {
			padding-bottom: 20px;
		}
	}
	@media screen and (max-width:750px) {
		#menu .menu_links > ul > li {
			padding: 0 0 7.9%;
		}
		#menu .menu_links > ul > li:last-child {
			padding: 0;
		}
		#menu .menu_links p .sub {
			font-size: 3.125vw;
			letter-spacing: 0.05em;
		}
		#menu .menu_links p .link::after {
			top: 0;
			margin-top: 0.45em;
		}
	}
/* list_account */
#menu .menu_links .list_account p {
	padding: 0 0 10px;
}
#menu .menu_links .list_account ul {
	overflow: hidden;
}
#menu .menu_links .list_account li {
	float: left;
	padding-right: 10px;
}
#menu .menu_links .list_account li:last-child {
	padding: 0;
}
#menu .menu_links .list_account li a {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	margin: 0 auto;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_hexagon.png) no-repeat 0 0;
	background-size: cover;
	text-align: center;
	line-height: 44px;
}
#menu .menu_links .list_account .fb img {
	width: 14px;
	height: 14px;
}
#menu .menu_links .list_account .youtube img {
	width: 16px;
	height: 14px;
}
#menu .menu_links .list_account .instagram img {
	width: 16px;
	height: 16px;
}
	@media screen and (max-width:750px) {
		#menu .menu_links .list_account li {
			width: 13%;
		}
		#menu .menu_links .list_account li a {
			width: 100%;
			height: auto;
			padding: 100% 0 0;
			background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_hexagon_red.png) no-repeat 0 0 / contain;
		}
		#menu .menu_links .list_account li a .txt_container {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
		#menu .menu_links .list_account .fb img,
		#menu .menu_links .list_account .youtube img,
		#menu .menu_links .list_account .instagram img {
			width: 38%;
			height: 38%;
		}
	}
/* transition */
.menu_open [class*=menu_grp] {
	opacity:1;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}
.menu_open .menu_grp1 {
	transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}
.menu_open .menu_grp2 {
	transition: opacity 0.5s ease 0.7s, transform 0.5s ease 0.7s;
}
.menu_open .menu_grp3 {
	transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;
}
.menu_open .menu_grp4 {
	transition: opacity 0.5s ease 1.1s, transform 0.5s ease 1.1s;
}
.menu_open .menu_grp5 {
	transition: opacity 0.5s ease 1.3s, transform 0.5s ease 1.3s;
}
.menu_open .menu_grp6{
	transition: opacity 0.5s ease 1.5s, transform 0.5s ease 1.5s;
}
.menu_open .menu_grp7{
	transition: opacity 0.5s ease 1.7s, transform 0.5s ease 1.7s;
}
.menu_open .menu_grp8 {
	transition: opacity 0.5s ease 1.9s, transform 0.5s ease 1.9s;
}
.menu_open .menu_grp9{
	transition: opacity 0.5s ease 2.1s, transform 0.5s ease 2.1s;
}
.menu_open .menu_grp10 {
	transition: opacity 0.5s ease 2.3s, transform 0.5s ease 2.3s;
}
.menu_open .menu_grp11 {
	transition: opacity 0.5s ease 2.5s, transform 0.5s ease 2.5s;
}
.menu_open .menu_grp12 {
	transition: opacity 0.5s ease 2.7s, transform 0.5s ease 2.7s;
}
.menu_open .menu_grp13 {
	transition: opacity 0.5s ease 2.9s, transform 0.5s ease 2.9s;
}
.menu_open .menu_grp14{
	transition: opacity 0.5s ease 3.1s, transform 0.5s ease 3.1s;
}
.menu_open .menu_grp15 {
	transition: opacity 0.5s ease 3.3s, transform 0.5s ease 3.3s;
}
.menu_open .menu_grp16 {
	transition: opacity 0.5s ease 3.5s, transform 0.5s ease 3.5s;
}
.menu_open .menu_grp17 {
	transition: opacity 0.5s ease 3.7s, transform 0.5s ease 3.7s;
}
.menu_open .menu_grp18 {
	transition: opacity 0.5s ease 3.9s, transform 0.5s ease 3.9s;
}
.menu_open .menu_grp19 {
	transition: opacity 0.5s ease 4.1s, transform 0.5s ease 4.1s;
}
.menu_open .menu_grp20 {
	transition: opacity 0.5s ease 4.3s, transform 0.5s ease 4.3s;
}
.menu_open .menu_grp21 {
	transition: opacity 0.5s ease 4.5s, transform 0.5s ease 4.5s;
}
.menu_open .menu_grp22 {
	transition: opacity 0.5s ease 4.7s, transform 0.5s ease 4.7s;
}
.menu_open .menu_grp23 {
	transition: opacity 0.5s ease 4.9s, transform 0.5s ease 4.9s;
}
.menu_open .menu_grp24 {
	transition: opacity 0.5s ease 5.1s, transform 0.5s ease 5.1s;
}
.menu_open .menu_grp25 {
	transition: opacity 0.5s ease 5.3s, transform 0.5s ease 5.3s;
}
/* 2022 */
.menu_open .menu_grp26 {
	transition: opacity 0.5s ease 5.5s, transform 0.5s ease 5.5s;
}
.menu_open .menu_grp27 {
	transition: opacity 0.5s ease 5.7s, transform 0.5s ease 5.7s;
}
.menu_open .menu_grp28 {
	transition: opacity 0.5s ease 5.9s, transform 0.5s ease 5.9s;
}
.menu_open .menu_grp29 {
	transition: opacity 0.5s ease 6.1s, transform 0.5s ease 6.1s;
}
[class*=menu_grp] {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-ms-transform: translateY(40px);
	transform: translateY(40px);
	transition: opacity 0.5s ease 0s,transform 0.5s ease 0s;
}
/*=================================================
btn_grid
==================================================*/
.btn_grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 17px;
	height: 17px;
}
.btn_grid .dot {
	width: 3px;
	height: 3px;
	background: #fff;
	opacity: 1;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-animation: project-icon 3s ease infinite alternate;
	animation: project-icon 3s ease infinite alternate
}
.btn_grid .dot:nth-child(3n+1) {
    margin-right: 4px
}
.btn_grid .dot:nth-child(3n+2) {
    margin-right: 4px;
    margin-bottom: 4px
}
.btn_grid .dot:nth-child(2),
.btn_grid .dot:nth-child(4) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s
}
.btn_grid .dot:nth-child(3),
.btn_grid .dot:nth-child(5),
.btn_grid .dot:nth-child(7) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s
}
.btn_grid .dot:nth-child(6),
.btn_grid .dot:nth-child(8) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}
.btn_grid .dot:nth-child(9) {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s
}
    @-webkit-keyframes project-icon {
        0%,
        70% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
    @keyframes project-icon {
        0%,
        70% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
	}
	@media (max-width: 750px) {
		.btn_grid {
			width: 27px;
			height: 27px;
		}
		.btn_grid .dot {
            -webkit-animation: none;
			animation: none;
			width: 5px;
			height: 5px;
		}
		.btn_grid .dot:nth-child(3n+1) {
			margin-right: 6px
		}
		.btn_grid .dot:nth-child(3n+2) {
			margin-right: 6px;
			margin-bottom: 6px
		}
	}
	@media (max-width: 480px) {
		.btn_grid {
			width: 17px;
			height: 17px;
		}
		.btn_grid .dot {
			width: 3px;
			height: 3px;
		}
		.btn_grid .dot:nth-child(3n+1) {
			margin-right: 4px
		}
		.btn_grid .dot:nth-child(3n+2) {
			margin-right: 4px;
			margin-bottom: 4px
		}
	}
.menu_close {
	position: relative;
}
.menu_close .dot {
	display: none;
	-webkit-animation: none;
    animation: none;
    height: 2px;
}
.menu_close .dot:first-child,
.menu_close .dot:last-child {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 24px;
	margin: -2px 0 0 -3px;
}
.menu_close .dot:first-child {
	-webkit-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	transform: rotate(315deg);
}
.menu_close .dot:last-child {
	-webkit-transform: rotate(-315deg);
	-ms-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/*==================================================
MYMODAL
==================================================*/
#mymodal #mymodalmask{
	overflow: auto;
	position: relative;
	padding: 0px;
	margin: 0px;
	width: 100%;
	max-width: 100%;
	height: 100%;
	z-index:6002;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#mymodal{
	position:fixed;
	z-index:6000;
	width:100%;
	height:100%;
	padding-bottom:1px;
	top:0px;
	left:0px;
	display:none;
	background-color: #070b20;
}
#mymodal.nobg{
	background:none;
}
#mymodalheader {
	position:fixed;
	z-index:6500;
	width:100%;
	top:0px;
	left:0px;
}
#mymodal_clickarea_top{
	position:fixed;
	z-index:6001;
	width:100%;
	top:0px;
	left:0px;
	bottom:auto;
	right:auto;
}
#mymodal_clickarea_bottom{
	position:fixed;
	z-index:6001;
	width:100%;
	top:auto;
	left:0px;
	bottom:0px;
	right:auto;
}
#mymodal_clickarea_right{
	position:fixed;
	z-index:6001;
	height:100%;
	top:0px;
	left:auto;
	bottom:auto;
	right:0px;
}
#mymodal_clickarea_left{
	position:fixed;
	z-index:6001;
	height:100%;
	top:0px;
	left:0px;
	bottom:auto;
	right:auto;
}
#mymodal header{
	display:none;
}
#mymodal .btn_close{
	display:none;
}
/*==================================================
modal
==================================================*/
.modal img {
	width: 100%;
}
.modal p {
	line-height: 170%;
}
	@media screen and (max-width: 750px) {
		.modal p {
			font-size: 2.8vw;
		}
	}
/* pager */
.modal .pager .btn_prev {
	position: fixed;
	top: 50%;
	left: 5.4%;
	width: 52px;
	height: 52px;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_close.png) no-repeat 50% 50% / contain;
	z-index: 30;
}
.modal .pager .btn_next {
	position: fixed;
	top: 50%;
	right: 5.4%;
	width: 52px;
	height: 52px;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_close.png) no-repeat 50% 50% / contain;
	z-index: 30;
}
.modal .pager .btn_prev a,
.modal .pager .btn_next a {
	display: block;
	width: 100%;
	height: 100%;
}
.modal .pager .btn_prev .txt_container,
.modal .pager .btn_next .txt_container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
.modal .pager .btn_prev img,
.modal .pager .btn_next img {
	width: 10px;
	height: 8px;
}
.modal .pager .btn_prev img {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	margin-right: 3px;
}
.modal .pager .btn_next img {
	margin-left: 3px;
}
.modal .btn_close {
	position: fixed;
	top: 75px;
	right: 5.4%;
	width: 52px;
	margin-left: 600px;
	z-index: 1000;
	cursor: pointer;
}
.modal .btn_close img {
	width: 100%;
}
	@media screen and (max-width: 1400px) {
		.modal .pager .btn_prev {
			left: 0;
			margin-left: 1.5%;
		}
		.modal .pager .btn_next {
			right: 0;
			margin-right: 1.5%;
		}
		.modal .btn_close {
			top: 0;
			right: 1.5%;
			margin-top: 3%;
			margin-left: 0;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_product .pager .btn_prev,
		.modal_product .pager .btn_next {
			display: none;
		}
		.modal .pager .btn_prev {
			margin-left: 3%;
		}
		.modal .pager .btn_next {
			margin-right: 3%;
		}
		.modal .btn_close {
			left: 3%;
			right: auto;
			margin-top: 15px;
			z-index: 7000;
		}
	}
	@media screen and (max-width: 750px) {
		.modal .pager .btn_prev,
		.modal .pager .btn_next {
			width: 9.375%;
			height: auto;
			padding: 9.375% 0 0;
		}
		.modal .pager .btn_prev img,
		.modal .pager .btn_next img {
			width: 15%;
			height: auto;
		}
		.modal .pager .btn_prev img {
			margin-right: 5%;
		}
		.modal .pager .btn_next img {
			margin-left: 5%;
		}
		.modal .btn_close {
			margin-top: 3%;
			width: 9.375%;
		}
	}
/* ----------------------------------------------
header
------------------------------------------------ */
	@media (min-width: 1001px) {
		#modal #header {
			display: none;
		}
	}
/* ----------------------------------------------
modal_director
------------------------------------------------ */
	@media (min-width: 1001px) {
		.modal_director .slide {
			height: 100vh;
		}
	}
/* slide01 */
	@media (min-width: 1001px) {
		.modal_director .slide01 .contents {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			min-height: 710px;
		}
		.modal_director .slide01 .contents > div {
			width: 50%;
			height: 100vh;
			display: flex;
			align-items: center;
			min-height: 710px;
		}
	}
.modal_director .slide01 .cont01 figure {
	width: 366px;
	margin: 0 auto;
}
.modal_director .slide01 .cont01 .txt01 {
	padding: 35px 0 3px;
	color: #e60012;
	font-size: 16px;
	font-family: teko, sans-serif;
    font-weight: 300;
}
.modal_director .slide01 .cont01 .txt02 {
	padding-bottom: 15px;
	font-weight: 700;
	font-size: 32px;
	font-family: teko, sans-serif;
    font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 120%;
}
.modal_director .slide01 .cont01 .txt03 {
	font-size: 13px;
	line-height: 150%;
}
.modal_director .slide01 .cont02::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/bg_dot.png) repeat 0 0;
	z-index: 2;
}
.modal_director .slide01 .cont02 .txt00 {
	line-height: 150%;
}
.modal_director .slide01 .cont02 .txt01 {
	padding-top: 30px;
	font-family: teko, sans-serif;
    font-weight: 300;
	font-size: 26px;
}
.modal_director .slide01 .cont02 .txt01 .hi {
	display: inline-block;
	font-size: 0.88em;
	transform: translateY(-2px);
}
	@media (min-width: 1401px) {
		.modal_director .slide01 .cont01 .inner {
			max-width: 660px;
			width: 62.5%;
			margin-left: auto;
		}
		.modal_director .slide01 .cont02 .inner {
			max-width: 660px;
			margin-left: 15%;
		}
		.modal_director .slide01 .cont01 .txt_wrap {
			width: 366px;
		}
		.modal_director .slide01 .cont02 .txt_wrap {
			width: 60%;
		}
	}
	@media  (min-width: 1001px) and (max-width: 1400px) {
		.modal_director .slide01 .cont01 .inner,
		.modal_director .slide01 .cont02 .inner {
			display: flex;
			width: 100%;
		}
		.modal_director .slide01 .cont01 .inner {
			padding: 0 10% 0 20%;
		}
		.modal_director .slide01 .cont02 .inner {
			padding: 0 20% 0 10%;
		}
	}
	@media screen and (max-width: 1400px) {
		.modal_director .slide01 .cont01 .txt_wrap,
		.modal_director .slide01 .cont02 .txt_wrap {
			max-width: 366px;
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_director .slide01 .cont01 .txt_wrap,
		.modal_director .slide01 .cont02 .txt_wrap {
			max-width: 1000px;
		}
		.modal_director .slide01 .contents .cont01,
		.modal_director .slide01 .contents .cont02 {
			width: 62.5%;
			padding: 0 18.75%;
		}
		.modal_director .slide01 .contents .cont01 {
			padding-top: 10%;
			padding-bottom: 20%;
		}
		.modal_director .slide01 .contents .cont02 {
			padding-top: 20%;
			padding-bottom: 20%;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_director .slide01 .cont01 figure {
			width: 100%;
		}
		.modal_director .slide01 .cont01 .txt01 {
			padding: 11% 0 0;
			font-size: 2.9vw;
		}
		.modal_director .slide01 .cont01 .txt02 {
			padding-bottom: 4%;
			font-size: 5.33vw;
		}
		.modal_director .slide01 .cont01 .txt03 {
			font-size: 3.125vw;
			line-height: 150%;
		}
		.modal_director .slide01 .cont02 .txt00 {
			font-size: 3.4375vw;
			line-height: 150%;
		}
		.modal_director .slide01 .cont02 .txt01 {
			font-size: 5.33vw;
			padding-top: 6%;
		}
	}
/* slide02 */
.modal_director .slide02 {
	position: relative;
}
.modal_director .slide02 .contents {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 800px;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.modal_director .slide02 p {
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	font-size: 60px;
	line-height: 90%;
	padding-bottom: 20px;
}
.modal_director .slide02 iframe {
	width: 800px;
	height: 460px;
	border: none;
}
	@media (min-width: 1001px) {
		.modal_director .slide02 {
			min-height: 630px;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_director .slide02 {
		    height: 100vh;
		}
		.modal_director .slide02 .contents {
			width: 62.5%;
			padding: 0 18.75%;
		}
		.modal_director .slide02 .iframe {
			position: relative;
			width: 100%;
			padding: 57.5% 0 0;
		}
		.modal_director .slide02 iframe {
			position: absolute!important;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_director .slide02 p {
			font-size: 9.35vw;
			padding-bottom: 5%;
		}
	}
/* ----------------------------------------------
modal_product
------------------------------------------------ */
.modal_product {
	background: #070b20;
}
.modal_product_innner {
	position: relative;
	width: 100%;
}
.modal_product .slide {
	position: relative;
}
	@media (min-width: 1001px) {
		.modal_product {
			display: flex;
			align-items: center;
		}
		.modal_product_innner {
			height: 100vh;
			min-height: 720px;
		}
		.modal_product .slide {
			height: 100vh;
		}
		.modal_product .contents {
			position: relative;
			display: flex;
			width: 100%;
		    align-items: center;
			justify-content: center;
			z-index: 10;
		}
		.modal_product .left_column,
		.modal_product .right_column {
			width: 50%;
			height: 100vh;
			display: flex;
		    align-items: center;
			justify-content: center;
			text-align: left;
			box-sizing: border-box;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_product_innner {
			width: 76.25%;
			padding: 15% 0 0;
			margin: 0 auto;
			overflow: hidden;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_product h3:before {
			width: 22% !important;
		}
		.modal_product_innner {
			width: auto;
			margin: 9% 4% 0 !important;
			box-sizing: border-box;
			padding: 15% 50px 0;
		}
	}
	@media screen and (max-width: 480px) {
		.modal_product_innner {
			padding: 15% 36px 0;
		}
	}
/* ttl_wrap */
.modal_product h2 {
	text-align: center;
	font-family: teko, sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 120%;
}
.modal_product h2 span.str_features {
	display: block;
	margin-top: 20px;
	font-size: 50px;
}
.modal_product .img_main {
	width: 275px;
	margin: 0 auto;
}
.modal_product .img_main_sp {
	display: none;
}
	@media (min-width: 1001px) {
		.modal_product h2 {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			margin-top: -300px;
			z-index: 2;
		}
		.modal_product .ttl_wrap {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			z-index: 20;
		}
	}
	@media (min-width: 1001px) and (max-width: 1400px) {
		.modal_product h2 {
			margin-top: -20%;
			font-size: 1.6vw;
		}
		.modal_product h2 span.str_features {
			font-size: 3.37vw;
		}
		.modal_product .img_main {
			width: 220px;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_product .img_main {
			display: none;
		}
		.modal_product .img_main_sp {
			display: block;
			max-width: 500px;
			width: 100%;
			margin: 13.7% auto 10%;
		}
		.modal_product h2 {
			margin: 0 0 12%;
			text-align: left;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_product h2 {
			font-size: 3.72vw;
		}
		.modal_product h2 span.str_features {
			margin-top: 5%;
			font-size: 9.37vw;
		}
	}
/* common -txt */
.modal_product h3 {
	position: relative;
	padding: 42px 0 0;
	margin: 0 0 15px;
	font-size: 110px;
	font-family: teko, sans-serif;
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 90%;
}
.modal_product h4 {
	margin: 0 0 20px;
	font-family: teko, sans-serif;
    font-weight: 300;
    font-size: 28px;
	line-height: 200%;
}
.modal_product .slide01 .left_column h4 {
	line-height: 130%;
	margin-bottom: 5px;
	font-family: teko, sans-serif;
    font-weight: 300;
    font-size: 26px;
}
.modal_product h4 .txt_sup {
	position: relative;
	padding-right: 0.3em;
}
.modal_product h4 .txt_sup span {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 10px;
	line-height: 100%;
}
.modal_product .txt_note {
	max-width: 340px;
	width: 100%;
	color: #e60012;
	font-size: 12px;
	line-height: 150%;
	box-sizing: border-box;
	text-indent: -1.3em;
	padding-left: 1.3em;
	margin-left: 1.3em;
}
.modal_product .slide01 .right_column p {
	line-height: 150%;
}
.modal_product .btn_wrap {
	padding-top: 30px;
	max-width: 348px;
	width: 100%;
}
.modal_product .btn_wrap .ttl {
	position: relative;
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 100%;
	font-size: 22px;
	line-height: 100%!important;
	letter-spacing: 0.01em;
	padding-bottom: 12px;
	margin-bottom: 12px;
}
.modal_product .btn_wrap .ttl::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 20px;
	height: 4px;
	background: #df0615;
}
.modal_product .btn_wrap li {
	padding: 10px 0 5px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}
.modal_product .btn_wrap li p {
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 100%;
	font-size: 24px;
}
.modal_product .btn_wrap li p .link {
	position: relative;
	padding-right: 17px;
}
.modal_product .btn_wrap li p .link::after {
	position: absolute;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/index/icn_link.svg) no-repeat 0 50%;
	background-size: contain;
	top: 50%;
	right: 0;
	width: 10px;
	height: 8px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-top: -0.05em;
}
.modal_product .btn_wrap li a {
	display: inline-block;
}
.modal_product .btn_wrap .note {
	color: #9c9c9c;
	font-family: 'Calibre-Regular';
	font-size: 12px;
	padding-top: 6px;
}
.modal_product .btn_wrap.sp {
	display: none;
}
	@media(min-width: 751px) {
		.modal_product .btn_wrap ul {
			display: flex;
			flex-wrap: wrap;
		}
		.modal_product .btn_wrap li {
			width: calc(100% / 3);
		}
	}
	@media(min-width: 1001px) and (max-width: 1480px) {
		.modal_product h3 {
			position: relative;
			padding: 30px 0 0;
			margin: 0 0 7%;
			font-size: 7.4vw;
		}
		.modal_product h4 {
			font-size: 1.89vw;
		}
		.modal_product .slide01 .right_column p {
			font-size: 0.9vw;
		}
		.modal_product p {
			font-size: 1vw;
		}
		.modal_product .txt_note {
			font-size: 0.8vw;
		}
		.modal_product .btn_wrap .ttl {
			font-size: 1.48vw;
		}
		.modal_product .btn_wrap li p {
			font-size: 1.6vw;
		}
		.modal_product .btn_wrap .note {
			font-size: 0.8vw;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_product .btn_wrap.pc {
			display: none;
		}
		.modal_product .btn_wrap.sp {
			display: block;
		}
		.modal_product .btn_wrap {
			max-width: 100%;
			padding-top: 60px;
		}
		.modal_product .txt_note {
			max-width: 100%;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_product h3 {
			padding: 10% 0 0;
			margin: 0 0 5%;
			font-size: 21.87vw;
		}
		.modal_product h4 {
			margin: 0 0 3%;
			font-size: 2.3vw;
		}
		.modal_product h4 .txt_sup span {
			font-size: 3.5vw;
		}
		.modal_product .slide01 .left_column h4 {
			font-size: 5.625vw;
			line-height: 120%;
		}
		.modal_product p {
			font-size: 3.4375vw;
			line-height: 150%;
		}
		.modal_product .txt_note {
			font-size: 3vw;
		}
		.modal_product .btn_wrap {
			padding-top: 18%;
		}
		.modal_product .btn_wrap .ttl {
			font-size: 4.68vw;
			padding-bottom: 4%;
			margin-bottom: 5.4%;
		}
		.modal_product .btn_wrap .ttl::after {
			width: 8%;
		}
		.modal_product .btn_wrap li {
			padding: 4.5% 0 2.25%;
		}
		.modal_product .btn_wrap li p {
			font-size: 6.25vw;
		}
		.modal_product .btn_wrap .note {
			font-size: 2.5vw;
			line-height: 140%;
			padding-top: 5%;
		}
	}
/* left_column */
.modal_product .left_column .img_product {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
}
.modal_product .left_column .img_product li {
	height: 100%;
}
/* right_column */
.modal_product .right_column {
	padding: 0 13.2%;
}
.modal_product .right_column h4 {
	line-height: 123%;
}
.modal_product .right_column h4.viewSp {
	display: none;
}
	@media (min-width: 1001px) {
		.modal_product .right_column h4 {
			margin: 0 0 17px;
		}
	}
	@media screen and (max-width: 1400px) {
		.modal_product .right_column {
			padding: 0 10% 0 14%;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_product .right_column {
			padding: 0;
		}
		.modal_product h4 {
			margin: 0 0 6%;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_product .right_column h4 {
			font-size: 7.8125vw;
			line-height: 105%;
			margin: 0 0 4%;
		}
		.modal_product .right_column h4.viewPc {
			display: none;
		}
		.modal_product .right_column h4.viewSp {
			display: block;
		}
	}
/* right_column > list_product */
.modal_product .list_product li {
	margin: 0 0 30px;
}
.modal_product .list_product li a {
	display: block;
	position: relative;
	padding: 0 0 0 45px;
	font-size: 20px;
	color: #73081a;
	font-weight: 700;
	line-height: 100%;
	transition: all .3s;
}
.modal_product .list_product li a:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	content: "";
	background: url(https://www.citizenwatch-global.com/promaster_stb/8oceans/img/modal/product/icn_arrow_red.svg) no-repeat 50% 50% / cover;
	transition: all .3s;
	opacity: 0;
}
.modal_product .list_product li:hover a:before,
.modal_product .list_product li.current a:before {
	opacity: 1;
}
.modal_product .list_product li a span.str1 {
	display: block;
	margin-bottom: 1px;
	font-size: 16px;
	font-family: teko, sans-serif;
    font-weight: 300;
	overflow:hidden;
}
.modal_product .list_product li a span.str2 {
	display: block;
	overflow:hidden;
	font-size: 32px;
	font-family: teko, sans-serif;
	font-weight: 300;
	line-height: 100%;
}
.modal_product .list_product li:hover a,
.modal_product .list_product li.current a {
	color: #fff;
}
.modal_product .bottomPager {
	bottom: 60px;
}
/* slide01 */
	@media screen and (max-width: 1480px) {
		.modal_product .list_product li {
			margin: 0 0 6%;
		}
		.modal_product .list_product li a span.str1 {
			font-size: 0.946vw;
		}
		.modal_product .list_product li a {
			font-size: 1.35vw;
		}
	}
	@media screen and (max-width: 1000px) {
		.modal_product .slide01 {
			margin-bottom: 31.5%;
		}
	}
/* slide02 */
/* spContents */
.modal_product .spContents,
.modal_product .bgcolorSp {
	display: none;
}
	@media screen and (max-width: 1000px) {
		.modal_product {
			position: relative;
			overflow: hidden;
		}
		.modal_product .bgcolorSp {
			display: block;
			position: absolute;
			content: "";
			bottom: 0;
			left: -50%;
			width: 200%;
			height: 100%;
			background: #020017;
		}
		.modal_product .spContents {
			display: block;
			padding: 22% 0 30%;
		}
		.modal_product .spContents li {
			margin: 0 0 15%;
		}
		.modal_product .spContents figure {
			margin: 0 0 7.5%;
		}
		.modal_product .spContents p {
			font-size: 24px;
			font-weight: 700;
			line-height: 140%;
			font-family: teko, sans-serif;
			font-weight: 300;
		}
		.modal_product .bottomPager {
			display: none;
		}
		.modal_product .spContents p span.str {
			display: block;
			margin-bottom: 5px;
			font-size: 18px;
		}
	}
	@media screen and (max-width: 750px) {
		.modal_product .spContents p {
			font-size: 7.8125vw;
			line-height: 120%;
		}
		.modal_product .spContents p span.str {
			margin-bottom: 1%;
			font-size: 3.75vw;
			line-height: 110%;
		}
	}
/*==================================================
font-fase
==================================================*/
.fontCalibre_l { font-family: 'Calibre-Light'; }
.fontCalibre_m { font-family: 'Calibre-Medium'; }
.fontCalibre_mi { 	font-family: 'Calibre-MediumItalic'; }
.fontCalibre_r { font-family: 'Calibre-Regular'; }
.fontCalibre_sb { font-family: 'Calibre-Semibold'; }
@font-face {
	font-family: 'Calibre-Light';
	src: url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Light.woff'), url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Light.eot');
}
@font-face {
	font-family: 'Calibre-Medium';
	src: url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Medium.woff'), url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Medium.eot');
}
@font-face {
	font-family: 'Calibre-MediumItalic';
	src: url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-MediumItalic.woff'), url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-MediumItalic.eot');
}
@font-face {
	font-family: 'Calibre-Regular';
	src: url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Regular.woff'), url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Regular.eot');
}
@font-face {
	font-family: 'Calibre-Semibold';
	src: url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Semibold.woff'), url('https://www.citizenwatch-global.com/webfonts/calibre/CalibreWeb-Semibold.eot');
}
/*==================================================
 Swiper
==================================================*/
/**
 * Swiper 4.4.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2018 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: December 19, 2018
 */
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
  float: left;
}
.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  -o-transition-property: transform, height;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-lock {
  display: none;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms opacity;
  -o-transition: 300ms opacity;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms top, 200ms -webkit-transform;
  -o-transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms left, 200ms -webkit-transform;
  -o-transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms right, 200ms -webkit-transform;
  -o-transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #ffffff;
}
.swiper-pagination-progressbar.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
  background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000000;
}
.swiper-pagination-progressbar.swiper-pagination-black {
  background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
  background: #000000;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-container-coverflow .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px;
}
.mainVisual {
	min-width: 1200px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.mainVisual .mainVisualOuter {
	padding-top: 150%;
	width: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.mainVisual .mainVisualInner {
	opacity: 0;
}
.mainVisual .mainVisualCover {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	/* background-color: rgba(0,0,0,0.6); */
}
.mainVisual.js-movie-init .mainVisualInner {
	-webkit-transition: opacity 2s ease-in;
	transition: opacity 2s ease-in;
}
.mainVisual.js-movie-none {
	background-size: cover;
}
.mainVisual.js-movie-none .mainVisualCover {
	opacity: 1;
}
.mainVisual .mainVisualInner,
.mainVisual .mainVisualInner iframe,
.mainVisual .mainVisualCover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.mainVisual.js-movie-play .mainVisualOuter,
.mainVisual.js-movie-play .mainVisualInner,
.mainVisual.js-movie-play .mainVisualCover {
	opacity: 1;
}
@media screen and (max-width: 767px) {
	.mainVisual {
		min-width: 0;
		overflow-x: hidden;
	}
}
/**
 * js --- twentytwenty
 */
 .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }
.twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }
  .twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; }
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }
.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: attr(data-content); }
.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: attr(data-content); }
.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }
.twentytwenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  .twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5); }
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }
.twentytwenty-before {
  z-index: 20; }
.twentytwenty-after {
  z-index: 10; }
.twentytwenty-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; }
.twentytwenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; }
.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }
.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }
 /*==================================================
clearfix
==================================================*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}