@charset "UTF-8";
/* CSS Document */
/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;

font-family: 'Kosugi Maru', sans-serif;
*/

img{width:100%;}

/*メイン画像*/
#main{margin:0 auto; max-width:1200px;}
.pc{display:block;}
.sp{display:none;}

/*メインテキスト*/
#info-{width:100%; max-width:1200px; margin:0 auto; padding:10% 0 5% 0; font-family: 'Noto Sans JP', sans-serif;}
#info- p{font-size:90%; line-height:180%;}

/*診断したことがある人はこちら*/
#menu{width:100%; max-width:1200px; margin:3% auto 10%;}
.look-ttl{width:50%; margin:0 auto;}
#menu a{width:17%; display:inline-block; padding:2%; color:#000; font-family: 'Noto Sans JP', sans-serif; vertical-align:top;}
#menu img{width:80%; padding-bottom:3%;}
#menu a span{font-size:1.4rem; font-weight:700;}
.menu-a{-webkit-text-stroke: 1px #d4abab; text-stroke: 1px #d4abab; color:#fff;}
.menu-b{-webkit-text-stroke: 1px #b8dbd7; text-stroke: 1px #b8dbd7; color:#fff;}
.menu-c{-webkit-text-stroke: 1px #c5ba9f; text-stroke: 1px #c5ba9f; color:#fff;}
.menu-d{-webkit-text-stroke: 1px #cec5d2; text-stroke: 1px #cec5d2; color:#fff;}

.fc-diagnosis{width:100%; font-family: 'Noto Sans JP', sans-serif;}
.diagnosis-ttl{width:50%; margin:0 auto;}
.diagnosis-info{font-size:.8rem; line-height:1.3rem; margin:3% 0;}

.diagnosis_sum{width:100%; max-width:1000px; margin:5% auto 10%;}
.sum_ttl th{padding:2%; width:25%;}
.sum_ttl th span{font-size:1.4rem; font-weight:700;}
.sum_in th{padding:5%; width:25%; border:1px solid #000;}
.sum_link th{padding:2%; width:25%;}
.sum_link th img{width:60%; padding:10% 0 3% 0;}
.sum_link th span{font-size:1.4rem; font-weight:700;}
.spring{-webkit-text-stroke: 1px #d4abab; text-stroke: 1px #d4abab; color:#fff;}
.summer{-webkit-text-stroke: 1px #b8dbd7; text-stroke: 1px #b8dbd7; color:#fff;}
.autumn{-webkit-text-stroke: 1px #c5ba9f; text-stroke: 1px #c5ba9f; color:#fff;}
.winter{-webkit-text-stroke: 1px #cec5d2; text-stroke: 1px #cec5d2; color:#fff;}
.sum_link th a{color:#000; font-size:13px; padding:5%; margin:10% auto 0; display:block; width:70%; border-radius:5px;}
.link-a{background-color:#d4abab;}
.link-b{background-color:#b8dbd7;}
.link-c{background-color:#c5ba9f;}
.link-d{background-color:#cec5d2;}
.material-icons{vertical-align:sub;}


/* -----------------------------------------------------------------------
## 中ページ ##
----------------------------------------------------------------------- */
#color-lp{width:100%; max-width:1200px; margin:0 auto; font-family: 'Noto Sans JP', sans-serif;}
.spring-back{background-color:#fbf6f6;}
.summer-back{background-color:#f3faf9;}
.autumn-back{background-color:#faf8f1;}
.winter-back{background-color:#f7eff9;}

#person{width:100%; overflow:hidden; padding-top:10%;}
.person-ttl{width:100%; margin-bottom:5%;}
.person-ttl img{width:60%;}
.person-img{width:30%; float:left;}
.person-text{width:50%; float:left; text-align:left; margin:0 12% 0 8%;}
#person h4{font-size:1.3rem; margin:15% 0 5% 0; padding:1rem 2rem; border-left:3px dotted #000; background-color:#fff; font-weight:bold; font-family: 'Kosugi Maru', sans-serif; letter-spacing:3px;}
#person > h4 > .material-icons{vertical-align:sub; padding-left:1%;}
.point{width:49%; display:inline-block; padding-bottom:4%;}
.point > .material-icons{font-size:1.3rem; vertical-align:sub; padding-right:2%;}
.textinfo{line-height:30px;}

.spring2{color:#d4abab;}
.summer2{color:#b8dbd7;}
.autumn2{color:#c5ba9f;}
.winter2{color:#cec5d2;}

#color h4{font-size:1.3rem; margin:15% auto 5%; padding:2rem; border-bottom:3px dotted #000; background-color:#fff; font-weight:bold; font-family: 'Kosugi Maru', sans-serif; letter-spacing:3px; width:90%;}
#style h4{font-size:1.3rem; margin:15% auto 5%; padding:2rem; border-bottom:3px dotted #000; background-color:#fff; font-weight:bold; font-family: 'Kosugi Maru', sans-serif; letter-spacing:3px; width:90%;}
#items h4{font-size:1.3rem; margin:15% auto 5%; padding:2rem; border-bottom:3px dotted #000; background-color:#fff; font-weight:bold; font-family: 'Kosugi Maru', sans-serif; letter-spacing:3px; width:90%;}

#color{width:100%; clear:both;}
.box{width:100px; height:100px; display:inline-block; margin:0 1%;}
.colorinfo{line-height:30px; margin:3% 0;}
.attention{font-size:0.8rem; line-height:20px;}
.a-color1{background:#7a5f28;}
.a-color2{background:#e68179;}
.a-color3{background:#fdefcc;}
.a-color4{background:#96cd89;}
.a-color5{background:#ed6b1d;}
.a-color6{background:#72c9da;}
.a-color7{background:#eeec39;}
.a-color8{background:#c06e25;}
.b-color1{background:#ac728a;}
.b-color2{background:#aaa8a9;}
.b-color3{background:#f7f5f6;}
.b-color4{background:#5c999a;}
.b-color5{background:#e8ceab;}
.b-color6{background:#84b6d1;}
.b-color7{background:#f9dbe7;}
.b-color8{background:#657ebe;}
.c-color1{background:#7f3c21;}
.c-color2{background:#cb6622;}
.c-color3{background:#5e632d;}
.c-color4{background:#d9b583;}
.c-color5{background:#f28b6c;}
.c-color6{background:#4a2f66;}
.c-color7{background:#b9a916;}
.c-color8{background:#371106;}
.d-color1{background:#040000;}
.d-color2{background:#b83030;}
.d-color3{background:#f5e1ed;}
.d-color4{background:#767877;}
.d-color5{background:#fdfeec;}
.d-color6{background:#cccee3;}
.d-color7{background:#765276;}
.d-color8{background:#b90c68;}

#style{width:100%; clear:both;}
#style img{width:40%;}
.code{clear:both; width:80%; margin:0 auto 3% auto; clear:both;}
.code h6{text-align:left; font-size:18px; margin:5% 0 2%; font-weight:700; letter-spacing:5px;}
.code a{padding:3% 0; display:block; border-bottom:1px solid #000; text-align:left; color:#000; font-family: 'Kosugi Maru', sans-serif; font-size:12px;}
.code a b{float:right; font-weight:bold; background-color:#000; color:#fff; padding:1% 2%; font-size:80%;}

#items{width:100%; clear:both; margin-bottom:15%;}
.pcitems a{width:19%; display:inline-block; color:#000; vertical-align:top;}
.pcitems a p{line-height:25px; margin-top:2%; font-size:.8rem;}
.pcitems a p b{font-size:0.7rem;}
b.en::after{content:"円(税込)";}

#other{width:100%; padding-bottom:15%;}
#other h4{font-size:1.3rem; margin:15% 0 5% 0; font-weight:bold; font-family: 'Kosugi Maru', sans-serif; letter-spacing:3px;}
.other-link{width:80%; margin:0 auto;}
.other-link a{width:16%; display:inline-block; margin:1%; color:#000; font-weight:bold; vertical-align:top;}
.other-link a img{margin-bottom:2%;}
.other-link a b{font-size:13px; padding:8%; margin:10% auto 0; display:block; width:70%; border-radius:5px;}
.other_top{width:30%; background-color:#fff; padding:2%; margin:5% auto 0;}
.other_top a{color:#000; font-weight:bold;}

.result{box-sizing:border-box; margin:0 auto; display:none;}

button{width:30%; padding:2%; border:0; background-color:#2b2b2b; color:#fff; margin:2% 0 5%; font-size:1.4rem; font-weight:700; border-radius:10px;}


/* -----------------------------------------------------------------------
## Diagnosis ##
----------------------------------------------------------------------- */

.fc-questions {
  width:94%;
  max-width:1000px;
  margin:3% auto 0;
  padding:3%;
  background-image: -moz-linear-gradient(90deg, #cec5d2 0%, #c5ba9f 40%, #b8dbd7 70%, #d4abab 90%);
  background-image: -webkit-linear-gradient(90deg, #cec5d2 0%, #c5ba9f 40%, #b8dbd7 70%, #d4abab 90%);
  background-image: -ms-linear-gradient(90deg, #cec5d2 0%, #c5ba9f 40%, #b8dbd7 70%, #d4abab 90%);
}

.fc-question {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 5% 10%;
  background: #fff;
}

.fc-question + .fc-question {
  margin-top: 2%;
}

.fc-question_ttl {
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  min-width: 100%;
  margin-bottom: 5%;
  font-size: 1.6rem;
}

.fc-question_ttl span {
  letter-spacing: .1em;
  font-weight: bold;
}

.fc-question_body {
  -webkit-flex-basis: 50%;
  flex-basis: 50%;
  min-width: 50%;
  font-size: 1.1rem;
  padding: 3% 0;
  text-align: left;
}

.fc-question input[type="radio"] {
  display: none;
}

.fc-question label {
  position: relative;
  padding-left: 60px;
}
.fc-question label span {
  font-size: 0.8rem;
  padding-left: 20%;
}

.fc-question label::before {
  position: absolute;
  top: -5px;
  left: 0;
  width: 38px;
  height: 38px;
  border: 2px solid #a0a0a0;
  box-sizing: border-box;
  content: "";
}

.fc-question label::after {
  content: "";
  -webkit-transform: scale(0);
  transform: scale(0);
}

.fc-question input[type="radio"]:checked + label::after {
  position: absolute;
  top: 0;
  left: 1.5%;
  width: 33px;
  height: 25px;
  background: url("https://minority.itembox.design/item/202011color/check.png") no-repeat 0 0;
  content: "";
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.1s 0s cubic-bezier(0.22, 0.86, 0.73, 1.38);
  transition: all 0.1s 0s cubic-bezier(0.22, 0.86, 0.73, 1.38);
}




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

	
/*メイン画像*/
.pc{display:none;}
.sp{display:block;}

/*メインテキスト*/
#info-{padding:20% 0 20% 0; font-family: 'Noto Sans JP', sans-serif;}

/*診断したことがある人はこちら*/
#menu{margin:3% auto 20%;}
.look-ttl{width:100%;}
#menu a{width:21%; font-size:.6rem; padding:1%; font-family: 'Noto Sans JP', sans-serif;}
#menu img{width:90%;}
#menu a span{font-size:.8rem;}
.menu-a{-webkit-text-stroke: 0 #d4abab; text-stroke: 0 #d4abab; color:#d4abab;}
.menu-b{-webkit-text-stroke: 0 #b8dbd7; text-stroke: 0 #b8dbd7; color:#b8dbd7;}
.menu-c{-webkit-text-stroke: 0 #c5ba9f; text-stroke: 0 #c5ba9f; color:#c5ba9f;}
.menu-d{-webkit-text-stroke: 0 #cec5d2; text-stroke: 0 #cec5d2; color:#cec5d2;}

.fc-diagnosis{font-family: 'Noto Sans JP', sans-serif;}
.diagnosis-ttl{width:100%;}
.diagnosis-info{font-size:.7rem; line-height:1.3rem; margin:5% 0 10% 0;}

.sum_ttl th span{font-size:1.2rem;}
.sum_link th img{width:80%; padding:10% 0 3% 0;}
.sum_link th{font-size:.6rem; padding:5% 0; font-family: 'Noto Sans JP', sans-serif;}
.sum_link th span{font-size:.7rem;}
.spring{-webkit-text-stroke: 0 #d4abab; text-stroke: 0 #d4abab; color:#d4abab;}
.summer{-webkit-text-stroke: 0 #b8dbd7; text-stroke: 0 #b8dbd7; color:#b8dbd7;}
.autumn{-webkit-text-stroke: 0 #c5ba9f; text-stroke: 0 #c5ba9f; color:#c5ba9f;}
.winter{-webkit-text-stroke: 0 #cec5d2; text-stroke: 0 #cec5d2; color:#cec5d2;}
.sum_link th a{font-size:.7rem; padding:10% border-radius:2px;}
	
button{width:80%; padding:5%; margin:10% 0 20%; font-size:1rem; border-radius:5px;}
	
	
/* -----------------------------------------------------------------------
## 中ページ ##
----------------------------------------------------------------------- */
#color-lp{font-family: 'Noto Sans JP', sans-serif;}
.person-ttl{margin-bottom:10%;}
.person-ttl img{width:100%;}
.person-img {
    width:42%;
    padding-right: 5%;
    float: left;
    overflow: hidden;
}

.person-text {
    width: 58%;
    float: none;
    margin-left: 42%;
}

#person h4 {
    font-size: 11px;
    margin: 10px 0;
    font-family: 'Kosugi Maru', sans-serif;
    letter-spacing: 1px;
    line-height: 1.5rem;
}
.person-text p.point {
    font-size: 10px;
    margin: 0px;
    padding: 0;
}

#person h4 span.material-icons {
    font-size: 15px;
}
p.textinfo{    font-size: 10px;
    line-height: 180%;}

#color h4{font-size:1rem; margin:20% 0 10% 0; padding:1rem; font-family: 'Kosugi Maru', sans-serif; letter-spacing:1px; width:100%;}
#style h4{font-size:1rem; margin:20% 0 10% 0; padding:1rem; font-family: 'Kosugi Maru', sans-serif; letter-spacing:1px; width:100%;}
#items h4{font-size:1rem; margin:20% 0 10% 0; padding:1rem; font-family: 'Kosugi Maru', sans-serif; letter-spacing:1px; width:100%;}

.box{width:70px; height:70px; margin:1%;}
p.colorinfo{    font-size: .8rem;
    line-height: 25px;
    margin: 15px;}
p.attention{    font-size: .7rem;
    padding: 15px;}
	
#style img{width:100%;}
.code{width:100%;}
.code a{padding:5% 0; font-size:11px; font-family: 'Kosugi Maru', sans-serif; line-height:20px;}
.code a b{float:right; font-weight:bold; background-color:#000; color:#fff; padding:1% 2%; font-size:70%; font-family: 'Kosugi Maru', sans-serif;}
.code h6{font-size:13px; margin:5% 0 2%; letter-spacing:2px;}

#items{width:100%; margin-bottom:30%;}
.pcitems a{width:48%;}
.pcitems a p{line-height:20px; margin:5% 0 10% 0; font-size:.7rem;}
.pcitems a p b{font-size:0.6rem;}

#other{width:100%; padding-bottom:30%;}
#other h4{font-size:1rem; font-family:'Kosugi Maru', sans-serif; letter-spacing:1px;}
.other-link{width:100%;}
.other-link a{width:21%; font-size:.8rem;}
.other-link a img{margin-bottom:3%;}
.other-link a b{font-size:.6rem; width:80%; border-radius:3px;}
.other_top{width:80%; padding:5%; margin:10% auto 0;}
	
	
/* -----------------------------------------------------------------------
## Diagnosis ##
----------------------------------------------------------------------- */


.fc-questions {
  width:90%;
  padding:5%;
}

.fc-question {
  padding: 10%;
}

.fc-question_ttl {
  margin-bottom: 10%;
  font-size: 1.0rem;
}

.fc-question_body {
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  min-width: 100%;
  font-size: 0.8rem;
  padding: 5% 0;
}
	
.fc-question label {
  padding-left: 35px;
}
	
.fc-question label span {
  font-size: 0.5rem;
	padding-left:20%;
}

.fc-question label::before {
  top: -3px;
  width: 25px;
  height: 25px;
}

.fc-question input[type="radio"]:checked + label::after {
  top: -5px;
  left: -4px;
  width: 35px;
  height: 35px;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
	
}