@charset "utf-8";
:root {
  --c_bl:#508bff;
  --c_gr:#33ba75;
  --c_rd:#e40000;
	--fz:clamp(8.5px,0.6756756vw,10px);
}
#chat-widget-container {
  opacity: 1!important;
  pointer-events: all!important;
}
section {
	font-size: var(--fz);
}
.l-inner {
  max-width: 125em;
}
.unit-wrapper:has(#p-aichat) .unit-base {
  max-width: 100%!important;
}
.unit-wrapper:has(#p-aichat) .copy-0002 {
  margin: 0!important;
}
.unit-wrapper:has(#p-aichat) {
  overflow: hidden;
}
.inner {
  max-width: 116.5em;
}
.p-aichat__fv {
  background: url(../img/ai_chat/fv_bg.jpg) bottom center no-repeat;
  background-size: cover;
  padding-top: 7em;
}
.p-aichat__ttl {
  text-align: center;
}
.p-aichat__ttl .eng {
  font-size: 6.4em;
  font-weight: 500;
  margin-bottom: 5px;
}
.p-aichat__ttl h1 {
  font-size: 1.8em;
  font-weight: 500;
  color: #3b3b3b;
}
.p-aichat__concierge {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.p-aichat__concierge__txt {
  position: absolute;
  top: 18%;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: 1;
  width: 43.261%;
  max-width: 50.4em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2em;
  aspect-ratio: 504/165;
  padding: 1em;
  background: rgba(80,137,212,.2);
  background: linear-gradient(0deg,rgba(255,255,255,.2) 0%,rgba(80,137,212,.1) 100%);
  border: 4px solid rgba(255,255,255,.3);
  border-radius: 2em;
  box-shadow: 8px 8px 8px rgba(80,137,212,.2);
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/ai_chat/txt_item01.png) center center no-repeat;
    background-size: contain;
    aspect-ratio: 88/62;
    width: 4em;
  }
  &::before {
    top: -1.5em;
    left: 4em;
  }
  &::after {
    bottom: -1.5em;
    right: 4em;
    transform: rotate(180deg);
  }
  h2 {
    width: 42%;
  }
  p {
    width: 52.777%;
  }
}
.p-aichat__btnWrap {
  background: #0E0E0E url(../img/ai_chat/ai_body_bg.jpg) center center no-repeat;
  background-size: cover;
  border-top: 3px solid var(--c_rd);
  border-bottom: 3px solid var(--c_rd);
  position: relative;
  padding: 3em 0;
}
.p-aichat__btnArea {
	background: url(../img/ai_chat/ai_btn_bg.png) center center no-repeat;
	background-size: contain;
	aspect-ratio: 1;
  width: 33.76%;
	max-width: 42.2em;
	margin: 0 auto;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 50%;
	box-shadow: 0 1em 2em rgba(0,0,0,.1);
}
.p-aichat__btn {
	overflow: hidden;
	z-index: 5;
	aspect-ratio: 1;
	width: 45.51%;
	border-radius: 50%;
	transition: .2s;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}
.p-aichat__btn::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background: url(../img/ai_chat/ai_btn.png) center center no-repeat;
	background-size: contain;
	transform: rotate(0deg) scale(1.01);
	transition: filter .4s .2s,
	transform .28s .2s cubic-bezier(.68,.03,.31,.94);
}
.p-aichat__btn:hover::before  {
	filter: brightness(1.3) grayscale(1);
	transform: rotate(405deg) scale(1.01);
}
.p-aichat__btn ._txt {
	width: 60%;
	position: relative;
	z-index: 1;
}
.p-aichat__btn ._txt img {
	display: block;
	width: 100%;
	height: auto;
}
.p-aichat__btn__txt {
  max-width: 91.8em;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.p-aichat__btn__txt li {
  width: 19.825%;
}
.p-aichat__btn__txt li:nth-of-type(2) {
  width: 23.638%;
  margin-top: 4em;
}
.p-aichat__howto {
  padding: 8em 0 14em;
  background: #edeff1;
  background: linear-gradient(0deg,#edeff1 0%,#fff 100%);
}
.p-aichat__howto .l-inner {
  max-width: 92em;
}
.p-aichat__howto__ttl {
  position: relative;
  text-align: center;
  max-width: 85em;
  margin: 0 auto;
  padding: 5.5em 0 4em;
  background: url(../img/ai_chat/howto_ttl_bg.png) left center no-repeat;
  background-size: contain;
}
.p-aichat__howto__ttl .eng {
  font-size: 5.4em;
  font-weight: 500;
}
.p-aichat__howto__ttl h2 {
  font-size: 1.8em;
  font-weight: 400;
  color: #3b3b3b;
}
.p-aichat__howto__ttl figure {
  position: absolute;
  top: 0;
  &:nth-of-type(1) {
    left: 10%;
    max-width: 9.8em;
  }
  &:nth-of-type(2) {
    right: 10%;
    max-width: 10.8em;
  }
}
.p-aichat__howto__ttl + .txt {
  font-size: 2em;
  text-align: center;
  margin-bottom: 3em;
}
.p-aichat__howto__lead {
  background: url(../img/ai_chat/howto_lead_bg.jpg) left top no-repeat;
  background-size: cover;
  position: relative;
  text-align: center;
  font-size: 1.8em;
  padding: 3.333em 10px 2.777em;
  border-radius: 2.2222em;
  margin-bottom: 6.6666em;
}
.p-aichat__howto__lead figure {
  position: absolute;
  border-radius: 1.666em;
  &:nth-of-type(1) {
    top: -1.666em;
    left: -2.222em;
    max-width: 5.833em;
  }
  &:nth-of-type(2) {
    bottom: 2.222em;
    right: -3.333em;
    max-width: 7.27em;
  }
}
.p-aichat__howto__lead ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .888em 2.222em;
  margin-bottom: 1.666em;
}
.p-aichat__howto__lead ul li {
  border: 1px solid var(--c_bl);
  color: var(--c_bl);
  position: relative;
  border-radius: 100px;
  font-size: 1.222em;
  font-weight: 700;
  padding: 5px 20px 3px;
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/ai_chat/txt_item01.png) center center no-repeat;
    background-size: contain;
    aspect-ratio: 88/62;
    width: 1.27em;
  }
  &::before {
    top: -.464em;
    left: .535em;
  }
  &::after {
    bottom: -.464em;
    right: .535em;
    transform: rotate(180deg);
  }
}
.p-aichat__howto__list {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  position: relative;
  z-index: 1;
}
.p-aichat__howto__wrap {
  max-width: 40em;
  position: relative;
  &:nth-of-type(2) {
    max-width: 35em;
    margin-top: 10em;
  }
}
.p-aichat__howto__item {
  + .p-aichat__howto__item {
    margin-top: 4.5em;
  }
  dt {
    position: relative;
    z-index: 1;
    padding-bottom: 4.5em;
  }
  dd {
    background: #fff;
    padding: 2.35em;
    border-radius: 30px;
    box-shadow: 0 0 15px rgba(99,84,237,.15);
    position: relative;
    font-size: 1.7em;
    z-index: 1;
    .ttl {
      font-size: 1.17em;
      margin-bottom: 1em;
    }
    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      background: url(../img/ai_chat/txt_item01.png) center center no-repeat;
      background-size: contain;
      aspect-ratio: 88/62;
      width: 2.35em;
    }
    &::before {
      top: -.8333em;
      left: 2.35em;
    }
    &::after {
      bottom: -.8333em;
      right: 2.35em;
      transform: rotate(180deg);
    }
  }
}
.p-aichat__howto__item._03 dd::after,
.p-aichat__howto__item._04 dd::after {
  background-image: url(../img/ai_chat/txt_item02.png);
  aspect-ratio: 132/34;
  width: 3.882em;
  bottom: -.5em;
  right: 2.352em;
}
.p-aichat__howto__item__ttl {
  position: relative;
  background: var(--c_gr);
  border-radius: 30px;
  padding: 1em 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: left;
  font-size: 2em;
  font-weight: 700;
  width: fit-content;
  &::before {
    content: "";
    display: block;
    mask: url(../img/ai_chat/baloon.svg) top left no-repeat;
    mask-size: contain;
    background: var(--c_gr);
    aspect-ratio: 21/11;
    width: 1.05em;
    position: absolute;
    top: 99.9%;
    left: 15%;
  }
  &._02::before,
  &._04::before {
    background: var(--c_bl);
    left: auto;
    right: 25%;
    transform: scale(-1,1);
  }
  &._01 {
    margin-left: auto;
  }
  &._02 {
    margin-left: -3.25em;
    background: var(--c_bl);
  }
  &._03 {
    margin-left: -1.75em;
  }
  &._04 {
    margin-left: auto;
    margin-right: 1.25em;
    background: var(--c_bl);
  }
  figure {
    position: absolute;
    &:has(img[src*="01"]) {
      top: -4.25em;
      left: 0;
      max-width: 4.1em;
    }
    &:has(img[src*="02"]) {
      top: -3.75em;
      left: 3em;
      max-width: 4.3em;
    }
    &:has(img[src*="03"]) {
      bottom: -.5em;
      right: -5em;
      max-width: 3.85em;
    }
    &:has(img[src*="04"]) {
      top: -.4em;
      left: -5em;
      max-width: 5.9em;
    }
  }
}
.p-aichat__howto__illust {
  position: absolute;
  bottom: 0;
  &:has(img[src*="01"]) {
    max-width: 23.2em;
    left: -4.5em;
  }
  &:has(img[src*="02"]) {
    max-width: 24.4em;
    right: -5em;
    left: auto;
  }
}
.p-aichat__howto__wrap ._star {
  position: absolute;
  z-index: -1;
  max-width: 24px;
  &._01 {
    top: 10em;
    left: -7.5em;
  }
  &._02 {
    top: 30em;
    right: -7.5em;
  }
  &._03 {
    top: -5em;
    left: 9.5em;
  }
  &._04 {
    top: -11em;
    right: -7em;
  }
  &._05 {
    top: 16em;
    right: -10em;
  }
}
.p-aichat__attention {
  background: #000;
  color: #fff;
  position: relative;
  padding: 13.3em 0 10em;
  text-align: center;
}
.p-aichat__attention_ttl {
  position: absolute;
  top: -3.3em;
  left: 0;
  right: 0;
  width: 94%;
  max-width: 78em;
  margin: 0 auto;
  z-index: 1;
  background: var(--c_rd);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5em 1em 1.2em;
  gap: .5em 5em;
  .eng {
    font-size: 3.9em;
    font-weight: 500;
    position: relative;
    padding-left: 3.205em;
    &::before {
      content: "";
      display: block;
      background: url(../img/ai_chat/attention_img.png) center center no-repeat;
      background-size: contain;
      aspect-ratio: 152/134;
      width: 1.948em;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  h2 {
    font-size: 2em;
    letter-spacing: 0.1em;
  }
}
.p-aichat__attention__txt {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 2;
}




/*sp
---------------------------------------------------------*/
@media screen and (max-width: 767px) {
	:root {
		--fz:clamp(5px,1.3037809vw,10px);
	}
  .p-aichat__fv {
    padding-top: 4em;
  }
  .p-aichat__ttl {
    margin-bottom: 6em;
    h1 {
      font-size: 2.5em;
    }
  }
  .p-aichat__concierge__txt {
    aspect-ratio: auto;
    top: -12%;
    width: 48%;
    padding: 3em 1.5em;
    h2 {
      width: 85%;
    }
    p {
      width: 100%;
    }
    &::before,
    &::after {
      width: 3em;
    }
    &::before {
      left: 2em;
    }
    &::after {
      right: 2em;
    }
  }
  .p-aichat__btnWrap {
    padding: 3em 0;
  }
  .p-aichat__btnArea {
    width: 33em;
  }
  .p-aichat__btn__txt {
    width: 100%;
    li {
      width: 21%;
    }
    li:nth-of-type(2) {
      margin-top: 7em;
    }
  }
  .p-aichat__howto__ttl .eng {
    font-size: 6em;
  }
  .p-aichat__howto__ttl h2 {
    font-size: 2.5em;
  }
  .p-aichat__howto__ttl figure {
    &:nth-of-type(1) {
      max-width: 7.5em;
    }
    &:nth-of-type(2) {
      max-width: 8.5em;
    }
  }
  .p-aichat__howto__ttl + .txt {
    font-size: 2.5em;
    line-height: 1.8;
    text-align: left;
    padding: 0 1em;
  }
  .p-aichat__howto__lead {
    font-size: 2.5em;
    padding: 2.5em 2em;
    .txt {
      text-align: left;
    }
    figure {
      &:nth-of-type(1) {
        top: -1.5em;
        left: -0.222em;
        max-width: 4.5em;
      }
      &:nth-of-type(2) {
        bottom: -2em;
        right: -1.6em;
        max-width: 5.5em;
      }
    }
  }
  .p-aichat__howto__list {
    flex-direction: column;
    padding: 0 3em;
  }
  .p-aichat__howto__wrap {
    max-width: 100%!important;
    &:nth-of-type(2) {
      margin-top: 18em;
    }
  }
  .p-aichat__howto__item {
    width: 92%;
    + .p-aichat__howto__item {
        margin-top: 8em;
    }
    &:nth-of-type(even) {
      margin-left: auto;
    }
    dd {
      padding: 2em 1.5em;
      border-radius: 10px;
      font-size: 2.5em;
      overflow-wrap: anywhere;
      &::before,
      &::after {
        content: "";
        width: 2.35em;
      }
      &::before {
        top: -.8333em;
        left: 1.2em;
      }
      &::after {
        bottom: -.8333em;
        right: 1.2em;
        transform: rotate(180deg);
      }
    }
  }
  .p-aichat__howto__item._03 dd::after, .p-aichat__howto__item._04 dd::after {
    right: 1.2em;
  }
  .p-aichat__howto__item__ttl {
    font-size: 2.7em;
    padding: 1em 2em;
    &._01 {
      margin-left: 10em;
      margin-right: -2em;
    }
    &._02 {
      margin-left: .5em;
    }
    &._03 {
      margin-left: -1.5em;
    }
    &._04 {
      margin-right: 2em;
    }
    &._03::before {
      transform: scale(-1,1);
      left: auto;
      right: 25%;
    }
    &._04::before {
      transform: none;
      right: auto;
      left: 15%;
    }
    figure {
      &:has(img[src*="01"]) {
        top: -3.5em;
        left: -2em;
        max-width: 4.1em;
      }
      &:has(img[src*="02"]) {
        top: -3.75em;
        left: 3em;
        max-width: 4.3em;
      }
      &:has(img[src*="03"]) {
        bottom: 0.5em;
        right: -5em;
        max-width: 4em;
      }
      &:has(img[src*="04"]) {
        top: 0.2em;
        left: -4.5em;
        max-width: 5.9em;
      }
    }
  }
  .p-aichat__howto__illust {
    &:has(img[src*="01"]) {
      max-width: 27.2em;
      left: -4.5em;
    }
    &:has(img[src*="02"]) {
      max-width: 28em;
      right: -2.5em;
      left: auto;
    }
  }
  .p-aichat__howto__wrap ._star {
    max-width: 24px;
    &._01 {
      top: 10em;
      left: -4em;
    }
    &._02 {
      top: 30em;
      right: -4em;
    }
    &._03 {
      top: -12em;
      left: -4em;
    }
    &._04 {
      top: 5em;
      right: -1em;
    }
    &._05 {
      top: auto;
      right: auto;
      left: -3em;
      bottom: 41em;
    }
  }
.p-aichat__attention_ttl {
  top: -3.3em;
  padding: 2.5em 1em 2.2em;
  gap: .5em 1.7em;
  .eng {
    font-size: 3.9em;
    font-weight: 500;
    position: relative;
    padding-left: 2.5em;
    &::before {
      width: 1.8em;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  h2 {
    font-size: 2.5em;
    letter-spacing: 0.1em;
  }
}
.p-aichat__attention {
  padding: 11em 2em 7em;
}
.p-aichat__attention__txt {
  font-size: 2.5em;
  text-align: left;
}







}