.contents {
  padding: 0;
  max-width: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #000;
}
.contents img {
  width: 100%;
}

.btn {
  display: flex;
  justify-content: flex-start;
  min-height: 50px;
  margin: 40px auto 0;
  padding: 14px 20px;
  color: #fff;
  font-size: 15px;
  text-align: left;
}
.btn-color {
  max-width: 360px;
  background-color: #000;
  border: 1px solid #000;
}
.btn-color.btn-modal {
  max-width: 300px;
  background-color: #3090BC;
  border: 1px solid #3090BC;
}
@media screen and (min-width: 767.5px) {
  .btn:hover {
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
  }
  .btn:hover .u-font-white {
    color: #000 !important;
  }
  .btn.btn-modal:hover {
    color: #3090BC !important;
    border: 1px solid #3090BC;
  }
  .btn.btn-modal:hover .u-font-white {
    color: #3090BC !important;
  }
}

/* animete */
.invisible {
  visibility: hidden;
}
@media print {
  .invisible {
    visibility: visible;
  }
}

/* introduction */
.introduction {
  padding-bottom: 140px;
}
.introduction__mv {
  background-image: url(../img/img_mainvisual_pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding: 80px 0 360px;
  position: relative;
  margin-bottom: 73px;
}
.introduction__mv::before {
  content: "";
  display: block;
  width: 495px;
  height: 408px;
  position: absolute;
  bottom: -73px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/img_product.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.introduction__catch {
  font-size: 24px;
  letter-spacing: 0.1em;
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  text-align: center;
}
.introduction__ttl {
  font-size: 72px;
  letter-spacing: -0.2rem;
  line-height: 1;
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  text-align: center;
}
.introduction__ttl--small {
  font-size: 36px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.introduction__txt {
  line-height: 2;
  text-align: center;
  margin: 123px 0 80px;
}
.introduction-index {
  text-align: center;
}
.introduction-index__link {
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  text-align: center;
  padding: 10px 10px 23.5px;
  border-radius: 30px;
  position: relative;
  width: 220px;
  background-color: #EBF5FC;
  border: 2px solid #99CCF0;
  display: inline-block;
  color: #000;
}
.introduction-index__link + .introduction-index__link {
  margin-left: 20px;
}
.introduction-index__link:after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid #99CCF0;
  border-bottom: 2px solid #99CCF0;
}
@media screen and (max-width: 1299px){
  .introduction__mv {
    background-size: 1300px 600px;
  }
}
@media screen and (max-width: 767px){
  .introduction {
    padding-bottom: 100px;
  }
  .introduction__mv {
    background-image: url(../img/img_mainvisual_sp.jpg);
    background-size: cover;
    background-position: center center;
    padding: 120px 0 230px;
    margin-bottom: 45px;
  }
  .introduction__mv::before {
    width: 285px;
    height: 235px;
    bottom: -45px;
  }
  .introduction__catch {
    font-size: 18px;
  }
  .introduction__ttl {
    font-size: 60px;
  }
  .introduction__ttl--small {
    font-size: 30px;
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
  .introduction__text {
    margin: 100px 0 60px;
  }
  .introduction-index__link + .introduction-index__link {
    margin-left: 0;
    margin-top: 20px;
  }
}
@media screen and (min-width: 767.5px) {
  .introduction-index__link:hover {
    background-color: #99CCF0;
    color: #fff;
  }
  .introduction-index__link:hover::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
}

/* common */
.common__heading {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  padding: 100px 0 100px;
  position: relative;
}
.common__heading::before {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: -2px;
  left: 0;
  background-image: url(../img/bg_wave_white.png);
  background-repeat:repeat-x;
  background-size: 100px 40px;
}
#lineup .common__heading {
  padding-bottom: 40px;
}
#lineup .common__heading::before {
  display: none;
}
.common__ttl {
  color: #fff;
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  text-align: center;
  font-size: 30px;
  line-height: 1.5;
}
#lineup .common__ttl {
  color: #000;
}
.common__body {
  background-color: #99CCF0;
	background-image:	linear-gradient(#fff 0, #fff 84%, transparent 84%, transparent 100%);
	background-size: 12px 12px;
}
.common__inner {
  background-color: #fff;
  padding: 70px 110px 150px;
  max-width: 1020px;
}
.common__note-box {
  background-color: #E6E6E6;
  max-width: 630px;
  margin: 30px auto 0;
  padding: 10px;
}
.common__note {
  font-size: 10px;
  margin-bottom: 0;
}
.common__note.note--indent1 {
  text-indent: -1.75em;
  padding-left: 1.75em;
}
.common__note.note--indent2 {
  text-indent: -2.5em;
  padding-left: 2.5em;
}
.note-sup {
  font-size: 50%;
  vertical-align: top;
}
.super {
  vertical-align: super;
}
@media screen and (max-width: 1299px){
  .common__heading {
    background-size: 1300px 260px;
  }
}
@media screen and (max-width: 1019px){
  .common__inner {
    padding: 70px 50px;
    max-width: 840px;
  }
}
@media screen and (max-width: 767px){
  .common__ttl {
    font-size: 24px;
  }
  .common__inner {
    padding: 70px 30px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* modal */
.modal__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.modal-ozone__image1 {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 211px;
}
.modal-ozone__image2 {
  margin-left: 60px;
  display: block;
  width: 100%;
  max-width: 275px;
}
.modal-ozone__image3 {
  margin: 30px auto 0;
  display: block;
  width: 100%;
  max-width: 315px;
}
.modal-uv__image1 {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 315px;
}
.modal-uv__image2 {
  display: block;
  width: 100%;
  max-width: 211px;
  margin-left: 60px;
}
@media screen and (max-width: 767px){
  .body__scroll {
    height: 80%;
    overflow-y: scroll;
    border-radius: 8px;
  }
  .body__scroll .modal__close-btn{
    top: 9%;
    right: 15px;
  }
  .modal__image {
    width: 100%;
  }
  .modal-ozone__image2,
  .modal-uv__image2 {
    margin: 30px auto 0;
  }
}

/* feature */
#feature .common__heading {
  background-image: url(../img/feature_bg.jpg);
}
#voice .common__heading {
  background-image: url(../img/voice_bg.jpg);
}
.future__container {
  margin-top: 150px;
}
.future__container:first-of-type {
  margin-top: 0;
}
.feature__number {
  width: 200px;
  margin: 0 auto 30px;
}
.feature__ttl {
  font-size: 32px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 48px;
}
.feature__content {
  width: 100%;
  max-width: 631px;
  margin: 0 auto;
}
.feature__movie {
  position: relative;
  padding-top: 56.25%;
}
.feature__movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.feature__txt {
  text-align: center;
  margin-top: 20px;
}
@media screen and (max-width: 1019px){
  .feature__ttl {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px){
  .feature__number {
    width: 200px;
  }
  .feature__ttl {
    font-size: 24px;
    margin-bottom: 40px;
  }
}
.point {
  margin-top: 90px;
}
.feature__ttl + .point {
  margin-top: 50px;
}
.point__number {
  width: 70px;
  margin: 0 auto 30px;
}
.point__ttl {
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  font-size: 20px;
  text-align: center;
  background-color: #F5E828;
  border-radius: 20px;
  padding: 5px 10px;
  max-width: 700px;
  margin: 0 auto 10px;
}
.point__ttl--small {
  font-size: 12px;
  display: inline-block;
  vertical-align: text-bottom;
}
.point-grade__ttl {
  font-size: 12px;
  text-align: center;
  position: relative;
  display: block;
  width: 7em;
  margin: 0 auto 10px;
}
.point-grade__ttl::before,
.point-grade__ttl::after {
  content: "";
  display: block;
  width: 45px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000;
}
.point-grade__ttl::before {
  left: -50px;
}
.point-grade__ttl::after {
  right: -50px;
}
.point-grade__type {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 10px;
}
.point-grade__txt {
  font-size: 12px;
  text-align: center;
  display: block;
  width: 150px;
  background-color: #EAE8DB;
  border-radius: 10px;
  padding: 1px 0;
  margin-bottom: 0;
}
.point-grade__txt + .point-grade__txt {
  margin-left: 12px;
}
.point-grade__note {
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (max-width: 767px){
  .point-grade__type.type--multiple {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto 10px;
    max-width: 400px;
  }
  .point-grade__txt {
    width: calc(95% / 2);
    margin-bottom: 10px;
  }
  .point-grade__txt + .point-grade__txt {
    margin-left: 0;
  }
  .point-grade__txt:nth-of-type(2n) {
    margin-left: 5%;
  }
  .point-grade__txt:nth-last-of-type(-n+2) {
    margin-bottom: 0;
  }
}
.point__icon {
  margin: 40px auto 15px;
}
.point__icon.icon--ozone {
  width: 42px;
}
.point__icon.icon--hiito {
  width: 48px;
}
.point__icon.icon--noritz {
  width: 60px;
}
.point__catch {
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  color: #3090BC;
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
  margin-top: 15px;
}
.container--happy .point__catch {
  color: #CE995F;
}
.container--eco .point__catch {
  color: #38B09E;
}
.container--connect .point__catch {
  color: #CC6867;
}
.container--useful .point__catch {
  color: #915E8D;
}
.point__catch--strong {
  font-size: 24px;
}
.point__txt {
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
  margin-top: 20px;
}
.point__sttl {
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
  background-color: #D6E9F2;
  margin: 30px auto 40px;
  max-width: 650px;
}
.point__image {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.point__figure {
  position: relative;
}
.point__image.image--one > .point__figure {
  width: 100%;
  max-width: 740px;
}
.point__image.image--two > .point__figure {
  width: calc(95% / 2);
}
.point__image.image--three > .point__figure {
  width: calc(90% / 3);
}
.point__image.image--four > .point__figure {
  width: calc(85% / 4);
}
.point__figure + .point__figure::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 39%;
  left: -13%;
  transform: rotate(45deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}
.point__image.image--two > .point__figure::before {
  top: 43%;
  left: -8%;
}
.point__image.image--four > .point__figure::before {
  top: 32%;
  left: -17%;
}
.point__image.image--one,
.point__image.image--four {
  margin-top: 40px;
}
.point__image.image--remocon {
  margin-top: 40px;
  justify-content: center;
}
.point__remocon:nth-of-type(1) {
  width: 240px;
}
.point__remocon:nth-of-type(2) {
  width: 390px;
  margin-left: 30px;
}
.point__image.image--switching {
  margin-top: 40px;
}
.point__caption {
  font-size: 12px;
  text-align: center;
  margin-top: 18px;
}
.point__caption--scroll {
  font-size: 10px;
  position: relative;
}
.point__caption--scroll::before,
.point__caption--scroll::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
}
.point__caption--scroll::before {
  width: 20px;
  height: 1px;
  left: 43px;
  transform: translateY(-50%);
  background-color: #000;
}
.point__caption--scroll::after {
  width: 6px;
  height: 6px;
  left: calc(43px + 14px);
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: translateY(-50%) rotate(-45deg);
}
.point__caption--head {
  font-size: 13px;
  text-align: center;
  color: #CC6867;
  margin-bottom: 13px;
}
.point__caption--large {
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  font-size: 18px;
  text-align: center;
  margin-top: 18px;
}
@media screen and (max-width: 767px){
  .point__txt {
    text-align: left;
  }
  .point__catch {
    line-height: 1.5;
  }
  .point__sttl {
    padding: 8.5px 0;
  }
  .point__image {
    display: block;
    margin-bottom: 40px;
  }
  .point__image.image--one {
    width: calc(100% + 30px);
  }
  .point__image.image--one > .point__figure {
    padding-bottom: 20px;
    padding-right: 30px;
    overflow-x: scroll;
  }
  .point__image.image--one > .point__figure img {
    width: 740px;
  }
  .point__image.image--two > .point__figure {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .point__image.image--two > .point__figure img {
    max-width: 450px;
    margin: 0 auto;
    display: block;
  }
  .point__image.image--three > .point__figure,
  .point__image.image--four > .point__figure {
    width: 100%;
  }
  .point__image.image--three > .point__figure img {
    width: 240px;
    margin: 0 auto;
    display: block;

  }
  .point__image.image--four > .point__figure img {
    width: 200px;
    margin: 0 auto;
    display: block;
  }
  .point__figure + .point__figure {
    margin-top: 76px;
  }
  .point__figure + .point__figure::before {
    top: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .point__image.image--two > .point__figure::before {
    top: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .point__image.image--four > .point__figure::before {
    top: -50px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .point__remocon:nth-of-type(1) {
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
  }
  .point__remocon:nth-of-type(2) {
    width: 100%;
    max-width: 315px;
    margin: 40px auto 0;
  }
  .point__caption {
    margin-top: 15px;
  }
  .point__image.image--four > .point__figure:nth-of-type(1) .point__caption {
    margin-top: -14px;
  }
}

/* voice */
#voice {
  position: relative;
  padding-bottom: 30px;
}
#voice::before {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: -2px;
  left: 0;
  background-image: url(../img/bg_wave_sky.png);
  background-repeat:repeat-x;
  background-size: 100px 40px;
}
.voice__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.voice__case {
  width: calc(90% / 3);
}
.voice__number {
  width: 64px;
  margin: 0 auto 18px;
}
.voice__txt {
  font-size: 13px;
  line-height: 1.75;
}
.voice__image {
  margin-bottom: 30px;
}
.voice__image img {
  border-radius: 50%;
}
@media screen and (max-width: 767px){
  .voice__container {
    display: block;
  }
  .voice__case {
    width: 100%;
  }
  .voice__case + .voice__case{
    margin-top: 60px;
  }
  .voice__image {
    max-width: 240px;
    margin: 0 auto 30px;
  }
}

/* note */
.note {
  margin-top: 100px;
}
.note__container + .note__container {
  margin-top: 10px;
}

/* catalog */
.catalog__btn {
  background-color: #EBF5FC;
  border: 4px solid #99CCF0;
  border-radius: 10px;
  padding: 21.5px 40px 21.5px 150px;
  display: flex;
  align-items: center;
  margin: 100px auto 0;
  position: relative;
  max-width: 800px;
}
.catalog__btn::before {
  content: "";
  display: block;
  width: 77px;
  height: 110px;
  position: absolute;
  bottom: 20px;
  left: 40px;
  background-image: url(../img/catalog_img_c72.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}
.catalog__btn::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}
.catalog__catch {
  font-size: 15px;
  margin-bottom: 0;
  color: #000;
  margin-right: 20px;
  width: 16em;
}
.catalog__text {
  font-family: 'TBUDゴシック B', 'TBUDGothic B';
  color: #000;
  font-size: 28px;
  width: 10em;
}
@media screen and (max-width: 1019px){
  .catalog__catch {
    font-size: 12px;
  }
  .catalog__text {
    font-family: 'TBUDゴシック B', 'TBUDGothic B';
    color: #000;
    font-size: 24px;
    width: 10em;
  }
}
@media screen and (max-width: 767px){
  .catalog__btn {
    padding: 90px 20px 80px;
    text-align: center;
    display: block;
    transition: 0.3s all;
    margin-top: 80px;
    max-width: 360px;
  }
  .catalog__btn::before {
    top: -40px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .catalog__btn::after {
    top: auto;
    bottom: 25px;
    right: auto;
    left: 47%;
    transform: translate(0,-50%) rotate(45deg);
  }
  .catalog__catch {
    margin-right: 0;
    width: 100%;
  }
  .catalog__text {
    width: 100%;
  }
}
@media screen and (min-width: 767.5px) {
  .catalog__btn:hover {
    background-color: #99CCF0;
    opacity: 1;
  }
  .catalog__btn:hover .catalog__catch {
    color: #fff;
  }
  .catalog__btn:hover .catalog__text {
    color: #fff;
  }
  .catalog__btn:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}

/* lineup */
#lineup {
  padding-bottom: 150px;
}
.line-up-secchi {
  background-color: #EAE8DB;
  padding: 15.5px 10px;
  margin-bottom: 40px;
}
.line-up-secchi .ttl04 {
  margin-bottom: 4px;
  text-align: center;
}
.line-up-secchi__link {
  font-size: 14px;
  text-align: center;
}
.line-up-table__price {
  font-size: 1.3rem;
  line-height: 1.75;
  border: none;
  max-width:260px;
  padding: 0;
  margin: 24px auto 0;
  position: relative;
}
.line-up-table__price::before {
  content: "";
  display: block;
  width: 55px;
  height: 1px;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #E8380D;
}
.scroll-table {
  margin-bottom: 70px;
}
td.td--narrow {
  padding: 20px 10px;
  width: 80px;
  text-align: center;
}
td.td--thin {
  padding: 20px 10px 10px;
}
.link-opacity .icon-angle-right:before {
  display: block;
}
.link-opacity.link--small {
  margin-top: 20px;
  display: block;
}
.line-up-btn {
  font-size: 15px;
  width: 100%;
  max-width: 240px;
  margin-top: 10px;
  color: #fff;
  padding: 14px 20px;
  background-color: #000;
  border-radius: 5px;
  text-align: left;
  justify-content: flex-start;
}
.box--border-gray {
  text-align: center;
  padding: 10px 30px;
}
.modal__close-btn>* {
background: #99CCF0;
}

@media screen and (max-width: 1019px){
  .line-up-table td {
    padding: 20px;
  }
  td.td--thin {
    padding: 10px 10px 5px;
  }
  .modal__scroll {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px){
  #lineup {
    padding-bottom: 100px;
  }
  .line-up-table td {
    padding: 15px 40px;
  }
  td.td--narrow {
    padding: 20px;
    border-right: 1px solid #d2d2d2;
  }
  #TAB-01 + .product-tab__label {
    padding-top: 20px;
  }
  .modal__scroll {
    overflow-x: auto;
  }
  .modal__scroll img {
    display: block;
    max-width: 315px;
    margin: 0 auto;
  }
}