@charset "UTF-8";
/*
NIKKEI FORUM
THE FUTURE OF SPACE 2023
WE WORKS 2023.07 CUSTOM.CSS
*/







/* Keyvisual ============================================== */
#keyvisual { position: relative; margin: 0; padding: 0; border-bottom: 1px solid #333; width: 100%; height: 95vh; background: url("../images/top/nf-space23-hero.jpg") 50% 50% no-repeat; background-size: cover; display: grid; place-items: center; }
/* タイトル画像 */
#keyvisual #top-item { margin: 0 auto 20px; text-align: center; width: 100%; }
#keyvisual #top-item img { margin-top: 6%; width: 80%; }
#keyvisual #top-item img.date { margin-top: 4%; width: 35%; }
#keyvisual #top-item img.btn { margin-top: 20px; width: 35%; }
#keyvisual #top-item p { margin: 1em auto 0; font-size: 14px; line-height: 1.1; text-align: center; color: #ff0; }
#keyvisual #top-item a:hover img { opacity: 0.8; }
@media(max-width:768px) {
#keyvisual { position: relative; margin: 0; height: 65vh; background: url("../images/top/nf-space23-hero-sp.jpg?20230805") 50% 50% no-repeat; background-size: cover; }
#keyvisual #top-item { width: 100%; }
#keyvisual #top-item img { margin-top: 25%; width: 100%; }
#keyvisual #top-item img.date { margin-top: 4%; width: 60%; }
#keyvisual #top-item img.btn { width: 60%; }
}



/* h2 title + border ============================================== */
.head-border { display: flex; align-items: center; margin: 40px auto; }
.head-border:before, 
.head-border:after { content: ""; height: 1px; flex-grow: 1; background-color: #000; }
.head-border h2 { margin: 0 auto; padding: 0.2em 5em; border: 1px solid #000; border-radius: 1.5em; background-color: #fff; font-size: 18px; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-weight: 700; letter-spacing: 0; color: #000; text-align: center; }
.head-border h2.small { font-size: 14px; }
.head-border h2.noborder { border: 0; padding: 0.2em 1em; }
.head-border-fff { display: flex; align-items: center; margin: 40px auto; }
.head-border-fff:before, 
.head-border-fff:after { content: ""; height: 1px; flex-grow: 1; background-color: #fff; }
.head-border-fff h2 { margin: 0 auto; padding: 0.2em 5em; border: 1px solid #fff; border-radius: 1.5em; background-color: #fff; font-size: 18px; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-weight: 700; letter-spacing: 0; color: #000; }
@media(max-width:768px) {
.head-border h2 { font-size: 16px; width: 80%; padding: 0.2em; }
.head-border h2 span { display: none; }
.head-border h2.small { font-size: 14px; width: 80%; padding: 0.2em; }
.head-border-fff h2 { font-size: 16px; }
.head-border-fff h2 span { display: none; }

}
 




/* Slider - TopPage ============================================== */
section#loopslider { margin: 0; padding: 30px 0; background: url("../images/top/space-bg2.jpg") 50% 50% no-repeat #000; background-size: cover; }
/* Photo Slider ============================================== */
ul.slider img { width: 100%;/*スライダー内の画像を横幅100%に*/ height: auto; }
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
ul.slider .slick-slide { margin: 0;/*スライド左右の余白調整*/ }
ul.slider { margin:0; padding: 0; list-style: none; }






/* Concept - TopPage ============================================== */
section#concept { position: relative; width: 100%; margin: 0; padding: 80px 0; overflow: hidden; background: url("../images/top/space-bg1.jpg") 50% 50% no-repeat #000; background-size: cover; }
section#concept h3 { margin: 0 auto 20px; font-family: 'Bebas Neue', 'Noto Sans JP', sans-serif; font-size: 40px; text-align: center; line-height: 1.25; color: #fff; }
section#concept h3 span { display: block; font-size: 20px; }
section#concept p { margin: 0 auto 2em; font-family: 'Open Sans', 'Noto Sans JP',sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: 0; text-align: left; color: #fff; width: 99%; }
section#concept .features { display: flex; flex-direction: row; justify-content: center; margin: 0 auto 20px; width: 100%; }
section#concept .features img { margin: 0 0.5%; width: 32%; }
@media(max-width:768px) {
section#concept h3 { font-size: 32px; }
section#concept h3 span { font-size: 20px; }
section#concept p { font-size: 14px; }
section#concept .features { flex-direction: column; margin: 0 auto 20px; width: 100%; }
section#concept .features img { margin: 0 auto 20px; width: 75%; }
}





/* Agenda - TopPage ============================================== */
section#agenda { position: relative; width: 100%; margin: 0; padding: 80px 0; overflow: hidden; background: #f5f5f5; }
section#agenda p { margin: 0 auto; font-family: 'Open Sans', 'Noto Sans JP',sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left; color: #000; }
/* time gray center */
.time-border { display: flex; align-items: center; margin: 0 auto 40px; }
.time-border:before, 
.time-border:after { content: ""; height: 1px; flex-grow: 1; background-color: #e5e5e5; }
.time-border h6 { margin: 0 auto; padding: 0.2em 4em; border: 1px solid #e5e5e5; border-radius: 1.5em; background-color: #e5e5e5; font-size: 12px; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-weight: 600; letter-spacing: 0; color: #000; }

/* time blue left */
.time-border2 { display: flex; align-items: center; margin: 0 auto 20px; } 
.time-border2:after { content: ""; height: 1px; flex-grow: 1; background-color: #004989; }
.time-border2 h6 { margin: 0; padding: 0.2em 4em; border: 1px solid #004989; border-radius: 1.5em; background-color: #004989; font-size: 12px; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-weight: 500; letter-spacing: 0; color: #fff; }
.time-border2 h6 span { color: #FBED21; }




/* agenda bg */
#agenda {}
#agenda .container p { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #666; }
.agenda-container { margin: 0 auto; padding: 30px; width: 100%; background-color: #fff; }
.agenda-container hr { margin: 40px auto; border: 0; border-bottom: 1px solid #e5e5e5; width: 100%; }
.agenda-container h3 { margin: 0 0 1em!important; font-family: 'Open Sans', 'Noto Sans JP',sans-serif!important; font-size: 22px!important; font-weight: 600!important; text-align: left!important; line-height: 1.25!important; letter-spacing: 0!important; color: #000!important; }
.agenda-container h3.en { margin: 0 0 0.5em!important; font-family: 'Bebas Neue' ,sans-serif!important; font-size: 32px!important; font-weight: 500!important; line-height: 1.25!important; }
.agenda-container p { margin: -1em 0 1.5em!important; font-family: 'Open Sans', 'Noto Sans JP',sans-serif!important; font-size: 14px!important; text-align: left!important; line-height: 1.5!important; letter-spacing: 0!important; color: #666!important; }
.agenda-container p span { color: #999; }
/* agenda flex */
.agenda-flex { display: flex; flex-direction: row; align-items: flex-start; margin: 0 0 20px; text-align: left; }
.agenda-flex.end { align-items: flex-end; }
.agenda-flex .leftbox { margin-right: 1%; width: 49%; }
.agenda-flex .rightbox { margin-left: 1%; width: 49%; }
.agenda-flex .rightbox p.other { margin-right: 2em!important; font-size: 14px!important; color: #999!important; text-align: right!important; }
.speaker-box { display: flex; flex-direction: row; align-items: center; }
.speaker-box .ph { width: 30%; margin-right: 3%; }
.speaker-box .ph img { width: 100%; }
.speaker-box .name { width: 67%; }
.speaker-box .name h4,
.speaker-box .name h5,
.speaker-box .name h6 { margin: 0 auto; font-family: 'Open Sans', 'Noto Sans JP',sans-serif; text-align: left; line-height: 1.25; letter-spacing: 0; }
.speaker-box .name a { color: inherit; text-decoration: none; }
.speaker-box .name h4 { font-size: 20px; font-weight: 600; color: #000; text-decoration: none; margin-top: 0em; }
.speaker-box .name h4.en { font-size: 26px; font-weight: 400; font-family: 'Bebas Neue', sans-serif; }
.speaker-box .name h5 { font-size: 14px; font-weight: 400; color: #114782; text-decoration: underline; }
.speaker-box .name h6 { display: inline-block; margin: 0 0 0.75em; padding: 0.3em 1.25em; border: 1px solid #114782; border-radius: 1em; font-size: 10px; line-height: 1.0; font-weight: 600; color: #114782; }
@media(max-width:768px) {
.agenda-flex { flex-direction: column; }
.agenda-flex.end { align-items: flex-start; }
.agenda-flex .leftbox { margin-right: 0%; margin-bottom: 20px; width: 100%; }
.agenda-flex .rightbox { margin-left: 0%; margin-bottom: 20px; width: 100%; }
.agenda-flex .rightbox p.other { margin-right: 0em!important; margin-left: 2em!important; text-align: left!important; }
}








/* Outline - TopPage ============================================== */
.outline { margin-top: 40px; }
.outline dl { display: flex; margin: 0 auto 0; padding: 1.4em 2em; border-top: 1px solid #ddd; width: 100%; }
.outline dl:last-of-type { border-bottom: 1px solid #ddd; }
.outline dl dt,
.outline dl dd { font-family: 'Open Sans', 'Noto Sans JP', sans-serif; text-align: left; font-weight: 400; letter-spacing: 0; }
.outline dl dt { margin-right: 1%; width: 24%; font-size: 14px; font-weight: 400; color: #666; }
.outline dl dd { width: 75%; font-size: 14px; font-weight: 400; color: #000; }
.outline dl dd span { color: #666; font-size: 12px; font-weight: 400; }
.outline dl dd p { margin: 5px 0 0; font-size: 12px; font-weight: 400; color: #666; line-height: 1.25; }
.outline dl dd a { margin: 0; color: #29a2e1; }
/* logo image */
.outline dl dd div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0; width: 100%; }
.outline dl dd div a { display: block; margin: 0 5% 0 0; width: 20%; cursor: pointer; }
.outline dl dd div a img { width: 100%; }
.outline dl dd div a img.small { width: 80%; }
.outline dl dd div a img.middle { width: 90%; }
.outline dl dd div a.noclick { pointer-events: none; }
@media(max-width:768px) {
section.outline { margin: 0 auto; padding: 40px 0px; border: 0;  }
.outline dl { padding: 1.2em 1em; flex-wrap: wrap; width: 100%; }
.outline dl dt { width: 100%; min-width: 100%; margin: 0 0 .4em 0;}
.outline dl dd { width: 100%; }
.outline dl dd img { width: 25%; height: auto; }
.outline dl dd span { display: block; }
.outline dl dd div { margin: 0; width: 100%; }
.outline dl dd div a { margin: 0 4% 20px 0; width: 46%; }
.outline dl dd div a img { width: 100%; }
.outline dl dd div a img.small { width: 80%; }
.outline dl dd div a img.middle { width: 90%; }
}




/* Merit - TopPage ============================================== */
section#merit { position: relative; width: 100%; margin: 0; padding: 20px 0; overflow: hidden; background: #004989; }
section#merit div.merit2 { display: flex; }
section#merit div.merit2 div.first { width: 38%; margin-right: 2%; }
section#merit div.merit2 div.second { width: 60%; }
section#merit h3 { margin: 0 auto 0.1em; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-size: 24px; text-align: left; line-height: 1.25; color: #fff; }
section#merit h4 { margin: 0 auto 1.0em; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-size: 16px; text-align: left; line-height: 1.25; color: #fff; font-weight: 600; }
section#merit p { margin: 0 auto; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: left; color: #fff; width: 99%; word-wrap: break-word; }
section#merit p a { display: block; margin: 0.1em 0 0 auto; padding: 0.75em 2em; border: 1px solid #fff; border-radius: 2em; font-size: 10px; line-height: 1; text-align: center; text-decoration: none; width: 140px; color: #fff; background-color: #004989; }
section#merit p a:hover { background-color: rgba(255,255,255,0.25);}
section#merit img { display: block; margin: 0 0 10px; padding: 0; background-color: #fff; width: 100%; }
@media(max-width:768px) {
section#merit div.merit2 { flex-direction: column; }
section#merit div.merit2 div.first { width: 100%; margin-right: 0%; margin-bottom: 10px; }
section#merit div.merit2 div.second { width: 100%; }
section#merit h3 { font-size: 24px; }
section#merit p a { margin: 1em auto 0; font-size: 14px; width: 100%; }
}





/* Registration - TopPage ============================================== */
section#register { position: relative; width: 100%; margin: 0 0 20px; padding: 80px 0; overflow: hidden; background: url("../images/top/space-bg2.jpg") 0% 50% repeat-y; background-size: cover; }
section#register p { margin: 0 auto 1em; font-family: 'Open Sans', 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 500; text-align: center; color: #fff; }
section#register p.attention { margin: 20px 0 0; text-align: center; color: #fff; }
section#register p.attention a { color: #08c; }
.register-box { margin: 0 auto; padding: 0; width: 100%; }
.register-box .container { width: 80%; }
.register-box p.description { margin: 10px auto 40px; text-align: left; }
.registe-boxr p.description a { color: #369; text-decoration: underline; }
/* Pardot Formm iframe ============================================== */
.pardot-iframe { width: 100%; height: 1400px; border: 1px solid #ccc; }
.pardot-iframe2 { width: 100%; height: 1650px; border: 1px solid #ccc; }
@media(max-width:768px) {
.register-box .container { width: 90%; }
.pardot-iframe { width: 100%; height: 1700px; }
.pardot-iframe2 { width: 100%; height: 1300px; }
}
/* form ============================================== */
.form-box { width: 75%; margin: 0 auto 0; padding: 30px; border: 1px solid #ccc; background-color: #fff; }
@media(max-width:768px) {
.form-box { width: 100%; padding: 5px; }
}

/* register button 2 */
a.register-btn2 { display: block; margin: 0 auto; width: 400px; }
a.register-btn2 img { width: 100%; }
a.register-btn2:hover img { opacity: 0.8; }
@media(max-width:768px) {
a.register-btn2 { width: 90%; }
}


/* SPEAKERS - SpeakersPage ============================================== */
#speakers-page { margin: 0 auto; padding: 20px 0; width: 90%; }
#speakers-page h3,
#speakers-page h4 { margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: left; line-height: 1.5; letter-spacing: 0; color: #000; }
#speakers-page h3 { margin-bottom: 0; font-size: 26px; font-weight: 600; }
#speakers-page h3.en { font-family: 'Bebas Neue', 'Noto Sans JP', sans-serif; font-size: 34px; font-weight: 400; }
#speakers-page h4 { margin-bottom: 2em; font-size: 14px; font-weight: 400; line-height: 1.25; color: #666; }
.speakers-page { display: flex; flex-direction: row; align-items: flex-start; margin: 0 auto 40px; width: 100%; }
/* flex box */
.speakers-page .box-ph { width: 20%; margin-right: 2%; }
.speakers-page .box-txt { width: 78%; }
/* photo */
.speakers-page .box-ph img { width: 100%; }
/* text */
.speakers-page .box-txt p { margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: left; line-height: 1.5; letter-spacing: 0; color: #000; }
.speakers-page .box-txt h3 { margin-bottom: 0; font-size: 28px; font-weight: 700; }
.speakers-page .box-txt h4 { margin-bottom: 1em; font-size: 14px; font-weight: 400; line-height: 1.25; color: #999; }
.speakers-page .box-txt p { font-size: 16px; color: #333; line-height: 1.5; }
.speakers-page .box-txt p a { color: #08c; text-decoration: none; }
.speakers-page .box-txt p a:hover { text-decoration: underline; }
/* dl flex */
.speakers-page .box-txt dl { margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; width: 100%; }
.speakers-page .box-txt dl dt,
.speakers-page .box-txt dl dd { margin: 0 0 0.25em; padding-bottom: 0.25em; border-bottom: 1px solid #ccc; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; text-align: left; line-height: 1.5; letter-spacing: 0; color: #000; }
.speakers-page .box-txt dl dt { width: 20%; padding-right: 1%; color: #666; }
.speakers-page .box-txt dl dd { width: 80%; }
@media(max-width:768px) {
.speakers-page { flex-direction: column; align-items: flex-start; margin: 0 auto 40px; width: 100%; }
/* flex box */
#speakers-page h3 { font-size: 24px; }
#speakers-page h4 { font-size: 14px; }
.speakers-page .box-ph { width: 100%; margin-right: 0%; margin-bottom: 20px; }
.speakers-page .box-txt { width: 100%; }
.speakers-page .box-txt p { font-size: 14px; }
.speakers-page .box-txt dl { margin: 0 0 20px; flex-direction: column; }
.speakers-page .box-txt dl dt { width: 100%; padding-right: 0; padding-bottom: 0; margin-bottom: 0; border: 0; }
.speakers-page .box-txt dl dd { width: 100%; margin-bottom: 0.5em; }
}
/* table */
.speakers-page table { margin: 0; padding: 0; border: 0; width: 100%; }
.speakers-page tr { }
.speakers-page th, 
.speakers-page td { margin: 0; padding: 8px 4px 8px 10px; border: 2px solid #fff; font-size: 14px; font-weight: 400; text-align: left; line-height: 1.25; color: #000; vertical-align: middle; }
.speakers-page th { width: 20%; margin-right: 5%; color: #333; background-color: #f5f5f5; }
.speakers-page tr.long th { width: 30%; margin-right: 5%; }
.speakers-page th.wht { background-color: #fff; color: #000; }
.speakers-page td { width: auto; }
@media(max-width:768px) {
.speakers-page { width: 100%; padding: 0; }
.speakers-page > div { }
.speakers-page h2 { font-size: 18px; }
.speakers-page h2.en { font-size: 24px;}
.speakers-page h3 { font-size: 12px; }
.speakers-page p { font-size: 12px; text-align: left; line-height: 1.75; }
.speakers-page img { margin: 0 0 20px; float: none; clear: both;  width: 100%; }
.speakers-page table { margin: 0; padding: 0; border: 0; width: 100%; }
.speakers-page th, 
.speakers-page td { font-size: 12px; }
.speakers-page th { display: block; width: 100%; margin-right: 0; }
.speakers-page td { display: block; width: 100%; }
.speakers-page tr.long th { width: 100%; margin-right: 0; }
}




/* Contact - TopPage ============================================== */
section#contact { margin: 0 auto; padding: 80px 0; border: 0; }
section#contact p { margin: 0 auto; font-size: 16px; font-weight: 500; font-family: 'Open Sans', sans-serif; text-align: center; color: #000; }
section#contact a { display: block; margin: 40px auto; font-size: 16px; font-weight: 500; font-family: 'Open Sans', sans-serif; text-align: center; letter-spacing: 0; color: #0c5a92; text-decoration: underline; }
@media(max-width:768px) {
}






/* Footer ============================================== */
footer#footer { margin: 0; padding: 40px 0; background: #000; width: 100%; }
footer#footer .container { display: flex; flex-direction: row-reverse; text-align: left; }
footer#footer .container .logo { width: 8%; margin-left: 2%; }
footer#footer .container .logo img { width: 100%; }
footer#footer .container .text { width: 90%; margin: 0; padding: 0; }
footer#footer .container .text p,
footer#footer .container .text a { margin: 0; font-size: 12px; font-weight: 400; font-family: 'Open Sans', sans-serif; line-height: 1.25; text-align: left; color: #fff; text-decoration: none; letter-spacing: 0; }
footer#footer .container .text a { margin-right: 1em; padding-right: 1em; border-right: 1px solid #fff; }
footer#footer .container .text a:last-of-type { border-right: none; }
footer#footer .container .text a:hover { text-decoration: underline; }
@media(max-width:768px) {
footer#footer .container { display: flex; flex-direction: column; text-align: left; }
footer#footer .container .logo { width: 30%; margin-left: 0%; margin-bottom: 20px; }
footer#footer .container .logo img { width: 100%; }
footer#footer .container .text { width: 100%; margin: 0; padding: 0; }
footer#footer .container .text p { margin-top: 1em; line-height: 1.5; }
footer#footer .container .text a { display: block; margin-right: 0; padding-right: 0; border: 0; }

}





/* page-contents */
h2.page-title { margin: 0 0 40px; padding-bottom: 40px; border-bottom: 1px solid #333; font-size: 20px; font-weight: 500; line-height: 1.25; text-align: left; color: #000; font-family: 'Open Sans', sans-serif; letter-spacing: 0; }
h2.page-title span { font-family: 'Open Sans', sans-serif!important; font-weight: 600; font-size: 32px; }
.paage-contents { margin: 80px auto; width: 70%; }
.paage-contents hr { margin: 40px 0 40px; border: 0; border-bottom: 1px solid #000; }
.paage-contents hr.dashed { margin: 40px 0 40px; border: 0; border-bottom: 1px dashed #ccc; }
.paage-contents a { color: #0c5a92; text-decoration: underline; }
.paage-contents .btm-0 { margin-bottom: 0!important; }
.paage-contents .btm-20 { margin-bottom: 20px!important; }
.paage-contents .btm-40 { margin-bottom: 40px!important; }
.paage-contents .btm-80 { margin-bottom: 80px!important; }
.paage-contents .black { color: #000; }
.paage-contents .gray { color: #666; }
.paage-contents .center { text-align: center; }
.paage-contents h2,
.paage-contents h3,
.paage-contents h4,
.paage-contents h5,
.paage-contents h6,
.paage-contents p { font-family: 'Open Sans', sans-serif!important; line-height: 1.5; text-align: left; letter-spacing: 0; }
.paage-contents h2 { margin: 0 0 40px; font-size: 24px; font-weight: 500; color: #000; }
.paage-contents h3 { margin: 0 0 20px; font-size: 20px; font-weight: 500; color: #000; }
.paage-contents h4 { margin: 0 0 40px; font-size: 18px; font-weight: 600; color: #000; }
.paage-contents h5 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: #000; }
.paage-contents h6 { margin: 0 0 0px; font-size: 14px; font-weight: 600; color: #000; }
.paage-contents p { margin: 0 0 40px; font-size: 14px; font-weight: 400; color: #333; }
.paage-contents ul,
.paage-contents ol　{ margin-bottom: 20px; }
.paage-contents ul li { list-style: circle outside!important; margin-left: 2em; font-size: 14px; font-weight: 400; font-family: 'Open Sans', sans-serif!important; line-height: 1.5; color: #333;  text-align: left!important; letter-spacing: 0; }
.paage-contents ul.disc li { list-style-type: disc; }
.paage-contents ol li { list-style: decimal outside!important; margin-left: 0em; font-size: 14px; font-weight: 400; font-family: 'Open Sans', sans-serif!important; line-height: 1.5; color: #333;  text-align: left!important; letter-spacing: 0; }
.paage-contents dl { margin: 0 0 40px; }
.paage-contents dl dt,
.paage-contents dl dd { font-family: 'Open Sans', sans-serif!important; letter-spacing: 0; }
.paage-contents dl dd { text-indent: -1.0em; margin-left: 1.0em; margin-bottom: 0; padding-left: 1em; font-size: 14px; font-weight: 400; line-height: 1.5; color: #333; text-align: left; }
.paage-contents dl dd:before { content: '-'; display: inline-block; width: 1.0em; text-indent: 0; }
@media(max-width:768px) {
h1.page-title { font-size: 20px; }
.paage-contents { margin: 80px auto; width: 90%; }
}



/* cookie同意バナー */
.cookie-consent {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
font-size: 12px;
color: #fff;
background: rgba(0,0,0,0.7);
padding: 1em 2em;
box-sizing: border-box;
visibility: hidden;
}
.cookie-consent.is-show {
visibility: visible;
}
/*.policy-link, :link, :visited, :hover, :active {
color: rgb(0, 136, 255);
font-size: 15px;
text-decoration: none;
}*/
.cookie-agree, 
.cookie-reject {
color: #fff;
background: dodgerblue;
padding: 0.5em 1em;
margin-left: 15px;
}
.cookie-agree:hover, .cookie-reject:hover {
cursor: pointer;
}
/* パッと消える */
.cc-hide1 {
display: none;
}
/* ゆっくり消える */
.cc-hide2 {
animation: hide 1s linear 0s;
animation-fill-mode: forwards;
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}
/* メディアクエリ */
@media screen and (max-width: 600px) {
.cookie-consent {
flex-direction: column;
}
.cookie-text {
margin-bottom: 1em;
}
}
/* cookie同意カスタム */
.cookie-text { width: 85%; }
.cookie-agree,
.cookie-reject { width: 10%; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 500; }
.cookie-agree { background: #003E70; }
.cookie-reject { background: #999; }
.cookie-consent h6,
.cookie-consent p { margin: 0; font-family: 'Open Sans', sans-serif; letter-spacing: 0.2; text-align: left; color: #fff; }
.cookie-consent h6 { font-size: 16px; font-weight: 500; }
.cookie-consent p { font-size: 12px; }
.cookie-consent p a { color: rgb(0, 136, 255); text-decoration: none; }
@media(max-width:768px) {
.cookie-consent {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
background: rgba(0,0,0,0.7);
padding: 2em;
}
.cookie-text { width: 100%; }
.cookie-agree { width: 100%; margin-left: 0; margin-bottom: 0.5em; }
.cookie-reject { width: 100%; margin-left: 0; }
}







/* 視聴ページ hero ============================================== */
#hero { position: relative; margin: 0; padding: 0; width: 100%; height: auto; min-height: 50vh; background: url("../images/top/nf-space23-hero-dark.jpg") 50% 50% no-repeat; background-size: cover; }
#hero h1 { margin: 100px auto 30px; width: 600px; }
#hero h2.logo { margin: 20px; width: 200px; }
#hero h2.logo img { width: 100%; }
#hero p { margin: 1em auto; font-size: 12px; color: rgba(255,255,255,0.8); text-align: center; }
@media(max-width:768px) {
#hero { position: relative; margin: 0; min-height: 40vh!important; }
#hero h1 { width: 80%; }
#hero h2.logo { margin: 20px auto; width: 30%; }
}


/* STREAMING FLEXボックス */
section#streaming { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin: 0 auto 40px; padding: 0; width: 65%; background-color: inherit; }
section#streaming #movie { margin: 0; width: 75%; }
section#streaming #slido { margin: 0; width: 24.8%; }
section#streaming #movie-only { margin: 0 auto; width: 100%; }
@media(max-width:768px) {
section#streaming { display: flex; flex-direction: column; justify-content: center; width: 94%; }
section#streaming #movie { margin-bottom: 10px; width: 100%; }
section#streaming #slido { margin-bottom: 10px; width: 100%; }
section#streaming #movie-only { margin-bottom: 10px; width: 100%; }
}


/* Movie Box */
div.movie-box { position:relative; margin: 0 auto; width: 100%; height: 0; padding-top: 56.25%; }
iframe.movie-iframe { position: absolute; margin: 0; border: 1px solid #ccc; top: 0; left: 0; width: 100%; height: 100%; }
/* Slido Box */
div.slido-box { position:relative; margin: 0 auto; width: 100%; height: 0; padding-top: 170%; }
iframe.slido-iframe { position: absolute; margin: 0; border: 1px solid #ccc; top: 0; left: 0; width: 100%; height: 100%; }



/* Achive Page */
div.archive-hero { margin: 40px auto 0px; padding: 0; width: 60%; background-color: inherit; }
div.archive-hero h1 { margin: 0 auto 20px; width: 50%; }
div.archive-hero h1 img { margin: 0; width: 100%; }
div.archive-box { position:relative; margin: 0 auto 60px; width: 100%; height: 0; padding-top: 56.25%; }
iframe.movie-iframe { position: absolute; margin: 0; border: 1px solid #ccc; top: 0; left: 0; width: 100%; height: 100%; }
@media(max-width:768px) {
div.archive-hero { margin: 0 auto; padding: 0; width: 94%; }
div.archive-hero h1 { margin: 0 auto 20px; width: 80%; }
div.archive-box { margin-bottom: 40px; }
}



/* language button */
a.language { display: block; position: fixed; right: 2%; top: 5%; width: 140px; z-index: 9999; }
a.language:hover { opacity: 0.8; }
a.language img { width: 100%; }
@media(max-width:768px) {
a.language { display: none; }
}



/* Banner ============================================== */
#banner { margin: 0 auto 20px; padding: 20px 0; background-color: #fff; width: 100%; }
#banner p { margin: 0 auto 1em; font-size: 12px; color: #666; text-align: center; } 
/* バナー7 */
div.banner-box { display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-wrap: wrap; margin: 0 auto; padding: 0; border: 0; width: 90%; }
div.banner-box div { margin: 0 2% 0 0; padding: 0; border: 0; width: 12%!important; height: auto; flex-shrink: 0;}
div.banner-box div:last-child { margin-right: 0; }
div.banner-box div img { margin: 0 auto; width: 100%; }
div.banner-box div img.middle { margin: 0 auto; width: 87%; }
div.banner-box div p { margin: 0; font-size: 12px; color: #666; text-align: left; text-decoration: none; } 
/* crossu用スタイル */
div.banner-box div img.cross { margin-top: 40px; }
div.banner-box div p.att { margin: 0.5em 0!important; font-size: 12px; color: #666; text-align: left; line-height: 1.2; text-decoration: none; } 
div.banner-box div a { text-decoration: none!important; } 
div.banner-box div a p.att { color: #666; text-decoration: none; } 
div.banner-box div a:hover p.att { color: #08c!important; text-decoration: underline; } 
div.banner-box div a.noclick { display: block; pointer-events: none!important; }

/* バナー2 */
div.banner-box2 { display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; flex-wrap: wrap; margin: 0 auto 20px; padding: 0; border: 0; width: 90%; }
div.banner-box2 div { margin: 0 2% 0 0; padding: 0; border: 0; width: 12%!important; height: auto; flex-shrink: 0;}
div.banner-box2 div:first-child {  }
div.banner-box2 div:last-child { margin-right: 0; }
div.banner-box2 div img { width: 100%; }
div.banner-box2 div p { margin: 0 0 0.5em; font-size: 12px; color: #666; text-align: center; } 
div.banner-box2 div p.black { margin: 20px 0 0; font-size: 14px; color: #000; text-align: left; }
/* バナー3 */
div.banner-box3 { display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; flex-wrap: wrap; margin: 20px auto 0; padding: 0; border: 0; width: 90%; }
div.banner-box3 div { margin: 0 2% 0 0; padding: 0; border: 0; width: 15%!important; height: auto; flex-shrink: 0;}
div.banner-box3 div:nth-child(2) { width: 30%!important; }
div.banner-box3 div:last-child { margin-right: 0; }
div.banner-box3 div img { width: 100%; }
div.banner-box3 div p { margin: 0; font-size: 12px; color: #666; text-align: left; padding-left: 15px; } 
div.banner-box3 div p.black { margin: 20px 0 0; font-size: 14px; color: #000; text-align: left; }
@media(max-width:768px) {
/* バナー6 */
#banner { width: 100%; }
div.banner-box { width: 90%; justify-content: flex-start; }
div.banner-box div { margin: 0 2% 10px 0; width: 49%!important; }
div.banner-box div:nth-child(2n) { margin-right: 0; }
/* バナー2 */
div.banner-box2 { width: 90%; justify-content: flex-start; }
div.banner-box2 div { margin: 0 2% 10px 0; width: 49%!important; }
div.banner-box2 div:first-child { width: 90%!important; margin-right: 0; }
div.banner-box2 div p.black { margin-bottom: 20px; } 
/* バナー3 */
div.banner-box3 { width: 90%; justify-content: flex-start; }
div.banner-box3 div { margin: 0 2% 10px 0; width: 49%!important; }
div.banner-box3 div:nth-child(2) { width: 90%!important; margin-right: 0; }
div.banner-box3 div p.black { margin-bottom: 20px; } 
}




/* アンケート */
#questionnaire { margin: 0; padding: 40px 10px; border-bottom: 1px solid #eee; background-color: #eee; width: 100%; text-align: center; }
/* ボタン */
#questionnaire .btn {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #ff0;
font-family: 'Renner*', 'Noto Sans JP', sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #114782;
padding: 0.75em 4.0em;
margin: 0 auto 40px;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
#questionnaire .btn span {
position: relative; 
z-index: 1;
}
#questionnaire .btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 1000%;
width: 220%;
background: #000;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-90%) translateY(-25%) rotate(45deg);
transform: translateX(-90%) translateY(-25%) rotate(45deg);
}
#questionnaire .btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}