@charset "UTF-8";
@font-face {
  font-family: 'icomoon';
  src: url("../../common/css/fonts/icomoon.eot?iq5ole");
  src: url("../../common/css/fonts/icomoon.eot?iq5ole#iefix") format("embedded-opentype"), url("../../common/css/fonts/icomoon.ttf?iq5ole") format("truetype"), url("../../common/css/fonts/icomoon.woff?iq5ole") format("woff"), url("../../common/css/fonts/icomoon.svg?iq5ole#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

/* 数値から単位を除外
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* `px` から `rem` に変換
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
/* `px` から `em` に変換
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

html {
  color: #333; }
  @media screen and (max-width: 767px) {
    html {
      font-size: 26.6666666667vw; } }
  @media screen and (min-width: 768px), print {
    html {
      font-size: 351.3909224012%; } }
  @media screen and (min-width: 768px) {
    html {
      font-size: 7.3206442167vw; } }
  @media screen and (min-width: 1600px), print {
    html {
      font-size: 732.0644216691%; } }
  html.-oldStyle {
    font-size: 625%; }

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans JP', sans-serif; }
  body *,
  body *:before,
  body *:after {
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

@media screen and (min-width: 768px), print {
  body {
    font-size: 0.16rem; } }

@media screen and (max-width: 767px) {
  body {
    font-size: 0.14rem; } }

@media screen and (min-width: 768px), print {
  .-spItem {
    display: none; } }

@media screen and (max-width: 767px) {
  .-spItem {
    display: block; } }

@media screen and (max-width: 767px) {
  .-pcItem {
    display: none; } }

/* object fit image */
img.img-ofi-cover,
img.img-ofi-contain {
  width: 100%;
  height: 100%; }

img.img-ofi-cover {
  object-fit: cover;
  font-family: 'object-fit: cover;'; }

img.img-ofi-contain {
  object-fit: contain;
  font-family: 'object-fit: contain;'; }

.table {
  width: 100%; }
  @media screen and (min-width: 768px), print {
    .table {
      margin-top: 0.55rem; } }
  @media screen and (max-width: 767px) {
    .table {
      margin-top: 9.07vw; } }
  .table:first-child {
    margin-top: 0; }
  .table th,
  .table td {
    border: 1px solid #d2d2d2;
    border-top: none;
    border-right: none;
    border-left: none; }
    @media screen and (min-width: 768px), print {
      .table th,
      .table td {
        padding: 0.34rem; } }
    @media screen and (max-width: 767px) {
      .table th,
      .table td {
        padding: 2.13vw;
        font-size: 4.27vw;
        line-height: 1.6; } }
    .table th:first-child,
    .table td:first-child {
      border-left: none; }
    .table th:last-child,
    .table td:last-child {
      border-right: none; }
  @media screen and (max-width: 767px) {
    .table th {
      background-color: rgba(0, 0, 0, 0.03); } }
  .table th[scope=row] {
    text-align: left; }
    @media screen and (min-width: 768px), print {
      .table th[scope=row] {
        width: 2.09rem;
        border-bottom: 3px solid #007731;
        text-align: left;
        vertical-align: top; } }
  @media screen and (max-width: 767px) {
    .table.-responsive th, .table.-responsive td {
      display: block;
      width: 100%;
      border-left: none;
      border-right: none; }
    .table.-responsive td {
      padding-bottom: 2em; }
    .table.-responsive tr:not(:last-child) td {
      border-bottom: none; } }
@media screen and (min-width: 768px), print {
  .heading3 + .table {
    margin-top: 0.13rem; } }

@media screen and (max-width: 767px) {
  .heading3 + .table {
    margin-top: 0.13rem; } }

.table__head2 {
  text-align: center;
  background-color: #333 !important;
  color: #fff; }

/*pdfリンク*/
[class^="icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:before, [class*=" icon-"]:after, .btn-cmn span:before, .btn-cmn span:after, .nav-anchor span:before, .nav-anchor span:after, .list-link li a:before, .list-link li a:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-pdf {
  color: #fa000a; }

.icon-pdf:before {
  content: "\f1c1"; }

.ttl a {
  color: #333333; }
.ttl a span {
	font-size: 0.7em;
  }


.listDisc__title {
  margin-top: 1em; }
  .listDisc__title:first-child {
    margin-top: 0; }

.listDisc__item {
  position: relative;
  padding-left: 1em;
  line-height: 1.6; }
  .listDisc__item:before {
    content: "";
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: #007731;
    top: .5em;
    line-height: 1.45; }
    @media screen and (min-width: 768px), print {
      .listDisc__item:before {
        width: 0.09rem;
        height: 0.09rem; } }
    @media screen and (max-width: 767px) {
      .listDisc__item:before {
        width: 1.87vw;
        height: 1.87vw; } }
  .planAnchorList .listDisc__item {
    padding-left: 1.3em; }
    .planAnchorList .listDisc__item:before {
      background-color: transparent;
      top: .25em; }
      @media screen and (min-width: 768px), print {
        .planAnchorList .listDisc__item:before {
          border: solid 0.03rem #007731;
          width: 0.18rem;
          height: 0.18rem; } }
      @media screen and (max-width: 767px) {
        .planAnchorList .listDisc__item:before {
          top: .23em;
          border: solid 0.8vw #007731;
          width: 4vw;
          height: 4vw; } }
.listDisc__item + .listDisc__item {
  margin-top: .3em; }

@media screen and (min-width: 768px), print {
  .listDisc + * {
    margin-top: 0.21rem; } }

@media screen and (max-width: 767px) {
  .listDisc + * {
    margin-top: 3.47vw; } }

@media screen and (min-width: 768px), print {
  * + .listDisc {
    margin-top: 0.21rem; } }

@media screen and (max-width: 767px) {
  * + .listDisc {
    margin-top: 3.47vw; } }

.listDl {
  line-height: 1.45; }
  @media screen and (min-width: 768px), print {
    .listDl {
      margin-top: 0.21rem; } }
  @media screen and (max-width: 767px) {
    .listDl {
      margin-top: 3.47vw;
      font-size: 0.16rem; } }
  .listDl:first-child {
    margin-top: 0; }
  .listDl:after {
    content: "";
    display: block;
    clear: both; }

@media screen and (min-width: 768px), print {
  .listDl + .listDisc,
  .listDl + .listDl {
    margin-top: 0.21rem; } }

@media screen and (max-width: 767px) {
  .listDl + .listDisc,
  .listDl + .listDl {
    margin-top: 3.47vw; } }

.listDl + .listDisc:first-child,
.listDl + .listDl:first-child {
  margin-top: 0; }

.listDl__dt {
  clear: both;
  float: left;
  width: 4em; }
  @media screen and (min-width: 768px), print {
    .listDl__dt {
      margin-top: 0.08rem;
      width: 2.5rem; }
      .listDl__dt.-min {
        width: 0.8rem; } }
  @media screen and (max-width: 767px) {
    .listDl__dt {
      margin-top: 0.05rem;
      width: 1.6rem; }
      .listDl__dt.-min {
        width: 0.6rem; }
      .listDl__dt.-large {
        width: 2.1rem; } }
  .listDl__dt:first-child {
    margin-top: 0; }
  .listDl.-type2 .listDl__dt {
    font-weight: normal; }
    @media screen and (min-width: 768px), print {
      .listDl.-type2 .listDl__dt {
        font-size: 0.14rem; } }
    @media screen and (max-width: 767px) {
      .listDl.-type2 .listDl__dt {
        font-size: 0.12rem; } }
.listDl__dd {
  float: left;
  padding-left: .5em;
  margin-top: 1em; }
  @media screen and (min-width: 768px), print {
    .listDl__dd {
      margin-top: 0.08rem; } }
  @media screen and (max-width: 767px) {
    .listDl__dd {
      margin-top: 0.05rem; } }
  .listDl__dd:nth-child(2) {
    margin-top: 0; }
  .listDl.-type2 .listDl__dd {
    font-weight: bold; }
    .listDl.-type2 .listDl__dd .listDl__ddCaption,
    .listDl.-type2 .listDl__dd .note {
      font-weight: normal; }
    .listDl.-type2 .listDl__dd .listDl__ddCaption + .note {
      margin-top: 0; }

.area {
  width: 100%; }
  @media screen and (min-width: 768px), print {
    .area {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 0.55rem; } }
  @media screen and (max-width: 767px) {
    .area {
      margin-top: 0.34rem;
      display: flex;
      flex-direction: column-reverse; } }
.spArealink {
  cursor: pointer; }

@media screen and (min-width: 768px), print {
  .area__mapImage {
    position: sticky;
    top: 0;
    width: 5.13rem;
    height: 7.68rem;
    text-align: center; }
    .area__mapImage img {
      width: 4.45rem;
      height: auto; } }

@media screen and (max-width: 767px) {
  .area__mapImage {
    position: relative; } }

@keyframes floating {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5%); }
  100% {
    transform: translateY(0); } }

.area__mark {
  position: absolute;
  cursor: pointer; }
  @media screen and (max-width: 767px) {
    .area__mark {
      filter: drop-shadow(0 0.03rem 0.02rem rgba(0, 0, 0, 0.3));
      animation: floating 1s infinite normal; }
      body[data-spareaactive="0"] .area__mark .area__markPath {
        fill: #007731; }
      .area__mark:before {
        content: "";
        display: block;
        width: 0.18rem;
        height: 0.18rem;
        position: absolute;
        right: -0.07rem;
        bottom: 0;
        background-image: url(../img/area__mark_plus.svg);
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 1;
        transition: opacity .5s; }
        body:not([data-spareaactive="0"]) .area__mark:before {
          opacity: 0; } }
  .area__mark.-area01 {
    width: 0.66rem;
    height: 0.5rem;
    left: 2.94rem;
    top: 1.85rem; }
    @media screen and (max-width: 767px) {
      .area__mark.-area01 {
        width: 0.49rem;
        height: 0.37rem;
        left: 1.89rem;
        top: 1.45rem; } }
    body[data-spareaactive="1"] .area__mark.-area01 .area__markPath, body[data-areaactive="1"] .area__mark.-area01 .area__markPath {
      fill: #007731; }
  .area__mark.-area02 {
    width: 0.66rem;
    height: 0.5rem;
    left: 1.6rem;
    top: 2.61rem; }
    @media screen and (max-width: 767px) {
      .area__mark.-area02 {
        width: 0.49rem;
        height: 0.37rem;
        left: 0.86rem;
        top: 1.95rem; } }
  @media screen and (max-width: 767px) and (max-width: 767px) {
    .area__mark.-area02:before {
      right: 0.05rem; } }
    body[data-spareaactive="2"] .area__mark.-area02 .area__markPath, body[data-areaactive="2"] .area__mark.-area02 .area__markPath {
      fill: #007731; }
  .area__mark.-area03 {
    width: 0.66rem;
    height: 0.5rem;
    left: 4.11rem;
    top: 4.11rem; }
    @media screen and (max-width: 767px) {
      .area__mark.-area03 {
        width: 0.49rem;
        height: 0.37rem;
        left: 2.78rem;
        top: 3.05rem; } }
    body[data-spareaactive="3"] .area__mark.-area03 .area__markPath, body[data-areaactive="3"] .area__mark.-area03 .area__markPath {
      fill: #007731; }
  .area__mark.-area04 {
    width: 0.5rem;
    height: 0.66rem;
    left: 1.84rem;
    top: 3.58rem; }
    @media screen and (max-width: 767px) {
      .area__mark.-area04 {
        width: 0.37rem;
        height: 0.49rem;
        left: 1.1rem;
        top: 2.57rem; } }
  @media screen and (max-width: 767px) and (max-width: 767px) {
    .area__mark.-area04:before {
      bottom: 0.1rem; } }
    body[data-spareaactive="4"] .area__mark.-area04 .area__markPath, body[data-areaactive="4"] .area__mark.-area04 .area__markPath {
      fill: #007731; }
  .area__mark.-area05 {
    width: 0.5rem;
    height: 0.66rem;
    left: 1.87rem;
    top: 5.42rem; }
    @media screen and (max-width: 767px) {
      .area__mark.-area05 {
        width: 0.37rem;
        height: 0.49rem;
        left: 1.06rem;
        top: 4.13rem; } }
    body[data-spareaactive="5"] .area__mark.-area05 .area__markPath, body[data-areaactive="5"] .area__mark.-area05 .area__markPath {
      fill: #007731; }
  .area__mark svg {
    width: 100%;
    height: 100%; }

.area__markPath {
  fill: #E2E2E2;
  transition: fill .3s; }

@media screen and (min-width: 768px), print {
  .area__blockWrap {
    width: 5.66rem; } }

.area__lead {
  line-height: 1.6; }
  @media screen and (min-width: 768px), print {
    .area__lead {
      font-size: 0.18rem; } }
  @media screen and (max-width: 767px) {
    .area__lead {
      font-size: 0.16rem; } }
  @media screen and (min-width: 768px), print {
    .area__lead > * + p {
      margin-top: 0.34rem; } }
  @media screen and (max-width: 767px) {
    .area__lead > * + p {
      margin-top: 0.21rem; } }
@media screen and (min-width: 768px), print {
  .area__block {
    margin-top: 0.75rem;
    opacity: .3;
    transition: opacity .3s; } }

@media screen and (max-width: 767px) {
  .area__block {
    display: none; } }

body[data-areaactive="1"] .area__block#area01 {
  opacity: 1; }

body[data-areaactive="2"] .area__block#area02 {
  opacity: 1; }

body[data-areaactive="3"] .area__block#area03 {
  opacity: 1; }

body[data-areaactive="4"] .area__block#area04 {
  opacity: 1; }

body[data-areaactive="5"] .area__block#area05 {
  opacity: 1; }

.area__image {
  width: 100%;
  height: auto; }

.area__name {
  font-weight: bold;
  color: #007731;
  position: relative; }
  @media screen and (min-width: 768px), print {
    .area__name {
      font-size: 0.24rem;
      height: 0.55rem;
      padding-left: 0.58rem;
      display: flex;
      align-items: center;
      margin-top: 0.08rem; } }
  @media screen and (max-width: 767px) {
    .area__name {
      font-size: 0.18rem;
      height: 0.34rem;
      padding-left: 0.38rem;
      display: flex;
      align-items: center;
      margin-top: 0.08rem;
      color: #fff; } }
  .area__name.-spNavi {
    color: #007731; }
  .area__name:before {
    content: "";
    font-family: din-2014, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #007731;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; }
    @media screen and (min-width: 768px), print {
      .area__name:before {
        width: 0.43rem;
        height: 0.43rem;
        font-size: 0.24rem;
        border-radius: 50%;
        border: 1px solid #007731;
        border-width: 0.03rem;
        position: absolute;
        top: 50%;
        left: 0.02rem;
        transform: translateY(-50%); } }
    @media screen and (max-width: 767px) {
      .area__name:before {
        width: 0.32rem;
        height: 0.32rem;
        font-size: 0.18rem;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        color: #153821; } }
  @media screen and (max-width: 767px) {
    .area__name.-spNavi:before {
      border: 1px solid #007731;
      border-width: 0.03rem;
      color: #007731; } }
  .area__name.-area01:before {
    content: "1"; }
  .area__name.-area02:before {
    content: "2"; }
  .area__name.-area03:before {
    content: "3"; }
  .area__name.-area04:before {
    content: "4"; }
  .area__name.-area05:before {
    content: "5"; }

.area__text {
  line-height: 1.6; }
  @media screen and (min-width: 768px), print {
    .area__text {
      font-size: 0.18rem; } }
  @media screen and (max-width: 767px) {
    .area__text {
      font-size: 0.16rem;
      margin-top: 0.08rem; } }
.area__note {
  line-height: 1.6; }
  @media screen and (min-width: 768px), print {
    .area__note {
      font-size: 0.12rem;
      margin-top: 0.13rem; } }
  @media screen and (max-width: 767px) {
    .area__note {
      font-size: 0.12rem;
      margin-top: 0.08rem; } }
.contentsBlock {
  position: relative;
  margin: auto; }
  @media screen and (min-width: 768px), print {
    .contentsBlock {
      width: 11.88rem;
      padding: 0.55rem 0 0; } }
  @media screen and (max-width: 767px) {
    .contentsBlock {
      width: 88.8vw;
      padding: 9.07vw 0 0; }
      .outline .contentsBlock {
        padding: 9.07vw 0 0.55rem; } }
#pagetop {
  z-index: 9989;
  position: fixed;
  right: 0;
  opacity: 0;
  transition: 1s;
  pointer-events: none; }
  #pagetop.-active {
    opacity: 1;
    pointer-events: all; }
  @media screen and (min-width: 768px), print {
    #pagetop {
      bottom: 0.78rem; } }
  @media screen and (max-width: 767px) {
    #pagetop {
      bottom: 0.78rem; } }
  #pagetop span {
    display: block;
    text-align: center;
    text-decoration: none;
    background: white;
    color: #007731;
    transition: color .3s, background .3s; }
    @media screen and (min-width: 768px), print {
      #pagetop span {
        font-size: 0.11rem;
        padding: 0.08rem 0.08rem 0.13rem;
        border-radius: 0.04rem 0 0 0.04rem;
        box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.1); } }
    @media screen and (max-width: 767px) {
      #pagetop span {
        font-size: 0.11rem;
        padding: 0.08rem 0.08rem 0.13rem;
        border-radius: 0.04rem 0 0 0.04rem;
        box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.1); } }
    #pagetop span:before {
      line-height: 1.2;
      font-family: 'icomoon';
      content: '\f106';
      display: block; }
      @media screen and (min-width: 768px), print {
        #pagetop span:before {
          font-size: 0.18rem; } }
      @media screen and (max-width: 767px) {
        #pagetop span:before {
          font-size: 0.18rem; } }
    #pagetop span:hover {
      background: #007731;
      color: #fff; }

.footer {
  width: 100%;
  position: relative;
  z-index: 2;
  background-color: #F4F4F4; }
  @media screen and (min-width: 768px), print {
    .footer {
      margin-top: 0.89rem;
      padding-bottom: 0.92rem;
      height: 3.04rem; } }
  @media screen and (max-width: 767px) {
    .footer {
      margin-top: 0.89rem;
      padding: 0.21rem;
      padding-bottom: 0.44rem; }
      .footer:after {
        content: "";
        display: block;
        clear: both; } }
@media screen and (min-width: 768px), print {
  .footer__logo {
    position: absolute;
    width: 3.33rem;
    left: 0.33rem;
    top: 0.48rem; } }

@media screen and (max-width: 767px) {
  .footer__logo {
    width: 2.44rem; } }

@media screen and (min-width: 768px), print {
  .footer__address {
    position: absolute;
    left: 0.34rem;
    top: 1.05rem;
    font-size: 0.16rem;
    line-height: 1.8; } }

@media screen and (max-width: 767px) {
  .footer__address {
    margin-top: 0.05rem;
    line-height: 1.45; } }

.footer__navigation {
  position: absolute; }
  @media screen and (min-width: 768px), print {
    .footer__navigation {
      width: 3.92rem;
      right: 0.34rem;
      top: 0.48rem;
      display: flex;
      justify-content: space-between; } }
  @media screen and (max-width: 767px) {
    .footer__navigation {
      display: none; } }
.footer__navigationLink {
  text-decoration: none;
  color: #333; }
  @media screen and (min-width: 768px), print {
    .footer__navigationLink {
      display: block;
      font-size: 0.18rem;
      padding-left: 0.25rem;
      position: relative;
      transition: color .3s; }
      .footer__navigationLink:before {
        content: "";
        display: block;
        border-radius: 50%;
        background-color: #007731;
        width: 0.2rem;
        height: 0.2rem;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        background-repeat: no-repeat;
        background-position: center 50%;
        background-size: 40% auto;
        background-image: url(img/arrow.svg); }
      .footer__navigationLink:hover {
        color: #007731; } }
.footer__logo2 {
  display: block; }
  @media screen and (min-width: 768px), print {
    .footer__logo2 {
      position: absolute;
      width: 2.22rem;
      height: 0.49rem;
      right: 0.34rem;
      bottom: 0.65rem; } }
  @media screen and (max-width: 767px) {
    .footer__logo2 {
      width: 1.61rem;
      height: 0.36rem;
      margin-top: 0.34rem;
      float: right; } }
  .footer__logo2 img {
    width: 100%;
    height: auto; }

.footer__copyright {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #007731; }
  @media screen and (min-width: 768px), print {
    .footer__copyright {
      padding: 0.13rem 0.08rem;
      font-size: 0.12rem; } }
  @media screen and (max-width: 767px) {
    .footer__copyright {
      padding: 0.08rem;
      font-size: 0.1rem; } }
.googlemap {
  position: relative; }
  .googlemap:before {
    content: "";
    display: block; }
    @media screen and (min-width: 768px), print {
      .googlemap:before {
        padding-top: 41%; } }
    @media screen and (max-width: 767px) {
      .googlemap:before {
        padding-top: 100%;
        margin-top: 0.55rem; } }
  @media screen and (min-width: 768px), print {
    .googlemap {
      margin-top: 0.05rem; } }
  @media screen and (max-width: 767px) {
    .googlemap {
      margin-top: 0.03rem; } }
  .googlemap iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }

.header {
  width: 100%;
  position: absolute;
  z-index: 2; }
  @media screen and (max-width: 767px) {
    .header {
      z-index: 10; } }
  .header:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.89rem;
    background-color: rgba(255, 255, 255, 0.7); }
    @media screen and (max-width: 767px) {
      .header:after {
        height: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .header:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0;
      background-color: #002b0e;
      opacity: 0;
      transition: opacity .5s,height .3s; }
    body.-headerMenuActive .header:before {
      opacity: 1;
      height: 100%; } }
.header__logo {
  position: absolute;
  z-index: 2; }
  @media screen and (min-width: 768px), print {
    .header__logo {
      width: 4.53rem;
      left: 0.33rem;
      top: 0.2rem; } }
  @media screen and (max-width: 767px) {
    .header__logo {
      width: 3.32rem;
      left: 0.12rem;
      top: 0.15rem; } }
.header__navigation {
  position: absolute; }
  @media screen and (min-width: 768px), print {
    .header__navigation {
      width: 3.92rem;
      right: 0.34rem;
      top: 0.31rem;
      display: flex;
      justify-content: space-between;
      z-index: 2; } }
  @media screen and (max-width: 767px) {
    .header__navigation {
      position: relative;
      width: 2.5rem;
      left: 50%;
      top: 0;
      padding-top: 0.78rem;
      padding-bottom: 0.34rem;
      transform: translateX(-50%);
      z-index: 8;
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none; }
      body.-headerMenuActive .header__navigation {
        opacity: 1;
        transition-delay: .3s; }
      body.-headerMenuActive .header__navigation {
        pointer-events: all; } }
  @media screen and (max-width: 767px) {
    .header__navigation > li + li {
      border-top: 1px solid #fff; } }
.header__navigationLink {
  text-decoration: none;
  color: #333; }
  .header__navigationLink:before {
    content: "";
    display: block;
    border-radius: 50%;
    background-color: #007731;
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: 40% auto;
    background-image: url(img/arrow.svg); }
  @media screen and (min-width: 768px), print {
    .header__navigationLink {
      display: block;
      font-size: 0.18rem;
      padding-left: 0.25rem;
      position: relative;
      transition: color .3s; }
      .header__navigationLink:hover {
        color: #007731; } }
  @media screen and (max-width: 767px) {
    .header__navigationLink {
      display: block;
      color: #fff;
      font-size: 0.18rem;
      padding-top: 0.21rem;
      padding-bottom: 0.21rem;
      padding-left: 0.25rem;
      position: relative; } }
.header__menuButton {
  position: absolute;
  top: 0.21rem;
  right: 0.21rem;
  width: 0.21rem;
  height: 0.16rem;
  z-index: 9; }
  @media screen and (min-width: 768px), print {
    .header__menuButton {
      display: none; } }
  .header__menuButton span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #007731;
    border-radius: 0.02rem;
    transform-origin: center;
    top: 50%;
    margin-top: -1px; }
    .header__menuButton span:nth-of-type(1) {
      transform: translateY(-0.07rem); }
      body.-headerMenuActive .header__menuButton span:nth-of-type(1) {
        transform: rotate(-45deg) translateY(0); }
    body.-headerMenuActive .header__menuButton span:nth-of-type(2) {
      opacity: 0; }
    .header__menuButton span:nth-of-type(3) {
      transform: translateY(0.07rem); }
      body.-headerMenuActive .header__menuButton span:nth-of-type(3) {
        transform: rotate(45deg) translateY(0); }

.heading2 {
  width: 100%;
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  background-color: #007731;
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .heading2 {
      width: 3.43rem;
      padding: 0.46rem 0;
      margin-bottom: -0.55rem; } }
  @media screen and (max-width: 767px) {
    .heading2 {
      width: 2.15rem;
      padding: 0.34rem 0;
      margin-bottom: -0.34rem; } }
.heading2__english {
  display: block;
  font-weight: normal;
  color: #fff; }
  @media screen and (min-width: 768px), print {
    .heading2__english {
      font-size: 0.14rem; } }
  @media screen and (max-width: 767px) {
    .heading2__english {
      font-size: 0.12rem; } }
.heading2__japanese {
  display: block;
  font-weight: bold;
  color: #fff; }
  @media screen and (min-width: 768px), print {
    .heading2__japanese {
      font-size: 0.39rem;
      margin-top: 0.13rem; } }
  @media screen and (max-width: 767px) {
    .heading2__japanese {
      font-size: 0.21rem;
      margin-top: 0.08rem; } }
.heading3 {
  color: #007731; }
  @media screen and (min-width: 768px), print {
    .heading3 {
      font-size: 0.24rem;
      margin-top: 0.13rem; } }
  @media screen and (max-width: 767px) {
    .heading3 {
      font-size: 0.16rem;
      margin-top: 0.08rem; } }
  @media screen and (max-width: 767px) {
    .outline .heading3:first-child {
      margin-top: 0.34rem; } }
@media screen and (min-width: 768px), print {
  * + .heading3 {
    margin-top: 0.89rem; } }

@media screen and (max-width: 767px) {
  * + .heading3 {
    margin-top: 0.55rem; } }

.introductionVisual {
  width: 100%;
  position: relative; }

@media screen and (min-width: 768px), print {
  .introductionVisual__image {
    left: 0;
    top: 0;
    width: 11.88rem;
    height: 8.37rem; } }

@media screen and (max-width: 767px) {
  .introductionVisual__image {
    width: 100%;
    height: auto; } }

.introductionVisual__marker {
  position: absolute;
  border-radius: 0.13rem;
  opacity: 0;
  background-color: rgba(255, 0, 0, 0.21);
  pointer-events: none;
  transition: opacity .3s; }

.introductionVisual__button {
  position: absolute;
  z-index: 2;
  font-weight: bold;
  background-color: #fff;
  color: #007731;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: background-color .3s , color .3s;
  cursor: pointer; }
  .introductionVisual__button:hover {
    background-color: #007731;
    color: #fff; }
    .introductionVisual__button:hover + .introductionVisual__marker {
      opacity: 1; }
  .introductionVisual__button:before {
    content: "";
    font-family: din-2014, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #007731;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; }
    @media screen and (min-width: 768px), print {
      .introductionVisual__button:before {
        width: 0.43rem;
        height: 0.43rem;
        font-size: 0.24rem;
        border-radius: 50%;
        border: 1px solid #007731;
        border-width: 0.03rem;
        position: absolute;
        top: 50%;
        left: 0.06rem;
        transform: translateY(-50%); } }
  @media screen and (min-width: 768px), print {
    .introductionVisual__button {
      font-size: 0.18rem;
      height: 0.55rem;
      border-radius: 0.53rem;
      padding-right: 0.34rem;
      padding-left: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .introductionVisual__button {
      font-size: 0.16rem;
      display: none; } }
  .introductionVisual__button.-area01:before {
    content: "1"; }
  @media screen and (min-width: 768px), print {
    .introductionVisual__button.-area01 {
      top: 3.44rem;
      left: 0.5rem; }
      .introductionVisual__button.-area01 + .introductionVisual__marker {
        width: 2.66rem;
        height: 1.19rem;
        left: 2.47rem;
        top: 3.42rem; } }
  .introductionVisual__button.-area02:before {
    content: "2"; }
  @media screen and (min-width: 768px), print {
    .introductionVisual__button.-area02 {
      top: 1.15rem;
      left: 9.04rem; }
      .introductionVisual__button.-area02 + .introductionVisual__marker {
        width: 5.43rem;
        height: 2.2rem;
        left: 5.29rem;
        top: 1.3rem; } }
  .introductionVisual__button.-area03:before {
    content: "3"; }
  @media screen and (min-width: 768px), print {
    .introductionVisual__button.-area03 {
      top: 3.66rem;
      left: 9.13rem; }
      .introductionVisual__button.-area03 + .introductionVisual__marker {
        width: 2rem;
        height: 2.67rem;
        left: 7.22rem;
        top: 2.85rem; } }
  .introductionVisual__button.-area04:before {
    content: "4"; }
  @media screen and (min-width: 768px), print {
    .introductionVisual__button.-area04 {
      top: 5.6rem;
      left: 4.17rem; }
      .introductionVisual__button.-area04 + .introductionVisual__marker {
        width: 2.88rem;
        height: 2.78rem;
        left: 5.94rem;
        top: 5.09rem; } }
  .introductionVisual__button.-area05:before {
    content: "5"; }
  @media screen and (min-width: 768px), print {
    .introductionVisual__button.-area05 {
      top: 6.51rem;
      left: 9.75rem; }
      .introductionVisual__button.-area05 + .introductionVisual__marker {
        width: 1.95rem;
        height: 1.52rem;
        left: 8.93rem;
        top: 5.66rem; } }
.mainVisual {
  width: 100%;
  position: relative;
  opacity: 0;
  transition: opacity 1s;
  overflow: hidden; }
  body.-mainVisualLoaded .mainVisual {
    opacity: 1; }
  @media screen and (min-width: 768px), print {
    .mainVisual {
      height: 8.12rem; } }
  @media screen and (max-width: 767px) and (max-aspect-ratio: 375/812) {
    .mainVisual {
      height: 189vw !important; } }
.swiper-pagination {
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: 1rem !important;
  z-index: 2; }
  @media screen and (max-width: 767px) {
    .swiper-pagination {
      bottom: 0.34rem; } }
  .swiper-pagination .swiper-pagination-bullet {
    display: inline-block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    border-radius: 50%;
    width: 0.08rem;
    height: 0.08rem;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.52);
    margin-left: 0.05rem !important;
    margin-right: 0.05rem !important; }
    .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: #fff; }

.swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.swiper-slide {
  height: 100%;
  overflow: hidden; }

.mainVisual__copy {
  position: absolute;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse; }
  @media screen and (min-width: 768px), print {
    .mainVisual__copy {
      top: 1.56rem;
      width: 4.2rem;
      right: 50%;
      margin-right: 1.69rem; } }
  @media screen and (max-width: 767px) {
    .mainVisual__copy {
      width: 2.35rem;
      top: 1.03rem;
      left: 50%;
      transform: translateX(-50%); } }
  .mainVisual__copy.-background {
    mix-blend-mode: multiply; }

.mainVisual__copyImageWrap {
  display: inline-block;
  position: relative; }
  @media screen and (min-width: 768px), print {
    .mainVisual__copyImageWrap {
      padding: 0.34rem; } }
  @media screen and (max-width: 767px) {
    .mainVisual__copyImageWrap {
      padding: 0.19rem; } }
  .mainVisual__copyImageWrap:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }

.mainVisual__copyImage {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 2s; }
  body.-mainVisualLoaded .mainVisual__copyImage {
    opacity: 1; }
  .mainVisual__copy01 .mainVisual__copyImage {
    transition-delay: 1s; }
  .mainVisual__copy02 .mainVisual__copyImage {
    transition-delay: 1.5s; }
  .mainVisual__copy03 .mainVisual__copyImage {
    transition-delay: 2s; }

.mainVisual__copyBackground {
  background-color: #45A362;
  display: inline-block;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1s; }
  body.-isIE .mainVisual__copyBackground {
    background-color: rgba(0, 70, 22, 0.66); }
  body.-mainVisualLoaded .mainVisual__copyBackground {
    transform: scaleY(1); }
  .mainVisual__copy01 .mainVisual__copyBackground {
    transition-delay: .5s; }
  .mainVisual__copy02 .mainVisual__copyBackground {
    transition-delay: 1s; }
  .mainVisual__copy03 .mainVisual__copyBackground {
    transition-delay: 1.5s; }

@media screen and (min-width: 768px), print {
  .mainVisual__copy01 .mainVisual__copyImage,
  .mainVisual__copy01 .mainVisual__copyBackground {
    width: 1.09rem;
    height: 2.69rem; } }

@media screen and (max-width: 767px) {
  .mainVisual__copy01 .mainVisual__copyImage,
  .mainVisual__copy01 .mainVisual__copyBackground {
    width: 0.58rem;
    height: 1.45rem; } }

@media screen and (min-width: 768px), print {
  .mainVisual__copy02 {
    padding-top: 0.55rem; } }

@media screen and (max-width: 767px) {
  .mainVisual__copy02 {
    padding-top: 0.28rem; } }

@media screen and (min-width: 768px), print {
  .mainVisual__copy02 .mainVisual__copyImage,
  .mainVisual__copy02 .mainVisual__copyBackground {
    width: 1.76rem;
    height: 3.97rem; } }

@media screen and (max-width: 767px) {
  .mainVisual__copy02 .mainVisual__copyImage,
  .mainVisual__copy02 .mainVisual__copyBackground {
    width: 0.94rem;
    height: 2.13rem; } }

@media screen and (min-width: 768px), print {
  .mainVisual__copy03 {
    padding-top: 1.82rem; } }

@media screen and (max-width: 767px) {
  .mainVisual__copy03 {
    padding-top: 0.94rem; } }

@media screen and (min-width: 768px), print {
  .mainVisual__copy03 .mainVisual__copyImage,
  .mainVisual__copy03 .mainVisual__copyBackground {
    width: 1.09rem;
    height: 3.14rem; } }

@media screen and (max-width: 767px) {
  .mainVisual__copy03 .mainVisual__copyImage,
  .mainVisual__copy03 .mainVisual__copyBackground {
    width: 0.59rem;
    height: 1.76rem; } }

.mainVisual__loadingElement {
  transition: transform 15s;
  will-change: transform;
  transform: scale(1.1); }
  .swiper-slide-active .mainVisual__loadingElement {
    transform: scale(1); }
  @media screen and (max-width: 767px) {
    .mainVisual__loadingElement {
      transform: scale(1.3); }
      .swiper-slide-active .mainVisual__loadingElement {
        transform: scale(1.2); } }
@media screen and (min-width: 768px), print {
  .meritWrap {
    margin-top: 0.98rem; } }

@media screen and (max-width: 767px) {
  .meritWrap {
    margin-top: 0.46rem; } }

.mainLead {
  line-height: 1.6; }
  @media screen and (min-width: 768px), print {
    .mainLead {
      font-size: 0.18rem;
      text-align: center; } }
  @media screen and (max-width: 767px) {
    .mainLead {
      font-size: 0.16rem; } }
  .mainLead > p + p {
    margin-top: 0.34rem; }

#merit {
  position: relative; }

.meritWrap {
  width: 100%;
  position: relative;
  overflow: hidden; }
  .meritWrap:after, .meritWrap:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; }
    @media screen and (min-width: 768px), print {
      .meritWrap:after, .meritWrap:before {
        height: calc(100% - 1.3rem); } }
    @media screen and (max-width: 767px) {
      .meritWrap:after, .meritWrap:before {
        height: calc(100% - 1.66rem); } }
  .meritWrap:before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
    @media screen and (min-width: 768px), print {
      .meritWrap:before {
        background-image: url("/mbp/img/mainvisual01@2x.jpg");
        background-attachment: fixed; } }
    @media screen and (max-width: 767px) {
      .meritWrap:before {
        background-image: url("/mbp/img/mainvisual01_sp@2x.jpg"); } }
  .meritWrap:after {
    background-color: #007731;
    mix-blend-mode: multiply; }
    body.-isIE .meritWrap:after {
      background-color: rgba(0, 70, 22, 0.66); }
  @media screen and (min-width: 768px), print {
    .meritWrap {
      padding-bottom: 1.05rem; } }
  @media screen and (max-width: 767px) {
    .meritWrap {
      padding-bottom: 0.55rem; } }
  .meritWrap .contentsBlock {
    position: relative;
    z-index: 2; }

.merit__title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  line-height: 1; }
  @media screen and (min-width: 768px), print {
    .merit__title {
      font-size: 0.39rem;
      margin-top: 0.52rem; } }
  @media screen and (max-width: 767px) {
    .merit__title {
      font-size: 0.21rem;
      margin-top: 0.31rem; } }
@media screen and (min-width: 768px), print {
  .merit {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem; } }

@media screen and (max-width: 767px) {
  .merit {
    margin-top: 0.21rem; } }

.merit__item {
  position: relative; }
  @media screen and (min-width: 768px), print {
    .merit__item {
      width: 3.6rem;
      padding: 0.55rem 0;
      height: auto !important; } }
  @media screen and (max-width: 767px) {
    .merit__item {
      width: 100%;
      height: auto !important;
      padding: 0.34rem 0 0.4rem; } }
  .merit__item:before, .merit__item:after {
    content: "";
    position: absolute;
    bottom: 0;
    border: solid #44C714 1px; }
    @media screen and (min-width: 768px), print {
      .merit__item:before, .merit__item:after {
        width: 0.34rem;
        height: 0.34rem; } }
    @media screen and (max-width: 767px) {
      .merit__item:before, .merit__item:after {
        width: 0.34rem;
        height: 0.34rem; } }
  .merit__item:before {
    border-color: transparent transparent #44C714 #44C714; }
  .merit__item:after {
    right: 0;
    border-color: transparent #44C714 #44C714 transparent; }

@media screen and (max-width: 767px) {
  .merit__item + .merit__item {
    margin-top: 0.31rem; } }

.merit__term {
  text-align: center;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  @media screen and (min-width: 768px), print {
    .merit__term {
      font-size: 0.24rem;
      min-height: 0.55rem; } }
  @media screen and (max-width: 767px) {
    .merit__term {
      font-size: 0.18rem; } }
.merit__termSub {
  display: block; }
  @media screen and (min-width: 768px), print {
    .merit__termSub {
      font-size: 0.14rem;
      margin-top: 0.08rem; } }
  @media screen and (max-width: 767px) {
    .merit__termSub {
      font-size: 0.12rem;
      margin-top: 0.05rem; } }
.merit__image {
  display: block;
  width: 100%;
  height: auto; }
  @media screen and (max-width: 767px) {
    .merit__image {
      width: 80%;
      position: relative;
      margin-left: auto;
      margin-right: auto; } }
.merit__text {
  color: #fff;
  line-height: 1.6; }
  @media screen and (min-width: 768px), print {
    .merit__text {
      font-size: 0.18rem;
      margin-top: 0.08rem; } }
  @media screen and (max-width: 767px) {
    .merit__text {
      font-size: 0.16rem;
      margin-top: 0.05rem; } }
  .merit__text:before, .merit__text:after {
    content: "";
    position: absolute;
    top: 0;
    border: solid #44C714 1px; }
    @media screen and (min-width: 768px), print {
      .merit__text:before, .merit__text:after {
        width: 0.34rem;
        height: 0.34rem; } }
    @media screen and (max-width: 767px) {
      .merit__text:before, .merit__text:after {
        width: 0.34rem;
        height: 0.34rem; } }
  .merit__text:before {
    border-color: #44C714 transparent transparent #44C714; }
  .merit__text:after {
    right: 0;
    border-color: #44C714 #44C714 transparent transparent; }

.merit-button-prev,
.merit-button-next {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  top: 35%;
  transform: translateY(-50%); }
  body[data-modal="show"] .merit-button-prev, body[data-modal="show"] .merit-button-next {
    display: block; }
  @media screen and (min-width: 768px), print {
    .merit-button-prev,
    .merit-button-next {
      right: 0.4rem;
      width: 1rem;
      height: 1rem;
      display: none; } }
  @media screen and (max-width: 767px) {
    .merit-button-prev,
    .merit-button-next {
      right: 0.08rem;
      width: 0.34rem;
      height: 0.34rem;
      border-radius: 50%;
      background-color: #007731; } }
  .merit-button-prev:before,
  .merit-button-next:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid #fff;
    border-color: #fff #fff transparent transparent;
    transform-origin: center center;
    transform: translateX(-50%) translateY(-50%) rotate(-135deg); }
    @media screen and (min-width: 768px), print {
      .merit-button-prev:before,
      .merit-button-next:before {
        width: 0.34rem;
        height: 0.34rem; } }
    @media screen and (max-width: 767px) {
      .merit-button-prev:before,
      .merit-button-next:before {
        width: 0.08rem;
        height: 0.08rem; } }
  .merit-button-prev:after,
  .merit-button-next:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0.55rem;
    height: 0.55rem; }

.merit-button-prev {
  right: auto; }
  @media screen and (min-width: 768px), print {
    .merit-button-prev {
      left: 0.4rem; } }
  @media screen and (max-width: 767px) {
    .merit-button-prev {
      left: -0.13rem; } }
  @media screen and (max-width: 767px) {
    .merit-button-prev:before {
      margin-left: 0.015rem; } }
@media screen and (max-width: 767px) {
  .merit-button-next {
    right: -0.13rem; } }

.merit-button-next:before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg); }
  @media screen and (max-width: 767px) {
    .merit-button-next:before {
      margin-left: -0.015rem;
      transform: translateX(-50%) translateY(-50%) rotate(45deg); } }
#modalBackground {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s,background-color .3s; }
  body.-modalBackgroundFadeOut #modalBackground {
    background-color: rgba(0, 0, 0, 0.5); }

body[data-modal="show"] #modalBackground {
  pointer-events: all;
  opacity: 1; }

#modal {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  width: 100%;
  height: auto;
  background-color: #153821;
  color: #fff;
  transition: opacity 0.5s, top 0.1s; }
  @media screen and (min-width: 768px), print {
    #modal {
      width: 11.96rem;
      padding: 1.05rem 1.5rem;
      position: absolute; } }
  @media screen and (max-width: 767px) {
    #modal {
      width: 3.24rem;
      padding: 0.21rem 0.24rem;
      position: absolute; } }
  body[data-modal="show"] #modal {
    opacity: 1;
    pointer-events: all; }
  #modal.-fadeOut {
    opacity: 0 !important; }

.modal__link {
  cursor: pointer; }
  body[data-modal="lock"] .modal__link {
    pointer-events: none; }

.modal__contents {
  display: none; }

.modal__close {
  cursor: pointer;
  position: absolute;
  z-index: 9999; }
  @media screen and (min-width: 768px), print {
    .modal__close {
      top: 0.21rem;
      right: 0.21rem;
      width: 0.55rem;
      height: 0.55rem; } }
  @media screen and (max-width: 767px) {
    .modal__close {
      margin-bottom: -0.34rem;
      top: -0.34rem;
      right: -0.08rem;
      width: 0.34rem;
      height: 0.34rem; } }
  .modal__close:before, .modal__close:after {
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #d3d3d3; }
    @media screen and (min-width: 768px), print {
      .modal__close:before, .modal__close:after {
        width: 0.55rem; } }
    @media screen and (max-width: 767px) {
      .modal__close:before, .modal__close:after {
        width: 0.21rem; } }
  .modal__close:before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg); }
  .modal__close:after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg); }

.modal__prev,
.modal__next {
  cursor: pointer;
  position: absolute;
  z-index: 9999;
  top: 50%;
  display: none;
  transform: translateY(-50%); }
  body[data-modal="show"] .modal__prev, body[data-modal="show"] .modal__next {
    display: block; }
  @media screen and (min-width: 768px), print {
    .modal__prev,
    .modal__next {
      right: 0.4rem;
      width: 1rem;
      height: 1rem; } }
  @media screen and (max-width: 767px) {
    .modal__prev,
    .modal__next {
      right: 0.08rem;
      width: 0.34rem;
      height: 0.34rem;
      border-radius: 50%;
      background-color: #007731; } }
  .modal__prev:before,
  .modal__next:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid #fff;
    border-color: #fff #fff transparent transparent;
    transform-origin: center center;
    transform: translateX(-50%) translateY(-50%) rotate(-135deg); }
    @media screen and (min-width: 768px), print {
      .modal__prev:before,
      .modal__next:before {
        width: 0.34rem;
        height: 0.34rem; } }
    @media screen and (max-width: 767px) {
      .modal__prev:before,
      .modal__next:before {
        width: 0.08rem;
        height: 0.08rem; } }
  .modal__prev:after,
  .modal__next:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0.55rem;
    height: 0.55rem; }
  #modal.-pasteImageWrap .modal__prev, #modal.-pasteImageWrap .modal__next {
    display: none; }

.modal__prev {
  right: auto; }
  @media screen and (min-width: 768px), print {
    .modal__prev {
      left: 0.4rem; } }
  @media screen and (max-width: 767px) {
    .modal__prev {
      left: -0.18rem; } }
  @media screen and (max-width: 767px) {
    .modal__prev:before {
      margin-left: 0.015rem; } }
@media screen and (max-width: 767px) {
  .modal__next {
    right: -0.18rem; } }

.modal__next:before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg); }
  @media screen and (max-width: 767px) {
    .modal__next:before {
      margin-left: -0.015rem;
      transform: translateX(-50%) translateY(-50%) rotate(45deg); } }
.youtube__time {
  text-align: right;
  color: #007731; }
  @media screen and (min-width: 768px), print {
    .youtube__time {
      font-size: 0.14rem; } }
  @media screen and (max-width: 767px) {
    .youtube__time {
      font-size: 0.12rem; } }
.youtube {
  position: relative;
  overflow: hidden; }
  .youtube:before {
    content: "";
    display: block;
    padding-top: 56.3%; }
  @media screen and (min-width: 768px), print {
    .youtube {
      margin-top: 0.05rem; } }
  @media screen and (max-width: 767px) {
    .youtube {
      margin-top: 0.05rem; } }
  .youtube iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }

.youtube__cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 1;
  transition: opacity 1s; }
  .youtube.-play .youtube__cover {
    opacity: 0;
    pointer-events: none; }
  .youtube__cover img {
    width: 100%;
    height: 100%; }
  .youtube__cover:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(21, 30, 32, 0.18); }

.youtube__playButton {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-radius: 50%;
  background: rgba(68, 199, 20, 0.82);
  z-index: 3;
  cursor: pointer;
  transition: transform .3s; }
  .youtube__playButton:hover {
    transform: translateX(-50%) translateY(-50%) scale(1.1); }
  @media screen and (min-width: 768px), print {
    .youtube__playButton {
      width: 1.44rem;
      height: 1.44rem; } }
  @media screen and (max-width: 767px) {
    .youtube__playButton {
      width: 0.73rem;
      height: 0.73rem; } }
  .youtube__playButton img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%); }
    @media screen and (min-width: 768px), print {
      .youtube__playButton img {
        width: 0.44rem;
        height: 0.53rem;
        margin-left: 0.08rem; } }
    @media screen and (max-width: 767px) {
      .youtube__playButton img {
        width: 0.22rem;
        height: 0.27rem;
        margin-left: 0.05rem; } }
@media screen and (min-width: 768px), print {
  .outline {
    margin-top: 1.44rem; } }

@media screen and (max-width: 767px) {
  .outline {
    margin-top: 0.89rem; } }

.outline__inner {
  background-color: #F4F4F4; }
  @media screen and (min-width: 768px), print {
    .outline__inner {
      padding-bottom: 0.89rem; } }
.way {
  position: relative; }
  @media screen and (min-width: 768px), print {
    .way {
      display: flex;
      justify-content: space-between;
      margin-top: 0.42rem; } }
  @media screen and (max-width: 767px) {
    .way {
      margin-top: 0.55rem; } }
  .way img {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (min-width: 768px), print {
      .way img {
        margin-bottom: 0.21rem; } }
    @media screen and (max-width: 767px) {
      .way img {
        margin-bottom: 0.13rem; } }
.way__image2 {
  width: 100%;
  height: auto; }
  @media screen and (min-width: 768px), print {
    .way__image2 {
      margin-top: 0.21rem; } }
  @media screen and (max-width: 767px) {
    .way__image2 {
      margin-top: 3.47vw; } }
@media screen and (min-width: 768px), print {
  .way__item {
    width: 3.59rem; } }

@media screen and (min-width: 768px), print {
  .way__item:first-child:before, .way__item:first-child:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #d2d2d2;
    position: absolute;
    top: 0; }
  .way__item:first-child:after {
    left: 32.5%; }
  .way__item:first-child:before {
    left: 67.5%; } }

@media screen and (max-width: 767px) {
  .way__item + .way__item {
    margin-top: 0.34rem;
    border-top: 1px solid rgba(210, 210, 210, 0.5);
    padding-top: 0.34rem; } }

.way__title {
  text-align: center;
  font-weight: bold; }
  @media screen and (min-width: 768px), print {
    .way__title {
      font-size: 0.18rem; } }
  @media screen and (max-width: 767px) {
    .way__title {
      font-size: 0.18rem; } }