@charset 'utf-8';

/* CSS Document */

/*
font-family: 'Merienda One', cursive;
font-family: 'Covered By Your Grace', cursive;
*/

/*
body,html{ height: 100%; min-height: 100vh; }
body{ overflow-y: scroll; } scroll always show ( for chrome )
body{ overflow-x: hidden }  Xscroll always noshow
@media (min-width:0) and (max-width:768px) { body { overflow-y: auto; }}
*/

/**/
html { background-color: #fce3df; overflow-x: hidden; overflow-y: scroll; }
body { min-height: 100vh; color: #222; background-color: #fce3df;}
main { position: relative; z-index: 10; }
i { line-height: 1 !important; }
.MainBg { position: absolute; z-index: 2; width: 100%; height: 100vh; background-color: rgba(180, 48, 119, 0); }
a { transition: all .2s ease; }
a:hover { transition: all .3s ease; }
.WebContainer { width: 100%; min-width: 310px; margin: 0 auto; }
.WebContainerMax { max-width: 1200px; }
.WebContainerMax-900 { max-width: 900px; }
.WebContainerMax-1200 { max-width: 1200px; }
.AnchorLink { height: 0; float: left; }
.AnchorLinkTarget:target { margin-top: -100px; padding-top: 100px; float: left; }
.OutScreen { position: absolute; top: -9000px; left: -9000px; height: 0; overflow: hidden; text-indent: -9000px; }
@media (min-width:601px) {
	footer { position: relative; z-index: 10; height: 90px; background-color: #fdf1ee; }
	.LayoutBigAll { width: 100%; height: 100%; min-height: calc(100vh - 90px);  }
	.LayoutBigAll.full { height: 100%; min-height: calc(100vh - 90px) !important; }
	.SectionMain { position: relative; min-height: 620px }
	.DivIndex-MainImg { position: relative; z-index: 10; top: 0vw; left: 50%; width: 60vw; max-width: 900px; max-height: 80vh; transform: translateX(-30%); }
	.DivIndex-MainLogo { position: absolute; z-index: 20; top: 8vw; left: 5vw; width: 40vw; max-width: 420px; }

	.BgFixed{  background-attachment: fixed; background-image: url('../_img/bg-page.png'); background-repeat: no-repeat ; background-position: center bottom; background-size: contain; }
}
@media (min-width:0) and (max-width:600px) {
	footer { position: relative; z-index: 10; height: 60px; background-color: #fff; }
	.LayoutBigAll { width: 100%; height: 100%; min-height: calc(100vh - 60px); overflow-x: hidden; }
	.LayoutBigAll.full { height: 100%; min-height: calc(100vh - 60px) !important; }
	.SectionMain { position: relative; min-height: 60vh }
	.DivIndex-MainImg { position: relative; z-index: 10; top: 0; left: 0; width: 100%; max-width: 600px; }
	.DivIndex-MainLogo { position: absolute; z-index: 20; top: 80px; left: 0vw; width: 50vw; max-width: 420px; }
	.DivIndex-Robe { display: none; }
}
@media (min-width:601px) and (max-width:1200px) {
	.SectionMain { position: relative; min-height: 450px }
}
@media (min-width:1201px) {
	.DivIndex-Robe { position: absolute; z-index: -1; top: 0; left: 0; width: 100vw; height: 100vh; }
	.DivIndex-Robe-1 { position: absolute; z-index: -1; top: 16vw; left: 90vw; width: 23vw; height: auto; opacity: .5; }
	.DivIndex-Robe-2 { position: absolute; z-index: -1; top: 18vw; left: -5vw; width: 20vw; height: auto; opacity: .4; }
	.DivIndex-Robe-3 { position: absolute; z-index: -1; top: 6vw; left: 8vw; width: 12vw; height: auto; opacity: .6; }
}
@media (min-width:0) and (max-width:1200px) {
	.DivIndex-Robe { display: none; }
}

/*Copright*/
.CoprightDiv { padding-top: 32px; }
.CoprightDiv ul { text-align: center; }
.CoprightDiv ul li { padding: 0 8px; display: inline-block; }
.CoprightDiv ul li img { height: 36px; }
@media (min-width:0) and (max-width:600px) {
	.CoprightDiv ul li img { height: 24px; }
	.CoprightDiv ul li { padding: 0 4px; display: inline-block; }
	.CoprightDiv { padding-top: 16px; }
}
@media (min-width:0) and (max-width:360px) {
	.CoprightDiv ul li img { height: 22px; }
	.CoprightDiv ul li { padding: 0 4px; display: inline-block; }
}

/**/
.w3-maincolor, .w3-hover-maincolor:hover { background-color: #0d0734 !important; }
.w3-text-maincolor, .w3-hover-text-maincolor:hover { color: #1a0e67 !important; }
.w3-border-maincolor, .w3-hover-border-maincolor:hover { border-color: #0d0734 !important; }
.w3-subcolor, .w3-hover-subcolor:hover { background-color: #cabb78 !important; }
.w3-text-subcolor, .w3-hover-text-subcolor:hover { color: #cabb78 !important; }
.w3-border-subcolor, .w3-hover-border-subcolor:hover { border-color: #cabb78 !important; }

/**/
h1.w3-fit-text { font-size: calc(22px + 1vw); line-height: 1.3; }
h2.w3-fit-text { font-size: calc(20px + .8vw); line-height: 1.3; }
h3.w3-fit-text { font-size: calc(20px + .6vw); line-height: 1.3; }
h4.w3-fit-text { font-size: calc(18px + .4vw); line-height: 1.3; }
h5.w3-fit-text { font-size: calc(18px + .2vw); line-height: 1.3; }
h6.w3-fit-text { font-size: calc(16px + .1vw); line-height: 1.3; }
p.w3-fit-text { font-size: calc(16px + .1vw); line-height: 1.6; }
table.w3-fit-text td, table.w3-fit-text th { font-size: calc(16px + .1vw); line-height: 1.6; }
table.w3-table-all-center td, table.w3-table-all-center th { text-align: center; vertical-align: middle; }
.FlexContainer-A { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch; }
p.w3-text { font-size: calc(18px); line-height: 1.8; }

/* CenterMiddle */
.Article-CenterMiddle { padding-top: calc((100vh - 60px) / 2); }
.CardBox { position: absolute; width: 90%; max-width: 600px; min-height: 600px; margin: 0 auto; margin-bottom: -100%; transform: translate(-50%, -50%); text-align: left; display: inline-block; }
@media (min-height:0) and (max-height:760px) {
	.Article-CenterMiddle { padding-top: 10vh; padding-bottom: 0vh; }
	.CardBox { position: relative; max-width: 600px; min-height: 400px; margin-bottom: 0; transform: translate(0%, 0%); }
}

/**/
.NoUse-Bg { background-color: #fefcfd; background-image: url(../_img/no-bg-L.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover; }
.NoUse-Box-1 { height: 70vh; min-height: 470px; }
.NoUse-Box-2 { min-height: 30vh; background-color: #fff; box-shadow: 0 -3px 15px 0 rgba(50, 50, 50, .2); }
@media (min-width:0) and (max-width:600px) {
	.NoUse-Bg { background-color: #fefcfd; background-image: url(../_img/no-bg-S.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top center; background-size: 100% auto; }
	.NoUse-Box-1 { height: 70vh; min-height: 100vw; }
	.NoUse-Box-2 { }
}

/* NavBar + w3-sidenav */
@media (min-width:0) and (max-width:600px) {
	.In-Mobile-Pole { height: 60px; }
	.Header-NavBar { background-color: #fff; border-bottom: 1px solid #f1f1f1; }
}
.openbtn { position: absolute; top: 16px; right: calc(60px + 0px); font-size: 42px; line-height: 1; color: #595959; transition: all .3s ease; display: block; }
.openbtn span { position: absolute; top: 0; left: 0; font-size: 16px; line-height: 1; font-weight: 600; transform: translate(-130%, 40%); }
.openbtn:hover { opacity: .6; transition: all .3s ease; }
.FbBtn { position: absolute; top: 16px; right: calc(20px + 0px); font-size: 28px; line-height: 1; color: #595959; transition: all .3s ease; display: block; }
.FbBtn:hover { opacity: .6; transition: all .3s ease; }
.LinkBtn { position: absolute; top: 18px; right: 16px; height: 28px; color: #595959; transition: all .3s ease; display: block; }
.LinkBtn:hover { opacity: .6; transition: all .3s ease; }
.LinkBtn img { height: 28px; }
.sidenav , .sidenav *{  white-space: nowrap;}
.sidenav { position: fixed; z-index: 20000; top: 0; left: 0; width: 0; height: 100%; background-color: RGB(91, 55, 106); padding-top: 0; overflow-x: hidden; transition: .5s; text-align: center; }
.sidenav .closebtn { position: absolute; top: 16px; right: 16px; font-size: 32px; line-height: 1; color: #fad6d1; }
.sidenav .closebtn:hover { color: #f1f1f1; }
.sidenav .sidenav-menu { position: absolute; top: 50%; left: 50%; margin-bottom: -100%; margin-right: -100%; transform: translate(-50%, -50%); text-align: left; }
.sidenav .sidenav-menu .menu-list > a { font-size: calc(20px + .4vw); line-height: 1.3; color: #fad6d1; margin: 12px 0; transition: .3s; white-space: nowrap!important; text-decoration: none; display: block; }
.sidenav .sidenav-menu .menu-list a:hover { color: #fff; opacity: 0.4; }
.sidenav .sidenav-menu .nolink{   color: #fad6d1!important; opacity: 1!important;}
.sidenav .sidenav-menu .nolink:hover{   color: #fad6d1!important; opacity: 1!important;}
.sidenav .sidenav-logo { width: 200px; opacity: .8; margin-top: 20px; }
div.submenu-list { position: relative; top: -8px; font-size: calc(18px + .1vw); line-height: 1.4; color: #fff; margin-bottom: -8px; margin-left: 0; }
div.submenu-list a { color: #fff; }
div.submenu-list a:hover { color: #fad6d1 !important; }
@media (min-width:0) and (max-width:600px) {
	.openbtn { right: calc(50px + 0px); font-size: 32px; line-height: 1; color: #595959; margin-top: 0; text-align: left; }
	.openbtn span { font-size: 14px; font-weight: 400; }
	.FbBtn { right: calc(10px + 0px); font-size: 28px; font-weight: 400; }
	.LinkBtn { right: 16px; margin-top: 2px; }
}

/**/
.img-radius-60 { border-radius: 60px; }
.img-radius-80 { border-radius: 80px; }
.img-radius-100 { border-radius: 100px; }
.PageTopBar { position: relative; height: 70px; min-height: 10vh; background-color: #f5b2ac; border-radius: 0 0 100px 100px; padding: 16px; padding-top: 16px; }
.PageTopBar img { position: relative; top: 16px; left: 16px; width: auto; height: 12vh; max-width: 80vw; max-height: 12vh; }
@media (min-width:0) and (max-width:600px) {
	.PageTopBar { height: 140px; min-height: 70px; border-radius: 0 0 50px 50px; padding-top: 64px; }
	.PageTopBar img { position: absolute; top: 80px;  max-width: 80vw;  }
}
.NewsList hr { margin: 0 0; padding: 0; }
.NewsList a { padding: 10px 0; transition: all .3s ease; display: block; }
.NewsList a:hover { background-color: #fff; padding-left: 24px; transition: all .4s ease; }
.IndexNews-Box { padding: 0 12px; text-align: center; }
.IndexNews-Box h3 { font-size: 18px; line-height: 1.2; margin-top: 12px; }
@media (min-width:0) and (max-width:600px) {
	.IndexNews-Box { padding: 0 6px; text-align: center; }
	.IndexNews-Box h3 { padding: 0 12px; }
}