@charset "utf-8";

@import url('https://fonts.googleapis.com');
@import url('https://fonts.gstatic.com');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');


/*2024.2/28*/
#systemchange{
background:rgba(255,255,255,1);
text-align:center;
padding:2em 0 1em 0;
}

#systemchange p{
font-feature-settings: "palt";
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight:bold;
display:inline-block;
color:rgba(0,124,155,1);
border-bottom:2px solid;
font-size:2em;
line-height:1.3;
margin:0 auto 0.4em auto;
}


/*2024.2/20*/
#top_breakfast{
background:rgba(255,255,255,1);
text-align: center;
padding:2em 0 1em 0;
}
#top_breakfast h2 img{
padding:0 0.5em 0 0;
width:4em;
}
#top_breakfast h2{
font-feature-settings: "palt";
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight:bold;
display:inline-block;
color:rgba(267,108,0,1);
border-bottom:2px solid;
font-size:2em;
line-height:1.3;
margin:0 auto 0.4em auto;
}
#top_breakfast p{
font-feature-settings: "palt";
font-size:medium;
line-height:1.7;
color:rgba(267,108,0,1);
}

#fades {width:100%;height:auto;overflow:hidden;margin:0 auto;position:relative;right: 0; z-index: 1;
}
#fades .infad, #fades .fadeimg{max-height:100%;height:85vh;background:#000;}
#fades .infad{z-index: -1;margin: 0;position: relative;width: 100%;overflow:hidden;}
#fades .fadeimg{position: absolute;top: 0;right: 0;width: 100%;background:url(../../images/topimg01.jpg) center 0 no-repeat;}


#maintitle{
position:absolute;bottom:20px;left:0;right:0;
text-align: center;}

#maintitle h1{line-height:1.4;
text-shadow: 0 0 5px rgba(0,0,0,0.5),0 0 20px rgba(0,0,0,0.5);}
#maintitle h1 span{display: block;}
#maintitle h1 span.eng{
display:inline-block;
color:rgba(255,255,255, 1) ;
font-family: 'Oswald', sans-serif;
padding:0; line-height:1;letter-spacing:0.01em;font-variant-ligatures: none;
font-size:3.9em;opacity:0.7;}
#maintitle h1 span.jpn{color:rgba(255,255,255,1); font-size:large;font-weight:bold;letter-spacing:0.1em; padding:0.7em 0 0 0;}


#maintitle #playmovie{
margin:0 auto 2em auto;
padding:0.5em;
font-weight:bold;
line-height:1.2;
font-size:xx-small;
letter-spacing:1px;
display: flex;
flex-flow: column;
justify-content:center;
text-align:center;
width:6.5em;
height:6.5em;
border:1px solid;
border-radius:50%;
}
#maintitle #playmovie span{display: block;}
#maintitle #playmovie span.bicon{font-size:1.8em;}

#maintitle a:link,
#maintitle a:visited{
color:rgba(50,200,255,1);
text-shadow: 0 0 5px rgba(0,0,0,0.8),0 0 20px rgba(0,0,0,0.5);
}
#maintitle a:hover{opacity:0.9;}
#maintitle a:active{opacity:0.95;}






#appeal{width:100%;background:rgba(255,255,255,1);}
#appeal ul{
box-sizing: border-box;
max-width:1080px;
width:100%;
display:flex;
justify-content: center;
align-items: center;
padding:1em;
margin:0 auto;
}
#appeal ul li{width: calc(100% / 4);font-size:medium;font-weight:bold;}
#appeal ul li.vaccination{
background:url(../../images/vaccination_bg.svg),linear-gradient(90deg,rgba(0,187,122,1),rgba(0,160,0,1));
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: rgba(255,255,255,1);
}
#appeal ul li a{
padding:0.2em 0;
display:flex;
justify-content: center;
align-items: center;
}
#appeal ul li.vaccination a:link,
#appeal ul li.vaccination a:visited,
#appeal ul li.vaccination a:active {color:rgba(255,255,255,1);}
#appeal ul li.vaccination a:hover {color:rgba(255,255,255,0.7);}

#appeal ul li img{
padding:0.5em;
width:3.5em;
}
#appeal ul li p{
padding:5px 0 0 0;
line-height:1.4;
font-size:medium;
}
#appeal ul li span{
display: block;
}

#topbar,
#introduction{
box-sizing: border-box;
width:100%;
margin:0 auto;
}
#topbar{
background:rgba(255,255,255,1);
padding:7px;
}
#topbar ul{
box-sizing: border-box;
line-height:1.5;
text-align:center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
}
#topbar ul li,
#topbar ul li img{border-radius:0.5em;
}

#topbar ul li{position: relative; box-sizing: border-box;
width: calc(100% / 4);
border:7px solid rgba(0,0,0,0);
}
#topbar ul li img{object-fit: cover;vertical-align:bottom;line-height:0;max-height:100%;height:25em;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.7);}
#topbar ul li img.photos{object-fit: cover;height:100%;box-shadow:none;}
#topbar ul li dl.no{background: none;}
#topbar ul li dl{padding:7em 1.5em 0.8em 1.5em;border-radius:0 0 0.5em 0.5em;
background:linear-gradient(rgba(255,255,255,0),rgba(0,0,0,0.7));
position:absolute;bottom:0vw;left:0;right:0;}
#topbar ul li dt{font-size:large;line-height:1.7;}
#topbar ul li dt.ent{font-family: 'Oswald', sans-serif;
color:rgba(50,200,255,1);
font-size:3.6em;
line-height:1.3;
opacity:0.8;
}
#topbar ul li dd{font-size:small;}
#topbar ul li a:link,
#topbar ul li a:visited,
#topbar ul li a:active {color:rgba(255,255,255,1);}
#topbar ul li a:hover {color:rgba(255,255,255,0.8);}

#introduction{
background: url(../../images/icon/titleiconw.png) no-repeat center bottom -25vw / auto 50vw,rgba(0,136,161,1);
padding:5em 0;
box-sizing: border-box;
display:flex;
justify-content:center;
}
#introduction h2{
background:url(../../images/icon/2023icon06.png) no-repeat left 1em bottom 1em / 37px auto,
linear-gradient(rgba(0,136,161,1),rgba(0,136,161,0.8), rgba(0,136,161,0));
position:absolute;top:0;left:0;right:0;
text-align:left;
font-size:medium;
line-height:1.5;
padding:0 0 3em 1em;
}
#introduction h2 strong{
font-weight:normal;
display: block;
font-family: 'Oswald', sans-serif;
font-size:2.5em;
opacity:0.6;
}
#introduction ul{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#introduction ul li.title{padding:0 3em 0 4em;
display: flex;
flex-direction: column;
justify-content: center;
}
#introduction ul li.title h2 storng{
font-size:0.7em;
}
#introduction ul li.title h2{
text-align:left;
position:inherit;top:0;left:0;right:0;
padding:0 0 0.5em 0;
color:rgba(255,255,255,1);
background:none;
}
#introduction ul li.title p{
color:rgba(255,255,255,1);
font-size:small;
line-height:1.7;
}
#introduction ul li{position: relative; box-sizing:border-box;
width: calc(100% / 4);}
#introduction ul li img{object-fit: cover;vertical-align:bottom;line-height:0;height:25em;box-shadow:0px 5px 5px 0px rgba(0,0,0,0.3);}

#introduction ul a:link,
#introduction ul a:visited,
#introduction ul a:active {color:rgba(255,255,255,1);}
#introduction ul li a:hover {color:rgba(255,255,255,0.8);}

#topcontents{
width:100%;
box-sizing: border-box;
background: url(../../images/icon/titleicon.png) no-repeat center top -25vw / auto 50vw,rgba(255,255,255,1);
display: grid;
grid-template-columns:75% 25%;
}
#topcontents div{box-sizing: border-box;}
#topcontents div ul{margin:0 auto;}
#topcontents h2{
color:rgba(0,136,161,1);
font-size:medium;
line-height:1.5;
padding:0 0 2em 0;
}
#topcontents h2 strong{
font-weight:normal;
display: block;
font-family: 'Oswald', sans-serif;
font-size:3em;
}

#topcontents div.news{
box-sizing: border-box;
width: 100%;
padding:4em 5em;
}
#topcontents div.news ul{
}
#topcontents div.news ul li{
border-bottom:1px solid rgba(0,0,0,0.3);
font-size:medium;
line-height:1.7;
padding:1.5em 2em 0.5em 0;
}
#topcontents div.news ul li span{
float: right;
font-size:small;
line-height:3;
color:rgba(150,150,150,1);
}
#topcontents div.news ul a:link,
#topcontents div.news ul a:visited,
#topcontents div.news ul a:active {color:rgba(0,0,0,1);}
#topcontents div.news ul a:hover {color:rgba(0,0,0,0.5);}

#topcontents div.etc{
width:100%;
box-sizing: border-box;
margin:0 auto;
padding:1px;
display:flex;
align-items:center;
}

#topcontents div.etc ul{
width:100%;
box-sizing: border-box;
display: grid;
grid-template-columns:50% 50%;
gap:1px;
grid-auto-rows: minmax(10em, auto);
}
#topcontents div.etc ul li{
text-align: center;
position: relative;
box-sizing: border-box;
/*width: calc(100% / 2);*/
font-size:small;
line-height: 1.5;
}
#topcontents div.etc ul li img{object-fit: cover;vertical-align:bottom;line-height:0;max-height:100%;height:13em;}
#topcontents div.etc ul li span{position:absolute;bottom:0;left:0;right:0;padding:50% 0 0.5em 0;
background:linear-gradient(rgba(255,255,255,0),rgba(0,0,0,0.5));
}
#topcontents div.etc ul li a:link,
#topcontents div.etc ul li a:visited,
#topcontents div.etc ul li a:active {color:rgba(255,255,255,1);}
#topcontents div.etc ul li a:hover {color:rgba(255,255,255,0.8);}

#sns{
width:100%;
background: url(../../images/icon/titleiconw.png) no-repeat center bottom -25vw / auto 50vw,rgba(0,100,161,1);
text-align:center;
padding:4em 0;
}
#sns h2{
color:rgba(255,255,255,1);
font-size:medium;
line-height:1.5;
padding:0 0 2em 0;
}
#sns h2 strong{
font-weight:normal;
display: block;
font-family: 'Oswald', sans-serif;
font-size:3em;
}
#sns ul{
display:flex;
justify-content:center;
align-items:center;
box-sizing: border-box;
padding:0 5em;
}
#sns ul li{
line-height:1.7;
padding:0 1em;
width:calc(100% / 5);
}
#sns ul li img{width:3.5em;}
#sns ul li span{
display:block;
padding:0 ;
font-size:small;
}
#sns ul a:link,
#sns ul a:visited,
#sns ul a:active {color:rgba(255,255,255,1);}
#sns ul a:hover {color:rgba(255,255,255,0.8);}

#award{
width:100%;
background: url(../../images/icon/titleicon.png) no-repeat center top -25vw / auto 50vw,rgba(255,255,255,1);
text-align:center;
padding:4em 0;
}
#award h2{
color:rgba(0,136,161,1);
font-size:medium;
line-height:1.5;
padding:0 0 2em 0;
}
#award h2 strong{
font-weight:normal;
display: block;
font-family: 'Oswald', sans-serif;
font-size:3em;
}
#award ul{
box-sizing: border-box;
width:100%;
margin:0 auto;
padding:0 4em;
display:flex;
align-items:center;
flex-wrap:wrap;
justify-content: center;
}
#award ul li{
width:calc(100% / 6);
padding:0 0 3em 0;
box-sizing: border-box;
}
#award ul li img{
width:7em;}


@media only screen and (max-width: 1024px) {
#maintitle h1 span.eng{font-size:2.5em;}
#maintitle h1 span.jpn{font-size:medium;}

#appeal ul{max-width:100%;}

#appeal ul li{font-size:small;}

#topbar{padding:5px;}
#topbar ul li{border:5px solid rgba(0,0,0,0);}
#topbar ul li img{height:21em;}
#topbar ul li dl{padding:50% 1em 0.8em 1em;}
#topbar ul li dt{font-size:medium;line-height:2;}
#topbar ul li dt.ent{font-size:2.5em;}
#topbar ul li dd{font-size:small;}

#introduction{padding:3em 0;}
#introduction h2{
background:url(../../images/icon/2023icon06.png) no-repeat left 1em bottom 1em / 2em auto,
linear-gradient(rgba(0,136,161,1),rgba(0,136,161,0.8), rgba(0,136,161,0));
font-size:medium;}
#introduction h2 strong{font-size:2em;}
#introduction ul li.title{padding:0 1em;}
#introduction ul li.title h2 storng{font-size:small;}


#topcontents h2{font-size:medium;line-height:1.5;padding:0;}
#topcontents h2 strong{font-size:2.5em;}
#topcontents div.news{padding:3em 4em;}
#topcontents div.news ul li{font-size:small;}
#topcontents div.news ul li span{line-height:2;}
#topcontents div.etc ul{grid-auto-rows: minmax(8em, auto);padding:2em 0;}
#topcontents div.etc ul li{line-height: 1.3;}
#topcontents div.etc ul li img{height:10em;}
#topcontents div.etc ul li span{position:absolute;bottom:0;left:0;right:0;padding:5em 0 1em 0;}

#sns,#award{padding:2em 0;}
#sns h2 strong{font-size:2.5em;}
#sns ul li img{width:3em;}

#award h2 strong{font-size:2.5em;}
#award ul li{padding:0 0 2em 0;}
#award ul li img{width:6em;}

}


@media only screen and (max-width: 960px) {
}

@media only screen and (max-width: 820px) {
#fades .infad, #fades .fadeimg {height:60vh;}

#appeal ul li img{padding:0 0.5em;width:3em;}
#appeal ul li p{font-size:small;}

#topbar ul li img{height:18em;}
#topbar ul li dl{padding:50% 0.5em 0.5em 0.5em;}
#topbar ul li dt.ent{font-size:2em;}

#introduction{padding:2em 0;}
#introduction h2{padding:1em 0 3em 1em;font-size:small;}
#introduction h2 strong{font-size:2.1em;}
#introduction ul li{width: calc(100% / 2);}
#introduction ul li img{height:12em;}
#introduction ul li.title p{font-size:small;line-height:1.6;}

#topcontents{width:100%;display: block;}
#topcontents h2{text-align: center; font-size:medium;line-height:1.5;padding:0;}
#topcontents div.news{padding:2em 7em;}

#topcontents div.etc ul{padding:2em 7em;
grid-template-columns:25% 25% 25% 25%;
grid-auto-rows: minmax(5em, auto);}
#topcontents div.etc ul li img{height:10em;}
#topcontents div.etc ul li span{padding:5em 0 1em 0;}

#sns,#award{padding:2em 0;}
#sns h2 strong,#award h2 strong{font-size:2em;}
#sns ul li img{width:3em;}

#sns ul li{line-height:1.5;padding:0 0.5em;}
#sns ul li img{width:3em;}
#sns ul li span{font-size:x-small;}

#award ul li img{width:5em;}

}

@media only screen and (max-width: 736px) {
}

@media only screen and (max-width: 667px) {
#fades .infad, #fades .fadeimg {height:70vh;}
#maintitle h1 span.eng{font-size:2em;}
#maintitle h1 span.jpn{font-size:small;}

#appeal ul li p{font-size:x-small;}

#topbar ul li img{height:14em;}
#topbar ul li dt{font-size:small;line-height:1.5;}
#topbar ul li dt.ent{font-size:1.8em;}
#topbar ul li dd{font-size:small;}

#topcontents h2{font-size:small;}
#topcontents div.news{padding:2em 3em;}


#topcontents div.etc ul{padding:2em 3em;}

#topcontents div.etc ul li img{height:12em;}

#topcontents div.etc ul li{font-size:x-small;line-height: 1.5;}

#sns,#award{padding:1em 0;}
#sns h2,#award h2{padding:0 0 1em 0;}
#sns ul{align-items:stretch;padding:0 2em;}
#sns ul li img{width:2.5em;}

#award ul{padding:0 1em;}
#award ul li{width:calc(100% / 3);
padding:0 0.5em 1em 0.5em; }
#award ul li img{width:5em;}

}

@media only screen and (max-width: 568px) {
#maintitle{bottom:10px;}

#appeal ul{padding:0;}
#appeal ul li a{text-align: center;padding:1em 0 0.5em 0;display:block;}

#topbar{padding:3px;}
#topbar ul li{width: calc(100% / 2);border:3px solid rgba(0,0,0,0);}
#topbar ul li img{height:13em;}
#topbar ul li dl{padding:25% 0.5em 0.5em 0.5em;}
#topbar ul li dt.ent{line-height:1.5;}

#introduction{
background: url(../../images/icon/titleiconw.png) no-repeat center bottom -35vw / auto 70vw,rgba(0,136,161,1);
padding:1em 0 2em 0;}

#introduction h2{text-align: center;font-size:small;line-height:1.5;
background:url(../../images/icon/2023icon06.png) no-repeat center bottom 1em / 2em auto,
linear-gradient(rgba(0,136,161,1),rgba(0,136,161,0.8), rgba(0,136,161,0));
}
#introduction h2 strong{font-size:2em;}
#introduction ul li.title{width:100%; padding:0 2em 1em 2em;}
#introduction ul li.title h2{text-align:center;padding:0 0 1em 0;}
#introduction ul li.title p{font-size:small;}
#introduction ul li{width: calc(100% / 3);}
#introduction ul li img{height:10em;}


#topcontents div.news{
background: url(../../images/icon/titleicon.png) no-repeat center top -35vw / auto 70vw,rgba(255,255,255,1);}
#topcontents div.news{padding:2em 3em 1em 3em;}
#topcontents div.news ul{padding:0.5em 0 0 0;}
#topcontents div.news ul li{font-size:small;line-height:1.5;padding:1.7em 0 0 0;}
#topcontents div.news ul li span{text-align: right;display: block;float:none;font-size:small;line-height:1.5;}

/*#topcontents div.etc ul{grid-auto-rows: minmax(calc(100vw / 4), auto);}
#topcontents div.etc ul li img{height:calc(100vw / 4);}*/

#sns,#award{padding:1em 0;}
#sns h2,#award h2{font-size:small;}

#sns{background: url(../../images/icon/titleiconw.png) no-repeat center bottom -35vw / auto 70vw,rgba(0,100,161,1);}
#award{background: url(../../images/icon/titleicon.png) no-repeat center top -35vw / auto 70vw,rgba(255,255,255,1);}

#sns ul{padding:0 1em;}
#sns ul li img{width:2em;}


}

@media only screen and (max-width: 480px) {
#appeal ul li img{width:3.5em;}
#topbar ul li dt.ent{font-size:2.4em;}
#topcontents div.news{padding:2em 2em 1em 2em;}
#topcontents div.etc ul{grid-template-columns:50% 50%;padding:0;}
#topcontents div.etc ul li img{height:12em;}
#topcontents div.etc ul li span{padding:50% 0 0.5em 0;}

#sns ul{
display:flex;
align-items:center;
flex-wrap:wrap;
justify-content: flex-start;
}
#sns ul li{
width:calc(100% / 3);
padding:1em 0;
}
#sns ul li img{width:3.5em;}



#top_breakfast{
padding:1em 0;
}
#top_breakfast h2{
font-size:medium;
line-height:1.4;
}
#top_breakfast p{
font-size:small;
line-height:1.7;
padding:0 2.5em;
}



#systemchange{
padding:1em 0;
}
#systemchange p{
font-size:medium;
line-height:1.4;
}







}