@charset "utf-8";

/* Reset Style
==================================================*/

* { margin: 0; padding: 0; font-size: 100%; box-sizing: border-box;}
html { height: 100%; margin: 0; padding: 0; line-height: 1; zoom: 1;}
body { height: 100%; margin: 0; padding: 0; font-family:'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1em; zoom: 1; color: #333333;}

hr { display: none; }
img { border: none; line-height: 0; vertical-align: bottom; }
div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td { margin: 0; padding: 0; }
li { list-style-type: none; border: 0; outline: 0; }
address, th, caption, em, dfn { font-style: normal; font-weight: normal; font-size: 100%; }
strong{font-weight: bold;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; font-size: inherit; }

a { color: #fff; text-decoration: none;
}
a:link { color: #fff; text-decoration: none;}
a:visited {}
a:hover { text-decoration: underline;opacity: 0.8;}
a:active { text-decoration: underline;}

img{width:100%;height: auto;}
/* clearfix
============================= */
.clearfix:after {
content: "" ;
display: block ;
clear: both ;
height: 0 ;
visibility: hidden ;
font-size: 0.1em;
line-height: 0;
}
.clearfix { min-height: 1px;}
* html .clearfix {height: 1px;}

/*----------------------------------------------------------------------------
 ***                                                                    共通
----------------------------------------------------------------------------*/
.pcNone{ display:none;}
.spNone{ display:block;}
.dispFlex{ display: flex;}
.posiR{ position: relative;}
.posiA{ position: absolute;}

.tac{ text-align:center;}
.tar{ text-align:right;}
.tal{ text-align:left;}

.floatR{ float:right;}
.floatL{ float:left;}
.imgfloatR{ float:right;}
.imgfloatL{ float:left;}

.mgb4{margin-bottom: 4em;}
.mgb6{margin-bottom: 6em;}
/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
/*header*/
#pageHeader{background:#000;position: sticky;top: 0;z-index: 100;}
#pageHeader .headerInner{padding:0 0% 0 1%;position: relative;display: flex;}
#pageHeader .headerInner h1{ float:left;}
#pageHeader .headerInner h1 img{padding:12px 0;}
#pageHeader .headerInner ul{display: flex;justify-content:flex-start;float: left;align-items: center;padding: 0px 0 0px 1%;width: 100%;}
#pageHeader .headerInner li{border-left: 1px solid #e2e2e2;padding: 1% 2%;}
#pageHeader .headerInner li a:hover{opacity: 0.8;}
#pageHeader .headerInner p{margin-left: 5px;}
#pageHeader .headerLive{float: right; width: 20%;}
#pageHeader .headerLive img{padding: 17px 5px 17px; max-width: 240px;}
/*----------------------------------------------------------------------------
 ***                                                                  section
----------------------------------------------------------------------------*/
.mainBox{background: url(/files/user/_/partner24-25/img/bg_fv.jpg);background-position: top center;background-size: 100%;background-repeat: no-repeat;}
.mainBox img{width: 100%;}
.mainBox .fvtitle{padding: 23% 40% 3% 8%;}
.mainBox .mainBoxInner .fv01{width: 80%; margin: 0 auto; padding-top: 1.5em;}


.back_top{width: 120px; position: fixed; bottom: 2%; right: 2%; z-index: 100;}
/*----------------------------------------------------------------------------
 ***                                                                mainImgBox
----------------------------------------------------------------------------*/

.contentsBox{background: #fff;}
.contentsBox .contentsInner{background: #fff;max-width: 1200px;width: 95%;margin: auto;padding-bottom: 30px;}

/*----------------------------------------------------------------------------
 ***                                                                    first
----------------------------------------------------------------------------*/
#first{width: 95%; margin: 0 auto; padding: 4em 0 0;}
#first h3{text-align: center; color: #d4280f; font-size: 230%; font-weight: 900; margin-bottom: 0.3em;}
#first p{font-size: 19px; color: #3d1104; text-align: left; line-height: 1.7; font-weight: bold;}

/*----------------------------------------------------------------------------
 ***                                                               ura_comment
----------------------------------------------------------------------------*/
#ura_comment{padding: 4em 0 0;}
#ura_comment .flexBox{display: flex; width: 95%; align-items: center; justify-content: space-between;}
#ura_comment .flexBox .pic{width: 40%;}
#ura_comment .flexBox .txt{width: 45%; text-align: justify; padding: 2em; font-size: 19px; color: #3d1104; line-height: 1.7; font-weight: bold; position: relative;}
#ura_comment .flexBox .txt::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 75px; height: 75px; background: url("../img/img_waku01.png"); background-repeat: no-repeat;}
#ura_comment .flexBox .txt::after{content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 75px; height: 75px; background: url("../img/img_waku02.png"); background-repeat: no-repeat;}

#ura_comment .flexBox .gara{width: 10%; max-width: 150px;}

.contentsBox .garacenter{width: 20%; margin: 0 auto; padding-top: 4em;}
/*----------------------------------------------------------------------------
 ***                                                          kamisawa_comment
----------------------------------------------------------------------------*/
#kamisawa_comment{padding: 4em 0;}
#kamisawa_comment .flexBox{display: flex; width: 95%; align-items: center; justify-content: space-between; margin: 0 0 0 auto;}
#kamisawa_comment .flexBox div{width: 60%; min-width: 690px;}
#kamisawa_comment .flexBox .pic{width: 50%;}
#kamisawa_comment .flexBox .txt{width: 100%;font-size: 19px; color: #3d1104; line-height: 1.7; font-weight: bold; text-align: right; padding: 2em; position: relative; max-width: 700px; margin: 0 2em 2em auto;}
#kamisawa_comment .flexBox .txt::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 75px; height: 75px; background: url("../img/img_waku01.png"); background-repeat: no-repeat;}
#kamisawa_comment .flexBox .txt::after{content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 75px; height: 75px; background: url("../img/img_waku02.png"); background-repeat: no-repeat;}
#kamisawa_comment .flexBox .gara{width: 95%;}

/*----------------------------------------------------------------------------
 ***                                                          		  project
----------------------------------------------------------------------------*/
#project .contentsInner{margin: 4em auto 0;}
#project .flexBox{display: flex; flex-wrap: wrap; justify-content: space-around;}
#project .flexBox li{margin-bottom: 1.5em;}
/*ポップアップ設定*/
#project .Inner{display: none;}
#project .Inner.open{display: block;}
#project .Inner{visibility: hidden; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); z-index: 999; transition: 1s; opacity:0;}
#project .Inner.open{visibility: visible; transition: 1s; animation-name: fadeInAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0}
@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}

#project .modal-btn{border: none;}
#project .modal-window{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; width: 40%; max-width: 635px; height: auto; margin: 0; padding: 40px 30px; overflow-y: auto; border: solid #e94709 5px;}
#project #project01_Inner .modal-window{width: 55%; max-width: 780px;}
#project .modal-window .flexBox{display: flex; flex-wrap: nowrap;}
#project .modal-window .flexBox .leftBox{border-right: dotted #3d1104; padding-right: 1em;}
#project .modal-window .flexBox .rightBox{padding-left: 1em;}
#project .modal-window p{width: 100%; margin: 0;}
#project .modal-window .project_ttl{color: #3d1104; padding: 1em 0 0.5em; font-size: 20px; text-align: center; border-bottom: #009c9a 1px solid; font-weight: bold;}
#project .modal-window .project_txt{color: #3d1104; padding: 0.5em 0 0em; font-size: 17px; line-height: 1.2; width: 95%; margin: 0 auto;}
#close{ width: 40px;height: 40px;position: absolute;right: 0;background:none;color: #fff;font-size: 35px;font-weight: 300;border: none;font-family:'Noto Sans Japanese',"游ゴシック", YuGothic;top: -3px;}

#project .Inner .event_ttl{font-size: 20px;font-weight: 300;padding:1em 2.5em 0.5em;position: relative;line-height: 1;color: #fff;text-align: center;}
#project .Inner .event_txt{padding: 0.5em 2.5em 1em;font-size: 17px;font-weight: 200;line-height: 1.2;color: #fff; word-break: break-all;}

body.no_scroll{overflow: hidden;}

/*----------------------------------------------------------------------------
 ***                                                          		     data
----------------------------------------------------------------------------*/
#data .contentsInner{margin: 4em auto 0;}
#data .txt{font-size: 19px; color: #3d1104; line-height: 1.7; font-weight: bold; margin: 0 auto 3em;}
#data .bgtitle{background: #231815; color: #fff; text-align: center; font-size: 170%; padding: 0.3em 0 0.4em; font-weight: bold; margin-bottom: 0.8em;}
#data .gara{width: 17%; margin: 3em auto;}
#data .asia{width: 90%; margin: 0 auto;}
#data .subtitle{margin: 5em auto 2em;}
#data .okoku .flexBox{display: flex; justify-content: space-around; flex-wrap: wrap;}
#data .okoku .flexBox p{margin-bottom: 2em;}
#data .okoku .txt{margin: 0 auto 2em;}
#data .fukidashi{margin-top: 2em;}
#data .attribute .flexBox{display: flex; justify-content: space-around;}
#data .tv .flexBox{display: flex; justify-content: space-around; align-items: center;}
#data .tv .flexBox p{font-size: 19px; color: #3d1104; line-height: 1.7; font-weight: bold;}
#data .tv .flexBox p span{background: #3d1104; color: #fff; font-size: 70%; font-weight: normal; border-radius: 5px; padding: 0.1em 0.5em; margin: 0 0.5em;}
#data .sns .flexBox{display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
#data .sns .flexBox p{margin-bottom: 5em;}
#data .sns .date{text-align: right; font-weight: bold; margin: -4em 3em 1em 0;}
#data .sns .txt{margin: 0 auto 2em;}

/*----------------------------------------------------------------------------
 ***                                                          		   example
----------------------------------------------------------------------------*/
#example .contentsInner{margin: 4em auto 0;}
#example .flexBox{display: flex; flex-wrap: wrap; justify-content: space-around;}
#example .flexBox li{margin-bottom: 1.5em;}
/*ポップアップ設定*/
#example .Inner{display: none;}
#example .Inner.open{display: block;}
#example .Inner{visibility: hidden; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); z-index: 999; transition: 1s; opacity:0;}
#example .Inner.open{visibility: visible; transition: 1s; animation-name: fadeInAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0}
@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}
#example .modal-btn{border: none;}
#example .modal-window{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; width: 50%; max-width: 740px; height: auto; margin: 0; padding: 40px 30px; overflow-y: auto; border: solid #e94709 5px;}
#example .modal-window p{width: 100%; margin: 0;}
#example .modal-window .example_ttl{color: #3d1104; padding: 1em 0 0.5em; font-size: 20px; text-align: center; border-bottom: #009c9a 2px solid; font-weight: bold; line-height: 1.3;}
#example .modal-window .example_txt{color: #3d1104; padding: 0.5em 0 1em; font-size: 17px; line-height: 1.2; width: 95%; margin: 0 auto;}
#example .modal-window .example_txt a{color: #3d1104; word-break: break-all;}
#example .modal-window a{color: #3d1104;}
#close{ width: 40px;height: 40px;position: absolute;right: 0;background:none;color: #3d1104;font-size: 35px;font-weight: 300;border: none;font-family:'Noto Sans Japanese',"游ゴシック", YuGothic;top: -3px;}

#example .Inner .event_ttl{font-size: 20px;font-weight: 300;padding:1em 2.5em 0.5em;position: relative;line-height: 1;color: #fff;text-align: center;}
#example .Inner .event_txt{padding: 0.5em 2.5em 1em;font-size: 17px;font-weight: 200;line-height: 1.2;color: #fff; word-break: break-all;}

body.no_scroll{overflow: hidden;}

/*----------------------------------------------------------------------------
 ***                                                          		     rank
----------------------------------------------------------------------------*/
#rank .contentsInner{margin: 4em auto 0;}
#rank .txt{font-size: 20px; color: #3d1104; margin: 0.5em auto; font-weight: bold; text-align: center;}

/*----------------------------------------------------------------------------
 ***                                                          		     menu
----------------------------------------------------------------------------*/
#menu .contentsInner{margin: 4em auto 0;}
#menu .flexBox{display: flex; flex-wrap: wrap; justify-content: space-around;}
#menu .flexBox p{margin-bottom: 1em;}

/*----------------------------------------------------------------------------
 ***                                                          		 interview
----------------------------------------------------------------------------*/
#interview .contentsInner{margin: 4em auto 2em;}
#interview p{width: 33%; margin: auto;}

/*----------------------------------------------------------------------------
 ***                                                          		   sponsor
----------------------------------------------------------------------------*/
#sponsor .contentsInner{margin: 4em auto 0;}
#sponsor .btn{width: 35%; margin: 0 auto;}

/*----------------------------------------------------------------------------
 ***                                                          		   contact
----------------------------------------------------------------------------*/
#contact{background: url(/files/user/_/partner24-25/img/bg_contents02.png);background-position: center;background-size: 95%;background-repeat: no-repeat;}
#contact .contentsInner{width: 30%; margin: 4em auto 2em;}
#contact .title{width: 65%; margin: 0 auto; max-width: 300px;}
#contact p{color: #624000; text-align: center; font-size: 130%; font-weight: bold; margin: 1em auto 0.3em;}
#contact .btn{max-width: 450px; width: 100%;}

/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/
/* footer */
#pageFooter{ background:#E9470B;}
#pageFooter .footerInner{ padding:1% 1%;}
#pageFooter dl{ float:left; width:60%;}
#pageFooter dt{ width:7%; float:left;}
#pageFooter dd{ float:left; font-size:80%; color:#FFF; padding:3% 0 0 2%;}
#pageFooter  p{ float:right; font-size:80%; color:#FFF; padding-top:1.5%;}



@media screen and (max-width: 1200px) and (min-width: 951px){
	#pageHeader .headerInner ul{padding: 0px 0 0px 2%;}
	#pageHeader .headerInner li{padding:3% 2%; }
}