@charset "UTF-8";
body {
  background-color: #35434e;
}

p {
  line-height: 1.7rem;
}

#hero {
  position: relative;
}

.hero__img {
  display: block;
}

.hero__box {
  position: absolute;
  bottom: 33%;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}
.hero__text {
  line-height: 2.2rem;
}

#summary {
  background-color: #f1f0e4;
  background-image: url(/assets/img/top/summary_bg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50px;
}

#summary .container__ttl {
  width: 230px;
  line-height: 3rem;
  font-weight: bold;
}

#summary h2 span {
  color: #dd621c;
}

#threeWay,
#scene {
  background-color: #68aa95;
  position: relative;
}

#scene .bg_top {
  position: absolute;
  top: -90px;
  left: auto;
  width: 100%;
  z-index: 1;
}
#scene .container {
  position: inherit;
  z-index: 99;
}
#merit {
  background-color: #fff;
  background-image: url(/assets/img/top/merit_bg_bottom.png),
    url(/assets/img/top/merit_bg_top.png);
  background-position: bottom, top;
  background-repeat: no-repeat;
  background-size: contain;
}
#merit .container__ttl {
  width: 230px;
  line-height: 3rem;
  font-weight: bold;
}
#merit .merit_box {
  background-color: rgba(246, 242, 228, 0.65);
  display: flex;
  padding: 17px 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 500;
}
#merit .merit_box img {
  width: 40px;
  height: 32px;
  margin: auto 5px auto 0;
}
#priceTable,
#countries,
#news {
  background-color: #f1f0e4;
}

.area {
  margin-top: 30px;
}
.countries_ttl {
  margin-bottom: 15px;
}
.countries__boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 30px;
}
.countries__boxes-start {
  justify-content: start;
}
.countries__box {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.countries__flag {
  filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.4));
}
.countries__name {
  font-size: 12px;
  margin-top: 5px;
}
/* label */
.labelBox {
  max-width: 100%;
  /* width: 210px; */
  width: 180px;
  font-weight: bold;
  letter-spacing: 0.13em;
  display: block;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  margin: auto;
  padding: 6px 0;
}

/* device */
#device {
  background-color: #1a1a1a;
  padding-bottom: 50px;
}

/* icon common */
.iconContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.iconContainerBox {
  background-color: #50ac93;
  border-radius: 15px;
  width: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  padding: 20px 10px;
}

.iconContainerBox:nth-of-type(5) {
  flex: auto;
}

.iconContainerBox__img {
  max-width: 76px;
  max-height: 60px;
  margin: auto;
}

.iconContainerBox__ttl {
  font-size: 18px;
  letter-spacing: 0.2em;
  margin: 0 auto 10px;
}

.iconContainerBox__txt {
  font-size: 12px;
  font-weight: bold;
  margin-top: 10px;
}

/* threeWay */

#threeWay {
  background-image: url(/assets/img/top/threeWay_bg_bottom.svg);
  background-position: -35px bottom;
  background-repeat: no-repeat;
  background-size: 150%;
  padding-bottom: 60px;
}
#threeWay .container{
  position: inherit;
  z-index: 99;
}
#threeWay .bg_top {
  position: absolute;
  top: -90px;
  left: auto;
  width: 100%;
  z-index: 1;
}
.container__cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
  margin: 0 auto;
  padding: 25px 0 0;
}
.container__card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.container__cardIcon {
  border-radius: 20px 20px 0 0;
  position: relative;
}
.container__cardIcon > img {
  min-height: 100%;
}

.tag_great {
  position: absolute;
  top: -20px;
  left: -3px;
  width: 123px;
}
.container__cardBox {
  border-radius: 0 0 20px 20px;
  background-color: #fff;
  padding: 15px 10px;
}
.container__cardTtl {
  font-size: 18px;
  font-weight: 500;
  margin: 0 auto 8px;
}
.container__cardTxt {
  font-size: 14px;
  line-height: 1.8;
}

/* price table */
#priceTable .accordion {
  margin-bottom: 0;
}
.priceTable {
  background-color: #50ac93;
  border: 5px solid #469580;
  border-radius: 15px;
  padding: 20px 15px;
  margin-bottom: 30px;
}
.priceTable > h2 {
  margin-bottom: 15px;
}
.priceTable__row {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
}
.priceTable__row:nth-of-type(2n-1) {
  background-color: rgba(70, 149, 128, 0.5);
}
.priceTable__name {
  font-weight: 500;
}
.priceTable__priceUnit {
  font-weight: 500;
  padding-left: 2px;
}
.priceTable__country,
.priceTable__priceNumber {
  font-size: 20px;
  font-weight: bold;
}
/* end price table */

/* device */
.deviceContainer {
  max-width: 96%;
  display: grid;
  position: relative;
  margin: 0 auto 30px;
}

.deviceImg__mr1,
.deviceImg__md1 {
  display: none;
}

.device__logo {
  width: 64px;
  display: block;
  margin: 0 auto 20px;
}

.deviceImg.sp_tbl {
  width: 60%;
  display: block;
  margin: auto;
}

.deviceTable {
  color: #ffffff;
  margin-top: -20px;
}

.deviceTable td:first-of-type {
  letter-spacing: 0.2em;
}

.deviceTable td:last-of-type {
  font-weight: 300;
}

.deviceBox {
  overflow-y: hidden;
}
/* merit */
#merit {
  background-color: #fff;
}

.merit_box {
  background-color: rgba(246, 242, 228, 0.65);
  display: flex;
  padding: 17px 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 500;
}

.merit_box img {
  width: 40px;
  height: 32px;
  margin: auto 5px auto 0;
}
/* end merit */

/* scene */
#scene {
  background-image: url(/assets/img/top/scene_bg_bottom.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 380%;
  padding-bottom: 100px;
}
.priceTable {
  background-color: #50ac93;
  border: 5px solid #469580;
  border-radius: 15px;
  padding: 20px 15px;
  margin-bottom: 30px;
}
.countries {
  margin: 30px 0;
}
.countries__boxes {
  padding-bottom: 5px;
}
.countries__box {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.countries__flag {
  filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.4));
  padding: 8px;
}
.countries__name {
  font-size: 10px;
  margin-top: 5px;
}

.attention {
  font-size: 14px;
  line-height: 1.7rem;
}
.accordionBtn > .open {
  display: block;
}
.accordionBtn__active > .open {
  display: none;
}
.accordionBtn > .close {
  display: none;
}
.accordionBtn__active > .close {
  display: block;
}
/* end price table */

/* faq */
#faq .container {
  max-width: 100%;
  background-image: url(/assets/img/top/faq_bg_bottom.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  padding-right: 4%;
  padding-left: 4%;
  padding-bottom: 150px;
}
.faqAccordion__letter {
  line-height: 1.8;
  letter-spacing: normal;
}

/* news */
#news .inner ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

#news .news__item {
  vertical-align: middle;
  border-bottom: 1px solid #aaa;
  padding: 20px 0;
}

#news .news__link {
  -js-display: flex;
  display: block;
  align-items: center;
  flex-wrap: wrap;
  text-decoration: none;
}

#news .news__link .time-width {
  display: inline-block;
  color: #282828;
  flex-shrink: 0;
  margin-right: 15px;
}

#news .news__label {
  font-size: 0.8rem;
  display: inline-block;
  flex-shrink: 0;
  padding: 3px 15px;
  border: 1px solid #282828;
  color: #282828;
}

#news .news__txt {
  display: inline-block;
  color: #282828;
  width: 100%;
  margin-top: 10px;
  line-height: 2rem;
}

/*-------------------------------*/

/*@media screen and (min-width : 960px)

-------------------------------*/
@media screen and (min-width: 960px) {
  #device > div {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* icon common */
  .iconContainerBox {
    width: calc(93% / 3);
    margin: 0px 4px 25px;
  }

  .iconContainerBox__Ttl {
    font-size: 26px;
  }

  .iconContainerBox__txt {
    font-size: 16px;
  }
}

/*-------------------------------*/

/*@media screen and (min-width : 768px)

-------------------------------*/
@media screen and (min-width: 768px) {
  /* icon common */
  .iconContainer {
    justify-content: center;
  }

  /* scene */
  #scene .labelBox {
    font-size: 14px;
    margin-top: 15px;
  }

  .iconContainerBox:nth-of-type(5) {
    flex: none;
  }

  #scene .iconContainerBox__txt {
    font-size: 14px;
  }
}

/*-------------------------------*/

/*@media screen and (max-width : 640px)

-------------------------------*/
@media screen and (max-width: 640px) {
  #news .time-width {
    width: 90px;
    margin-right: 10px;
  }

  #news .news__label {
    display: inline-block;
    padding: 2px 20px;
    margin-right: 26px;
    border: 1px solid #282828;
    color: #282828;
  }

  #news .news__link {
    display: block;
  }

  #news .news__txt {
    margin-top: 10px;
    line-height: 2rem;
  }
}