﻿@charset "UTF-8";
a:hover {
  opacity: 0.7;
}

img {
  height: auto;
}

.link-arrow_l {
  display: block;
  position: relative;
  padding-left: 40px;
}

.btn-border {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  padding: 15px 0;
  border: 1px solid #000;
  text-align: center;
}

.link-arrow_l::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 20px;
  width: 6px;
  height: 6px;
  border-right: 1px #000 solid;
  border-bottom: 1px #000 solid;
  transform: rotate(-45deg);
  margin-top: -4px;
}

.guide .wrapper {
  padding-top: 0;
}

.guide .pane-main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

.guide .inner {
  margin: 0 auto;
  max-width: 1200px;
}

.guide-header {
  color: #fff;
  background: #000;
}

.guide-header .inner {
  position: relative;
  padding: 8px 0;
}

.guide-header .title {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
position: relative;
  padding-bottom: 28px;
}

.guide-header .title .small {
  margin-right: 10px;
  font-size: 1rem;
  font-weight: normal;
}

.guide-header .title .web-manual-text {
    font-size: 0.562rem;
    padding: 2px 1.075rem;
    border: 1px solid #fff;
    display: inline-block;
    position: absolute;
    bottom: 0;
}

.guide-header .logo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0,-50%);
  display: inline-block;
}

.guide-header .logo img {
  vertical-align: bottom;
  width: 100px;
}

.guide-nav {
  padding: 30px 0;
}

.guide-content {
  margin: 0 auto;
  max-width: 850px;
}

.guide-image {
  margin-bottom: 40px;
  text-align: center;
}

.guide-image figcaption {
  margin-top: 25px;
  font-size: 1.2rem;
  line-height: 1.7;
}

.info-block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.info-block-item {
  width: calc((100% - 50px) / 2);
}

.info-content:not(:last-child) {
  margin-bottom: 70px;
}

.info-title {
  margin: 0 auto 25px;
  padding: 8px 22px;
  background: #E6E7E9;
  font-weight: bold;
  font-size: 1.8rem;
  border-radius: 50vh;
}

.info-content-inner {
  padding: 0 10px;
}

.info-content-inner:not(:last-child) {
  margin-bottom: 30px;
}

.info-content p:not(:last-child) {
  margin-bottom: 20px;
}

.info-content a:not(:last-child) {
  margin-bottom: 15px;
}

.info-content-inner .btn-border {
  width: 86.842105263%;
}

.guide-footer {
  background: #000;
}

.guide-footer-nav {
  padding: 25px 0;
}

.block-footernav--item-list {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-footernav--item-list li {
  position: relative;
  padding-right: 21px;
  margin-right: 21px;
}

.block-footernav--item-list li:last-child {
  margin-right: 0;
  padding-right: 0;
}

.block-footernav--item-list li:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 12px;
  background-color: #D2D2D2;
  top: 50%;
  margin-top: -6px;
  right: 0;
}

.block-footernav--item-list li a {
  font-size: 0.88rem;
  color: #fff;
}

.block-copyright {
  text-align: center;
  padding: 0 0 10px;
  color: #fff;
  font-size: 0.86rem;
}

.app-block {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 30px 30px;
}

.app-block-item:nth-child(odd) {
  margin-right: 35px;
}

.app-block-item figcaption {
  font-size: 1.4rem;
  text-align: center;
}

.app-block-item a {
  display: inline-block;
  margin-bottom: 20px;
}

.app-block-item a img {
  vertical-align: bottom;
}

@media screen and (max-width : 767px) {
  .guide .wrapper {
    width: 100%;
    min-width: unset;
  }

  .guide .inner {
    width: 92vw;
  }

  .guide-header .title {
    font-size: 2rem;
  }

  .guide-header .title .small {
    font-size: 0.7rem;
  }

  .guide-header .logo img {
    width: 20vw;
  }

  .guide-nav {
    padding: 5.33333333333vw 0;
  }

  .info-block {
    flex-direction: column;
  }

  .info-block-item {
    margin-bottom: 16vw;
    width: 100%;
  }

  .guide-footer-nav {
    margin-bottom: 0;
  }

  .info-block-item:last-child {
    margin-bottom: 0;
  }

  .block-footernav--item-list {
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .block-footernav--item-list li {
    margin-bottom: 25px;
  }

  .block-footernav--item-list li:nth-child(2n)::after {
    display: none;
  }

  .block-footernav--item-list li a {
    font-size: 0.8rem;
  }

  .block-copyright {
    font-size: 0.6rem;
  }

  .app-block {
    margin: 0 auto 30px;
  }
}