@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');


/* ------------------------------------------------
Calin. / layout css
MOD : 2020.4.14
------------------------------------------------ */

* {margin: 0;padding: 0;}

html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.5rem;
font-family: 'Noto Sans JP', sans-serif;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#333;
color:#fff;
line-height:1.7;
width: 100%;
}


div {  zoom: 1;/*for IE 5.5-7*/  }  
div:after {/*for modern browser*/  
content: ".";  
clear: both;  
display: block;  
line-height: 0;  
height: 0;  
visibility: hidden;  
}  

.clearfix:after {
content:".";
height:0;
clear:both;
display: block;
visibility:hidden;
}

* html>body .clearfix {
display: inline-block; 
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}	

*:first-child+html .clearfix{/*for IE7*/
height:1%;
}

img {vertical-align:top;}

a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}

a {color:#fff;}
a:visited {color:#fff;}
a:hover {color:#ffedcd}

a.btn {display:block;width:40%;padding:10px 30px;margin:30px auto;background:#ccc;border-radius:10px;text-align:center;text-decoration:none;font-size:1.8rem;}
a.btn:hover {background:#600;color:#fff;}



/* common layout
------------------------------------------------------------- */

#container { background:#fff;padding:50px 0;color:#333;}
#container_inner{width:1000px;margin:0 auto;}
#container_inner h3 {margin:0 0 1em 0;letter-spacing:1px;font-size:2.0rem;}

#container_inner a {color:#333;}
#container_inner a:visited {color:#333;}
#container_inner a:hover {color:#f00}

#menuArea{float:right;width:300px;padding:30px 0 30px 0;}
#mainArea {float:left;width:640px;padding:30px 0 30px 0;}

#titleheader {margin:140px 0 0 0;padding:47px 0 0 0;background:url(https://fc.nul.tokyo/img/common/titleheader.jpg)50% 0 no-repeat;}
#titleheader h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:20px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}
#titleheader h2 em {font-size:2.2rem;letter-spacing:10px;font-style:normal;}


/* header
------------------------------------------------------------- */

header {width:100%;height:500px;text-align:center;background: url(../img/common/header_bg.jpg) 50% 0 no-repeat #f5f0ea;position:fixed;z-index:300;transition: .3s;}
header .headlogo {width:385px;padding:180px 0 30px 0;transition: .3s;}
	
header ul#gnavi {margin:5px 0 0 0;list-style:none;font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;font-size:1.5rem;white-space: nowrap;transition: .3s;font-family: 'Fjalla One', sans-serif;}
header ul#gnavi li {display:inline;letter-spacing:6px;}
header ul#gnavi li:after {content:"　|　";color:#a38b78;}
header ul#gnavi li:last-child:after {content:""}

header a {color:#a38b78;text-decoration:none;}
header a:visited {color:#a38b78;text-decoration:none;}
header a:hover {color:#614c3f;text-decoration:none;}

.is-animation { height: 160px;background:none #f5f0ea;}
.is-animation .headlogo {width:140px;padding:20px 0 0 0;}
.is-animation ul#gnavi {margin:0;}



/* KV
------------------------------------------------------------- */

#mainvisual { height:450px;margin:500px 0 0 0;background:url(../img/top/mainvisual.jpg) 50% 0 no-repeat;transition: .3s;}
#mainvisual .inner { width:1200px;margin:0 auto;position:relative;}


/* CONCEPT
------------------------------------------------------------- */

#concept { background:#f1e6de;padding:80px 0;color:#333;font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}
#concept .inner { width:800px;margin:0 auto;}
#concept .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.8rem;font-family: 'Libre Baskerville', serif;color:#614c3f;}
#concept .inner h3 {text-align:center;margin:0 0 30px 0;}

#concept .inner img {width:180px;float:left;margin:0 50px 0 0;}
#concept .inner p {margin:0 0 20px 0;line-height:2;}
#concept .inner p.message {padding:20px 0 0 0 ;}
#concept .inner p.name {text-align:right;}



/* TOP > INFORMATION
------------------------------------------------------------- */

#top_info { background:#a59080;padding:50px 0;color:#fff;}
#top_info .inner { width:800px;margin:0 auto;}
#top_info .inner h2 {text-align:center;margin:0 0 40px 0;letter-spacing:10px;font-size:3.8rem;font-family: 'Libre Baskerville', serif;color:#e8ded7;}

#top_info .inner ul.topics {list-style:none;margin:0 0 20px 0;}
#top_info .inner ul.topics li {position: relative;padding:10px 0 10px 20px;margin:0 0 10px 0;border-bottom:1px solid #c8bab0;}
#top_info .inner ul.topics li a{color:#fff;}
#top_info .inner ul.topics li a:visited{color:#fff;}
#top_info .inner ul.topics li a:hover{color:#ffedcd;}

#top_info .icon {font-size:1.2rem;font-family: 'Philosopher', sans-serif;color:#333;padding:3px 6px;background:#fff;text-decoration:none;}
#top_info a:visited .icon {background:#fff;text-decoration:none;}
#top_info a:hover .icon {background:#f00;text-decoration:none;}

#top_info .note {font-size:1.4rem;margin:0 0 50px 0;padding:30px;border:1px solid #c8bab0;border-radius:5px;background:#a69588;}
#top_info .note h3 {font-size:1.7rem;padding:0 0 10px 0;margin:0 0 20px 0;border-bottom:1px solid #c8bab0;}




/* INFORMATION
------------------------------------------------------------- */

#information #container { background:#666;padding:50px 0 50px 0;color:#fff;}
#information #container_inner { width:1000px;margin:0 auto;}

#information #container_inner dl {border-bottom:1px dotted #ccc;}
#information #container_inner dl dt {font-size:2rem;font-weight:bold;margin:40px 0 ;}
#information #container_inner dl dt em {font-size:1.4rem;font-weight:normal;font-style:normal;}
#information #container_inner dl dd {margin:0 0 20px 0 ;}

#information .entry{padding:0 0 2em 0;margin:0 0 2rem 0;border-bottom:1px solid #444;}

#information .entry-title{font-size:1.8rem;margin:0 0 2rem 0;color:#fff;}
#information .entry-title a{color:#fff;}
#information .entry-title a:visited{color:#fff;}
#information .entry-title a:hover{color:#f00;}

#information .entry .date{text-align:right;font-size:1.2rem;}
#information .entry a{color:#fff;}
#information .entry a:visited{color:#fff;}
#information .entry a:hover{color:#f00;}

#information .entry a .icon {font-size:1.2rem;font-family: 'Philosopher', sans-serif;color:#333;padding:3px 6px;background:#fff;text-decoration:none;}
#information .entry a:visited .icon {background:#fff;text-decoration:none;}
#information .entry a:hover .icon {background:#f00;text-decoration:none;}
#information .entry p{margin:0 0 1rem 0;}

#information #menuArea h4{padding:0 0 10px 0;margin:0 0 10px 0;border-bottom:2px solid #fff;}
#information #menuArea ul{margin:0 0 20px 0;list-style:none;}
#information #menuArea ul li{padding:10px 0 10px 20px;border-bottom:1px dotted #fff;}

#information #menuArea a{color:#fff;}
#information #menuArea a:visited{color:#fff;}
#information #menuArea a:hover{color:#f00;}



/* PRICE
------------------------------------------------------------- */

#price { background:#fff;padding:50px 0;color:#333;}
#price .inner { width:800px;margin:0 auto;}
#price .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.8rem;font-family: 'Libre Baskerville', serif;color:#614c3f;}


/* RESERVE
------------------------------------------------------------- */

#reserve { background:#f5ece6;padding:50px 0;color:#333;}
#reserve .inner { width:800px;margin:0 auto;}
#reserve .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.8rem;font-family: 'Libre Baskerville', serif;color:#614c3f;}
#reserve .inner h3 {text-align:center;margin:0 0 30px 0;}

#reserve .inner p {margin:0 0 20px 0;}
#reserve .inner .tel {font-size:3rem;font-family: 'Fjalla One', sans-serif;}
#reserve .inner .icon_line {width:24px;vertical-align:inherit;}
#reserve .inner .line {font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}

#reserve .inner a {color:#333;}
#reserve .inner a:visited {color:#333;}
#reserve .inner a:hover {color:#614c3f;}


/* ACCESS
------------------------------------------------------------- */

#access { background:#fff;padding:50px 0;color:#333;}
#access h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.8rem;font-family: 'Libre Baskerville', serif;color:#e8ded7;}

#access iframe {filter: grayscale(100%);margin:0 0 1em 0;}


/* notes
------------------------------------------------------------- */

#notes { background:#fff;padding:200px 0 50px 0;color:#000;}
#notes .inner { width:800px;margin:0 auto;line-height:2;}
#notes .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}
#notes .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:2.0rem;}

#notes .inner ul {margin:0 0 0 1em;list-style:none;}
#notes .inner ul li {padding:10px 0;border-bottom:1px dotted #ccc;}
#notes .inner ul li:before {content:"●";}

#notes .inner p {margin:0 0 1em 0;}


/* privacy
------------------------------------------------------------- */

#privacy { background:#fff;padding:50px 0;color:#000;}
#privacy .inner { width:800px;margin:0 auto;line-height:2;}
#privacy .inner h3 {text-align:center;margin:0 0 20px 0;padding:0 0 10px 0;letter-spacing:1px;font-size:2.2rem;border-bottom:1px solid #ccc;font-weight:normal;}

#privacy .inner ul {margin:0 0 0 1em;list-style:none;}
#privacy .inner ul li {padding:10px 0;border-bottom:1px dotted #ccc;}
#privacy .inner ul li:before {content:"●";}

#privacy .inner p {margin:0 0 1em 0;}


/* agreement
------------------------------------------------------------- */

#agreement { background:#fff;padding:50px 0;color:#000;}
#agreement .inner { width:800px;margin:0 auto;line-height:2;}
#agreement .inner h3 {text-align:center;margin:0 0 20px 0;padding:0 0 10px 0;letter-spacing:1px;font-size:2.2rem;border-bottom:1px solid #ccc;font-weight:normal;}



 /* inquiry
---------------------------------------------------------------------------- */

#inquiry { background:#fff;padding:50px 0 50px 0;color:#000;}
#inquiry .inner { width:800px;margin:0 auto;line-height:2;}

#inquiry h3 {display:table;font-size:2.2rem;letter-spacing:1px;margin:0 auto 20px auto;font-weight:normal;}
#inquiry .note {text-align:center;margin:0 0 50px 0;}
#inquiry .red {color:#f00;}

#inquiry #inquiryform dl {width:100%;margin:0 0 20px 0;display:table;border: 1px solid #CCC;border-top: none;border-left: none;border-right: none;}
#inquiry #inquiryform dl dt {float: left;clear:left;font-weight: bold;padding: 10px 15px;width: 11em;border-top: 1px solid #CCC;border-left: none;}
#inquiry #inquiryform dl dd {margin: 0 0 0 12.1em;padding: 10px 15px;border-top: 1px solid #CCC;}
#inquiry #inquiryform dl dt:first-child {border:none;}
#inquiry #inquiryform dl dd:nth-child(2) {border:none;}

#inquiry #inquiryform em {font-size:1.2rem;font-style:normal;}
#inquiry #inquiryform .name{width:120px;}
#inquiry #inquiryform .com,
#inquiry #inquiryform .email{width:90%;}
#inquiry #inquiryform .comments{width:98%;resize:vertical;margin:0 0 20px 0;border: 1px solid #CCC;}
#inquiry .buttons{text-align:center;margin:0 0 10px 0;}
#inquiry .errorpoint{color:#f00;}
#inquiry #errormsg {text-align:center;margin:0 0 30px 0;}

#inquiry input[type="text"] ,#inquiry input[type="email"],textarea {font-size:1.5rem;padding:5px;}
#inquiry input[type="button"] ,
#inquiry input[type="submit"] {padding:10px 30px;font-size:1.8rem;background:#888;color:#fff;border:none;border-radius:5px;cursor:pointer;}
#inquiry input:hover[type="button"] ,
#inquiry input:hover[type="submit"]{background:#e42528;}
#inquiry input[type="radio"] {} 



/* footer
------------------------------------------------------------- */

footer{background:#614c3f;color:#ccc;font-size:1.4rem;}
footer .inner{ width:900px;margin:0 auto;padding:50px 0 50px 0;}

footer .inner a {color:#fff;}
footer .inner a:hover {color:#ffedcd;}

.sharebtn {display:table;margin:10px 0;}
.twitter {display:inline;float:left;width:76px;margin:0 10px 0 0;}
.twitter-share-button{margin:0 10px 0 0;}
.fb-like {display:inline;}
.fb_iframe_widget > span {vertical-align: baseline !important;}


footer .inner  ul.footlink { list-style:none;text-align: center;margin:0 0 30px 0;}
footer .inner  ul.footlink li {display: inline;margin:0 0 0 0;}
footer .inner  ul.footlink li:after {content:"　｜　";}
footer .inner  ul.footlink li:last-child {margin:0;}
footer .inner  ul.footlink li:last-child:after {content:""}

footer .inner small {display:block;font-size:1.4rem;letter-spacing:2px;text-align:center;}

footer .inner  ul.snsicon { display:table;margin:0 auto;text-align:center;}
footer .inner  ul.snsicon li{float:left;display:inline;display:block;padding:10px;margin:0 20px 0 0;width:30px;border-radius:30px;border:2px solid #fff;}
footer .inner  ul.snsicon li:last-child {margin:0;}
footer .inner  ul.snsicon li img {width:30px;}



/* sidebar [SP MENU]
------------------------------------------------------------- */

#sidebar {
display:none;
font-size: 1.5rem;
padding-top: 80px;
width: 70%;
height: 100%;
position: fixed;
color: #5e9e2e;
background: #000;
text-align: center;
}
ul#nav_sp {display:none;}

#nav_sp ul {
list-style: none;
margin-left: 0;
}
#nav_sp > ul > li {
position: relative;
}

#nav_sp a {
color: #fff !important;
text-decoration: none !important;
display: block;
padding: 15px 0;
border-bottom:1px solid #666;
transition: background-color .3s linear;
}
#nav_sp a:hover {
text-decoration:none !important;
background: #900;
color:#fff !important;
}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 260px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 230px;
}

/* nav-toggle */
#nav-toggle {
display: none;
position: fixed;
top: 20px;
right: 15px;
height: 32px;
cursor:pointer;
}
#nav-toggle > div {
position: relative;
width: 32px;
}
#nav-toggle span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #666;
position: absolute;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#overlay {
display: none;
position: fixed;
background: rgba(0,0,0,.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}