div.fl{
  float:left;
  height:140px;
}


div.clrb{
  clear:both;
}

body {
  margin:0px;
  padding:0px;
background:#262480;
}

header {
  position: fixed;
  width:100%;
}

div.navbar-header{
  margin: 0 auto;
  width:94%;
  padding: 40px 0 16px 0;
}

.footer {
  width:970px;
  margin-top:40px;
  text-align:center;
}

p.list {
  display: block;
  margin: 0px 0px 60px 0px;
  margin-block-start: 0px;
  margin-block-end: 60px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

p.list  > a {
  text-decoration: none;
  font-family: "Roboto Condensed", sans-serif;
  color: #00f;
}

div.main{
  padding-top: 140px;
  margin: 0 auto;
  width:78%;
}

div.search{
  width:700px;
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap : break-word;
}

p.all{
    display: block;
    margin-block-start: 0px;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-size:16px;
}

p.title{
    margin-bottom:5px;
    display: block;
    margin-block-start: 0px;
    margin-block-end: 5px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.note {
  font-family: "Roboto Condensed", sans-serif;
  font-size:15px;
}
.title > a {
  text-decoration: none;
  font-size: 20px;
  font-family: "Roboto Condensed", sans-serif;
  color: #00f;
}

.container{
  width:100%;
  height:140px;
  background-color:#fff;
  border-bottom:3px solid #8f82bc;
}

div.txt {
margin: 30px 0 0 20px;
}

div.txt > a {
  font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  text-decoration: none;
  font-size: 18px;
  font-weight:600;
  color: #ea5514;
}

div.txt > a:hover  {
  text-decoration: none;
  color:rgba(234,85,20,0.7);
}

.navbar-header .logo1{padding-right:40px;}
.navbar-header .logo1 img{width:80px; height:auto;}
.navbar-header .logo2{padding-right:6%;}
.navbar-header .logo2 img{width:380px; height:auto;}
@media screen and (max-width:1360px) {
.navbar-header .logo2{padding-right:2%;}
}
@media screen and (max-width:580px) {
.navbar-header .logo1{width:13%; padding-right:10px;}
.navbar-header .logo2{width:62%; padding-right:0;}
.navbar-header .logo1 img, .navbar-header .logo2 img{width:100%;}
}

.input-shinbun-head{
  margin:15px 0 0 10px;
  border:solid 2px #8f82bc;
/*  padding-left:10px;*/
  padding:0 20px 0 20px;
  height:56px;
  width:310px;
  font-size:18px;
  -webkit-border-radius: 10px 0px 0px 10px / 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px / 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px / 10px 0px 0px 10px;
}

.btn-shinbun-head{
  padding-top:3px;
  margin:15px 0 0 0;
  border:solid 1px #ea5514;
  background:#ea5514;
  height:60px;
  width:100px;
  font-size:16px;
  color:#fff;
  -webkit-border-radius: 0px 10px 10px 0px / 0px 10px 10px 0px;
  -moz-border-radius: 0px 10px 10px 0px / 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px / 0px 10px 10px 0px;
  text-transform:none;
}
.btn-shinbun-head:hover{
  background:rgba(234,85,20,0.7);
  color:#fff;
}
/* IE hack */
@media \0screen,
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm){
	.btn-shinbun-head{padding-top:0px;}
}
_:-ms-lang(x), .btn-shinbun-head{padding-top:0px;}
_:-ms-fullscreen, :root .btn-shinbun-head{padding-top:0px;}

@media screen and (max-width:1050px) {
.input-shinbun-head{width:80%;}
}


/* logo msg */
.top-logo-msg{font-family: "Yu Mincho", "YuMincho", serif; color:#8f82bc; font-size:30px; letter-spacing:8px; padding-left:30px;}

/* logo */
.top-logo-area{width:100%; margin:0 auto; text-align:center; padding:20px 0 10px 0;}
@media only screen and (max-width: 860px) {
	.top-logo-msg{font-size:3vw;}
	.home-section{background-size:cover;}
}
@media only screen and (max-width: 590px) {
	.top-logo-area div img{width:90%; height:auto;}
}

/* login */
.login-form-area{width:930px; margin:0 auto; background:#1d2088; border:solid 4px #8f82bc; border-radius:20px; padding:80px 110px; font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.login-logo{margin-left:-120px;}
.login-input{padding:0 20px; height:70px; width:100%; font-size:1.7em; vertical-align:middle;}
.login-joutai{text-align:left; color:#fff; font-size:24px;}
.login-joutai input{width:20px; height:20px;}
.login-btn{background:#00a0e9; border:none; height:66px; width:350px; font-size:1.8em; font-weight:600; letter-spacing:2px; color:#fff; border-radius:30px; vertical-align:middle;}
.login-btn:hover{background:rgba(0,160,233,0.6); color:#fff;}
@media screen and (max-width: 950px) {
.login-logo{margin-left:-5%;}
.login-form-area{width:100%; padding:80px 60px;} 
}
@media screen and (max-width: 640px) {
.login-logo img{width:70%;}
}
@media screen and (max-width: 550px) {
.login-form-area{padding:50px 20px;} 
.login-btn{width:80%;}
}

/* tango nendai */
.tango-nendai-area{display:flex; width:548px; margin:0 auto; position:relative;}
.tango-nendai-area a{width:274px; height:67px; display:block;}
.tango-nendai-area div{width:274px; height:67px; text-indent:-9999px;}
.tango-nendai-area div.btn-tango{background:url("../images/btn_tango2.png") no-repeat; position:absolute; top:0; left:0;}
.tango-nendai-area div.btn-tango-a{background:url("../images/btn_tango1.png") no-repeat; position:absolute; top:0; left:0;}
.tango-nendai-area div.btn-tango:hover{background:url("../images/btn_tango1.png") no-repeat;}
.tango-nendai-area div.btn-tango:hover + .btn-nendai-a{background:url("../images/btn_nendai2.png") no-repeat;}
.tango-nendai-area div.btn-nendai{background:url("../images/btn_nendai2.png") no-repeat; position:relative; top:0; left:275px;}
.tango-nendai-area div.btn-nendai-a{background:url("../images/btn_nendai1.png") no-repeat; position:relative; top:0; left:275px;}
.tango-nendai-area div.btn-nendai:hover{background:url("../images/btn_nendai1.png") no-repeat;}
.tango-nendai-area div.btn-nendai:hover + .btn-tango-a{background:url("../images/btn_tango2.png") no-repeat;}

.kensaku-area{width:680px; margin:0 auto 50px auto;}
.kensaku-area div{text-align:left; width:680px; margin-left:68px;}
@media screen and (max-width: 860px) {
.kensaku-area{width:100%;}
.kensaku-area div{margin:0 auto;}
}
@media screen and (max-width: 700px) {
.kensaku-area div{width:100%; text-align:center;}
.input-shinbun{width:420px;}
}
@media only screen and (max-width: 590px) {
	.tango-nendai-area{width:90%; padding-left:0%;}
	.tango-nendai-area div.btn-tango-a{width:50%; background-size:100%;}
	.tango-nendai-area div.btn-nendai{width:50%; background-size:100%; left:50%;}
	.tango-nendai-area div.btn-nendai:hover{background-size:100%;}
	.tango-nendai-area div.btn-nendai:hover + .btn-tango-a{background-size:100%;}

	.tango-nendai-area div.btn-tango{width:50%; background-size:100%;}
	.tango-nendai-area div.btn-nendai-a{width:50%; background-size:100%; left:50%;}
	.tango-nendai-area div.btn-tango:hover{background-size:100%;}
	.tango-nendai-area div.btn-tango:hover + .btn-nendai-a{background-size:100%;}

	.kensaku-area{width:92%;}
	.kensaku-area div{width:100%;}
	.kensaku-area input{width:78%;}
	.kensaku-area button{width:22%;}
}
@media only screen and (max-width: 500px) {
.tango-nendai-area, .kensaku-area{margin-bottom:20px;}
}

/* panel */
.panel-group-size{width:551px;}
.panel-heading-sub a{padding:8px 20px 0px 20px; min-height:40px;}
.panel-heading-sub hover{padding-top:4px;}
@media only screen and (max-width: 590px) {
	.panel-group-size{width:96%;}
}

/* search list */
@media only screen and (max-width: 1310px) {
	.navbar-header div:nth-of-type(3),.navbar-header div:nth-of-type(4){display:none;}
	div.main{width:100%; padding-left:0; box-sizing: border-box;}
	div.search{ padding:0 150px 0 150px; width:100%; box-sizing: border-box;}
	.footer{width:100%;}
}
@media only screen and (max-width: 1120px) {
	.navbar-header{width:100%!important;}
	div.main{width:100%; margin:0;}
	.container{width:98%;}
	div.search{padding:0 120px;}
}
@media only screen and (max-width: 950px) {
	div.main{padding-top:180px;}
	.container{height:180px;}
	div.fl{height:66px;}
	.navbar-header{padding-top:16px!important;}
	.navbar-header .logo1{margin-left:10px;}
	.navbar-header form div:first-of-type{clear:both; margin-top:6px; margin-left:130px; text-align:left;}
	.navbar-header form div:first-of-type input{margin-left:0;}
	.navbar-header form div:nth-of-type(1) {width:250px;}
	.navbar-header form div:nth-of-type(2) {width:90px; margin-top:6px; margin-left:44px;}
	.navbar-header form div:nth-of-type(1) input{width:100%;}
	.navbar-header form div:nth-of-type(2) button{width:100%;}
}
@media only screen and (max-width: 580px) {
	.navbar-header form div:first-of-type{margin-left:17%;}
	.navbar-header form div:nth-of-type(1) {width:39%;}
	.navbar-header form div:nth-of-type(2) {width:16%; margin-top:6px; margin-left:44px;}
}
@media only screen and (max-width: 420px) {
	div.main{padding-top:170px!important;}
	.container{height:170px!important;}
	.navbar-header div.logo1 img, .navbar-header div.logo2 img{width:100%!important;}
	.navbar-header form div:nth-of-type(1) input{width:100%; margin-top:10px;}
	.navbar-header form div:nth-of-type(2) button{width:100%; margin-top:10px;}
	div.main{padding-top:140px;}
	.container{height:140px;}
	div.fl{height:56px;}
	div.search{width:71%; padding:0; margin:0 auto;}
}
@media only screen and (max-width: 350px) {
	div.main{padding-top:140px!important;}
	.container{height:140px!important;}
	.navbar-header form div:nth-of-type(1) input{width:100%; margin-top:-4px; height:40px;}
	.navbar-header form div:nth-of-type(2) button{width:100%; margin-top:-4px; height:44px;}
	div.main{padding-top:120px;}
	.container{height:120px;}
	div.fl{height:56px;}
}

/************ humberger menu ************/
@media only screen and (min-width: 1310px) {
	#nav-open{display:none!important;}
}
@media only screen and (max-width: 1309px) {
	#nav-open {
	  display: inline-block;
	  width: 30px;
	  height: 22px;
	  vertical-align: middle;
	  position:absolute;
	  top:34px;
	  right:0;
	  cursor: pointer;
	}
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  transition: all 0.4s;
  height: 5px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #333;
  display: block;
  content: '';
  cursor: pointer;
  z-index: 9999;/*最前面*/
}

#nav-open span:before {
  bottom: -8px;
}

#nav-open span:after {
  bottom: -16px;
}


/*中身*/
#nav-content {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  transition: .2s ease-in-out;
}

#nav-content.open {
  display: block;
  opacity: 1;
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9998;
  width: 300px;
  height: 100%;
  background: rgba(0,0,0, 0.4);/*背景色*/
  overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
border:solid 1px #666;
}
@media only screen and (max-width: 350px) {
	#nav-content.open {width:100%;}
}


/*:beforeにぼかし効果を設定する*/
#nav-content.open:before {
  content: '';
  overflow: hidden;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  z-index: -1;/*重なり順序を一番下にしておく*/
}


/*チェックが入ったら表示する内容*/

.hamburger-top {
  height: 40px;/*×ボタンと被らないように*/
}

.category {
  text-align: left;
  margin-top: 2rem;
padding:0;
background:rgba(0,0,0,0.9);
}

.category-title {
  padding: 0;
  list-style:none;
}

.category-title a {
  color: #fff;
  text-decoration: none;
display:block;
padding:1rem 0.5rem;
border-bottom:solid 1px #fff;
}


/*三本線を動かす*/
#nav-open.active span {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}

#nav-open.active span:before {
  -webkit-transform: translateY(-8px) rotate(45deg);/*打ち消す*/
  transform: translateY(-8px) rotate(45deg);/*打ち消す*/
  opacity: 0;
}

#nav-open.active span:after {
  -webkit-transform: translateY(-16px) rotate(90deg);
  transform: translateY(-16px) rotate(90deg);
}
