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


  module
  

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

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


  module / layout


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

#contents {
  width: 100%;
}

#contents .block-section {
  padding-top: 4rem;
  padding-bottom: 8rem;
}

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

#contents .block-catchline {
  text-align: center;
  padding-top: 9.6rem;
  padding-bottom: 9.6rem;
}

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


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

  #contents .block-section {
    padding-top: 2.4rem;
    padding-bottom: 4rem;
  }

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

  #contents .block-catchline {
    padding-top: 4rem;
    padding-bottom: 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.space > *:nth-of-type(odd) {
  padding-right: 1rem;
}

.column-col2.space > *:nth-of-type(even) {
  padding-left: 1rem;
}

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

  .column-col2.space > *:nth-of-type(odd) {
    padding-right: 0;
  }

  .column-col2.space > *:nth-of-type(even) {
    padding-left: 0;
  }
}



/*  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.space {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;
}

.column-col3.space > * {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .column-col3 > * {
    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: 4.8rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

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

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

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

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

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

.txt.lv8 {
  font-size: 1.72rem;
  letter-spacing: 0.16em;
  line-height: 1.8;
}

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

.txt.lv10 {
  font-size: 1.56rem;
  letter-spacing: 0.1em;
  line-height: 2;
}

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

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


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

.txt.vio {
  color: #36388f;
}

.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;
}

.txt > .ico {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

.txt > .ico.outside {
  width: 1.2em;
  margin-left: 0.2em;
}


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

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

  .txt.lv3 {
    font-size: 2.4rem;
    letter-spacing: 0.06em;
  }

  .txt.lv4 {
    font-size: 2.4rem;
    letter-spacing: 0.04em;
  }

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

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

  .txt.lv7 {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

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

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

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

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

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



/*========================================
  title
========================================*/
/*  title category
=====================*/
.txt.title-category {
  display: inline-block;
  line-height: 1;
  letter-spacing: 0.16em !important;
  vertical-align: middle;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.title-category {
    letter-spacing: 0.1em !important;
  }
}



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

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



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

.txt.title-section.line {
  border-bottom: 1px solid #ddd;
  padding-bottom: 4rem;
}

.txt.title-section > span {
  font-size: 1.6rem;
  font-weight: 300;
  margin-left: 2rem;
}


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

  .txt.title-section.line {
    padding-bottom: 1.2rem;
  }

  .txt.title-section > span {
    font-size: 1.1rem;
    margin-left: 1rem;
  }
}



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

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



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

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





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

@media (max-width: 480px) and (orientation: portrait) {

}




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

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

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

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

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




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

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

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

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

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

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




/*========================================
  text body
========================================*/
.txt.text-body {
  letter-spacing: 0.08em;
}

.txt.text-catch + .txt.text-body {
  margin-top: 2.4rem;
}

.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 {
  }

  .txt.text-catch + .txt.text-body {
    margin-top: 1.6rem;
  }
}




/*========================================
  text name
========================================*/
.txt.text-name {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 1.6;
}

.txt.text-name > span {
  font-size: 1.48rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-name {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

  .txt.text-name > span {
    font-size: 1.2rem;
  }
}




/*========================================
  text caption
========================================*/
.txt.text-caption {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-align: center;
  background-color: rgba(255,255,255,0.9);
  padding: 0.8rem 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
}

@media (max-width: 480px) and (orientation: portrait) {
  .txt.text-caption {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
  }
}




/*========================================
  text notes
========================================*/
.txt.text-notes {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  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 {
  color: #36388f;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  border-bottom: 1px dotted #36388f;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}




/*========================================
  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.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;
}

.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: #303036;
  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%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 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;
}

.pic-slide .nav-slide .btn.prev,
.pic-slide .nav-slide .btn.next {
  background-color: rgba(255,255,255,0.8);
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.pic-slide .nav-slide .btn.prev {
  left: 2rem;
}

.pic-slide .nav-slide .btn.next {
  right: 2rem;
}

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

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

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

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

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

.pic-slide .list-slide > li.active.next {
  z-index: 2;
  -webkit-animation: pic_slide_next 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
     -moz-animation: pic_slide_next 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
      -ms-animation: pic_slide_next 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
       -o-animation: pic_slide_next 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
          animation: pic_slide_next 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

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

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

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

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

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

.pic-slide .list-slide > li.active.prev {
  z-index: 2;
  -webkit-animation: pic_slide_prev 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
     -moz-animation: pic_slide_prev 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
      -ms-animation: pic_slide_prev 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
       -o-animation: pic_slide_prev 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
          animation: pic_slide_prev 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}



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


  module / parts


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

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

  btn

====================================================*/
.btn {
  display: inline-block;
  color: #36388f;
  letter-spacing: 0.1em;
  text-align: center;
  background-color: #f2f2f8;
  border-radius: 10rem;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.1s;
     -moz-transition: all 0.1s;
      -ms-transition: all 0.1s;
       -o-transition: all 0.1s;
          transition: all 0.1s;
}

.btn.szxs {
  width: 12rem;
  height: 3.2rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 3.2rem;
}

.btn.szs {
  width: 16rem;
  height: 3.6rem;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 3.6rem;
}

.btn.szm {
  width: 24rem;
  height: 3.6rem;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 3.6rem;
}

.btn.szl {
  width: 32rem;
  height: 4rem;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 3.8rem;
}

.btn.flx {
  width: auto !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.btn:hover {
  background-color: #eeeef8;
}

html.ie .btn.szs {
  line-height: 3.28rem;
}

html.ie .btn.szm {
  line-height: 3.48rem;
}

html.ie .btn.szl {
  line-height: 3.88rem;
}



@media (max-width: 480px) and (orientation: portrait) {
  .btn.szxs {
    width: 12rem;
  }

  .btn.szs {
    width: 16rem;
    font-size: 1.2rem;
  }

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

  .btn.szl {
    width: 80%;
    max-width: 32rem;
    height: 3.6rem;
    font-size: 1.4rem;
    line-height: 3.6rem;
  }

  .btn.flx {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
  }
}



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

.btn.link {
  padding-right: 1rem;
}

.btn.link::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/ico_arrow_next_vio.svg);
  right: 1rem;
}

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

.btn.return {
  padding-left: 1rem;
}

.btn.return::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/ico_arrow_prev_vio.svg);
  left: 1rem;
}

.btn.anchor::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/ico_arrow_down_vio.svg);
  right: 1.2rem;
}


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

  .btn.link::after {
    right: 0.4rem;
  }
}



/*  color white
=====================*/
.btn.wht {
  color: #36388f;
  background-color: #fff;
}

.btn.wht:hover {
  background-color: #fafafa;
}



/*  color violet
=====================*/
.btn.vio {
  color: #fff;
  font-weight: 400;
  background-color: #7b7ddd;
}

.btn.vio:hover {
  background-color: #6b6ddd;
}

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



/*  btn entry
=====================*/
.btn.entry {
  width: 40rem;
  height: 6.4rem;
  background-color: #fff;
  border-radius: 10rem;
  border: 1px solid #ccc;
}

.btn.entry::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background-image: url(/assets/images/common/ico_outside_gry.svg);
  right: 2rem;
}

html.ie .btn.entry::after {
  width: 2.2rem;
  height: 2.2rem;
}

.btn.entry > img {
  width: auto;
  height: 3.6rem;
  margin: auto;
  position: absolute;
  left: 0;
  right: 1.6rem;
  top: 0;
  bottom: 0;
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn.entry {
    width: 80%;
    max-width: 40rem;
    height: 4.8rem;
  }

  .btn.entry::after {
    right: 1.6rem;
  }

  .btn.entry > img {
    height: 2.8rem;
    right: 1.2rem;
  }
}



/*  btn pagetop
=====================*/
.btn.pagetop {
  width: 4rem;
  height: 4rem;
}

.btn.pagetop::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/ico_arrow_up_vio.svg);
  margin: auto;
  right: 0;
  left: 0;
}

.btn.pagetop > span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (max-width: 480px) and (orientation: portrait) {
  .btn.pagetop {
    width: 3.6rem;
    height: 3.6rem;
    background-color: #fff;
  }
}



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

.btn.prev::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/ico_arrow_prev_vio.svg);
  margin: auto;
  right: 0;
  left: 0;
}

.btn.prev.disable {
  opacity: 0.2;
  cursor: default;
}

.btn.prev > span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}



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

.btn.next::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/ico_arrow_next_vio.svg);
  margin: auto;
  right: 0;
  left: 0;
}

.btn.next.disable {
  opacity: 0.2;
  cursor: default;
}

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




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

  cap

====================================================*/
.cap {
  position: relative;
}

.cap::before {
  content: "";
  display: block;
  width: calc(100% - 20rem);
  height: 4rem;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -4rem;
}

.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 {
    width: calc(100% - 4.8rem);
    height: 2.8rem;
    top: -2.8rem;
  }

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

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





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


  module / list


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

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

.list-tbl > dt {
  width: 18%;
  letter-spacing: 0.16em;
}

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

.list-tbl > dd {
  width: 82%;
  font-weight: 300;
  letter-spacing: 0.1em;
}

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

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

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



/*========================================
  list content
========================================*/
.list-content {
  width: 100%;
  overflow: hidden;
}

.list-content > li {
  text-align: center;
  margin-bottom: 4rem;
}

.list-content > li .block-letter {
  padding: 3.2rem 1.6rem;
}

.list-content .title-content {
  margin-bottom: 1.6rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-content > li {
    text-align: center;
    margin-bottom: 2.4rem;
  }

  .list-content > li .block-letter {
    padding: 2.4rem 1.6rem;
  }

  .list-content .title-content {
    margin-bottom: 1rem;
  }
}



/*========================================
  list related
========================================*/
.list-related {
  width: 100%;
}

.list-related > li {
  display: inline-block;
  position: relative;
}

.list-related > li:nth-of-type(n+3) {
  border-top: 1px solid #666;
}

.list-related > li a {
  display: table;
  width: 100%;
  height: 16rem;
  background-color: #333;
  padding-left: 50%;
}

.nav-page .nav-contents > li a:hover {
  text-decoration: none;
}

.list-related > 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;
}

.list-related > li a:hover::before {
  opacity: 0.5;
}

.list-related > li .block-letter {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.list-related > li .title-content {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: 0.08em;
}

.list-related > li .text-summary {
  color: #aaa;
  font-size: 1.32rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.6;
  margin-top: 1.6rem;
}

.list-related > li .block-image {
  width: 50%;
  z-index: 0;
}

@media (max-width: 480px) and (orientation: portrait) {
  .list-related > li:nth-of-type(n+2) {
    border-top: 1px solid #666;
  }

  .list-related > li a {
    height: 7.2rem;
    padding-left: 24%;
  }

  .list-related > li a::before {
    display: none;
  }
  
  .list-related > li .title-content {
    font-size: 1.6rem;
    margin-top: 0.4rem;
  }

  .list-related > li .text-summary {
    font-size: 1rem;
    margin-top: 0.4rem;
  }

  .list-related > li .block-image {
    width: 24%;
  }
}



/*========================================
  list btn
========================================*/
.list-btn {
  display: block;
  text-align: center;
}

.list-btn > li {
  display: inline-block;
}

.list-btn > li + li {
  margin-left: 1rem;
}

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

  .list-btn > li + li {
    margin-left: 0;
    margin-top: 1rem;
  }
}




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

.list-digest * {
  color: #36388f;
}

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

.list-digest > li > dl > dt {
  font-size: 1.4rem;
  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;
}

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

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

  .list-digest > li:nth-of-type(n+3) {
    margin-top: 3.2rem;
  }

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

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

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




/*========================================
  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 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 table
========================================*/
.box-tbl {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.box-tbl .box-content {
  display: table-cell;
  height: 100%;
}

.box-tbl.top .box-content {
  vertical-align: top;
}

.box-tbl.middle .box-content {
  vertical-align: middle;
}

.box-tbl.bottom .box-content {
  vertical-align: bottom;
}

.box-tbl.center .box-content {
  text-align: center;
}

.box-tbl.left .box-content {
  text-align: left;
}

.box-tbl.right .box-content {
  text-align: right;
}

.box-tbl .box-content.top {
  vertical-align: top;
}

.box-tbl .box-content.middle {
  vertical-align: middle;
}

.box-tbl .box-content.bottom {
  vertical-align: bottom;
}

.box-tbl .box-content.center {
  text-align: center;
}

.box-tbl .box-content.left {
  text-align: left;
}

.box-tbl .box-content.right {
  text-align: right;
}



/*========================================
  box entry
========================================*/
.box-entry {
  width: 100%;
  text-align: center;
  background-color: #f0f0f6;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.box-entry .title-box {
  margin-bottom: 4rem;
}

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

  .box-entry .title-box {
    margin-bottom: 2rem;
  }
}




/*========================================
  box info
========================================*/
.box-info {
  display: block;
  width: 100%;
  text-align: center;
  border: 4px solid #f2f2f8;
  padding: 3.2rem;
}

.box-info .title-info {
  margin-bottom: 2rem;
}

.box-info .block-contact .text-contact {
  padding-left: 2rem;
  padding-right: 2rem;
}

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

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

  .box-info .title-info {
    margin-bottom: 1.6rem;
  }

  .box-info .block-contact .text-contact {
    padding: 0.2rem 0;
  }

  .box-info .block-contact .btn-contact {
    margin-top: 1rem;
  }
}




/*========================================
  box notes
========================================*/
.box-notes {
  display: block;
  background-color: #f8f8f8;
  padding: 1rem 2rem;
}




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


  module / nav


============================================================*/
/*========================================
  nav anchor
========================================*/
.nav-anchor {
  width: 100%;
  text-align: center;
}

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

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

.nav-anchor .list-anchor > li + li {
  margin-left: 1rem;
}

.nav-anchor .list-anchor > li > a.btn.anchor {
  font-size: 1.3rem;
  font-weight: 400;
  background-color: rgba(255,255,255,0.9);
}

.nav-anchor .list-anchor > li > a.btn.anchor:hover {
  background-color: rgba(250,250,250,0.9);
}

@media (max-width: 480px) and (orientation: portrait) {
  .nav-anchor {
    text-align: left;
  }

  .nav-anchor .list-anchor > li {
    display: inline-block;
    width: 48%;
    border-bottom: 1px solid #eee;
    vertical-align: bottom;
  }

  .nav-anchor .list-anchor > li + li {
    margin-left: 0;
  }

  .nav-anchor .list-anchor > li:nth-of-type(odd) {
    margin-right: 2%; 
  }

  .nav-anchor .list-anchor > li:nth-of-type(even) {
    margin-left: 2%; 
  }

  .nav-anchor .list-anchor > li > a.btn.anchor {
    width: 100%;
    text-align: left;
    border-radius: 0;
    padding-left: 1rem;
    margin: 0.4rem 0;
  }

  .nav-anchor .list-anchor > li > a.btn.anchor:hover {
    background-color: rgba(255,255,255,0.9);
  }
}



/*========================================
  nav indicator
========================================*/
.nav-indicator {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
}

.nav-indicator .list-indicator {
  display: inline-block;
  height: 4rem;
  padding: 0 2rem;
  -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 .list-indicator.blk {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}

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

.nav-indicator .list-indicator.blk:hover {
  background-color: transparent;
}


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

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

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

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

.nav-indicator .list-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 .list-indicator.blk > li > a::after {
  background-color: #000;
}

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

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

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

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

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

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