@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-style: normal;
}

html {
  font-size: 10px;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    YuGothic,
    '游ゴシック',
    'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro',
    'メイリオ',
    'Meiryo',
    'Osaka',
    'ＭＳ Ｐゴシック',
    sans-serif;
}
img {
  max-width :100%;
  vertical-align: top;
}
#nol_header img {
  max-width: none;
}

a img  {
  border: none;
}

ul,ol,li {
  list-style-type: none;
}

input,label,select,textarea {
  vertical-align: middle;
}


/*----------------------------------------------------
color
----------------------------------------------------*/

body.red .colorBg { background: #d00212; }
body.red .colorTxt { color: #d00212; }
body.red .colorBdr { border-color: #d00212!important; }

body.blue .colorBg { background: #3296c9; }
body.blue .colorTxt { color: #3296c9; }
body.blue .colorBdr { border-color: #3296c9!important; }

body.yellow .colorBg { background: #f39618; }
body.yellow .colorTxt { color: #f39618; }
body.yellow .colorBdr { border-color: #f39618!important; }

body.green .colorBg { background: #2ea041; }
body.green .colorTxt { color: #2ea041; }
body.green .colorBdr { border-color: #2ea041!important; }


/*----------------------------------------------------
common
----------------------------------------------------*/

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}
.clearfix{display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix{display:block;}


body {
  color: #000000;
	font-size: 15px;
	line-height: 2;
	width: 100%;
  background: url(../images/bg.png);
}
@media screen and (min-width: 641px) {
  body {
    font-size: 18px;
    letter-spacing: 0.05em;
  }
}

.off {
	display: none;
}
.on {
	display: block;
}

@media screen and (min-width: 641px) {
	html,
	body {
		height: 100%;
	}
	.forPC {
		display: block;
	}
	.forSP {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	html,
	body {
		height: auto;
	}
	.forPC {
		display: none;
	}
	.forSP {
		display: block;
	}
}

a {
  outline: none;
  text-decoration: underline;
  color: #d00212;
}

a:link {
  color: #d00212;
}

a:visited {
  color: #d00212;
}

@media screen and (min-width: 641px) {
  a:hover {
    color: #d00212;
    text-decoration: none;
  }

  a:hover img.alpha {
    opacity: 0.8;
  }
}


/*----------------------------------------------------
inner
----------------------------------------------------*/

.inner,
.w_inner {
	text-align: center;
	margin: 0 3.125%;
}
.innerPc {
  text-align: center;
  margin: 0;
}
.w_inner {
  text-align: center;
	margin: 0 6.25%;
}

@media screen and (min-width: 641px) {
	.inner,
  .innerPc {
    text-align: left;
    margin: 0 20px;
	}
	.w_inner,
	.w_inner_Pc {
    text-align: center;
    margin: 0 20px;
	}
}
@media screen and (min-width: 1206px) {
	.inner,
  .innerPc {
    margin: 0 auto;
		width: 1166px;
	}
}
@media screen and (min-width: 1240px) {
	.w_inner,
	.w_inner_Pc {
		margin: 0 auto;
		width: 1200px;
	}
}


/*----------------------------------------------------
siteMenu
----------------------------------------------------*/

#siteMenu {
	padding: 0 0 5%;
}
#pageHome #siteMenu {
  padding: 4.285% 0 5.714%;
}
#siteMenu h2 {
	width: 48.9285%;
	margin: 7.1428% auto 0;
}
#siteMenu ul {
	text-align: left;
	letter-spacing: -.40em;
}
#siteMenu li {
	display: inline-block;
	letter-spacing: normal;
	margin-top: 4px;
}
#pageHome #siteMenu li {
  margin-top: 14px;
}
#siteMenu li img {
	height: 18px;
	vertical-align: bottom;
}
@media screen and (min-width: 481px) {
	#siteMenu li {
		margin-top: 4%;
	}
  #pageHome #siteMenu li {
    margin-top: 5.357%;
  }
	#siteMenu li img {
		height: 26px;
	}
}
@media screen and (min-width: 641px) {
	#siteMenu {
		padding: 0 0 1.3333%;
	}
  #pageHome #siteMenu {
    padding: 2.1666% 0 2.83333%;
  }
	#siteMenu .lead {
		width: 78.58333%;
		max-width: 943px;
		margin: 0 auto;
	}
	#siteMenu h2 {
		width: 30%;
		max-width: 360px;
		margin: 2.8333% auto 0;
	}
	#siteMenu ul {
		text-align: center;
	}
	#siteMenu li {
		margin-top: 2.2%;
	}
  #pageHome #siteMenu li {
    margin-top: 3.3333%;
  }
	#siteMenu li a {
		display: block;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	#siteMenu li a:hover {
		margin: 0 5px 0 -5px;
	}
	#siteMenu li img {
		height: 30px;
	}
}
@media screen and (min-width: 781px) {
	#siteMenu ul {
		padding: 0 60px;
	}
}
@media screen and (min-width: 981px) {
	#siteMenu ul {
		padding: 0 140px;
	}
	#siteMenu li img {
		height: 33px;
	}
}
@media screen and (min-width: 1240px) {
	#siteMenu {
		padding: 0 0 16px;
	}
  #pageHome #siteMenu {
    padding: 26px 0 34px;
  }
	#siteMenu ul {
		padding: 0;
	}
}


@media screen and (min-width: 641px) {
  #pageHome #siteMenu.min {
    padding: 15px 0;
    line-height: 1;
  }
  #siteMenu.min .lead {
    width: 45%;
  }
  #siteMenu.min h2 {
    width: 20%;
    max-width: 220px;
    margin: 10px auto;
  }
  #pageHome #siteMenu.min li {
    margin-top: 5px;
  }
  #siteMenu.min li img {
    height: 20px;
  }
}
@media screen and (min-width: 781px) {
  #siteMenu.min ul {
    padding: 0;
  }
}
@media screen and (min-width: 981px) {
  #siteMenu.min ul {
    padding: 0;
  }
  #siteMenu.min li img {
    height: 26px;
  }
}
@media screen and (min-width: 1240px) {
  #pageHome #siteMenu.min {
    padding: 15px 0 10px;
  }
}



/*----------------------------------------------------
siteHead
----------------------------------------------------*/

#siteHead {
  position: relative;
  padding: 12px 0;
}
#siteHead .inner {
  position: relative;
  text-align: left;
}
#siteHead .logo {
  width: 18%;
}
#siteHead h1 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 5% 0 0 22%;
}
#siteHead h1 img {
  width: 100%;
  max-width: 593px;
}
#siteHead .breadcrumb {
  margin: 0 0 0 25.125%;
  background: #ffffff;
  padding: 0.5em 0.5em 0.5em 1em;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -.40em;
}
#siteHead .breadcrumb a {
  color: #000000;
  text-decoration: underline;
}
#siteHead .breadcrumb li {
  position: relative;
  display: inline-block;
  letter-spacing: normal;
  margin-right: 1em;
  padding-left: 1em;
}
#siteHead .breadcrumb li:first-child {
  padding-left: 0;
}
#siteHead .breadcrumb li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  content: '';
  display: block;
  box-sizing: border-box;
  width: 0.6em;
  height: 0.5em;
  border: 0.5em solid transparent;
  border-left: 0.6em solid #000000;
}
#siteHead .breadcrumb li:first-child::before {
  display: none;
}
@media screen and (min-width: 641px) {
  #siteHead {
    padding: 8px 0;
  }
  #siteHead .logo {
    width: 18%;
  }
  #siteHead h1 {
    margin: 2% 0 0 24%;
  }
  #siteHead .breadcrumb {
    position: absolute;
    bottom: 9px;
    left: 25%;
    margin: 0;
    width: 75%;
    background: #ffffff;
    padding: 0.6em 1.4em;
    font-size: 14px;
    box-sizing: border-box;
  }
  #siteHead .breadcrumb a:hover {
    text-decoration: none;
  }
  #siteHead .breadcrumb li {
    letter-spacing: 0.05em;
  }
  #siteHead .breadcrumb li::before {
    top: 0.35em;
  }
}
@media screen and (min-width: 841px) {
  #siteHead h1 {
    margin: 3% 0 0 24%;
  }
  #siteHead .breadcrumb {
    bottom: 18px;
  }
}
@media screen and (min-width: 1206px) {
  #siteHead .breadcrumb {
    left: 50%;
    margin: 0 0 0 -300px;
    width: 75%;
    box-sizing: border-box;
  }
}


/*----------------------------------------------------
siteFoot
----------------------------------------------------*/

#siteFoot {
	padding: 5.625% 0 4.0625%;
}
.footInner {
	text-align: center;
	margin: 0 9.375%;
}
#siteFoot .banner {
	padding-top: 10px;
	width: 105%;
	margin-left: -5%;
	overflow: hidden;
}
#siteFoot .banner li {
	width: 45%;
	margin-left: 5%;
	float: left;
	margin-top: 10px;
}
#siteFoot .banner li a {
	display: block;
	border: solid 1px #b5b5b5;
	background: #ffffff
}
@media screen and (min-width: 641px) {
	.footInner {
	margin: 0 20px;
	}
	#siteFoot {
		padding: 5.2% 0 5.576%;
	}
	#siteFoot .banner {
		padding-top: 60px;
		width: 102%;
		margin-left: 2%;
	}
	#siteFoot .banner li {
		width: 23%;
		margin-left: 2%;
		margin-top: 0;
	}
	#siteFoot .banner li a img {
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	#siteFoot .banner li a:hover img {
		opacity: 0.8;
	}
}
@media screen and (min-width: 1116px) {
	.footInner {
		margin: 0 auto;
		width: 1076px;
	}
	#siteFoot {
		padding: 56px 0 60px;
	}
}

/* sharebtn */
.nhk-snsbtn {
	margin-bottom: 10px!important;
}
.nhksns-guide {
	float: right;
	color: #444638;
	font-weight: normal;
	padding-left: 1em;
}
#sharebtn {
	display: inline-block;
	text-align: left;
}
#sharebtn .leave {
	color: #a5a3a3;
	font-size: 14px;
	line-height: 1;
}
@media screen and (min-width: 641px) {
	.nhksns-guide {
		padding-left: 1.6em;
	}
}


/*----------------------------------------------------
pageRedirect
----------------------------------------------------*/

#pageRedirect #nolCmnFooterSection {
  position: fixed;
  bottom: 0;
  left: 0;
}
#pageRedirect .article .inner {
  text-align: center;
}
#pageRedirect .wrap {
  display: inline-block;
  background: #ffffff;
  border: solid 3px #aaaaaa;
  margin: 30px auto;
  padding: 20px;
  box-shadow: 5px 5px 8px rgba(0,0,0, 0.1);
  -webkit-box-shadow: 5px 5px 8px rgba(0,0,0, 0.1);
  -moz-box-shadow: 5px 5px 8px rgba(0,0,0, 0.1);
}
#pageRedirect p {
  font-size: 15px;
  line-height: 2;
}
#pageRedirect p.button {
  margin-top: 1em;
}
#pageRedirect p.button img {
  display: block;
  margin: 10px auto 0;
  width: 30%;
}
@media screen and (min-width: 641px) {
  #pageRedirect .wrap {
    display: inline-block;
    margin: 120px auto 0;
    padding: 30px 50px 20px;
  }
  #pageRedirect p {
    font-size: 18px;
    line-height: 2.2222;
  }
  #pageRedirect p.button {
    margin-top: 10px;
  }
  #pageRedirect p.button img {
    display: inline-block;
    margin: 0 0 0 60px;
    width: auto;
    vertical-align: bottom
  }


}