/*
Theme Name: 23区新聞
Description: 23区新聞のサイト
Author:　tetote
*/

/* --------------------------------------------------
    reset
-------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, object, iframe, pre, code, p, blockquote, form, fieldset, legend, table, th, td, caption, tbody, tfoot, thead, article, aside, figure, footer, header, hgroup, menu, nav, section, audio, video, canvas, main {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
}
article, aside, figure, figcaption, footer, h1, h2, h3, h4, h5, h6, header, hgroup, menu, nav, section, main {
	display: block;
}






 
body {
	font-family: 'Noto Sans JP', sans-serif;
     	font-family:"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック","游ゴシック", "Yu Gothic", YuGothic,  sans-serif;
     	font-size: 100%;
	font-smoothing:antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.serif{
	font-family:"游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", Meiryo, メイリオ, serif
}


/*-------------全体の横幅を揃える*/
.bg-container{width:90%;
	margin-right:auto;
	margin-left:auto;}
.container{
	max-width:1000px;
	margin-right:auto;
	margin-left:auto;}
.sm-container{
	max-width:800px;
	margin-right:auto;
	margin-left:auto;}

	
/*box-sizing*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


span.mb10{
text-align: center;
width: 100%;
display: inline-block;
font-weight: bold;
margin: 10px;
}
span.caution{
color: red;
}
/*-------------clearfix*/
.clearfix:after{
	content:"";
	display:block;
	clear:both;}

li{
	list-style:none;}
	
ul.list-style-disc{
	padding-left:20px;
}
ul.list-style-disc li{
	list-style-type: disc;
	padding-bottom:8px;
}


a{text-decoration:none;
	color:#0876a4;}
a:hover{opacity:0.8;
	text-decoration:none;
	color:#0876a4;}

p{font-size:16px;
	color:#333;
	font-weight:400;
	line-height:1.8;}
	
.fontsize-24{
	font-size:24px;
	line-height:1.6;
}
.fontsize-12{
	font-size:12px;
}
.font-bold{
	font-weight:bold;
}
	
.text-center{
	text-align:center;}
.text-right{
	text-align:right;}
.text-left{
	text-align:left;}
	
img{
	max-width:100%;
	height:auto;
}
.img-width{
	width:100%;
	height:auto;}
	
	
/*余白*/
.pdg-15{
	padding:15px 0;
}
.pdg-30{
	padding:30px 0;
}
.pdg-45{
	padding:45px 0;
}
.pdg-60{
	padding:60px 0;
}
.pdg-90{
	padding:90px 0;
}
.pdg-btm-15{
	padding:0 0 15px;
}
.pdg-btm-30{
	padding: 0 0 30px;
}
.pdg-btm-45{
	padding: 0 0 45px;
}
.pdg-btm-60{
	padding: 0 0 60px;
}

/*改行*/
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}



/* --------------------------------------------------
   カラム
-------------------------------------------------- */
/*col2-box*/
.col2-box .col2{
	float:left;
	width:50%;
}

/*col3-box*/
.col3-box .col3{
	float:left;
	width:33.33%;
}

/*col4-box*/
.col4-box .col4{
	float:left;
	width:25%;
}


/* --------------------------------------------------
    hタグ
-------------------------------------------------- */
h2.style2a{
	font-size:24px ;
	letter-spacing:1px ;
	font-weight:600 ;
	position: relative;
  	color: #231815;
	padding:40px 0 40px;
	margin-bottom:30px;
	text-align:center;
	
}
h2.style2a:before {
  content: "";
  position: absolute;
  background: #f3f1ed;
  width: 127px;
  height: 127px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}

/* --------------------------------------------------
    トップ：メイン
-------------------------------------------------- */
@media(min-width:769px){
.mainsp{display:none;}
}
@media(max-width:768px){
.mainpc{display:none;}
}




/* --------------------------------------------------
    トップ：About
-------------------------------------------------- */
.about .fontsize-24{
	padding:10px 0;
}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
.youtube-box{
	width:640px;
	margin:0 auto;
}


.about-info-box{
	padding:45px;
	background:#fefaf1;
}
table.about-info{
	width:100%;
}
table.about-info th{
	width:15%;
	text-align:left;
	font-size:16px;
	font-weight:500;
	padding:25px 15px;
	vertical-align:top;
}
table.about-info td{
	width:85%;
	padding:15px 15px;
}
table.about-info th span{
	background:#313131;
	color:#fff;
	padding:5px 18px;
	width:120px;
	display:inline-block;
	text-align:center;
}





/* --------------------------------------------------
    トップ：Contact
-------------------------------------------------- */
.contact table{
	width:100%;
}
.contact table th{
	width:250px;
	text-align:left;
	font-size:16px;
	font-weight:700;
	border-bottom:1px solid #e8e8e8;
	padding:25px 15px;
	vertical-align:top;
}
.contact table td{
	width:640px;
	border-bottom:1px solid #e8e8e8;
	padding:15px 15px;
}
.contact table th span{
	float:right;
	text-align:center;
	padding:3px 8px;
	font-size:12px;
	color:#fff;
	font-weight:500;
	border-radius:5px;
}
.contact table th span.hissu{
	background:#d43e47;
}
.contact table th span.nini{
	background:#9e8682;
}
.contact table td input[type="text"]{
	width:100%;
	height:50px;
	border:1px solid #b5b5b5;
}
.contact table td .first-radio{
	margin-left:0 !important;
}
.contact table td textarea{
	width:100%;
	height:160px;
	border:1px solid #b5b5b5;
}
.contact table td.riyu span{
	font-size:14px;
	padding-right:10px;
}
.contact table td textarea{
	width:100%;
	height:160px;
	border:1px solid #b5b5b5;
}
.contact .submitBtnArea{
	text-align:center;
	margin-top:30px;
}
.contact .submitBtnArea input{	
	background:#313131;
	color:#fff;
	padding:15px;
	width:100%;
	font-size:18px;
	border-radius:5px;
}
.contact .policy{	
	text-align:center;
	padding:45px 0;
}
.contact table .fontsize-12{
	display:inline;
}
.radio-list li{
	display:inline-block;
	margin-right:30px;
	margin-bottom:5px;
}


/* --------------------------------------------------
    フッター
-------------------------------------------------- */
#footer {
	background:#f3f1ed;
	padding:60px 0;
}
.copyright{
	text-align:center;
	padding:15px 5px;
	background:#313131;
}
.copyright small{
	font-size:10px;
	color:#fff;
}




/* --------------------------------------------------
--------------------------------------------------
    ########## 999px以下  ###########
 --------------------------------------------------
-------------------------------------------------- */	

@media(max-width:999px){

/*-------------全体の横幅を揃える*/
.bg-container{width:85%;}
.container{width:85%;}
.sm-container{width:85%;}

	
/*-------------余白*/
.pdg-45{
	padding:30px 0;
}
.pdg-60{
	padding:30px 0;
}
.pdg-btm-30{
	padding: 0 0 15px;
}
.pdg-btm-45{
	padding: 0 0 40px;
}
.pdg-btm-60{
	padding: 0 0 20px;
}



	
/* --------------------------------------------------
   カラム
-------------------------------------------------- */
/*col2-box*/
.col2-box .col2{
	float:none;
	width:100%;
	margin:0 0 30px;
}

/* --------------------------------------------------
    トップ：About
-------------------------------------------------- */
.youtube-box{
	width:100%;
}



/* --------------------------------------------------
--------------------------------------------------
    ########## 768px以下  ###########
 --------------------------------------------------
-------------------------------------------------- */	

@media(max-width:768px){

/*-------------全体の横幅を揃える*/
.bg-container{width:90%;}
.container{width:90%;}
.sm-container{width:90%;}

	
/* --------------------------------------------------
   カラム
-------------------------------------------------- */
/*col2-box*/
.col2-box .col2{
	float:none;
	width:100%;
	margin:0 0 30px;
}



/* --------------------------------------------------
    hタグ
-------------------------------------------------- */
h2.style2a{
	padding:40px 0;
}





/* --------------------------------------------------
    トップ：About
-------------------------------------------------- */

.about-info-box{
	padding:30px;
	background:#fefaf1;
}
table.about-info th{
	width:100%;
	display:block;
	padding:0;
}
table.about-info td{
	width:100%;
	display:block;
	padding:15px 0 20px;
}
table.about-info th span{
	background:#313131;
	color:#fff;
	padding:5px 18px;
	width:120px;
	display:inline-block;
	text-align:center;
}



/* --------------------------------------------------
    トップ：Contact
-------------------------------------------------- */
.contact form{
	padding:15px;
}
.contact table th{
	width:100%;
	font-size:14px;
	padding:15px 5px;
	display:block;
	border-bottom:none;
}
.contact table td{
	width:100%;
	padding:0 0 15px;
	display:block;
}
.contact table th span{
	display:inline-block;
	margin: 0 10px;
	font-size:10px;
}



/* --------------------------------------------------
    フッター
-------------------------------------------------- */
#footer {
	padding:30px 0;
}



}