@charset "utf-8";

/** ***************************************************************************
 * フォント設定
 * ************************************************************************* */

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 100;
  src: url('../font/NotoSansJP-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 200;
  src: url('../font/NotoSansJP-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 300;
  src: url('../font/NotoSansJP-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 400;
  src: url('../font/NotoSansJP-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 500;
  src: url('../font/NotoSansJP-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 600;
  src: url('../font/NotoSansJP-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 700;
  src: url('../font/NotoSansJP-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 800;
  src: url('../font/NotoSansJP-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 900;
  src: url('../font/NotoSansJP-Black.ttf') format('truetype');
}

/** ***************************************************************************
 * リセット
 * ************************************************************************* */

* {
  text-shadow: none;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout: none;
}

body { max-width:100%; margin:0; padding:0; -webkit-text-size-adjust:none; }

body * { max-width:100%; }

footer, header, main, nav { margin:0; padding:0; display:block; }

strong, em, small { margin:0; padding:0; font:inherit; }

ul:where([class]), ul:where([class]) li { margin:0; padding:0; list-style:none;}

ol:where([class]), ol:where([class]) li { margin:0; padding:0; list-style:none; }

dl:where([class]), dl:where([class]) dt, dl:where([class]) dd { margin:0; padding:0; }

a { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }

a img { transition:filter 0.3s ease-in-out 0.0s; }

a[href]:hover img { filter:brightness(105%) contrast(110%); }

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font:inherit; }

p { margin:0; padding:0; }

p + * { margin-top:1.125rem; }

* + p { margin-top:1.125rem; }

@media screen and (min-width:768px) {

  p + * { margin-top:1.5rem; }

  * + p { margin-top:1.5rem; }

}

img { height:auto; border:none; vertical-align:bottom; }

/** ***************************************************************************
 * 定数
 * ************************************************************************* */

:root {

  /**
   * 文字色
   */
  --basic-color: #23345b;
  --link-color: #005ce2;

  /**
   * 配色
   */
  --accentcolor-1:   4, 171, 218; /* 質問番号、あと〇問 */
  --accentcolor-2:   0,  92, 226; /* Yes No ボタン */
  --accentcolor-3: 255, 251,   4; /* マーカーライン */
  --accentcolor-4: 199, 225, 255; /* メイン背景色 */
  --accentcolor-5: 245, 243, 235; /* 質問エリア背景色 */
  --accentcolor-6: 151, 232, 255; /* 診断結果リスト背景色 */
  --accentcolor-7: 255, 247, 153; /* 進捗バー */

}

/** ***************************************************************************
 * 全体
 * ************************************************************************* */

body {
  color: var(--basic-color);
  font: 14px / 1.6 NotoSansJP, sans-serif;
  font-style: normal;
  font-weight: 400;
  position: relative;
  z-index: 0;
}

a:not([href]) {
  color: inherit;
}

:where(a[href]) {
  color: var(--link-color);
  text-decoration: underline;
}

@media screen and (min-width:768px) {

  body {
    letter-spacing: 1px;
    font-size: 16px;
  }

  a[href*="tel:"] {
    color: inherit;
    cursor: default;
    pointer-events: none;
    text-decoration: none !important;
  }

}

/**
 * レイアウト用
 */

div.body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/**
 * 表示／非表示
 */

@media screen and (max-width:767px) {

  [pc] {
    display: none !important;
  }

}

@media screen and (min-width:768px) {

  [sp] {
    display: none !important;
  }

}

/** ***************************************************************************
 * ヘッダー
 * ************************************************************************* */

#header {
  padding: 20px 0 12px;
}

body.layout-lower
#header {
  background-color: #fff;
}

@media screen and (min-width:768px) {

  #header {
    padding: 8px 0;
  }

  #header div.body {
    max-width: 1020px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

}

/**
 * リクナビロゴ
 */

#header div.logo {
  width: 85px;
}

#header div.logo img {
  display: block;
}

@media screen and (min-width:768px) {

  #header div.logo {
    width: 17.35%;
  }

}

/**
 * サイト名
 */

#header .sitename {
  width: 208px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width:768px) {

  #header .sitename {
    width: 387px;
    margin-top: unset;
    margin-left: calc((100% - 387px) / 2 - 17.35%);
    margin-right: unset;
    flex-shrink: 0;
  }

}

/** ***************************************************************************
 * メイン
 * ************************************************************************* */

#main div.body {
  max-width: 790px;
}

@media screen and (min-width:768px) {

  #main {
    font-size: 18px;
  }

}

/** ***************************************************************************
 * フッター
 * ************************************************************************* */

#footer {
  color: #676767;
  font-size: 12px;
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-weight: 300;
  border-top: 3px solid #f5f5f5;
  position: relative;
  z-index: 100;
}

#footer a {
  color: inherit;
  text-decoration: none;
}

#footer div.body {
  max-width: 1020px;
  padding: 6vw 4.267vw 6.4vw;
}

@media screen and (min-width:768px) {

  #footer div.body {
    padding: 45px 20px 48px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

}

/**
 * ロゴ
 */

#footer div.logo {
  width: 258px;
  margin-bottom: 4.267vw;
}

@media screen and (min-width:768px) {

  #footer div.logo {
    margin: unset;
    flex-shrink: 0;
  }

}

/**
 * 会員登録ボタン（右下固定）
 */

#entry-3 {
  width: 80px;
  position: fixed;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  transition:
    visibility 0.3s ease-in-out 0.0s,
    opacity 0.3s ease-in-out 0.0s;
  visibility: hidden;
  opacity: 0;
}

body.scroll-active #entry-3 {
  transition:
    visibility 0.6s ease-in-out 0.0s,
    opacity 0.6s ease-in-out 0.0s;
  visibility: visible;
  opacity: 1;
}

#footer.displayed #entry-3 {
  position: absolute;
  top: 5px;
}

#entry-3 a {
  text-decoration: none;
  display: block;
  transition: transform 0.15s ease-in-out 0.0s;
  transform: scale(1);
}

#entry-3 a:hover {
  transform: scale(0.95);
}

@media screen and (min-width:768px) {

  #entry-3 {
    width: unset;
    right: 20px;
    bottom: 20px;
  }

  #footer.displayed #entry-3 {
    position: absolute;
    top: unset;
    bottom: calc(100% + 35px);
  }

}

/**
 * リンク
 */

#footer ul.link {
  color: #676767;
  letter-spacing: 0;
  line-height: 1.5;
  font-size: 3.2vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2.133vw 4.267vw;
}

#footer ul.link li {
  position: relative;
}

#footer ul.link li:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 3.2vw;
  background-color: #676767;
  position: absolute;
  top: calc(50% - 1.6vw);
  right: -2.1335vw;
}

@media screen and (min-width:768px) {

  #footer ul.link {
    max-width: 648px;
    padding-left: 55px;
    font-size: 12px;
    gap: 8px 16px;
    flex-grow: 1;
  }

  #footer ul.link li:not(:last-child)::after {
    height: 12px;
    top: calc(50% - 6px);
    right: -8px;
  }

}