@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
    background: url("../images/bg.jpg") top center repeat;
    scroll-behavior: smooth;
}
.footer {
    max-width: 1920px;
    margin: 0 auto;
    background: url("../images/bg.jpg");
}

/* PC */
.WRAPPER {
    position: relative;
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
@media screen and (max-width: 991px) {
    .WRAPPER {
        min-width: 100%;
    }
}
.container {
    overflow: hidden;
}
.topbox {
    position: relative;
    width: 1200px;
    margin: auto; /*height:  ; parallax*/
}
.kv_pc {
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    max-width: 1920px;
    margin: auto;
    flex-wrap: wrap-reverse;
}
.kv_pc img {
    display: block;
    text-align: center;
}
.kv_m {
    display: none;
}
.kv_m img {
    display: block;
}
.kv_m a {
    font-size: 0;
    display: block;
}
.for_pc {
    display: block;
}
.for_m {
    display: none;
}

/* m */
@media screen and (max-width: 991px) {
    .kv_m {
        display: block;
        width: 100%;
    }
    .kv_m img {
        width: 100%;
    }
    .kv_pc {
        display: none;
    }
    .container {
        width: 100%;
        min-width: auto;
    }
    .for_pc {
        display: none;
    }
    .for_m {
        display: block;
    }
    .for_m img {
        width: 100%;
    }
}

/* ----------------------CUSTOMERIZATION---------------------- */

/* -----------------COMMON----------------- */


/* ---------BACKGROUND-------- */

.bg-child{
    background: url("../images/bg-child.png") top center repeat-y, url("../images/bg02.jpg") center repeat-y;
    padding: 0 0 10px ;
}

.bg-ribbon{
    background: url("../images/bg-ribbon.png") top center repeat-y;
    padding: 50px 0 0;
}

.bg01 .titleR h2, .bg02 .titleR h2, .bg03 .titleR h2, .bg04 .titleR h2{
    background: url("../images/h2bg01.png") top center no-repeat;
    padding: 32px 0 38px;
    color: #ffe357;
}

.bg05 .titleR h2, .bg06 .titleR h2, .bg07 .titleR h2, .bg08 .titleR h2{
    background: url("../images/h2bg02.png") top center no-repeat;
    padding: 32px 0 38px;
    color: #ffe357;
}

.recommend{
    background: url("../images/color-b.jpg") repeat;
    border-radius: 40px;
}

.bg05box{
    background: url("../images/color-b.jpg") repeat;
    max-width: 1200px;
    border-radius: 40px;
    margin: 20px auto 40px;
    padding: 10px 0 0;
}

.half ul{
    background: url("../images/color-b.jpg") repeat;
    border-radius: 40px;
}

@media screen and ( max-width: 991px ){

    .bg01 .titleR h2, .bg02 .titleR h2, .bg03 .titleR h2, .bg04 .titleR h2{
        padding: 40px 0 45px;
    }
    
    .bg05 .titleR h2, .bg06 .titleR h2, .bg07 .titleR h2, .bg08 .titleR h2{
        padding: 40px 0 45px;
    }

}

@media screen and ( max-width: 640px ){

    .bg01 .titleR h2, .bg02 .titleR h2, .bg03 .titleR h2, .bg04 .titleR h2{
        background-size: 98vw;
        padding: 5.5vw 0 6vw;
    }
    
    .bg05 .titleR h2, .bg06 .titleR h2, .bg07 .titleR h2, .bg08 .titleR h2{
        background-size: 98vw;
        padding: 5.5vw 0 6vw;
    }

    .bg-ribbon{
        padding: 5vw 0 0;
    }

}

/* -----------BLOCK----------- */

.round_5p li {
    width: 155px;
}

.round_5p img {
    width: 150px;
    height: 150px;
}

.round_5p ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

@media screen and (max-width: 991px) {
    .round_5p img {
        border: 2px solid #926a3a;
    }

    .round_5p {
        width: 96vw;
        margin: 2vw auto;
    }
    .round_5p li {
        width: 44vw;
        margin: 2vw;
        padding: 0;
    }
    .round_5p img {
        height: 44vw;
        width: 44vw;
        margin: 0 auto;
    }
}

@media screen and (max-width: 991px){
    .bg03, .bg04, .bg07, .bg08{
        padding: 5vw 0 0 ;
    }
}

/*館別連結*/
.btn ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.btn ul li {
    margin: 10px auto 30px;
    text-align: center;
    border-radius: 30px;
}

@media screen and (max-width: 991px) {
    .btn ul li {
        width: 96vw;
        height: auto;
        margin: 2vw auto;
        padding: 6vw 0;
    }
}

@media screen and ( max-width: 640px ){

    .btn ul li {
        width: 100vw;
        margin: 2vw auto;
        padding: 0;
    }

    .btn ul li img{
        width: 80vw;
    }
}

/* ------------FONT----------- */



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

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


/* ------------------bg01------------------ */

.bg01{
	margin: 0 auto;
    padding: 40px 0;
}

.bg01box{
	display: flex;
	justify-content: center;
}

.btn01, .btn02, .btn03{
	transition-duration: 0.3s;
	transition-property: transform;
	transition-timing-function: ease-out;
    margin: 20px;
}

.btn01:hover, .btn02:hover, .btn03:hover{
	transform: scale(0.98);
}


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

@media screen and ( max-width: 640px ){

    .bg01{
        padding: 5vw 0;
    }

	.bg01box{
		justify-content: center;
    	flex-direction: column;
    	align-items: center;
	}

	.bg01 .titleC{
		background-size: 100vw;
		padding: 4vw 0;
		color: #098c8c;
	}
}


/* -----------------COMMON----------------- */



/*navigation bar for pc*/
/* Style the navbar */
#navbar {
    /*overflow: hidden;*/

    max-width: 100%;
    height: 60px;
    z-index: 999;
    margin: 0 auto;
    background: url("../images/menu.jpg");
}
@media screen and (max-width: 991px) {
    #navbar {
        display: none;
    }
    .sticky + .content {
        padding-top: 0px !important;
    }
}

.nav_content {
    width: 1200px;
    margin: 0 auto;
	padding: 10px 0;
}
/* Navbar links */
#navbar a {
    float: left;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 19%;
    margin: 0 2.5px;
    font-size: 24px;
    color: #fff;
    border-right: 0.5px dashed #ffffff;
    height: 40px;
    line-height: 40px;
    letter-spacing: 1px;
    /* font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; */
}

#navbar .row_05 a {
    border-right: none;
}
#navbar span {
    color: #000000;
}

/*#navbar a:hover{ transform: scale(.95)}*/

/* Page content */
.content {
    padding: 0px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 60px;
}
.nav_content img {
    transition: all 0.3s;
}
.nav_content img:hover {
    transform: translateY(-5px);
}

/*for mobile*/
menu {
    display: none;
}
@media screen and (max-width: 991px) {
    menu {
        display: block;
    }
}
menu ul {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    background: url("../images/menu.jpg") repeat;
    z-index: 1000;
    border-top: none;
}
menu ul li {
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 3vw;
    width: 20%;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
}
menu ul li a {
    font-size: 1rem;
    font-family: DFPingJuStd-W7_0;
}
menu ul li:nth-last-child(1) {
    border-right: none;
}
menu ul li:nth-child(5) {
    border-right: none;
}
menu a {
    color: #ffffff !important;
    text-decoration: none;
}

/*--goto top--*/
#gotop {
    display: inline-block;
    background-color: #000;
    opacity: 0.3;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 100%;
    position: fixed;
    bottom: 0px;
    right: 0px;
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    margin: 30px;
}
#gotop::after {
    font-family: FontAwesome;
    content: "　";
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
    opacity: 0.5;
    background: url(../images/top.png) center no-repeat;
    background-size: 50%;
    background-position: 50% 20%;
}
#gotop:hover {
    cursor: pointer;
    background-color: #666;
}
#gotop:active {
    background-color: #666;
}
#gotop.show {
    opacity: 0.4;
    visibility: visible;
}
@media screen and (max-width: 991px) {
    #gotop {
        bottom: 2vw;
        right: 0;
        margin: 2vw;
    }
}