@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  white-space: normal;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-sizing: border-box
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
  box-sizing: border-box
}

ol, ul {
  list-style: none;
  box-sizing: border-box
}

blockquote, q {
  quotes: none;
  box-sizing: border-box
}

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

td, th {
  text-align: left
}

strong {
  font-weight: 700
}

img {
  vertical-align: bottom;
  max-width: 100%
}

@media screen and (max-width: 768px) {
  .pc_ver {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .sp_ver {
    display: none
  }
}

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

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

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

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

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

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

.mt60 {
  margin-top: 60px !important
}

.mt70 {
  margin-top: 70px !important
}

.mt80 {
  margin-top: 80px !important
}

.mt90 {
  margin-top: 90px !important
}

.mt100 {
  margin-top: 100px !important
}

.mt110 {
  margin-top: 110px !important
}

.mt120 {
  margin-top: 120px !important
}

.mt130 {
  margin-top: 130px !important
}

.mt140 {
  margin-top: 140px !important
}

.mt150 {
  margin-top: 150px !important
}

.mt160 {
  margin-top: 160px !important
}

@media screen and (max-width: 768px) {
  .mtsp0 {
    margin-top: 0px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp10 {
    margin-top: 10px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp20 {
    margin-top: 20px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp30 {
    margin-top: 30px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp40 {
    margin-top: 40px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp50 {
    margin-top: 50px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp60 {
    margin-top: 60px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp70 {
    margin-top: 70px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp80 {
    margin-top: 80px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp90 {
    margin-top: 90px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp100 {
    margin-top: 100px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp110 {
    margin-top: 110px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp120 {
    margin-top: 120px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp130 {
    margin-top: 130px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp140 {
    margin-top: 140px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp150 {
    margin-top: 150px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp160 {
    margin-top: 160px !important
  }
}

.boxw50 {
  width: 50% !important
}

.boxw60 {
  width: 60% !important
}

.boxw70 {
  width: 70% !important
}

.boxw80 {
  width: 80% !important
}

.boxw90 {
  width: 90% !important
}

.boxw100 {
  width: 100% !important
}

.mw50 {
  max-width: 50% !important
}

.mw60 {
  max-width: 60% !important
}

.mw70 {
  max-width: 70% !important
}

.mw80 {
  max-width: 80% !important
}

.mw90 {
  max-width: 90% !important
}

.mw100 {
  max-width: 100% !important
}

ul.def {
  text-align: left;
  line-height: 1.6
}

ul.def>li {
  position: relative;
  margin-top: 5px;
  padding-left: 1.5em
}

ul.def>li>ul {
  margin-top: 0
}

ul.def>li:before {
  position: absolute;
  top: 0;
  left: 0
}

ul.def.notice>li:before {
  content: "※"
}

ul.def.nakaguro>li:before {
  content: "・"
}

ul.def.circle>li:before {
  content: "● "
}

ul.def.square>li:before {
  content: "■ "
}

ul.def.circled>li:before {
  content: "◎ "
}

ol.def {
  counter-reset: item;
  text-align: left;
  line-height: 1.7;
  margin-top: 20px
}

ol.def li {
  margin-top: 5px;
  padding-left: 1em;
  text-indent: -1em
}

ol.def li:before {
  counter-increment: item;
  content: counter(item) "."
}

ol.circles {
  counter-reset: item;
  text-align: left;
  line-height: 1.7;
  margin-top: 20px
}

ol.circles li {
  position: relative;
  margin-top: 5px;
  padding-left: 20px
}

ol.circles li:before {
  counter-increment: item;
  content: counter(item);
  border: 1px solid #333;
  color: #333;
  border-radius: 50%;
  display: block;
  text-align: center;
  height: 1rem;
  width: 1rem;
  font-size: .75rem;
  line-height: 1rem;
  position: absolute;
  top: .4rem;
  left: 0
}

table.def {
  width: 100%;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999
}

table.def th, table.def td {
  box-sizing: border-box;
  padding: .5em;
  border-bottom: solid 1px #999999;
  border-right: solid 1px #999999;
  font-size: 0.875rem;
  line-height: 1.4;
  vertical-align: middle;
  background-color: #FFF;
  text-align: center
}

@media screen and (max-width: 768px) {
  .pc_ver {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .sp_ver {
    display: none
  }
}

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

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

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

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

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

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

.mt60 {
  margin-top: 60px !important
}

.mt70 {
  margin-top: 70px !important
}

.mt80 {
  margin-top: 80px !important
}

.mt90 {
  margin-top: 90px !important
}

.mt100 {
  margin-top: 100px !important
}

.mt110 {
  margin-top: 110px !important
}

.mt120 {
  margin-top: 120px !important
}

.mt130 {
  margin-top: 130px !important
}

.mt140 {
  margin-top: 140px !important
}

.mt150 {
  margin-top: 150px !important
}

.mt160 {
  margin-top: 160px !important
}

@media screen and (max-width: 768px) {
  .mtsp0 {
    margin-top: 0px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp10 {
    margin-top: 10px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp20 {
    margin-top: 20px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp30 {
    margin-top: 30px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp40 {
    margin-top: 40px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp50 {
    margin-top: 50px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp60 {
    margin-top: 60px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp70 {
    margin-top: 70px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp80 {
    margin-top: 80px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp90 {
    margin-top: 90px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp100 {
    margin-top: 100px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp110 {
    margin-top: 110px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp120 {
    margin-top: 120px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp130 {
    margin-top: 130px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp140 {
    margin-top: 140px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp150 {
    margin-top: 150px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp160 {
    margin-top: 160px !important
  }
}

.boxw50 {
  width: 50% !important
}

.boxw60 {
  width: 60% !important
}

.boxw70 {
  width: 70% !important
}

.boxw80 {
  width: 80% !important
}

.boxw90 {
  width: 90% !important
}

.boxw100 {
  width: 100% !important
}

.mw50 {
  max-width: 50% !important
}

.mw60 {
  max-width: 60% !important
}

.mw70 {
  max-width: 70% !important
}

.mw80 {
  max-width: 80% !important
}

.mw90 {
  max-width: 90% !important
}

.mw100 {
  max-width: 100% !important
}

#mainimage {
  position: relative
}

@media screen and (min-width: 769px) {
  #mainimage {
    background: url("../images/main_pc.jpg") no-repeat;
    background-size: cover;
    padding-bottom: 37.5%
  }
}

@media screen and (max-width: 768px) {
  #mainimage {
    background: url("../images/main_sp.jpg") no-repeat;
    background-size: cover;
    padding-bottom: 80.4%
  }
}

#mainimage>.inner {
  position: absolute
}

@media screen and (min-width: 769px) {
  #mainimage>.inner {
    top: 8%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%)
  }
}

@media screen and (max-width: 768px) {
  #mainimage>.inner {
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center
  }
}

#mainimage>.inner h1 {
  font-weight: 900;
  color: #FFF;
  line-height: 1;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 0
}

@media screen and (min-width: 769px) {
  #mainimage>.inner h1 {
    font-size: 68px
  }
}

@media screen and (max-width: 768px) {
  #mainimage>.inner h1 {
    font-size: 36px
  }
}

#mainimage>.inner h1 span {
  line-height: 2em;
  letter-spacing: 1px
}

@media screen and (min-width: 769px) {
  #mainimage>.inner h1 span {
    font-size: 42px
  }
}

@media screen and (max-width: 768px) {
  #mainimage>.inner h1 span {
    width: 100%;
    font-size: 24px;
    text-align: center
  }
}

#mainimage>.inner p {
  border-radius: 10px;
  background-color: #003e81;
  text-align: center;
  font-weight: 900;
  color: #FFF
}

@media screen and (min-width: 769px) {
  #mainimage>.inner p {
    display: table;
    margin: 1rem auto 0;
    font-size: 20px;
    letter-spacing: 3px;
    padding: 5px 1rem
  }
}

@media screen and (max-width: 768px) {
  #mainimage>.inner p {
    display: table;
    margin-top: 10px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem 2rem
  }
}

@keyframes swipmotion {
  0% {
    transform: translateX(0%);
    opacity: 1
  }
  50% {
    transform: translateX(-50%);
    opacity: 0
  }
  51% {
    transform: translateX(50%);
    opacity: 0
  }
  100% {
    transform: translateX(0%);
    opacity: 1
  }
}

@keyframes swipmotion2 {
  0% {
    transform: translateX(0%);
    opacity: 1
  }
  50% {
    transform: translateX(50%);
    opacity: 0
  }
  51% {
    transform: translateX(-50%);
    opacity: 0
  }
  100% {
    transform: translateX(0%);
    opacity: 1
  }
}

#blacklayer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100%;
  background-color: #000;
  opacity: 0;
  display: none
}

#blacklayer.active {
  display: block;
  opacity: .85;
  transition: opacity 1s ease 0s
}

.explan {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  background-color: #FFF;
  width: 100%;
  overflow: hidden;
  display: none
}

@media screen and (min-width: 769px) {
  .explan {
    max-width: 60%;
    height: auto;
    max-height: 80%;
    padding: 80px 0px 40px
  }
}

@media screen and (max-width: 768px) {
  .explan {
    width: 90%;
    height: auto;
    max-height: 60%;
    padding: 50px 0px 20px;
    font-size: 1.125rem
  }
}

.explan *+p {
  margin-top: 1rem
}

.explan h2 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700
}

.explan h2+p {
  margin-top: .5rem
}

.explan.active {
  display: block;
  z-index: 101
}

.explan img {
  margin: 0 auto
}

.closebt {
  display: block;
  position: absolute;
  z-index: 3;
  font-size: 1.625rem;
  font-weight: 900;
  cursor: pointer
}

@media screen and (min-width: 769px) {
  .closebt {
    width: 56px;
    height: 56px;
    top: 10px;
    right: 10px
  }
}

@media screen and (max-width: 768px) {
  .closebt {
    width: 28px;
    height: 28px;
    top: 0px;
    right: 5px
  }
}

.maininner {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 0;
  left: 0;
  width: calc(100% + 15px);
  height: 50vh;
  z-index: 2
}

@media screen and (min-width: 769px) {
  .maininner {
    padding: 0 40px 1rem
  }
}

@media screen and (max-width: 768px) {
  .maininner {
    padding: 0 20px 1rem;
    font-size: 1.125rem
  }
}

.maininner .imgCenter {
  margin-top: 15px;
  margin-bottom: 30px
}

.imgCenter {
  display: block;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  text-align: center
}

.imglist {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 15px
}

@media screen and (min-width: 769px) {
  .imglist>li {
    width: 40%;
    padding: 2%
  }
}

@media screen and (max-width: 768px) {
  .imglist>li {
    width: 48%;
    padding: 1%
  }
}

.photomotionsRtoL {
  animation-name: swipmotion;
  animation-duration: .25s
}

.photomotionsLtoR {
  animation-name: swipmotion2;
  animation-duration: .25s
}

@media screen and (max-width: 768px) {
  .pc_ver {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .sp_ver {
    display: none
  }
}

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

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

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

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

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

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

.mt60 {
  margin-top: 60px !important
}

.mt70 {
  margin-top: 70px !important
}

.mt80 {
  margin-top: 80px !important
}

.mt90 {
  margin-top: 90px !important
}

.mt100 {
  margin-top: 100px !important
}

.mt110 {
  margin-top: 110px !important
}

.mt120 {
  margin-top: 120px !important
}

.mt130 {
  margin-top: 130px !important
}

.mt140 {
  margin-top: 140px !important
}

.mt150 {
  margin-top: 150px !important
}

.mt160 {
  margin-top: 160px !important
}

@media screen and (max-width: 768px) {
  .mtsp0 {
    margin-top: 0px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp10 {
    margin-top: 10px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp20 {
    margin-top: 20px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp30 {
    margin-top: 30px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp40 {
    margin-top: 40px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp50 {
    margin-top: 50px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp60 {
    margin-top: 60px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp70 {
    margin-top: 70px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp80 {
    margin-top: 80px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp90 {
    margin-top: 90px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp100 {
    margin-top: 100px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp110 {
    margin-top: 110px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp120 {
    margin-top: 120px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp130 {
    margin-top: 130px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp140 {
    margin-top: 140px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp150 {
    margin-top: 150px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp160 {
    margin-top: 160px !important
  }
}

.boxw50 {
  width: 50% !important
}

.boxw60 {
  width: 60% !important
}

.boxw70 {
  width: 70% !important
}

.boxw80 {
  width: 80% !important
}

.boxw90 {
  width: 90% !important
}

.boxw100 {
  width: 100% !important
}

.mw50 {
  max-width: 50% !important
}

.mw60 {
  max-width: 60% !important
}

.mw70 {
  max-width: 70% !important
}

.mw80 {
  max-width: 80% !important
}

.mw90 {
  max-width: 90% !important
}

.mw100 {
  max-width: 100% !important
}

.balloon {
  display: flex;
  justify-content: center;
  align-items: center
}

@media screen and (min-width: 769px) {
  .balloon .ic {
    padding-right: 25px
  }
}

@media screen and (max-width: 768px) {
  .balloon .ic {
    padding-right: 12px
  }
}

.balloon1 {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: #019f75;
  background-color: #FFF;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2)
}

@media screen and (min-width: 769px) {
  .balloon1 {
    margin: .8em 0 .8em 15px;
    padding: 25px 10px;
    min-width: 120px
  }
}

@media screen and (max-width: 768px) {
  .balloon1 {
    margin: .2em 0 .2em 15px;
    padding: 12px 5px
  }
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #FFF
}

.balloon1 p {
  margin: 0
}

@media screen and (min-width: 769px) {
  .balloon1 p {
    padding: 0 20px
  }
}

@media screen and (max-width: 768px) {
  .balloon1 p {
    padding: 0 5px;
    font-size: 1rem
  }
}

.greens .balloon1 {
  color: #019f75
}

.blues .balloon1 {
  color: #0080b2
}

.oranges .balloon1 {
  color: #dc7e19
}

.balloon2 {
  position: relative;
  display: block;
  margin: 1.5em 0;
  padding: 7px 10px;
  max-width: 100%;
  font-weight: 700;
  background: #FFF;
  color: #333;
  border: solid 1px #9e9e9e;
  text-align: center
}

.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2
}

.balloon2:after {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  border: 13px solid transparent;
  border-top: 13px solid #9e9e9e;
  z-index: 1
}

.balloon2 p {
  margin: 0;
  padding: 0
}

@media screen and (max-width: 768px) {
  .pc_ver {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .sp_ver {
    display: none
  }
}

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

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

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

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

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

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

.mt60 {
  margin-top: 60px !important
}

.mt70 {
  margin-top: 70px !important
}

.mt80 {
  margin-top: 80px !important
}

.mt90 {
  margin-top: 90px !important
}

.mt100 {
  margin-top: 100px !important
}

.mt110 {
  margin-top: 110px !important
}

.mt120 {
  margin-top: 120px !important
}

.mt130 {
  margin-top: 130px !important
}

.mt140 {
  margin-top: 140px !important
}

.mt150 {
  margin-top: 150px !important
}

.mt160 {
  margin-top: 160px !important
}

@media screen and (max-width: 768px) {
  .mtsp0 {
    margin-top: 0px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp10 {
    margin-top: 10px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp20 {
    margin-top: 20px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp30 {
    margin-top: 30px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp40 {
    margin-top: 40px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp50 {
    margin-top: 50px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp60 {
    margin-top: 60px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp70 {
    margin-top: 70px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp80 {
    margin-top: 80px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp90 {
    margin-top: 90px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp100 {
    margin-top: 100px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp110 {
    margin-top: 110px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp120 {
    margin-top: 120px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp130 {
    margin-top: 130px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp140 {
    margin-top: 140px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp150 {
    margin-top: 150px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp160 {
    margin-top: 160px !important
  }
}

.boxw50 {
  width: 50% !important
}

.boxw60 {
  width: 60% !important
}

.boxw70 {
  width: 70% !important
}

.boxw80 {
  width: 80% !important
}

.boxw90 {
  width: 90% !important
}

.boxw100 {
  width: 100% !important
}

.mw50 {
  max-width: 50% !important
}

.mw60 {
  max-width: 60% !important
}

.mw70 {
  max-width: 70% !important
}

.mw80 {
  max-width: 80% !important
}

.mw90 {
  max-width: 90% !important
}

.mw100 {
  max-width: 100% !important
}

.recommend {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  text-align: left
}

.recommend>dt {
  padding: 1.25rem 1rem;
  color: #FFF;
  font-weight: 700;
  line-height: 1;
  text-align: center
}

@media screen and (min-width: 769px) {
  .recommend>dt {
    font-size: 1.5rem
  }
}

@media screen and (max-width: 768px) {
  .recommend>dt {
    font-size: 1.25rem
  }
}

.recommend>dt span {
  font-size: 1.85rem
}

.recommend>*+dt {
  margin-top: 30px
}

.recommend>dd {
  background-color: #f0f0f0;
  border: solid 1px #c9c9c9;
  padding-bottom: 25px
}

.recommend>dd .balloon {
  max-width: 96%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .recommend>dd .ic {
    width: 140px;
    padding-left: 2%
  }
}

@media screen and (max-width: 768px) {
  .recommend>dd .ic {
    width: 60px
  }
}

.recommend>dd .balloon1 {
  font-weight: 400;
  color: #333
}

@media screen and (min-width: 769px) {
  .recommend>dd .balloon1 {
    width: calc(100% - 140px)
  }
}

@media screen and (max-width: 768px) {
  .recommend>dd .balloon1 {
    width: calc(100% - 60px)
  }
}

.items {
  text-align: left;
  width: 96%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFF;
  padding: 20px 3% 30px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2)
}

.items h3 {
  position: relative;
  padding-bottom: 15px;
  border-bottom: solid 1px #d7d7d7;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4
}

@media screen and (min-width: 769px) {
  .items h3 img {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-60%);
    max-height: 26px
  }
}

@media screen and (max-width: 768px) {
  .items h3 img {
    position: absolute;
    bottom: 10px;
    right: 0%;
    max-height: 18px
  }
}

@media screen and (max-width: 768px) {
  .items h3 {
    padding: 0 0 36px 0;
    background-position: right bottom 10px;
    background-size: auto 18px
  }
}

.items+.items {
  margin-top: 30px
}

.data {
  margin-top: 25px
}

@media screen and (min-width: 769px) {
  .data {
    display: flex;
    justify-content: space-between
  }
}

.data .mainphoto {
  position: relative;
  padding-top: 65%
}

.data .photos {
  position: relative;
  overflow: hidden;
  margin-top: 15px
}

@media screen and (min-width: 769px) {
  .data .photos {
    width: 44%
  }
}

.data .photos div.images {
  position: absolute;
  left: 0;
  top: 0;
  text-align: center
}

.data .photos div.images img {
  width: 100%;
  max-height: 100%
}

.data .photos .images {
  text-align: center
}

.data .photos .captions {
  display: block
}

.data .photos ul.images {
  width: 100%
}

@media screen and (min-width: 769px) {
  .data .photos ul.images {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .data .photos ul.images {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 20px
  }
}

.data .photos ul.images li {
  position: relative
}

@media screen and (min-width: 769px) {
  .data .photos ul.images li {
    width: 19%;
    margin-top: 10px;
    margin-right: 1.25%;
    background-color: #FFF
  }
}

@media screen and (max-width: 768px) {
  .data .photos ul.images li {
    background-color: #dab4b4;
    width: 12px;
    height: 12px;
    margin: 0 .5rem;
    border-radius: 6px
  }
}

.data .photos ul.images li .inner {
  font-size: 0;
  line-height: 0;
  overflow: hidden
}

@media screen and (min-width: 769px) {
  .data .photos ul.images li .inner {
    padding-bottom: 71%
  }
}

@media screen and (min-width: 769px) {
  .data .photos ul.images li img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
  }
}

@media screen and (max-width: 768px) {
  .data .photos ul.images li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
  }
}

@media screen and (min-width: 769px) {
  .data .photos ul.images li img:hover {
    opacity: 0.75
  }
}

@media screen and (max-width: 768px) {
  .data .photos ul.images li:first-child {
    background-color: #d63939
  }
}

@media screen and (min-width: 769px) {
  .data .photos ul.images li:nth-child(5n) {
    margin-right: 0%
  }
}

@media screen and (min-width: 769px) {
  .data .texts {
    width: 53%
  }
}

@media screen and (max-width: 768px) {
  .data .texts {
    margin-top: 20px
  }
}

.data .texts .ridingstyle.commuter {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22672.656%22%20height%3D%22712.937%22%20viewBox%3D%220%200%20672.656%20712.937%22%3E%3Cpath%20fill%3D%22%230080b2%22%20d%3D%22M418%2C1c75.39-2.33%2C80.39%2C91.35%2C20%2C107-38.63%2C10.011-76.875-27.577-64-69C381.2%2C15.852%2C396.365%2C10.144%2C418%2C1Zm40%2C125c12.788%2C0.694%2C24.971%2C3.536%2C31%2C11%2C23.986%2C29.692%2C2.4%2C156.788%2C15%2C203%2C9.986-1.515%2C14.742%2C1.3%2C20%2C7q-0.5%2C6-1%2C12c-6.863%2C15.627-27.51%2C5.366-43%2C12l-17%2C24%2C27%2C56c140.811-38.752%2C238.479%2C106.746%2C152%2C216-59.142%2C74.718-177.9%2C54.092-222-19-9.014-14.939-14.669-33.9-18-54V556l-43-12-18%2C18-17%2C18c-1.5%2C4.942%2C8.8%2C11.028%2C5%2C20-6.492%2C13.781-40.013%2C9.56-60%2C9C251.488%2C723.031%2C90.774%2C748.1%2C26%2C659c-64.2-88.312%2C4.688-230.485%2C118-216l20-121c-8.807-.353-13.294-3.611-16-10V300c13.562-17.342%2C42.89-2.167%2C68-9l94-31%2C17-23%2C51-65c8.51-12.18%2C14.787-27.746%2C27-36C418.576%2C126.826%2C441.01%2C132.724%2C458%2C126ZM194%2C322q-4.5%2C28.5-9%2C57l143-1%2C9-9%2C52-25L379%2C238l-3%2C2-40%2C53L231%2C328C217.734%2C330.452%2C210.3%2C322.067%2C194%2C322Zm186%2C86-7%2C4-28%2C88%2C5%2C3h1l64-95H380Zm-171%2C1%2C90%2C59%2C19-59H209Zm-32%2C16-3%2C23c40.08%2C6.969%2C73.654%2C42.647%2C88%2C76l9%2C30%2C17-53Zm265%2C0-65%2C93%2C35%2C10c6.6-30.752%2C33.6-43.979%2C51-64ZM125%2C473c-41%2C16.707-59.056%2C15.681-81%2C53C1.349%2C598.534%2C58.491%2C673.366%2C123%2C684c72.578%2C11.964%2C137.574-61.861%2C116-134-10.79-36.078-35.232-58.648-69-72l-2%2C1c-0.47%2C19.812-14.4%2C107.856-25%2C113-7.18%2C4.337-14.094-.375-19-4-5.955-20.133%2C7.74-91.624%2C15-115H125Zm401%2C0-21%2C5%2C44%2C84c4.035%2C7.883%2C12.118%2C23.454%2C2%2C31-12.811%2C9.555-97.526-23.41-118-27-15.007%2C104.573%2C106.187%2C147.981%2C177%2C91%2C13.348-10.74%2C21.812-28%2C28-46C665.047%2C532.3%2C602.406%2C471.969%2C526%2C473Zm-50%2C19c-10.785%2C12.463-33.616%2C26.213-34%2C45l69%2C19C505.313%2C543.57%2C485.505%2C497.726%2C476%2C492ZM273%2C579l7-1h-2l-5-6v7Z%22%20transform%3D%22translate%28-1.344%20-0.969%29%22%2F%3E%3C%2Fsvg%3E")
}

.data .texts .ridingstyle.comfort {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22674%22%20height%3D%22718%22%20viewBox%3D%220%200%20674%20718%22%3E%3Cpath%20fill%3D%22%230080b2%22%20d%3D%22M360%2C0c70.424-1.149%2C75.153%2C95.18%2C15%2C108-41.638%2C8.874-74.859-30.954-63-69C319.764%2C14.089%2C336.1%2C9.423%2C360%2C0Zm69%2C108c36.077%2C0.081%2C37.853%2C27.418%2C48%2C53l51%2C130c10.183%2C25.743%2C12.163%2C38.708-8%2C55%2C2.656%2C3.683%2C5.978%2C9.536%2C3%2C16-6.863%2C15.627-27.51%2C5.366-43%2C12l-17%2C24%2C27%2C56c140.811-38.752%2C238.479%2C106.746%2C152%2C216-59.142%2C74.718-177.9%2C54.092-222-19-9.014-14.939-14.669-33.9-18-54V559l-43-12-18%2C18-17%2C18c-1.5%2C4.942%2C8.8%2C11.028%2C5%2C20-6.492%2C13.781-40.013%2C9.56-60%2C9C251.488%2C726.031%2C90.774%2C751.1%2C26%2C662c-64.2-88.312%2C4.688-230.485%2C118-216l20-121c-8.807-.353-13.294-3.611-16-10V303c14.67-18.778%2C46.388.1%2C72-9l75-44%2C40-96C348.911%2C135.066%2C405.059%2C119.751%2C429%2C108ZM194%2C325q-4.5%2C28.5-9%2C57l143-1%2C15-12%2C78-36c-3.208-16.031-51.5-119.55-61-129v2l-30%2C71c-4.166%2C6.214-88.78%2C54.242-98%2C55-8.085.664-9.676-5.252-14-7H194Zm186%2C86-7%2C4-28%2C88%2C5%2C3h1l64-95H380Zm-171%2C1%2C90%2C59%2C19-59H209Zm-32%2C16-3%2C23c40.08%2C6.969%2C73.654%2C42.647%2C88%2C76l9%2C30%2C17-53Zm265%2C0-65%2C93%2C35%2C10c6.6-30.752%2C33.6-43.979%2C51-64ZM125%2C476c-41%2C16.707-59.056%2C15.681-81%2C53C1.349%2C601.534%2C58.491%2C676.366%2C123%2C687c72.578%2C11.964%2C137.574-61.861%2C116-134-10.79-36.078-35.232-58.648-69-72l-2%2C1c-0.47%2C19.812-14.4%2C107.856-25%2C113-7.18%2C4.337-14.094-.375-19-4-5.955-20.133%2C7.74-91.624%2C15-115H125Zm401%2C0-21%2C5%2C44%2C84c4.035%2C7.883%2C12.118%2C23.454%2C2%2C31-12.811%2C9.555-97.526-23.41-118-27-15.007%2C104.573%2C106.187%2C147.981%2C177%2C91%2C13.348-10.74%2C21.812-28%2C28-46C665.047%2C535.3%2C602.406%2C474.969%2C526%2C476Zm-50%2C19c-10.785%2C12.463-33.616%2C26.213-34%2C45l69%2C19C505.313%2C546.57%2C485.505%2C500.726%2C476%2C495ZM273%2C582l7-1h-2l-5-6v7Z%22%2F%3E%3C%2Fsvg%3E")
}

.data .texts .ridingstyle.sports {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22805%22%20height%3D%22635%22%20viewBox%3D%220%200%20805%20635%22%3E%3Cpath%20fill%3D%22%230080b2%22%20d%3D%22M221%2C0c70.451%2C4.969%2C78.631%2C95.96%2C13%2C108-44.911%2C8.239-74.117-38.532-59-75C183.669%2C12.086%2C199.391%2C8.655%2C221%2C0Zm97%2C74c25.362-.62%2C44.583%2C9.311%2C63%2C17%2C44.926%2C18.757%2C131.984%2C70.459%2C154%2C109%2C14.944%2C26.161-3.35%2C48.777-15%2C63%2C2.055%2C3.619%2C4.331%2C9.836%2C2%2C15-6.863%2C15.627-27.51%2C5.366-43%2C12l-17%2C24%2C27%2C56c136.9-37.689%2C234.676%2C97.5%2C156%2C210l101%2C1-109%2C8-14%2C13v1l182%2C1L605%2C619l-49%2C14c-55.5%2C10.294-102.853-20.8-125-49-14.932-19.013-25.011-42-30-71V475l-43-12-18%2C18-17%2C18c-1.5%2C4.942%2C8.8%2C11.028%2C5%2C20-6.492%2C13.781-40.013%2C9.56-60%2C9C250.488%2C642.031%2C89.774%2C667.1%2C25%2C578c-64.2-88.312%2C4.688-230.485%2C118-216l20-121c-8.807-.353-13.294-3.611-16-10V219c11.64-15.47%2C36.656-4.53%2C60-9l14-6%2C77%2C17c-10.511-30.265-34.889-100.631-13-129C293.174%2C81.406%2C304.851%2C80.057%2C318%2C74Zm92%2C12%2C133%2C1C507.473%2C87.359%2C428.237%2C105.241%2C410%2C86Zm41%2C23%2C133%2C1C548.473%2C110.359%2C469.237%2C128.241%2C451%2C109ZM193%2C241q-4.5%2C28.5-9%2C57l143-1%2C15-12%2C77-36v-1l-87-60c2.116%2C16.589%2C19.267%2C52.544%2C13%2C68-6.337%2C15.629-26.168%2C13.586-43%2C9C267.807%2C255.684%2C232.131%2C241.511%2C193%2C241Zm300%2C67%2C244%2C1L517%2C326ZM379%2C327l-7%2C4-28%2C88%2C5%2C3h1l64-95H379Zm-171%2C1%2C90%2C59%2C19-59H208Zm345%2C11%2C202%2C1C698.475%2C340.314%2C585.094%2C368.463%2C553%2C339Zm-377%2C5-3%2C23c40.08%2C6.969%2C73.654%2C42.647%2C88%2C76l9%2C30%2C17-53Zm265%2C0-65%2C93%2C35%2C10c6.6-30.752%2C33.6-43.979%2C51-64Zm175%2C23%2C133%2C1C713.473%2C368.359%2C634.237%2C386.241%2C616%2C367Zm28%2C23%2C133%2C1C741.473%2C391.359%2C662.237%2C409.241%2C644%2C390Zm-520%2C2c-41%2C16.707-59.056%2C15.681-81%2C53C0.349%2C517.534%2C57.491%2C592.366%2C122%2C603c72.578%2C11.964%2C137.574-61.861%2C116-134-10.79-36.078-35.232-58.648-69-72l-2%2C1c-0.47%2C19.812-14.4%2C107.856-25%2C113-7.18%2C4.337-14.094-.375-19-4-5.955-20.133%2C7.74-91.624%2C15-115H124Zm401%2C0-21%2C5%2C44%2C84c4.035%2C7.883%2C12.118%2C23.454%2C2%2C31-12.811%2C9.555-97.526-23.41-118-27-15.007%2C104.573%2C106.187%2C147.981%2C177%2C91%2C13.348-10.74%2C21.812-28%2C28-46C664.047%2C451.3%2C601.406%2C390.969%2C525%2C392Zm-50%2C19c-10.785%2C12.463-33.616%2C26.213-34%2C45l69%2C19C504.313%2C462.57%2C484.505%2C416.726%2C475%2C411ZM272%2C498l7-1h-2l-5-6v7Z%22%2F%3E%3C%2Fsvg%3E")
}

.data .texts .ridingstyle {
  height: 2rem;
  background-size: auto 90%;
  padding-left: 2.5rem;
  background-repeat: no-repeat;
  background-position: left center;
  border: none
}

.data .texts h4 {
  display: inline-block;
  border: solid 1px #333;
  padding: 5px 15px;
  line-height: 1;
  font-size: 1.125rem;
  font-weight: 700
}

.data .texts *+h4 {
  margin-top: 2rem
}

.data .texts .itemschara {
  margin-top: .25rem
}

@media screen and (min-width: 769px) {
  .data .texts .itemschara {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
  }
}

.data .texts .itemschara>li {
  margin-top: .25rem
}

@media screen and (min-width: 769px) {
  .data .texts .itemschara>li {
    width: 49%
  }
}

.data .texts .itemschara dl {
  display: flex;
  justify-content: flex-start;
  font-size: 0.875rem
}

.data .texts .itemschara dt {
  padding-left: 1.25rem;
  position: relative;
  color: #000
}

.data .texts .itemschara dt:before {
  position: absolute;
  top: .25rem;
  left: 0;
  font-size: 0.75rem;
  content: "■"
}

.data .texts .itemschara dt:after {
  content: "："
}

.data .texts .icons {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px
}

@media screen and (min-width: 769px) {
  .data .texts .icons li {
    margin-right: 15px;
    margin-top: 10px
  }
}

@media screen and (max-width: 768px) {
  .data .texts .icons li {
    width: 33.3%;
    margin-top: 1rem
  }
}

.data .texts .icons li:last-child {
  margin-right: 0px
}

.data .texts .icons div {
  background-repeat: no-repeat;
  background-position: center center;
  width: 54px;
  height: 54px;
  background-size: auto 100%;
  margin: 0 auto
}

.data .texts .icons .fic1 {
  background-image: url("../images/diskbrake.png")
}

.data .texts .icons .fic2 {
  background-image: url("../images/autolight.png")
}

.data .texts .icons .fic3 {
  background-image: url("../images/sidestand.png")
}

.data .texts .icons .fic4 {
  background-image: url("../images/chainguard.png")
}

.data .texts .icons .fic5 {
  background-image: url("../images/grip.png")
}

.data .texts .icons p {
  font-size: 10px;
  text-align: center
}

.pricearea {
  margin-top: 1.5rem;
  text-align: center
}

.pricearea .price {
  font-size: 1.5rem;
  color: #d63939;
  font-weight: 700
}

.pricearea .price span {
  font-size: 2.625rem;
  line-height: 1;
  font-weight: 900
}

.pricearea .orderbt {
  margin-top: 1rem
}

@media screen and (max-width: 768px) {
  .pricearea+.pricearea {
    margin-top: 2rem
  }
}

.points {
  margin-top: 20px
}

.points dt {
  color: #FFF;
  font-size: 1.25rem;
  padding: .75rem 1rem
}

@media screen and (min-width: 769px) {
  .points dt {
    text-align: center;
    line-height: 1
  }
}

@media screen and (max-width: 768px) {
  .points dt {
    text-align: left;
    line-height: 1.5rem
  }
}

.points dd {
  padding: 1rem
}

.pricehd {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 0.875rem;
  min-height: 1.25rem;
  text-align: center
}

@media screen and (min-width: 769px) {
  .pa2clm {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
  }
  .pa2clm>div {
    width: 49%
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .pa2clm>div .price {
    margin-top: 1.25rem
  }
}

@media screen and (min-width: 769px) {
  .pa2clm>div .pricehd+.price {
    margin-top: 0
  }
  .pa2clm>div .price span {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1
  }
  .pa2clm .orderbt {
    font-size: 1rem
  }
}

#rec1 {
  background-color: #006464
}

#rec2 {
  background-color: #1b6797
}

#rec3 {
  background-color: #045c7f
}

#rec4 {
  background-color: #dc64a8
}

#rec5 {
  background-color: #0080b2
}

.greens .recommend .points dt {
  background-color: #019f75
}

.greens .recommend .points dd {
  border: solid 2px #019f75
}

.blues .recommend .points dt {
  background-color: #0080b2
}

.blues .recommend .points dd {
  border: solid 2px #0080b2
}

html {
  overflow-x: hidden
}

@media screen and (min-width: 769px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 12px
  }
}

body {
  line-height: 1.8;
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "Helvetica", "Arial", sans-serif;
  position: relative
}

@media screen and (min-width: 769px) {
  body {
    font-size: 16px;
    padding-top: 40px
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 12px;
    padding-top: 60px
  }
}

body.modal-open {
  height: 100vh;
  overflow-y: hidden
}

.sub {
  font-size: 0.75rem
}

.skyblue {
  color: #0090cd
}

.red {
  color: #ff0000
}

section a:link {
  text-decoration: none;
  color: #0080b2
}

section a:visited {
  text-decoration: none;
  color: #0080b2
}

section a:hover {
  text-decoration: none;
  color: #0080b2
}

section a:active {
  text-decoration: none;
  color: #0080b2
}

section a.fcw:link {
  text-decoration: none;
  color: #FFF
}

section a.fcw:visited {
  text-decoration: none;
  color: #FFF
}

section a.fcw:hover {
  text-decoration: none;
  color: #FFF
}

section a.fcw:active {
  text-decoration: none;
  color: #FFF
}

#ptbtn {
  position: fixed
}

@media screen and (min-width: 769px) {
  #ptbtn {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    max-width: 2%;
    min-width: 80px
  }
}

@media screen and (max-width: 768px) {
  #ptbtn {
    bottom: 50px;
    right: 0;
    max-width: 2%;
    min-width: 40px
  }
}

@media screen and (max-width: 768px) {
  .nextimg, .backimg {
    display: inline-block;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .nextimg img, .backimg img {
    width: 12px;
    height: auto
  }
}

@media screen and (min-width: 769px) {
  .nextimg, .backimg {
    display: none
  }
}

.greens .nextimg, .greens .backimg {
  background-color: #019f75
}

.blues .nextimg, .blues .backimg {
  background-color: #0080b2
}

.oranges .nextimg, .oranges .backimg {
  background-color: #dc7e19
}

.nextimg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5
}

.backimg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5
}

.bt {
  display: inline-block;
  background-color: #019f75;
  color: #FFF !important;
  font-size: 1.5rem;
  line-height: 1.4;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-decoration: none
}

@media screen and (min-width: 769px) {
  .bt {
    padding: 1rem 1.5em
  }
}

@media screen and (max-width: 768px) {
  .bt {
    width: 100%;
    padding: .5rem .75em
  }
}

.bt.setW {
  min-width: 320px
}

@media screen and (min-width: 769px) {
  .bt.setW500 {
    min-width: 500px
  }
}

.bt.setW50 {
  min-width: 50%
}

.bt:after {
  content: "＞";
  font-weight: 400;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%)
}

@media screen and (max-width: 768px) {
  .bt:after {
    font-size: 1rem
  }
}

.bt:hover {
  background-color: #00b988;
  transition: background-color 0.25s ease 0s
}

.orderbt {
  display: inline-block;
  background-color: #003e81;
  color: #FFF !important;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  margin-left: auto;
  margin-right: auto;
  padding: .75rem 1.5em;
  position: relative;
  text-decoration: none
}

.orderbt.setW {
  min-width: 320px
}

.orderbtShop {
  background-color: #019f75
}

.orderbt:after {
  content: "＞";
  font-weight: 400;
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%)
}

@media screen and (max-width: 768px) {
  .orderbt:after {
    font-size: 1rem
  }
}

.orderbt:hover {
  background-color: #005dc1;
  transition: background-color 0.25s ease 0s
}

.clY {
  background-color: #d8970a !important
}

.clR {
  background-color: #f15050 !important
}

.clB {
  background-color: #0080b2 !important
}

.clS {
  background-color: #0180b3 !important
}

.clW {
  color: #333 !important;
  background-color: #FFF !important
}

.clY:hover, .clR:hover, .clB:hover, .clW:hover {
  opacity: .8;
  transition: opacity 0.25s ease 0s
}

h2.underlines span {
  display: inline-block;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px
}

@media screen and (max-width: 768px) {
  h2.underlines span {
    line-height: 1.5
  }
}

h2.underlines span:after {
  display: block;
  width: 100%;
  height: 20px;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1
}

.greens .hd h2.underlines span:after {
  background-color: #d6f1ea
}

.blues .hd h2.underlines span:after {
  background-color: #e9f7fd
}

.oranges .hd h2.underlines span:after {
  background-color: #fbefe1
}

#mainarea {
  max-width: 1200px;
  min-height: 100vh;
  margin: 50px auto 0;
  padding: 0 5%
}

#mainarea ul.tab {
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}

#mainarea ul.tab li {
  width: 33%;
  margin-right: .5%;
  text-align: center;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #mainarea ul.tab li {
    font-size: 2rem
  }
}

@media screen and (max-width: 768px) {
  #mainarea ul.tab li {
    font-size: 1.25rem
  }
}

#mainarea ul.tab li a {
  display: block;
  color: #FFF;
  line-height: 1;
  background-color: #c1cbd0;
  text-decoration: none;
  transition: all 0.25s ease 0s
}

@media screen and (min-width: 769px) {
  #mainarea ul.tab li a {
    padding: 20px 5px
  }
}

@media screen and (max-width: 768px) {
  #mainarea ul.tab li a {
    padding: 1rem 5px
  }
}

#mainarea ul.tab li a:hover {
  padding: 25px 5px;
  background-color: #dc7e19
  transition: all 0.25s ease 0s
}

#mainarea ul.tab li a.active {
  pointer-events: none;
  padding: 25px 5px
}

#mainarea ul.tab li a#tab2:hover {
  background-color: #019f75
}

#mainarea ul.tab li a#tab2.active {
  background-color: #019f75
}

#mainarea ul.tab li a#tab3:hover {
  background-color: #0080b2
}

#mainarea ul.tab li a#tab3.active {
  background-color: #0080b2
}

#mainarea ul.tab li a#tab1:hover {
  background-color: #dc7e19
}

#mainarea ul.tab li a#tab1.active {
  background-color: #dc7e19
}

#mainarea ul.tab li:last-child {
  margin-right: 0
}

#mainarea>.inner {
  border-top: none;
  padding: 0 3% 50px;
  display: none
}

#mainarea>.inner.greens {
  border: solid 4px #019f75
}

#mainarea>.inner.blues {
  border: solid 4px #0080b2
}

#mainarea>.inner.oranges {
  border: solid 4px #dc7e19
}

#mainarea>.inner.active {
  display: block
}

section .hd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
  text-align: center
}

@media screen and (min-width: 769px) {
  section .hd {
    min-height: 129px
  }
}

@media screen and (max-width: 768px) {
  section .hd {
    min-height: 65px
  }
}

section h2 {
  line-height: 1;
  font-weight: 900
}

@media screen and (min-width: 769px) {
  section h2 {
    font-size: 1.625rem
  }
}

@media screen and (max-width: 768px) {
  section h2 {
    font-size: 1.5rem
  }
}

section h2 span {
  display: inline-block;
  position: relative
}

@media screen and (min-width: 769px) {
  section h2 span {
    font-size: 2.25rem
  }
}

@media screen and (max-width: 768px) {
  section h2 span {
    font-size: 1.75rem
  }
}

section .hd+p {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2rem;
  position: relative
}

@media screen and (min-width: 769px) {
  section .hd+p {
    text-align: center
  }
}

@media screen and (max-width: 768px) {
  section .hd+p {
    text-align: left;
    margin-top: 2rem
  }
}

@media screen and (min-width: 769px) {
  section .hd+p {
    padding: 50px 0
  }
}

@media screen and (max-width: 768px) {
  section .hd+p {
    padding: 10px 0 25px
  }
}

section .hd+p:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
  transform: scalex(-1) scaleY(-1);
  z-index: -1
}

@media screen and (min-width: 769px) {
  section .hd+p:before {
    width: 79px;
    height: 70px
  }
}

@media screen and (max-width: 768px) {
  section .hd+p:before {
    width: 40px;
    height: 35px
  }
}

section .hd+p:after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
  z-index: -1
}

@media screen and (min-width: 769px) {
  section .hd+p:after {
    width: 79px;
    height: 70px
  }
}

@media screen and (max-width: 768px) {
  section .hd+p:after {
    width: 40px;
    height: 35px
  }
}

.greens .hd+p:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278.72%22%20height%3D%2269.53%22%20viewBox%3D%220%200%2078.72%2069.53%22%3E%3Cpath%20fill%3D%22%23d6f1ea%22%20d%3D%22M1208.29%2C1115.48v37.34h18.35a25.932%2C25.932%2C0%2C0%2C1-1.35%2C8.49q-1.89%2C4.8-8.01%2C7.6a32.322%2C32.322%2C0%2C0%2C1-7.64%2C2.08l7.73%2C14.01a50.966%2C50.966%2C0%2C0%2C0%2C7.83-2.44%2C29.945%2C29.945%2C0%2C0%2C0%2C8.82-5.79q9.165-8.58%2C9.26-23.95v-37.34h-34.99Zm43.72%2C0v37.34h18.44a27.67%2C27.67%2C0%2C0%2C1-1.44%2C8.4q-1.98%2C4.98-8.19%2C7.69a37.6%2C37.6%2C0%2C0%2C1-7.82%2C2.08l7.73%2C14.01a67.475%2C67.475%2C0%2C0%2C0%2C8.01-2.44%2C27.412%2C27.412%2C0%2C0%2C0%2C9.26-6.24q9-9.12%2C9-23.5v-37.34h-34.99Z%22%20transform%3D%22translate%28-1208.28%20-1115.47%29%22%2F%3E%3C%2Fsvg%3E")
}

.greens .hd+p:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278.72%22%20height%3D%2269.53%22%20viewBox%3D%220%200%2078.72%2069.53%22%3E%3Cpath%20fill%3D%22%23d6f1ea%22%20d%3D%22M1208.29%2C1115.48v37.34h18.35a25.932%2C25.932%2C0%2C0%2C1-1.35%2C8.49q-1.89%2C4.8-8.01%2C7.6a32.322%2C32.322%2C0%2C0%2C1-7.64%2C2.08l7.73%2C14.01a50.966%2C50.966%2C0%2C0%2C0%2C7.83-2.44%2C29.945%2C29.945%2C0%2C0%2C0%2C8.82-5.79q9.165-8.58%2C9.26-23.95v-37.34h-34.99Zm43.72%2C0v37.34h18.44a27.67%2C27.67%2C0%2C0%2C1-1.44%2C8.4q-1.98%2C4.98-8.19%2C7.69a37.6%2C37.6%2C0%2C0%2C1-7.82%2C2.08l7.73%2C14.01a67.475%2C67.475%2C0%2C0%2C0%2C8.01-2.44%2C27.412%2C27.412%2C0%2C0%2C0%2C9.26-6.24q9-9.12%2C9-23.5v-37.34h-34.99Z%22%20transform%3D%22translate%28-1208.28%20-1115.47%29%22%2F%3E%3C%2Fsvg%3E")
}

.blues .hd+p:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278.72%22%20height%3D%2269.53%22%20viewBox%3D%220%200%2078.72%2069.53%22%3E%3Cpath%20fill%3D%22%23e9f7fd%22%20d%3D%22M1208.29%2C1115.48v37.34h18.35a25.932%2C25.932%2C0%2C0%2C1-1.35%2C8.49q-1.89%2C4.8-8.01%2C7.6a32.322%2C32.322%2C0%2C0%2C1-7.64%2C2.08l7.73%2C14.01a50.966%2C50.966%2C0%2C0%2C0%2C7.83-2.44%2C29.945%2C29.945%2C0%2C0%2C0%2C8.82-5.79q9.165-8.58%2C9.26-23.95v-37.34h-34.99Zm43.72%2C0v37.34h18.44a27.67%2C27.67%2C0%2C0%2C1-1.44%2C8.4q-1.98%2C4.98-8.19%2C7.69a37.6%2C37.6%2C0%2C0%2C1-7.82%2C2.08l7.73%2C14.01a67.475%2C67.475%2C0%2C0%2C0%2C8.01-2.44%2C27.412%2C27.412%2C0%2C0%2C0%2C9.26-6.24q9-9.12%2C9-23.5v-37.34h-34.99Z%22%20transform%3D%22translate%28-1208.28%20-1115.47%29%22%2F%3E%3C%2Fsvg%3E")
}

.blues .hd+p:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278.72%22%20height%3D%2269.53%22%20viewBox%3D%220%200%2078.72%2069.53%22%3E%3Cpath%20fill%3D%22%23e9f7fd%22%20d%3D%22M1208.29%2C1115.48v37.34h18.35a25.932%2C25.932%2C0%2C0%2C1-1.35%2C8.49q-1.89%2C4.8-8.01%2C7.6a32.322%2C32.322%2C0%2C0%2C1-7.64%2C2.08l7.73%2C14.01a50.966%2C50.966%2C0%2C0%2C0%2C7.83-2.44%2C29.945%2C29.945%2C0%2C0%2C0%2C8.82-5.79q9.165-8.58%2C9.26-23.95v-37.34h-34.99Zm43.72%2C0v37.34h18.44a27.67%2C27.67%2C0%2C0%2C1-1.44%2C8.4q-1.98%2C4.98-8.19%2C7.69a37.6%2C37.6%2C0%2C0%2C1-7.82%2C2.08l7.73%2C14.01a67.475%2C67.475%2C0%2C0%2C0%2C8.01-2.44%2C27.412%2C27.412%2C0%2C0%2C0%2C9.26-6.24q9-9.12%2C9-23.5v-37.34h-34.99Z%22%20transform%3D%22translate%28-1208.28%20-1115.47%29%22%2F%3E%3C%2Fsvg%3E")
}

.oranges .hd+p:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278.72%22%20height%3D%2269.53%22%20viewBox%3D%220%200%2078.72%2069.53%22%3E%3Cpath%20fill%3D%22%23fbefe1%22%20d%3D%22M1208.29%2C1115.48v37.34h18.35a25.932%2C25.932%2C0%2C0%2C1-1.35%2C8.49q-1.89%2C4.8-8.01%2C7.6a32.322%2C32.322%2C0%2C0%2C1-7.64%2C2.08l7.73%2C14.01a50.966%2C50.966%2C0%2C0%2C0%2C7.83-2.44%2C29.945%2C29.945%2C0%2C0%2C0%2C8.82-5.79q9.165-8.58%2C9.26-23.95v-37.34h-34.99Zm43.72%2C0v37.34h18.44a27.67%2C27.67%2C0%2C0%2C1-1.44%2C8.4q-1.98%2C4.98-8.19%2C7.69a37.6%2C37.6%2C0%2C0%2C1-7.82%2C2.08l7.73%2C14.01a67.475%2C67.475%2C0%2C0%2C0%2C8.01-2.44%2C27.412%2C27.412%2C0%2C0%2C0%2C9.26-6.24q9-9.12%2C9-23.5v-37.34h-34.99Z%22%20transform%3D%22translate%28-1208.28%20-1115.47%29%22%2F%3E%3C%2Fsvg%3E")
}

.oranges .hd+p:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278.72%22%20height%3D%2269.53%22%20viewBox%3D%220%200%2078.72%2069.53%22%3E%3Cpath%20fill%3D%22%23fbefe1%22%20d%3D%22M1208.29%2C1115.48v37.34h18.35a25.932%2C25.932%2C0%2C0%2C1-1.35%2C8.49q-1.89%2C4.8-8.01%2C7.6a32.322%2C32.322%2C0%2C0%2C1-7.64%2C2.08l7.73%2C14.01a50.966%2C50.966%2C0%2C0%2C0%2C7.83-2.44%2C29.945%2C29.945%2C0%2C0%2C0%2C8.82-5.79q9.165-8.58%2C9.26-23.95v-37.34h-34.99Zm43.72%2C0v37.34h18.44a27.67%2C27.67%2C0%2C0%2C1-1.44%2C8.4q-1.98%2C4.98-8.19%2C7.69a37.6%2C37.6%2C0%2C0%2C1-7.82%2C2.08l7.73%2C14.01a67.475%2C67.475%2C0%2C0%2C0%2C8.01-2.44%2C27.412%2C27.412%2C0%2C0%2C0%2C9.26-6.24q9-9.12%2C9-23.5v-37.34h-34.99Z%22%20transform%3D%22translate%28-1208.28%20-1115.47%29%22%2F%3E%3C%2Fsvg%3E")
}

@media screen and (min-width: 769px) {
  #sec1r {
    padding-top: 50px
  }
}

@media screen and (max-width: 768px) {
  #sec1r {
    padding-top: 25px
  }
}

#sec1r .hd {
  background-image: url("../images/sec1_bg1.jpg"), url("../images/sec1_bg2.jpg");
  background-repeat: no-repeat
}

@media screen and (min-width: 769px) {
  #sec1r .hd {
    background-position: left center, right center;
    background-size: auto 100%
  }
}

@media screen and (max-width: 768px) {
  #sec1r .hd {
    background-position: left 25% bottom, right 25% bottom;
    background-size: auto 50px;
    padding-bottom: 70px
  }
}

.qandaArea {
  background-color: #f1f6f5;
  margin-top: 3px;
  border-radius: 10px
}

@media screen and (min-width: 769px) {
  .qandaArea {
    padding: 40px 20px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea {
    padding: 20px 10px;
    font-size: 1.125rem
  }
}

.qandaArea .qanda>dt {
  position: relative;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  .qandaArea .qanda>dt {
    padding-top: 24px;
    padding-left: 100px;
    min-height: 74px;
    font-size: 1.25rem
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qanda>dt {
    padding-top: 0px;
    padding-left: 50px;
    min-height: 37px;
    font-size: 1.5rem
  }
}

.qandaArea .qanda>dt:before {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  content: "Q";
  color: #FFF;
  text-align: center
}

@media screen and (min-width: 769px) {
  .qandaArea .qanda>dt:before {
    font-size: 48px;
    width: 74px;
    height: 74px;
    line-height: 60px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qanda>dt:before {
    font-size: 24px;
    width: 37px;
    height: 37px;
    line-height: 30px
  }
}

.qandaArea .qanda>dd {
  position: relative;
  margin-top: 2rem;
  font-size: 1.125rem;
  color: #f15050
}

@media screen and (min-width: 769px) {
  .qandaArea .qanda>dd {
    padding-top: 30px;
    padding-left: 100px;
    min-height: 74px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qanda>dd {
    padding-top: 0px;
    padding-left: 50px;
    min-height: 37px
  }
}

.qandaArea .qanda>dd:before {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  content: "A";
  background-color: #f15050;
  color: #FFF;
  text-align: center;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  .qandaArea .qanda>dd:before {
    font-size: 48px;
    width: 74px;
    height: 74px;
    line-height: 60px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qanda>dd:before {
    font-size: 24px;
    width: 37px;
    height: 37px;
    line-height: 30px
  }
}

.qandaArea *+.qanda {
  margin-top: 50px
}

.qandaArea .topwords {
  font-weight: 700;
  padding-bottom: 10px
}

@media screen and (max-width: 768px) {
  .qandaArea .topwords {
    font-size: 1.25rem
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .topwords {
    font-size: 1.5rem
  }
}

@media screen and (min-width: 769px) {
  .qandaArea .qa01, .qandaArea .qa11 {
    display: flex;
    justify-content: space-between;
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qa01, .qandaArea .qa11 {
    margin-top: 10px
  }
}

@media screen and (min-width: 769px) {
  .qandaArea .qa01 .leftparts, .qandaArea .qa11 .leftparts {
    width: calc(100% - 440px)
  }
}

@media screen and (min-width: 769px) {
  .qandaArea .qa01 .rightparts, .qandaArea .qa11 .rightparts {
    width: 410px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qa01 .rightparts, .qandaArea .qa11 .rightparts {
    margin-top: 1.125rem
  }
}

.qandaArea .qa01 table, .qandaArea .qa11 table {
  width: 100%;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999
}

.qandaArea .qa01 table th, .qandaArea .qa01 table td, .qandaArea .qa11 table th, .qandaArea .qa11 table td {
  box-sizing: border-box;
  padding: .5em;
  border-bottom: solid 1px #999999;
  border-right: solid 1px #999999;
  font-size: 0.875rem;
  line-height: 1.4;
  vertical-align: middle;
  background-color: #FFF;
  text-align: center
}

.qandaArea .qa01 table tbody th, .qandaArea .qa11 table tbody th {
  width: 24%
}

.qandaArea .qa01 table tbody td, .qandaArea .qa11 table tbody td {
  width: 38%
}

.qandaArea .qa01 table .stars, .qandaArea .qa11 table .stars {
  display: inline-block;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22512px%22%20height%3D%22512px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpolygon%20fill%3D%22%23ff9c00%22%20points%3D%22256%2C12.531%20327.047%2C183.922%20512%2C198.531%20370.938%2C319.047%20414.219%2C499.469%20256%2C402.563%2097.781%2C499.469%20141.063%2C319.047%200%2C198.531%20184.953%2C183.922%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 14px 14px;
  background-position: left center;
  height: 14px
}

.qandaArea .qa01 table .star1, .qandaArea .qa11 table .star1 {
  width: 14px
}

.qandaArea .qa01 table .star2, .qandaArea .qa11 table .star2 {
  width: 28px
}

.qandaArea .qa01 table .star3, .qandaArea .qa11 table .star3 {
  width: 42px
}

.qandaArea .qa01 table .star4, .qandaArea .qa11 table .star4 {
  width: 56px
}

.qandaArea .qa01 table .star5, .qandaArea .qa11 table .star5 {
  width: 60px
}

@media screen and (min-width: 769px) {
  .qandaArea .qa03 {
    display: flex;
    justify-content: space-between;
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .qa03 {
    margin-top: 20px
  }
}

@media screen and (min-width: 769px) {
  .qandaArea .qa03 .leftparts {
    width: calc(100% - 400px)
  }
}

.qandaArea .qa03 .rightparts {
  text-align: center
}

@media screen and (min-width: 769px) {
  .qandaArea .qa03 .rightparts {
    width: 360px
  }
}

.qandaArea .qa03 .rightparts img {
  z-index: -1
}

@media screen and (max-width: 768px) {
  .qandaArea .qa03 .rightparts img {
    padding-top: 1.25rem;
    width: 84%
  }
}

.qandaArea .qa03 .rightparts p {
  display: inline-block;
  margin: -20px auto 0;
  padding: 10px;
  background-color: #003e81;
  color: #FFF;
  text-align: center
}

@media screen and (min-width: 769px) {
  .qandaArea .qa03 .rightparts p {
    width: 290px
  }
}

.qandaArea dl.notice {
  margin: 40px auto 0
}

.qandaArea dl.notice dt {
  padding: 10px;
  color: #FFF;
  border-radius: 10px 10px 0 0;
  background-color: #f15050;
  text-align: center
}

@media screen and (max-width: 768px) {
  .qandaArea dl.notice dt {
    font-size: 1.25rem;
    font-weight: 700
  }
}

.qandaArea dl.notice dd {
  background-color: #FFF;
  padding: 10px;
  border: solid 1px #f15050
}

.greens .qanda>dt {
  color: #019f75
}

.greens .qanda>dt:before {
  background-color: #019f75
}

.blues .qanda>dt {
  color: #0080b2
}

.blues .qanda>dt:before {
  background-color: #0080b2
}

@media screen and (min-width: 769px) {
  .chara {
    display: flex;
    justify-content: space-between;
    margin-top: 30px
  }
}

.chara>li {
  background-color: #FFF
}

@media screen and (min-width: 769px) {
  .chara>li {
    width: 32.3%
  }
}

@media screen and (max-width: 768px) {
  .chara>li {
    margin-top: 15px
  }
}

.chara dt {
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 10px 0 13px
}

.chara dt span {
  font-size: 1.625rem
}

.chara dd {
  position: relative;
  background-color: #FFF;
  color: #019f75;
  font-weight: 700;
  text-align: center
}

@media screen and (min-width: 769px) {
  .chara dd img {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%)
  }
}

@media screen and (max-width: 768px) {
  .chara dd img {
    width: auto;
    height: 75px
  }
}

.qandaArea .chara>li {
  border: solid 2px #019f75
}

.qandaArea .chara dt {
  background-color: #019f75
}

.qandaArea .chara dd {
  color: #019f75
}

@media screen and (min-width: 769px) {
  .qandaArea .chara dd {
    padding: 15px 10px 140px;
    min-height: 250px
  }
}

@media screen and (max-width: 768px) {
  .qandaArea .chara dd {
    padding: 15px 10px
  }
}

.qandaArea .chara dd p {
  text-align: left;
  padding-bottom: 10px
}

#sec6 .chara>li {
  border: solid 2px #0080b2
}

#sec6 .chara dt {
  background-color: #0080b2
}

#sec6 .chara dd {
  color: #0080b2
}

@media screen and (min-width: 769px) {
  #sec6 .chara dd {
    padding: 15px 10px
  }
}

@media screen and (max-width: 768px) {
  #sec6 .chara dd {
    padding: 15px 10px
  }
}

#sec6 .chara dd p {
  text-align: center;
  padding-bottom: 10px
}

@media screen and (min-width: 769px) {
  #sec2r {
    padding-top: 100px
  }
}

@media screen and (max-width: 768px) {
  #sec2r {
    padding-top: 50px
  }
}

#sec2r dl.accType1>dt {
  padding: .5rem 1rem;
  position: relative;
  text-align: left;
  background-color: #019f75;
  color: #FFF;
  text-align: center;
  border-radius: 10px;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec2r dl.accType1>dt {
    padding: .5rem 1rem;
    font-size: 1.5rem
  }
}

@media screen and (max-width: 768px) {
  #sec2r dl.accType1>dt {
    padding: .5rem 3rem;
    font-size: 1.25rem
  }
}

#sec2r dl.accType1>dt:hover {
  cursor: pointer
}

#sec2r dl.accType1>dt:after {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "▼";
  width: 20px;
  height: 20px;
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  text-align: center
}

@media screen and (min-width: 769px) {
  #sec2r dl.accType1>dt:after {
    right: 18px
  }
}

@media screen and (max-width: 768px) {
  #sec2r dl.accType1>dt:after {
    right: 10px
  }
}

#sec2r dl.accType1>dt.opened:after {
  content: "▲"
}

#sec2r dl.accType1>dd {
  overflow: hidden;
  transition: all 0.2s;
  text-align: left;
  background-color: #f1f6f5;
  margin: 10px 0
}

@media screen and (min-width: 769px) {
  #sec2r dl.accType1>dd .inner {
    padding: 25px
  }
}

@media screen and (max-width: 768px) {
  #sec2r dl.accType1>dd .inner {
    padding: 12px;
    font-size: 1.125rem
  }
}

#sec2r dl.accType1>dd .inner img, #sec2r dl.accType1>dd .inner .imglist {
  margin: 20px auto 0
}

#sec2r dl.accType1>dd .inner .imglist img {
  margin: 0
}

@media screen and (min-width: 769px) {
  #sec2r .pointlist {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
  }
}

#sec2r .pointlist>div {
  background-color: #FFF
}

@media screen and (min-width: 769px) {
  #sec2r .pointlist>div {
    width: 32.3%;
    margin-right: 1.5%
  }
}

@media screen and (max-width: 768px) {
  #sec2r .pointlist>div {
    margin-bottom: 2rem
  }
}

#sec2r .pointlist>div:nth-child(3n) {
  margin-right: 0
}

@media screen and (min-width: 769px) {
  #sec2r .pointlist>div:nth-child(n+4) {
    margin-top: 20px
  }
}

#sec2r .pointlist .bc01 {
  border: solid 2px #8aaad6
}

#sec2r .pointlist .bc01 h3 {
  background-color: #8aaad6;
  background-repeat: no-repeat;
  background-position: right 5px center
}

#sec2r .pointlist .bc02 {
  border: solid 2px #205ab9
}

#sec2r .pointlist .bc02 h3 {
  background-color: #205ab9;
  background-repeat: no-repeat;
  background-position: right 5px center
}

#sec2r .pointlist .bc03 {
  border: solid 2px #9f0101
}

#sec2r .pointlist .bc03 h3 {
  background-color: #9f0101;
  background-repeat: no-repeat;
  background-position: right center
}

#sec2r .pointlist .bc04 {
  border: solid 2px #8aaad6
}

#sec2r .pointlist .bc04 h3 {
  background-color: #8aaad6;
  background-repeat: no-repeat;
  background-position: right 5px center
}

#sec2r .pointlist .bc05 {
  border: solid 2px #205ab9
}

#sec2r .pointlist .bc05 h3 {
  background-color: #205ab9;
  background-repeat: no-repeat;
  background-position: right 5px center
}

#sec2r .pointlist h3 {
  padding: 10px;
  color: #FFF;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec2r .pointlist h3 {
    text-align: center
  }
}

@media screen and (max-width: 768px) {
  #sec2r .pointlist h3 {
    font-size: 1.25rem
  }
}

#sec2r .pointlist h4 {
  font-weight: 700;
  margin-top: 1rem
}

#sec2r .pointlist p {
  padding: 10px
}

#sec2r .pointlist h4+p {
  margin-top: 0
}

#sec2r .pointlist ul {
  padding: 0 10px
}

#sec2r #point1 {
  margin-top: 20px
}

@media screen and (min-width: 769px) {
  #sec2r #point1>div {
    position: relative;
    padding-bottom: 140px
  }
}

#sec2r #point1 .bc01 h3 {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22672.656%22%20height%3D%22712.937%22%20viewBox%3D%220%200%20672.656%20712.937%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M418%2C1c75.39-2.33%2C80.39%2C91.35%2C20%2C107-38.63%2C10.011-76.875-27.577-64-69C381.2%2C15.852%2C396.365%2C10.144%2C418%2C1Zm40%2C125c12.788%2C0.694%2C24.971%2C3.536%2C31%2C11%2C23.986%2C29.692%2C2.4%2C156.788%2C15%2C203%2C9.986-1.515%2C14.742%2C1.3%2C20%2C7q-0.5%2C6-1%2C12c-6.863%2C15.627-27.51%2C5.366-43%2C12l-17%2C24%2C27%2C56c140.811-38.752%2C238.479%2C106.746%2C152%2C216-59.142%2C74.718-177.9%2C54.092-222-19-9.014-14.939-14.669-33.9-18-54V556l-43-12-18%2C18-17%2C18c-1.5%2C4.942%2C8.8%2C11.028%2C5%2C20-6.492%2C13.781-40.013%2C9.56-60%2C9C251.488%2C723.031%2C90.774%2C748.1%2C26%2C659c-64.2-88.312%2C4.688-230.485%2C118-216l20-121c-8.807-.353-13.294-3.611-16-10V300c13.562-17.342%2C42.89-2.167%2C68-9l94-31%2C17-23%2C51-65c8.51-12.18%2C14.787-27.746%2C27-36C418.576%2C126.826%2C441.01%2C132.724%2C458%2C126ZM194%2C322q-4.5%2C28.5-9%2C57l143-1%2C9-9%2C52-25L379%2C238l-3%2C2-40%2C53L231%2C328C217.734%2C330.452%2C210.3%2C322.067%2C194%2C322Zm186%2C86-7%2C4-28%2C88%2C5%2C3h1l64-95H380Zm-171%2C1%2C90%2C59%2C19-59H209Zm-32%2C16-3%2C23c40.08%2C6.969%2C73.654%2C42.647%2C88%2C76l9%2C30%2C17-53Zm265%2C0-65%2C93%2C35%2C10c6.6-30.752%2C33.6-43.979%2C51-64ZM125%2C473c-41%2C16.707-59.056%2C15.681-81%2C53C1.349%2C598.534%2C58.491%2C673.366%2C123%2C684c72.578%2C11.964%2C137.574-61.861%2C116-134-10.79-36.078-35.232-58.648-69-72l-2%2C1c-0.47%2C19.812-14.4%2C107.856-25%2C113-7.18%2C4.337-14.094-.375-19-4-5.955-20.133%2C7.74-91.624%2C15-115H125Zm401%2C0-21%2C5%2C44%2C84c4.035%2C7.883%2C12.118%2C23.454%2C2%2C31-12.811%2C9.555-97.526-23.41-118-27-15.007%2C104.573%2C106.187%2C147.981%2C177%2C91%2C13.348-10.74%2C21.812-28%2C28-46C665.047%2C532.3%2C602.406%2C471.969%2C526%2C473Zm-50%2C19c-10.785%2C12.463-33.616%2C26.213-34%2C45l69%2C19C505.313%2C543.57%2C485.505%2C497.726%2C476%2C492ZM273%2C579l7-1h-2l-5-6v7Z%22%20transform%3D%22translate%28-1.344%20-0.969%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: auto 80%
}

#sec2r #point1 .bc02 h3 {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22674%22%20height%3D%22718%22%20viewBox%3D%220%200%20674%20718%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M360%2C0c70.424-1.149%2C75.153%2C95.18%2C15%2C108-41.638%2C8.874-74.859-30.954-63-69C319.764%2C14.089%2C336.1%2C9.423%2C360%2C0Zm69%2C108c36.077%2C0.081%2C37.853%2C27.418%2C48%2C53l51%2C130c10.183%2C25.743%2C12.163%2C38.708-8%2C55%2C2.656%2C3.683%2C5.978%2C9.536%2C3%2C16-6.863%2C15.627-27.51%2C5.366-43%2C12l-17%2C24%2C27%2C56c140.811-38.752%2C238.479%2C106.746%2C152%2C216-59.142%2C74.718-177.9%2C54.092-222-19-9.014-14.939-14.669-33.9-18-54V559l-43-12-18%2C18-17%2C18c-1.5%2C4.942%2C8.8%2C11.028%2C5%2C20-6.492%2C13.781-40.013%2C9.56-60%2C9C251.488%2C726.031%2C90.774%2C751.1%2C26%2C662c-64.2-88.312%2C4.688-230.485%2C118-216l20-121c-8.807-.353-13.294-3.611-16-10V303c14.67-18.778%2C46.388.1%2C72-9l75-44%2C40-96C348.911%2C135.066%2C405.059%2C119.751%2C429%2C108ZM194%2C325q-4.5%2C28.5-9%2C57l143-1%2C15-12%2C78-36c-3.208-16.031-51.5-119.55-61-129v2l-30%2C71c-4.166%2C6.214-88.78%2C54.242-98%2C55-8.085.664-9.676-5.252-14-7H194Zm186%2C86-7%2C4-28%2C88%2C5%2C3h1l64-95H380Zm-171%2C1%2C90%2C59%2C19-59H209Zm-32%2C16-3%2C23c40.08%2C6.969%2C73.654%2C42.647%2C88%2C76l9%2C30%2C17-53Zm265%2C0-65%2C93%2C35%2C10c6.6-30.752%2C33.6-43.979%2C51-64ZM125%2C476c-41%2C16.707-59.056%2C15.681-81%2C53C1.349%2C601.534%2C58.491%2C676.366%2C123%2C687c72.578%2C11.964%2C137.574-61.861%2C116-134-10.79-36.078-35.232-58.648-69-72l-2%2C1c-0.47%2C19.812-14.4%2C107.856-25%2C113-7.18%2C4.337-14.094-.375-19-4-5.955-20.133%2C7.74-91.624%2C15-115H125Zm401%2C0-21%2C5%2C44%2C84c4.035%2C7.883%2C12.118%2C23.454%2C2%2C31-12.811%2C9.555-97.526-23.41-118-27-15.007%2C104.573%2C106.187%2C147.981%2C177%2C91%2C13.348-10.74%2C21.812-28%2C28-46C665.047%2C535.3%2C602.406%2C474.969%2C526%2C476Zm-50%2C19c-10.785%2C12.463-33.616%2C26.213-34%2C45l69%2C19C505.313%2C546.57%2C485.505%2C500.726%2C476%2C495ZM273%2C582l7-1h-2l-5-6v7Z%22%2F%3E%3C%2Fsvg%3E");
  background-size: auto 80%
}

#sec2r #point1 .bc03 h3 {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22805%22%20height%3D%22635%22%20viewBox%3D%220%200%20805%20635%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M221%2C0c70.451%2C4.969%2C78.631%2C95.96%2C13%2C108-44.911%2C8.239-74.117-38.532-59-75C183.669%2C12.086%2C199.391%2C8.655%2C221%2C0Zm97%2C74c25.362-.62%2C44.583%2C9.311%2C63%2C17%2C44.926%2C18.757%2C131.984%2C70.459%2C154%2C109%2C14.944%2C26.161-3.35%2C48.777-15%2C63%2C2.055%2C3.619%2C4.331%2C9.836%2C2%2C15-6.863%2C15.627-27.51%2C5.366-43%2C12l-17%2C24%2C27%2C56c136.9-37.689%2C234.676%2C97.5%2C156%2C210l101%2C1-109%2C8-14%2C13v1l182%2C1L605%2C619l-49%2C14c-55.5%2C10.294-102.853-20.8-125-49-14.932-19.013-25.011-42-30-71V475l-43-12-18%2C18-17%2C18c-1.5%2C4.942%2C8.8%2C11.028%2C5%2C20-6.492%2C13.781-40.013%2C9.56-60%2C9C250.488%2C642.031%2C89.774%2C667.1%2C25%2C578c-64.2-88.312%2C4.688-230.485%2C118-216l20-121c-8.807-.353-13.294-3.611-16-10V219c11.64-15.47%2C36.656-4.53%2C60-9l14-6%2C77%2C17c-10.511-30.265-34.889-100.631-13-129C293.174%2C81.406%2C304.851%2C80.057%2C318%2C74Zm92%2C12%2C133%2C1C507.473%2C87.359%2C428.237%2C105.241%2C410%2C86Zm41%2C23%2C133%2C1C548.473%2C110.359%2C469.237%2C128.241%2C451%2C109ZM193%2C241q-4.5%2C28.5-9%2C57l143-1%2C15-12%2C77-36v-1l-87-60c2.116%2C16.589%2C19.267%2C52.544%2C13%2C68-6.337%2C15.629-26.168%2C13.586-43%2C9C267.807%2C255.684%2C232.131%2C241.511%2C193%2C241Zm300%2C67%2C244%2C1L517%2C326ZM379%2C327l-7%2C4-28%2C88%2C5%2C3h1l64-95H379Zm-171%2C1%2C90%2C59%2C19-59H208Zm345%2C11%2C202%2C1C698.475%2C340.314%2C585.094%2C368.463%2C553%2C339Zm-377%2C5-3%2C23c40.08%2C6.969%2C73.654%2C42.647%2C88%2C76l9%2C30%2C17-53Zm265%2C0-65%2C93%2C35%2C10c6.6-30.752%2C33.6-43.979%2C51-64Zm175%2C23%2C133%2C1C713.473%2C368.359%2C634.237%2C386.241%2C616%2C367Zm28%2C23%2C133%2C1C741.473%2C391.359%2C662.237%2C409.241%2C644%2C390Zm-520%2C2c-41%2C16.707-59.056%2C15.681-81%2C53C0.349%2C517.534%2C57.491%2C592.366%2C122%2C603c72.578%2C11.964%2C137.574-61.861%2C116-134-10.79-36.078-35.232-58.648-69-72l-2%2C1c-0.47%2C19.812-14.4%2C107.856-25%2C113-7.18%2C4.337-14.094-.375-19-4-5.955-20.133%2C7.74-91.624%2C15-115H124Zm401%2C0-21%2C5%2C44%2C84c4.035%2C7.883%2C12.118%2C23.454%2C2%2C31-12.811%2C9.555-97.526-23.41-118-27-15.007%2C104.573%2C106.187%2C147.981%2C177%2C91%2C13.348-10.74%2C21.812-28%2C28-46C664.047%2C451.3%2C601.406%2C390.969%2C525%2C392Zm-50%2C19c-10.785%2C12.463-33.616%2C26.213-34%2C45l69%2C19C504.313%2C462.57%2C484.505%2C416.726%2C475%2C411ZM272%2C498l7-1h-2l-5-6v7Z%22%2F%3E%3C%2Fsvg%3E");
  background-size: auto 80%
}

#sec2r #point1>div img {
  display: block;
  max-height: 120px
}

@media screen and (min-width: 769px) {
  #sec2r #point1>div img {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%)
  }
}

@media screen and (max-width: 768px) {
  #sec2r #point1>div img {
    margin: 0px auto 30px
  }
}

#sec2r #point2, #sec2r #point3 {
  margin-top: 20px
}

#sec2r #point2 h3, #sec2r #point3 h3 {
  color: #019f75;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec2r #point2 h3, #sec2r #point3 h3 {
    font-size: 1.125rem
  }
}

@media screen and (max-width: 768px) {
  #sec2r #point2 h3, #sec2r #point3 h3 {
    font-size: 1.25rem
  }
}

#sec2r #point2 *+h3, #sec2r #point3 *+h3 {
  margin-top: 2rem
}

#sec2r #point2 h4, #sec2r #point3 h4 {
  margin-top: .5rem;
  font-weight: 700
}

#sec2r #point2 p, #sec2r #point3 p {
  margin-top: .5rem
}

.review dt {
  background-color: #046d51;
  color: #FFF;
  font-weight: 700;
  text-align: center;
  border-radius: 10px 10px 0 0;
  font-size: 1.5rem;
  padding: .5rem 1rem
}

.review dd {
  border: solid 2px #046d51;
  border-top: none;
  background-color: #f2f2f2
}

@media screen and (min-width: 769px) {
  .review dd {
    padding: 35px 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
  }
}

@media screen and (max-width: 768px) {
  .review dd {
    padding: 16px 5%
  }
}

.review dd .inner {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center
}

@media screen and (min-width: 769px) {
  .review dd .inner {
    width: 50%;
    min-height: 180px
  }
}

@media screen and (max-width: 768px) {
  .review dd .inner {
    min-height: 90px;
    font-size: 1rem;
    padding: 1rem 0
  }
}

@media screen and (max-width: 768px) {
  .review dd .inner:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 3px;
    background: url("../images/dotline.png") left top repeat-x
  }
}

@media screen and (min-width: 769px) {
  .review dd .inner:first-child:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 3px;
    background: url("../images/dotline.png") left top repeat-x
  }
}

@media screen and (min-width: 769px) {
  .review dd .inner:nth-child(2):after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 3px;
    height: 97%;
    background: url("../images/dotline.png") left top repeat-y
  }
}

@media screen and (min-width: 769px) {
  .review dd .inner:nth-child(2):before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 3px;
    background: url("../images/dotline.png") right top repeat-x
  }
}

@media screen and (min-width: 769px) {
  .review dd .inner:last-child:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 3px;
    height: 97%;
    background: url("../images/dotline.png") left bottom repeat-y
  }
}

.review dd .point {
  position: relative
}

@media screen and (min-width: 769px) {
  .review dd .point {
    padding-left: 15px
  }
}

@media screen and (max-width: 768px) {
  .review dd .point {
    padding-left: 7px
  }
}

.review dd .point p {
  color: #046d51;
  font-family: "Century Gothic", "Noto Sans JP", "メイリオ", "Meiryo", "Helvetica", "Arial", sans-serif;
  background-color: #FFF;
  line-height: 1;
  font-weight: 700;
  text-align: center
}

@media screen and (min-width: 769px) {
  .review dd .point p {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    font-size: 2.625rem
  }
}

@media screen and (max-width: 768px) {
  .review dd .point p {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    font-size: 1.25rem
  }
}

.review dd .point p span {
  width: 100%;
  display: table;
  text-align: center;
  font-size: 1rem
}

@media screen and (min-width: 769px) {
  .review dd .point p span {
    padding-top: 15px;
    padding-bottom: 5px
  }
}

@media screen and (max-width: 768px) {
  .review dd .point p span {
    padding-top: 20px
  }
}

.review dd .details {
  text-align: left
}

@media screen and (min-width: 769px) {
  .review dd .details {
    width: calc(100% - 140px);
    padding-right: 15px
  }
}

@media screen and (max-width: 768px) {
  .review dd .details {
    width: calc(100% - 100px)
  }
}

@media screen and (min-width: 769px) {
  #sec3 {
    margin-top: 90px
  }
}

@media screen and (max-width: 768px) {
  #sec3 {
    margin-top: 50px;
    font-size: 1rem
  }
}

#sec3 .hd+p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto
}

.campaign {
  text-align: center;
  margin-top: 60px
}

@media screen and (max-width: 768px) {
  .campaign {
    padding: 0 5%
  }
}

.campaign h2 {
  position: relative;
  display: inline-block;
  padding: 1rem 0;
  background: #FFF;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 700;
  border-bottom: solid 3px #000
}

.campaign h2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2
}

.campaign h2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #000;
  z-index: 1
}

.campaign .campaignlist {
  margin-top: 40px
}

@media screen and (min-width: 769px) {
  .campaign .campaignlist {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
  }
}

@media screen and (min-width: 769px) {
  .campaign .campaignlist>li {
    width: 32.3%;
    margin-right: 1.5%
  }
}

@media screen and (max-width: 768px) {
  .campaign .campaignlist>li {
    margin-top: 1rem
  }
}

.campaign .campaignlist>li:nth-child(3n) {
  margin-right: 0
}

@media screen and (max-width: 768px) {
  .campaign .bt {
    font-size: 1.25rem
  }
}

.campaignlist.centering {
  justify-content: center
}

@media screen and (min-width: 769px) {
  #sec4, .recparts {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  #sec4, .recparts {
    margin-top: 50px
  }
}

#sec4 h3, .recparts h3 {
  position: relative;
  padding: 1rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: #333;
  color: #FFF;
  text-align: center;
  margin-bottom: 1rem
}

#sec4 h3:after, .recparts h3:after {
  content: "▼";
  color: #333;
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%)
}

#sec4 ul+h3, .recparts ul+h3 {
  margin-top: 40px
}

#sec4>ul, .recparts>ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap
}

#sec4>ul>li, .recparts>ul>li {
  margin-top: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2)
}

@media screen and (min-width: 769px) {
  #sec4>ul>li, .recparts>ul>li {
    width: 32.3%;
    margin-right: 1.5%;
    padding: 20px 2%
  }
}

@media screen and (max-width: 768px) {
  #sec4>ul>li, .recparts>ul>li {
    width: 48%;
    margin-right: 2%;
    padding: 10px 2%
  }
}

@media screen and (min-width: 769px) {
  #sec4>ul>li:nth-child(3n), .recparts>ul>li:nth-child(3n) {
    margin-right: 0
  }
}

@media screen and (max-width: 768px) {
  #sec4>ul>li:nth-child(2n), .recparts>ul>li:nth-child(2n) {
    margin-right: 0
  }
}

#sec4 h4, .recparts h4 {
  text-align: center;
  font-weight: 700;
  padding-bottom: .5rem;
  border-bottom: solid 2px #d7d7d7
}

@media screen and (min-width: 769px) {
  #sec4 h4, .recparts h4 {
    font-size: 1.25rem
  }
}

@media screen and (max-width: 768px) {
  #sec4 h4, .recparts h4 {
    font-size: 1.125rem
  }
}

#sec4 .photos, .recparts .photos {
  text-align: center;
  position: relative
}

@media screen and (min-width: 769px) {
  #sec4 .photos, .recparts .photos {
    height: 140px;
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  #sec4 .photos, .recparts .photos {
    height: 70px;
    margin-top: 10px
  }
}

#sec4 .photos img, .recparts .photos img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

#sec4 .orderbt, .recparts .orderbt {
  display: block;
  margin-top: 10px;
  text-align: center
}

@media screen and (max-width: 768px) {
  #sec4 .orderbt, .recparts .orderbt {
    font-size: 1rem
  }
}

#sec4 .linkbt, .recparts .linkbt {
  display: block;
  margin-top: 10px;
  text-decoration: none;
  text-align: center;
  color: #003e81;
  font-weight: 700
}

@media screen and (max-width: 768px) {
  #sec4 .linkbt, .recparts .linkbt {
    font-size: 1rem
  }
}

#sec4 .linkbt span, .recparts .linkbt span {
  display: inline-block;
  position: relative;
  line-height: 1
}

#sec4 .linkbt span:after, .recparts .linkbt span:after {
  display: inline-block;
  text-align: right;
  height: 1rem;
  content: "＞";
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

@media screen and (min-width: 769px) {
  #sec4 .linkbt span:after, .recparts .linkbt span:after {
    width: 2rem
  }
}

@media screen and (max-width: 768px) {
  #sec4 .linkbt span:after, .recparts .linkbt span:after {
    width: 1.5rem
  }
}

#sec4 .inner, .recparts .inner {
  margin-top: 40px;
  border: solid 1px #bdbdbd;
  border-radius: 10px
}

@media screen and (min-width: 769px) {
  #sec4 .inner, .recparts .inner {
    padding: 20px
  }
}

@media screen and (max-width: 768px) {
  #sec4 .inner, .recparts .inner {
    padding: 10px;
    font-size: 1rem
  }
}

#sec4 .inner .balloon, .recparts .inner .balloon {
  max-width: 96%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  #sec4 .inner .ic, .recparts .inner .ic {
    width: 140px;
    padding-left: 2%
  }
}

@media screen and (max-width: 768px) {
  #sec4 .inner .ic, .recparts .inner .ic {
    width: 60px
  }
}

#sec4 .inner .balloon1, .recparts .inner .balloon1 {
  font-weight: 400;
  color: #333
}

@media screen and (min-width: 769px) {
  #sec4 .inner .balloon1, .recparts .inner .balloon1 {
    width: calc(100% - 140px)
  }
}

@media screen and (max-width: 768px) {
  #sec4 .inner .balloon1, .recparts .inner .balloon1 {
    width: calc(100% - 60px)
  }
}

.maintenances {
  text-align: center
}

@media screen and (min-width: 769px) {
  .maintenances {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  .maintenances {
    margin-top: 50px
  }
}

.maintenances h2 {
  font-weight: 900;
  line-height: 1;
  color: #003e81;
  text-align: center
}

@media screen and (min-width: 769px) {
  .maintenances h2 {
    font-size: 2.25rem
  }
}

@media screen and (max-width: 768px) {
  .maintenances h2 {
    font-size: 2rem
  }
}

.maintenances h3 {
  margin-top: 40px;
  padding: 1rem 1rem;
  background-color: #003e81;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  border-radius: 10px 10px 0 0
}

.maintenances h2+h3 {
  margin-top: 20px
}

.maintenances>.inner {
  background-color: #f1f6f5;
  border-radius: 0 0 10px 10px
}

@media screen and (min-width: 769px) {
  .maintenances>.inner {
    padding: 50px 5%
  }
}

@media screen and (max-width: 768px) {
  .maintenances>.inner {
    padding: 24px 5%
  }
}

.maintenances>.inner>p {
  text-align: left
}

@media screen and (min-width: 769px) {
  .maintenances>.inner>ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
  }
}

@media screen and (min-width: 769px) {
  .maintenances>.inner>ul>li {
    width: 48%;
    margin-right: 4%
  }
}

@media screen and (max-width: 768px) {
  .maintenances>.inner>ul>li+li {
    margin-top: 2rem
  }
}

.maintenances>.inner>ul>li:nth-child(2n) {
  margin-right: 0%
}

.maintenances>.inner p+ul {
  margin-top: 40px
}

.maintenances h4 {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: left
}

@media screen and (min-width: 769px) {
  .maintenances h4 {
    margin-top: 1rem
  }
}

@media screen and (max-width: 768px) {
  .maintenances h4 {
    margin-top: .5rem
  }
}

.maintenances h4+p {
  text-align: left
}

@media screen and (min-width: 769px) {
  .maintenances h4+p {
    margin-top: 1rem
  }
}

@media screen and (max-width: 768px) {
  .maintenances h4+p {
    margin-top: .5rem
  }
}

@media screen and (min-width: 769px) {
  #sec6 {
    margin-top: 50px
  }
}

@media screen and (max-width: 768px) {
  #sec6 {
    margin-top: 50px
  }
}

#sec6 .hd {

  background-image: url("../images/sec6_bg1.jpg"), url("../images/sec6_bg2.jpg");
  background-repeat: no-repeat
}

@media screen and (min-width: 769px) {
  #sec6 .hd {
    background-position: left center, right center;
    background-size: auto 70%
  }
}

@media screen and (max-width: 768px) {
  #sec6 .hd {
    background-position: left 25% bottom, right 25% bottom;
    background-size: auto 50px;
    padding-bottom: 70px
  }
}

#sec6>.inner {
  background-color: #f1f6f5;
  padding: 32px 3%;
  border-radius: 10px
}

#sec6>.inner>h3 {
  color: #0080b2;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center
}

#sec6>.inner>h3+p {
  margin-top: 1rem;
  text-align: center
}

.qa12 {
  text-align: left
}

.qa12 h3 {
  color: #000;
  margin-top: 2rem;
  font-weight: 700
}

.qa12 p {
  color: #000;
  margin-top: .5rem
}

@media screen and (min-width: 769px) {
  #sec7 {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  #sec7 {
    margin-top: 50px
  }
}

#sec7 dl.accType1>dt {
  position: relative;
  text-align: left;
  background-color: #0080b2;
  color: #FFF;
  text-align: center;
  border-radius: 10px;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec7 dl.accType1>dt {
    padding: .5rem 1rem;
    font-size: 1.5rem
  }
}

@media screen and (max-width: 768px) {
  #sec7 dl.accType1>dt {
    padding: .5rem 3rem;
    font-size: 1.125rem
  }
}

#sec7 dl.accType1>dt:hover {
  cursor: pointer
}

#sec7 dl.accType1>dt:after {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "▼";
  width: 20px;
  height: 20px;
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  text-align: center
}

@media screen and (min-width: 769px) {
  #sec7 dl.accType1>dt:after {
    right: 18px
  }
}

@media screen and (max-width: 768px) {
  #sec7 dl.accType1>dt:after {
    right: 10px
  }
}

#sec7 dl.accType1>dt.opened:after {
  content: "▲"
}

#sec7 dl.accType1>dd {
  overflow: hidden;
  transition: all 0.2s;
  text-align: left;
  background-color: #f1f6f5;
  margin: 10px 0
}

@media screen and (min-width: 769px) {
  #sec7 dl.accType1>dd .inner {
    padding: 25px
  }
}

@media screen and (max-width: 768px) {
  #sec7 dl.accType1>dd .inner {
    padding: 12px;
    font-size: 1.125rem
  }
}

#sec7 #checklist {
  padding-bottom: 30px
}

#sec7 #checklist h3 {
  color: #0080b2;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec7 #checklist *+h3 {
    margin-top: 2rem
  }
}

@media screen and (max-width: 768px) {
  #sec7 #checklist *+h3 {
    margin-top: 3.5rem
  }
}

#sec7 #checklist p {
  margin-top: .5rem
}

#sec7 #checklist h4 {
  margin-top: 1rem;
  margin-left: 1rem;
  font-weight: 700
}

#sec7 #checklist h4+p, #sec7 #checklist h4+ul {
  margin-left: 1rem
}

#sec7 #checklist img {
  margin: 20px auto !important
}

#sec7 #standards {
  margin-top: 20px
}

#sec7 #standards table {
  border-top: solid 1px #999999;
  border-left: solid 1px #999999
}

#sec7 #standards table th, #sec7 #standards table td {
  box-sizing: border-box;
  padding: .5em;
  border-bottom: solid 1px #999999;
  border-right: solid 1px #999999;
  font-size: 0.875rem;
  line-height: 1.4;
  vertical-align: middle;
  background-color: #FFF;
  text-align: center;
  min-width: 5rem
}

#sec7 #standards table thead th {
  background-color: #EBEBEB;
  font-weight: 700
}

#sec7 #standards table tbody>tr:nth-child(even)>td {
  background-color: #f2f2f2
}

.styles {
  margin-top: 35px
}

@media screen and (min-width: 769px) {
  .styles {
    display: flex;
    justify-content: space-between
  }
}

.styles>li {
  background-color: #FFF
}

@media screen and (min-width: 769px) {
  .styles>li {
    width: 49%
  }
}

@media screen and (max-width: 768px) {
  .styles>li {
    margin-top: 20px
  }
}

.styles>li dt {
  color: #FFF;
  font-weight: 700;
  line-height: 1;
  padding: 1.5rem 2rem;
  text-align: center;
  background-repeat: no-repeat
}

.styles>li dt span {
  display: block;
  padding-top: .5em
}

.styles>li dd {
  padding: 1rem 3%
}

.styles .style1 {
  border: solid 1px #f33b6f
}

.styles .style1 dt {
  background-color: #f33b6f;
  background-size: auto 70%
}

.styles .style2 {
  border: solid 1px #205ab9
}

.styles .style2 dt {
  background-color: #205ab9;
  background-size: auto 70%
}

#sec7 .qanda>dt {
  position: relative;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec7 .qanda>dt {
    margin-top: 2rem;
    padding-top: 5px;
    padding-left: 70px;
    font-size: 1.25rem
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qanda>dt {
    padding-top: 0px;
    padding-left: 50px;
    min-height: 37px;
    font-size: 1.5rem
  }
}

#sec7 .qanda>dt:before {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  content: "Q";
  color: #FFF;
  text-align: center
}

@media screen and (min-width: 769px) {
  #sec7 .qanda>dt:before {
    font-size: 28px;
    width: 44px;
    height: 44px;
    line-height: 40px
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qanda>dt:before {
    font-size: 24px;
    width: 37px;
    height: 37px;
    line-height: 30px
  }
}

#sec7 .qanda>dd {
  position: relative;
  margin-top: 1rem;
  font-size: 1.125rem;
  color: #000
}

@media screen and (min-width: 769px) {
  #sec7 .qanda>dd {
    padding-top: 5px;
    padding-left: 70px;
    min-height: 74px
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qanda>dd {
    padding-top: 0px;
    padding-left: 50px;
    min-height: 37px
  }
}

#sec7 .qanda>dd:before {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  content: "A";
  background-color: #f15050;
  color: #FFF;
  text-align: center;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #sec7 .qanda>dd:before {
    font-size: 28px;
    width: 44px;
    height: 44px;
    line-height: 40px
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qanda>dd:before {
    font-size: 24px;
    width: 37px;
    height: 37px;
    line-height: 30px
  }
}

#sec7 *+.qanda {
  margin-top: 50px
}

#sec7 .topwords {
  font-weight: 700;
  padding-bottom: 10px
}

@media screen and (max-width: 768px) {
  #sec7 .topwords {
    font-size: 1.25rem
  }
}

@media screen and (max-width: 768px) {
  #sec7 .topwords {
    font-size: 1.5rem
  }
}

@media screen and (min-width: 769px) {
  #sec7 .qa01, #sec7 .qa11 {
    display: flex;
    justify-content: space-between;
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qa01, #sec7 .qa11 {
    margin-top: 10px
  }
}

@media screen and (min-width: 769px) {
  #sec7 .qa01 .leftparts, #sec7 .qa11 .leftparts {
    width: calc(100% - 440px)
  }
}

@media screen and (min-width: 769px) {
  #sec7 .qa01 .rightparts, #sec7 .qa11 .rightparts {
    width: 410px
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qa01 .rightparts, #sec7 .qa11 .rightparts {
    margin-top: 1.125rem
  }
}

@media screen and (min-width: 769px) {
  #sec7 .qa03 {
    display: flex;
    justify-content: space-between;
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  #sec7 .qa03 {
    margin-top: 20px
  }
}

@media screen and (min-width: 769px) {
  #sec7 .qa03 .leftparts {
    width: calc(100% - 400px)
  }
}

#sec7 .qa03 .rightparts {
  text-align: center
}

@media screen and (min-width: 769px) {
  #sec7 .qa03 .rightparts {
    width: 360px
  }
}

#sec7 .qa03 .rightparts img {
  z-index: -1
}

@media screen and (max-width: 768px) {
  #sec7 .qa03 .rightparts img {
    padding-top: 1.25rem;
    width: 84%
  }
}

#sec7 .qa03 .rightparts p {
  display: inline-block;
  margin: -20px auto 0;
  padding: 10px;
  background-color: #003e81;
  color: #FFF;
  text-align: center
}

@media screen and (min-width: 769px) {
  #sec7 .qa03 .rightparts p {
    width: 290px
  }
}

#sec7 dl.notice {
  margin: 40px auto 0
}

#sec7 dl.notice dt {
  padding: 10px;
  color: #FFF;
  border-radius: 10px 10px 0 0;
  background-color: #f15050;
  text-align: center
}

@media screen and (max-width: 768px) {
  #sec7 dl.notice dt {
    font-size: 1.25rem;
    font-weight: 700
  }
}

#sec7 dl.notice dd {
  background-color: #FFF;
  padding: 10px;
  border: solid 1px #f15050
}

#sec8 .review {
  margin-top: 30px
}

#sec8 .review dt {
  background-color: #045c7f;
  color: #FFF;
  font-weight: 700;
  text-align: center;
  border-radius: 10px 10px 0 0;
  font-size: 1.5rem;
  padding: .5rem 1rem
}

#sec8 .review dd {
  border: solid 2px #045c7f
}

@media screen and (max-width: 768px) {
  #sec8 .review .inner:before {
    background: url("../images/dotline.png") left top repeat-x
  }
}

@media screen and (min-width: 769px) {
  #sec8 .review .inner:first-child:before {
    background: url("../images/dotline2.png") left top repeat-x
  }
}

@media screen and (min-width: 769px) {
  #sec8 .review .inner:nth-child(2):after {
    background: url("../images/dotline2.png") left top repeat-y
  }
}

@media screen and (min-width: 769px) {
  #sec8 .review .inner:nth-child(2):before {
    background: url("../images/dotline2.png") right top repeat-x
  }
}

@media screen and (min-width: 769px) {
  #sec8 .review .inner:last-child:after {
    background: url("../images/dotline2.png") left bottom repeat-y
  }
}

#sec8 .review .point p {
  color: #045c7f
}

#sec9 {
  text-align: center
}

@media screen and (min-width: 769px) {
  #sec9 {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  #sec9 {
    margin-top: 50px
  }
}

#sec9>.hd, #sec9>p {
  display: inline-block
}

#sec9>p {
  padding: 0 70px
}

#sec9 .recommend {
  margin-top: 60px
}

#suppot {
  background-color: #003e81;
  color: #FFF;
  text-align: center
}

@media screen and (min-width: 769px) {
  #suppot {
    margin-top: 100px;
    padding: 70px 5%
  }
}

@media screen and (max-width: 768px) {
  #suppot {
    margin-top: 50px;
    padding: 35px 5%;
    font-size: 1rem
  }
}

#suppot>.inner {
  max-width: 1020px;
  margin: 0px auto
}

#suppot h2 {
  position: relative;
  width: 100%;
  padding-bottom: 17.4%;
  background: url("../images/support.svg") center center no-repeat;
  background-size: 75% auto
}

@media screen and (min-width: 769px) {
  #suppot h2 {
    min-width: 880px
  }
}

@media screen and (max-width: 768px) {
  #suppot h2 {
    min-width: 90%
  }
}

#suppot h2 span {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

#suppot>.inner>img {
  margin: 50px auto
}

#suppot h3 {
  margin-top: 3rem;
  font-weight: 900;
  text-align: center
}

@media screen and (min-width: 769px) {
  #suppot h3 {
    font-size: 1.5rem
  }
}

@media screen and (max-width: 768px) {
  #suppot h3 {
    font-size: 1.5rem
  }
}

#suppot p {
  margin-top: 1rem;
  font-size: 1.125rem;
  text-align: left
}

#suppot #inspection {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #FFF;
  border-radius: 10px
}

@media screen and (min-width: 769px) {
  #suppot #inspection {
    margin-top: 40px;
    padding: 45px 5%
  }
  #suppot #inspection>li {
    width: 32.3%
  }
  #suppot #inspection>li img {
    max-height: 100%
  }
}

@media screen and (max-width: 768px) {
  #suppot #inspection {
    margin-top: 20px;
    padding: 22px 5%
  }
  #suppot #inspection>li {
    width: 50%
  }
  #suppot #inspection>li img {
    max-height: 96%
  }
  #suppot #inspection>li:first-child {
    width: 100%;
    padding-bottom: 1rem
  }
  #suppot #inspection>li:first-child img {
    max-width: 60%;
    max-height: none
  }
}

#suppot .bt {
  padding: 1.5rem 1rem
}

#supimgcr, #supimgel, #supimgci, #suph3cr, #suph3el, #suph3ci {
  display: none
}

#supimgcr.active, #supimgel.active, #supimgci.active, #suph3cr.active, #suph3el.active, #suph3ci.active {
  display: block
}

#cyclemate {
  background-color: #012061;
  color: #FFF;
  text-align: center
}

@media screen and (min-width: 769px) {
  #cyclemate {
    padding: 40px 5%
  }
}

@media screen and (max-width: 768px) {
  #cyclemate {
    padding: 35px 5%;
    font-size: 1rem
  }
}

#cyclemate>.inner {
  max-width: 1020px;
  margin: 0 auto
}
#cyclemate>.inner img{
  width: 70%;
}

#cyclemate h2 {
  position: relative;
  width: 100%
}

@media screen and (min-width: 769px) {
  #cyclemate h2 {
    min-width: 780px
  }
}

@media screen and (max-width: 768px) {
  #cyclemate h2 {
    min-width: 90%
  }
#cyclemate>.inner img{
  width: 100%;
}
}

@media screen and (min-width: 769px) {
  #cyclemate h2 span {
    font-size: 1.75rem
  }
}

@media screen and (max-width: 768px) {
  #cyclemate h2 span {
    font-size: 1.75rem
  }
}

#cyclemate h2 strong {
  color: #e10720
}

#cyclemate .bt {
  padding: 1.5rem 1rem
}

.ts {
  background-color: #FFF;
  border-radius: 20px;
  padding: 2rem;
  color: #000
}

@media screen and (min-width: 769px) {
  .ts {
    margin: 60px auto 0;
    max-width: 1020px
  }
}

@media screen and (max-width: 768px) {
  .ts {
    margin: 30px auto 0
  }
}

.ts h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1;
  margin-top: 0 !important;
  color: #012061
}

.ts h4 {
  color: #FFF;
  line-height: 1.5;
  padding: .75rem;
  margin-bottom: 10px
}

.ts h4.bluebg {
  background-color: #012061
}

.ts h4.redbg {
  background-color: #e30000
}

.ts p {
  text-align: left;
  margin-top: 1.5rem
}

.ts ul {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem
}

@media screen and (min-width: 769px) {
  .ts ul li {
    width: 200px;
    margin: 0 5px
  }
}

@media screen and (max-width: 768px) {
  .ts ul li {
    width: 49%;
    margin: 0 .5%
  }
}

#rules {
  margin-top: 0px;
  padding: 40px 5% 70px;
  background-color: #e3e5e7;
  text-align: center
}

#rules h2 {
  position: relative;
  width: 100%;
  padding-bottom: 10%;
  text-align: center;
  background: url("../images/rules_bg.png") center center no-repeat;
  background-size: auto 100%
}

#rules h2 span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

@media screen and (max-width: 768px) {
  #rules h2 span {
    display: block;
    width: 100%;
    line-height: 1.4
  }
}

#rules h2+p {
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #rules h2+p {
    margin-top: 1rem;
    font-size: 1.125rem
  }
}

@media screen and (max-width: 768px) {
  #rules h2+p {
    margin-top: 2rem;
    text-align: left
  }
}

#rules .exception {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 20px auto 0
}

@media screen and (min-width: 769px) {
  #rules .exception {
    width: 640px
  }
}

#rules .exception li {
  background-color: #FFF;
  border: solid 2px #474747
}

@media screen and (min-width: 769px) {
  #rules .exception li {
    width: 48%;
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  #rules .exception li {
    margin-top: 10px
  }
}

#rules .exception li:last-child {
  width: 100%
}

#rules .exception dt {
  background-color: #474747;
  color: #FFF;
  font-weight: 700;
  padding: .5rem 1rem;
  font-size: 1.25rem
}

#rules .exception dd {
  text-align: left;
  color: #474747;
  font-weight: 700;
  padding: 1rem
}

#rules .exception+p {
  margin: 20px auto 0;
  text-align: left
}

@media screen and (min-width: 769px) {
  #rules .exception+p {
    width: 640px
  }
}

#rules .Prohibitedlist {
  width: 100%;
  max-width: 1080px;
  margin: 20px auto 0
}

@media screen and (min-width: 769px) {
  #rules .Prohibitedlist {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
  }
}

#rules .Prohibitedlist>li {
  margin-top: 40px;
  display: flex;
  justify-content: space-between
}

@media screen and (min-width: 769px) {
  #rules .Prohibitedlist>li {
    width: 48%
  }
}

@media screen and (min-width: 769px) {
  #rules .Prohibitedlist>li .icons {
    width: 20%
  }
}

@media screen and (max-width: 768px) {
  #rules .Prohibitedlist>li .icons {
    width: 18%
  }
}

#rules .Prohibitedlist>li .texts {
  width: 78%;
  text-align: left
}

@media screen and (min-width: 769px) {
  #rules .Prohibitedlist>li .texts {
    padding-top: 20px
  }
}

@media screen and (max-width: 768px) {
  #rules .Prohibitedlist>li .texts {
    padding-top: 10px
  }
}

#rules .Prohibitedlist>li .texts h3 {
  font-size: 1.125rem;
  font-weight: 700
}

#rules .Prohibitedlist>li .texts p {
  margin-top: .25rem
}

#rules .Prohibitedlist+p {
  width: 100%;
  max-width: 1080px;
  margin: 60px auto 0;
  text-align: left
}

.helmetbnr {
  display: block;
  margin: 80px auto 30px
}

@media screen and (min-width: 769px) {
  .helmetbnr {
    width: 75%;
    max-width: 580px
  }
}

@media screen and (max-width: 768px) {
  .helmetbnr {
    max-width: 90%
  }
}

@media screen and (min-width: 769px) {
  .maker {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
  }
}

.maker>li {
  background-color: #FFF
}

@media screen and (min-width: 769px) {
  .maker>li {
    width: 49%;
    margin-right: 2%;
    padding: 10px 2% 10px
  }
}

@media screen and (max-width: 768px) {
  .maker>li {
    margin-top: 20px;
    padding: 10px 5% 10px
  }
}

.maker>li:nth-child(2n) {
  margin-right: 0
}

@media screen and (min-width: 769px) {
  .maker>li:nth-child(n+3) {
    margin-top: 20px
  }
}

.maker h3 {
  text-align: center;
  position: relative
}

@media screen and (min-width: 769px) {
  .maker h3 {
    min-height: 105px
  }
}

@media screen and (max-width: 768px) {
  .maker h3 {
    min-height: 75px
  }
}

.maker h3 img {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.maker h3+p {
  margin-top: 5px
}

.maker+.balloon {
  margin-top: 25px
}

.maker+.balloon .ic {
  min-width: 110px
}

.maker+.balloon p {
  font-weight: 400;
  color: #000
}

.greens .maker li {
  border: solid 1px #019f75
}

.blues .maker li {
  border: solid 1px #0080b2
}

@media screen and (max-width: 768px) {
  .pc_ver {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .sp_ver {
    display: none
  }
}

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

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

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

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

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

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

.mt60 {
  margin-top: 60px !important
}

.mt70 {
  margin-top: 70px !important
}

.mt80 {
  margin-top: 80px !important
}

.mt90 {
  margin-top: 90px !important
}

.mt100 {
  margin-top: 100px !important
}

.mt110 {
  margin-top: 110px !important
}

.mt120 {
  margin-top: 120px !important
}

.mt130 {
  margin-top: 130px !important
}

.mt140 {
  margin-top: 140px !important
}

.mt150 {
  margin-top: 150px !important
}

.mt160 {
  margin-top: 160px !important
}

@media screen and (max-width: 768px) {
  .mtsp0 {
    margin-top: 0px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp10 {
    margin-top: 10px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp20 {
    margin-top: 20px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp30 {
    margin-top: 30px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp40 {
    margin-top: 40px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp50 {
    margin-top: 50px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp60 {
    margin-top: 60px !important

  }
}

@media screen and (max-width: 768px) {
  .mtsp70 {
    margin-top: 70px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp80 {
    margin-top: 80px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp90 {
    margin-top: 90px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp100 {
    margin-top: 100px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp110 {
    margin-top: 110px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp120 {
    margin-top: 120px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp130 {
    margin-top: 130px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp140 {
    margin-top: 140px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp150 {
    margin-top: 150px !important
  }
}

@media screen and (max-width: 768px) {
  .mtsp160 {
    margin-top: 160px !important
  }
}

.boxw50 {
  width: 50% !important
}

.boxw60 {
  width: 60% !important
}

.boxw70 {
  width: 70% !important
}

.boxw80 {
  width: 80% !important
}

.boxw90 {
  width: 90% !important
}

.boxw100 {
  width: 100% !important
}

.mw50 {
  max-width: 50% !important
}

.mw60 {
  max-width: 60% !important
}

.mw70 {
  max-width: 70% !important
}

.mw80 {
  max-width: 80% !important
}

.mw90 {
  max-width: 90% !important
}

.mw100 {
  max-width: 100% !important
}

@media screen and (min-width: 769px) {
  #citysec1 {
    padding-top: 50px
  }
}

@media screen and (max-width: 768px) {
  #citysec1 {
    padding-top: 25px
  }
}

#citysec1 .hd {
  background-image: url("../images/sec1c_bg1.jpg"), url("../images/sec1c_bg2.jpg");
  background-repeat: no-repeat
}

@media screen and (min-width: 769px) {
  #citysec1 .hd {
    background-position: left center, right center;
    background-size: auto 100%
  }
}

@media screen and (max-width: 768px) {
  #citysec1 .hd {
    background-position: left 15% bottom, right 15% bottom;
    background-size: auto 92px;
    padding-bottom: 112px
  }
}

@media screen and (max-width: 768px) {
  #citysec1 .hd+p {
    font-weight: 400
  }
}

#citysec2 .hd+p {
  font-weight: 400
}

#citysec2 dl.accType1>dt, #citysec3 dl.accType1>dt {
  padding: .5rem 1rem;
  position: relative;
  text-align: left;
  background-color: #dc7e19;
  color: #FFF;
  text-align: center;
  border-radius: 10px;
  font-weight: 700
}

@media screen and (min-width: 769px) {
  #citysec2 dl.accType1>dt, #citysec3 dl.accType1>dt {
    padding: .5rem 1rem;
    font-size: 1.5rem
  }
}

@media screen and (max-width: 768px) {
  #citysec2 dl.accType1>dt, #citysec3 dl.accType1>dt {
    padding: .5rem 1rem;
    font-size: 1.25rem
  }
}

#citysec2 dl.accType1>dt:hover, #citysec3 dl.accType1>dt:hover {
  cursor: pointer
}

#citysec2 dl.accType1>dt.childdt:after, #citysec3 dl.accType1>dt.childdt:after {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "▼";
  width: 20px;
  height: 20px;
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  text-align: center
}

@media screen and (min-width: 769px) {
  #citysec2 dl.accType1>dt.childdt:after, #citysec3 dl.accType1>dt.childdt:after {
    right: 18px
  }
}

@media screen and (max-width: 768px) {
  #citysec2 dl.accType1>dt.childdt:after, #citysec3 dl.accType1>dt.childdt:after {
    right: 10px
  }
}

#citysec2 dl.accType1>dt.opened:after, #citysec3 dl.accType1>dt.opened:after {
  content: "▲"
}

#citysec2 dl.accType1>dd, #citysec3 dl.accType1>dd {
  overflow: hidden;
  transition: all 0.2s;
  text-align: left;
  background-color: #f1f6f5;
  margin: 10px 0
}

@media screen and (min-width: 769px) {
  #citysec2 dl.accType1>dd .inner, #citysec3 dl.accType1>dd .inner {
    padding: 25px
  }
}

@media screen and (max-width: 768px) {
  #citysec2 dl.accType1>dd .inner, #citysec3 dl.accType1>dd .inner {
    padding: 12px;
    font-size: 1.125rem
  }
}

#citysec2 dl.accType1>dd .inner img, #citysec2 dl.accType1>dd .inner .imglist, #citysec3 dl.accType1>dd .inner img, #citysec3 dl.accType1>dd .inner .imglist {
  margin: 20px auto 0
}

#citysec2 dl.accType1>dd .inner .imglist img, #citysec3 dl.accType1>dd .inner .imglist img {
  margin: 0
}

#citysec2 .accType1 h3, #citysec3 .accType1 h3 {
  color: #dc7e19;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 700
}

#citysec2 .accType1 *+h3, #citysec3 .accType1 *+h3 {
  margin-top: 2rem
}

#citysec2 .accType1 h4, #citysec3 .accType1 h4 {
  margin-top: 1rem;
  font-weight: 700
}

#citysec2 .accType1 .def.nakaguro, #citysec3 .accType1 .def.nakaguro {
  padding-bottom: 2rem
}

@media screen and (min-width: 769px) {
  #citysec2 .point3>div {
    display: flex;
    justify-content: space-between
  }
}

#citysec2 .point3>p {
  margin-top: 1rem
}

@media screen and (min-width: 769px) {
  #citysec2 .point3>div>.leftparts {
    width: calc(100% - 18rem)
  }
}

@media screen and (min-width: 769px) {
  #citysec2 .point3>div>.rightparts {
    width: 18rem
  }
}

#citysec2 .point3>div>.rightparts table {
  margin-left: auto
}

@media screen and (min-width: 769px) {
  #citysec2 .point3>div>.rightparts table {
    margin-top: 2.75rem;
    width: 15rem
  }
}

@media screen and (max-width: 768px) {
  #citysec2 .point3>div>.rightparts table {
    margin: 2rem auto 0;
    width: 90%
  }
}

#citysec3 {
  margin-top: 50px
}

#citysec3 .tireicon {
  background: url("../images/tire.png")
}

#citysec3 .wrockicon {
  background: url("../images/wrock.png")
}

#citysec3 .lighticon {
  background: url("../images/light.png")
}

#citysec3 .brakeicon {
  background: url("../images/brake.png")
}

#citysec3 .wheelicon {
  background: url("../images/wheel.png")
}

#citysec3 .partsicon {
  background: url("../images/parts.png")
}

#citysec3 .driveicon {
  background: url("../images/drive.png")
}

#citysec3 .basketicon {
  background: url("../images/basket.png")
}

#citysec3 .carriericon {
  background: url("../images/carrier.png")
}

#citysec3 .icons {
  background-position: left center;
  background-repeat: no-repeat
}

@media screen and (min-width: 769px) {
  #citysec3 .icons {
    background-size: auto 48px;
    padding-top: 14px;
    padding-left: 60px;
    min-height: 60px
  }
}

@media screen and (max-width: 768px) {
  #citysec3 .icons {
    background-size: auto 36px;
    padding-top: 12px;
    padding-left: 50px;
    min-height: 50px
  }
}

#citysec3 .balloon {
  max-width: 96%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  #citysec3 .ic {
    width: 140px;
    padding-left: 2%
  }
}

@media screen and (max-width: 768px) {
  #citysec3 .ic {
    width: 60px
  }
}

@media screen and (min-width: 769px) {
  #citysec3 .balloon1 {
    width: calc(100% - 140px)
  }
}

@media screen and (max-width: 768px) {
  #citysec3 .balloon1 {
    width: calc(100% - 60px)
  }
}

#citysec4 .hd+p span {
  width: 100%;
  display: table;
  text-align: center;
  padding-bottom: 1rem
}

#citysec4 .recommend>dt {
  background-color: #dc7e19
}

#citysec4 .points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 5%
}

#citysec4 .points .icons {
  background-color: #FFF;
  color: #046d51;
  text-align: center
}

@media screen and (min-width: 769px) {
  #citysec4 .points .icons {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    line-height: 120px
  }
}

@media screen and (max-width: 768px) {
  #citysec4 .points .icons {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    line-height: 60px
  }
}

@media screen and (min-width: 769px) {
  #citysec4 .points .texts {
    width: calc(100% - 140px)
  }
}

@media screen and (max-width: 768px) {
  #citysec4 .points .texts {
    width: calc(100% - 80px)
  }
}

#citysec4 .funcs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5
}

#citysec4 .funcs>li {
  margin-top: 1rem;
  text-align: center
}

@media screen and (min-width: 769px) {
  #citysec4 .funcs>li {
    width: 18%;
    margin-right: 2.25%
  }
}

@media screen and (max-width: 768px) {
  #citysec4 .funcs>li {
    width: 22%;
    margin-right: 4%
  }
}

@media screen and (min-width: 769px) {
  #citysec4 .funcs>li:nth-child(5n) {
    margin-right: 0
  }
}

@media screen and (max-width: 768px) {
  #citysec4 .funcs>li:nth-child(4n) {
    margin-right: 0
  }
}

#citysec4 .comment {
  margin-top: 2rem
}

#citysec4 .comment dt {
  background-color: #dc7e19;
  color: #FFF;
  font-size: 1.25rem;
  padding: .75rem 1rem;
  text-align: center
}

#citysec4 .comment dd {
  padding: 1rem;
  border: solid 1px #dc7e19;
  background-color: #FFF
}

#citysec4 .pa2clm>div {
  margin-top: 1.5rem
}

#citysec4 .pa2clm>div .orderbt {
  margin-top: .5rem
}

#citysec5 .hd+p {
  font-weight: 400
}

#citysec5 .hd+p strong {
  display: inline-block;
  padding-bottom: .5rem
}

#citysec6>p {
  margin-top: 2rem;
  padding: 0 3%;
  text-align: left
}

.supplement dt {
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 700;
  background-color: #f15050;
  text-align: center;
  padding: .5rem 1rem;
  border-radius: 10px 10px 0 0
}

.supplement dd {
  border: solid 1px #f15050;
  padding: 1rem;
  background-color: #FFF
}

.supplement dd>*+p {
  margin-top: 1rem
}

.clm2img {
  display: flex;
  justify-content: left;
  margin: 1rem auto 0
}

@media screen and (min-width: 769px) {
  .clm2img {
    max-width: 80%
  }
}

.clm2img>div {
  max-width: 48%;
  margin: 1%
}

.clm2img img {
  width: 100%;
  max-width: 100%
}

.clm2img .graybg, .clm2img .orangebg {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  color: #FFF;
  text-align: center
}

.clm2img .graybg {
  background-color: #767676
}

.clm2img .orangebg {
  background-color: #dc7e19
}

.clm2img img {
  margin: 5px auto 0px !important
}

.clm2img+p {
  margin-top: 2rem
}

@media screen and (max-width: 768px) {
  .longtext {
    display: inline-block;
    transform: scale(0.6, 1) translateX(-1rem);
    transform-origin: top center;
    white-space: nowrap
  }
}

.campaign .bt.setW50, #citysec5 .bt.setW50, #citysec6 .bt.setW50 {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.campaign .bt.setW50:hover, #citysec5 .bt.setW50:hover, #citysec6 .bt.setW50:hover {
  opacity: .75;
  transition: opacity 0.25s ease 0s
}


/* メインビジュアル
--------------------------------------------*/
#sec-mv {}

/* SP */
@media only screen and (max-width: 768px) {
    #sec-mv {
    }
    .mv-inner {
        position: relative;
        padding: 0 4%;
    }
    .mv-inner::before {
        content: '';
        display: block;
        padding-top: 114.285714286%;
        background-image: url("../images/mv_bg_sp.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .mv-title {
        position: absolute;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .mv-hn {
        position: relative;
        font-size: 2.8rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 4px;
        padding: 10px 30px 10px 20px;
        margin-bottom: 15px;
        z-index: 1;
        background-image: url("../images/bg_mv-hn.png");
        background-repeat: no-repeat;
		background-size: 100% auto;
        background-position: center center;
    }
    /*.mv-hn::before,
    .mv-hn::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .mv-hn::before {
        top: 0;
        left: 0;
        border: 1px solid #fff;
        z-index: -1;
    }
    .mv-hn::after {
        top: -3px;
        left: -3px;
        background-color: #54acd8;
        z-index: -2;
    }*/
    .mv-hn .s {
        display: block;
        font-size: 1.8rem;
    }
    .mv-txt {
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.6;
        letter-spacing: 2px;
        text-shadow: 0px 5px 24px rgba(0,0,0,0.5);
    }

}

/* PC */
@media print,screen and (min-width:769px) {
    #sec-mv {
        padding: 3% 0 0;
    }
    .mv-inner {
        position: relative;
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
    }
    .mv-inner::before {
        content: '';
        display: block;
        padding-top: 50%;
        background-image: url("../images/mv_bg_pc.png");
        background-repeat: no-repeat;
        background-position: center center;
    }
    .mv-title {
        position: absolute;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
    }
    .mv-hn {
        position: relative;
        font-size: 2.8rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 7px;
        padding: 20px 60px 20px 40px;
        margin-bottom: 25px;
        z-index: 1;
        background-image: url("../images/bg_mv-hn.png");
        background-repeat: no-repeat;
		background-size: 100% auto;
        background-position: center center;
    }
	
	
    /*.mv-hn::before,
    .mv-hn::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .mv-hn::before {
        top: 0;
        left: 0;
        border: 1px solid #fff;
        z-index: -1;
    }
    .mv-hn::after {
        top: -4px;
        left: -4px;
        background-color: #54acd8;
        z-index: -2;
    }*/
    .mv-hn .s {
        display: block;
        font-size: 2.0rem;
        letter-spacing: 4px;
    }
    .mv-txt {
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 4px;
        text-shadow: 0px 5px 18px rgba(0,0,0,1);
    }
}