/*
Theme Name: Name
Theme URI: http://khowebsites.com/
Author: ITC Việt
Author URI: http://itcviet.com/
Description: Theme Name is a WordPress shopping theme designed for WooCommerce. The theme is ideal for supermarkets, shopping malls or convenience stores with loads of product categories.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: text_domain
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, custom-header, custom-background, custom-menu, editor-style, featured-images, microformats, post-formats

The styleheets of Theme Name are located in assets/css.
IMPORTANT : If you write your CSS code below, it will be deleted when you'll update the theme.
*/

/*	################################################################
	CSS OVERVIEW 	

	1. IMPORT FILES
	2. GENERAL
	3. ELEMENTS
	4. HEADER
	5. FOOTER
	...

################################################################# */ 

/*==========================================================
	1. IMPORT FILES
==========================================================*/
/* Fonts */
@import url(fonts/CenturyGothicPro/stylesheet.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese);
/* Css */
@import url(libs/font-awesome/css/font-awesome.min.css);
@import url(libs/bootstrap/css/bootstrap.min.css);
@import url(libs/owl-carousel/assets/owl.carousel.min.css);
@import url(libs/animate/animate.css);
@import url(libs/venobox/venobox.css);

/*==========================================================
	2. GENERAL
==========================================================*/
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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
body{
	font-size: 14px;
	color: #626262;
	font-family: 'Century Gothic Pro';
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: #373737;
	font-family: 'Noto Sans JP', sans-serif;
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 20px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 14px;
}
h6 {
	font-size: 12px;
}
img{
	border:none;
	max-width:100%;	
	height: auto;
}
a{
	color:#626262;
}
a:hover{
	color: #00aeef;
	text-decoration:none;
}
a:focus{
	text-decoration: none;
	color: inherit;
	outline: none;
}
a, 
button, 
input,
span[class*="icon-"]{
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
textarea {
	border: 1px solid #46a2ad;
	padding: 8px 15px;
	font-size: 14px;
	color: #757575;
	font-style: italic;
	border-radius: 0;
}
button,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
textarea:focus {
	border-color: #00aeef;
	outline: none;
}
.table > tbody > tr > td, 
.table > tbody > tr > th, 
.table > tfoot > tr > td, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > thead > tr > th {
	border-color: #FCD998;
}

/*==========================================================
	3. ELEMENTS
==========================================================*/
.container-fluid{
	max-width: 1150px;
	margin: 0 auto;
}
.align-center{
	text-align: center;
}
html.noscroll,
body.noscroll{
	overflow: hidden;
	height:100%;
}
/*==========================================================
	4. HEADER
==========================================================*/
.mid-header{
	padding: 20px 0;
}
.mid-header .site-brand{
	float: left;
}
.mid-header .main-menu{
	float: right;
}
.site-header{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
	transition: all 0.3s;
}
.home .site-header.fixed{
	background-color: #61c3cf;
	position: fixed;
}
.site-header.fixed .main-menu a:hover,
.site-header.fixed .main-menu a.active{
	opacity: 0.7;
	color: #fff;
}
.main-banner {
	height: 100vh;
	background-image: radial-gradient(#76d6e1, #61c3cf);
	position: relative;
}
.main-banner:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(images/assets/bg_line_01.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.mobile-icon{
	width: 20px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	display: none;
}
.mobile-icon span{
	width: 20px;
	height: 2px;
	display: block;
	background-color: #626262;
	border-radius: 2px;
	margin-bottom: 7px;
}
.home .mobile-icon span{
	background-color: #fff;
}
.mobile-icon span:last-child{
	margin-bottom: 0;
}
.main-menu li{
	display: inline-block;
	list-style: none;
	margin-right: 30px;
}
.main-menu li:last-child{
	margin-right: 0;
}
.main-menu li a{
	font-size: 18px;
	color: #626262;
	line-height: 38px;
}
.home .main-menu li a{
	color: #fff;
}
.main-menu li a:hover{
	color: #61c3cf;
}
.main-banner .banner-text{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	right: 15px;
	text-align: center;
}
.main-banner .banner-text img{
	margin-bottom: 65px;
}
.main-banner .banner-text h1 {
	/*font-size: 4.7rem;*/
	letter-spacing: .65rem;
    font-weight: bold;
    color: #fff;
    /*margin-bottom: 15px;*/
}
.main-banner .banner-text p{
	font-size: 2rem;
	color: #fff;
	opacity: 0.6;
}
.main-banner .circle-scroll{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 24px;
	display: inline-block;
	width: 50px;
	height: 42px;
	background-image: url(images/assets/circle.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 11px;
	color: #fff;
	line-height: 42px;
	text-align: center;
}
.main-banner .circle-scroll:after{
	content: '';
	height: 24px;
	width: 1px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -24px;
	display: block;
	background-color: #c1e8ed;
}
.mobile-top{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 20px;
	display: none;
}
.mobile-top:after{
	content: '';
	display: block;
	clear: both;
}
.mobile-logo{
	float: left;
}
.mobile-close {
  width: 22px;
  height: 22px;
  opacity: 1;
  cursor: pointer;
  z-index: 9;
  float: right;
	position: relative;
	margin-top: 9px;
}
.mobile-close:hover {
  opacity: 1;
}
.mobile-close:before, .mobile-close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 20px;
  width: 2px;
  background-color: #333;
}
.mobile-close:hover:before, .mobile-close:hover:after{
	background-color: #61c3cf;
}
.mobile-close:before {
  transform: rotate(45deg);
}
.mobile-close:after {
  transform: rotate(-45deg);
}

/*==========================================================
	5. CONTENT
==========================================================*/
.site-main{
	padding-top: 78px;
}
.home .site-main{
	padding-top: 0;
}
.title{
	font-size: 28px;
	color: #626262;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 2px;
	margin-bottom: 35px;
	text-align: center;
	font-family: 'Century Gothic Pro';
}
.title.title-while{
	color: #fff;
}
.service {
    padding: 32px 0;
	background:#f3f8f8;
/*
	background-image: url(images/assets/service_bg.png);
    background-position: -50px bottom;
    background-repeat: no-repeat;
    background-size: auto;
*/
}
.service .title {
	margin-bottom: 48px;
}
.service-info {
	font-family: 'Noto Sans JP', sans-serif;
}
.service-text {
	font-size: 14px;
	font-weight: 700;
	line-height: 28px;
	margin-top: -7px;
	margin-bottom: calc(48px - 7px);
	text-align: center;
}
.service-info .container {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
	max-width: 916px;
	padding: 0;
	width: 100%;
}
.service-info .container::before,
.service-info .container::after {
	content: none;
}
.si-contents {
	background-color: #fff;
	border-radius: 11.2px;
	display: flex;
	flex-shrink: 0;
	min-height: 250px;
	width: 446px;
	overflow: hidden;
}

.si-contents:hover {
	opacity: 0.7;
}

.si-left{
	padding: 20px 39px 0 20px;
	gap: 30px;
}

.si-left .service-thumbnail {
	max-width: 203px;
}

.si-left .si-information {
	padding-top: 14px;
}

.si-right{
	padding: 20px 25px 0 20px;
	gap: 25.66px;
}

.si-right .service-thumbnail {
	max-width: 207px;
}

.si-right .si-information {
	padding-top: 18.5px;
}

.si-right .si-information .description {
	font-size: 12px;
}

.service-thumbnail {
	flex-shrink: 0;
}

.si-information {
	color: #000;
}

.si-information .logo {
	margin-bottom: 24px;
}
.si-information .catch-copy {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	margin-top: -8px;
	margin-bottom: calc(24px - 4px);
}
.si-information .description {
	font-size: 14px;
	line-height: 24px;
	margin-top: -8px;
}

.news {
    padding: 50px 0 100px 0;
	background:#f3f8f8;
}
.list-news {
    padding: 40px 0px;
}
.news-item .news-thumb{
	border-radius: 15px 15px 0 0;
	overflow: hidden;
}
.news-thumb img{
	transition: all 0.3s;
	transform: scale(1);
}
.news-thumb:hover img{
	transform: scale(1.1);
}
.news-item .news-info{
	border-radius: 0 0 15px 15px;
	overflow: hidden;
	background-color: #fff;
	padding: 10px 15px;
}
.news-item h3{
	color: #626262;
	font-size: 14px;
	line-height: 20px;
	height: 43px;
	overflow: hidden;
}
.news .news-more{
	text-align: center;
}
.compliance {
	padding: 50px 0 100px 0;
	background:#f3f8f8;
}
.compliance .container {
	margin-top: 50px;
}
.compliance .container p {
	font-size: 16px;
	line-height: 28px;
}
.compliance .container > div {
	margin-top: 20px;
	margin-bottom: 30px;
}
.compliance .container > div > h3 {
	margin-bottom: 10px;
	font-weight: bold;
}
.ln-row:first-child {
    border-top: 1px solid #eee;
}
.ln-row {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #eee;
}
.ln-col a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.ln-col {
    min-width: 12rem;
    padding: 20px 15px;
    box-sizing: border-box;
}
.ln-row .ln-col:first-child{
    min-width: 10rem;
}
.ln-row .ln-col:last-child{
	flex-grow:1;
	font-weight:bold;
}
span.icon-exlink {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    background-image: url(images/assets/icon_externallink.png);
    background-repeat: no-repeat;
    background-size: contain;
}
a:hover span.icon-exlink{
    background-image: url(images/assets/icon_externallink-h.png);
}
.btn{
	text-align: center;
	font-size: 16px;
	color: #61c3cf;
	height: 50px;
	line-height: 48px;
	border: 1px solid #61c3cf;
	padding: 0 55px;
	border-radius: 0;
	position: relative;
	transition: all 0.6s;
	font-family: 'Noto Sans JP', sans-serif;
}
.btn:after{
	content: '';
	border: 1px solid #c7e8ec;
	position: absolute;
	top: 4px;
	left: 4px;
	height: 50px;
	line-height: 48px;
	width: 100%;
	display: block;
	transition: all 0.3s;
}
.btn:hover{
	background-color: #61c3cf;
	color: #fff;
}
.btn:hover:after{
	top: 0;
	left: 0;
	border-color: transparent;
}
.about{
	padding: 28px 0;
	background-color: #f3f8f8;
}
.about .title {
	margin-bottom: 32px;
}
.about .about-info{
	background-color: #ffffff;
	border-radius: 16px;
	padding: 64px 0;
	max-width: 916px;
	margin: 0 auto;
}
.about .about-info h3 {
    font-weight: 700;
    color: #61c3cf;
	line-height: 1.5;
    text-align: center;
}
.about .about-info p{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.714;
	color: #626262;
}
.about .about-info h3+p {
	margin-top: 32px;
}
.about .about-info p+p {
	margin-top: 32px;
}
.about .about-info p+h3 {
	margin-top: 64px;
}
.member{
	padding: 70px 0 60px;
	background-color: #f3f8f8;
}
.list-member{
	margin: 0 -10px 40px;
	display: flex;
	justify-content: center;
}
.list-member:after{
	content: '';
	display: block;
	clear: both;
}
.list-member .member-item{
	width: 33.333333%;
	padding: 0 50px;
	float: left;
}
.member-item .member-thumb{
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: 10px;
}
.member-item .member-thumb img{
	transform: scale(1);
	transition: all 0.3s;
}
.member-item .member-thumb:hover img{
	transform: scale(1.1);
}
.list-member .member-more{
	text-align: center;
}
.member-item .member-info .member-office{
	font-size: 14px;
	text-transform: uppercase;
	height: 24px;
	line-height: 24px;
	background-color: #61c3cf;
	padding: 0 10px;
	display: inline-block;
	color: #fff;
	letter-spacing: 1px;
	border-radius: 2px;
	margin-right: 8px;
}
.member-item .member-info h3{
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	color: #626262;
}
.member-item .member-info a:hover{
	color: #61c3cf;
}
.recruit{
	background-color: #f3f8f8;
}
.recruit .container{
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: white;
	border-radius: 16px;
	max-width: 916px;
}
.recruit .container .card{
	display: flex;
	flex-direction: row;
	align-content: flex-end;
	width: 581px;
	margin-top: 16px;
	overflow: hidden;
}
.recruit .container .card .fig{
	display: flex;
	flex-direction: column-reverse;
	margin-right: 4%;
}
.recruit .container .card .fig img{
	display: block;
	max-width: 165px;
}
.recruit .container .card .content {
	padding-top: 4px;
}
.recruit .container .card .content .title{
	text-align: inherit;
	margin-bottom: 16px;
}
.recruit .container .card .content .text{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	margin-bottom: 16px;
	line-height: 24px;
}
.recruit .container .card .content .button{
	width: 118px;
	height: 36px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	line-height: 19px;
	background-color: #7AC1CD;
	color: white;
	border-radius: 30px;
	padding: 12px 16px 12px 16px;
}
.recruit .container .card .content .button{
	display: flex;
	align-items: center;
	justify-content: center;
}
.recruit .container .card .content .button img{
	margin-left: 4px;
}
.company{
	padding: 70px 0 80px;
	background:#f3f8f8;
}
.company-info .company-item{
	margin-bottom: 40px;
}
.company-info .company-item h4{
	font-size: 14px;
	color: #61c3cf;
	font-weight: 700;
	margin-bottom: 10px;
}
.company-info .company-item p{
	color: #626262;
	margin-bottom: 8px;
	font-family: 'Noto Sans JP', sans-serif;
}
.company-info .company-item p:last-child,
.company-info .company-item:last-child{
	margin-bottom: 0;
}
.maps-item h4{
	color: #626262;
	font-weight: 700;
	margin-bottom: 10px;
}
.maps-item{
	margin-bottom: 30px;
}
.maps-item:last-child{
	margin-bottom: 0;
}
.contact{
	padding: 60px 0;
	background-color: #61c3cf;
}
.contact h3{
	text-align: center;
	color: #fff;
	margin-bottom: 40px;
	font-family: 'Noto Sans JP', sans-serif;
}
.contactForm label{
	display: inline-block;
	text-align: right;
	width: 35%;
	float: left;
	color: #fff;
	vertical-align: middle;
	font-weight: 400;
	padding-right: 15px;
	line-height: 40px;
	font-family: 'Noto Sans JP', sans-serif;
}
.contactForm label span{
	font-size: 11px;
	color: #2c97a4;
	display: inline-block;
	line-height: 20px;
	height: 20px;
	padding: 0 8px;
	background-color: #fff;
	border-radius: 2px;
	vertical-align: middle;
	margin-left: 10px;
}
.contactForm .field-input{
	margin-bottom: 26px;
}
.contactForm .field-input:after{
	content: '';
	display: block;
	clear: both;
}
.contactForm .field-right{
	width: 65%;
	float: right;
	padding-left: 15px;
}
.contactForm .field-right input,
.contactForm .field-right textarea{
	width: 100%;
	max-width: 330px;
	border-radius: 2px;
	resize: none;
	height: 40px;
	line-height: 40px;
}
.contactForm .field-right textarea{
	height: 140px;
	line-height: normal;
	max-width: 450px;
}
.contactForm button{
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}
.contactForm button:after{
	border: 1px solid rgba(255,255,255,0.3);
}
.blog .news-thumb{
	float: left;
	margin-right: 40px;
	border-radius: 15px;
	overflow: hidden;
}
.blog .news-info{
	display: table;
}
.blog .news-info h3{
	clear: none;
}
.blog article.post:after{
	content: '';
	display: block;
	clear: both;
}
.blog .post-item{
	padding: 40px 0;
}
.blog .post-item:nth-child(2n+1){
	background-color: #fff;
}
.blog .title{
	margin-bottom: 20px;
}
.blog .news-info time{
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 10px;
	display: block;
}
.blog .news-info h3 a{
	font-size: 18px;
}
.blog .news-info h3{
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 18px;
}
.blog .news-info h3:before,
.blog .news-info h3:after{
	content: '';
	width: 100%;
	height: 1px;
	background-color: #61c3cf;
	display: block;
	position: absolute;
	bottom: 4px;
	left: 0;
}
.blog .news-info h3:after{
	background-color: rgba(97,195,207,0.3);
	bottom: 0;
}
.blog .news-desc{
	font-size: 14px;
	line-height: 24px;
	font-family: 'Noto Sans JP', sans-serif;
	margin-bottom: 20px;
}
.blog .btn{
	height: 30px;
	line-height: 28px;
	padding: 0 14px;
	font-size: 14px;
}
.blog .btn:after{
	height: 30px;
	line-height: 28px;
}
.mp-close{
	text-align: right;
}
.mp-close span{
	height: 24px;
	width: 24px;
	display: block;
	background-image: url(images/assets/close.png);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	float: right;
}
.member-bg{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.6);
	display: none;
	z-index: 9;
}
.member-popup{
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	right: 15px;
	max-width: 1000px;
	margin: 0 auto;
	background-color: #61c3cf;
	z-index: 10;
	border-radius: 10px;
	overflow: hidden;
	padding: 30px;
	display: none;
}
.member-popup:after,
.mp-close:after{
	content: '';
	display: block;
	clear: both;
}
.member-popup .mp-thumb{
	float: left;
	margin-right: 30px;
	border-radius: 10px;
	overflow: hidden;
}
.member-popup .mp-info{
	display: table;
}
.member-popup .mp-desc{
	margin-bottom: 50px;
}
.member-popup .mp-info h4{
	font-size: 30px;
	color: #fff;
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 20px;
}
.member-popup .mp-info h4:before,
.member-popup .mp-info h4:after{
	content: '';
	height: 1px;
	width: 100%;
	background-color: #fff;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0.4;
}
.member-popup .mp-info h4:before{
	bottom: 5px;
	opacity: 1;
}
.member-popup .mp-info p{
	font-size: 16px;
	line-height: 30px;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
}
/*==========================================================
	7. FOOTER
==========================================================*/
.site-footer{
	padding: 50px 0 25px;
}
.site-footer .footer-brand{
	margin-bottom: 25px;
}
.footer-menu{
	margin-bottom: 30px;
}
.footer-menu li{
	list-style: none;
	display: inline-block;
}
.footer-menu li:after{
	content: '|';
	margin: 0 30px;
}
.footer-menu li:first-child:before{
	content: '|';
	margin-right: 30px;
}
.footer-menu li:last-child:after{
	margin-right: 0;
}
.footer-menu li a{
	color: #626262;
}
.copyright{
	font-size: 10px;
	color: #626262;
}
.mobile-only {
	display: none;
}
.main-menu .mobile-only {
	display: none;
}
br.break_sp {
	display: none;
}