@charset "utf-8";

/* ==========================
	style.css
============================= */
body {
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 18px;
	letter-spacing: .03em;
	font-feature-settings: "palt";
}
body * {
	box-sizing: border-box;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	opacity: .7;
}
a img {
	transition: opacity 0.3s ease-out;
}
img {
	max-width: 100%;
	height: auto;
}
sup {
	font-size: 50%;
}
.inner {
	margin: 0 auto;
	max-width: 1000px;
}
.sp {
	display: none!important;
}

@media screen and (max-width: 1000px) {
	body {
		font-size: 1.8vw;
	}
}

@media screen and (max-width: 768px) {
	.inner {
		max-width: 100%;
		width: 92vw;
	}
	.pc {
		display: none!important;
	}
	.sp {
		display: block!important;
	}
}


/* hero
----------------------------- */
/* animation */
.hero div,
.hero p {
	opacity: 0;
}
.hero.show div,
.hero.show  p {
	opacity: 1;
}
.show .step1 {
	transition: opacity 1.0s linear 0.1s;
}
.show .step2{
	transition: opacity 1s linear 0.8s;
}
.show .step3{
	transition: opacity .4s linear 1.3s;
}
.show .step4{
	transition: opacity 1s linear 2s;
}

/* ----------------------------- */
header {
	max-height: 900px;
	height: 90vw;
	background-color: #000;
}
header .inner {
	position: relative;
	height: 100%;
}
header .heroNav {
	display: flex;
	justify-content: flex-end;
	padding-top: 40px;
}
header .heroNav li {
	padding: 0 1em;
}
header .heroNav a {
	color: #fff;
}
header .heroNav a:hover {
	color: #dd540e;
}
.hero .catch {
	position: absolute;
	top: 95px;
	left: 50%;
	transform: translate(-50%, 0);
}
.hero .catch img {
	max-width: 430px;
	width: 43vw;
}
.hero .product {
	position: absolute;
	top: 164px;
	left: 302px;
}
.hero .product img {
	max-width: 480px;
	width: 48vw;
}
.hero .heroLogo {
	position: absolute;
	top: 70px;
	left: 100px;
}
.hero .heroLogo img {
	max-width: 162px;
	width: 16.2vw;
}
.hero .heroCopy {
	position: absolute;
	top: 247px;
	right: 13px;
}
.hero .heroCopy img {
	max-width: 242px;
	width: 24.2vw;
}
.hero .heroLead {
	position: absolute;
	bottom: 52px;
	left: 50%;
	width: 680px;
	color: #fff;
	transform: translate(-50%, 0);
}
.hero .heroLead p {
	width: 100%;
	text-align: center;
	border-top: 1px solid #8d8d8d;
	line-height: 1.66;
}
.hero .heroLead p > span {
	display: block;
	padding: 1.4em 0 .9em;
	font-size: 27px;
	line-height: 1;
}

@media screen and (max-width: 1000px) {
	header .heroNav {
		padding-top: 4vw;
	}
	.hero .catch {
		top: 9.5vw;
	}
	.hero .product {
		top: 16.4vw;
		left: 30.2vw;
	}
	.hero .heroLogo {
		top: 7vw;
		left: 10vw;
	}
	.hero .heroCopy {
		top: 24.7vw;
		right: 1.3vw;
	}
	.hero .heroLead {
		bottom: 5.2vw;
		width: 68vw;
	}
	.hero .heroLead p > span {
		font-size: 2.7vw;
	}
}

@media screen and (max-width: 768px) {
	header {
		max-height: inherit;
		height: 149.333vw;
		overflow: hidden;
	}
	header .heroNav {
		padding-top: 4.667vw;
	}
	.hero .heroLogo img {
		max-width: 19.6vw;
		width: auto;
	}
	.hero .heroLogo {
		top: 4.667vw;
		left: 1.333vw;
	}
	.hero .catch {
		top: 18.533vw;
	}
	.hero .catch img {
		max-width: 66.533vw;
		width: auto;
	}
	.hero .product {
		top: 29.333vw;
		left: 15.333vw;
	}
	.hero .product img {
		max-width: 100%;
		width: 74vw;
	}
	.hero .heroCopy {
		top: 15.6vw;
		right: 1.333vw;
	}
	.hero .heroCopy img {
		max-width: inherit;
		width: 28.667vw;
	}
	.hero .heroLead {
		width: 100%;
	}
	.hero .heroLead p {
		border-top: 0.267vw solid #8d8d8d;
		font-size: 3.2vw;
		line-height: 1.75;
	}
	.hero .heroLead p > span {
		padding: 4.933vw 0 2.667vw;
		font-size: 4.267vw;
		font-weight: bold;
		line-height: 1.56;
	}
	header .heroNav li {
		height: 12vh;
	}
	header .menubtn {
		position: relative;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin: auto;
		margin-right: 0;
		width: 7.2vw;
		height: 5.2vw;
		cursor: pointer;
		z-index: 11;
	}
	header .menubtn span {
		display: block;
		width: 100%;
		height: 0.4vw;
		background-color: #fff;
		transition: all 0.4s;
	}
	header .menubtn.active {
		position: fixed;
		top: 4.667vw;
		right: 4vw;
	}
	header .menubtn.active span {
		width: 9.733vw;
		opacity: 1;
	}
	header .menubtn.active span:nth-of-type(1) {
		opacity: 0;
	}
	header .menubtn.active span:nth-of-type(2) {
		position: absolute;
		top: 50%;
		right: -1vw;
		transform: rotate(-45deg);
	}
	header .menubtn.active span:nth-of-type(3) {
		position: absolute;
		top: 50%;
		right: -1vw;
		transform: rotate(45deg);
	}
	header .menu.close {
		top: -100vh;
	}
	header .menu {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000;
		transition: all 0.5s;
		z-index: 10;
	}
	header .menu > .logo {
		position: absolute;
		top: 2.267vw;
		left: 3.2vw;
		max-width: 11.333vw;
		height: auto;
	}
	header .menu ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: auto;
		height: 100%;
	}
	header .menu ul li a {
		font-size: 4.533vw;
		font-weight: bold;
		color: #fff;
		letter-spacing: .12em;
	}
}


/* nav
----------------------------- */
nav {
	position: fixed;
	padding-bottom: 30px;
	width: 100%;
	transition: all .4s;
	z-index: 2;
}
nav .navWrap {
	padding: 11px 0 13px;
	background-color: #000;
}
nav .navWrap .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav .navWrap .inner > .logo {
	width: 64px;
}
nav ul {
	display: flex;
	justify-content: flex-end;
}
nav ul li {
	padding: 0 1em;
}
nav a {
	color: #fff;
}
nav a:hover {
	color: #dd540e;
}

@media screen and (max-width: 1200px) {
	nav {
		padding-bottom: 2.5vw;
	}
	nav .navWrap {
		padding: 0.917vw 0 1.083vw;
	}
	nav .navWrap .inner {
		width: 92vw;
	}
	nav .navWrap .inner > .logo {
		width: 5.333vw;
	}
}

@media screen and (max-width: 768px) {
	nav {
		padding-bottom: 12vw;
	}
	nav .navWrap {
		padding: 2.267vw 0 2.533vw;
	}
	nav .navWrap .inner > .logo {
    width: 11.333vw;
	}
	header .menubtn.is_show {
		position: fixed;
		top: 4.667vw;
		right: 4vw;
		transition: all .4s;
	}
}


/* article
----------------------------- */
main {
	overflow: hidden;
}
article > section {
	position: relative;
	padding-top: 30px;
}
article > section:nth-child(odd) {
	padding-top: calc(15vw + 30px);
	padding-bottom: 15vw;
	background: url(/img/bg_metal.jpg);
}
article > section:nth-child(odd)::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	border-style: solid;
	border-width: 0 0 15vw 100vw;
	border-color: transparent transparent transparent #fff;
}
article > section:nth-child(even)::before {
	content: "";
	display: block;
	position: absolute;
	top: -15vw;
	border-style: solid;
	border-width: 0 0 15vw 100vw;
	border-color: transparent transparent #fff transparent;
}
article > section:first-child {
	padding-top: 120px;
}
article > section:first-child::before {
	display: none;
}
article > section > .ttl {
	position: relative;
	padding-top: 30px;
	padding-bottom: 50px;
	font-family: 'Oswald', sans-serif;
	font-size: 52px;
	text-align: center;
	letter-spacing: .01em;
	line-height: 1;
}
article > section > .ttl::before,
article > section > .ttl::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -40px;
	height: 5px;
}
article > section > .ttl::before {
	width: 80px;
	background-color: #000;
}
article > section > .ttl::after {
	width: 40px;
	background-color: #dd540e;
}
article > section > .ttl > span {
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	display: block;
	margin-top: 20px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .07em;
}
article > section .brackets {
	display: inline-block;
	position: relative;
}
article > section .brackets::before,
article > section .brackets::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 14px;
	height: calc(100% - 6px);
	border: 3px solid;
}
article > section .brackets::before {
	left: -.8em;
	border-right: none;
}
article > section .brackets::after {
	right: -.8em;
	border-left: none;
}
.og {
	color: #dd540e;
}
.indent {
	padding-left: 1.1em;
	text-indent: -1.1em;
}
article > section .caution {
	font-size: 14px;
	line-height: 1.7;
}

@media screen and (max-width: 1000px) {
	article > section {
		padding-top: 3vw;
	}
	article > section:nth-child(odd) {
		padding-top: calc(15vw + 2.5vw);
	}
	article > section:first-child {
		padding-top: 12vw;
	}
	article > section > .ttl {
		padding-top: 3vw;
		padding-bottom: 5vw;
		font-size: 5.2vw;
	}
	article > section > .ttl::before,
	article > section > .ttl::after {
		margin-left: -4vw;
		height: 0.5vw;
	}
	article > section > .ttl::before {
		width: 8vw;
	}
	article > section > .ttl::after {
		width: 4vw;
	}
	article > section > .ttl > span {
		margin-top: 2vw;
		font-size: 1.8vw;
	}
	article > section .brackets::before,
	article > section .brackets::after {
		width: 1.4vw;
		height: calc(100% - 0.6vw);
		border: 0.3vw solid;
	}
	article > section .brackets::before {
		border-right: none;
	}
	article > section .brackets::after {
		border-left: none;
	}
	article > section .caution {
		font-size: 1.4vw;
	}
}

@media screen and (max-width: 768px) {
	article > section {
		padding-top: 2.667vw;
	}
	article > section:first-child {
		padding-top: 26.5vw;
	}
	article > section > .ttl {
		padding-top: 4.933vw;
		padding-bottom: 8vw;
		font-size: 8.267vw;
	}
	article > section > .ttl::before, article > section > .ttl::after {
		height: 0.933vw;
	}
	article > section > .ttl::before {
		margin-left: -7.4665vw;
		width: 14.933vw;
	}
	article > section > .ttl::after {
		margin-left: -7.467vw;
		width: 7.467vw;
	}
	article > section > .ttl > span {
		margin-top: 3.333vw;
		font-size: 3.467vw;
	}
	article > section .brackets::before,
	article > section .brackets::after {
		height: calc(100% - 1.334vw);
		border: 0.533vw solid;
	}
	article > section .brackets::before {
		border-right: none;
	}
	article > section .brackets::after {
		border-left: none;
	}
	article > section .caution {
		font-size: 2.933vw;
	}
}


/* movie */
article > section#movie .inner {
	width: 83.333vw;
	padding-bottom: 60px;
}
article > section#movie p {
	width: 100%;
	height: 570px;
}
.vimeo {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.vimeo iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}

@media screen and (max-width: 1200px) {
	article > section#movie p {
		height: 47.5vw;
	}
}

@media screen and (max-width: 1000px) {
	article > section#movie .inner {
		padding-bottom: 6vw;
	}
}

@media screen and (max-width: 768px) {
	article > section#movie .inner {
		padding-bottom: 10.667vw;
		max-width: 690px;
		width: 92vw;
	}
	article > section#movie p {
		height: 51.867vw;
	}
}


/* special */
article > section#special {
	padding-bottom: 70px;
	color: #fff;
	background-color: #dd540e;
	text-align: center;
}
article > section#special .inner {
	width: 83.333vw;
}
article > section#special::before {
	border-color: transparent transparent #dd540e transparent;
}
article > section#special > .ttl::before,
article > section#special > .ttl::after {
	background-color: #fff;
}
article > section#special .lead {
	font-size: 42px;
	font-weight: bold;
	height: 65px;
	letter-spacing: .06em;
	border-color: #fff;
}
article > section#special .bnr {
	margin: 30px 0;
}
article > section#special .bnr a {
	display: block;
	background-color: #fff;
}
article > section#special .bnr a > img:hover {
	opacity: .8;
}
article > section#special .bnr > span {
	display: block;
	width: 100%;
	height: 480px;
	background-color: #ccc;
	border: 4px solid #533a24;
}
article > section#special .txt {
	font-size: 20px;
}

@media screen and (max-width: 1200px) {
	article > section#special .bnr > span {
		height: 40vw;
	}
}

@media screen and (max-width: 1000px) {
	article > section#special {
		padding-bottom: 7vw;
	}
	article > section#special .lead {
		font-size: 4.2vw;
		height: 6.5vw;
	}
	article > section#special .lead {
		font-size: 6.4vw;
		height: 10vw;
	}
	article > section#special .bnr {
		margin: 3vw 0;
	}
	article > section#special .bnr > span {
		border: 0.4vw solid #533a24;
	}
	article > section#special .txt {
		font-size: 2vw;
	}
}

@media screen and (max-width: 768px) {
	article > section#special {
		padding-bottom: 9.333vw;
	}
	article > section#special .inner {
		max-width: 690px;
		width: 92vw;
	}
	article > section#special .bnr > span {
		height: 44vw;
	}
	article > section#special .bnr > span {
		margin: 4.8vw 0;
		border: 0.8vw solid #533a24;
	}
	article > section#special .txt {
		font-size: 3.733vw;
		text-align: left;
	}
}



/* feature */
article > section#feature::before {
	border-color: transparent transparent transparent #dd540e;
}
article > section#feature .inner {
	position: relative;
	padding-bottom: 30px;
	width: 83.333vw;
}
article > section#feature .inner::before {
	content: "";
	display: block;
	position: absolute;
	top: -218px;
	right: -75px;
	width: 233px;
	height: 433px;
	background: url(/img/feature_product.png) no-repeat top right;
	background-size: contain;
}
article > section#feature .lead {
	text-align: center;
}
article > section#feature .lead > .ttl {
	margin: 0 auto;
	width: 700px;
	color: #fff;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #000 15%, #000 85%, rgba(255, 255, 255, 0) 100%);
	font-size: 40px;
	font-weight: bold;
	letter-spacing: .02em;
}
article > section#feature .lead > .txt {
	margin-top: 30px;
	padding: .5em 2em;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
}
article > section#feature .exam {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 50px;
	width: 100%;
}
article > section#feature .exam > p {
	max-width: 480px;
	width: 40vw;
}
article > section#feature .exam > .arrow {
	margin-left: 9px;
	margin-right: 7px;
	width: 0;
	height: 0;
	border-left: 23px solid black;
	border-top: 23px solid transparent;
	border-bottom: 23px solid transparent;
}
article > section#feature .exam + .note {
	margin-top: 20px;
	font-size: 14px;
	text-align: right;
	line-height: 1;
}
article > section#feature .exam + .note.esp {
	display: flex;
	justify-content: space-between;
}
article > section#feature .exam + .note.esp > span {
	display: block;
}
article > section#feature .exam + .note.esp > span:first-of-type {
	line-height: 1.2;
}
article > section#feature .recommendfor {
	margin-top: 70px;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}
article > section#feature .recommendfor .ttl {
	margin-bottom: 30px;
}
article > section#feature .recommendfor .voice {
	margin-bottom: 80px;
}
article > section#feature .point {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 60px;
	width: 100%;
}
article > section#feature .point li {
	position: relative;
	padding: 80px 30px 25px;
	width: 39.167vw;
	max-width: 470px;
	background-color: #fff;
	box-shadow: 10px 10px 0 #b2b3b3;
}
article > section#feature .point li:nth-child(n+3) {
	margin-top: 83px;
}
article > section#feature .point li::before {
	content: "";
	display: block;
	position: absolute;
	top: -5px;
	left: 50%;
	font-family: 'Oswald', sans-serif;
	font-size: 70px;
	color: #dd540e;
	letter-spacing: .06em;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
article > section#feature .point li:nth-child(1)::before {
	content: "01";
}
article > section#feature .point li:nth-child(2)::before {
	content: "02";
}
article > section#feature .point li:nth-child(3)::before {
	content: "03";
}
article > section#feature .point li:nth-child(4)::before {
	content: "04";
}
article > section#feature .point li::after {
	content: "";
	display: block;
	position: absolute;
	top: 55px;
	left: 50%;
	width: 3px;
	height: 34px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #333;
}
article > section#feature .point li > span {
	font-size: 26px;
}
article > section#feature .point li > span.note {
	font-size: 13px;
}

@media screen and (max-width: 1200px) {
	article > section#feature .inner::before {
		top: -18.167vw;
		right: -6.25vw;
		width: 19.417vw;
		height: 36.083vw;
		background: url(/img/feature_product.png) no-repeat top right;
		background-size: contain;
	}
	article > section#feature .lead > .ttl {
		width: 58.333vw;
		font-size: 3.333vw;
	}
	article > section#feature .lead > .txt {
		margin-top: 2.5vw;
		font-size: 1.667vw;
	}
	article > section#feature .point {
		margin-bottom: 6vw;
	}
	article > section#feature .point li {
		padding: 6.667vw 2.5vw 2.083vw;
		box-shadow: 0.833vw 0.833vw 0 #b2b3b3;
	}
	article > section#feature .point li:nth-child(n+3) {
		margin-top: 6.917vw;
	}
	article > section#feature .point li::before {
		top: -0.417vw;
		font-size: 5.833vw;
	}
	article > section#feature .point li::after {
		top: 4.583vw;
		width: 0.25vw;
		height: 2.833vw;
	}
	article > section#feature .point li > span {
		font-size: 2.167vw;
	}
	article > section#feature .point li > span.note {
		font-size: 1.083vw;
	}
}

@media screen and (max-width: 1000px) {
	article > section#feature .inner {
		padding-bottom: 3vw;
	}
	article > section#feature .exam {
		margin-top: 5vw;
	}
	article > section#feature .exam > .arrow {
		margin-left: 0.9vw;
		margin-right: 0.7vw;
		border-left: 2.3vw solid black;
		border-top: 2.3vw solid transparent;
		border-bottom: 2.3vw solid transparent;
	}
	article > section#feature .exam + .note {
		margin-top: 2vw;
		font-size: 1.4vw;
	}
	article > section#feature .recommendfor {
		margin-top: 7vw;
		font-size: 2vw;
	}
	article > section#feature .recommendfor .ttl {
		margin-bottom: 3vw;
	}
	article > section#feature .recommendfor .voice {
		margin-bottom: 8vw;
	}
}

@media screen and (max-width: 768px) {
	article > section#feature .inner {
		padding-bottom: 10.667vw;
		max-width: 100%;
		width: 92vw;
	}
	article > section#feature .lead > .ttl {
		width: 85vw;
		font-size: 6.4vw;
	}
	article > section#feature .inner::before {
		top: -43.6vw;
		right: 0;
		width: 23.2vw;
		height: 43.2vw;
	}
	article > section#feature .lead > .txt {
		margin-top: 5.333vw;
		padding: .5em 5vw;
		font-size: 3.733vw;
	}
	article > section#feature .exam {
		margin-top: 8vw;
		flex-direction: column;
	}
	article > section#feature .exam > p {
		width: auto;
		max-width: initial;
	}
	article > section#feature .exam > .arrow {
		margin: 2.8vw 0 2vw;
		border-left: 4vw solid transparent;
		border-top: 4vw solid black;
		border-right: 4vw solid transparent;
		border-bottom: none;
	}
	article > section#feature .exam + .note {
		margin-top: 4vw;
		font-size: 2.933vw;
	}
	article > section#feature .recommendfor {
		margin-top: 9.333vw;
		font-size: 3.733vw;
	}
	article > section#feature .recommendfor .ttl {
		margin-bottom: 4vw;
	}
	article > section#feature .recommendfor .voice {
		margin: 0 auto;
		margin-bottom: 4.667vw;
		max-width: 690px;
		text-align: center;
	}
	article > section#feature .point {
		margin-bottom: 9.333vw;
		flex-wrap: nowrap;
		flex-direction: column;
	}
	article > section#feature .point li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: auto;
		margin-right: 0.933vw;
		padding: 0;
		padding-left: 14.267vw;;
		width: 85.333vw;
		max-width: 640px;
		height: 24vw;
		text-align: left;
		box-shadow: 0.933vw 0.933vw 0 #b2b3b3;
	}
	article > section#feature .point li + li {
		margin-top: 5.333vw;
	}
	article > section#feature .point li:nth-child(n+3) {
		margin-top: 5.333vw;
	}
	article > section#feature .point li::before {
		top: 50%;
		left: 0;
		font-size: 10.133vw;
	}
	article > section#feature .point li::after {
		top: 50%;
		left: 6.933vw;
		width: 5.333vw;
		height: 0.4vw;
		-webkit-transform: unset;
		transform: unset;
	}
	article > section#feature .point li > span {
		font-size: 4.533vw;
	}
	article > section#feature .point li > span.note {
		font-size: 2.667vw;
	}
}


/* lineup */
article > section#lineup {
	background-color: #fff;
}
article > section#lineup .inner {
	padding-bottom: 40px;
}
article > section#lineup .box {
	text-align: center;
}
article > section#lineup .box + .box {
	margin-top: 60px;
}
article > section#lineup .box .boxB {
	margin: 0 auto;
	margin-top: -28px;
	padding: 60px 40px 25px;
	width: 83.333vw;
	max-width: 100%;
	font-size: 20px;
}
article > section#lineup .item1 .boxB {
	background-color: #dcdddd;
}
article > section#lineup .item2 .boxB {
	background-color: #e6ecf0;
}
article > section#lineup .box > .ttl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	width: 47.833vw;
	max-width: 574px;
	height: 56px;
	color: #fff;
	font-weight: bold;
	transform: skewX(-15deg);
	letter-spacing: .04em;
	z-index: 1;
}
article > section#lineup .box > .ttl::before,
article > section#lineup .box > .ttl::after {
	content: "";
	display: block;
	position: absolute;
	transform:skewX(-15deg);
	z-index: 1;
}
article > section#lineup .box > .ttl::before {
	top: 0;
	left: 0;
	width: calc(100% - 15px);
	height: 100%;
}
article > section#lineup .box > .ttl::after {
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
}
article > section#lineup .item1 > .ttl::before,
article > section#lineup .item1 > .ttl::after {
	background-color: #7a838a;
}
article > section#lineup .item2 > .ttl::before,
article > section#lineup .item2 > .ttl::after {
	background-color: #707f87;
}
article > section#lineup .box > .ttl > span {
	position: relative;
	font-size: 26px;
	z-index: 2;
}
article > section#lineup .box > .ttl > span > span {
	font-size: 18px;
}
article > section#lineup .boxB > .txt {
	margin-bottom: 35px;
}
article > section#lineup .boxB > ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}
article > section#lineup .boxB > ul li {
	max-width: 284px;
}
article > section#lineup .boxB > ul li.arrow {
	margin-left: 10px;
	margin-right: 7px;
	margin-bottom: calc(1em + 1.25vw);
	width: 0;
	height: 0;
	border-left: 17px solid #dd540e;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
}
article > section#lineup .boxB > ul li > p {
	padding-top: 1.25vw;
	line-height: 1;
}
article > section#lineup .boxB > .note {
	font-size: 14px;
	text-align: right;
}
article > section#lineup .caution {
	margin: 30px auto 0;
	width: 83.333vw;
	max-width: 100%;
}

@media screen and (max-width: 1200px) {
	article > section#lineup .box + .box {
		margin-top: 5vw;
	}
	article > section#lineup .box .boxB {
		margin-top: -2.333vw;
		padding: 5vw 3.333vw 2.083vw;
		font-size: 1.667vw;
	}
	article > section#lineup .box > .ttl {
		height: 4.667vw;
	}
	article > section#lineup .box > .ttl::before {
		width: calc(100% - 1.25vw);
	}
	article > section#lineup .box > .ttl::after {
		width: 0.833vw;
	}
	article > section#lineup .box > .ttl > span {
		font-size: 2.167vw;
	}
	article > section#lineup .box > .ttl > span > span {
		font-size: 1.5vw;
	}
	article > section#lineup .boxB > .txt {
		margin-bottom: 2.917vw;
	}
	article > section#lineup .boxB > ul {
		margin-bottom: 2.083vw;
	}
	article > section#lineup .boxB > ul li.arrow {
		margin-left: 0.833vw;
		margin-right: 0.583vw;
		margin-bottom: calc(1em + 1.25vw);
		border-left: 1.417vw solid #dd540e;
		border-top: 1.417vw solid transparent;
		border-bottom: 1.417vw solid transparent;
	}
	article > section#lineup .boxB > ul li > p {
		padding-top: 1.25vw;
	}
	article > section#lineup .boxB > .note {
		font-size: 1.167vw;
	}
	article > section#lineup .caution {
		margin: 2.5vw auto 0;
	}
}

@media screen and (max-width: 1000px) {
	article > section#lineup .inner {
		padding-bottom: 4vw;
	}
}

@media screen and (max-width: 768px) {
	article > section#lineup .box + .box {
		margin-top: 8vw;
	}
	article > section#lineup .box > .ttl {
		height: 9.733vw;
		width: 83vw;
		max-width: 630px;
	}
	article > section#lineup .box > .ttl > span {
		font-size: 4.267vw;
	}
	article > section#lineup .box > .ttl > span > span {
		font-size: 2.667vw;
	}
	article > section#lineup .box > .ttl::before {
		width: calc(100% - 2.533vw);
	}
	article > section#lineup .box > .ttl::after {
		width: 1.867vw;
	}
	article > section#lineup .box .boxB {
		padding: 10.667vw 4vw 6vw;
		margin-top: -4.8vw;
		max-width: 100%;
		width: 92vw;
		font-size: 3.733vw;
	}
	article > section#lineup .boxB > .txt {
		margin-bottom: 8vw;
	}
	article > section#lineup .boxB > ul {
		flex-direction: column;
		margin-bottom: 4vw;
	}
	article > section#lineup .boxB > ul li {
		max-width: 100%;
	}
	article > section#lineup .boxB > ul li > p {
		padding-top: 3.2vw;
	}
	article > section#lineup .boxB > ul li.arrow {
		margin: 2.533vw 0 2.667vw;
		border-left: 4.267vw solid transparent;
		border-top: 4.267vw solid #dd540e;
		border-right: 4.267vw solid transparent;
		border-bottom: none;
	}
	article > section#lineup .boxB > .note {
		font-size: 2.933vw;
	}
	article > section#lineup .caution {
		margin: 0;
		margin-top: 5.6vw;
	}
}


/* link
----------------------------- */
article > section#link {
	padding-bottom: 80px;
	text-align: center;
}
article > section#link h2 {
	margin-top: 50px;
	font-size: 22px;
	line-height: 1;
}
article > section#link ul li {
	margin: 27px auto 0;
	max-width: 542px;
	background-color: #fff;
	font-size: 22px;
	font-weight: bold;
}
article > section#link ul li a {
	display: block;
	position: relative;
	padding: 30px 0;
	width: 100%;
	background-color: #fff;
	line-height: 1;
	border: 2px solid #000;
}
article > section#link ul li a::after {
	content: "";
	display: block;
	position: absolute;
	right: -2px;
	bottom: -2px;
	background: url(/img/link_arrow.png) no-repeat right;
	background-size: contain;
	height: calc(100% + 4px);
	width: calc(100% + 4px);
}
article > section#link .caution {
	margin: 70px auto 0;
	width: 600px;
	text-align: left;
}
article > section#link .caution .ttl {
	display: inline-block;
	margin-bottom: .5em;
	padding: .2em .7em;
	font-size: 18px;
	border: 1px solid #000;
}
article > section#link .caution dl {
	text-indent: .8em;
}

@media screen and (max-width: 1000px) {
	article > section#link {
		padding-bottom: 8vw;
	}
	article > section#link h2 {
		margin-top: 5vw;
		font-size: 2.2vw;
	}
	article > section#link ul li {
		margin: 2.7vw auto 0;
		max-width: 54.2vw;
		font-size: 2.2vw;
	}
	article > section#link ul li a {
		padding: 3vw 0;
		border: .2vw solid #000;
	}
	article > section#link ul li a::after {
		right: -0.2vw;
		bottom: -0.2vw;
		height: calc(100% + .4vw);
		width: calc(100% + .4vw);
	}
	article > section#link .caution {
		margin: 7vw auto 0;
		width: 60vw;
	}
	article > section#link .caution .ttl {
		font-size: 1.8vw;
	}
}

@media screen and (max-width: 768px) {
	article > section#link .lead {
		font-size: 3.467vw;
	}
	article > section#link h2 {
		margin-top: 8vw;
		font-size: 4vw;
		line-height: initial;
	}
	article > section#link ul li {
		margin: 4vw auto 0;
		max-width: 100%;
		font-size: 4vw;
	}
	article > section#link ul li a {
		padding: 4.8vw 0;
		border: .4vw solid #000;
	}
	article > section#link .caution {
		width: 100%;
	}
	article > section#link .caution .ttl {
		font-size: 4vw;
	}
	.caution dl {
		text-indent: inherit;
	}
	.caution dl dd {
		padding-left: .5em;
		text-indent: -.5em;
	}
}

/* footer
----------------------------- */
footer {
	padding-bottom: 36px;
	color: #fff;
	background-color: #000;
	font-size: 14px;
}
footer .inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	padding: 33px 0 7px;
	width: 83.333vw;
}
footer a {
	display: inline-block;
	color: #fff;
}
footer a:hover {
	color: #dd540e;
}
footer .logo {
	max-width: 80px;
	height: auto;
}
footer .ftLink {
	margin-left: 35px;
	max-width: 600px;
}
footer .ftLink ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
footer .ftLink p {
	margin-top: 7px;
	text-align: center;
}
footer .ftLink p a {
	padding: 2px 7px;
	text-align: center;
	border: solid 1px #fff;
}
footer .ftLink p a:hover {
	border: solid 1px #dd540e;
}

footer #pagetop {
	max-width: 1000px;
	margin: 0 auto;
}
footer #pagetop a {
	position: fixed;
	left: auto;
	bottom: 38px;
	margin: 0;
	margin-left: 1000px;
	z-index: 2;
}
footer #pagetop a:hover {
	opacity: 1;
}
footer #pagetop a > img {
	width: 68px;
	height: 68px;
}
footer .copy {
	text-align: center;
}

@media screen and (max-width: 1200px) {
	footer #pagetop {
		max-width: 83.333vw;
	}
	footer #pagetop a {
		bottom: 3.167vw;
		margin-left: 83.333vw;
	}
	footer #pagetop a > img {
		width: 5.667vw;
		height: 5.667vw;
	}
}

@media screen and (max-width: 1000px) {
	footer {
		padding-bottom: 3.6vw;;
		font-size: 1.4vw;
	}
	footer .inner {
		padding: 3.3vw 0 0.7vw;
	}
	footer .logo {
		max-width: 8vw;
	}
	footer .ftLink {
		margin-left: 3.5vw;
	}
}

@media screen and (max-width: 768px) {
	footer {
		padding-bottom: 2vw;
		font-size: 2.667vw;
	}
	footer .inner {
		padding: 4.667vw 0 0;
		flex-direction: column;
	}
	footer .logo {
		max-width: 13.867vw;
	}
	footer .ftLink {
		margin-left: 0;
	}
	footer .ftLink ul {
		margin: 4.667vw auto 0;
	}
	footer .ftLink p {
		margin-top: 2.604vw;
		margin-bottom: 3.333vw;
		padding: 0.26vw 0.911vw;
	}
	footer #pagetop a {
		margin-left: 77.333vw;
	}
	footer #pagetop a > img {
		width: 10.133vw;
		height: 10.133vw;
	}
}