@charset "utf-8";

/* font
----------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 400;
	src: local('Noto Sans CJK JP'),
		local('NotoSansCJKjp-Regular'),
		local('NotoSansJP-Regular'),
		url('../font/NotoSansCJKjp-Regular.woff2') format('woff2'),
		url('../font/NotoSansCJKjp-Regular.woff') format('woff'),
		url('../font/NotoSansCJKjp-Regular.ttf')  format('truetype'),
		url('../font/NotoSansCJKjp-Regular.eot') format('embedded-opentype');
}


/* reset
----------------------------------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,var,b,u,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,input,textarea,table,caption,tbody,thead,tfoot,tr,th,td,
main,article,aside,canvas,details,embed,figure,figcaption,footer,header,
menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6,th {
	font-family: inherit;
	font-size: 100%;
	font-weight: normal;
}

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

table,th,td {
	text-align: left;
	border: none;
}

ol,ul,li {
	list-style: none;
}

img {
	border: none;
	vertical-align: top;
	max-width: 100%;
}

input[type=text],
input[type=password],
input[type=button],
input[type=submit],
button,
select,
textarea {
	color: inherit;
	font-family: inherit;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	font-size: 100%;
	font-weight: normal;
	line-height: inherit;
}

input::-webkit-input-placeholder {
	color: #aaa;
}
input:-ms-input-placeholder {
	color: #aaa;
}
input::-moz-placeholder {
	color: #aaa;
}

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

select::-ms-expand {
	display:none;
}

*,*:before,*:after {
	box-sizing: border-box;
}


/* 初期設定
----------------------------------------- */

html {
	font-size: 62.5%;
}

body {
	min-width: 1000px;
	font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-size: 140%;
	color: #333;
	line-height: 1.3;
	-webkit-text-size-adjust: 100%;
}
body.s_ie {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
@media screen and (max-width: 767px){
	body {
		min-width: 320px;
	}
}

a {
	color: inherit;
	text-decoration: none;
	transition: all 0.2s;
}

em, strong {
	font-weight: bold;
}


/* 汎用クラス
----------------------------------------- */

.c_fontL  { font-size: 1.6rem; }
.c_fontLL { font-size: 1.8rem; }
.c_fontXL { font-size: 2rem; }
.c_fontS  { font-size: 1.3rem; }
.c_fontSS { font-size: 1.2rem; }
.c_fontXS { font-size: 1.1rem; }

.c_fontBold { font-weight: bold; }
.c_colorRed { color: #ce2e2e; }

.c_clearfix { zoom: 1; }
.c_clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0.01px;
}
.c_floatL { float: left; }
.c_floatR { float: right; }
.c_ofHidden { overflow: hidden; }

.c_taLeft { text-align: left !important; }
.c_taCenter { text-align: center !important; }
.c_taRight { text-align: right !important; }

.c_vaTop { vertical-align: top !important; }
.c_vaMdl { vertical-align: middle !important; }
.c_vaBtm { vertical-align: bottom !important; }

.c_mt0  { margin-top:  0px !important; }
.c_mt3  { margin-top:  3px !important; }
.c_mt5  { margin-top:  5px !important; }
.c_mt10 { margin-top: 10px !important; }
.c_mt15 { margin-top: 15px !important; }
.c_mt20 { margin-top: 20px !important; }
.c_mt25 { margin-top: 25px !important; }
.c_mt30 { margin-top: 30px !important; }
.c_mt35 { margin-top: 35px !important; }
.c_mt40 { margin-top: 40px !important; }
.c_mt45 { margin-top: 45px !important; }
.c_mt50 { margin-top: 50px !important; }
.c_mt60 { margin-top: 60px !important; }
.c_mt70 { margin-top: 70px !important; }
.c_mt80 { margin-top: 80px !important; }
.c_mt90 { margin-top: 90px !important; }

.c_ml0  { margin-left:  0px !important; }
.c_ml3  { margin-left:  3px !important; }
.c_ml5  { margin-left:  5px !important; }
.c_ml10 { margin-left: 10px !important; }
.c_ml15 { margin-left: 15px !important; }
.c_ml20 { margin-left: 20px !important; }
.c_ml25 { margin-left: 25px !important; }
.c_ml30 { margin-left: 30px !important; }
.c_ml35 { margin-left: 35px !important; }
.c_ml40 { margin-left: 40px !important; }
.c_ml45 { margin-left: 45px !important; }
.c_ml50 { margin-left: 50px !important; }
.c_ml60 { margin-left: 60px !important; }
.c_ml70 { margin-left: 70px !important; }
.c_ml80 { margin-left: 80px !important; }
.c_ml90 { margin-left: 90px !important; }

.c_mr0  { margin-right:  0px !important; }
.c_mr3  { margin-right:  3px !important; }
.c_mr5  { margin-right:  5px !important; }
.c_mr10 { margin-right: 10px !important; }
.c_mr15 { margin-right: 15px !important; }
.c_mr20 { margin-right: 20px !important; }
.c_mr25 { margin-right: 25px !important; }
.c_mr30 { margin-right: 30px !important; }
.c_mr35 { margin-right: 35px !important; }
.c_mr40 { margin-right: 40px !important; }
.c_mr45 { margin-right: 45px !important; }
.c_mr50 { margin-right: 50px !important; }
.c_mr60 { margin-right: 60px !important; }
.c_mr70 { margin-right: 70px !important; }
.c_mr80 { margin-right: 80px !important; }
.c_mr90 { margin-right: 90px !important; }

.c_mb0  { margin-bottom:  0px !important; }
.c_mb3  { margin-bottom:  3px !important; }
.c_mb5  { margin-bottom:  5px !important; }
.c_mb10 { margin-bottom: 10px !important; }
.c_mb15 { margin-bottom: 15px !important; }
.c_mb20 { margin-bottom: 20px !important; }
.c_mb25 { margin-bottom: 25px !important; }
.c_mb30 { margin-bottom: 30px !important; }
.c_mb35 { margin-bottom: 35px !important; }
.c_mb40 { margin-bottom: 40px !important; }
.c_mb45 { margin-bottom: 45px !important; }
.c_mb50 { margin-bottom: 50px !important; }
.c_mb60 { margin-bottom: 60px !important; }
.c_mb70 { margin-bottom: 70px !important; }
.c_mb80 { margin-bottom: 80px !important; }
.c_mb90 { margin-bottom: 90px !important; }

.c_hide { display: none; }
.c_iBlock { display: inline-block; }

.c_liquid { width: 100%; }

.c_breakall { word-break: break-all; }
.c_nowrap { white-space: nowrap; }

.c_over:hover {
	opacity: 0.7;
}

@media screen and (max-width: 1300px){ .c_ov1300 { display: none !important; } }
@media screen and (max-width: 1200px){ .c_ov1200 { display: none !important; } }
@media screen and (max-width: 1100px){ .c_ov1100 { display: none !important; } }
@media screen and (max-width: 1000px){ .c_ov1000 { display: none !important; } }
@media screen and (max-width: 900px){ .c_ov900 { display: none !important; } }
@media screen and (max-width: 800px){ .c_ov800 { display: none !important; } }
@media screen and (max-width: 767px){ .c_ov767 { display: none !important; } }
@media screen and (max-width: 700px){ .c_ov700 { display: none !important; } }
@media screen and (max-width: 600px){ .c_ov600 { display: none !important; } }
@media screen and (max-width: 500px){ .c_ov500 { display: none !important; } }
@media screen and (max-width: 400px){ .c_ov400 { display: none !important; } }
@media screen and (min-width: 1301px){ .c_ud1300 { display: none !important; } }
@media screen and (min-width: 1201px){ .c_ud1200 { display: none !important; } }
@media screen and (min-width: 1101px){ .c_ud1100 { display: none !important; } }
@media screen and (min-width: 1001px){ .c_ud1000 { display: none !important; } }
@media screen and (min-width: 901px){ .c_ud900 { display: none !important; } }
@media screen and (min-width: 801px){ .c_ud800 { display: none !important; } }
@media screen and (min-width: 768px){ .c_ud767 { display: none !important; } }
@media screen and (min-width: 701px){ .c_ud700 { display: none !important; } }
@media screen and (min-width: 601px){ .c_ud600 { display: none !important; } }
@media screen and (min-width: 501px){ .c_ud500 { display: none !important; } }
@media screen and (min-width: 401px){ .c_ud400 { display: none !important; } }
@media screen and (min-width: 351px){ .c_ud350 { display: none !important; } }


/* ページスタイル
----------------------------------------- */

body.noAnime * {
	transition: none !important;
	animation: none !important;
}

.pageArea {
	position: relative;
	height: 100vh;
	overflow: hidden;
}
.pageArea::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 0 solid #1778ef;
	transition: border-width 0.5s;
}
.pageArea.border::after {
	border-width: 6px;
}
.pageArea::before {
	content: "";
	position: fixed;
	top: 28px;
	left: 24px;
	right: 24px;
	bottom: 38px;
	border: 1px solid #f5f5f5;
	background: url(../img/bg_grid.png);
}
@media screen and (max-width: 767px){
	.pageArea::before {
		top: 15px;
		left: 12px;
		right: 12px;
	}
	.pageArea.border::after {
		border-width: 3px;
	}
}

.pageHeader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.5s;
	transition-delay: 1s;
}
.pageHeader.show {
	opacity: 1;
}
.pageHeader .title {
	position: absolute;
	top: 22px;
	left: 20px;
	color: #333;
	font-family: 'Montserrat';
	font-size: 1.6rem;
	font-weight: bold;
	transition: color 1s;
}
body.colorBg .pageHeader .title {
	color: #fff;
}
.pageHeader .logo {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	opacity: 1;
	transition: opacity 1s;
	cursor: pointer;
}
.pageHeader .logo.white {
	opacity: 0;
}
body.colorBg .pageHeader .logo {
	opacity: 0;
}
body.colorBg .pageHeader .logo.white {
	opacity: 1;
}
@media screen and (max-width: 767px){
	.pageHeader .title {
		top: 15px;
		left: 57px;
		font-size: 1.4rem;
	}
	.pageHeader .logo {
		top: 12px;
		left: 12px;
		right: auto;
		width: 35px;
	}
}

@media screen and (max-width: 767px){
	.menuBtn {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 2100;
		width: 50px;
		height: 50px;
		opacity: 0;
		transition: opacity 0.3s;
	}
	.menuBtn.show {
		opacity: 1;
	}
	.menuBtn::before,
	.menuBtn::after {
		content: "";
		position: absolute;
		top: 14px;
		left: 0;
		right: 0;
		width: 30px;
		height: 2px;
		margin: 0 auto;
		background-color: #333;
		transition: all 0.3s;
	}
	.menuBtn::after {
		top: 34px;
		box-shadow: 0 -10px #333;
		transition: all 0.3s;
	}
	body.colorBg .menuBtn::before,
	body.colorBg .menuBtn::after {
		background-color: #fff;
	}
	body.colorBg .menuBtn::after {
		box-shadow: 0 -10px #fff;
	}
	.menuBtn.open::before {
		top: 24px;
		transform: rotate(45deg);
		background-color: #fff;
	}
	.menuBtn.open::after {
		top: 24px;
		box-shadow: none !important;
		transform: rotate(-45deg);
		background-color: #fff;
	}
}

.spMenu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	background-color: #1778ef;
	padding-top: 65px;
	color: #fff;
	display: none;
}
.spMenu .bg li {
	position: absolute;
	animation: rotate 10s infinite linear;
}
.spMenu .bg01 { left: 64%; top: 15.1%; width: 18.5%; }
.spMenu .bg02 { left: 28.7%; top: 32.6%; width: 10.9%; }
.spMenu .bg03 { left: 72%; top: 52.1%; width: 12.3%; }
.spMenu .bg04 { left: 14.5%; top: 70.5%; width: 15.7%; }
.spMenu .bg05 { left: 51.9%; top: 71.4%; width: 79.7%; }

.spMenu .menu {
	position: relative;
}
.spMenu .menu li {
	margin-bottom: 35px;
	background: url(../img/menu_icon.png) no-repeat 17px 3px;
	background-size: 18px auto;
	padding-left: 44px;
	font-size: 1.6rem;
}

.navi {
	position: fixed;
	top: 50%;
	right: 20px;
	z-index: 1000;
	transform: translateY(-50%);
}
.navi li {
	position: relative;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.navi li::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 9px;
	height: 9px;
	margin: auto;
	border-radius: 50%;
	background-color: #cddff6;
}
.navi li.current::after {
	background-color: #5699ec;
}
.navi li + li {
	margin-top: 4px;
}
@media screen and (max-width: 767px){
	.navi {
		display: none;
	}
}

.section {
	position: relative;
	z-index: 10;
	height: 100vh;
	min-height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: opacity 0.4s;
	opacity: 1;
}
.section.hide {
	opacity: 0;
}
.section.hasLine {
	margin: 0 6px;
}
.sectionInner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: 100%;
	max-height: 680px;
}
@media screen and (max-width: 767px){
	.section {
		min-height: 0;
	}
	.section.hasLine {
		margin: 0 3px;
	}
	.sectionInner {
		max-width: 440px;
		max-height: 550px;
	}
}

.leadText {
	margin-bottom: 25px;
	text-align: center;
	font-size: 2.8rem;
	font-weight: bold;
}
.leadText span {
	position: relative;
	z-index: 0;
	display: inline-block;
}
.leadText span::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 7px;
	right: 7px;
	bottom: 0;
	height: 14px;
	background-color: rgba(123,216,247,0.6);
}
.leadText span + span::before {
	left: -7px;
}
.subLead {
	margin-bottom: 15px;
	text-align: center;
	font-size: 2.4rem;
}
@media screen and (max-width: 767px){
	.leadText {
		font-size: 1.8rem;
	}
	.leadText span::before {
		height: 8px;
	}
	.leadText span + span::before {
		left: 7px;
	}
	.subLead {
		font-size: 1.6rem;
	}
}

@keyframes rotate {
	0% { transform: rotate(0); }
	100% { transform: rotate(-360deg); }
}
@keyframes rotateR {
	0% { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}

.monoair {
	position: relative;
}
.monoair .reel01 {
	position: absolute;
	top: 36.99%;
	left: 30.34%;
	width: 33.43%;
	animation: rotateR 3.5s infinite linear;
}
.monoair .reel02 {
	position: absolute;
	top: 2.89%;
	left: 51.4%;
	width: 45.79%;
	animation: rotateR 3.5s infinite linear;
}
.monoair .body {
	position: absolute;
	top: 0;
	left: 0;
}
.monoair canvas {
	position: absolute;
	right: 96%;
}

.bicycle {
	position: relative;
	max-width: 263px;
}
.bicycle .load {
	position: absolute;
	top: 0;
	right: 0;
	width: 49.36%;
}
.bicycle .leg01 {
	position: absolute;
	left: 37.64%;
	top: 40.5%;
	width: 31.56%;
	transform-origin: 85% 30%;
}
.bicycle.run .leg01 {
	animation: leg01 1.5s infinite linear;
}
@keyframes leg01 {
	0% { transform: rotate(0); }
	13% { transform: rotate(-15deg); }
	25% { transform: rotate(-26deg); }
	38% { transform: rotate(-34deg); }
	50% { transform: rotate(-30deg); }
	75% { transform: rotate(-14deg); }
	88% { transform: rotate(-3deg); }
	100% { transform: rotate(0); }
}
.bicycle.stop .leg01 {
	display: none;
}
.bicycle.pause .leg01 {
	animation: none;
}
.bicycle .leg02 {
	position: absolute;
	left: 37.64%;
	top: 50%;
	width: 8.75%;
	transform-origin: 50% 50%;
}
.bicycle.run .leg02 {
	animation: leg02 1.5s infinite linear;
}
@keyframes leg02 {
	0% { left: 37.64%; top: 50%; transform: rotate(0); }
	13% { left: 38%; top: 57%; transform: rotate(5deg); }
	25% { left: 42%; top: 60%; transform: rotate(11deg); }
	38% { left: 45%; top: 63%; transform: rotate(8deg); }
	50% { left: 46%; top: 61%; transform: rotate(-5deg); }
	75% { left: 44%; top: 55%; transform: rotate(-26deg); }
	88% { left: 41%; top: 52%; transform: rotate(-18deg); }
	100% { left: 37.64%; top: 50%; transform: rotate(0); }
}
.bicycle.stop .leg02 {
	display: none;
}
.bicycle.pause .leg02 {
	animation: none;
}
.bicycle .leg03 {
	position: absolute;
	left: 57.41%;
	bottom: 0;
	width: 12.55%;
	opacity: 0;
}
.bicycle.stop .leg03 {
	opacity: 1;
}
.bicycle .pedal {
	position: absolute;
	left: 44.87%;
	top: 78.1%;
	width: 9.13%;
}
.bicycle.run .pedal {
	animation: rotate 1.5s infinite linear;
}
.bicycle.stop .pedal {
	display: none;
}
.bicycle.pause .pedal {
	animation: none;
}
.bicycle .sweat {
	position: absolute;
	left: 9.89%;
	top: 9.09%;
	width: 56.65%;
	opacity: 0;
	transform: scale(0.7,0.7);
}
.bicycle.high .sweat {
	transition: all 0.5s;
	transition-delay: 1s;
	opacity: 1;
	transform: scale(1,1);
}

.gear {
	position: absolute;
	width: 328px;
}
.gear::before {
	content: "";
	display: block;
	padding-top: 37.8%;
}
.gear .gear01 {
	position: absolute;
	top: 4.84%;
	left: 2.44%;
	width: 34.45%;
	animation: rotate 5.5s infinite linear;
}
.gear.high .gear01 {
	animation-duration: 7s;
}
.gear.stop .gear01 {
	animation-play-state: paused;
}
.gear .gear02 {
	position: absolute;
	top: 13.71%;
	left: 68.29%;
	width: 29.57%;
	animation: rotate 5s infinite linear;
}
.gear.stop .gear02 {
	animation-play-state: paused;
}
.gear svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.memoBox {
	position: relative;
	max-width: 840px;
	min-height: 130px;
	margin: 0 auto;
	border: 1px solid #e2e2e2;
	background-color: #f8f8f8;
	padding: 30px 42px 20px;
}
.memoBox * {
	position: relative;
	z-index: 10;
}
.memoBox h3 {
	position: absolute;
	top: -20px;
	left: 42px;
	color: #1778ef;
	font-family: 'Montserrat';
	font-size: 3.6rem;
	font-weight: bold;
}
.memoBox p {
	line-height: 1.8;
}
@media screen and (max-width: 767px){
	.memoBox {
		min-height: 120px;
		margin: 0 10px;
		padding: 15px 15px 10px;
		font-size: 12px;
	}
	.memoBox h3 {
		top: -15px;
		left: 15px;
		font-size: 2.4rem;
	}
	.memoBox p {
		line-height: 1.5;
	}
}

.cmnBtn {
	position: relative;
	display: block;
	background-color: #fff;
	border: 1px solid #d2d2d2;
	border-radius: 12px;
	padding: 10px 0;
	box-shadow: 5px 5px #dcdcdc;
	text-align: center;
	color: #1778ef;
	font-family: 'Montserrat';
	font-size: 3.1rem;
	font-weight: bold;
	cursor: pointer;
	transition: box-shadow 0.3s;
}
.cmnBtn:hover {
	box-shadow: 5px 5px #ccc;
}
.cmnBtn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 14px;
	height: 14px;
	border-top: 3px solid #1778ef;
	border-right: 3px solid #1778ef;
	transform-origin: right top;
	transform: rotate(45deg);
}
@media screen and (max-width: 767px){
	.cmnBtn {
		border-radius: 6px;
		padding: 7px 5px 7px 0;
		box-shadow: 2px 2px #dcdcdc;
		font-size: 1.8rem;
	}
	.cmnBtn::after {
		right: 8px;
		width: 8px;
		height: 8px;
		border-top-width: 2px;
		border-right-width: 2px;
	}
}

.sec01 .skipBtn {
	position: absolute;
	left: 15px;
	bottom: 15px;
	z-index: 10;
	border-radius: 6px;
	padding: 6px 0;
	width: 120px;
	font-size: 1.6rem;
}
.sec01 .skipBtn::after {
	right: 10px;
	width: 10px;
	height: 10px;
}
.sec01 .bg {
	position: absolute;
	top: 0vh;
	left: 0;
	width: 100%;
	height: 100%;
	transition: top 1.5s;
}
.sec01 .bg li {
	position: absolute;
	opacity: 0;
	border-radius: 50%;
	transition: opacity 1s;
}
.sec01 .bg.show li {
	opacity: 1;
}
.sec01 .bg.up {
	top: -100vh;
}
.sec01 .bg.down {
	top: 120vh;
}
.sec01 .bg li img {
	animation: rotate 4s infinite linear;
}
.sec01 .bg li:empty::after {
	content: "";
	display: block;
	padding-top: 100%;
	border-radius: 50%;
}
.sec01 .bg01 { left: 58%; top: 25%; width: 7.19%; }
.sec01 .bg02 { left:  1%; top: 37%; width: 6.41%; }
.sec01 .bg03 { left: 85%; top: 85%; width: 5.47%; }
.sec01 .bg04 { left: 27%; top: 47%; width: 4.77%; }
.sec01 .bg05 {
	left: 61%;
	top: 60%;
	width: 3.13%;
	border: 6px solid rgba(0,183,238,0.3);
}
.sec01 .bg06 {
	left: 57%;
	top: 82%;
	width: 4.69%;
	border: 8px solid rgba(23,120,239,0.6);
}
.sec01 .bg07 {
	left: 62%;
	top: 12%;
	width: 2.34%;
	border: 5px solid rgba(0,183,238,0.6);
}
.sec01 .bg08 {
	left: 94%;
	top: 88%;
	width: 1.56%;
	border: 4px solid rgba(0,183,238,0.6);
}
.sec01 .bg09 {
	left: 31%;
	top: 75%;
	width: 2.34%;
	border: 6px solid rgba(23,120,239,0.6);
}
.sec01 .bg10 {
	left: 88%;
	top: 63%;
	width: 3.13%;
	border: 6px solid rgba(23,120,239,0.6);
}
.sec01 .item {
	position: absolute;
	transition: all 1.5s;
}
.sec01 .item01 { left: 69%; top: 6%; width: 27.97%; }
.sec01 .item01.start { left: 36%; top: 25%; }
.sec01 .item02 { left:  3%; top: -3%; width: 22.03%; }
.sec01 .item03 { left: 31%; top:  6%; width: 20.08%; }
.sec01 .item04 { left:  5%; top: 50%; width: 23.28%; }
.sec01 .item05 { left: 34%; top: 66%; width: 20.94%; }
.sec01 .item06 { left: 63%; top: 57%; width: 21.25%; }

.sec01 .item img {
	opacity: 0;
}
.sec01 .item .circle,
.sec01 .item .img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.sec01 .item .rotate {
	animation: rotate 6s infinite linear;
}
.sec01 .item.show img {
	transition: opacity 1s;
	opacity: 1;
}
.sec01 .item.show .img {
	transition-delay: 0.5s;
}
.sec01 .item.show .text {
	transition: opacity 2s;
	transition-delay: 1s;
}
.sec01 .item01.hide {
	transition: opacity 0.5s;
	opacity: 0;
}
.sec01 .item.up {
	opacity: 0;
}
.sec01 .item01.up { top: calc(-130vh +  6%); transition: all 1.5s; }
.sec01 .item02.up { top: calc(-130vh -  3%); }
.sec01 .item03.up { top: calc(-130vh +  6%); }
.sec01 .item04.up { top: calc(-130vh + 50%); }
.sec01 .item05.up { top: calc(-130vh + 66%); }
.sec01 .item06.up { top: calc(-130vh + 57%); }
body.s_ie .sec01 .item01.up { top: -144%; }
body.s_ie .sec01 .item02.up { top: -153%; }
body.s_ie .sec01 .item03.up { top: -144%; }
body.s_ie .sec01 .item04.up { top: -100%; }
body.s_ie .sec01 .item05.up { top: -84%; }
body.s_ie .sec01 .item06.up { top: -93%; }

.sec01 .bg.group02 li {
	transition: all 2s;
}
.sec01 .bg11 { left: 82%; top: 40%; width: 15.63%; }
.sec01 .bg.show .bg11 { top: -10%; }
.sec01 .bg12 { left: 33%; top: 28%; width: 6.41%; }
.sec01 .bg.show .bg12 { top:  3%; }
.sec01 .bg13 { left: 39%; top: 95%; width: 5.08%; }
.sec01 .bg.show .bg13 { top: 70%; }
.sec01 .bg14 { left: 19%; top: 45%; width: 5.86%; z-index: 10; }
.sec01 .bg.show .bg14 { top: 20%; }
.sec01 .bg15 { left: 64%; top: 114%; width: 5.47%; }
.sec01 .bg.show .bg15 { top: 89%; }
.sec01 .bg16 { left: 69%; top: 34%; width: 8.59%; }
.sec01 .bg.show .bg16 { top:  9%; }
.sec01 .bg17 { left: 82%; top:115%; width: 12.58%; }
.sec01 .bg.show .bg17 { top: 65%; }
.sec01 .bg18 { left:  9%; top: 44%; width: 4.14%; }
.sec01 .bg19 { left: 73%; top: 58%; width: 3.44%; }
.sec01 .bg20 { left: 71%; top: 88%; width: 9.14%; }
.sec01 .bg.show .bg20 { top: 63%; }
.sec01 .bg21 { left: 86%; top: 55%; width: 6.41%; }
.sec01 .bg.show .bg21 { top: 30%; }
.sec01 .bg22 { left:  6%; top:121%; width: 14.77%; }
.sec01 .bg.show .bg22 { top: 71%; }
.sec01 .bg23 { left: 10%; top: 52%; width: 14.84%; }
.sec01 .bg.show .bg23 { top:  2%; }
.sec01 .bg24 { left: 23%; top: 77%; width: 3.52%; }
.sec01 .bg25 { left: 26%; top: 32%; width: 2.19%; }
.sec01 .bg26 { left: 87%; top: 28%; width: 2.19%; }

.sec01 .bg19::after { background-color: rgba(219,242,250,0.5); }
.sec01 .bg20::after { background-color: rgba(241,241,241,0.5); }
.sec01 .bg21::after { background-color: rgba(241,241,241,0.5); }
.sec01 .bg22::after { background-color: rgba(183,230,245,0.5); }
.sec01 .bg23::after { background-color: rgba(238,238,238,0.5); }
.sec01 .bg24::after { background-color: rgba(121,174,238,0.7); }
.sec01 .bg25::after { background-color: rgba(219,242,250,0.7); }
.sec01 .bg26::after { background-color: rgba(160,197,242,0.7); }

.sec01 .logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 1s;
	width: 152px;
}
.sec01 .logo.show {
	opacity: 1;
}
.sec01 .logo.small {
	width: 92px;
}
.sec01 .logo.move {
	top: 25%;
}
.sec01 .logo.hide {
	top: -50%;
}
.sec01 .title {
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	text-align: center;
	opacity: 0;
	transition: all 1s;
}
.sec01 .title.show {
	top: 35%;
	opacity: 1;
}
.sec01 .title.delay {
	transition-delay: 1s;
}
.sec01 .title .text01 {
	margin-bottom: 5px;
	color: #6b6b6b;
	font-size: 2rem;
}
.sec01 .title .text02 {
	color: #6b6b6b;
	font-family: 'Montserrat';
	font-size: 2rem;
}
.sec01 .title h1 {
	color: #111;
	font-family: 'Montserrat';
	font-size: 7.4rem;
	font-weight: bold;
	transition: all 1s;
}
body.s_ie .sec01 .title h1,
body.s_edge .sec01 .title h1 {
	font-weight: normal;
}
.sec01 .title .text03 {
	color: #111;
	font-size: 2.8rem;
}
.sec01 .title.move {
	transition-delay: 0s;
	top: -20px;
}
.sec01 .title.move .text01,
.sec01 .title.move .text02,
.sec01 .title.move .text03 {
	opacity: 0;
}
.sec01 .title.move h1 {
	font-size: 3rem;
}
@media screen and (max-width: 767px){
	.sec01 .bg01 { left: 87%; top: -2%; width: 11%; }
	.sec01 .bg02 { left:  1%; top: 47%; width:  9%; }
	.sec01 .bg03 { left: 81%; top: 85%; width:  9%; }
	.sec01 .bg04 { left: 84%; top: 42%; width: 10%; }
	.sec01 .bg05 {
		left: 51%;
		top: 61%;
		width: 5%;
		border-width: 3px;
	}
	.sec01 .bg06 {
		left: 9%;
		top: 90%;
		width: 8%;
		border-width: 4px;
	}
	.sec01 .bg07 {
		left: 37%;
		top: 20%;
		width: 6%;
		border-width: 3px;
	}
	.sec01 .bg08 {
		left: 95%;
		top: 79%;
		width: 4%;
		border-width: 3px;
	}
	.sec01 .bg09 {
		left: 41%;
		top: 1%;
		width: 8%;
		border-width: 3px;
	}
	.sec01 .bg10 {
		left: 92%;
		top: 55%;
		width: 4%;
		border-width: 3px;
	}
	.sec01 .item01 { left: 47%; top:  5%; width: 50%; }
	.sec01 .item01.start { left: 25%; top: 35%; }
	.sec01 .item02 { left:  7%; top: 24%; width: 32%; }
	.sec01 .item03 { left:  1%; top:  0%; width: 30%; }
	.sec01 .item04 { left: -4%; top: 57%; width: 45%; }
	.sec01 .item05 { left: 44%; top: 74%; width: 30%; }
	.sec01 .item06 { left: 68%; top: 58%; width: 30%; }

	.sec01 .item01.up { top: calc(-130vh +  5%); }
	.sec01 .item02.up { top: calc(-130vh + 24%); }
	.sec01 .item03.up { top: calc(-130vh +  0%); }
	.sec01 .item04.up { top: calc(-130vh + 57%); }
	.sec01 .item05.up { top: calc(-130vh + 77%); }
	.sec01 .item06.up { top: calc(-130vh + 58%); }
	body.s_ie .sec01 .item01.up { top: -145%; }
	body.s_ie .sec01 .item02.up { top: -126%; }
	body.s_ie .sec01 .item03.up { top: -150%; }
	body.s_ie .sec01 .item04.up { top: -93%; }
	body.s_ie .sec01 .item05.up { top: -83%; }
	body.s_ie .sec01 .item06.up { top: -92%; }

	.sec01 .bg11 { left: 76%; top: 44%; width: 30%; }
	.sec01 .bg.show .bg11 { top: -6%; }
	.sec01 .bg12 { width: 15%; }
	.sec01 .bg13 { top: 100%; width: 16%; }
	.sec01 .bg.show .bg13 { top: 75%; }
	.sec01 .bg14 { left: 1%; width: 15%; }
	.sec01 .bg15 { left: 70%; top: 107%; width: 16%; }
	.sec01 .bg.show .bg15 { top: 82%; }
	.sec01 .bg16 { top: 38%; width: 12%; }
	.sec01 .bg.show .bg16 { top: 13%; }
	.sec01 .bg17 { left: 86%; top: 95%; width: 20%; }
	.sec01 .bg.show .bg17 { top: 45%; }
	.sec01 .bg18 { left: -3%; top: 49%; width: 12%; }
	.sec01 .bg19 { width: 8%; }
	.sec01 .bg20 { left: 80%; top: 92%; width: 20%; }
	.sec01 .bg.show .bg20 { top: 67%; }
	.sec01 .bg21 { top: 45%; width: 15%; }
	.sec01 .bg.show .bg21 { top: 20%; }
	.sec01 .bg22 { left: -3%; top: 128%; width: 30%; }
	.sec01 .bg.show .bg22 { top: 78%; }
	.sec01 .bg23 { top: 47%; width: 25%; }
	.sec01 .bg.show .bg23 { top: -3%; }
	.sec01 .bg24 { width: 8%; }
	.sec01 .bg25 { left: 13%; width: 7%; }
	.sec01 .bg26 { top: 30%; width: 5%; }

	.sec01 .logo {
		width: 100px;
	}
	.sec01 .logo.small {
		width: 70px;
	}
	.sec01 .logo.move {
		top: 20%;
	}
	.sec01 .logo.hide {
		top: -50%;
	}
	.sec01 .title {
		top: 38%;
	}
	.sec01 .title.show {
		top: 28%;
	}
	.sec01 .title.move {
		top: 0;
	}
	.sec01 .title .text01 {
		font-size: 1.6rem;
	}
	.sec01 .title .text02 {
		font-size: 1.6rem;
	}
	.sec01 .title h1 {
		margin: 10px 0;
		font-size: 4.2rem;
	}
	.sec01 .title .text03 {
		font-size: 2rem;
	}
	.sec01 .title.move h1 {
		font-size: 1.8rem;
	}
}

.sec01 .system {
	position: absolute;
	top: 100vh;
	padding-top: 100px;
	width: 100%;
	height: 100%;
	transition: top 1.5s;
}
.sec01 .system.show {
	top: 0vh;
}
.sec01 .bg27 { left:  9%; top: 22%; width: 6.25%; }
.sec01 .bg28 { left: 20%; top: 36%; width: 3.67%; }
.sec01 .bg29 { left: 14%; top: 72%; width: 6.64%; }
.sec01 .bg30 { left: 81%; top: 26%; width: 5.47%; }
.sec01 .bg31 { left: 78%; top: 35%; width:  3.2%; }

.sec01 .ground {
	position: absolute;
	left: -500px;
	right: -500px;
	bottom: 70px;
	height: 6px;
	background-color: #dcdcdc;
}
.sec01 .monoair {
	position: absolute;
	left: -50%;
	bottom: 76px;
	width: 27.81%;
	margin: 0 auto;
}
.sec01 .system.show .monoair {
	transition: left 2s;
	transition-delay: 1.5s;
	left: 35.9%;
}
.sec01 .monoair canvas {
	bottom: -25px;
	height: 44px;
}
.sec01 .btn {
	display: none;
}
.sec01 .box {
	position: absolute;
	border: 1px solid #dcdcdc;
	background-color: #fff;
	padding: 40px 28px 20px;
	width: 28.125%;
}
.sec01 .box01 {
	top: 40%;
	left: 5%;
	opacity: 0;
}
.sec01 .system.show .box01 {
	transition: opacity 1s;
	transition-delay: 3.5s;
	opacity: 1;
}
.sec01 .box02 {
	right: 5%;
	bottom: 15%;
	opacity: 0;
}
.sec01 .system.show .box02 {
	transition: opacity 1s;
	transition-delay: 4s;
	opacity: 1;
}
.sec01 .box .num {
	position: absolute;
	top: -20px;
	left: 30px;
	border-bottom: 4px solid #1778ef;
	color: #1778ef;
	font-size: 3.4rem;
}
.sec01 .box .lead {
	margin-bottom: 8px;
	color: #1778ef;
	font-size: 2rem;
	font-weight: bold;
}
.sec01 .box p {
	line-height: 2;
}
@media screen and (min-width: 768px) and (max-height: 650px){
	.sec01 .system {
		padding-top: 85px;
	}
	.sec01 .system .leadText {
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 767px){
	.sec01 .sectionInner {
		max-height: 680px;
	}
	.sec01 .system {
		padding-top: 130px;
	}
	.sec01 .bg27 { left:  5%; top: 12%; width: 12%; }
	.sec01 .bg28 { left: 25%; top: 40%; width:  9%; }
	.sec01 .bg29 { left: 13%; top: 85%; width: 12%; }
	.sec01 .bg30 { left: 83%; top: 17%; width:  8%; }
	.sec01 .bg31 { left: 88%; top: 55%; width:  8%; }

	.sec01 .leadText {
		margin-bottom: 15px;
	}
	.sec01 .ground {
		left: 0;
		right: 0;
		bottom: 120px;
	}
	.sec01 .monoair {
		bottom: 126px;
		width: 50%;
	}
	.sec01 .system.show .monoair {
		left: 25%;
	}
	.sec01 .btn {
		display: block;
		position: absolute;
		border: 2px solid #1778ef;
		background-color: #fff;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		padding-top: 5px;
		color: #1778ef;
		text-align: center;
		font-size: 24px;
		opacity: 0;
	}
	.sec01 .btn::after {
		content: "＋";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5px;
		font-size: 16px;
	}
	.sec01 .btn01 {
		top: 50%;
		left: 10%;
	}
	.sec01 .btn02 {
		top: 65%;
		right: 10%;
	}
	.sec01 .system.show .btn01 {
		transition: opacity 1s;
		transition-delay: 3.5s;
		opacity: 1;
	}
	.sec01 .system.show .btn02 {
		transition: opacity 1s;
		transition-delay: 4s;
		opacity: 1;
	}
	.sec01 .modalBg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		background-color: rgba(255,255,255,0.9);
		display: none;
	}
	.sec01 .box {
		z-index: 2000;
		width: 90%;
		margin: 0 auto;
		max-width: 400px;
		padding: 70px 28px 20px;
		display: none;
	}
	.sec01 .box::after {
		content: "×";
		position: absolute;
		top: 7px;
		right: 10px;
		font-size: 24px;
	}
	.sec01 .box01 {
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
	}
	.sec01 .box02 {
		left: 0;
		right: 0;
		bottom: 50%;
		transform: translateY(50%);
	}
	.sec01 .system.show .box01 {
		transition: none;
		transition-delay: 0;
	}
	.sec01 .system.show .box02 {
		transition: none;
		transition-delay: 0;
	}
	.sec01 .box .num {
		top: 5px;
	}
}

.sec02_01 .sectionInner {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sec02_01 .leadText {
	font-size: 4rem;
}
@media screen and (max-width: 767px){
	.sec02_01 .leadText {
		font-size: 2.2rem;
		line-height: 1.5;
	}
}

.sec02 .sectionInner {
	padding-top: 100px;
}
.sec02 .leadText {
	font-size: 3.2rem;
	opacity: 0;
}
.sec02.showed .leadText {
	transition: opacity 1s;
	transition-delay: 3.5s;
	opacity: 1;
}
.sec02 .animeArea {
	position: relative;
	left: 100vw;
	width: 840px;
	height: 265px;
	margin: 0 auto;
}
.sec02.showed .animeArea {
	transition: left 3s;
	left: 0vw;
}
.sec02 .bicycle {
	position: absolute;
	top: -20px;
	left: 150px;
	opacity: 1;
}
.sec02 .animeArea.scene02 .bicycle {
	transition: opacity 0.5s;
	opacity: 0;
}
.sec02 .gear {
	position: absolute;
	top: 60px;
	left: 480px;
}
.sec02 .animeArea.scene02 .gear {
	transition: all 2s;
	top: 50px;
	left: 0;
}
.sec02 .gear .text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -35px;
	text-align: center;
	opacity: 0;
}
.sec02 .animeArea.scene02 .gear .text {
	transition: opacity 2s;
	opacity: 1;
}
.sec02 .equal {
	position: absolute;
	top: 150px;
	left: 380px;
	opacity: 0;
}
.sec02 .animeArea.scene02 .equal {
	transition: opacity 0.5s;
	transition-delay: 2s;
	opacity: 1;
}
.sec02 .equal::before,
.sec02 .equal::after {
	content: "";
	position: absolute;
	top: -49px;
	left: 0;
	right: 0;
	width: 60px;
	height: 6px;
	margin: 0 auto;
	background-color: #626262;
}
.sec02 .equal::after {
	top: -20px;
}
.sec02 .reel {
	position: absolute;
	top: 20px;
	left: 560px;
	width: 187px;
	opacity: 0;
}
.sec02 .reel::before {
	content: "";
	display: block;
	padding-top: 94.65%;
}
.sec02 .reel .reel01 {
	position: absolute;
	left: 3.74%;
	bottom: 3.39%;
	width: 49.2%;
	animation: rotateR 6.5s infinite linear;
}
.sec02 .reel .reel02 {
	position: absolute;
	top: 0;
	right: 0;
	width: 65.24%;
	animation: rotateR 7s infinite linear;
}
.sec02 .reel svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.sec02 .reel p {
	position: absolute;
	left: -50px;
	right: -50px;
	bottom: -30px;
	text-align: center;
}
.sec02 .animeArea.scene02 .reel {
	transition: opacity 0.5s;
	transition-delay: 2s;
	opacity: 1;
}
.sec02 .memoBox {
	opacity: 0;
}
.sec02.showed .memoBox {
	transition: opacity 2s;
	transition-delay: 3.5s;
	opacity: 1;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec02 .sectionInner {
		padding-top: 60px;
	}
}
@media screen and (min-width: 768px) and (min-height: 800px){
	.sec02 .sectionInner {
		max-height: 800px;
	}
	.sec02 .animeArea {
		margin: 60px auto;
	}
}
@media screen and (max-width: 767px){
	.sec02 .sectionInner {
		padding-top: 50px;
		height: 550px;
	}
	.sec02 .leadText {
		height: 26px;
		font-size: 1.8rem;
	}
	.sec02 .animeArea {
		width: 100%;
		height: 245px;
	}
	.sec02 .bicycle {
		top: -15px;
		left: 20px;
		right: 0;
		width: 150px;
		margin: 0 auto;
	}
	.sec02 .gear {
		top: 150px;
		left: 0;
		right: 0;
		width: 180px;
		margin: 0 auto;
	}
	.sec02 .animeArea.scene02 .gear {
		top: 20px;
		right: 35%;
	}
	.sec02 .gear .text {
		bottom: -20px;
		font-size: 12px;
	}
	.sec02 .equal {
		top: 180px;
		left: auto;
		right: 180px;
		font-size: 12px;
	}
	.sec02 .equal::before,
	.sec02 .equal::after {
		top: -36px;
		width: 40px;
		height: 4px;
	}
	.sec02 .equal::after {
		top: -20px;
	}
	.sec02 .reel {
		top: 75px;
		left: auto;
		right: 20px;
		width: 130px;
	}
	.sec02 .reel p {
		left: -25px;
		right: -25px;
		bottom: -25px;
		font-size: 12px;
	}
}

.sec03 .sectionInner {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sec03 .leadText {
	font-size: 4rem;
}
@media screen and (max-width: 767px){
	.sec03 .sectionInner {
		max-width: 360px;
	}
	.sec03 .leadText {
		font-size: 2.4rem;
		line-height: 1.5;
	}
}

.sec04 .sectionInner {
	padding-top: 80px;
}
.sec04 .animeArea {
	position: relative;
	left: 0;
	width: 760px;
	height: 260px;
	margin: 0 auto;
}
.sec04 .image01 {
	position: absolute;
	z-index: 0;
	top: 20px;
	left: 270px;
	opacity: 1;
	transition: opacity 0.5s;
}
.sec04 .animeArea.scene03 .image01,
.sec04 .animeArea.scene04 .image01 {
	top: 28px;
	left: 480px;
}
.sec04 .animeArea.scene02 .image01,
.sec04 .animeArea.scene04 .image01 {
	opacity: 0;
}
.sec04 .image01::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	z-index: -1;
	width: 300px;
	height: 6px;
	background-color: #dcdcdc;
}
.sec04 .animeArea.scene03 .image01::before,
.sec04 .animeArea.scene04 .image01::before {
	width: 1000px;
}
.sec04 .image01 .reel {
	position: absolute;
	top: 2%;
	right: 2.5%;
	width: 56.13%;
	animation: oldReel 1s infinite linear;
}
@keyframes oldReel {
	0% { transform: rotate(0); }
	40% { transform: rotate(0); }
	47% { transform: rotate(10deg); }
	50% { transform: rotate(0); }
	90% { transform: rotate(0); }
	97% { transform: rotate(10deg); }
	100% { transform: rotate(0); }
}
.sec04 .image01 .tape {
	position: absolute;
	bottom: -4px;
	left: -130px;
	width: 130px;
	height: 9px;
	background: url(../img/sec04_img_01_03.png);
	animation: oldTape 1s infinite linear;
}
@keyframes oldTape {
	0% { background-position: 0 0; }
	40% { background-position: 0 0; }
	50% { background-position: -11px 0; }
	90% { background-position: -11px 0; }
	100% { background-position: -22px 0; }
}
@keyframes oldTapeSp {
	0% { background-position: 0 0; }
	40% { background-position: 0 0; }
	50% { background-position: -8px 0; }
	90% { background-position: -8px 0; }
	100% { background-position: -16px 0; }
}
.sec04 .image01 p {
	position: absolute;
	left: 35px;
	bottom: -35px;
	font-size: 1.6rem;
}
.sec04 .animeArea.scene03 .image01 p,
.sec04 .animeArea.scene04 .image01 p {
	display: none;
}
.sec04 .image02 {
	position: absolute;
	z-index: 0;
	top: 25px;
	left: 265px;
	width: 28.125%;
	opacity: 1;
	transition: opacity 0.5s;
}
.sec04 .animeArea:not(.scene02) .image02 {
	opacity: 0;
}
.sec04 .image02::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	z-index: -1;
	width: 300px;
	height: 6px;
	background-color: #dcdcdc;
}
.sec04 .image02 canvas {
	bottom: -12px;
}
.sec04 .image03 {
	position: absolute;
	z-index: 0;
	top: 25px;
	left: 110px;
	width: 28.125%;
	opacity: 1;
	transition: opacity 0.5s;
}
.sec04 .animeArea.scene01 .image03,
.sec04 .animeArea.scene02 .image03 {
	opacity: 0;
}
.sec04 .animeArea.scene04 .image03 {
	top: 64px;
	left: 214px;
	width: 44%;
	transition: all 1.5s;
}
.sec04 .image03::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	z-index: -1;
	width: 210px;
	height: 6px;
	background-color: #dcdcdc;
}
.sec04 .animeArea.scene04 .image03::before {
	display: none;
}
.sec04 .image03 canvas {
	bottom: -19px;
	height: 34px;
}
.sec04 .animeArea.scene04 .image03 canvas {
	display: none;
}
.sec04 .leadArea {
	display: flex;
	height: 100px;
	justify-content: center;
	align-items: center;
}
.sec04 .leadArea .leadText {
	margin-bottom: 10px;
	font-size: 2.4rem;
}
.sec04 .textArea {
	position: relative;
	max-width: 760px;
	height: 105px;
	margin: 0 auto;
	padding: 0 10px;
	border-left: 2px solid #7ecef4;
	border-right: 2px solid #7ecef4;
	background-color: rgba(255,255,255,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 2;
}
.sec04 .textArea::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	border-top: 2px solid #7ecef4;
}
.sec04 .textArea::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 90px;
	border-bottom: 2px solid #7ecef4;
}
.sec04 .textArea .inner::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 20px;
	border-bottom: 2px solid #7ecef4;
}
.sec04 .textArea .inner::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	border-top: 2px solid #7ecef4;
}
.sec04 .system {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: #1778ef;
	display: flex;
	min-height: 680px;
	align-items: center;
	opacity: 0;
	transition: opacity 1s;
}
.sec04 .system.show {
	z-index: 0;
	opacity: 1;
}
.sec04 .system .inner {
	position: relative;
	width: 100%;
	height: 480px;
	text-align: center;
}
.sec04 .system h3 {
	margin-bottom: 60px;
	color: #fff;
	font-size: 2.4rem;
}
.sec04 .system .bg li {
	position: absolute;
	animation: rotateR 4s infinite linear;
}
.sec04 .bg01 { left: 14%; top:  1%; width: 6.25%; }
.sec04 .bg02 { left:  8%; top: 82%; width: 4.69%; }
.sec04 .bg03 { left: 88%; top: 70%; width: 8.28%; }
.sec04 .bg04 { left: 87%; top:100%; width: 3.13%; }

.sec04 .system .bgText {
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
	color: #fff;
	font-family: 'Montserrat';
	font-size: 12rem;
	opacity: 0.1;
}
.sec04 .system .monoair {
	width: 332px;
	margin: 0 auto;
	top: 0;
	transition: top 0.5s;
}
.sec04 .system .monoair.run {
	top: 5%;
}
.sec04 .system .monoair .reel01,
.sec04 .system .monoair .reel02 {
	animation-play-state: paused;
}
.sec04 .system .monoair.run .reel01,
.sec04 .system .monoair.run .reel02 {
	animation-play-state: running;
}
.sec04 .system .monoair .body {
	position: static;
}
.sec04 .system .monoair .airtouch {
	position: absolute;
	top: 11.27%;
	left: 10.96%;
	width: 56.18%;
	transform-origin: 10% 93%;
	transform: rotate(-4deg);
	transition: all 0.5s;
}
.sec04 .system .monoair.run .airtouch {
	transform: rotate(0);
}
.sec04 .system .monoair .head {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 17.17%;
	transform: rotate(0);
	transition: all 0.5s;
}
.sec04 .system .monoair.run .head {
	transform: rotate(8deg);
}
.sec04 .system .monoair .push {
	position: absolute;
	top: 64%;
	left: -25%;
	width: 22.3%;
	opacity: 0;
}
.sec04 .system .monoair .push.show {
	transition: all 0.3s;
	top: 65%;
	left: -24%;
	opacity: 1;
}
.sec04 .system .monoair .line {
	position: absolute;
	top: 35%;
	left: 47%;
	display: none;
}
.sec04 .system .monoair .text {
	position: absolute;
	left: 100%;
	bottom: 0;
	border-bottom: 2px solid #fff;
	padding: 0 5px 5px 12px;
	white-space: nowrap;
	text-align: left;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1.6;
}
.sec04 .system .monoair .text li {
	display: none;
}
.sec04 .system .monoair .text li.show {
	display: block;
}
.sec04 .system .tape {
	position: absolute;
	top: 434px;
	right: calc(50% + 158px);
	width: 0;
	height: 4px;
	background-color: #fff;
	transition: width 1s linear;
}
.sec04 .system .tape.show {
	transition-delay: 0.8s;
	width: 1000px;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec04 .sectionInner {
		padding-top: 50px;
	}
	.sec04 .system {
		min-height: 620px;
	}
}
@media screen and (min-width: 768px) and (min-height: 800px){
	.sec04 .sectionInner {
		max-height: 800px;
	}
	.sec04 .animeArea {
		margin: 60px auto;
	}
	.sec04 .animeArea.scene04 .image03 {
		top: 78px;
	}
}
@media screen and (max-width: 1150px){
	.sec04 .system .monoair .text {
		font-size: 2.1rem;
	}
}
@media screen and (max-width: 767px){
	.sec04 .sectionInner {
		padding-top: 50px;
		height: 550px;
	}
	.sec04 .bg01 { left:  1%; top: -9%; width: 12%; }
	.sec04 .bg02 { left:  3%; top: 67%; width: 10%; }
	.sec04 .bg03 { left: 89%; top: 75%; width: 15%; }
	.sec04 .bg04 { left: 58%; top:105%; width:  9%; }

	.sec04 .animeArea {
		width: 320px;
		height: 230px;
	}
	.sec04 .image01 {
		top: 50px;
		left: 100px;
		width: 130px;
	}
	.sec04 .animeArea.scene03 .image01,
	.sec04 .animeArea.scene04 .image01 {
		top: 110px;
		left: 180px;
		width: 100px;
	}
	.sec04 .image01::before {
		bottom: -2px;
		height: 4px;
	}
	.sec04 .animeArea.scene03 .image01::before,
	.sec04 .animeArea.scene04 .image01::before {
		width: 300px;
	}
	.sec04 .image01 .tape {
		bottom: -3px;
		left: -100px;
		width: 100px;
		height: 7px;
		background-size: 8px auto;
		animation: oldTapeSp 1s infinite linear;
	}
	.sec04 .image01 p {
		left: 10px;
		bottom: -30px;
		font-size: 1.3rem;
	}
	.sec04 .image02 {
		top: 50px;
		left: 100px;
		width: 140px;
	}
	.sec04 .image02::before {
		bottom: -4px;
		height: 4px;
	}
	.sec04 .image02 canvas {
		bottom: -9px;
		height: 14px;
	}
	.sec04 .image03 {
		top: 15px;
		left: 0;
		right: 30%;
		width: 110px;
		margin: 0 auto;
	}
	.sec04 .animeArea.scene04 .image03 {
		top: 60px;
		left: 0;
		right: 0;
		width: 220px;
	}
	.sec04 .image03::before {
		width: 120px;
		height: 4px;
	}
	.sec04 .image03 canvas {
		bottom: -17px;
		height: 28px;
	}
	.sec04 .leadArea .leadText {
		margin-bottom: 0;
		font-size: 1.6rem;
		line-height: 1.4;
	}
	.sec04 .leadArea .leadText.s_spS {
		font-size: 1.3rem;
	}
	.sec04 .leadArea .leadText.s_spS span::before {
		bottom: 2px;
		height: 5px;
	}
	.sec04 .textArea {
		height: 95px;
		margin: 0 10px;
		font-size: 1.2rem;
		line-height: 1.4;
	}
	.sec04 .system {
		min-height: 0;
	}
	.sec04 .system .inner {
		height: 370px;
	}
	.sec04 .system h3 {
		margin-bottom: 30px;
		font-size: 1.8rem;
	}
	.sec04 .system .bgText {
		top: 70px;
		font-size: 7rem;
	}
	.sec04 .system .monoair {
		width: 220px;
	}
	.sec04 .system .monoair .line {
		top: 120%;
		left: -40px;
		right: -40px;
		width: auto;
		transition: top 0.5s;
	}
	.sec04 .system .monoair.run .line {
		top: 115%;
	}
	.sec04 .system .monoair .line img {
		display: none;
	}
	.sec04 .system .monoair .text {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		border-bottom: none;
		padding: 0;
		text-align: center;
		font-size: 1.5rem;
	}
	.sec04 .system .tape {
		top: 284px;
		right: calc(50% + 105px);
	}
	.sec04 .system .tape.show {
		width: 500px;
	}
}

.sec05 .sectionInner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sec05 .question {
	margin-bottom: 30px;
	display: inline-block;
	background-color: rgba(123,216,247,0.4);
	padding: 13px 20px;
	font-size: 2.4rem;
	font-weight: bold;
}
.sec05 .leadText {
	font-size: 3.2rem;
}
.sec05 .leadText strong {
	font-size: 5rem;
	line-height: 1.1;
}
.sec05 .info {
	margin-top: 10px;
	font-size: 1.8rem;
}
@media screen and (max-width: 767px){
	.sec05 .question {
		margin-bottom: 20px;
		padding: 8px 10px;
		font-size: 1.6rem;
	}
	.sec05 .leadText {
		margin-bottom: 5px;
		font-size: 2rem;
	}
	.sec05 .leadText strong {
		font-size: 3rem;
	}
	.sec05 .info {
		margin-top: 20px;
		font-size: 1.4rem;
	}
}

.sec06 {
	background-color: #fff;
}
.sec06 .bg {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 40px;
	background: url(../img/sec06_bg.jpg) no-repeat 50% 50%;
	background-size: cover;
	overflow: hidden;
}
.sec06 .bg::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
}
.sec06 .bg video {
	position: absolute;
}
.sec06 .sectionInner {
	max-width: 1000px;
	max-height: 500px;
}
.sec06 .sectionInner .fukidashi {
	position: absolute;
	top: 144px;
	left: 10px;
	display: flex;
	align-items: center;
	background: url(../img/sec06_fukidashi.png) no-repeat 0 0;
	width: 558px;
	height: 165px;
	padding: 0 40px 0 24px;
	opacity: 0;
	transition: opacity 0.5s;
}
.sec06.show .sectionInner .fukidashi {
	transition-delay: 4.5s;
	opacity: 1;
}
.sec06 .sectionInner .fukidashi .leadText {
	text-align: left;
	font-size: 2.4rem;
	line-height: 1.8;
}
.sec06 .percent {
	position: absolute;
	top: 30px;
	right: 273px;
	width: 473px;
	transition: all 1.5s;
}
.sec06 .percent .base {
	opacity: 0;
	transition: all 0.5s;
}
.sec06 .percent .num {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 0.5s;
}
.sec06.show .percent {
	top: 118px;
	right: 34px;
	width: 349px;
	transition-delay: 3s;
}
.sec06.show .percent .base {
	transition-delay: 1.5s;
	opacity: 1;
}
.sec06.show .percent .num {
	transition-delay: 0.5s;
	opacity: 1;
}
.sec06 .note {
	position: absolute;
	left: 10px;
	bottom: 45px;
	width: 535px;
	background-color: rgba(255,255,255,0.7);
	padding: 10px 15px;
	font-size: 1.2rem;
	line-height: 1.5;
	opacity: 0;
	transition: opacity 0.5s;
}
.sec06.show .note {
	transition-delay: 4.5s;
	opacity: 1;
}
.sec06 .overLayer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 1s;
}
.sec06 .overLayer.show {
	opacity: 1;
}
.sec06 .overLayer .leadText {
	margin: 8px 0;
	font-size: 2.4rem;
}
.sec06 .overLayer ul {
	position: absolute;
	top: -70px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 1366px;
	height: 100%;
	max-height: 750px;
	margin: auto;
}
.sec06 .overLayer li {
	position: absolute;
	opacity: 0;
	transform: scale(1.5,1.5);
	transition: all 1s;
	transition-delay: 1s;
}
.sec06 .overLayer li.show {
	opacity: 1;
	transform: scale(1,1);
}
.sec06 .img01 { left: 23.4%; top: 5.5%; width: 26.6%; }
.sec06 .img02 { left: 69%; top: 53.4%; width: 38%; }
.sec06 .img03 { left: 19.8%; top: 69.6%; width: 32%; }
.sec06 .img04 { left: 49.4%; top: 13.5%; width: 22.4%; }
.sec06 .img05 { left: 4.6%; top: 56.5%; width: 26.9%; }
.sec06 .img06 { left: 50.1%; top: 66.9%; width: 26.9%; }
.sec06 .img07 { left: -2.8%; top: 12.1%; width: 30.9%; }
.sec06 .img08 { left: 70.5%; top: 10.6%; width: 28.3%; }

.sec06 .overLayer li p {
	position: absolute;
	background-color: rgba(255,255,255,0.8);
	padding: 5px 10px;
	font-size: 1.6rem;
}
.sec06 .img01 p { right: 0; top: 10px; }
.sec06 .img02 p { left: 0; top: 10px; }
.sec06 .img03 p { left: 0; bottom: 20px; }
.sec06 .img04 p { left: 0; bottom: 10px; }
.sec06 .img05 p { left: 0; top: 20px; }
.sec06 .img06 p { left: 0; top: 20px; }
.sec06 .img07 p { right: 0; bottom: 20px; }
.sec06 .img08 p { right: 0; bottom: 10px; }

@media screen and (min-width: 1201px) and (max-height: 800px){
	.sec06 .img03 p { bottom: 60px; }
}
@media screen and (max-width: 1200px){
	.sec06 .overLayer ul {
		top: 0;
		max-height: 700px;
	}
	.sec06 .img02 { top: 57.4%; }
	.sec06 .img05 { left: 1%; }
}
@media screen and (max-width: 767px){
	.sec06 .bg {
		top: 50px;
	}
	.sec06 .sectionInner {
		max-height: 450px;
	}
	.sec06 .sectionInner .fukidashi {
		top: 10px;
		left: 10px;
		right: 10px;
		justify-content: center;
		background: url(../img/sec06_fukidashi_sp.png) no-repeat 0 0;
		background-size: contain;
		width: auto;
		max-width: 335px;
		margin: 0 auto;
		height: 100px;
		padding: 0 0 22px;
	}
	.sec06 .sectionInner .fukidashi .leadText {
		text-align: center;
		font-size: 1.4rem;
		line-height: 1.5;
		white-space: nowrap;
	}
	.sec06 .percent {
		top: 28%;
		left: 0;
		right: 0;
		width: 60%;
		max-width: 210px;
		margin: 0 auto;
	}
	.sec06.show .percent {
		top: 28%;
		right: 0;
		width: 60%;
	}
	.sec06 .note {
		right: 10px;
		bottom: 10px;
		width: auto;
		padding: 10px;
		font-size: 1rem;
		line-height: 1.4;
	}
	.sec06 .overLayer .leadText {
		margin: 5px 0;
		font-size: 5vw;
	}
	.sec06 .img01 { left: 21%; top: 24%; width: 32%; }
	.sec06 .img02 { left: 66%; top: 66%; width: 41%; }
	.sec06 .img03 { left: 16%; top: 73%; width: 38%; }
	.sec06 .img04 { left: 44%; top: 11%; width: 35%; }
	.sec06 .img05 { left: -4%; top: 60%; width: 38%; }
	.sec06 .img06 { left: 48%; top: 62%; width: 32%; }
	.sec06 .img07 { left: -5%; top: 14%; width: 36%; }
	.sec06 .img08 { left: 71%; top: 19%; width: 35%; }

	.sec06 .overLayer li p {
		display: none;
	}
}

.sec07 .sectionInner {
	padding-top: 100px;
}
.sec07 .head {
	margin-bottom: 15px;
	text-align: center;
	font-family: 'Montserrat';
	font-size: 2.4rem;
	font-weight: bold;
}
.sec07 .leadText {
	margin-bottom: 50px;
	font-size: 3.2rem;
}
.sec07 .movie {
	width: 640px;
	margin: 0 auto;
}
.sec07 .movie .inner {
	position: relative;
	padding-top: 56.25%;
}
.sec07 .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec07 .sectionInner {
		padding-top: 50px;
	}
	.sec07 .leadText {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 767px){
	.sec07 .head {
		font-size: 1.8rem;
	}
	.sec07 .leadText {
		font-size: 2rem;
	}
	.sec07 .movie {
		width: 90%;
	}
}

.sec08::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 596px;
	height: 683px;
	background: url(../img/bg_lineup_01.png) no-repeat 0 100%;
}
.sec08::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 621px;
	height: 630px;
	background: url(../img/bg_lineup_02.png) no-repeat 100% 100%;
}
.sec08 .sectionInner {
	padding-top: 60px;
}
.sec08 .subLead {
	margin-bottom: 20px;
}
.sec08 .column {
	position: relative;
	z-index: 10;
	float: left;
	width: 50%;
	text-align: center;
}
.sec08 .logo {
	background-color: #fff;
	padding: 10px;
}
.sec08 h3 {
	margin: 5px 0 25px;
	font-size: 2.8rem;
}
.sec08 .img {
	position: relative;
	margin: 0 auto;
	margin-bottom: 45px;
}
.sec08 .mono .img {
	width: 360px;
}
.sec08 .pit .img {
	width: 360px;
	padding: 6px 70px 5px 0;
}
.sec08 .text {
	position: absolute;
	font-size: 2rem;
	text-align: left;
	white-space: nowrap;
}
.sec08 .mono .text {
	top: 210px;
	left: 280px;
}
.sec08 .pit .text {
	top: 200px;
	left: 230px;
}
.sec08 .cmnBtn {
	width: 300px;
	margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec08 .sectionInner {
		padding-top: 40px;
	}
	.sec08 .img {
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 767px){
	.sec08::before {
		left: -20%;
		bottom: -10%;
		width: 300px;
		height: 400px;
		background-size: contain;
	}
	.sec08::after {
		bottom: 40%;
		width: 308px;
		height: 344px;
		background-image: url(../img/bg_lineup_03.png);
		background-size: contain;
	}
	.sec08 .sectionInner {
		padding-top: 50px;
	}
	.sec08 .subLead {
		margin-bottom: 15px;
		font-size: 1.5rem;
	}
	.sec08 .column {
		float: none;
		width: auto;
	}
	.sec08 .logo {
		height: 47px;
	}
	.sec08 h3 {
		margin: 0 0 10px;
		font-size: 1.4rem;
	}
	.sec08 .img {
		margin-bottom: 30px;
	}
	.sec08 .mono .img {
		padding: 0 50% 0 5%;
		width: auto;
		height: 110px;
	}
	.sec08 .pit .img {
		padding: 0 10% 0 55%;
		width: auto;
		height: 118px;
	}
	.sec08 .text {
		font-size: 1.3rem;
	}
	.sec08 .mono .text {
		top: 20px;
		left: 57%;
	}
	.sec08 .pit .text {
		top: 20px;
		left: 10%;
	}
	.sec08 .cmnBtn {
		position: absolute;
		width: 150px;
	}
	.sec08 .mono .cmnBtn {
		right: 5%;
		bottom: 0;
	}
	.sec08 .pit .cmnBtn {
		left: 5%;
		bottom: 0;
	}
}

.sec09 .sectionInner {
	padding: 0 15px;
}
.sec09 h2 {
	text-align: center;
}
.sec09 h2 img {
	background-color: #fff;
	padding: 8px;
}
.sec09 .subTitle {
	margin-bottom: 15px;
	text-align: center;
	font-size: 2rem;
}
.sec09 .mainLead {
	margin-bottom: 15px;
	text-align: center;
	font-size: 2.8rem;
}
.sec09 .item {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
.sec09 .img {
	position: absolute;
	left: 28.3%;
	top: 10.7%;
	width: 40%;
}
.sec09 .line {
	position: relative;
	z-index: 10;
}
.sec09 .text01 {
	position: absolute;
	left: 2.5%;
	top: 7%;
	z-index: 10;
	width: 28%;
}
.sec09 .text02 {
	position: absolute;
	left: 71.5%;
	top: 1%;
	z-index: 10;
	width: 26%;
}
.sec09 .text03 {
	position: absolute;
	left: 2.5%;
	top: 69.5%;
	z-index: 10;
	width: 26%;
}
.sec09 .text04 {
	position: absolute;
	left: 69%;
	top: 49%;
	z-index: 10;
	width: 27%;
}
.sec09 .lead {
	margin-bottom: 15px;
	color: #1778ef;
	font-size: 2.4rem;
}
.sec09 .item p {
	font-size: 1.6rem;
	line-height: 2;
}
.sec09 .cmnBtn {
	position: absolute;
	left: 55%;
	bottom: 0;
	z-index: 10;
	width: 300px;
	padding: 13px 0;
	font-size: 3.6rem;
	line-height: 1.2;
}
.sec09 .cmnBtn span {
	display: block;
	font-size: 2.4rem;
	font-weight: normal;
	letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec09 .item {
		max-width: 960px;
	}
	.sec09 .lead {
		font-size: 2.1rem;
	}
	.sec09 .item p {
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.sec09 .cmnBtn {
		left: 60%;
		bottom: 15px;
	}
}
@media screen and (max-width: 1100px){
	.sec09 .lead {
		font-size: 2.2rem;
	}
	.sec09 .item p {
		line-height: 1.6;
	}
}
@media screen and (max-width: 767px){
	.sec09 .sectionInner {
		padding: 50px 0 0;
	}
	.sec09 h2 img {
		height: 43px;
	}
	.sec09 .subTitle {
		margin-bottom: 8px;
		font-size: 1.2rem;
	}
	.sec09 .mainLead {
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	.sec09 .item {
		width: 320px;
		max-width: 90%;
	}
	.sec09 .img {
		left: 9.91%;
		top: 21.5%;
		width: 71.72%;
	}
	.sec09 .text01 {
		left: 2%;
		top: 12%;
		width: auto;
	}
	.sec09 .text02 {
		top: 1%;
		width: auto;
	}
	.sec09 .text03 {
		left: 20%;
		top: 84%;
		width: auto;
	}
	.sec09 .text04 {
		left: 68%;
		top: 75%;
		width: auto;
	}
	.sec09 .lead {
		font-size: 1.2rem;
		line-height: 1.5;
	}
	.sec09 .item p {
		display: none;
	}
	.sec09 .cmnBtn {
		left: 0;
		right: 0;
		bottom: -65px;
		width: 175px;
		margin: 0 auto;
		padding: 10px 0;
		font-size: 2.1rem;
	}
	.sec09 .cmnBtn span {
		font-size: 1.4rem;
	}
}

.sec10 .sectionInner {
	padding: 0 15px;
}
.sec10 h2 {
	margin-bottom: 5px;
	text-align: center;
}
.sec10 h2 img {
	background-color: #fff;
	padding: 8px;
}
.sec10 .subTitle {
	margin-bottom: 15px;
	text-align: center;
	font-size: 2rem;
}
.sec10 .mainLead {
	margin-bottom: 50px;
	text-align: center;
	font-size: 2.8rem;
}
.sec10 .item {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
.sec10 .img {
	position: absolute;
	left: 33.91%;
	top: 0;
	width: 34.91%;
}
.sec10 .line {
	position: relative;
	z-index: 10;
}
.sec10 .text01 {
	position: absolute;
	left: 3%;
	top: 1.5%;
	z-index: 10;
	width: 29%;
}
.sec10 .text02 {
	position: absolute;
	left: 72.5%;
	top: -5%;
	z-index: 10;
	width: 27%;
}
.sec10 .text03 {
	position: absolute;
	left: 71.5%;
	top: 46.5%;
	z-index: 10;
	width: 26%;
}
.sec10 .text04 {
	position: absolute;
	left: 5.5%;
	top: 73.5%;
	z-index: 10;
	width: 26%;
}
.sec10 .lead {
	margin-bottom: 15px;
	color: #1778ef;
	font-size: 2.4rem;
}
.sec10 .item p {
	font-size: 1.6rem;
	line-height: 2;
}
.sec10 .cmnBtn {
	position: absolute;
	top: 84%;
	left: 60%;
	z-index: 10;
	width: 250px;
	padding: 13px 0;
	font-size: 3.6rem;
	line-height: 1.2;
}
.sec10 .cmnBtn span {
	display: block;
	font-size: 2.4rem;
	font-weight: normal;
	letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec10 .mainLead {
		margin-bottom: 35px;
	}
	.sec10 .item {
		max-width: 960px;
	}
	.sec10 .lead {
		font-size: 2.1rem;
	}
	.sec10 .item p {
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.sec10 .cmnBtn {
		top: 76%;
	}
}
@media screen and (max-width: 1100px){
	.sec10 .lead {
		font-size: 2.1rem;
	}
	.sec10 .item p {
		line-height: 1.6;
	}
}
@media screen and (max-width: 767px){
	.sec10 .sectionInner {
		padding: 50px 0 0;
	}
	.sec10 h2 img {
		height: 43px;
	}
	.sec10 .mainLead {
		margin-bottom: 15px;
		font-size: 1.4rem;
	}
	.sec10 .subTitle {
		margin-bottom: 8px;
		font-size: 1.2rem;
	}
	.sec10 .item {
		width: 340px;
		max-width: 92%;
	}
	.sec10 .img {
		left: 18.09%;
		top: 15%;
		width: 56.47%;
	}
	.sec10 .text01 {
		left: 1%;
		top: 0;
		width: auto;
	}
	.sec10 .text02 {
		left: 64%;
		top: 65%;
		width: auto;
	}
	.sec10 .text03 {
		left: 81%;
		top: 48.5%;
		width: auto;
	}
	.sec10 .text04 {
		left: 32%;
		top: 88%;
		width: auto;
	}
	.sec10 .lead {
		font-size: 1.2rem;
		line-height: 1.5;
	}
	.sec10 .item p {
		display: none;
	}
	.sec10 .cmnBtn {
		top: auto;
		left: 0;
		right: 0;
		bottom: -75px;
		width: 145px;
		margin: 0 auto;
		padding: 10px 0;
		font-size: 2.1rem;
	}
	.sec10 .cmnBtn span {
		font-size: 1.4rem;
	}
}

.sec11 .sectionInner {
	padding: 0 40px 0 20px;
}
.sec11 h2 {
	margin-bottom: 10px;
	text-align: center;
}
.sec11 h2 img {
	background-color: #fff;
	padding: 8px;
}
.sec11 .mainLead {
	margin-bottom: 30px;
	text-align: center;
	font-size: 2.8rem;
}
.sec11 .itemArea {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}
.sec11 .itemArea.sp {
	display: none;
}
.sec11 .pc .colLabel {
	margin-bottom: 15px;
	overflow: hidden;
	padding-left: 140px;
}
.sec11 .pc .colLabel li {
	float: left;
	width: 33.33%;
	padding: 0 10px;
}
.sec11 .pc .item {
	position: relative;
	padding-left: 140px;
}
.sec11 .pc .item + .item {
	border-top: 3px solid #e5e5e5;
}
.sec11 .pc .item .type {
	position: absolute;
	top: 0;
	left: 20px;
	bottom: 0;
	border: 1px solid #1778ef;
	width: 120px;
	height: 110px;
	margin: auto 0;
	background-color: #fff;
	padding-top: 15px;
	color: #1778ef;
	font-size: 1.8rem;
	line-height: 1.6;
}
.sec11 .pc .item .type span {
	display: block;
	margin-top: 5px;
	font-size: 1.1rem;
}
.sec11 .pc .item ul {
	overflow: hidden;
}
.sec11 .pc .item li {
	float: left;
	width: 33.33%;
	padding: 25px 20px;
}
.sec11 .pc .item li + li {
	border-left: 3px solid #e5e5e5;
}
.sec11 .pc .item li p {
	margin-top: 10px;
}
.sec11 .cmnBtn {
	width: 430px;
	margin: 30px auto 0;
}
.sec11 .cmnBtn span {
	margin-left: 15px;
	vertical-align: middle;
	font-size: 1.8rem;
	font-weight: normal;
}
@media screen and (min-width: 768px) and (max-height: 750px){
	.sec11 .pc .item li {
		padding: 15px 20px;
	}
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec11 h2 {
		margin-bottom: 0;
	}
	.sec11 .mainLead {
		margin-bottom: 15px;
	}
	.sec11 .pc .colLabel {
		margin-bottom: 5px;
	}
	.sec11 .pc .colLabel li img {
		width: 200px;
	}
}
@media screen and (max-width: 767px){
	.sec11 .sectionInner {
		max-height: 550px;
		padding: 35px 0 0;
	}
	.sec11 h2 {
		margin-bottom: 5px;
	}
	.sec11 h2 img {
		height: 43px;
	}
	.sec11 .mainLead {
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	.sec11 .itemArea.pc {
		display: none;
	}
	.sec11 .itemArea.sp {
		display: block;
	}
	.sec11 .tab {
		display: flex;
		width: 315px;
		margin: 0 auto 20px;
	}
	.sec11 .tab li {
		position: relative;
		width: 33.33%;
		background-color: #b1cef2;
		padding: 6px 0;
		color: #fff;
		font-size: 1.2rem;
	}
	.sec11 .tab li + li {
		border-left: 1px solid #fff;
	}
	.sec11 .tab li.current {
		background-color: #1778ef;
	}
	.sec11 .tab li.current::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -9px;
		width: 0;
		margin: 0 auto;
		border-top: 9px solid #1778ef;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
	}
	.sec11 .tabContent {
		display: none;
		width: 320px;
		margin: 0 auto;
	}
	.sec11 .tabContent.show {
		display: block;
	}
	.sec11 .tabContent li {
		margin-bottom: 15px;
	}
	.sec11 .tabContent .label {
		width: 90px;
		margin-right: 15px;
		vertical-align: middle;
	}
	.sec11 .tabContent .img {
		width: 170px;
		vertical-align: middle;
	}
	.sec11 .cmnBtn {
		width: 270px;
		margin: 10px auto 0;
	}
	.sec11 .cmnBtn span {
		margin-left: 10px;
		font-size: 1.4rem;
	}
}

.sec12::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 614px;
	height: 634px;
	background: url(../img/bg_lineup_04.png) no-repeat 0 100%;
}
.sec12 .sectionInner {
	padding: 80px 0 0;
}
.sec12 h2 {
	margin-bottom: 10px;
	text-align: center;
}
.sec12 h2 img {
	background-color: #fff;
	padding: 8px;
}
.sec12 .mainLead {
	margin-bottom: 30px;
	text-align: center;
	font-size: 2.8rem;
}
.sec12 .label {
	display: block;
	margin: 0 auto 40px;
}
.sec12 .itemArea {
	position: relative;
	max-width: 460px;
	padding-top: 20px;
	margin: 0 auto 60px;
	text-align: center;
}
.sec12 .itemArea p {
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;
}
.sec12 .cmnBtn {
	width: 400px;
	margin: 0 auto;
}
.sec12 .cmnBtn span {
	margin-left: 15px;
	vertical-align: middle;
	font-size: 1.8rem;
	font-weight: normal;
}
@media screen and (min-width: 768px) and (max-height: 670px){
	.sec12 .sectionInner {
		padding-top: 30px;
	}
}
@media screen and (max-width: 767px){
	.sec12::before {
		display: none;
	}
	.sec12 h2 img {
		height: 43px;
	}
	.sec12 .mainLead {
		margin-bottom: 15px;
		font-size: 1.4rem;
	}
	.sec12 .label {
		margin-bottom: 25px;
		width: 200px;
	}
	.sec12 .itemArea {
		padding: 0;
		margin: 0 auto 30px;
	}
	.sec12 .itemArea .img {
		width: 240px;
	}
	.sec12 .itemArea p {
		position: static;
		margin-top: 30px;
		text-align: center;
	}
	.sec12 .cmnBtn {
		width: 250px;
	}
	.sec12 .cmnBtn span {
		margin-left: 10px;
		font-size: 1.4rem;
	}
}

.scrollBtn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 1000;
	width: 60px;
	height: 40px;
	margin: 0 auto;
	padding: 5px;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}
.scrollBtn.show {
	visibility: visible;
	opacity: 0.6;
}
.scrollBtn.show:hover {
	opacity: 1;
}
.scrollBtn::after {
	content: "";
	position: absolute;
	right: 50%;
	bottom: 0;
	width: 35px;
	height: 35px;
	border-right: 6px solid #1778ef;
	border-bottom: 6px solid #1778ef;
	transform-origin: right bottom;
	transform: rotate(45deg);
	animation: scrollBtn 1s infinite ease-out;
}
body.colorBg .scrollBtn::after {
	border-color: #fff;
}
@keyframes scrollBtn {
	0% { bottom: 10px; }
	25% { bottom: 0; }
	100% { bottom: 10px; }
}
@media screen and (max-width: 767px){
	.scrollBtn {
		bottom: 10px;
		height: 30px;
	}
	.scrollBtn::after {
		width: 25px;
		height: 25px;
		border-right-width: 4px;
		border-bottom-width: 4px;
	}
}

.tombowLogo {
	position: fixed;
	right: 15px;
	bottom: 12px;
	z-index: 1000;
	width: 100px;
}
.tombowLogo:hover {
	opacity: 0.7;
}
.tombowLogo img {
	opacity: 1;
	transition: opacity 1s;
}
.tombowLogo .white {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
body.colorBg .tombowLogo img {
	opacity: 0;
}
body.colorBg .tombowLogo .white {
	opacity: 1;
}
@media screen and (max-width: 767px){
	.tombowLogo {
		right: 10px;
		bottom: 10px;
		width: 80px;
	}
}


/* マージンキャンセル
----------------------------------------- */

*:first-child {
	margin-top: 0;
}
*:last-child {
	margin-bottom: 0;
}