@charset "utf-8";
/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

body{background:#F7FCF0; background-image: url("../img/bg.png"); background-repeat: repeat; color:#000000; font-size:2.6vmin; line-height:120%; font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:auto;
-webkit-text-size-adjust: 100%;/* iphone横向でルビ指定の文字サイズが小さくなるのを回避 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

@media screen and (max-width:150vh) and (orientation: landscape) {
	body{font-size:2.4vmin;}
}
@media screen and (max-width:140vh) and (orientation: landscape) {
	body{font-size:2.3vmin;}
}
@media screen and (max-width:130vh) and (orientation: landscape) {
	body{font-size:2.1vmin;}
}
@media screen and (max-width:120vh) and (orientation: landscape) {
	body{font-size:1.8vmin;}
}





ul{list-style: none;}
img { image-rendering: -webkit-optimize-contrast;}

.bg_pink{color: #ffffff; background-color: #ef6c82;}
.bg_white{color: #000000; background-color: #ffffff;}
.bg_orange{color: #ffffff; background-color: #f7931e;}
.orange{color: #f7931e;}
.red{color: #c1272d;}
.green{color: #285652;}
.brown{color: #66443c;}
.blue{color: #2e3192;}
.b{font-weight: bold;}
.change_bg{padding-top: 0.4em;}

/*=== ルビ ===*/

rt{font-size:100%; zoom:0.6;}

/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root rt{ font-size:0.4em; zoom:1;}
}
/* Firefox */
_:lang(x)::-moz-placeholder, rt {margin-bottom: -0.5em; margin-top: 0em; font-size: 0.4em;}


*******************************************


/*=== ローディング画面 ===*/
#splash {position: fixed; width: 100%; height: 100%; background: #285652; z-index: 9999999; text-align:center; color:#fff;}
#splash-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff;}
#splash_quiz {position: fixed; width: 100%; height: 100%; background: #fffff; z-index: 9999999; text-align:center; color:#fff;}
#splash-logo_quiz { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/*===スマホ横向きメッセージ表示===*/
.sp_landscape{display: none; font-size: 2.5em;}

/*===フルスクリーン表示===*/
#content { height: 100vh; /* CSS変数をサポートしていないブラウザ用のフォールバック */ height: calc(var(--vh, 1vh) * 100); width: 100vw;}

/*===文字色設定===*/
#textstyle {text-align: center; background-color: #80aa44; border: 3px solid #ffffff; border-radius: 0.6em; padding: 0.25em; width:auto; height: auto; text-align: center; position: absolute; top:1em; right: 4em; overflow: hidden;}
#textstyle ul{margin: 0px; padding: 0px 0.5em; width: 100%; list-style: none; list-style-position: inside; display: flex; justify-content:center; align-items:center; background-color: #f8f9ca; border-radius: 0.5em; overflow: hidden;} 
#textstyle ul li{ margin: 0.25em 0em; padding: 0; display: flex; justify-content:center; align-items:center;}
#textstyle ul li.color_bt01{border-right: 1px solid #000000; padding-right: 0.2em; margin-right: 0.5em}
#textstyle ul li span{display: flex; justify-content:center; align-items:center; cursor:pointer;}
#textstyle ul li span img{width: 1.8em; height: auto; max-width: 45px; margin: 0;}
#textstyle ul li.color_bt02 span{padding-right: 0.2em; }
#textstyle ul li.color_bt03 span{padding-right: 0.2em; }

/*===*ページタイトル===*/
#pagetitle{background-image: url("../img/retina01/pagetit01.png");
background-image: image-set(url("../img/retina01/pagetit01.png") 1x, url("../img/retina02/pagetit01.png") 2x);
background-image: -webkit-image-set(url("../img/retina01/pagetit01.png") 1x, url("../img/retina02/pagetit01.png") 2x);
background-size: auto 3em; background-repeat: no-repeat; background-position: left 1em center; display:flex; justify-content:flex-start; align-items:center; font-size:1.6vw; width: 74%; height: 100%; text-align: left; float: left; padding-left: 7.5em; }
.pagetitle{width: 100%; padding-right: 0.5em;}
.pagetitle h1{font-size: 1em; padding-left: 1em; padding-right: 1em; padding-bottom: 0.1em; border-radius: 0.6em; display:block;}
.pagetitle h2{font-size: 1.1em; color:#ffffff; background-color:#285652; padding: 0.2em 0.5em; border-radius: 0.5em; display: inline-table; }
h4 {color: #285652; border-left:1em solid #285652; margin: 1em 0em; font-size: 1.2em; padding: 0.3em 0.5em 0em 0.5em; display: inline-table; line-height: 180%;}

/*===*現在地表示===*/
h3{width: 100%; display: block; margin: 0; position: absolute; bottom: 0px; height:15%; text-align: center; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; -webkit-font-smoothing:subpixel-antialiased; font-size: 1em; }
.h3{height:100%; width: 80%; margin: 0 auto; display: block; position: relative; }
.h3 img{width: 0.8em; height: 0.8em; margin: 0 0.1em 0.2em 0.1em;} .h3 img:first-child{ margin-left: 0.3em;}
.page_num{font-size: 130%; margin-left: 0.3em; }
img.first_pagenum{margin-left: 0.3em;}
.h3_toyama .page_num{margin-left: 0em; }
.pagenum01,.pagenum02,.pagenum03,.pagenum04,.pagenum05,.pagenum06{z-index: 5;}
.h3_color,.h3_color02{display:block; color: #ffffff;}

.h3 rt{ font-size:100%; zoom:0.46;}
/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .h3 rt{ font-size:0.36em; zoom:1;}
}
/* Firefox */
_:lang(x)::-moz-placeholder, .h3 rt{margin-bottom: -0.5em; margin-top: 0em; font-size: 0.36em;}

/*===大枠===*/
header{width: 100%; display: block; height: 15%;}
main{width: 100%; display: block; text-align: center; padding: 5px 10px 0px 10px; position: relative; height: 80%;}
footer{width: 100%; font-size: 0.6em; display: block; text-align: center; height: 5%;}

/*ロケーション緑背景*/
article{max-width: 100%; max-height: 100%; margin: 0px auto; padding: 0px; width: calc(var(--vh, 1vh) * 100 * 1.45); height: calc(100vw * 1.66 / 3); border-radius: 0.5em; background-image: url("../img/location_bt.svg"); background-size: auto 17%; background-repeat:no-repeat; background-position: center bottom 0.4em ; position: relative;}
.article02{max-width: 100%; max-height: 100%; margin: 0px auto; padding: 0px; width: calc(var(--vh, 1vh) * 100 * 1.45); height: calc(100vw * 1.66 / 3); border-radius: 0.5em; background-image: url("../img/location_bt02.svg"); background-size: auto 17%; background-repeat:no-repeat; background-position: center bottom 0.4em ; position: relative;}

@media screen and (max-width:150vh) and (orientation: landscape) {
article{background-position: center bottom 0.58em ;}
.article02{background-position: center bottom 0.58em;}
h3{position: absolute; bottom: 3px; height:13%; }
}


/*フレーム*/
.flame{padding-top: 1.5em; padding-bottom: 0; padding-left: 1.5em; padding-right: 1.5em; width: 100%; height: 100%; background-image:url("../img/flame.svg"); background-position: center center; background-repeat: no-repeat; background-size: contain;  position: absolute; top: 0; left: 0; display: block; overflow: hidden;}
.flame02{padding-top: 1.5em; padding-bottom: 0; padding-left: 1.5em; padding-right: 1.5em; width: 100%; height: 100%; background-image:url("../img/flame02.svg"); background-position: center center; background-repeat: no-repeat; background-size: contain;  position: absolute; top: 0; left: 0; display: block; overflow: hidden;}

/*コンテンツ内容*/
.scene{width: 100%; height:84%; overflow:auto; background-color: #ffffff; position: relative; text-align: left;}

/*メインとなる説明文*/
.maintext{font-weight: bold; background-image:url("../img/waku_r.svg"),url("../img/waku_l.svg"); background-position:left top,right bottom; background-repeat:no-repeat,no-repeat; background-size: 2em auto,2em auto; padding:1.5em 1.5em 0.5em 1.5em; }

/*吹き出し*/
.speach,.speach_yokor,.speach_yokol{padding: 0.9em 0.5em 0.7em 0.5em; color: #555; background: #fcfbf7; border-radius: 15px; border: 2px solid #cebaaa; overflow: visible; width:auto; z-index: 2; position: relative; display: inline-table; }
.speach p,.speach_yokor p,.speach_yokol	 p{display: inline-table;}
.speach:before  {content: "　"; position:absolute; top: 100%; left: 50%; margin-left: -22px; margin-top: -1px; background-image: url("../img/speach.svg"); background-size:contain; background-repeat: no-repeat; background-position: center top; height: 12px; z-index: 2;}
.speach span,.speach_yokor span,.speach_yokor span{ margin: 0; padding: 0;}
.speach_yokor:before  {content: "　"; position:absolute; top: 50%; left:100%; margin-left: -1px; margin-top: -22px; background-image: url("../img/speach02.svg"); background-size:contain; background-repeat: no-repeat; background-position: left bottom; height: 22px; z-index: 2;}
.speach_yokol:before  {content: "　"; position:absolute; top: 50%; right: 100%; margin-right: -1px; margin-top: -22px; background-image: url("../img/speach03.svg"); background-size:contain; background-repeat: no-repeat; background-position: right bottom; height: 22px; z-index: 2;}


/*ここをタッチエリア*/
.touch_area,.touch_area02{font-weight: bold; align-items:center;}
.touch_area span{cursor: pointer; background-color: #fcfbf7; border: 2px #cebaaa solid; border-radius: 2em; padding: 0.2em 1em; font-weight: bold; color: #66443c; display: inline-table; background-image: url("../img/arrow_touch.svg"); background-size:auto 1em; background-repeat: no-repeat; background-position: right 0.2em center; padding-right: 2em; box-shadow: 2px 2px 4px #666666; margin-top: 0.5em; margin-left: 0.5em;}
.touch_area img{width: 4em; height: auto; animation: touchmove 2s linear infinite;}

.touch_area02 span{cursor: pointer; background-color: #2a2854; border: 2px #ffffff solid; border-radius: 2em; padding: 0.2em 1em; font-weight: bold; color: #ffffff; display: inline-table; background-image: url("../img/arrow_touch02.svg"); background-size:auto 1em; background-repeat: no-repeat; background-position: right 0.2em center; padding-right: 2em; box-shadow: 2px 2px 4px #666666; margin-top: 0.5em; margin-left: 0.5em;}
.touch_area02 img{width: 4em; height: auto; animation: touchmove 2s linear infinite;}

@keyframes touchmove {
0%   { transform: scale(1.1) rotate(0deg); }
50% { transform: scale(1) rotate(15deg);}
100% { transform: scale(1.1) rotate(0deg); }
}

/*注釈*/
.annotation{font-size: 0.8em;}

/*topへ戻る*/
.top_back_bt{background-color: #fcfbf7; border: 2px solid #cebaaa; color: #285652; font-weight: bold; border-radius: 0.5em; display: inline-table; padding: 0.1em 0.7em  0.1em 1.7em; background-image: url("../img/home.svg"); background-size: auto 1em; background-repeat: no-repeat; background-position: left 0.5em center; box-shadow: 2px 2px 4px #666666; position: absolute; top: 1em; right: 1.5em; z-index: 2;}
.top_back_bt02{background-color: #f6f6ef; border: 2px solid #cebaaa; color: #283554; font-weight: bold; border-radius: 0.5em; display: inline-table; padding: 0.1em 0.7em  0.1em 1.7em; background-image: url("../img/home02.svg"); background-size: auto 1em; background-repeat: no-repeat; background-position: left 0.5em center; box-shadow: 2px 2px 4px #666666; position: absolute; top: 1em; right: 1.5em; z-index: 2;}
.top_back_bt a, .top_back_bt a:hover{color: #285652; text-decoration: none;}
.top_back_bt02 a, .top_back_bt02 a:hover{color: #283554; text-decoration: none;}

/*シーン切替ボタン*/
.scene_bt{width: 100%; height:15%; position: relative; bottom: 0; left: 0;} .scene_bt rt{ font-size:100%; zoom:0.5;}
/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .scene_bt rt{ font-size:0.4em; zoom:1;}
}
/* Firefox */
_:lang(x)::-moz-placeholder, .scene_bt rt{margin-bottom: -0.5em; margin-top: 0em; font-size: 0.4em;}

.scene_bt p{ box-shadow: 2px 2px 4px #666666; background-color: #fcfbf7; border: 2px #cebaaa solid; border-radius: 2em; padding: 0.2em 1em; font-weight: bold; color: #66443c; display: inline-table; }
.scene_bt p.pre_bt{cursor: pointer; background-image: url("../img/arrow02.svg"); background-size:1.3em auto; background-repeat: no-repeat; background-position: left 0.2em center; padding-left: 2em; position: absolute; left: 0; bottom: 0.5em;}
.scene_bt p.next_bt{cursor: pointer; background-image: url("../img/arrow01.svg"); background-size:1.3em auto; background-repeat: no-repeat; background-position: right 0.2em center;  padding-right: 2em; position: absolute; right: 0; bottom: 0.5em;}
.next_page{border: none; position: absolute; right: 0; bottom: 0.5em;}

.scene_bt a {color: #66443c; text-decoration: none; border:none;}
.scene_bt a:hover {color: #66443c; text-decoration: none; border:none;}
.scene_bt p a,a.next_page,.scene_bt p.pre_bt a,.scene_bt p.next_bt a,.scene_bt p a:hover,a.next_page:hover,.scene_bt p.pre_bt a:hover,.scene_bt p.next_bt a:hover {border:none;}

/*遷移アニメーション*/
body{ background:#285652;}
body.quiz{background:#ffffff;}
body.appear{background:#F7FCF0; background-image: url("../img/bg.png");background-repeat: repeat;}
.splashbg{ position: fixed; top: 0; right:0; bottom:0; left: 0; border-width: 0px; border-style:solid; border-color: #666; animation-duration:.5s; animation-fill-mode:forwards;}
@keyframes backBoxAnime{
99.9% {z-index: 2; border-width: 0px; }
100%{z-index: -1; border-width: 0px;}
}
/*遷移後現れるコンテンツ*/
#container{ position: relative; opacity: 0;}
/*bodyにappearクラスがついたら*/
body.appear #container{ animation-name:PageAnimeAppear; animation-duration:1s; animation-delay:0.2s; animation-fill-mode:forwards; opacity: 0;}
@keyframes PageAnimeAppear{ 0% { opacity: 0; }  100% { opacity: 1;}}

/*==================================*/
/*=========グローバルメニュー=========*/
/*==================================*/

/*表示後の画面*/
.globalMenuSp {position:fixed; top: 0; left: 0; visibility:hidden; z-index : 8; color: #000; background:rgba(128,170,68,0.9); text-align: center; width: 100vw; height: 100vh; display:flex; justify-content:center; align-items:center; transform: translateX(100%); transition: all 0.6s;}
.g_menu{display: block; width:100%; height: auto; margin: auto 0;}
.globalMenuSp a,.globalMenuSp a:hover{color: #000000; text-decoration: none;}
.chousa_nav{width:90%; max-width: 1100px; height: auto; margin: 0 auto; padding-top: 0.8em; overflow:hidden; clear: both; display: block;}
.chousa_nav{background-image: url("../img/menu/retina01/tit01.png");
background-image: image-set(url(../img/menu/retina01/tit01.png) 1x, url(../img/menu/retina02/tit01.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/tit01.png) 1x, url(../img/menu/retina02/tit01.png) 2x);
background-size: 14% auto; background-repeat: no-repeat; background-position: right 0 top 1em; }


.top_nav{text-align: center; float: left; margin-right: 0.5em; padding-top: 0.5em; padding-bottom: 0px;
background-image: url("../img/menu/retina01/start.png");
background-image: image-set(url(../img/menu/retina01/start.png) 1x, url(../img/menu/retina02/start.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/start.png) 1x, url(../img/menu/retina02/start.png) 2x);
background-size: auto 100%; background-repeat: no-repeat; background-position: left 1em bottom -1px; height: 4em; padding-bottom: 5em;
}
.top_nav a{background-color: #f9f5dc; border: 2px solid #ccbc9f; color: #285652; font-weight: bold; border-radius: 0.5em; display: inline-table; padding: 0.4em 0.7em  0.2em 1.7em; background-image: url("../img/home.svg"); background-size: auto 1em; background-repeat: no-repeat; background-position: left 0.5em center; margin: 0px; white-space: nowrap; margin: 0; }
.top_nav a:hover{color: #285652;}

.logo_nav{width: 250px; text-align: left; position:relative; top: 0; left: 0;}
.logo_nav img{width: 100%; height: auto; max-width: 250px;}

.douga_nav{width:27%; text-align: left; float:left; padding-left: 1em; padding-top: 0.5em; }
.douga_nav img{width: 100%; height: auto; max-width: 280px;}

.chousa_ul{display: block; width: 100%; clear: both; margin: -4px 0 0 0; padding: 0;}
.chousa_ul li{position: relative;}
.chousa_ul li a{position: relative; display: block; overflow:visible}
.chousa_ul li a .menu_text{width: 100%; margin-top: 1em; }
.chousa_ul li a .danin{ position: absolute; bottom: 60%; left:0.5em; width: 40%; height: auto; }
.chousa_ul li a .danin_y{ position: absolute; bottom: 50%; left:0.5em; width: 40%; height: auto; }
.chousa_ul li a .menu_note{ position: absolute; bottom: 20%; left:55%; width: 35%; height: auto; }
.point001{ position: absolute; bottom: 70%; left:5em; width: 1.4em; height: auto; filter: drop-shadow(3px 4px 4px #777); }

.chousa_ul li:nth-child(even) a{border: 1px solid #CCBC9F; background-color: #fff; width: 25%; display: inline-block; }
.chousa_ul li:nth-child(odd) a{border: 1px solid #CCBC9F; background-color: #F9F5DC; width: 25%; display: inline-block; }
.chousa_ul li:nth-child(1) a{float: left; border-radius: 0.5em 0 0 0.5em ; background-image: url("../img/menu/retina01/text_bg01.png");
background-image: image-set(url(../img/menu/retina01/text_bg01.png) 1x, url(../img/menu/retina02/text_bg01.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg01.png) 1x, url(../img/menu/retina02/text_bg01.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(2) a{float: left; background-image: url("../img/menu/retina01/text_bg02.png");
background-image: image-set(url(../img/menu/retina01/text_bg02.png) 1x, url(../img/menu/retina02/text_bg02.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg02.png) 1x, url(../img/menu/retina02/text_bg02.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(3) a{float: left; background-image: url("../img/menu/retina01/text_bg03.png");
background-image: image-set(url(../img/menu/retina01/text_bg03.png) 1x, url("../img/menu/retina02/text_bg03.png") 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg03.png) 1x, url(../img/menu/retina02/text_bg03.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(4) a{float: left; padding-bottom: 0.8em; border-radius: 0 0.5em 0 0; background-image: url("../img/menu/retina01/text_bg04.png");
background-image: image-set(url(../img/menu/retina01/text_bg04.png) 1x, url(../img/menu/retina02/text_bg04.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg04.png) 1x, url(../img/menu/retina02/text_bg04.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(5) a img{margin-top: 1.8em;}
.chousa_ul li:nth-child(5) a{float: right; border-radius: 0 0 0.5em 0; background-image: url("../img/menu/retina01/text_bg05.png");
background-image: image-set(url(../img/menu/retina01/text_bg05.png) 1x, url(../img/menu/retina02/text_bg05.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg05.png) 1x, url(../img/menu/retina02/text_bg05.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(6) a,.chousa_nav ul li:nth-child(7) a,.chousa_nav ul li:nth-child(8) a{float: right; margin-top: 0.8em;}
.chousa_ul li:nth-child(6) a{background-image: url("../img/menu/retina01/text_bg06.png");
background-image: image-set(url(../img/menu/retina01/text_bg06.png) 1x, url(../img/menu/retina02/text_bg06.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg06.png) 1x, url(../img/menu/retina02/text_bg06.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(7) a{background-image: url("../img/menu/retina01/text_bg07.png");
background-image: image-set(url(../img/menu/retina01/text_bg07.png) 1x, url(../img/menu/retina02/text_bg07.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg07.png) 1x, url(../img/menu/retina02/text_bg07.png) 2x);
background-size: 28% auto; background-repeat: no-repeat; background-position: right 0.4em top 0.4em; }
.chousa_ul li:nth-child(8) a{border-radius: 0.5em 0 0 0.5em; float: right; background-image: url("../img/menu/retina01/text_bg08.png");
background-image: image-set(url(../img/menu/retina01/text_bg08.png) 1x, url(../img/menu/retina02/text_bg08.png) 2x);
background-image: -webkit-image-set(url(../img/menu/retina01/text_bg08.png) 1x, url(../img/menu/retina02/text_bg08.png) 2x);
background-size: 38% auto; background-repeat: no-repeat; background-position: left 0.6em top 0.4em; }

.point003{ position: absolute; top: 0%; left:8em; width: 1.4em; height: auto; filter: drop-shadow(3px 4px 4px #777); margin-top: -1.2em; z-index: 2; }
.point002{ position: absolute; bottom: 60%; left:5.6em; width: 1.4em; height: auto; filter: drop-shadow(3px 4px 4px #777); }

/* このクラスを、jQueryで付与・削除する */
.globalMenuSp.active {
 transform: translateX(0%); visibility: visible;
 }

#menu{text-align: center; display: inline-table; font-size:0.8em; color: #66443c; position:absolute; top: 1em; right: 1em; z-index: 10;}
.openbtn{ background:#f7931e; border: solid 3px #ffffff; box-shadow: 2px 2px 4px #666666; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content:space-between; align-items:center; margin-left: 4px; margin-bottom: 2px; position: relative; }
.openbtn span{display:inline-block; transition: all .4s; position: absolute; border-radius: 2px; background: #fff; }
.openbtn span:nth-of-type(1) {left:5px; top:8px; width: 4px; height:4px;}
.openbtn span:nth-of-type(2) {left:12px; top:8px; width: 17px; height:  4px;}
.openbtn span:nth-of-type(3) {left:5px; top:15px; width: 4px; height:4px;}
.openbtn span:nth-of-type(4) {left:12px; top:15px; width: 17px; height:  4px;}
.openbtn span:nth-of-type(5) {left:5px; top:22px; width: 4px; height:4px;}
.openbtn span:nth-of-type(6) {left:12px; top:22px; width: 17px; height:  4px;}
/*activeクラスが付与されると線が回転*/
.openbtn.active span:nth-of-type(1) { opacity: 0;}
.openbtn.active span:nth-of-type(2) { top:9px; left: 2px; transform: translateY(6px) rotate(-45deg);  width: 31px;}
.openbtn.active span:nth-of-type(3) { opacity: 0;}
.openbtn.active span:nth-of-type(4){  top: 21px;  left: 2px;  transform: translateY(-6px) rotate(45deg);  width: 31px;}
.openbtn.active span:nth-of-type(5) { opacity: 0;}
.openbtn.active span:nth-of-type(6) { opacity: 0;}
.menu_tit{opacity: 1; transition:1s; animation: menu_anime 1.5s forwards; font-weight: bold; position: relative; }
.menu_tit.mokuji{display: none;}
.menu_tit02{opacity: 0; display: none;} .menu_tit02.tojiru{ display:block; transition:1s; animation: menu_anime02 1.5s forwards; font-weight: bold; position: relative; }
@keyframes menu_anime { 0% {opacity: 0; } 100% { opacity: 1; }}
@keyframes menu_anime02{ 0% { opacity: 0; } 100% { opacity: 1;}}


/*大きい画面のmenuボタン調整*/
@media screen and (min-width: 1500px) and (orientation: landscape),screen and (min-height: 800px) and (orientation: landscape) {
.openbtn{width: 50px; height: 50px;  }
.openbtn span:nth-of-type(1) {left:7px; top:10px; width: 5px; height:5px;}
.openbtn span:nth-of-type(2) {left:17px; top:10px; width: 20px; height:5px;}
.openbtn span:nth-of-type(3) {left:7px; top:20px; width: 5px; height:5px;}
.openbtn span:nth-of-type(4) {left:17px; top:20px; width: 20px; height:5px;}
.openbtn span:nth-of-type(5) {left:7px; top:30px; width: 5px; height:5px;}
.openbtn span:nth-of-type(6) {left:17px; top:30px; width: 20px; height:5px;}
.openbtn.active span:nth-of-type(2) { top:14px; left: 7px; transform: translateY(6px) rotate(-45deg);  width: 32px;}
.openbtn.active span:nth-of-type(4){  top: 26px;  left: 7px;  transform: translateY(-6px) rotate(45deg);  width: 32px;}
}
.quiz_question br{font-display: block;}

/*==================================*/
/*========スマホ・タブレット縦向き======*/
/*==================================*/
@media screen and (max-width: 480px) and (orientation: portrait),screen and (orientation: portrait),screen and (max-height: 480px) and (orientation: landscape),screen and (max-width:110vh) and (max-height:699px) and (orientation: landscape) {

.quiz_question br {	display: none;}	

	
/*===フルスクリーン表示===*/
#content { height: auto; width: 100%; padding: 10px; position: relative;}


/*===ハンバーガーメニューと文字色設定===*/
/*文字色設定*/
#textstyle {width: 150px; right:80px; }
#textstyle ul{ font-size:14px; } 
#textstyle ul li{ width: 23%; margin: 2px; display: flex; justify-content:center; align-items:center;}
	
/*ハンバーガーメニュー*/
/*表示後の画面*/
.globalMenuSp.active { visibility: visible; display: block;}
.globalMenuSp {position:absolute; top: 0; left: 0; background:rgba(128,170,68,0.9)!important; height: auto; width: 100%; display: none; padding-bottom: 2em; min-height:100vh;}
.g_menu{display: block; width:100%; height: auto; margin: 0 auto ; position: relative; top: 0px; overflow:visible; padding-top: 80px; }
.chousa_nav{max-width: auto; }
.chousa_nav{background-size: 25% auto; }

.top_nav{text-align: center; float: none; margin-right: 0.5em; padding-top: 1em; padding-bottom: 0; background-image:none; padding-bottom: 0em;}
.top_nav a{width: 40%;}
.logo_nav{width: 40%; float: none; position: absolute; top: 1em; left: 1em;}
.logo_nav img{width: 100%; height: auto; max-width: 250px;}
.douga_nav{text-align: center; float:none; padding-left: 0em; width: 100%; }
.douga_nav img{width: 40%; height: auto; max-width: 280px; margin: 1em auto;}

.chousa_ul{ width: 70%; margin: 0 auto;}
	
.chousa_ul li a .menu_text{width: 50%; margin-top: 0em; margin-left: 1em; margin-bottom: 0.5em; }
.chousa_ul li a .danin,.chousa_ul li a .danin_y{ position: absolute; bottom: 0.5em; right:4em; left: auto; width: 18%;}
.chousa_ul li a .menu_note{ position: absolute; bottom: 0%; right:6em; left: auto; width: 14%;}
.point001{ position: absolute; bottom: 36%; left:0.8em; width: 1.6em; height: auto; filter: drop-shadow(3px 4px 4px #777); }

.chousa_ul li:nth-child(even) a{width: 100%; display: block; margin-bottom:0.5em; position: relative;}
.chousa_ul li:nth-child(odd) a{width: 100%; display: block; margin-bottom:0.5em; position: relative;}
	
.chousa_ul li:nth-child(1) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(2) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(3) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(4) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(5) a img{margin-top: 0;}
.chousa_ul li:nth-child(5) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(6) a,.chousa_nav ul li:nth-child(7) a,.chousa_nav ul li:nth-child(8) a{float: none; border-radius: 0.5em ; background-size: 16% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(6) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(7) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }
.chousa_ul li:nth-child(8) a{float: none; border-radius: 0.5em ; background-size: 14% auto; background-position: right 1em top 1em; }

.point003{ position: absolute; top: 0%; left: 0%; width: 1.4em; height: auto; filter: drop-shadow(3px 4px 4px #777); margin-top: 0.5em; z-index: 2; }
.point002{ position: absolute; bottom: 26%; left:8.2em; width: 1.6em; height: auto; filter: drop-shadow(3px 4px 4px #777); }

	
#menu{font-size:14px; margin: 0px; top: 0.5px; right: 0.5px;}
.openbtn{ display: block; margin:10px 10px 2px 10px;}


/*===*ページタイトル===*/
#pagetitle{background-size: auto 35%; background-position: left top 10px; display:flex; justify-content:flex-start; align-items:center; font-size:1.6vw; width: 100%; height: auto; padding-left: 0em; padding-top: 7.5em;}
.pagetitle{padding-right: 0em;}
.pagetitle h1{font-size: 1.7em; padding-left: 0em; display: block; } 
.pagetitle h2{font-size: 1.8em; display: block; margin-bottom: 1em;}

/*===*現在地表示===*/
h3{position: relative; width: 80%; height:auto; margin: 10px auto; background-color: #285652; border-radius: 40px; padding: 0.5em 0 0;}
.article02 h3{background-color: #283554!important;}
.h3{width: 100%; height: 100%; margin: 0 auto; }
	

/*===============大枠===============*/
header{height: auto; width: 100%; }
main{max-height: auto; height: auto!important; width: 100%; display: block; text-align: center; padding: 5px 10px 0px 10px; position: relative; clear: both; overflow: visible;}
footer{height: auto!important; width: 100%; font-size: 80%; display: block; text-align: center; position: relative; }

/*ロケーション緑背景*/
article{max-width: 100%; max-height: auto; margin: 0px auto 1em auto; padding: 0px; width: 100%; height: auto; background-image:none; }
.article02{max-width: 100%; max-height: auto; margin: 0px auto 1em auto; padding: 0px; width: 100%; height: auto; background-image:none; }
	
/*topへ戻る*/
.top_back_bt,.top_back_bt02{position: relative; top: 0; left: 0; }
/*フレーム*/
.flame,.flame02{position: relative; padding-top: 1.5em; padding-bottom: 1.5em; padding-left: 1.5em; padding-right: 1.5em; width: 100%; background-image:none; background-color: #ffffff; border-radius: 0.5em; display: block; border:2px solid #45a89e; height: auto;}

/*コンテンツ内容*/
.scene{height:auto; overflow:visible; min-height: 50%;}
}

/*ページ内移動ボタン*/
.scene_bt{width: 100%; height:auto; min-height:8em; position: relative; bottom: 0; left: 0; display: block; clear: both; padding-top: 1.5em; overflow:visible;}
.scene_bt p{ position: relative; }
.scene_bt p.pre_bt{position: relative; left: 0; bottom: 0em; float: left;}
.scene_bt p.next_bt{position: relative; right: 0; bottom: 0em; float: right;}
.next_page{border: 2px #cebaaa solid; position: relative; right: 0; bottom: 0em; float: right;}
.scene_bt p a,.next_page a,.scene_bt p.pre_bt a,.scene_bt p.next_bt a,.scene_bt p a:hover,.next_page a:hover,.scene_bt p.pre_bt a:hover,.scene_bt p.next_bt a:hover {border:none;}

/*=スマホ横向きの注意=*/
@media screen and (max-height: 480px) and (orientation: landscape){
.sp_landscape{ display: block; background-color: #ffffff; position: fixed; top: 10px; left:10px; z-index: 10; border-radius: 0.5em; font-weight: bold; color: red; padding: 1.5em 1em 1em 1em;}
}



/*==================================*/
/*=========アニメーション動き=============*/
/*==================================*/

/*ふわっと表示*/
.fuwabase {
animation-name:fuwaanime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fuwaanime{
  from { opacity: 0; }
  to { opacity: 1; }
}
.fuwa00{animation-delay: 0.2s;}
.fuwa01{animation-delay: 0.4s;}
.fuwa02{animation-delay: 0.6s;}
.fuwa03{animation-delay: 0.8s;}
.fuwa04{animation-delay: 1.0s;}
.fuwa05{animation-delay: 1.2s;}
.fuwa06{animation-delay: 1.4s;}
.fuwa07{animation-delay: 1.6s;}
.fuwa08{animation-delay: 1.8s;}
.fuwa09{animation-delay: 2.0s;}
.fuwa10{animation-delay: 2.2s;}

/*コマ移動*/
.pages_visible {animation-name: pages_visible; animation-duration: 0.1s; animation-delay: 1s; animation-fill-mode: forwards; opacity:1;}
@keyframes pages_visible {
  0% {opacity: 1; visibility:visible;}
  100% {opacity: 1; visibility:visible;}
}
.pages_none {animation-name: pages_none; animation-duration: 0.1s; animation-delay: 0s; animation-fill-mode: forwards; opacity: 0; display: none;}
@keyframes pages_none{
  0% {opacity: 0; visibility: hidden;}
  100% {opacity: 0; visibility: hidden;}
}

/*アイテムの表示非表示*/
.item_visible {animation-name: item_visible; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; opacity:0;}
@keyframes item_visible {
  from { opacity: 0; }
  to { opacity: 1; }
}
.item_none {animation-name: item_none; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; opacity: 0; display: none;}
@keyframes item_none{
  from { opacity: 0; }
  to { opacity: 0; }
}