@charset "UTF-8";

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted #000;
  cursor:help;
}

table {
  border-collapse:separate;
  border-spacing:0;
}

hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px dotted #BBB;
  margin:12px 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

ul, ol {
  list-style:none;
}

/* =========================================================
 Public
========================================================= */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font: 13px/24px "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , YuGothic , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  background: #FDD100;
  background-image: radial-gradient(#FDC900 27%, transparent 0), radial-gradient(#FDC900 27%, transparent 0);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

/* Image Module
--------------------------------------------------------- */
img,
.replaced-svg {
  max-width: 100%;
  height: auto;
  vertical-align:top;
  font-size:0;
  line-height:0;
}

a img:hover,
a img:active {
  opacity: 0.7;
}

a img,
a img::before,
a img::after {
  transition: all .3s;
}

/* Button Module
--------------------------------------------------------- */
.Button {
  width: 100%;
  max-width: 640px;
  height: 80px;
  border-radius: 7px;
  margin: 35px auto 0;
  background: #E84C07;
}

.Button:not(:disabled):hover,
.Button:not(:disabled):active {
  background: #FFF;
}

.Button:not(:disabled),
.Button:not(:disabled)::before,
.Button:not(:disabled)::after {
  transition: all .3s;
}

.Button:not(:disabled):hover path,
.Button:not(:disabled):active path {
  fill: #E84C07;
}

.Button:not(:disabled) path,
.Button:not(:disabled) path::before,
.Button:not(:disabled) path::after {
  transition: all .3s;
}

.Button a {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.Button__Facebook {
  background: #315096;
}

.Button__Facebook:not(:disabled):hover path,
.Button__Facebook:not(:disabled):active path {
  fill: #315096;
}

/* Text Module
--------------------------------------------------------- */
.Text--Bold {
  font-weight: bold;
}

.Text--Orange {
  color: #E84C07;
}

.Text--Center {
  text-align: center;
}

.Text--Right {
  text-align: right;
}

/* Note Area Module
--------------------------------------------------------- */
.NoteArea {
  margin: 0 auto 30px;
}

.NoteArea--4Grid {
  max-width: 640px;
}

.NoteArea--6Grid {
  max-width: 960px;
}

.NoteArea__Header {
  padding: 0 21px;
  position: relative;
}

.NoteArea__Header::after {
  content: "";
  width: 100%;
  height: 50%;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  box-shadow: 1.5px 1.5px rgba(60, 60, 60, 1);
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: -1;
  background: #FFF;
}

.NoteArea__Contents {
  width: 100%;
  padding: 5px 0 20px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  background: #FFF;
  box-shadow: 1.5px 1.5px rgba(60, 60, 60, 1);
}

.NoteArea__ContentsHeader {
  margin-bottom: 20px;
}

/* =========================================================
 Header
========================================================= */
.Header {
  background: #FFF;
  margin-bottom: 30px;
}

.Header__Inner {
  max-width: 980px;
  height: 115px;
  padding: 0 10px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.Header__Item {
  flex-basis: 50%;
}

.Header__Item--Right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.Header__Item--Company {
  height: 27px;
  margin-bottom: 15px;
  line-height: 1;
}

.Header__Item--Company img {
  vertical-align: bottom;
}

/* Mobile Layuot
--------------------------------------------------------- */
@media screen and (max-width: 520px) {
  .Header__Inner {
    height: auto;
    padding: 15px 10px;
    display: block;
  }
  
  .Header__Item--Left {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .Header__Item--Right {
    align-items: center;
  }
}

/* =========================================================
 Footer
========================================================= */
.Footer {
  max-width: 980px;
  padding: 0 10px;
  margin: 0 auto 30px;
  display: flex;
}

.Footer__Button {
  height: 40px;
  background: #000;
}

.Footer__Button:hover,
.Footer__Button:active {
  background: #FFF;
}

.Footer__Button,
.Footer__Button::before,
.Footer__Button::after {
  transition: all .3s;
}

.Footer__Button:hover path,
.Footer__Button:active path{
  fill: #E84C07;
}

.Footer__Button path,
.Footer__Button path::before,
.Footer__Button path::after {
  transition: all .3s;
}

.Footer__Contents {
  width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  line-height: 1;
}

.FooterNav {
  display: flex;
  justify-content: center;
  align-items: center;

}

.FooterNav__Item:not(:first-child) {
  padding-left: 20px;
  border-left: 1px solid #000;
}

.FooterNav__Item:first-child {
  padding-right: 20px;
}

.FooterNav__Item a {
  color: #000;
  text-decoration: none;
}

.FooterNav__Item a:hover,
.FooterNav__Item a:active {
  text-decoration: underline;
}

/* Mobile Layuot
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .Footer__Button {
    display: none;
  }
  
  .Footer__Contents {
    width: 100%;
    height: 40px;
  }
}

/* =========================================================
 ContentsArea
========================================================= */
.ContentsArea {
  max-width: 980px;
  min-height: calc(100vh - 255px);
  padding: 0 10px;
  margin: 0 auto 40px;
}

/* Mobile Layuot
--------------------------------------------------------- */
@media screen and (max-width: 520px) {
  .ContentsArea {
    min-height: calc(100vh - 338px);
  }
}

/* =========================================================
 Home
========================================================= */
.Home .Header__Inner {
  justify-content: flex-end;
}

.LeadArea {
  margin-bottom: 15px;
  text-align: center;
}
.LeadArea__Text {
  margin-bottom: 17px;
  font-size: 15px;
  line-height: 27px;
  font-weight: bold;
}

.TitleArea {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.TitleArea p {
  flex-basis: 13%;
  padding-right: 2px;
  text-align: right;
}

.TitleArea h1 {
  flex-basis: 87%;
  padding-left: 2px;
}

.Home .NoteArea__ContentsHeader {
  padding: 0 20px;
}

.Home .Col3 {
  display: flex;
}

.Home .Col3__Box {
  flex-basis: calc(100% / 3);
  max-width: calc(100% / 3);
}

.Home .Col3__Box:first-child {
  padding-left: 20px;
}

.Home .Col3__Box:nth-child(2) {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.Home .Col3__Box:nth-child(2) > p {
  width: 100%;
  max-width: 265px;
}

.Home .Col3__Box:last-child {
  padding-right: 20px;
}

.Home .Charatype {
  max-width: 299px;
  border: 1px solid #DDD;
  margin: 0 auto;
}

.Home .Charatype__Caption {
  padding: 5px 0;
  border-bottom: 1px solid #DDD;
  background: #FDD100;
  color: #5C3701;
  font-size: 15px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
}

/* Mobile Layuot
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .Home .Header {
    margin-bottom: 20px;
  }
  
  .Home .Col3 {
    flex-wrap: wrap;
  }
  
  .Home .Col3__Box {
    flex-basis: 50%;
    max-width: 50%;
  }
  
  .Home .Col3__Box:first-child {
    padding: 0 20px;
    margin-bottom: 20px;
    flex-basis: 100%;
    max-width: 100%;
  }
  
  .Home .Col3__Box:nth-child(2) {
    padding: 0 10px 0 20px;
  }
  
  .Home .Col3__Box:last-child {
    padding: 0 20px 0 10px;
  }
}

@media screen and (max-width: 520px) {
  .Home .Col3__Box:not(:first-child) {
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 20px;
  }
  
  .Home .Col3__Box:nth-child(2) {
    margin-bottom: 20px;
  }
  
  .Home .NoteArea__Header::after {
    height: 65%;
  }
}

@media screen and (max-width: 380px) {
  .Home .NoteArea__ContentsHeader {
    margin-bottom: 10px;
  }
}

/* =========================================================
 Leader Check
========================================================= */
.Leadercheck .ContentsArea {
  min-height: calc(100vh - 300px);
}

.Leadercheck .Col2 {
  display: flex;
  padding: 0 20px;
}

.Leadercheck .Col2__Box:first-child {
  flex-basis: 18%;
  max-width: 18%;
  text-align: center;
}

.Leadercheck .Col2__Box:last-child {
  flex-basis: 82%;
  max-width: 82%;
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Leadercheck .Footer {
  margin-bottom: 75px;
}

input[type="radio"] {
  display: none;
}

.Question__Item {
  border-top: 1px solid #FDD100;
  border-left: 1px solid #FDD100;
  display: flex;
  flex-wrap: wrap;
}
.Question__Item:not(:first-child) {
  margin-top: 20px;
}

.Question__Row {
  border-right: 1px solid #FDD100;
  border-bottom: 1px solid #FDD100;
}

.Question__Row--Level1 {
  flex-basis: 100%;
  max-width: 100%;
  padding: 8.5px 10px 8.5px 70px;
  background: #FFF;
  font-size: 15px;
  line-height: 27px;
  font-weight: bold;
  position: relative;
}

.Question__Row--Level1::before {
  display: block;
  line-height: 0;
  position: absolute;
  top: 8.5px;
  left: 14.5px;
}

.Question__Item:first-child .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q01.svg);}
.Question__Item:nth-child(2) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q02.svg);}
.Question__Item:nth-child(3) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q03.svg);}
.Question__Item:nth-child(4) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q04.svg);}
.Question__Item:nth-child(5) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q05.svg);}
.Question__Item:nth-child(6) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q06.svg);}
.Question__Item:nth-child(7) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q07.svg);}
.Question__Item:nth-child(8) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q08.svg);}
.Question__Item:nth-child(9) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q09.svg);}
.Question__Item:nth-child(10) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q10.svg);}
.Question__Item:nth-child(11) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q11.svg);}
.Question__Item:nth-child(12) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q12.svg);}
.Question__Item:nth-child(13) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q13.svg);}
.Question__Item:nth-child(14) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q14.svg);}
.Question__Item:nth-child(15) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q15.svg);}
.Question__Item:nth-child(16) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q16.svg);}
.Question__Item:nth-child(17) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q17.svg);}
.Question__Item:nth-child(18) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q18.svg);}
.Question__Item:nth-child(19) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q19.svg);}
.Question__Item:nth-child(20) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q20.svg);}
.Question__Item:nth-child(21) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q21.svg);}
.Question__Item:nth-child(22) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q22.svg);}
.Question__Item:nth-child(23) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q23.svg);}
.Question__Item:nth-child(24) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q24.svg);}
.Question__Item:nth-child(25) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q25.svg);}
.Question__Item:nth-child(26) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q26.svg);}
.Question__Item:nth-child(27) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q27.svg);}
.Question__Item:nth-child(28) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q28.svg);}
.Question__Item:nth-child(29) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q29.svg);}
.Question__Item:nth-child(30) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q30.svg);}
.Question__Item:nth-child(31) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q31.svg);}
.Question__Item:nth-child(32) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q32.svg);}
.Question__Item:nth-child(33) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q33.svg);}
.Question__Item:nth-child(34) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q34.svg);}
.Question__Item:nth-child(35) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q35.svg);}
.Question__Item:nth-child(36) .Question__Row--Level1::before {
  content: url(../../leadercheck/images/leadercheck_img_q36.svg);}

.Question__Row--Level2 {
  flex-basis: 50%;
  max-width: 50%;
  padding: 10px;
  background: #DDD;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Question__Row--Level3 {
  flex-basis: 25%;
  max-width: 25%;
  padding: 10px;
  background: #E84C07;
  color: #FFF;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Question__Row--Level3:hover,
.Question__Row--Level3:active {
  cursor: pointer;
  background: #FFF;
  color: #E84C07;
}

.Question__Row--Level3,
.Question__Row--Level3::before,
.Question__Row--Level3::after {
  transition: all .3s;
}

input[type="radio"]:checked+.Question__Row--Level3 {
  background: #FFF;
  color: #E84C07;
}

.Button__Check {
  border: none;
  display: block;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.Button__Check:disabled {
  background: #DDD;
}

.Button__Check:disabled path {
  fill: #000;
}

.Button__Check:not(:disabled) {
  cursor: pointer;
}

.Progress {
  width: 100%;
  height: 45px;
  background: #FDD100;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  color: #FFF;
}

.Progress__Bar {
  width: 100%;
  height: 44px;
  margin-top: 1px;
  background: #E98FB5;
}

.Progress__BG {
  width: 100%;
  height: 44px;
  background: #000;
  position: absolute;
  z-index: 1200;
  bottom: 0;
  right: 0;
}

.Progress__BG,
.Progress__BG::before,
.Progress__BG::after {
  transition: all .6s;
}

.Progress__Remain {
  width: 100%;
  position: absolute;
  z-index: 1400;
  top: 0;
  font-size: 15px;
  line-height: 45px;
  font-weight: bold;
  text-align: center;
}

/* Mobile Layuot
--------------------------------------------------------- */
@media screen and (max-width: 520px) {
  .Leadercheck .ContentsArea {
    min-height: calc(100vh - 383px);
  }
}

/* =========================================================
 Personality
========================================================= */
.Personality .NoteArea {
  margin-bottom: 40px;
  text-align: center;
}

.Personality .NoteArea__Contents {
  padding: 5px 20px 20px;
}

.Personality h1 {
  text-align: center;
}

.Personality .Col2 {
  margin-top: 20px;
  display: flex;
}

.Personality .Col2__Box {
  flex-basis: 50%;
  max-width: 50%;
}

.Personality .Col2__Box:first-child {
  padding-right: 20px;
  text-align: center;
}

.Personality .Col2__Box:last-child p {
  margin-top: 24px;
}

@media screen and (max-width: 520px) {
  .Personality .Col2 {
    display: block;
  }
  
  .Personality .Col2__Box {
    max-width: none;
  }
  
  .Personality .Col2__Box:first-child {
    padding: 0 30%;
  }
}

/* =========================================================
 Communication
========================================================= */
.Communication .NoteArea__Contents {
  padding: 5px 20px 20px;
}

.ComicArea {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.ComicArea__Panel {
  margin-bottom: 20px;
}

.Communication .Col2 {
  margin-top: 20px;
  display: flex;
}

.Communication .Col2__Box:first-child {
  flex-basis: 160px;
  max-width: 160px;
}

.Communication .Col2__Box:last-child {
  flex-basis: calc(100% - 160px);
  max-width: calc(100% - 160px);
}

.BalloonArea {
  padding-left: 30px;
  position: relative; 
}

.BalloonArea::before,
.BalloonArea::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.BalloonArea::before {
  top: 90px;
  left: -30px;
  border-top: 10px solid transparent;
  border-right: 30px solid #000;
  border-bottom: 10px solid transparent;
  border-left: 30px solid transparent;
}

.BalloonArea::after {
  top: 93px;
  left: -17px;
  border-top: 7px solid transparent;
  border-right: 25px solid #FFF;
  border-bottom: 7px solid transparent;
  border-left: 25px solid transparent;
}

.BalloonArea__Inner {
  padding: 17px;
  border: 3px solid #000;
  border-radius: 30px;
  background: #FFF;
}

.BalloonArea__Header {
  font-size: 15px;
  line-height: 27px;
  color: #5C3701;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .Communication .Col2 {
    display: block;
  }
  
  .Communication .Col2__Box:first-child {
    max-width: none;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .BalloonArea {
    width: 100%;
    max-width: none !important;
    padding: 30px 0 0 0;
  }
  
  .BalloonArea::before {
    top: -30px;
    left: calc(50% - 10px);
    border-top: 30px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid #000;
    border-left: 10px solid transparent;
  }

  .BalloonArea::after {
    top: -17px;
    left: calc(50% - 7px);
    border-top: 25px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 25px solid #FFF;
    border-left: 7px solid transparent;
  }
}

@media screen and (max-width: 470px) {
  .Communication .NoteArea__ContentsHeader {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 470px) {
  .Communication .NoteArea__ContentsHeader {
    margin-bottom: 0;
  }
}

/* =========================================================
 Policy
========================================================= */
.Policy h1 {
  margin-bottom: 12px;
}

.Policy h2 {
  font-size: 15px;
  line-height: 27px;
  font-weight: bold;
  color: #5C3701;
}

.Policy .ContentsArea p:not(:last-child),
.Policy .ContentsArea ol:not(:last-child) {
  margin-bottom: 24px;
}

.Policy .ContentsArea ol {
  list-style: lower-roman;
  padding-left: 1rem;
}