@charset "UTF-8";

/* HTML5 display-role reset for older browsers */
.fs-l-main article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

.fs-l-main table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
@mixin fontsize($size: 24, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}
*/
/* 汎用クラス */
.opacity {
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

.box_size {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.fs-l-main img {
  /*width: 100%;*/
  vertical-align: bottom;
}

@media screen and (max-width: 1200px) {
  img {
    width: 100%;
  }
}

hr {
  border: none;
  border-top: solid 1px #ccc;
  margin: 5em auto 0;
}

@media screen and (max-width: 800px) {
  hr {
    margin: 3em auto 0;
  }
}

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

.fs-l-main a {
  color: #333;
  text-decoration: none;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.fs-l-main a:link {
  color: #333;
}

.fs-l-main a:visited {
  color: #333;
}

.fs-l-main a:hover {
  text-decoration: none;
  color: #333;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.fs-l-main a:active {
  color: #333;
}

.fs-l-main a:focus {
  outline: none !important;
}

.fs-l-main a img {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fs-l-main a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

@media screen and (max-width: 800px) {
  a:hover {
    color: #333;
  }
  a:hover img {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

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

.brSP {
  display: none;
}

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

@media only screen and (max-width: 440px) {
  .brSP {
    display: block;
  }
}

/*----------------------------------------------------
  枠・見出し共通
----------------------------------------------------*/
.content {
  width: 1200px;
  margin: 6em auto 0;
  padding: 0;
  overflow: hidden;
  line-height: 1.8em;
}

.content.top {
  margin: 12em auto 0;
}

@media screen and (max-width: 1200px) {
  .content.top {
    margin: 9em auto 0;
  }
}

@media screen and (max-width: 900px) {
  .content.top {
    margin: 8em auto 0;
  }
}

@media only screen and (max-width: 440px) {
  .content.top {
    margin: 7em auto 0;
  }
}

@media screen and (max-width: 1200px) {
  .content {
    width: 92%;
  }
}

@media screen and (max-width: 800px) {
  .content {
    width: 94%;
    margin: 3em auto 0;
  }
}

@media only screen and (max-width: 440px) {
  .content {
    margin: 2em auto 0;
  }
}

.fs-l-main h1 {
  margin: 0 auto;
  padding-top: 5em;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .fs-l-main h1 {
    width: 80%;
  }
}

h2 {
  font-size: 3.6rem;
  color: #0191DB;
  font-weight: 500;
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 800px) {
  h2 {
    font-size: 2.4rem;
  }
}

h3 {
  font-size: 3.2rem;
  color: #333;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 50px;
}

@media screen and (max-width: 800px) {
  h3 {
    font-size: 2.6rem;
  }
}

h4 {
  position: relative;
  font-size: 3.2rem;
  color: #000;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: solid 5px #0191DB;
  padding: 1em 2em;
  margin-top: 40px;
}

@media screen and (max-width: 800px) {
  h4 {
    letter-spacing: 0;
    padding: 0.8em 4em 0.8em 0.8em;
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 440px) {
  h4 {
    padding: 0.8em;
    font-size: 1.8rem;
    border: solid 3px #0191DB;
  }
}

.ttlBox {
  position: relative;
  height: 6em;
  margin-bottom: 50px;
}

@media screen and (max-width: 800px) {
  .ttlBox {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 440px) {
  .ttlBox {
    height: 3.5em;
  }
}

.ttlBox.ico01::after {
  content: url("./ico_h4_01.png");
  position: absolute;
  right: 1em;
  top: -2.2em;
}

@media screen and (max-width: 800px) {
  .ttlBox.ico01::after {
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
    right: 0;
  }
}

@media only screen and (max-width: 440px) {
  .ttlBox.ico01::after {
    content: "";
  }
}

.ttlBox.ico02::after {
  content: url("./ico_h4_02.png");
  position: absolute;
  right: 1em;
  top: -2.2em;
}

@media screen and (max-width: 800px) {
  .ttlBox.ico02::after {
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
    right: 0;
  }
}

@media only screen and (max-width: 440px) {
  .ttlBox.ico02::after {
    content: "";
  }
}

.ttlBox.ico03::after {
  content: url("./ico_h4_03.png");
  position: absolute;
  right: 1em;
  top: -2.2em;
}

@media screen and (max-width: 800px) {
  .ttlBox.ico03::after {
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
    right: -1.7em;
  }
}

@media only screen and (max-width: 440px) {
  .ttlBox.ico03::after {
    content: "";
  }
}

@media screen and (max-width: 800px) {
  .ttlBox.ico03 h4 {
    padding: 0.8em 6.6em 0.8em 0.8em;
  }
}

@media only screen and (max-width: 440px) {
  .ttlBox.ico03 h4 {
    padding: 0.8em 1em 0.8em 0.8em;
  }
}

h5 {
  font-size: 3.2rem;
  color: #0191DB;
  font-weight: 500;
  margin-bottom: 50px;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 800px) {
  h5 {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 440px) {
  h5 {
    margin-bottom: 30px;
  }
}

h6 {
  font-size: 2.8rem;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 50px;
}

h6 span {
  font-weight: 500;
  margin: 0 0 1em;
  font-size: 1.5rem;
  display: block;
}

@media screen and (max-width: 800px) {
  h6 span {
    margin: 0;
  }
}

@media screen and (max-width: 800px) {
  h6 {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
}

p {
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.08em;
  font-weight: 500;
}

@media screen and (max-width: 800px) {
  p {
    line-height: 1.6em;
    font-weight: 400;
  }
}

/*----------------------------------------------------
  リンク
----------------------------------------------------*/
.link {
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1em 0;
  text-decoration: underline;
}

.link::before {
  content: "▶";
  width: 26px;
  height: 27px;
  margin: 0 8px 0 0;
  padding: 0 0 0 2px;
  text-align: center;
  color: #fff;
  background-color: #000;
  font-size: 10px;
  font-size: 1rem;
}

@media only screen and (max-width: 440px) {
  .link::before {
    padding: 0 4px 0 7px;
  }
}

.link::after {
  content: "";
  left: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 3px;
  height: 3px;
}

/*----------------------------------------------------
  画像＋テキスト
----------------------------------------------------*/
.recommend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

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

.recommend div {
  width: calc(100% / 2);
}

@media screen and (max-width: 800px) {
  .recommend div {
    width: 100%;
  }
}

.recommend div:first-child {
  margin-right: 3%;
}

@media screen and (max-width: 800px) {
  .recommend div:first-child {
    margin-right: 0;
    margin-bottom: 2em;
  }
}

.imgBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 1.5em 0;
}

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

.imgBox li {
  width: calc(100% / 2);
}

@media screen and (max-width: 800px) {
  .imgBox li {
    width: 100%;
  }
}

.imgBox li:first-child {
  margin-right: 3%;
}

@media screen and (max-width: 800px) {
  .imgBox li:first-child {
    margin-right: 0;
    margin-bottom: 2em;
  }
}

.imgBox li:first-child.none {
  margin-right: 0;
}

@media screen and (max-width: 800px) {
  .imgBox li:first-child.none {
    margin-bottom: 0;
  }
}

/*----------------------------------------------------
  ボタン
----------------------------------------------------*/
.btn {
  text-align: center;
  margin: 4em auto 0;
  width: auto !important;
}

.btn div {
  display: inline-block;
  margin: 0 auto !important;
  width: auto !important;
}

.btn div a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.2em 3em 1.2em 2em;
  background: #FFFAE1 url("./ico_arrow.png") no-repeat 30px center;
  background-size: 10px auto;
  border: solid 3px #FFB600;
  font-size: 2.2rem;
}

@media only screen and (max-width: 440px) {
  .btn div a {
    padding: 1.2em 3em 1.2em 2.0em;
    background: #FFFAE1 url("./ico_arrow.png") no-repeat 20px center;
    font-size: 1.9rem;
  }
}

.btn div a span {
  position: relative;
  display: block;
  margin-top: 0.2em;
  padding: 0 0 0 1.5em;
  font-size: 1.4rem;
  font-weight: 500;
}

@media only screen and (max-width: 440px) {
  .btn div a span {
    padding: 0 0 0 0.5em;
    font-size: 1.2rem;
  }
}

.btn div a span::after {
  content: url("./ico_blank.png");
  position: absolute;
  top: -0.2em;
  padding: 0 0 0 0.5em;
}

html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 18px;
  font-size: 1.8rem;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, Arial, sans-serif;
  color: #333;
  text-align: justify;
  overflow-y: scroll;
}

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.mainImage {
  background: url("./bg_mainImage.png") no-repeat center center;
  background-size: cover;
  height: 430px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .mainImage {
    width: 100%;
  }
}

@media screen and (max-width: 900px) {
  .mainImage {
    height: 360px;
  }
}

@media screen and (max-width: 800px) {
  .mainImage {
    height: 300px;
  }
}

@media only screen and (max-width: 440px) {
  .mainImage {
    height: 260px;
  }
}

.mainImage ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 4em auto 0;
  font-size: 1.2rem;
}

@media screen and (max-width: 1200px) {
  .mainImage ul {
    width: 94%;
  }
}

@media only screen and (max-width: 440px) {
  .mainImage ul {
    font-size: 0.9rem;
    line-height: 140%;
    margin: 6em auto 0;
  }
}

.mainImage ul img {
  display: block;
  margin: 0 auto 0.7em;
}

@media screen and (max-width: 1200px) {
  .mainImage ul img {
    width: 100%;
  }
}

.support {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 3em auto;
}

.support li {
  width: 320px;
  margin-right: 3%;
  text-align: center;
}

.support li img {
  width: 100%;
  border-radius: 20em;
  border: solid 8px #ccc;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 800px) {
  .support li img {
    border: solid 4px #ccc;
  }
}

.point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

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

.point dl {
  width: calc(100% / 2);
  border: solid 6px #ccc;
  border-radius: 20px;
  padding: 2em 1em 0;
}

@media screen and (max-width: 800px) {
  .point dl {
    width: 100%;
  }
}

@media only screen and (max-width: 440px) {
  .point dl {
    border: solid 4px #ccc;
    padding: 1em 1em 0;
  }
}

.point dl:first-child {
  margin: 0 2% 0 0;
}

@media screen and (max-width: 800px) {
  .point dl:first-child {
    margin: 0 0 1.5em;
  }
}

.point dl:first-child dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3rem;
  font-weight: 500;
}

@media only screen and (max-width: 440px) {
  .point dl:first-child dt {
    font-size: 2.4rem;
  }
}

.point dl:first-child dt::before {
  content: url("./point1.png");
  padding-right: 1em;
}

@media screen and (max-width: 800px) {
  .point dl:first-child dt::before {
    padding-right: 0.3em;
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@media only screen and (max-width: 440px) {
  .point dl:first-child dt::before {
    padding-right: 0.1em;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
  }
}

.point dl:first-child dd {
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding-right: 6em;
  margin: 2em 0 2em 1em;
  background: url("./point3.png") no-repeat right center;
}

@media screen and (max-width: 800px) {
  .point dl:first-child dd {
    padding-right: 4.6em;
    background-size: 78px auto;
  }
}

@media only screen and (max-width: 440px) {
  .point dl:first-child dd {
    margin: 0 0 1em 1em;
  }
}

.point dl:last-child {
  margin: 0 2% 0 0;
}

.point dl:last-child dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3rem;
  font-weight: 500;
}

@media only screen and (max-width: 440px) {
  .point dl:last-child dt {
    font-size: 2.4rem;
  }
}

.point dl:last-child dt::before {
  content: url("./point2.png");
  padding-right: 1em;
}

@media screen and (max-width: 800px) {
  .point dl:last-child dt::before {
    padding-right: 0.3em;
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@media only screen and (max-width: 440px) {
  .point dl:last-child dt::before {
    padding-right: 0.1em;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
  }
}

.point dl:last-child dd {
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding-right: 6em;
  margin: 2em 0 2em 1em;
  background: url("./point4.png") no-repeat right center;
}

@media screen and (max-width: 800px) {
  .point dl:last-child dd {
    padding-right: 4.6em;
    background-size: 78px auto;
  }
}

@media only screen and (max-width: 440px) {
  .point dl:last-child dd {
    margin: 0 0 1em 1em;
  }
}

.transceiver02 {
  margin-bottom: 3.2em;
}

@media screen and (max-width: 800px) {
  .transceiver02 {
    margin-bottom: 1.5em;
    width: 50%;
  }
}
/*# sourceMappingURL=style.min.css.map */