@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body{line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block; }
ul{list-style:none;}
blockquote, q{quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none; }
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
img{vertical-align:top; font-size:0; line-height:0; }
ins{background-color:#ff9; color:#000; text-decoration:none; }
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{text-decoration:line-through; }
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help; }
table{border-collapse:collapse; border-spacing:0; }
em{font-style:normal; }
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select{vertical-align:middle;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}
*,:before,:after{box-sizing:border-box;-webkit-text-size-adjust:100%;}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

/* ==========================
  初期設定
========================== */
html{font-size:62.5%;}
body{font-size:15px; font-size:1.5rem; font-family: 'Noto Sans JP', sans-serif; letter-spacing:0.05em; line-height:1.6; text-align:center; background:#fff; -webkit-text-size-adjust:100%; color:#000; max-height: 100%; box-sizing:content-box; margin:0;}

:root {--header: 60px; scroll-padding: var(--header);}

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

a{color:#000; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:none;}
a:hover{opacity: 0.7; transition: 0.5s; -webkit-transition:0.5s;}

.blue{color: #0080df;}
.comingsoon{text-align: center; margin: 0 auto; padding: 10%; font-size: 18px; color: #000}
.wid1100box{max-width: 960px; margin:  0 auto;}
h3{font-family: 'Poppins', sans-serif; font-weight: 600; font-size:30px; font-size: 3.0rem; text-align: center; position: relative; border-bottom: 2px solid #0080df; margin: 0 auto; margin-bottom: 3%;}

@media only screen and (min-width:768px) {
h3{font-size: 42px;  font-size: 4.2rem; }
}

header{background: #fff;}
header{position:absolute; width:100%; top:0; left:0; right:0; height:55px; z-index: 999999;}
header .box{padding:0;}
header h1{position:absolute; top:8px; left:10px; width:40%; max-width:235px; z-index: 10;}
header h1 a{display:block;}
header .tel{display: none;}
header #menubox{position:absolute; top:10px; right:10px; padding:10px; background:transparent; z-index:99;}
header #menubox .menu{position:relative; display:block; width:24px; height:15px;}
header #menubox .menu__line{position:absolute; display:block; height:2px; background:#444; -webkit-transition:transform:.3s; -moz-transition:transform:.3s; -o-transition:transform:.3s; transition:transform:.3s; width:100%;}
header #menubox .menu__line--center{top:6px;}
header #menubox .menu__line--bottom{bottom:0;}
header #menubox.active{top:10px; background:none;}
header #menubox .menu.active{width:30px; height:20px;}
header #menubox .menu__line.active{background:#fff;}
header #menubox .menu__line--top.active{top: 8px; transform: rotate(45deg);}
header #menubox .menu__line--center.active{top: 9px; transform:scaleX(0); }
header #menubox .menu__line--bottom.active{bottom: 10px; transform: rotate(135deg);}

header nav{font-family: 'Poppins', sans-serif; letter-spacing: 0; font-weight: 600; position:fixed; display:none; overflow-y:auto; background: #000; width:100%; height:100%; z-index:98; font-size:15px; font-size:1.5rem; color:#fff; }
header nav #navbox{padding:20px; max-height:initial;}
header nav li{position:relative; font-weight: 600; font-size:24px; font-size:2.4rem; margin-bottom: 20px;}
header nav .nav{margin:20% 0 0 0;}
header nav .nav a{display: block; z-index: 1; text-decoration:none; }
header nav .nav a{display:block; padding: 0; color: #fff;}
header nav .nav li.telephone a{line-height: 1.1; padding: 0;}
header nav .nav li.telephone span.small{font-size: 13px; font-weight: 100;}

header.fixed{position:fixed; width:100%; top: 0; left: 0; height:63px; z-index:999999; background:rgba(255, 255, 255, 1);}
header.fixed h1{max-width:250px; top:10px;}
header.fixed #menubox{position: absolute; right:15px; top: 10px; padding:10px; z-index:99;}
header.fixed nav #navbox{overflow-y:initial; height:auto;}

#breadcrumbs{margin:10% auto 0 auto; max-width:1050px; text-align:left; font-size:12px; font-size:1.2rem;}
#breadcrumbs li{display:inline-block;}
#breadcrumbs li:after{content:"»"; padding:0 4px;}
#breadcrumbs li:last-child:after{content:""}

@media only screen and (min-width:400px) {
#breadcrumbs{margin:30px auto 0 auto;_}
}

@media only screen and (min-width:800px) {
#breadcrumbs{margin:10px auto 0 auto;_}
}

@media only screen and (min-width:600px) {
header h1{top:7px; left:10px; width:25%; max-width:250px; z-index: 10;}
}
@media only screen and (min-width:900px) {
header{width:100%; text-align:left; height:68px; padding-top: 10px;}

header #menubox{display:none;}
header{position: relative;}
header nav .nav li.telephone{display: none;}
header .tel{position: absolute; top: 8px; right: 10px; display: inherit; position: absolute; display: flex; font-family: 'Poppins', sans-serif; letter-spacing: 0; font-weight: 600; text-align: center; line-height: 1; font-size: 20px; line-height: 0.8;}
header .tel span{font-size: 12px; font-weight: 100;}
header .tel a{color: #0080df; line-height: 1:}
header .tel li{margin-right: 10px;}
header .tel .contactbox{background: #000; color: #fff; height: 35px; vertical-align: bottom; line-height: 1.5;}
header .tel .contactbox a{padding: 30px 30px 0 30px; font-size: 14px;  color: #fff;}
header .tel .contactbox img{width: 22px; margin-top: 11px; margin-right: 10px;}
header .box{position:relative; max-width:1100px; margin:0 auto;}

header nav{margin-top: 30px; float:right; display: block; position:relative; width:70%; padding:5px 0 0 20px; background:none; text-align:right;}
header nav #navbox{padding:20px 0 20px 20px;}
header nav .nav{float:left; width:100%; display: -webkit-flex;  display: flex; -webkit-justify-content: flex-end; justify-content:flex-end; margin:0; text-align:left;}
header nav .nav li{flex-wrap: wrap; font-size:16px; font-size:1.6rem; line-height:1.4;}
header nav .nav li:last-child{padding-right:0;}
header nav .nav a{border:none; width:auto; text-decoration:none;}

header nav .reserve{float:right; margin-top:-5px; width:180px; padding:8px; text-align:center;}

header.fixed{display: none;}
#breadcrumbs,.breadcrumbs{font-size:13px; font-size:1.3rem;}
header nav .nav a{display:block; padding: 0 13px 0 5px; color:#000; text-align: center;}
header{padding-bottom: 100px;}
header nav .nav li{flex-wrap: wrap; font-size:19px; font-size:1.9rem; line-height:1.4; margin-top: 5px;}
header .tel{font-size: 22px; line-height: 0.8;}
header .tel .contactbox{ height: 35px; vertical-align: bottom; line-height: 1.2;}
main{border-top: 1px solid #0080df;}
main#top{border-top: none;}
}

@media only screen and (min-width:1000px) {
header nav .nav li{flex-wrap: wrap; font-size:21px; font-size:2.1rem; line-height:1.4; margin-top: 5px;}
header nav .nav a{ padding: 0 25px 0 0; }
}



footer{background:#000; text-align: center; padding: 30px;}
footer p{font-size: 10px; font-size: 1.0rem; color: #fff;}

footer a{color: #fff;}
footer ul{color: #fff; font-size:14px;  margin-bottom: 50px; text-align: left; font-family: 'Poppins', sans-serif; font-weight:300;}
footer ul li{margin-bottom: 10px; border-bottom: 1px solid #fff; padding-bottom: 10px; padding-left: 10px;}
@media only screen and (min-width:600px) {
footer ul{color: #fff;  display:  flex; font-size: 12px; text-align: center; flex-wrap:wrap; justify-content: center; margin-bottom: 50px; font-family: 'Poppins', sans-serif; font-weight:300;}
footer ul li{border-bottom: none; padding: 0 10px;}
footer ul li+ li {border-left: 1px solid #fff;}
}
/*TOP PAGE*/
#pagetop {position:fixed; bottom:20px; right:10px; font-family: 'Montserrat', sans-serif; font-weight:500; font-size:13px;}
#pagetop a { background: #666; text-decoration: none; color: #fff; width: 100px; padding:10px 0; text-align: center; display: block; border-radius: 3px;}
#pagetop a:hover { text-decoration: none; background: #999;}

section.undercontent{padding: 10% 2% 5% 2%; color: #000;}
@media only screen and (min-width:900px) {
section.undercontent{padding: 10px 2% 10% 2%; max-width: 1100px; margin: 0 auto;}
}
@media only screen and (min-width:960px) {
section.undercontent{padding: 0 2% 10% 2%; max-width: 1100px; margin: 0 auto;}
}


h2.maintitle{font-family: 'Poppins', sans-serif; letter-spacing: 0; font-weight: 600; font-size: 30px; text-align: left;}
h2.maintitle .blue{color: #0080df;}
h2.maintitle .small{font-size: 16px; color: #0080df;}
h3.ntitle{color: #0080df; border-bottom: 2px solid #0080df; padding-bottom: 5px; font-size: 20px; text-align: left; margin-top: 20px;}
section.undercontent{text-align: left; }
iframe{vertical-align: bottom;}


.fadeInTrigger,.fadeIn2Trigger,.fadeIn3Trigger{opacity: 0;}
.fadeIn{animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeIn2{animation-name:fadeInAnime2; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
.fadeIn3{animation-name:fadeInAnime3; animation-duration:3s; animation-fill-mode:forwards; opacity:0;}

@keyframes fadeInAnime{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime2{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime3{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
	}


.fadeinstart{
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}