/*!
Theme Name: beaute-blanche
Theme URI: https://livalest.com/
Author: LIVALEST
Author URI: https://livalest.com/
Description: Description
Version: 1.0.0
*/

:root {
	--blue-color: #046EB7;
	--blue-color-rgb: 39, 128, 255; 
	--white-color:#F8F8F8;
	--text-color:#3c3c3c;
	--base-duration:.64s;
	--base-easing:cubic-bezier(0.785, 0.135, 0.15, 0.86); }
html { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; scroll-behavior: smooth; }
body { font: .84rem/1.8 "Noto Serif JP",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-feature-settings: "palt"; letter-spacing:2px; font-weight: 300; color:var(--text-color); }
.grecaptcha-badge { visibility: hidden; }
.literata { font-family: "Literata", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;　}
.uppercase { text-transform: uppercase; }
.blue { color:var(--blue-color); }
.inner { max-width: 1200px; width: 100%; margin: 0 auto; }
.inner2 { margin: 0 8%; }
.inner3 {max-width: 800px; width: 100%; margin: 0 auto;  }
.left-inner-margin { margin-left:16%; }
.right-inner-margin { margin-right:16%; }
.breakout-left { margin-left: calc(50% - 49vw); }
.breakout-right { margin-right: calc(50% - 49vw); }
.sp { display:none; }
.text-block { display:inline-block; }
.button-primary { line-height: 1.5; position: relative; display: inline-block; text-transform: uppercase;
  padding: 1rem 3.2rem; cursor: pointer; font-size:1.1em;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 
	transition: all var(--base-duration); text-align: center; vertical-align: middle; text-decoration: none;
	letter-spacing: 0.1em; color: var(--blue-color) ; overflow: hidden; }
.button-primary span { position: relative; z-index: 1; }
.button-primary:before { position: absolute; top: 0;
  left: calc(-150% + 120px); width: 150%; height: 500%; content: '';
  -webkit-transition: all var(--base-duration) var(--base-easing); transition: all var(--base-duration) var(--base-easing);
  -webkit-transform: rotate(45deg) translateX(0) translateY(0); transform: rotate(45deg) translateX(0) translateY(0);
  background: var(--blue-color); }
.button-primary:after { position: absolute; top: -400%;
  right: calc(-150% + 50px); width: 150%; height: 500%; content: '';
  -webkit-transition: all var(--base-duration) var(--base-easing);
  transition: all var(--base-duration) var(--base-easing);
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0); background: var(--blue-color); }
.button-primary:hover { color:#fff; }
.button-primary:hover:before { -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
	transform: rotate(45deg) translateX(0) translateY(-50%); }
.button-primary:hover:after { -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
	transform: rotate(45deg) translateX(0) translateY(50%); }

.line-link { color:var(--blue-color); padding-bottom: 4px; position: relative; }
.line-link::before { background: var(--blue-color); content: ''; width: 100%;
  height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top;
  transform: scale(0, 1); transition: transform var(--base-duration); }
.line-link:hover::before { transform-origin: left top; transform: scale(1, 1); }

@media (max-width: 1280px) {
	.inner { padding:0 4%; }
	.left-inner-margin { margin-left:8%; }
	.right-inner-margin { margin-right:8%; }}

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

@media  (max-width: 599px){
	.left-inner-margin { margin-left:4%; }
	.right-inner-margin { margin-right:4%; }}

@media  (max-width: 480px){
	body { font: .72rem/1.7 "Noto Serif JP",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; }
	.pc { display:none; }
	.sp { display:block; }}


/*    header
------------------------------------------------------------------------------*/
.site-header { position:fixed; width:100%; top:0; left:0; padding:16px; z-index:10; transition:background-color var(--base-duration); background-color: transparent;　}
.site-header[data-active=true] { background-color: rgba(255,255,255,0.9); }
.site-header[data-active=false] { opacity:0;  }
.site-header .inner { align-items: center; }
.site-header-image { width:240px; }
.main-nav { margin-left: auto; margin-right:56px; }
.main-nav-item { margin-left:32px; }
.main-nav-item:first-child { margin-left:0; }
.main-nav-link { text-transform: uppercase; font-family: "Literata", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;　}

.cbutton-list { position:fixed; z-index:3; right:12px; top:40%; }
.cbutton-item { text-align:center; }
.cbutton-item:not(:first-child) { margin-top:32px; }
.icon-wrap { background-color:var(--blue-color); width:40px; height:40px; border-radius:20px; 
	transition:transform var(--base-duration) var(--base-easing);
	display:flex; justify-content: center; align-items: center; margin: auto; }
.icon-wrap-line { background-color:inherit; }
.cbutton-item-text { font-size:80%; color:var(--blue-color); }
.cbutton-link:hover .icon-wrap { transform:scale(1.08,1.08); }

@media  (max-width: 767px){
	.site-header .inner { padding:0; }
	.main-nav { display:none; }}

@media  (max-width: 480px){
	.cbutton-list { right:2%; top:inherit; bottom:4%; }}



/*    cta
------------------------------------------------------------------------------*/
.cta-section { margin-top:120px; }
.cta-section .jpn-text-heding { line-height:1.2; margin:0px 0 40px;
	font-size:1.2em; display:inline-block; border:1px solid var(--blue-color); color:var(--blue-color); padding:8px;  }
.ctabutton-wrap { margin:24px auto; }
.ctabutton { display:block; width:400px; margin:auto; padding:24px; 
	transition: background-color var(--base-duration) var(--base-easing);
	border:1px solid var(--blue-color); color:var(--blue-color); }
.cta-logo { width:80px; transition: filter var(--base-duration) var(--base-easing);}
.ctabutton-text-eng { margin-top:16px; font-size:1.6em; line-height:1; }
.ctabutton-text-jpn { margin-top:4px; font-size:0.8em; }
.ctabutton-text { display:block; transition: color var(--base-duration) var(--base-easing); }
.ctabutton:hover { background-color:var(--blue-color); }
.ctabutton:hover .ctabutton-text { color:#fff; }
.ctabutton:hover .cta-logo { filter:invert(100%); }

@media  (max-width: 480px){
	.cta-section .ctabutton { width:100%; }}

/*    footer
------------------------------------------------------------------------------*/
.site-footer { margin-top:120px; background-color:var(--blue-color);  }
.copyright { text-align:center; color:#fff; padding:16px; font-size:.9em; }