@charset "UTF-8";

:root {
  --color-primary-red: #F0021E;
  --color-red: #D80820;
  --color-pink: #FF485D;
  --color-orange: #FFBD6D;
  --color-light-orange: #FFEFD3;
  --color-light-pink: #FFE7E9;
  --color-light-blue: #DBF0FF;
  --color-bg-pink: #FFECEE;
  --color-bg-orange: #FFF0DF;
  --font-weight-bold: 700;
}

.main-box{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}

.pc-block{display: none;}

.font-color-red{ color: var(--color-primary-red); font-weight: var(--font-weight-bold);}

/* title関連 */
.support-title{
  position: relative;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.support-title.yellow{ margin:8rem 18% 0;}
.support-title.orange{ margin-bottom: 4rem;}

.support-title.orange span{font-weight: var(--font-weight-bold);}

.support-title::before,
.support-title::after {
  content: "";
  width: 18rem;
  height: 2.2rem;
  background-image: url(../img/customer-support-room/title_01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.support-title.orange::before,
.support-title.orange::after{
  background-image: url(../img/customer-support-room/title_02.svg);
}

.support-title.yellow::before,
.support-title.yellow::after{
  background-image: url(../img/customer-support-room/title_03.svg);
}

@media (max-width: 550px) {
.support-title{
  flex-direction: column-reverse;
  font-size: 2rem;
  padding-bottom: 2.2rem;
  letter-spacing: 0;
  margin: 0;
}

.support-title::before,
.support-title.orange::before,
.support-title.yellow::before{
  width: 10rem;
  height: 1.2rem;
}

.support-title::after,
.support-title.orange::after,
.support-title.yellow::after{ display: none;}

.support-title.yellow{ margin-top:6rem;}

}

/* support-intro */
.support-intro {
  position: relative;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-title {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.6;
  border-left: 0.5rem solid #6F1010;
  padding:1rem 0 1rem 2rem;
  margin-bottom: 2rem;
}

.support-main-title {
  margin: 0;
  width: 100%;
  display: block;
  position: relative;
}

.main-support-box{
  position: absolute;
  z-index: 10;
  top: 64%;
  margin: auto;
}

.main-support{
  display: flex;
  gap: 4rem;
}

/* 電話で相談 */
.main-support .call .sp-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
  text-decoration: none;
}

.main-support .call .sp-link .number-icon{
  position: relative;
  font-weight: var(--font-weight-bold);
  padding-left: 2.5rem;
  display: block;
}

.main-support .call .number{
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-red);
  display: block;
}

.main-support .call .sp-link .number-icon::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0.3rem;
  margin: auto;
  width: 2.4rem;
  height: 3.6rem;
  display: block;
  content: "";
  background: url(../img/customer-support-room/icon_16.svg) center center no-repeat;
}


/* メールで相談 */
.cta-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22rem;
  background: var(--color-pink);
  box-shadow: 0.3rem 0.3rem 0.4rem rgba(51, 51, 51, 0.4);
  text-decoration: none;
  border-radius: 2rem;
  cursor: pointer;
  border: 0.2rem solid transparent;
}

.cta-button:hover {
  opacity: 1;
  text-decoration: none;
  background: #fff;
  border: 0.2rem solid var(--color-pink);
}

.cta-button span{
  position: relative;
  color: #fff;
  padding-left: 3rem;
  font-weight: var(--font-weight-bold);
}

.cta-button span::before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2rem;
  height: 1.6rem;
  display: block;
  content: "";
  background: url(../img/customer-support-room/icon_17.svg) center center no-repeat;
}

.cta-button:hover span{ color: var(--color-pink);}

.cta-button:hover span::before { background: url(../img/customer-support-room/icon_17-pink.svg) center center no-repeat;}

/* お問い合わせテキスト */
.main-support-txt{
  margin-top: 2rem;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 550px) {
.pc-block{ display: block;}
.pc-block.txt{ display: inline-block; font-weight: var(--font-weight-bold);}

.main-support{
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.main-support-box{ top: 54%;}

.main-support .call .sp-link{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22rem;
  background: var(--color-red);
  box-shadow: 0.3rem 0.3rem 0.4rem rgba(51, 51, 51, 0.4);
  border-radius: 2rem;
  pointer-events: auto;
}

.main-support .call .number-icon,
.main-support .call .number{ color: #fff; font-size: 1.6rem;}
.main-support .call .number-icon{ margin-top: 1.6rem;}
.main-support .call .number{ margin-bottom: 1rem;}

.main-support .call .sp-link .number-icon::before  {
  top: 0;
  left: 0;
  bottom: 0.3rem;
  width: 1.5rem;
  height: 2.2rem;
  background: url(../img/customer-support-room/icon_16-white.svg) center center no-repeat;
}

.cta-button { padding: 2rem 0;}
.main-support-txt{ font-size: 1.4rem;}

}

/* support-problem */

.support_inner {
  padding: 8rem 1rem 0;
  text-align: center;
}

.support_inner.problem { background: linear-gradient(180deg, #F2F2F2 60%, #FFFFFF 100%);}


.support-problem__worry img {
  position: relative;
  z-index: 2;
  max-width: 60.6rem;
  width: 100%;
  margin: 4rem auto 0;
}

.support-problem__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 1.8rem;
}

.support-problem__lead p { text-align: center;}

.support-problem__lead .light-icon,
.support-counseling .light-icon{
  position: relative;
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 0.7rem 0 0.7rem 3.2rem;
}

.support-problem__lead .light-icon::before,
.support-counseling .light-icon::before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2.2rem;
  height: 3.4rem;
  display: block;
  content: "";
  background: url(../img/customer-support-room/icon_01.svg) center center no-repeat;
}

.support-problem__lead .under-line-txt span{
  font-size: 1.8rem;
  line-height: 1.6;
  background: linear-gradient(transparent 80%, var(--color-orange) 80%);
}

.support-problem__lead .large-txt{
  font-size: 2.4rem;
  line-height: 1.5;
}

.support-problem__lead .large-txt span strong{ font-size: 2.6rem;}

.support-problem__staff {
  position: relative;
  background: url(../img/customer-support-room/problem_image_01_pc.svg) bottom center no-repeat;
  background-size: 100%;
}

.support-problem__solution {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 100%;
  max-width: 54rem;
  margin: -8% 0 0;
  padding: 9% 2rem 0;
  box-sizing: border-box;
  background: url(../img/customer-support-room/bubble_pc.svg) top center no-repeat;
  background-size: 100%;
  aspect-ratio: 440/ 366;
}

.support-problem__staff .staff-img{
  position: relative;
  width: 56%;
  min-width: 48rem;
  height: auto;
  margin: -10% auto 0;
  display: block;
  z-index: 10;
}

@media (max-width: 550px) {

.support_inner { padding: 6rem 1rem 0;}
.support-problem__worry img { margin-top: 0;}

.support-problem__lead .light-icon{
  font-size: 1.2rem;
  padding-left:2.8rem;
}

.support-problem__staff {
  background: url(../img/customer-support-room/problem_image_01_sp.svg) bottom center no-repeat;
  background-size: 100%;
}

.support-problem__solution {
  background: url(../img/customer-support-room/bubble_sp.svg) top center no-repeat;
  background-size: 100%;
  margin-top: -10%;
}

.support-problem__lead { gap: 1rem;}

.support-problem__lead .under-line-txt span { font-size: 1.5rem;}

.support-problem__lead .large-txt {
  font-size: 1.8rem;
  margin-top: 1rem;
}

.support-problem__lead .large-txt span strong { font-size: 2rem;}

.support-problem__staff .staff-img{
  width: 80%;
  min-width: auto;
}

}

/* support-merit */
.font-color-red.large{ font-size: 2.8rem; font-weight: var(--font-weight-bold);}

.support_inner.merit{ background: var(--color-light-orange); padding-bottom: 8rem;}

.merit-list{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  max-width: 73rem;
  column-gap: 5rem;
  row-gap: 4rem;
  margin: auto;
}

.merit-list li { display: flex;}

.merit-list::before {
  content: "";
  position: absolute;
  background:  url(../img/customer-support-room/dotted_01.svg) center center repeat;
  top: 47%;
  width: 99%;
  height: 0.3rem;
}

.merit-list::after {
  content: "";
  position: absolute;
  background:  url(../img/customer-support-room/dotted_02.svg) center center repeat;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0.3rem;
  height: 100%;
}

.merit-list-box{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 34rem;
  height: auto;
  min-height: 37rem;
  padding: 0 2.5rem 2.5rem;
  background: #FFFFFF;
  border-radius: 2rem;
}

@media (max-width: 985px) {
.merit-list::before,
.merit-list::after{display: none;}

.merit-list li .merit-list-box::after{
  content: "";
  position: absolute;
  background:  url(../img/customer-support-room/dotted_01.svg) center center repeat;
  bottom: -2rem;
  width: 85%;
  height: 0.3rem;
}

.merit-list li:last-child .merit-list-box::after{background: none;}
}

@media (max-width: 550px) {

.merit-list{
  margin: 0 2%;
  background: #FFFFFF;
  border-radius: 2rem;
  padding: 2.7rem 0 2rem;
}

.merit-list-box{
  background: none;
  border-radius: 0;
}
}

.merit-list-box .merit-number{
  position: relative;
  z-index: 2;
  margin-top: 0.7rem;
}

.merit-list-box .merit-title{
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
  line-height: 1.5;
  width: 29rem;
  font-weight: var(--font-weight-bold);
  padding: 4rem 1rem;
  background: var(--color-bg-pink);
  border-radius: 2rem;
  margin: -1em auto 5rem;
}

.merit-list-box .merit-title::after{
  position: absolute;
  content: "";
  left: 11rem;
  bottom: -3.5rem;
  margin: auto;
  width: 6.6rem;
  height: 7.7rem;
  background: url(../img/customer-support-room/icon_02.svg) center center no-repeat;
}

.merit-list-box .merit-title.title-02::after{ background: url(../img/customer-support-room/icon_03.svg) center center no-repeat;}
.merit-list-box .merit-title.title-03::after{ background: url(../img/customer-support-room/icon_04.svg) center center no-repeat;}
.merit-list-box .merit-title.title-04::after{ background: url(../img/customer-support-room/icon_05.svg) center center no-repeat;}


.merit-list-box .merit-txt{
  line-height: 1.5;
  text-align: left;
  margin-bottom: auto;
}

.merit-list-box .merit-txt a{
  display: inline-block;
  margin-top: 2rem;
  border-bottom: 0.1rem solid var(--color-red);
  text-decoration: none;
}

.merit-list-box .merit-txt a:hover{color: var(--color-red);}

.merit-list-box .merit-txt a:visited {color: var(--color-red);}

/* support-counseling */
.counseling-back{background: url(../img/customer-support-room/hearing_image_01_sp.svg) no-repeat center center / cover;}
.counseling-back.back-02{background: url(../img/customer-support-room/hearing_image_02_sp.svg) no-repeat center center / cover;}

@media (min-width: 910px) {
.counseling-back{ background-image: url(../img/customer-support-room/hearing_image_01_pc.svg);}
.counseling-back.back-02{ background-image: url(../img/customer-support-room/hearing_image_02_pc.svg);}
}

.counseling-title-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.counseling-title-box img{
  max-width: 19rem;
  margin: 4rem 0 0 7rem;
  height: auto;
}

.counseling-back.back-02 .counseling-title-box img{
  max-width: 21rem;
  margin: 6rem 0 0 7rem;
  height: auto;
}

@media (min-width: 910px) {
.counseling-title-box{ gap: 3rem;}

.counseling-title-box img{
  max-width: 24rem;
  margin: 5.7rem 0 0 6rem;;
}

.counseling-back.back-02 .counseling-title-box img{
  max-width: 29rem;
  margin: 8rem 0 0 10rem;
}
}

.support-title-dotted{
  display: inline-block;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: var(--font-weight-bold);
  text-align: center;
  padding: 1rem 0;
  border-top:0.6rem dotted var(--color-orange);
  border-bottom:0.6rem dotted var(--color-orange);
}

.support-title-dotted .font-color-red{font-size: 2.4rem;}

.main-support-box.counseling{
  position: static;
  padding: 6rem 0;
  background: var(--color-light-pink);
}

.main-support-box.counseling .main-support{ justify-content: center;}

.counseling-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
}

.counseling-list .light-icon{
  font-size: 1.6rem;
  padding-bottom: 1rem;
  margin-top: 6rem;
  position: relative;
}

.counseling-list .light-icon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% + 1.1rem);
  transform: translateX(-50%);
  width: 3.4rem;
  height: 0.4rem;
  background-color: var(--color-orange);
}

.counseling-list ul {
  display: grid;
  grid-template-columns: repeat(4, 17.5rem);
  gap: 3rem;
  justify-content: center;
  margin: 0 4% 4rem;
}

.counseling-list ul li {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
  text-align: center;
  background: #fff;
  border: 0.4rem solid var(--color-orange);
  box-sizing: border-box;
}

@media (max-width: 1130px) {
  .counseling-list ul {
    grid-template-columns: repeat(2, 17.5rem);
  }
}

@media (max-width: 550px) {
  .counseling-list ul {
    grid-template-columns: repeat(2, 16rem);
    column-gap: 1.4rem;
    row-gap: 1.1rem;
  }
}

.counseling-list-inner{
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 50%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}

.counseling-list ul li p{
  line-height: 1.5;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: 1.4rem;
}

@media (min-width: 910px) {
.counseling-list ul li p { font-size: 1.6rem;}
}

.counseling-list ul li img{
  width: 4rem;
  height: 4.3rem;
}

/* support-comment */
.support-comment .comment-list{
  margin: 4rem 4% 10rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.support-comment .comment-list-box{
  display: flex;
  gap: 1.6rem;
  padding: 2rem;
  align-items: center;
  width: 100%;
  max-width: 26.3rem;
  background: var(--color-light-blue);
  border-radius: 2rem;
}

.support-comment .comment-list-box.orange{ background: var(--color-bg-orange);}
.support-comment .comment-list-box.pink{ background: var(--color-bg-pink);}

.support-comment .comment-list-box img{
  width: 8rem;
  height: 8rem;
}

@media (max-width: 550px){
.support-comment .comment-list{ margin: 2rem 5% 6rem;}

.support-comment .comment-list-box{max-width: 100%;}
}