@charset "UTF-8";
/*============================================================


  module
  

  -----------------------------------------------------------
 
  1) layout
  2) letter
  3) image
  4) parts
  5) list
  6) box
  7) nav
  8) index

============================================================*/
/*============================================================


  module / layout


============================================================*/
#main {
  width: 100%;
  padding-top: 10rem;
}

#contents {
  width: 100%;
  position: relative;
}

#contents-article {
  width: 100%;
  position: relative;
}

.block-section {
  padding-top: 8rem;
  padding-bottom: 12rem;
}

.nav-anchor + .block-section {
  padding-top: 12rem;
}

.block-head {
  padding-top: 8rem;
  padding-bottom: 6.4rem;
}

.block-chapter {
  padding-bottom: 10rem;
}

.block-catchline {
  text-align: center;
  padding-bottom: 5.6rem;
}

.block-island {
  background-color: #f8f8f8;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.block-content {}
.block-letter {}
.block-image {}
.block-figure {}


@media (max-width: 480px) and (orientation: portrait) {
  #main {
    padding-top: 5.6rem;
  }

  .block-section {
    padding-top: 3.2rem;
    padding-bottom: 4.8rem;
  }

  .nav-anchor + .block-section {
    padding-top: 6.4rem;
  }

  .block-head {
    padding-top: 3.2rem;
    padding-bottom: 2.4rem;
  }

  .block-chapter {
    padding-bottom: 4rem;
  }

  .block-catchline {
    padding-bottom: 2.4rem;
  }

  .block-island {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
}



/*========================================
  grid
========================================*/
.grid1 {
  padding-left: 2rem; 
  padding-right: 2rem; 
}

.grid2 {
  padding-left: 4rem; 
  padding-right: 4rem; 
}

.grid3 {
  padding-left: 8rem; 
  padding-right: 8rem; 
}

.grid4 {
  padding-left: 10rem; 
  padding-right: 10rem; 
}

.grid5 {
  padding-left: 20rem; 
  padding-right: 20rem; 
}

@media (max-width: 480px) and (orientation: portrait) {
  .grid1 {
    padding-left: 1.6rem; 
    padding-right: 1.6rem; 
  }

  .grid2 {
    padding-left: 1.6rem; 
    padding-right: 1.6rem; 
  }

  .grid3 {
    padding-left: 2.4rem; 
    padding-right: 2.4rem; 
  }

  .grid4 {
    padding-left: 2.4rem; 
    padding-right: 2.4rem; 
  }

  .grid5 {
    padding-left: 2.4rem; 
    padding-right: 2.4rem; 
  }
}





/*========================================
  column
========================================*/
/*  2 column
=====================*/
.column-col2 {
  width: 100%;
  font-size: 0;
  text-align: left;
}

.column-col2 > * {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  position: relative;
}

.column-col2.box > * {
  height: 36rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .column-col2 > * {
    width: 100%;
  }

  .column-col2.box > * {
    height: 20rem;
  }

  .android .column-col2.box > * {
    height: 18rem;
  }
}





/*  3 column
=====================*/
.column-col3 {
  width: 100%;
  font-size: 0;
  text-align: left;
}

.column-col3 > * {
  display: inline-block;
  width: 33.333%;
  width: calc(100% / 3);
  vertical-align: top;
  position: relative;
}

.ie .column-col3 > * {
  width: 33.333%;
}

.column-col3.box > * {
  height: 32rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .column-col3 > * {
    width: 100%;
  }

  .column-col3.box > * {
    height: 20rem;
  }
}




/*  4 column
=====================*/
.column-col4 {
  width: 100%;
  font-size: 0;
  text-align: left;
}

.column-col4 > * {
  display: inline-block;
  width: 25%;
  vertical-align: top;
}

@media (max-width: 480px) and (orientation: portrait) {
  .column-col4 > * {
    width: 50%;
  }
}



/*  2 to 1 column
=====================*/
.column-col2to1 {
  width: 100%;
  font-size: 0;
}

.column-col2to1 > * {
  display: inline-block;
  vertical-align: top;
}

.column-col2to1 > *:nth-of-type(odd) {
  width: 66%;
}

.column-col2to1 > *:nth-of-type(even) {
  width: 34%;
}

.column-col2to1.box > * {
  height: 32rem;
  position: relative;
}


@media (max-width: 480px) and (orientation: portrait) {
  .column-col2to1 > *:nth-of-type(odd) {
    width: 100%;
  }

  .column-col2to1 > *:nth-of-type(even) {
    width: 100%;
  }

  .column-col2to1.box > * {
    height: 20rem;
  }

  .android .column-col2to1.box > * {
    height: 18rem;
  }
}



/*  1 & 2 column
=====================*/
.column-col1col2 {
  width: 100%;
  overflow: hidden;
}

.column-col1col2 > * {
  width: 50%;
  position: relative;
}

.column-col1col2 > *:first-of-type {
  width: 100%;
}

.column-col1col2 > *:nth-of-type(odd) {
  float: right;
}

.column-col1col2 > *:nth-of-type(even) {
  float: left;
}



/*  1 & 3 column
=====================*/
.column-col1col3 {
  width: 100%;
  overflow: hidden;
}

.column-col1col3 > * {
  position: relative;
}

.column-col1col3 > *:first-of-type {
  width: 100%;
}

.column-col1col3 > *:nth-of-type(n+2) {
  width: calc(100% / 3);
  float: left;
}



/*  2 & 3 column
=====================*/
.column-col2col3 {
  width: 100%;
  overflow: hidden;
}

.column-col2col3 > * {
  float: left;
  position: relative;
}

.column-col2col3 > *:nth-of-type(-n+2) {
  width: 50%;
}

.column-col2col3 > *:nth-of-type(n+3) {
  width: calc(100% / 3);
}

@media (max-width: 480px) and (orientation: portrait) {
  .column-col2col3 > *:nth-of-type(-n+2) {
    width: 100%;
  }
}



/*  3 & 2 column
=====================*/
column-col3col2 {
  width: 100%;
  overflow: hidden;
}

column-col3col2 > * {
  float: left;
  position: relative;
}

column-col3col2 > *:nth-of-type(-n+3) {
  width: calc(100% / 3);
}

column-col3col2 > *:nth-of-type(n+4) {
  width: 50%;
}

@media (max-width: 480px) and (orientation: portrait) {
  column-col3col2 > *:nth-of-type(n+4) {
    width: 100%;
  }
}



/*  column table
=====================*/
.column-tbl {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.column-tbl > * {
  display: table-cell;
  height: 100%;
  vertical-align: top;
  position: relative;
}

.column-tbl.mdl > * {
  vertical-align: middle;
}

@media (max-width: 480px) and (orientation: portrait) {
  .column-tbl {
    display: block;
  }

  .column-tbl > * {
    display: block;
    width: 100%;
    height: auto;
  }
}




/*========================================
  space
========================================*/
/*  bottom space
=====================*/
.pdb0 {
  padding-bottom: 0 !important;
}

.pdb1 {
  padding-bottom: 2rem !important;
}

.pdb2 {
  padding-bottom: 4rem !important;
}

.pdb3 {
  padding-bottom: 6rem !important;
}

.pdb4 {
  padding-bottom: 8rem !important;
}

.pdb5 {
  padding-bottom: 10rem !important;
}

.pdb6 {
  padding-bottom: 12rem !important;
}

.pdb7 {
  padding-bottom: 14rem !important;
}

.pdb8 {
  padding-bottom: 16rem !important;
}

@media (max-width: 480px) and (orientation: portrait) {
  .pdb1 {
    padding-bottom: 1rem !important;
  }

  .pdb2 {
    padding-bottom: 2rem !important;
  }

  .pdb3 {
    padding-bottom: 3rem !important;
  }

  .pdb4 {
    padding-bottom: 4rem !important;
  }

  .pdb5 {
    padding-bottom: 5rem !important;
  }

  .pdb6 {
    padding-bottom: 6rem !important;
  }

  .pdb7 {
    padding-bottom: 7rem !important;
  }

  .pdb8 {
    padding-bottom: 8rem !important;
  }
}



.mgb0 {
  margin-bottom: 0 !important;
}

.mgb1 {
  margin-bottom: 2rem !important;
}

.mgb2 {
  margin-bottom: 4rem !important;
}

.mgb3 {
  margin-bottom: 6rem !important;
}

.mgb4 {
  margin-bottom: 8rem !important;
}

.mgb5 {
  margin-bottom: 10rem !important;
}

.mgb6 {
  margin-bottom: 12rem !important;
}

.mgb7 {
  margin-bottom: 14rem !important;
}

.mgb8 {
  margin-bottom: 16rem !important;
}

@media (max-width: 480px) and (orientation: portrait) {
  .mgb1 {
    margin-bottom: 1rem !important;
  }

  .mgb2 {
    margin-bottom: 2rem !important;
  }

  .mgb3 {
    margin-bottom: 3rem !important;
  }

  .mgb4 {
    margin-bottom: 4rem !important;
  }

  .mgb5 {
    margin-bottom: 5rem !important;
  }

  .mgb6 {
    margin-bottom: 6rem !important;
  }

  .mgb7 {
    margin-bottom: 7rem !important;
  }

  .mgb8 {
    margin-bottom: 8rem !important;
  }
}



/*  top space
=====================*/
.pdt0 {
  padding-top: 0 !important;
}

.pdt1 {
  padding-top: 2rem !important;
}

.pdt2 {
  padding-top: 4rem !important;
}

.pdt3 {
  padding-top: 6rem !important;
}

.pdt4 {
  padding-top: 8rem !important;
}

.pdt5 {
  padding-top: 10rem !important;
}

.pdt6 {
  padding-top: 12rem !important;
}

.pdt7 {
  padding-top: 14rem !important;
}

.pdt8 {
  padding-top: 16rem !important;
}


@media (max-width: 480px) and (orientation: portrait) {
  .pdt1 {
    padding-top: 1rem !important;
  }

  .pdt2 {
    padding-top: 2rem !important;
  }

  .pdt3 {
    padding-top: 3rem !important;
  }

  .pdt4 {
    padding-top: 4rem !important;
  }

  .pdt5 {
    padding-top: 5rem !important;
  }

  .pdt6 {
    padding-top: 6rem !important;
  }

  .pdt7 {
    padding-top: 7rem !important;
  }

  .pdt8 {
    padding-top: 8rem !important;
  }
}


.mgt0 {
  margin-top: 0 !important;
}

.mgt1 {
  margin-top: 2rem !important;
}

.mgt2 {
  margin-top: 4rem !important;
}

.mgt3 {
  margin-top: 6rem !important;
}

.mgt4 {
  margin-top: 8rem !important;
}

.mgt5 {
  margin-top: 10rem !important;
}

.mgt6 {
  margin-top: 12rem !important;
}

.mgt7 {
  margin-top: 14rem !important;
}

.mgt8 {
  margin-top: 16rem !important;
}


@media (max-width: 480px) and (orientation: portrait) {
  .mgt1 {
    margin-top: 1rem !important;
  }

  .mgt2 {
    margin-top: 2rem !important;
  }

  .mgt3 {
    margin-top: 3rem !important;
  }

  .mgt4 {
    margin-top: 4rem !important;
  }

  .mgt5 {
    margin-top: 5rem !important;
  }

  .mgt6 {
    margin-top: 6rem !important;
  }

  .mgt7 {
    margin-top: 7rem !important;
  }

  .mgt8 {
    margin-top: 8rem !important;
  }
}




/*============================================================


  module / letter


============================================================*/
/*========================================
  basic
========================================*/
.txt.lv1 {
  font-size: 6.4rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.txt.lv2 {
  font-size: 5.6rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.txt.lv3 {
  font-size: 4.8rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.txt.lv4 {
  font-size: 4.4rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.txt.lv5 {
  font-size: 4rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.txt.lv6 {
  font-size: 3.2rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.txt.lv7 {
  font-size: 2.8rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.txt.lv8 {
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.txt.lv9 {
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.txt.lv10 {
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.txt.lv11 {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 2;
}

.txt.lv12 {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 2;
}

.txt.lv13 {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 2;
}

.txt.lv14 {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 2;
}

.txt.lv15 {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  line-height: 2;
}

.txt.lv16 {
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 2;
}


.txt.blu {
  color: #25265a;
}

.txt.blk {
  color: #000;
}

.txt.wht {
  color: #fff;
}

.txt.thin {
  font-weight: 100;
}

.txt.light {
  font-weight: 300;
}

.txt.regular {
  font-weight: 400;
}

.txt.medium {
  font-weight: 500;
}

.txt.bold {
  font-weight: 700;
}

.txt.center {
  text-align: center;
}

.txt.left {
  text-align: left;
}

.txt.right {
  text-align: right;
}

.txt > strong,
.txt > em,
.txt > span {
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.lv1 {
    font-size: 4rem;
  }

  .txt.lv2 {
    font-size: 3.2rem;
  }

  .txt.lv3 {
    font-size: 2.8rem;
  }

  .txt.lv4 {
    font-size: 2.8rem;
  }

  .txt.lv5 {
    font-size: 2.8rem;
  }

  .txt.lv6 {
    font-size: 2rem;
  }

  .txt.lv7 {
    font-size: 2rem;
    line-height: 1.4;
  }

  .txt.lv8 {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .txt.lv9 {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .txt.lv10 {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .txt.lv11 {
    font-size: 1.44rem;
    line-height: 1.7;
  }

  .txt.lv12 {
    font-size: 1.4rem;
    line-height: 1.7;
  }

  .txt.lv13 {
    font-size: 1.3rem;
    line-height: 1.7;
  }

  .txt.lv14 {
    font-size: 1.2rem;
    line-height: 1.7;
  }

  .txt.lv15 {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .txt.lv16 {
    font-size: 1rem;
    line-height: 1.7;
  }
}



/*========================================
  title
========================================*/
/*  title category
=====================*/
.txt.title-category {
  margin-bottom: 5.6rem;
}

.txt.title-category > strong {
  display: block;
  letter-spacing: 0.08em;
  margin-top: 1.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-category {
    margin-bottom: 3.2rem;
  }

  .txt.title-category > strong {
    margin-top: 1.2rem;
  }
}



/*  title page
=====================*/
.txt.title-page {
  line-height: 1;
}

.txt.title-page > span {
  color: inherit;
  font-size: 80%;
  font-weight: inherit;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-page {
  }
}



/*  title section
=====================*/
.txt.title-section {
  margin-bottom: 4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-section {
    margin-bottom: 2rem;
  }
}



/*  title　chapter
=====================*/
.txt.title-chapter {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-chapter {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}



/*  title block
=====================*/
.txt.title-block {
  margin-bottom: 2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-block {
    margin-bottom: 1.6rem;
  }
}



/*  title index
=====================*/
.txt.title-index {
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-index {
  }
}



/*  title box
=====================*/
.txt.title-box {
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-box {
  }
}



/*  title bar
=====================*/
.txt.title-bar {
  display: inline-block;
  width: 100%;
  text-align: center;
  border-radius: 10em;
  padding: 0.08em 2em;
}

.txt.title-bar.free {
  width: auto;
}

.txt.title-bar.blu {
  color: #fff;
  background-color: #25265a;
}

.txt.title-bar.wht {
  color: #000;
  background-color: #fff;
}

.txt.title-bar.blk {
  color: #fff;
  background-color: #000;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-bar {
    padding: 0.06em 1em;
  }
}




/*========================================
  text
========================================*/
/*  text catch
=====================*/
.txt.text-catch-1 {
  margin-bottom: 4rem;
}

.txt.text-catch-2 {
  margin-top: 4.8rem;
  margin-bottom: 2.4rem;
}

.txt.text-catch-3 {
  letter-spacing: 0.08em;
  margin-top: 1.6rem;
  margin-bottom: 3.2rem;
}


.cap > .txt.text-catch-2 {
  margin-top: 3.2rem;
}

.txt.text-catch-2 > span {
  display: inline-block;
  font-size: 64%;
  margin: 0 0.5em;
}


.txt.text-catch-hero {
  letter-spacing: 0.06em;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-catch-1 {
    margin-bottom: 2.4rem;
  }

  .txt.text-catch-2 {
    margin-top: 2rem;
    margin-bottom: 1.6rem;
  }

  .txt.text-catch-3 {
    margin-bottom: 2rem;
  }

  .cap > .txt.text-catch-2 {
    margin-top: 0.8rem;
  }

  .txt.text-catch-2.center {
    text-align: left;
  }
}




/*  text lead
=====================*/
.txt.text-lead {
  letter-spacing: 0.12em;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.cap > .txt.text-lead {
  padding-top: 4rem;
}

.txt.text-lead > span {
  color: inherit;
  font-size: 88%;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-lead {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

  .cap > .txt.text-lead {
    padding-top: 1.6rem;
  }

  .txt.text-lead.center {
    text-align: left;
  }

  .txt.text-lead > br {
    display: none;
  }
}




/*  text summary
=====================*/
.txt.text-summary {
}

.txt.text-catch-hero + .txt.text-summary {
  margin-top: 3.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-summary {
  }

  .txt.text-catch-hero + .txt.text-summary {
    margin-top: 1rem;
  }

  .txt.text-summary > br {
    display: none;
  }

  .txt.text-summary.center {
    text-align: left;
  }
}



/*========================================
  text body
========================================*/
.txt.text-body {
  line-height: 2;
}

.txt.text-body + .txt.text-body {
  margin-top: 1em;
}

.txt.text-body .notes {
  color: inherit;
  font-size: 75%;
  font-weight: inherit;
  letter-spacing: inherit;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-body {
    line-height: 1.7;
  }
}



/*========================================
  text caption
========================================*/
.txt.text-caption {
  display: inline-block;
  width: calc(100% - 8rem);
  color: #000;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  background-color: rgba(255,255,255,0.9);
  padding: 0.8rem 1.6rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
}

.txt.text-caption.szs {
  width: calc(100% - 40rem);
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-caption {
    width: calc(100% - 3.2rem);
    font-size: 1rem;
    letter-spacing: 0.04em;
    padding: 0.8rem 0rem;
  }

  .txt.text-caption.szs {
    width: calc(100% - 3.2rem);
  }
}



/*========================================
  text notes
========================================*/
.txt.text-notes {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-notes {
    font-size: 1.2rem;
    line-height: 1.4;
  }
}



/*========================================
  text link
========================================*/
.txt.text-link {
}

.txt.text-link:hover {
  text-decoration: underline;
}

.txt.text-link[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: inherit;
  background: url(/assets/images/common/ico_outside_blu.svg) center center no-repeat;
  background-size: contain;
  margin-left: 0.2em;
  vertical-align: -8%;
}




/*========================================
  text contact
========================================*/
.txt.text-contact {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.txt.text-contact::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.8em;
  font-size: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 0.3em;
  vertical-align: -4%;
}

.txt.text-contact.tel.noicon::before {
  content: none;
}

.txt.text-contact.tel.blu::before {
  background-image: url(/assets/images/common/ico_tel_blu.svg);
}

.txt.text-contact.tel.wht::before {
  background-image: url(/assets/images/common/ico_tel_wht.svg);
}

.txt.text-contact.tel.blk::before {
  background-image: url(/assets/images/common/ico_tel_blu.svg);
}


.txt.text-contact.fax.blu::before {
  background-image: url(/assets/images/common/ico_fax_blu.svg);
}

.txt.text-contact.fax.wht::before {
  background-image: url(/assets/images/common/ico_fax_wht.svg);
}

.txt.text-contact.fax.blk::before {
  background-image: url(/assets/images/common/ico_fax_blk.svg);
}


.txt.text-contact.mail.blu::before {
  background-image: url(/assets/images/common/ico_mail_blu.svg);
}

.txt.text-contact.mail.wht::before {
  background-image: url(/assets/images/common/ico_mail_wht.svg);
}

.txt.text-contact.mail.blk::before {
  background-image: url(/assets/images/common/ico_mail_blk.svg);
}


.txt.text-contact > em {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.txt.text-contact > strong {
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.txt.text-contact.mail > strong {
  font-size: 0.7em;
}




/*============================================================


  module / image


============================================================*/
.block-image.bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.block-image.bg.cvr {
  background-size: cover;
}
@media (max-width: 480px) and (orientation: portrait) {
  .block-image.block-image-kv{
    width: 175%;
    transform: translateX(-50%);
    left: 50%;
  }  
}

.block-image.bg.cvr img{
  height: 100%;
}
@media (max-width: 480px) and (orientation: portrait) {
  .block-image.bg.cvr img{
    height: auto;
  }  
}

.block-image.bg.ctn {
  background-size: contain;
}

.block-image.flt1::after,
.block-image.flt2::after,
.block-image.flt3::after,
.block-image.flt4::after,
.block-image.flt5::after,
.block-image.flt6::after,
.block-image.flt7::after,
.block-image.flt8::after,
.block-image.flt9::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #111112;
  background-color: #333336;
  background-color: #303036;
  background-color: #222224;
  position: absolute;
  left: 0;
  top: 0;
}

.block-image.flt1::after {
  opacity: 0.1;
}

.block-image.flt2::after {
  opacity: 0.2;
}

.block-image.flt3::after {
  opacity: 0.3;
}

.block-image.flt4::after {
  opacity: 0.4;
}

.block-image.flt5::after {
  opacity: 0.5;
}

.block-image.flt6::after {
  opacity: 0.6;
}

.block-image.flt7::after {
  opacity: 0.7;
}

.block-image.flt8::after {
  opacity: 0.8;
}

.block-image.flt9::after {
  opacity: 0.9;
}



/*========================================
  picture slide
========================================*/
.pic-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.pic-slide .nav-slide {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

@-webkit-keyframes pic-slide_in {
  0% { -webkit-transform: translateX(0.6rem); opacity: 0;}
  100% { -webkit-transform: translateX(0); opacity: 1;}
}

@-moz-keyframes pic-slide_in {
  0% { -moz-transform: translateX(0.6rem); opacity: 0;}
  100% { -moz-transform: translateX(0); opacity: 1;}
}

@-ms-keyframes pic-slide_in {
  0% { -ms-transform: translateX(0.6rem); opacity: 0;}
  100% { -ms-transform: translateX(0); opacity: 1;}
}

@-o-keyframes pic-slide_in {
  0% { -o-transform: translateX(0.6rem); opacity: 0;}
  100% { -o-transform: translateX(0); opacity: 1;}
}

@keyframes pic-slide_in {
  0% { transform: translateX(0.6rem); opacity: 0;}
  100% { transform: translateX(0); opacity: 1;}
}

.pic-slide .list-slide > li.active.in {
  -webkit-animation: pic-slide_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: pic-slide_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: pic-slide_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: pic-slide_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: pic-slide_in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}




/*========================================
  picture gallery
========================================*/
.pic-gallery {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.pic-gallery .list-gallery > li {
   border-top: 1px solid #fff;
}

.pic-gallery .nav-slide {
  width: 100%;
  text-align: center;
}

.pic-gallery .pic-slide .list-slide > li.active.in {
  -webkit-animation: pic-slide_in 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
     -moz-animation: pic-slide_in 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
      -ms-animation: pic-slide_in 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
       -o-animation: pic-slide_in 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
          animation: pic-slide_in 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}






/*============================================================

  figure

============================================================*/
/*========================================
  figure flow
========================================*/
.fig-flow {
  width: 100%;
  padding: 4rem 2rem 0;
  position: relative;
}

.fig-flow::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #bbb;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.fig-flow .list-flow {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.fig-flow .list-flow > li {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #ddd;
  background-color: #f7f8fe;
  position: relative;
}

.fig-flow .list-flow > li::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #bbb;
  position: absolute;
  right: -3px;
  bottom: -2px;
  z-index: 2;
}

.fig-flow .list-flow > li:first-of-type {
  border-left: 1px solid #ddd;
}

.fig-flow .list-flow > li:first-of-type::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #bbb;
  position: absolute;
  left: -3px;
  bottom: -2px;
  z-index: 2;
}

.fig-flow .list-flow > li > dl {
  width: 100%;
}

.fig-flow .list-flow > li > dl > dt {
  width: 100%;
  height: 4rem;
  background-color: #fff;
  position: relative;
}

.fig-flow .list-flow > li > dl > dt::before {
  content: "";
  display: block;
  width: calc(100% - 3rem);
  height: 0.6rem;
  background-color: #51517b;
  margin: auto 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.fig-flow .list-flow > li > dl > dt::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 2.4rem;
  border-color: transparent transparent transparent #51517b;
  margin: auto 0;
  position: absolute;
  left: calc(100% - 3rem);
  top: 0;
  bottom: 0;
}

.fig-flow .list-flow > li > dl > dt > em {
  display: inline-block;
  color: #25265a;
  font-size: 1.6rem;
  font-weight: 100;
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
       -o-transform: translateY(-100%);
          transform: translateY(-100%);
}

.fig-flow .list-flow > li > dl > dd {
  width: 100%;
}

.fig-flow .list-flow .flow-title {
  display: table;
  height: 18rem;
}

.fig-flow .list-flow .flow-title > p {
  display: table-cell;
  color: #25265a;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2;
  text-align: center;
  vertical-align: middle;
}

.fig-flow .list-flow .flow-detail {
  padding: 0 1.6rem 1.6rem;
}

.fig-flow .list-flow .flow-detail > p {
  display: block;
  color: #000;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: left;
  background-color: #dde2fa;
  border-radius: 0.4rem;
  padding: 1.2rem;
  position: relative;
}

.fig-flow .list-flow .flow-detail > p::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.8rem 0.8rem;
  border-color: transparent transparent #dde2fa transparent;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
       -o-transform: translateY(-100%);
          transform: translateY(-100%);
}


@media (max-width: 480px) and (orientation: portrait) {
  .fig-flow {
    padding: 0;
  }

  .fig-flow::before {
    display: none;
  }

  .fig-flow .list-flow {
    display: block;
  }

  .fig-flow .list-flow > li {
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .fig-flow .list-flow > li::after {
    display: none;
  }

  .fig-flow .list-flow > li:first-of-type {
    border-left: none;
    border-top: 1px solid #ddd;
  }

  .fig-flow .list-flow > li:first-of-type::before {
    display: none;
  }

  .fig-flow .list-flow > li > dl {
    padding: 3.2rem 2.4rem 0 4rem;
  }

  .fig-flow .list-flow > li > dl > dt {
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding-left: 4rem;
    padding-right: 2.4rem;
    position: absolute;
    left: 0;
    top: 0;
  }

  .fig-flow .list-flow > li > dl > dt::before {
    width: 0.6rem;
    height: calc(100% - 3rem);
    margin: 0 auto;
    left: 1.3rem;
    right: auto;
    top: 0;
    bottom: auto;
  }

  .fig-flow .list-flow > li > dl > dt::after {
    border-width: 2.4rem 0.6rem 0 0.6rem;
    border-color: #51517b transparent transparent transparent;
    margin: 0 auto;
    left: 1rem;
    right: auto;
    top: calc(100% - 3rem);
    bottom: auto;
  }

  .fig-flow .list-flow > li > dl > dt > em {
    padding-top: 1.6rem;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }

  .fig-flow .list-flow > li > dl > dd {
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: 2rem;
  }

  .fig-flow .list-flow .flow-title {
    display: inline-table;
    width: auto;
    height: auto;
    min-height: 4rem;
  }

  .fig-flow .list-flow .flow-title > p {
    line-height: 1.4;
  }

  .fig-flow .list-flow .flow-detail {
    padding: 0 1.6rem 1.6rem;
  }

  .fig-flow .list-flow .flow-detail > p {
    display: block;
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0.8rem 1.2rem;
  }
}




/*============================================================


  module / parts


  -----------------------------------------------------------
 
  1) btn
  2) tag
  3) cap
  4) number

============================================================*/
/*====================================================

  btn

====================================================*/
.btn {
  display: inline-block;
  height: 4rem;
  color: #25265a;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 3.8rem;
  text-align: center;
  border: 1px solid rgba(37,38,90,0.4);
  cursor: pointer;
  position: relative;
  -webkit-transition: background 0.1s, color 0.1s, border 0.1s;
     -moz-transition: background 0.1s, color 0.1s, border 0.1s;
      -ms-transition: background 0.1s, color 0.1s, border 0.1s;
       -o-transition: background 0.1s, color 0.1s, border 0.1s;
          transition: background 0.1s, color 0.1s, border 0.1s;
}

.btn.szl {
  width: 40rem;
  font-size: 1.6rem;
}

.btn.szm {
  width: 30rem;
  font-size: 1.6rem;
}

.btn.szs {
  width: 20rem;
  font-size: 1.5rem;
}

.btn.szxs {
  width: 12rem;
  font-size: 1.3rem;
}

.btn.szxxs {
  width: 8rem;
  height: 3.2rem;
  font-size: 1.3rem;
  line-height: 3rem;
}


@media (max-width: 480px) and (orientation: portrait) {
  .btn.szxxs {
    width: 6.4rem;
    height: 2.8rem;
    line-height: 2.6rem;
  }
}

.btn.free {
  width: auto;
  padding: 0 2rem;
}

.btn.square {
  width: 4rem;
}

.btn.square > span {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.btn:hover {
  color: #fff;
  background-color: rgba(37,38,90,0.9);
  border: 1px solid rgba(37,38,90,0.9);
}

.btn > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn {
    height: 3.2rem;
    letter-spacing: 0.04em;
    line-height: 3rem;
    padding-right: 0.6rem;
  }

  .btn.szl {
    width: 80%;
    max-width: 30rem;
    font-size: 1.4rem;
  }

  .btn.szm {
    width: 20rem;
    font-size: 1.4rem;
  }

  .btn.szs {
    width: 12rem;
    height: 3rem;
    font-size: 1.2rem;
    line-height: 2.8rem;
  }

  .btn.szxxs {
    width: 6.4rem;
    height: 2.8rem;
    line-height: 2.6rem;
  }

  .btn.free {
    padding: 0 1.6rem;
  }

  .btn.square {
    width: 3.2rem;
  }
}



/*  icon
=====================*/
.btn::after {
  display: block;
  width: 1em;
  height: 1em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: auto 0;
  position: absolute;
  right: 0.5em;
  top: 0;
  bottom: 0;
}

.btn.szxxs::after {
  width: 0.8em;
  height: 0.8em;
  right: 0.4em;
}

.btn.link::after {
  content: "";
  background-image: url(/assets/images/common/ico_arrow_next_blu.svg);
}

.btn.link:hover::after {
  background-image: url(/assets/images/common/ico_arrow_next_wht.svg);
}

.btn.link.outside::after {
  width: 1.2em;
  height: 1.2em;
  background-image: url(/assets/images/common/ico_outside_blu.svg);
  right: 0.4em;
}

.btn.link.outside:hover::after {
  background-image: url(/assets/images/common/ico_outside_wht.svg);
}

.btn.square::after {
  margin: auto !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn.link::after {
    right: 0.3em;
  }
}



/*  white
=====================*/
.btn.wht {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

.btn.wht:hover {
  color: #000 !important;
  background-color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.9);
}

.btn.link.wht::after {
  background-image: url(/assets/images/common/ico_arrow_next_wht.svg);
}

.btn.link.wht:hover::after {
  background-image: url(/assets/images/common/ico_arrow_next_blk.svg);
}

.btn.link.outside.wht::after {
  background-image: url(/assets/images/common/ico_outside_wht.svg);
}

.btn.link.outside.wht:hover::after {
  background-image: url(/assets/images/common/ico_outside_blk.svg);
}





/*  black
=====================*/
.btn.blk {
  color: #000;
  border-color: rgba(0,0,0,0.4);
}

.btn.blk:hover {
  color: #fff !important;
  background-color: rgba(0,0,0,0.9);
  border: 1px solid rgba(0,0,0,0.9);
}

.btn.link.blk::after {
  background-image: url(/assets/images/common/ico_arrow_next_blk.svg);
}

.btn.link.blk:hover::after {
  background-image: url(/assets/images/common/ico_arrow_next_wht.svg);
}




/*  prev
=====================*/
.btn.prev {
  min-width: 4rem;
}

.btn.prev::after {
  content: "";
  background-image: url(/assets/images/common/ico_arrow_prev_blu.svg);
}

.btn.prev:hover::after {
  background-image: url(/assets/images/common/ico_arrow_prev_wht.svg);
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn.prev {
    width: 3.2rem !important;
    min-width: 0;
    min-width: initial;
  }

  .btn.next > span {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .btn.next::after {
    margin: auto;
    left: 0;
    right: 0;
  }
}



/*  next
=====================*/
.btn.next {
  min-width: 4rem;
}

.btn.next::after {
  content: "";
  background-image: url(/assets/images/common/ico_arrow_next_blu.svg);
}

.btn.next:hover::after {
  background-image: url(/assets/images/common/ico_arrow_next_wht.svg);
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn.next {
    width: 3.2rem !important;
    min-width: 0;
    min-width: initial;
  }

  .btn.next > span {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .btn.next::after {
    margin: auto;
    left: 0;
    right: 0;
  }
}






/*========================================
  label btn
========================================*/
.btn-label {
  display: inline-block;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  -webkit-transition: background 0.1s;
     -moz-transition: background 0.1s;
      -ms-transition: background 0.1s;
       -o-transition: background 0.1s;
          transition: background 0.1s;
}

.btn-label:hover {
  background-color: rgba(37,38,90,0.9);
}

.btn-label > dl {
  display: table;
  height: 100%;
}

.btn-label > dl > dt {
  display: table-cell;
}

.btn-label > dl > dd {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-left: 4rem;
  padding-right: 4.8rem;
}

.btn-label > dl > dd::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background: url(/assets/images/common/ico_arrow_next_blu.svg) center center no-repeat;
  background-size: contain;
  margin: auto 0;
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
}

.btn-label:hover > dl > dd::after {
  background-image: url(/assets/images/common/ico_arrow_next_wht.svg)
}


.btn-label .title-btn {
  display: inline;
  color: #25265a;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  -webkit-transition: color 0.1s;
     -moz-transition: color 0.1s;
      -ms-transition: color 0.1s;
       -o-transition: color 0.1s;
          transition: color 0.1s;
}

.btn-label:hover .title-btn {
  color: #fff;
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn-label {
    height: 2.8rem;
  }

  .btn-label > dl > dd {
    padding-left: 1rem;
    padding-right: 2rem;
  }

  .btn-label > dl > dd::after {
    width: 1.2rem;
    height: 1.2rem;
    right: 0.4rem;
  }

  .btn-label .title-btn {
    font-size: 1.2rem;
    letter-spacing: 0.02em;
  }
}





/*====================================================

  tag

====================================================*/
.tag {
  display: inline-block;
  min-width: 10rem;
  height: 4rem;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.08rem;
  line-height: 4rem;
  text-align: center;
  background-color: rgba(37,38,90,0.9);
  padding: 0 1.6rem;
}

.tag.ctg {
  min-width: auto;
  min-width: initial;
  border-radius: 2px;
  padding: 0 2rem;
  white-space: nowrap;
}

@media (max-width: 480px) and (orientation: portrait) {
  .tag {
    min-width: 8rem;
    height: 2.8rem;
    font-size: 0.9rem;
    letter-spacing: 0.02rem;
    line-height: 2.8rem;
    padding: 0 1rem;
  }

  .tag.ctg {
    padding: 0 1.6rem;
  }
}




/*====================================================

  cap

====================================================*/
.cap {
  padding-top: 0 !important;
  position: relative;
}

.cap::before {
  content: "";
  display: block;
  height: 4rem;
  margin: -4rem auto 0;
  background-color: #fff;
}

.grid4.cap::before {
  width: calc(100% + 16rem);
  margin-left: -8rem;
  margin-right: -8rem;
}

.grid5.cap::before {
  width: calc(100% + 20rem);
  margin-left: -10rem;
  margin-right: -10rem;
}


@media (max-width: 480px) and (orientation: portrait) {
  .cap::before {
    height: 2.8rem;
    margin-top: -2.8rem;
  }

  .grid5.cap::before {
    width: calc(100% + 1.6rem);
    margin-left: -0.8rem;
    margin-right: -0.8rem;
  }
}




/*====================================================

  number

====================================================*/
/*========================================
  number circle
========================================*/
.number-circle {
  display: inline-table;
  width: 1em;
  height: 1em;
  font-size: 80%;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
  border-radius: 10em;
  margin-right: 0.5rem;
  position: relative;
  top: -0.1em;
}

.number-circle.blu {
  background-color: #25265a;
}

.number-circle.blk {
  background-color: #000;
}

.number-circle.wht {
  background-color: #fff;
}

.number-circle > span {
  display: table-cell;
  font-size: 60%;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}

.number-circle.blu > span {
  color: #fff;
}

.number-circle.blk > span {
  color: #fff;
}

.number-circle.wht > span {
  color: #000;
}




/*========================================
  number data
========================================*/
.number-data {
  display: inline-block;
}

.number-data > dt {
  display: inline;
  font-size: 3.2rem;
  font-weight: 100;
  letter-spacing: 0.04em;
  vertical-align: baseline;
}

.number-data > dd {
  display: inline-block;
  vertical-align: baseline;
  padding: 0 1.6rem;
}

.number-data > dd > strong {
  font-size: 8rem;
  font-weight: 100;
  letter-spacing: -0.03em;
}

.number-data > dd > span {
  font-size: 2rem;
  font-weight: 100;
  margin-left: 0.4rem;
}

.number-data > dd:nth-of-type(n+2):not(.notes)::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8rem;
  background-color: #000;
  vertical-align: baseline;
  margin-right: 2.4rem;
  -webkit-transform: translateY(1rem) rotate(20deg);
     -moz-transform: translateY(1rem) rotate(20deg);
      -ms-transform: translateY(1rem) rotate(20deg);
       -o-transform: translateY(1rem) rotate(20deg);
          transform: translateY(1rem) rotate(20deg);
}

.number-data > dd.notes {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 100;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 1.6rem 0;
}


.number-data.wht * {
  color: #fff;
}

.number-data.wht > dd:nth-of-type(n+2):not(.notes)::before {
  background-color: #fff;
}


@media (max-width: 480px) and (orientation: portrait) {
  .number-data > dt {
    font-size: 2rem;
  }

  .number-data > dd {
    display: block;
    text-indent: 1rem;
    padding: 0;
    margin-top: 1rem;
  }

  .number-data > dd > strong {
    font-size: 6.4rem;
  }

  .number-data > dd > span {
    font-size: 1.6rem;
  }

  .number-data > dd:nth-of-type(n+2):not(.notes)::before {
    height: 5.6rem;
    margin-right: 1.6rem;
    -webkit-transform: translateY(0.6rem) rotate(20deg);
       -moz-transform: translateY(0.6rem) rotate(20deg);
        -ms-transform: translateY(0.6rem) rotate(20deg);
         -o-transform: translateY(0.6rem) rotate(20deg);
            transform: translateY(0.6rem) rotate(20deg);
  }

  .number-data > dd.notes {
    text-align: center;
    padding: 0.8rem 0;
  }
}


/*  size L
=====================*/
.number-data.szl > dt {
  font-size: 4rem;
}

.number-data.szl > dd > strong {
  font-size: 10rem;
}

.number-data.szl > dd > span {
  font-size: 2.4rem;
}

.number-data.szl > dd:nth-of-type(n+2):not(.notes)::before {
  height: 10rem;
}

.number-data.szl > dd.notes {
  font-weight: 300;
}

@media (max-width: 480px) and (orientation: portrait) {
  .number-data.szl > dt {
    font-size: 2.4rem;
  }

  .number-data.szl > dd > strong {
    font-size: 7.2rem;
  }

  .number-data.szl > dd > span {
    font-size: 2rem;
  }

  .number-data.szl > dd:nth-of-type(n+2):not(.notes)::before {
    height: 6.4rem;
    margin-right: 1.6rem;
    -webkit-transform: translateY(0.8rem) rotate(20deg);
       -moz-transform: translateY(0.8rem) rotate(20deg);
        -ms-transform: translateY(0.8rem) rotate(20deg);
         -o-transform: translateY(0.8rem) rotate(20deg);
            transform: translateY(0.8rem) rotate(20deg);
  }
}




/*========================================
  bar info
========================================*/
.bar-info {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.bar-info .list-info,
.bar-info .list-info > li {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@-webkit-keyframes bar-info_in {
  0% { -webkit-transform: translateY(80%); opacity: 0;}
  100% { -webkit-transform: translateY(0); opacity: 1;}
}

@-moz-keyframes bar-info_in {
  0% { -moz-transform: translateY(80%); opacity: 0;}
  100% { -moz-transform: translateY(0); opacity: 1;}
}

@-ms-keyframes bar-info_in {
  0% { -ms-transform: translateY(80%); opacity: 0;}
  100% { -ms-transform: translateY(0); opacity: 1;}
}

@-o-keyframes bar-info_in {
  0% { -o-transform: translateY(80%); opacity: 0;}
  100% { -o-transform: translateY(0); opacity: 1;}
}

@keyframes bar-info_in {
  0% { transform: translateY(80%); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}

.bar-info .list-info > li.active.in {
  z-index: 2;
  -webkit-animation: bar-info_in 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
     -moz-animation: bar-info_in 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
      -ms-animation: bar-info_in 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
       -o-animation: bar-info_in 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
          animation: bar-info_in 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@-webkit-keyframes bar-info_out {
  0% { -webkit-transform: translateY(0); opacity: 1;}
  100% { -webkit-transform: translateY(-80%); opacity: 0;}
}

@-moz-keyframes bar-info_out {
  0% { -moz-transform: translateY(0); opacity: 1;}
  100% { -moz-transform: translateY(-80%); opacity: 0;}
}

@-ms-keyframes bar-info_out {
  0% { -ms-transform: translateY(0); opacity: 1;}
  100% { -ms-transform: translateY(-80%); opacity: 0;}
}

@-o-keyframes bar-info_out {
  0% { -o-transform: translateY(0); opacity: 1;}
  100% { -o-transform: translateY(-80%); opacity: 0;}
}

@keyframes bar-info_out {
  0% { transform: translateY(0); opacity: 1;}
  100% { transform: translateY(-80%); opacity: 0;}
}

.bar-info .list-info > li.active.out {
  z-index: 1;
  -webkit-animation: bar-info_out 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
     -moz-animation: bar-info_out 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
      -ms-animation: bar-info_out 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
       -o-animation: bar-info_out 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
          animation: bar-info_out 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.bar-info .list-info a {
  display: block;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.bar-info .list-info a > * {
  display: inline;
  vertical-align: middle;
}

.bar-info .list-info a img {
  width: auto;
  height: 100%;
}

.bar-info .list-info a .text-info {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  font-weight: 300;
  margin-left: 2rem;
}

.bar-info .list-info a:hover .text-info {
  text-decoration: underline;
}


@media (max-width: 480px) and (orientation: portrait) {
  .bar-info .list-info a {
    display: table;
    width: 100%;
    height: 100%;
    white-space: normal;
  }

  .bar-info .list-info a img {
    display: none;
  }

  .bar-info .list-info a .text-info {
    display: table-cell;
    width: 100%;
    height: 100%;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 0 1.6rem;
    margin-left: 0;
  }

  .bar-info .list-info a:hover .text-info {
    text-decoration: none;
  }
}




/*============================================================


  module / list


============================================================*/
/*========================================
  list table (dl)
========================================*/
dl.list-tbl {
  width: 100%;
  font-size: 0;
  border-bottom: 1px solid #eee;
}

dl.list-tbl > dt,
dl.list-tbl > dd {
  display: inline-block;
  font-size: 1.56rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #eee;
  padding: 1.6rem 0;
}

dl.list-tbl.top > dt,
dl.list-tbl.top > dd {
  vertical-align: top;
}

dl.list-tbl.middle > dt,
dl.list-tbl.middle > dd {
  vertical-align: middle;
}

dl.list-tbl.bottom > dt,
dl.list-tbl.bottom > dd {
  vertical-align: bottom;
}

dl.list-tbl > dt.top,
dl.list-tbl > dd.top {
  vertical-align: top;
}

dl.list-tbl > dt.middle,
dl.list-tbl > dd.middle {
  vertical-align: middle;
}

dl.list-tbl > dt.bottom,
dl.list-tbl > dd.bottom {
  vertical-align: bottom;
}

dl.list-tbl.left {
  text-align: left;
}

dl.list-tbl.center {
  text-align: center;
}

dl.list-tbl.right {
  text-align: right;
}

dl.list-tbl > dt.left,
dl.list-tbl > dd.left {
  text-align: left;
}

dl.list-tbl > dt.center,
dl.list-tbl > dd.center {
  text-align: center;
}

dl.list-tbl > dt.right,
dl.list-tbl > dd.right {
  text-align: right;
}

dl.list-tbl > dt {
  width: 18%;
  font-weight: 400;
}

dl.list-tbl > dt > span {
  font-size: 72%;
}

dl.list-tbl > dd {
  width: 82%;
  font-weight: 300;
}

@media (max-width: 480px) and (orientation: portrait) {
  dl.list-tbl > dt,
  dl.list-tbl > dd {
    display: block;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.4;
  }

  dl.list-tbl > dt {
    padding: 1.4rem 0 0.6rem;
  }

  dl.list-tbl > dd {
    border-top: none;
    padding: 0.4rem 0 1.4rem;
  }
}



/*========================================
  list table (dl) level2
========================================*/
dl.list-tbl-lv2 {
  width: 100%;
  font-size: 0;
  border-bottom: 1px solid #f2f2f2;
}

dl.list-tbl-lv2 > dt,
dl.list-tbl-lv2 > dd {
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #f2f2f2;
  padding: 1rem 0;
}

dl.list-tbl-lv2 > dt {
  width: 20%;
  font-weight: 400;
}

dl.list-tbl-lv2 > dd {
  width: 80%;
  font-weight: 300;
}

@media (max-width: 480px) and (orientation: portrait) {
  dl.list-tbl-lv2 > dt,
  dl.list-tbl-lv2 > dd {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  dl.list-tbl-lv2 > dt {
    width: 30%;
  }

  dl.list-tbl-lv2 > dd {
    width: 70%;
  }
}




/*========================================
  list table (ul)
========================================*/
ul.list-tbl {
  display: table;
  width: 100%;
}

ul.list-tbl.auto {
  table-layout: auto; 
}

ul.list-tbl.fixed {
  table-layout: fixed;
}

ul.list-tbl > li {
  display: table-row;
}

ul.list-tbl > li > * {
  display: table-cell;
  min-width: 12rem;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.6;
  vertical-align: top;
  border-bottom: 1px solid #eee;
  padding: 1.6rem 2rem;
}

ul.list-tbl.left > li > * {
  text-align: left;
}

ul.list-tbl.right > li > * {
  text-align: right;
}

ul.list-tbl.center > li > * {
  text-align: center;
}

ul.list-tbl > li.left > * {
  text-align: left;
}

ul.list-tbl > li.right > * {
  text-align: right;
}

ul.list-tbl > li.center > * {
  text-align: center;
}

ul.list-tbl.top > li > * {
  vertical-align: top;
}

ul.list-tbl.middle > li > * {
  vertical-align: middle;
}

ul.list-tbl.bottom > li > * {
  vertical-align: bottom;
}

ul.list-tbl > li.top > * {
  vertical-align: top;
}

ul.list-tbl > li.middle > * {
  vertical-align: middle;
}

ul.list-tbl > li.bottom > * {
  vertical-align: bottom;
}

ul.list-tbl > li.tbl-head-col > * {
  font-weight: 400;
  letter-spacing: 0.08em;
  background-color: #f8f8f8;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: none;
  white-space: nowrap;
}

ul.list-tbl > li > .tbl-head-row {
  font-weight: 400;
  text-align: left;
}
 
ul.list-tbl > li > dl > dt {
  display: none;
}

@media (max-width: 480px) and (orientation: portrait) {
  ul.list-tbl {
    display: block;
  }

  ul.list-tbl > li {
    display: block;
  }

  ul.list-tbl > li + li {
    margin-top: 2rem;
  }

  ul.list-tbl > li.tbl-head-col {
    display: none;
  }

  ul.list-tbl > li {
    border-top: 1px solid #eee;
  }

  ul.list-tbl > li > * {
    display: table;
    min-width: 0;
    min-width: initial;
    width: 100%;
    font-size: 1.4rem;
    border-color: #f8f8f8;
    padding: 1.2rem 0;
  }

  ul.list-tbl > li > *:last-of-type {
    border: none;
  }
   
  ul.list-tbl > li > dl > dt,
  ul.list-tbl > li > dl > dd {
    display: table-cell;
    vertical-align: top;
  }

  ul.list-tbl > li > dl > dt {
    width: 36%;
  }

  ul.list-tbl > li > dl > dd {
    width: 64%;
  }
}




/*========================================
  list disc
========================================*/
ul.list-disc > li {
  font-size: inherit;
  line-height: 1.4;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  padding-left: 1em;
  text-indent: -1em;
}

ul.list-disc > li::before {
  content: "・";
  display: inline-block;
  width: 1em;
  font-size: inherit;
  text-align: center;
  text-indent: 0;
  vertical-align: baseline;
}




/*========================================
  list notes
========================================*/
ul.list-notes > li {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.4;
}

ul.list-notes > li + li {
  margin-top: 0.5em;
}

ul.list-notes > li::before {
  display: inline-block;
  width: 1em;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
  text-indent: 0;
  vertical-align: 0.1em;
}

ul.list-notes.disc,
ul.list-notes.rice {
  padding-left: 1em;
  text-indent: -1em;
}

ul.list-notes.disc > li::before {
  content:"・";
}

ul.list-notes.rice > li::before {
  content:"※";
}




/*========================================
  nest dl
========================================*/
dl.nest-lv2 > dt {
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

dl.nest-lv2 > dd + dt  {
  margin-top: 3.2rem;
}

dl.nest-lv3 {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

dl.nest-lv3 > dt {
  font-weight: 400;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.6em;
}

dl.nest-lv3 > dd + dt  {
  margin-top: 2.4rem;
}

dl.nest-lv4 {
  font-size: 1.5rem;
}

dl.nest-lv4 > dd + dt  {
  margin-top: 2.4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  dl.nest-lv2 > dd + dt  {
    margin-top: 2rem;
  }

  dl.nest-lv3 {
    margin-top: 1.6rem;
    margin-bottom: 3.2rem;
  }

  dl.nest-lv3 > dt {
    margin-bottom: 1.2em;
  }

  dl.nest-lv4 {
    font-size: 1.3rem;
  }

  dl.nest-lv4 > dd + dt  {
    margin-top: 2.4rem;
  }
}



/*========================================
  list digest
========================================*/
.list-digest {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.list-digest > li {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

.list-digest > li > dl > dt {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}

.list-digest > li > dl > dd {
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.list-digest > li > dl > dd > strong {
  font-size: 10rem;
  font-weight: 100;
  line-height: 1;
}

.list-digest.szs > li > dl > dd {
   font-size: 1.6rem;
}

.list-digest.szs > li > dl > dd > strong {
  font-size: 6.4rem;
}

.list-digest .text-notes {
  font-size: 1.1rem;
  margin-top: 1rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-digest {
    display: block;
    overflow: hidden;
  }

  .list-digest > li {
    display: inline-block;
    width: 50%;
    margin-top: 3.2rem;
  }

  .list-digest > li > dl > dt {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .list-digest > li > dl > dd {
    font-size: 1.6rem;
  }

  .list-digest > li > dl > dd > strong {
    font-size: 5.6rem;
  }
}



/*========================================
  list point circle
========================================*/
.list-point-circle {
  display: block;
  width: 100%;
  text-align: center;
}

.list-point-circle > li {
  display: inline-table;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
}

.list-point-circle > li + li {
  margin-left: 2rem;
}

.list-point-circle > li > em {
  display: table-cell;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  vertical-align: middle;
}

.list-point-circle.blu > li {
  border: 1px solid rgba(37,38,90,0.4);
}

.list-point-circle.blu > li > em {
  color: #25265a;
}

.list-point-circle.wht > li {
  border: 1px solid rgba(255,255,255,0.4);
}

.list-point-circle.wht > li > em {
  color: #fff;
}

.list-point-circle.blk > li {
  border: 1px solid rgba(0,0,0,0.4);
}

.list-point-circle.blk > li > em {
  color: #000;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-point-circle > li {
    width: 12rem;
    height: 12rem;
    margin: 0.8rem !important;
  }
}



/*========================================
  list time
========================================*/
.list-time {
  text-align: center;
}

.list-time > li > figure {
  display: block;
  width: 70%;
  margin: 0 auto 1rem;
}

.list-time > li > dl > dt {
  font-size: 2.8rem;
  font-weight: 100;
  letter-spacing: 0.04em;
}

.list-time > li > dl > dd {
  margin-top: 1.6rem;
}

.list-time > li > dl > dd > em {
  display: inline-block;
  color: #25265a;
  font-size: 6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.list-time > li > dl > dd > em:last-of-type::before {
  content: "";
  display: inline-block;
  width: 4rem;
  height: 1px;
  vertical-align: middle;
  background-color: #25265a;
  margin: 0 1rem;
}

.list-time > li > dl > dd > span {
  display: inline-block;
  width: 0;
  height: 0;
  color: #25265a;
  font-size: 6rem;
  font-weight: 100;
  overflow: hidden;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-time > li + li {
    margin-top: 4rem;
  }

  .list-time > li > figure {
    width: 88%;
    margin-bottom: 1rem;
  }

  .list-time > li > dl > dt {
    font-size: 1.6rem;
  }

  .list-time > li > dl > dd {
    margin-top: 0.8rem;
  }

  .list-time > li > dl > dd > em {
    font-size: 4rem;
    font-weight: 500;
  }

  .list-time > li > dl > dd > em:last-of-type::before {
    width: 2.4rem;
  }
}




/*========================================
  list step
========================================*/
.list-step > li > dl {
  width: 100%;
  padding-left: 14rem;
  position: relative;
}

.list-step > li:not(:last-of-type) > dl::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  left: 5rem;
  top: 8rem;
}

.list-step > li > dl > dt {
  display: table;
  width: 10rem;
  height: 10rem;
  background-color: #25265a;
  position: absolute;
  left: 0;
  top: 3.2rem;
  z-index: 1;
}

.list-step > li > dl > dt > span {
  display: table-cell;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 100;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
}

.list-step > li > dl > dt > span > span {
  color: inherit;
  font-size: 2rem;
  font-weight: inherit;
}

.list-step > li > dl > dd {
  display: table;
  width: 100%;
  border-top: 1px solid #eee;
  padding: 3.2rem 0 3.2rem 4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-step > li > dl {
    padding-left: 8rem;
  }

  .list-step > li:not(:last-of-type) > dl::before {
    left: 2.5rem;
    top: 5rem;
  }

  .list-step > li > dl > dt {
    width: 5rem;
    height: 5rem;
    top: 2.5rem;
  }

  .list-step > li > dl > dt > span {
    font-size: 1.6rem;
  }

  .list-step > li > dl > dt > span > span {
    font-size: 1.4rem;
  }

  .list-step > li > dl > dd {
    padding: 2rem 0;
  }

  .list-step > li > dl > dd .block-letter .text-body {
    line-height: 1.6;
  }

  .list-step > li > dl > dd .block-letter .text-body > br {
    display: none;
  }
}





/*========================================
  list news
========================================*/
.list-news.line {
  border-bottom:  1px solid #eee;
}

.list-news > li {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.list-news.line > li {
  border-top: 1px solid #eee;
}

.list-news dl {
  display: table;
  width: 100%;
  padding-top: 0.4rem;
}

.list-news dt {
  display: table-cell;
  width: 20rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.list-news dd {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding-left: 2.4rem;
}

.list-news .tag {
  height: 3rem;
  line-height: 3rem;
  vertical-align: middle;
  margin-right: 1.6rem;
}

.list-news time {
  display: inline;
}

.list-news .text-date {
  display: inline;
  letter-spacing: 0;
  vertical-align: middle;
}

.list-news a .text-news {
  line-height: 1.4;
}

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

@media (max-width: 480px) and (orientation: portrait) {
  .list-news > li + li {
    margin-top: 0;
  }

  .list-news dl {
    display: block;
    padding-top: 0.4rem;
  }

  .list-news dt {
    display: inline;
  }

  .list-news dt .tag {
    margin-right: 0.8rem;
  }

  .list-news dd {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    padding-left: 0;
    margin-top: 1rem;
  }

  .list-news a:hover dd {
    text-decoration: none;
  }
}





/*========================================
  list banner
========================================*/
.list-bnr {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;
  padding-bottom: 1px;
}

.list-bnr > li {
  padding: 0 2rem;
  margin-bottom: 2.4rem;
}

.list-bnr .text-summary {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-top: 1.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-bnr {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .list-bnr > li {
    padding: 0;
    margin-bottom: 0;
  }

  .list-bnr > li + li {
    margin-top: 2rem;
  }

  .list-bnr .text-summary {
    font-size: 1rem;
    margin-top: 0.6rem;
  }
}



/*========================================
  list tag
========================================*/
.list-tag {
  display: block;
  font-size: 0;
  text-align: left;
  margin: -0.2rem;
}

.list-tag > li {
  display: inline-block;
  vertical-align: top;
  padding: 0.2rem;
}




/*========================================
  list island
========================================*/
.list-island {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;
  margin-top: -2rem;
}

.list-island > li {
  padding: 2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-island {
    width: calc(100% + 2.4rem);
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    margin-top: -1.2rem;
  }

  .list-island > li {
    padding: 1.2rem;
  }
}




/*========================================
  list slide
========================================*/
.list-slide {
  width: 100%;
  position: relative;
}

.list-slide > li {
  width: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 0;
}

.list-slide > li:first-of-type {
  position: relative;
}

.list-slide > li.active {
  left: 0;
  z-index: 1;
}

.list-slide > li.active.in {
  z-index: 2;
}




/*============================================================


  module / box


============================================================*/
/*========================================
  box link
========================================*/
.box-link {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
}

.box-link > a {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.box-link > a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity 0.4s;
     -moz-transition: opacity 0.4s;
      -ms-transition: opacity 0.4s;
       -o-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

.box-link > a:hover::before {
  opacity: 0.1;
}

.box-link > a::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(255,255,255,0.5);
  background: url(/assets/images/common/ico_arrow_next_wht.svg) center center no-repeat;
  background-size: 1.6rem auto;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

.column-col3 .box-link > li > a::after {
  width: 3rem;
  height: 3rem;
  background-size: 1.2rem auto;
}

.box-link * {
  color: #fff;
}

.box-link > a > dl {
  display: table;
  width: 100%;
  height: 100%;
}

.box-link > a > dl > dt {
  position: absolute;
  left: 0;
  top: 0;
}

.box-link > a > dl > dd {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.box-link .block-letter {
  display: inline-block;
}

.box-link .title-box {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.box-link .date {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-bottom: 2.4rem;
}

.box-link .text-summary {
  line-height: 1.8;
  margin-top: 1.6rem;
}

.column-col3 .box-link .text-summary {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}



@media (max-width: 480px) and (orientation: portrait) {
  .box-link > li {
    height: 24rem;
  }

  .box-link.column-col3 > li {
    height: 20rem;
  }

  .box-link > a::before {
    display: none;
  }

  .box-link > a::after {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 1.2rem auto;
    right: 1rem;
    bottom: 1rem;
  }

  .box-link.column-col3 > a::after {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 1.2rem auto;
  }

  .box-link .title-box {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .box-link .date {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .box-link .text-summary {
    line-height: 1.6;
    margin-top: 1.6rem;
  }

  .box-link .text-summary > br {
    display: block;
  }
}



/*========================================
  box table
========================================*/
.box-tbl {
  width: 100%;
  border-bottom: 1px solid #eee;
}

.box-tbl > li {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-top: 1px solid #eee;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.box-tbl > li > .block-content {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  position: relative;
}

.box-tbl > li > .block-content:first-of-type {
  padding-right: 4rem;
}

.box-tbl > li > .block-content:last-of-type {
  padding-left: 4rem;
}

.box-tbl > li .text-catch {
  margin-bottom: 2.4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .box-tbl > li {
    display: block;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .box-tbl > li > .block-content {
    display: block;
  }

  .box-tbl > li > .block-content:first-of-type {
    padding-right: 0;
  }

  .box-tbl > li > .block-content:last-of-type {
    padding-left: 0;
    margin-top: 2rem;
  }

  .box-tbl > li .text-catch {
    margin-bottom: 2.4rem;
  }
}


/*========================================
  box info
========================================*/
.box-info {
  text-align: center;
  padding-top: 16rem;
  padding-bottom: 16rem;
  position: relative;
}

.box-info.cap {
  padding-top: 18rem !important;
}

.box-info.cap::before {
  width: calc(100% - 20rem);
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.box-info * {
  color: #fff !important;
}

.box-info .block-letter {
  overflow: hidden;
}

.box-info .text-catch {
  padding-bottom: 4.8rem;
}

.box-info .text-body.center {
  width: 100%;
}

.box-info .text-body.left {
  display: inline-block;
  float: left;
}

.box-info .btn,
.box-info .text-contact {
  margin-top: 3.2rem;
}

.box-info .text-contact + .text-contact {
  margin-left: 6.4rem;
}

.box-info .text-body.left + .btn,
.box-info .text-body.left + .text-contact {
  margin-top: 0;
  float: right;
}

.box-info .text-body.left + .btn + .btn {
  margin-top: 1.6rem;
}

.box-info .text-body.center + .btn + .btn {
  margin-left: 1.6rem;
}

.box-info .text-notes {
  display: block;
  margin-top: 1.6rem;
  letter-spacing: 0.08em;
}


@media (max-width: 480px) and (orientation: portrait) {
  .box-info {
    padding-top: 6.4rem;
    padding-bottom: 6.4rem;
  }

  .box-info.cap {
    padding-top: 7.2rem !important;
  }

  .box-info.cap::before {
    width: calc(100% - 3.2rem);
  }

  .box-info .block-letter {
    overflow: visible;
  }

  .box-info .text-catch {
    padding-bottom: 2.4rem;
  }

  .box-info .text-body > br {
    display: none;
  }

  .box-info .text-body.center {
    width: 100%;
    text-align: left;
  }

  .box-info .text-body.left {
    width: 100%;
    float: none;
  }

  .box-info .btn,
  .box-info .text-contact {
    margin-top: 1.6rem !important;
  }

  .box-info .text-contact + .text-contact {
    margin-left: 0;
  }

  .box-info .text-body.left + .btn,
  .box-info .text-body.left + .text-contact {
    float: none;
  }

  .box-info .text-body.center + .btn + .btn {
    margin-left: 0;
  }

  .box-info .text-notes {
    font-size: 1rem;
    margin-top: 0.8rem;
  }
}


/*========================================
  box contact
========================================*/
.contact-box {
  width: 100%;
  text-align: center;
  background-color: #f8f8f8;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.contact-box .title-box {
  margin-bottom: 3.2rem;
}

.contact-box .information > dt {
  display: inline-block;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  background-color: #25265a;
  border-radius: 10rem;
  padding: 0.6rem 2rem;
}

.contact-box .information > dd {
  width: 100%;
  margin-top: 2.4rem;
}

.contact-box .information .text-contact + .text-contact {
  margin-left: 6.4rem;
}

.contact-box .information .btn-contact {
  margin-top: 1.6rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .contact-box {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .contact-box .title-box {
    line-height: 1.3;
    margin-bottom: 1.6rem;
  }

  .contact-box .information .text-contact + .text-contact {
    margin-left: 0;
    margin-top: 1rem;
  }
}




/*========================================
  box digest
========================================*/
.box-digest {
  width: 100%;
  position: relative;
}

/*  list digest
=====================*/
.box-digest .list-digest {
  height: 40rem;
}

.box-digest .list-digest.column-col3  {
  height: 32rem;
}

.box-digest .list-digest > li {
  vertical-align: middle;
  padding-bottom: 4rem;
  position: relative;
}

.box-digest .list-digest > li > dl * {
  color: #fff;
}

.box-digest .list-digest > li > dl > dt {
  font-size: 2.8rem;
  font-weight: 100;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.box-digest .list-digest > li > dl > dd {
  position: relative;
}

.box-digest .list-digest > li > dl > dd::before,
.box-digest .list-digest > li > dl > dd::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2rem;
}

.box-digest .list-digest > li > dl > dd::before {
  width: 3.2rem;
  left: -20.8rem;
}

.box-digest .list-digest > li > dl > dd::after {
  width: 20.4rem;
  left: 3.2rem;
  opacity: 0.8;
}

@media (max-width: 480px) and (orientation: portrait) {
  .box-digest .list-digest {
    display: block;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .box-digest .list-digest.column-col3  {
    height: auto;
  }

  .box-digest .list-digest > li {
    display: block;
    width: 100%;
    padding-bottom: 0;
    margin-top: 0;
  }

  .box-digest .list-digest > li + li {
    margin-top: 4rem;
  }

  .box-digest .list-digest > li > dl > dd {
    padding-bottom: 0.8rem;
  }

  .box-digest .list-digest > li > dl > dd::before,
  .box-digest .list-digest > li > dl > dd::after {
    bottom: 0;
  }

  .box-digest .list-digest > li > dl > dt {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
  }

  .box-digest .list-digest > li > dl > dd {
    font-size: 1.2rem;
  }

  .box-digest .list-digest > li > dl > dd > strong {
    font-size: 4rem;
  }

  .box-digest .list-digest .text-caption {
    width: 100%;
    color: #fff;
    background-color: transparent;
    margin-top: 0.8rem;
    position: static;
  }
}


/*  list point
=====================*/
.box-digest .list-point > li {
  display: inline-table;
  height: 40rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  position: relative;
}

.box-digest .list-point.column-col3 > li {
  height: 32rem;
}

.box-digest .list-point .block-letter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.box-digest .list-point .text-catch > strong {
  color: inherit;
  font-size: 6.4rem;
  font-weight: 100;
}

.box-digest .list-point .text-catch > span {
  color: inherit;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.box-digest .list-point .text-summary {
  margin-top: 3.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .box-digest .list-point > li {
    display: table;
    width: 100%;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .box-digest .list-point.column-col3 > li {
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .box-digest .list-point .text-summary {
    margin-top: 1.6rem;
  }
}




/*========================================
  box feature
========================================*/
.box-feature {
  width: 100%;
  padding-top: 12rem;
  padding-bottom: 12rem;
  position: relative;
}

.box-feature + .box-feature {
  border-top: 1px solid #fff;
}

.box-feature * {
  color: #fff;
}

.box-feature .block-feature > dt {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.box-feature .block-feature > dd {
  text-align: center;
}

.box-feature .text-summary {
  display: inline-block;
}

.box-feature .btn {
  float: right;
}

@media (max-width: 480px) and (orientation: portrait) {
  .box-feature {
    padding-top: 4.8rem;
    padding-bottom: 4.8rem;
    position: relative;
  }

  .box-feature .block-feature > dt {
    font-size: 1.5rem;
  }

  .box-feature .btn {
    display: block;
    margin: 1.6rem auto 0;
    float: none;
  }
}




/*========================================
  box contact
========================================*/
.box-contact {
  display: table;
  width: 100%;
  background-color: #f8f8f8;
  padding: 1.6rem 2.4rem;
  margin: 4.8rem auto;
}

.box-contact dt {
  display: table-cell;
  color: #25265a;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: left;
  vertical-align: middle;
}

.box-contact dt > span {
  display: block;
  color: inherit;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06rem;
  margin-top: 0.4rem;
}

.box-contact dd {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}

@media (max-width: 480px) and (orientation: portrait) {
  .box-contact {
    padding: 1.6rem;
    margin: 2.4rem auto;
  }

  .box-contact dt {
    display: block;
    font-size: 1.2rem;
    text-align: center;
  }

  .box-contact dt > span {
    font-size: 1rem;
  }

  .box-contact dd {
    display: block;
    text-align: center;
    margin-top: 0.8rem;
  }
}



/*========================================
  box office
========================================*/
.box-office .block-letter {
  margin-top: 4.8rem;
}

.box-office .text-name {
  display: inline-block;
}

.box-office .text-name > strong {
  font-size: 4rem;
  font-weight: 100;
  letter-spacing: 0.02em;
}

#office-head .box-office .text-name > strong {
  margin-left: -0.1em;
}

.box-office .text-name > span {
  display: block;
  font-size: 1.5rem;
  font-weight: 100;
  letter-spacing: 0.02em;
  margin-top: 1rem;
}

.box-office .text-address {
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-top: 1.6rem;
}

.box-office .text-number {
  float: right;
  margin-top: -5.6rem;
  margin-bottom: 4.8rem;
}

.box-office .text-number + * {
  clear: both;
}

.box-office .box-traffic {
  display: table;
  width: 100%;
  background-color: #f7f7f7;
  padding: 1.6rem 0;
}

.box-office .box-traffic + .box-traffic {
  margin-top: 1rem;
}

.box-office .box-traffic > dt,
.box-office .box-traffic > dd {
  display: table-cell;
  line-height: 1.6;
  vertical-align: top;
}

.box-office .box-traffic > dt {
  width: 25%;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding-left: 3.2rem;
}

.box-office .box-traffic > dd {
  width: 75%;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding-right: 3.2rem;
}

.box-office .block-map {
  width: 100%;
  margin-top: 6.4rem;
  position: relative;
}

.box-office .block-map .googlemap {
  width: 100%;
  background-color: #f7f7f7;
  padding-top: 60%;
  position: relative;
}

.box-office .block-map .googlemap > div,
.box-office .block-map .googlemap > iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.box-office .block-map .googlemap + .btn {
  margin-top: 2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .box-office .block-letter {
    margin-top: 2.4rem;
  }

  .box-office .text-name > strong {
    font-size: 2.4rem;
  }

  .box-office .text-name > span {
    font-size: 1rem;
    margin-top: 1rem;
  }

  .box-office .text-address {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-top: 1.6rem;
  }

  .box-office .text-number {
    float: none;
    margin-top: 1.6rem;
    margin-bottom: 2.4rem;
  }

  .box-office .box-traffic {
    padding: 1.2rem 1.8rem;
  }

  .box-office .box-traffic + .box-traffic {
    margin-top: 0.8rem;
  }

  .box-office .box-traffic > dt,
  .box-office .box-traffic > dd {
    display: block;
     width: 100%;
    line-height: 1.4;
  }

  .box-office .box-traffic > dt {
    font-size: 1.3rem;
    padding-left: 0;
  }

  .box-office .box-traffic > dd {
    font-size: 1.2rem;
    padding-right: 0;
    margin-top: 0.4rem;
  }

  .box-office .box-traffic > dd > em {
    font-weight: 400;
  }

  .box-office .block-map {
    margin-top: 0.8rem;
  }

  .box-office .block-map .googlemap + .btn {
    margin-top: 1.6rem;
  }

  .box-office .block-map .googlemap + .btn.szm,
  .box-office .block-map .googlemap + .btn.szl {
    display: block;
    margin: 1.6rem auto 0;
  }
}




/*========================================
  box island
========================================*/
.box-island {
  display: block;
  width: 100%;
  background-color: #fff;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.06);
  position: relative;
}

.box-island.capline {
  border-top: 4px solid #25265a;
}




/*============================================================


  module / nav


============================================================*/
/*========================================
  nav indicator
========================================*/
.nav-indicator {
  display: inline-block;
  height: 4rem;
  padding: 0 2rem;
}

.nav-indicator:not(.blk) {
  -webkit-transition: background 0.4s;
     -moz-transition: background 0.4s;
      -ms-transition: background 0.4s;
       -o-transition: background 0.4s;
          transition: background 0.4s;
}

.nav-indicator:hover:not(.blk) {
  background-color: rgba(37,38,90,0.9);
}

.nav-indicator .list-nav-indicator,
.nav-indicator .list-nav-indicator > li {
  display: inline;
}

.nav-indicator .list-nav-indicator > li + li {
  margin-left: 0.4rem;
}

.nav-indicator .list-nav-indicator > li > a {
  display: inline-block;
  width: 6rem;
  height: 100%;
  position: relative;
  text-align: center;
  vertical-align: middle;
}

.nav-indicator .list-nav-indicator > li.active > a {
  cursor: default;
}

.nav-indicator .list-nav-indicator > li > a::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  opacity: 0.5;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: opacity 0.4s;
     -moz-transition: opacity 0.4s;
      -ms-transition: opacity 0.4s;
       -o-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

.nav-indicator.blk .list-nav-indicator li > a::after {
  background-color: #000;
}

.nav-indicator .list-nav-indicator > li:not(.active) > a:hover::after {
  opacity: 1;
}

.nav-indicator .list-nav-indicator > li.active > a::after {
  height: 2px;
  opacity: 1;
}

.nav-indicator .list-nav-indicator > li > a > span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-indicator {
    height: 2.8rem;
    padding: 0 1.6rem;
  }

  .nav-indicator:hover {
    background-color: transparent !important;
  }

  .nav-indicator .list-nav-indicator > li > a {
    width: 4rem;
  }

  .nav-indicator .list-nav-indicator > li:not(.active) > a:hover::after {
    opacity: 0.5;
  }
}



/*========================================
  nav topicpath
========================================*/
.nav-topicpath {
  width: 100%;
  text-align: left;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.nav-topicpath .list-nav-topicpath > li {
  display: inline;
  color: #999;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.nav-topicpath .list-nav-topicpath > li + li::before {
  content: ">";
  vertical-align: baseline;
  margin: 0 0.8rem;
}

.nav-topicpath .list-nav-topicpath > li a {
  color: #000;
}

#top-category .nav-topicpath .list-nav-topicpath > li a {
  color: #fff;
}

.nav-topicpath .list-nav-topicpath > li a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-topicpath {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }

  .nav-topicpath .list-nav-topicpath > li {
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
}



/*========================================
  nav anchor
========================================*/
.nav-anchor {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.nav-anchor .list-nav-anchor {
  display: inline-block;
  width: auto;
  background-color: rgba(244,244,244,0.8);
  font-size: 0;
}

.nav-anchor .list-nav-anchor > li {
  display: inline;
}

.nav-anchor .list-nav-anchor > li > a {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 1.2rem 4.8rem 1.4rem 6rem;
  -webkit-transition: background 0.1s;
     -moz-transition: background 0.1s;
      -ms-transition: background 0.1s;
       -o-transition: background 0.1s;
          transition: background 0.1s;
}

.nav-anchor .list-nav-anchor > li > a:hover {
  background-color: rgba(238,238,238,0.4);
}

.nav-anchor .list-nav-anchor > li > a::after {
  content: "";
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  vertical-align: -0.08em;
  background: url(/assets/images/common/ico_arrow_down_blk.svg) center center no-repeat;
  background-size: contain;
  margin-left: 2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-anchor .list-nav-anchor > li > a {
    font-size: 1rem;
    padding: 1rem 1rem 1rem 1.2rem;
  }

  .nav-anchor .list-nav-anchor > li > a:hover {
    background-color: rgba(244,244,244,0.8);
  }

  .nav-anchor .list-nav-anchor > li > a::after {
    width: 1rem;
    height: 1rem;
    margin-left: 0.6rem;
  }
}


/*  fixed
=====================*/
#header-global.fixed + #main .nav-anchor {
  padding-top: 5rem;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
}

#header-global.fixed + #main .nav-anchor .list-nav-anchor {
  display: block;
  width: 100%;
  background-color: rgba(244,244,244,0.9);
}

#header-global.fixed + #main .nav-anchor .list-nav-anchor > li > a {
  font-size: 1.2rem;
  padding: 1rem 4rem 1.2rem 4.8rem;
}

#header-global.fixed + #main .nav-anchor .list-nav-anchor > li > a:after {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1.2rem;
}

@-webkit-keyframes nav-anchor_in {
  0% { -webkit-transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0); }
}

@-moz-keyframes nav-anchor_in {
  0% { -moz-transform: translateY(-100%); }
  100% { -moz-transform: translateY(0); }
}

@-ms-keyframes nav-anchor_in {
  0% { -ms-transform: translateY(-100%); }
  100% { -ms-transform: translateY(0); }
}

@-o-keyframes nav-anchor_in {
  0% { -o-transform: translateY(-100%); }
  100% { -o-transform: translateY(0); }
}

@keyframes nav-anchor_in {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

#header-global.fixed.in + #main .nav-anchor {
  -webkit-animation: nav-anchor_in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: nav-anchor_in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: nav-anchor_in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: nav-anchor_in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: nav-anchor_in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes nav-anchor_out {
  0% { -webkit-transform: translateY(0); }
  100% {-webkit-transform: translateY(-100%); }
}

@-moz-keyframes nav-anchor_out {
  0% { -moz-transform: translateY(0); }
  100% {-moz-transform: translateY(-100%); }
}

@-ms-keyframes nav-anchor_out {
  0% { -ms-transform: translateY(0); }
  100% {-ms-transform: translateY(-100%); }
}

@-o-keyframes nav-anchor_out {
  0% { -o-transform: translateY(0); }
  100% {-o-transform: translateY(-100%); }
}

@keyframes nav-anchor_out {
  0% { transform: translateY(0); }
  100% {transform: translateY(-100%); }
}

#header-global.fixed.out + #main .nav-anchor {
  -webkit-animation: nav-anchor_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: nav-anchor_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: nav-anchor_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: nav-anchor_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: nav-anchor_out 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (max-width: 480px) and (orientation: portrait) {
  #header-global.fixed + #main .nav-anchor {
    padding-top: 5.6rem;
  }

  #header-global.fixed + #main .nav-anchor .list-nav-anchor {
    background-color: rgba(244,244,244,0.8);
  }

  #header-global.fixed + #main .nav-anchor .list-nav-anchor > li > a {
    font-size: 1rem;
    padding: 1rem 1rem 1rem 1.2rem;
  }

  #header-global.fixed + #main .nav-anchor .list-nav-anchor > li > a:hover {
    background-color: rgba(244,244,244,0.9);
  }

  #header-global.fixed + #main .nav-anchor .list-nav-anchor > li > a::after {
    width: 1rem;
    height: 1rem;
    margin-left: 0.6rem;
  }
}





/*========================================
  nav contents
========================================*/
.nav-contents {
  width: 100%;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  text-align: center;
}

.nav-contents.line {
  border-bottom: 1px solid #eee;
}

#footer-local .nav-contents {
  border-bottom: 1px solid #eee;
}

.nav-contents .list-nav-contents {
  display: inline-block;
}

.nav-contents .list-nav-contents > li {
  display: inline-block;
  padding: 0 2rem;
  float: left;
}

.nav-contents .list-nav-contents > li a {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.nav-contents .list-nav-contents > li a:hover {
  text-decoration: underline;
}

#company-keywords-1 .nav-contents .list-nav-contents > li.keyword1 a,
#company-keywords-2 .nav-contents .list-nav-contents > li.keyword2 a,
#company-keywords-3 .nav-contents .list-nav-contents > li.keyword3 a,
#company-keywords-4 .nav-contents .list-nav-contents > li.keyword4 a,
#company-keywords-5 .nav-contents .list-nav-contents > li.keyword5 a,
#company-keywords-6 .nav-contents .list-nav-contents > li.keyword6 a,
#business-expertsupport-renewal .nav-contents .list-nav-contents > li.renewal a,
#business-expertsupport-bousai .nav-contents .list-nav-contents > li.bousai a,
#business-kanzainet .nav-contents .list-nav-contents > li.top a,
#business-kanzainet-guide .nav-contents .list-nav-contents > li.guide a,
#information-data-build .nav-contents .list-nav-contents > li.build a,
#information-data-sales .nav-contents .list-nav-contents > li.sales a {
  color: #ccc;
  text-decoration: none !important;
  cursor: default;
}




/*========================================
  nav contents box
========================================*/
.nav-contents-box {
  width: 100%;
}

.nav-contents-box .list-nav-contents {
  display: block;
  width: 100%;
  overflow: hidden;
}

.nav-contents-box .list-nav-contents > li {
  display: block;
  width: 50%;
  position: relative;
}

.nav-contents-box .list-nav-contents > li:nth-of-type(n+3) {
  border-top: 1px solid #666;
}

.nav-contents-box .list-nav-contents > li:nth-of-type(odd) {
  float: left;
}

.nav-contents-box .list-nav-contents > li:nth-of-type(even) {
  float: right;
}

.nav-contents-box .list-nav-contents > li a {
  display: table;
  width: 100%;
  height: 16rem;
  background-color: #333;
  padding-left: 50%;
}

.nav-contents-box .list-nav-contents > li a:hover {
  text-decoration: none;
}

.nav-contents-box .list-nav-contents > li a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: opacity 0.2s;
     -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
       -o-transition: opacity 0.2s;
          transition: opacity 0.2s;
}

.nav-contents-box .list-nav-contents > li a:hover::before {
  opacity: 0.5;
}

.nav-contents-box .list-nav-contents > li .block-letter {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.nav-contents-box .list-nav-contents > li .title-content > span {
  color: #fff;
  font-size: 1rem;
  font-weight: 100;
  letter-spacing: 0.12em;
}

.nav-contents-box .list-nav-contents > li .title-content > strong {
  display: block;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: 0.04em;
  margin-top: 1rem;
}

.nav-contents-box .list-nav-contents > li .text-catch {
  color: #999;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-top: 2rem;
}

.nav-contents-box .list-nav-contents > li .block-image {
  width: 50%;
  z-index: 0;
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-contents-box .list-nav-contents > li {
    width: 100%;
  }

  .nav-contents-box .list-nav-contents > li:nth-of-type(n+2) {
    border-top: 1px solid #666;
  }

  .nav-contents-box .list-nav-contents > li:nth-of-type(odd) {
    float: none;
  }

  .nav-contents-box .list-nav-contents > li:nth-of-type(even) {
    float: none;
  }

  .nav-contents-box .list-nav-contents > li a {
    height: 7.2rem;
    padding-left: 20%;
  }

  .nav-contents-box .list-nav-contents > li a::before {
    display: none;
  }

  .nav-contents-box .list-nav-contents > li .title-content > span {
    font-size: 0.8rem;
  }

  .nav-contents-box .list-nav-contents > li .title-content > strong {
    font-size: 1.6rem;
    margin-top: 0.4rem;
  }

  .nav-contents-box .list-nav-contents > li .text-catch {
    font-size: 1rem;
    margin-top: 0.4rem;
  }

  .nav-contents-box .list-nav-contents > li .text-catch > br {
    display: none;
  }

  .nav-contents-box .list-nav-contents > li .block-image {
    width: 20%;
  }
}




/*========================================
  nav page
========================================*/
.nav-page {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 16rem;
  padding: 0 20rem;
  margin: 0 auto;
}

.nav-page > a {
  display: table-cell;
  color: #25265a;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: background 0.2s;
     -moz-transition: background 0.2s;
      -ms-transition: background 0.2s;
       -o-transition: background 0.2s;
          transition: background 0.2s;
}

.nav-page > a:not(.disabled):hover {
  background-color: #fafafa;
}

.nav-page > a::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto 2rem;
}

.nav-page > a.index::before {
  background-image: url(/assets/images/common/ico_index_blu.svg);
}

.nav-page > a.prev::before {
  background-image: url(/assets/images/common/ico_arrow_prev_blu.svg);
}

.nav-page > a.next::before {
  background-image: url(/assets/images/common/ico_arrow_next_blu.svg);
}

.nav-page > a.disabled {
  color: #ccc;
  cursor: default;
}

.nav-page > a.disabled {
  color: #000;
  opacity: 0.2;
}

.nav-page > a.disabled.prev::before {
  background-image: url(/assets/images/common/ico_arrow_prev_blk.svg);
}

.nav-page > a.disabled.next::before {
  background-image: url(/assets/images/common/ico_arrow_next_blk.svg);
}


@media (max-width: 480px) and (orientation: portrait) {
  .nav-page {
    height: auto;
    padding: 0;
    position: relative;
  }

  .nav-page > a {
    font-size: 1rem;
    vertical-align: top;
    padding: 2.4rem 0;
  }

  .nav-page > a::before {
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 1.6rem;
  }
}



/*========================================
  nav sort
========================================*/
.nav-sort {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 4.8rem;
  padding-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.nav-sort.gry {
   background-color: #fafafa;
}

.list-nav-sort {
  width: 100%;
  font-size: 0;
}

.list-nav-sort > li {
  display: inline-table;
  height: 4rem;
  vertical-align: top;
  position: relative;
}

.list-nav-sort:not(.column-col4) > li {
  width: 30rem;
}

.list-nav-sort > li > a {
  display: table-cell;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  padding: 0 2rem;
  position: relative;
  -webkit-transition: background 0.1s;
     -moz-transition: background 0.1s;
      -ms-transition: background 0.1s;
       -o-transition: background 0.1s;
          transition: background 0.1s;
}

.list-nav-sort > li > a.current {
  color: #fff;
  background-color: #25265a;
  cursor: default;
}

.list-nav-sort > li > a.current:after {
  display: none;
  padding: 0 2rem;
}

.list-nav-sort > li > a.btn-all {
  padding-right: 4rem;
  background-color: #f8f8f8;
}

.list-nav-sort > li > a.btn-all.current {
  padding-right: 2rem;
  background-color: #25265a;
}

.list-nav-sort > li > a.btn-all:after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(/assets/images/common/ico_arrow_next_blk.svg) center center no-repeat;
  background-size: contain;
  margin: auto 0;
  position: absolute;
  right: 1.2rem;
  top: 0;
  bottom: 0;
}

.list-nav-sort > li > a.btn-all.current:after {
  display: none;
}

.list-nav-sort > li > a:hover:not(.current) {
  background-color: rgba(238,238,238,0.6);
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-sort {
    padding-top: 3.2rem;
    padding-bottom: 2.4rem;
  }

  .list-nav-sort > li {
    height: 3.2rem;
  }

  .list-nav-sort:not(.column-col4) > li {
    width: 100%;
  }

  .list-nav-sort:not(.column-col4) > li + li {
    margin-top: 0.4rem;
  }
}




/*  column 4
=====================*/
.nav-sort .list-nav-sort.column-col4 > li {
  height: 3.2rem;
}

.nav-sort .list-nav-sort.column-col4 > li > a {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
}




/*========================================
  nav pulldown
========================================*/
.nav-pulldown {
  position: relative;
}

.nav-pulldown.active {
  z-index: 1;
}

.nav-pulldown .btn-pulldown {
  display: table-cell;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  background-color: #f8f8f8;
  padding: 0 4rem 0 2rem;
  position: relative;
  -webkit-transition: background 0.1s;
     -moz-transition: background 0.1s;
      -ms-transition: background 0.1s;
       -o-transition: background 0.1s;
          transition: background 0.1s;
}

.nav-pulldown .btn-pulldown:after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(/assets/images/common/ico_arrow_down_blk.svg) center center no-repeat;
  background-size: contain;
  margin: auto 0;
  position: absolute;
  right: 1.2rem;
  top: 0;
  bottom: 0;
}

html.ie .nav-pulldown .btn-pulldown {
  position: static;
}

.nav-pulldown.active .btn-pulldown,
.nav-pulldown.active .btn-pulldown:hover {
  color: #fff;
  background-color: rgba(37,38,90,0.9);
}

.nav-pulldown.active .btn-pulldown::after {
  background-image: url(/assets/images/common/ico_arrow_up_wht.svg);
}

.nav-pulldown .list-nav-pulldown {
  display: block;
  width: 100%;
  height: 0;
  background-color: rgba(37,38,90,0.9);
  overflow: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 4rem;
  -webkit-transform: translateY(-0.5rem);
     -moz-transform: translateY(-0.5rem);
      -ms-transform: translateY(-0.5rem);
       -o-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
     -moz-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
      -ms-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
       -o-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.nav-pulldown.active .list-nav-pulldown {
  height: auto;
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

.nav-pulldown .list-nav-pulldown > li {
  display: table;
  width: 100%;
  height: 4rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.nav-pulldown .list-nav-pulldown > li > a {
  display: table-cell;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
  padding: 0 2rem;
  -webkit-transition: background 0.1s;
     -moz-transition: background 0.1s;
      -ms-transition: background 0.1s;
       -o-transition: background 0.1s;
          transition: background 0.1s;
}

.nav-pulldown .list-nav-pulldown > li > a:hover {
  background-color: rgba(255,255,255,0.1);
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-pulldown .list-nav-pulldown {
    top: 3.2rem;
  }

  .nav-pulldown .list-nav-pulldown > li > a {
    font-size: 1.3rem;
  }

  .nav-pulldown .list-nav-pulldown > li > a:hover {
    background-color: rgba(252,252,252,0.98);
  }
}




/*========================================
  nav pagenation
========================================*/
.nav-pagenation {
  width: 100%;
  font-size: 0;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
}

.nav-pagenation > * {
  vertical-align: top;
}

.nav-pagenation .list-nav-pagenation {
  display: inline;
  margin: 0 1rem;
}

.nav-pagenation .list-nav-pagenation > li {
  display: inline-block;
  margin: 0 0.4rem;
}

.nav-pagenation .list-nav-pagenation a.btn {
  width: 4rem;
  border-color: transparent;
}

.nav-pagenation .list-nav-pagenation a.btn:hover:not(.current) {
  color: #25265a; 
  border: 1px solid rgba(37,38,90,0.1);
  background-color: transparent;
}

.nav-pagenation .list-nav-pagenation a.btn.current {
  color: #fff;
  background-color: #25265a;
  border-color: #25265a;
  cursor: default;
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-pagenation {
    padding: 2rem 0;
  }

  .nav-pagenation .list-nav-pagenation {
    margin: 0 0.6rem;
  }

  .nav-pagenation .list-nav-pagenation > li {
    margin: 0 0.4rem;
  }

  .nav-pagenation .list-nav-pagenation a.btn {
    width: 3.2rem;
  }

  .nav-pagenation .list-nav-pagenation a.btn:hover:not(.current) {
    color: #25265a; 
    border: 1px solid rgba(37,38,90,0.1);
    background-color: transparent;
  }

  .nav-pagenation .list-nav-pagenation a.btn.current {
    color: #fff;
    background-color: #25265a;
    border-color: #25265a;
    cursor: default;
  }
}




/*============================================================


  module / index


============================================================*/

@-webkit-keyframes index-slide_in_content {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-moz-keyframes index-slide_in_content {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-ms-keyframes index-slide_in_content {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-o-keyframes index-slide_in_content {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes index-slide_in_content {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.index-slide .list-slide > li.active.in .block-content {
  -webkit-animation: index-slide_in_content 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: index-slide_in_content 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: index-slide_in_content 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: index-slide_in_content 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: index-slide_in_content 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes index-slide_in_image {
  0% { -webkit-transform: translateX(0.8rem);}
  100% { -webkit-transform: translateX(0);}
}

@-moz-keyframes index-slide_in_image {
  0% { -moz-transform: translateX(0.8rem);}
  100% { -moz-transform: translateX(0);}
}

@-ms-keyframes index-slide_in_image {
  0% { -ms-transform: translateX(0.8rem);}
  100% { -ms-transform: translateX(0);}
}

@-o-keyframes index-slide_in_image {
  0% { -o-transform: translateX(0.8rem);}
  100% { -o-transform: translateX(0);}
}

@keyframes index-slide_in_image {
  0% { transform: translateX(0.8rem);}
  100% { transform: translateX(0);}
}

.index-slide .list-slide > li.active.in .block-image {
  -webkit-animation: index-slide_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: index-slide_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: index-slide_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: index-slide_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: index-slide_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}




/*========================================
  index contents cap
========================================*/
.index-contents-cap {
  width: 100%;
  text-align: center;
  position: relative;
}

.index-contents-cap .block-catch {
  width: 100%;
  height: 42rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.index-contents-cap .block-catch .block-letter {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

.index-contents-cap .block-catch .text-catch {
  margin-bottom: 2.4rem;
}

.index-contents-cap .block-content {
  text-align: center;
  padding-top: 42rem;
  padding-bottom: 8rem;
}

.index-contents-cap .block-content .cap {
  display: block;
  width: 60%;
  height: 4rem;
  text-align: left;
  background-color: #fff;
  margin: -4rem auto 0;
  position: relative;
  z-index: 1;
}

.index-contents-cap .block-content .cap::before {
  display: none;
}

.index-contents-cap .block-content .block-letter {
  background-color: #fff;
}


.index-contents-cap .block-content .block-headline {
  width: 100%;
  background-color: #fff;
  padding-bottom: 2.6rem;
  margin-bottom: 3rem;
  position: relative;
}

.index-contents-cap .block-content .block-headline::before,
.index-contents-cap .block-content .block-headline::after {
  content: "";
  display: block;
  height: 1px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.index-contents-cap .block-content .block-headline::before {
  width: 4rem;
  background-color: #30884d;
  left: -24rem;
}

.index-contents-cap .block-content .block-headline::after {
  width: 24rem;
  background-color: #25265a;
  left: 4.4rem;
}

.index-contents-cap .block-content .title-index {
  line-height: 1;
}

.index-contents-cap .block-content .text-catch {
  margin-top: 1.6rem;
}

.index-contents-cap .block-content .text-summary {
  font-size: 1.5rem;
}

.index-contents-cap .block-content .btn {
  margin-top: 2.4rem;
}

.index-contents-cap .block-content .block-image {
  height: 42rem;
}

.index-contents-cap .nav-slide {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 34rem;
  z-index: 2;
}

@media (max-width: 480px) and (orientation: portrait) {
  .index-contents-cap .block-catch {
    height: 16rem;
  }

  .index-contents-cap .block-catch .block-letter {
    padding-bottom: 1.4rem;
  }

  .index-contents-cap .block-catch .text-catch {
    margin-bottom: 0.4rem;
  }

  .index-contents-cap .block-content {
    padding-top: 16rem;
    padding-bottom: 4rem;
  }

  .index-contents-cap .block-content .cap {
    width: 80%;
    height: 2.8rem;
    margin-top: -2.8rem;
  }

  .index-contents-cap .block-content .block-headline {
    padding-top: 1rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    position: relative;
  }

  .index-contents-cap .block-content .block-headline::before {
    width: 3.2rem;
    left: -20.8rem;
  }

  .index-contents-cap .block-content .block-headline::after {
    width: 20.4rem;
    left: 3.2rem;
  }

  .index-contents-cap .block-content .title-index {
    margin-bottom: 1rem;
  }

  .index-contents-cap .block-content .text-summary {
    text-align: left;
  }

  .index-contents-cap .block-content .btn {
    margin-top: 1.6rem;
  }

  .index-contents-cap .block-content .block-image {
    height: 16rem;
  }

  .index-contents-cap .nav-slide {
    top: 10.4rem;
  }
}



/*  column 2
=====================*/
.index-contents-cap .column-col2 .block-content .cap {
  width: 86%;
}

.index-contents-cap .column-col2 .block-content .title-index {
  letter-spacing: 0;
}

.index-contents-cap .column-col2 .block-content .btn {
  margin-top: 0;
}

.index-contents-cap .column-col2 .block-content .block-headline::before {
  width: 3.2rem;
  left: -20.8rem;
}

.index-contents-cap .column-col2 .block-content .block-headline::after {
  width: 20.4rem;
  left: 3.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .index-contents-cap .column-col2 .block-content .cap {
    width: 88%;
    width: calc(100% - 4.8rem);
  }

  .index-contents-cap .column-col2 .block-content .text-catch {
    margin-top: 1rem;
  }
}




/*========================================
  index contents
========================================*/
.index-contents .block-hero {
  display: block;
  width: 100%;
  position: relative;
}

.index-contents .block-hero::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: opacity 0.4s;
     -moz-transition: opacity 0.4s;
      -ms-transition: opacity 0.4s;
       -o-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

.index-contents a:hover .block-hero::before {
  opacity: 1;
}

.index-contents .block-hero .block-letter {
  display: table;
  width: 100%;
  height: 32rem;
}

.index-contents .block-hero .block-letter > dl {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.index-contents .block-hero .block-letter > dl > dt,
.index-contents .block-hero .block-letter > dl > dd {
  display: inline;
}

.index-contents .block-hero .block-letter > dl > dt {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.index-contents .block-hero .block-letter .title-index {
  margin-top: 1.6rem;
}

.index-contents .block-catch {
  text-align: center;
  padding: 2.4rem 1rem 8rem; 
}

.index-contents .text-catch {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

@media (max-width: 480px) and (orientation: portrait) {
  .index-contents .block-hero::before {
    display: none;
  }

  .index-contents .block-hero .block-letter {
    height: 16rem;
  }

  .index-contents .block-hero .block-letter .title-index {
    font-size: 2.4rem;
    margin-top: 1.6rem;
  }

  .index-contents .block-catch {
    padding: 1.6rem 0 4rem; 
  }

  .index-contents .text-catch {
    font-size: 1.5rem;
    line-height: 1.4;
  }
}




/*========================================
  index tab
========================================*/
.index-tab {
  text-align: center;
  padding-bottom: 10rem;
  position: relative;
}

.index-tab .block-hero {
  width: 100%;
  padding-top: 56rem;
  position: relative;
}

.index-tab .block-hero .block-headline {
  display: block;
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

.index-tab .block-hero .block-headline .block-letter {
  width: 100%;
  position: absolute;
  bottom: 6.4rem;
}

.index-tab .block-hero .block-headline .title-index {
  margin-top: 1.6rem;
}

.index-tab .block-hero .block-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.index-tab .list-content {
  width: 100%;
  height: 100%;
}

.index-tab .list-content > li {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
}

.index-tab .list-content > li:first-of-type {
  position: relative;
}

.index-tab .list-content > li.active {
  left: 0;
  z-index: 1;
}

.index-tab .list-content > li.active.in {
  z-index: 2;
}

.index-tab .list-content .block-letter {
  position: relative;
  top: 60%;
  z-index: 1;
}

.index-tab .list-content .text-catch {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-top: 3rem;
}

.index-tab .nav-tab {
  width: 100%;
  margin-top: -4rem;
  position: relative;
  z-index: 5;
}

.index-tab .nav-tab > ul {
  display: table;
  table-layout: fixed;
  width: 100%;
  background-color: #fff;
}

.index-tab .nav-tab > ul > li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.index-tab .nav-tab > ul > li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #25265a;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background-color: #fff;
  border-bottom: 1px solid #fff;
  padding: 3rem 0;
  -webkit-transition: background 0.1s;
     -moz-transition: background 0.1s;
      -ms-transition: background 0.1s;
       -o-transition: background 0.1s;
          transition: background 0.1s;
}

.index-tab .nav-tab > ul > li:not(.active) a:hover {
  background-color: #f8f8f8;
}

.index-tab .nav-tab > ul > li.active a {
  border-color: #25265a;
  cursor: default;
}

.index-tab .block-summary {
  width: 100%;
  margin-top: 3.2rem;
}

.index-tab .block-summary .btn {
  margin-top: 2.4rem;
}


@-webkit-keyframes index-tab_in_letter {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-moz-keyframes index-tab_in_letter {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-ms-keyframes index-tab_in_letter {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-o-keyframes index-tab_in_letter {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes index-tab_in_letter {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.index-tab .list-content > li.active.in {
  -webkit-animation: index-tab_in_letter 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: index-tab_in_letter 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: index-tab_in_letter 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: index-tab_in_letter 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: index-tab_in_letter 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes index-tab_in_image {
  0% { -webkit-transform: translateX(0.8rem);}
  100% { -webkit-transform: translateX(0);}
}

@-moz-keyframes index-tab_in_image {
  0% { -moz-transform: translateX(0.8rem);}
  100% { -moz-transform: translateX(0);}
}

@-ms-keyframes index-tab_in_image {
  0% { -ms-transform: translateX(0.8rem);}
  100% { -ms-transform: translateX(0);}
}

@-o-keyframes index-tab_in_image {
  0% { -o-transform: translateX(0.8rem);}
  100% { -o-transform: translateX(0);}
}

@keyframes index-tab_in_image {
  0% { transform: translateX(0.8rem);}
  100% { transform: translateX(0);}
}

.index-tab .list-content > li.active.in .block-image {
  -webkit-animation: index-tab_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: index-tab_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: index-tab_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: index-tab_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: index-tab_in_image 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (max-width: 480px) and (orientation: portrait) {
  .index-tab {
    padding-bottom: 4rem;
  }

  .index-tab .block-hero {
    padding-top: 32rem;
  }

  .index-tab .block-hero .block-headline {
    height: 50%;
  }

  .index-tab .block-hero .block-headline .block-letter {
    bottom: 2.8rem;
  }

  .index-tab .block-hero .block-headline .title-index {
    margin-top: 1rem;
  }

  .index-tab .block-hero .block-headline .text-catch {
    font-size: 1.4rem;
  }

  .index-tab .list-content .block-letter {
    top: 50%;
  }

  .index-tab .list-content .text-catch {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-top: 1.6rem;
  }

  .index-tab .nav-tab {
    margin-top: -2.8rem;
  }

  .index-tab .nav-tab > ul {
    display: block;
    padding-top: 0.6rem;
    overflow: hidden;
  }

  .index-tab .nav-tab > ul > li {
    display: table;
    width: 50%;
    height: 4rem;
    float: left;
  }

  .index-tab .nav-tab > ul > li a {
    display: table-cell;
    width: 100%;
    height: 100%;
    font-size: 1.1rem;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
    padding: 0;
  }

  .index-tab .nav-tab > ul > li:not(.active) a:hover {
    background-color: #fff;
  }

  .index-tab .block-summary {
    width: 100%;
    text-align: left;
    margin-top: 2rem;
  }

  .index-tab .block-summary .btn {
    display: block;
    margin: 1.6rem auto 0;
  }
}




/*========================================
  index box
========================================*/
.index-box > li {
  display: inline-table;
  height: 42rem;
  position: relative;
}

.index-box.column-col3 > li {
  height: 28rem;
}

.index-box.line:not(.column-col2):not(.column-col3):not(.column-col4) > li:nth-of-type(n+2) {
  border-top: 1px solid #fff;
}

.index-box.line.column-col2 > li:nth-of-type(n+3) {
  border-top: 1px solid #fff;
}

.index-box.line.column-col3 > li:nth-of-type(n+4) {
  border-top: 1px solid #fff;
}

.index-box.line.column-col4 > li:nth-of-type(n+5) {
  border-top: 1px solid #fff;
}

.index-box > li > a {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.index-box > li > a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity 0.4s;
     -moz-transition: opacity 0.4s;
      -ms-transition: opacity 0.4s;
       -o-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

.index-box > li > a:hover::before {
  opacity: 0.1;
}

.index-box > li > a::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(255,255,255,0.5);
  background: url(/assets/images/common/ico_arrow_next_wht.svg) center center no-repeat;
  background-size: 1.6rem auto;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

.index-box.column-col3 > li > a::after {
  width: 3rem;
  height: 3rem;
  background-size: 1.2rem auto;
}

.index-box * {
  color: #fff;
}

.index-box > li > a > dl {
  display: table;
  width: 100%;
  height: 100%;
}

.index-box > li > a > dl > dt {
  position: absolute;
  left: 0;
  top: 0;
}

.index-box > li > a > dl > dd {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.index-box .block-letter {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.index-box .text-summary {
  margin-top: 2rem;
}


@media (max-width: 480px) and (orientation: portrait) {
  .index-box > li {
    height: 24rem;
  }

  .index-box.column-col3 > li {
    height: 20rem;
  }

  .index-box > li > a::before {
    display: none;
  }

  .index-box > li > a::after {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 1.2rem auto;
    right: 1rem;
    bottom: 1rem;
  }

  .index-box.column-col3 > li > a::after {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 1.2rem auto;
  }

  .index-box .text-summary > br {
    display: block;
  }
}




/*========================================
  index related
========================================*/
.index-related {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.index-related > li {
  display: table;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.index-related > li + li {
  border-top: 1px solid #eee;
}

.index-related .block-image {
  display: table-cell;
  width: 16rem;
  text-align: left;
  vertical-align: middle;
}

.index-related .block-letter {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding-left: 4rem;
}

.index-related .block-button {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}

.index-related .title-index {
  font-weight: 400;
  letter-spacing: 0.08em;
}

.index-related .title-index > span {
  font-size: 72%;
  margin-left: 0.6rem;
}

.index-related .text-summary {
  line-height: 1.6;
  margin-top: 1rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .index-related > li {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  .index-related .block-image {
    display: block;
    width: 20%;
    margin-bottom: 1.6rem;
  }

  .index-related .block-letter {
    display: block;
    padding-left: 0;
    margin-bottom: 1rem;
  }

  .index-related .block-button {
    display: block;
    text-align: left;
  }

  .index-related .title-index {
    line-height: 1.2;
  }

  .index-related .text-summary {
    line-height: 1.5;
    margin-top: 0.8rem;
  }
}





/*========================================
  index card
========================================*/
.index-card > li {
  background-color: #fafafa;
  position: relative;
}

.index-card > li + li::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #eee;
  position: absolute;
  left: 0;
  top: 0;
}

.index-card .block-link {
  display: block;
  width: 100%;
  height: 100%;
}

.index-card .block-link::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.01);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: opacity 0.2s;
     -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
       -o-transition: opacity 0.2s;
          transition: opacity 0.2s;
}

.index-card .block-link:hover::before {
  opacity: 1;
}

.index-card .block-link::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(37,38,90,0.4);
  background: url(/assets/images/common/ico_arrow_next_blu.svg) center center no-repeat;
  background-size: 1.6rem auto;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

.index-card .block-image {
  display: block;
  width: 100%;
  height: 20rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.index-card .block-image img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

.index-card .block-letter {
  text-align: left;
  padding: 2.4rem 4rem;
  position: relative;
  z-index: 2;
}

.index-card .block-link .block-letter {
  padding-bottom: 7.2rem;
}

.index-card .title-index {
  line-height: 1.1;
}

.index-card .block-headline {
  display: table;
  width: 100%;
}

.index-card .block-headline .title-index {
  display: table-cell;
  width: 100%;
  height: 2.2em;
  text-align: left;
  vertical-align: middle;
}

.index-card .text-summary {
  color: #444;
  line-height: 1.7;
  margin-top: 1.4rem;
}

.index-card.column-col3 .text-summary {
  height: 7rem;
  overflow: hidden;
}

.index-card .text-body {
  color: #444;
  line-height: 1.8;
  margin-top: 1.6rem;
}

.index-card .text-date {
  letter-spacing: 0;
}

.index-card .block-link .text-date {
  line-height: 1.6;
  position: absolute;
  left: 4rem;
  bottom: 2rem;
}


@media (max-width: 480px) and (orientation: portrait) {
  .index-card > li + li::before {
    display: none;
  }

  .index-card .block-link::before {
    display: none;
  }

  .index-card .block-link::after {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 1.2rem auto;
    right: 1.6rem;
    bottom: 1.6rem;
  }

  .index-card .block-image {
    height: 16rem;
  }

  .index-card .block-letter {
    padding: 2rem 2rem 2.4rem;
  }

  .index-card .block-link .block-letter {
    padding-bottom: 4.8rem;
  }

  .title-index {
    line-height: 1.2;
  }

  .title-index > br {
    display: none;
  }

  .index-card .block-headline {
    display: block;
  }

  .index-card .block-headline .title-index {
    display: block;
    height: auto;
  }

  .index-card .text-summary {
    line-height: 1.6;
    margin-top: 1.2rem;
  }

  .index-card.column-col3 .text-summary {
    height: auto;
    overflow: visible;
  }

  .index-card .text-body {
    line-height: 1.6;
    margin-top: 1.2rem;
  }

  .index-card .block-link .text-date {
    line-height: 1.2;
    left: 2rem;
    bottom: 1.6rem;
  }
}

.training-svg-block{
  display: flex;
}

.training-svg-block-image{
  display: flex;
  align-items: end;
  gap: 2em;
  padding: 0 0 0 5em;
}

.training-svg-block-image img{
    width: 100%;
    max-width: 80px;
}  


@media (max-width: 480px) and (orientation: portrait) {
  .training-svg-block{
    display: block;
  }
  
  .training-svg-block-image{
    padding: 3em 0 0 0;
    justify-content: center;
  }
  .training-svg-block-image img{
    max-width: 65px;
  }  
}

.nav-anchor-position-relative{
  position: relative;
}

/*  timeline
=====================*/
#feature-shinkiba .title-block {
  white-space: nowrap;
}

#feature-shinkiba #content-timeline .list-timeline {
padding-top: 10rem;
overflow: hidden;
}

#feature-shinkiba #content-timeline .list-timeline > li {
position: relative;
}

#feature-shinkiba #content-timeline .list-timeline > li::before {
content: "";
display: block;
width: 2px;
height: 28rem;
background-color: #444;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: -18rem;
z-index: 4;
}

#feature-shinkiba #content-timeline .list-timeline > li + li {
margin-top: 8rem;
}


#feature-shinkiba #content-timeline .box-point {
display: block;
width: 100%;
height: 28rem;
background-color: #f8f8f8;
position: relative;
}

#feature-shinkiba #content-timeline .box-point > dt {
display: block;
width: 20%;
text-align: center;
margin: 0 auto;
position: absolute;
right: 0;
left: 0;
top: 50%;
z-index: 2;
-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
        transform: translateY(-50%);
}

#feature-shinkiba #content-timeline .box-point .text-time {
font-size: 3.6rem;
font-weight: 300;
letter-spacing: 0.1em;
white-space: nowrap;
}

#feature-shinkiba #content-timeline .box-point > dd {
display: table;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

#feature-shinkiba #content-timeline .box-point .block-letter {
display: table-cell;
width: 100%;
height: 100%;
text-align: left;
vertical-align: middle;
padding: 1rem 4.8rem;
}

#feature-shinkiba #content-timeline .box-point .block-image {
width: 40%;
z-index: 0;
top: 0;
}

#feature-shinkiba #content-timeline .box-point .block-letter.right {
padding-left: 60%;
}

#feature-shinkiba #content-timeline .box-point .block-image.left {
left: 0;
}

#feature-shinkiba #content-timeline .box-point .block-letter.left {
padding-right: 60%;
}

#feature-shinkiba #content-timeline .box-point .block-image.right {
left: auto;
right: 0;
}

#feature-shinkiba #content-timeline .box-point .text-body {
font-size: 1.52rem;
}

#feature-shinkiba #content-timeline .box-scene {
position: relative;
z-index: 6;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-shinkiba #content-timeline .list-timeline {
      padding-top: 4rem;
  }

  #feature-shinkiba #content-timeline .list-timeline > li::before {
      height: 100%;
      top: -50%;
      z-index: -1;
  }

  #feature-shinkiba #content-timeline .list-timeline > li + li {
      margin-top: 4rem;
  }


  #feature-shinkiba #content-timeline .box-point {
      height: auto;
  }

  #feature-shinkiba #content-timeline .box-point > dt {
      width: 100%;
      top: 6rem;
  }

  #feature-shinkiba #content-timeline .box-point .text-time {
      color: #fff;
      font-size: 2.4rem;
  }

  #feature-shinkiba #content-timeline .box-point > dd {
      display: block;
      height: auto;
  }

  #feature-shinkiba #content-timeline .box-point .block-letter {
      display: block;
      height: auto;
      padding: 14rem 1.6rem 1.6rem !important;
  }

  #feature-shinkiba #content-timeline .box-point .block-image {
      width: 100%;
      height: 12rem;
  }

  #feature-shinkiba #content-timeline .box-point .block-image::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #303036;
      opacity: 0.2;
      position: absolute;
      left: 0;
      top: 0;
  }

  #feature-shinkiba #content-timeline .box-point .text-body {
      font-size: 1.44rem;
  }
}

.bousai-img-graph-resize{
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 480px) and (orientation: portrait) {
  .bousai-img-graph-resize{
    max-width: 355px;
  }
}

/* before */
#business-expertsupport-renewal .before-after-images li.before {
  border: solid 4px #25265A;
  position: relative;
}
#business-expertsupport-renewal .before-after-images li.before::before {
  content: "Before";
  width: 7vw;
  height: 7vw;
  background-color: #25265A;
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) and (orientation: portrait) {
  #business-expertsupport-renewal .before-after-images li.before::before {
    width: 15vw;
    height: 15vw;
    font-size: 3vw;
  }  
}

/* after */
#business-expertsupport-renewal .before-after-images li.after {
  border: solid 4px #D33E3E;
  position: relative;
}
#business-expertsupport-renewal .before-after-images li.after::before {
  content: "After";
  width: 7vw;
  height: 7vw;
  background-color: #D33E3E;
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) and (orientation: portrait) {
  #business-expertsupport-renewal .before-after-images li.after {
    margin-top: 50px;
  }
  #business-expertsupport-renewal .before-after-images li.after::before {
    width: 15vw;
    height: 15vw;
    font-size: 3vw;
  }  
}