@charset "utf-8";

.main{
  margin-top:0;
}

.fv{
  height:calc(100vh + 7.5rem);
  padding:260px 0 0;
  position:relative;
  overflow:hidden;
}

.fv-txt{
  margin-left: 18%;
  position:relative;
  z-index:20;
}

.fv-txt h1{
  font-size:clamp(2rem, 1.333rem + 2.22vw, 4rem);
  letter-spacing: 6px;
  width: fit-content;
  margin-bottom:1rem;
  line-height:1.8;
}


/* strong内の文字だけオレンジの丸を付ける */
.fv-txt h1 strong .char::before {
  content: "";

  position: absolute;
  top: 0.1em;
  left: 50%;

  width: 0.14em;
  height: 0.14em;

  background: #FF8F2D;
  border-radius: 50%;

  transform: translateX(-50%);
}


@keyframes charFadeUp {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fv-txt p{
  line-height:2.5;
  font-size:clamp(0.75rem, 0.625rem + 0.42vw, 1.125rem);
}

.fv-img{
  position:absolute;
  width: 80%;
  right: -6%;
  top: 11%;
  z-index:1;
}

.fv-bg{
  position:absolute;
  width: 45%;
  left: -6%;
  top: 14%;
  z-index:2;
}

.fv-bottom{
  position:absolute;
  width: 30%;
  left: 10%;
  top: 60%;
  z-index:2;
}

.top-about{
  margin:7.5rem 0 0;
}

.top-about.feature-top .container {
  width:95%;
  margin:0;
  max-width:none;
}

.top-about .feature-top-wrap{
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5%;
  position: relative;
}

.top-about .feature-top-wrap::before{
  content:"";
  position:absolute;
  right:-10%;
  bottom:0;
  width:20%;
  opacity:0;
  aspect-ratio:361/224;
  transition:0.3s;
  background:url(https://asunosmile.com/system_panel/uploads/images/20260911102524636815.png) no-repeat center/contain;
}

.top-about .feature-top-wrap.fadeUp::before{
  right:0;
  opacity:1;
}

.top-about .feature-top-txt {
  width: fit-content;
}

.top-about .feature-top-txt .lower-fv-p{
  line-height:1;
  gap:20px;
}

.top-about .lower-fv-p::before,
.top-about .lower-fv-p::after{
  margin-top: 10px;
}

.top-about .feature-top-txt > p:nth-child(2){
  font-size:clamp(1.25rem, 0.833rem + 1.39vw, 2.5rem);
  text-align:center;
  margin-top: 2rem;
  line-height: 1.5;
  font-weight:500;
}

.top-about .feature-top-img {
  width: 56%;
}

.top-about-bottom{
  margin:10rem 0;
}

.feature-top .container {
  width: 85%;
  max-width: 1635px;
  margin-left: 10%;
}

.feature-top-txt .arrow-btn{
  margin:2rem 0 0;
}

.feature-top-txt .arrow-btn p{
  line-height:1;
}

.feature-top-txt > p:nth-child(2){
  font-weight:bold;
  font-size:clamp(0.875rem, 0.75rem + 0.42vw, 1.25rem);
  margin-top:3rem;
}

.feature-top-txt {
  width: 60%;
}

.feature-top-img {
  width: 38%;
}

.feature-top::before,
.feature-top-img::before {
  display:none;
}

.white-bg{
  padding:100px 0 5rem;
  background:#fff;
  position: relative;
  margin:10rem 0 5rem;
}

.white-bg::before{
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1920 / 26;
  background: url(https://asunosmile.com/system_panel/uploads/images/20260907152837215596.png) repeat-x left / contain;
  top: 0;
  left: 0;
}

.white-bg-title h2{
  text-align: center;
  font-size: clamp(1.25rem, 1.083rem + 0.56vw, 1.75rem);
}

.top-story-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1536px;
}

.top-story-txt{
  width:45%;
  text-align: center;
}

.top-story-txt .lower-title{
  margin-bottom:0;
}

.top-story-txt > p{
  line-height:2;
}

.top-story-txt h3{
  margin:2.5rem 0;
  font-size:clamp(1.25rem, 1rem + 0.83vw, 2rem);
}

.top-story-img{
  width:50%;
  position:relative;
}

.top-story-img::before{
  content: "";
  position:absolute;
  left: 2.5%;
  bottom: 0;
  width: 24%;
  aspect-ratio: 180 / 255;
  z-index:10;
  background: url(https://asunosmile.com/system_panel/uploads/images/20260909174506263146.png) no-repeat center / contain;
}

.voice-cta{
  background:#FFFBE8;
  justify-content: flex-start;
  margin: 3.5rem auto 5rem;
}

.voice-cta-img2{
  margin-top: auto;
  margin-left: auto;
}

.top-feature{
  margin:100px 0 7.5rem;
  position:relative;
  z-index:1;
}

.top-feature::before{
  content:"";
  position:absolute;
  aspect-ratio:469/304;
  background:url(https://asunosmile.com/system_panel/uploads/images/20260909171803854746.png) no-repeat center/contain;
  left:5%;
  bottom:0%;
  width:25%;
  z-index:-1;
}

.top-feature-after{
  position:absolute;
  right: -4%;
  bottom: 12%;
  width: 8%;
  opacity:0;
  transition:0.3s;
  z-index:-1;
}

.top-feature-after.fadeUp{
  right: 4%;
  opacity:1;
}


.top-feature .lower-title{
  margin-bottom:2.5rem;
}

.top-feature .lower-title + p{
  text-align:center;
  margin-bottom:2rem;
}

.top-feature .how-item{
  background:#FFE87A;
  padding:1.5rem 1.5rem 2.5rem;
  border-radius:50px;
}

.top-feature .how-item .label{
  margin-bottom:1rem;
  width:3rem;
  height:3rem;
  border-radius:999vh;
  background:#2E0000;
  color:#FFE87A;
  margin:0 auto 1rem;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top-feature .how-img {
  max-width: 350px;
  width: 100%;
}

.voice{
  margin-top:7.5rem;
}

.voice .container{
  background:#FFFBE8;
}

.guide-links {
  margin-top:7.5rem;
}

.guide-links .container{
  max-width:1180px;
}

.guide-links__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.guide-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 4px solid;
  border-radius: 10px;
  background: #fff;
  color: #351616;
  text-decoration: none;
  padding-bottom:1.5rem;
  transition: 0.3s ease;
}

.guide-card--faq {
  border-color: #51A7DD;
}

.guide-card--shop {
  border-color: #FF8F2D;
}

.guide-card__top {
  height: 32px;
}

.guide-card--faq .guide-card__top {
  background: #B3ECF2;
}

.guide-card--shop .guide-card__top {
  background: #FFE87A;
}

.guide-card__body {
  padding: 24px 36px 0px;
  text-align: center;
}

.guide-card__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom:1rem;
}

.guide-card__icon {
  width: 56px;
  height: 56px;
}

.guide-card__title {
  font-size: clamp(1.25rem, 1rem + 0.83vw, 2rem);
  font-weight: 500;
}

.guide-card--faq .guide-card__title strong{
  color:#51A7DD;
}

.guide-card--shop .guide-card__title strong{
  color:#FF8F2D;
}

.guide-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 24px auto 0;
  transition:0.3s;
}

.guide-card:hover {
  opacity:0.7;
}

.guide-card:hover .guide-card__arrow {
  transform:translateX(3px);
}

@media screen and (max-width: 1024px) {
  .guide-links__inner {
    gap: 28px;
  }

  .guide-card__body {
    padding: 22px 24px 20px;
  }

  .guide-card__icon {
    width: 52px;
    height: 52px;
  }

  .guide-card__title {
    font-size: 23px;
  }

  .guide-card__text {
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .guide-links__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .guide-card__top {
    height: 18px;
  }

  .guide-card__body {
    padding: 22px 18px 18px;
  }

  .guide-card__heading {
    gap: 12px;
  }

  .guide-card__icon {
    width: 48px;
    height: 48px;
  }

  .guide-card__title {
    font-size: 20px;
  }

  .guide-card__text {
    margin-top: 16px;
    font-size: 12px;
  }

  .guide-card__arrow {
    width: 38px;
    height: 38px;
    margin-top: 16px;
  }
}

.bottom{
  overflow:hidden;
}

.bottom-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2rem !important;
}

.bottom-left{
  width:47.5%;
}

.bottom-right{
  width:47.5%;
  padding:2.5rem;
  background:#fff;
  box-shadow:0px 3px 6px rgba(0,0,0,0.16);
  text-align: center;
  position: relative;
  border-radius:10px;
}
.bottom-right::before{
  content:"";
  position:absolute;
  width:90%;
  aspect-ratio:574/585;
  right:-40%;
  bottom:0;
  z-index:-10;
  background:url(https://asunosmile.com/system_panel/uploads/images/20260909152603214572.png) no-repeat center/contain;
}

.bottom-right h2{
  font-size:clamp(1.25rem, 1rem + 0.83vw, 2rem);
  margin: 8px auto 2rem;
  background-image: repeating-linear-gradient(90deg, #ff8f2d, #ff8f2d 3px, transparent 3px, transparent 13px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 3px;
  width: fit-content;
  padding-bottom: 10px;
}

.bottom-check{
  margin-top:20px;
  display: grid;
  gap: 20px;
}

.bottom-check-p{
  background:#FFFBE8;
  padding:24px;
  border-radius:10px;
}

.bottom-check-p p{
  max-width:380px;
  margin:0 auto;
  text-align:left;
  position:relative;
  padding-left:42px;
}

.bottom-check-p p::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:24px;
  aspect-ratio:1/1;
  background:url(https://asunosmile.com/system_panel/uploads/images/20260909151844853380.png) no-repeat center/contain;
}

.bottom-check-p p strong{
  color:#FF8F2D;
}

.bottom-circle{
  width:13px;
  position:absolute;
}

.bottom-circle-1{
  top:20px;
  left:20px;
}

.bottom-circle-2{
  top:20px;
  right:20px;
}

.bottom-circle-3{
  bottom:20px;
  left:20px;
}

.bottom-circle-4{
  bottom:20px;
  right:20px;
}

.guide-card p{
  line-height:1.5;
}

@media screen and (max-width: 1600px) {
  .top-feature-after.fadeUp {
    right: 1%;
  }
}

@media screen and (max-width: 1279px) {
  .fv{
    height: 100vh;
    padding: 200px 0 0;
    max-height:800px;
    min-height: 650px;
  }
  .fv-bottom{
    top:auto;
    bottom:5%;
  }
  .top-about .feature-top-wrap{
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .top-about.feature-top .container {
    width: 90%;
    margin: 0 auto;
  }
  .top-about .feature-top-img {
    width: 75%;
    margin: 0;
  }
  .feature-top-txt{
    width:100%;
  }
  .top-about-bottom {
    margin: 5rem 0 0;
  }
  .feature-top-img {
    width: 70%;
  }
  .bottom-wrap{
    flex-direction: column;
    gap: 2rem;
  }
  .bottom-left,
  .bottom-right{
    width:100%;
  }
}

@media screen and (max-width: 1024px) {
  .fv{
    padding: 160px 0 0;
    max-height:700px;
    height: 55vh;
    min-height: 550px;
  }
  .fv-txt {
    margin-left: 10%;
  }
  .fv-bottom{
    left:5%;
  }
  .fv-img{
    top:15%;
  }
  .top-story-wrap{
    flex-direction: column-reverse;
    gap: 2rem;
  }
  .top-story-img {
    width: 100%;
    max-width: 550px;
  }
  .top-story-txt{
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .guide-links__inner{
    grid-template-columns: repeat(1, 1fr);
  }
  .guide-card__arrow{
    margin:0 auto;
  }
}

@media screen and (max-width: 767px) {
  .fv-txt {
    margin-left: 5%;
  }
  .fv-img{
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin: 3rem 0 0;
  }
  .fv{
    height:auto;
    max-height: none;
    min-height: auto;
    padding: 120px 0 0;
  }
  .fv-txt h1{
    letter-spacing: 0px;
    line-height: 1.5;
  }
  .fv-txt p {
    line-height: 2;
  }
  .fv-bottom{
    margin:0 0 5rem 5%;
    position: relative;
    right: auto;
    top: auto;
    width: 76%;
    left: auto;
  }
  .fv-bg{
    left: -2%;
    top: 40%;
    z-index: 0;
  }
  .how {
    padding: 3rem 0 3rem;
  }
  .top-about {
    margin: 3.5rem 0 0;
  }
  .top-about .feature-top-img {
    width: 100%;
  }
  .top-about .feature-top-wrap::before{
    z-index: 10;
    bottom: -2rem;
    width: 100px;
  }
  .feature-top .container {
    width: 90%;
    margin-left: auto;
  }
  .feature-top-img {
    width: 100%;
  }
  .white-bg{
    padding: 4rem 0 5rem;
    margin: 4rem 0 4rem;
  }
  .top-story-txt h3 {
    margin: 1.5rem 0;
  }
  .news-main{
    width:90%;
    margin:0 auto;
  }
  .top-feature {
    margin: 4rem 0;
  }
  .top-feature .lower-title {
    margin-bottom: 1.5rem;
  }
  .top-feature-after,
  .top-feature::before{
    display:none;
  }
  .voice:has(.arrow-btn) h2 {
    margin: -2rem auto 1.5rem;
  }
  .guide-links {
    margin-top: 2.5rem;
  }
  .guide-card__icon {
    width: 32px;
    height: 32px;
  }
  .bottom-right{
    padding: 3rem 1rem;
  }
  .bottom-check-p p::before{
    width:18px;
    top: 2px;
  }
  .bottom-check-p p{
    padding-left: 32px;
  }
  .bottom-check-p{
    padding:1rem;
  }
  .main{
    margin-bottom:2rem;
  }

}