@charset "utf-8";
/*
Theme Name: hariocafe
*/

/*
font-family: 'Hind Siliguri', sans-serif;
font-family: 'Dancing Script', cursive;
font-family: 'Sawarabi Gothic', sans-serif;
*/

html {
font-family: 'Sawarabi Gothic', sans-serif;
}



header {
position: relative;
padding-left: 80px;
padding-right: 80px;
z-index: 11;
}
#headerwrapper {
width: 100%;
height: 120px;
background-color: #fff;
display: table;
}
#headerwrapper>div {
display: table-cell;
vertical-align: middle;
}
#headerwrapper>div h1 ,
#headerwrapper>div h1 a ,
#headerwrapper>div h1 a img {
display: inline-block;
vertical-align: bottom;
}
#headerwrapper>div h1 a img {
width: 160px;
height: 18px;
}
#headerwrapper>div+div {
text-align: right;
vertical-align: top;
}
#headerwrapper>div+div ul {
font-size: 0;
margin-right: -1px;
}
#headerwrapper>div+div li {
display: inline-block;
margin: 0 7px;
padding-top: 53px;
}
#headerwrapper>div+div li:last-child {
background-color: #305775;
padding-bottom: 8px;
padding-left: 6px;
padding-right: 6px;
margin: 0 1px;
}
#headerwrapper>div+div li a {
text-decoration: none;
}
#headerwrapper>div+div li a span {
font-family: 'Hind Siliguri', sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 500;
color: #000;
padding: 10px 5px;
}
#headerwrapper>div+div li:last-child a span {
color: #fff;
}
@media screen and (max-width:960px) {
#headerwrapper>div+div {
display: none;
}
}
@media screen and (max-width:768px) {
header {
left: 0;
top:0;
padding-left: 20px;
padding-right: 0;
position: fixed;
background-color: transparent;
width: 100%;
box-sizing: border-box;
z-index: 99998;
}
#headerwrapper {
height: 60px;
}
}

#btn_gnav {
position: fixed;
z-index: 99999;
right: 0;
top:0;
}



#fixed .top ,
#fixed .left,
#fixed .right {
position: fixed;
top:0;
z-index: 10;
background-color: #fff;
}
#fixed .top {
left: 0;
right: 0;
height: 40px;
}
#fixed .left {
  left: 0;
  width: 80px;
  bottom:0;
}
#fixed .left .lefttxt {
  position: absolute;
  display: table;
  top: 50%;
  left: -80px;
  margin-top: -40px;
  width: 240px;
  height: 80px;
  text-align: center;
  transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
#fixed .left .lefttxt p {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.sh{
  display: inline-block;
  margin: 0 5px;
}
span.lang-s {
  text-decoration: none;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  color: black;
}
a.lang-a {
  text-decoration: none;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  color: gray;
}
#fixed .right {
right: 0;
width: 80px;
bottom:0;
}
#fixed .right .righttxt {
position: absolute;
display: table;
top: 50%;
left: -80px;
margin-top: -40px;
width: 240px;
height: 80px;
text-align: center;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#fixed .right .righttxt p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#fixed .right .righttxt p a {
font-family: 'Hind Siliguri', sans-serif;
font-size: 15px;
letter-spacing: 1px;
line-height: 1;
color: #000;
}
#fixed .right .righttxt p a i {
font-size: 18px;
display: block;
margin-bottom: -2px;
}
#fixed .right .righttxt p:last-child a {
text-decoration: none;
}
#fixed .right .righttxt p:nth-child(2) a.smOs {
display: none;
}

@media screen and (max-width:768px) {
#fixed .top {
height: 60px;
}
#fixed .left {
  top:auto;
  right: 0;
  width: 100%;
  bottom:0;
  height: 46px;
  z-index: 20;
  z-index: 99999999999;
}
#fixed .left .lefttxt {
  position: static;
  table-layout: fixed;
  margin-top: 0;
  width: 100%;
  height: 46px;
  text-align: center;
  transform: rotate(0);
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
}
#fixed .left .lefttxt p span {

  text-decoration: none;
  display: block;
  height: 46px;
  line-height: 46px;
}
#fixed .left .lefttxt p a {
  color: gray;
  text-decoration: none;
  display: block;
  height: 46px;
  line-height: 46px;
}
#fixed .right {
top:auto;
right: 0;
width: 100%;
bottom:0;
height: 46px;
z-index: 20;
z-index: 99999999999;
}
#fixed .right .righttxt {
position: static;
table-layout: fixed;
margin-top: 0;
width: 100%;
height: 46px;
text-align: center;
transform: rotate(0);
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
}
#fixed .right .righttxt p a {
text-decoration: none;
display: block;
height: 46px;
line-height: 46px;
}
#fixed .right .righttxt p a:nth-child(1) a {
line-height: 42px;
padding-top: 4px;
}
#fixed .right .righttxt p:nth-child(2) a.smTel {
display: none;
}
#fixed .right .righttxt p:nth-child(2) a.smOs {
line-height: 42px;
padding-top: 4px;
display: block;
}
#fixed .right .righttxt p a i {
font-size: 20px;
display: inline-block;
line-height: 46px;
}
#fixed .right .righttxt p:nth-child(2) {
position: relative;
}
#fixed .right .righttxt p:nth-child(2)::before {
position: absolute;
content: "";
width: 1px;
height: 36px;
left: 0;
top:5px;
background-color: #B3B3B3;
}
#fixed .right .righttxt p:nth-child(2)::after {
position: absolute;
content: "";
width: 1px;
height: 36px;
right: 0;
top:5px;
background-color: #B3B3B3;
}
}
@media screen and (max-width:480px) {
#fixed .right .righttxt {
table-layout: auto;
}
#fixed .right .righttxt p {
min-width: 50px;
}
}




#main {
margin-left: 80px;
margin-right: 80px;
}
#wrapper {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width:768px) {
#main {
padding-top: 60px;
margin-left: 0;
margin-right: 0;
}
#wrapper {
padding-left: 20px;
padding-right: 20px;
}
}



#kv {
height: calc( 100vh - 200px );
margin-bottom: 80px;
position: relative;
z-index: 9;
}
#kv .bgtxt{
  z-index: 10;
  position: relative;
  width: 100%;
  top: 50%;
}
#kv .bgtxt img{
  display: block;
  margin: auto;
}
#kv .txt {
font-family: 'Dancing Script', cursive;
color: #fff;
font-size: 40px;
line-height: 1;
position: absolute;
left: 0;
right: 0;
top:50%;
margin-top: -20px;
text-align: center;
z-index: 3;
}
#kv .bg {
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 2;
}
@media screen and (max-width:768px) {
#kv {
height: calc( 100vh - 106px );
margin-bottom: 40px;
}
}
#archive #kv {
height: 55vh;
}
#archive #kv .bg {
background-image: url("images/event.jpg");
background-size: cover;
background-position: center;
}
#archive #kv .txt {
font-size: 24px;
}
#archive #kv .txt span {
font-family: 'Hind Siliguri', sans-serif;
font-size: 38px;
display: block;
margin-bottom: 6px;
}

.margin-bottom{
  margin-bottom: 50px;
}
#concept ul{
  width: 80%;
  margin: 70px auto 70px;
}
#concept li{
    display: inline-block;
    vertical-align: top;
    width: calc( ( 100% - 72px ) / 3 );
    margin-left: 30px;
    position: relative;
    text-align: center;
    font-size: 14px;
}
#concept li:first-child{margin-left: 0;}
.conceptimg{
    height: 0;
    padding-top: 97.2%;
    position: relative;
    overflow: hidden;
}
.conceptimg .bg {
  position: absolute;
  top: 0;
  z-index: 100;
  overflow: hidden;
    transition: .6s;
}
.conceptimg span{
  position: absolute;
  z-index: 110;
  display: block;
  color: #fff;
  font-size: 40px;
  width: 100%;
  top: 40%;
  font-family: 'Dancing Script', cursive;
}
.conceptimg .back{
  display: block;
  width: 100%;
  margin: 0 auto;
}
.conceptimg:hover  .bg{
transform: scale(1.05);

}
.conceptt{
  margin-top: 10px;
}
#concept li a{
  z-index: 220;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width:1050px) {
  #concept li{
    font-size: 1.3vw;
  }
}
@media screen and (max-width:768px) {
  #concept ul{
    width: 80%;
  }
  #concept li{
    text-align: left;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: 0 auto 60px;
  }
  .conceptimg .back{
    width: 100%;
  }
  .conceptimg span{
    text-align: center;
    top: 45%;
    font-size: 10vw;
  }
}

h2 {
font-family: 'Hind Siliguri', sans-serif;
font-weight: 500;
font-size: 31px;
line-height: 1;
}
.h2{font-size: 21px;}
h3 {
font-size: 19px;
line-height: 1.3;
}
p {
font-size: 13px;
line-height: 30px;
margin-top: -8px;
}
h3+p {
margin-top: 28px;
}

#wrapper .left {
float: left;
}
#wrapper .right {
float: right;
}
.o_th {
width: calc( ( 100% - 81px ) / 3 );
}
.t_th {
width: calc( ( ( 100% - 81px ) / 1.5 ) + 40px );
}
@media screen and (max-width:768px) {
#wrapper .left ,
#wrapper .right {
float: none;
}
.o_th ,
.t_th {
width: 100%;
}
.o_th+.t_th {
margin-top: 40px;
}
}
.menu-list{
  margin-top: 30px;
  display: inline-table;
  width: 100%;
}

#event {
padding-top: 80px;
margin-top: 20px;
}
.eventarchives {
font-size: 0;
padding-bottom: 100px;
}
.eventarchives li {
display: inline-block;
vertical-align: top;
width: calc( ( 100% - 81px ) / 3 );
margin-left: 40px;
position: relative;
}
#event .seclink a {
padding-left: 12px;
}
.seclink a.seclinkytube::before {
position: absolute;
z-index: 2;
font-family: 'Font Awesome 5 Brands';
content: "\f167";
font-size: 22px;
left: 10px;
}

@media screen and (min-width:769px) {
#archive .eventarchives li {
margin-bottom: 80px;
}
}
.eventarchives li:nth-child(3n+1) {
margin-left: 0;
}
.eventimg {
height: 0;
padding-top: 62.5%;
position: relative;
overflow: hidden;
}
.eventfull {
position: absolute;
z-index: 3;
top:0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(63,40,21,.6);
}
.eventfull .txt {
position: absolute;
right: 0;
left: 0;
top:50%;
margin-top: -23px;
color: #fff;
text-align: center;
font-size: 24px;
font-family: 'Hind Siliguri', sans-serif;
font-weight: 500;
line-height: 1;
}
.eventfull .txt span {
display: block;
font-family: 'Dancing Script', cursive;
font-size: 18px;
line-height: 1;
margin-top: 4px;
}
.eventimg .bg {
position: absolute;
z-index: 2;
top:0;
right: 0;
bottom: 0;
left: 0;
background-position: center;
background-size: cover;
transition: .6s;
}
.eventarchives li:hover .eventimg .bg {
transform: scale(1.05);
}
.eventcategory {
font-family: 'Dancing Script', cursive;
font-size: 22px;
line-height: 1;
margin-top: 10px;
margin-bottom: 8px;
color: #2F5677;
}
.eventdate {
font-family: 'Hind Siliguri', sans-serif;
font-size: 14px;
line-height: 1;
margin-bottom: 3px;
}
.eventtitle {
font-size: 15px;
line-height: 1.3;
}
.eventarchives li a {
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
}
@media screen and (max-width:768px) {
.eventarchives li {
width: 100%;
margin-left: 0;
}
.eventarchives li+li {
margin-top: 60px;
}
}


.pagination {
font-size: 18px;
line-height: 1;
text-align: center;
padding-top: 30px;
}
.pagination .wrapper>span ,
.pagination .wrapper>a {
display: inline-block;
margin: 0 8px;
}
.pagebtn {
content: "";
width: 13px;
height: 13px;
display: inline-block;
border-style:solid;
border-width: 1px;
border-color: transparent;
border-right-color: #000;
border-bottom-color: #000;
}
.prev {
margin-right: 0 !important;
}
.next {
margin-left: 0 !important;
}
.prevspan {
transform: rotate(135deg);
}
.nextspan {
transform: rotate(-45deg);
}
.pagination a {
color: inherit;
text-decoration: none;
}
@media screen and (max-width:768px) {
.eventarchives {
padding-bottom: 60px;
}
.pagination {
padding-top: 90px;
}
}


.sevkv {
margin-bottom: 100px;
}
.sevkv img {
display: block;
width: 100%;
height: auto;
}
.seclink {
margin-top: 48px;
}
.seclink a {
font-family: 'Hind Siliguri', sans-serif;
display: table;
font-weight: 500;
min-width: 140px;
height: 35px;
margin-left: auto;
line-height: 33px;
padding-top: 2px;
box-sizing: border-box;
text-decoration: none;
text-align: center;
color: #000;
position: relative;
transition: .2s;
z-index: 1;
}
.seclink a::after {
position: absolute;
width: 13px;
height: 13px;
content: "";
border-color: transparent;
border-style: solid;
border-width: 1px;
border-top-color: #000;
border-right-color: #000;
transform: rotate(45deg);
top:10px;
right: 10px;
transition: .2s;
z-index: 2;
}
.seclink a:hover {
color: #fff;
background-color: #000;
}
.seclink a:hover::after {
border-top-color: #fff;
border-right-color: #fff;
}
.seclink a+a {
margin-top: 10px;
}
@media screen and (max-width:768px) {
.sevkv {
margin-bottom: 60px;
}
}

.secmenu{
  position: absolute;
  margin: 0;
  bottom: 6px;
  right: 0;
}
.secmenu a{
  min-width: 25px;
  display: inline-block;
  bottom: -11px;
}
.secmenu a::after{
  width: 0;
  height: 0;
  border-color: #fff;
}
.secmenu a:hover{
  color: #000;
  background-color: #fff;
}






#concept ,
#news,
#menu ,
#shop ,
#sns ,
#lwf ,
#access {
padding-top: 80px;
margin-top: 100px;
}


.menutable {
overflow: hidden;
}
.menutable table {
float: left;
width: 100%;
}
.menutable table .caption{
font-weight: bold;
font-size: 20px;
}
.menutable table .caption th {
font-size: 16px;
padding-top: 40px;
padding-bottom: 17px;
font-weight: 600;
line-height: 1;
letter-spacing: 1px;
}
.menutable table .first th{
padding-top: 0px;
}
.menutable table th {
font-size: 14px;
line-height: 1.3;
padding: 8px 0;
padding-right: 20px;
}
.menutable table td {
padding: 8px 0;
font-size: 13px;
line-height: 1.3;
text-align: right;
}
.menutable table td {
padding: 8px 0;
font-size: 13px;
line-height: 1.3;
}
.menutable table th span {
display: inline-block;
font-size: 11px;
margin-top: 2px;
}
.menutable table .menuh2{
  margin-bottom: 7px;
  margin-top: 35px;
}
.menutable table .halfspace{
  line-height: 1.7;
}
.menutable table td .half{
  font-size: 10px;
  margin-right: 5px;
}
.menutable table td.textleft{
  text-align: left;
  line-height: 30px;
}
@media screen and (max-width:540px) {
.menutable table {
width: 100%;
}
.menutable table:first-child {
margin-right: 0;
}
.menutable table th {
width: auto;
}
.menutable table th br {
display: none;
}
.menutable table td {
text-align: right;
}
.menutable table th span {
margin-left: 8px;
}
}
@media screen and (max-width:440px) {
.menutable table tr{
overflow: hidden;
}
.menutable table th{
display: inline-block;
float: left;
}
.menutable table td{
display: inline-block;
float: right;
}
.menutable table td.textleft{
  float: none;
}
}


.instawrap ul {
font-size: 0;
}
.instawrap li {
display: inline-block;
width: calc( ( 100% - 201px ) / 6 );
margin-left: 40px;
}
.instawrap li:first-child {
margin-left: 0;
}
.instawrap li div {
height: 0;
padding-top: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#sns .seclink a {
padding-left: 12px;
}
.seclink a.seclinkinsta::before {
position: absolute;
z-index: 2;
font-family: 'Font Awesome 5 Brands';
content: "\f16d";
font-size: 22px;
left: 10px;
}
.seclink a.seclinkfb::before {
position: absolute;
z-index: 2;
font-family: 'Font Awesome 5 Brands';
content: "\f39e";
font-size: 18px;
left: 14px;
vertical-align: 1px;
}
.seclink a.seclinktw::before {
position: absolute;
z-index: 2;
font-family: 'Font Awesome 5 Brands';
content: "\f099";
font-size: 21px;
left: 10px;
}
@media screen and (max-width:768px) {
.instawrap ul {
margin-top: -21px;
}
.instawrap li {
display: inline-block;
width: calc( ( 100% - 21px ) / 2 );
margin-left: 20px;
margin-top: 21px;
}
.instawrap li:nth-child(odd) {
margin-left: 0;
}
}



#lwf {
width: 100%;
display: table;
table-layout: fixed;
}
#lwf>div {
display: table-cell;
position: relative;
}
.lwfL div {
position: absolute;
content: "";
right: 20px;
top:0;
bottom: 0;
left: 0;
background-image: url("images/hariolwf.jpg");
background-position: 40% center;
background-size: cover;
}
.lwfR {
padding-left: 20px;
}
.lwfR p {
margin-top: 20px;
}
.lwfR a {
padding-left: 15px;
padding-right: 25px;
}
@media screen and (max-width:768px) {
#lwf>div {
display: block;
}
.lwfL {
padding-top: 200px;
margin-bottom: 60px;
}
.lwfL div {
right: 0;
}
.lwfR {
padding-left: 0;
}
}


#access .accesscont{
  margin-bottom: 100px;
}
#access .accesskv{
  display: block;
  margin-bottom: 35px;
}
#access .accesskv img{
  display: block;
  width: 100%;
}
#access .accesscont>h3 {
font-size: 17px;
line-height: 1;
margin-bottom: 30px;
letter-spacing: 1px;
}
#access .accesscont>h3 span{
  display: inline-block;
  padding-right: .5em;
}
#access .accesscontR h3 {
font-family: 'Hind Siliguri', sans-serif;
font-size: 20px;
line-height: 1;
margin-bottom: 30px;
letter-spacing: 1px;
padding-top: 3px;
}
#access .accesscontR h3.access_eigyo {
  font-family: 'Sawarabi Gothic', sans-serif;
  font-size: 16px;
  margin: 40px 0 18px;
}
#access .accesscontR .access_eigyo_en{
  margin-top: 10px;
}
#access .accesscontR h3.access_eigyo + .accesscontR02 span{
  display: inline-block;
}
.accesscont .close {
  padding-left: 1em;
  line-height: 25px;
  text-indent: -1em;
  margin-bottom: 20px;
}
.accesscont .close em {
  text-decoration: underline;
}
.accesscontL {
float: left;
width: calc( ( 100% - 21px ) / 2 );
min-width: 270px;
margin-right: 40px;
}
.accesscontL01 {
font-family: 'Hind Siliguri','Sawarabi Gothic', sans-serif;
font-size: 20px;
line-height: 33px;
}
.accesscontL02 {
font-size: 13px;
line-height: 1.3;
margin-top: 4px;
text-indent: -.5em;
}
.accesscontL03 {
font-size: 13px;
line-height: 25px;
margin-top: 30px;
margin-bottom: 30px;
}
.accesscontL04 {
  font-size: 13px;
  margin-bottom: 5px;
}
.accesscontnewopen{
  font-size: 13px;
  line-height: 25px;
  color: #325774;
  margin-bottom: 30px;
}
.accesscontR {
float: left;
width: calc( ( 100% - 61px ) / 2 );
min-width: 270px;
}
.accesscontR01 {
font-family: 'Hind Siliguri', sans-serif;
line-height: 1;
margin-top: -10px;
font-size: 13px;
}
.accesscontR02 {
letter-spacing: 3px;
font-family: 'Hind Siliguri', sans-serif;
line-height: 1.3;
font-size: 20px;
margin-top: 10px;
margin-bottom: 40px;
}
#home .accesscontR02 span,
#home .accesscontR04 span{
font-size: 14px;
font-family: 'Sawarabi Gothic', sans-serif;
line-height: 1.5;
letter-spacing: normal;
display: block;
}
#enhome .accesscontR02 span,
#enhome .accesscontR04 span{
font-size: 14px;
font-family: 'Sawarabi Gothic', sans-serif;
letter-spacing: normal;
}
.accesscontR03 {
letter-spacing: 2px;
font-family: 'Hind Siliguri', sans-serif;
line-height: 1;
font-size: 20px;
margin-top: -10px;
margin-bottom: 40px;
}
.accesscontL03 a{
color: #000;
}
.accesscontR04 {
letter-spacing: 1px;
font-family: 'Hind Siliguri', sans-serif;
line-height: 1;
margin-top: -10px;
margin-bottom: 40px;
}
.accesscont .seclink a {
margin-bottom: 40px;
}
.accesscontMap{
  position: relative;
  clear: both;
  height:
}
.accesscontMap .map {
  height: 260px;
}
.accesscont .seclink{
  margin-top: 25px;
}
.accesscont .seclink a {
  padding-left: 12px;
  margin-top:
}
.accesscont .seclink a:not(.seclinkinsta)::before {
  position: absolute;
  z-index: 2;
  font-family: 'Font Awesome 5 Free';
  content: "\f3c5";
  font-size: 21px;
  left: 10px;
  font-weight: 900;
}
@media screen and (max-width:768px) {
  .accesscontL03{
    margin-bottom: 30px;
  }
  #access .accesscontR h3{
    margin-bottom: 16px;
  }
  .accesscontR02{
    margin-top: 5px;
    margin-bottom: 25px;
  }
  .accesscontR03,
  .accesscontR04{
    margin-bottom: 25px;
  }
}
@media screen and (max-width:540px) {
.accesscontL {
float: none;
width: 100%;
margin-right: 0;
}
.accesscontR {
float: none;
width: 100%;
}
}








footer {
padding-top: 90px;
position: relative;
padding-left: 80px;
padding-right: 80px;
z-index: 11;
}
#footerwrapper {
width: 100%;
background-color: #fff;
display: table;
padding-bottom: 40px;
}
#footerwrapper>div {
display: table-cell;
vertical-align: top;
}
#footerwrapper>div h1 ,
#footerwrapper>div h1 a ,
#footerwrapper>div h1 a img {
display: inline-block;
vertical-align: bottom;
}
#footerwrapper>div h1 a img {
width: 160px;
height: 18px;
}
#footerwrapper>div+div {
text-align: right;
}
#footerwrapper>div+div ul {
/*margin-right: -10px;*/
}
#footerwrapper>div+div li {
display: inline-block;
margin: 0 5px;
}
#footerwrapper>div+div li a {
text-decoration: none;
}
#footerwrapper>div+div li a span {
font-family: 'Hind Siliguri', sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 500;
color: #000;
padding: 10px 5px;
}
.footercopyright {
text-align: right;
margin-bottom: 80px;
margin-right: 10px;
font-size: 10px;
line-height: 1.2;
font-family: 'Hind Siliguri', sans-serif;
}
@media screen and (max-width:768px) {
footer {
padding-left: 20px;
padding-right: 20px;
}
#footerwrapper>div {
text-align: center;
}
#footerwrapper>div+div {
display: none;
}
.footercopyright {
text-align: center;
}
}


#btn_gnav.el_humburger {
right: 17px;
top: 39px;
width: 45px;
height: auto;
padding: 10px;
box-sizing: border-box;
z-index: 999999999999;
transition: all 0.2s ease-in-out, background-color 0.6s ease-in-out;
cursor: pointer;
pointer-events: auto;
}
@media screen and (max-width:768px) {
#btn_gnav.el_humburger {
right: 10px;
top: 10px;
}
}
.el_humburger > span {
display: block;
width: 100%;
margin: 0 auto 8px;
height: 2px;
background: #000;
transition: all 0.2s ease-in-out;
}
.el_humburger > span:last-child {
margin-bottom: 0;
}
.js_humburgerOpen .el_humburger {
background-color: rgba(24, 33, 68,0) !important;
}
.js_humburgerOpen .el_humburger > span {
background: #000;
}
.js_humburgerOpen .el_humburger > span.top {
transform: translateY(10px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger > span.middle {
opacity: 0;
}
.js_humburgerOpen .el_humburger > span.bottom {
transform: translateY(-10px) rotate(45deg);
}
.el_humburgerButton.el_humburgerButton__close {
top: 2%;
right: 2%;
}
.el_humburgerButton__close > span {
display: block;
width: 35px;
margin: 0 auto;
height: 4px;
background: #fff;
}
.el_humburgerButton__close > span.el_humburgerLineTop {
transform: translateY(5px) rotate(-45deg);
}
.el_humburgerButton__close > span.el_humburgerLineBottom {
transform: translateY(-6px) rotate(45deg);
}
.navigation {
display: none;
}
.navigation.js_appear {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
z-index: 9999;
}
.navigation_screen {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: 0;
margin-top: 0px;
padding-top: 0px;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: flex;
justify-content:center;
align-items: center;
}
.js_fixed {
position: fixed;
width: 100%;
}

.menu {
display: table;
}
.menu ul {
display: table-cell;
font-family: 'Hind Siliguri', sans-serif;
}
.menu ul a {
display: inline-block;
color: #000;
text-decoration: none;
font-size: 24px;
line-height: 1;
margin: 11px 0;
}
.menu ul a span {
font-weight: 500;
}
.menu ul .sub a {
font-size: 18px;
}
.menu>div {
display: table-cell;
position: relative;
width: 188px;
padding-left: 250px;
font-family: 'Hind Siliguri','Sawarabi Gothic', sans-serif;
font-size: 11px;
line-height: 1.7;
}
.pc{display: block;}
.sp{display: none;}
.menu-lang{
  position: absolute;
  top: 10px;
  right: 0;
}

.me{
  position: absolute;
  bottom: 11px;
}
.me.me01{
  bottom: 123px;
}
.menu02 a {
display: inline-block;
color: #000;
margin-left: 15px;
font-weight: 500;
}
.menu03 a {
display: inline-block;
color: #000;
font-weight: 500;
}

@media screen and (max-width:768px) {
.menu {
width: 100%;
display: block;
max-width: 240px;
}
.menu02 a ,
.menu03 {
display: none;
}
.menu ul {
display: block;
}
.menu>div {
margin-top: 20px;
display: block;
padding-left: 0;
}
.pc{display: none;}
.sp{display: block;}
.menu-lang{
  position: relative;
  top: 10px;
  right: 0;
}
.me{
  display: none;
  position: relative;
  bottom: 0;
}
}
@media screen and (min-width:769px) {
#fixed .right .righttxt p a i {
transform: rotate(-90deg);
margin-bottom: 0;
}
}






#p404 {
height: calc( 100vh - 372px );
display: flex;
text-align: center;
align-items: center;
  justify-content: center;
  min-height: 240px;
}
#p404 div {
margin-top: 15px;
}
#p404 p {
margin-top: 30px;
line-height: 1.5;
}
@media screen and (max-width:768px) {
#p404 {
height: calc( 100vh - 248px );
margin-bottom: -80px;
}
}
@media screen and (max-width:680px) {
#p404 {
text-align: left;
}
#p404 div h2 ,
#p404 div div ,
#p404 div p {
display: table;
margin-left: auto;
margin-right: auto;
}
}

#single #event {
margin-top: 0;
padding-top: 0;
}
.eventsingle {
margin-bottom: 60px;
}
.eventsingle img{
  width: 100%;
  height: auto;
}
.eventinfo001 {
display: table;
width: 100%;
table-layout: fixed;
margin-bottom: 180px;
}
.eventinfo001>div {
display: table-cell;
vertical-align: middle;
}
.eventinfo001l {
padding-right: 20px;
box-sizing: border-box;
font-size: 20px;
}
@media screen and (max-width:1100px) {
.eventinfo001l {
font-size: 16px;
}
}
@media screen and (max-width:768px) {
.eventinfo001 {
width: calc( 100% - 40px ) ;
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
display: block;
}
.eventinfo001>div {
display: block;
}
.eventinfo001l {
margin-top: 40px;
margin-bottom: 40px;
font-size: 16px;
}
}
.eventinfo001l .eventcategory {
font-size: 2.2em;
line-height: 1;
margin-top: 0;
}
.eventinfo001l .eventdate {
font-size: 1.4em;
margin-top: 1.2em;
line-height: 1;
font-weight: 300;
}
.eventinfo001l .eventtitle {
font-size: 1.5em;
line-height: 1.3;
}
.eventinfo001r img {
display: block;
width: 100%;
height: auto;
}
.eventcont01 {
margin-bottom: 120px;
}
.eventcont01 p+p {
margin-top: 30px;
}

#single .seclink a {
margin-right: auto;
padding-left: 18px;
}
#single .seclink a::after {
transform: rotate(-135deg);
left: 20px;
}

.eventinfo001rImg {
width: 100%;
height: 0;
padding-top: 66.6%;
position: relative;
}
.eventinfo001rImg .bg {
position: absolute;
z-index: 2;
top:0;
right: 0;
bottom: 0;
left: 0;
background-position: center;
background-size: cover;
}
.eventinfo001rImg .txt {
font-size: 48px;
}
.eventinfo001rImg .txt span {
font-size: 28px;
margin-top: 8px;
}
@media screen and (max-width:1100px) {
.eventinfo001rImg .txt {
font-size: 38px;
}
.eventinfo001rImg .txt span {
font-size: 24px;
margin-top: 6px;
}
}

#event p a{color: black;}


#navigation .seclink.secmenu  a {
bottom: 0;
min-width: 0;
}
#navigation .seclink.secmenu  a+a {
margin-left: 6px;
}
#navigation .seclink a::before {
position: static !important;
}
#navigation .seclink a::after {
display: none;
}