@charset "utf-8";
@import "base.css";


/*--------------------------------------
	font
--------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100,300,400,500,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Marcellus&display=swap&subset=latin-ext');

body{
    font-family: "Noto Sans Japanese","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

*{
    box-sizing:border-box;
    -webkit-box-sizing: border-box; /* Webkit */
    -moz-box-sizing: border-box; /* Firefox */
}

/*--------------------------------------
	コンテンツ全体
--------------------------------------*/
.content{
    color: #3c3c3c;
    margin-top: 20px;
    padding-bottom: 120px;
    overflow: clip;
}
/*** 診断スペース ***/
.sumi_container {
    max-width:100%;
    margin: 0 auto;
}
/* 斜め線 */
p.text_line{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    line-height: 2.3rem;
}
p.text_line::before,p.text_line::after{
    content: "";
    width: 2px;
    height: 33px;
    background-color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
p.text_line::before{
    margin-right: 1.3rem;
    transform: rotate(-30deg);
}
p.text_line::after{
    margin-left: 1.0rem;
    transform: rotate(30deg);
}

/* button */
.b_size{
    font-size: 1.4rem;
}
a.buy-button{
    text-decoration: none;
}
a.buy-button:visited{/* 順番1 */
    color: #fff;
}
a.buy-button:hover{/* 順番2 */
    color: #f39800;
}
a.buy-button:active{/* 順番3 */
    color: #f39800;
}

/* 三角 */
.b_sankaku{
    position: relative;
}
.b_sankaku::after{
    content: "";
    position: absolute;
    border-top: solid 10px transparent;
    border-left: solid 18px #fff;
    border-bottom: solid 10px transparent;
    margin: 2.5px 0 0 9px;
}
.b_sankaku:hover::after{
    border-top: solid 10px transparent;
    border-left: solid 18px #f39800;
    border-bottom: solid 10px transparent;
}

/* TOP商品画像 */
.sumi_shindan{
    max-width: 90%;
}
/* 各商品画像 */
.sumi_shindan_img{
    max-width: 100%;
    border-radius: 7px;
}
.sumi_shindan_img_radius{
    display: inline-block;
    border: solid 1px #f39800;
    background: #f7f7f7;
    border-radius: 10px;
    padding: 15px;
}

/* 質問画面高さ固定 */
.quiz-container{
    min-height: 400px;
    object-fit: cover;
}

/* 個別調整 */
.margin_auto{
    margin: 0 auto;
}
.font_sizeS{
    font-size: 1.0rem;
}
.font_sizeM{
    font-size: 1.2rem;
}
.font_sizeL{
    font-size: 1.8rem;
}
.font_sizeLL{
    font-size: 2.0rem;
}
.p_linehight{
    line-height:1.6rem;
}
.under_line{
    display: inline-block;
    background: linear-gradient(transparent 55%, #f39800 30%);
    padding: 0 0 4px 5px;
}
.p_none{
    display: none;
}
.p_block{
    display: block;
}

/***************************************
	max-width: 991px 以下
***************************************/
@media screen and (max-width:991px) {
.content {
    margin-top: 65px;
    padding-bottom:80px;
  }
.p_none{
    display: block;
}
.p_block{
    display: none;
}
.s_text-left{
    text-align: left;
}
}





*,
::before,
::after {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}
::backdrop {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,
::after,
::before {
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb;
}
::after,
::before {
  --tw-content:''
}
:host,
html {
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  tab-size:4;
  font-family: "Noto Sans Japanese","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
}
hr {
  height:0;
  color:inherit;
  border-top-width:1px;
}
abbr:where([title]) {
  -webkit-text-decoration:underline dotted;
  text-decoration:underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:inherit;
  font-weight:inherit;
}
a {
  color:inherit;
  text-decoration:inherit;
}
b,
strong {
  font-weight:bolder;
}
code,
kbd,
pre,
samp {
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings:normal;
  font-variation-settings:normal;
  font-size:1em;
}
small {
  font-size:80%;
}
sub,
sup {
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}
sub {
  bottom:-.25em;
}
sup {
  top:-.5em;
}
table {
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family:inherit;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  font-size:100%;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
  padding:0;
}
button,
select {
  text-transform:none;
}
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none;
}
:-moz-focusring {
  outline:auto;
}
:-moz-ui-invalid {
  box-shadow:none;
}
progress {
  vertical-align:baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height:auto;
}
[type=search] {
  -webkit-appearance:textfield;
  outline-offset:-2px;
}
::-webkit-search-decoration {
  -webkit-appearance:none;
}
::-webkit-file-upload-button {
  -webkit-appearance:button;
  font:inherit;
}
summary {
  display:list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin:0;
}
fieldset {
  margin:0;
  padding:0;
}
legend {
  padding:0;
}
menu,
ol,
ul {
  list-style:none;
  margin:0;
  padding:0;
}
dialog {
  padding:0;
}
textarea {
  resize:vertical;
}
input::placeholder,
textarea::placeholder {
  opacity:1;
  color:#9ca3af;
}
[role=button],
button {
  cursor:pointer;
}
:disabled {
  cursor:default;
}
[hidden]:where(:not([hidden=until-found])) {
  display:none;
}
mx-auto {
  margin-left:auto;
  margin-right:auto;
}
.mb-2 {
  margin-bottom:0.5rem;
}
.mb-3 {
  margin-bottom:0.75rem;
}
.mb-4 {
  margin-bottom:1rem;
}
.mb-6 {
  margin-bottom:1.5rem;
}
.mb-8 {
  margin-bottom:2rem;
}
.mb-10 {
  margin-bottom:2.5rem;
}
.mb-12 {
  margin-bottom:3rem;
}
.mt-10 {
  margin-top:2.5rem;
}
.mt-8 {
  margin-top:2.0rem;
}
.mt-4 {
  margin-top:1rem;
}
.mt-2 {
  margin-top:0.75rem;
}
.block {
  display:block;
}
.flex {
  display:flex;
}
.hidden {
  display:none;
}
.h-2 {
  height:0.5rem;
}
.h-full {
  height:100%;
}
.w-fit {
  width:-moz-fit-content;
  width:fit-content;
}
.w-full {
  width:100%;
}
.max-w-2xl {
  max-width:43rem;
}
.transform {
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.flex-col {
  flex-direction:column;
}
.items-center {
  align-items:center;
}
.gap-4 {
  gap:1rem;
}
.overflow-hidden {
  overflow:hidden;
}
.rounded-full {
  border-radius:9999px;
}
.rounded-xl {
  border-radius:0.75rem;
}
.border-2 {
  border-width:2px;
}
.border-gray-300 {
  --tw-border-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity:1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-granire-500 {
  --tw-bg-opacity:1;
  background-color: #f39800;
}
.bg-gray-100 {
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity:1;
  background-color: #f7f7f7;
}
.bg-orange-500 {
  --tw-bg-opacity:1;
  background-color:rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border: solid 1px #f39800;
  /** width: calc(100% + 2.5rem); 親突き抜け **/
}
.bg-beige {
  --tw-bg-opacity:1;
  background-color: #edeadf;
}
.px-2 {
  padding: 0 1.5rem;
}
.px-4 {
  padding-left:1rem;
  padding-right:1rem;
}
.px-6 {
  padding:1.5rem;
}
.px-8 {
  padding-left:2rem;
  padding-right:2rem;
}
.px-8_rightlong {
  padding-left:2rem;
  padding-right:3.3rem;
}
.py-2 {
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.py-4 {
  padding-top:1rem;
  padding-bottom:1rem;
}
.px-6 {
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.py-3 {
  padding-top:0.75rem;
  padding-bottom:0.75rem;
}
.text-center {
  text-align:center;
}
.text-lg {
  font-size:1.125rem;
  line-height:1.75rem;
}
.text-xl {
  font-size:1.25rem;
  line-height:1.75rem;
}
.text-xs {
  font-size:0.75rem;
  line-height:1rem;
}
.text-2xl {
  font-size:1.5rem;
  line-height:2rem;
}
@media screen and (max-width:991px) {
.text-2xl {
  font-size:1.2rem;
  line-height:1.7rem;
}
}
.text-3xl {
  font-size:1.875rem;
  line-height:2.25rem;
}
.text-4xl {
  font-size:2.4rem;
  line-height:2.5rem;
}
.text-5xl {
  font-size:3.2rem;
  line-height:3.5rem;
  letter-spacing: 0.5rem;
}
.text-sm {
  font-size:0.875rem;
  line-height:1.25rem;
}
.font-bold {
  font-weight:700;
}
.font-medium {
  font-weight:500;
}
.font-semibold {
  font-weight:600;
}
.text-emerald-500 {
  --tw-text-opacity:1;
  color:rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-granire-500 {
  --tw-text-opacity:1;
  color: #f39800;
}
.text-granire-500none {
  --tw-text-opacity:1;
}
.text-gray-500 {
  --tw-text-opacity:1;
  color:rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray2-500 {
  --tw-text-opacity:1;
  color: #b3b3b3;
}
.text-gray-600 {
  --tw-text-opacity:1;
  color:rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity:1;
  color:rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.shadow-lg {
  --tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-all {
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
}
.transition-colors {
  transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
}
.transition-transform {
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
  margin: 0 auto;
}
.duration-300 {
  transition-duration:300ms;
}
.duration-500 {
  transition-duration:500ms;
}
.ease-in-out {
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:scale-105:hover {
  --tw-scale-x:1.05;
  --tw-scale-y:1.05;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:bg-emerald-600:hover {
  --tw-bg-opacity:1;
  background-color:rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-granire-600:hover {
  --tw-bg-opacity:1;
  background-color: #f1eee0;
  color: #f39800;
}
.hover\:bg-orange-600:hover {
  --tw-bg-opacity:1;
  background-color:rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
  --tw-bg-opacity:1;
  background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:text-emerald-600:hover {
  --tw-text-opacity:1;
  color:rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.hover\:text-granire-600:hover {
  --tw-text-opacity:1;
  color: #f39800;
  opacity: 0.7;
}
.hover\:bg-beige-600:hover {
  --tw-bg-opacity:1;
  background-color: #f1eee0;
}
.focus\:outline-none:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-emerald-500:focus {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.focus\:ring-granire-500:focus {
  --tw-ring-opacity:1;
  --tw-ring-color: #f39800;
}
.focus\:ring-opacity-50:focus {
  --tw-ring-opacity:0.5;
}
@media (min-width: 640px) {
  .sm\:w-2\/3 {
    width:66.666667%;
  }
}
@media (min-width: 768px) {
  .md\:w-1\/2 {
    width:50%;
  }
  .md\:w-2\/3 {
    width:70%;
  }
  .md\:p-10 {
    padding:2.5rem;
  }
  .md\:p-2 {
    padding: 1.25rem 1.5rem;
  }
}