/*
 Theme Name:   electronicos
 Description:  Twenty Fifteen Child Theme
 Author:
 Template:     twentyseventeen
*/
/*
Theme Name: nicos
Author: t
Version: 1.0
*/
/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
/*
Theme Name: nicos
Author: t
Version: 1.0
*/
/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap');
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html body {
  overflow-y: hidden;
  word-break: break-all;
  min-width: 320px;
}

/* IE6 */
*:first-child+html body {
  overflow-y: auto;
}

/* IE7 */
html {
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

body {
  background: #ffffff;
  /* background-color: transparent; */
  color: #000000;
  font-size: .875rem;
  position: relative;
  -webkit-text-size-adjust: 100%;
  word-spacing: normal !important;
  line-height: 2;
  font-family:urw-din,  'Noto Sans JP', 'Noto Sans SC', sans-serif;
  font-variant: normal;
  font-weight: 300;
  z-index: 1;
  word-break:break-word;
}
::-moz-selection {
    background: #333333;
	  color:#ffffff;
}
::selection {
    background: #333333;
	color:#ffffff;
}
p {
  margin: 0 0 0;
  font-size: .875rem;
  line-height: 1.8;
  letter-spacing:- 0.05ex;
  color: #000000;
  font-family: urw-din,  'Noto Sans JP', 'Noto Sans SC', sans-serif;
  font-weight:400;
  word-break:break-all;
}

ol li, ul li {
  font-size: .85rem;
}

p span {
  font-size: .85rem;
  line-height: 1.8;
}

p:first-child {
  /* margin-top: 0px; */
}

a:link {
  text-decoration: none;
  color: #000000;
}

a:visited {
  text-decoration: none;
  color: #000000;
}

a:hover {
  text-decoration: none;
  color: #000000;
  opacity: 1;
}

a:active {
  text-decoration: none;
  color: #000000;
}

p a:link {
  text-decoration: underline;
  color: #000000;
}

p a:visited {
  text-decoration: none;
  color: #000000;
}

p a:hover {
  text-decoration: none;
  color: #000000;
}

p a:active {
  text-decoration: none;
  color: #000000;
}

a:hover {
  opacity: 0.6;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.pc-only {
  display: block;
  opacity: 1;
}

.smp-only {
  display: none;
  opacity: 0;
}

.wrapper {
  position: relative;
  overflow: auto;
  margin: 0 auto;
}

main {
  position: relative;
}
main.en{
	font-family:  urw-din,sans-serif!important;
}
main.en p{
font-family: urw-din,'Noto Sans SC',sans-serif!important;
    font-variant: normal;
    word-break:break-word;
	letter-spacing: -0.05ex;
    font-size: 0.875rem;
    line-height: 2;
    text-align: initial;
	font-weight: 400;
}
section {
  margin-bottom: 8rem;
}

.section {
  margin-bottom: 3rem;
}

#page404 p {
  font-size: 1.5rem;
  margin-bottom: 0;
  text-align: center;
  margin-top: 87px;
}

.en {
    font-family: urw-din,sans-serif!important;
    letter-spacing: 0;
}
p.en{
    font-size: .95rem;
	font-family: urw-din,sans-serif!important;
}
.font-jp {
  font-family:   urw-din,  'Noto Sans JP', 'Noto Sans SC', sans-serif;
  font-size: .85rem;
}

#loading {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

#loading_barWrap {
  height: calc(1rem + 5px);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#loading_bar {
  width: 0;
  height: 2px;
  background: #ff0000;
  transition-duration: 1s;
}

.loading_text {
  text-align: center;
  color: #000000;
  letter-spacing: 0.02rem;
  font-size: 1rem;
}

.loadingNone {
  animation: loadingAnime 1s forwards;
  z-index: 0;
  visibility: hidden;
}

@keyframes loadingAnime {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}
.grecaptcha-badge { visibility: hidden; }
/*--------------------------------------
 * top_header
 * ---------------------------------------*/
.front_header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  background: #ffffff;
  height: 80px;
  width: 100%;
}

.front_header_container {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 1.25rem;
}

.front_header_container .logo_h {
  display: flex;
  z-index: 12;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}
.front_header_container .logo_h a{
  width: 100%;
  line-height: 0;
  padding-top: 0.5rem;
}
.front_header_container .logo_h img {
  transition: .2s;
  max-width: 440px;
}

.front_header_container .logo_h img.smp {
  display: none;
}

.front_header_container .newsletter_bnr {
  justify-content: center;
  align-items: center;
  width: 170px;
  transition: .2s;
}
.front_header_container .newsletter_bnr a {
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: #000000;
  padding: 5px 10px;
	font-weight:400;

}
.front_header_container .newsletter_bnr a:hover {
  display: flex;
  font-size: 2rem;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: #cc0005;
  box-sizing: border-box;
  opacity:1;
}

.front_header_container .newsletter_bnr p {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    letter-spacing: -0.02ex;
    font-family: urw-din, 'Noto Sans JP', 'Noto Sans SC', sans-serif;
}
.front_header_container .newsletter_bnr p i.far.fa-envelope {
    font-size: 1rem;
    vertical-align: middle;
}
.front_header_container .newsletter_bnr p span {
    color: #ffffff;
    font-size: 0.75rem;
    display: block;
}
.front_header_container .newsletter_bnr a:hover p,
.front_header_container .newsletter_bnr a:hover p span{
  color: #FFFFFF!important;
	font-weight: 600;
}
.front_header_container .dropdown{
	position:relative;
	width: 120px;
	height: auto;
	display:flex;
}
.front_header_container .dropdown .menu{
	width: 120px;
}
.front_header_container .dropdown .sub_menu{
	position: relative;
	background: #efefef;
	display:none;
	text-align: center;
	width: auto;
	margin: 0 auto;
}
.front_header_container .dropdown .lang-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.sub-menu > .bogo-language-switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 170px;
}
.front_header_container .dropdown .sub-menu .bogo-language-switcher {
  text-decoration: none;
  color: #AAAAAA!important;
}
.front_header_container .dropdown .lang-icon{
	font-size: 1.5rem;
}
.front_header_container .dropdown .lang-icon::after {
    display: inline-block;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.24rem solid;
    border-right: .25rem solid transparent;
    border-bottom: 0;
    border-left: .25rem solid transparent;
    position: absolute;
    bottom: 19px;
}
.front_header_container .dropdown  .bogo-language-switcher li{
width: 50%;
    height: 100%;
}
.front_header_container .dropdown  .bogo-language-switcher span{
	display:block;
	cursor:pointer;
	color:#000000;
	font-size: 0.75rem;
}
.front_header_container .dropdown  .bogo-language-switcher span a{
	color:inherit;
	display: block;
}
.front_header_container .dropdown  .bogo-language-switcher span:hover{
	background:#000000;
	color:#FFFFFF;
	opacity:1;
}
.front_header_container .dropdown  .bogo-language-switcher .current span:hover{
	position:relative;
	background:#AAAAAA;
	color:#ffffff;
	cursor:normal;
}
.front_header_container .dropdown  .bogo-language-switcher a:hover{
	opacity:1;
}
.front_header_container .dropdown  .bogo-language-switcher .current{
	position:relative;
	background:#AAAAAA;
	color:#ffffff;
}

.bogo-language-switcher {
    display: flex;
    flex-wrap: wrap;
    
	width:100%;
}
.bogo-language-switcher .ja {
  order: 1;
}
.bogo-language-switcher .en {
  order: 2;
}
.bogo-language-switcher .es {
  order: 3;
}
.bogo-language-switcher .zh {
  order: 5;
}
.bogo-language-switcher .ko {
  order: 4;
}
.front_header_container .dropdown.is-active .sub_menu{
	display:block;
}

.front_header .pc-main_menu{
    background: #FFFFFF;
    width: 100%;
    line-height: 1;
    padding-bottom: 0.5rem;
    display: flex;
}
.front_header .pc-main_menu .menu-globalmenu-container .menu{

}
.front_header .pc-main_menu li{
    margin-right: 1rem;
    display: inline-block;
	  position:relative;
}
.front_header .pc-main_menu li:last-of-type{
    margin-right: 0;
}
.front_header .pc-main_menu .link-menu{
  margin-left: 1rem;
}
.front_header .pc-main_menu li a:after{
  content: '';
  width: 0;
  transition: all 0.3s ease;
  display: block;
  top: 7px;
  height: 2px;
  background: none;
  position: absolute;
}
.front_header .pc-main_menu li a:hover:after{
  opacity: 1!important;
  width: 100%;
  background: #cc0005;
}
/*--------------------------------------
 * header
 * ---------------------------------------*/
#header{
	display:none;
}
.header {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
  height: 80px;
  width: 70px;
  /* background: #cc0005; */
  transition: 0.2s;
}

.header:before {
  content: "";
  width: 0px;
  height: 100%;
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  background-color: #eee;
  transition: 0s cubic-bezier(.39, .575, .565, 1);
  transition-delay: .2s;
}

/*--------------------------------------
 * globalMenu
 * ---------------------------------------*/
nav.globalMenu {
  position: fixed;
  top: 0;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  right: 67px;
  width: 40vw;
  padding-right: 67px;
  z-index: 10;
  font-family: urw-din, sans-serif;
}

nav.globalMenu:before {
  right: 0;
}

nav.globalMenu:before {
  height: 100%;
  width: 0;
  background: #000000;
  position: absolute;
  top: 0;
  content: "";
  z-index: 0;
  transition: .25s cubic-bezier(.165, .84, .44, 1);
}

nav.globalMenu .globalMenu_container {
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 1;
  position: relative;
  opacity: 0;
  height: 100%;
  padding: 0 15px;
  align-items: center;
}

nav.globalMenu .globalMenu_container .globalMenu_content {
  padding-top: 2rem;
}

nav.globalMenu .globalMenu_container .globalMenu_main {
  letter-spacing: -0.02ex;
  font-size: 1.5rem;
}

nav.globalMenu a {
  text-decoration: none;
  color: #FFFFFF;
  transition: 0.2s;
  box-sizing: border-box;
  display: inline-block;
}
nav.globalMenu span{
	color:#AAAAAA;
	display: block;
}
nav.globalMenu .menu-globalmenu-container a:after,
nav.globalMenu div.lang a:after,
nav.globalMenu .globalMenu_container .globalMenu_main ul li a:after{
  content: '';
  width: 0;
  transition: all 0.3s ease;
  display: block;
  top: 13px;
  height: 2px;
  background: none;
  position: absolute;
}

nav.globalMenu .globalMenu_container .globalMenu_main .menu-globalmenu-container a:hover:after,
nav.globalMenu .globalMenu_container .globalMenu_main ul.menu li a:hover:after,
nav.globalMenu .globalMenu_container .globalMenu_main ul.link-menu li a:hover:after,
nav.globalMenu .globalMenu_container .globalMenu_main .lang ul li a:hover:after{
  opacity: 1!important;
  width: 100%;
  background: #cc0005;
}

nav.globalMenu .globalMenu_container .globalMenu_main ul li {
  list-style-type: none;
}

nav.globalMenu .globalMenu_container .globalMenu_main .menu-globalmenu-container li a {
  margin-bottom: 10px;
  opacity: 1;
}
nav.globalMenu .globalMenu_container .link-menu{
	margin-top:1rem;
	margin-bottom:1rem;
}
nav.globalMenu .globalMenu_container .link-menu li a{
	margin-bottom: 10px;
  opacity: 1;
}
nav.globalMenu .globalMenu_container .globalMenu_main a {
  position: relative;
}

nav.globalMenu .globalMenu_container .globalMenu_main .bogo-language-switcher li {
  font-size: .85rem;
  line-height: 1.8;
  padding-right: 20px;
  position: relative;
}

nav.globalMenu .globalMenu_container div.lang .bogo-language-switcher li:after{
  content: "/";
  position: relative;
  color: #ffffff;
  display:block;
  width: auto;
  position: absolute;
  top: 0;
  right: 8px;
}
nav.globalMenu .globalMenu_container div.lang .bogo-language-switcher li:last-child:after{
  display:none;
}
nav.globalMenu .globalMenu_container div.lang .bogo-language-switcher li a:hover{
	opacity:1;
}
nav.globalMenu .globalMenu_container div.sns {
  text-align: center;
  margin-top: 20px;
}
nav.globalMenu .globalMenu_container div.sns li.btn-tumblr {
  background: url(../images/common/icon_tumblr.svg) no-repeat center center;
  background-size: 1.7rem;
  position:relative;
}
nav.globalMenu .globalMenu_container span.attention_balloon_text{
	color:#ffffff;
	font-size:0.75rem;
}
nav.globalMenu .globalMenu_container .attention_balloon {
    top: -20px;
    left: -22px;
}
nav.globalMenu .globalMenu_container .attention_balloon_item:hover .attention_balloon {
    top: -25px;
}
nav.globalMenu .globalMenu_container .attention_balloon .attention_balloon_text:after {
    left: 33px;
}
nav.globalMenu .globalMenu_container div.sns li {
  font-size: 1.2rem;
  padding-right: 10px;
  display: inline-block;
}

nav.globalMenu .globalMenu_container div.sns li:nth-child(6) {
  padding-left: 20px;
}

nav.globalMenu .globalMenu_container div.lang {
  margin: 20px auto 0;
}

nav.globalMenu .globalMenu_container div.lang li {
  display: inline-block;
  margin: 0;
}
nav.globalMenu .globalMenu_container div.lang .sub-menu li a {
  opacity: 1;
  text-decoration: underline;
}
nav.globalMenu .globalMenu_container div.lang li .current {
    text-decoration: line-through;
	 color:#AAAAAA;
}

.trigger {
  width: 70px;
  bottom: 0;
  left: 0;
  position: absolute;
  cursor: pointer;
  transition: 0.2s;
  display: block;
}

.trigger_box {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 20px auto;
}

.trigger_inner i:before {
  background-color: #000000;
  content: "";
  display: block;
  height: 1px;
}

.trigger_inner i {
  position: relative;
  bottom: 0;
  left: 0;
  display: block;
  transition: .6s cubic-bezier(.19, 1, .22, 1);
}

.trigger_inner i:first-child {
  top: 7px;
  animation: equalizer01 7000ms infinite;
}

.trigger_inner i:nth-child(2) {
  top: 15px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}

.trigger_inner i:nth-child(3) {
  top: 22px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}

.trigger_inner i:nth-child(4) {
  top: 29px;
  animation: equalizer02 5000ms infinite;
}

.show-menu nav.globalMenu {
  right: 0;
  z-index: 13;
}

.show-menu nav.globalMenu .globalMenu_container {
  opacity: 1;
  transition: 1.8s cubic-bezier(.165, .84, .44, 1) .3s;
}

.show-menu nav.globalMenu {
  visibility: visible;
  pointer-events: auto;
}

.show-menu nav.globalMenu:before {
  width: 100%;
}

.show-menu .trigger_inner {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transition: .8s cubic-bezier(.19, 1, .22, 1);
}

.show-menu .trigger_inner i:first-child {
  top: 0px;
  left: -16px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.show-menu .trigger_inner i:nth-child(2) {
  opacity: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.show-menu .trigger_inner i:nth-child(3) {
  opacity: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.show-menu .trigger_inner i:nth-child(4) {
  top: -2px;
  left: -16px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.content-overlay {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, .2);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s ease-in-out .25s, opacity .25s ease-in-out 0s;
}

.show-menu .content-overlay {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s ease-in-out 0s, opacity .25s ease-in-out 0s;
}


/*===============================================
contents
===============================================*/
main {
  position: relative;
  right: 0;
  transition: right .25s ease-in-out;
}

.sec-header {
  display: block;
  margin-bottom: 2.5rem;
}
.sec-header h2.heading span.font-jp {
  font-size: 2rem;
  display: block;
  margin-bottom: 2rem;
  position: relative;
  font-weight: 400;
  text-align:center;
}
.sec-header h2.heading span.en {
  font-size: 2rem;
  display: block;
  letter-spacing: -1px;
  position: relative;
  font-weight: 400;
  text-align:center;
}

/*.line.sec-header h2.heading span.en {
    padding-bottom: 0.75rem;
}
.line.sec-header h2.heading span:before {
    content: '';
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
	background-size: 10vw!important;
    left: 0;
}*/

#news .line.sec-header h2.heading span:before {
    background: url(../images/common/news_bg.png) no-repeat;
    background-position: center center;
}
#about .line.sec-header h2.heading span:before {
    background: url(../images/common/about_bg.png) no-repeat;
    background-position: center center;
}
#labs .line.sec-header h2.heading span:before {
    background: url(../images/common/labs_bg.png) no-repeat;
    background-position: center center;
}
#works .line.sec-header h2.heading span:before {
    background: url(../images/common/works_bg.png) no-repeat;
    background-position: center center;
}
#creations .line.sec-header h2.heading span:before {
    background: url(../images/common/creations_bg.png) no-repeat;
    background-position: center center;
}
#mailnews .line.sec-header h2.heading span:before {
    background: url(../images/common/newsletter_bg.png) no-repeat;
    background-position: center center;
}
#contact .line.sec-header h2.heading span:before {
    background: url(../images/common/contact_bg.png) no-repeat;
    background-position: center center;
}

/*.sec-header h2.heading span.en:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  display: inline-block;
  width: 40px;
  height: 3px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: linear-gradient(to right, #ffec5d, #ffec5d, #519cca, #79cb53, #f4569d, #ed0026);
}*/

.sec-header.txt-only {
  padding-top: 6rem;
}

.image-crossfader {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: 0px;
  background-color: #000000;
}

.image-crossfader-inner {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1s cubic-bezier(0.255, 0.03, 0.515, 0.955), transform 1s cubic-bezier(0.255, 0.03, 0.515, 0.955);
}

.image-crossfader-inner.is-visible {
  z-index: 1;
  opacity: 1;
  transform: scale(1.00);
}

.main_visual .bg_visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
}

.main_visual_content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.main_cover_large .cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-position: center top;
  background-size: cover;
}

.main_cover_large .main_cover_content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.main_cover_normal_h .cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  background-position: center top;
  background-size: cover;
}

.main_cover_normal_h .main_cover_content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.main_cover_normal{
  position: relative;
}
.main_cover_normal .cover-img {
  width: 100%;
  height: 60vh;
  background-position: center center;
  background-size: cover;
}
#about_labs.main_cover_normal .cover-img {
  width: 100%;
  height: 60vh;
  background-position: top center;
  background-size: cover;
}

.main_cover_normal_l .main_cover_content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
}
.main_cover_normal .caption {
    position: absolute;
    right: 5px;
	 font-family:  urw-din, sans-serif;
}


#sns {
  position: relative;
	
}

#sns ul{
	display: none;
  z-index: 100;
}
#sns ul li a {
    display: block;
    width: 40px;
    height: 35px;
    overflow: hidden;
    color: #ffffff;
    font-size: 1.1rem;
    text-align: center;
    background: #000000;
}

#sns ul li:last-child a{
	background: url(../images/common/icon_tumblr.svg)  #000000 no-repeat center center;
  background-size: 1.7rem;
 padding-bottom:5px;
}
	

#sns a:hover {
  opacity: 0.7;
}
.attention_balloon_item:hover .attention_balloon  {
    opacity: 1;
    visibility: visible;
    top: -36px;
}
.attention_balloon {
    z-index: 0;
    position: absolute;
    transform: translateY(-50%);
    min-width: auto;
    letter-spacing: -.02em;
    transition: all .3s ease-out;
    transition-property: opacity,visibility,top;
    opacity: 0;
    visibility: hidden;
    top: -30px;
    left: -27px;
}
.attention_balloon_text {
    z-index: 1001;
    position: relative;
    vertical-align: middle;
    background: #cc0005;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    box-shadow: 0 3px 8px rgb(12 0 0 / 10%);
    -webkit-box-shadow: 0 3px 8px rgb(12 0 0 / 10%);
    -moz-box-shadow: 0 3px 8px rgba(12,0,0,.1);
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.attention_balloon_text:after {
    position: absolute;
    bottom: -6px;
    display: block;
    content: '';
    margin: 0;
    margin-top: -6px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 10px solid #cc0005;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    left: 40px;
}
#sns ul li.attention_balloon_item{
	position:relative;
}
#sns ul li.attention_balloon_item:hover .attention_balloon  {
    opacity: 1;
    visibility: visible;
    left: -107px;
}
#sns ul li .attention_balloon {
    z-index: 0;
    position: absolute;
    transform: translateY(-50%);
    min-width: auto;
    letter-spacing: -.02em;
    transition: all .3s ease-out;
    transition-property: opacity,visibility,left;
    opacity: 0;
    visibility: hidden;
    top: 10px;
    left: -90px;
}
#sns ul li .attention_balloon_text {
    z-index: 1001;
    position: relative;
    vertical-align: middle;
    background: #cc0005;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    box-shadow: 0 3px 8px rgb(12 0 0 / 10%);
    -webkit-box-shadow: 0 3px 8px rgb(12 0 0 / 10%);
    -moz-box-shadow: 0 3px 8px rgba(12,0,0,.1);
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
#sns ul li .attention_balloon_text:after {
    position: absolute;
    display: block;
    content: '';
    margin-bottom: 16px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    left: 93px;
    border-left: 10px solid #cc0005;
}
/*===============================================
grid
===============================================*/
.container {
  padding-right: 4rem;
  padding-left: 4rem;
  box-sizing: content-box;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width:900px) {
  .container {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

.inner-1040 {
  max-width: 1040px;
  margin: 0 auto;
}

.inner-960 {
  max-width: 960px;
  margin: 0 auto;
}
.inner-700 {
  max-width: 700px;
  margin: 0 auto;
}
.gridbox3 {
  display: -ms-grid;
  display: grid;
  margin-top: 2rem;
  gap: 3rem;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  transition: .2s;
}

@media (min-width:48em) {
  .gridbox3 {
    gap: 3%;
    transform: .2s;
  }
}

.gridbox3 a {
  display: block;
}
.gridbox3 .thum {
  margin-bottom: 1.5rem;
  padding-top: 75%;
  background-repeat: no-repeat;
  background-position: center top !important;
  background-size: cover !important;
  background: #fafafa;
	position:relative;
}

.works_gridbox {
  display: -ms-grid;
  display: grid;
  margin-top: 2rem;
  gap: 0rem;
  transition: .2s;
  margin-bottom: 2rem;
}

@media (min-width:24em) {
  .works_gridbox {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    transform: .2s;
  }
}
.works_gridbox li {
    height: 250px;
    transition: .2s;
}
.works_gridbox a {
    display: block;
    z-index: 0;
    background: #FFF;
    /* box-shadow: 0 0 0 1px #e2e9ed; */
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
    position: relative;
    width: 100%;
    height: 100%;
}
.works_gridbox .thum{
  background-repeat: no-repeat !important;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.works_gridbox .thum.off {
  background-size: 330px !important;
  background-position: top 30% center !important;
  background-color: #FFFFFF;
}
.works_gridbox .thum.on {
    background-size: cover !important;
    background-position: top 30% center !important;
	position:relative;
}
.works_gridbox .thum.on:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}
.works_gridbox .thum.off {
  visibility: visible;
  opacity: 1;
  transition: .2s;
}
.works_gridbox a:hover{
  opacity: 1;
  background:#000000;
}
.works_gridbox a:hover .thum.off {
  visibility: hidden;
  opacity: 0;
}
.works_gridbox .thum.on {
  opacity:0;
  transition: .5s;
}
.works_gridbox a:hover .thum.on {
  opacity: 1;
  transition: .5s;
}
.works_gridbox a:hover .thum.on:before {
  content: "";
  z-index: 1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transition: .5s;
}
.works_gridbox .inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    z-index: 12;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.works_gridbox h3.heading {
  display: block;
  font-weight: 400;
	padding: 0 1.5rem;
}

.works_gridbox h3.heading .text-title-l {
  font-size: 1.1rem;
  letter-spacing: -0.2px;
  margin: 0 auto 0.25rem;
  display: block;
	line-height: 1.2!important;
}

.works_gridbox h3.heading .text-title-s {
  color: #AAAAAA;
  font-size: .75rem;
  font-weight: normal;
  line-height: 1.2!important;
}
.works_gridbox a:hover .text-title-l,
.works_gridbox a:hover .text-title-s {
    color: #FFFFFF;
    transition: .5s;
}
.gridbox3-2 {
  display: -ms-grid;
  display: grid;
  margin-top: 2rem;
  gap: 2rem;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  transition: .5s;
}

.gridbox3-2 .inner {
  margin-bottom: 1rem;
}

.gridbox3-2 .thum {
  margin-bottom: 2rem;
  padding-top: 67%;
  background-repeat: no-repeat;
  background-position: center top !important;
  background-size: cover !important;
  transition: .2s;
}
.gridbox3-2 .inner {
  margin-bottom: 1rem;
}

.gridbox2 {
  display: -ms-grid;
  display: grid;
}

@media (min-width:24em) {
  .gridbox2 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width:48em) {
  .gridbox2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 3rem;
  }
}

.gridbox2 .thum {
  padding-top: 70%;
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: cover !important;
  background: #000;
}
.gridbox2 .inner-box {
  align-items: center;
  justify-content: center;
  position: relative;
  display: flex;
  padding: 2rem;
}

.youtube_gridbox {
  display: -ms-grid;
  display: grid;
}
@media (min-width:24em) {
  .youtube_gridbox {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width:48em) {
  .youtube_gridbox {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 3rem;
    background: #1D2B38;
  }
}

.youtube_gridbox .thum {
  /*padding-top: 50%;*/
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: cover !important;
  background: #000000;
  position: relative;
}
.youtube_gridbox .thum a:before {
  content: "";
  z-index: 1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  transition: .2s;
}
.youtube_gridbox .thum a:hover::before {
  background: rgba(0, 0, 0, 0.05);
}
.youtube_gridbox .cont{
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px;
  z-index: 10;
  width: 100%;
}
.youtube_gridbox .cont p{
  color: #ffffff;
  font-family: urw-din, sans-serif;
  letter-spacing: -0.3px;
}
.youtube_gridbox .cont .youtube_caption{
  margin: 0;
}
.youtube_gridbox .youtube_ttl{
  font-weight: 400;
  font-size: .9rem;
  margin: 0;
}
#labs .inner {
    background: #1D2B38;
}
#labs .labs_maps{
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
#labs .labs_maps .thum{
  display: flex;
  justify-content: center;
}
#labs .labs_maps .thum a{
	position:relative;
}
#labs .labs_maps .thum div{
  width: 25%;
	margin: 0.5rem;
}
#labs .labs_maps .labs_name{
	color:#ffffff;
	letter-spacing: -0.2px;
	text-align:center;
}
.gridbox1 .works_top_thum{
  position: relative;
}
.gridbox1 .works_top_thum a:before{
content: "";
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: .2s;
}
.gridbox1 .works_top_thum a{
	display:block;
	transition:.7s;
}
.gridbox1 .works_top_thum a:hover{
	opacity:1;
}
.gridbox1 .works_top_thum a:hover:before{
    background: rgba(0, 0, 0, 0.0);
}
.gridbox1 .works_top_thum .on_caption{
  position: absolute;
  top:10px;
  left:10px;
  color: #ffffff;
  z-index: 10;
  letter-spacing: -0.45px;
  line-height:1.6;
}
.gridbox1 .thum {
  padding-top: 35%;
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: cover !important;
  background: #1D2B38;
}

.gridbox1 .text-title-s {
    color: #AAAAAA;
    font-size: .85rem;
    font-family: urw-din, 'Noto Sans JP','Noto Sans SC', sans-serif!important;
}

.text-box {
  margin-bottom: 1rem;
  font-size: 0.75rem;
}

.text-title {
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.text-title_b {
  font-size: 1rem;
  line-height: 1.2;
  /* margin-bottom: 1.25rem; */
  font-weight: 400;
}

.text-title-l {
  font-size: 1.7rem;
  /*margin-right: 1rem;*/
  line-height: 1.6;
  display: inline-block;
  word-break: break-word;
}

.works_gridbox h3.heading .text-title-l {
  margin-right: 0;
  letter-spacing: -0.8px;
}
.text-remarks {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
	font-size:.75rem;
}
.text-remarks p {
	font-size:.75rem;
	line-height:1.9!important;
}
.panel-date{
margin-top: 15px;
}
.date {
  text-align: right;
  color: #AAAAAA;
	font-weight:400;
  font-size: .85rem;
  font-family: urw-din,  sans-serif;
	letter-spacing:-0.2px;
}

.btn-a-wrap, .btn-c-wrap{
  text-align: center;
}

.btn-a-wrap a {
  display: inline-block;
  padding: 15px 15px;
  background: #000000;
  color: #FFFFFF !important;
  font-size: 1rem;
	margin:3rem auto 0;
  width: 350px;
  text-align: center;
  border: 1px solid #000000;
  letter-spacing: 0.02ex;
  cursor: pointer;
}

.btn-c-wrap a {
  display: inline-block;
  padding: 10px 10px;
  background: #000000;
  color: #FFFFFF !important;
  margin: 1rem auto 0;
  width: 80%;
  text-align: center;
  border: 1px solid #000000;
  letter-spacing: 0.2ex;
  cursor: pointer;
  line-height: 1.8;
}
.btn-a-wrap a:hover,
.btn-c-wrap a:hover{
  text-decoration: none;
  color: #000000!important;
  background: none !important;
  opacity: 1;
  /*background: linear-gradient(to right, #ffec5d, #ffec5d, #519cca, #79cb53, #f4569d, #ed0026 );*/
}

.btn-a-wrap a:active,
.btn-c-wrap a:active {
  text-decoration: none;
  color: #000000 !important;
  background-color: #ffffff;
}

.btn-b-wrap {
  text-align: center;
}

.btn-b-wrap a {
  display: inline-block;
  padding: 15px 15px;
  background: #000000;
  color: #FFFFFF !important;
  font-size: 1rem;
  margin: 2rem auto 0;
  width: 350px;
  text-align: center;
  border: 1px solid #ffffff;
  letter-spacing: 0.02ex;
  cursor: pointer;
}

.btn-b-wrap a:hover {
  text-decoration: none;
  color: #000000!important;
  background: #ffffff !important;
  opacity: 1;
  /*background: linear-gradient(to right, #ffec5d, #ffec5d, #519cca, #79cb53, #f4569d, #ed0026 );*/
}

.btn-b-wrap a:active {
  text-decoration: none;
  color: #000000 !important;
  background-color: #ffffff;
}

.flexbox {
  display: flex;
  margin-bottom: 3rem;
}

.flexbox:last-child {
  margin-bottom: 0;
}

.flexbox .img {
  width: 65%;
  margin-right: 2rem;
}

.flexbox .img .caption {
  font-size: .75rem;
  display: block;
  text-align: right;
  margin-top: 5px;
	font-family:urw-din, sans-serif;
	letter-spacing:0;
}
.flexbox .list{
	width:100%;
}
.flexbox .cover_thum .caption {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.flexbox .list .list_ttl {
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    font-weight: 400;
    border-bottom: 1px solid #aaaaaa;
    padding-bottom: 0.5rem;
    font-family: urw-din, sans-serif;
}

.flexbox .list .list_cont {
  line-height: 1.4;
}
.flexbox .list .list_cont a{
	text-decoration:underline;
}

.bg_BK {
  background: #000000;
  color: #ffffff;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}
.bg_BK p{
	color:#ffffff;
}
.bg_GR {
  background: #efefef;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/*===============================================
item（231225追加）
===============================================*/
#item .ttl {
    font-size: 1.5rem;
    font-weight: 400;
    border: #000000 2px solid;
    text-align: center;
    margin-bottom: 2rem;
}
#item .flexbox{
   margin-bottom:6rem;
}
#item .flexbox .list .ttl {
    font-size: 1.8rem;
    font-weight: 400;
    border: #000000 2px solid;
    text-align: center;
    margin: 6rem 0 3rem;
}
#item .flexbox .list .list_ttl{
    font-size:1.5rem;
}
#item .flexbox .list .list_cont {
  line-height: 1.8;
  letter-spacing: 0;
}
#item .flexbox .img{
  width:65%;
}
#item .flexbox .btn-c-wrap{
  text-align:left;
}
/*===============================================
works(top)
===============================================*/
#works .gridbox1 h3.heading {
    font-weight: 400;
    padding: 1rem 0;
	text-align:left;
	font-family: urw-din, sans-serif;
}

/*===============================================
labs
===============================================*/
#labs .inner-box{
	padding-left:1rem;
	padding-right:1rem;
}
/*===============================================
mailnews
===============================================*/
#mailnews .inner-bg-img {
  margin: 0 auto 30px;
  max-width: 500px;
}

#mailnews .text p {
  color: #ffffff !important;
}

#mailnews .inner-bg-img img {
  border-radius: 50% !important;
}

/*===============================================
post
===============================================*/
/* fields */
.section_fields_common {
  margin: 0px auto 30px;
}

.post_body .thum_w_container {
  position: relative;
  margin-bottom:2rem;
}

.post_body .thum_w {
  padding-top: 45%;
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: cover !important;
  background: #000;
}

.post_body .thum_n_container {
  position: relative;
  margin-bottom:2rem;
}

.post_body .thum_n {
  padding-top: 45%;
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: cover !important;
  background: #000;
}

.post_body .thum_w_container .caption,
.post_body .thum_n_container .caption {
  color: #000000;;
  text-align: right;
  display: block;
	padding-right: 5px;
	font-family:  urw-din, sans-serif;
	line-height:1.4;
}
.post_body .inner-1040 .caption{
	display:block;
	text-align:right;
	line-height: 1.4;
   margin-top: 10px;
   font-size: 90%;
}
.post_body .news_title {
    margin: 3rem 0 2rem;
}
.post_body .works_name:first-of-type {
    margin-top: 1.5rem;
}
.post_body .works_name .text-title-l {
  font-size: 2.2rem;
  letter-spacing: -1px;
  line-height: 1.2;
  padding: 0 !important;
  display:block;
	/*font-weight:400;*/
	word-break: break-word;
}

.post_body .works_name .text-title-s {
  letter-spacing: -0.02ex;
  color: #AAAAAA;
  font-size: .85rem;
}

.post_body .text {
  margin: 10px 0;
}

.post_body .text-title-s {
  letter-spacing: -0.02ex;
  color: #AAAAAA;
  font-size: .85rem;
}


.post_body .ttl-h2 {
  font-size: 1.2rem;
  line-height: 150%;
  font-weight: 400;
  margin-bottom:1.5rem
}

.post_body .ttl-h3 {
  font-size: 0.95rem;
  line-height: 150%;
  font-weight: 400;
	margin-bottom:1.75rem
}

.post_body .textbox {
  margin-bottom: 3rem;
  line-height:2;
}
.post_body .textbox p {
    line-height: 2;
    font-size: .95rem
}
.post_body .lnk{
	margin-top:1rem;
}
.post_body .img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

.post_body .img.w60 {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

.post_body .img-two {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.post_body .img-two div {
  width: 48%;
}

.post_body .img .caption,
.post_body .img-two div .caption {
 display:block;
font-size:0.65rem;
	text-align:right;
}
.post_body .youtube_player {
  margin-bottom: 3rem;
}
.youtube_player{
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
	z-index:12;
}
.youtube_player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*
.post_body .youtube_player {
  margin-bottom: 3rem;
  position: relative;
	z-index: 10;
}

.post_body .youtube_player iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
*/
.post_footer .free-box {
  margin-top: 3rem;
  background: #efefef;
}
.post_footer .free-box a{
	text-decoration:underline;
}
.post_footer .free-box .in {
  padding: 2rem 1.5rem;
}

.post_footer .ttl-main {
  font-size: 1.2rem;
  margin-bottom: 1.75rem;
  line-height: 150%;
  font-weight: 400;
  word-break:break-word;
}

/*.post_footer .lnk {
  margin-top: 25px;
}*/

.post_footer .lnk  a {
    position: relative;
    font-weight: 400;
    text-decoration: underline;
    color: #cc0005;
}

/*.post_footer .free-box .in .lnk p a:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left: 7px solid #cc0005;
  left: 0px;
}*/

.post_footer .lnk p {
  margin: 0;
}

/*===============================================
creations
===============================================*/
#creations .sec-header {
	  margin-top: 8rem!important;
	  margin-bottom: 1rem!important;
}
#creations .line.sec-header {
	  margin-bottom: 3rem!important;
}
/*===============================================
contact form
===============================================*/
.must{
	color: #fff;
	margin-left: 10px;
	padding: 6px 10px;
	background: #000000;
}

form p {
	font-weight: 400;
	margin-bottom:1rem;
}

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

input.wpcf7-submit {
	width: 60%;
	height: 60px;
	color:#FFFFFF;
	background: #000000;
	color: #fff;
	font-size: 1rem;
}
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}
/*===============================================
contact
===============================================*/
#contact ul{
	margin-top: 1rem;
}
#contact li{
	margin-bottom: 3rem;
}
#contact li:last-child{
	margin-bottom: 5rem;
}
#contact p{
	line-height:1.6!important
}
#contact .question{
  position: relative;
  margin: 0;
  padding-right: 30px;
  font-size: 1em;
  cursor: pointer;
  margin-bottom: 2rem;
  transition: .1s;
  position: relative;
  padding-left: 30px;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #cccccc;
  transition-delay: 1s;
}
#contact .question:hover{
    opacity: 0.7;
}
#contact .question:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #000;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  deg);
  transform: rotate(135deg);
}
#contact .question:before {
  position: absolute;
  top: 12px;
  left: 0px;
  content: 'Q';
  font-size: 1.5rem;
  font-family: urw-din,sans-serif;
  width: 100%;
  height: 100%;
  font-weight: 400;
  color: #333333;
  line-height: 0;
}
#contact .question.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}
#contact .answer a{
	text-decoration:underline;
}
#contact .ttl{
	font-size:1.2rem;
	margin-bottom:2rem;
	font-weight:400;
}
/*===============================================
footer
===============================================*/
/* start-footer */
.page_nav {
  margin-top: 75px;
  font-size: 1rem;
  padding-top: 0px;
  position: relative;
  text-align: center;
  font-weight: 500;
  text-decoration: underline;
  font-family:  urw-din, sans-serif;
}

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

.page_nav .next {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 15px;
}

.page_nav-single .prev {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 15px;
}

.page_nav-single .next {
  position: absolute;
  right: 0;
  top: 0;
}

.page_nav a:link, .page_nav a:visited {}

.page_nav a:hover {}

#reservation .contents {
  margin-top: 24px;
}

.sns_f {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
}

.sns_f li {
	position:relative;
  display: inline-block;
  padding: 0 0px;
  text-align: center;
  margin: 0.5rem;
  font-size: 1.5rem;
}

.sns_f li a {
  display: block;
  color: #ffffff;
	width: 100%;
   height: 100%;
}

.sns_f li.btn-tumblr {
  background: url(../images/common/icon_tumblr.svg) no-repeat center top 0px;
  background-size: 2rem;
  width: 33px;
  height: 32px;
  vertical-align: bottom;
}

.footer {
  height: auto;
  width: auto;
  background: #000000;
}

.footer .inner {
  text-align: center;
  padding: 2rem 0 2rem;
  width: 100%;
}

.attention_balloon_item:hover .attention_balloon  {
    opacity: 1;
    visibility: visible;
    top: -36px;
}
.attention_balloon {
    z-index: 0;
    position: absolute;
    transform: translateY(-50%);
    min-width: auto;
    letter-spacing: -.02em;
    transition: all .3s ease-out;
    transition-property: opacity,visibility,top;
    opacity: 0;
    visibility: hidden;
    top: -30px;
    left: -27px;
}
.attention_balloon_text {
    z-index: 1001;
    position: relative;
    vertical-align: middle;
    background: #cc0005;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    box-shadow: 0 3px 8px rgb(12 0 0 / 10%);
    -webkit-box-shadow: 0 3px 8px rgb(12 0 0 / 10%);
    -moz-box-shadow: 0 3px 8px rgba(12,0,0,.1);
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2;
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.attention_balloon_text:after {
    position: absolute;
    bottom: -6px;
    display: block;
    content: '';
    margin: 0;
    margin-top: -6px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 10px solid #cc0005;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    left: 40px;
}
small.copyright {
  font-size: .75rem;
  line-height: 1.5;
  display: block;
  margin: 20px 0 0px;
  color: #FFFFFF;
  letter-spacing: 0.05ex;
}

.slider_prev, .slider_next {
  top: 0;
  overflow: hidden;
  position: absolute;
  z-index: 100;
  cursor: pointer;
}

.slider_prev {
  background: #fff url(images/prev.jpg) no-repeat right center;
}

.slider_next {
  background: #fff url(images/next.jpg) no-repeat left center;
}

.pagination {
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 15px;
  text-align: center;
  position: absolute;
  z-index: 200;
}

.pagination a {
  margin: 0 5px;
  width: 15px;
  height: 15px;
  display: inline-block;
  overflow: hidden;
  background: #333;
}

.pagination a.active {
  filter: alpha(opacity=100) !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important;
}
/*===============================================
404 Not Found
===============================================*/
.vm-wrapper {
    max-width: 960px;
    margin: 15rem auto;
}
p.notfound.last {
    text-align: center;
}
/*===============================================
tyousei
===============================================*/
.red{
	color:#ff0000;
}
.fs-075{
	font-size:.75rem;
}
.fs-16 {
  font-size: 16px;
  font-size: 1.6rem;
}

.lh-10 {
  line-height: 1;
}
.lh-12 {
  line-height: 1.2;
}
.lh-15 {
  line-height: 1.5;
}

.lh-20 {
  line-height: 2;
}

.lh-25 {
  line-height: 2.5;
}

.pt100 {
  padding-top: 100%;
}
.pt1 {
  padding-top: :1rem;
}
.pt2 {
  padding-top:  2rem;
}
.pt3 {
  padding-top: 3rem;
}
.pt10 {
  padding-top: 10px;
}

.pt20 {
  padding-top: 20px;
}

.pt30 {
  padding-top: 30px;
}

.pt40 {
  padding-top: 40px;
}
.pb1 {
  padding-bottom: :1rem;
}
.pb2 {
  padding-bottom:  2rem;
}
.pb10 {
  padding-bottom: :10px;
}

.pb20 {
  padding-bottom: :20px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb40 {
  padding-bottom: 40px;
}

.mt0 {
  margin-top: 0!important;
}
.mt1{
	margin-top:1rem;
}
.mt175{
	margin-top:1.75rem;
}
.mt2{
	margin-top:2rem;
}
.mt3{
	margin-top:3rem;
}
.mt4{
	margin-top:4rem;
}
.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mb0 {
  margin-bottom: 0px;
}
.mb1{
	margin-bottom:1rem!important;
}
.mb175{
	margin-bottom:1.75rem;
}
.mb2{
	margin-bottom:2rem;
}
.mb3{
	margin-bottom:3rem;
}
.mb4{
	margin-bottom:4rem;
}
.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.ta_l {
  text-align: left!important;
}

.ta_r {
  text-align: right!important;
}

.ta_c {
  text-align: center!important;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}