@charset "UTF-8";


.m0 {
  margin: 0 !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.p0 {
  padding: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pl0 {
  padding-left: 0px !important;
}

.pr0 {
  padding-right: 0px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.p5 {
  padding: 5px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.p10 {
  padding: 10px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.p15 {
  padding: 15px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.p20 {
  padding: 20px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.p25 {
  padding: 25px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.p30 {
  padding: 30px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.p35 {
  padding: 35px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.pl35 {
  padding-left: 35px !important;
}

.pr35 {
  padding-right: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.p40 {
  padding: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.p45 {
  padding: 45px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.p50 {
  padding: 50px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.w5per {
  width: 5% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w5perS {
    width: 5% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w5perM {
    width: 5% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w5perL {
    width: 5% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w5perSM {
    width: 5% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w5perML {
    width: 5% !important;
  }
}
.w10per {
  width: 10% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w10perS {
    width: 10% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w10perM {
    width: 10% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w10perL {
    width: 10% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w10perSM {
    width: 10% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w10perML {
    width: 10% !important;
  }
}
.w15per {
  width: 15% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w15perS {
    width: 15% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w15perM {
    width: 15% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w15perL {
    width: 15% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w15perSM {
    width: 15% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w15perML {
    width: 15% !important;
  }
}
.w20per {
  width: 20% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w20perS {
    width: 20% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w20perM {
    width: 20% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w20perL {
    width: 20% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w20perSM {
    width: 20% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w20perML {
    width: 20% !important;
  }
}
.w25per {
  width: 25% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w25perS {
    width: 25% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w25perM {
    width: 25% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w25perL {
    width: 25% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w25perSM {
    width: 25% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w25perML {
    width: 25% !important;
  }
}
.w30per {
  width: 30% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w30perS {
    width: 30% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w30perM {
    width: 30% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w30perL {
    width: 30% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w30perSM {
    width: 30% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w30perML {
    width: 30% !important;
  }
}
.w35per {
  width: 35% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w35perS {
    width: 35% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w35perM {
    width: 35% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w35perL {
    width: 35% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w35perSM {
    width: 35% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w35perML {
    width: 35% !important;
  }
}
.w40per {
  width: 40% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w40perS {
    width: 40% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w40perM {
    width: 40% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w40perL {
    width: 40% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w40perSM {
    width: 40% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w40perML {
    width: 40% !important;
  }
}
.w45per {
  width: 45% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w45perS {
    width: 45% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w45perM {
    width: 45% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w45perL {
    width: 45% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w45perSM {
    width: 45% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w45perML {
    width: 45% !important;
  }
}
.w50per {
  width: 50% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w50perS {
    width: 50% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w50perM {
    width: 50% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w50perL {
    width: 50% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w50perSM {
    width: 50% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w50perML {
    width: 50% !important;
  }
}
.w55per {
  width: 55% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w55perS {
    width: 55% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w55perM {
    width: 55% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w55perL {
    width: 55% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w55perSM {
    width: 55% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w55perML {
    width: 55% !important;
  }
}
.w60per {
  width: 60% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w60perS {
    width: 60% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w60perM {
    width: 60% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w60perL {
    width: 60% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w60perSM {
    width: 60% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w60perML {
    width: 60% !important;
  }
}
.w65per {
  width: 65% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w65perS {
    width: 65% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w65perM {
    width: 65% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w65perL {
    width: 65% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w65perSM {
    width: 65% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w65perML {
    width: 65% !important;
  }
}
.w70per {
  width: 70% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w70perS {
    width: 70% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w70perM {
    width: 70% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w70perL {
    width: 70% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w70perSM {
    width: 70% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w70perML {
    width: 70% !important;
  }
}
.w75per {
  width: 75% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w75perS {
    width: 75% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w75perM {
    width: 75% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w75perL {
    width: 75% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w75perSM {
    width: 75% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w75perML {
    width: 75% !important;
  }
}
.w80per {
  width: 80% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w80perS {
    width: 80% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w80perM {
    width: 80% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w80perL {
    width: 80% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w80perSM {
    width: 80% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w80perML {
    width: 80% !important;
  }
}
.w85per {
  width: 85% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w85perS {
    width: 85% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w85perM {
    width: 85% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w85perL {
    width: 85% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w85perSM {
    width: 85% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w85perML {
    width: 85% !important;
  }
}
.w90per {
  width: 90% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w90perS {
    width: 90% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w90perM {
    width: 90% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w90perL {
    width: 90% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w90perSM {
    width: 90% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w90perML {
    width: 90% !important;
  }
}
.w95per {
  width: 95% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w95perS {
    width: 95% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w95perM {
    width: 95% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w95perL {
    width: 95% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w95perSM {
    width: 95% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w95perML {
    width: 95% !important;
  }
}
.w100per {
  width: 100% !important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .w100perS {
    width: 100% !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .w100perM {
    width: 100% !important;
  }
}
@media only screen and (min-width: 1000px) {
  .w100perL {
    width: 100% !important;
  }
}
@media only screen and (max-width: 999px) {
  .w100perSM {
    width: 100% !important;
  }
}
@media only screen and (min-width: 768px) {
  .w100perML {
    width: 100% !important;
  }
}
.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.tal {
  text-align: left !important;
}

.tar {
  text-align: right !important;
}

.tac {
  text-align: center !important;
}

.breakAll {
  word-break: break-all !important;
}

.dispN {
  display: none !important;
}

.dispI {
  display: inline !important;
}

.dispIB {
  display: inline-block !important;
}

.dispB {
  display: block !important;
}

.fontNormal {
  font-weight: normal !important;
}

.fontBold {
  font-weight: bold !important;
}

.fs13 {
  font-size: 13px !important;
}

.font10 {
  font-size: 1rem !important;
}

.font12 {
  font-size: 1.2rem !important;
}

.font14 {
  font-size: 1.4rem !important;
}

.font16 {
  font-size: 1.6rem !important;
}

.font18 {
  font-size: 1.8rem !important;
}

.baseColor {
  color: #1b63a7 !important;
}

.clear {
  clear: both;
}

.clearfix:before, .clearfix:after,
.cf:before, .cf:after {
  content: " ";
  display: table;
}

.clearfix:after, .cf:after {
  clear: both;
}

.clearfix, .cf {
  *zoom: 1;
}

.fluid {
  display: block;
  width: 100%;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .fluidS,
  .fluidSM {
    display: block;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .fluidM,
  .fluidSM {
    display: block;
    width: 100%;
  }
}
.flex {
  max-width: 100%;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
  .visibleM {
    display: none !important;
  }
  .visibleL {
    display: none !important;
  }
  .hiddenS {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .visibleS {
    display: none !important;
  }
  .visibleL {
    display: none !important;
  }
  .hiddenM {
    display: none !important;
  }
}
@media only screen and (min-width: 1000px) {
  .visibleS {
    display: none !important;
  }
  .visibleM {
    display: none !important;
  }
  .hiddenL {
    display: none !important;
  }
}
@media only screen and (min-width: 1000px) {
  .hover {
    -webkit-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
  }
  .hover:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
  }
}

/* ----------------------------------------------------------
    リセット / 新要素設定
------------------------------------------------------------- */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, form, fieldset, legend, table, th, td, caption, a, article, aside, nav, section, figure, figcaption, footer, header, main, audio, canvas, video, menu, details {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
}

fieldset, legend, img {
  border: 0;
}

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

video, audio, canvas {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

/* ----------------------------------------------------------
    ベース
------------------------------------------------------------- */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background: #fff;
  color: #222;
  font: 14px/1.4 Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  letter-spacing: 0.01em;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

/* ----------------------------------------------------------
    要素
------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  max-height: 100%;
  font-weight: normal;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.2;
  color: #113d6b;
}

p {
  max-height: 100%;
  margin: 0 0 1em;
}

ul {
  max-height: 100%;
  list-style: none;
}

ol {
  max-height: 100%;
  list-style: none;
}

dt {
  max-height: 100%;
  font-weight: bold;
}

dd {
  max-height: 100%;
}

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

blockquote, q {
  quotes: none;
}

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

pre {
  font-family: monospace, serif;
  white-space: pre-wrap;
  word-wrap: break-word;
}

figure {
  margin: 0 0 1em;
}

a {
  color: #04c;
}

a:link, a.visited {
  text-decoration: underline;
}

a:hover, a.active {
  text-decoration: none;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

img {
  vertical-align: middle;
}

address, cite, em, dfn, i, var {
  font-style: normal;
}

em {
  font-weight: bold;
}

strong, b {
  font-weight: bold;
}

code, samp, kbd {
  font-family: monospace, sans-serif;
}

abbr {
  border: 0;
  font-variant: normal;
}

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

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

del {
  text-decoration: line-through;
}

mark {
  background-color: #ff0;
  color: #333;
  font-style: italic;
  font-weight: bold;
}

br {
  *letter-spacing: 0;
}

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

th, td {
  font-weight: normal;
  text-align: left;
}

th {
  font-weight: bold;
}

caption {
  font-weight: normal;
  text-align: left;
}

/* ----------------------------------------------------------
    フォーム系
------------------------------------------------------------- */
input, textarea, select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  *font-size: 14px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

input, button {
  line-height: normal;
  vertical-align: middle;
}

input[type=text],
input[type=password],
textarea {
  padding: 8px;
  background: #fff;
  border: 1px solid #ddd;
  -webkit-box-shadow: inset 3px 3px 0 0 rgba(0, 0, 0, 0.03);
  box-shadow: inset 3px 3px 0 0 rgba(0, 0, 0, 0.03);
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
  border: 1px solid #209dd9;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

select {
  padding: 5px;
  line-height: normal;
}

@media only screen and (min-width: 970px) {
  select {
    background-color: inherit;
    border: 1px solid #ddd;
  }
}
label {
  cursor: pointer;
}

legend {
  *margin-left: -7px;
  color: #333;
}

/* ----------------------------------------------------------
    アイコン()
------------------------------------------------------------- */
@font-face {
  font-family: "xserver";
  font-style: normal;
  font-weight: normal;
  src: url(fonts/xserver.eot?-yof791);
  src: url(fonts/xserver.eot?#iefix-yof791) format("embedded-opentype"), url(fonts/xserver.ttf?-yof791) format("truetype"), url(fonts/xserver.woff?-yof791) format("woff"), url(fonts/xserver.svg?-yof791#xserver) format("svg");
}
.ico {
  font-family: "xserver";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: middle;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico--circle:before {
  content: "\e800";
}

.ico--circleDouble:before {
  content: "\e814";
}

.ico--circleFill:before {
  content: "\e801";
}

.ico--square:before {
  content: "\e802";
}

.ico--squareFill:before {
  content: "\e803";
}

.ico--exclamation:before {
  content: "\e804";
}

.ico--exclamationFill:before {
  content: "\e805";
}

.ico--triangleDown:before {
  content: "\e815";
}

.ico--triangleLeft:before {
  content: "\e816";
}

.ico--triangleRight:before {
  content: "\e817";
}

.ico--triangleUp:before {
  content: "\e818";
}

.ico--circleArrowDown:before {
  content: "\e806";
}

.ico--circleArrowLeft:before {
  content: "\e807";
}

.ico--circleArrowRight:before {
  content: "\e808";
}

.ico--circleArrowUp:before {
  content: "\e809";
}

.ico--arrowDown:before {
  content: "\e600";
}

.ico--arrowLeft:before {
  content: "\e601";
}

.ico--arrowRight:before {
  content: "\e602";
}

.ico--arrowUp:before {
  content: "\e603";
}

.ico--chevronDown:before {
  content: "\e604";
}

.ico--chevronLeft:before {
  content: "\e605";
}

.ico--chevronRight:before {
  content: "\e606";
}

.ico--chevronUp:before {
  content: "\e607";
}

.ico--circleDown:before {
  content: "\e608";
}

.ico--circleLeft:before {
  content: "\e609";
}

.ico--circleRight:before {
  content: "\e60a";
}

.ico--circleUp:before {
  content: "\e60b";
}

.ico--hierarchy:before {
  content: "\e624";
}

.ico--check:before {
  content: "\e80f";
}

.ico--cross:before {
  content: "\e60c";
}

.ico--plus:before {
  content: "\e60d";
}

.ico--minus:before {
  content: "\e60e";
}

.ico--menu:before {
  content: "\e60f";
}

.ico--list:before {
  content: "\e610";
}

.ico--book:before {
  content: "\e611";
}

.ico--display:before {
  content: "\e612";
}

.ico--circleCheck:before {
  content: "\e613";
}

.ico--email:before {
  content: "\e614";
}

.ico--gear:before {
  content: "\e615";
}

.ico--globe:before {
  content: "\e616";
}

.ico--home:before {
  content: "\e617";
}

.ico--lock:before {
  content: "\e618";
}

.ico--magnifier:before {
  content: "\e619";
}

.ico--mouse:before {
  content: "\e61a";
}

.ico--newWindow:before {
  content: "\e61b";
}

.ico--operator:before {
  content: "\e61c";
}

.ico--pencil:before {
  content: "\e61d";
}

.ico--phone:before {
  content: "\e61e";
}

.ico--refresh:before {
  content: "\e61f";
}

.ico--safety:before {
  content: "\e620";
}

.ico--server:before {
  content: "\e621";
}

.ico--tag:before {
  content: "\e622";
}

.ico--unlock:before {
  content: "\e623";
}

.ico--balloon:before {
  content: "\e80a";
}

.ico--balloonQ:before {
  content: "\e80b";
}

.ico--balloonA:before {
  content: "\e80c";
}

.ico--squareQ:before {
  content: "\e80d";
}

.ico--squareA:before {
  content: "\e80e";
}

.ico--q:before {
  content: "\e810";
}

.ico--signature:before {
  content: "\e811";
}

.ico--window:before {
  content: "\e812";
}

.ico--wordpress:before {
  content: "\e813";
}

.ico--squareExclamation:before {
  content: "\e900";
}

.ico--squareQuestion:before {
  content: "\e901";
}

.ico--smartPhone:before {
  content: "\e902";
}

/* ----------------------------------------------------------
    図(画像)
------------------------------------------------------------- */
/* ----------------------------------------------------------
    ボタン
------------------------------------------------------------- */
.btn {
  cursor: pointer;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 11px 16px;
  border: none;
  font-size: 16px;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: transform, background-color;
  transition-property: transform, background-color, -webkit-transform;
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

a.btn {
  text-decoration: none !important;
}

.bnr {
  display: inline-block;
}

/* PC */
@media only screen and (min-width: 1000px) {
  .bnr:hover,
  .btn:hover {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
}
/* ----------------------------------------------------------
    幅・余白確保ボックス
------------------------------------------------------------- */
/* PC */
@media only screen and (min-width: 1000px) {
  .holderL,
  .holderSL,
  .holderML,
  .holderSML {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Tab */
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .holderM,
  .holderSM,
  .holderML,
  .holderSML {
    width: 94.79%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
  .holderS,
  .holderSM,
  .holderSL,
  .holderSML {
    width: 93.75%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ----------------------------------------------------------
	general
------------------------------------------------------------- */
#container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.wrap {
  margin: 0 10px;
}
@media only screen and (min-width: 1100px) {
  .wrap {
    margin: 0 auto;
    width: 1000px;
  }
}

.ico--arrow {
  display: inline-block;
  background: url(../img/ico_arrow.png);
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  position: relative;
}

/* ----------------------------------------------------------
	header
------------------------------------------------------------- */
.gHeader {
  padding: 10px 0;
}
.gHeaderDesc {
  font-size: 11px;
}
.gHeaderLogo img {
  width: 200px;
  height: auto;
}
@media only screen and (min-width: 1000px) {
  .gHeaderLogo img {
    width: auto;
  }
}

/* ----------------------------------------------------------
	footer
------------------------------------------------------------- */
.gFooter {
  background: #edf1f3;
  padding: 15px 0;
  text-align: center;
}
.gFooter .logo img {
  width: 145px;
  height: auto;
}
.gFooter .copyright {
  margin: 10px 0 0;
  color: #7e99b5;
  font-size: 11px;
}
@media only screen and (min-width: 1000px) {
  .gFooter {
    padding: 30px 0;
  }
  .gFooter .logo img {
    width: auto;
  }
  .gFooter .copyright {
    font-size: 112x;
  }
}

/* ----------------------------------------------------------
    ボタン
------------------------------------------------------------- */
.entryBtn {
  display: inline-block;
  background-image: linear-gradient(-107deg, rgb(246, 30, 1) 0%, rgb(249, 107, 3) 100%);
  color: #fff;
  font-weight: bold;
  padding: 15px 0;
  min-width: 180px;
  font-size: 12px;
}
.entryBtn span {
  font-size: 16px;
}
@media only screen and (min-width: 1000px) {
  .entryBtn {
    font-size: 14px;
  }
  .entryBtn span {
    font-size: 22px;
  }
}

.entryUnit {
  margin: 20px 0 0;
  text-align: center;
}
.entryUnit__caption {
  color: #f62f01;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.entryUnit .btn {
  font-weight: normal;
  min-width: 300px;
}
.entryUnit .btn span {
  font-weight: bold;
  margin-left: 2px;
}
@media only screen and (min-width: 1000px) {
  .entryUnit {
    margin: 50px 0 0;
  }
  .entryUnit__caption {
    font-size: 18px;
    margin: 0 0 5px;
  }
  .entryUnit .btn {
    font-weight: normal;
    min-width: 540px;
  }
  .entryUnit .btn span {
    margin-left: 5px;
  }
}

.contactBtn {
  background: #fff;
  border: 1px solid #011846;
  color: #011846;
  padding: 5px 20px;
}
@media only screen and (min-width: 1000px) {
  .contactBtn {
    min-width: 180px;
  }
}

.contactUnit {
  margin: 10px 0 0;
  text-align: center;
}

/* ----------------------------------------------------------
    メイン
------------------------------------------------------------- */
main {
  line-height: 1.6;
}

.keyVisual {
  position: relative;
  background: url(../img/bg_kv_s.png) no-repeat center center;
  background-size: cover;
  min-height: 508px;
  padding-bottom: 78%;
}
.keyVisual .kvImage {
  padding: 5% 0 4%;
}
.keyVisual .kvImage img {
  width: 100%;
  height: auto;
}
.keyVisual .kvButton .entryUnit {
  margin: 0 10px;
}
.keyVisual .kvButton .entryUnit .btn {
  width: 100%;
  max-width: 300px;
}
.keyVisual .kvShare {
  position: absolute;
  right: 10px;
  bottom: 9%;
  width: 31.25%;
  height: 31.25%;
}
.keyVisual .kvShare img {
  width: 100%;
  height: auto;
}
.keyVisual .kvFoot {
  position: absolute;
  right: 10px;
  bottom: 1%;
  color: #fff;
  font-size: 10px;
  text-align: right;
}
.keyVisual .kvFoot a {
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .keyVisual {
    background-image: url(../img/bg_kv_m.png);
  }
  .keyVisual .kvButton .entryUnit__caption {
    font-size: 18px;
  }
  .keyVisual .kvButton .entryUnit .btn {
    font-size: 20px;
    width: 600px;
    max-width: 600px;
  }
  .keyVisual .kvButton .entryUnit .btn span {
    font-size: 28px;
  }
  .keyVisual .kvShare {
    position: absolute;
    right: 3%;
    bottom: 9%;
    width: 26.042%;
    height: 26.042%;
  }
  .keyVisual .kvShare img {
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 1100px) {
  .keyVisual {
    background-image: url(../img/bg_kv_l.png);
    padding-bottom: 0;
  }
  .keyVisual .kvWrap {
    width: 1000px;
    height: 666px;
    margin: 0 auto;
    padding-left: 20px;
    position: relative;
  }
  .keyVisual .kvImage {
    padding: 40px 0 0;
  }
  .keyVisual .kvImage img {
    width: auto;
    height: auto;
  }
  .keyVisual .kvButton .entryUnit {
    margin: 40px 0 0;
    text-align: left;
    display: table;
  }
  .keyVisual .kvButton .entryUnit__caption {
    font-size: 16px;
  }
  .keyVisual .kvButton .entryUnit .btn {
    width: 390px;
    min-width: 390px;
    max-width: none;
  }
  .keyVisual .kvButton .entryUnit .btn span {
    display: block;
  }
  .keyVisual .kvShare {
    top: 20px;
    right: 20px;
    bottom: auto;
    width: auto;
    height: auto;
  }
  .keyVisual .kvShare img {
    width: auto;
    height: auto;
  }
  .keyVisual .kvFoot {
    right: 0;
    bottom: 10px;
  }
}

.section {
  padding: 30px 0;
}
.section .caution {
  font-size: 11px;
  margin: 5px 0 0;
}
@media only screen and (min-width: 1000px) {
  .section {
    padding: 70px 0;
  }
}

.sectionIntro {
  background-image: linear-gradient(21deg, rgb(29, 168, 228) 0%, rgb(8, 50, 94) 71%, rgb(1, 3, 56) 100%);
  padding-bottom: 40px;
}
.sectionIntro .caption {
  text-align: center;
  margin: 0 0 -2.5%;
}
.sectionIntro .caption img {
  width: 100%;
  height: auto;
}
.sectionIntro .onayamiList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.sectionIntro .onayamiList > li {
  width: 49.2%;
}
.sectionIntro .onayamiList > li img {
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .sectionIntro .wrap {
    margin: 0 40px;
  }
  .sectionIntro .onayamiList {
    margin: 0 30px;
  }
  .sectionIntro .onayamiList > li {
    width: 48.5%;
  }
}
@media only screen and (min-width: 1100px) {
  .sectionIntro {
    height: 666px;
    padding: 50px 0;
  }
  .sectionIntro .caption img {
    width: auto;
  }
  .sectionIntro .wrap {
    position: relative;
  }
  .sectionIntro .onayamiList > li {
    width: auto;
    position: absolute;
  }
  .sectionIntro .onayamiList > li img {
    width: auto;
  }
  .sectionIntro .onayamiList__list01 > li:nth-child(1) {
    top: 103px;
    left: 8px;
  }
  .sectionIntro .onayamiList__list01 > li:nth-child(2) {
    top: 195px;
    left: 247px;
  }
  .sectionIntro .onayamiList__list02 > li:nth-child(1) {
    top: 208px;
    right: 252px;
    z-index: 1;
  }
  .sectionIntro .onayamiList__list02 > li:nth-child(2) {
    top: 136px;
    right: 8px;
    z-index: 0;
  }
}

.sectionAbout .ttl {
  color: #057ec4;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}
.sectionAbout .caption {
  margin: 10px 0 0;
  color: #011846;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.sectionAbout .txt {
  margin: 10px 0 0;
}
.sectionAbout .txt span {
  color: #057ec4;
  font-weight: bold;
}
.sectionAbout .img {
  margin: 15px 0;
  text-align: center;
}
.sectionAbout .img img {
  width: 100%;
  height: auto;
  max-width: 340px;
}
.sectionAbout .aboutXbiz {
  margin: 20px 0 0;
  background: url(../img/bg_about_xbiz_s.png) no-repeat right bottom;
  background-size: cover;
  padding: 30px 15px;
  text-align: center;
}
.sectionAbout .aboutXbiz__caption {
  color: #011846;
  font-size: 16px;
  font-weight: bold;
}
.sectionAbout .aboutXbiz__caption img {
  width: 220px;
  height: auto;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .sectionAbout .aboutXbiz__caption img {
    vertical-align: top;
    margin: 0 5px;
  }
}
@media only screen and (min-width: 0) and (max-width: 767px) {
  .sectionAbout .aboutXbiz__caption img {
    vertical-align: top;
    margin: 0 5px 0 0;
  }
}
.sectionAbout .aboutXbiz__works {
  margin: 15px 0 0;
  color: #DA8E00;
  background: -webkit-linear-gradient(90deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 21px;
  font-weight: bold;
}
.sectionAbout .aboutXbiz__works sub {
  font-size: 11px;
  font-weight: normal;
}
.sectionAbout .aboutXbiz__data {
  font-size: 11px;
}
.sectionAbout .aboutXbiz__data a {
  color: #333;
}
.sectionAbout .aboutXbiz__data:before {
  content: "\203b";
}
.sectionAbout .aboutXbiz__txt {
  margin: 15px 0 0;
  text-align: left;
}
@media only screen and (min-width: 1000px) {
  .sectionAbout .ttl {
    font-size: 42px;
  }
  .sectionAbout .caption {
    margin: 10px 0 0;
    font-size: 32px;
  }
  .sectionAbout .txt {
    margin: 30px 0 0;
    text-align: center;
    font-size: 16px;
  }
  .sectionAbout .img {
    margin: 30px 0;
  }
  .sectionAbout .img img {
    width: auto;
    height: auto;
    max-width: none;
  }
  .sectionAbout .aboutXbiz {
    margin: 40px 0 0;
    background-image: url(../img/bg_about_xbiz_l.png);
    padding: 70px;
  }
  .sectionAbout .aboutXbiz__caption {
    color: #011846;
    font-size: 26px;
  }
  .sectionAbout .aboutXbiz__caption img {
    position: relative;
    top: -0.15em;
    margin: 0 10px;
    width: auto;
  }
  .sectionAbout .aboutXbiz__works {
    margin: 10px 0 0;
    font-size: 42px;
  }
  .sectionAbout .aboutXbiz__data {
    font-size: 10px;
  }
  .sectionAbout .aboutXbiz__txt {
    margin: 20px 0 0;
    font-size: 16px;
    text-align: center;
  }
}

.sectionService {
  background: #f4f4f4;
}
.sectionService .service {
  margin: 30px 0 0;
}
.sectionService .service:first-child {
  margin: 0;
}
.sectionService .ttl {
  display: table;
  color: #057ec4;
  font-size: 21px;
  font-weight: bold;
  padding-bottom: 2px;
  border-bottom: 1px solid #057ec4;
}
.sectionService .caption {
  margin: 10px 0 0;
  color: #011846;
  font-size: 18px;
  font-weight: bold;
}
.sectionService .txt {
  margin: 10px 0 0;
}
.sectionService .txt span {
  color: #057ec4;
  font-weight: bold;
}
.sectionService .fig {
  margin: 15px 0;
  text-align: center;
}
.sectionService .memo {
  margin: 15px 0 0;
  padding: 10px;
  border: 1px solid #057ec4;
}
.sectionService .memo p {
  margin-bottom: 0;
}
.sectionService .hpThumb {
  margin: 15px 0;
  text-align: center;
}
.sectionService .hpThumb img {
  width: 100%;
  max-width: 500px;
  height: auto;
}
.sectionService .hpList {
  margin: 0 10px;
}
.sectionService .hpList > li {
  background: #fff;
  padding: 15px;
  margin: 10px 0 0;
}
.sectionService .hpList__caption {
  color: #057ec4;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.sectionService .hpList__fig {
  text-align: center;
  margin: 10px 0;
}
.sectionService .hpList__txt {
  margin: 0;
}
.sectionService .hpList__txt span {
  color: #057ec4;
  font-weight: bold;
}
.sectionService .mail .fig img {
  width: 137px;
  height: auto;
}
.sectionService .domain .fig img {
  width: 141px;
  height: auto;
}
@media only screen and (min-width: 1000px) {
  .sectionService .wrap {
    width: 860px;
  }
  .sectionService .service {
    margin: 80px 0 0;
  }
  .sectionService .service:first-child {
    margin: 0;
  }
  .sectionService .ttl {
    display: table;
    font-size: 42px;
    font-weight: bold;
    padding-bottom: 5px;
  }
  .sectionService .caption {
    margin: 10px 0 0;
    font-size: 26px;
  }
  .sectionService .txt {
    margin: 15px 0 0;
    font-size: 16px;
  }
  .sectionService .fig {
    margin: 15px 0;
    text-align: center;
  }
  .sectionService .memo {
    margin: 15px 0 0;
    padding: 20px;
    text-align: center;
  }
  .sectionService .memo p {
    font-size: 16px;
  }
  .sectionService .hpThumb {
    margin: 40px 0;
  }
  .sectionService .hpThumb img {
    width: auto;
    max-width: none;
    height: auto;
  }
  .sectionService .hpList {
    margin: 30px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .sectionService .hpList > li {
    background: #fff;
    width: 280px;
    padding: 30px 15px;
    margin: 0;
  }
  .sectionService .hpList__fig {
    text-align: center;
    margin: 20px 0 0;
    height: 140px;
  }
  .sectionService .hpList__txt {
    font-size: 16px;
  }
  .sectionService .serviceUnit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .sectionService .fig {
    padding: 0 40px;
  }
  .sectionService .mail .serviceUnit__col:nth-child(1) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .sectionService .mail .fig img {
    width: auto;
    height: auto;
  }
  .sectionService .domain .serviceUnit__col:nth-child(2) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .sectionService .domain .fig img {
    width: auto;
    height: auto;
  }
}

.sectionDaiko .desc {
  color: #011846;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.sectionDaiko .ttl {
  margin: 0 0 20px;
  color: #057ec4;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}
.sectionDaiko .caption {
  color: #057ec4;
  font-size: 16px;
  font-weight: bold;
}
.sectionDaiko .img {
  text-align: center;
}
.sectionDaiko .img img {
  width: 100%;
  height: auto;
  max-width: 340px;
}
@media only screen and (min-width: 1000px) {
  .sectionDaiko .desc {
    font-size: 20px;
  }
  .sectionDaiko .ttl {
    font-size: 42px;
  }
  .sectionDaiko .caption {
    text-align: center;
    margin: 0 0 10px;
  }
  .sectionDaiko .txt {
    font-size: 16px;
    text-align: center;
  }
  .sectionDaiko .img img {
    width: auto;
    max-width: none;
  }
}

.sectionFunc {
  background: #fbe428;
}
.sectionFunc .ttl {
  color: #011846;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 20px;
}
.sectionFunc .funcList > li {
  text-align: center;
  padding: 5px 0;
  line-height: 1;
  border-bottom: 1px solid #fff;
}
.sectionFunc .funcList__caption {
  font-size: 13px;
}
.sectionFunc .funcList__name {
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (min-width: 1000px) {
  .sectionFunc .ttl {
    font-size: 42px;
  }
  .sectionFunc .funcList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 860px;
    margin: 0 auto;
  }
  .sectionFunc .funcList > li {
    width: 33%;
    padding: 0;
    margin: 20px 0 0;
    border-bottom: none;
  }
  .sectionFunc .funcList__caption {
    font-size: 12px;
    margin: 0 0 2px;
  }
  .sectionFunc .funcList__name {
    position: relative;
    font-size: 18px;
  }
  .sectionFunc .funcList__name span {
    position: relative;
    padding: 0 5px;
    display: inline-block;
    z-index: 0;
  }
  .sectionFunc .funcList__name span:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 100%;
    height: 100%;
    background: #fefad4;
    z-index: -1;
  }
}

.sectionPlan {
  background: url(../img/bg_plan_s.png) no-repeat center top;
  background-size: cover;
  color: #fff;
}
.sectionPlan .ttl {
  margin: 0 0 20px;
  color: #fff;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}
.sectionPlan .caption {
  color: #fbe428;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.sectionPlan .desc {
  text-align: center;
}
.sectionPlan .planBox {
  margin: 20px 0 0;
}
.sectionPlan .planBox:first-child {
  margin: 0;
}
.sectionPlan .planBox .btn {
  padding: 8px;
}
.sectionPlan .planBox.b10 .planBox__ttl {
  color: #20b5aa;
  border-bottom-color: #20b5aa;
}
.sectionPlan .planBox.b20 .planBox__ttl {
  color: #16abcf;
  border-bottom-color: #16abcf;
}
.sectionPlan .planBox.b30 .planBox__ttl {
  color: #0a80f3;
  border-bottom-color: #0a80f3;
}
.sectionPlan .planBox__ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #000;
}
.sectionPlan .planBox__specItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #44658c;
  padding: 5px;
}
.sectionPlan .planBox__specItem:last-child {
  border-bottom: none;
}
.sectionPlan .planBox__specItem--label {
  color: #bdc7d3;
}
.sectionPlan .planBox__specItem--value {
  font-weight: bold;
  text-align: right;
}
.sectionPlan .planBox__specItem--fontBig {
  font-size: 20px;
}
.sectionPlan .planBox__link {
  margin: 10px 0 0;
  text-align: center;
}
.sectionPlan .txt {
  margin: 20px 0 0;
}
.sectionPlan .txt a {
  color: #fff;
}
@media only screen and (min-width: 1000px) {
  .sectionPlan {
    background-image: url(../img/bg_plan_l.png);
  }
  .sectionPlan .ttl {
    font-size: 42px;
  }
  .sectionPlan .planHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0 0 30px;
  }
  .sectionPlan .caption {
    font-size: 18px;
    marign: 0;
  }
  .sectionPlan .desc {
    text-align: left;
    margin: 0 0 0 10px;
  }
  .sectionPlan .planContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 620px;
    margin: 0 auto;
  }
  .sectionPlan .planBox {
    width: 175px;
    margin: 0;
  }
  .sectionPlan .planBox__ttl {
    margin: 0 0 15px;
  }
  .sectionPlan .planBox__specItem {
    display: block;
    padding: 10px 5px;
  }
  .sectionPlan .planBox__specItem > span {
    display: block;
    text-align: center;
    line-height: 1.2;
  }
  .sectionPlan .planBox__specItem--fontBig {
    font-size: 24px;
  }
  .sectionPlan .planBox__link {
    margin: 15px 0 0;
  }
  .sectionPlan .planBox__link .btn {
    font-size: 18px;
  }
  .sectionPlan .txt {
    margin: 40px auto 0;
    font-size: 16px;
    text-align: center;
  }
}

.sectionCampaign .cpBnr {
  text-align: center;
}
.sectionCampaign .cpBnr img {
  width: 100%;
  max-width: 500px;
  height: auto;
}
@media only screen and (min-width: 1000px) {
  .sectionCampaign .cpBnr img {
    width: auto;
    max-width: none;
  }
}
/*# sourceMappingURL=site.css.map */