@charset "utf-8";

/* ========================================================================================

Name: design.css

Description: Base Design And Common Settings

Update: 2020.03.13

======================================================================================== */

/* fonts
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,600&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* 全体共通
-------------------------------------------------- */
html {
	height:100%;
}

body {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Helvetica, Arial, sans-serif;
	/*font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;*/
	-webkit-text-size-adjust:100%;
	font-size:16px;
	font-weight:400;
	line-height:2em;
	color: #333333;
	text-align:center;
	height:100%;
	position:relative;
	overflow-x: hidden;
	height:100%;	
}
a {
	color: #333333;
	overflow: hidden;
	outline: none;
	text-decoration:none;
	transition:all ease-out 0.3s;
	transition: 0.50s cubic-bezier(0.19, 1, 0.22, 1);
}

a:hover {
	color:#0e69b3;
	text-decoration: none;
	transition:all ease-out 0.3s;
	transition: 0.50s cubic-bezier(0.19, 1, 0.22, 1);
}

a:hover img {
	/*
	opacity:0.8;
	transition: 0.50s cubic-bezier(0.19, 1, 0.22, 1);
	*/
}

*:hover {
	transition: 0.50s cubic-bezier(0.19, 1, 0.22, 1);
}

.link_txt a {
	color: #cc0000;
	overflow: hidden;
	outline: none;
	text-decoration:underline;
}

.link_txt a:hover {
	color: #cc0000;
	text-decoration:none;
}

.clearfix:after {
	content: "."; display: block; clear: both; height: 0; line-height: 0; font-size: 0; visibility: hidden;
}

.clearfix {
	_height: 1px; min-height: 1px;
	*zoom: 1;
}

* html .clearfix {
	height: 1%;
	display: inline-block;
}

.rollover:hover{
	opacity:0.7;
	filter: alpha(opacity=70);
}

/* IE8以下でレイアウトが大崩れしないように */
header,
footer,
main,
article,
section,
aside {
	display:block;
}

i.fas {
	margin-right:5px;
}

.loader {
	position:fixed;
	width:100%;
	height:100%;
	background-color:#fff;
	z-index:3000;
	left:0;
	top:0;
}
.loader .loader-inner {
	position:absolute;
	width:100px;
	height:30px;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
.ball-pulse-sync>div, .ball-pulse>div, .ball-scale-random>div, .ball-scale>div {
    background-color: #01a1df;
    border-radius: 100%;
    margin: 2px;
    display: inline-block;
	opacity:0.6;
}

.font-roboto {
	font-family: 'Roboto', sans-serif;
}

.font-Noto-Serif {
	font-family: 'Noto Serif JP', serif;
}

.font-poppins {
	font-family: 'Poppins', sans-serif;
}

.getting-ready {
	font-size:20px;
	text-align:center;
	margin:50px 0 0;
	padding:120px 0 180px;
	background-color:#eee;
	border-radius:10px;
}

i.far {
	margin:0 5px;
}


@media screen and (min-width: 768px){
	
	a[href*="tel:"] {
		display:inline-block;
		line-height:1.33em;
		pointer-events: none;
		margin-bottom:-3px;
	}
	
}






/* ========================================================================================

 SmartPhone
 
======================================================================================== */
@media screen and (max-width: 767px){
	
	html {
		height:100%;
	}
	
	body {
		-webkit-text-size-adjust:100%;
		font-size:13px;
		line-height:1.67em;
		height:100%;
		position:relative;
	}
	
}




/* HEADER
-------------------------------------------------- */

header {
	position:fixed;
	clear:both;
	width:100%;
	background-color:#fff;
	z-index:9999;
	transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	text-align:left;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

header > .inner {
	height:83px;
}

header #logo {
	position:absolute;
	left:60px;
	top:15px;
}

header nav {
	width: auto;
	padding:0 0 0 350px;
	margin-right:-20px;
}

header nav ul {
	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-end;
}

header nav ul li {
	position:relative;
	line-height:1em;
}

header nav ul li + li::before {
	position:absolute;
	content:"";
	width:1px;
	height:30px;
	background-color:#ddd;
	transform:skewX(-25deg);
	margin:auto;
	top:0;
	bottom:0;
}

header nav ul li a {
	display:block;
	box-sizing:border-box;
	height:83px;
	padding:33px 30px 0;
	font-weight:500;
}

header nav ul li a i.fa-chevron-right {
	display:none;
}

header nav ul li#gnv_products a {
	padding:33px 60px 0 30px;
}

header nav ul li#gnv_contact {
	transform:skewX(-25deg);
	background: linear-gradient(90deg, rgba(14, 105, 179, 1.0), rgba(4, 158, 222, 1.0));
}

header nav ul li#gnv_contact:hover {
	opacity:0.8;
}

header nav ul li#gnv_contact::before {
	display:none;
}

header nav ul li#gnv_contact a {
	display:block;
	transform:skewX(25deg);
	color:#fff;
	vertical-align:middle;
	padding:33px 60px 0 60px;
}

#btn-hamburger-menu {
	display:none;
}



@media screen and (max-width: 767px){
		
	
	header {
		position:fixed;
		clear:both;
		width:100%;
		background-color:#fff;
		z-index:9999;
		text-align:left;
	}
	
	header > .inner {
		height:50px;
	}
	
	.navi-active header ,
	.navi-active header > .inner {
		height:100%;
		transition:all ease-out 0.3s;
		transform:none;
		background-color:#333;
	}
	
	header #logo {
		position:absolute;
		left:15px;
		top:10px;
		width:162px;
	}
	
	header nav {
		position:absolute;
		box-sizing:border-box;
		width: auto;
		padding:50px 0 0;
		margin-right:0;
		display:none;
		background-color:#333;
		z-index:100;
		width:100%;
		height:auto;
		transform:none;
	}
	
	header nav ul {
		display:flex;
		flex-wrap:nowrap;
		justify-content:flex-start;
		flex-direction: column;
	}
	
	header nav ul li {
		position:relative;
		line-height:1em;
		border-top:1px #666 solid;
	}
	
	header nav ul li + li::before {
		display:none;
	}
	
	header nav ul li a {
		color:#fff;
		display:block;
		box-sizing:border-box;
		height:auto;
		padding:20px 20px 20px;
		font-weight:500;
		font-size:14px;
	}
	
	header nav ul li a i.fa-chevron-right {
		display:inline-block;
		float:right;
	}
	
	header nav ul li#gnv_products a {
		padding:20px 20px 20px;
	}
	
	header nav ul li#gnv_contact {
		transform:skewX(0);
		background:transparent;
	}
	
	header nav ul li#gnv_contact::before {
		display:none;
	}
	
	header nav ul li#gnv_contact a {
		display:block;
		transform:skewX(0);
		color:#fff;
		vertical-align:middle;
		padding:20px 20px 20px;
		text-align:center;
		margin:20px 20px 0;
		background-color:#0066CC;
		border-radius:4px;
		font-size:14px;
	}

	#btn-hamburger-menu {
		box-sizing:border-box;
		display:block;
		width:50px;
		height:50px;
		padding:16px 10px;
		/*background:#7cba27;*/
		position:absolute;
		right:0;
		z-index:1001;
	}
	
	.bg-hamberger {
		position:absolute;
		width:80px;
		height:50px;
		background:#CC0066;
		left:-5px;
		top:0;
		z-index:1;
		transform:skewX(-25deg);
		background: linear-gradient(90deg, rgba(14, 105, 179, 1.0), rgba(4, 158, 222, 1.0));
	}
	
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width:30px;
		height:22px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
		z-index:5;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 9px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 1px;
	}	

	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(9.5px) rotate(-45deg);
		transform: translateY(9.5px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-8.5px) rotate(45deg);
		transform: translateY(-8.5px) rotate(45deg);
	}

	
		
}


/* FOOTER AREA
-------------------------------------------------- */

footer {
	clear:both;
	width:auto;
	background-color:#FFF;
}

footer > .inner {
	width:auto;
	max-width:1000px;
	text-align:center;
	margin:auto;
	padding:30px 15px;
}

footer a {
	display:block;
	color:#666;
}

footer nav ul {
	text-align:center;
	font-size: 13px;
	line-height:1.33em;
}

footer nav ul li {
	display:inline-block;
	padding:0 10px;
	position:relative;
}

footer nav ul li + li::before {
	position:absolute;
	content:"";
	width:1px;
	height:15px;
	background-color:#999;
	margin:auto;
	left:-1px;
	top:0;
	bottom:0;
}

footer #ft_logo {
	margin:30px auto 0;
	width:240px;
}

footer #copyright {
	margin-top:5px;
	font-size:13px;
	line-height:1.33em;
}


@media screen and (max-width: 767px){
	
	footer {
		clear:both;
		width:auto;
		background-color:#FFF;
	}
	
	footer > .inner {
		width:auto;
		max-width:1000px;
		text-align:center;
		margin:auto;
		padding:15px 15px;
	}
	
	footer a {
		display:block;
		color:#666;
	}
	
	footer nav ul {
		text-align:center;
		font-size: 12px;
		line-height:1.33em;
	}
	
	footer nav ul li {
		display:inline-block;
		padding:0 10px;
		margin-top:5px;
		position:relative;
	}
	
	footer nav ul li + li::before {
		position:absolute;
		content:"";
		width:1px;
		height:15px;
		background-color:#999;
		margin:auto;
		left:-1px;
		top:0;
		bottom:0;
	}
	
	footer #ft_logo {
		width:160px;
		margin:20px auto 0;
	}
	
	footer #copyright {
		margin-top:5px;
		font-size:11px;
		line-height:1.33em;
	}
	

}


/* BASE LAYOUT and COMMON PARTS
-------------------------------------------------- */

body > .inner {
	background-color:#fff;
	overflow:hidden;
}

main {
	padding-top:83px;
}

.sec_base {
	clear:both;
	width:100%;
}

.sec_base > .inner {
	width:auto;
	max-width:1000px;
	padding:70px 20px 100px;
	margin:0 auto;
	text-align:left;
}

.ttl2_01 {
	text-align:center;
	font-size:45px;
	font-weight:600;
	line-height:1.33em;
	color:#0e69b3;
	position:relative;
	padding:0 10px;
}

.ttl2_01::before {
	content:"[";
	font-weight:300;
	margin-right:17px;
}

.ttl2_01::after {
	content:"]";
	font-weight:300;
	margin-left:17px;
}

.ttl3_01 {
	text-align:center;
	font-size:45px;
	font-weight:600;
	line-height:1.33em;
	color:#000;
	position:relative;
	padding:0 10px;
	margin-top:40px;
}

.txt_lead_01 {
	font-weight:500;
	text-align:center;
	margin-top:30px;
}

.txt_lease {
	font-size:18px;
	font-weight:500;
	line-height:1.67em;
	text-align:center;
	margin-top:80px;
	padding:23px 20px 26px;
	border:3px #0e69b3 solid;
}

.txt_lease h3 {
	font-size:25px;
	font-weight:600;
	line-height:1.5em;
	color:#0e69b3;
}

.txt_lease p {
	margin-top:5px;
}

.btn_base {
	text-align:center;
	margin-top:70px;
}

.btn_base a {
	position:relative;
	display:block;
	box-sizing:border-box;
	width:440px;
	margin:auto;
	padding:20px 40px;
	color:#fff;
	background: linear-gradient(90deg, rgba(14, 105, 179, 1.0), rgba(4, 158, 222, 1.0));
	font-size:18px;
	line-height:1.2em;
	font-weight:500;
	transition:all ease-out 0.9s;
	transition: 0.90s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn_base a:hover {
	/*background: linear-gradient(90deg, rgba(14, 105, 179, 0.8), rgba(4, 158, 222, 0.8));*/
	opacity:0.8;
}

.btn_base a i.far ,
.btn_base a i.fab ,
.btn_base a i.fas {
	position:absolute;
	top:21px;
	right:20px;
}



@media screen and (max-width: 767px){
	
	body > .inner {
		background-color:#fff;
		overflow:hidden;
	}
	
	main {
		padding-top:50px;
	}
	
	.sec_base {
		clear:both;
		width:100%;
	}
	
	.sec_base > .inner {
		width:auto;
		max-width:1000px;
		padding:35px 15px 50px;
		margin:0 auto;
		text-align:left;
	}
	
	.ttl2_01 {
		text-align:center;
		font-size:24px;
		font-weight:600;
		line-height:1.33em;
		color:#0e69b3;
		position:relative;
		padding:0 10px;
	}
	
	.ttl2_01::before {
		content:"[";
		font-weight:300;
		margin-right:10px;
	}
	
	.ttl2_01::after {
		content:"]";
		font-weight:300;
		margin-left:10px;
	}
	
	.ttl3_01 {
		text-align:center;
		font-size:20px;
		font-weight:600;
		line-height:1.33em;
		color:#000;
		position:relative;
		padding:0 10px;
		margin-top:20px;
	}
	
	.txt_lead_01 {
		font-weight:500;
		text-align:center;
		margin-top:15px;
	}
	
	.btn_base {
		text-align:center;
		margin-top:40px;
	}
	
	.txt_lease {
		font-size:14px;
		font-weight:500;
		line-height:1.67em;
		text-align:center;
		margin-top:40px;
		padding:13px 20px 15px;
		border:2px #0e69b3 solid;
	}
	
	.txt_lease h3 {
		font-size:16px;
		font-weight:600;
		line-height:1.5em;
		color:#0e69b3;
	}
	
	.txt_lease p {
		margin-top:5px;
	}
	
	.btn_base a {
		position:relative;
		display:block;
		box-sizing:border-box;
		width:auto;
		max-width:220px;
		margin:auto;
		padding:12px 20px;
		color:#fff;
		background: linear-gradient(90deg, rgba(14, 105, 179, 1.0), rgba(4, 158, 222, 1.0));
		font-size:15px;
		line-height:1.2em;
		font-weight:500;
		transition:all ease-out 0.9s;
		transition: 0.90s cubic-bezier(0.19, 1, 0.22, 1);
	}
	
	.btn_base a:hover {
		/*background: linear-gradient(90deg, rgba(14, 105, 179, 0.8), rgba(4, 158, 222, 0.8));*/
		opacity:0.8;
	}
	
	.btn_base a i.far ,
	.btn_base a i.fas ,
	.btn_base a i.fab {
		position:absolute;
		top:13px;
		right:10px;
	}
	

}



/* HOME
-------------------------------------------------- */

#home_heading {
}

#main_slider {
	height:684px;
	position:relative;
}

#main_slider .overlay {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url(../img/home/bg_dot_overlay.png) repeat;
}

#main_slider .text_area {
	position:absolute;
	color:#fff;
	width:100%;
	height:100%;
	left:0;
	top:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	font-style:italic;
	text-align:left;
}

#main_slider .text_area p {
	font-size:67px;
	font-weight:600;
	line-height:1em;
	padding:7px 0;
	margin-left:-50px;
}

#main_slider .text_area p.copy2 {
	margin-left:-90px;
}

#main_slider .text_area p > span {
	display:inline-block;
	background-color:rgba(9,74,134,0.8);
	transform:skew(-25deg);
	padding:10px 50px 15px 80px;
}

#main_slider .text_area p > span > span {
	display:inline-block;
	transform:skew(25deg);
}

#main_slider .text_area h1 {
	margin-top:7px;
	margin-left:-50px;
}

#main_slider .text_area h1 > span {
	display:inline-block;
	font-size:45px;
	font-weight:600;
	line-height:1em;
	background-color:rgba(0,0,0,0.8);
	transform:skew(-25deg);
}

#main_slider .text_area h1 > span > span {
	display:inline-block;
	transform:skew(25deg);
	padding:10px 50px 15px 80px;
}

#main_slider li {
	height:684px;
	animation:slide-view 8000ms ease-out both;
}

@keyframes slide-view{
	0%{transform:scale(1) rotate(0.001deg)}
	100%{transform:scale(1.08) rotate(0deg)}
}

#main_slider li#slide01 {
	background:url(../img/home/pct_main_01.jpg) no-repeat center top;
	background-size: cover;
}

#main_slider li#slide02 {
	background:url(../img/home/pct_main_02.jpg) no-repeat center top;
	background-size: cover;
}

#main_slider li#slide03 {
	background:url(../img/home/pct_main_03.jpg) no-repeat center top;
	background-size: cover;
}

#main_catch {
	position:relative;
}

#main_catch .text_area {
	position:absolute;
	color:#fff;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}

#main_catch .text_area h2 {
	
}

#main_catch .text_area h2 span {
	display:block;
}

#main_catch .text_area h2 .txt_eng {
	font-size: 55px;
	line-height:1.2em;
	font-style:italic;
}

#main_catch .text_area h2 .txt_jpn {
	font-size: 45px;
	font-weight:600;
	line-height:1.5em;
	margin-top:15px;
}

#main_catch .text_area p {
	font-size:36px;
	font-weight:500;
	line-height:1.8em;
	margin-top:40px;
	padding-bottom:30px;
}

#main_catch .photo_area {
	width:auto;
}

#main_catch .photo_area > div {
	width:50%;
	float:left;
}

.lst_movie {
	width:auto;
	margin:0 -22px;
}

.lst_movie li {
	box-sizing:border-box;
	width:33.33%;
	float:left;
	padding:0 22px;
	margin-top:40px;
}

.lst_movie li a:hover{
	opacity: 0.8;
}

.lst_movie li a{
 display: block;
}





.lst_movie li figure div {
	position:relative;
}

.lst_movie li figure div i.fab {
	position:absolute;
	font-size:40px;
	width:45px;
	height:40px;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	opacity:0.85;
	color: #ffffff;
}

#sec_home_products {
	background:url(../img/home/bg_sec_products.jpg) no-repeat center top;
	background-size:100% auto;
}

.wrp_products {
	background: linear-gradient(90deg, rgba(14, 105, 179, 1.0), rgba(4, 158, 222, 1.0));
	margin-top:70px;
	position:relative;
}

.wrp_products .series_name {
	position:absolute;
	right:30px;
	top:25px;
	font-size:26px;
	font-weight:600;
	font-style:italic;
	line-height:1.2em;
	color:#fff;
	opacity:0.25;
	user-select:none;
	z-index:1;
}

.wrp_products .icon_new {
	position:absolute;
	user-select:none;
	z-index:3;
	width:200px;
	background-color:#f5d602;
	background: radial-gradient(#f7ee8e, #f5d602);
	color:#000;
	font-size:27px;
	font-weight:600;
	font-style:italic;
	line-height:1em;
	box-sizing:border-box;
	padding:13px 30px 15px;
	text-align:center;
	transform:skewX(-25deg);
	top:-28px;
	left:0;
	right:0;
	margin:auto;
}

.wrp_products .icon_new span {
	display:block;
	transform:skewX(25deg);
}

.wrp_products > .inner {
	background:url(../img/home/bg_wrap_products.png) repeat;
	padding:60px 80px;
	position:relative;
	z-index:2;
}

.wrp_products .txt_catch {
	position:relative;
	font-size:36px;
	font-weight:600;
	line-height:1.33em;
	color:#0e69b3;
	padding:0 140px 0 0;
}

.wrp_products .txt_catch::before {
	position:absolute;
	content:"";
	width:2px;
	height:80px;
	background-color:#fff;
	left:-30px;
	top:-20px;
	transform:skewX(-20deg);
}

.wrp_products .txt_catch span {
	display:inline;
	background-color:#fff;
	padding:1px 0 2px;
	line-height:1.75em;
}

.wrp_products_contents {
	margin-top:50px;
}

.wrp_products_contents figure {
	width:42.86%;
	float:left;
}

.wrp_products_contents .txt_area {
	box-sizing:border-box;
	width:57.14%;
	float:left;
	padding-left:50px;
	color:#fff;
}

.wrp_products_contents .txt_area h3 {
	font-size:28px;
	font-weight:600;
	line-height:1.33em;
}

.wrp_products_contents .txt_area p {
	margin-top:10px;
	font-size:15px;
	line-height:1.75em;
}

.wrp_products_contents .txt_area p strong {
	color:#ffcc00;
	font-weight:400;
}

.wrp_products_contents .txt_area .button-area {
	width:auto;
	margin:30px -5px 0;
	display:flex;
}

.wrp_products_contents .txt_area .btn_base {
	box-sizing:border-box;
	width:50%;
	padding:0 5px;
}

.wrp_products_contents .txt_area .btn_base a {
	display:block;
	width:100%;
	margin-left:0;
	background:#fff;
	color:#000;
	text-indent:-0.5em;
}

.wrp_products_contents .txt_area .btn_base a i {
	color:#0e69b3;
	font-size:22px;
}

#sec_other_products {
	background-color:#ededf1;
}

#sec_other_products > .inner {
	padding-top:30px;
}

.lst_other_products {
	width:auto;
	margin:0 -22px;
	padding-top:20px;
}

.lst_other_products li {
	box-sizing:border-box;
	width:50%;
	float:left;
	padding:0 22px;
	margin-top:40px;
	text-align:left;
}

.lst_other_products li figure {
	width:43.75%;
	float:left;
}

.lst_other_products li dl {
	margin:0 0 0 43.75%;
	padding:0 0 0 30px;
	text-align:left;
}

.lst_other_products li dl dt {
	font-size:22px;
	font-weight:600;
	line-height:1.33em;
	color:#0e69b3;
}

.lst_other_products li dl dd {
	margin-top:10px;
	line-height:1.75em;
}

.lst_other_products li .btn_base {
	margin-top:0;
	padding:10px 0 0;
}

.lst_other_products li .btn_base a {
	max-width:200px;
	font-size:15px;
	margin:0;
	padding: 10px 20px;
}

.lst_other_products li .btn_base a i.fas {
	top:11px;
	right:10px;
}

.lst_banner_large {
}

.lst_banner_large li {
	margin-top:20px;
}

#sec_bottom_contact {
	background:url(../img/home/bg_wrap_products.png) repeat, url(../img/common/bg_contact.png) no-repeat right top;
	background-size: auto auto, auto 100%;
	background-color:#26292c;
}

#sec_bottom_contact > .inner {
	padding:60px 80px;
	color:#fff;
}

#sec_bottom_contact .ttl2_01 {
	color:#fff;	
}

.btn_contact {
	margin-top:60px;
	text-align:center;
}

.btn_contact a {
	display:block;
	box-sizing:border-box;
	width:500px;
	margin:auto;
	padding:25px;
	color:#000;
	background-color:#fff;
	font-size:22px;
	line-height:1.2em;
	font-weight:600;
	transition:all ease-out 0.9s;
	transition: 0.90s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn_contact a i.fa-envelope {
	color:#0e69b3;
	font-size:24px;
}

.btn_contact a:hover {
	opacity:0.8;
}

.lst_phone {
	width:auto;
	padding-top:40px;
}

.lst_phone li {
	width:33.33%;
	float:left;
	box-sizing:border-box;
	padding:0 25px;
	margin-top:10px;
}

.lst_phone li a {
	color:#fff;
}

.lst_phone dl > * {
	display:inline-block;
	font-size:18px;
	font-weight:500;
}

.lst_phone dl > dt {
	width:6.2em;
}



@media screen and (max-width: 767px){
	
	#home_heading {
	}
	
	#main_slider {
		height:342px;
		position:relative;
	}
	
	#main_slider .overlay {
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		background:url(../img/home/bg_dot_overlay.png) repeat;
	}
	
	#main_slider .text_area {
		position:absolute;
		color:#fff;
		width:100%;
		height:100%;
		left:0;
		top:0;
		display:flex;
		flex-direction:column;
		justify-content:center;
		font-style:italic;
	}
	
	/*
	#main_slider .text_area p {
		font-size:40px;
		font-weight:600;
		line-height:1.2em;
	}
	
	#main_slider .text_area h1 {
		font-size:18px;
		font-weight:500;
		line-height:1.67em;
		margin-top:15px;
	}
	*/
	
	#main_slider .text_area p {
		font-size:28px;
		font-weight:600;
		line-height:1em;
		padding:3px 0;
		margin-left:-40px;
	}
	
	#main_slider .text_area p.copy2 {
		margin-left:-60px;
	}
	
	#main_slider .text_area p > span {
		display:inline-block;
		background-color:rgba(9,74,134,0.8);
		transform:skew(-25deg);
		padding:10px 20px 12px 50px;
	}
	
	#main_slider .text_area p > span > span {
		display:inline-block;
		transform:skew(25deg);
	}
	
	#main_slider .text_area h1 {
		margin-top:3px;
		margin-left:-40px;
	}
	
	#main_slider .text_area h1 > span {
		display:inline-block;
		font-size:20px;
		font-weight:600;
		line-height:1em;
		background-color:rgba(0,0,0,0.8);
		transform:skew(-25deg);
	}
	
	#main_slider .text_area h1 > span > span {
		display:inline-block;
		transform:skew(25deg);
		padding:10px 20px 12px 50px;
	}
	
	#main_slider li {
		height:342px;
		animation:slide-view 8000ms ease-out both;
	}
	
	@keyframes slide-view{
		0%{transform:scale(1) rotate(0.001deg)}
		100%{transform:scale(1.08) rotate(0deg)}
	}
	
	#main_slider li#slide01 {
		background:url(../img/home/pct_main_01.jpg) no-repeat center top;
		background-size: cover;
	}
	
	#main_slider li#slide02 {
		background:url(../img/home/pct_main_02.jpg) no-repeat center top;
		background-size: cover;
	}
	
	#main_slider li#slide03 {
		background:url(../img/home/pct_main_03.jpg) no-repeat center top;
		background-size: cover;
	}
	
	#main_catch {
		position:relative;
	}
		
	#main_catch .text_area {
		position:absolute;
		color:#fff;
		width:100%;
		height:100%;
		display:flex;
		justify-content:center;
		align-items:center;
		box-sizing:border-box;
		padding:0 15px;
	}
		
	#main_catch .text_area h2 {
		margin-top:0;
	}
	
	#main_catch .text_area h2 span {
		display:block;
	}
	
	#main_catch .text_area h2 .txt_eng {
		font-size: 55px;
		line-height:1.2em;
		font-style:italic;
	}
	
	#main_catch .text_area h2 .txt_jpn {
		font-size: 18px;
		font-weight:600;
		line-height:1.5em;
		margin-top:0;
	}
	
	#main_catch .text_area p {
		font-size:13px;
		line-height:1.67em;
		margin-top:15px;
		padding-bottom:20px;
		text-align:left;
	}
	
	#main_catch .photo_area {
		width:auto;
	}
	
	#main_catch .photo_area > div {
		width:50%;
		float:left;
	}
	
	.lst_movie {
		width:auto;
		margin:0;
		text-align:center;
	}
	
	.lst_movie li {
		box-sizing:border-box;
		width:auto;
		max-width:280px;
		float:none;
		padding:0;
		margin:20px auto 0;
	}
	
	.lst_movie li figure div {
		position:relative;
	}
	
	.lst_movie li figure figcaption {
		padding-top:7px;
		font-size:14px;
		font-weight:500;
	}
	
	.lst_movie li figure div i.fab {
		position:absolute;
		font-size:40px;
		width:45px;
		height:40px;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
	}
	
	#sec_home_products {
		background:url(../img/home/bg_sec_products.jpg) no-repeat center top;
		background-size:100% auto;
	}
	
	.wrp_products {
		background: linear-gradient(90deg, rgba(14, 105, 179, 1.0), rgba(4, 158, 222, 1.0));
		margin-top:30px;
		position:relative;
	}
	
	.wrp_products .series_name {
		position:absolute;
		right:15px;
		top:10px;
		font-size:16px;
		font-weight:600;
		font-style:italic;
		line-height:1.2em;
		color:#fff;
		opacity:0.25;
		user-select:none;
		z-index:1;
	}
	
	.wrp_products .icon_new {
		position:absolute;
		user-select:none;
		z-index:3;
		width:100px;
		background-color:#f5d602;
		background: radial-gradient(#f7ee8e, #f5d602);
		color:#000;
		font-size:15px;
		font-weight:600;
		font-style:italic;
		line-height:1em;
		box-sizing:border-box;
		padding:6px 15px 7px;
		text-align:center;
		transform:skewX(-25deg);
		top:-20px;
		left:0;
		right:0;
		margin:auto;
	}
	
	.wrp_products .icon_new span {
		display:block;
		transform:skewX(25deg);
	}
	
	.wrp_products > .inner {
		background:url(../img/home/bg_wrap_products.png) repeat;
		padding:40px 15px 30px;
		position:relative;
		z-index:2;
	}
	
	.wrp_products .txt_catch {
		position:relative;
		font-size:18px;
		font-weight:600;
		line-height:1.33em;
		color:#0e69b3;
		padding:0;
	}
	
	.wrp_products .txt_catch::before {
		display:none;
	}
	
	.wrp_products .txt_catch span {
		display:inline;
		background-color:#fff;
		padding:1px 0 2px;
	}
	
	.wrp_products_contents {
		margin-top:20px;
	}
	
	.wrp_products_contents figure {
		width: auto;
		max-width:240px;
		float: none;
		margin:auto;
	}
	
	.wrp_products_contents .txt_area {
		box-sizing:border-box;
		width:100%;
		float:none;
		padding-left:0;
		margin-top:20px;
		color:#fff;
	}
	
	.wrp_products_contents .txt_area h3 {
		font-size:18px;
		font-weight:600;
		line-height:1.33em;
	}
	
	.wrp_products_contents .txt_area p {
		margin-top:10px;
		font-size:13px;
		line-height:1.67em;
	}
	
	/*
	.wrp_products_contents .txt_area .btn_base {
		margin-top:20px;
	}
	
	.wrp_products_contents .txt_area .btn_base a {
		width:220px;
		margin:auto;
		background:#fff;
		color:#000;
	}
	*/
	
	.wrp_products_contents .txt_area .button-area {
		width:auto;
		margin:20px -5px 0;
		display:flex;
		justify-content: center;
	}
	
	.wrp_products_contents .txt_area .btn_base {
		box-sizing:border-box;
		width:50%;
		padding:0 5px;
	}
	
	.wrp_products_contents .txt_area .btn_base a {
		display:block;
		width:100%;
		margin-left:0;
		background:#fff;
		color:#000;
		text-indent:-0.5em;
	}
	
	.wrp_products_contents .txt_area .btn_base a i {
		color:#0e69b3;
		font-size:18px;
	}
	
	#sec_other_products {
		background-color:#ededf1;
	}
	
	#sec_other_products > .inner {
		padding-top:15px;
	}
	
	.lst_other_products {
		width:auto;
		margin:0;
	}
	
	.lst_other_products li {
		box-sizing:border-box;
		width:auto;
		float:none;
		padding:0;
		margin-top:20px;
		text-align:left;
	}
	
	.lst_other_products li + li {
		margin-top:40px;
	}
	
	.lst_other_products li figure {
		width:auto;
		max-width:240px;
		margin:auto;
		float:none;
	}
	
	.lst_other_products li dl {
		margin:15px 0 0;
		padding:0;
		text-align:left;
	}
	
	.lst_other_products li dl dt {
		font-size:18px;
		font-weight:600;
		line-height:1.33em;
		color:#0e69b3;
	}
	
	.lst_other_products li dl dd {
		margin-top:5px;
		line-height:1.75em;
	}
	
	.lst_other_products li .btn_base {
		margin-top:0;
		padding:15px 0 0;
	}
	
	.lst_other_products li .btn_base a {
		max-width:220px;
		font-size:15px;
		margin:auto;
		padding: 10px 20px;
	}
	
	.lst_other_products li .btn_base a i.fas {
		top:11px;
		right:10px;
	}
	
	#sec_bottom_contact {
		background:url(../img/home/bg_wrap_products.png) repeat, url(../img/common/bg_contact.png) no-repeat right bottom;
		background-size: auto auto, 100% auto;
		background-color:#26292c;
	}
	
	#sec_bottom_contact > .inner {
		padding:30px 20px;
		color:#fff;
	}
	
	#sec_bottom_contact .ttl2_01 {
		color:#fff;	
	}
	
	.btn_contact {
		margin-top:30px;
		text-align:center;
	}
	
	.btn_contact a {
		display:block;
		box-sizing:border-box;
		width:auto;
		margin:auto;
		padding:13px;
		color:#000;
		background-color:#fff;
		font-size:16px;
		line-height:1.2em;
		font-weight:600;
		transition:all ease-out 0.9s;
		transition: 0.90s cubic-bezier(0.19, 1, 0.22, 1);
	}
	
	.btn_contact a i.fa-envelope {
		color:#0e69b3;
		font-size:20px;
	}
	
	.btn_contact a:hover {
		opacity:0.8;
	}
	
	.lst_phone {
		width:auto;
		padding-top:20px;
		margin:0 -10px;
	}
	
	.lst_phone li {
		width:50%;
		float:left;
		box-sizing:border-box;
		padding:0 10px;
		margin-top:10px;
	}
	
	.lst_phone li a {
		color:#fff;
	}
	
	.lst_phone dl > * {
		display:inline-block;
		font-size:13px;
		font-weight:400;
	}
	
	.lst_phone dl > dt {
		width:auto;
	}
	
}



/* MOVIE
-------------------------------------------------- */

.movie_contents {
	background:url(../img/home/bg_sec_products.jpg) no-repeat;
	background-size:100% auto;
}

.page_heading_movie > .inner {
	padding:70px 20px 70px;
}

#tab_movie_category {
	text-align:center;
	margin-top:60px;
}

#tab_movie_category li {
	display:inline-block;
	transform:skewX(-25deg);
	background-color:#999999;
	margin:0 5px;
}

#tab_movie_category li span {
	display:block;
	transform:skewX(25deg);
	padding:5px 20px 7px;
	color:#fff;
	font-weight:500;
}

#tab_movie_category li:hover {
	cursor:pointer;
	opacity:0.75;
}

.sec_movie_list > .inner {
	padding:0 20px 100px;
}

.ttl2_movie {
	font-size:18px;
	font-weight:500;
	color:#fff;
	overflow:hidden;
}

.ttl2_movie > span {
	display:block;
	background-color:#999999;
	padding:5px 20px 7px 30px;
	transform:skewX(-25deg);
	margin-left:-15px;
	margin-right:15px;
}

.ttl2_movie > span > span {
	display:inline-block;
	transform:skewX(25deg);
}


@media screen and (max-width: 767px){
	
	.page_heading_movie > .inner {
		padding:35px 15px 35px;
	}
	
	#tab_movie_category {
		text-align:center;
		margin-top:30px;
	}
	
	#tab_movie_category li {
		display:inline-block;
		transform:skewX(-25deg);
		background-color:#999999;
		margin:0 3px;
	}
	
	#tab_movie_category li span {
		display:block;
		transform:skewX(25deg);
		padding:5px 10px 7px;
		color:#fff;
		font-size:12px;
		font-weight:500;
	}
	
	#tab_movie_category li:hover {
		cursor:pointer;
		opacity:0.75;
	}
	
	.sec_movie_list > .inner {
		padding:0 15px 50px;
	}
	
	.ttl2_movie {
		font-size:16px;
		font-weight:500;
		color:#fff;
	}
	
	.ttl2_movie > span {
		display:block;
		background-color:#999999;
		padding:5px 10px 7px 25px;
		transform:skewX(-25deg);
		margin-left:-13px;
		margin-right:13px;
	}
	
	.ttl2_movie > span > span {
		display:inline-block;
		transform:skewX(25deg);
	}
	
	
}


/* MOVIE MODAL WINDOW
-------------------------------------------------- */

#modal-wrapper ,
#modal-product-wrapper {
	position:fixed;
	background-color:rgba(0,0,0,0.8);
	left:0;
	right:0;
	top:0;
	bottom:0;
	padding:0 20px;
	z-index:-1;
	display:flex;
	justify-content: center;
	align-items: center;
	overflow:scroll;
	/*
	*/
	opacity:0;
	transition: 0.50s cubic-bezier(0.19, 1, 0.22, 1);
	transition: z-index 0.3s ease ,opacity 0.3s ease;
}

#modal-wrapper.show ,
#modal-product-wrapper.show {
	opacity:1;
	z-index:10000;
	transition: z-index 0s ease ,opacity 0.3s ease;
}

#modal-wrapper > .inner ,
#modal-product-wrapper > .inner {
	width:100%;
	max-width:900px;
}

.modal-movie-wrapper {
	background-color:#fff;
	position:relative;
}

.modal-movie-wrapper > .inner {
	padding:50px;
}

.youtube-wrapper {
	box-sizing:border-box;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube-wrapper iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.movie_outline {
	display:flex;
	width:100%;
	padding-top:40px;
}

.movie_outline figure {
	width:33.75%;
}

.movie_outline .txt_area {
	box-sizing:border-box;
	width:66.25%;
	padding: 0 0 0 50px;
	text-align:left;
}

.movie_outline .txt_area h2 {
	font-size:22px;
	font-weight:600;
	line-height:1.33em;
}

.movie_outline .txt_area p {
	font-size:15px;
	line-height:1.67em;
	margin-top:15px;
}

.movie_outline .txt_area .lst_button {
	width:auto;
	margin:30px -8px 0;
}

.movie_outline .txt_area .btn_base {
	box-sizing:border-box;
	display:block;
	margin:0;
	width:50%;
	float:left;
	padding:0 8px;
}

.movie_outline .txt_area .btn_base a {
	width:auto;
	font-size:15px;
	line-height:1.33em;
	padding: 15px 20px;
}

.movie_outline .txt_area .btn_base a i.fas {
	position:relative;
	top:auto;
	right:auto;
	margin:0 0 0 8px;
}

.btn_modal_close {
	position:absolute;
	right:11px;
	top:11px;
	width:30px;
	height:30px;
}

.btn_modal_close:hover {
	cursor:pointer;
}

.btn_modal_close > span {
	display:block;
	position:absolute;
	width:30px;
	height:1px;
	left:0;
	top:15px;
	background-color:#000;
}

.btn_modal_close > span:nth-child(1) {
	transform:rotate(45deg);
}

.btn_modal_close > span:nth-child(2) {
	transform:rotate(-45deg);
}


@media screen and (max-width: 767px){
	
	#modal-wrapper {
		padding:10px 10px;
		display:block;
		overflow:scroll;
	}
	
	#modal-wrapper > .inner {
		width:100%;
		max-width:none;
		margin-top:60px;
	}
	
	.modal-movie-wrapper > .inner {
		padding:10px;
	}
	
	.youtube-wrapper {
		box-sizing:border-box;
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	
	.youtube-wrapper iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	
	.movie_outline {
		display:block;
		width:100%;
		padding-top:10px;
	}
	
	.movie_outline figure {
		width:auto;
		max-width:180px;
		margin: 0 auto;
		display:none;
	}
	
	.movie_outline .txt_area {
		box-sizing:border-box;
		width:auto;
		padding: 0;
		text-align:left;
	}
	
	.movie_outline .txt_area h2 {
		font-size:15px;
		font-weight:600;
		line-height:1.33em;
	}
	
	.movie_outline .txt_area p {
		font-size:13px;
		line-height:1.33em;
		margin-top:7px;
	}
	
	.movie_outline .txt_area .lst_button {
		width:auto;
		margin:20px -5px 0;
	}
	
	.movie_outline .txt_area .btn_base {
		box-sizing:border-box;
		display:block;
		margin:0;
		width:50%;
		float:left;
		padding:0 5px;
	}
	
	.movie_outline .txt_area .btn_base a {
		width:auto;
		font-size:12px;
		line-height:1.5em;
		padding: 10px 5px;
	}
	
	.movie_outline .txt_area .btn_base a i.fas {
		position:relative;
		top:auto;
		right:auto;
		margin:0 0 0 8px;
	}
	
	.btn_modal_close {
		position:absolute;
		right:0;
		top:-40px;
		width:30px;
		height:30px;
	}
	
	.btn_modal_close:hover {
		cursor:pointer;
	}
	
	.btn_modal_close > span {
		display:block;
		position:absolute;
		width:30px;
		height:1px;
		left:0;
		top:15px;
		background-color:#fff;
	}
	
	.btn_modal_close > span:nth-child(1) {
		transform:rotate(45deg);
	}
	
	.btn_modal_close > span:nth-child(2) {
		transform:rotate(-45deg);
	}
	
}