@charset "UTF-8";
@import 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css';
/* A Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

ul[class],
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

article > * + * {
  margin-top: 1em;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* サロン集客AI・CACレポート共通のSCSS */
@font-face {
  font-family: "mplus-2p";
  src: url("../fonts/mplus-2p-light.eot") format("eot"), url("../fonts/mplus-2p-light.woff2") format("woff2"), url("../fonts/mplus-2p-light.woff") format("woff");
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "mplus-2p";
  src: url("../fonts/mplus-2p-regular.eot") format("eot"), url("../fonts/mplus-2p-regular.woff2") format("woff2"), url("../fonts/mplus-2p-regular.woff") format("woff");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "mplus-2p";
  src: url("../fonts/mplus-2p-medium.eot") format("eot"), url("../fonts/mplus-2p-medium.woff2") format("woff2"), url("../fonts/mplus-2p-medium.woff") format("woff");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "mplus-2p";
  src: url("../fonts/mplus-2p-bold.eot") format("eot"), url("../fonts/mplus-2p-bold.woff2") format("woff2"), url("../fonts/mplus-2p-bold.woff") format("woff");
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "mplus-2p";
  src: url("../fonts/mplus-2p-heavy.eot") format("eot"), url("../fonts/mplus-2p-heavy.woff2") format("woff2"), url("../fonts/mplus-2p-heavy.woff") format("woff");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "mplus-2p";
  src: url("../fonts/mplus-2p-black.eot") format("eot"), url("../fonts/mplus-2p-black.woff2") format("woff2"), url("../fonts/mplus-2p-black.woff") format("woff");
  font-display: swap;
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "magapop";
  src: url("../fonts/851MkPOP_101.ttf") format("truetype");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
html, body {
  overscroll-behavior: none;
}

body {
  background: #b3b3b3;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video,
button {
  font-family: "mplus-2p", "ヒラギノ角ゴ Pro W3", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
}

.apple-emoji {
  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol !important;
}

.sample {
  background: url(../img/face.png) 0 0 no-repeat;
}

.with-bridge {
  position: relative;
}
.with-bridge::before {
  bottom: -30px;
  content: "";
  display: block;
  width: 10px;
  height: 30px;
  position: absolute;
  /* top: -15px; */
  left: 0;
  right: 0;
  margin: auto;
  background: #ffffff;
  z-index: 1;
}
.with-bridge.bridge-gray::before {
  background: #f0f0f0;
}

.fuwafuwa {
  animation: fuwafuwa 0.6s ease-in-out infinite alternate;
}

/*********
見出しを定義するscss 
*********/
/* 
memo:
現在サロン集客AIでしか使っていないのでプロジェクトのディレクトリに移してもいいかも
*/
.salonai-title-l {
  color: #262626;
  letter-spacing: 4px;
  font-size: 20pt;
  font-weight: 800;
  margin-bottom: 5px;
}

.salonai-title-m {
  color: #b3b3b3;
  letter-spacing: 1px;
  font-size: 18pt;
  font-weight: 800;
  margin: 0 10px 0 0;
}

/*********
ボタン系のデザイン定義
*********/
.salonai-button-save {
  font-size: 14px;
  height: 38px;
  width: 65px;
  background: white;
  border-radius: 4px;
  color: #b3b3b3;
  border: 1px solid #b3b3b3;
  cursor: default;
}
.salonai-button-save:hover {
  opacity: 1;
}
.salonai-button-save.save-caution {
  color: #ff595b;
  border: 1px solid #ff595b;
  cursor: pointer;
}
.salonai-button-save.is-running {
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.start-ad-animation {
  animation: 3s fuwafuwa-button 0s infinite ease;
}

@keyframes fuwafuwa-button {
  0% {
    transform: scale(1);
  }
  6% {
    transform: scale(1.065);
  }
  12% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.035);
  }
  24% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
/*********
inputやセレクトを定義するscss 
*********/
/* 
memo:
ページによって若干の微調整が発生するため共通で使う部分をmixinとして
細かいところはprojectのscssで調整
*/
button,
select,
input {
  cursor: pointer;
  outline: none;
}
button:hover,
select:hover,
input:hover {
  opacity: 0.7;
}

/* select要素のmixin */
/* ボタンのborder色を#15bfabに */
.salon-ai-edit-btn {
  cursor: pointer;
  padding: 5px 12px;
  font-size: 14px;
  border: 1px solid #15bfab;
  color: #15bfab;
  background: #fff;
  border-radius: 4px;
  display: flex;
}
.salon-ai-edit-btn .edit-button-icon {
  width: 12px;
  margin-right: 2px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* input要素のmixin */
/*********
ダイアログ
*********/
.salonai-dialog-bg, .datepicker-dialog-bg {
  position: fixed;
  z-index: 100;
  width: 100%;
  margin: auto;
  height: 100vh;
  background: black;
  opacity: 0.5;
  top: 0;
  left: 0;
  display: none;
}

.salonai-dialog-wrapper {
  background: white;
  border-radius: 8px;
  display: table;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 0;
  width: 1050px;
  z-index: 101;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box {
  position: relative;
  width: 100%;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close {
  position: absolute;
  left: 10px;
  top: -5px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  cursor: pointer;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close {
  opacity: 1;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:before,
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:after {
  position: absolute;
  left: 15px;
  content: " ";
  height: 33px;
  width: 2px;
  background-color: #333;
  opacity: 0.3;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:before {
  transform: rotate(45deg);
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:after {
  transform: rotate(-45deg);
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-images-scroll-wrapper {
  width: 1050px;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-images-container {
  display: flex;
  justify-content: space-evenly;
}
.salonai-dialog-wrapper .salonai-dialog-wrapper-box .salonai-images-container img {
  height: 220px;
  width: 220px;
  margin: 20px;
}
.salonai-dialog-wrapper .salonai-dialog-title-center {
  font-size: 28px;
  font-weight: 600;
  margin: 0px auto 45px;
  text-align: center;
  width: 100%;
  padding: 30px 0 0;
}
.salonai-dialog-wrapper .salonai-dialog-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 0;
}
.salonai-dialog-wrapper .salonai-dialog-title .salonai-dialog-title-main {
  font-size: 30px;
  font-weight: 800;
  margin: 0 5px 0 0;
}
.salonai-dialog-wrapper .salonai-dialog-title .salonai-dialog-title-sub {
  font-size: 20px;
  font-weight: 300;
  margin: 0 0 4px;
}
.salonai-dialog-wrapper .salonai-dialog-title-s {
  font-size: 20px;
  font-weight: 500;
  padding: 20px 0 0;
  text-align: center;
}
.salonai-dialog-wrapper .salonai-dialog-content {
  max-height: 500px;
  overflow: scroll;
  width: 90%;
  margin: 15px auto 30px;
  line-height: 1.75;
}
.salonai-dialog-wrapper .salonai-dialog-content span {
  display: block;
  line-height: 1.75;
  margin: 30px auto 0;
  color: #ff595b;
}

.salonai-caution-dialog-wrapper {
  background: #ff595b;
  color: white;
  max-width: 405px;
  display: table;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 0;
  max-width: 1050px;
  width: 90%;
  z-index: 101;
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box {
  position: relative;
  width: 100%;
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close {
  position: absolute;
  left: 10px;
  top: -5px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  cursor: pointer;
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close {
  opacity: 1;
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:before,
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:after {
  position: absolute;
  left: 15px;
  content: " ";
  height: 33px;
  width: 2px;
  background-color: #333;
  opacity: 0.3;
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:before {
  transform: rotate(45deg);
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-dialog-close:after {
  transform: rotate(-45deg);
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-images-container {
  display: flex;
  justify-content: space-evenly;
}
.salonai-caution-dialog-wrapper .salonai-dialog-wrapper-box .salonai-images-container img {
  height: 220px;
  width: 220px;
  margin: 20px;
}
.salonai-caution-dialog-wrapper .salonai-dialog-title-center {
  font-size: 28px;
  font-weight: 600;
  margin: 0px auto 45px;
  text-align: center;
  width: 100%;
  padding: 30px 0 0;
}
.salonai-caution-dialog-wrapper .salonai-dialog-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 0;
}
.salonai-caution-dialog-wrapper .salonai-dialog-title .salonai-dialog-title-main {
  font-size: 30px;
  font-weight: 800;
  margin: 0 5px 0 0;
}
.salonai-caution-dialog-wrapper .salonai-dialog-title .salonai-dialog-title-sub {
  font-size: 20px;
  font-weight: 300;
  margin: 0 0 4px;
}
.salonai-caution-dialog-wrapper .salonai-dialog-title-s {
  font-size: 20px;
  font-weight: 500;
  padding: 20px 0 0;
  text-align: center;
}
.salonai-caution-dialog-wrapper .salonai-dialog-content {
  max-height: 500px;
  overflow: scroll;
  width: 90%;
  margin: 15px auto 30px;
  line-height: 1.75;
}
.salonai-caution-dialog-wrapper .salonai-dialog-content span {
  display: block;
  line-height: 1.75;
  margin: 30px auto 0;
  color: #ff595b;
}

/*********
オーバーレイ
*********/
.salonai-comingsoon-overray-font-l {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 20pt;
}

.salonai-comingsoon-overray-font-ss {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 9.5px;
  border-radius: 3px;
}

/*********
CACレポートなどで使うカレンダーのcss
*********/
.dp-highlight .ui-state-default {
  background: #15bfab;
  color: #FFF;
}

.ui-datepicker.ui-datepicker-multi {
  width: 100% !important;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: none;
}

#datepicker {
  height: 300px;
  overflow-x: scroll;
}

#datepicker-submit {
  margin: 10px 0 0;
}

.ui-widget {
  font-size: 100%;
}

.datepicker-dialog {
  background: white;
  border-radius: 8px;
  display: table;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  padding: 20px 0;
  max-width: 300px;
  height: 315px;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 101;
}

.salonai-list-wrapper {
  /* ポップアップ要素 */
  /* .show クラスが付いたときに拡大＆表示 */
  /* ポップアップ内の画像やテキスト */
}
.salonai-list-wrapper.salonai-keyword-dialog-wrapper {
  width: 60%;
  margin: 0 auto;
}
.salonai-list-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.salonai-list-wrapper table .col-add-friend-date {
  width: 14%;
}
.salonai-list-wrapper table .col-name {
  width: 14%;
}
.salonai-list-wrapper table .col-margin {
  width: 1%;
}
.salonai-list-wrapper table .col-platform {
  width: 14%;
}
.salonai-list-wrapper table .col-ad {
  width: 14%;
}
.salonai-list-wrapper table .col-first-reserve-date {
  width: 14%;
}
.salonai-list-wrapper table .col-first-operation-date {
  width: 14%;
}
.salonai-list-wrapper table .col-customer-name {
  width: 14%;
}
.salonai-list-wrapper table thead {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.salonai-list-wrapper table thead th {
  font-weight: normal;
}
.salonai-list-wrapper table thead th.search-word-people {
  width: 120px;
}
.salonai-list-wrapper table td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.salonai-list-wrapper table td.ad {
  padding: 0;
  font-size: 10px;
}
.salonai-list-wrapper table td.ad img {
  width: 40px;
  margin: auto;
}
.salonai-list-wrapper table td.search-word, .salonai-list-wrapper table td.keyword {
  text-align: left;
}
.salonai-list-wrapper #popup {
  position: fixed;
  /* 初期状態は見えない (opacity: 0) かつ scale(1) で配置しておく */
  opacity: 0;
  transform: scale(1);
  transform-origin: center center; /* 中心から拡大 */
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none; /* マウス操作を通さない */
  z-index: 999; /* 前面に表示 */
  /* 背景や枠線など必要に応じて */
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.salonai-list-wrapper #popup.show {
  opacity: 1;
  transform: scale(2); /* お好みで拡大率を調整 */
}
.salonai-list-wrapper .popup-img {
  max-width: 130px;
  height: auto;
  display: block;
}
.salonai-list-wrapper .popup-text {
  font-size: 10px;
}

/*********
認証画面系のスタイル
*********/
#salon-ai-login-view {
  /* --------------------------------

    xsigin/signup popup

    -------------------------------- */
  /* テンプレートで変換するURLを踏むためjsのリンクフックを動作させないように別のclassをクローンした */
  /*ここからトップページのスタイル*/
}
#salon-ai-login-view .login-error-message {
  color: #ff595b;
  display: none;
}
@media only screen and (min-width: 600px) {
  #salon-ai-login-view h2 {
    padding: 30px 0em 5px;
    margin: 0 2em 0;
  }
}
#salon-ai-login-view h3 {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-align: left;
  padding: 30px 1.4em 0px;
  line-height: 18px;
}
@media only screen and (min-width: 600px) {
  #salon-ai-login-view h3 {
    padding: 30px 2em 0;
  }
}
#salon-ai-login-view img {
  max-width: 100%;
}
#salon-ai-login-view input,
#salon-ai-login-view textarea {
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-size: 1rem;
}
#salon-ai-login-view input::-ms-clear,
#salon-ai-login-view textarea::-ms-clear {
  display: none;
}
#salon-ai-login-view .cd-user-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  z-index: 3;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0, visibility 0 0.3s;
}
#salon-ai-login-view .cd-user-modal.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0, visibility 0 0;
}
#salon-ai-login-view .cd-user-modal.is-visible .cd-user-modal-container {
  transform: translateY(0);
}
#salon-ai-login-view .cd-user-modal-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: #fff;
  margin: 3em auto 4em;
  cursor: auto;
  border-radius: 0.25em;
  transform: translateY(-30px);
  transition-property: transform;
  transition-duration: 0.3s;
}
#salon-ai-login-view .cd-user-modal-container .cd-switcher:after {
  content: "";
  display: table;
  clear: both;
}
#salon-ai-login-view .cd-user-modal-container .cd-switcher li {
  width: 50%;
  float: left;
  text-align: center;
}
#salon-ai-login-view .cd-user-modal-container .cd-switcher li:first-child a {
  border-radius: 0.25em 0 0 0;
}
#salon-ai-login-view .cd-user-modal-container .cd-switcher li:last-child a {
  border-radius: 0 0.25em 0 0;
}
#salon-ai-login-view .cd-user-modal-container .cd-switcher a {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #d2d8d8;
  color: #809191;
}
#salon-ai-login-view .cd-user-modal-container .cd-switcher a.selected {
  background: #fff;
  color: #505260;
}
#salon-ai-login-view .center-black-text {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  #salon-ai-login-view .cd-user-modal-container {
    margin: 4em auto;
  }
  #salon-ai-login-view .cd-user-modal-container .cd-switcher a {
    height: 70px;
    line-height: 70px;
  }
}
#salon-ai-login-view .cd-form {
  padding: 1.4em;
}
#salon-ai-login-view .cd-form .fieldset {
  position: relative;
  margin: 1.4em 0;
}
#salon-ai-login-view .cd-form .fieldset:first-child {
  margin-top: 0;
}
#salon-ai-login-view .cd-form .fieldset:last-child {
  margin-bottom: 0;
}
#salon-ai-login-view .cd-form label {
  font-size: 14px;
  font-size: 0.875rem;
}
#salon-ai-login-view .cd-form label.image-replace {
  /* replace text with an icon */
  display: inline-block;
  position: absolute;
  left: 15px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  text-shadow: none;
  background-repeat: no-repeat;
  background-position: 50% 0;
}
#salon-ai-login-view .cd-form label.cd-username {
  background-image: url("../img/cd-icon-username.svg");
}
#salon-ai-login-view .cd-form label.cd-email {
  background-image: url("../img/cd-icon-email.svg");
}
#salon-ai-login-view .cd-form label.cd-password {
  background-image: url("../img/cd-icon-password.svg");
}
#salon-ai-login-view .cd-form input {
  margin: 0;
  padding: 0;
  border-radius: 0.25em;
}
#salon-ai-login-view .cd-form input.full-width {
  width: 100%;
}
#salon-ai-login-view .cd-form input.has-padding {
  padding: 12px 20px 12px 50px;
}
#salon-ai-login-view .cd-form input.has-border {
  border: 1px solid #d2d8d8;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
#salon-ai-login-view .cd-form input.has-border:focus {
  border-color: #343642;
  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  outline: none;
}
#salon-ai-login-view .cd-form input.has-error {
  border: 1px solid #d76666;
}
#salon-ai-login-view .cd-form input[type=password] {
  /* space left for the HIDE button */
  padding-right: 65px;
}
#salon-ai-login-view .cd-form input[type=submit] {
  padding: 16px 0;
  cursor: pointer;
  background: #27b4a2;
  color: #fff;
  font-weight: bold;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
#salon-ai-login-view .no-touch .cd-form input[type=submit]:hover,
#salon-ai-login-view .no-touch .cd-form input[type=submit]:focus {
  background: #26a593;
  outline: none;
}
#salon-ai-login-view .cd-form input[type=button] {
  padding: 16px 0;
  cursor: pointer;
  background: #27b4a2;
  color: #fff;
  font-weight: bold;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
#salon-ai-login-view .no-touch .cd-form input[type=button]:hover,
#salon-ai-login-view .no-touch .cd-form input[type=submit]:focus {
  background: #26a593;
  outline: none;
}
#salon-ai-login-view .cd-form .hide-password {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px 15px;
  border-left: 1px solid #d2d8d8;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  font-size: 14px;
  font-size: 0.875rem;
  color: #343642;
}
#salon-ai-login-view .cd-form .cd-error-message {
  display: inline-block;
  position: absolute;
  left: -5px;
  bottom: -35px;
  background: rgba(215, 102, 102, 0.9);
  padding: 0.8em;
  z-index: 2;
  color: #fff;
  font-size: 13px;
  font-size: 0.8125rem;
  border-radius: 0.25em;
  /* prevent click and touch events */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0, visibility 0 0.2s;
}
#salon-ai-login-view .cd-form .cd-error-message::after {
  /* triangle */
  content: "";
  position: absolute;
  left: 22px;
  bottom: 100%;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}
#salon-ai-login-view .cd-form .cd-error-message.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0, visibility 0 0;
}
@media only screen and (min-width: 600px) {
  #salon-ai-login-view .cd-form {
    padding: 2em;
  }
  #salon-ai-login-view .cd-form .fieldset {
    margin: 2em 0;
  }
  #salon-ai-login-view .cd-form .fieldset:first-child {
    margin-top: 0;
  }
  #salon-ai-login-view .cd-form .fieldset:last-child {
    margin-bottom: 0;
  }
  #salon-ai-login-view .cd-form input.has-padding {
    padding: 16px 20px 16px 50px;
  }
  #salon-ai-login-view .cd-form input[type=submit] {
    padding: 16px 0;
  }
}
#salon-ai-login-view .cd-form-message {
  padding: 1.4em 1.4em 0;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
#salon-ai-login-view .cd-line-message {
  padding: 1.4em 1.4em 0;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
}
@media only screen and (min-width: 600px) {
  #salon-ai-login-view .cd-form-message,
  #salon-ai-login-view .cd-line-message {
    padding: 2em 2em 0;
  }
}
#salon-ai-login-view .cd-line-message.terms {
  padding: 1.4em 1em 0;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
}
@media only screen and (min-width: 600px) {
  #salon-ai-login-view .cd-line-message.terms {
    padding: 0.8em 2em 0;
  }
}
#salon-ai-login-view .cd-line-message.terms.last {
  padding-bottom: 30px;
}
#salon-ai-login-view .cd-form-bottom-message {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -30px;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
}
#salon-ai-login-view .cd-form-bottom-message a {
  color: #4d4d4d;
  text-decoration: underline;
}
@media only screen and (min-width: 1170px) {
  #salon-ai-login-view .cd-close-form {
    display: none;
  }
}
#salon-ai-login-view #cd-login,
#salon-ai-login-view #cd-signup,
#salon-ai-login-view #cd-reset-password {
  display: none;
}
#salon-ai-login-view #cd-login.is-selected,
#salon-ai-login-view #cd-signup.is-selected,
#salon-ai-login-view #cd-reset-password.is-selected {
  display: block;
}
#salon-ai-login-view .footer_accept {
  position: fixed;
  background: #2f889a;
  width: 100%;
  bottom: 0px;
  height: 48px;
  z-index: 10;
  color: white;
  text-align: center;
}
#salon-ai-login-view .footer_accept a {
  color: white;
  font-weight: bold;
  display: block;
  padding: 15px 0 0;
  width: 100%;
  height: 100%;
}
#salon-ai-login-view .cd-form-bottom-message-nojs {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -30px;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
}
#salon-ai-login-view .cd-form-bottom-message-nojs a {
  color: #4d4d4d;
  text-decoration: underline;
}
#salon-ai-login-view #top-page {
  width: 100%;
  height: 100vh;
  min-height: 500px;
  position: relative;
  top: 0;
  left: 0;
  font-family: "Noto Sans Japanese", sans-serif;
  font-weight: 400;
  color: #231815;
}
#salon-ai-login-view #top-page a {
  color: #231815;
}
#salon-ai-login-view #top-page .line-logo {
  width: 142px;
  margin: 0 auto;
  padding-top: 7vh;
}
#salon-ai-login-view #top-page .main-area {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
#salon-ai-login-view #top-page .main-area .registration p.title {
  font-size: 15px;
  font-weight: 700;
  line-height: 28px;
  width: 155px;
  height: 28px;
  border-top: solid 1px #1a1a1a;
  border-bottom: solid 1px #1a1a1a;
  text-align: center;
  margin: 0 auto;
}
#salon-ai-login-view #top-page .main-area .registration p.already {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  margin: 0 auto;
}
#salon-ai-login-view #top-page .main-area .registration p.desc {
  font-size: 11px;
  text-align: center;
  padding-top: 10px;
}
#salon-ai-login-view #top-page .main-area .registration .sns-buttons {
  overflow: hidden;
  width: 234px;
  margin: 0 auto;
  padding-top: 13px;
}
#salon-ai-login-view #top-page .main-area .registration .sns-buttons a {
  display: block;
  width: 70px;
  height: 70px;
  float: left;
  margin: 0 4px;
}
#salon-ai-login-view #top-page .main-area .registration .singin {
  padding-top: 33px;
  padding-bottom: 30px;
}
#salon-ai-login-view #top-page .main-area .registration .singin a {
  display: block;
  width: 220px;
  border-bottom: dashed 1px #1a1a1a;
  margin: 0 auto;
  padding-bottom: 5px;
}
#salon-ai-login-view #top-page .main-area .registration .singin a p {
  line-height: 15px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: top;
}
#salon-ai-login-view #top-page .main-area .registration .singin a p img {
  width: 16px;
  margin-right: 3px;
}
#salon-ai-login-view #top-page .main-area .footer-button a {
  display: block;
  width: 100%;
  height: 45px;
  background-color: #d1dae0;
  text-align: center;
  line-height: 45px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
#salon-ai-login-view #top-page .main-area .footer-fill {
  display: block;
  width: 100%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.salon-ai-error-view {
  font-family: "mplus-2p", "ヒラギノ角ゴ Pro W3", HiraKakuProN-W3, "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #ffffff;
}
.salon-ai-error-view .title {
  font-size: 24px;
  font-weight: bold;
  color: #262626;
  margin-bottom: 20px;
}
.salon-ai-error-view .description {
  font-size: 16px;
  color: #262626;
}

.speech-bubble {
  display: inline-block;
  position: absolute;
  padding: 10px 10px;
  background-image: url("https://limehair.jp/php74-lime/wp-content/uploads/2025/04/speech_bubble.png");
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  filter: drop-shadow(0 2pt 20pt rgba(0, 0, 0, 0.3));
  height: 51px;
  width: 208px;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  animation: fuwafuwa 0.6s ease-in-out infinite alternate;
}

.speech-bubble-large {
  display: inline-block;
  position: absolute;
  padding: 10px 10px;
  background-image: url("https://limehair.jp/php74-lime/wp-content/uploads/2025/04/speech_bubble_large.png");
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  filter: drop-shadow(0 2pt 20pt rgba(0, 0, 0, 0.3));
  height: 65px;
  line-height: 16px;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  animation: fuwafuwa 0.6s ease-in-out infinite alternate;
  letter-spacing: 0.5px;
}

.strategy-update-bubble {
  top: -18px;
  left: -36px;
}

.start-ad-bubble {
  top: -57px;
  left: 87px;
  width: 200px;
  display: none;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(8px);
  }
}
/***************
枠組みのscss
***************/
.salonai-index {
  position: fixed;
  width: 100%;
  height: 100vh;
}

.salonai-index-wrapper {
  display: grid;
  grid-template-columns: 95px 1fr 60px;
  grid-template-rows: 55px 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.salonai-top-left {
  grid-area: 1/1/2/2;
  background: #262626;
  color: white;
  position: relative;
}
.salonai-top-left .salonai-top-left-logo {
  position: absolute;
  left: 5px;
  top: 17px;
}
.salonai-top-left .salonai-top-left-logo-top {
  font-size: 10px;
  line-height: 1;
  margin: 0 0 3px;
}
.salonai-top-left .salonai-top-left-logo-main {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.3px;
}

.salonai-top-center {
  grid-area: 1/2/2/3;
  background: #262626;
}

.salonai-main-left {
  grid-area: 2/1/3/2;
  background: #262626;
}

.salonai-main-center {
  grid-area: 2/2/3/3;
}

.salonai-topmain-right {
  grid-area: 1/3/3/4;
  background: #262626;
  height: 100vh;
}

.salonai-top-left .salonai-top-left-logo {
  position: absolute;
  left: 5px;
  top: 17px;
}
.salonai-top-left .salonai-top-left-logo-top {
  font-size: 10px;
  line-height: 1;
  margin: 0 0 3px;
}
.salonai-top-left .salonai-top-left-logo-main {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.3px;
}

.salonai-top-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.salonai-top-center .salonai-top-center-center {
  font-size: 30px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  flex: 1;
}
.salonai-top-center .salonai-top-center-right {
  width: 95px;
  cursor: pointer;
}

.salonai-main-left ul li {
  width: 82px;
  margin: 0 auto;
  position: relative;
}
.salonai-main-left ul li .salonai-main-left-navi-count {
  width: 28px;
  height: 28px;
  background: #ff595b;
  position: absolute;
  font-size: 18px;
  z-index: 99;
  right: -8px;
  top: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  border-radius: 100px;
  transform: scale(0.8);
  letter-spacing: -1px;
}
.salonai-main-left ul li .salonai-main-left-navi-beta {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ff595b;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 2;
  line-height: 1.2;
}
.salonai-main-left ul li.active img {
  border: 1.5px solid white;
}
.salonai-main-left ul li img {
  width: 82px;
  height: 82px;
  border-radius: 4px;
  margin: 0 0 8px;
}

.salonai-alert-banner {
  background: #ff595b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px;
}
.salonai-alert-banner .salonai-alert-banner-title-left {
  display: flex;
  align-items: center;
}
.salonai-alert-banner .salonai-alert-banner-title-left .salonai-alert-banner-title-left-title {
  color: white;
  font-size: 18pt;
  font-weight: 800;
  margin: 0 15px 0 0;
}
.salonai-alert-banner .salonai-alert-banner-title-left .salonai-alert-banner-title-left-text {
  color: white;
  font-size: 18pt;
  font-weight: 300;
}
.salonai-alert-banner .salonai-alert-banner-title-right {
  display: flex;
  flex-direction: row-reverse;
}
.salonai-alert-banner .salonai-alert-banner-title-right .salonai-alert-banner-title-right-hidden {
  border: 1px solid white;
  color: white;
  background: transparent;
  padding: 6px 20px;
  border-radius: 4px;
  height: 38px;
  font-size: 14px;
  margin: 0 0 0 15px;
}
.salonai-alert-banner .salonai-alert-banner-title-right .salonai-alert-banner-title-right-check {
  font-size: 14px;
  color: #ff595b;
  background: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  height: 38px;
}

.open-posting-ads-dialog {
  cursor: pointer;
}

.tenant-selector {
  text-align: center;
}
.tenant-selector ul {
  list-style: none;
}
.tenant-selector ul li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}
.tenant-selector ul li button {
  color: white;
  margin-top: 30px;
  width: 350px;
  /* white-space: normal; */
  /* height: auto; */
  min-height: 55px;
  /* line-height: 1; */
  /* padding: 10px; */
  display: inline-block;
  box-sizing: border-box;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  /* width: 260px; */
  /* height: 55px; */
  cursor: pointer;
  transition: all 0.3s;
  border-style: none;
  font-size: 15px;
  line-height: 55px;
  /* white-space: nowrap; */
  /* text-align: center; */
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: #262626;
}

.market-type-circle {
  display: inline-block;
  background-color: #b3b3b3;
  color: white;
  width: 18px;
  text-align: center;
  border-radius: 50%;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 600;
}

.market-type-circle-A {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("https://assets.stekina.com/salon_ai/img/pattern_a.png");
  background-size: 18px;
  margin-right: 4px;
}

.market-type-circle-B {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("https://assets.stekina.com/salon_ai/img/pattern_b.png");
  background-size: 18px;
  margin-right: 4px;
}

/****************
サイドバーのカードリスト共通スタイル
  ROIレポート／CACレポート等、右サイドバーに縦スクロールのカードを並べる画面で共用する。
  単一カードは .salonai-sidebar-card 配下、カードの並び全体は .salonai-sidebar-card-list 配下。
****************/
.salonai-sidebar-card-list-shadow-box {
  border-radius: 7px;
  position: relative;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.salonai-sidebar-card-list {
  background: white;
  position: relative;
  border-radius: 7px;
  overflow: hidden;
}

.salonai-sidebar-card-list-title {
  margin: 15px auto 2px;
  width: calc(100% - 30px);
}

.salonai-sidebar-card-list-scroll {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  padding: 0 0 120px;
}
.salonai-sidebar-card-list-scroll .salonai-sidebar-card:nth-child(n+2) .salonai-sidebar-card-title {
  font-size: 14px;
}

.salonai-sidebar-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: calc(100% - 30px);
  height: 235px;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  margin: 20px auto 0px;
  padding: 15px 10px 30px 10px;
  background-clip: padding-box, border-box !important;
  background-origin: border-box;
  border-radius: 6px;
  border: 5px solid transparent;
  /* COMING SOON 等の絶対配置オーバーレイは padding-box（= border より内側）に貼り付くため、
     5px の透明 border が残ったままだとカード外周より一回り小さくしか覆えない。
     オーバーレイを子に持つ場合は border を消して、padding-box を border-box まで広げる。
     CAC レポートでは #salon_ai_platform_id_5 で同等の上書きを行っており、それと同じ見た目に揃える。 */
}
.salonai-sidebar-card[\:has\(\%3E\%20.salonai-comingsoon-overray-font-l\)], .salonai-sidebar-card[\:has\(\%3E\%20.salonai-comingsoon-overray-font-ss\)] {
  border: none;
}
.salonai-sidebar-card:has(> .salonai-comingsoon-overray-font-l), .salonai-sidebar-card:has(> .salonai-comingsoon-overray-font-ss) {
  border: none;
}
.salonai-sidebar-card.active {
  border: 5px solid transparent;
  background: linear-gradient(white, white), linear-gradient(-30deg, #14ceb8 0%, #4f9ad6 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.salonai-sidebar-card .salonai-sidebar-card-title {
  color: #262626;
  letter-spacing: 1px;
  font-size: 18pt;
  font-weight: 800;
  height: 20px;
  margin: 0 0 25px;
}
.salonai-sidebar-card .salonai-sidebar-card-img {
  text-align: center;
  margin-bottom: 10px;
  height: 36px;
}
.salonai-sidebar-card .salonai-sidebar-card-img img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.salonai-sidebar-card-detail {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  font-size: 12px;
  font-weight: 300;
}
.salonai-sidebar-card-detail .salonai-sidebar-card-detail-name {
  text-align: right;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-size: 11px;
}
.salonai-sidebar-card-detail .salonai-sidebar-card-detail-value {
  text-align: right;
  line-height: 1.3;
}
.salonai-sidebar-card-detail .salonai-sidebar-card-detail-value.top-ranked {
  background-image: linear-gradient(-30deg, #4f9ad6 0%, #14ceb8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.salonai-sidebar-card-readmore {
  text-align: right;
  color: #b3b3b3;
  font-size: 12px;
  font-weight: 300;
}

/*********
サロン集客AIの大枠レイアウト
*********/
#ad-ai-body,
#cac-report-body {
  min-width: 1240px;
}

.salonai-box-content {
  background: white;
  padding: 25px 20px 30px;
  margin: 10px 0 0;
  border-radius: 4px;
}
.salonai-box-content .salonai-box-content-targetai-child-title {
  font-size: 14px;
  color: #b3b3b3;
  position: relative;
  font-weight: 600;
  margin: 0 0 4px;
}
.salonai-box-content.with-bridge {
  position: relative;
}
.salonai-box-content.with-bridge:before {
  bottom: -50px;
  content: "";
  display: block;
  width: 10px;
  height: 38px;
  position: absolute;
  /* top: -15px; */
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  background: #f0f0f0;
}

.salonai-box-strategy-content {
  border-radius: 4px;
  display: flex;
  grid-gap: 20px;
  gap: 20px;
  margin-left: 16px;
  /* 親要素がさらにFlexの子要素であれば、ここにも min-width: 0; が必要な場合あり */
  min-width: 0;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box {
  background-color: #f0f0f0;
  margin-top: 8px;
  border-radius: 4px;
  color: #b3b3b3;
  font-size: 12px;
  /* width: 100%; は削除し、flex: 1; min-width: 0; に置き換える */
  flex: 1;
  min-width: 0;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-outer-container {
  display: flex;
  flex-direction: row;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-outer-item {
  flex: 1;
  min-width: 0;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-inner-item-space {
  width: 12px;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-inner-container {
  display: flex;
  flex-direction: row;
  grid-gap: 0;
  gap: 0;
  min-width: 0;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-inner-item-left-left {
  width: 145px;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-inner-item-left-right {
  width: 168px;
}
.salonai-box-strategy-content .salonai-box-strategy-detail-box .salonai-strategy-detail-inner-item {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.salonai-box-strategy-content .salonai-box-content-targetai-child-title {
  font-size: 14px;
  color: #b3b3b3;
  position: relative;
  font-weight: 600;
  margin: 0 0 4px;
}

.salonai-box-cac-strategy-content {
  border-radius: 4px;
  display: flex;
  grid-gap: 20px;
  gap: 20px;
  /* 親要素がさらにFlexの子要素であれば、ここにも min-width: 0; が必要な場合あり */
  min-width: 0;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box {
  border-radius: 4px;
  color: #b3b3b3;
  font-size: 12px;
  /* width: 100%; は削除し、flex: 1; min-width: 0; に置き換える */
  flex: 1;
  min-width: 0;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-details {
  color: #262626;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salon-ai-strategy-change-reason,
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salon-ai-strategy-improvement-reason {
  color: #ff595b;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-outer-container {
  display: flex;
  flex-direction: row;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-outer-item {
  flex: 1;
  min-width: 0;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-inner-item-space {
  width: 12px;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-inner-container {
  display: flex;
  flex-direction: row;
  grid-gap: 0;
  gap: 0;
  min-width: 0;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-inner-item-left-left {
  width: 140px;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-inner-item-left-right {
  width: 168px;
}
.salonai-box-cac-strategy-content .salonai-box-cac-strategy-detail-box .salonai-cac-strategy-detail-inner-item {
  flex: 1;
  min-width: 0;
}
.salonai-box-cac-strategy-content .salonai-box-content-targetai-child-title {
  font-size: 14px;
  color: #b3b3b3;
  position: relative;
  font-weight: 600;
  margin: 0 0 4px;
}

.salonai-generate-btn {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #15bfab;
  color: #15bfab;
  background: #fff;
  border-radius: 4px;
}

.wrapper-salonai {
  width: 100%;
  margin: 0 auto;
  padding: 6px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-column-gap: 14px;
  grid-row-gap: 14px;
}

#improvement-proposal {
  grid-area: 1/1/2/4;
  border-radius: 7px;
  position: relative;
}

.salonai-head-proposal-shadow-box {
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  border-radius: 7px;
  margin-top: 14px;
}

.salonai-head-shadow-box {
  grid-area: 2/1/3/4;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  border-radius: 7px;
  position: relative;
}

.salonai-main-shadow-box {
  grid-area: 3/1/4/2;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  border-radius: 7px;
  position: relative;
}

.salonai-sub-shadow-box {
  grid-area: 3/2/4/4;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  border-radius: 7px;
}

.salonai-main-wrapper-bottom {
  grid-area: 4/1/5/4;
  position: relative;
}

.salonai-head {
  background: white;
  padding: 24px 0 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  position: relative;
}

.salonai-main-head {
  background: white;
  padding: 12px 16px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 7px;
}

.salonai-main {
  background: white;
  padding: 12px 16px;
  margin-bottom: 12px;
  z-index: 1;
  border-radius: 7px;
}
.salonai-main:not(.none-bridge):before {
  content: "";
  display: block;
  width: 10px;
  height: 16px;
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  background: white;
}

#optimization-ai-section {
  height: 100%;
}

.salonai-sub {
  height: 100%;
  background: white;
  padding: 10px;
  position: relative;
  border-radius: 7px;
}
.salonai-sub:before {
  content: "";
  display: block;
  width: 10px;
  height: 16px;
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: auto;
  background: white;
}

.salonai-common-dialog-content {
  max-height: 500px;
  overflow: scroll;
  width: 90%;
  margin: 30px auto 30px;
  line-height: 1.75;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
}
.salonai-common-dialog-content .salonai-common-dialog-caution-gray {
  color: #b3b3b3;
  font-size: 16px;
}

.caution {
  color: #ff595b;
  font-size: 10px;
  margin: 0 0 3px !important;
  text-align: center;
}

.salonai-common-dialog-content__default-button {
  cursor: pointer;
  font-size: 14px;
  border: 1px solid #15bfab;
  color: #15bfab;
  background: #fff;
  border-radius: 4px;
  height: 38px;
  width: 82px;
}
.salonai-common-dialog-content__default-button:hover {
  background: #f8f8f8;
}
.salonai-common-dialog-content__default-button:active {
  color: #fff;
  background: #15bfab;
  border-color: #15bfab;
}

.salonai-common-dialog-content__delete-button {
  cursor: pointer;
  font-size: 14px;
  border: 1px solid #ff595b;
  color: #ff595b;
  background: #fff;
  border-radius: 4px;
  height: 38px;
  width: 82px;
}
.salonai-common-dialog-content__delete-button:hover {
  background: #f8f8f8;
}
.salonai-common-dialog-content__delete-button:active {
  color: #fff;
  background: #ff595b;
  border-color: #ff595b;
}

.salonai-common-dialog-content__save-button {
  cursor: pointer;
  font-size: 14px;
  border: 1px solid #ff595b;
  color: #ff595b;
  background: #fff;
  border-radius: 4px;
  height: 38px;
  width: 82px;
}
.salonai-common-dialog-content__save-button:hover {
  background: #f8f8f8;
}
.salonai-common-dialog-content__save-button:active {
  color: #fff;
  background: #ff595b;
  border-color: #ff595b;
}

/*********
サロン集客AIの上部予算定義
*********/
.salonai-head-left-budget {
  display: flex;
  align-items: center;
}

.salonai-head-left-budget-box {
  background: #f0f0f0;
  display: flex;
  align-items: center;
  padding: 10px 22px 10px 10px;
  border-radius: 4px;
}
.salonai-head-left-budget-box .salonai-head-left-budget-box-title {
  font-size: 18pt;
  color: #b3b3b3;
  margin: 0 3px 0 0;
  font-weight: 800;
}
.salonai-head-left-budget-box .salonai-head-left-budget-box-input input {
  border: 1px solid #15bfab;
  background-color: #FFF;
  color: #4d4d4d;
  box-sizing: border-box;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  width: 140px;
  margin: 0 0 0 5px;
}
.salonai-head-left-budget-box .salonai-head-left-budget-box-input input::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-head-left-budget-box .salonai-head-left-budget-box-input input::placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-head-left-budget-box .salonai-head-left-budget-box-txt {
  font-size: 16px;
  color: #b3b3b3;
  font-weight: 600;
  margin: 0 0 0 4px;
}

.salonai-head-left-budget-usemoney {
  color: #ff595b;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.salonai-head-left-budget-usemoney .salonai-head-left-budget-usemoney-large {
  font-size: 24px;
  font-weight: bold;
  margin: 0 2px 0px 1px;
}

.salonai-head-right {
  text-align: center;
  margin: 0 10px 0 0 !important;
  position: relative;
}
.salonai-head-right .salonai-head-right-button-head {
  color: #ff595b;
  font-size: 10px;
  margin: 0 0 3px;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.salonai-head-right .salonai-head-right-button {
  font-size: 20pt;
  padding: 9px 15px;
  background: #b3b3b3;
  border-radius: 4px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  color: white;
  font-weight: 600;
  cursor: default;
}
.salonai-head-right .salonai-head-right-button:hover {
  opacity: 1;
}
.salonai-head-right .salonai-head-right-button.save-caution {
  background: #ff595b;
  cursor: pointer;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.24);
}

/*********
サロン集客AIのマーケティングAI
*********/
.salonai-box-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.salonai-box-title .salonai-box-title-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.salonai-box-title .salonai-box-title-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
}

.salonai-box {
  border-radius: 5px;
  padding: 12px;
  margin: 12px auto 0;
  background: #f0f0f0;
}
.salonai-box.is-first-content {
  margin-top: 0;
}

.salonai-box-normargin {
  margin: 0 !important;
}

.salonai-button-consulting {
  font-size: 14px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  border-radius: 4px;
  padding: 5px 11px;
  border-radius: 4px;
  width: 180px;
}
.salonai-button-consulting.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}

.salonai-button-generate-consulting {
  font-size: 14px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  border-radius: 4px;
  padding: 5px 11px;
  border-radius: 4px;
  width: 180px;
}
.salonai-button-generate-consulting.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}

/*************** 
2.ターゲットAIのscss
***************/
.salonai-box-draft-status {
  background-color: #ff595b;
}

.salonai-title-draft-status {
  color: #fff;
}

.salonai-box-content-targetai {
  display: flex;
}
.salonai-box-content-targetai .salonai-box-content-targetai-left {
  margin: 0 40px 0 0;
  width: 400px;
}

.salonai-box-content-targetai-left-child {
  margin: 0 0 30px 0;
  width: 287px;
}

.salonai-box-content-targetai-left-child input {
  display: none;
}
.salonai-box-content-targetai-left-child label {
  background-color: white;
  width: 90px;
  height: 33px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin: 0 5px 0 0;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  cursor: pointer;
}
.salonai-box-content-targetai-left-child label:hover {
  opacity: 0.8;
}
.salonai-box-content-targetai-left-child input:checked + label {
  background-color: #15bfab;
  color: #fff;
  font-weight: 600;
}

.salonai-box-content-targetai-child-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.salonai-box-content-targetai-child-select select {
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  height: 33px;
  margin: 0 5px 0 0;
  padding: 0 5px;
}
.salonai-box-content-targetai-child-select div {
  padding: 0 3px;
  color: #b3b3b3;
  font-weight: 600;
}

.salonai-box-content-child-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.salonai-box-content-child-select select {
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  height: 33px;
  margin: 0 5px 0 0;
  padding: 0 5px;
}
.salonai-box-content-child-select div {
  padding: 0 3px;
  color: #b3b3b3;
  font-weight: 600;
}

.salonai-box-content-strategy-child-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.salonai-box-content-strategy-child-select .custom-dropdown {
  position: relative;
  width: 100%;
  border: 1px solid #15bfab;
  border-radius: 5px;
  cursor: pointer;
}
.salonai-box-content-strategy-child-select .custom-dropdown .selected {
  padding: 3px 5px;
  background-color: #fff;
  color: #15bfab;
  font-weight: normal;
  border-radius: 5px;
  width: 190px;
}
.salonai-box-content-strategy-child-select .custom-dropdown .selected::after {
  content: "";
  position: absolute;
  right: 10px; /* 右端からの位置調整 */
  top: 47%; /* 垂直方向で中央に配置 */
  transform: translateY(-50%) rotate(45deg); /* 完全な中央寄せのための補正 */
  border-bottom: 1px solid #15bfab;
  border-left: 1px solid transparent;
  border-right: 1px solid #15bfab;
  border-top: 0px solid transparent; /* 矢印の色や大きさはお好みで変更可能 */
  width: 6px;
  height: 6px;
  pointer-events: none; /* 矢印部分へのマウスイベントを防ぐ */
}
.salonai-box-content-strategy-child-select .custom-dropdown .selected .budget-title {
  color: #15bfab;
  display: inline-block;
  width: 55px;
  text-align: right;
}
.salonai-box-content-strategy-child-select .custom-dropdown .selected .small-text {
  font-size: 12px;
  color: #b3b3b3;
  margin-left: 6px;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  border: 1px solid #15bfab;
  background-color: #fff;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 5px;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.option {
  padding: 3px;
  font-weight: normal;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.option:hover {
  background-color: #f0f0f0;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.option .budget-title {
  color: #15bfab;
  display: inline-block;
  width: 55px;
  text-align: right;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.option .small-text {
  font-size: 12px;
  color: #b3b3b3;
  margin-left: 6px;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.option .ask-text {
  font-size: 10px;
  text-align: center;
  display: block;
  margin: auto;
  padding-left: 8px;
  margin-bottom: 3px;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.disable-item {
  display: flex;
  cursor: default;
  color: #b3b3b3;
  font-size: 14px;
}
.salonai-box-content-strategy-child-select .custom-dropdown ul.options li.disable-item:hover {
  background-color: white;
}

.salonai-box-content-targetai-keywords-child-area {
  padding: 16px;
  background: #f0f0f0;
  position: relative;
  border-radius: 4px;
  max-width: 355px;
}
.salonai-box-content-targetai-keywords-child-area .salonai-box-content-targetai-keywords-child-area-text {
  background-color: white;
  height: 330px;
  overflow: scroll;
}
.salonai-box-content-targetai-keywords-child-area .salonai-box-content-targetai-keywords-child-area-text table {
  width: 100%;
  padding: 8px;
}
.salonai-box-content-targetai-keywords-child-area .salonai-box-content-targetai-keywords-child-area-text table tr {
  height: 25px;
  font-size: 10px;
  color: #b3b3b3;
  border-bottom: 1px solid #f0f0f0;
}
.salonai-box-content-targetai-keywords-child-area .salonai-box-content-targetai-keywords-child-area-text table td {
  border-bottom: 1px solid #f0f0f0;
}

.salonai-box-content-targetai-child-area {
  padding: 20px 20px 30px;
  background: #f0f0f0;
  position: relative;
  border-radius: 4px;
  max-width: 600px;
}
.salonai-box-content-targetai-child-area .salonai-box-content-targetai-child-area-text {
  font-size: 9.5px;
  color: #b3b3b3;
}
.salonai-box-content-targetai-child-area .salonai-box-content-targetai-child-area-text .address {
  display: flex;
}
.salonai-box-content-targetai-child-area .salonai-box-content-targetai-child-area-text .address .address-title {
  width: 40px;
  display: inline-block;
}
.salonai-box-content-targetai-child-area .salonai-box-content-targetai-child-area-text .address .address-subtitle {
  margin: 0 3px 0 0;
}
.salonai-box-content-targetai-child-area .salonai-box-content-targetai-child-area-text .address .address-value {
  flex: 1;
  display: inline-block;
}

.salonai-box-title-right-alert {
  font-size: 9.5px;
  color: #ff595b;
  margin: 0 3px 0 0;
  display: none;
}

.salonai-box-title-right-alert.save-caution {
  display: block;
}

button.salonai-box-content-targetai-child-area-button {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 9.5px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  padding: 3px 10px;
  border-radius: 4px;
  bottom: 7px;
  right: 5px;
}
button.salonai-box-content-targetai-child-area-button.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}

/*************** 
3.クリエイティブAIのscss
***************/
.salonai-box-content-creativeai {
  display: flex;
  justify-content: flex-start;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-child-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #b3b3b3;
  position: relative;
  font-weight: 600;
  margin: 0 0 4px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-child-title .comming-soon span {
  font-size: 14px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left {
  width: 247.8px;
  margin: 0 45px 0px 0px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-left-child-button-warp {
  position: relative;
  margin: 0 0px 0px 7px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-title-button {
  width: 120px;
  font-size: 9.5px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  padding: 3px 10px;
  border-radius: 3px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-title-button.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-image {
  margin: 10px 0 0;
  position: relative;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-image-sample-alert {
  width: 32px;
  height: 32px;
  background: #ff595b;
  position: absolute;
  font-size: 18px;
  z-index: 99;
  right: -12px;
  top: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  border-radius: 100px;
  letter-spacing: -1px;
  font-size: 20px;
  font-weight: 700;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right {
  margin: 0 -20px 0 0;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right .salonai-box-content-targetai-child-area-campaign {
  display: flex;
  align-items: center;
  margin: 0 0 5px 0;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right .salonai-box-content-targetai-child-area-campaign select {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  font-size: 14px;
  padding: 5px;
  height: 40px;
  width: 160px;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right .salonai-box-content-targetai-child-area-campaign input {
  font-size: 14px;
  border: 1px solid #15bfab;
  background-color: #FFF;
  color: #4d4d4d;
  box-sizing: border-box;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  width: 160px;
  height: 40px;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right .salonai-box-content-targetai-child-area-campaign input::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right .salonai-box-content-targetai-child-area-campaign input::placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai .salonai-box-content-targetai-right .salonai-box-content-targetai-child-area-campaign div {
  margin: 0 0 0 4px;
  font-size: 14px;
  color: #b3b3b3;
}

.salonai-box-content-creativeai-child-area-campaign,
.salonai-strategy-input-area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 5px;
}
.salonai-box-content-creativeai-child-area-campaign select,
.salonai-strategy-input-area select {
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  height: 40px;
  width: 160px;
  margin: 0 5px 0 0;
  padding: 0 5px;
}
.salonai-box-content-creativeai-child-area-campaign input,
.salonai-strategy-input-area input {
  font-size: 14px;
  border: 1px solid #15bfab;
  background-color: #FFF;
  color: #4d4d4d;
  box-sizing: border-box;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  width: 160px;
  height: 40px;
}
.salonai-box-content-creativeai-child-area-campaign input::-moz-placeholder, .salonai-strategy-input-area input::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai-child-area-campaign input::placeholder,
.salonai-strategy-input-area input::placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai-child-area-campaign div,
.salonai-strategy-input-area div {
  margin: 0 0 0 4px;
  font-size: 14px;
  color: #b3b3b3;
}

/*************** 
2.ランディングページAIのscss
***************/
.salonai-box-content-lp-ai {
  display: flex;
}
.salonai-box-content-lp-ai .salonai-box-content-lp-ai-left {
  margin: 0 20px 0 0;
  width: 430px;
}
.salonai-box-content-lp-ai .lp-ai-iframe-container {
  width: 430px;
  height: 1000px;
  border: 1px solid #f0f0f0;
}
.salonai-box-content-lp-ai .lp-ai-iframe-container #iframe-container {
  overflow: scroll; /* 常にスクロールバーを表示 */
}
.salonai-box-content-lp-ai .salonai-box-content-lp-ai-right-title {
  font-size: 20px;
  font-weight: bold;
}
.salonai-box-content-lp-ai-left-child {
  margin: 0 0 30px 0;
  width: 287px;
}

.salonai-box-content-lp-ai-left-child input {
  display: none;
}
.salonai-box-content-lp-ai-left-child label {
  background-color: white;
  width: 90px;
  height: 33px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin: 0 5px 0 0;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  cursor: pointer;
}
.salonai-box-content-lp-ai-left-child label:hover {
  opacity: 0.8;
}
.salonai-box-content-lp-ai-left-child input:checked + label {
  background-color: #15bfab;
  color: #fff;
}

.salonai-box-content-lp-ai-child-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.salonai-box-content-lp-ai-child-select select {
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  height: 33px;
  margin: 0 5px 0 0;
  padding: 0 5px;
}
.salonai-box-content-lp-ai-child-select div {
  padding: 0 3px;
  color: #b3b3b3;
}

.salonai-box-content-lp-ai-child-area {
  padding: 20px 20px 30px;
  background: #f0f0f0;
  position: relative;
  border-radius: 4px;
  max-width: 600px;
}
.salonai-box-content-lp-ai-child-area .salonai-box-content-lp-ai-child-area-text {
  font-size: 9.5px;
  color: #b3b3b3;
}
.salonai-box-content-lp-ai-child-area .salonai-box-content-lp-ai-child-area-text .address {
  display: flex;
}
.salonai-box-content-lp-ai-child-area .salonai-box-content-lp-ai-child-area-text .address .address-title {
  width: 40px;
  display: inline-block;
}
.salonai-box-content-lp-ai-child-area .salonai-box-content-lp-ai-child-area-text .address .address-subtitle {
  margin: 0 3px 0 0;
}
.salonai-box-content-lp-ai-child-area .salonai-box-content-lp-ai-child-area-text .address .address-value {
  flex: 1;
  display: inline-block;
}

.salonai-box-title-right-alert {
  font-size: 9.5px;
  color: #ff595b;
  margin: 0 3px 0 0;
  letter-spacing: -0.7px;
  display: none;
}

.salonai-box-title-draft-alert {
  font-size: 9.5px;
  color: #fff;
  margin: 0 3px 0 0;
  letter-spacing: -0.7px;
}

.salonai-box-title-right-alert.save-caution {
  display: block;
}

button.salonai-box-content-lp-ai-child-area-button {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 9.5px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  padding: 3px 10px;
  border-radius: 4px;
  bottom: 7px;
  right: 5px;
}
button.salonai-box-content-lp-ai-child-area-button.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}

/*************** 
3.クリエイティブAIのscss
***************/
.salonai-box-content-creativeai {
  display: flex;
  justify-content: flex-start;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-child-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #b3b3b3;
  position: relative;
  font-weight: 600;
  margin: 0 0 4px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-child-title .comming-soon span {
  font-size: 14px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left {
  width: 247.8px;
  margin: 0 45px 0px 0px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-left-child-button-warp {
  position: relative;
  margin: 0 0px 0px 7px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-title-button {
  width: 120px;
  font-size: 9.5px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  padding: 3px 10px;
  border-radius: 3px;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-title-button.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-image {
  margin: 10px 0 0;
  position: relative;
}
.salonai-box-content-creativeai .salonai-box-content-creativeai-left .salonai-box-content-creativeai-child-image-sample-alert {
  width: 32px;
  height: 32px;
  background: #ff595b;
  position: absolute;
  font-size: 18px;
  z-index: 99;
  right: -12px;
  top: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  border-radius: 100px;
  letter-spacing: -1px;
  font-size: 20px;
  font-weight: 700;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right {
  margin: 0 -20px 0 0;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right .salonai-box-content-lp-ai-child-area-campaign {
  display: flex;
  align-items: center;
  margin: 0 0 5px 0;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right .salonai-box-content-lp-ai-child-area-campaign select {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  font-size: 14px;
  padding: 5px;
  height: 40px;
  width: 160px;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right .salonai-box-content-lp-ai-child-area-campaign input {
  font-size: 14px;
  border: 1px solid #15bfab;
  background-color: #FFF;
  color: #4d4d4d;
  box-sizing: border-box;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  width: 160px;
  height: 40px;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right .salonai-box-content-lp-ai-child-area-campaign input::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right .salonai-box-content-lp-ai-child-area-campaign input::placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai .salonai-box-content-lp-ai-right .salonai-box-content-lp-ai-child-area-campaign div {
  margin: 0 0 0 4px;
  font-size: 14px;
  color: #b3b3b3;
}

.salonai-box-content-creativeai-child-area-campaign,
.salonai-strategy-input-area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 5px;
}
.salonai-box-content-creativeai-child-area-campaign select,
.salonai-strategy-input-area select {
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  height: 40px;
  width: 160px;
  margin: 0 5px 0 0;
  padding: 0 5px;
}
.salonai-box-content-creativeai-child-area-campaign input,
.salonai-strategy-input-area input {
  font-size: 14px;
  border: 1px solid #15bfab;
  background-color: #FFF;
  color: #4d4d4d;
  box-sizing: border-box;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  width: 160px;
  height: 40px;
}
.salonai-box-content-creativeai-child-area-campaign input::-moz-placeholder, .salonai-strategy-input-area input::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai-child-area-campaign input::placeholder,
.salonai-strategy-input-area input::placeholder {
  color: #b3b3b3;
  font-weight: 300;
}
.salonai-box-content-creativeai-child-area-campaign div,
.salonai-strategy-input-area div {
  margin: 0 0 0 4px;
  font-size: 14px;
  color: #b3b3b3;
}

/*************** 
5.メッセージAIのscss
***************/
.salonai-box-content-message-ai {
  display: flex;
  grid-gap: 10px;
  gap: 10px;
}
.salonai-box-content-message-ai .salonai-box-content-message-ai-left {
  display: flex;
  flex-direction: column;
  grid-gap: 40px;
  gap: 40px;
}
.salonai-box-content-message-ai .message-container {
  display: flex;
  flex-direction: column;
}
.salonai-box-content-message-ai .coupon-ui-container {
  width: 255px;
}
.salonai-box-content-message-ai .salonai-box-content-message-ai-right-title {
  font-size: 20px;
  font-weight: bold;
}

.coupon-report-contents {
  display: flex;
}

.coupon-message-type-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}

.coupon-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
}
.coupon-container hr {
  border: none;
  border-top: 1px solid #ccc;
}

.coupon-img {
  /* 実際のクーポン画像 */
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.coupon-body-container {
  padding: 16px;
}

.coupon-title {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0;
  color: #262626;
}

.coupon-description {
  font-size: 14px;
  line-height: 1.4;
  color: #262626;
  margin: 8px 0;
}

.coupon-button-container {
  height: 70px;
  text-align: center;
  margin: 0 12px;
}

.coupon-button {
  display: inline-block;
  padding: 12px 16px;
  font-size: 17px;
  color: #ffffff;
  background-color: #15bfab;
  border: none;
  border-radius: 6px;
  width: 100%;
  text-decoration: none;
}

.salonai-title-flex {
  display: flex;
  align-items: center;
}
.salonai-title-flex .salonai-box-content-adplatfrom-child-title-button {
  font-size: 9.5px;
  border: 1px solid #15bfab;
  color: #15bfab;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: white;
  padding: 3px 10px;
  border-radius: 3px;
  margin: 0 0 0 7px;
}
.salonai-title-flex .salonai-box-content-adplatfrom-child-title-button.active {
  color: white !important;
  background: #15bfab !important;
  font-weight: 600;
}

.salonai-adplatform {
  background: #f0f0f0;
  border-radius: 4px;
  margin: 0 0 12px;
  padding: 10px;
  height: 110px;
}
.salonai-adplatform img {
  width: 90px;
}

.salonai-adplatform .salonai-adplatform-status {
  display: block;
  padding: 0 0 15px;
}
.salonai-adplatform .salonai-adplatform-status-head {
  grid-area: 1/1/2/3;
  font-size: 14px;
  color: #b3b3b3;
}
.salonai-adplatform .salonai-adplatform-status-head.active {
  color: #15bfab;
  font-size: 14px;
}
.salonai-adplatform .salonai-adplatform-status-ad {
  grid-area: 2/1/3/2;
  font-size: 13px;
  letter-spacing: -0.5px;
  font-weight: bold;
  margin: 3px 0 0;
  line-height: 1.3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.salonai-adplatform .salonai-adplatform-status-ad .platform-monthly-budget {
  text-align: right;
  font-size: 14px;
  font-weight: normal;
  color: #b3b3b3;
}
.salonai-adplatform .salonai-adplatform-status-ai {
  grid-area: 2/2/3/3;
  margin: 0 0px 0 20px;
  font-size: 14px;
  color: #b3b3b3;
}
.salonai-adplatform .salonai-adplatform-status-ai.active {
  color: #15bfab;
}

.salonai-adplatform-1 .salonai-adplatform-status-ad,
.salonai-adplatform-3 .salonai-adplatform-status-ad {
  margin-top: 0px;
}
.salonai-adplatform-1 .salonai-adplatform-status-ad img,
.salonai-adplatform-3 .salonai-adplatform-status-ad img {
  width: 47px;
}

/************
CACレポートの大枠レイアウト 
**************/
.cac-main-report .cac-main-report-title {
  display: flex;
  align-items: center;
}
.cac-main-report .cac-main-report-title .cac-main-report-titlesub {
  color: #15bfab;
  margin: 0 0 0 5px;
  letter-spacing: 1px;
  text-decoration: underline;
  cursor: pointer;
  font-size: 15pt;
  font-weight: bold;
}
.cac-main-report .cac-main-report-title .cac-report-start-date {
  color: #b3b3b3;
  margin-left: 10px;
}

.wrapper-cac {
  width: 100%;
  margin: 0 auto;
  padding: 0px 20px 0px;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  height: 100vh;
  overflow: hidden;
}

.cac-main-wrapper {
  grid-area: 1/1/2/2;
  width: 100%;
  margin: 20px 0 0;
  border-radius: 5px;
  overflow-y: scroll;
}

.cac-main {
  position: relative;
  width: 100%;
  border-radius: 5px;
}

.cac-main-report-shadow-box {
  position: relative;
  border-radius: 7px;
}

.cac-main-report {
  margin-bottom: 14px;
  padding: 12px;
  position: relative;
  border-radius: 7px;
  background: white;
}

.cac-sub-shadow-box {
  grid-area: 1/2/2/3;
  border-radius: 7px;
  margin: 20px 0 0;
  position: relative;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.cac-sub {
  background: white;
  position: relative;
  border-radius: 7px;
}

.cac-main-improvement-recommend {
  position: relative;
  background: #ff595b;
  border-radius: 7px;
  margin: 0 auto 15px;
  padding: 12px 15px 12px;
}
.cac-main-improvement-recommend:before {
  content: "";
  display: block;
  width: 14px;
  height: 15px;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  background: #ff595b;
}

.cac-main-ai-report-shadow-box {
  box-shadow: 0 2pt 40pt rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
  border-radius: 7px;
}

.cac-main-ai-report .salonai-main {
  margin: 0;
  z-index: 0;
}
.cac-main-ai-report .salonai-main::before {
  content: none;
}
.cac-main-ai-report .salonai-main .coupon-report-contents {
  height: 400px;
}
.cac-main-ai-report .salonai-main .coupon-ui-container {
  width: 230px;
}
.cac-main-ai-report .salonai-main .salonai-box-content-lp-ai-left {
  margin: 0;
  width: 230px;
}
.cac-main-ai-report .salonai-main .coupon-container {
  transform: scale(0.73);
  transform-origin: left top; /* スケールの基準点を中央に設定 */
  transition: transform 0.3s ease; /* スムーズなアニメーション */
}
.cac-main-ai-report .salonai-main #content-container {
  transform: scale(0.5);
  transform-origin: left top; /* スケールの基準点を中央に設定 */
  transition: transform 0.3s ease; /* スムーズなアニメーション */
}

/*********
CACレポートのサロン集客AIからの改善提案
*********/
.cac-main-improvement-recommend-title {
  color: #fff;
  letter-spacing: 4px;
  font-weight: 800;
  font-size: 20pt;
}

.cac-main-improvement-recommend-main {
  background: white;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 12px 10px 10px;
}
.cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text {
  display: flex;
  align-items: flex-end;
  /* 1000px以下の時は改善施策は2段にしたい */
}
@media screen and (max-width: 1000px) {
  .cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text {
    display: block !important;
  }
}
.cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text .cac-main-improvement-recommend-main-allcount {
  color: #ff595b;
  letter-spacing: 1.5px;
  padding: 0 0 0px;
  border-bottom: 2px solid #ff595b;
  font-size: 14px;
  display: inline-flex;
  align-items: flex-end;
}
@media screen and (max-width: 1000px) {
  .cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text .cac-main-improvement-recommend-main-allcount:first-child {
    margin: 0 0 4px !important;
  }
}
.cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text .cac-main-improvement-recommend-main-allcount:first-child {
  margin: 0 19px 0 0;
}
.cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text .cac-main-improvement-recommend-main-allcount .large {
  font-size: 20pt;
  margin: 0 0 -3px 0;
  font-weight: 600;
}
.cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-text .cac-main-improvement-recommend-main-allcount .large-circle {
  font-size: 20pt;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: #ff595b;
  border-radius: 50px;
  color: white;
  margin: 0 0 3px 0;
  font-weight: 600;
}
.cac-main-improvement-recommend-main .cac-main-improvement-recommend-main-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #ff595b;
  cursor: pointer;
  height: 38px;
  width: 115px;
  background: white;
  border-radius: 4px;
  border: 1px solid #ff595b;
}

/********************
CACレポートのメインコンテンツ部分
*******************/
.cac-main-report-summary-cost {
  padding: 4px 20px;
}

.cac-main-report-summary-cost-title {
  font-weight: 800;
  color: #262626;
  margin: 0 10px 0 0;
  line-height: 1.4;
  height: 36px;
  font-size: 18pt;
  color: #262626;
}
.cac-main-report-summary-cost-title img {
  max-width: 120px;
  max-height: 36px;
}
.cac-main-report-summary-cost-title img.platform-icon-image {
  display: none;
}

.cac-main-report-summary-cost-budget-cost {
  font-weight: 800;
  font-size: 25pt;
  line-height: 1;
}

.cac-main-report-summary-cost-budget {
  text-align: center;
}
.cac-main-report-summary-cost-budget .cac-main-report-summary-cost-budget-title {
  font-size: 14px;
  font-weight: 300;
  color: #4d4d4d;
}

.cac-main-report-summary-keywords-title {
  font-size: 14px;
  font-weight: 300;
  color: #4d4d4d;
  text-align: center;
}

.cac-main-report-keywords-summary {
  margin: 3px auto 0;
  text-align: center;
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.cac-main-report-summary-keywords-wrapper .salonai-list-wrapper {
  padding: 5px;
  background-color: white;
  height: 75px;
  overflow: scroll;
}
.cac-main-report-summary-keywords-wrapper .salonai-list-wrapper td {
  font-size: 10px;
  padding: 3px;
}

.cac-main-report-summary-creatives-img-wrapper {
  display: flex;
  justify-content: center;
}
.cac-main-report-summary-creatives-img-wrapper img {
  height: 64px;
  margin: 5px;
}

.grid-background-box {
  position: relative;
}
.grid-background-box div {
  z-index: 1;
}
.grid-background-box .grid-background {
  position: absolute;
  background: #f0f0f0;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 15px;
}

.term-180days {
  margin-left: 6px;
  color: #b3b3b3;
  font-size: 10px;
  letter-spacing: -1px;
  height: 24px;
  align-items: end;
  display: flex;
}

.cac-grid-parent {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
.cac-grid-parent.grid-three {
  grid-template-columns: repeat(3, 1fr);
}
.cac-grid-parent.grid-three .one-thirds-left {
  grid-column: 1;
  width: 100%;
}
.cac-grid-parent.grid-three .one-thirds-center {
  grid-column: 2;
  width: 100%;
}
.cac-grid-parent.grid-three .one-thirds-right {
  grid-column: 3;
  width: 100%;
}
.cac-grid-parent.grid-three .two-thirds {
  grid-column: span 2/span 2;
  width: 100%;
}
.cac-grid-parent.grid-three .one-thirds {
  grid-column-start: 3;
  width: 100%;
}

.cac-grid-parent.grid-three > * {
  /* これだけで3列均等に */
  min-width: 0;
  /* width:100% はいったん外します */
}

.cac-main-report-cost {
  background: #f0f0f0;
  padding: 12px;
  margin: 0 auto 14px;
}
.cac-main-report-cost .cac-main-report-cost-titleflex {
  display: flex;
  align-items: center;
  margin: 0 0 5px;
}
.cac-main-report-cost .cac-main-report-cost-titleflex .cac-main-report-cost-titleflex-faq {
  width: 20px;
  margin: 0 0 0 4px;
  cursor: pointer;
}
.cac-main-report-cost .cac-main-report-cost-titleflex .cac-main-report-cost-titleflex-faq:hover {
  opacity: 0.8;
}
.cac-main-report-cost .cac-main-report-cost-titleflex-text {
  font-weight: 800;
  font-size: 18pt;
}
.cac-main-report-cost .cac-main-report-cost-titleflex-question {
  cursor: pointer;
  width: 20px;
  margin: 0 0 0 4px;
}
.cac-main-report-cost .cac-main-report-cost-titleflex-question img {
  width: 20px;
}
.cac-main-report-cost .cac-main-report-cost-titleflex-question:hover {
  opacity: 0.8;
}
.cac-main-report-cost .cac-main-report-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}
.cac-main-report-cost .cac-main-report-cost-grid.grid-one {
  grid-template-columns: repeat(1, 1fr);
}
.cac-main-report-cost .cac-main-report-cost-grid.grid-three {
  grid-template-columns: repeat(3, 1fr);
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child {
  background: white;
  border-radius: 4px;
  height: 94px;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child.cac-main-report-cost-grid-child-head {
  height: 75px;
  overflow: scroll;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-title {
  height: 14px;
  font-size: 14px;
  font-weight: 300;
  color: #4d4d4d;
  margin: 6px 0 4px;
  text-align: center;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-cost {
  line-height: 1;
  font-weight: 800;
  margin: 0 auto 10px;
  text-align: center;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-cost.plus {
  background-image: linear-gradient(-30deg, #4f9ad6 0%, #14ceb8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-cost.people {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  margin: 0 auto;
  justify-content: center;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-cost.people .unit {
  margin: 0 0 5px;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-cost .unit {
  font-size: 40px;
}
.cac-main-report-cost .cac-main-report-cost-grid .cac-main-report-cost-grid-child .cac-main-report-cost-grid-child-cost .large {
  font-size: 60px;
}

.cac-main-report-graph {
  background: #f0f0f0;
  padding: 12px;
  margin: 0 auto 15px;
}
.cac-main-report-graph .cac-main-report-graph-box-title {
  display: flex;
  align-items: flex-end;
  margin: 0 0 5px;
}
.cac-main-report-graph .cac-main-report-graph-box-title .cac-main-report-graph-box-title-text {
  font-weight: 800;
  color: #262626;
  margin: 0 10px 0 0;
  line-height: 1.4;
  font-size: 18pt;
  color: #262626;
}
.cac-main-report-graph .cac-main-report-graph-box-title .cac-main-report-graph-box-title-sub {
  margin: 0 10px 0 0;
  line-height: 1.4;
  font-size: 14px;
  font-weight: 300;
  color: #4d4d4d;
}
.cac-main-report-graph .cac-main-report-graph-box-title .cac-main-report-cost-titleflex-faq {
  width: 20px;
  margin: 0 0 0 4px;
}
.cac-main-report-graph .cac-main-report-graph-box-title .cac-main-report-graph-box-title-question {
  width: 20px;
  cursor: pointer;
}
.cac-main-report-graph .cac-main-report-graph-box-title .cac-main-report-graph-box-title-question:hover {
  opacity: 0.8;
}

#salon_ai_platform_id_1 .cac-sub-ads-card-title-ad-img,
#salon_ai_platform_id_3 .cac-sub-ads-card-title-ad-img {
  margin-top: 8px;
}
#salon_ai_platform_id_1 .cac-sub-ads-card-title-ad-img img,
#salon_ai_platform_id_3 .cac-sub-ads-card-title-ad-img img {
  width: 47px;
}

#salon_ai_platform_id_5 {
  border: none;
}

/****************
CACレポートのlead-CAC、CACのグラフ
***************/
.cac-main-report-graph-box-content {
  bottom: 17px;
  width: calc(100% - 10px);
  height: 315px;
  border-radius: 4px;
  background: white;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 5px 10px 15px;
  margin: 0 auto 30px;
  overflow: hidden;
}
@keyframes grow {
  from {
    height: 0%;
  }
  to {
    height: var(--target-height);
  }
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar {
  color: white;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.15);
  width: calc((100% - 10px) / 12);
  margin: 0 5px 0px;
  position: relative;
  background-image: linear-gradient(-30deg, #4f9ad6 0%, #14ceb8 100%);
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate {
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-name: grow;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(1) {
  animation-delay: 0s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(2) {
  animation-delay: 0.055s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(3) {
  animation-delay: 0.11s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(4) {
  animation-delay: 0.165s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(5) {
  animation-delay: 0.22s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(6) {
  animation-delay: 0.275s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(7) {
  animation-delay: 0.33s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(8) {
  animation-delay: 0.385s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(9) {
  animation-delay: 0.44s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(10) {
  animation-delay: 0.495s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(11) {
  animation-delay: 0.55s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(12) {
  animation-delay: 0.605s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar.animate:nth-child(13) {
  animation-delay: 0.66s;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar .cac-main-report-graph-box-content-bar-cost {
  position: absolute;
  right: 0;
  left: 0;
  top: 5px;
  color: white;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0px;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content-bar .cac-main-report-graph-box-content-bar-people {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 6px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
}
.cac-main-report-graph-box-content .cac-main-report-graph-box-content {
  width: calc((100% - 40px) / 2);
  margin: 0 5px;
  position: relative;
}

/****************
CACレポートの右サイドバーCACランキング
****************/
.cac-sub {
  overflow: hidden;
}

.cac-sub-title {
  margin: 15px auto 2px;
  width: calc(100% - 30px);
}

.cac-sub-select {
  margin: 0 auto 10px;
  width: calc(100% - 30px);
}
.cac-sub-select select {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #15bfab;
  border-radius: 5px;
  color: #15bfab;
  font-size: 14px;
  padding: 0px 5px;
  height: 30px;
  width: 100%;
}

.cac-sub-ads {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  padding: 0 0 120px;
}

.cac-sub-ads .cac-sub-ads-card:nth-child(n+2) .cac-sub-ads-card-title {
  font-size: 14px;
}

.cac-sub-ads-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: calc(100% - 30px);
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
  margin: 20px auto 0px;
  padding: 15px 10px 30px 10px;
  position: relative;
  background-clip: padding-box, border-box !important;
  background-origin: border-box;
  border-radius: 6px;
  border: 5px solid transparent;
}
.cac-sub-ads-card.active {
  border: 5px solid transparent;
  background: linear-gradient(white, white), linear-gradient(-30deg, #14ceb8 0%, #4f9ad6 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.cac-sub-ads-card.active:hover {
  opacity: 1 !important;
  cursor: pointer;
}
.cac-sub-ads-card:hover {
  opacity: 0.7;
  cursor: pointer;
}
.cac-sub-ads-card .cac-sub-ads-card-title {
  color: #262626;
  letter-spacing: 1px;
  font-size: 18pt;
  font-weight: 800;
  height: 20px;
  margin: 0 0 25px;
}
.cac-sub-ads-card .cac-sub-ads-card-title-ad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 22px;
  height: 27px;
}
.cac-sub-ads-card .cac-sub-ads-card-title-ad .cac-sub-ads-card-title-ad-img {
  width: 100px;
}
.cac-sub-ads-card .cac-sub-ads-card-title-ad .cac-sub-ads-card-title-ad-subtext {
  font-size: 13px;
  letter-spacing: -0.5px;
  font-weight: bold;
  line-height: 1.3;
}
.cac-sub-ads-card .cac-sub-ads-card-title-ad .cac-sub-ads-card-title-ad-ranking {
  text-align: right;
  color: #4d4d4d;
  font-size: 12px;
  font-weight: 300;
}

.cac-sub-ads-card-detail {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  font-size: 12px;
  font-weight: 300;
}
.cac-sub-ads-card-detail .cac-sub-ads-card-detail-name {
  text-align: right;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-size: 11px;
}
.cac-sub-ads-card-detail .cac-sub-ads-card-detail-value {
  text-align: right;
  line-height: 1.3;
}
.cac-sub-ads-card-detail .cac-sub-ads-card-detail-value.top-cac {
  background-image: linear-gradient(-30deg, #4f9ad6 0%, #14ceb8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.cac-sub-ads-card-readmore {
  margin: 10px 0 0;
  text-align: right;
  color: #b3b3b3;
  font-size: 12px;
  font-weight: 300;
}

/********************
CACレポート出稿単位での切り替えビュー
*******************/
#report-period-switcher {
  display: contents;
}

#cac-report-switcher {
  display: none;
  width: 99%;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 101;
  margin-top: 28px;
}

.cac-report-switcher-wrapper {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  z-index: 1000;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  overflow-x: scroll;
}
.cac-report-switcher-wrapper .cac-report-switcher-default-wrapper {
  width: 100%;
}
.cac-report-switcher-wrapper .cac-report-switcher-default-wrapper .cac-report-switcher-default {
  padding-left: 35px;
}
.cac-report-switcher-wrapper .selected-show-datepicker, .cac-report-switcher-wrapper .cac-defalut-term-contents {
  cursor: pointer;
  margin: auto 10px;
  color: #fff;
  text-decoration: underline;
}
.cac-report-switcher-wrapper .selected-ad-term {
  border-radius: 4px;
  margin-bottom: 9px;
  font-size: 16px;
  height: 40px;
  width: 220px;
  margin: 15px auto 5px;
  border: 1px solid #15bfab;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #15bfab !important;
  background: white !important;
}

.cac-report-title-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8px;
  justify-content: space-between;
}
.cac-report-title-header .cac-report-period-first-creative img {
  width: 50px;
  box-shadow: 0 2pt 20pt rgba(0, 0, 0, 0.3);
}
.cac-report-title-header .cac-report-period-status .period-status-label {
  display: flex;
  color: white;
  border-radius: 11px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  width: 98px;
  justify-content: center;
}
.cac-report-title-header .cac-report-period-status .period-status-label .strategy-generate-btn-img {
  width: 13px;
  margin-right: 3px;
  margin-top: 2px;
  -o-object-fit: contain;
     object-fit: contain;
}
.cac-report-title-header .cac-report-period-status .period-status-optimizing {
  background-image: linear-gradient(-30deg, #4f9ad6 0%, #14ceb8 100%);
}
.cac-report-title-header .cac-report-period-status .period-status-manual {
  background-color: #262626;
}
.cac-report-title-header .cac-report-period-status .period-status-optimized {
  background-image: linear-gradient(-30deg, #4f9ad6 0%, #14ceb8 100%);
}
.cac-report-title-header .cac-report-period-status .period-status-improve {
  background-color: #ff595b;
}
.cac-report-title-header .cac-report-period-status .period-status-canceled {
  background-color: #b3b3b3;
}
.cac-report-title-header .cac-report-period-status .past-period {
  background-color: #b3b3b3;
  background-image: none;
}

.cac-report-switcher {
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100%;
  margin-bottom: 5px;
}
.cac-report-switcher .before-button, .cac-report-switcher .after-button {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  text-align: center;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  width: 24px;
  list-style: none;
}
.cac-report-switcher .grid {
  max-width: 31%;
  flex: 1; /* 各項目を均等に拡大する */
  text-align: center; /* コンテンツを中央に配置 */
  background-color: white; /* アイテムの背景を透明にする */
  margin: 0 8px;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.13);
  padding: 5px;
  position: relative;
  background-origin: border-box;
  border-radius: 6px;
  border: 3px solid transparent;
}
.cac-report-switcher .grid:hover {
  cursor: pointer;
}
.cac-report-switcher .grid:hover * {
  opacity: 0.95;
}
.cac-report-switcher .grid.active {
  background-clip: padding-box, border-box !important;
  border: 5px solid transparent;
  background: linear-gradient(white, white), linear-gradient(-30deg, #14ceb8 0%, #4f9ad6 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.cac-report-switcher .grid .cac-report-switcher-title-box {
  display: flex;
  flex-direction: row;
  align-items: anchor-center;
}
.cac-report-switcher .grid .cac-report-switcher-title-box .cac-report-period-status {
  margin-right: 6px;
}
.cac-report-switcher .grid .cac-report-switcher-title-box .cac-report-switcher-title {
  font-weight: 700;
  font-size: 16pt;
  color: #b3b3b3;
}
.cac-report-switcher .grid .cac-report-switcher-title-box .current-period {
  color: #262626;
}
.cac-report-switcher .grid .activity-ad-operation-type {
  font-size: 14px;
  color: #b3b3b3;
}
.cac-report-switcher .grid .cac-report-switcher-content-title {
  font-weight: 800;
  font-size: 14pt;
  margin-bottom: 9px;
  justify-self: left;
  color: #b3b3b3;
}
.cac-report-switcher .grid .cac-report-switcher-content-activity-wrapper {
  background-color: #f0f0f0;
  margin-bottom: 5px;
  padding: 10px;
}
.cac-report-switcher .grid .cac-report-switcher-content-activity-wrapper .activity-wrapper {
  background-color: white;
  height: 70px;
  overflow: scroll;
  padding: 3px;
}
.cac-report-switcher .grid .cac-report-switcher-content-activity-wrapper .activity-wrapper div {
  text-align: left;
  font-size: 10px;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper {
  display: flex;
  grid-gap: 5px;
  gap: 5px;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-creatives-wrapper {
  padding: 10px;
  background-color: #f0f0f0;
  width: 50%;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-creatives-wrapper .salonai-images-scroll-wrapper {
  background-color: white;
  padding: 0px 5px;
  height: 100px;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-creatives-wrapper .salonai-images-scroll-wrapper .salonai-images-container {
  display: flex;
  justify-content: space-evenly;
  overflow: scroll;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-creatives-wrapper .salonai-images-scroll-wrapper img {
  width: 100px;
  padding: 5px;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-keyword-wrapper {
  padding: 10px;
  background-color: #f0f0f0;
  width: 50%;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-keyword-wrapper .salonai-list-wrapper {
  padding: 5px;
  background-color: white;
  height: 100px;
  overflow: scroll;
}
.cac-report-switcher .grid .cac-report-switcher-content-middle-wrapper .cac-report-switcher-content-keyword-wrapper .salonai-list-wrapper td {
  font-size: 10px;
  padding: 3px;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper {
  background-color: #f0f0f0;
  padding: 10px;
  margin-top: 5px;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report {
  background-color: white;
  display: grid;
  grid-template-rows: 20px;
  justify-content: stretch;
  font-size: 14px;
  padding: 5px;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 10px;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-title {
  display: block;
  justify-content: left;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-value {
  display: block;
  justify-content: right;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-total-budget {
  grid-row: 1/2;
  grid-column: 1/3;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-click-cost {
  grid-row: 2/3;
  grid-column: 1/2;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-click-count {
  grid-row: 2/3;
  grid-column: 2/3;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-add-friend-cost {
  grid-row: 3/4;
  grid-column: 1/2;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-add-friend-count {
  grid-row: 3/4;
  grid-column: 2/3;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-new-customer-cost {
  grid-row: 4/5;
  grid-column: 1/2;
}
.cac-report-switcher .grid .cac-report-switcher-content-mini-cac-report-wrapper .mini-cac-report .mini-cac-report-row-new-customer-count {
  grid-row: 4/5;
  grid-column: 2/3;
}
.cac-report-switcher .cac-term-contents-wrapper {
  height: 100%;
}
.cac-report-switcher .cac-term-contents {
  height: 95%;
}
.cac-report-switcher .cac-report-switcher-date {
  font-size: 15px;
  color: #b3b3b3;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: anchor-center;
}

/********************
LTVレポートのメインコンテンツ部分
*******************/
#ltv-report-view {
  height: 100vh;
}