@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:#3f3c3c; -webkit-text-size-adjust:100%; color:#fff; max-height: 100%; box-sizing:content-box; margin:0;}

font{
font-family: 'Kanit', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
}

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

a{color:#fff; 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; text-decoration:underline;}

@media only screen and (min-width:768px) {
}

header#headmenu{background: #fff;}
header#headmenu{position:absolute; width:100%; top:0; left:0; right:0; height:55px; z-index: 999999;}
header#headmenu .box{padding:0;}
header#headmenu h1{position:absolute; top:8px; left:10px; width:40%; max-width:235px; z-index: 10;}
header#headmenu h1 a{display:block;}
header#headmenu .tel{display: none;}
header#headmenu #menubox{position:absolute; top:10px; right:10px; padding:10px; background:transparent; z-index:99;}
header#headmenu #menubox .menu{position:relative; display:block; width:24px; height:15px;}
header#headmenu #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#headmenu #menubox .menu__line--center{top:6px;}
header#headmenu #menubox .menu__line--bottom{bottom:0;}
header#headmenu #menubox.active{top:10px; background:none;}
header#headmenu #menubox .menu.active{width:30px; height:20px;}
header#headmenu #menubox .menu__line.active{background:#fff;}
header#headmenu #menubox .menu__line--top.active{top: 8px; transform: rotate(45deg);}
header#headmenu #menubox .menu__line--center.active{top: 9px; transform:scaleX(0); }
header#headmenu #menubox .menu__line--bottom.active{bottom: 10px; transform: rotate(135deg);}

header#headmenu nav{font-family: 'Kanit', 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#headmenu nav #navbox{padding:20px; max-height:initial;}
header#headmenu nav li{position:relative; font-weight: 600; font-size:24px; font-size:2.4rem; margin-bottom: 20px;}
header#headmenu nav .nav{margin:20% 0 0 0;}
header#headmenu nav .nav a{display: block; z-index: 1; text-decoration:none; }
header#headmenu nav .nav a{display:block; padding: 0; color: #fff;}
header#headmenu nav .nav li.telephone a{line-height: 1.1; padding: 0;}
header#headmenu nav .nav li.telephone span.small{font-size: 13px; font-weight: 100;}

header#headmenu.fixed{position:fixed; width:100%; top: 0; left: 0; height:63px; z-index:999999; background:rgba(255, 255, 255, 1);}
header#headmenu.fixed h1{max-width:250px; top:10px;}
header#headmenu.fixed #menubox{position: absolute; right:15px; top: 10px; padding:10px; z-index:99;}
header#headmenu.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#headmenu{width:100%; text-align:left; height:68px; padding-top: 10px;}

header#headmenu #menubox{display:none;}
header#headmenu{position: relative;}
header#headmenu nav .nav li.telephone{display: none;}
header#headmenu .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#headmenu .tel span{font-size: 12px; font-weight: 100;}
header#headmenu .tel a{color: #0080df; line-height: 1:}
header#headmenu .tel li{margin-right: 10px;}
header#headmenu .tel .contactbox{background: #000; color: #fff; height: 35px; vertical-align: bottom; line-height: 1.5;}
header#headmenu .tel .contactbox a{padding: 30px 30px 0 30px; font-size: 14px;  color: #fff;}
header#headmenu .tel .contactbox img{width: 22px; margin-top: 11px; margin-right: 10px;}
header#headmenu .box{position:relative; max-width:1100px; margin:0 auto;}

header#headmenu nav{margin-top: 30px; float:right; display: block; position:relative; width:70%; padding:5px 0 0 20px; background:none; text-align:right;}
header#headmenu nav #navbox{padding:20px 0 20px 20px;}
header#headmenu 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#headmenu nav .nav li{flex-wrap: wrap; font-size:16px; font-size:1.6rem; line-height:1.4;}
header#headmenu nav .nav li:last-child{padding-right:0;}
header#headmenu nav .nav a{border:none; width:auto; text-decoration:none;}

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

header#headmenu.fixed{display: none;}
#breadcrumbs,.breadcrumbs{font-size:13px; font-size:1.3rem;}
header#headmenu nav .nav a{display:block; padding: 0 13px 0 5px; color:#000; text-align: center;}
header#headmenu{padding-bottom: 100px;}
header#headmenu nav .nav li{flex-wrap: wrap; font-size:19px; font-size:1.9rem; line-height:1.4; margin-top: 5px;}
header#headmenu .tel{font-size: 22px; line-height: 0.8;}
header#headmenu .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#headmenu nav .nav li{flex-wrap: wrap; font-size:21px; font-size:2.1rem; line-height:1.4; margin-top: 5px;}
header#headmenu nav .nav a{ padding: 0 25px 0 0; }
}

.movie{margin:0 auto; margin-top:100px; text-align:center; max-width:660px;}
.movie .moviebox{width: 100%; aspect-ratio: 16 / 9;}
.movie .moviebox iframe{width: 100%; height: 100%;}

footer{margin-top:60px; text-align: center; padding: 30px 0 0;}
footer p{font-size: 10px; font-size: 1.0rem; color: #fff;}
footer{text-align: center; padding:60px 0 30px 0; font-family:'Kanit', sans-serif; font-size:13px; font-weight:300;}
footer .icon{display:flex; margin:24px auto 20px; gap:16px; justify-content:center;}
footer .icon li{margin-bottom:20px;}
footer .icon li a{display:block; padding:8px; width:40px; background:#fff; border-radius:40px;}
footer .icon li.line a{padding:5px;}

/*TOP PAGE*/
#pagetop {position:fixed; bottom:20px; opacity:0; right:10px; font-family: 'Kanit', sans-serif; font-weight:500; font-size:13px; transition:all 1s ease;}
#pagetop.show{opacity:.6; transform:none;}
#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;}


.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;}
.fadeUp {animation-name:fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
from {opacity: 0; transform: translateY(10px);}
to {opacity: 1; transform: translateY(0); transition:all 1s ease-out;}
}
@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);}
	}