/* CSS Document */
body{caret-color: transparent; background-color: #c3d94e;}
.printmap{display: none;}
/******* 初回パークチケット表示 ******/
#park_ticket{width: 100%; height: 100%; background: rgba(230,253,224,0.9); position: absolute; top: 0px; left: 0px; z-index: 300; }
.browser{font-size:36px; width: 29em; background-color: rgba(255,255,204,0.9); border-radius: 7px; border: 2px solid #e50012; color: #e50012; font-weight: bold; display: block; padding: 0.5em; margin:10vh auto 6vh auto; }
.ticket{display:flex; justify-content:center; align-items:center;}
.ticket_left{max-width: 606px; max-height: 369px; background-image:url("../images/top/ticket01.webp"); background-position: right top; background-repeat: no-repeat; background-size: cover; box-sizing: border-box; margin: 0; padding: 0; display: block; height: 50vh; width: 82vh; position: relative; font-size: 17px;}
img.welcome{position: absolute; top:0; left:5px; display: block; width: 78%; height: auto; max-width: 500px;}
img.mamoru{position: absolute; bottom:20px; right:40px; display: block; width: auto; height: 70%;}
p.p_welcome{position: absolute; top:40%; left:1.5em; display: block; width: 60%; height: auto; line-height: 145%;}
.ticket_right{max-width: 120px; max-height: 369px; background-image:url("../images/top/ticket02.webp"); background-position: left top; background-repeat: no-repeat; background-size: cover; text-align: right; margin: 0px; padding: 0; display: block; position: relative; height: 50vh; width: 16.26vh;}
.ticket_close{ width: 60px; height: 60px; max-width: 7vh; max-height: 7vh; border-radius: 50%; border: none; background-color: rgba(0,0,0,0.00); background-image: url("../images/top/top_close.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; text-decoration: none; margin-top: -20px; margin-right: -20px; cursor: pointer;}
#ticket_btn{background:#51a126; border: solid 2px #ffffff; border-radius: 7px 7px 7px 7px; padding: 5px 30px 5px 30px ; background-image: url("../images/top/top_arrow.svg"); background-size: 9px 15px; background-position: center left 8px; background-repeat: no-repeat; position: absolute; width:12em; bottom:20px; left:calc(50% - 6em); box-sizing: border-box; color:#ffffff; font-weight:bold; text-decoration: none; font-size: 16px; cursor: pointer;}/*入場ボタン*/
#ticket_btn:hover{background:#f15a24; background-image: url("../images/top/top_arrow.svg"); background-size: 9px 15px; background-position: center left 8px; background-repeat: no-repeat;}

/* チケットアニメーション */
.mogiri_right { transition:0.5s; animation: mogi_r 0.5s forwards;}
@keyframes mogi_r {0% {transform: rotate(0deg);}100% {transform: rotate(10deg);}}
.mogiri_left { transition:0.5s; animation: mogi_l 0.5s forwards;}
@keyframes mogi_l {0% {transform: rotate(0deg);}100% {transform: rotate(-10deg); }}
.mogiri_right02 { transition:0.5s; animation: mogi_r02 0.5s forwards;}
@keyframes mogi_r02 {0% {transform: rotate(10deg);}100% {transform: rotate(0deg);}}
.mogiri_left02 { transition:0.5s; animation: mogi_l02 0.5s forwards;}
@keyframes mogi_l02 { 0% {transform: rotate(-10deg);} 100% {transform: rotate(0deg);}}


/* さいたまこくほWebへのボタン */
.bt{clear: both; width: 100%; margin: 4em auto 0px auto; display:flex; justify-content:flex-end; align-items:center; flex-wrap: wrap; gap:1em; max-width: 133vh; padding: 0 1em; z-index: 2; position: relative; }
.bt img{width: 200px; height: auto; filter: drop-shadow(3px 3px 3px #777);}
.bt_top{margin: 1em auto 0 auto; font-size: 17px; text-align: right; max-width: 133vh; padding: 0 1em; font-weight: bold;}
.bt_top a{text-decoration: none; background-color: #ffffff; padding: 2px 6px 2px 22px; box-shadow: 2px 2px 4px #666666; border-radius: 5px; color: #51a126; background-image: url( "../images/arrow_top.svg"); background-size:auto 1em; background-repeat: no-repeat; background-position: left 4px top 0.3em;}
.bt_top a:hover{ text-decoration: none; background-color: #f15a24; color: #ffffff; background-image: url( "../images/arrow_top02.svg"); background-size:1em auto;}

.text_browser{position: relative; text-align: center; margin: 5em 1em 1em 1em; font-size: 80%;}

/* メイン **********/
main{background-color: var(--lightgreen); display: block; position: relative; width: 100%; margin: 0;}
/* ロゴ */
section.main{max-width: 133vh; width: 100%; display: block; margin: 0 auto; z-index:2; position: relative; padding: 0; }
.logo{background-image: url("../images/header_bg.svg"); background-size: contain; background-repeat: no-repeat; background-position: top -1px center; width: 118vh; height: 24vh; height:24dvh; margin: 0 auto; display:flex; justify-content:center; align-items:center; gap:1em; max-width: 90vw; max-height: 19vw; }
img.kokuho{margin-bottom: 5vh; max-width:162px; width:16vh; display: block;}
h1 img{margin-bottom: 5vh; margin-top: 10px; max-width:510px; width:60vh; display: block;}

/* パンくずリスト */
nav#breadcrumbs{position: absolute; top:5px; right: 0;}
nav#breadcrumbs ol{padding: 0px; width:1280px; margin:0px auto; text-align: right; padding-right: 120px;}
nav#breadcrumbs ol li{display: inline; list-style: none; font-size:80%; }
nav#breadcrumbs ol li:after{content: '>>'; display: inline-block; padding: 0 5px;}
nav#breadcrumbs ol li:last-child{color: #006633;}
nav#breadcrumbs ol li:last-child:after{content: ''; width: 1px; padding: 0;}
nav#breadcrumbs ol li a,nav#breadcrumbs ol li a:visited{color: #000; text-decoration:none; }
nav#breadcrumbs ol li a:hover{color: var(--green); text-decoration: underline; }

/* 雲の動き */
#clouds_loop01{position: absolute; left: 0; top: 0; height: 100%; width: 100%; overflow: hidden; z-index: 1;}
#clouds_loop01 img.cloud_a {width: 120px; height: auto; animation: slide1 14s linear 0s infinite ; position: relative; margin-top:50px; z-index: 2; opacity: 0;}
#clouds_loop01 img.cloud_b {width: 100px; height: auto; animation: slide2 10s linear 0s infinite ; position: relative; margin-top:120px; z-index: 2; opacity: 0;}
#clouds_loop01 img.cloud_c {width: 140px; height: auto; animation: slide3 12s linear 0s infinite ; position: relative; margin-top:100px; z-index: 2; opacity: 0;}
#clouds_loop01 img.cloud_d {width: 160px; height: auto; animation: slide4 14s linear 0s infinite ; position: relative; margin-top:0px; z-index: 2; opacity: 0;}
#clouds_loop01 ul {padding: 0; width: 100%;}
#clouds_loop01 li {width: 100%; list-style: none; text-align: center;}
@keyframes slide1 {0% {transform: translateX(0); opacity: 0 } 20% {opacity: 1} 90% {opacity: 1} 100% {transform: translateX(90vw); opacity: 0;} } 
@keyframes slide2 {0% {transform: translateX(95vw); opacity: 0 } 20% { opacity: 1} 90% { opacity: 1} 100% {transform: translateX(0vw); opacity: 0  } } 
@keyframes slide3 {0% {transform: translateX(5vw); opacity: 0 } 20% { opacity: 1} 90% { opacity: 1} 100% { transform: translateX(85vw); opacity: 0  } } 
@keyframes slide4 {0% {transform: translateX(90vw); opacity: 0 } 20% {opacity: 1} 90% {opacity: 1} 100% {transform: translateX(0vw); opacity: 0;} } 



/***********************************/
/* 横レイアウト　縦が700以下の場合 ******/
@media screen and (max-height:700px) and (orientation: landscape) {
.browser{font-size:3vh; width: 110vh;}
.ticket_left{font-size:2.2vh;}
#ticket_btn{font-size:2.2vh; border: solid 1px #ffffff; border-radius: 5px; padding: 0.2em 1em; background-size: 0.5em auto; background-position: center left 0.3em; width:11em; bottom:20px; left:1em; text-align: center;}
.ticket_close{margin-top: -1em; margin-right: -1em;}
img.mamoru{height: 60%;}
}

/***********************************/
/* タブレット縦 **********************/
@media screen and (max-width:840px)  {
/******* 初回パークチケット表示 ******/
/*チケット*/
.browser{font-size:3.2vw; width: auto; max-width: 90%; box-sizing: border-box; margin:4vh auto 4vh auto;}
.ticket{flex-direction: column-reverse; align-items:center; justify-content:flex-start;}
.ticket_right{max-height:9.23vh; max-width:36.36vh; height:9.23vh; width:36.36vh; background-image:url("../images/top/ticketbg02.webp"); }
.ticket_left{ max-height:60vh; max-width:36.36vh;background-image:url("../images/top/ticketbg.webp"); height:60vh; width:36.36vh;}
img.welcome{position: relative; top:0; left:0; text-align: center; width: 84%; height: auto; margin: 0 auto; }
img.mamoru{position: absolute; bottom:7.4vh; right:11vh; display: block; width: auto; height: 38%;}
p.p_welcome{position: relative; top:2em; left:0; display: block; width: 90%; margin:-25px auto 0 auto; font-size: 1.6vh; }
#ticket_btn{font-size: 2vh; width:14em; bottom:10px; left:calc(50% - 7em); }/*入場ボタン*/
img.ticket_close{width: 3.6em; height: 3.6em; margin-top: -16px; margin-right: -0.5em}
.text_browser{margin-top: 2em;}

nav#breadcrumbs{position: absolute; right: 0; top:0;}
nav#breadcrumbs ol{padding-right: 80px;}

/* ロゴ */
.logo{background-image: url("../images/header_bg.svg"); background-size: 100% auto; background-position: bottom center; width: 100%; height: 26vw; margin: 0; gap:0; max-width: 100vw; max-height: auto!important; text-align: center; align-items:flex-start;}
.logosp01{position: absolute; top:1em; left:15vw; width:14vw;} 
.logosp02{width:40vw; margin: 10px auto 0 auto;}
img.kokuho{margin-bottom: 0; max-width:auto; width:100%;}
h1 img{margin-bottom: 0; margin-top: auto; max-width:100%; width:100%;}
}

@media screen and (orientation: portrait) {
.text_browser{text-align: left;}
/* さいたまこくほWebへのボタン */
.bt{margin: -2em auto 0 auto; width: 100%; z-index: 2; position: relative; justify-content:center; gap:2vw; }
.bt img{max-width: 134px; height: auto; width: 28vw;}
.bt_top{ font-size: 15px; max-width: 100%; z-index: 3; position: relative;}
}
@media screen and (max-width:440px) and (orientation: portrait) {
nav#breadcrumbs{position: relative; top:0; right: 0; left: 0; display: block; font-size: 80%;}
nav#breadcrumbs ol{padding: 0px; width:100vw; margin:0px auto; text-align: left; padding-right: 0; padding-left: 1em;}
.logosp02{margin: 0px auto;width:38vw;}.logosp01{position: absolute; top:1.5em; left:19vw; width:12vw;} 
}