@charset "utf-8";

/*resset.css*/
img,
legend {
	border: 0
}

legend,
td,
th {
	padding: 0
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline
}

audio:not([controls]) {
	display: none;
	height: 0
}

[hidden],
template {
	display: none
}

a {
	text-decoration: none;
	background: 0 0
}

a:active,
a:focus,
a:hover {
	outline: 0
}

abbr[title] {
	border-bottom: 1px dotted
}

b,
optgroup,
strong {
	font-weight: 700
}

dfn {
	font-style: normal;
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

mark {
	background: #ff0;
	color: #000
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -.5em
}

sub {
	bottom: -.25em
}

svg:not(:root) {
	overflow: hidden
}

figure {
	margin: 1em 40px
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0
}

pre,
textarea {
	overflow: auto
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0
}

button {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer
}

button[disabled],
html input[disabled] {
	cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}

input {
	line-height: normal
}

input[type=checkbox],
input[type=radio] {
	box-sizing: border-box;
	padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	height: auto
}

input[type=search] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	overflow: hidden
}

* html .clearfix {
	height: 1%
}

.clearfix {
	display: block
}

#container {
	width: 1025px;
	margin: 0 auto;
	min-height: 402px
}

img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none
}

html,
body {
}

/*nav*/
.officebtn {
	width: 129px;
	text-align: center;
	float: right;
	padding: 7px 0;
	margin: 12px 20px 0;
	display: block;
	color: #fff;
	font-weight: 600;
	border: solid 2px #fff;
	font-size: 0.8em;
	transition: all .2s;
}

.officebtn:hover {
	opacity: 0.8;
}

/*navigation*/
#wrap-nav {
	width: 100%;
	height: 60px;
	position: fixed;
	background: rgba(34, 34, 34, 1.00);
	z-index: 9999
}

.wrap-ts {
	width: 100%;
	height: 60px;
	display: block;
}

.box-brand {
	width: 20em;
	display: inline-flex;
	align-items: center;
	margin: 0 10em 0 20%
}

.menu-logo {
	display: none;
}

.flexnav {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform-style: preserve-3d;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	max-height: 0
}

.flexnav.opacity {
	opacity: 0
}

.flexnav.flexnav-show {
	max-height: 2000px;
	opacity: 1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}

.flexnav.one-page {
	position: fixed;
	top: 30px;
	right: 0;
	text-align: center;
	background-color: #222222
}

.flexnav li {
	font-size: 100%;
	position: relative;
	overflow: hidden
}

.flexnav li a {
	font-family: "urw-din", sans-serif;
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 0.06em;
	position: relative;
	display: block;
	padding: 2em .96em;
	z-index: 2;
	overflow: hidden;
	color: #fff;
}

.flexnav li a:hover {
	color: #00dbff
}

.flexnav li ul {
	width: 100%
}

.flexnav li ul li {
	font-size: 100%;
	position: relative;
	overflow: hidden
}

.flexnav li ul.flexnav-show li {
	overflow: visible
}

.flexnav li ul li a {
	display: block;
	background: #b2b2af
}

.flexnav ul li ul li a {
	background: #bfbfbc
}

.flexnav ul li ul li ul li a {
	background: #cbcbc9
}

.flexnav .touch-button {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	display: inline-block;
	background: #acaca1;
	background: rgba(0, 0, 0, 0.075);
	text-align: center
}

.flexnav .touch-button:hover {
	cursor: pointer
}

/*.flexnav .touch-button .navicon{position:relative;top:1.4em;font-size:12px;color:#666}*/
.menu-button {
	position: relative;
	display: block;
	padding: 1em;
	;
	color: #fff;
	cursor: pointer;
}

.menu-button.one-page {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 9999;
	width: 10px;
	height: 10px;
	background: center / cover no-repeat url("../images/icon/icon-menu.svg")
}

.menu-button .touch-button {
	background: transparent;
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	display: inline-block;
	text-align: center
}

/*.menu-button .touch-button .navicon{font-size:16px;position:relative;top:1em;color:#666}*/
@media all and (min-width: 800px) {

	#wrap-nav,
	.wrap-ts {
		height: 60px;
	}

	.box-brand img {
		width: 100%;
		height: auto
	}

	.box-brand {
		margin: 0 10em 0 5%
	}

	/*body.one-page{padding-top:70px}*/
	.flexnav {
		overflow: visible
	}

	.flexnav.opacity {
		opacity: 1
	}

	.flexnav.one-page {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.flexnav li {
		font-family: "urw-din", sans-serif;
		font-weight: 600;
		font-size: .75em;
		position: relative;
		list-style: none;
		float: left;
		display: block;
		overflow: visible;
	}

	.flexnav li a {}

	.flexnav li a:hover {
		color: #00dbff
	}

	.flexnav li>ul {
		position: absolute;
		top: auto;
		left: 0
	}

	.flexnav li>ul li {
		width: 100%
	}

	.flexnav li ul li>ul {
		margin-left: 100%;
		top: 0
	}

	.flexnav li ul li a {
		border-bottom: none
	}

	.flexnav li ul.open {
		display: block;
		opacity: 1;
		visibility: visible;
		z-index: 1
	}

	.flexnav li ul.open li {
		overflow: visible;
		max-height: 100px
	}

	.flexnav li ul.open ul.open {
		margin-left: 100%;
		top: 0
	}

	.menu-button {
		display: none
	}
}


@media screen and (max-width:800px) {
	.box-brand img {
		display: none
	}

	.menu-logo {
		display: block;
		width: 250px;
		margin: 2%
	}

	.menu-logo img {
		width: 60%;
	}

}

@media screen and (max-width:500px) {
	.menu-logo {
		margin: 4%
	}

	.flexnav.one-page {
		top: 60px;
	}

	.officebtn {
		float: none;
		position: absolute;
		left: 43%;
		top: 0;
	}

}

.oldie body.one-page {
	padding-top: 70px
}

.oldie .flexnav {
	overflow: visible
}

.oldie .flexnav.one-page {
	top: 0;
	right: auto;
	max-width: 1080px
}

.oldie .flexnav li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	background-color: #a6a6a2;
	width: 20%;
	min-height: 50px;
	overflow: visible
}

.oldie .flexnav li:hover>ul {
	display: block;
	width: 100%;
	overflow: visible
}

.oldie .flexnav li:hover>ul li {
	width: 100%;
	float: none
}

.oldie .flexnav li a {
	border-left: 1px solid #acaca1;
	border-bottom: none;
	overflow: visible
}

.oldie .flexnav li>ul {
	background: #acaca1;
	position: absolute;
	top: auto;
	left: 0;
	display: none;
	z-index: 1;
	overflow: visible
}

.oldie .flexnav li ul li ul {
	top: 0
}

.oldie .flexnav li ul li a {
	border-bottom: none
}

.oldie .flexnav li ul.open {
	display: block;
	width: 100%;
	overflow: visible
}

.oldie .flexnav li ul.open li {
	width: 100%
}

.oldie .flexnav li ul.open ul.open {
	margin-left: 100%;
	top: 0;
	display: block;
	width: 100%;
	overflow: visible
}

.oldie .flexnav ul li:hover ul {
	margin-left: 100%;
	top: 0
}

.oldie .menu-button {
	display: none
}

.oldie.ie7 .flexnav li {
	width: 19.9%
}

/*lightbox*/
.vbox-overlay *,
.vbox-overlay :before,
.vbox-overlay :after {
	-webkit-backface-visibility: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.vbox-overlay {
	background: rgba(0, 0, 0, 0.85);
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 999;
	opacity: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99999
}

.vbox-preloader {
	position: fixed;
	width: 32px;
	height: 32px;
	left: 50%;
	top: 50%;
	margin-left: -16px;
	margin-top: -16px;
	background-image: url(../images/icon/preload-circle.png);
	text-indent: -100px;
	overflow: hidden;
	-webkit-animation: playload 1.4s steps(18) infinite;
	-moz-animation: playload 1.4s steps(18) infinite;
	-ms-animation: playload 1.4s steps(18) infinite;
	-o-animation: playload 1.4s steps(18) infinite;
	animation: playload 1.4s steps(18) infinite
}

.vbox-close {
	cursor: pointer;
	position: fixed;
	top: -1px;
	right: 0;
	width: 46px;
	height: 40px;
	padding: 10px 20px 10px 0;
	display: block;
	background: url(../images/icon/close.gif) no-repeat #2793e6;
	background-position: 10px center;
	color: #fff;
	text-indent: -100px;
	overflow: hidden
}

.vbox-inline {
	width: 420px;
	height: 315px;
	padding: 10px;
	background: #fff;
	text-align: left;
	margin: 0 auto;
	overflow: auto
}

.venoframe {
	border: none;
	width: 100%;
	height: 99%
}

.vbox-open {
	overflow: hidden
}

.vbox-container {
	position: relative;
	background: #000;
	width: 100%;
	height: 100%
}

.vbox-content {
	position: relative;
	background: #000;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0
}

.vbox-container img {
	max-width: 100%;
	height: auto
}

/*lazy load*/
.lazy-load {
	opacity: 0 !important
}

.lazy-show {
	opacity: 1;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out
}


/*font color*/
.font-white {
	color: rgba(255, 255, 255, 1) !important
}

.font-blue {
	color: rgba(0, 168, 255, 1) !important
}

.font-red {
	color: #ff4c4d;
}

/*Layout*/
.w-row {
	display: block;
	word-break: normal
}

.wrap-txt-cent {
	width: 90%;
	text-align: center;
	margin: 0 auto 0
}

.wrap-txt-left {
	width: 90%;
	text-align: left;
	margin-left: 2%
}

.tablet-show {
	display: none !important
}

.tablet-hide {
	display: block
}

.mobo-show {
	display: none !important
}

.mobo-hide {
	display: block !important
}

/*center layout*/
.wrap-txt-cent .txt-headline {
	margin: 1em;
}

.wrap-txt-cent .txt-index {
	width: 90%;
	margin: -.5em auto 2.5em
}

/*align left layout*/
.wrap-txt-left .txt-headline {
	margin: 1em 1em 1em 0
}

.wrap-txt-left .txt-index {
	width: 95%
}


/*left right layout*/
.qua-hor {
	width: 100%;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

/*copy -> image*/
.qua-hor .wrap-lr {
	width: 100%;
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.qua-hor .wrap-lr .wrap-copy,
.qua-hor .wrap-lr .wrap-main-img {
	display: flex;
}

.qua-hor .wrap-lr .wrap-copy {
	width: 50%;
	order: 1
}

.qua-hor .wrap-lr .wrap-main-img {
	width: 41%;
	order: 2
}

/*image -> copy*/
.qua-hor .wrap-rl {
	width: 100%;
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.qua-hor .wrap-rl .wrap-copy,
.qua-hor .wrap-rl .wrap-main-img {
	display: flex;
}

.qua-hor .wrap-rl .wrap-copy {
	width: 50%;
	order: 2
}

.qua-hor .wrap-rl .wrap-main-img {
	width: 50%;
	order: 1
}

.qua-hor .wrap-copy .wrap-txt-left {
	width: 90%;
	/*max-width:600px;*/
	margin: 0 auto
}

.qua-hor .wrap-highlight {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}

.qua-hor .box-highlight {
	display: block;
	margin: 0 0 5% 0
}

@media all and (max-width:1024px) {
	.qua-hor .wrap-lr {
		flex-flow: column-reverse nowrap;
		justify-content: flex-start
	}

	.qua-hor .wrap-rl {
		flex-flow: column nowrap;
		justify-content: flex-start
	}

	.qua-hor .wrap-rl .wrap-copy {
		width: 100%
	}

	.qua-hor .wrap-rl .wrap-main-img {
		height: 0;
		padding-bottom: 26vw
	}

	.qua-hor .wrap-lr .wrap-copy,
	.qua-hor .wrap-rl .wrap-copy {
		width: 100%
	}

	.qua-hor .wrap-lr .wrap-main-img {
		width: 100%
	}

	.tablet-hide {
		display: none !important
	}

	.tablet-show {
		display: block !important
	}


}

@media all and (max-width:768px) {
	.qua-hor {
		padding: 0
	}

	.qua-hor .wrap-lr .wrap-copy,
	.qua-hor .wrap-rl .wrap-copy {
		width: 100%;
		margin: 0 auto
	}

	.qua-hor .wrap-copy .wrap-txt-left {
		width: 90%;
		max-width: none
	}

	.qua-hor .wrap-lr .wrap-main-img,
	.qua-hor .wrap-rl .wrap-main-img {
		width: 80%;
		margin: 0 auto
	}

	.qua-hor .box-highlight {
		display: flex;
		margin: 1% 2%;
		justify-content: center;
		align-items: center
	}

	.qua-hor .box-highlight .txt-hl {
		display: inline-flex
	}
}

@media all and (max-width:500px) {
	.qua-hor .wrap-copy .wrap-txt-left {
		text-align: center
	}

	.qua-hor .wrap-rl .wrap-main-img {
		height: 0;
		padding-bottom: 18vw
	}
}

@media all and (max-width:380px) {
	.qua-hor .wrap-rl .wrap-main-img {
		height: 0;
		padding-bottom: 15vw
	}
}

/*#*/

/*FONT SIZE*/
.hero-index {
	font-family: "urw-din", sans-serif;
	font-weight: 600;
	font-size: 2.1em !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-wrap: break-word
}

.hero-slogan-kv {
	font-family: 'urw-din-condensed';
    font-style: italic;
	font-weight: 600;
	font-size: 5.0em;
	line-height: 1.1em;
}
.hero-slogan-kv.top{
	 text-shadow: 0 2px 7px rgb(0 0 0);
}

.weight900{
	font-weight: 900;
}
.weight400{
	font-weight: 400;
}

.hero-slogan-nomo {
	font-family: "urw-din", sans-serif;
	font-weight: 600;
	font-size: 4em;
	line-height: 1.1em;
}

.txt-category {
	font-family: 'Noto Sans JP';
	font-size: 1.4em;
	display: inline-block;
	line-height: 1em
}

.txt-headline {
	font-family: 'urw-din-condensed';
    font-style: italic;
	font-weight: 600;
	font-size: 2.0rem !important;
	line-height: 1.25em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-wrap: break-word
}

.txt-index {
	font-family: 'urw-din-condensed';
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1.45em;
	letter-spacing: .02em;
	word-spacing: .04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-wrap: break-word;
	font-style: italic;
}

.txt-index-b {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	font-size: 1.625rem !important;
	line-height: 1.25em;
	letter-spacing: .02em;
	word-spacing: .04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-wrap: break-word
}

.txt-form-list {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	font-size: 1.58rem;
	line-height: 1.25em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-wrap: break-word
}

sup {
	font-family: inherit;
	font-size: .525em;
	vertical-align: middle
}

/* ™ - © - ® */
/*SPACING ( base on ViewPort Heigh )*/
.sp-top,
.sp-b2h,
.sp-b2t,
.sp-h2i,
.sp-i2i,
.sp-i2c,
.sp-sec,
.sp-nomo,
.sp-br {
	width: 100%;
	display: block;
	position: relative;
	z-index: 9999;
	/*background:red*/
}

.sp-top {
	height: 12vh;
	/*spacing-page top to first content( badge or hedline )*/
}

.sp-b2h {
	height: 12vh;
	/*spacing-badge to headLine*/
}

.sp-b2t {
	height: 3vh;
	/*separate head to txt*/
}

.sp-h2i {
	height: 2.5vh;
	/*separate head to index*/
}

.sp-i2i {
	height: 8vh
		/*separate index to images*/
}

.sp-i2c {
	height: 4vh;
	/*separate index to button*/
}

.sp-sec {
	height: 4.5vh;
	/*separate section*/
}

.sp-nomo {
	height: 7vw;
}

.sp-br {
	height: 3.5vh;
}

/*BUTTON*/
.cta-normal,
.cta-blue,
.cta-white,
.cta-black {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	display: inline-block;
	font-family: Noto Sans JP, sans-serif;
	font-style: normal;
	font-size: 1.2em;
	line-height: 1;
	letter-spacing: .02em;
	word-spacing: .04em;
	padding: 1.1em 2.1em;
	margin: .55em auto 0;
	color: rgba(255, 255, 255, 1.00);
	-webkit-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-moz-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-o-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	cursor: pointer;
}

.cta-normal {
	background: rgba(0, 114, 188, 1)
}

.cta-normal:hover {
	background: rgba(0, 114, 188, .8);
	color: rgba(255, 255, 255, 1)
}

.cta-normal:active {
	background: rgba(0, 114, 188, .9);
	color: rgba(255, 255, 255, 1)
}

.cta-blue {
	border: 0.0618em solid rgba(0, 137, 221, 1);
	background: rgba(0, 179, 227, .8)
}

.cta-white {
	border: 0.1em solid rgba(255, 255, 255, 1);
	background: rgba(255, 255, 255, .3)
}

.cta-white:hover {
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, 1)
}

.cta-black {
	background: rgba(0, 0, 0, 1);
	color: white;
	display: block;
}


.btn-more {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.625rem !important;
	line-height: 1.3em;
	letter-spacing: .02em;
	word-spacing: .04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-wrap: break-word;
	color: #00a8ff;
	cursor: pointer;
}

.btn-more::after {
	content: "";
	margin: -4px 0 0 15px;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	display: inline-block;
	background: center / cover no-repeat url("../images/icon/icon-more.svg")
}

/*HD*/
@media screen and (max-width: 1920px) {

	.hero-slogan,
	.hero-slogan-nomo,
	.txt-price {
		font-size: 2em !important;
	}

	/*FONT size*/
	.txt-product-intro {
		font-size: 1.875em;
		line-height: 1.6em
	}
}

@media all and (max-width:1680px) {
	.hero-index {
		font-size: 2.1em;
	}

	.wrap-txt-left .txt-headline {
		font-size: 2em;
	}

	.hero-slogan,
	.hero-slogan-nomo,
	.txt-price {
		font-size: 2.1em;
	}

	/*.wrap-txt-left .txt-index {font-size: 1.3em;}*/
}

/*LAPTOP*/
@media screen and (max-width: 1440px) {
	body {
		font-size: 14px !important;
	}

	.wrap-txt-cent .txt-headline {
		font-size: 2.5em !important;
	}

	.hero-slogan-kv {
		font-size: 3.1em;
	}
}

@media screen and (max-width: 1280px) and (min-height:710px) {}

/*TABLET*/
@media screen and (max-width:1024px) {

	body {
		font-size: 16px !important
	}

	.hero-slogan-kv {
		font-size: 3.45em;
	}

	.tablet-show {
		display: block !important
	}

	.tablet-hide {
		display: none !important
	}

	.sp-sec,
	.sp-top {
		height: 8.65vh
	}

	/*FONTS STYLES*/
	.wrap-txt-cent .txt-index {
		width: 80%;
	}

	/*center layout*/
	.wrap-txt-cent .txt-index {
		font-size: 1.55em;
		line-height: 1.465em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: -.5em auto 2.5em
	}

	/*align left layout*/
	.wrap-txt-left .txt-index {
		width: 95%;
		font-size: 1.55em;
		line-height: 1.465em;
		letter-spacing: .02em;
		word-spacing: .04em
	}

	/*FONT STYLE #*/
	.wrap-txt-left .txt-headline,
	.wrap-txt-cent .txt-headline {
		font-size: 2.5em;
		margin: .65em .65em .65em 0;
	}

	.wrap-txt-left .txt-index,
	.wrap-txt-cent .txt-index {
		font-size: 1.1em
	}
}

@media screen and (max-width:768px) {

	/*center layout*/
	.wrap-txt-cent .txt-headline {
		font-size: 2em !important;
		line-height: 1.25em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: 1em
	}

	.wrap-txt-cent .txt-index {
		width: 100%;
		font-size: 1em !important;
		line-height: 1.5em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: -.5em auto 2.5em
	}

	/*align left layout*/
	.wrap-txt-left .txt-headline {
		font-size: 2em !important;
		line-height: 1.25em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: 1em 1em 1em 0
	}

	.wrap-txt-left .txt-index {
		font-size: 1em !important;
		line-height: 1.5em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: 0 auto
	}

	.hero-slogan-kv {
		font-size: 2.5em;
	}
}

@media screen and (max-width:415px) {
	body {
		font-size: 14px !important
	}

	.mobo-show {
		display: block !important
	}

	.mobo-hide {
		display: none !important
	}

	.sp-top {
		height: 12vh
	}

	.sp-sec {
		height: 10vh;
	}

	.sp-nomo {
		height: 0;
	}

	.wrap-story-cent,
	.wrap-story-left {
		width: 80%
	}

	.txt-product-intro {
		font-size: 1.5em;
		line-height: 1.4em
	}

	.wrap-txt-left .txt-headline {
		font-size: 2em !important;
		line-height: 1.25em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: 1em 1em 1em 0
	}

	.wrap-txt-cent .txt-headline {
		font-size: 2em !important;
		line-height: 1.25em;
		letter-spacing: .02em;
		word-spacing: .04em;
		margin: 1em 0
	}

	.wrap-txt-cent,
	.wrap-txt-left {
		width: 90%;
		text-align: center
	}

	.wrap-txt-left .txt-index {
		margin: 0
	}

	.txt-category {
		font-size: 1.75em
	}

	.hero-slogan-kv {
		font-size: 2em;
		text-align: center
	}

	/*BUTTON*/
	.cta-normal,
	.cta-wire-blue,
	.cta-wire-white {
		font-size: 1.5em;
	}

	.txt-form-list {
		font-size: 2.3rem;
		text-align: center
	}

	.btn-more {
		font-size: 1.35rem !important;
	}
}

@media all and (max-width:415px) and (min-height:820px) {}

@media all and (max-width:380px) {
	.wrap-txt-left .txt-headline {
		font-size: 2.3em !important;
		line-height: 1.125em;
		letter-spacing: .01em;
		word-spacing: .03em;
		margin: 1em .5em 1em 0
	}

	.wrap-txt-cent .txt-headline {
		font-size: 2em !important
	}

	.wrap-txt-cent,
	.wrap-txt-left,
	.wrap-story-cent,
	.wrap-story-left {
		width: 90%;
		text-align: center
	}

	.wrap-txt-cent .txt-index,
	.wrap-txt-left .txt-index {
		width: 100%
	}

	.hero-slogan,
	.hero-slogan-nomo {
		font-size: 2em !important;
	}
}

@media all and (max-width:320px) {
	.hero-index {
		font-size: 1.8em !important;
	}

}