/*
Theme Name: comface
Theme URI: http://livalest.com/
Author: LIVALEST
Author URI: http://livalest.com/
Description: Description
*/

:root{
	--blue-color-primary:#012060;
	--blue-color-primary-rgb:1, 32, 96;
	--blue-color-second:#F0F1F8;
	--red-color-primary:#b81516;
	--red-color-primary-rgb:184, 21, 22;
	--base-duration:.4s;
	--base-easing:cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.grecaptcha-badge { visibility: hidden; }



/* common
-------------------------------------------------------------*/
body { margin:0; color:#111; line-height:1.75; font-size:100%;
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif;
  letter-spacing: 1.2px; }
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background-color:#ccc; }
::-webkit-scrollbar-thumb { background:#222; }

.noto-sans { font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto; font-weight: 800; font-style: normal; }
.barlow { font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-style: italic; }
.blue { color:var(--blue-color-primary); }
.red { color:var(--red-color-primary); }


.text-block { display: inline-block; }
.uppercase { text-transform: uppercase; }
.palt { font-feature-settings: "palt"; }

.breakout-left { margin-left: calc(50% - 50vw); }
.breakout-right { margin-right: calc(50% - 50vw); }
a.text-link { position:relative; color:var(--red-color-primary); font-weight:900; }
a.text-link::after { position: absolute; left: 0;
  content: ''; width: 100%; height: 2px; background: var(--red-color-primary);
  bottom: -1px; transform: scale(0, 1); transform-origin: right top; transition: transform var(--base-duration); }
a.text-link:hover::after { transform: scale(1, 1); transform-origin: left top; }

.button-primary { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  text-align: center; color:var(--blue-color-primary); border:2px solid var(--blue-color-primary);
  padding:16px 24px; background-color: #fff; width:40%; font-weight:900; font-size:120%;
  transition: color var(--base-easing) var(--base-duration),background-color var(--base-easing) var(--base-duration);}
.button-text { margin-right:24px; }

.button-primary:hover { color:#fff; background-color: var(--blue-color-primary); }
.button-primary .icon { transition: stroke var(--base-easing) var(--base-duration); }
.button-primary:hover .icon { stroke:#ffffff; }

.heading-primary { margin:12px 0 40px; font-size:180%; }
.engtext-fs { font-size:640%; line-height: 1.2; text-transform: capitalize; }

.sp { display: none; }
.spbr { display: none; }

@media (max-width: 1200px){
	.engtext-fs { font-size:480%; }}

@media (max-width:767px){
	.engtext-fs { font-size:360%; }
	.pc { display:none; }
	.sp { display: block; }}

@media (max-width:599px){
	.spbr { display: block; }
	.button-primary { font-size:100%; font-size:90%; }
}

@media (max-width: 480px){
	.engtext-fs { font-size:320%; }}

/* rayout
-------------------------------------------------------------*/
.inner1 { max-width:1200px; width:100%; margin:0 auto;}
.inner2 { max-width:800px; width:100%; margin:0 auto;}
.inner3 { max-width:960px; width:100%; margin:0 auto;}
.top-section { padding:80px 0px; margin:40px auto 80px; }

@media (max-width:1280px){
  .inner1 { padding: 0 4%; }}

@media (max-width:1120px){
	.inner3 { padding: 0 4%; }}

@media (max-width:980px){
  .inner2 { padding: 0 4%;}
  .top-section { margin-bottom:40px; }}

/* header
-------------------------------------------------------------*/
.pcheader { padding:8px 0; background-color: transparent; left: 0; position: fixed; top: 0; transition: background-color var(--base-duration), color var(--base-duration); z-index:100; width:100%; line-height: 0; }
.pcheader[data-active=false]:hover { background-color: #fff; }
.pcheader[data-active=true] { background-color: rgba(255,255,255,0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px); }
.pcheader .inner1 { align-items: center; justify-content: space-between; }
.site-title img { width:160px; height: auto; }
.pcheader[data-active=false] .site-title img { filter: brightness(0) invert(1); }
.pcheader[data-active=false]:hover .site-title img { filter: inherit; }
.header-nav { margin-left: auto; }
.header-nav-list { align-items: center; }
.header-nav-item { margin-left:24px; }
.header-nav-link { color:#111; font-weight:900; position: relative; }
.header-nav-link::after { position: absolute; left: 0;
  content: ''; width: 100%; height: 2px; background: #111;
  bottom: -1px; transform: scale(0, 1); transform-origin: right top;
  transition: transform 0.3s; }
.header-nav-link:hover::after { transform: scale(1, 1); transform-origin: left top; }
.contact-button {
  display: flex; align-items: center; justify-content: center; margin-left:24px;
  text-align: center; border:2px solid var(--blue-color-primary); color:var(--blue-color-primary); padding:12px 20px; font-weight:900;
  transition: color var(--base-easing) var(--base-duration),background-color var(--base-easing) var(--base-duration); }
.pcheader[data-active=false] .header-nav-item .contact-button { color: var(--blue-color-primary); }
.contact-button::after { content:none; }
.button-text { margin-right:12px; }
.contact-button:hover { background-color: var(--blue-color-primary); }
.contact-button:hover .button-text { color:#fff; }
.contact-button .icon { transition: stroke var(--base-easing) var(--base-duration); }
.contact-button:hover .icon { stroke:#ffffff; }

.pcheader[data-active=false] .header-nav-link,
.pcheader[data-active=false] .contact-button { color:#fff; }
.pcheader[data-active=false] .contact-button { border-color:#fff; }
.pcheader[data-active=false] .contact-button .icon { stroke:#ffffff; }
.pcheader[data-active=false]:hover .header-nav-link { color:#111; }
.pcheader[data-active=false]:hover .contact-button { color:var(--blue-color-primary); border-color: var(--blue-color-primary); }
.pcheader[data-active=false]:hover .contact-button .icon { stroke:var(--blue-color-primary); }
.pcheader[data-active=false]:hover .contact-button:hover .icon { stroke:#fff; }

@media (max-width:1080px){
	.header-nav { display:none; }
	.contact-button { display:block; padding:12px; margin-right:48px; }
	.contact-button .button-text { display:none; }
	.spheader { display:block !important; }
	.header-nav-item .contact-button { margin-left:0px; margin-right:48px; }
}

@media (max-width:480px){
	.site-title img { width:120px; }
	.contact-button { margin-left: 0px; margin-right: 56px; }
}




/* cta-section
-------------------------------------------------------------*/
.cta-section { overflow: hidden; background-color: #fff; }
.cta-inner { position:relative; padding: 80px 0 80px; background-color:#eee; }

.heading-area { position: relative; z-index: 3; }
.eng-text { color: #fff; line-height: 1;}
.jpn-text { font-size:120%; color: #fff; margin-top:12px; position: relative; margin-left:24px; }
.jpn-text:before { content:""; position: absolute; background-color:#fff; height:2px; width:16px; left:-24px; top:50%; transform: translateY(-50%); }
.cta-area { margin:64px auto 0; width:80%; }

.cta-link-wrap { width: 50%; }
.cta-link { display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap; color: #111; padding: 40px 0; text-align: center; background-color: rgba(255, 255, 255, .6); position: relative; z-index: 3;
  backdrop-filter: blur(16px); min-height:280px;
  transition:backdrop-filter var(--base-duration) var(--base-easing),background-color var(--base-duration) var(--base-easing); }
.cta-link:hover { backdrop-filter:blur(2px); background-color: rgba(255, 255, 255, 1); }
.cta-tel { border-right:0.5px solid #fff; }
.cta-contact { border-right:0.5px solid #fff; }

.cta-link svg { border:2px solid var(--blue-color-primary); border-radius: 50%; padding:8px;}

.cta-maintext { width:100%; display: block; text-align: center; line-height: 1; margin-top:24px; min-height: 40px; }
.cta-maintext { font-size:240%; }
.cta-subtext { width:100%; font-size:90%; display: block; text-align: center; margin-top:16px; }

.cta-image-wrap { position: absolute; width: 100%; z-index: 2; top:0; left:50%; transform: translate(-50%);  }
.cta-image { position: relative; display: block;}
.cta-image:before { content: ""; position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255, .5); }
.cta-image:after { content: ""; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255,255,255,1) 0, transparent 70%); }
.cta-image img { height: 480px; object-fit: cover;}

@media (max-width:991px){
	.cta-area { margin: 56px auto 0; width: 100%; }
	.cta-link-wrap { width: 100%; }
	.cta-tel { border-right:none }
	.cta-contact { border-right:none; margin-top:4%; }
	.cta-tel .cta-maintext { font-size:240%; }
	.cta-contact .cta-maintext { font-size:200%; }
}


/* footer
-------------------------------------------------------------*/
.floating-ban-wrap {
	position: fixed;
	bottom:80px; right:80px; z-index:100; 
}

.floating-ban-close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.85);
	color: #000;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	z-index:101;
	border:2px solid #000;
}
.floating-ban img { width:360px; height:auto; }
.floating-ban:hover img { opacity:0.6; }

.footer-area { background-color:#eee; padding:40px 0 120px; }
.footer-info { align-items: center; justify-content: center; flex-direction: column; }
.footer-logo img { width:200px; }
.fcompany-info { margin-top:16px; text-align:center; }
.copyright { background-color: #111; padding: 16px 0px 120px; color:#fff; }

@media (max-width:767px){
	.fcompany-info { margin-top:12px; }
	.footer-info2 { margin-top:40px; }}

@media (max-width:599px){
	.floating-ban-wrap { bottom:4px; right:0; width:96%; margin:0 2%; }
	.floating-ban-close { top: -20px; right: 8px; width: 40px; height: 40px; }
	.floating-ban img { width:100%; }}
	
@media (max-width:480px){
	.footer-area { padding:40px 0 80px; }
	.footer-logo { margin-right: 0px; }
	.copyright p { font-size: 60%; }}