/*
Theme Name: kazu
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@100&display=swap');

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}

*{
	box-sizing:border-box;
}

html{
		font-size:17px;
}

body{
	background-color:#f5f5f5;
	line-height:1.6
}


body.home{
	background-color:#EBEBEA;
	background-color:#00a9ff;
	background-color:#ccc;
	line-height:1.5;
/*
background-image:

  repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(255, 255, 255, 0.2) 26px,  rgba(255, 255, 255, 0.2) 26px,
    transparent 27px,  transparent 51px, 
    rgba(255, 255, 255, 0.2) 52px,  rgba(255, 255, 255, 0.2) 52px,
    transparent 53px,  transparent 77px, 
    rgba(255, 255, 255, 0.2) 78px,  rgba(255, 255, 255, 0.2) 78px,
    transparent 79px,  transparent 103px, 
    rgba(255, 255, 255, 0.2) 104px,  rgba(255, 255, 255, 0.2) 104px,
    transparent 105px,  transparent 129px, 
    rgba(255, 255, 255, 0.2) 130px,  rgba(255, 255, 255, 0.2) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(255, 255, 255, 0.2) 26px,  rgba(255, 255, 255, 0.2) 26px,
    transparent 27px,  transparent 51px, 
    rgba(255, 255, 255, 0.2) 52px,  rgba(255, 255, 255, 0.2) 52px,
    transparent 53px,  transparent 77px, 
    rgba(255, 255, 255, 0.2) 78px,  rgba(255, 255, 255, 0.2) 78px,
    transparent 79px,  transparent 103px, 
    rgba(255, 255, 255, 0.2) 104px,  rgba(255, 255, 255, 0.2) 104px,
    transparent 105px,  transparent 129px, 
    rgba(255, 255, 255, 0.2) 130px,  rgba(255, 255, 255, 0.2) 130px),

	linear-gradient(-45deg, #0e2262 0%,  #0e2262 25%, #00a9ff 75% , #00a9ff 100%);*/

	background-attachment:fixed;

}



body.globe--off .webgl{
	display:none!important;
}
body .webgl{
/*	display:none!important;*/
}

@media screen and (max-width: 768px) {
	html{
		font-size:16px;
	}
}


body{
	font-family: quasimoda, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
	font-family: "Noto Sans JP", sans-serif;
	font-family:Yu Gothic Medium,游ゴシック Medium,YuGothic,游ゴシック体,Hiragino Kaku Gothic ProN,メイリオ,Hiragino Sans,Noto Sans JP,BIZ UDPGothic,Meiryo,Helvetica Neue,Arial,sans-serif;
	font-style: normal;
	font-weight:400;
	display:flex;
	min-height:100vh;
	overflow-x:clip;
}

h1,h2,h3,h4,h5,h6{
	font-weight:bold;
	line-height:1.2;
}

h1{
	font-size:2.0em;
}

h2{
	font-size:1.75rem;
}

h3{
	font-size:1.45rem;
}

h4{
	font-size:1.3rem;
}

h5{
	font-size:1.15rem;
}
h6{
	font-size:1rem;
}

.container{
	padding-left:0;
	padding-right:0;
}

header{
	width:300px;
	height:100vh;
	position:fixed;
	top:0;
	z-index:1;
}

main{
	width:calc(100vw - 300px - 1rem);
	margin-left:300px;
}

img {
	max-width:100%;
	height:auto;
}

a{
	color:#2b2b2b;
}

.icon-external{
	position:relative;
	line-height:1;

}

.icon-external:after{
	position:absolute;
	content:'';
	display:inline-block;
	width:1em;
	height:1em;
	background-image:url(images/common/icon-external-black.svg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
	top:50%;
	transform:translate(0.2em , -50%);
}

.icon-external.white:after{
	background-image:url(images/common/icon-external-white.svg);
}

#home-logo img{
	width:136px;
}

@media screen and (max-width:576px) {
	#home-logo img{
		width:78px;
	}
}

button.pum-close.popmake-close{
	display:none;
}

.pum-container{
	max-width:80vw!important;
	display:flex;
	justify-content:center;
}


.text-theme{
	color:#2744a0;
}

.bg-theme{
	background-color:#2744a0;
}

.full-width{
	width:100vw;
	margin-left: calc(50% - 50vw - 150px)!important;
	margin-right: calc(50% - 50vw + 150px)!important;
}

.full-width-right{
	overflow:hidden;
	width:calc(50vw + 50% - 150px);
	margin-right:calc(-150px + 50vw - 50%);
}


@media screen and (max-width:768px) {
	.full-width,
	.full-width-right{
		width:100vw;
		margin-left: calc(50% - 50vw)!important;
		margin-right: calc(50% - 50vw)!important;
	}
}

.reveal.active {
  --g: no-repeat linear-gradient(#cc0000 0 0) 0 0;
  background: var(--g), var(--g);
  background-size: 0 100%;
  -webkit-background-clip: padding-box, text;
  background-clip: padding-box, text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: t 1.2s 0.5s both, b 1.2s 1.3s both;
}
@keyframes t {
  to {
    background-size: 150% 100%;
  }
}
@keyframes b {
  to {
    background-position: -200% 0, 0 0;
  }
}


ol.basic {
  list-style: none;
  counter-reset: number;
}

ol.basic li {
  position: relative;
  padding-left: 1.5em;
}

ol.basic li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table td,
.table-responsive table th{
	white-space:nowrap;
}
/* -------------------
 * Loading
 * -------------------- */

.loading-wrapper,
.loading-wrapper#loading--01,
.loading-wrapper#loading--03 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
/*  background-color: rgba(39,68,160,1);*/
	color:#fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  z-index: 99;
	font-size:12px;
	font-weight:bold;
	display:none;
  height: 100vh;
  justify-content: center;
  align-items: center;
}



.loading-wrapper#loading--01 .loading-wrapper__inner{
	width:100vw;
	background: linear-gradient(-45deg, #171871 0%, #2d5bb6 13%, #1094de 25%, #0b78b5 38%, #0b58b5 50%, #3d53bc 62%, #334b9e 75%, #0b7ec5 87%, #171871 100%);
  background-size:  200% 200%;
  animation: gradient 20s linear infinite;
  height: 100vh;
  justify-content: center;
  align-items: center;
	display:flex;
	flex-direction:column;
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}






body.loading--01 .loading-wrapper#loading--01{
	display:flex;
}

body.loading--02 .loading-wrapper#loading--02{
	display:flex;
}

body.loading--03 .loading-wrapper#loading--03{
	display:flex;
}




body.loading--01 .loading-wrapper#loading--01.completed{
animation-name: loadingComplete;
animation-fill-mode:forwards;
animation-duration:1.2s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.9s;
animation-direction:normal;
}

@keyframes loadingComplete{
  0% {
/*  background-color: rgba(39,68,160,1);*/

	  opacity:1;
  }

  80% {
/*  background-color: rgba(39,68,160,0);*/



  }
  100% {
/*  background-color: rgba(39,68,160,0);*/

	  opacity:0;
		pointer-events:none;
  }

}

body.loading--02 .loading-wrapper#loading--02 .loading-wrapper__inner{

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(39,68,160,1);
	color:#fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  z-index: 99;



  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
 mask-size: 300% 300%;
  mask-repeat: no-repeat;
  mask-position: 0 0;
width:100%;
	height:100%;
		position:fixed;
z-index:999;
}

body.loading--02 .loading-wrapper#loading--02 .bg{
	content:"";
	background-image:url(/wp-content/themes/kazu/images/home/loading__bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 100%;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
 mask-size: 300% 300%;
  mask-repeat: no-repeat;
  mask-position: 0 0;
}
	
body.loading--02 .loading-wrapper#loading--02.completed .loading-wrapper__inner{
animation: mask-loading 1.2s ease-in-out forwards 0s;
}

body.loading--02 .loading-wrapper#loading--02.completed .bg{
animation: mask-loading 1.2s ease-in-out forwards 0.6s;
}

@keyframes mask-loading {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: 130% 130%;
  }
}






.loader {
  width: 400px;
	max-width:90vw;
  height: auto;
margin-bottom:10px;
transform:translatey(100%);
	  opacity:0;
animation-name: loading;
animation-fill-mode:forwards;
animation-duration:0.8s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.3s;
animation-direction:normal;

}

.loader-sub {
  width: 300px;
	max-width:80vw;
  height: auto;
margin-bottom:6px;
transform:translatey(100%);
	  opacity:0;
animation-name: loading;
animation-fill-mode:forwards;
animation-duration:0.8s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.5s;
animation-direction:normal;

}

@keyframes loading{
  0% {
	  transform:translatey(100%);
	  opacity:0;
  }
  100% {
    transform:translatey(0);
	  opacity:1;
  }

}

.loader.active{
animation-name: loading-active;
animation-fill-mode:forwards;
animation-duration:0.8s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}

.loader-sub.active{
animation-name: loading-active;
animation-fill-mode:forwards;
animation-duration:0.8s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.1s;
animation-direction:normal;
opacity:1;
transform:translatey(0);
}

@keyframes loading-active{
  0% {
	  transform:translatey(0);
	  opacity:1;
  }
  100% {
    transform:translatey(-150%);
	  opacity:0;
  }

}

.loader .loading#loading01{
	animation-delay: 0s;
}


.loader .loading#loading02{
	animation-delay: 0.2s;
}


.loader .loading#loading03{
	animation-delay: 0.4s;
}


.loader .loading#loading04{
	animation-delay: 0.6s;
}


.loader .loading#loading05{
	animation-delay: 0.8s;
}

/* --------------------------------------------------------
 * Common
 * -------------------------------------------------------- */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24!important;
}



ul.icon li{
	position:relative;
	display:flex;
	align-items:start;
}

ul.chevron-right li:before{
	content:'\e5cc';
	font-family:'Material Symbols Outlined';
}

hr.basic{
height: 0;
margin: 3rem 0;
padding: 0;
border: 0;
height: 5px;
background-image: repeating-linear-gradient(-45deg,rgba(0,0,0,0.35) 0, rgba(0,0,0,0.35) 1px, transparent 0, transparent 50%);
background-size: 5px 5px;
}

.indent {
  text-indent: -1em;
  padding-left: 1em;	
}

/* ________________________________________
 * Plugins 
 * ________________________________________ */

/* ____________________
 * Bogo 
 * ____________________ */

ul.bogo-language-switcher{
	display:flex;
}

ul.bogo-language-switcher li:first-child{
	margin:0 1rem 0 0;
	padding:0 1rem 0 0;
	border-right:1px solid #ddd;
}


ul.bogo-language-switcher a,
ul.bogo-language-switcher span{
	font-size:0.75rem;
	transition:all 0.3s ease;
}


ul.bogo-language-switcher a:hover{
	color:#2744a0;
}


/* ________________________________________
 * Header
 * ________________________________________ */

header{
	padding:0.75rem 0rem 0.75rem 0.75rem;

}

header .head__container{
	background-color:#fff;
	height:100%;
	padding:1.75rem;
	border-radius:0.5rem;
	position:relative;
/*
      box-shadow:
        3px 3px 8px rgba(0, 147, 233, 0.95),
        -3px -3px 8px rgba(168, 230, 255, 0.5),
        inset 3px 3px 8px transparent,
        inset -3px -3px 8px transparent;
*/
	box-shadow:3px 3px 6px rgba(0,0,0,0.2);
}

header.active .head__container{
	box-shadow:0px 0px 0px transparent;
}

header .head__container > nav{
	display:flex;
	flex-direction:column;
	height:100%;
}

header .head__container > nav .head__nav{
	height:100%;
	display:flex;
	flex-direction:column;
	margin-top:1.25rem;
}

@media all and (max-height: 550px) { 
	header .head__container > nav .head__nav{
		overflow-y:auto;
	}
}



header .nav__item--image{
	margin:0 0 0.75rem;
	overflow:hidden;
}

header .nav__item--image a img{
	transform:scale(1);
	transition:all 0.3s ease;
}

header .nav__item--image a:hover img{
	transform:scale(1.05);
}

header .nav__item--title a{
	font-weight:normal!important;
	color:rgba(255,255,255,1);
	transition:all 0.3s ease;
	position:relative;
	line-height:1.4;
	display:inline-block;
	padding:0.2rem 0 0.2rem 1.5rem!important;
}

header .nav__item--title a:before{
	font-family:'Material Symbols Outlined';
	content:'\f591';
	font-size:24px;
	font-weight:300;
	left:0;
	top:0;
	margin-right:0.2rem;
	position:absolute;
	line-height:1.2;
}

header .nav__item--title a:hover{
	color:rgba(255,255,255,0.75)!important;

}



ul.global-nav.sub li a{
	display:inline-block;
	padding:0.25rem 0;
	font-weight:bold;
	transition:all 0.3s ease;
	font-size:0.75rem;
}

ul.global-nav.sub li a:hover{
	color:#2744a0;
}


header nav .head__hamburger{
	width:30px;
	height:30px;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

header nav .head__hamburger span{
	width:24px;
	height:1px;
	background-color:#646464;
	display:block;
	position:absolute;
	transition:all 0.3s ease;
}

header nav .head__hamburger span:nth-child(1){
	transform:translatey(-8px);
}

header nav .head__hamburger span:nth-child(3){
	transform:translatey(8px);
}


header nav .head__hamburger.is-active span:nth-child(2){
	opacity:0;
}

header nav .head__hamburger.is-active span:nth-child(1){
	transform:translatey(0) rotate(45deg);
}

header nav .head__hamburger.is-active span:nth-child(3){
	transform:translatey(0) rotate(-45deg);
}

header nav .head__drawer{
	position:relative;
}
header nav .head__dropdown{
	position:absolute;
	top:1rem;
	right:-1.25rem;
	z-index:-1;
	width:26rem;
	background-color:#fff;
	border-radius:1rem;
	padding:2.25rem 1.5rem;
	transform:translatey(-5rem);
	opacity:0;
	transition:opacity 0.45s ease, transform 0.45s ease 0.2s;
	pointer-events:none;
}

header nav .head__dropdown.is-active{
	transform:translatey(0);
	opacity:1;
	transition:opacity 0.45s ease 0.2s, transform 0.45s ease;
	pointer-events:auto;
}

header nav .head__dropdown ul.head__dropdown--list{
	margin:0 0 1.5rem;
}

header nav .head__dropdown ul.head__dropdown--list li{
	padding:0.75em 0;
}

header nav .head__dropdown ul.head__dropdown--list li:nth-child(1){
	padding:1em 0;
	border-bottom:1px solid #646464;
	margin-bottom:1em;
}

header nav .head__dropdown ul.head__dropdown--list li a div:nth-child(1){
	font-size:1.1rem;
	letter-spacing:0.05em;
	margin:0 0 0.3em;
}

header nav .head__dropdown ul.head__dropdown--list li a div:nth-child(2){
	font-size:0.85rem;
}


header nav .head__dropdown ul.head__dropdown--sns{
	display:flex;
	justify-content:space-evenly;
	margin:0 0 1.5rem;
}


.head__reservation{

}

.head__reservation a{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding-right:2.5rem;
	padding-left:2.5rem;
	background-color:#92181E;
	color:#fff;
	border-radius:100vh;
	text-decoration:none;
	box-shadow:0px 3px 6px rgba(0,0,0,0.25);
}

.head__reservation a div:nth-child(1){
	font-size:1.1rem;
	letter-spacing:0.05em;
	transform:translatex(-0.5em);
	margin:0 0 0.3em;
}

.head__reservation a div:nth-child(2){
	font-size:0.85rem;
}

header nav .head__logo{
/*	filter:brightness(100);*/

}
@media screen and (max-width: 1200px) {
	header nav .head__logo{
	width:200px;
}

	header nav .head__nav{
		display:none;
	}
}



/* ------------------------------------------------------------
 * Header SP
 * ------------------------------------------------------------ */

.head__container-sp{
	background-color:#fff;
	height:calc(30px + 2.5rem);
	width:100%;
	padding:1.25rem;
	border-radius:0.5rem;
	position:relative;
	box-shadow:3px 3px 6px rgba(0,0,0,0.2);
	transition:all 0.4s ease;
}

.head__container-sp .menu-global-container{
	position:absolute;
	top:80px;
	opacity:0;
	pointer-events:none;
	transition:all 0.15s ease;
	transform:translatey(2rem);
}

body.is-active .head__container-sp .menu-global-container{
	opacity:1;
	pointer-events:auto;
	transition:all 0.6s ease 0.45s;
	transform:translatey(0);
	width:calc(100% - 2.5rem);
	
}


.head__container-sp .menu-sub-container{
	position:absolute;
	bottom:3.25rem;
	opacity:0;
	pointer-events:none;
	transition:all 0.15s ease;
	transform:translatey(2rem);
}

body.is-active .head__container-sp .menu-sub-container{
	opacity:1;
	pointer-events:auto;
	transition:all 0.6s ease 0.45s;
	transform:translatey(0);
	width:calc(100% - 2.5rem);
	
}

.head__container-sp .bogo-language-switcher{
	position:absolute;
	bottom:1.25rem;
	opacity:0;
	pointer-events:none;
	transition:all 0.15s ease;
	transform:translatey(2rem);
}

body.is-active .head__container-sp .bogo-language-switcher{
	opacity:1;
	pointer-events:auto;
	transition:all 0.6s ease 0.45s;
	transform:translatey(0);
	width:calc(100% - 2.5rem);
	
}


header.scrolled .head__container-sp{
	height:45px;
	padding:0.5rem 1.25rem;
}	

body.is-active .head__container-sp{
	height:calc(100dvh - 1.5rem);
}


@media screen and (max-width: 992px) {
	header{
		width:100%;
		height:70px;
		bottom:0;
		margin:0px 0!important;
		padding:0.75rem;
	}


	.head__container {
		flex-direction:row-reverse;
	}

	header nav{
		margin:0;
		transition: width .25s ease 0.6s;
		padding-right:0rem;
		padding-left:0rem;
		width:100%;
		flex:0 1 auto;
		display:flex;
		justify-content:space-between;
		align-items:center;
	}
	header nav .head__drawer{
		position:static;

	}
		header nav .head__drawer:before{
			display:none;
		content:'';
			top:0;
			left:0;
			width:100%;
			height:100%;
			position:fixed;
			background-color:rgba(0,0,0,0);
			z-index:-1;
			transition:all 0.3s ease 0.3s;
	}
	body.is-active header nav .head__drawer:before{
		display:block;
			background-color:rgba(0,0,0,0.3);
	}

	header nav + .head__reservation{
		margin:0 0.6rem 0 0;
		transition:opacity 0.2s ease 1.2s, transform 0.2s ease 1.2s, width 0.3s linear 0.65s, margin 0s ease 0.9s;
		width:50%;
	}

	body.is-active header nav{
		width:100%;
		transition: width .3s ease 0.4s;
	}
	body.is-active  header nav + .head__reservation{
		margin:0;
		opacity:0;
		transform:translatex(-100%);
		width:0;
		transition:opacity 0.2s ease, transform 0.2s ease, width 0.2s ease 0.4s;
	}

	header nav .head__logo{
		width:240px;
		max-width:100%;
		margin-right:0;
		margin-left:0;
		transform:translatex(12px);
	}


header nav + .head__reservation a{
	padding-right:1.25rem;
	padding-left:1.25rem;
	}

header nav + .head__reservation a div:nth-child(1){
	font-size:0.7rem;
	letter-spacing:0.05em;
	transform:translatex(-0.5em);
	margin:0 0 0.3em;
}

header nav + .head__reservation a div:nth-child(2){
	font-size:1rem;
}


	header nav .head__dropdown{
		position:absolute;
		top:auto;
		bottom:1rem;
		right:1%;
		z-index:-1;
		width:98%;
		display:block;
		transform:translatey(1.5rem);
transition:opacity 0.25s ease, transform 0.25s ease;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
		padding-bottom:3rem;
	}

	header nav .head__dropdown.is-active{
		transform:translatey(-1.5rem);
		opacity:1;
		transition:opacity 0.45s ease 0.6s, transform 0.45s ease 0.6s;
		pointer-events:auto;
	}

}

/* ________________________________________
 * Footer
 * ________________________________________ */

footer{
	margin:3rem 0 0 0;
}

.footer__logo{
	width:400px;
	max-width:90vw;
	margin:1rem auto 2.5rem auto;
	filter:brightness(100);
}

body:not(.home) .footer__logo{
	filter:brightness(1);
}

ul.footer__nav--menu{
	margin:0 0 2.25rem;
}

ul.footer__nav--menu li a div:nth-child(1){
	font-size:1.1rem;
	letter-spacing:0.05em;
	margin:0 0 0.3em;
}

ul.footer__nav--menu li a div:nth-child(2){
	font-size:0.85rem;
}

.footer__nav--sns{
	display:flex;
	justify-content:space-evenly;
	margin:0 0 2.5rem;
}

.footer__copyright {
	text-align:center;
	margin:0 0 1rem;
	color:#fff;
}

body:not(.home) .footer__copyright{
	color:#333;
}


/* ________________________________________
 * Main
 * ________________________________________ */

main{
	z-index:0;
	padding:0.75rem;
	position:absolute;
	left:0;
}



@media screen and (max-width: 992px) {
	main{
	width: 100%;
    margin-left: 0;
	padding-top:calc(70px + 1.5rem);
	}

}


/* ________________________________________
 * Page header
 * ________________________________________ */


.page-header{
	margin:0 0 1.75rem;
	border-radius:0.5rem;
}


.page-header{
	position:relative;
}

.page-header img{
	object-fit:cover;
	width:100%;
	height:400px;
	border-radius:0.5rem;
}

@media screen and (max-width: 768px) {
	.page-header img{
		height:240px;
	}
}

.page-header .page-header__inner{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	justify-content:flex-end;
	padding:2.25rem;
}

.page-header .page-header__title{
	margin:auto 0;
	color:#fff;
	font-size:2.75rem;
	font-weight:bold;
	text-shadow:1px 1px 1px rgba(0,0,0,0.4);
}

@media(max-width:768px){
	.page-header .page-header__inner{
	padding:1.0rem;
	}
	.page-header .page-header__title{
		font-size:1.75rem;
	}
}

.breadcrumbs{
	margin-top:auto;
	color:#fff;
}

.breadcrumbs a{
	color:#fff;
}

/* ________________________________________
 * Front Page
 * ________________________________________ */

.section-title-float{
	margin:0 0 1.25em;

}

.section-title-float {
  display: flex;
	flex-wrap:wrap;
  overflow: hidden;
	line-height:1.4;
}

.section-title-float span {
  display: block;
  transform: translate(0, 105%);
	opacity:0;
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.section-title-float.-visible span {
  transform: translate(0, 0);
	opacity:1;
}

.section-title-float span:nth-child(2) {
  transition-delay: 0.06s;
}

.section-title-float span:nth-child(3) {
  transition-delay: 0.12s;
}

.section-title-float span:nth-child(4) {
  transition-delay: 0.18s;
}

.section-title-float span:nth-child(5) {
  transition-delay: 0.24s;
}

.section-title-float span:nth-child(6) {
  transition-delay: 0.30s;
}

.section-title-float span:nth-child(7) {
  transition-delay: 0.36s;
}

.section-title-float span:nth-child(8) {
  transition-delay: 0.42s;
}

.section-title-float span:nth-child(9) {
  transition-delay: 0.48s;
}

.section-title-float span:nth-child(10) {
  transition-delay: 0.54s;
}

.section-title-float span:nth-child(11) {
  transition-delay: 0.6s;
}

.section-title-float span:nth-child(12) {
  transition-delay: 0.66s;
}

.section-title-float span:nth-child(13) {
  transition-delay: 0.72s;
}

.section-title-float span:nth-child(14) {
  transition-delay: 0.78s;
}

.section-title-float span:nth-child(15) {
  transition-delay: 0.84s;
}

.section-title-float span:nth-child(16) {
  transition-delay: 0.90s;
}

.section-title-float span:nth-child(17) {
  transition-delay: 0.96s;
}

.section-title-float span:nth-child(18) {
  transition-delay: 1.02s;
}

.section-title-float span:nth-child(19) {
  transition-delay: 1.08s;
}



section#hero{
	height:calc(100vh - 1.5rem);
	width:100%;
	padding:1.5rem 1.5rem 1.5rem 1.5rem;
	position:relative;
/*	overflow-x:hidden;*/
}

@media(max-width:768px){
	section#hero{
		padding:0rem;
	}
}

section#hero:before{
/*
		background-color:rgba(0,0,0,0.3);
	background-image:url(images/home/hero__bg.jpg);
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-attachment:fixed;
	width:calc(100vw - 300px - 2.5rem);
	height:calc(100vh - 1.5rem);
	opacity:0.75;
	position:absolute;
	content:'';
	top:0;
	left:0;
	z-index:-1;
	border-radius:0.5rem;
*/
}

section#hero video{
/*	object-fit:contain;
	aspect-ratio:720 / 480;*/
}

section#hero .hero__container{
	display:flex;
	flex-direction:column;

	height:100%;
	position:relative;
	width:100%;
	align-items:center;
	justify-content: space-evenly;
/*	transform:translatex(calc(-300px / 2));*/
}

section#hero .hero__container .hero__video{
	max-width:36vw;
	width:600px;
	z-index:-1;
/*
	right:0;
	bottom:0;
	position:absolute;
	opacity:0;
	transition:all 0.8s ease;
	transform:translate(150%, 0);
	*/
/*	left:calc(50% + 300px);*/
	bottom:0;
/*	position:absolute;*/
	opacity:0;
	transition:all 0.8s ease;
	transform:translate(150%, 0);

}


@media(max-width:768px){
	section#hero .hero__container{
		height:auto;
		padding-top:120px;
		padding-bottom:50%;
	}
	section#hero .hero__container .hero__video{
		max-width:100%;
		right:0;
		left:auto;
	transform:translate(-150%, 0);
	}
	body.internal section#hero .hero__container .hero__video,
	body.internal section#hero .hero__container .hero__video.active{
		opacity:1!important;
		transition:none!important;
		transform:translate(0, 0)!important;
	}
}

section#hero .hero__container .hero__video.active{
	opacity:1;
	transform:translate(0, 0);
}

body.internal section#hero .hero__container .hero__video{
	opacity:1;
	transform:translate(0, 0);
}

section#hero .hero__container video{


	
}



section#hero .hero__container .hero__content-wrapper{

	position:relative;

	display:flex;
	align-items:center;
}

section#hero .hero__container .hero__content{


	width:100%;
/*	transform:translate(0, -12vh);*/
	opacity:1;
	transition:all 0.4s ease;
}

section#hero .hero__container .hero__content.active{
	opacity:1;
/*	transform:translate(0, -15vh);*/

}

section#hero .hero__container .hero__content-inner{
/*	background-color:rgba(39,68,160,0.85);*/
	padding:0;
}


.hero__copy{
	display:none;
}

.hero__copy span:nth-child(1){
	width:300px;
}
.hero__copy span:nth-child(2){
	width:70px;
}
.hero__copy span:nth-child(3){
	width:420px;
}

@media(max-width:768px){
	.hero__copy span:nth-child(1){
		width:200px;
	}
	.hero__copy span:nth-child(2){
		width:46.666666666666667px;
	}
	.hero__copy span:nth-child(3){
		width:280px;
	}
	section#hero .hero__container .hero__content-inner{
		padding:0 1rem;
		line-height:1.4!important;
	}
}


body.font--01 #font-01{
	display:flex;
}

body.font--02 #font-02{
	display:flex;
	font-family: "Zen Old Mincho", serif;
	letter-spacing:0.05em;
	font-size:4rem;
	font-weight:100;
}

body.font--03 #font-03{
	display:flex;
	font-family: "Noto Sans JP", sans-serif;
	font-weight:100;
	font-size:4rem;
	letter-spacing:0.1em;
}

body.font--04 #font-04{
	display:flex;
}

body.font--05 #font-05{
	display:flex;
}

body.font--06 #font-06{
	display:flex;
}


#hero .hero__content-wrapper .hero__content h1{
	flex-wrap:wrap;
	justify-content:center;
  overflow: hidden;



	transform:translatey(100%);
	font-feature-settings: "palt";

	 
}
#hero .hero__content-wrapper .hero__content h1.active{
animation: copy-transition 1.0s ease-out forwards 4.0s;
}
@keyframes copy-transition {
  0% {
    transform:translatey(100%);
  }
  100% {
    transform:translatey(0%);
  }
}


#hero .hero__content-wrapper .hero__content h1 span{
 color: #fff;
  mask-image: linear-gradient(174deg, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
 mask-size: 250% 250%;
  mask-repeat: no-repeat;
  mask-position: 130% 130%;

}

@keyframes mask-animation {
  0% {
    mask-position: 130% 130%;
    -webkit-mask-position: 130% 130%;
  }
  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
}

#hero .hero__content-wrapper .hero__content h1.active span:nth-child(1){
	  animation: mask-animation 1.25s linear forwards 0s;
}

#hero .hero__content-wrapper .hero__content h1.active span:nth-child(2){
	  animation: mask-animation 0.7s linear forwards 1.3s;
}

#hero .hero__content-wrapper .hero__content h1.active span:nth-child(3){
	  animation: mask-animation 1.1s linear forwards 2.2s;
	display:block;
}


#hero .hero__content-wrapper .hero__content .sentence {
 color: #fff;
	font-size:1.25rem;
  mask-image: linear-gradient(174deg, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
 mask-size: 250% 250%;
  mask-repeat: no-repeat;
  mask-position: 130% 130%;
	line-height:1.9;
	margin:0 0 1rem;
}

#hero .hero__content-wrapper .hero__content .sentence.active {
	  animation: mask-animation 2.3s linear forwards 1.5s;
}

#hero .hero__content-wrapper .hero__content .sentence span{
  display: block;
  transform: translate(100%, 0);
  transition: transform 2.6s ease;
}

#hero .hero__content-wrapper .hero__content .sentence.active,
#hero .hero__content-wrapper .hero__content .sentence.active span {
  transform: translate(0, 0);
}

body.internal #hero .hero__content-wrapper .hero__content h1.active span,
body.internal #hero .hero__content-wrapper .hero__content .sentence.active,
body.internal #hero .hero__content-wrapper .hero__content .sentence,
body.internal #hero .hero__content-wrapper .hero__content .sentence.active span,
body.internal #hero .hero__content-wrapper .hero__content .sentence span{
	animation:none!important;
	    mask-position: 0 0;
    -webkit-mask-position: 0 0;
	transition:none!important;
	transform: translate(0, 0)!important;
}
body.internal #hero .hero__content-wrapper .hero__content h1.active{
	animation:none;
	transform:translatey(0%);
}

body.internal #hero .hero__content-wrapper .hero__content .sentence span
body.internal #hero .hero__content-wrapper .hero__content .sentence.active span{
	animation:none!important;
	transition:none!important;
	transform: translate(0, 0)!important;
}

section#hero .swiper-topic-wrapper{
	position:absolute;
	top:0;
	left:0;
	display:block;
	z-index:1;
	width:100vw;
	height:200px;
}

body.home section h2{
	font-size:1.75rem;
	font-weight:bold;
	color:#fff;
}

body.home section#product{

	
}


.group__banner{
	margin:0 0 0.5rem;
}

.front__item a{
	height:100%;
}

.front__item a .front__banner{
	overflow:hidden;
}

.front__item a .front__banner img{
	transform:scale(1);
	transition:all 0.3s ease;
}

.front__item a:hover .front__banner img{
	transform:scale(1.05);
}

.front__item a .front__item--container{
	border-radius:0.5rem;
	background-color:#fff;
	height:100%;
	transition:all 0.3s ease;
}

.front__item a:hover .front__item--container{
	color:#fff;
	background-color:#2744a0;;
}



.front__banner,
.front__banner img{
	border-top-right-radius:0.5rem;
	border-top-left-radius:0.5rem;
}

.front__text{
	padding:1.25rem;
	flex:1;
}

.front__item a .front__item--container .front__text h3{
	margin:0 0 0.5rem;
	color:#2744a0;
	transition:all 0.3s ease;
}

@media(max-width:768px){
	.front__item a .front__item--container .front__text h3{
		font-size:1.15rem;
	}
	.front__text{
		padding:0.75rem;
	}
	#hero .hero__content-wrapper .hero__content .sentence {
		line-height:1.6;
	}
}

.front__item a:hover .front__item--container .front__text h3{
	color:#fff;
}


.front__item a .front__item--container .front__text.about_us h3{
	margin:0rem;
}


body.home section#group a{
	color:#fff;
}

/* ________________________________________
 * Single Page
 * ________________________________________ */

.pageheader{
	padding:4.5rem 0;
}

.pageheader .pageheader__title--en{
	text-align:center;
	font-size:1.5rem;
	letter-spacing:0.05em;
	margin:0 0 0.5rem;
}

.pageheader .pageheader__title--jp{
	text-align:center;
	font-size:1.0rem;
}

/* ________________________________________
 * Shop info
 * ________________________________________ */

div.shop{
	position:relative;
}

a.shop__link{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

div.shop .shop__thumb{
	margin:0 0 1rem;
}

div.shop .shop__header{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin:0 0 1rem;
}

div.shop .shop__name{
	font-weight:normal;
	color:#000;
}

div.shop .shop__name .en{
	font-size:1.25rem;
	letter-spacing:0.05em;
}
div.shop .shop__name .divider{
	font-size:1.1rem;
}

div.shop .shop__name .jp{
	font-size:0.85rem;
}

div.shop .shop__tel{
	font-size:1.1rem;
	letter-spacing:0.05em;
	margin:0 0 1rem;
}

div.shop .shop__address--en{
	letter-spacing:0.05em;
	font-size:0.9em;
	margin:0 0 0.5rem;
}

div.shop .shop__address--jp{
	font-size:0.9em;
	margin:0 0 1.5rem
}

div.shop .shop__googlemaps{
	margin-left:auto;
}
div.shop .shop__googlemaps > a{
	position:relative;
	display:flex;
	align-items:center;

}

div.shop .shop__googlemaps > a:before{
	position:absolutel;
	content:'';
	display:inline-block;
	width:20px;
	height:20px;
	background-image:url(images/common/icon-marker.svg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
	left:0;
}

/* ________________________________________
 * Shop info Single page
 * ________________________________________ */

.shop__menu a{
	background-color:rgba(146,24,30,1);
	color:#fff;
	text-align:center;
	display:block;
	border-radius:100vh;
	padding:0.5rem 1rem;
	letter-spacing:0.1em;
}

dl.shop__concept dt {
	text-align:center;
}

dl.shop__concept dt span {
  background:  rgba(255,255,255,1);
  cursor: pointer;
  font-size: 1em;
	letter-spacing:0.1em;
  padding: 0.5rem 3rem;
  position: relative;
	transition:all 0.3s ease;
display:inline-block;
	margin:0 auto;
	border-radius:100vh;
	font-weight:normal;
}


dl.shop__concept dt span:after {
	position: absolute;
	display:inline-block;
	content: '';
	width:11px;
	height:1px;
	background-color:#000;
	top: 50%;
	right: 11px;
	transition:all 0.3s ease;
}



dl.shop__concept dt span:before {
	position: absolute;
	display:inline-block;
	content: '';
	width:11px;
	height:1px;
	background-color:#000;
	top: 50%;
	right: 11px;
	transform:rotate(90deg);
	transform-origin:50% 50%;
	transition:all 0.3s ease;
}



dl.shop__concept dt span.open:after {
	opacity:0;
}

dl.shop__concept dt span.open:before {
	transform:rotate(360deg);
}


dl.shop__concept dt.open:before,
dl.shop__concept dt:hover:before,
dl.shop__concept dt:hover:after{
	background-color:transparent;
}

dl.shop__concept dd {
  display: none;
  padding: 0;
	margin:0;
	position:relative;
}

.shop__concept--en,
.shop__concept--jp{
	line-height:1.6;
}

.detail{
	line-height:1.4;
}

.detail__name{
	margin:0 0 2.25rem;
}

.detail__name--en{
	font-size:2.25rem;
	margin:0 0 0.25rem;
	letter-spacing:0.05em;
}

.detail__name--jp{
	font-size:1rem;
}

.detail__tel{
	font-size:1.1rem;
	margin:0 0 2.25rem;
}

.detail__address{
	margin:0 0 2.25rem;
}


.detail__address--en{
	margin:0 0 0.25rem;
}


.detail__address--jp{

}

.detail__googlemaps{
	margin:0 0 2.25rem;
}

.detail__googlemaps a{
	position:relative;
	display:flex;
	align-items:center;

}

.detail__googlemaps a:before{
	position:absolutel;
	content:'';
	display:inline-block;
	width:20px;
	height:20px;
	background-image:url(images/common/icon-marker.svg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
	left:0;
}

.detail__hours{
	margin:0 0 2.25rem;
	line-height:1.4;
}

.detail__credit{
	margin:0 0 2.25rem;
}

.detail__seat{
	margin:0 0 2.25rem;
}

.detail__seat--en{
	margin:0 0 0.25reml
}

.detail__seat--jp{

}

.detail__map{
	margin:0 0 1.5rem;
}

.detail__access{

}

.detail__access--en{
	margin:0 0 0.75rem;
	line-height:1.4;
}

.detail__access--jp{
	margin:0 0 0.25reml
	line-height:1.3;
}

.googlemap {
    width: 100%;
	height:450px;
    overflow: hidden;
}
.googlemap iframe {
    width: 100%;
    height: 750px;
    margin-top: -150px;
}

/* ________________________________________
 * Home Topics
 * ________________________________________ */

.swiper.topic{
	overflow:visible;
}

.swiper-container{
	position:relative;
	padding-bottom:20px;
	margin-left:-5px;
	margin-right:-5px;
}
.swiper-container.topic .swiper-button-next ,
.swiper-container.topic .swiper-button-prev {
	background-color: #fff;
	color:#fff;
	width:36px;
	height:36px;
	border-radius:100vh;
	padding:5px;
	position:absolute;
	top:auto;
	bottom:-45px;
	right:2rem;
	transition:all 0.3s ease;
	cursor:pointer;
	}

.swiper-container.topic .swiper-button-next:hover ,
.swiper-container.topic .swiper-button-prev:hover{
	background-color: #2744a0;

}

.swiper-container.topic .swiper-button-prev{
	left:auto;
	right:5.5rem;
}

.swiper-container.topic .swiper-button-next:after ,
.swiper-container.topic .swiper-button-prev:after{
		font-size:16px;
	color:#2744a0;
	transition:all 0.3s ease;

	}

.swiper-container.topic .swiper-button-next:hover:after ,
.swiper-container.topic .swiper-button-prev:hover:after{
	color:#fff;
	}

.swiper-container.topic h3{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}



:root {
  --color--main: #0fe4d2;
}
.has-animation {
  position: relative;
	display: inline-block;

}
.has-animation p, .has-animation img, .has-animation > * {
  opacity: 0;
}
.has-animation.animate-in p, .has-animation.animate-in img, .has-animation.animate-in > * {
  animation: textHidden 0.1s 0.7s forwards;
}
.has-animation.animate-in:before, .has-animation.animate-in:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 99999;

}
.has-animation.animate-in:before {
  background-color: #fff;
}
.has-animation.animate-in:after {
  background-color: #2744a0;
  animation-delay: 0.25s;
}
.has-animation.animation-ltr.animate-in:before {
  animation: revealLTR 1.2s ease;
}
.has-animation.animation-ltr.animate-in:after {
  animation: revealLTR 0.7s 0.5s ease;
}
.has-animation.animation-rtl.animate-in:before {
  animation: revealRTL 1.2s ease;
}
.has-animation.animation-rtl.animate-in:after {
  animation: revealRTL 0.4s 0.25s ease;
}

@keyframes revealRTL {
  0% {
    width: 0;
    right: 0;
  }
  65% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@keyframes revealLTR {
  0% {
    width: 0;
    left: 0;
  }
  65% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes textHidden {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.has-animation.fade-up{
	  opacity: 0;
	transform:translatey(1rem);
}

.has-animation.fade-up.animate-in{
  animation: fade-up 1.0s 0.6s ease forwards;
}

@keyframes fade-up {
  0% {
    opacity: 0;
	  transform:translatey(1rem);
  }
  100% {
    opacity: 1;
	  transform:translatey(0);
  }
}

.has-animation.fade-right{
	  opacity: 0;
	transform:translatex(1rem);
}

.has-animation.fade-right.animate-in{
  animation: fade-right 1.0s 0.6s ease forwards;
}

@keyframes fade-right {
  0% {
    opacity: 0;
	  transform:translatex(1rem);
  }
  100% {
    opacity: 1;
	  transform:translatex(0);
  }
}



.section__title--en{
font-family: "Oswald", sans-serif;
	font-size:4rem;
	letter-spacing:0.1rem;
	font-weight:400;
	margin-bottom:0.25rem;
	text-transform:uppercase;
}

@media(max-width:768px){
	.section__title--en{
		font-size:2.25rem;
	}
}

.section__title--jp{
	font-size:1rem;
}



/* 
 * 
 */


#plan01{
	display:block;
}

#plan02{
	display:none;
}



#plan03{
	display:none;
}

#plan04{
	display:none;
}


body.plan--02 #plan02{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;

	transition:
}
body.plan--02 #plan02 #canvas-plan02{
	position:absolute;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	opacity:0;
}


body.plan--02 #plan02.active{
	opacity:1;
}

#plan02 svg{
	width:100vw;
	height:100vh;
}

body.internal #plan02,
body.internal #plan02 #canvas-plan02{
	display: block!important;
	opacity:1!important;
}



body.plan--01 #plan01{	
	display:block;
	position:fixed;
	background: cover;
  background: linear-gradient(145deg, #192839 50%, #1ab4e2 115%);
  width: auto;
  height: auto;
	margin: 0;
  padding: 0;
  z-index: -2;
}




body.plan--03 #plan03 {
	display:block;
}


body.plan--03 #plan03.animation-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #181828;
}


body.plan--03 #plan03.animation-wrapper canvas {
  width: 100%;
  height: 100%;
}


body.plan--03 #plan03.animation-wrapper .image {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  transition: opacity 2s;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover !important;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  opacity: 0;
}


body.plan--03 #plan03 #animation-canvas {
  position: fixed;
  z-index: 3;
}


body.plan--03 #plan03 #animation-space-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 2s;
}


body.plan--03 #plan03.animation-wrapper.active #animation-space-canvas {
  opacity: 1;
}


body.plan--03 #plan03.animation-wrapper.active .image {
  opacity: 1;
}





/*

body.plan--03 #plan03{
	display:flex;
}

body.plan--04 #plan04{
	display:block;
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
 background-color:#00a9ff;
}

#plan04 #animation-canvas{
	position:absolute;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
}

*/

body #plan02{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
}
body #plan02 #canvas-plan02{
	position:absolute;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	opacity:0;
	transition:all 0.6s ease;
}

body #plan02.active #canvas-plan02{
	opacity:1;
}

canvas#glscreen {
	display:none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}

body.plan--01 canvas#glscreen{
	display:block;
}


body:not(.plan--01) #container{
	display:none;
}


body.plan--01 #container {
display:block;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  width: 100vw;
  height: 100vh;
  cursor: none;
  z-index: -999;
}



/* ------------------------------------------------------------
 * 固定ページ共通
 * ------------------------------------------------------------ */

body.page-template-default:not(.home) main section{
	margin:0 0 4.5rem;
}

body.page-template-default:not(.home) main section > div{
/*	background-color:#fff;*/
/*	margin:0 0 0.75rem;
	border-radius:0.5rem;
	padding:1.5rem;*/
}


body.page-template-default main section h2{	
	margin:0 0 1.25rem;
}





/* ------------------------------------------------------------
 * 会社概要
 * ------------------------------------------------------------ */
/*
section > .has-animation{
	background-color:#fff;

	padding:1.5rem;
}
*/

dl.company {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
/*border-left: 1px solid #eee;
border-right: 1px solid #eee;*/
}

dl.company dt {
flex-basis: 12em;
padding: 0.8em 1.2em;
background-color: #fff;
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

dl.company dd {
flex-basis: calc(100% - 12em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,1);
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

@media(max-width:768px){
	dl.company dt {
	flex-basis: 6em;
	padding: 0.8em 0.5em;
	}
	dl.company dd {
	flex-basis: calc(100% - 6em);
	padding: 0.8em 0.5em;
	}
}

dl.company dt:first-of-type,
dl.company dd:first-of-type{
border-top: 1px solid #eee;
}

table.company{
	border:0;
}

table.company th,
table.company td{
	padding:0.4rem 0;
	font-weight:normal;
}

table.company th{
	padding-right:1rem;
}



ul.client{
	margin:0;
	padding:0;
}

ul.client li{
	margin:0 0 1.5rem;
	position:relative;
	padding:0 0 0 1.75rem;
}
ul.client li:before{
	font-family:'Material Symbols Outlined';
	content:'\f591';
	font-size:24px;
	font-weight:300;
	left:0;
	transform:translatey(-1px);
	position:absolute;
	line-height:1.2;
}

ul.client li ul{
	margin:0 0 0 -1.75rem;
	padding:0;
}

ul.client li ul li{
	margin:0 0 0.25rem;
	padding:0 0 0 1.75rem;
}

ul.client li ul li:last-child{
	margin:0 0 2rem;
}


@media(max-width:768px){
	ul.client li{
		margin:0 0 .5rem;
	}

	ul.client li ul li{
		margin:0 0 0.25rem;
	}

	ul.client li ul li:last-child{
		margin:0 0 0.5rem;
	}

}

ul.fade-animation li{
display:block;
opacity: 0;
transform:translatey(1rem);

}

ul.fade-animation li.animate-in{
opacity: 1;
transform:translatey(0);
	transition:all 1.2s ease 1s;
}


dl.fade-animation dt,
dl.fade-animation dd{
display:block;
opacity: 0;
transform:translatey(1rem);

}

dl.fade-animation dt.animate-in,
dl.fade-animation dd.animate-in{
opacity: 1;
transform:translatey(0);
	transition:all 1.2s ease 1s;
}


section#company_message{
	position:relative;
}

section#company_message .bg__company_message{
	background-color:#2744a0;
	content:'';
	position:absolute;
	width:75%;
	height:100%;
transform:translate(0rem, 0rem) scalex(0);
	transform-origin:0% 0%;
}

section#company_message.animate-in .bg__company_message{
transform:translate(0rem, 0rem) scalex(1);
transition:all 1.6s ease 1.6s;
}

@media(max-width:768px){
	section#company_message .bg__company_message{
		width:100%;
		transform:translate(0rem, 0rem) scalex(0);
	}
	
	section#company_message.animate-in .bg__company_message{
		transform:translate(0rem, 0rem) scalex(1);
	}
}

.has-animation.message{
	  opacity: 0;
	transform:translatey(1rem);
}

.has-animation.message.animate-in{
  animation: message 1.2s 2s ease forwards;
}


@keyframes message {
  0% {
    opacity: 0;
	  transform:translatey(1rem);
  }
  100% {
    opacity: 1;
	  color:#fff;
	  transform:translatey(0);
  }
}

img.signature{
	filter: brightness(1);
}


.has-animation.img-brightness{
display:block;
opacity: 0;
filter: blur(100px);

}

.has-animation.img-brightness.animate-in{
opacity: 1;
filter: blur(0);
	transition:all 1.2s ease 2.4s;
}

.has-animation.brightness{
display:block;
opacity: 0;
filter: blur(100px);

}
.has-animation.brightness.animate-in{
opacity: 1;
filter: blur(0);
	transition:all 1.2s ease 1s;
}


.swiper.loop .swiper-wrapper {
  transition-timing-function: linear;
}

.swiper.loop .swiper-slide img {
  height: auto;
  width: 100%;
}



/* ------------------------------------------------------------
 * 免許・資格
 * ------------------------------------------------------------ */

table.license{
	border:0px;
	border-collapse:collapse;
	width:100%;
}

table.license tr{

}

table.license th,
table.license td{
	padding:0.5rem;
	background-color:#fff;
	border-bottom:3px solid #f5f5f5;
/*	border:1px solid #ddd;*/
}

table.license tr:first-child th{
	text-align:center;
/*	background-color:#f5f5f5;*/
}

table.license td{
	text-align:right;
}



dl.license {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

dl.license dt {
flex-basis: 16em;
padding: 0.8em 1.2em;
background-color: #fff;
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

dl.license dd {
flex-basis: calc(100% - 16em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,1);
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

/*
dl.license dt {
flex-basis: 16em;
padding: 0.8em 1.2em;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
margin:0;
}

dl.license dd {
flex-basis: calc(100% - 16em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,0.7);
border-bottom: 1px solid #eee;
margin:0;
}
*/


@media(max-width:768px){
	dl.license{
		display:block;
	}
	dl.license dt,
	dl.license dd{
		width:100%;
	}
	dl.license dt{
		margin:0!important;
		border-bottom:0px;
		padding-bottom:0.25rem;
	}
	dl.license dd{
		border-top:0px;
		padding-top:0.25rem;
	}
}


.swiper-loop-container{
display:block;
opacity: 0;
transform:translatey(1rem);

}


.swiper-loop-container.animate-in{
opacity: 1;
transform:translatey(0);
	transition:all 1.2s ease 1s;
}


/* ------------------------------------------------------------
 * 所在地
 * ------------------------------------------------------------ */
.access__item{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	position:relative;
}

.access__image{
	position:absolute;
	top:0;
	right:0;
	z-index:0;
}
.access__image img{
	border-radius:100vh;
	width:24rem;

}


@media screen and (max-width: 768px) {
	.access__item{
		min-height:calc(100vw + 5rem);
	}
}


dl.access {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
font-size:0.85rem;
z-index:1;
}

dl.access dt {
flex-basis: 10em;
padding: 0.8em 1.2em;
background-color: #fff;
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

dl.access dd {
flex-basis: calc(100% - 10em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,1);
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

dl.access dt:first-of-type,
dl.access dd:first-of-type{
border-top: 1px solid #eee;
}


@media screen and (max-width: 1200px) {
	dl.access dt,
	dl.access dd{
		padding: 0.4em 0.8em;
	}
	dl.access dt {
	flex-basis: 6em;
	}
	dl.access dd {
	flex-basis: calc(100% - 6em);
	}
}



/* ------------------------------------------------------------
 * 沿革・組織図
 * ------------------------------------------------------------ */

dl.history {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
}

dl.history dt {
flex-basis:7em;
padding: 0.8em 1.2em;
background-color: #fff;

margin:0 0 2px;
}

dl.history dd {
flex-basis: calc(100% - 7em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,1);

margin:0 0 2px;
}




/* ------------------------------------------------------------
 * 台湾
 * ------------------------------------------------------------ */

dl.taiwan {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

dl.taiwan dt {
flex-basis: 10em;
padding: 0.8em 1.2em;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
margin:0;
}

dl.taiwan dd {
flex-basis: calc(100% - 10em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,0.7);
border-bottom: 1px solid #eee;
margin:0;
}

dl.taiwan dt:first-of-type,
dl.taiwan dd:first-of-type{
border-top: 1px solid #eee;
}

/* ------------------------------------------------------------
 * CM
 * ------------------------------------------------------------ */
body.page-template-default main section.cm > div{
	margin:0 0 0rem;

}



.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


/* ------------------------------------------------------------
 * SDGS
 * ------------------------------------------------------------ */

dl.sdgs {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
/*border-left: 1px solid #eee;
border-right: 1px solid #eee;*/
}

dl.sdgs dt {
flex-basis: 8em;
padding: 0.8em 1.2em;
background-color: #fff;
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

dl.sdgs dd {
flex-basis: calc(100% - 8em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,1);
border-bottom: 1px solid #eee;
margin:0 0 2px;
}

dl.sdgs dt:first-of-type,
dl.sdgs dd:first-of-type{
border-top: 1px solid #eee;
}

/* ------------------------------------------------------------
 * Product - common
 * ------------------------------------------------------------ */

table.product{
	border-collapse:collapse;
	border:1px solid #ddd;
	width:100%;
}

table.product th,
table.product td{
	border:1px solid #ddd;
	padding:0.15rem;
	vertical-align:middle;
	text-align:center;
	font-size:0.8rem
}

table.product th{
	background-color:#bbb;
	text-align:center;
	vertical-align:middle;
	color:#fff
}

table.product tr:nth-child(odd) td{
	background-color:#fff;
}

table.product tr:nth-child(even) td{
	background-color:#f5f5f5;
}



.product__inquiry-container{
	width:100%;
	padding:2.25rem;
	background-color:rgba(255,255,255,0.85);
	border:1px solid #eee;
	border-radius:0.5rem;
	text-align:center;
}

.product__inquiry-container .product__inquiry-company{
	margin:0 0 0.75rem;
}

.product__inquiry-container .product__inquiry-phone a{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 0 0.75rem;
}

.product__inquiry-container .product__inquiry-phone a img{
	width:40px;
	height:40px;
	margin:0 0.5rem 0 0;
	display:block;

}
.product__inquiry-container .product__inquiry-phone a span{
	font-size:2.75rem;
    font-family: "Oswald", sans-serif;
	color:#2744a0;
	line-height:1;
	height:2.75rem;
	display:inline-block;
}

.product__inquiry-container .product__inquiry-time{
	margin:0 0 1.25rem;
}

.product__inquiry-container .product__inquiry-button a{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 0 0.75rem;
	background-color:#2744a0;
	border:1px solid #2744a0;
	color:#fff;
	padding:0.75rem;
	font-size:1.5rem;
	border-radius:0.25rem;
	transition:all 0.3s ease;
}



.product__inquiry-container .product__inquiry-button a img{
	width:28px;
	height:22px;
	margin:0 0.5rem 0 0;
	display:block;

}
.product__inquiry-container .product__inquiry-button a span{

}

.product__inquiry-container .product__inquiry-button a:hover{
	background-color:rgba(39,68,160,0.75);
}

/* ------------------------------------------------------------
 * Solution - common
 * ------------------------------------------------------------ */


.solution__image{
	margin:0 0 0.5rem;
}

.solution__caption{
	text-align:center;
}


/* ------------------------------------------------------------
 * Solution - Spotfire
 * ------------------------------------------------------------ */

#spotfire__nav > div > a{
	display:block;
	border:1px solid #ccc;
	padding:0.75rem;
	text-align:center;
	background-color:#fff;
	transition:all 0.3s ease;
	font-size:1.25rem;
	font-weight:bold;
	position:relative;
		position:relative;
	display:flex;
	align-items:start;
	justify-content:flex-end;
}

#spotfire__nav > div > a:hover{
	color:#2744a0;
	border-bottom:1px solid #2744a0;
}
#spotfire__nav > div > a span{
	margin-right:auto;
	margin-left:auto;
}

#spotfire__nav > div > a:after{
	position:absolute;
	right:1rem;
	content:'\e7cd';
	font-family:'Material Symbols Outlined';
	color:#2744a0;
	transform-origin:50% 50%;
	transition:all 0.3s ease;
}

#spotfire__nav > div > a:hover:after{
	transform:scale(1.5);
}


dl.spotfire-system {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

dl.spotfire-system dt {
flex-basis: 10em;
padding: 0.8em 1.2em;
background-color: #fff;
border-bottom: 1px solid #eee;
margin:0;
}

dl.spotfire-system dd {
flex-basis: calc(100% - 10em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,1);
border-bottom: 1px solid #eee;
margin:0;
}

dl.spotfire-system dt:first-of-type,
dl.spotfire-system dd:first-of-type{
border-top: 1px solid #eee;
}

@media screen and (max-width: 559px) {
dl.spotfire-system dt:first-of-type,
dl.spotfire-system dd:first-of-type{
border-top: 0px;
}

dl.spotfire-system {
flex-flow: column;
display:block;
}
	dl.spotfire-system dt{
		border:0px;
		padding-bottom:0.25rem;
	}
	dl.spotfire-system dd{

		padding-top:0.25rem;
	}
}

.spotfire-case__item a{
display:block;
	height:100%;
	padding:1rem;
	background-color:#fff;
	transition:all 0.3s ease;
	position:relative;
}

.spotfire-case__item a:hover{
	box-shadow:0px 0px 8px rgba(0,0,0,0.15);
}
.spotfire-case__item .thumbnail{
	margin:0 0 1rem;
}


.spotfire-case__item .title{
	font-size:1.25rem;
}

.spotfire-case__item .badge{
	position:absolute;
	top:0.5rem;
	left:0.5rem;
	background-color:#2744a0;
	color:#fff;
	border-radius:100vh;
	width:3rem;
	height:3rem;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1;
}

/* ------------------------------------------------------------
 * Solution - Telecom
 * ------------------------------------------------------------ */
#telecom__nav > div > a{
	display:block;
	border:1px solid #ccc;
	padding:0.75rem;
	text-align:center;
	background-color:#fff;
	transition:all 0.3s ease;
	font-size:1.25rem;
	font-weight:bold;
	position:relative;
		position:relative;
	display:flex;
	align-items:start;
	justify-content:flex-end;
}

#telecom__nav > div > a:hover{
	color:#2744a0;
	border-bottom:1px solid #2744a0;
}
#telecom__nav > div > a span{
	margin-right:auto;
	margin-left:auto;
}

#telecom__nav > div > a:after{
	position:absolute;
	right:1rem;
	content:'\e7cd';
	font-family:'Material Symbols Outlined';
	color:#2744a0;
	transform-origin:50% 50%;
	transition:all 0.3s ease;
}

#telecom__nav > div > a:hover:after{
	transform:scale(1.5);
}

.telecom-electorical__item{
	height:100%;
	padding:0.75rem;
	background-color:#2744a0;
	border-radius:0.25rem;
	color:#fff;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}

@media(max-width:768px){
	.telecom-electorical__item{
		padding:0.5rem;
	}
}


/* ------------------------------------------------------------
 * Solution - Infrastructure
 * ------------------------------------------------------------ */

table.infrastructure{
	width:100%;
	border:1px solid #ddd;
	border-collapse:collapse;
}

table.infrastructure td,
table.infrastructure th{
	border:1px solid #ddd;
	padding:0.5rem;
}

table.infrastructure th{
	text-align:center;
	background-color:rgba(39, 68, 160, 0.75);
	color:#fff;
}

table.infrastructure td{
	text-align:center;
}

table.infrastructure tr:nth-child(even) td{
	background-color:#f5f5f5;
}

table.infrastructure tr:nth-child(odd) td{
	background-color:#fff;
}




/* ------------------------------------------------------------
 * Contact
 * ------------------------------------------------------------ */
table.inquiry th,table.inquiry td {
   padding:0.5rem!important;
}

/* Contact Form7スマホ・タブレット用カスタマイズ */
@media(max-width:768px){
/* テーブルの見出しとフォーム */
table.inquiry th,table.inquiry td {
   display:block;
   padding:1em 1em!important;
   width:100%;
   border:0;
}

/* 送信ボタン */
input.wpcf7-submit{
   margin-bottom:30px;
   width:100%;
}
}

/* 日付タグ上のテキストをPCとスマホで変更 */
@media(max-width:900px){
.pcdate{
   display: none;
}
}
@media(min-width:1000px){
.spdate{
   display: none;
}
/* 日付タグの幅を調整 */
.wpcf7-date.dateform{
   width: 25%;
}
}

/* Contact Form7全体カスタマイズ */

/* 自動入力されるPタグを無効にする */
.inquiry p {
   display: inline;
}

/*テーブル下に余白.枠線・テキストの行間 */
table.inquiry {
   margin-bottom: 30px;
   border:solid 1px #d7d7d7;
   line-height:1.2;
   vertical-align:middle;
	width:100%;
}

/* テーブルの行 */
.inquiry tr {
   border:0!important;
}

/* テーブルの見出し側 */
.inquiry th{
   text-align:left;
   font-size:14px;
   color:#444;
   padding:1em 0.5em;
   width:0;
   background:#efefef;
   border:solid 1px #d7d7d7;
   white-space: nowrap;
   vertical-align: middle;
}

/* 必須と任意タグ */
.haveto,.any{
   font-size:13px;
   padding:5px;
   background:#ff9393;
   color:#fff;
   border-radius:2px;
   margin-right:5px;
   font-weight:normal;
}

/* 任意タグの背景カラー */
.any{
   background:#999;
}

/* テーブルフォーム側 */
.inquiry td{
   font-size:13px;
   border:solid 1px #d7d7d7;	
}

/* 入力エリア幅最大 */
.wpcf7-form-control {
   width: 100%;
}

/* フォーム入力欄の余白・背景カラー・枠線消す指定 */
.inquiry input,.inquiry select,.inquiry textarea {
   background:#eff1f5;
   border: none;
   padding:0.7em;
}
.inquiry textarea {
   padding-bottom:10em;
}

/* チェックボックスとラジオボタンの位置調整 */
.wpcf7-list-item-label,.wpcf7-checkbox,input[type=checkbox],input[type=radio]{
   vertical-align:middle;
}
.wpcf7-list-item-label{
   padding:0 5px 0 2px;
}
/*ラジオボタンを縦並び指定*/
.verticallist{
   display:inline-grid;
}

/* 送信ボタンのデザイン */
.wpcf7-submit{
   display: block;
   margin:10px auto;
   padding:0.75rem 2rem;
   background:#09b555;
	text-align:center;
   color:#fff;
   font-size:18px;
   font-weight:bold;	 
   border-radius:4px;
   border: none;
	width:auto;
}

/* 送信ボタンマウスホバー時 */
.wpcf7-submit:hover{
   opacity: 0.9;
   transition: 0.3s;
}

/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
    display: none;
}

/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
    color: #e92323;
}


/* ------------------------------------------------------------
 * tech-heater
 * ------------------------------------------------------------ */



.swiper.tech-heater .swiper-button-next ,
.swiper.tech-heater .swiper-button-prev {
	background-color: #2744a0;
	color:#fff;
	width:36px;
	height:36px;
	border-radius:100vh;
	padding:5px;
	position:absolute;
	transition:all 0.3s ease;
	cursor:pointer;
	}

.swiper.tech-heater .swiper-button-next:hover ,
.swiper.tech-heater .swiper-button-prev:hover{
	background-color: #fff;
	color:#2744a0;

}

.swiper.tech-heater .swiper-button-prev{

}

.swiper.tech-heater .swiper-button-next:after ,
.swiper.tech-heater .swiper-button-prev:after{
		font-size:16px;
	color:#fff;
	transition:all 0.3s ease;

	}

.swiper.tech-heater .swiper-button-next:hover:after ,
.swiper.tech-heater .swiper-button-prev:hover:after{
	color:#2744a0;
}

.swiper-pagination .swiper-pagination-bullet-active  {
        background-color: #2744a0;
	}

.swiper.panel-heater .swiper-slide{
	position:relative;
}

.swiper.panel-heater .swiper-slide .swiper-caption{
	position:absolute;
	top:0;
	left:0;
	font-size:0.85rem;
	 background-color: #2744a0;
	color:#fff;
	padding:0.25rem 1rem;
}

.tech-heater__item{
	background-color:#fff;
	padding:0.75rem;
	height:100%;
}

.tech-heater__item .thumbnail{
	margin:0 0 0.75rem;
}

.tech-heater__item h4{
	color:#2744a0;
	font-size:1.15rem;
	margin:0 0 0.25rem;
}

.tech-heater__item .description{
	font-size:0.85rem;
}
/* ------------------------------------------------------------
 * Sitemap
 * ------------------------------------------------------------ */

ul.sitemap ul{
	margin-left:2rem;
}

ul.sitemap > li {
	margin-bottom:1rem;
}