@charset "UTF-8";
/*$minFont　最小のフォントサイズを引数として受け取る（単位なし）*/
#Page {
  display: none;
}

.serif {
  font-family: "Noto Serif JP";
}

/* ================================================= 
 header setting
================================================= */
header {
  width: 100%;
  padding: 30px 0;
  top: 0;
  left: 0;
  z-index: 2;
  transition: 0.4s;
  background-color: #ffffdb;
}
header img {
  width: 100%;
  height: auto;
  max-width: 260px;
}
header #header-inner {
  max-width: 1140px;
  width: 94%;
  margin: auto;
  text-align: center;
}
header #header-inner #h_logo {
  line-height: 1;
  margin: 0;
}
header #header-inner #h_logo a {
  width: 255px;
  display: inline-block;
}

@media screen and (max-width: 819px) {
  header {
    padding: 15px 0;
  }
  header #header-inner #h_logo {
    line-height: 1.2;
  }
  header #header-inner #h_logo a {
    width: 200px;
  }
  header #header-inner #h_logo p {
    font-size: 14px;
  }
}
/* ================================================= 
 hero setting
================================================= */
#hero-wrap {
  background: no-repeat center bottom;
  background-size: cover;
  margin-top: -5px;
}
#hero-wrap .l-container {
  max-width: 1250px;
}
#hero-wrap .hero-inner {
  padding: 50px 0;
  position: relative;
  margin: 0 auto;
  text-shadow: 2px 2px 3px #fff, -2px 2px 3px #fff, 2px -2px 3px #fff, -2px -2px 3px #fff;
}
#hero-wrap .hero-inner .hero-title p {
  font-size: 30px;
  margin: 0 auto 15px;
  color: #013088;
  text-align: center;
  font-weight: 700;
}
#hero-wrap .hero-inner .hero-title p span {
  font-size: 40px;
}
#hero-wrap .hero-inner .hero-title p .c-bg-yellow {
  text-shadow: none;
  font-size: 30px;
  background-color: #ffd803;
  padding: 3px 10px;
  display: inline-block;
  margin: 5px;
}

@media screen and (max-width: 767px) {
  #hero-wrap .hero-inner {
    margin: auto;
    padding: 20px 0;
  }
  #hero-wrap .hero-inner .hero-title p {
    font-size: 20px;
  }
  #hero-wrap .hero-inner .hero-title p span {
    font-size: 30px;
  }
  #hero-wrap .hero-inner .hero-title p .c-bg-yellow {
    font-size: 20px;
  }
}
.floating-little {
  display: block;
  top: 90%;
  z-index: 1;
  position: sticky;
  font-weight: 700;
}
.floating-little a {
  color: #fff;
  background-color: #00b050;
  padding: 15px;
  text-decoration: none;
  line-height: 1.2;
  position: absolute;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -400px;
  right: 0px;
  text-align: center;
  font-size: 30px;
}
.floating-little a:hover {
  opacity: 0.9;
}

@media screen and (max-width: 819px) {
  .floating-little {
    display: none;
  }
}
/* ================================================= 
 contents setting
================================================= */
.cta ._type02 {
  margin-bottom: 2em;
}
.cta .c-title-md {
  margin-top: 2em;
}
.cta .c-img-wrap {
  margin: 1.5em 0;
}

br.pc {
  display: block;
}
br.sp {
  display: none;
}

@media screen and (max-width: 819px) {
  br.pc {
    display: none;
  }
  br.sp {
    display: block;
  }
}
@media screen and (max-width: 819px) {
  .c-img-wrap {
    text-align: center;
  }
  .c-img-wrap.pc {
    display: none;
  }
}
img {
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}

p.small {
  font-size: 14px;
}

.kome {
  font-size: 14px;
  font-weight: 400;
  position: relative;
  top: -5px;
}

.under {
  text-decoration: underline !important;
}

.c-bg-color {
  color: #fff;
}

.c-img-wrap {
  text-align: center;
}

.c-italic {
  display: inline-block;
  transform: skewX(-20deg);
}

.store-information {
  background: #fff6d6;
  border-radius: 10px;
  padding: 30px 30px 20px;
  min-width: 450px;
  margin: 0 15px;
  flex-wrap: nowrap;
}
.store-information .tac.c-blue {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 10px;
}
.store-information .contents {
  max-width: 420px;
  margin: 0 auto;
}
.store-information .information-detail {
  border-radius: 50px;
  border: 2px solid #028ef9;
  display: flex;
  align-items: center;
  background: #fff;
  width: 390px;
  margin: 10px auto 0;
}
.store-information .information-detail .heading {
  background: #028ef9;
  border-radius: 20px 0 0 20px;
  text-align: center;
  padding: 10px;
  width: 100px;
}
.store-information p {
  font-size: 16px;
  color: #333;
  padding: 10px;
}

@media screen and (max-width: 819px) {
  .store-information {
    min-width: auto;
    max-width: 90%;
    padding: 20px;
  }
  .store-information .information-detail {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    display: flex;
  }
  .store-information .information-detail .heading {
    border-radius: 5px 5px 0 0;
    width: 101%;
    border: 2px solid #028ef9;
    margin: -1px;
  }
  .store-information .information-detail p {
    margin: 0 auto;
  }
}
.toho {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 5px;
  margin-bottom: 20px;
}
.toho span {
  border-radius: 50%;
  background: #013088;
  font-size: 29px;
  display: block;
  width: 47px;
  height: 47px;
  font-weight: 700;
  text-align: center;
}
.toho span.num {
  position: relative;
  width: 57px;
  height: 57px;
}
.toho span.num span {
  background: none;
  font-size: 48px;
  position: absolute;
  bottom: 20px;
  left: 5px;
}

.supplement {
  font-size: 14px;
  margin-top: 25px;
}
.supplement._sm {
  max-width: 810px;
  margin: 0 auto;
}
.supplement.small {
  font-size: 12px;
  color: #333;
}
.supplement.small p {
  margin-top: 2px !important;
}
.supplement .medium {
  font-size: 16px;
}

#features .c-title-md:first-child {
  color: #0a7cc1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#features .c-title-md:first-child::before, #features .c-title-md:first-child::after {
  border-top: 2px solid;
  content: "";
  width: 38%;
}
#features .c-title-md:first-child::before {
  margin-right: 1em;
}
#features .c-title-md:first-child::after {
  margin-left: 1em;
}
#features .acuvue-text {
  font-size: 30px;
  font-weight: 700;
  color: #051f4a;
  margin: 50px auto 30px;
  text-align: center;
}
#features .technology {
  margin-top: 70px;
}
#features .all-index {
  margin: 45px auto 0;
  border-bottom: 1px solid #051f4a;
  display: flex;
  justify-content: space-between;
}
#features .all-index .all_btn {
  color: #051f4a;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  margin-right: 10px;
}
#features .all-index .all_btn span:not(.text_btn) {
  position: absolute;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 2px solid #051f4a;
  border-radius: 50%;
  top: calc(50% - 9px);
  right: 110px;
  transform: translateY(-50%);
}
#features .all-index .all_btn span:not(.text_btn)::before, #features .all-index .all_btn span:not(.text_btn):after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  display: inline-block;
  width: 2px;
  height: 2px;
  border-top: 20px solid #051f4a;
  transform: translateX(-50%);
  border-radius: 3px;
}
#features .all-index .all_btn span:not(.text_btn)::after {
  top: 51%;
  left: 14px;
  width: 2px;
  transform: translateY(-50%) rotate(90deg);
}
#features .all-index.active span:not(.text_btn) {
  display: block;
  right: 130px;
}
#features .all-index.active span:not(.text_btn)::before {
  left: 14px;
  transform: rotate(90deg);
  width: 2px;
}
#features p {
  margin-top: 15px;
}
#features p:not(.c-blue2) {
  color: #3d3d47;
}
#features .features-head {
  position: relative;
}
#features .features-head .p_btn {
  position: absolute;
  width: 34px;
  height: 34px;
  top: calc(50% - 9px);
  right: 10px;
  transform: translateY(-50%);
}
#features .features-head .p_btn::before, #features .features-head .p_btn:after {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: 30px solid #051f4a;
  transform: translateX(-50%);
}
#features .features-head .p_btn::after {
  top: 50%;
  left: 15px;
  width: 4px;
  transform: translateY(-50%) rotate(90deg);
}
#features .features-head.active .p_btn {
  display: block;
}
#features .features-head.active .p_btn::before {
  left: 14px;
  transform: rotate(90deg);
  width: 4px;
}
#features .features-head .other_btn {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 30px;
  right: 20px;
  transform: translateY(-50%);
}
#features .features-head .other_btn::before, #features .features-head .other_btn:after {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: 30px solid #fff;
  transform: translateX(-50%);
}
#features .features-head .other_btn::after {
  top: 50%;
  left: 15px;
  width: 4px;
  transform: translateY(-50%) rotate(90deg);
}
#features .features-head.active .other_btn {
  display: block;
}
#features .features-head.active .other_btn::before {
  left: 15px;
  transform: rotate(90deg);
  width: 4px;
}
#features .features-head .Row {
  gap: 40px;
  align-items: end;
  margin: 30px 0 0;
}
#features .features-head .Row .c-img-wrap {
  width: 50px;
  text-align: left;
}
#features .features-head .Row .title {
  color: #051f4a;
}
#features .features-head .Row .ellipse {
  font-size: 25px;
  color: #fff;
  background: #051f4a;
  border-radius: 50px;
  padding: 15px 35px;
  margin-top: 10px;
  text-align: center;
}
#features .features-head p {
  font-weight: 700;
  margin-bottom: 0;
}
#features .features-head p.sub {
  font-size: 16px;
  font-weight: 400;
}
#features .features-head:has(.btn-other) {
  margin: 0 auto;
}
#features .border {
  border-bottom: 1px solid #051f4a;
  margin: 25px 0;
  width: 100%;
}
#features .features-body {
  display: none;
}
#features .features-body.open {
  display: block;
}
#features .features-body p:not(:last-child) {
  margin-bottom: 30px;
}
#features .features-body.num1 .Row {
  justify-content: center;
  align-items: center;
  max-width: 740px;
  margin: 30px auto;
}
#features .features-body.num1 .Row .border-blue {
  color: #051f4a;
  font-size: 30px;
  text-align: center;
  -webkit-text-decoration: underline #0a7cc1;
  text-decoration: underline #0a7cc1;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
#features .features-body .c-img-wrap.sp {
  display: none;
}
#features .features-body.num2 .Row {
  margin: 30px auto;
}
#features .features-body.num2 .Row .Column--4 {
  max-width: 245px;
}
#features .features-body.num2 .Row .kome {
  margin: 60px 0 0 auto;
}
#features .features-body.num2 .btn-other {
  max-width: 340px;
  margin: 0 auto;
  position: relative;
}
#features .features-body .speech-bubble {
  background: #e6f2f9;
  padding: 50px 160px;
  position: relative;
  border-radius: 30px;
}
#features .features-body .speech-bubble::before {
  content: "";
  border: 25px solid transparent;
  border-bottom: 35px solid #e6f2f9;
  margin-left: -10px;
  top: -50px;
  left: 70%;
  position: absolute;
}
#features .features-body .speech-bubble .tac {
  font-size: 20px;
  font-weight: 700;
  color: #051f4a;
  margin: 10px auto 20px;
}
#features .features-body .speech-bubble .float {
  position: absolute;
  right: 40px;
  bottom: 50px;
}
#features .features-body .friction-stability {
  max-width: 650px;
  margin: 90px auto;
}
#features .features-body .bg-blue-item {
  font-size: 25px;
  color: #fff;
  background: #0a7cc1;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 30px;
  min-width: 340px;
  font-weight: 700;
}
#features .features-body .bg-blue-item span {
  font-size: 30px;
}
#features .features-body .oxygen {
  max-width: 725px;
  margin: 0 auto;
}
#features .features-body .oxygen p {
  font-size: 16px;
  font-weight: 700;
}
#features .supplement {
  margin-top: 40px;
}

#features-title {
  margin-bottom: 50px;
}

@media screen and (max-width: 819px) {
  #features .c-title-md:first-child::before, #features .c-title-md:first-child::after {
    width: 30%;
  }
  #features .c-title-md:first-child::before {
    margin-right: 10px;
  }
  #features .c-title-md:first-child::after {
    margin-left: 10px;
  }
  #features .acuvue-text {
    font-size: 22px;
    margin-top: 40px;
  }
  #features .technology {
    margin: 35px -20px;
  }
  #features .all-index .c-title-sm {
    margin-bottom: 10px;
  }
  #features .all-index .all_btn:not(.text_btn) {
    font-size: 16px;
    margin-bottom: 10px;
  }
  #features .all-index .all_btn:not(.text_btn) span {
    width: 23px;
    height: 23px;
    top: 50%;
    right: 90px;
  }
  #features .all-index .all_btn:not(.text_btn) span::before, #features .all-index .all_btn:not(.text_btn) span:after {
    border-top: 12px solid #051f4a;
  }
  #features .all-index .all_btn:not(.text_btn) span::after {
    top: 50%;
    left: 9px;
    width: 1.5px;
  }
  #features .all-index.active span:not(.text_btn) {
    display: block;
    right: 130px;
  }
  #features .all-index.active span:not(.text_btn)::before {
    left: 9px;
    width: 0;
  }
  #features .features-head {
    align-items: end;
    cursor: pointer;
  }
  #features .features-head .p_btn {
    top: 40px;
    right: 3px;
  }
  #features .features-head .p_btn::before, #features .features-head .p_btn:after {
    top: 20%;
    border-top: 20px solid #051f4a;
    width: 3px;
    left: 47%;
  }
  #features .features-head .p_btn::after {
    top: 50%;
    left: 14px;
    width: 3px;
  }
  #features .features-head.active .p_btn {
    display: block;
  }
  #features .features-head.active .p_btn::before {
    left: 14px;
    width: 3px;
  }
  #features .features-head .other_btn {
    top: 27px;
  }
  #features .features-head .Row {
    gap: 10px;
    max-width: 100%;
  }
  #features .features-head .Row .c-img-wrap {
    width: 40px;
  }
  #features .features-head .Row .title span {
    display: block;
    font-size: 14px;
  }
  #features .features-head .Row .ellipse {
    font-size: 20px;
    padding: 10px 25px;
    display: inline-block;
  }
  #features .features-head p {
    font-weight: 400;
    margin-bottom: 0 !important;
  }
  #features .features-head p.sub {
    font-size: 13px;
  }
  #features .features-body.num1 .Row {
    display: none;
  }
  #features .features-body .c-img-wrap.sp {
    margin: 20px auto;
    display: block;
  }
  #features .features-body.num2 .Row {
    margin: 10px -15px;
  }
  #features .features-body.num2 .Row .Column--4 {
    max-width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
  }
  #features .features-body.num2 .Row .Column--4 p {
    max-width: 50%;
  }
  #features .features-body.num2 .Row .Column--4 .c-img-wrap {
    max-width: 47%;
  }
  #features .features-body.num2 .Row .kome {
    margin: 50px 20px 0;
    font-size: 12px;
  }
  #features .features-body.num2 .Row .border {
    margin-left: 20px;
    margin-right: 20px;
  }
  #features .features-body.num2 .btn-other {
    min-width: 280px;
    width: 280px;
  }
  #features .features-body.other [class^=c-title-] {
    font-size: 20px;
  }
  #features .features-body.other .u-mt4 {
    margin-top: 10px !important;
  }
  #features .features-body.other .u-mb4 {
    margin-bottom: 10px !important;
  }
  #features .features-body .speech-bubble {
    padding: 30px;
  }
  #features .features-body .speech-bubble::before {
    left: 75%;
  }
  #features .features-body .speech-bubble .tac {
    font-weight: 400;
  }
  #features .features-body .speech-bubble .float {
    display: block;
    position: relative;
    bottom: 6px;
    right: 0;
    font-size: 13px;
  }
  #features .features-body .friction-stability {
    margin: 40px auto;
  }
  #features .features-body .bg-blue-item {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  #features .features-body .bg-blue-item span {
    font-size: 25px;
  }
  #features .features-body .oxygen {
    align-items: center;
  }
  #features .features-body .oxygen .Column--6:first-child .c-img-wrap {
    width: 80%;
    margin: 0 auto;
  }
  #features .features-body .oxygen .Column--6:last-child {
    padding-left: 0;
  }
  #features .features-body .oxygen p {
    font-size: 14px;
    font-weight: 400;
    margin-top: 0;
  }
}
#regular-mail img {
  max-width: 100%;
  height: auto;
}
#regular-mail .sub-txt {
  font-size: 33px;
  font-weight: 700;
}
#regular-mail .sub-txt span {
  display: inline-block;
  transform: rotate(-10deg);
}
#regular-mail .sub-txt span:first-child {
  padding-left: 20px;
  padding-right: 5px;
}
#regular-mail .sub-txt span:last-child {
  padding-right: 20px;
}
#regular-mail .diagonal-title {
  font-size: 40px;
  font-weight: 700;
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 40px auto;
}
#regular-mail .diagonal-title::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: auto;
  background: url("/assets/images/diagonal-design.webp") no-repeat;
  background-position: center;
  background-size: contain;
}
#regular-mail .diagonal-title::after {
  content: "";
  display: inline-block;
  width: 50px;
  height: auto;
  background: url("/assets/images/diagonal-design.webp") no-repeat;
  background-position: center;
  background-size: contain;
  transform: scale(-1, 1);
}
#regular-mail .regular-index {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 5px;
  margin: 60px auto;
}
#regular-mail .regular-index span {
  display: inline-block;
  text-align: left;
}
#regular-mail .arrow {
  position: relative;
  display: block;
  padding: 0 0 0 16px;
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  height: 150px;
}
#regular-mail .arrow::before, #regular-mail .arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#regular-mail .arrow::before {
  left: calc(50% - 55px);
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border: 60px solid transparent;
  border-top: 60px solid #fff;
  bottom: -150px;
}
#regular-mail .arrow::after {
  left: calc(50% - 20px);
  width: 8px;
  height: 60px;
  border-left: 50px solid #fff;
  top: -20px;
}
#regular-mail .dotted-line-box {
  max-width: 780px;
  padding: 20px;
  text-align: center;
  border: dashed 3px;
  margin: 40px auto;
}
#regular-mail .dotted-line-box .kome {
  top: 0;
}
#regular-mail .fz50 {
  font-size: 50px;
  font-weight: 700;
}
#regular-mail .arrow-right {
  text-align: center;
  margin-top: -30px;
}
#regular-mail .arrow-right::before, #regular-mail .arrow-right::after {
  content: "";
  height: 40px;
  display: inline-block;
  margin: -30px 0 0 -30px;
}
#regular-mail .arrow-right::before {
  width: 62%;
  min-width: 620px;
  border-bottom: 10px solid #fee30b;
}
#regular-mail .arrow-right::after {
  border-right: 20px solid #fee30b;
  transform: skew(55deg);
}
#regular-mail .supplement {
  max-width: 820px;
  margin: 20px auto;
}
#regular-mail p.date {
  text-align: center;
  font-size: 20px;
  margin: 10px auto 50px;
}
#regular-mail .c-img-wrap,
#regular-mail .detail {
  max-width: 880px;
  margin: 0 auto;
}
#regular-mail .c-img-wrap .supplement,
#regular-mail .detail .supplement {
  margin: 20px 0;
}
#regular-mail .logo {
  max-width: 390px;
  margin-top: 100px;
  margin-bottom: 35px;
}
#regular-mail .text {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#regular-mail .white-box1 {
  border: 1px solid #fff;
  padding: 20px;
  margin: 30px auto;
  font-size: 14px;
}
#regular-mail .information p,
#regular-mail .information + p {
  margin-top: 20px;
}

@media screen and (max-width: 819px) {
  #regular-mail .sub-txt {
    font-size: 22px;
    line-height: 2;
  }
  #regular-mail .diagonal-title {
    font-size: 20px;
    gap: 10px;
    margin: 20px -5px;
  }
  #regular-mail .diagonal-title::before, #regular-mail .diagonal-title::after {
    width: 30px;
  }
  #regular-mail .regular-index {
    font-size: 20px;
    letter-spacing: 1px;
    margin: 20px auto;
  }
  #regular-mail .arrow {
    height: 50px;
  }
  #regular-mail .arrow::before {
    left: calc(50% - 30px);
    border: 30px solid transparent;
    border-top: 30px solid #fff;
    bottom: -110px;
  }
  #regular-mail .arrow::after {
    left: calc(50% - 13px);
    height: 40px;
    border-left: 26px solid #fff;
    top: 20px;
  }
  #regular-mail .u-mb15 {
    margin-bottom: 15px !important;
  }
  #regular-mail .fz50 {
    font-size: 30px;
  }
  #regular-mail .fz50 + .c-title-ld {
    font-size: 20px;
  }
  #regular-mail .arrow-right {
    margin-top: -15px;
    min-width: auto;
  }
  #regular-mail .arrow-right::before, #regular-mail .arrow-right::after {
    height: 30px;
    margin: -30px 0 0 -10px;
  }
  #regular-mail .arrow-right::before {
    width: 94%;
    min-width: auto;
  }
  #regular-mail .arrow-right::after {
    border-right: 10px solid #fee30b;
    transform: skew(30deg);
  }
  #regular-mail .detail .supplement {
    margin: 20px;
  }
  #regular-mail p.date {
    font-size: 15px;
    margin: 10px auto 20px;
  }
  #regular-mail .store-information {
    max-width: 100%;
    margin: 0;
    padding: 20px 20px 30px;
  }
  #regular-mail .Row.information {
    gap: 30px;
    justify-content: center;
  }
  #regular-mail .Row.information .Column--6 {
    max-width: 370px;
    margin: 0 auto;
  }
  #regular-mail .Row.information .c-img-wrap img {
    width: 335px;
    height: 220px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 100%;
    object-position: 0 100%;
  }
}
.map {
  margin: 60px auto;
}
.map iframe {
  width: 100%;
}

@media screen and (max-width: 819px) {
  .map {
    height: 220px;
    margin-top: 30px;
  }
  .map iframe {
    height: 100%;
  }
}
img {
  display: block;
  margin: 0 auto;
}

.hero {
  max-width: 100%;
}

br.pc {
  display: block;
}
br.sp {
  display: none;
}

@media screen and (max-width: 819px) {
  br.pc {
    display: none;
  }
  br.sp {
    display: block;
  }
}
a:hover {
  opacity: 0.8;
}

/* header */
header div {
  background-color: #00b050;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  max-width: 175px;
  font-size: 14px;
  font-weight: bold;
}
header div span {
  font-size: 18px;
}
header h1 {
  text-align: center;
  color: #013088;
  font-size: 30px;
  font-weight: 500;
}

/* キャンペーン*/
.wrap.hero-under {
  background-color: #051f4a;
  padding: 80px 120px;
  margin-top: -7px;
}
.wrap.hero-under .hero-under {
  max-width: 860px;
  margin: 0px auto;
}
.wrap.hero-under .hero-under h1,
.wrap.hero-under .hero-under h2,
.wrap.hero-under .hero-under h3 {
  color: white;
  text-align: center;
}
.wrap.hero-under .hero-under h3 {
  font-size: 30px;
  font-weight: 700;
  margin-top: 14px;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under h3 {
    font-size: 22px;
  }
}
.wrap.hero-under .hero-under-box {
  max-width: 1110px;
  margin: 50px auto 0;
}
.wrap.hero-under .hero-under-box img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box {
    margin: 30px auto 0;
  }
}
.wrap.hero-under .hero-under-box .hero-under-box-text--wrap {
  text-align: center;
  color: #fff;
  background: #074184;
  padding: 35px 0;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box .hero-under-box-text--wrap {
    padding: 20px 0;
  }
}
.wrap.hero-under .hero-under-box .hero-under-box-text--wrap .hero-under-box-text {
  font-size: 30px;
  font-weight: 700;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box .hero-under-box-text--wrap .hero-under-box-text {
    font-size: 16px;
  }
}
.wrap.hero-under .hero-under-box .hero-under-box-text--wrap h3 {
  font-size: 35px;
  position: relative;
  font-weight: 700;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 50px;
  margin: 20px auto 0;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box .hero-under-box-text--wrap h3 {
    font-size: 22px;
    padding: 0 40px;
  }
}
.wrap.hero-under .hero-under-box .hero-under-box-text--wrap h3:before, .wrap.hero-under .hero-under-box .hero-under-box-text--wrap h3:after {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  width: 33px;
  height: 54px;
}
.wrap.hero-under .hero-under-box .hero-under-box-text--wrap h3:before {
  background-image: url("/assets/images/ttl-icon-left.png");
  left: 0;
}
.wrap.hero-under .hero-under-box .hero-under-box-text--wrap h3:after {
  background-image: url("/assets/images/ttl-icon-right.png");
  right: 0;
}
.wrap.hero-under .hero-under-box .hero-under-box-flex {
  background: #b1def7;
  display: flex;
  padding: 30px 40px 50px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 40px;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box .hero-under-box-flex {
    padding: 30px 20px 30px;
  }
}
.wrap.hero-under .hero-under-box .hero-under-box-flex > div {
  flex: 1 1 auto;
  max-width: 485px;
  text-align: center;
  padding: 20px;
  background: #fff;
  padding: 42px 42px 15px;
  position: relative;
  margin-top: 22px;
}
.wrap.hero-under .hero-under-box .hero-under-box-flex > div h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  position: absolute;
  background-color: #154184;
  border-radius: 22px;
  max-width: 250px;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.wrap.hero-under .hero-under-box .hero-under-box-flex > div p {
  font-size: 30px;
  color: #154184;
  font-weight: 500;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box .hero-under-box-flex > div p {
    font-size: 20px;
  }
}
.wrap.hero-under .hero-under-box .hero-under-box-flex > div p strong {
  color: #f30407;
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
}
.wrap.hero-under .hero-under-box .hero-under-box-flex > div p sub {
  color: #f30407;
  font-size: 40px;
  position: relative;
  top: 0px;
  font-weight: 700;
}
.wrap.hero-under .hero-under-box .hero-under-box-flex > div p span {
  font-size: 40px;
  font-weight: 700;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box .hero-under-box-flex > div p span {
    display: block;
  }
}
.wrap.hero-under .hero-under-box-bottom {
  color: #fff;
  margin-top: 50px;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box-bottom {
    margin-top: 30px;
  }
}
.wrap.hero-under .hero-under-box-bottom h2 {
  font-size: 30px;
  text-align: center;
  font-weight: 700;
  margin: 0px auto 20px;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box-bottom h2 {
    font-size: 25px;
  }
}
.wrap.hero-under .hero-under-box-bottom ol {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.wrap.hero-under .hero-under-box-bottom ol li {
  font-size: 25px;
  font-weight: 500;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box-bottom ol li {
    font-size: 20px;
  }
}
.wrap.hero-under .hero-under-box-bottom img {
  margin: 30px auto;
  max-width: 706px;
  height: auto;
}
@media (max-width: 950px) {
  .wrap.hero-under .hero-under-box-bottom img {
    max-width: 100%;
  }
}
.wrap.hero-under .hero-under-box-bottom p {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
}
@media (max-width: 819px) {
  .wrap.hero-under .hero-under-box-bottom p {
    font-size: 20px;
  }
}

.acuvue-max,
.campaign30,
.campaign90,
.character2,
.accordion-2 .large-text {
  color: white;
  text-align: center;
}

.campaign-attention {
  font-size: 14px;
  text-align: left;
  margin-top: 20px;
}

.acuvue-max {
  max-width: 710px;
  margin: 100px auto 0;
}

@media screen and (max-width: 819px) {
  .acuvue-max {
    margin-top: 60px;
  }
  header h1 {
    font-size: 18px;
    margin-top: 5px;
  }
  header div {
    max-width: 115px;
    font-size: 9px;
    padding: 2px;
  }
  header div span {
    font-size: 16px;
  }
}
.hero-under h1 {
  position: relative;
  padding: 0 0 20px;
  margin-bottom: 0.2rem;
  border-bottom: 2px solid;
  color: white;
  font-weight: bold;
  font-size: 35px;
}
.hero-under h1:before {
  position: absolute;
  top: 100%;
  left: 50%;
  content: "";
}

h1:after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: "";
}

.hero-under h1:before {
  border: 16px solid;
  border-color: transparent;
  border-top-color: white;
  margin-left: -14px;
}
.hero-under h1:after {
  border: 12px solid;
  border-color: transparent;
  border-top-color: #051f4a;
  margin-left: -10px;
}
.hero-under h2 {
  font-size: 30px;
  margin: 40px auto 30px;
  font-weight: 700;
}

.c-img-wrap img {
  display: block;
  margin: 0 auto;
  height: auto;
}

img .campaign {
  width: 60%;
  height: auto;
  text-align: center;
}

.campaign-pack {
  border: 4px solid;
  width: 658px;
  margin: 50px auto;
  padding: 15px 0 18px;
}

.campaign30 {
  font-size: 20px;
  font-weight: bold;
}
.campaign30 span {
  font-size: 30px;
}

.campaign90 {
  font-size: 18px;
}

.wrap.hero-under .three-button {
  margin-top: 50px;
}
.wrap.hero-under .three-button a {
  background-color: #fff;
  color: #051f4a;
  border-radius: 10px;
  width: 350px;
  max-width: 350px;
  padding: 20px 60px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 25px;
  text-decoration: none;
}
.wrap.hero-under a {
  position: relative;
}
.wrap.hero-under .bg-blue {
  position: absolute;
  right: 15px;
  background: #051f4a;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 25px;
  right: 23px;
}
.wrap.hero-under .bg-blue .btn-arrow {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 2px;
  height: 14px;
  background: currentColor;
  position: absolute;
  top: 8px;
  left: 14px;
  border-radius: 3px;
}
.wrap.hero-under .bg-blue .btn-arrow:before, .wrap.hero-under .bg-blue .btn-arrow:after {
  content: "";
  width: 10px;
  height: 2px;
  display: inline-block;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  bottom: calc(54% - 6px);
}
.wrap.hero-under .bg-blue .btn-arrow::before {
  transform: rotate(135deg);
  right: -7px;
}
.wrap.hero-under .bg-blue .btn-arrow::after {
  transform: rotate(45deg);
  right: -1px;
}
.wrap.hero-under .three-button .button-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 10px 10px 20px;
  flex-wrap: wrap;
}
.wrap.product-featurs {
  max-width: 920px;
  margin: 0 auto;
  padding-top: 100px;
}
@media (max-width: 819px) {
  .wrap.product-featurs {
    padding-top: 60px;
  }
}
.wrap.product-featurs .product-featurs2 {
  color: #0a7cc1;
  display: flex;
  align-items: center;
}
.wrap.product-featurs .product-featurs2:before, .wrap.product-featurs .product-featurs2:after {
  content: "";
  flex: 1;
  border-bottom: 2px solid #0a7cc1;
}
.wrap.product-featurs .acuvue2 {
  margin: 50px auto;
}
.wrap.product-featurs .technologys {
  margin-bottom: 100px;
  max-width: 100%;
  height: auto;
}
.wrap.product-featurs .product-features2 {
  color: #0a7cc1;
  font-size: 30px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin: 80px 0;
}
.wrap.product-featurs .product-features2:before, .wrap.product-featurs .product-features2:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #0a7cc1;
  margin: 20px;
}
.wrap.product-featurs .large-text img {
  display: block;
  margin-top: 50px;
  height: auto;
}
.wrap.product-featurs .perspective {
  text-align: center;
  margin-bottom: 104px;
}

@media screen and (max-width: 819px) {
  .campaign-pack {
    width: 100%;
    padding: 20px 0 24px;
  }
  .wrap.hero-under {
    padding: 60px 20px;
  }
  .hero-under h1 {
    font-size: 25px;
  }
  .hero-under h2 {
    font-size: 22px;
  }
  .wrap.hero-under .three-button a {
    max-width: 152px;
    font-size: 14px;
    padding: 10px;
    height: 50px;
    line-height: 2;
  }
  .wrap.hero-under .bg-blue {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 18px;
    right: 12px;
  }
  .wrap.hero-under .bg-blue .btn-arrow {
    width: 2px;
    top: 4px;
    left: 7px;
    border-radius: 3px;
    width: 1px;
    height: 7px;
  }
  .wrap.hero-under .bg-blue .btn-arrow:before, .wrap.hero-under .bg-blue .btn-arrow:after {
    width: 6px;
    height: 1.2px;
    display: inline-block;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    bottom: calc(54% - 3px);
  }
  .wrap.hero-under .bg-blue .btn-arrow::before {
    transform: rotate(135deg);
    right: -5px;
  }
  .wrap.hero-under .bg-blue .btn-arrow::after {
    transform: rotate(45deg);
    right: -1px;
  }
  .campaign90 {
    font-size: 15px;
  }
  .wrap.hero-under .three-button .button-row {
    gap: 10px;
  }
}
/* 製品特長 */
/* アコーディオン　すべて開く */
.accordion {
  cursor: pointer;
}

.wrap.product-featurs .accordion-all .all-btn {
  position: absolute;
  text-align: end;
  right: 105px;
  background: #fff;
  width: 30px;
  height: 30px;
  border-color: #0a7cc1;
  border-radius: 50%;
  border: 2px solid #0a7cc1;
}

.accordion-all {
  border-bottom: #0a7cc1 solid;
  padding-bottom: 10px;
  font-size: 25px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #0a7cc1;
}

.accordion-2,
.accordion-3,
.accordion-another,
.accordion-2,
.accordion-3,
.accordion-another2 {
  border-top: #0a7cc1 solid;
  margin-top: 10px;
}

.all_btn {
  text-align: end;
  color: #0a7cc1;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  margin-right: 10px;
}
.all_btn span:not(.text_btn) {
  position: absolute;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 2px solid #0a7cc1;
  border-radius: 50%;
  top: calc(50% - 9px);
  right: 105px;
  transform: translateY(-30%);
}
.all_btn span:not(.text_btn)::before, .all_btn span:not(.text_btn):after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  display: inline-block;
  width: 2px;
  height: 4px;
  border-top: 20px solid #0a7cc1;
  transform: translateX(-50%);
  border-radius: 3px;
}
.all_btn span:not(.text_btn)::after {
  top: 51%;
  left: 14px;
  width: 2px;
  transform: translateY(-50%) rotate(90deg);
}

.accordion-all.active span:not(.text_btn) {
  display: block;
  right: 130px;
}
.accordion-all.active span:not(.text_btn)::before {
  left: 14px;
  transform: rotate(90deg);
  width: 2px;
}

.box {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.item1,
.item2 {
  color: #0a7cc1;
}

.item1 {
  background-color: #0a7cc1;
  color: white;
  font-size: 60px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item2 {
  font-size: 18px;
  margin-left: 32px;
  display: inline-block;
  /* 要素が横並びになるように設定 */
  position: relative;
  display: inline-block;
  flex: 1;
}
.item2 span {
  font-size: 28px;
}

.accordion-2 .item2,
.accordion-3 .item2 {
  font-size: 28px;
}

.item2:before {
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  background-color: #0a7cc1;
  position: absolute;
  right: 15px;
  top: 52%;
  transform: translateX(-50%);
}

.accordion.box.active .item2:before {
  transform: translateY(-50%) rotate(90deg);
  top: 54%;
  right: 30px;
}

.item2:before {
  transform: translateX(-50%);
}
.item2:after {
  transform: translateX(-50%);
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  background-color: #0a7cc1;
  position: absolute;
  right: 15px;
  top: 52%;
  transform: translateX(-50%);
}

.wrap.product-featurs .accordion-1-contents h2,
.tier-stability h3 {
  font-size: 25px;
  color: #051f4a;
  text-align: center;
}

.accordion-1-contents-2 {
  line-height: 2.5;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  -webkit-text-decoration: underline #0a7cc1;
          text-decoration: underline #0a7cc1;
  text-underline-offset: 10px;
  margin-bottom: 102px;
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

@media screen and (max-width: 819px) {
  .item2:before {
    width: 20px;
    right: 5px;
    top: 52%;
  }
  .accordion.box.active .item2:before {
    right: 15px;
  }
}
.accordion-1-contents-2-3 {
  margin: 76px 0 100px 0;
}

.accordion1-3 {
  margin-top: 35px;
}

.accordion2-1 {
  margin: 0 0 25px 0;
  padding-top: 20px;
}

.accordion2-2 {
  margin-bottom: 95px;
}

.accordion2-3 {
  margin-bottom: 100px;
}

.accordion3-1 {
  margin: 0 0 90px 0;
  padding-top: 20px;
}

.accordion3-2 {
  margin-bottom: 100px;
  text-align: end;
  color: #051f4a;
}

@media screen and (max-width: 819px) {
  .accordion2-2,
  .accordion2-3 {
    margin-bottom: 60px;
  }
  .accordion3-2 {
    text-align: left;
    margin-bottom: 60px;
  }
  .accordion-1-contents-2 {
    margin-bottom: 0;
  }
  .accordion-1-contents-2-3 {
    margin-top: 30px;
    margin-bottom: 40px;
  }
  .accordion1-3 {
    margin-top: 10px;
  }
}
/* アコーディオン　その他 */
.accordion-another-item {
  text-align: center;
  margin: 100px 0 115px 0;
}

.another1 {
  float: left;
  margin-right: 10px;
}

.another-item {
  background-color: #0a7cc1;
  color: #fff;
  border-radius: 10px;
  width: 340px;
  padding: 20px 65px;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  text-decoration: none;
  position: relative;
  font-weight: 700;
}

.another-item-after:after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%) rotate(90deg);
}
.another-item-after:before, .another-item-after:after {
  content: "";
  position: absolute;
  top: 32%;
  right: 30px;
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: 30px solid #fff;
  transform: translateX(-50%);
}

.accordion-another-item.active .another-item-after:before {
  right: 32px;
  transform: rotate(90deg);
  width: 4px;
  top: 32%;
}

.another-item-after::after {
  top: 50%;
  right: 32px;
  width: 4px;
  transform: translateY(-50%) rotate(90deg);
}

.character2 {
  background-color: #0a7cc1;
  font-size: 25px;
  max-width: 103%;
  padding: 15px 40px;
}

.accordion-1 .small-text {
  line-height: 2;
  margin: 37px 0 80px 0;
  color: #3d3d47;
}
.accordion-1 .large-text {
  color: #051f4a;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}

.image {
  text-align: end;
}

.accordion-2-contents2 .small-text {
  margin: 50px 0 83px;
}

.tier-stability {
  width: 917px;
  text-align: center;
  background-color: #e6f2f9;
  padding: 125px 158px 53px 158px;
}

.accordion-2-contents2 .wrap {
  width: 700px;
  /* コンテナの幅を指定 */
  margin: 0 auto;
}
.accordion-2-contents2 .wrap .small-text {
  text-align: left;
}

.accordion-another2 {
  margin-top: 105px;
  margin-bottom: 100px;
}

.accordion-another3 {
  margin-top: 45px;
}

/* 注釈 */
.notes {
  font-size: 12px;
  margin-top: 40px;
  margin-bottom: 100px;
}

/* 定期便 */
.l-container._lg {
  padding-top: 100px;
  padding-bottom: 115px;
}

@media screen and (max-width: 819px) {
  .another-item {
    width: 280px;
    font-size: 20px;
    padding: 15px 65px;
  }
  .accordion-another-item.active .another-item-after:before {
    top: 27%;
  }
  .another-item-after:before, .another-item-after:after {
    top: 28%;
  }
  .another-item-after::after {
    top: 32px;
  }
  .accordion-another-item {
    margin: 40px auto;
  }
  .notes {
    margin-bottom: 60px;
  }
  .l-container._lg {
    padding: 60px 20px;
  }
}
#regular-mail {
  color: #fff;
  background-color: #0091d9;
}

.c-yellow {
  color: #fee30b;
}

.dotted-line-box.c-title-xs {
  font-weight: bold;
}

.c-title-ld.tac {
  font-size: 35px;
  text-align: center;
  font-weight: bold;
}

#regular-mail .sub-txt {
  font-size: 33px;
  font-weight: 700;
  text-align: center;
}
#regular-mail .sub-txt span {
  display: inline-block;
  transform: rotate(-10deg);
}
#regular-mail .sub-txt span:first-child {
  padding-left: 20px;
  padding-right: 5px;
}
#regular-mail .sub-txt span:last-child {
  padding-right: 20px;
}
#regular-mail .diagonal-title {
  font-size: 40px;
  font-weight: 700;
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 40px auto;
}
#regular-mail .diagonal-title::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: auto;
  background: url("/assets/images/diagonal-design.webp") no-repeat;
  background-position: center;
  background-size: contain;
}
#regular-mail .diagonal-title::after {
  content: "";
  display: inline-block;
  width: 50px;
  height: auto;
  background: url("/assets/images/diagonal-design.webp") no-repeat;
  background-position: center;
  background-size: contain;
  transform: scale(-1, 1);
}
#regular-mail .regular-index {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 5px;
  margin: 60px auto;
}
#regular-mail .regular-index span {
  display: inline-block;
  text-align: left;
}
#regular-mail .arrow {
  position: relative;
  display: block;
  padding: 0 0 0 16px;
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  height: 150px;
}
#regular-mail .arrow::before, #regular-mail .arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#regular-mail .arrow::before {
  left: calc(50% - 55px);
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border: 60px solid transparent;
  border-top: 60px solid #fff;
  bottom: -150px;
}
#regular-mail .arrow::after {
  left: calc(50% - 20px);
  width: 8px;
  height: 60px;
  border-left: 50px solid #fff;
  top: -20px;
}
#regular-mail .dotted-line-box {
  max-width: 780px;
  padding: 20px;
  text-align: center;
  border: dashed 3px;
  margin: 40px auto;
}
#regular-mail .dotted-line-box .kome {
  top: 0;
}
#regular-mail .fz50 {
  font-size: 50px;
  font-weight: 700;
  text-align: center;
}
#regular-mail .arrow-right {
  text-align: center;
}
#regular-mail .arrow-right::before, #regular-mail .arrow-right::after {
  content: "";
  height: 40px;
  display: inline-block;
  margin: -30px 0 0 -30px;
}
#regular-mail .arrow-right::before {
  width: 62%;
  min-width: 620px;
  border-bottom: 10px solid #fee30b;
}
#regular-mail .arrow-right::after {
  border-right: 20px solid #fee30b;
  transform: skew(55deg);
}
#regular-mail .supplement {
  max-width: 820px;
  margin: 20px auto;
  font-size: 16px;
}
#regular-mail .video {
  display: flex;
  justify-content: center;
  margin-top: 55px;
}
#regular-mail .video video {
  display: block;
  margin: 0 auto;
}

/* 動画 */
/* 動画下 */
.arban {
  margin-top: 100px;
  display: block;
}
.arban img {
  max-width: 730px;
}

/* 院内写真 */
.inside {
  display: flex;
  margin: auto;
  gap: 40px;
  max-width: 880px;
  justify-content: center;
}
.inside img {
  width: 50%;
}

.arbancontactlens {
  font-size: 35px;
  font-weight: bold;
  background-color: #051f4a;
  color: #fff;
  text-align: center;
  padding: 15px 0;
}

.arbancontactlens-wrap {
  background-color: #ffffdb;
}

.arbancontactlens-adress {
  padding: 60px 0 50px 0;
  margin: 0 auto;
  max-width: 790px;
}
.arbancontactlens-adress .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  max-width: 790px;
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap;
}
@media screen and (max-width: 819px) {
  .arbancontactlens-adress .flex {
    flex-direction: column;
    align-items: center;
  }
}
.arbancontactlens-adress .flex div {
  flex: 1;
}
.arbancontactlens-adress .flex div img {
  max-width: 100%;
  height: auto;
}

.adress {
  font-size: 18px;
  margin: 0px auto 50px;
}

.number {
  font-size: 14px;
  margin: 0 auto 35px;
}

.attention {
  font-size: 14px;
  margin: 0 auto;
  border: solid;
  border-width: thin;
  padding: 20px;
}

.c-img-wrap {
  text-align: left;
}

@media screen and (max-width: 819px) {
  .arban {
    margin-top: 60px;
  }
  .inside {
    flex-wrap: wrap;
  }
  .inside img {
    width: 100%;
  }
  .arbancontactlens {
    font-size: 25px;
  }
  .arbancontactlens-adress {
    padding: 5px 20px 50px;
  }
  .adress {
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
#regular-mail p.date {
  text-align: center;
  font-size: 20px;
  margin: 10px auto 50px;
}
#regular-mail .c-img-wrap,
#regular-mail .detail {
  max-width: 880px;
  margin: 0 auto;
}
#regular-mail .c-img-wrap .supplement,
#regular-mail .detail .supplement {
  margin: 20px 0;
}
#regular-mail .logo {
  max-width: 390px;
  margin-top: 100px;
  margin-bottom: 35px;
}
#regular-mail .text {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#regular-mail .white-box1 {
  border: 1px solid #fff;
  padding: 20px;
  margin: 30px auto;
  font-size: 14px;
}
#regular-mail .information p,
#regular-mail .information + p {
  margin-top: 20px;
}

@media screen and (max-width: 819px) {
  #regular-mail .sub-txt {
    font-size: 22px;
    line-height: 2;
  }
  #regular-mail .diagonal-title {
    font-size: 20px;
    gap: 10px;
    margin: 20px -5px;
  }
  #regular-mail .diagonal-title::before, #regular-mail .diagonal-title::after {
    width: 30px;
  }
  #regular-mail .regular-index {
    font-size: 20px;
    letter-spacing: 1px;
    margin: 20px auto;
  }
  #regular-mail .arrow {
    height: 75px;
  }
  #regular-mail .arrow::before {
    left: calc(50% - 30px);
    border: 30px solid transparent;
    border-top: 30px solid #fff;
    bottom: -110px;
  }
  #regular-mail .arrow::after {
    left: calc(50% - 13px);
    height: 40px;
    border-left: 26px solid #fff;
    top: 20px;
  }
  #regular-mail .u-mb15 {
    margin-bottom: 15px !important;
  }
  #regular-mail .fz50 {
    font-size: 30px;
    line-height: 1.2;
  }
  #regular-mail .fz50 + .c-title-ld {
    font-size: 20px;
  }
  #regular-mail .arrow-right {
    margin-top: -15px;
    min-width: auto;
  }
  #regular-mail .arrow-right::before, #regular-mail .arrow-right::after {
    height: 30px;
    margin: -30px 0 0 -10px;
  }
  #regular-mail .arrow-right::before {
    width: 94%;
    min-width: auto;
  }
  #regular-mail .arrow-right::after {
    border-right: 10px solid #fee30b;
    transform: skew(30deg);
  }
  #regular-mail p.date {
    font-size: 15px;
    margin: 10px auto 20px;
  }
  #regular-mail .store-information {
    max-width: 100%;
    margin: 0;
  }
  #regular-mail .Row.information {
    gap: 30px;
    justify-content: center;
  }
  #regular-mail .Row.information .Column--6 {
    max-width: 370px;
    margin: 0 auto;
  }
  #regular-mail .Row.information .c-img-wrap img {
    width: 335px;
    height: 220px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 100%;
    object-position: 0 100%;
  }
}
.map {
  margin: 0 auto;
  max-width: 790px;
}
.map iframe {
  width: 100%;
}

@media screen and (max-width: 819px) {
  .map {
    height: 220px;
    margin-top: 30px;
  }
  .map iframe {
    height: 100%;
  }
}
@media screen and (max-width: 819px) {
  img {
    max-width: 100%;
    height: auto;
  }
  .arban img {
    max-width: 100%;
  }
  .wrap.product-featurs .product-features2 {
    margin: 40px 0;
  }
  .accordion-box {
    padding: 0 20px;
  }
  .item1 {
    width: 66px;
    height: 66px;
    font-size: 40px;
  }
  .item2 {
    font-size: 16px;
    padding-right: 48px;
    margin-left: 20px;
  }
  .item2:after {
    right: 5px;
    width: 20px;
  }
  .item2 span {
    font-size: 22px;
  }
  .accordion-2 .item2,
  .accordion-3 .item2 {
    font-size: 22px;
  }
}
/* =================================================
   floating setting
  ================================================= */
.floating {
  display: none;
  display: none;
}
.floating .c-btn a {
  display: none;
  display: none;
}

@media screen and (max-width: 819px) {
  .floating {
    width: 100%;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
  }
  .floating .c-btn._type05 a {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    color: white;
    font-size: 18px;
    line-height: 1.2;
    padding: 1.5rem 2rem;
    background: #00bcd5;
  }
  .floating .c-btn._type05 a:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 819px) {
  .floating {
    display: block;
    width: 100%;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .floating .c-btn._type02 a {
    font-size: 20px;
    padding: 1rem 1.5rem;
  }
}
/* ================================================= 
  footer setting
================================================= */
footer #copyright {
  font-size: 12px;
  background-color: #38a0d2;
  color: white;
  text-align: center;
  padding: 15px;
}


.acuvue-max {
  max-width: 710px;
  margin: 170px auto 0;
  position: relative;
}
.acuvue-max .img_top {
  font-size: 35px;
  line-height: 52px;
  position: absolute;
  top: -100px;
  left: 20px;
  transform: rotate(-13deg);
}
.acuvue-max .img_top:before {
  content: "";
  width: 55%;
  height: 2px;
  background: #fff;
  display: block;
  transform: rotate(-7deg) translateY(-5px);
}
.acuvue-max .img_top:after {
  content: "";
  width: 55%;
  height: 2px;
  background: #fff;
  display: block;
  transform: rotate(7deg) translateY(7px);
}
.acuvue-max:before {
  content: "";
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 60px solid #fff;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
}

@media screen and (max-width: 819px) {
  .acuvue-max {
    margin-top: 130px;
  }
  .acuvue-max:before {
    border-top: 30px solid #fff;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
  }
  .acuvue-max .img_top {
    font-size: 20px;
    left: 10px;
    top: -70px;
    line-height: 1.8;
  }
}
#features .three-button {
  margin: 80px auto;
}
#features .three-button .button-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 10px 10px 20px;
  flex-wrap: wrap;
}
#features .three-button a {
  color: #fff;
  background-color: #051f4a;
  border-radius: 10px;
  width: 340px;
  max-width: 340px;
  padding: 20px 60px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 25px;
  text-decoration: none;
  position: relative;
}
#features .bg-blue {
  position: absolute;
  right: 15px;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 25px;
  right: 23px;
}
#features .bg-blue .btn-arrow {
  display: inline-block;
  vertical-align: middle;
  color: #051f4a;
  line-height: 1;
  width: 2px;
  height: 14px;
  background: #051f4a;
  position: absolute;
  top: 8px;
  left: 14px;
  border-radius: 3px;
}
#features .bg-blue .btn-arrow:before, #features .bg-blue .btn-arrow:after {
  content: "";
  width: 10px;
  height: 2px;
  display: inline-block;
  border-radius: 2px;
  background: #051f4a;
  position: absolute;
  bottom: calc(54% - 6px);
}
#features .bg-blue .btn-arrow::before {
  transform: rotate(135deg);
  right: -7px;
}
#features .bg-blue .btn-arrow::after {
  transform: rotate(45deg);
  right: -1px;
}

@media screen and (max-width: 819px) {
  #features .three-button {
    margin: -30px 0 50px;
  }
  #features .bg-blue {
    width: 15px;
    height: 15px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
  #features .bg-blue .btn-arrow {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 9px;
    width: 1px;
  }
  #features .c-title-md:first-child::before {
    margin-right: 10px;
  }
  #features .c-title-md:first-child::after {
    margin-left: 10px;
  }
  #features .three-button .button-row {
    gap: 10px;
    margin: 80px 0 20px;
  }
  #features .bg-blue .btn-arrow:before, #features .bg-blue .btn-arrow:after {
    width: 4px;
    height: 1px;
  }
  #features .bg-blue .btn-arrow::before {
    bottom: calc(50% - 3px);
    right: -3px;
  }
  #features .bg-blue .btn-arrow::after {
    bottom: calc(50% - 3px);
    left: -3px;
  }
}
#regular-mail h2.ribbon-ttl {
  line-height: 60px;
  position: relative;
  padding: 0 2rem;
  text-align: center;
  color: #0a7cc1;
  background: #fff;
  font-weight: bold;
  clip-path: polygon(0 0, 100% 0, 98% 51%, 100% 100%, 0 100%, 2% 50%);
}

@media screen and (max-width: 1200px) {
  #regular-mail h2.ribbon-ttl {
    font-size: 22px;
  }
}
@media screen and (max-width: 980px) {
  #regular-mail h2.ribbon-ttl {
    font-size: 18px;
  }
}
@media screen and (max-width: 819px) {
  #regular-mail h2.ribbon-ttl {
    line-height: 1.9;
    padding: 10px 0;
  }
}
@media screen and (max-width: 550px) {
  #regular-mail h2.ribbon-ttl {
    clip-path: polygon(0 0, 100% 0, 97% 53%, 100% 100%, 0 100%, 3% 49%);
    font-size: 16px;
  }
  #features .three-button a {
    width: 162px;
    font-size: 14px;
    padding: 15px 0px;
  }
}
.sub_hero {
  background-image: url(../../assets/images/bg-sub-hero.jpg);
  background-size: cover;
  background-position: top left;
  position: relative;
}
.sub_hero .sub_hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px;
}
.sub_hero img {
  margin: 0 auto 0 0;
  display: block;
  max-width: 600px;
  height: auto;
}

@media screen and (max-width: 819px) {
  .sub_hero {
    background-image: url(../../assets/images/bg-sub-hero-sp.jpg);
  }
  img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}
.arbancontactlens-wrap .grid-items {
  padding-top: 100px;
  max-width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width: 819px) {
  .arbancontactlens-wrap .grid-items {
    padding-top: 60px;
  }
}
.arbancontactlens-wrap .grid-items h2 {
  color: #051f4a;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.arbancontactlens-wrap .grid-items h2 span {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.arbancontactlens-wrap .grid-items h2 span:before, .arbancontactlens-wrap .grid-items h2 span:after {
  content: "";
  width: 20px;
  height: 3px;
  position: absolute;
  display: block;
  background: #051f4a;
}
.arbancontactlens-wrap .grid-items h2 span:before {
  left: -30px;
  top: 50%;
  transform: translate(0, -50%);
}
.arbancontactlens-wrap .grid-items h2 span:after {
  right: -30px;
  top: 50%;
  transform: translate(0, -50%);
}
.arbancontactlens-wrap .grid-items .items {
  display: grid;
  justify-content: center;
  gap: 30px;
  box-sizing: border-box;
  place-items: center;
}
.arbancontactlens-wrap .grid-items .items.three-columns {
  grid-template-columns: 255px 255px 255px;
  margin-top: 50px;
}
.arbancontactlens-wrap .grid-items .items.four-columns {
  grid-template-columns: 255px 255px 255px 255px;
  margin-top: 30px;
}
.arbancontactlens-wrap .grid-items .items figure {
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  display: inline-block;
  height: 220px;
  position: relative;
  display: grid;
  place-items: center;
}
@media screen and (max-width: 819px) {
  .arbancontactlens-wrap .grid-items .items figure {
    padding: 15px 8px 0;
    display: flex;
    flex-direction: column;
  }
}
.arbancontactlens-wrap .grid-items .items figure img {
  max-width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}
.arbancontactlens-wrap .grid-items .items figure figcaption {
  color: #051f4a;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  display: inline-block;
  margin-top: 10px;
}
@media screen and (max-width: 819px) {
  .arbancontactlens-wrap .grid-items .items figure figcaption {
    font-size: 16px;
  }
}
.arbancontactlens-wrap .grid-items .items figure figcaption span {
  position: unset;
  transform: unset;
  color: #051f4a;
  font-size: 9px;
  display: block;
  font-weight: normal;
  position: absolute;
}
.arbancontactlens-wrap .tel-bnr {
  width: 100%;
  display: block;
  margin-top: 50px;
}
.arbancontactlens-wrap .tel-bnr img {
  width: 100%;
  height: auto;
}

.map_logo {
  mix-blend-mode: multiply;
  max-width: 260px;
  margin: 0 auto 30px;
}

.map-accces {
  margin-top: 20px;
}
.map-accces img {
  width: 100%;
  height: auto;
}
.map-accces p {
  margin-top: 30px;
}
@media screen and (max-width: 819px) {
  .map-accces p {
    font-size: 18px;
  }
}

.adress {
  max-width: 570px;
  margin: 0px auto 40px;
}
.adress p {
  margin-top: 30px;
}
@media screen and (max-width: 819px) {
  .adress p {
    font-size: 18px;
  }
}
.adress p a {
  color: #0066cc;
  text-decoration: underline;
}
.adress .btn-tel {
  background: #38a0d2;
  color: #fff139;
  display: grid;
  width: 300px;
  margin: 40px auto 0;
  border-radius: 350px;
  padding: 15px 0;
  justify-content: center;
  text-align: center;
}
.adress .btn-tel span {
  font-size: 16px;
}
.adress .btn-tel strong {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}

.l-container._lg {
  padding: 0;
}

@media screen and (max-width: 1200px) {
  .arbancontactlens-wrap .grid-items .items.four-columns {
    grid-template-columns: 255px 255px 255px;
    place-items: center;
  }
}
@media screen and (max-width: 819px) {
  .arbancontactlens-wrap .grid-items h2 span:before, .arbancontactlens-wrap .grid-items h2 span:after {
    content: unset;
  }
  .arbancontactlens-wrap .grid-items .items.three-columns, .arbancontactlens-wrap .grid-items .items.four-columns {
    display: contents;
  }
  .arbancontactlens-wrap .grid-items .sp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 90%;
    margin: 50px auto;
    justify-content: center;
  }
  .arbancontactlens-wrap .grid-items .sp-grid figure.only {
    position: relative;
    left: 50%;
    transform: translateX(5%);
  }
  .tel-bnr {
    max-width: 90%;
    margin: 0 auto 50px;
  }
  .map {
    height: unset;
    margin-top: 30px;
  }
  .map iframe {
    height: 220px;
  }
  header img {
    max-width: 160px;
  }
  .l-container._lg {
    padding: 60px 20px;
  }
  .floating-little {
    display: block;
  }
  .scroll .floating-little a {
    opacity: 0;
    pointer-events: none;
  }
}
@media screen and (max-width: 550px) {
  #regular-mail {
    padding: 0;
  }
  .arbancontactlens-wrap .grid-items h2 {
    font-size: 22px;
  }
  .arbancontactlens-wrap .grid-items .sp-grid {
    margin: 30px auto;
  }
  .arbancontactlens-wrap .grid-items .items figure figcaption {
    font-size: 16px;
  }
  .arbancontactlens-wrap .grid-items .items figure figcaption span {
    left: 50%;
    transform: translate(-50%, 0px);
    width: 84%;
    white-space: nowrap;
  }
  .arbancontactlens-wrap .grid-items .items figure img {
    max-width: 60px;
    height: 70px;
  }
  .floating-little {
    display: block;
    width: 100%;
    position: fixed;
    top: unset;
    bottom: 0;
    z-index: 1;
  }
  .floating-little a {
    top: unset;
    right: 0px;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}
.notebottom {
  max-width: 90%;
  margin: 50px auto 0;
}

@media screen and (max-width: 819px) {
  .notebottom {
    max-width: 100%;
    margin: 50px auto 0;
  }
}
.youtube-wrap {
  padding: 85px 0;
  background-color: #ffffdb;
}
@media (max-width: 819px) {
  .youtube-wrap {
    padding: 36px 0;
  }
}
.youtube-wrap iframe {
  margin: 0 auto;
  display: block;
}
@media (max-width: 819px) {
  .youtube-wrap iframe {
    max-width: 90%;
    height: 188px;
  }
}

.section-newContact {
  padding: 100px 0;
  background: #e4ebf2;
}
@media (max-width: 819px) {
  .section-newContact {
    padding: 60px 0px;
  }
}
.section-newContact .section-newContact__inner {
  max-width: 850px;
  margin: 0 auto;
}
.section-newContact .section-newContact__inner .accordionSec01__trigger {
  background: #071f4a;
  color: #fff;
  cursor: pointer;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font-size: 30px;
  font-weight: 700;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner .accordionSec01__trigger {
    font-size: 20px;
    height: 60px;
    justify-content: flex-start;
    padding-left: 15px;
    max-width: 350px;
  }
}
.section-newContact .section-newContact__inner .accordionSec01__trigger:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 30px;
  height: 4px;
  background: #fff;
  transform: translateY(-50%) rotate(90deg);
  transition: all 0.3s ease;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner .accordionSec01__trigger:after {
    right: 10px;
  }
}
.section-newContact .section-newContact__inner .accordionSec01__trigger:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 30px;
  height: 4px;
  background: #fff;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner .accordionSec01__trigger:before {
    right: 10px;
  }
}
.section-newContact .section-newContact__inner .accordionSec01__trigger.active::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner .accordionSec01__panel {
    padding: 0 20px;
  }
}
.section-newContact .section-newContact__inner .accordionSec01__panel h2 {
  color: #071f4a;
  font-size: 40px;
  text-align: center;
  max-width: 730px;
  margin: 50px auto 30px;
  font-weight: 700;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner .accordionSec01__panel h2 {
    font-size: 25px;
    margin: 30px auto 20px;
  }
}
.section-newContact .section-newContact__inner .accordionSec01__panel p {
  font-size: 25px;
  max-width: 730px;
  margin: 0 auto;
  line-height: 1.5;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner .accordionSec01__panel p {
    font-size: 16px;
  }
}
.section-newContact .section-newContact__inner figure {
  margin: 30px auto 0;
}
.section-newContact .section-newContact__inner figure figcaption {
  text-align: center;
  font-size: 25px;
  color: #071f4a;
  line-height: 1.8;
  margin-top: 30px;
}
@media (max-width: 819px) {
  .section-newContact .section-newContact__inner figure figcaption {
    font-size: 16px;
    margin-top: 20px;
  }
}

@media (max-width: 819px) {
  .product-featurs > img {
    max-width: 90%;
  }
}
.arbancontactlens-adress .js-scrollable {
  max-width: 594px;
  margin: 50px auto 20px;
  overflow-y: hidden !important;
}
.arbancontactlens-adress .js-scrollable table {
  border: 1px solid #38a0d2;
  border-collapse: collapse;
  width: 594px;
}
.arbancontactlens-adress .js-scrollable thead {
  background: #41b9d0;
}
.arbancontactlens-adress .js-scrollable thead th {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border: 1px solid #38a0d2;
}
.arbancontactlens-adress .js-scrollable thead th:first-child {
  min-width: 180px;
}
.arbancontactlens-adress .js-scrollable tbody td {
  padding: 22px 16px;
  border: 1px solid #38a0d2;
  font-size: 16px;
  text-align: center;
  background: #fff;
}
.arbancontactlens-adress .js-scrollable tbody td:not(:first-child) {
  color: #41b9d0;
}

@media screen and (max-width: 819px) {
  footer {
    height: 115px;
  }
}/*# sourceMappingURL=style.css.map */