@charset "utf-8"; 
* { box-sizing: border-box; }
html { overflow: overlay; }
body { margin: 0; background-color: #dadf00; overflow-x: hidden; font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; }
section { padding: 10% 0; position: relative; }
h2 { text-align: center; }
dt, dd, ul, li { }
a { cursor: pointer; }
small { font-size: 12px; letter-spacing: 0; }
.pc { display: block; }
.sp { display: none; }
br.braddition {  display: none; }
.wl { max-width: 1200px; width: 100%; margin: 0 auto; padding:0 1.5rem;  }
.wm { max-width: 960px; width: 100%; margin: 0 auto; padding:0 1.5rem; }
.ws { max-width: 850px; width: 100%; margin: 0 auto; padding:0 1.5rem; }
.w740 { max-width: 740px; margin: 0 auto !important; }


/*-----top-----*/
section.sec01:before, section.sec01:after, 
section.sec02:before, section.sec02:after, 
section.sec03:before, section.sec03:after, 
section.sec04:before, section.sec04:after, 
section.sec05:before, section.sec05:after, 
section.sec06:before, section.sec06:after, 
section.sec07:before, section.sec07:after { content:""; height: 50px; }

.topWrap { padding: 5% 0; }
.titleWrap { position: relative; margin: 0 auto; text-align: center; top: 0; max-width:600px; }
.titleWrap p { text-align: center; font-size: 21px; line-height: 55px; letter-spacing: 2px; color: #231815; font-weight: 700; padding: 0 0 0 0; display: block; font-family: "M PLUS Rounded 1c"; }
.titleWrap p img { width: 100%; }
.titleWrap h1 { max-width: 585px; width: 100%; margin: 0 auto; }
.titleWrap h1 img { width: 100%; }
.titleWrap span img { max-width: 570px; width: 100%; margin: 0 auto; }
.titleWrap span { margin: 0 0 0 0; display: block; }
.TopBkWrap { }
.TopBkWrap img { position: absolute; top: 0; width: 23.65%; z-index: -1; max-width:34rem;  }
.sec01BkWrap img { position: absolute; top: 30%; width: 15.65%; z-index: -1; }
.sec03BkWrap img { position: absolute; top: 2%; width: 19.32%; z-index: -1; }
.sec03CenterBkWrap img { position: absolute; top: 50%; width: 20%; z-index: -1; }
.sec03BottomBkWrap img { /*right: 0; position: absolute; bottom: 9%; width: 36%; z-index: -1;*/ }
.sec04BkWrap img:first-child { position: absolute; top: 5%; width: 19.32%; left: 0; z-index: 0; }
.sec04BkWrap img:last-child { position: absolute; top: 5%; width: 26.36%; right: 0; z-index: 0; }
.sec05AkWrap img { position: absolute; top: 5%; width: 22.95%; z-index: 0; }
.sec07AkWrap img { position: absolute; top: 5%; width: 18.65%; z-index: 0; }
.sec05BkWrap img:first-child { position: absolute; top: 42%; width: 12.95%; left: 2%; z-index: -1; }
.sec05BkWrap img:last-child { position: absolute; top: 42%; width: 15.89%; right: 5%; z-index: -1; }

.TopBkWrap img:first-child, .sec01BkWrap img:first-child, .sec03BkWrap img:first-child, .sec03CenterBkWrap img:first-child, .sec05AkWrap img:first-child, .sec07AkWrap img:first-child { left: 0; }
.TopBkWrap img:last-child, .sec01BkWrap img:last-child, .sec03BkWrap img:last-child, .sec03CenterBkWrap img:last-child, .sec05AkWrap img:last-child, .sec07AkWrap img:last-child { right: 0; }
.TopimgLeft { left: 0; position: absolute; top: 0; }
.TopimgRight { right: 0; position: absolute; top: 0; }
/*-----top end-----*/



/*-----sec01 STORY-----*/
section.sec01::before { content:""; background: url(../img/borderImg.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; top:0; }
section.sec01::after { content:""; background: url(../img/sec02_topline.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; bottom:0; }
/*.sec01_box { background: url(../img/sec01/sec01_bk.gif) top center no-repeat; width: 100%; height: 810px; display: block; margin: 5% 0; }*/

.sec01_box { width: 65%; display: block; max-width: 850px; margin: 5% auto; border: 6px dashed; padding: 0; background-size: contain; }
.sec01_boxArea { background-color: #000; padding: 30px; margin: 0; position: relative; }
.sec01_boxAreaInWrap { border: 2px solid #fff; margin: 0; position: relative; padding: 0; }
.sec01_box h2 { position: absolute; top: -20%; left: -12%; }
.sec01_box p { text-align: center; font-size: clamp(1rem,2vw,1.25rem); line-height: 2.25; letter-spacing: 3px; color: #fff; font-weight: 700; padding: 5%; display: block; font-family: "M PLUS Rounded 1c"; }
.pageInBtnWrap { margin: 0 auto; max-width: 800px; width: 100%; border-top: solid 2px #fff; }
.pageInBtnWrap ul { display: flex; margin: 5%; padding: 0; justify-content: center; }
.pageInBtnWrap li { display: flex; padding:0; align-items: center; }
/*.pageInBtnWrap li:nth-child(1) { margin: 0 6%; }
.pageInBtnWrap li:nth-child(2) { margin: 0; }
.pageInBtnWrap li:nth-child(3) { margin: 0 6%; }*/
.pageInBtnWrap li a img, .btnAtype a img, .btnCtype a img { transform: scale(1); transition: .3s ease-in-out; }
.pageInBtnWrap li a:hover img, .btnAtype a:hover img, .btnCtype a:hover img { transform: scale(1.1); }
.pageInBtnWrap ul li a { display: block; color: #fff; font-family: "M PLUS Rounded 1c"; font-size:clamp(1rem,1.5vw,1.25rem); text-decoration: none; font-weight: bold; letter-spacing: 2px; position: relative; white-space: nowrap; padding:0.5rem 1.5rem; }
.pageInBtnWrap ul li a:hover { position:relative; }
.pageInBtnWrap ul li a:hover::before { position:absolute; content:''; width:0; height:0; border-top: solid 10px transparent; border-left: solid 12px #fff; border-bottom: solid 10px transparent; top: calc(50% - 10px); left: 0.25rem; }
/*-----sec01 end-----*/



/*-----sec02 JOIN-----*/
section.sec02 { background-color: #4d4d4d; }
.sec02_box {  }
h2 span:first-child { }
h2 span:last-child { font-family: "M PLUS Rounded 1c"; display: block; font-size: 16px; margin: 10px 0 0 0; letter-spacing: 4px; }
.sec02_box h2 span:last-child { color: #fff; }
.iWrap { display: flex; margin: 15% 0 5% 0; }
.leftImgbox { margin: 0 35px 0 77px; }
.leftImgbox img { margin: 0 auto; width: 50vw; max-width: 210px; }
.RightImgbox { position: relative; }
.RightImgbox img { position: absolute; z-index: 10; }
.RightImgbox p { background: url(../img/fukidashi.svg) top center no-repeat; display: inline-block; width: 290px; height: 237px; position: absolute; padding: 48px 40px; font-size: 16px; color: #4d4d4d; line-height: 28px; font-family: "M PLUS Rounded 1c"; font-weight: 600; text-align: justify; left: 253px; top: -136px; }
.sec02_box dl dt, .sec02_box dl dd { color: #fff; font-size: 16px; line-height: 30px; font-weight: 600; margin: 0; }
.btnAtype { margin: 5% auto; width: 100%; max-width: 480px; }
.btnAtype p { text-align: center; font-size: 14px; color: #fff; letter-spacing: 2px; }
.btnCtype { margin: 5% auto; width: 100%; max-width: 350px; }
.btnCtype p { text-align: center; font-size: 14px; color: #000; letter-spacing: 2px; padding: 0; margin: 0 auto; }
.btnCtype img { width: 100%; }
.textWrapA { border: 20px dashed; border-color: #fff; margin: 0; position: relative; z-index: 10; }
.AinBox, .BinBox, .CinBox { background-color: #fff; margin: 0; padding: 5%; }
.AinBox h3 { text-align: center; font-size: 26px; letter-spacing: 2px; }
.AinBox ul { max-width: 670px; margin: 0 auto; }
.AinBox ul li { font-size: 14px; list-style-image: url( '../img/listimg.svg'); line-height: 46px; }
/*-----sec02 end-----*/



/*-----sec03 HOW TO-----*/
section.sec03 { }
section.sec03::before { content: ""; background: url(../img/sec02_topline.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; top: 0; }
.sec03_box { margin:0; }
.sec03_topBox { max-width: 900px; margin: 15% auto 0 auto; background: url(../img/borderImg.svg) repeat; display: block; padding: 30px; }
.inWrap { background-color: #dadf00; margin: 0; padding:clamp(1rem,3vw,2rem); }
.sec03_topBox p { text-align: center; font-size: 21px; letter-spacing: 2px; color: #000; line-height: 45px; font-weight: 600; margin: 3% 0; }
.sec03_h3Box { margin: -26% 0 0 0; }
.sec03_h3Box h3 { text-align: center; font-size: 21px; letter-spacing: 2px; color: #000; line-height: 40px; max-width: 450px; margin: 0 auto 2% auto; display: flex; width: 100%; }
.sec03_h3Box h3::before { content: ""; background: url(../img/sec03_h3_left.gif) top center no-repeat; width: 56px; height: 66px; margin: 0 5% 0 0; }
.sec03_h3Box h3::after { content: ""; background: url(../img/sec03_h3_right.gif) top center no-repeat; width: 56px; height: 66px; margin: 0 0 0 5%; }
.sec03_h3Box img { margin: 0 auto; display: block; width: 100%; max-width:34rem;  }
.BinBox ul { max-width: 580px; margin: 0 auto; display: flex; flex-flow:row wrap; padding: 0; }
.BinBox ul li { list-style: none; padding: 15px 10px; /*max-width: 165px;*/ width: 33%; }
.BinBox ul li:last-child { width: 66%; min-width:322px; }
.BinBox ul li img { width: 100%; }
.textbord { background: url(../img/textbord.svg) top center no-repeat; display: inline-block; width: 322px; height: 131px; margin: 15px 0 0 15px; }
.textbord p { font-size: 14px; color: #fff; line-height: 28px; text-align: justify; max-width: 288px; margin: 11% auto; letter-spacing: 1px; font-family: "M PLUS Rounded 1c"; }
.sec03_centerBox { }
.centerBox_top { border-bottom: 1px solid #000; /*max-width: 700px;*/ margin: 0 auto; }
.centerBox_top h3, .centerBox_bottom h3 { background: url(../img/sec03_center.gif) top center no-repeat; width: 254px; height: 45px; padding: 9px 0 0 0; font-size: 21px; color: #dadf00; line-height: 28px; font-weight: 600; text-align: center; margin: 10% auto 0 auto; letter-spacing: 5px; }
.centerBox_bottom {  /*max-width: 700px;*/ margin: 0 auto; }
.centerBox_bottom span { font-size: 14px; line-height: 25px; }
.sec03_bottomBox { margin: 10% 0 0 0; }
.sec03_bottomBox h3 { font-size: 21px; color: #dadf00; letter-spacing: 2px; font-weight: 600; text-align: center; max-width: 513px; margin: 0 auto; line-height: 50px; }
.sec03_bottomBox h3 span { background: url(../img/sec03_bottom.gif) top center no-repeat; width: 389px; height: 45px; display: block; }
.sec03_bottomBox h3 span:first-child { margin: 0; }
.sec03_bottomBox h3 span:last-child { margin: 0 0 0 124px; }
.bottomBoxImgWrap { margin: 5% auto; }
.bottomBoxImgWrap ul { display: flex; flex-flow:row wrap; justify-content: flex-start; list-style: none; margin: 0; padding:0; gap:clamp(1.25rem,4vw,2.5rem); }
.bottomBoxImgWrap ul li { width: calc((100% - clamp(1.25rem,4vw,2.5rem)*2)/3);  }
.bottomBoxImgWrap ul li:nth-of-type(1), .bottomBoxImgWrap ul li:nth-of-type(4) { margin: 0; }
.bottomBoxImgWrap ul li:nth-of-type(2), .bottomBoxImgWrap ul li:nth-of-type(5) { margin: 30px 0 0 0; }
.bottomBoxImgWrap ul li:nth-of-type(3) { margin: 60px 0 0 0; }
.bottomBoxImgWrap ul li img { width: 100%; }

.imgBox dd { font-size: 18px; line-height: 25px; letter-spacing: 1px; color: #000; font-weight: bold; margin: 2% 0; }
.imgBox dd span { font-size: 12px; line-height: 21px; color: #000; letter-spacing: 0; font-weight: 500; margin: 0; }

.bottomBoxImgWrap ul li:last-child { display: flex; align-items: flex-end; justify-content: flex-end; position: relative; width:calc((100% - clamp(1.25rem,4vw,2.5rem)*2)/3 + calc(50vw - 50% + 1.5rem)) ;  margin-right: calc(50% - 50vw - 1.5rem ); }
/*-----sec03 end-----*/



/*-----sec04 PRESENT-----*/
section.sec04 { background-color: #81c5ee; }
section.sec04::before { content: ""; background: url(../img/sec04natsu_topline02.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; top: 0; }
section.sec04::after { content: ""; background: url(../img/sec04natsu_topline03.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; bottom: 0; }
.sec04_box { margin: 10% 0; }
.sec04_h3Box { margin: 5% 0 0 0; position: relative; z-index: 10; }
.sec04_h3Box h3 { text-align: center; font-size: 21px; letter-spacing: 2px; color: #000; line-height: 40px; max-width: 480px; margin: 0 auto; display: flex; width: 100%; }
.sec04_h3Box h3::before { content: ""; background: url(../img/sec03_h3_left.gif?) top center no-repeat; width: 56px; height: 66px; margin: 0 5% 0 0; }
.sec04_h3Box h3::after { content: ""; background: url(../img/sec03_h3_right.gif?) top center no-repeat; width: 56px; height: 66px; margin: 0 0 0 5%; }
.preWrap { padding: 5% 0; }
.preWrap h3 { text-align: center; font-size: 23px; letter-spacing: 2px; color: #000; line-height: 62px; max-width: 289px; margin: 0 auto; display: flex; width: 100%; padding: 0 7%; }
.preWrap h3 strong { font-size: 36px; }
.preWrap h3::before { content: ""; background: url(../img/sec03_h3_left.gif) top center no-repeat; width: 52px; height: 64px; background-size: contain; margin: 0 5% 0 0; }
.preWrap h3::after { content: ""; background: url(../img/sec03_h3_right.gif) top center no-repeat; width: 52px; height: 64px; background-size: contain; margin: 0 0 0 5%; }
.preWrap ul { display: flex; flex-wrap: wrap; gap:clamp(1rem,3vw,2rem); padding:0 1rem; }
.preWrap ul li { width: calc((100% - clamp(1rem,3vw,2rem)*2)/3); background-size: contain; list-style: none; }
.preWrap ul li:nth-of-type(1), .preWrap ul li:nth-of-type(4), .preWrap ul li:nth-of-type(7), .preWrap ul li:nth-of-type(10), .preWrap ul li:nth-of-type(13) { margin: 0; }
.preWrap ul li:nth-of-type(2), .preWrap ul li:nth-of-type(5), .preWrap ul li:nth-of-type(8), .preWrap ul li:nth-of-type(11), .preWrap ul li:nth-of-type(14) { margin: 30px 0 0 0; }
.preWrap ul li:nth-of-type(3), .preWrap ul li:nth-of-type(6), .preWrap ul li:nth-of-type(9), .preWrap ul li:nth-of-type(12), .preWrap ul li:nth-of-type(15) { margin: 60px 0 0 0; }
.preWrap dl dt { display: block; margin-bottom:0.5rem; }
.preWrap dl dt img { width: 100%; }
.preWrap dl dt span { background: url("../img/preTitlebk_natsu.gif") top center no-repeat; width: 285px; height: 33px; padding: 0; font-size: 18px; color: #81c5ee; line-height: 33px; font-weight: 600; text-align: center; letter-spacing: 1px; position: absolute; display: block; margin: -63px 0 0 31px; }

.preWrap dl dt span:nth-of-type(2) { margin: -30px 0 0 53px; }
.preWrap dl dt span strong { font-size: 10px; }
.preWrap dl dd { margin: 0 0 3% 0; font-size: 14px; line-height: 28px; letter-spacing: 1px; font-weight: 600; text-align: justify; }
.preWrap dl dd strong { font-size: 10px; letter-spacing: 1px; display: block; }
.preWrap dl dd span { margin: 5% 0; font-size: 10px; letter-spacing: 1px; border-top: 1px #000 dashed; display: block; position: relative; }
.preWrap dl dd span small { text-align: right; border-top: 0; margin: 0; position: absolute; right: 0; font-size: 10px; } 

.textp { }
.textp p span { font-size: 12px; line-height: 21px; }

/* new */
.preWrap ul li.autumn { max-width: 745px; }
/*
.specialPreWrap { }
.specialPreBox { max-width: 745px; margin: 0 auto; background: url(../img/borderImg.svg) repeat; display: block; padding: 15px 30px 15px 30px; position: relative; }
.specialPreBox::before { content: url('../img/number5Icon.svg'); position: absolute; width: 105px; height: 105px; left: 0; top: 0; }
.specialPreBox dl { background-color: #fff; }
.specialPreBox dl dt { padding: 2% 0 0 0; height: 67px; }
.specialPreBox dl dt span { background: url(../img/preTitlebkBig.gif) top center no-repeat; width: 100%; height: 63px; padding: 0; font-size: 28px; color: #81c5ee; line-height: 65px; font-weight: 600; text-align: center; letter-spacing: 1px; display: block; margin: 0 12%; max-width: 506.8px; }
.specialPreBox dl dd { font-size: 21px; color: #000; letter-spacing: 2px; line-height: 40px; text-align: center; font-weight: bold; padding: 3% 0; margin: 0; }
.WPreWrap { max-width: 1140px; margin: 0 auto; border: 6px dashed; padding: 0; }
.wpArea { background-color: #000; padding: 30px; margin: 0; position: relative; }
.wpBoxWrap { border: 2px solid #fff; margin: 0; position: relative; display: flex; padding: 2% 5%; }
.wpBoxWrap h3 { margin: 0; font-size: 36px; font-weight: bold; color: #81c5ee; letter-spacing: 3px; position: absolute; top: -22px; background-color: #000; padding: 0 2%; left: 30px; }
.wpBoxWrap h3::before, .wpBoxWrap h3::after { content: none; }
.wpLeftBox p { font-size: 22px; color: #fff; line-height: 48px; text-align: center; max-width: 400px; margin: 11% auto; letter-spacing: 1px; font-family: "M PLUS Rounded 1c"; font-weight: 500; }
.wpLeftBox p span { font-size: 28px; font-weight: 800; margin: 0 1.5%; letter-spacing: 2px; }
.wpRightBox { padding: 0 0 0 10%; }
.wpRightBox img { width: 100%; }*/
/*-----sec04 end-----*/



/*-----sec05 SPOTLIST-----*/
.sec05_box { margin: 0 auto; }
section.sec05::after { content: ""; background: url(../img/sec02_topline.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; bottom: 0; }

.mt10 { margin: 10% 0 0 0; }
.mt20 { margin: 20% 0 0 0; }
.i_main_mapWrap { width: 100%; height: 550px; margin: 0; }
.i_main_mapWrap iframe { background-color: #fafafa; border: 0px solid #ff8a15; border-radius: 20px; width: 100%; height: 100%; }

/* アコーディオン */
.accordion { margin: 3rem auto; max-width: 100%; }
.category { display: none; }
.option { position: relative; margin-bottom: 0; }
.option label { margin-bottom: 0; }
.box_title,
.content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
.box_title { padding: 2%; display: block; color: #fff; font-weight: bold; }
.ko { background: #29abe2; }
.ho { background: #8cc63f; }
.yu { background: #f7931e; }
.ku { background: #ff7bac; }
.mi { background: #93278f; }
.hi { background: #c69c6d; }
.stay { background: #000; }
.box_title::after,
.box_title::before { content: ""; position: absolute; right: 1.25rem; top: calc(50% - 0.4rem); width: 2px; height: 0.8rem; background-color: #fff; transition: all 0.3s; }
.box_title::after { transform: rotate(90deg); }
.ko_con { background-color: #f0fcff; }
.ho_con { background-color: #f9fff0; }
.yu_con { background-color: #fff5e6; }
.ku_con { background-color: #ffebf3; }
.mi_con { background-color: #ffe6ff; }
.hi_con { background-color: #ffe8d2; }
.stay_con { background-color: #f4f4f4; }
.content { max-height: 0; overflow: hidden; }
.content p { margin: 0; padding: 1em 1em 1em; font-size: 0.9em; line-height: 1.5; }
.under_bar p { border-bottom: 1px solid rgba(0,0,0,0.15); display: flex; }
.category:checked + .box_title + .content { max-height: 30000px; transition: all 30s; height: 100%; }
.category:checked + .box_title::before { transform: rotate(90deg) !important; }
.acc_in_wrap { padding: 1% 3% 3% 3%; }
.list_bottom_box span { width: 30px; height: 30px; display: flex; padding: 0; margin: 0 0 0 20px; }
.list_bottom_box span img { width: 100%; padding: 0 10%; }
/*-----sec05 end-----*/



/*-----sec06 QA-----*/
section.sec06 { background-color: #4d4d4d; }
.sec06 h2 { color: #fff; }
.sec06_box {  }
.sec06_box .option { border-bottom: solid 1px #dedede; }
.qa_wrap { padding: 10% 0; background-color: #efefef; }
.box_title_qa, .content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
.box_title_qa { padding: 1% 2%; display: block; color: #fff; font-weight: bold; background: #fff; }
.box_title_qa::after, .box_title_qa::before { content: ""; position: absolute; right: 2.25em; top: 2.0em; width: 2px; height: 0.75em; background-color: #333; transition: all 0.3s; }
.box_title_qa::after { transform: rotate(90deg); }
.category:checked + .box_title_qa + .content { max-height: 500px; transition: all 1.5s; }
.category:checked + .box_title_qa::before { transform: rotate(90deg) !important; }
.box_title_qa h3 { font-size: 18px; letter-spacing: 2px; font-weight: 600; display: inline-block; margin: 1% 0 1% 0; color: #333333; width: 100%; text-align: left; }
.box_title_qa h3 strong { color: #dadf00; font-size: 24px; font-weight: bold; padding: 0 1% 0 0; }
.box_title_qa img { width: 34px; margin-right: 20px; display: inline-block; padding: 10px 0 10px 0; position: absolute; }
.box_title_qa p { display: inline-block; margin: 10px 0 20px 0; line-height: 42px; padding: 0 0 0 48px; color: #666; }
.box_txt_qa { padding: 0 2% 4% 2%; display: block; }
.box_txt_qa img { width: 34px; margin-right: 20px; display: inline-block; padding: 10px 0 10px 0; position: absolute; }
.box_txt_qa p { display: inline-block; line-height: 29px; color: #333333; font-weight: 500; font-size: 14px; width: 100%; padding: 1em 1em 1em 0; }
.box_txt_qa p strong { font-size: 24px; color: #ff9494; font-weight: bold; padding: 0 1% 0 0; }
.box_txt_qa ul { margin: 0; font-size: 14px; line-height: 27px; }
.box_txt_qa dl { margin: 0 0 0 5%; font-size: 14px; }
.box_txt_qa dt { font-weight: 600; }
.sec06inBox { max-width: 960px; margin: 0 auto; padding:0; }
/*-----sec06 end-----*/



/*-----sec07 NOTICE-----*/
section.sec07 { background-color: #81c5ee; }
section.sec07::before { content: ""; background: url(../img/sec02_topline.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; top: 0; }
section.sec07::after { content: ""; background: url(../img/sec07_bottomline.svg) top center /contain repeat-x; width: 100%; height: 50px; display: block; position: absolute; bottom: 0; }
section.sec07 .inWrap { background-color: #fff; }
.sec07_topBox { max-width: 900px; margin: 5% auto 0 auto; background: url(../img/borderImg.svg) repeat; display: block; padding: 30px 30px 26px 30px; }
.sec07AkWrap img { top: 3%; }
.sec07TxtBox { margin: 5% auto; max-width: 800px; width: 100%; }
.sec07TxtBox h3 { font-size: 21px; text-align: center; border-bottom: 1px solid #000; font-weight: 800; letter-spacing: 3px; display: table; margin: 5% auto; }
.sec07TxtBox p { font-size: 14px; line-height: 34px; font-weight: bold; letter-spacing: 2px; text-align: justify; }
.sec07TxtBox ul { margin: 5% 0; padding: 0 0 0 1rem; }
.sec07TxtBox ul li, .sec07TxtBox ol.boxin li, .sec07TxtBox dd { font-size: 14px; line-height: 34px; color: #1a1a1a; text-align: left; font-weight: 500; }
.sec07TxtBox ol.boxin { }
.sec07TxtBox dl { }
.sec07TxtBox dt { font-size: 18px; font-weight: bold; letter-spacing: 2px; text-align: left; }
.sec07TxtBox dd { margin-left: 0; }

.sec07_topBkWrap img { position: absolute; top: 0; width: 28.6%; }
.sec07_bottomBkWrap img { position: absolute; bottom: 0; }
.sec07_bottomBkWrap img:first-child { right: 2%; width: 29.85%; bottom: -21%; z-index: 100; }
/*-----sec07 end-----*/


footer { background-color: #fff; }
footer p { text-align: center; padding: 3% 0; margin: 0; }














/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive { /*position:fixed;にし、z-indexの数値を大きくして前面へ*/ position:fixed; z-index: 999; top: 0; width:100%; height: 100vh; }
/*丸の拡大*/
.circle-bg { position: fixed; z-index:20; /*丸の形*/
 width: 100px; height: 100px; border-radius: 50%; background: #3e3a39; /*丸のスタート位置と形状*/
 transform: scale(0);/*scaleをはじめは0に*/ right:-50px; top:-50px; transition: all .6s;/*0.6秒かけてアニメーション*/ }
.circle-bg.circleactive { transform: scale(50);/*クラスが付与されたらscaleを拡大*/ }
/*ナビゲーションの縦スクロール*/
#g-nav-list { display: none;/*はじめは表示なし*//*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999;  width: 100%; height: 100vh; overflow: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
#g-nav.panelactive #g-nav-list { display: block; /*クラスが付与されたら出現*/}
/*ナビゲーション*/
#g-nav ul { opacity: 0;/*はじめは透過0*/ position: absolute; z-index: 999; top:45%; left:65%; transform: translate(-50%,-50%);  }
/*背景が出現後にナビゲーションを表示*/ 
#g-nav.panelactive ul { opacity:1; }
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li { animation-name:gnaviAnime; animation-duration:1s; animation-delay:.2s;/*0.2 秒遅らせて出現*/ animation-fill-mode:forwards; opacity:0; }

@keyframes gnaviAnime { 
0% {opacity: 0; }
100% {opacity: 1; }
}

#g-nav.panelactive ul li:first-child { max-width: 200px; margin: 0 auto; padding: 0; }
#g-nav.panelactive ul li:first-child img { width: 100%; }
/*リストのレイアウト設定*/
#g-nav li { text-align: center;  list-style: none; }
#g-nav li a { color: #333; text-decoration: none; padding:6px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; }

/*========= ボタンのためのCSS ===============*/
.openbtn { position:fixed; top:10px; right: 10px; z-index: 9999;/*ボタンを最前面に*/ cursor: pointer; width: 100px; height:100px; }
 
/*×に変化*/ 
.openbtn span { display: inline-block; transition: all .4s; position: absolute; left: 14px; height: 3px; border-radius: 2px; background-color: #fff; width: 45%; }
.openbtn span:nth-of-type(1) { top:15px; }
.openbtn span:nth-of-type(2) { top:25px; }
.openbtn span:nth-of-type(3) { top:35px; }
.openbtn.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; }
.openbtn.active span:nth-of-type(2) { opacity: 0; }
.openbtn.active span:nth-of-type(3) { top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; }

/* end */
.box_end { border: 10px solid #000; padding: 0; max-width: 500px; margin: 5% auto; } 
.box_end h3 { text-align: center; color: #000; margin: 5% 0 5% 0; }
.box_end p { text-align: center; color: #000; margin: 0 0 5% 0; padding: 0; line-height: 30px; letter-spacing: 2px; font-size: 16px; font-weight: 500; }
.end_text { background: #000; max-width: 500px; margin: 0 auto; }
.end_text p { text-align: center; color: #dadf00; margin: 5% 0; padding: 5%; font-size: 16px; font-weight: 600; letter-spacing: 2px; line-height: 35px; }