@charset "utf-8";
body{background-color: var(--lightgreen);}

/* 上部スライダー */
#content_navi{display: block; height: 80px; width: 100%; padding:0 calc(50% - 640px); background-color:var(--lightyellow); border-bottom: solid 1px var(--darkgreen); position: relative;}
#content_navi #nav-toggle{top:10px; right: 40px;}
.navi_slider {display: block; height: 80px; width: 100%; }
.navi_slider li{height: 80px; width: 100%; position: relative;  }
.navi_slider li img{height:66px; width: 66px; border-radius: 50%; filter: drop-shadow(2px 2px 3px #666); border: solid 2px #fff; z-index: 2; position: relative; margin-top: 5px;}
.navi_slider li span{color: #51a126; position: absolute; top:25px; left:50px; font-size: 1em; text-align: center; border-radius: 15px; background-color: #fff; font-weight:bold; padding: 5px 0px 0 20px; line-height: 1em; height: 30px; z-index: 1; border: 2px solid #51a126; filter: drop-shadow(2px 2px 3px #666); width: 150px;}
.navi_slider li span.frail{font-size: 0.8em; padding: 6px 0px 0 14px; }

/* パンくずリスト */
nav#breadcrumbs{width: 100%; margin: 0; position:relative; padding: 10px 10px 0;}
nav#breadcrumbs ol{width: 100%; display:flex; justify-content:flex-start; align-items:center; }
nav#breadcrumbs ol li{display: inline; list-style: none; font-size:1em;}
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; }
nav#breadcrumbs ol li:after{content: '>>'; display: inline-block; padding: 0 5px;}
nav#breadcrumbs ol li:last-child{color: var(--green); font-weight: bold;}
nav#breadcrumbs ol li:last-child:after{content: ''; width: 1px; padding: 0;}

/* さいたまこくほWeb まもるくんパークロゴ */
.commontit{display:flex; justify-content:center; align-items:center; flex-wrap: wrap; width: 100%; margin: 0 0
    80px 0; }
.commontit .kokuho{width:120px; height: auto; display: inline-block; margin-right: 1em; }
.commontit .mamorulogo{width: 450px; height: auto; display: inline-block;}

/* メインコンテンツ */
main.content{max-width: 1280px; width: 100%; margin: 0 auto; height: auto; padding:0px; display:flex; justify-content:space-between; align-items:stretch; flex-wrap: wrap; font-size: 1em; position: relative; background-image: url("../images/header_bg.svg"); background-size: 100% auto; background-repeat: no-repeat; background-position: top -10px center;}
main.content section.pagetit{width: 30%; text-align: center; overflow: hidden; position:-webkit-sticky; position:sticky; top:0; padding: 50px 0 ; height: 740px;}
.tit_flame{border-radius: 20px; background-color: var(--bg); border:solid var(--green) 4px; width: calc(100% - 20px); height: 100%; margin-left: 20px; }
main.content section.maincontent{width: 70%; padding: 0 40px;}
.scene01{width: 100%; padding-top: 20px; position: relative; }
main.content section.maincontent .scene02{width: 100%; margin-bottom: 60vh;}

/*text*/
.red{color: #e60012;}
.orange{color: var(--orange);}
span.alert{background-color:#e60012; border-radius: 8px; color: yellow; font-weight: bold; padding:0.2em 0.5em; display: inline-block; margin-right:0.5em; margin-bottom: 0.5em; width: auto!important; text-align: center; text-indent: 0;}
span.inline-block{display: inline-block;}

/*title*/
h3{font-size: 1.2em; color:var(--green); padding-left: 1em; position: relative; clear: both; display: block; margin: auto 0 20px 0; font-weight: normal; }
h3::before{content: "■"; margin: 0; position: absolute; left: 0px; top: 0; width:1em; height:1em;}
h3.h302{color:#000; padding-left: 0.5em; position: relative; clear: both; display: block; margin: auto 0 20px 0; border-left: 4px solid #000;}
h3.h302::before{display: none;}
h4{font-size: 1em;}
/*p*/
.answer p{text-indent: 1em;}
.answer p.noindent{text-indent: 0; }
.answer p.note{text-indent: 0; font-size: 0.8em; line-height: 130%;}
.answer p.center{text-align: center;}
p.bg_blue,.bg_blue{background-color: #f0f8ff; padding:1em; border-radius: 8px; display: block;}


/*margin*/
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
/*image*/
.leftimg{margin:10px 20px 10px 0; display: block; float: left; max-width: 100%;}
.rightimg{margin:10px 0 10px 20px; display: block; float: right; max-width: 100%;}
.centerimg{margin:10px auto; display: block; max-width: 100%;}

/*dl*/
dl.dl_circle dt,dl.dl_circle dd{position: relative; padding: 0.5em;}
dl.dl_circle dt{font-weight: bold; border-bottom: 1px dashed #ccc; padding: 0.5em 0.5em 0.5em 1.5em;}
dl.dl_circle dt::before{content: ""; margin: 0; position: absolute; left: 0; top: 0; width:1em; height:100%; background-size: contain; background-repeat: no-repeat; background-position: left center; background-image: url("../images/circle.svg");}

/*ol*/
ol.ol_number li,dl.dl_circle dd.dd01,dl.dl_circle dd.dd02,dl.dl_circle dd.dd03,dl.dl_circle dd.dd04{position: relative; padding: 0.5em 0.5em 0.5em 2.5em;}
ol.ol_number li::before,dl.dl_circle dd.dd01::before,dl.dl_circle dd.dd02::before,dl.dl_circle dd.dd03::before{content: ""; margin: 0; position: absolute; left: 0px; top: 0.2em; width:2em; height:2em; background-size: contain; background-repeat: no-repeat; background-position: left center;}
ol.ol_number li:nth-child(1)::before,dl.dl_circle dd.dd01::before{background-image: url("../images/no01.svg"); }
ol.ol_number li:nth-child(2)::before,dl.dl_circle dd.dd02::before{background-image: url("../images/no02.svg"); }
ol.ol_number li:nth-child(3)::before,dl.dl_circle dd.dd03::before{background-image: url("../images/no03.svg"); }
ol.ol_number li:nth-child(4)::before,dl.dl_circle dd.dd04::before{background-image: url("../images/no04.svg"); }
ol.ol_number li:nth-child(5)::before{background-image: url("../images/no05.svg"); }
ol.ol_number li:nth-child(6)::before{background-image: url("../images/no06.svg"); }
ol.ol_number li:nth-child(7)::before{background-image: url("../images/no07.svg"); }

/*ul*/
ul.ul_wcircle li{position: relative; padding: 0.5em 0.5em 0.5em 1.5em; border-bottom: 1px dashed #ccc; }
ul.ul_wcircle li::before{content: ""; margin: 0; position: absolute; left: 0; top: 0; width:1em; height:100%; background-size: contain; background-repeat: no-repeat; background-position: left top 0.8em; background-image: url("../images/circle.svg");}

ul.normal li{position: relative; padding-left: 1em;}
ul.normal li::before{content: "・"; margin: 0; position: absolute; left: 0; top: 0em; width:1em; height:1em;}



/*link button*/
a.linkbtn{box-shadow: 2px 2px 4px #666666; border:1px solid #CCCCCC; background:linear-gradient(to bottom, #FFFFFF,#DDDDDD); padding: 10px; border-radius: 10px; display: inline-block; color: #51a126; font-weight: bold; margin: auto; text-decoration: none;}
a:hover.linkbtn{box-shadow: 2px 2px 2px #999999; text-decoration: none;}
a.linkbtn span{background-image: url( "../images/link.svg"); background-size: 12px 17px; background-repeat: no-repeat; background-position: left top 0.2em; padding-left: 17px; padding-right: 10px; overflow: hidden; }
.img_center{clear: both; display: block; text-align: center; margin: 20px 0px;}

/*point Flame*/
.point{display:flex; justify-content:flex-start; align-items:stretch; width: 100%; border: 1px solid #ccc; border-radius: 10px;}
.point dt{background-color: #c3d94e; width: 160px; border-radius: 10px 0 0 10px; background-image: url("../images/point.webp"); background-size: auto 70px; background-repeat: no-repeat; background-position: left 5px center; min-height: 80px; position: relative;}
.point dt::before{content: ""; margin: 0; position: absolute; right: -10px; top: 0; bottom: 0; width:5px; height:100%; background-color: #c3d94e;}
.point dd{background-color: #fffff0; width: calc(100% - 160px); padding:20px 20px 20px 30px; border-radius: 0 10px 10px 0; }
.point dt span{background-color: #00479d; color: #fff; font-weight: bold; padding: 2px 10px; border-radius: 1em; display: inline-block; height: 30px; position: absolute; top:calc(50% - 15px); right:10px; font-size: 17px; border: 1px solid #fff; }

/*checklist*/
.checklist{ clear: both; display: block; padding: 20px; border-radius: 5px; box-shadow: 2px 2px 4px #999999; text-align: center; border: 1px solid #cccccc; background-color: #fcfce0; margin: 40px 0px; }
.checklist h4{ width: 100%; margin: 20px auto; font-size:1em; color: #ffffff; float: none; background-color: #51a126; border-radius: 5px; padding: 5px; font-weight: bold; text-align: center; box-sizing: border-box; display: inline-block; }
.checklist h4:before{content:''; white-space: pre ;}
.checklist h5{font-size: 1em;}
.checklist ol li,.checklist ul li{border-bottom: 1px dotted #cccccc; text-align: left; position: relative; padding: 0.5em 0.5em 0.5em 2em;}
.checklist ol li::before{content: ""; margin: 0; position: absolute; left: 0px; top: 0.5em; width:1.5em; height:1.5em; background-size: contain; background-repeat: no-repeat; background-position: center;}
.checklist ul li{padding: 0.5em;}
.checklist ol li:nth-child(1)::before{background-image: url("../images/no01.svg");}
.checklist ol li:nth-child(2)::before{background-image: url("../images/no02.svg");}
.checklist ol li:nth-child(3)::before{background-image: url("../images/no03.svg");}
.checklist ol li:nth-child(4)::before{background-image: url("../images/no04.svg");}
.checklist ol li:nth-child(5)::before{background-image: url("../images/no05.svg");}
.checklist ol li:nth-child(6)::before{background-image: url("../images/no06.svg");}
.checklist ol li:nth-child(7)::before{background-image: url("../images/no07.svg");}
.checklist ol li input,.checklist ul li input{width:20px; height: 20px;}
.checklist p{text-align: left; text-indent: 0; margin: 20px;}
.checklist p.detail{display: block; text-align: right;}

/* コンテンツタイトル */
h1 img{display: block; margin: 10px auto; width: 300px; height: auto; max-width: 96%;}
main.content section.pagetit p{font-size: 2em; color:var(--green); font-weight: bold; writing-mode: vertical-rl; align-items: center; margin: 0 auto; display: inline-block; text-align: justify;
-webkit-writing-mode: vertical-rl;-moz-writing-mode: vertical-rl;-ms-writing-mode: tb-rl; text-orientation: upright; }

/* scene01 */
.scene01 p.leadtext{margin: 0 auto; font-size: 1.2em;
background-image:url("../images/line.svg"),url("../images/line.svg"); background-size: 8px 10px, 8px 10px;
background-position:top center,center bottom; background-repeat:repeat-x,repeat-x; padding: 30px 20px; }

.scene01 .mamoruimg{width: 90%; margin: 0 auto; text-align: center;}
.scene01 .mamoruimg img{width:480px; height: auto; margin: 50px auto 20px auto;}

/* scene02 */
.scene02{width: 100%; margin-bottom: 60vh;}
.scene02 h2 {font-size: 1.6em; margin-top: 14px; display:flex; justify-content:flex-start; align-items:center;width: 100%; background-color: var(--lightyellow); padding:10px 60px 10px 80px ; border-radius: 10px; background-image: url("../images/question.svg"); background-size: 42px auto; background-repeat: no-repeat; background-position: left 20px center; font-weight: bold; border: solid 2px var(--darkgreen);  }
.scene02 h2 span.qnum{font-size: 1.4em; color:var(--green); margin-right:0.3em; display: inline-block; }
.scene02 h2 span.question{ border-left: 5px solid var(--green); padding-left: 0.4em;}
.question_text{box-shadow: 3px 3px 4px #666666; }
.question_text.open{box-shadow: 0px 0px 0px #fff; }

/* accordion */
.accordion {margin: 0 auto;}
.accordion button{border: none; background-color: rgba(255,255,255,0.00); cursor: pointer;}
.accordion .question_text { z-index: 1;  cursor: pointer; position: relative;}
.accordion .question_text .toggle_btn { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 20px; width: 40px; height: 40px; margin-top: -20px; box-sizing: border-box;  -webkit-transform: rotate(45deg);  transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s; caret-color: transparent; }
.accordion .question_text .toggle_btn .btn_plus { display: block;  width: 18px;  height: 18px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s; position: relative; caret-color: transparent;}
.accordion .question_text.open .toggle_btn { -webkit-transform: rotate(-360deg);  transform: rotate(-360deg);}
.accordion .question_text .toggle_btn .btn_plus:before,.accordion .question_text .toggle_btn .btn_plus:after {display: flex; content: ''; background-color: var(--green); border-radius: 10px; width: 18px; height: 4px; position: absolute; top: 7px; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center;}
.accordion .question_text .toggle_btn .btn_plus:before { width: 4px; height: 18px; top: 0; left: 7px;}
.accordion .question_text.open .toggle_btn .btn_plus:before { content: none;}
.accordion .question_text.open .toggle_btn .btn_plus:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.accordion .answer {font-size: 1.2em; border-left: 2px solid var(--green); border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); box-sizing: border-box; background-color: #fff; padding: 20px; border-radius: 0 0 20px 20px;}
.accordion button.close_btn { display: block; background-color: var(--green); padding: 0.5em 2em 0.5em 3em; text-decoration: none; line-height: 1; color: #fff; font-weight: bold; position: relative; cursor: pointer; transition-duration: 0.2s; border-radius: 10px; margin: 40px auto; width: 9em; clear: both;} 

.accordion button.close_btn:hover { opacity: .8;}
.accordion button.close_btn .toggle_btn { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 10%; width: 30px; height: 30px; margin-top: -15px;}
.accordion button.close_btn .toggle_btn .btn_plus { display: flex; justify-content: center; align-items: center; position: relative; width: 18px; height: 18px;}
.accordion button.close_btn .toggle_btn .btn_plus:before, .accordion button.close_btn .toggle_btn .btn_plus:after {
  content: ''; background-color: #fff; border-radius: 10px; width: 18px; height: 4px; position: absolute; top: 7px; left: 0; -webkit-transform: rotate(-45deg); transform: rotate(45deg); transform-origin: center center;}
.accordion button.close_btn .toggle_btn .btn_plus:before {width: 4px; height: 18px; top: 0; left: 7px;}

.visible{display: block; animation-name:visible; animation-duration:0.9s; animation-fill-mode:forwards; opacity:0;}
@keyframes visible{from {opacity: 0;} to {opacity: 1;}}
.non_visible{display: none;}


/* 上へ戻るボタン */
.back-top { position: fixed; bottom: 50px; right: 0; z-index: 300;}
.back-top a{ color: #fff; font-weight: bold; background-color: var(--green); padding: 0.5em 1em 0.5em 2em; border-radius: 1.5em 0 0 1.5em; text-decoration: none; filter: drop-shadow(3px 3px 2px #666); border: 2px #fff solid; border-right: none; line-height: 1em; position: relative;}
.back-top a:hover{background-color: var(--orange);}
.back-top a::before{content: ""; margin: 0; position: absolute; left: 0px; top: 0; width:2em; height:100%; background-image: url("../images/arrow_top02.svg"); background-size: 1em auto; background-repeat: no-repeat; background-position: center;}




@media screen and (max-width:1530px)  {
#content_navi{display: block; height: 80px; width: 100%; padding:0 140px 0 30px;}
}

@media screen and (max-width:1170px)  {
#content_navi{padding:0 140px 0 40px;}
.navi_slider li img{height:7vw; width:7vw; max-height: 66px; max-width: 66px;}
.navi_slider li span{top:calc(40px - 1.82vw); left:0; font-size:1.4vw; border-radius: 1.5em; padding: 0.7em 0 0 5vw; height: 3.64vw; width: 95%;}
.navi_slider li span.frail{font-size: 1.2vw; padding: 0.75em 0 0 5.8vw; }
.commontit .kokuho{width:120px;}
.commontit .mamorulogo{width: 340px;}
main.content{background-image: url("../images/header_bg02.svg"); background-size: 86% auto; background-repeat: no-repeat; background-position: top -10px right;}
main.content section.pagetit{width: 20%;}
main.content section.maincontent{width: 80%;}
main.content section.pagetit{height: 540px;}
main.content section.pagetit p{font-size: 1.6em; }
}

/***********************************/
/* タブレット縦 **********************/
@media screen and (max-width:840px)  {

/* 上部スライダー */
#content_navi{height: 70px;  padding:0 90px 0 30px;}
#content_navi #nav-toggle{right: 10px;}
.navi_slider li img{height:7.2vw; width:7.2vw; margin-top: calc(35px - 3.6vw); }
.navi_slider li span{top:calc(35px - 2vw); left:0; font-size:1.6vw; border-radius: 2vw; padding:0 0 0 7vw; height: 4vw; width: 95%; display:flex; justify-content:center; align-items:center;}
.navi_slider li span.frail{font-size: 1.4vw; padding: 0.5em 0 0 6.4vw;  }
nav#breadcrumbs ol li{font-size:0.7em;}
    
.commontit {margin-bottom: 30px;}
.commontit .kokuho{width:14vw; }
.commontit .mamorulogo{width: 50vw; margin-top:-16px; }

main.content section.pagetit{display: none;}
main.content{display:block; background-image: url("../images/header_bg02.svg"); background-size: 110% auto; background-position: top -5px center;}
main.content section.maincontent{width: 100%;}
.scene01 .mamoruimg img{width:400px; height: auto; max-width: 80%;}
.scene02 h2 span.qnum{font-size: 1.4em;}
.accordion .answer {font-size: 1em;}
.accordion .question_text .toggle_btn {right: 15px;}

.leftimg,.rightimg{margin:10px auto; width: 200px; display: block; float: none;}
	
/*point Flame*/
.point{display:block; }
.point dt{ width: 100%; border-radius: 10px 10px 0 0; display:flex; justify-content:center; align-items:center;}
.point dt::before{content: ""; margin: 0; position: absolute; right: 0; top: auto; bottom:-10px; left:0; width:100%; height:5px;}
.point dd{ width: 100%; border-radius: 0 0 10px 10px; padding:20px 20px 20px 30px; }
.point dt span{padding: 2px 1.5em; border-radius: 1em; display: inline-block; height: 30px; position: relative; top:auto; right:auto; font-size: 17px;}
	
.scene02 h2 {font-size: 1.2em; display:block; background-size: 30px auto; background-position: top 10px left 0.5em; padding:25px 0 0.5em 0.5em; }
.scene02 h2 span.qnum{font-size: 1.1em; position: relative; top:-0.5em; left:calc(0.5em + 30px);  border-bottom: 5px solid var(--green); padding-bottom: 0; line-height: 1em;}
.scene02 h2 span.question{ border-left: none; padding: 0; display: block;}

.accordion .question_text .toggle_btn {right: 0px;}
.accordion .question_text{padding-right: 30px;}
}
/***********************************/
/* スマホ縦 **********************/
@media screen and (max-width:440px) {
#content_navi{display: none;}

nav#breadcrumbs{display: none;}
main.content{background-size: 120% auto; background-position: top -10px center;}
main.content section.maincontent{padding: 0 20px;}
.commontit{justify-content: flex-start;}
.commontit .kokuho{width:16vw;}
.commontit .mamorulogo{width: 55vw; margin-top: 0;}
 
.scene01 p.leadtext{font-size: 1em; padding: 30px 20px; }


}