@charset "UTF-8";
/*
  INIT ELEMENTS
*/
* {
  -webkit-text-size-adjust: none !important;
}

/*
  Begin Basic Styling
*/
html {
  font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif, 'Font Awesome 5', 'Font Awesome 5 Pro';
  font-size: 12px;
}

html, body {
  position: relative;
  /*height: 100%;*/
}

body {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

table {
  background-color: #888;
  border-collapse: separate;
  border-spacing: 1px;
  margin-bottom: 1em;
}

table td {
  background: #fff;
}

table th,
table td {
  padding: 0.5em;
}

table th {
  white-space: nowrap;
  text-align: center;
}

div, ul, ol, li,
h1, h2, h3, h4, h5, h6, hr, a {
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  border: none;
  position: relative; 
}

header, footer, nav, section, aside,
body, html {
  margin: 0;
  padding: 0;
  position: relative; 
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.75em;
}

section {
  margin-bottom: 3em;
}

p {
  margin: 0 0 1em 0;
}

dt {
  font-weight: bold;
  vertical-align: middle;
}

p, dd {
  margin-bottom: 1em;
}

div {
  /*vertical-align: bottom;*/
  vertical-align: baseline;

}

blockquote {
  font-style: oblique;
  font-family: sans-serif;
}

img {
  vertical-align: bottom;
  border: none;
  margin: 0;
  padding: 0;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
}

figure {
  margin: 0;
}

figcaption {
  font-size: 88%;
}

*:hover,
*:active,
*:visited,
*:focus {
  outline: none;
}

a {
  outline: none;
  text-decoration: none;
}

ul, li {
  list-style-position: inside;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-left: 1em;
}

ul,
ol {
  margin-left: 2em;
  margin-bottom: 1em;
}

ul li,
ol li {
  list-style-position: outside;
  margin: 0 0 0.4em 0;
}

hr {
  height: 1px;
  line-height: 1px;
  margin: 1em 0;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  color: #ccc;
  background-color: #ccc;
  border-width: 0;
  font-family: '';
}

small {
  font-size: 100%;
}


/*
  GLOBAL CLASSES
*/
/* 余白など */
.truncate {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.no-text {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.no-spaces {
  margin: 0 !important;
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

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

.no-padding {
  padding: 0 !important;
}

.no-bottom-padding {
  padding-bottom: 0 !important;
}

.no-mark {
  list-style-type: none !important;
}

.no-mark li {
  list-style-position: outside !important;
}

.no-mark li:before {
  content: none !important;
}

.no-border {
  border: none !important;
}

/* 配置 */
.al-l {
  text-align: left;
}

.al-r {
  text-align: right;
}

.al-c {
  text-align: center;
}

.aligncenter {
  display: block;
  margin: auto;
}

.fl-l, .alignleft {
  float: left;
}

.fl-r, .alignright {
  float: right;
}

.va-w {
  display: table;
  height: 100%;
  margin: auto;
}

.va-m {
  display: table-cell;
  vertical-align: middle;
}

.f-bundle {
  display: inline-block;
  width: 100%;
}

.f-bundle > .left {
  float: left;
}

.f-bundle > .right {
  float: right;
}

/* その他 */
.block {
  display: block !important;
}

.il-b {
  display: inline-block !important;
}

.w-max {
  width: 100%;
}

.w-auto {
  width: auto !important;
}

.follow {
  width: 100%;
}

.h-max {
  height: 100%;
}

/* フォント */
.sans-serif {
  font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Roboto,'Droid Sans',Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif,FontAwesome !important;
}

/*
.serif {
  font-family: 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif, FontAwesome !important;
}
*/

.serif {
  /*font-family: YuMincho, '游明朝', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif, 'メイリオ', sans-serif, FontAwesome !important;*/
  /*font-family: YuMincho, '游明朝', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif, FontAwesome !important;*/
  /*font-family: YuMincho, '游明朝', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif, FontAwesome !important;*/
}

.serif-fp {
  /*font-family: 'ヒラギノ明朝 ProN', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif, FontAwesome !important;*/
  font-family: 'ＭＳ 明朝', serif, FontAwesome !important;
}

/*
  UTILS
*/
/* UL: 水平に並べる */
ul.horizontally,
ol.horizontally {
  display: inline-block;
  width: 100%;
}

ul.horizontally > li,
ol.horizontally > li {
  float: left;
  display: inline;
}

/* リストアイテムを均等割付 */
ul.spacing-justify,
ol.spacing-justify {
  list-style-type: none;
  display: inline-block;
  width: 100%;
  height: auto;
  text-align: justify;
  text-justify: distribute-all-lines;
  position: relative;
  overflow: hidden;
 
  font-size: 0;
  line-height: 0;
  
  font-size: 0; /* 実験 */
}

ul.spacing-justify:after,
ol.spacing-justify:after {
  content: "";
  display: inline-block;
  width: 100%;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  height: 0;
  vertical-align: top;
  
  /* For IEs */
  display: none\0/;
}

ul.spacing-justify li.blank,
ol.spacing-justify li.blank {
  display: inline-block;
}

ul.spacing-justify li,
ol.spacing-justify li {
  float: none;
  text-align: left;
  text-justify: distribute;
  position: relative;
  display: inline-block;
  
  vertical-align: top;
  
  font-size: 12px;
  line-height: 1em;
  
  /* For IEs */
  *display: inline;
  *zoom: 1;
}

/* UL: 擬似イメージマップ */
ul.pseudo-imgmap {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

ul.pseudo-imgmap li {
  position: absolute;
  display: inline-block;
  height: auto;
  width: auto;
  z-index: 10;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

ul.pseudo-imgmap * {
  line-height: normal !important;
}

ul.pseudo-imgmap li img {
  margin: 0 !important;
  padding: 0 !important;
}

ul.pseudo-imgmap.show {
  background-color: rgba(0,0,0,0.25);
}

ul.pseudo-imgmap.show li {
  background-color: rgba(255,0,0,0.25);
}

ul.pseudo-imgmap li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/*
  Justify
*/
ul.justify,
ol.justify {
  text-align: justify;
  margin: 0 0 1em 0;
}

ul.justify:after,
ol.justify:after {
  content: '';
  display: inline-block;
  width: 100%;
  font-size: 0;
  line-height: 0;
}

ul.justify > li,
ol.justify > li {
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  list-style-type: none;
}

ul.justify > li > a,
ol.justify > li > a {
  display: inline-block;
}


/*Test*/
dl.justify {
  text-align: justify;
}

dl.justify:after {
  content: '';
  display: inline-block;
  width: 100%;
  font-size: 0;
  line-height: 0;
}

dl.justify > dt,
dl.justify > dd {
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  list-style-type: none;
  margin: 0;
}

dl.justify dt {
  vertical-align: middle;
}

dl.justify > dt > a,
dl.justify > dd > a {
  display: inline-block;
}


/*
  Columns
*/
.columns {
  /*-webkit-column-gap: 1.25em;
  -moz-column-gap: 1.25em;
  column-gap: 1.25em;*/
}

.columns img {
  width:  100%;
}

.columns > * {
  /*display: inline-block;*/
  float: left;
  /*width: 100%;*/

  vertical-align: middle !important;

  -webkit-column-width: auto;
  -moz-column-width: auto;
  -ms-column-width: auto;
  column-width: auto;

  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  -o-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
  column-break-inside:avoid;

  page-break-inside:avoid;
}

.columns.x2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  column-count: 2;
}

.columns.x3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
}


/*
  Flex
*/
.flex {
  position: relative;

  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
}

.flex > .auto-dist {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

/*
  Extras
*/
.justify.exp {
  display: block;
  text-align: justify;
  font-size: 0;
  /*font-size: 1rem;*/
  line-height: 1;
  margin-left: 0;
  margin-bottom: -1rem;
}

.justify.exp:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.justify.exp > * {
  vertical-align: top;
  display: inline-block;
  font-size: 1rem;
}

.justify.exp.fit-images > * img {
  width: 100%;
}

/* n/2 */
.justify.exp.d2 > .n1 {
  width: 49%;
}

.justify.exp.d2.np > .n1 {
  width: 50%;
}

/* n/3 */
.justify.exp.d3 > .n1 {
  width: calc(100% / 3 - 1rem);
}
.justify.exp.d3 > .n2 {
  width: calc(100% / 3 * 2 - 1rem);
}

.justify.exp.d3.np > .n1 {
  width: calc(100% / 3);
}
.justify.exp.d3.np > .n2 {
  width: calc(100% / 3 * 2);
}

/* n/4 */
.justify.exp.d4 > .n1 {
  width: calc(100% / 4 - 1rem);
}
.justify.exp.d4 > .n3 {
  width: calc(100% / 4 * 3 - 1rem);
}

.justify.exp.d4.np > .n1 {
  width: calc(100% / 4);
}
.justify.exp.d4.np > .n3 {
  width: calc(100% / 4 * 3);
}

/* n/5 */
.justify.exp.d5 > .n1 {
  width: calc(100% / 5 - 1rem);
}
.justify.exp.d5 > .n2 {
  width: calc(100% / 5 * 2 - 1rem);
}
.justify.exp.d5 > .n3 {
  width: calc(100% / 5 * 3 - 1rem);
}
.justify.exp.d5 > .n4 {
  width: calc(100% / 5 * 4 - 1rem);
}

.justify.exp.d5.np > .n1 {
  width: calc(100% / 5);
}
.justify.exp.d5.np > .n2 {
  width: calc(100% / 5 * 2);
}
.justify.exp.d5.np > .n3 {
  width: calc(100% / 5 * 3);
}
.justify.exp.d5.np > .n4 {
  width: calc(100% / 5 * 4);
}

/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .justify.exp {
    font-size: 0.1px;
  }

  /* n/2 */
  .justify.exp.d2 > .n1 {
    width: 49%;
  }

  .justify.exp.d2.np > .n1 {
    width: 49.999%;
  }

  /* n/3 */
  .justify.exp.d3 > .n1 {
    width: 32.3333%;
  }
  .justify.exp.d3 > .n2 {
    width: 65.6666%;
  }

  .justify.exp.d3.np > .n1 {
    width: 33.3333%;
  }
  .justify.exp.d3.np > .n2 {
    width: 66.6666%;
  }

  /* n/4 */
  .justify.exp.d4 > .n1 {
    width: 24%;
  }
  .justify.exp.d4 > .n3 {
    width: 74%;
  }

  .justify.exp.d4.np > .n1 {
    width: 24.999%;
  }
  .justify.exp.d4.np > .n3 {
    width: 74.999%;
  }

  /* n/5 */
  .justify.exp.d5 > .n1 {
    width: 19%;
  }
  .justify.exp.d5 > .n2 {
    width: 39%;
  }
  .justify.exp.d5 > .n3 {
    width: 59%;
  }
  .justify.exp.d5 > .n4 {
    width: 79%;
  }

  .justify.exp.d5.np > .n1 {
    width: 19.999%;
  }
  .justify.exp.d5.np > .n2 {
    width: 39.999%;
  }
  .justify.exp.d5.np > .n3 {
    width: 59.999%;
  }
  .justify.exp.d5.np > .n4 {
    width: 79.999%;
  }
}

@media only screen and (max-width: 767px) {
  .justify.exp li.n4 {
    width: 48%;
    min-width: 48%;
  }
}

.justify.exp li.al-r {
  text-align: right;
}


@media only screen and (max-width: 959px) {
  .justify.exp > li {
    min-width: auto !important;
    max-width: inherit !important;
  }

  .justify.exp > li img {
    width: 100%;
  }
}

@media only screen and (max-width: 639px) {
  .justify.exp > * {
    width: auto !important;
    display: block;
  }
}

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.table.auto {
  table-layout: auto;
}

.table.separated {
  border-collapse: separate;
  border-spacing: 1rem;
  /*margin-bottom: 1rem;*/
}

.table .table {
  width: auto;
}

.table > .row {
  display: table-row;
  height: 100%;
  width: 100%;
}

.table > .row > .cell {
  display: table-cell;
}

.table > .row.va-t > .cell,
.table > .row.va-t > .cell > * {
  vertical-align: top;
}

.table > .row.va-b > .cell,
.table > .row.va-b > .cell > * {
  vertical-align: bottom;
}

.table > .row > .cell,
.table > .row > .cell > * {
  vertical-align: middle;
}

.table > .row > .cell.w16 {
  /*width: 16.666%;*/
  width: calc(100% / 6);
}

.table > .row > .cell.w25 {
  width: 25%;
}

.table > .row > .cell.w33 {
  /*width: 33.333%;*/
  width: calc(100% / 3);
}

.table > .row > .cell.w40 {
  width: 40%;
}

.table > .row > .cell.w50 {
  width: 50%;
}

.table > .row > .cell.w66 {
  /*width: 66.666%;*/
  width: calc(100% / 3 * 2);
}

.table > .row > .cell.w75 {
  width: 75%;
}

.table > .row > .cell.va-t {
  vertical-align: top;
}

.table > .row > .cell.va-b {
  vertical-align: bottom;
}

.table > .row > .cell > *:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 425px) {
  .table {
    padding: 0 1rem;
  }

  .table .table {
    padding: 0;
  }

  .table, .table > .row, .table > .row > .cell {
    display: block;
    width: auto !important;
  }

  .table > .row > .cell {
    margin-bottom: 1rem;
  }
}