:root {
  --black: #1D1D1D;
  --black-light: #5E5E5E;
  --brown: #743600;
  --text: #1d1d1d;
  --line: #9D9D9D;
  --gray: #777777;
  --line: #9D9D9D;
  --paper: #F4F2ED;
  --paper-warm: #EAE6DD;
  --gold: #A18C63;
  --gold-light: #C5A572;  
  --base: #FFFFFF;

  --page-min: 360px;
  --page-max: 560px;
  --font: "Noto Sans JP", "Noto Sans Medium", "Yu Gothic", "YuGothic", "游ゴシック体", "Yu Gothic Medium", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", sans-serif;
  --font-eng: "SF Pro JP", "SF Pro Text", "SF Pro", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
  
  --qa-sticky-top-sp: 50px;
  --qa-sticky-top-pc: 50px;
  --qa-progress-height: 44px;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.container-fluid {
margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}

body {
margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  color: var(--text);
  background: var(--paper);
  letter-spacing: 0;
  overflow-x: clip;
}

#wrapper,
#contents,
#main,
#main_middle,
.cd-main-content,
.page-shell {
max-width: 100%;
}

#header {
z-index: 1000 !important;
}

.page-shell {
position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: visible;
  background: var(--base);
}

.section-white,
.section-gray {
padding-inline: 22px;
}
@media screen and (min-width: 500px) {
.section-white,
.section-gray  {
    padding-inline: 44px;
  }
}


.section-white {
background: var(--base);
}

.section-gray {
background: var(--paper);
}

.eyebrow {
    text-align: left;
    margin-bottom: 40px;
    color: var(--black);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-family: var(--font-eng);
    }


.page-shell,
.consultation {
overflow: visible;
}

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

button {
border: 0;
  cursor: pointer;
}

button:focus,
select:focus,
input:focus,
a:focus {
outline: none;
}

[hidden] {
display: none !important;
}

a:hover,
a:focus,
a:active {
text-decoration: none;
	outline: none;
}

.page-shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: visible;
  background: var(--base);
}

/* PCアクセス時: LP は表示し、診断フォームのみ開始できないようにする */

main.page-shell.ain-pc-blocked #aiSkinNavi {
display: none !important;
}

main.page-shell.ain-pc-blocked #ain-intro-panel {
display: none !important;
}

.pc-blocked {
min-height: 100vh;
  padding: 90px 22px 70px;
  text-align: center;
}
@media screen and (min-width: 560px) {
	.pc-blocked {
      padding: 90px 44px 70px;
  }
}


.intro-start_ad0 {
  border-top: 50px solid var(--black);
  padding: 50px 22px 0;

}
@media (min-width: 560px) {
  .intro-start_ad0 {
  padding: 50px 44px 0;
  }
}

.intro-start_ad0 h1 {
  color: var(--black);	
  font-family: var(--font);
  margin: 0 auto 10px;
  font-size: 22px;
  line-height: 1.75;
  animation: introButtonFadeIn 0.72s ease-out both;
  font-weight: 500;
  text-align: left;
  line-height: 40px;
}

.intro-start_ad0 span {
	text-align: left;
	color: var(--black);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	font-family: var(--font-eng);
}

.intro-start-lead_ad0 {
    margin: 0 0 20px;
    color: var(--black);
    font-size: 15px;
    line-height: 30px;
    text-align: left;
}

.intro-start-note_ad0 {
margin: 50px auto -20px;
  color: var(--black-light);
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

p.threemin_ad0 {
    font-size: 12px;
    padding: 3px 16px 2px;
    border: 1px solid #777;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 5px;
    text-align: center;
}