/*
 Theme Name:rotatoria
Template: customify
*/

@import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre&display=swap');

#page-animate{
	position:relative;
	z-index:1;
}

body{
	letter-spacing:0.05em;
}


body:before,
body:after{
	visibility:visible!important;
	opacity:1!important;
}

#page-animate::before {
 content: '';
 position: fixed;
 top: 100%;
 width: 100%;
 height: 100%;
background-color: #f5f5f5;
 z-index: 10000;
 pointer-events: none;
 left: 0;
 -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}

#page-animate::after {
 content: '';
 position: fixed;
 top: -100%;
 width: 100%;
 height: 100%;
background-color: #f5f5f5;
 z-index: 9998;
 pointer-events: none;
 left: 0;
 -webkit-transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
 transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

#page-animate.is-slide-in::before {
top:0;
}

#page-animate.is-slide::after {
 top: 0;
}

#page-animate.is-slide .transition-icon{

	opacity:1;
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	pointer-events:none;

}


#page-animate .transition-icon{
	opacity:0;
	transition:all 0.2s ease-in;
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	pointer-events:none;
}


#page-animate.is-slide .transition-icon .logo{
  -webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
  animation-name: transition-icon;
  animation-duration:0.35s;
	animation-delay:0.6s;
	animation-timing-function:cubic-bezier(.4, 0, .2, 1) ;
animation-fill-mode: forwards;
}

@keyframes transition-icon {
  0% {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
	}

	100% {
  -webkit-clip-path: inset(0 0  0 0);
  clip-path: inset(0 0 0 0);
	}
}


/*----------------------
contact form
-----------------------*/
/***** コンタクトフォーム *****/
.table-contactform7{
  overflow: hidden;
table-layout: fixed;
width:100%;
}
 
.required-contactform7{
  padding: 3px;
  background: #DE8686;
  color: #fff;
  border-radius: 3px;
  margin-left: 3px;
font-size:80%;
}
 
.unrequired-contactform7{
  padding: 3px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-left: 3px;
font-size:80%;
}
 
.table-contactform7 th{
  font-weight:bold;
}
 
.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 5px 10px;
border:1px solid #ddd;
border-radius:5px;

padding:0 0.5em ;
}

.table-contactform7 textarea{
	min-height:100px;
}
 
.address-100 input{
  max-width: 90% !important;
  margin: 10px 10px 10px 10px;
}
 
.message-100 textarea{
  width: 100%;
  margin: 10px 10px 10px 10px;
}

.table-contactform7 select{
margin: 5px 10px 5px 10px;
height:2em;
padding:0.3em 0!important;
}
 
.table-contactform7 select option{
padding:0.3em 0;
}


@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
  }
    }
     
@media screen and (max-width: 900px){
.display-4{
	font-size: 2.0rem;
}

.table-contactform7{
  display:block;
}     
       
  .table-contactform7 tbody,
  .table-contactform7 tr{
    display: block;
    width: 100%;
  }
  .table-contactform7 th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
}
.table-contactform7 td{
  display: list-item;
  list-style-type:none;
  margin:0;
  padding:0;
  width: 100%;
  border-top: none !important;
}
}

.input-age{
	width:6em!important;
}

.input-zip{
	width:12em!important;
}

select.input-subject{
		width:90%!important;
	padding:0.6em!important;
	height:3em;
}





.text-shadow{
	text-shadow:1px 1px 1px rgba(0,0,0,0.7);
}

#lightcase-case{
	text-shadow:none!important;
}

@media screen and (max-width: 640px)
#lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p {
color:initial;
}


.system-card{
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.system-card p{
	display:none;
}

.system-card img{
	margin:0;
	padding:0;
}

.system-card figure{
	overflow:hidden;
	margin:0;
	padding:0;
}

.system-card figure img{
	transform:scale(1);
	transition:0.3s all ;
}

.system-card:hover figure img{
	transform:scale(1.1);
}


.title-ribbon {
	line-height: 50px;
	position: absolute;
	top: 20px;
	left: -9px;
	width: 13em;
	height: 50px;
	padding-left: 15px;
	color: #ffffff;
	background: #0281CD;
	font-size:24px;
	font-weight:bold;
}
.title-ribbon:before, .title-ribbon:after {
	position: absolute;
	content: '';
}
.title-ribbon:before {
	top: -8.5px;
	left: 0.1px;
	width: 0;
	height: 0;
	border-bottom: 9px solid #1b4490;
	border-left: 9px solid transparent;
}
.title-ribbon:after {
	right: -14.5px;
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 15px solid #0281CD;
}

@media screen and (max-width: 900px){
.title-ribbon {
	top: -35px;
}

.title-ribbon:before {
	top:auto;
	bottom: -8.5px;
	left: 0.1px;
	width: 0;
	height: 0;
	border-top: 9px solid #1b4490;
	border-bottom:0px;
	border-left: 9px solid transparent;
}

}


.system-card .system-text{
	position:absolute;
	bottom:0;
	left:0;
	padding:10px 15px;
	background-color:rgba(255,255,255,0.8);
	color:#222;
	opacity:1;
	transition:all 0.3s;
font-weight:bold;
	width:100%;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	min-height:5em;
	font-size:16px;
}

.system-card:hover .system-text{
/*	transform:translate(0, 100%);*/
	opacity:0;
}



.nav-menu-mobile .menu li {
	display:block;
	margin-bottom:0.5em;
}

#scrolltop{
	z-index:10000;
}


/*
.fade_set div ,
.fade_set2 div {
    content: '';
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_set div {
    z-index: 9999;
    transition: .6s;
}
.fade_set2 div {
    z-index: 9998;
    transition: .8s;
}
.fade_set div:nth-of-type(1) {
    background: rgba(255,255,255,.3);
}
.fade_set div:nth-of-type(2) {
    background: rgba(255,255,255,.5);
    transition-delay:.1s;
}
.fade_set div:nth-of-type(3) {
    background: rgba(255,255,255,.7);
    transition-delay:.2s;
}
.fade_set div:nth-of-type(4) {
    background: rgba(255,255,255,1);
    transition-delay:.3s;
}
.fade_set2 div:nth-of-type(1) {
    background: rgba(255,255,255,.8);
    transition-delay: .2s;
}
.fade_set2 div:nth-of-type(2) {
    background: rgba(255,255,255,.8);
    transition-delay: .3s;
}
body.fade-out .fade_set div{
    left: 0;
}
body.fade-out .fade_set2 div{
    left: 100vw;
}

*/

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値 : 透過状態 */
  -webkit-transition: opacity .5s ease;  /* アニメーション時間は 0.8秒 */
  transition: opacity .5s ease;
}

body{
	overflow-x:hidden;
}


table.company {
	border-top:1px solid #dee2e6;
}

table.company td{
	padding:1.8em 0;
background-color:#fff!important;
line-height:1.8;
}

table.company tr:last-child td{
		border-bottom:1px solid #dee2e6;
}


.home #main{
	padding:0!important;
}

#main{
	padding-right:0!important;
	padding-left:0!important;
}

.home .site-content.content-full-width .customify-container{
	width:100%!important;
	margin:0!important;
	padding:0!important;
}

#news figure figcaption span.category{
	background-color:rgba(255,255,255,0.85);
	background-color:#008835;
	color:#fff;
	margin:0;
/*	padding:0.6em 1em;*/
	top:0;
	width:auto;

	padding: 0.8em 1.3em;
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family: 'Josefin Sans', sans-serif;
	font-size:11px;
	letter-spacing:0.1em;
	text-transform:uppercase;
	font-weight:bold;
}

.category span{
	padding-right:0.5em;
	margin-right:0.5em;
	border-right:1px solid #ccc;	
}
.category span:first-child{
	padding-left:0.5em;
	margin-left:0em;
	border-left:1px solid #ccc;	
}





.hamburger-bar{
	opacity:1;
	pointer-events: auto;
  right : 20px;
  top   : 15px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  position: fixed;
  display : block;
  z-index : 200000;
}




.hamburger-bar {
	transition:all 0.3s ease;
	opacity:1;
	pointer-events: auto;

}
.hamburger-bar span {
  display : block;
  position: absolute;
  width   : 20px;
  height  : 1px ;
  left    : 12px;
	background-color:#111;
  -webkit-transition: 0.3s ease-in-out 0.1s;
  -moz-transition   : 0.3s ease-in-out 0.1s;
  transition        : 0.3s ease-in-out 0.1s;
}

.sticky-active .hamburger-bar span{
	background-color:#111!important;
}

.hamburger-bar span:nth-child(1) {
  top: 15px;
}
.hamburger-bar span:nth-child(2) {
  top: 20px;
}
.hamburger-bar span:nth-child(3) {
  top: 25px;
}

/* ナビ開いてる時のボタン */


.hamburger-bar.active{


}

.hamburger-bar.active span{
	background-color:#000;
}


.hamburger-bar.active span:nth-child(1) {
  top : 20px;
  left: 12px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger-bar.active span:nth-child(2){
	opacity:0;
}
.hamburger-bar.active span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}


nav.globalMenu {
  position: fixed;
  z-index : 199999;
  top  : 100vh;
  left : 0;
  color: #3A322F;
  background: #fff;
  text-align: center;
  width: 100%;
  opacity: 0.6;
  transition: all .35s ease-in-out 1.7s;
	padding:40px 40px 60px 40px;
height:100vh;
display:flex;
align-items:center;
	font-family: 'Josefin Sans', sans-serif;
}




/* このクラスを、jQueryで付与・削除する */
nav.globalMenu.active {
top:0;
opacity:1;
	transition: all .35s ease-in-out 0s;

}

nav.globalMenu .container {
opacity:0;
transition: all .25s ease-in-out 1s;
text-align:left;
}

nav.globalMenu.active .container {
opacity:1;
}

nav.globalMenu .container ul.mainmenu {
list-style:none;
margin:0;
padding:0;
}



nav.globalMenu .container ul.mainmenu li {
	position:relative;
	opacity:0;
	transition: all 0.3s ease-out;
	top:10px;
}

nav.globalMenu .container ul.mainmenu li:nth-child(1){ transition-delay: .9s }
nav.globalMenu .container ul.mainmenu li:nth-child(2){ transition-delay: .75s }
nav.globalMenu .container ul.mainmenu li:nth-child(3){ transition-delay: .6s }
nav.globalMenu .container ul.mainmenu li:nth-child(4){ transition-delay: .45s }
nav.globalMenu .container ul.mainmenu li:nth-child(5){ transition-delay: .3s }
nav.globalMenu .container ul.mainmenu li:nth-child(6){ transition-delay: .15s }


nav.globalMenu .container ul.mainmenu li.active {
	opacity:1;
	top:0;
	transition: all 0.3s ease-out;
}

nav.globalMenu .container ul.mainmenu li.active:nth-child(1){ transition-delay: 1.15s!important; }
nav.globalMenu .container ul.mainmenu li.active:nth-child(2){ transition-delay: 1.3s!important; }
nav.globalMenu .container ul.mainmenu li.active:nth-child(3){ transition-delay: 1.45s!important; }
nav.globalMenu .container ul.mainmenu li.active:nth-child(4){ transition-delay: 1.6s!important; }
nav.globalMenu .container ul.mainmenu li.active:nth-child(5){ transition-delay: 1.75s!important; }
nav.globalMenu .container ul.mainmenu li.active:nth-child(6){ transition-delay: 1.9s!important; }




nav.globalMenu .container ul.mainmenu li a{
	font-size:26px;
	color:#3A322F!important;
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: #3A322F;
  overflow: hidden;
  background: linear-gradient(to right, #ccc, #ccc 50%, #111 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
  text-decoration: none;
text-transform:uppercase;
letter-spacing:0.1em;
}

nav.globalMenu .container ul.mainmenu li a:hover {
  background-position: 0 100%;
}



.relative{
	position:relative;
}


.absolute{
	position:absolute;
	top:0;
	left:0;
}

.opacity-05{
	opacity:0.2;
}

.logo-header{
	color:#fff;
	mix-blend-mode:difference;
	z-index:200001;
	position:relative;
}


.n2-section-smartslider .icon-circle{
  animation-name: rotate;
  animation-duration: 7s;
  animation-timing-function: cubic-bezier(0.5, 0.51, 0.51, 0.52);
  animation-iteration-count: infinite;
position:fixed;
	width:55%;
	height:auto;
right:30%;
bottom:0%;
	margin-right:-50%;
margin-bottom:-30%;
mix-blend-mode: difference;
	opacity:0.3;
}



.globalMenu .icon-circle{
  animation-name: rotate;
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(0.5, 0.51, 0.51, 0.52);
  animation-iteration-count: infinite;
position:fixed;
	width:55%;
	height:auto;
right:30%;
opacity:0.3;
	margin-right:-50%;

}

@keyframes rotate{
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.btn.fiter{
	border:none!important;
}

.btn.fiter:hover,
.btn.filter.active{
	background-color:#aaa!important;
	color:#222!important;
}

.single-brand .entry-title{
	font-family: 'Josefin Sans', sans-serif;
}


.single-brand h3{
font-family: 'Josefin Sans', sans-serif;
text-transform:uppercase;
font-size:18px;
}


.number{
	font-size:150%;
	margin-right:0.2em;
}


/* --------------------------------------------------------------------------------
 * Brands
 * -------------------------------------------------------------------------------- */

.brands .title{
	font-size:18px;
	font-weight:bold;
	font-family: 'Josefin Sans', sans-serif;
}

.brands .title-jp{
	font-size:11px;
}

.text-sans-en{
	font-family: 'Josefin Sans', sans-serif;
}

.text-serif-en{
	font-family: 'Frank Ruhl Libre', serif;
}

.catch-copy{
	font-size:42px;
	letter-spacing:0em;
}


.btn-filter{
	font-family: 'Josefin Sans', sans-serif;
	letter-spacing:0.05em;
	color:rgba(58,50,47,0.5);
	border:1px solid rgba(58,50,47,0.5)!important;
	display:block;
	transition:all 0.3s ease-out;
	text-align:center;
	padding:0.45em 0;
}

.btn-filter:hover,
.btn-filter.active{
	color:#fff!important;
	background-color:rgba(58,50,47,0.5);
	border:1px solid rgba(58,50,47,0.5)!important;
	cursor:pointer;
}


/* --------------------------------------------------------------------------------
 * Contact
 * -------------------------------------------------------------------------------- */

#contact .en{
	font-family: 'Josefin Sans', sans-serif;
	letter-spacing:0.05em;
	text-transform:uppercase;
	margin-left:0.75em;
	font-size:50%;
}

#contact .required{
	margin-left:0.25em;
}

.btn-submit input{
	background-color:transparent!important;
	font-family: 'Josefin Sans', sans-serif;
	width:100%!important;

	
	color:#fff;
	width: 175px;
	height: 48px;
	display: flex;
	justify-content: start;
	align-items: center;
	font-family: 'Josefin Sans', sans-serif;
	text-decoration: none!important;
	background-color:#111!important;
	font-weight:normal;
	transition:all 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
	border-radius:100vh!important;
}

.btn-submit{
	position: relative;
}

.btn-submit input:hover{
	background-color:#555!important;
}

.btn-submit:before,
.btn-submit:after{
	content: ''!important;
	display: block!important;
	position: absolute!important;
	top: 50%!important;
	right: 0!important;
	height: 1px!important;
	background: #fff!important;
	transform: translate(-50px, 0px)!important;
	transition:all 0.3s cubic-bezier(0.0, 0.0, 0.2, 1)!important;
	z-index:1;
}

.btn-submit:before{
	width: 35px!important;
}

.btn-submit:after{
	width: 10px!important;
	transform-origin: right center!important;
	transform: translate(-50px, 0px) rotate(45deg)!important;
}

.btn-submit:hover:after{
	background-color:#fff!important;
	transform: translate(-20px, 0px) rotate(45deg)!important;
}

.btn-submit:hover:before{
	background-color:#fff!important;
	transform: translate(-20px, 0px)!important;
}


/* --------------------------------------------------------------------------------
 * Service
 * -------------------------------------------------------------------------------- */

#service .text-serif-en{
	letter-spacing:0.05em;
}

#service h2.section-title{
	font-size:32px;
	font-weight:normal;
}


#service h4.section-title{
	font-size:24px;
	font-weight:normal;
}

#service h4.text-jp{
	font-size:16px;
	font-weight:normal;
}

#service .text-serif-jp{
font-family: 'Noto Serif JP', serif;
}

#service  h3.text-serif-jp{
		font-size:22px;
	font-weight:normal;
}

/* --------------------------------------------------------------------------------
 * Works
 * -------------------------------------------------------------------------------- */

.entry-content h1, .wp-block h1, .entry-single .entry-title{
	font-family: 'Noto Serif JP', serif;
	font-weight:normal!important;
}

#page-breadcrumb{
	text-align:right;
}

/* --------------------------------------------------------------------------------
 * Contact
 * -------------------------------------------------------------------------------- */

.wpcf7-form-control.wpcf7-submit{
	background-color:#111!important;
	color:#fff!important;
	display:block;
	width:100%;
	border-radius:100vh!important;
	padding:0.4em!important;
	font-family: 'Josefin Sans', sans-serif;
	letter-spacing:0.1em!important;
}

.wpcf7-form-control.wpcf7-submit:hover{
	background-color:#555!important;
}


span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}



.wpcf7 .wpcf7-response-output {
    padding: 8px 35px 8px 14px!important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
        color: #B94A48;
        background-color: #F2DEDE!important;
        border: 1px solid #EED3D7!important;
    }
.wpcf7 form.sent .wpcf7-response-output {
        color: #3A87AD;
        background-color: #D9EDF7!important;
        border: 1px solid #BCE8F1!important;
    }


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{
	border-color: #ffb900!important;
	background-color:#e7c978!important;	
}

.site-footer{
	z-index:0!important;
}

h1.entry-title img{
	max-width:200px;
	max-height:100px;
}

#works h4{
	font-family: 'Frank Ruhl Libre', serif;
	font-size:18px;
}


#works .date{
margin-top:0.6em;
font-size:12px;
color:#999;
}

#works .category{
font-family: 'Josefin Sans', sans-serif;
font-style:italic;
padding:0.3em 0.6em;
font-size:12px;
border:1px solid #bbb;
color:#999;
margin-right:2px;
}