/*IMPORT CSS
-------------------------------------*/

@import url("grid.css");


/*------------------------------------
--------------------------------------
■　google
--------------------------------------
-------------------------------------*/

/*Google AdSense表示
-------------------------------------*/

.add_box {
	width:100%;
	text-align:center;
}

.add_box a {
		display: inline-block;
		background-color:  #fff;
		padding:20px ;   
}



/*------------------------------------
--------------------------------------
■　共通設定
--------------------------------------
-------------------------------------*/

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

a {
    /*display:block;*/
    /*color: #333;*/
    text-decoration-line: none;
}

a:hover { 
    color: #999;
}

a img:hover {
	opacity: 0.8;
}

.center {
text-align:center;
}


.small{font-size:.75em;}

/*------------------------------------
--------------------------------------
■　レイアウト・セクション
--------------------------------------
-------------------------------------*/

section {
    margin: 0 auto;
    padding: 10px;
	width:100%;
}



/*メインコンテンツ
-------------------------------------*/
main {
    margin: 0 auto;
    width: 100%;

}





/*------------------------------------
--------------------------------------
■　フッターエリア
--------------------------------------
-------------------------------------*/


footer {
    background-color: #fff;
    padding: 5rem 0;
		color: #666;
}

footer ul li {
	font-size:1.2rem;
}


footer h5 {
    border-bottom: 2px solid #fff;
}



/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #fff;
		font-size:1rem;
}
.copyright a {
    color: #000;
    text-decoration: none;
		display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
	bottom: 15px;
	right: 15px;
}

.circle-btn {
    display: flex;
    width: 60px;
    height: 60px;
    border-radius:50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
}


#pagetop a {
    background: #03A9F4;
    color: #fff;
}

#pagetop a:hover {
    background: #7BDFF2;
}


hr {
	display:block;
	margin:1rem 0;
}


/*------------------------------------
--------------------------------------
■　テキストの装飾
--------------------------------------
-------------------------------------*/

/*見出し
-------------------------------------*/
h1{
font-size:3.8rem;
font-weight: 700;
color: #272343;
letter-spacing: .2rem;
margin: 0 auto 1rem;
text-align: left;
line-height: 1.43;
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'MS Pゴシック', 'MS PGothic', sans-serif;
}


h2{
font-size: 4rem;
font-weight: 700;
color: #272343;
letter-spacing: .2rem;
margin: 1rem auto;
text-align: center;
line-height: 1.43;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}


h3 {
font-size:2rem;
font-weight: 700;
position: relative;
padding-left: 0.7em;
}
 
h3::after {
position: absolute;
top: 50%;
left:0;
transform:translateY(-50%);
content: '';
width: 5px;
height:1em;
background-color: #446689;
}

h4 {
font-size:1.8rem;
text-align:center;
padding:1rem;
font-weight: 700;
background-color: #00A0E9;
font-family: "Yu Gothic UI","Meiryo",'ヒラギノ角ゴシック',"San Francisco" ;
letter-spacing: .15rem;
}

h5 {
margin-top:1rem;
font-size:1.8rem;
font-weight: 700;
padding: 0.2em;
color:#000;
border-bottom:2px solid #00A0E9;
}


@media screen and (max-width: 768px) {
h1{font-size: 2.5rem;line-height: 1.2;}
h2{font-size: 2.8rem;}
h3{font-size: 2rem;}
h4{font-size: 1.5rem;}
}



.bold-txt {
font-weight: 700;
color:#000;
letter-spacing: .2rem;
margin: 0 auto 1rem;
}

.txt_red {color:#f00;}

.txt_center {text-align:center;}

.txt-2 {
font-size:2rem;
font-weight: 700;
letter-spacing: .2rem;
margin: 0 auto 1rem;
}

.attention_box {
    font-size:2rem;
    font-weight: 700;
    width: 60%;
    padding: 6px;
    margin: 0 auto 1rem;
    text-align:center;
    background-color: #f00;
    color:#fff;
}

/*-------------------------------------*/



.about_box {
max-width: 960px;
margin: auto;
background-color:#FCFCFC;
border:2px solid #272343;
padding:20px;
border-radius: 10px;
}


.latest_box {
max-width: 960px;
margin: auto;
background-color:#fff;
border:2px solid #272343;
padding:20px;
border-radius: 10px;
}







/*ディスプレイの非表示設定
-----------------------------------*/

@media screen and (min-width: 768px){
/* PC時は非表示 */

		.pc-display {
		    display: none;
		}
}


@media screen and (max-width: 768px){
/* スマホ時は非表示 */

		.sp-display {
		    display: none;
		}
}



/*==[改行の設定]===================*/

@media screen and (min-width: 576px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}

@media screen and (max-width: 769px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}



/*==[画像横並び]========================*/




*, *:before, *:after {
    box-sizing: border-box;
}
.senkyoku_img_box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.senkyoku_img_box > *{
    width: calc( 50% - 6px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
.senkyoku_img_box > *:nth-child(2n){
    margin-right: auto;
}
@media screen and (max-width: 960px) {
    .senkyoku_img_box > *{
        width: 100%;
        margin-right: auto;
    }
}


/*==[ナビ横並び]========================*/

.nav {
	margin:0 auto;

}

.nav ul{
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.nav li{
    list-style: none;
    width:25%;
	font-weight: 700;
	font-size:1.4rem;
	text-align:center;
}

.nav a{
    display: block;
    padding: 10px;
	height:60px;
    border: 1px solid #272343;
    border-right: none;
    text-decoration: none;
    color: #333;
    background: #FFEB3B;
	line-height: 3;
}


.nav a:hover {
    background: #FEFF86;
}




.nav li:last-child a{
    border-right: 1px solid #272343;
}


@media(max-width:750px){
    .nav ul{
        flex-wrap: wrap;
        border-bottom: 1px solid #272343;
        border-right: 1px solid #272343;
    }
    .nav li{
        width: 50%;
        margin: 0;
    }
    .nav a{
        border-bottom: none;
    }
    .nav li:last-child a{
        border-right: none;
    }
}




/*==[ボタン]========================*/

a.btn_blue {
    display: block;
    max-width: 350px;
    margin: 0 auto;
    padding: 1.5rem 3.0rem;
    background-color: #00A0E9;
    border-radius: 8px;
	box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
    border:2px solid #272343;
}




a.btn_blue span.bl__text {
    display: block;
    position: relative;
    color: #272343;
    font-size: 16px;
	font-weight: 700;
    text-align: center;
    padding-left: 30px;
}

a.btn_blue span.bl__text:before {
    content: '';
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

a.btn_blue span.bl__text:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #272343;
    border-right: 3px solid #272343;
	box-sizing: border-box;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
}

a.btn_blue:hover {
    background-color: #FFF000;
}

a.btn_blue:hover span.bl__text:after {
    border-top: 3px solid #272343;
    border-right: 3px solid #272343;
}

@media (max-width: 736px) {
a.btn_blue {
max-width: 280px;
padding: 1.5rem 2.0rem;
margin: auto;
}

a.btn_blue span.bl__text {
font-size: 14px;
}
}


/*==[ボタン]========================*/

a.btn_area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #FDF4F5;
  border: 2px solid #272343;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #272343;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  font-weight: 700;

}
a.btn_area:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #272343;
  border-right: 2px solid #272343;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -6px;
}
a.btn_area:hover {
  background: #FCC8D1;
  color: #272343;
}
a.btn_area:hover:before {
  border-top: 2px solid #272343;
  border-right: 2px solid #272343;
}





/*==[2カラム番組紹介]========================*/

.col_2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_2 > *{
    width: calc( 50% - 6px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
.col_2 > *:nth-child(2n){
    margin-right: auto;
}
.col_2 > * > *{
    background: #fff;
    position: relative;
    overflow: hidden
}
@media screen and (max-width: 960px) {
    .col_2 > *{
        width: 100%;
        margin-right: auto;
    }
}



/*==[3カラム番組紹介]========================*/


.col_3{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.col_3 > *{
    width: calc( 33.33333% - 8px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}

.col_3 > *:nth-child(3n){
    margin-right: auto;
}

.col_3 > * > *{
    background: #fff;
    height: ;
    position: relative;
    overflow: hidden
}

.col_3 span {
	font-size: 1.4rem;
	padding:0;
}



.col_3 .btn_blue{
margin:1rem auto 2rem;
}



.col_3 h4{
	font-size: 1.8rem;
	padding:0;
	margin:0;
}



@media screen and (max-width: 960px) {
    .col_3 > *{
        width: calc( 50% - 6px ) ;
    }
    .col_3 > *:nth-child(3n){
        margin-right: 12px;
    }
    .col_3 > *:nth-child(2n){
        margin-right: auto;
    }
}

@media screen and (max-width: 580px) {
    .col_3 > *{
        width: 100%;
        margin-right: auto;
        text-align:center;
    }
    .col_3 > *:nth-child(3n){
        margin-right: auto;
    }
}


/*==[背景動画]========================*/

#video-area{
    margin:0 auto;
    width:100%;
}

#video {
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 559px) {
#video-area{
    margin:0 auto;
    text-align:center;
}

#video {
    height: 100%;
    width: 100%;
}
}

/* youtube */
.yt
{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.yt iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}




/*==[レギュレーション]========================*/

table {
	width:  100%;
    border-collapse:  collapse;
    border:solid 3px;
    font-size:1.4rem;
}
 
th {
    text-align:center;
    width:200px;
    background-color:#00A0E9;
    color:#fff;
}

th,td {
    border: solid 1px;
}
 



/*==[TITLES]========================*/

#titles ul{list-style:none;}

#titles li{
padding:0;
margin:1rem auto;
}

#titles h4{
margin:0 0 4px 0;
color:#fff;
font-size:1.8rem;
text-align:center;
padding:1rem;
font-weight: 700;
background-color: #00A0E9;
font-family: "Yu Gothic UI","Meiryo",'ヒラギノ角ゴシック',"San Francisco" ;
letter-spacing: .15rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

#titles p{
margin:0;
padding:0;
font-weight: 400;
font-size:1.15rem;
}

@media screen and (min-width: 769px) {
#titles ul{
display: flex;
flex-wrap: wrap;
}
#titles li{
margin:1rem 1% 1rem 1%;
width:48%;
}

}



#access .center{
margin-bottom:1rem;
}




.booth_etc h6{
background-color: #FFEB3B;
padding:1rem;
font-weight: 700;
font-size:1em;
}