@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*
------------------------------------------------

* Web Fonts:
	"Lato"
	"Noto Sans"
	"Noto Sans JP"

* Style Index:
	#1. Base
	#2. Layout
	#3. Utilities
	#4. Modules
	#5. JS Styles

------------------------------------------------ */
/* ------------------------------------------------
#1. Base
------------------------------------------------ */
body {
  color: #666;
  font-family: "Lato","Noto Sans", "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

img {
  vertical-align: bottom;
}

#contents .contents-main a {
  text-decoration: none !important;
}

#contents a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}

/* clearfix */
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

/* ------------------------------------------------
#2. Layout
------------------------------------------------ */
/* header */
.header-head {
  margin: 0 auto;
  padding: 24px 0 1px;
  width: 980px;
}
.header-head h1 a:hover, .header-head p a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.header-body {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  min-width: 980px;
  width: 100%;
}
.header-body .keyvisual {
  position: relative;
  height: 252px;
  border-top: 2px solid #008E72;
  /* background: url(/assets/img/img-keyvisual_news.png) no-repeat center; */
  background-size: cover;
}
.header-body .viewport {
  margin: 0 auto;
  width: 980px;
}
.header-body .viewport .title-unit {
  display: table-cell;
  height: 252px;
  vertical-align: middle;
}
.header-body .viewport .page-title {
  display: inline-block;
  color: #fff;
  font-weight: 300;
  font-size: 38px;
  line-height: 1.2;
}
.header-body .viewport .page-category {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
}

.header-foot {
  position: relative;
  margin: auto;
  width: 100%;
}
.header-foot:before, .header-foot:after {
  position: absolute;
  bottom: 0;
  display: block;
  width: 50%;
  height: 2px;
  content: '';
}
.header-foot:before {
  left: 0;
  background-color: #009373;
}
.header-foot:after {
  right: 0;
  background-color: #D6E7AB;
}
.header-foot .title-unit {
  margin: 0 auto;
  padding: 10px 0;
  width: 980px;
}
.header-foot .title-unit .page-title {
  display: block;
  float: left;
  width: 75%;
  color: #009272;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
}
.header-foot .title-unit .page-title img {
  margin-right: 10px;
  vertical-align: middle;
}
.header-foot .title-unit .page-category {
  display: block;
  float: left;
  margin-top: 10px;
  width: 25%;
  color: #009272;
  text-align: right;
  font-size: 14px;
  line-height: 1.2;
}

/* footer */
#footer {
  border-top: 1px solid #ccc;
}

.footer-head {
  position: relative;
  margin: 0 auto;
  padding: 12px 150px 12px 0;
  width: 828px;
  background-color: #fff;
}
.footer-head a img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}
.footer-head .page_top {
  position: absolute;
  right: 0;
  bottom: 0;
}
.footer-head .page_top a {
  display: block;
  padding: 12px 15px 12px 45px;
  min-width: 90px;
  background: #444 url(/wp-content/themes/boi/assets/img/footer-icn-pagetop.png) no-repeat 17px center;
  color: #fff;
  text-decoration: none;
}

.footer-body {
  position: relative;
  margin: 0 auto;
  padding: 20px 0 30px;
  min-width: 980px;
  width: 100%;
  background-color: #444;
}
.footer-body:after {
  position: absolute;
  top: 55px;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #81AA00;
  content: '';
}
.footer-body > .inner {
  position: relative;
  margin: 0 auto;
  width: 980px;
}
.footer-body .inner + .inner {
  margin-top: 40px;
}
.footer-body .foot-utility {
  color: #fff;
  text-decoration: none;
}
.footer-body .foot-utility li {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.footer-body .foot-utility a {
  position: relative;
  padding-right: 6px;
  padding-left: 20px;
  color: #fff;
  text-decoration: none;
}
.footer-body .foot-utility a:hover {
  text-decoration: underline;
}
.footer-body .foot-utility a:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  background: url(/wp-content/themes/boi/assets/img/icn-link_arrow_small_white.png) no-repeat center center;
  content: '';
}
.footer-body .social_action li {
  display: inline-block;
  margin-left: 12px;
  vertical-align: top;
  overflow: hidden;
}
.footer-body .social_action li:first-child {
  margin-left: 0;
}
.footer-body .official_social {
  margin-top: 14px;
}
.footer-body .official_social li {
  float: left;
  margin-left: 12px;
}
.footer-body .official_social li:first-child {
  margin-left: 0;
}
.footer-body .copyright {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
}

/* contents */
#contents {
  margin: 0 auto;
  width: 100%;
  background-color: #F5F8F2;
}

#contents > .inner {
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  width: 980px;
}

/* side to left */
#contents.left-side .contents-main {
  float: right;
  width: 760px;
}

#contents.left-side .contents-side {
  float: left;
  width: 200px;
}

/* side to right */
#contents.right-side .contents-main {
  float: left;
  width: 70%;
}

#contents.right-side .contents-side {
  float: right;
  width: 30%;
}

/* ------------------------------------------------
#3. Utilities
------------------------------------------------ */
/* label */
.label {
  display: inline-block;
  background-color: #E4F4F1;
  color: #009372;
  font-size: 108%;
}
.label:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.label-tag {
  padding: 8px 5px;
  min-width: 130px;
  text-align: center;
  line-height: 1;
}

.label-toggle {
  position: relative;
  display: block;
  padding: 16px;
  width: 168px;
  text-align: left;
  text-decoration: none;
  line-height: 1;
}

.label-toggle:after {
  position: absolute;
  top: 0;
  right: 13px;
  bottom: 0;
  display: block;
  margin: auto;
  width: 15px;
  height: 15px;
  background: url(/wp-content/themes/boi/assets/img/icn-plus.png) no-repeat center center;
  content: '';
}

.label-toggle.is-opened:after {
  background: url(/wp-content/themes/boi/assets/img/icn-minus.png) no-repeat center center;
}

.label-info {
  background-color: #FBA12C;
  color: #fff;
}

.label-release {
  background-color: #ED5B76;
  color: #fff;
}

.label-media {
  background-color: #0088C5;
  color: #fff;
}

.label-all {
  background-color: #009272;
  color: #fff;
}

/* ------------------------------------------------
#4. Modules
------------------------------------------------ */
/* Title */
.site-title {
  display: inline-block;
}

/* Button */
.btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #444;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  font-weight: normal;
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn:hover {
  text-decoration: none;
  /* opacity: 0.8; */
  /* -webkit-opacity: 0.8; */
  /* -moz-opacity: 0.8; */
}

/* Button type options */
.btn.btn-default {
  background-color: #ddd;
}

/* Button size options */
/* Button state options */
.btn.is-disabled,
.btn:disabled,
.btn[disabled] {
  box-shadow: none;
  opacity: .65;
  cursor: normal;
}

.btn-social {
  position: relative;
  display: inline-block;
  padding: 7px 30px 8px;
  background: #666;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 93%;
}
.btn-social:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.btn-social:before,
.btn-social:after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  margin: auto;
  width: 16px;
  height: 16px;
  content: '';
}

.btn-social.btn-fb {
  min-width: 140px;
}

.btn-social.btn-fb:before {
  left: 10px;
  background: url(/wp-content/themes/boi/assets/img/icn-social_fb.png) no-repeat center center;
}

.btn-social.btn-tw {
  min-width: 150px;
}

.btn-social.btn-tw:before {
  left: 12px;
  background: url(/wp-content/themes/boi/assets/img/icn-social_tw.png) no-repeat center center;
}

.btn-social[target="_blank"]:after {
  right: 7px;
  background: url(/wp-content/themes/boi/assets/img/icn-window.png) no-repeat center center;
}

.btn-more {
  position: relative;
  display: block;
  padding: 17px 30px;
  border: 1px solid #008D72;
  background: #fff;
  color: #009272;
  text-align: center;
  text-decoration: none;
  font-size: 123.1%;
}
.btn-more:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.btn-more:before {
  display: inline-block;
  margin-right: 8px;
  width: 15px;
  height: 15px;
  background: url(/wp-content/themes/boi/assets/img/icn-plus_more.png) no-repeat center center;
  content: '';
}

/**/
.btn-round {
  padding: 0px !important;
  position: relative;
  display: block;
  width: 430px;
  height: 50px;
  border: none;
  border-radius: 25px;
  background: #009072;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 108%;
  line-height: 50px;
}
.btn-round:after {
  position: absolute;
  top: 15px;
  width: 28px;
  height: 19px;
  background: url(/wp-content/themes/boi/assets/img/icn-forward.png) no-repeat 10px 2px;
  content: "";
}
.btn-round.submit {
  margin: 0 auto;
  width: 292px;
  background: url(/wp-content/themes/boi/assets/img/icn-forward.png) no-repeat 215px 16px #009072;
}
.btn-round.submit:hover {
  cursor: pointer;
}
.btn-round.send {
  display: inline-block;
  width: 470px;
  background: url(/wp-content/themes/boi/assets/img/icn-forward.png) no-repeat 310px 16px #009072;
}
.btn-round.send:hover {
  cursor: pointer;
}
.btn-round.entry {
  width: 300px;
  background-color: #008CD3;
  color: #fff;
}
.btn-round.back {
  display: inline-block;
  margin-right: 35px;
  width: 470px;
  background: url(/wp-content/themes/boi/assets/img/icn-back.png) no-repeat 180px 16px #646464;
}
.btn-round.back:hover {
  cursor: pointer;
}
.btn-round.thanks {
  width: 252px;
}
.btn-round.blue {
  background: #008FD5;
}
.btn-round.red {
  background: #E03A63;
}
.btn-round.full {
  margin-top: 30px;
  width: 100%;
  font-size: 123.1%;
}
.btn-round.full_white {
  margin-top: 30px;
  width: 100% !important;
  background: #fff;
  color: #009072;
  font-size: 123.1%;
}
.btn-round.full_white:after {
  background: url(/wp-content/themes/boi/assets/img/icn-link_arrow_circle.png) no-repeat 10px 2px;
}

.btn-round.full_green {
  margin-top: 30px;
  width: 100% !important;
  font-size: 123.1%;
}

.btn-round:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

/**/
.bnr-arrow {
  position: relative;
  width: 480px;
  background: #fff;
}
.bnr-arrow:after {
  position: absolute;
  top: 50%;
  left: 445px;
  display: block;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-bottom: 3px solid #009273;
  border-left: 3px solid #009273;
  content: "";
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.bnr-arrow.other:after {
  border-bottom: 3px solid #FAA02C;
  border-left: 3px solid #FAA02C;
}
.bnr-arrow a {
  width: 100%;
}
.bnr-arrow.recruit:after, .bnr-arrow.simple:after {
  border-bottom: 3px solid #008FD6;
  border-left: 3px solid #008FD6;
}
.bnr-arrow:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.bnr-triangle {
  position: relative;
  width: 480px;
  background: #fff;
}
.bnr-triangle:before {
  position: absolute;
  top: -4px;
  right: -19px;
  display: block;
  border-width: 0 30px 30px 30px;
  border-style: solid;
  border-color: transparent transparent #008FD6 transparent;
  content: "";
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bnr-triangle:after {
  position: absolute;
  top: -1px;
  right: 6px;
  display: block;
  color: #fff;
  content: "+";
  font-weight: 300;
  font-size: 180%;
}
.bnr-triangle.boi:before {
  border-color: transparent transparent #fff transparent;
}
.bnr-triangle.boi:after {
  color: #009072;
}

/* Navigation */
.site-nav {
  position: relative;
}
.site-nav li {
  display: inline-block;
  margin-left: 25px;
}
.site-nav li:first-child {
  margin-left: 0;
}
.site-nav li a {
  text-decoration: none;
  font-size: 108%;
}
.site-nav.type-head li {
  padding: 10px 5px 27px;
}
.site-nav.type-head li a {
  color: #444;
}
.site-nav.type-head li a:hover {
  color: #009072;
}
.site-nav.type-head li.current {
  border-bottom: 2px solid #009072;
}
.site-nav.type-head li.current a {
  color: #009072;
}
.site-nav.type-head li.current.animated {
  border-bottom: 2px solid #fff;
}
.site-nav.type-foot li a {
  color: #fff;
}
.site-nav.type-foot li a:hover {
  text-decoration: underline;
}
.site-nav .current-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #009072;
}

.nav-breadcrumbs li {
  position: relative;
  display: inline-block;
  padding-right: 24px;
  padding-left: 10px;
}

.nav-breadcrumbs li:first-child {
  padding-left: 0;
}

.nav-breadcrumbs li img {
  vertical-align: top;
}

.nav-breadcrumbs li a {
  color: #444;
  text-decoration: underline;
}

.nav-breadcrumbs li a:hover {
  text-decoration: none;
}

.nav-breadcrumbs li:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  margin: auto;
  width: 10px;
  height: 16px;
  background: url(/wp-content/themes/boi/assets/img/icn-breadcrumbs_arrow.png) no-repeat center center;
  content: '';
}

.nav-breadcrumbs li:last-of-type:after {
  content: none;
}

.nav-category_menu {
  position: absolute;
  bottom: 0;
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 53px;
  background: url(/wp-content/themes/boi/assets/img/bg-category_menu.png);
}
.nav-category_menu ul {
  position: relative;
  margin: 0 auto;
  width: 980px;
}
.nav-category_menu li {
  display: inline-block;
  margin-right: 40px;
}
.nav-category_menu li a {
  display: inline-block;
  /* padding: 10px 0; */
  padding: 17px 0;
  color: #fff;
  text-decoration: none;
  font-size: 108%;
}
.nav-category_menu li.current a {
  padding-bottom: 16px;
  border-bottom: 2px solid #fff;
}
.nav-category_menu li.current.animated a {
  border-bottom: 0;
}
.nav-category_menu .current-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
}

/* List */
.list-link {
  /* margin-top: 30px; */
}

.list-link.list-horizon li {
  display: inline-block;
}

.list-calendar {
  width: 200px;
}

.list-calendar dt {
  margin-top: 10px;
}

.list-calendar dd {
  display: none;
  padding: 0 10px 13px;
  background-color: #fff;
}

.list-topics dt {
  margin-top: 20px;
  padding: 14px 16px 0;
  background-color: #fff;
}

.list-topics dt:first-child {
  margin-top: 0;
}

.list-topics dd {
  padding: 14px 16px;
  background-color: #fff;
}

.list-topics time {
  padding-left: 15px;
  font-size: 108%;
  font-family: "Lato", sans-serif;
}

.list-topics li {
  position: relative;
  padding-left: 28px;
  background: url(/wp-content/themes/boi/assets/img/icn-link_arrow_circle.png) no-repeat 2px top;
}

.list-topics li + li {
  margin-top: 10px;
}

.list-topics li a {
  color: #666;
  text-decoration: none;
  font-size: 108%;
}

.list-topics li a:hover {
  text-decoration: underline;
}

/* Table */
.table-default {
  width: 100%;
  border: 1px solid #ddd;
}

.table-default tr th,
.table-default tr td {
  border-top: 1px solid #ddd;
  color: #666;
  font-size: 108%;
}

.table-default tr:first-child th,
.table-default tr:first-child td {
  border-top: none;
}

.table-default th {
  padding: 15px 20px;
  width: 110px;
  background-color: #eee;
  vertical-align: top;
  text-align: center;
}

.table-default td {
  padding: 15px 20px;
  background-color: #fff;
}

.table-default .number_list {
  padding: 0;
}

/* .table-calendar */
.table-calendar .title {
  padding: 14px 0 6px;
  color: #009272;
  font-size: 108%;
  font-family: "Lato", sans-serif;
}

.table-calendar .year {
  margin: auto;
  width: 180px;
}

.table-calendar .year th,
.table-calendar .year td {
  border-left: 1px solid #fff;
}

.table-calendar .year th:first-child,
.table-calendar .year td:first-child {
  border-left: none;
}

.table-calendar .month {
  margin: auto;
  width: 180px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.table-calendar .month th,
.table-calendar .month td {
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.table-calendar .cell {
  display: block;
  color: #008F72;
  vertical-align: middle;
  text-align: center;
}
.table-calendar .cell:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.table-calendar .year .cell {
  padding: 17px 10px;
  background-color: #E4F4F1;
}

.table-calendar .month .cell {
  padding: 12px 20px;
  background-color: #fff;
}

.table-calendar .year .cell.is-disabled,
.table-calendar .month .cell.is-disabled {
  background-color: #eee;
  color: #fff;
  cursor: normal;
  pointer-events: none;
}

.table-calendar .year .cell.is-active,
.table-calendar .month .cell.is-active {
  background-color: #009172;
  color: #fff;
}

.table-calendar.calendar-info .year .cell.is-active,
.table-calendar.calendar-info .month .cell.is-active {
  background-color: #FBA12C;
  color: #fff;
}

.table-calendar.calendar-release .year .cell.is-active,
.table-calendar.calendar-release .month .cell.is-active {
  background-color: #ED5B76;
  color: #fff;
}

.table-calendar.calendar-media .year .cell.is-active,
.table-calendar.calendar-media .month .cell.is-active {
  background-color: #0088C5;
  color: #fff;
}

/* Box */
.box:after {
  display: block;
  clear: both;
  content: "";
}

.box .box-item {
  float: left;
}

.box .box-item:nth-of-type(2n) {
  float: right;
}

.box-btn_wrap {
  margin-top: 20px;
}

/* Card */
.card {
  vertical-align: top;
  text-align: left;
}

.card .card-item {
  display: inline-block;
}