@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*************************

  Noto Sans JP Weight

  100 Thin
  200 ExtraLight
  300 Light
  400 Regular
  500 Medium
  600 SemiBold
  700 Bold
  800 ExtraBold
  900 Black

**************************/

/*************************

  @メディアクエリ
  基本：～540px、541px～
  
@media (max-width: 540px) {

}
@media (min-width: 541px) {

}

  ※ただしサイト共通処理に合わせて作る部分は例外とする
  ～768px、769px～などを考慮

**************************/

/*************************

  @keyframes

**************************/
@keyframes fadeIn {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes bounceV {
    0% { transform: translateY(-25%); }
  100% { transform: translateY(25%); }
}

/*************************

  variables

**************************/
html {
  --flowBorderW : 2px;
}

/*************************

  common override
  +
  basic style

**************************/
body, main, p, 
h1, h2, h3, h4, h5, h6, 
ul, ol, li, 
dl, dt, dd {
  font-size: 100%;
  letter-spacing: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

html {
  font-size: 28px;
  letter-spacing: 0.1em;
}
body {
  color: #000;
  line-height: 1.38;
}

img {
  max-width: 100%;
  height: auto;
}

em { font-style: normal; }

@media (max-width: 540px){
  html {
    /* font-size: 6.85vw; */
    font-size: 24px;
  }
}

/*************************

  chatbot: none
  #bedore-webagent-inner

**************************/
#bedore-webagent-inner {
  display: none;
}

/*************************

  common class

**************************/
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.ls-0 { letter-spacing: 0; }

.ls-nega-0025 { letter-spacing: -0.025em; }
.ls-0025 { letter-spacing: 0.025em; }
.ls-0050 { letter-spacing: 0.05em; }

.lh-1d25 { line-height: 1.25; }

.fs-90per { font-size: 90%; }

.fc-default { color: #000; }
.fc-strong  { color: #b60081; }
.fc-attention { color: #ce0000; }

.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }

.disp-ib { display: inline-block; }

/*************************

  width
  margin
  padding
  
  単位
  *em  : 主に文章用（自分の文字サイズを参照）
  *rem : 主にブロック構造用（ページの文字サイズを参照）

**************************/
.w-fit-content {
  width: fit-content;
}

.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.mt-0d25em { margin-top: 0.25em; }
.mt-0d5em  { margin-top: 0.5em; }
.mt-0d75em { margin-top: 0.75em; }
.mt-1em    { margin-top: 1em; }
.mt-1d25em { margin-top: 1.25em; }
.mt-1d5em  { margin-top: 1.5em; }
.mt-1d75em { margin-top: 1.75em; }
.mt-2em    { margin-top: 2em; }

.mb-0d25em { margin-bottom: 0.25em; }
.mb-0d5em  { margin-bottom: 0.5em; }
.mb-0d75em { margin-bottom: 0.75em; }
.mb-1em    { margin-bottom: 1em; }
.mb-1d25em { margin-bottom: 1.25em; }
.mb-1d5em  { margin-bottom: 1.5em; }
.mb-1d75em { margin-bottom: 1.75em; }
.mb-2em    { margin-bottom: 2em; }

.mh-auto {
  margin-left:  auto;
  margin-right: auto;
}
.mv-0d5rem {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.mv-1rem {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mv-1d5rem {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.p-0  { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

.pt-0d25em { padding-top: 0.25em; }
.pt-0d5em  { padding-top: 0.5em; }
.pt-0d75em { padding-top: 0.75em; }
.pt-1em    { padding-top: 1em; }
.pt-1d25em { padding-top: 1.25em; }
.pt-1d5em  { padding-top: 1.5em; }
.pt-1d75em { padding-top: 1.75em; }
.pt-2em    { padding-top: 2em; }

.pb-0d25em { padding-bottom: 0.25em; }
.pb-0d5em  { padding-bottom: 0.5em; }
.pb-0d75em { padding-bottom: 0.75em; }
.pb-1em    { padding-bottom: 1em; }
.pb-1d25em { padding-bottom: 1.25em; }
.pb-1d5em  { padding-bottom: 1.5em; }
.pb-1d75em { padding-bottom: 1.75em; }
.pb-2em    { padding-bottom: 2em; }


/*************************

  .*-none

**************************/
@media (min-width: 541px){
  .pc-none {
    display: none !important;
  }
}
@media (max-width: 540px){
  .sp-none {
    display: none !important;
  }
}

/*************************

  .text-*

**************************/
.text-link {
  color: #0877d7;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.05em;
}

/*************************

  .hanging-indent

**************************/
.hanging-indent {
  padding-left: 1em;
  text-indent: -1em;
}
.hanging-indent > *:not(.hanging-indent) {
  text-indent: 0;
}

/*************************

  .step-down

**************************/
.step-down {
  color: transparent;
  text-align: center;
  width: 1.6em;
  height: 0.8em;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: #b60081;
  margin: 0.8em auto;
}

/*************************

  .btn-style

**************************/
.btn-style {
  display: block;
  margin: 1em auto;
  font-size: 100%;

  color: #000;

  width: 100%;
  padding: 0.4em 0.5em;
  border-radius: 0.55em;
  border: 2px solid #000;
  box-shadow: 0 0.2em 0.29em 0 rgba(51,51,51,0.43);

  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-style:not(:has(.bg-element)) ,
.btn-style .bg-element {
  background-image: linear-gradient(to top, #d7d7d7, #fff 49%, #fff);
}
.btn-style .text-wrap {
  font-weight: 700;
}

@media (max-width: 540px){
  .btn-style:hover ,
  .btn-style:active {
    opacity: 0.8;
  }
}

/*************************

  .btn-style.-lead-action

**************************/
.btn-style.-lead-action {
  position: relative;
}
.btn-style.-lead-action::after {
  content: "";
  display: block;

  position: absolute;
  right: 0;
  bottom: -1.2em;
  z-index: 1;

  width: 2.18em;
  height: 2.59em;
  background: no-repeat url(/information_ex/kantan_question/images/icon-pointer.png) center/contain;

  opacity: 0;
  animation: 1s ease-in-out infinite alternate bounceV, 0.4s ease-in 0.2s forwards fadeIn;
}

/*************************

  サイトcommonで
  電話リンクにならない場合
  ポインターを消す
  
  ※マネーサイトでは769px～は押せない模様なので踏襲

**************************/
.is-pc .a-phonelink.btn-style.-lead-action.-pc-lead-none::after {
  display: none;
}

@media (min-width: 769px){
  .a-phonelink.btn-style.-lead-action.-pc-lead-none::after {
    display: none;
  }
}

/*************************

  .btn-style.-arrow-left

**************************/
.btn-style.-arrow-left::before {
  content: "";
  display: block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  padding: 0.8em 0.5em;
  background: no-repeat url(/information_ex/kantan_question/images/icon-arrow-left.png) center/contain;
}

/*************************

  .btn-style.-with-icon 

**************************/
.btn-style.-with-icon .icon-wrap {
  width: 2.4em;
  height: 2.4em;
  margin: 0 0.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
}
.btn-style.-with-icon .icon-wrap img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.btn-style.-with-icon .text-wrap {
  line-height: 1.18;
  flex-grow: 1;
  font-weight: 700;
}

/*************************

  .btn-style.-with-heading

**************************/
.btn-style.-with-heading {
  padding: 2px;
  display: block;
  background: #fff;
}
.btn-style.-with-heading .contents-group {
  overflow: hidden;
  border-radius: 0.5em;
  border: solid 2px #bcbcbc;
}
.btn-style.-with-heading .btn-heading {
  color: #fff;
  background-color: #b60081;
  text-align: center;
  padding: 0.05em 0.5em 0.2em;
}
.btn-style.-with-heading .btn-body {
  display: flex;
  justify-content: center;
  padding: 0.6em 0.2em 0.8em;
}

/*************************

  .kantan-q-wrap 
  .kantan-q-header

**************************/
.kantan-q-wrap {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt" 1;
  font-weight: 500;
  font-style: normal;
  
  position: relative;
}

.kantan-q-header {
  padding: 0.47rem 0;
  border-bottom: solid 2px #8a8a8a;
  background-color: #fff;
}
.kantan-q-header.-kantanq-top {
  border-bottom: none;
}

.kantan-q-header .header-group {
  display: flex;
  align-items: center;
}
.kantan-q-header .btn-style.-arrow-left {
  width: fit-content;
  margin: 0;
  padding: 0.25em 1em;
}

.kantan-q-header .header-sitelogo {
  width: 168px;
  margin: 0 auto;
}
.kantan-q-header .header-sitelogo img {
  display: block;
}

.kantan-q-header:has(.btn-style) .header-sitelogo {
  width: 6.94em;
}

@media (max-width: 540px) {
  .kantan-q-header.-kantanq-top {
    padding: 0.2rem 0;
  }
}


/*************************

  .fixed-header-kq

  ※配置スペースの高さはJSで適宜調整される
  （ロード／リサイズ／スクロール等の時）
  ※ただし処理されるまでに間があるため、初期設定としてヘッダーの数値を入れておく

**************************/
.kantan-q-wrap:has(.fixed-header-kq) {
  padding-top: 3.35em;
}

.kantan-q-header.fixed-header-kq {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/*************************

  .*-frame

**************************/
.kantan-q-frame {
  max-width: 640px;
  padding: 0 0.55rem;
  margin: 0 auto;
}

.kantan-q-frame.-top-menu {
  padding: 0 0.76rem;
}

/*************************

  .ttl*

**************************/
.ttl-fullwidth {
  text-align: center;
  background-color: #b60081;
  color: #fff;
  font-size: 100%;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.4em;
  padding: 0.2em 0.2em;
}

.ttl-rounded {
  text-align: center;
  background-color: #b60081;
  color: #fff;
  font-size: 100%;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 0.868em;
  margin: 1em auto 0.8em;
  padding: 0.3em;
}

@media (min-width: 541px) {
  .ttl-fullwidth {
    padding: 0.6em 0.2em;
    margin-bottom: 0.8em;
    font-size: 120%;
  }
}

/*************************

  .ttl-with-image-*

**************************/

.ttl-with-image-main {
  font-size: 133%;
  position: relative;

  display: flex;
  align-items: center;

  padding-bottom: 0.7em;
  margin: 0.5em auto;
}
.ttl-with-image-main .cont-image {
  width: 1.8em;
  flex-shrink: 0;
  margin: 0 0.3em;
}
.ttl-with-image-main .cont-text {
  line-height: 1.25;
  font-weight: 700;
}

.ttl-with-image-main::after {
  content: "";
  display: block;
  height: 0.2em;
  border-radius: 0.1em;
  background-color: #b60081;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.ttl-with-image-sub {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ttl-with-image-sub .cont-image {
  width: 1.5em;
  margin-right: 0.3em;
}
.ttl-with-image-sub .cont-text {
  letter-spacing: 0.05em;
  font-weight: 700;
}

/*************************

  .phone-content

**************************/
.phone-content {
  font-size: 83.33%;
}
.phone-content .cont-header {
  line-height: 1;
}
.phone-content .cont-main {
  display: flex;
  align-items: center;
  margin: 0.2em 0;
}
.phone-content .cont-main .tel-number {
  font-size: 175%;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.phone-content .cont-main .tel-icon {
  width: 1.43em;
  flex-shrink: 0;
}
.phone-content:has(.cont-main .tel-icon) .cont-header ,
.phone-content:has(.cont-main .tel-icon) .cont-sub {
  padding-left: 1.43em;
  letter-spacing: 0;
}

.phone-content .cont-sub {
  line-height: 1.5;
}

/*************************

  .kantan-q-menu-list

**************************/
.kantan-q-menu-list ,
.kantan-q-menu-list > li {
  list-style: none;
}
.kantan-q-menu-list > li:first-child .btn-style {
  margin-top: 0.2em;
}
.kantan-q-menu-list .btn-style {
  margin: 0.34em auto;
  padding: 0.38em 0.2em;
}

@media (min-width: 541px) {
  .kantan-q-menu-list {
    margin: 1em auto;
  }

  .kantan-q-menu-list .btn-style {
    margin: 0.5em auto;
    min-height: 3.3em;
  }
}

/*************************

  .flow-list
  
  （.like-flowlist-style）
  →paddingなどを模したスタイルを適用させるクラス

**************************/
.flow-list ,
.flow-list > .list-item {
  list-style: none;
}

.flow-list {
  background-color: #fff;
}
.flow-list > .list-item {
  position: relative;
}
.like-flowlist-style ,
.flow-list > .list-item {
  padding: 1em 0.8em 1em;
  letter-spacing: 0.05em;
}
.flow-list:first-child > .list-item:first-child {
  padding-top: 0;
}

.flow-list > .list-item + .list-item ,
.flow-list > .list-item + .list-item::before {
  border: var(--flowBorderW) solid #b60081;
}
.flow-list > .list-item + .list-item {
  border-width: var(--flowBorderW) 0 0 0 ;
  padding-top: 1.4em;
}

.flow-list > .list-item + .list-item::before {
  content: "";
  display: block;
  background-color: #fff;
  width: 0.7em;
  height: 0.7em;

  /* clip-path: polygon(100% 0, 100% 100%, 0 100%); */
  border-top-color: transparent;
  border-left-color: transparent;

  position: absolute;
  top: calc(var(--flowBorderW) * -1);
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 auto;

  transform: translateY(-50%) rotate(45deg);
}
.flow-list > .list-item > .item-title {
  font-weight: 700;
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.2em;
}

.flow-list > .list-item > .item-title::before {
  content: "";
  display: block;
  width: 0.7em;
  height: 0.7em;
  box-sizing: border-box;
  border-radius: 50%;
  border: solid 0.18em #b60081;

  position: absolute;
  top: 0.4em;
  left: 0.15em;
}

.like-flowlist-style .minus-frame ,
.flow-list > .list-item .minus-frame {
  margin-left: -0.5em;
  margin-right: -0.5em;
}
.like-flowlist-style .reset-padding-frame ,
.flow-list > .list-item .reset-padding-frame {
  margin-left: -0.8em;
  margin-right: -0.8em;
}

/*************************

  .border-*-*

**************************/
.border-t-flowlist ,
.border-b-flowlist {
  border: 0 solid #b60081;
}
.border-t-flowlist {
  border-top-width: var(--flowBorderW);
}
.border-b-flowlist {
  border-bottom-width: var(--flowBorderW);
}

.border-t-hr ,
.border-b-hr {
  border: 0 solid #dadada;
}
.border-t-hr {
  border-top-width: 2px;
}
.border-b-hr {
  border-bottom-width: 2px;
}

/*************************

  .detail-*

**************************/
.detail-lead-section {
  padding: 0 0.2em;
}
.detail-lead-text {
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.66;
}

.detail-main-section {
  background-color: #ffd4f2;
  padding: 1em 0 0.2em;
  margin-top: 1em;
}

.detail-content-box {
  background-color: #fff;
  padding: 0.8rem 0.34rem;
  margin: 1rem auto;
}

.detail-to-top-section {
  background-color:  #fff;
}
.detail-to-top-section .btn-style.-arrow-left {
  max-width: 86%;
}

@media (min-width: 541px) {

}

/*************************

  .kantan-q-footer *

**************************/
.kantan-q-footer {
  text-align: center;
  background-color: #e6e6e6;
  padding: 0.5em 0.05em;
  margin-top: 2em;
}
.kantan-q-copyright {
  font-size: 50%;
  font-weight: 300;
  letter-spacing: 0;
}