@charset "UTF-8";
/*fix main common*/
.breadcrumbNav{
  margin: 0 auto;
}
.breadcrumbNav > .navIn{
  padding:9px 0 0 !important;
}
@media (max-width: 767px) {
  .breadcrumbNav > .navIn {
    width: auto;
    padding: 7px 10px !important;
  }
}

/* ---------------------------------------------------
 setting
---------------------------------------------------*/
*{
  box-sizing: border-box;
}
html.menuFixed {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.forPC {
  display: block;
}

.forSP {
  display: none;
}

@media (max-width: 767px) {
  .forPC {
    display: none;
  }

  .forSP {
    display: block;
  }

  .spsml {
    font-size: .8em;
  }
}


@media (min-width: 768px) {
  .tabOnly {
    display: none;
  }
}

@media (max-width: 767px) {
  .tabOnly {
    display: block;
  }
}

.iblock {
  display: inline-block !important;
  font-size: inherit;
}

.block {
  display: block !important;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.text-center,
.center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.sml {
  font-size: .8em;
}

.sml9 {
  font-size: .9em;
}

.tsume {
  font-feature-settings: "palt";
  letter-spacing: .05em;
}

.en {
  font-family: 'Bevan', sans-serif;
  font-weight: normal;
}

.normal {
  font-weight: normal;
}

.mtop-0 {
  margin-top: 0 !important;
}
.mtop-1 {
  margin-top: 1em !important;
}
.mtop-2 {
  margin-top: 2em !important;
}
.mtop-3 {
  margin-top: 3em !important;
}
.mtop-4 {
  margin-top: 4em !important;
}

.mbtm-0 {
  margin-bottom: 0 !important;
}
.mbtm-1 {
  margin-bottom: 1em !important;
}
.mbtm-2 {
  margin-bottom: 2em !important;
}
.mbtm-3 {
  margin-bottom: 3em !important;
}
.mbtm-4 {
  margin-bottom: 4em !important;
}

.pbtm-0 {
  padding-bottom: 0 !important;
}
.pbtm-1 {
  padding-bottom: 1em !important;
}
.pbtm-2 {
  padding-bottom: 2em !important;
}
.pbtm-3 {
  padding-bottom: 3em !important;
}
.pbtm-4 {
  padding-bottom: 4em !important;
}

.ptop-0 {
  padding-top: 0 !important;
}
.ptop-1 {
  padding-top: 1em !important;
}
.ptop-2 {
  padding-top: 2em !important;
}
.ptop-3 {
  padding-top: 3em !important;
}
.ptop-4 {
  padding-top: 4em !important;
}

.w90 {
  width: 90% !important;
  margin-left: auto;
  margin-right: auto;
}
.w80 {
  width: 80% !important;
  margin-left: auto;
  margin-right: auto;
}
.w70 {
  width: 70% !important;
  margin-left: auto;
  margin-right: auto;
}
.w60 {
  width: 60% !important;
  margin-left: auto;
  margin-right: auto;
}
.w50 {
  width: 50% !important;
  margin-left: auto;
  margin-right: auto;
}
.w40 {
  width: 40% !important;
  margin-left: auto;
  margin-right: auto;
}
.w30 {
  width: 30% !important;
  margin-left: auto;
  margin-right: auto;
}

.columns-2,
.columns-3 {
  width: 100%;
}

.columns-2>.column2 {
  width: 48% !important;
}

.columns-2>.w25 {
  width: 25% !important;
}

.columns-2>.w27 {
  width: 27% !important;
}

.columns-2>.w30 {
  width: 30% !important;
}

.columns-2>.w35 {
  width: 35% !important;
}

.columns-2>.w40 {
  width: 40% !important;
}

.columns-2>.w45 {
  width: 45% !important;
}

.columns-2>.w50 {
  width: 50% !important;
}

.columns-2>.w55 {
  width: 55% !important;
}

.columns-2>.w60 {
  width: 60% !important;
  margin: 0;
}

.columns-2>.w65 {
  width: 65% !important;
}

.columns-2>.w70 {
  width: 70% !important;
}

.columns-3>.column3 {
  width: 32% !important;
}

@media screen and (max-width:767px) {

  .w90,
  .w80,
  .w70,
  .w60 {
    width: 100% !important;
  }

  .columns-2 {
    display: block;
  }

  .columns-2>.column2,
  .columns-2>.w25,
  .columns-2>.w30,
  .columns-2>.w35,
  .columns-2>.w40,
  .columns-2>.w45,
  .columns-2>.w50,
  .columns-2>.w55,
  .columns-2>.w60,
  .columns-2>.w65,
  .columns-2>.w70 {
    width: 100% !important;
  }
}

/* note style */
ul.note {
  line-height: 1.6em;
}

ul.note li {
  padding-left: 1.2em;
  position: relative;
}

ul.note li:not(:last-child) {
  margin-bottom: .3em;
}

ul.note li::before {
  content: '※';
  display: inline-block;
  position: absolute;
  left: 0;
}

ul.dotnote li::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0;
  top: .25em;
  background-color: currentColor;
  border-radius: 50%;
  transform: scale(.65);
}

ul.numnote {
  counter-reset: numnote;
}

ul.numnote > li {
  padding-left: 2.2em;
}

ul.numnote > li::before {
  content: "※"counter(numnote);
  counter-increment: numnote;
}

ul.numnote.countreset-2 {
  counter-reset: numnote 1 !important;
}

ul.numnote.countreset-3 {
  counter-reset: numnote 2 !important;
}

ul.numnote.countreset-4 {
  counter-reset: numnote 3 !important;
}

ul.numnote.countreset-5 {
  counter-reset: numnote 4 !important;
}

ul.numnote.countreset-6 {
  counter-reset: numnote 5 !important;
}

ul.numlist {
  counter-reset: numlist;
}

ul.numlist > li::before {
  content: counter(numlist) ".";
  counter-increment: numlist;
}

ul.numlist-circle {
  counter-reset: numlist-circle;
}

ul.numlist-circle > li {
  padding-left: 1.8em;
}

ul.numlist-circle > li::before {
  content: counter(numlist-circle);
  counter-increment: numlist-circle;
  width: 1.5em;
  height: 1.5em;
  padding-bottom: .1em;
  color: #333;
  background-color: #fff;
  border: solid 1px #333;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  top: calc(1.6 * .5);
  transform: translateY(-50%) scale(0.9);
}

ul.numlist-circle-fill {
  counter-reset: numlist-circle;
}

ul.numlist-circle-fill > li {
  padding-left: 1.8em;
}

ul.numlist-circle-fill > li::before {
  content: counter(numlist-circle);
  counter-increment: numlist-circle;
  width: 1.5em;
  height: 1.5em;
  padding-bottom: .1em;
  color: #fff;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  top: calc(1.6 * .5);
  transform: translateY(-50%) scale(0.9);
}

ul.discnote > li::before {
  content: '' !important;
  width: 1em;
  height: 1em;
  /* top: calc(1.6 * .5); */
  top: .8em;
  transform: translateY(-50%) scale(0.6);
  border-radius: 100%;
  background-color: #333;
}

ul.note ul.note {
  font-size: 1em;
}

/* ---------------------------------------------------
 color
---------------------------------------------------*/
.dblue-d {
  color: #242c4c;
}

.dgray-d {
  color: #515d6b;
}

.dgray {
  color: #d9dee2;
}

.white {
  color: #fff !important;
}

.bg {
  background-color: #020024;
}

.bg-smart {
  /* background-color: #6699be; */
  background-color: #091d39;
}

.bgblue-d {
  background-color: #242c4c;
}

.bggray-d {
  background-color: #515d6b;
}

.bggray {
  background-color: #d9dee2;
}

.bggray-l {
  background-color: #aab5bc;
}

.bgblue-l {
  background-color: #a5abb7;
}

.bggray-smart {
  background-color: #f3f3f3;
}

.bg-beige {
  background-color: #f0ede8;
}

.bg-white {
  background-color: #fff;
}

/* ---------------------------------------------------
 content
---------------------------------------------------*/
.mainContent {
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
}

@media (max-width: 767px) {
  .mainContent {
        padding-top: 0;
    }
}

.mainContent img {
  vertical-align: top;
}

.mainContent figure img {
  width: 100%;
  height: auto;
}

.mainContent sup {
  font-size: .65em;
  vertical-align: .4em;
}

.mainContent sub {
  font-size: .65em;
  vertical-align: -.1em;
}

.mainContent .note {
  font-weight: normal;
  font-size: .8em;
  color: #333;
}

@media all and (-ms-high-contrast: none) {
  .mainContent {
    min-width: 768px;
  }
}

/* mov wrp */
.mov-wrp {
  width: 800px;
  height: 450px;
  margin: 3rem auto 0;
  border: solid 1px #ccc;
}

.mov-wrp iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width:767px) {
  .mov-wrp {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      line-height: 1;
      font-size: 0;
  }
}