@charset "utf-8";

/*-------------------------------------
  TOP
--------------------------------------*/
/* top KEY */
.box_pdl {
  padding-left: 5%;
}

.top_key .box_pdl {
  position: relative;
}
.top_key .ofi_wrap {
  position: absolute;
  top: 0;
  left: 5%;
  right: 0;
  bottom: 0;
  padding-top: 0;
}

.calendar_box {
  z-index: 1;
  position: relative;
  padding: 6.25em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.calendar_box .inr_box {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 25em;
  padding: 3em 1.5em;
  background-color: #fff;
}
.calendar_box .inr_box::before,
.calendar_box .inr_box::after {
  content: '';
  display: block;
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  right: 1.25em;
  height: .2rem;
  background-color: #225d85;
}
.calendar_box .inr_box::after {
  top: auto;
  bottom: 1.25em;
}
.calendar_box .inr_box .title {
  padding-top: 6em;
  padding-bottom: 1.5em;
  background: url('../image/top/deco_calendar.png') center/contain no-repeat;
}
.calendar_box .inr_box .title > span {
  padding: .2em 0;
  background-color: #fff;
  border-top: 1px solid #02428c;
  border-bottom: 1px solid #02428c;
  font-weight: 300;
  font-size: 2.4rem;
  color: #02428c;
  line-height: 1.1;
  letter-spacing: .1rem;
}

.wrap_calendar {
  margin-top: 1.3em;
}

.text_link {
  margin-top: 1.3em;
}
.text_link > a {
  color: #02428c;
  line-height: 1.3;
}
.text_link > a:hover,
.text_link > a:focus {
  text-decoration: underline;
}

.icon_arrow {
  position: relative;
  display: inline-block;
  padding-right: 2em;
}
.icon_arrow::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid #02428c;
  border-radius: 50%;
}
.icon_arrow::after {
  content: '';
  display: block;
  position: absolute;
  top: .1em;
  right: .53em;
  bottom: 0;
  margin: auto;
  width: .4em;
  height: .4em;
  border-right: 1px solid #02428c;
  border-bottom: 1px solid #02428c;
  transform: rotate(-45deg);
}

.bnr_top{
  display: inline-block;
}
.bnr_top figure{
  width: 100%;
  max-width: 500px;
}
.bnr_top figure img{
  width: 100%;
}
.bnr_center{
  text-align: center;
}
.link_txt{
  text-decoration: underline;
  color: #02428c;
}
@media screen and (min-width: 768px){
  .bnr_top:hover{
    opacity: .7;
  }
}
@media screen and (max-width: 991px) {
  .box_pdl {
    padding-left: 0;
  }
  .top_key .ofi_wrap {
    left: 0;
  }

  .calendar_box {
    padding: 3.5em;
  }
  .calendar_box .inr_box {
    max-width: 16em;
    padding: 2em 1em;
  }
  .calendar_box .inr_box::before,
  .calendar_box .inr_box::after {
    top: 1em;
    left: 1em;
    right: 1em;
  }
  .calendar_box .inr_box::after {
    bottom: 1em;
  }
  .calendar_box .inr_box .title {
    padding-top: 4.2em;
    padding-bottom: 1em;
  }
  .calendar_box .inr_box .title > span {
    font-size: 2rem;
  }
}
@media screen and (max-width: 575px) {
  .calendar_box .inr_box {
    max-width: 100%;
  }
}



/* top NEWS */
.news_title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3em;
}
.news_title .title {
  padding-right: 2em;
}
.news_title .title > .sup {
  position: relative;
  margin-bottom: .3em;
  padding-left: 3.3em;
  font-family: 'Crimson Text', serif;
  line-height: 1.3;
}
.news_title .title > .sup > svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2.8em;
  height: .6em;
  fill: #fff;
  stroke: #c4c4c4;
}
.news_title .title > .main {
  font-weight: 300;
  font-size: 3.6rem;
  line-height: 1.3;
}

.more_link > a {
  position: relative;
  display: inline-block;
  padding-right: 1.6em;
  color: #02428c;
}
.more_link > a > svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  fill: #02428c;
}
@media screen and (min-width: 992px) {
  .more_link > a > svg {
    transition: .4s;
  }
}
.more_link > a:hover,
.more_link > a:focus {
  color: #68c7e1;
}
.more_link > a:hover > svg,
.more_link > a:focus > svg {
  fill: #68c7e1;
  transform: scale(1.05) rotate(45deg);
}

.ul_news > li + li {
  margin-top: .6em;
}
.ul_news > li > a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: .3em 0;
}
.ul_news > li > a > time {
  position: relative;
  display: block;
  width: 16em;
  padding-right: 10em;
}
.ul_news > li > a > time::before {
  content: '';
  display: block;
  position: absolute;
  top: .8em;
  right: 2em;
  width: 6em;
  height: 1px;
  background-color: #222222;
}
.ul_news > li > a > .text {
  width: calc( 100% - 16em );
  line-height: 1.5;
}
@media screen and (min-width: 992px) {
  .ul_news > li > a > time,
  .ul_news > li > a > time::before,
  .ul_news > li > a > .text {
    transition: .4s;
  }
}
.ul_news > li > a:hover > time,
.ul_news > li > a:focus > time {
  color: #02428c;
}
.ul_news > li > a:hover > time::before,
.ul_news > li > a:focus > time::before {
  background-color: #68c7e1;
}
.ul_news > li > a:hover > .text,
.ul_news > li > a:focus > .text {
  color: #02428c;
}


@media screen and (max-width: 991px) {
  .news_title {
    margin-bottom: 2em;
  }
  .news_title .title > .sup {
    font-size: 1.4rem;
  }
  .news_title .title > .main {
    font-size: 2.8rem;
  }

  .ul_news > li > a > time {
    position: relative;
    display: block;
    width: 12em;
    padding-right: 8em;
  }
  .ul_news > li > a > time::before {
    right: 1.2em;
    width: 4em;
  }
  .ul_news > li > a > .text {
    width: calc( 100% - 12em );
  }
}
@media screen and (max-width: 575px) {
  .ul_news > li + li {
    margin-top: 1em;
  }
  .ul_news > li > a {
    flex-wrap: wrap;
    padding: .5em 0;
  }
  .ul_news > li > a > .text {
    margin-top: .5em;
    width: 100%;
  }
}



/* top foot link */
.fx_col {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin-top: -3.5em;
}
.fx_col > .item {
  width: 33.3333%;
  margin-top: 3.5em;
}
.fx_col.col2 > .item {
  width: 50%;
}
.fx_col > .item > a {
  display: block;
}

.fx_col.col3 {
  margin-left: -1em;
  margin-right: -1em;
}
.fx_col.col3 > .item {
  width: 33.3333%;
  padding: 0 1em;
}

.style_link .ofi_wrap {
  padding-top: 76%;
  background-color: #68c7e1;
  overflow: hidden;
}
.col2 .style_link .ofi_wrap {
  padding-top: 55%;
}
@media screen and (min-width: 992px) {
  .style_link .ofi_wrap > img {
    transition: .4s;
  }
}
.style_link a:hover .ofi_wrap > img,
.style_link a:focus .ofi_wrap > img {
  transform: scale(1.1);
  opacity: .9;
}
.style_link .conts {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em 1em 1em;
}
@media screen and (min-width: 992px) {
  .style_link .conts {
    transition: .4s;
  }
}
.style_link a:hover .conts,
.style_link a:focus .conts {
  background-color: rgba(104, 199, 225, .2);
}
.style_link .conts .title {
  font-size: 3rem;
  color: #02428c;
  line-height: 1.3;
  letter-spacing: .1rem;
}
.style_link .conts .sup {
  margin-top: .8em;
  font-family: 'Crimson Text', serif;
  line-height: 1.3;
}
.style_link .conts .icon_arrow {
  height: 1.3em;
  margin-top: 1.5em;
  padding-right: 1.3em;
}
.style_link .conts .coming_soon {
  margin-top: 1em;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.3;
}
.style_link .conts .coming_soon > span {
  display: inline-block;
  padding: .3em .8em;
  background-color: #68c7e1;
  color: #fff;
}

.style_text > .conts {
  height: 100%;
  border: 1px solid rgba(104, 199, 225, .4);
}
.style_text > .conts > .title {
  padding: .6em;
  background-color: rgba(104, 199, 225, .4);
  text-align: center;
  font-size: 2.4rem;
  color: #02428c;
  line-height: 1.3;
  letter-spacing: .1rem;
}
.style_text > .conts > .text {
  padding: 1em;
}

@media screen and (max-width: 991px) {
  .fx_col {
    margin-top: -2em;
  }
  .fx_col > .item {
    margin-top: 2em;
  }

  .fx_col.col3 {
    margin-left: -1.5%;
    margin-right: -1.5%;
  }
  .fx_col.col3 > .item {
    width: 50%;
    padding: 0 1.5%;
  }

  .style_link .conts {
    padding: 1.2em .5em .8em;
  }
  .style_link .conts .title {
    font-size: 2rem;
  }
  .style_link .conts .sup {
    margin-top: .6em;
    font-size: 1.4rem;
  }
  .style_link .conts .icon_arrow {
    margin-top: 1em;
  }

  .style_text > .conts > .title {
    font-size: 2rem;
  }
}
@media screen and (max-width: 575px) {
  .fx_col > .item,
  .fx_col.col2 > .item {
    width: 100%;
  }

  .fx_col > .style_link > a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
  }
  .fx_col > .style_link:nth-child(even) > a {
    flex-direction: row-reverse;
  }
  .fx_col > .style_link + .style_link {
    margin-top: 1.5em;
  }
  .style_link > a .ofi_wrap {
    width: 50%;
    padding-top: 36%;
  }
  .col2 .style_link .ofi_wrap {
    padding-top: 36%;
  }
  .style_link .conts {
    width: 50%;
    padding: 1.5em;
  }

  .style_text > .conts > .title {
    font-size: 1.8rem;
  }
  .style_text > .conts > .text {
    padding: .8em;
  }
}




/*--------------------------------------------
  UNDER COMMON
--------------------------------------------*/
.under_key {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  height: 12em;
  padding: 1.5em 0;
  background-color: rgba(104, 199, 225, .4);;
  text-align: center;
}
.under_key .ttl_under .title {
  font-size: 3rem;
  font-weight: 300;
  color: #02428c;
  line-height: 1.3;
  letter-spacing: .1rem;
}
.under_key .ttl_under .title > .sm {
  display: block;
  font-size: 2.2rem;
}
.under_key .ttl_under .sup {
  margin-top: .6em;
  font-family: 'Crimson Text', serif;
  line-height: 1.3;
}


@media screen and (max-width: 991px) {
  .under_key {
    height: 10em;
  }
  .under_key .ttl_under .title {
    font-size: 2.4rem;
  }
  .under_key .ttl_under .title > .sm {
    font-size: 1.8rem;
  }
  .under_key .ttl_under .sup {
    margin-top: .3em;
    font-size: 1.4rem;
  }
}



/*--------------------------------------------
  guide
--------------------------------------------*/
.txt_box + .txt_box {
  margin-top: 4em;
}
.txt_box > *:not(h2):not(h3):not(h4) + * {
  margin-top: 1.5em;
}
.txt_box > *:not(h2):not(h3):not(h4) + *.mgt_sm {
  margin-top: .6em;
}
.txt_box > *:not(h2):not(h3):not(h4) + h2,
.txt_box > *:not(h2):not(h3):not(h4) + h3,
.txt_box > *:not(h2):not(h3):not(h4) + h4 {
  margin-top: 2.2em;
}

.tbl_col th,
.tbl_col td {
  width: 33.3333%;
  padding: 1em 2em;
  border: 1px solid #eee;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .1rem;
}
.tbl_col th {
  background-color: #f4f4f4;
  text-align: center;
  font-weight: 300;
}
.tbl_col.guide td:first-child {
  text-align: left;
}


@media screen and (max-width: 991px) {
  .txt_box + .txt_box {
    margin-top: 3em;
  }
  .txt_box > *:not(h2):not(h3):not(h4) + * {
    margin-top: 1.2em;
  }
  .txt_box > *:not(h2):not(h3):not(h4) + h2,
  .txt_box > *:not(h2):not(h3):not(h4) + h3,
  .txt_box > *:not(h2):not(h3):not(h4) + h4 {
    margin-top: 2em;
  }

  .tbl_col th,
  .tbl_col td {
    width: auto;
    padding: .8em 1.2em;
    letter-spacing: 0;
  }
}



/*--------------------------------------------
  link
--------------------------------------------*/
.ul_link > li {
  border-bottom: 1px dashed rgba(104, 199, 225, .4);
}
.ul_link > li > a {
  position: relative;
  display: block;
  padding: 1em;
  padding-left: 1.6em;
}
.ul_link > li > a:hover,
.ul_link > li > a:focus {
  background-color: rgba(104, 199, 225, .1);
}
.ul_link > li > a::before {
  content: '';
  display: block;
  position: absolute;
  top: 1.5em;
  left: .4em;
  width: .5em;
  height: .5em;
  border-right: .2rem solid #02428c;
  border-bottom: .2rem solid #02428c;
  transform: rotate(-45deg);
}


@media screen and (max-width: 767px) {
  .ul_link > li > a {
    padding: 1.2em;
    padding-left: 1.6em;
  }
  .ul_link > li > a::before {
    top: 1.7em;
  }
}