@charset "utf-8";

/*================================================
  himawari-consultation
================================================*/
.content-title::after {
  background-color: var(--color-himawari);
}

/*read*/

.read-img-title {
  max-width: 588px;
}

.read-pic {
  opacity: 0.2;
}
.read-pic-svg {
  mask-image: url(../../image/himawari-consultation/read_pic.jpg);
	-webkit-mask-image:url(../../image/himawari-consultation/read_pic_path.svg);
}

.read-text {
  font-size: clamp(1.4rem, 1.28rem + 0.6vw, 2rem);
  max-width: 660px;
}
.read-text + .read-text {
  margin-top: 2em;
}

@media print, screen and (min-width: 769px) {
  .read-pic {
    max-width: 560px;
  }
}
@media print, screen and (min-width: 1020px) {
  .read-pic {
    opacity: 1;
  }
}

/*------------------------------------------------
  about-himawari
------------------------------------------------*/
.about-himawari-inner {
  max-width: 1160px;
  margin:calc(var(--layout-gap)/1.5) auto;
  background-color: var(--color-white);
  padding:calc(var(--layout-gap)/1.5);
  border-radius: 30px;
  box-shadow: 0 0 20px -10px rgba(var(--color-black-rgb), 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.about-himawari-pic {
  margin-bottom: 2em;
}
.about-himawari-pic > img.for-side{
  display: none;
}
.about-himawari-title {
  font-size: 1.5em;
  display: block;
  font-weight: 900;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.about-himawari + .page-link {
  margin-top: 0;
}


@media print, screen and (min-width: 560px) {
  .about-himawari-inner {
    padding:calc(var(--layout-gap)/1.25);
  }
  .about-himawari-pic {
    width: 15%;
    max-width: 140px;
    margin-bottom: 0;
  }
  .about-himawari-pic > img.for-vertical {
    display: none;
  }
  .about-himawari-pic > img.for-side {
    display: block;
  }
  .about-himawari-text {
    width: calc(85% - 2em);
    line-height: 2;
    font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.8rem);
    font-weight: 700;
  }

}

@media print, screen and (min-width: 1200px) {
  .about-himawari.section-container {
    padding-top:0;
    padding-bottom: 0;
  }
  .about-himawari-inner {
    padding: 60px;
    margin: calc(var(--layout-gap) * 2.5) auto;
  }
  .about-himawari-title {
    font-size: 1.75em;
  }
}


/*================================================
  service-detail
================================================*/
/*------------------------------------------------
  service-detail
------------------------------------------------*/

.service-detail {
  /* background-color: var(--color-beige); */
  position: relative;
}

.service-detail.section-top-round::before {
  background-color: var(--color-beige);
}

.service-detail-list {
  margin-top: var(--layout-gap);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-detail-item {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.service-detail-item-number {
  background-image: url(../../image/himawari-consultation/dotted01.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  font-size: clamp(2.4rem, 1.92rem + 2.4vw, 4.8rem);
  margin-left: -0.5em;
  position: relative;
}
.service-detail-item-number > span {
  color: var(--color-white);
  font-weight: 700;
  display: block;
  line-height: 1;
  text-align: center;
  font-size: 0.8em;
}
.service-detail-item-detail {
  background-color: var(--color-white);
  border-radius: 20px;
  padding:calc(var(--layout-gap)/1.5);
  width: calc(100% - 60px);
}
.service-detail-item-detail p {
  font-size: clamp(1.4rem, 1.28rem + 0.6vw, 2rem);
  font-weight: 700;
  line-height: 1.75;
}

@media print, screen and (min-width: 769px) {
  .service-detail-list {
    margin-top: calc(var(--layout-gap)*1.5);
    /* gap: 40px; */
  }
  .service-detail-item-number {
    width: 100px;
    height: 100px;
    margin-left: 0;
  }
  .service-detail-item-detail {
    padding:var(--layout-gap);
    max-width: 1020px;
    width: calc(100% - 140px);
  }
}
@media print, screen and (min-width: 960px) {
  .service-detail-item-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:var(--layout-gap) var(--layout-gap) var(--layout-gap) calc(var(--layout-gap)*1.5);
  }
}
@media print, screen and (min-width: 1600px) {
  .service-detail-item-detail p {
    line-height: 1.2;
  }
}

/*================================================
  use
================================================*/

/*------------------------------------------------
  use
------------------------------------------------*/
.use {
  /* background-color: var(--color-white); */
  background-color: var(--color-beige);
  position: relative;
}

.use.section-top-round::before {
  background-color: var(--color-white);
}


.use .content-title {
    margin: 4em 0 2em;
}
.use-text.emphasis {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.52rem + 0.4vw, 2rem);
}

.use-text > span.emphasis {
  color: var(--primary-color);
}

.use-text + .use-text,
.use-text + .use-notes {
  margin-top: 2em;
}

.use-notes {
  background-color: var(--color-light-beige);
  border-radius: 20px;
  padding:calc(var(--layout-gap)/2);
}
.use-notes > span {
  margin-left: 1.5em;
  line-height: 1.5;
  display: block;
}
.use-notes > span::before {
  content: "※";
  display: inline-block;
  text-indent: -1.5em;
  line-height: 1.5;
}

@media print, screen and (min-width: 769px) {
  .use-notes {
    padding: calc(var(--layout-gap)/1.5) calc(var(--layout-gap)/1.25);
  }
}

/*------------------------------------------------
  point
------------------------------------------------*/

.point-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: 880px;
  margin:calc(var(--layout-gap)*1.5) auto;
}
.point-list::before {
  content: "";
  display: block;
  border-top: 2px dotted var(--color-brown);
  width: 90%;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  position: absolute;
}
.point-item {
  width: calc(100% / 3 - calc(var(--layout-gap)/4));
  max-width: 160px;
  position: relative;
}
.point-item::before {
  content: "";
  display: block;
  border-bottom:6px solid var(--color-brown);
  width: 80px;
  border-radius: 3px;
  transform: rotate(-45deg);
  position: absolute;
  left: -5px;
  bottom: 32.5px;
  z-index: 0;
}

.point-item-label {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  background-color: var(--primary-bg-color);
  border-radius: 50%;
  align-content: center;
  justify-content: center;
  text-align: center;
  position: relative;
  margin: auto;
}

.point-item-label .label-type {
  color: var(--color-light-brown);
  font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.8rem);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  width: 100%;
}
.point-item-label .label-name {
  color: var(--color-brown);
  font-size: clamp(1.2rem, 1rem + 1vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
}
.point-item-label .label-notes {
  color: var(--color-light-brown);
  font-size: clamp(1.2rem, 1.16rem + 0.2vw, 1.4rem);
  width: 100%;
}


@media print, screen and (min-width: 769px) {
  .point-item {
    max-width:180px;
  }
}

@media print, screen and (min-width: 960px) {
  .point-item {
    max-width:200px;
  }
}


/*------------------------------------------------
  service-flow
------------------------------------------------*/

.service-flow-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap:calc(var(--layout-gap)*2);
  margin: calc(var(--layout-gap)*1.5) 0;
}

.service-flow-item {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.service-flow-item-number {
  background-image: url(../../image/himawari-consultation/dotted02.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  font-size: clamp(2.4rem, 1.92rem + 2.4vw, 4.8rem);
  /* margin-left: -0.5em; */
  position: absolute;
  top: -0.5em;
  left: -0.55em;
  z-index: 1;
}
.service-flow-item-number > span {
  color: var(--color-white);
  font-weight: 700;
  display: block;
  line-height: 1;
  text-align: center;
  font-size: 0.8em;
}
.service-flow-item-detail {
  /* background-color: var(--color-white); */
  align-items: flex-start;
  border-radius: 20px;
  width: calc(100% - 2.5em);
  position: relative;
  top: 0;
  margin-left: auto;
  z-index: 0;
}

.service-flow-item-img {
  border-radius: 20px;
  border: 2px solid var(--color-light-beige);
  overflow: hidden;

}
.service-flow-item-title {
  font-weight: 700;
  /* font-size: clamp(1.2rem, 1rem + 1vw, 2.2rem); */
  font-size: clamp(1.6rem, 1.48rem + 0.6vw, 2.2rem);
  margin: 1em 0;
}

.service-flow-item-text {
  font-size: clamp(1.2rem, 1.12rem + 0.4vw, 1.6rem);
}

@media print, screen and (min-width: 769px) {
  .service-flow-list {
    gap: calc(var(--layout-gap)*3.5);
  }
  .service-flow-item-number {
    width: 100px;
    height: 100px;
    margin-left: 0;
  }
  .service-flow-item-detail {
    max-width: 1080px;
    width: calc(100% - 60px);
    display: flex;
    justify-content: space-between;
  }

  .service-flow-item-img {
    width: 25%;
    /* max-width: 220px; */
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .service-flow-item-img > img {
    height: 100%;
    width: auto;
  }
  .service-flow-item-inner {
    width: calc(75% - calc(var(--layout-gap)*1));
    justify-content: space-between;
  }
  .service-flow-item-title {
    margin: 0 0 1em 0;
  }
}

@media print, screen and (min-width: 1200px) {
  .service-flow-item-inner {
    width: calc(100% - 280px);
    max-width: 800px;
  }
  .service-flow-item-img {
    width: 220px;
  }
}

@media print, screen and (min-width: 1600px) {
  .service-flow-item-number {
    left: 0;
  }
}

/*timeline 調整*/
.service-flow-list::before {
  content: "";
  display: block;
  background-image: url(../../image/common/timeline.svg);
  background-position: top -7px center;
  background-size: 50%;
  background-repeat: repeat-y;
  height: calc(100% - 5px);
  width: 5px;
  position: absolute;
  left: 16px;
  top:5px;
  z-index: 0;
}

.service-flow-item:last-of-type::before {
  content: "";
  display: block;
  background-color: var(--color-white);
  height: 100%;
  width: 5px;
  position: absolute;
  left: 16px;
  top:0;
  z-index:0;
}

@media print, screen and (min-width: 769px) {
  .service-flow-list::before {
    left: 26px;
    background-size: 100%;
  }

  .service-flow-item:last-of-type::before {
    left: 26px;
  }
}

@media print, screen and (min-width: 1600px) {
  .service-flow-list::before {
    left: 48px;
  }
  .service-flow-item:last-of-type::before {
    left: 48px;
  }
}

/*------------------------------------------------
  service-flow-item-notes
------------------------------------------------*/
.service-flow-item-notes {
  background-color: var(--color-light-beige);
  border-radius: 20px;
  padding:calc(var(--layout-gap)/1.5);
  margin-top: 2em;
}

.service-flow-item-notes:has(.service-flow-item-notes-title) {
  padding: calc(var(--layout-gap)*1.75) calc(var(--layout-gap)/1.5) calc(var(--layout-gap)/1.5);
  position: relative;
}

.service-flow-item-notes-title {
  position: absolute;
  color: var(--color-white);
  background-color: var(--color-brown);
  padding: 0.75em 1.5em;
  top: 0;
  left: 0;
  font-size: clamp(1.6rem, 1.52rem + 0.4vw, 2rem);
  line-height: 1;
}

.service-flow-item-notes > span {
  margin-left: 1.5em;
  line-height: 1.5;
  display: block;
  font-size: clamp(1.2rem, 1.12rem + 0.4vw, 1.6rem);
}
.service-flow-item-notes > span + span {
  margin-top: 0.5em;
}
.service-flow-item-notes > span::before {
  content: "※";
  display: inline-block;
  text-indent: -1.5em;
  line-height: 1.5;
}

@media print, screen and (min-width: 769px) {
  .service-flow-item-notes {
    padding:calc(var(--layout-gap)/1.25);
  }
  .service-flow-item-notes:has(.service-flow-item-notes-title) {
    padding: calc(var(--layout-gap)*1.75) calc(var(--layout-gap)/1.25) calc(var(--layout-gap)/1.25);
  }
}

@media print, screen and (min-width: 1200px) {
  .service-flow-item-notes {
    padding:calc(var(--layout-gap)/1.25) var(--layout-gap);
  }
  .service-flow-item-notes:has(.service-flow-item-notes-title) {
    padding: calc(var(--layout-gap)*2) var(--layout-gap) var(--layout-gap);
  }
}

@media print, screen and (min-width: 1600px) {
  .service-flow-item-notes {
    padding:var(--layout-gap) ;
  }
  .service-flow-item-notes:has(.service-flow-item-notes-title) {
    padding: calc(var(--layout-gap)*2.5)  calc(var(--layout-gap)*1.5)  var(--layout-gap) ;
  }
}

/*------------------------------------------------
  square-icon
------------------------------------------------*/

.detail-list.square-icon {
  margin:0 0 1.5em 1.5em;
}

.detail-list.square-icon li {
  color: var(--color-brown);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.8rem);
  line-height: 1.5;
  margin: 0.5em 0;
}
.detail-list.square-icon li::before {
  content: "■";
  display: inline-block;
  text-indent: -1.5em;
  line-height: 1.5;
}

/*------------------------------------------------
case
------------------------------------------------*/

.case-label {
  display: block;
  color: var(--color-brown);
  background-color: var(--color-white);
  border: 1px solid var(--color-brown);
  padding: 0.5em 1em;
  font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.8rem);
  margin-bottom: 1em;
  font-weight: 700;
}

.case-type > p {
  font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.8rem);
}

.case-type + .case-type {
  margin-top: 2em;
}
.case-type > .case-label {
  position: relative;
  display: block;
  text-align: center;
}
.case-type > .case-label::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1.75em;
  right: 50%;
  transform: translateX(50%);
  border-style: solid;
  border-width:0.75em 1em;
  border-color: var(--color-brown) transparent transparent transparent;
}

.case-type span.emphasis {
  font-weight: 700;
}

@media print, screen and (min-width: 769px) {
  .case-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .case-type > .case-label {
    width: calc(16em + 2px);
    text-align: center;
    margin-bottom: 0;
  }
  .case-type > p {
    width: calc(100% - 19em);
    line-height: 1.5;
  }
  .case-type > .case-label::after {
    bottom: 50%;
    transform: translateY(50%);
    border-color: transparent transparent transparent var(--color-brown);
    right: -3em;
    border-width: 0.75em 1em;
  }
}



/*------------------------------------------------
  pdf-dl
------------------------------------------------*/
/*pdf-dl*/
.pdf-dl {
  background-image: url(../../image/himawari-consultation/pdf_dl_bg.jpg);
}
.pdf-link-item > a::after {
  background-image: url(../../image/common/icon_pdf_himawari.svg);
}
.pdf-link-item > a {
  color: var(--color-brown);
}

.pdf-link-item > a:hover {
  background-color: var(--color-brown);
}