@charset "UTF-8";
/*----------------------------------------
       Reset
----------------------------------------*/
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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
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, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ul, li {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: none; }

del {
  text-decoration: line-through; }

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

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

/*--------------------------
Common Styles
---------------------------*/
* {
  box-sizing: border-box;
  -webkit-appearance: none;
  word-wrap: break-word;
  overflow-wrap: break-word; }

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

li {
  list-style-type: none; }

html {
  font-size: 62.5%;
  width: 100%;
  position: relative; }

img {
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

body {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 1.6rem;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  position: relative; }
  @media only screen and (min-width: 769px) {
    body {
      background: url("../img/bg.png");
      background-position: top 52px center; } }

body * {
  text-rendering: optimizeLegibility; }

a img:hover {
  opacity: 0.8; }

a img.btn:hover {
  opacity: 1;
  filter: saturate(300%);
  filter: hue-rotate(25deg); }

a {
  color: #8241aa; }

.only_pc {
  display: none; }
  @media only screen and (min-width: 769px) {
    .only_pc {
      display: inherit; } }

.only_sp {
  display: inherit; }
  @media only screen and (min-width: 769px) {
    .only_sp {
      display: none; } }

@media only screen and (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }

/*アニメーション*/
@keyframes loop {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes loop2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
/*--------------------------
contents
---------------------------*/
div.logo {
  text-align: center;
  width: 100%;
  padding: 2vw 0;
  background-color: #FFF; }
  @media only screen and (min-width: 769px) {
    div.logo {
      padding: 15px 0;
      margin: 0; } }

div.logo img {
  width: 50%; }
  @media only screen and (min-width: 769px) {
    div.logo img {
      width: auto; } }

/*メインビジュアル*/
.contentsArea {
  width: 100%;
  background: #FFF;
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .contentsArea {
      width: 1200px; } }

#mvbox {
  width: 100%; }
  @media only screen and (min-width: 769px) {
    #mvbox {
      width: 1200px;
      margin: 0 auto; } }
  #mvbox img {
    width: 100%; }
    @media only screen and (min-width: 769px) {
      #mvbox img {
        width: 1200px;
        margin: 0 auto; } }

.about {
  width: 90vw;
  margin: 0 auto 8vw; }
  @media only screen and (min-width: 769px) {
    .about {
      width: 980px;
      margin: 0 auto 50px; } }

.waku {
  width: 90%;
  margin: 0 auto 0vw;
  background: url("../img/waku_bg_sp.png");
  background-size: 100% auto; }
  @media only screen and (min-width: 769px) {
    .waku {
      width: 980px;
      background: url("../img/waku_bg_pc.png");
      margin: 0 auto 0px; } }
  .waku h2 {
    width: 76.8vw;
    margin: 0 auto 5.6vw; }
    @media only screen and (min-width: 769px) {
      .waku h2 {
        width: 577px;
        margin: 0 auto 24px; } }
  .waku .flow {
    width: 76.666vw;
    margin: 0 auto;
    height: 174.533vw;
    position: relative; }
    @media only screen and (min-width: 769px) {
      .waku .flow {
        width: 845px;
        height: 435px; } }
    .waku .flow .bt {
      width: 37.6vw;
      position: absolute;
      top: 36.4vw;
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 769px) {
        .waku .flow .bt {
          width: 200px;
          top: 293px;
          left: 31px;
          margin: 0; } }

.test {
  margin-bottom: 3em; }

.present {
  background: #e9ddf1;
  padding: 5.5vw 0 6vw;
  margin: 8vw auto 0; }
  @media only screen and (min-width: 769px) {
    .present {
      padding: 30px 0 50px;
      margin: 60px auto 0; } }
  .present h2 {
    width: 83.333vw;
    margin: 0 auto 4.266vw; }
    @media only screen and (min-width: 769px) {
      .present h2 {
        width: 627px;
        margin: 0 auto 43px; } }
  .present .present_cont {
    width: 73.333vw;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .present .present_cont {
        width: 926px;
        display: flex;
        justify-content: space-between; } }
    .present .present_cont .item {
      width: 70vw;
      margin: 0 auto 10vw; }
      @media only screen and (min-width: 769px) {
        .present .present_cont .item {
          width: 404px;
          margin: 0 auto; } }

.counter_wrap {
  background: url("../img/bg_counter.png");
  width: 100%;
  padding: 5vw 0;
  margin: 5vw auto 7vw; }
  @media only screen and (min-width: 769px) {
    .counter_wrap {
      padding: 32px 0 34px;
      margin: 30px auto 60px; } }
  .counter_wrap h2 {
    width: 36.8vw;
    margin: 0px auto 3vw; }
    @media only screen and (min-width: 769px) {
      .counter_wrap h2 {
        width: 209px;
        margin: 0px auto 20px; } }
  .counter_wrap .counter {
    width: 61.6vw;
    height: 14.533vw;
    background: url("../img/counter_bg.png") no-repeat;
    background-size: cover;
    font-size: 4rem;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    margin: 0px auto 0;
    vertical-align: middle;
    line-height: 14.533vw;
    letter-spacing: 0.1em;
    padding-left: 0.1em; }
    @media only screen and (min-width: 769px) {
      .counter_wrap .counter {
        width: 385px;
        height: 90px;
        margin: 0px auto 0;
        font-size: 7rem;
        line-height: 90px; } }

.quiz {
  width: 78.266vw;
  margin: 0 auto 7vw;
  border: 3px #ffd5e1 solid;
  border-radius: 20px;
  padding: 4.4vw 4.6vw; }
  @media only screen and (min-width: 769px) {
    .quiz {
      width: 840px;
      margin: 0 auto 58px;
      border: 6px #ffd5e1 solid;
      padding: 39px 26px; } }
  .quiz:last-child {
    margin-bottom: 0; }
  .quiz h2 {
    width: 76.8vw;
    margin: 0 auto 5.6vw; }
    @media only screen and (min-width: 769px) {
      .quiz h2 {
        width: 577px;
        margin: 0 auto 24px; } }
  @media only screen and (min-width: 769px) {
    .quiz h3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row-reverse; } }
  .quiz h3 .ph {
    width: 25.6vw;
    margin: 3vw auto; }
    @media only screen and (min-width: 769px) {
      .quiz h3 .ph {
        width: 166px;
        margin: 0 0 24px; } }
  @media only screen and (min-width: 769px) {
    .quiz h3 .text {
      width: 585px;
      margin: 0 0 24px; } }
  .quiz .hint {
    width: 50vw;
    margin: 5vw auto 0vw; }
    @media only screen and (min-width: 769px) {
      .quiz .hint {
        width: 320px;
        margin: 30px auto 0; } }
  .quiz .correct {
    background: #ff729a;
    border-radius: 20px;
    padding: 5vw;
    margin: 6vw auto 0; }
    @media only screen and (min-width: 769px) {
      .quiz .correct {
        width: 500px;
        padding: 20px 20px 30px;
        margin: 25px auto 0; } }
    .quiz .correct h3 {
      width: 20vw;
      margin: 0 auto 4vw; }
      @media only screen and (min-width: 769px) {
        .quiz .correct h3 {
          width: 104px;
          margin: 0 auto 20px; } }
    .quiz .correct p {
      text-align: center;
      font-size: 2rem;
      font-weight: bold;
      color: #FFF; }
      @media only screen and (min-width: 769px) {
        .quiz .correct p {
          font-size: 4rem; } }

.last {
  margin-bottom: 0; }

/*--------------------------
form
---------------------------*/
.form-contents {
  margin: 0vw auto;
  /*ボタン*/
  /* チェックボックス */ }
  @media only screen and (min-width: 769px) {
    .form-contents {
      margin: 0px auto 20px; } }
  .form-contents .answer {
    width: 80%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .form-contents .answer {
        width: 550px; } }
    .form-contents .answer li {
      width: 100%;
      margin: 1em 0 0.5em;
      font-size: 1.7rem;
      line-height: 1.2em;
      white-space: nowrap; }
      @media only screen and (min-width: 769px) {
        .form-contents .answer li {
          width: 250px;
          font-size: 2rem; } }
  .form-contents .block {
    width: 78.266vw;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .form-contents .block {
        width: 585px;
        margin: 0 auto; } }
    .form-contents .block h3 {
      text-align: center;
      color: #8241aa;
      margin: 0 auto 1em;
      font-weight: bold;
      font-size: 1.8rem;
      line-height: 1.5em; }
      @media only screen and (min-width: 769px) {
        .form-contents .block h3 {
          font-size: 2.5rem; } }
    .form-contents .block .note {
      line-height: 1.7em;
      margin-bottom: 1.5em; }
  .form-contents .username {
    margin: 2vw auto 0vw; }
    @media only screen and (min-width: 769px) {
      .form-contents .username {
        margin: 20px auto; } }
    .form-contents .username li {
      font-size: 1.8rem;
      margin: 0 0 0.8em 0;
      text-align: center;
      line-height: 1.5em; }
      @media only screen and (min-width: 769px) {
        .form-contents .username li {
          text-align: left; } }
    .form-contents .username input {
      display: block;
      font-size: 1.8rem;
      border: 1px solid #000;
      padding: 3px;
      margin-top: 3px;
      width: 100%; }
      @media only screen and (min-width: 769px) {
        .form-contents .username input {
          display: inline-block;
          width: 300px; } }
      .form-contents .username input::placeholder {
        color: #C5C5C5; }
  .form-contents .sendbtn {
    position: relative;
    display: block;
    margin: 4vw auto 3vw;
    padding: 0;
    font-size: 1.8rem;
    text-decoration: none;
    background: #fff;
    /*背景色*/
    border: none;
    box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0);
    width: 70vw; }
    @media only screen and (min-width: 769px) {
      .form-contents .sendbtn {
        margin: 30px auto 0;
        width: 380px; } }
    .form-contents .sendbtn:hover {
      cursor: pointer;
      opacity: 0.8; }
  .form-contents .twbtn {
    display: block;
    width: 50vw;
    margin: 10vw auto;
    padding: 0.5em 1em;
    font-size: 1.8rem;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;
    /*背景色*/
    border: solid 1px #fd9535;
    border-bottom: solid 2px #d27d00;
    /*少し濃い目の色に*/
    border-radius: 10px;
    /*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold; }
    @media only screen and (min-width: 769px) {
      .form-contents .twbtn {
        margin: 30px auto;
        width: 200px; } }
  .form-contents .twbtn:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }
  .form-contents .visually-hidden {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px; }
  .form-contents label {
    position: relative;
    padding-left: 38px; }
  .form-contents label::before,
  .form-contents label::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  .form-contents label::before {
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    left: 5px; }
  .form-contents label::after {
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    width: 19px;
    height: 19px;
    left: 8px; }
  .form-contents input:checked + label::after {
    opacity: 1; }

#outlineBox {
  background: #f5f5f5;
  width: 100%;
  margin-top: 8vw; }
  @media only screen and (min-width: 769px) {
    #outlineBox {
      margin-top: 70px; } }
  #outlineBox #outline {
    width: 90%;
    margin: 0 auto;
    padding: 7vw 0; }
    @media only screen and (min-width: 769px) {
      #outlineBox #outline {
        width: 1000px;
        padding: 58px; } }
    #outlineBox #outline h2 {
      text-align: center;
      margin: 0 auto 7vw;
      width: 67vw; }
      @media only screen and (min-width: 769px) {
        #outlineBox #outline h2 {
          margin: 0 auto 40px;
          width: 502px; } }
    #outlineBox #outline h3 {
      font-size: 1.7rem;
      font-weight: bold;
      color: #333;
      margin-bottom: 0.5em; }
      @media only screen and (min-width: 769px) {
        #outlineBox #outline h3 {
          font-size: 2rem; } }
      #outlineBox #outline h3 span {
        color: #b793ce; }
    #outlineBox #outline h4 {
      text-align: center;
      font-size: 2rem;
      margin: 10vw auto 3vw;
      color: #333; }
      @media only screen and (min-width: 769px) {
        #outlineBox #outline h4 {
          font-size: 2.8rem;
          margin: 45px auto 20px; } }
    #outlineBox #outline p {
      color: #333;
      font-size: 1.5rem;
      line-height: 1.5em;
      margin-bottom: 2.5em; }
      @media only screen and (min-width: 769px) {
        #outlineBox #outline p {
          font-size: 1.6rem;
          margin-bottom: 25px; } }
    #outlineBox #outline ul {
      margin: 0 0 2.5em 0.5em; }
      #outlineBox #outline ul li {
        color: #333;
        list-style: disc;
        margin: 0 0 4vw 0.8em;
        line-height: 1.5em; }
        @media only screen and (min-width: 769px) {
          #outlineBox #outline ul li {
            font-size: 1.6rem;
            margin-bottom: 15px; } }

/* SNSタイムライン */
#footerArea {
  background: #FFF; }

#social {
  clear: both;
  width: 100%;
  margin-bottom: 0;
  line-height: 0; }
  @media only screen and (min-width: 769px) {
    #social {
      background: url(../img/face_twi.gif) center top repeat-y;
      text-align: center; } }

#social_wrap {
  width: 100%; }
  @media only screen and (min-width: 769px) {
    #social_wrap {
      display: flex;
      width: 800px;
      margin: 0 auto;
      line-height: 0; } }

#social .socialouter {
  width: 100%; }
  @media only screen and (min-width: 769px) {
    #social .socialouter {
      width: 400px;
      padding: 20px 0 40px;
      margin: 0 auto;
      text-align: center; } }

#socialouter-fb {
  background-color: #305097;
  padding: 20px 0 40px;
  width: 100%; }
  @media only screen and (min-width: 769px) {
    #socialouter-fb {
      float: left; } }

#socialouter-tw {
  background-color: #00aced;
  padding: 20px 0 40px;
  width: 100%; }
  @media only screen and (min-width: 769px) {
    #socialouter-tw {
      float: right; } }

#socialouter-fb h2,
#socialouter-tw h2 {
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 0 20px 0; }
  @media only screen and (min-width: 769px) {
    #socialouter-fb h2,
    #socialouter-tw h2 {
      text-align: center;
      color: #fff;
      font-size: 1.4rem;
      font-weight: bold;
      margin: 20px 0 30px; } }

.widgetouter {
  width: 320px;
  height: 600px;
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .widgetouter {
      width: 320px;
      height: 600px; } }

#social .widgetouter::before {
  background: url("../../images/background_01.png") no-repeat;
  background-size: 100%;
  background-position-y: bottom; }

#social .widget {
  margin: 0 auto; }

#social .widget iframe {
  max-width: 100%;
  box-sizing: border-box; }

#social .widgetouter::after {
  background: url("../../images/background_03.png") no-repeat;
  background-size: 100%; }

/*SNSシェア*/
#share {
  padding: 10vw 0 10vw 0;
  background: #fff;
  margin: 0;
  line-height: 0; }
  @media only screen and (min-width: 769px) {
    #share {
      padding: 30px 0; } }

#share h2 {
  margin: 0 0 25px;
  text-align: center; }

#share h2 img {
  width: 50%;
  display: inline; }
  @media only screen and (min-width: 769px) {
    #share h2 img {
      width: 260px;
      display: inline; } }

#share .share_list {
  width: 70%;
  margin: 0 auto;
  text-align: center; }

#share .share_list a {
  text-decoration: none; }

#share .share_list img {
  margin: 0 10px;
  width: 70px;
  height: auto; }

#footer {
  background: #666666;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 80%;
  padding: 0.8em 0; }
  @media only screen and (min-width: 769px) {
    #footer {
      padding: 20px 0; } }

#footer a {
  color: #fff; }