@charset "utf-8";

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

	vertical-align: baseline;
}
main,article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

sub, sup {
	font-size: 75%;
}

/* Custom Yu Gothic
-------------------------------------------------- */
@font-face {
	font-family: "Custom Yu Gothic";
	src: local("Yu Gothic");
	font-weight: 300;
}

@font-face {
	font-family: "Custom Yu Gothic";
	src: local("Yu Gothic");
	font-weight: 500;
}

@font-face {
	font-family: "Custom Yu Gothic";
	src: local("Yu Gothic");
	font-weight: bold;
}



ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	vertical-align: bottom;
}
html,
body {
	overflow-x: hidden;
}
*,
*:before,
*:after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}
a:link,
a:visited {
	outline: none;
	text-decoration: none;
}

@media (min-width: 768px ) {
	a {
		transition: opacity .5s;
	}
	a:hover {
		opacity: .5;
	}
	.pc-none {
		display: none;
	}
}

@media (max-width: 767px) {
	img {
		max-width: 100%;
	}
	.sp-none {
		display: none;
	}
}

#header {
	z-index: 30;
}

@media (min-width: 768px) {
	#header {
		height: 71px !important;
	}
}

@media (max-width: 767px) {
	#techheader h1 a {
		padding: 4.8vw;
	}
	#techheader h1 img {
		width: 55%;
	}
}


/* breadcrumbs
-------------------------------------------------- */
.breadcrumbs ul {
	overflow: hidden;
	font-size: 80%;
}

@media (max-width: 767px) {
	.breadcrumbs ul {
		width: 100%;
		margin: 15px 0 0;
		padding: 0 10px 5px;
		line-height: 1.3;
	}
	.breadcrumbs li {
		font-size: 2.6666vw;
	}
}

/* page-heading
-------------------------------------------------- */
.page-heading {
	position: relative;
	max-width: 1050px;
	margin: 0 auto;
	padding: 40px 25px 0;
	text-align: center;
}
.page-heading .page-caption {
	margin-top: 20px;
	font-size: 14px;
	font-weight: bold;
	color: #000;
}
.page-heading .btn-about {
	position: absolute;
	right: 25px;
	top: 40px;
	border: 1px solid #000;
}
.page-heading .btn-about a {
	position: relative;
	display: inline-block;
	padding: 10px 25px;
	font-size: 10px;
	text-align: center;
	color: #000;
	font-weight: bold;
	line-height: 1;
}
.page-heading .btn-about a::before {
	content: '';
	position: absolute;
	left: 5px;
	top:50%;
	width: 7px;
	height: 7px;
	border-top: 1px solid rgba(0,0,0,1);
	border-right: 1px solid #000;
	transform: rotate(45deg) translateY(-50%);
}

#techheader h1 a {
	display: inline-block;
}

@media (max-width: 767px) {
	.page-heading {
		padding: 5.3333vw 5.3333vw 0;
	}
	.page-heading .page-caption {
		font-size: 3.2vw;
		text-align: left;
		line-height: 1.6;
	}
}


/* drower-nav
-------------------------------------------------- */
.drower-nav {
	position: fixed;
	right: 0;
	top: 0;
	width: 400px;
	background: #333333;
	transition: opacity .5s;
	opacity: 0;
	z-index: -1;
}
.drower-nav.tggle-open {
	height: 100%;
}
.drower-nav.show {
	opacity: 1;
	z-index: 100;
}
.drower-nav .inner {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.drower-nav .inner::-webkit-scrollbar {
	display:none;
}
.drower-nav .drower-nav-list {
	margin: 0 auto;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
}
.drower-nav .drower-nav-list + .drower-nav-list {
	position: relative;
}
.drower-nav .drower-nav-list + .drower-nav-list::before {
	content: '';
	position: absolute;
	top: 0;
	background: #535353;
	height: 100%;
}
.drower-nav .drower-nav-list > li > span,
.drower-nav .drower-nav-list li a {
	display: block;
	padding: 20px 0 20px 15px;
	color: #fff;
}
.drower-nav .drower-nav-list .keywords-list li a {
	padding: 5px 0;
}
.drower-nav .drower-nav-list:nth-of-type(1) {
	padding-top: 100px;
}
.drower-nav .drower-nav-list > li {
	position: relative;
	display: block;
	border-top: 1px solid #707070;
	cursor: pointer;
}
.drower-nav .drower-nav-list > li > span {
	display: inline-block;
}
.drower-nav .drower-nav-list > li::before {
	content:'';
	position:absolute;
	right: 5px;
	top: 40%;
}
.drower-nav .drower-nav-list li:not(.multiple)::before {
	width: 10px;
	height: 10px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	transform: rotate(135deg);
}
.drower-nav .drower-nav-list > li.multiple::before {
	content:'';
	position:absolute;
	right: 10px;
	top: 28px;
	width: 16px;
	height: 1px;
	background: #fff;
	transform: translate(50%,-50%);
}
.drower-nav .drower-nav-list > li.multiple::after {
	content:'';
	position:absolute;
	right: 10px;
	top: 28px;
	width: 1px;
	height: 16px;
	background: #fff;
	transform: translate(0,-50%);
	transform-origin: top;
	transition: transform .25s;
}
.drower-nav .drower-nav-list > li.multiple.show::after {
	transform: rotate(90deg) translate(0,-50%);
}
.drower-nav .drower-nav-list .keywords-list {
	display: none;
	margin-top: 30px;
	padding-bottom: 30px;
	font-size: 15px;
	font-weight: normal;
}
.drower-nav .drower-nav-list .keywords-list li + li {
	margin-top: 20px;
}

.btn-drower {
	position: fixed;
	right: 60px;
	top: 90px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 68px;
	height: 68px;
	margin-left: auto;
	padding-bottom: 10px;
	background: #000;
	cursor: pointer;
	z-index: 90;
}
.btn-drower .text {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.btn-drower .line {
	display: block;
	position: absolute;
	top: 37.5%;
	left: 50%;
	width: inherit;
	width: 60%;
	height: 2px;
	background: #fff;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.btn-drower .line::before,
.btn-drower .line::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transition: -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.btn-drower .line::before {
	margin-top: -10px;
}
.btn-drower .line::after {
	margin-top: 8px;
}
.btn-drower.close {
	position: relative;
	z-index: 100;
}
.btn-drower.close span {
	background: transparent;
	z-index: 3;
}
.btn-drower.close span::before,
.btn-drower.close span::after {
	margin-top: 0;
	background: #fff;
}
.btn-drower.close span::before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.btn-drower.close span::after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
.overlay {
	position: fixed;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100vh;
	background: rgba(255,255,255,.8);
	transition: opacity .5s;
	transform: translate3d(0,0,0);
	opacity: 0;
	z-index: -1;
}
.overlay.show {
	left: 0;
	opacity: 1;
	z-index: 10;
}


@media (min-width: 768px) {
	.drower-nav {
		right: 0;
	}
	.drower-nav .inner {
		height: 100vh;
	}
	.drower-nav .drower-nav-list {
		width: 280px;
	}
	.drower-nav .drower-nav-list + .drower-nav-list::before {
		left: -60px;
		width: 400px;
	}
	.drower-nav .drower-nav-list a:hover {
		background: rgba(216,31,47,.5)
	}
	.drower-nav .drower-nav-list .keywords-list {
		padding-left: 15px;
	}
	.btn-drower.close {
		right: 60px;
	}
}

@media (max-width: 767px) {
	.drower-nav {
		width: 65vw;
	}
	.drower-nav .drower-nav-list {
		width: 52vw;
		font-size: 3.3333vw;
	}
	.drower-nav .drower-nav-list:nth-of-type(1) {
		padding: 18vw 0 0;
		border-width: 0.4vw;
	}
	.drower-nav .drower-nav-list:nth-of-type(2) {
		padding-top: 0;
	}
	.drower-nav .drower-nav-list + .drower-nav-list::before {
		left: -6.3334vw;
		width: 65vw;
	}
	.drower-nav .drower-nav-list > li > span,
	.drower-nav .drower-nav-list li a {
		padding: 4vw 0;
	}
	.drower-nav .drower-nav-list .keywords-list li a {
		padding: 2vw 0;
	}
	.drower-nav .drower-nav-list li::before {
		right: 1vw;
	}
	.drower-nav .drower-nav-list > li.multiple::before,
	.drower-nav .drower-nav-list > li.multiple::after {
		right: 2vw;
		top: 6vw;
	}
	.drower-nav .drower-nav-list .keywords-list {
		margin-top: 4vw;
		padding-bottom: 4vw;
		font-size: 3.3333vw;
	}
	.drower-nav .drower-nav-list .keywords-list li + li {
		margin-top: 4vw;
	}
	.btn-drower {
		right: 5.3333vw;
		top: 14vw;
		width: 58px;
		height: 58px;
	}
	.btn-drower.close {
		margin-right: 0;
	}
	.btn-drower.close .line {
		top: 33.5%;
		width: 50%;
	}
	.btn-drower .line::before {
		margin-top: -8px;
	}
	.btn-drower .line::after {
		margin-top: 6px;
	}
	.btn-drower .line,
	.btn-drower .line::before,
	.btn-drower .line::after {
		height: 0.4vw;
	}
}

@media (max-width: 480px) {
	.btn-drower .text {
		font-size: 2.6666vw;
		transform: translateX(0.2666vw);
	}
}

@media (max-width: 375px) {
	.btn-drower {
		top: 16vw;
	}
}

/* tag
-------------------------------------------------- */
#tag {
	margin: 0;
}
#tag .text-box p.tag {
	margin-top: 0;
	padding: 20px 0;
}

@media (max-width: 767px) {
	#tag .text-box p.tag {
		padding: 4.6666vw 0;
	}
}


/* cg-top
-------------------------------------------------- */
.cg-top {
	position: fixed;
	right: 25px;
	top: auto;
	bottom: 50px;
	width: 40px;
	height: 40px;
	transition: opacity .75s;
	opacity: 1;
	z-index: auto;
}
.cg-top.show {
	opacity: 1;
	z-index: 1;
}
.cg-top a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius:0;
	background: url(../img/common/nav-arrow-top.png) no-repeat center center #535353;
	background-size: 15px;
}

@media (max-width: 767px) {
	.page-heading .site-ttl {
		width: 42.6666vw;
		margin: 0 auto;
	}
	.page-heading .caption {
		margin-top: 4vw;
		font-size: 3.2vw;
		text-align: left;
		line-height: 1.65;
	}
	.page-heading .btn-about {
		display: none;
	}
}


/* feedback
-------------------------------------------------- */
.feedback-wrap {
	margin: 80px 0 0;
}
#feedback .section {
	padding: 40px 0;
}
#feedback #flow_area {
	max-width: 530px;
	margin: 0 auto;
	border: none;
	background: none;
}
#flow_area .q1, #flow_area .q2, #flow_area .thanks {
	padding: 0;
}
#feedback #flow_area .small-text {
	font-size: 15px;
	text-align: center;
}
#feedback #flow_area .btns {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	padding: 0;
}
#feedback #flow_area .btns a {
	width: 48.5%;
	max-width: initial;
	max-width: none;
	padding: 5px 0;
	border: none;
	background: #e0e0e0;
	color: #000;
	text-align: center;
	text-decoration: none;
}


@media (max-width: 767px) {
	#feedback .section {
		padding: 5.3333vw 0;
	}
	#feedback #flow_area .underline {
		font-size: 3vw;
	}
	#flow_area p {
		padding-top: 0;
	}
	#feedback #flow_area .small-text {
		margin-top: 0;
		padding: 0;
		font-size: 2.8vw;
	}
	#feedback #flow_area .btns a {
		margin: 0;
		font-size: 2.8vw;
	}
}


/* footer-category
-------------------------------------------------- */
.footer-category {
	padding: 50px 0;
}
.footer-category .inner {
	max-width: 1050px;
	margin: 0 auto;
	padding: 0 25px;
}
.footer-category .sec-ttl {
	font-size: 28px;
	font-weight: bold;
	text-align: center;
}
.footer-category .category-list {
	display: flex;
	justify-content: space-between;
	-ms-flex-wrap: wrap;flex-wrap: inherit;
	width: 100%;
	margin-top: 25px;
	font-size: 17px;
}
.footer-category .category-list li {
	width: 19%;
	text-align: center;
}
.footer-category .category-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px 0;
	border-radius: 50px;
	border: 1px solid #979797;
	font-size: 16px;
	color: #000;
	line-height: 1.25;
}


@media (max-width: 767px) {
	.footer-category {
		padding: 6.6666vw 0;
	}
	.footer-category .sec-ttl {
		font-size: 4.8vw;
	}
	.footer-category .category-list {
		display: block;
		margin-top: 5.3333vw;
	}
	.footer-category .category-list li {
		width: 100%;
	}
	.footer-category .category-list li + li {
		margin-top: 5.3333vw;
	}
	.footer-category .category-list li a {
		padding: 4vw 0;
		font-size: 3.7333vw;
		line-height: 1;
		height:auto;
	}
	.footer-category .category-list li img {
		display: none;
	}
}

/* footer-banner
-------------------------------------------------- */
.footer-banner {
	background: #4c4c4c;
	padding: 30px 0;
}
.footer-banner .bnr-list {
	display: flex;
	justify-content: center;
	-ms-flex-wrap: wrap;flex-wrap: wrap;
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 25px;
}
.footer-banner .bnr-list li img {
	width: 100%;
}

@media (min-width: 768px) {
	.footer-banner .bnr-list li {
		width: 23.75%;
	}
	.footer-banner .bnr-list li + li {
		margin-left: 5%;
	}
}

@media (max-width: 767px) {
	.footer-banner {
		padding: 6.6666vw 0;
	}
	.footer-banner .bnr-list {
		width: 60%;
		margin: 0 auto;
	}
	.footer-banner .bnr-list li + li {
		margin-top: 6.6666vw;
	}
	.footer-banner .bnr-list {
		padding: 0 2.6666vw;
	}
}

/* button
-------------------------------------------------- */
.btn-radius.detail {
	display: block;
	width: 300px;
	margin: 50px auto 0;
	padding: 20px 0;
	border: 1px solid #979797;
	border-radius: 50px;
	background: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}


.btn-radius.detail2 {
	display: block;
	width: 300px;
	margin: 50px auto 0;
	padding: 20px 0;
	border: 1px solid #979797;
	border-radius: 50px;
	background: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}



@media (min-width: 768px) {
	.btn-radius {
		transition: background .5s;
	}
	.btn-radius:hover {
		background: #cc0000;
		color: #fff;
		opacity: 1;
	}
}

@media (max-width: 767px) {
	.btn-radius.detail {
		width: 52vw;
		margin-top: 5.3333vw;
		padding: 3.3333vw 0;
		font-size: 3.2vw;
	}
}


/* video
-------------------------------------------------- */
.video-mask{display: none; background: url(../img/common/fancybox_overlay.png); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 40;}
.video-play-box{width: 900px; height: calc(100% - 60px); position: absolute; top: 40px; left: 50%;  margin-left: -450px; padding: 30px; z-index: 12;}
.vvv{-webkit-overflow-scrolling:touch; overflow:auto; height: 100%;}
.video-play-box iframe{width: 100%;}
.video section{padding: 30px 0 80px;}
.video{background: #EFEFEF; display: none;}
.video.on{display: block;}
.video-box{padding-bottom: 66.66%; position: relative;}
.video::-webkit-scrollbar{width: 10px; background-color: #fff;}
.video::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); border-radius: 0; background-color: lightgray;}
.video::-webkit-scrollbar-thumb{border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3); background-color: #AAAAAA;}
.video-play{position: absolute; bottom: 30px; right: 30px; border: 2px solid #FFF; z-index: 4; border-radius: 8px;}
.video-play a{color: #FFF; cursor: pointer; padding: 5px 10px; display: block;}
.video-play{animation-delay: 0.7s;}
.video-header h1{float: left;}
.video-header .cg-btn{float: right; margin: 22px 0;}
.video #news_list{position: relative; margin: 20px auto 0; max-width: 100%; box-shadow: 0 2px 5px rgba(0,0,0, .3); bottom: 0;}
.video footer{background-color: #FFF;}
.close_button{position: absolute; top: 30px; right: -15px; cursor: pointer; z-index: 99; width: 41px;}
.close_button img{width: 32px; height: 32px;}
.control-round .carousel-control.right img, .control-round .carousel-control.left img{width: 16px; vertical-align: 1px;}
.loading{position: absolute; top: 50%; left: 50%; width: 64px; margin-top: -32px; margin-left: -32px;}
#fframe{display: none; height: calc(100% - 10px);}
.mm-slideout {z-index: 16;}
@media screen and (max-width: 1023px) {
	.video-play-box{width: 100%; padding: 0 15px; left: auto; margin-left: 0; height: calc(100% - 100px); top: 80px; margin-top: 0;}
	.close_button{top: -35px; right: 4px;}
	.video .col-sm-6{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}
@media screen and (max-width: 767px) {
	.video-header .cg-btn {clear: left; float: none;}

}
@media screen and (max-width: 599px) {
	.video .col-sm-6{flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%}
}