@charset "utf-8";

@media screen {
  body {
    background: url(../../local/img/bg-illust.png) repeat-x;
    background-attachment: fixed;
    background-position-x: center;
  }

  .container {
    padding-left: 0; /* reset */
    padding-right: 0; /* reset */
  }

  #header {
    background: #fff;
    padding-bottom: 10px;
    padding-top: 30px; /* align with other pages */
  }

  .navbar-toggle {
    top: 42px; /* align with other pages */
  }

  .bg-white {
    background-color: #fff;
    margin: 0 auto;
  }

  .article,
  .profile-title,
  .para-title {
    color: #222;
    font-family: 'Kosugi Maru', sans-serif;
  }

  .article {
    font-size: 1.6rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    text-align: justify;;
  }

  .article .kirari-content {
    max-width: 500px; /* align with .container */
    width: 94vw; /* align with .container */
  }

  #mainarea {
    margin-bottom: 50px;
  }

  .article-head {
    background-color: #fffef7;
    border-radius: 10px;
    color: #000;
    display: block;
    margin-bottom: 30px;
    padding: 70px 3vw 30px;
    width: auto;
  }

  .article-head a,
  .profile a,
  #mainbody a {
    color: #E30B22;
    text-decoration: underline;
  }

  .head-lcltitle {
    height: 125px;
    margin: 0 auto 30px;
    width: 255px;
  }

  .lcltitle-txt {
    /* color: #5bae83; */
    display: flex;
    font-weight: bold;
    /* justify-content: space-between; */
    line-height: 1;
    margin-bottom: 0; /* reset */
  }

  span[class*="lcltitle-txt-"] {
    font-size: 4rem;
  }

  .lcltitle-txt-yu {
    color: #65ace4;
    transform:
      translateX(0)
      translateY(.5em)
      /* rotate(-40deg) */
      ;
  }

  .lcltitle-txt-ka1 {
    color: #a0c238;
    transform:
      translateX(.3em)
      /* translateY(-.5em) */
      /* rotate(-30deg) */
      ;
  }

  .lcltitle-txt-i {
    color: #56a764;
    transform:
      translateX(.6em)
      translateY(.5em)
      /* rotate(-15deg) */
      ;
  }

  .lcltitle-txt-na {
    color: #d16b16;
    transform:
      translateX(.9em)
      translateY(.5em)
      /* rotate(20deg) */
      ;
  }

  .lcltitle-txt-ro {
    color: #cc528b;
    transform:
      /* translateX(-130px) */
      translateX(-3.5em)
      translateY(1.6em)
      /* rotate(30deg) */
      ;
  }

  .lcltitle-txt-oo {
    color: #9460a0;
    transform:
      /* translateX(-125px) */
      translateX(-3.3em)
      translateY(2.1em)
      /* rotate(5deg) */
      ;
  }

  .lcltitle-txt-ka2 {
    color: #f2cf01;
    transform:
      translateX(-3.1em)
      translateY(2.1em)
      /* rotate(-10deg) */
      ;
  }

  .lcltitle-txt-ru {
    color: #0074bf;
    transform:
      translateX(-2.9em)
      translateY(2.1em)
      /* rotate(-20deg) */
      ;
  }

  .lcltitle-txt-heart {
    color: #de9610;
    transform:
      translateX(-2.7em)
      translateY(2.1em)
      /* rotate(-20deg) */
      ;
  }

  .head-lcllead {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .head-title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 15px;
    margin-top: 0; /* reset */
    text-decoration: none;
  }

  .head-desc {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .head-imgArea {
    height: 200px;
    width: 200px;
  }

  .head-img {
    border-radius: 50%;
    height: 100%;
    width: auto;
  }

  .head-txtArea {
    padding-top: 0; /* reset */
    text-align: justify;;
  }

  .article-body {
    border-radius: 10px;
    padding: 6vw calc(2.46vw + 2.13px) 50px;
  }

  .profile {
    margin-bottom: 50px;
  }

  .profile-title {
    font-size: 2.2rem;
    margin-top: 0; /* reset */
  }

  .paragraph + .paragraph {
    margin-top: 50px;
  }

  .para-txt + .para-txt,
  .para-txt + .para-fig,
  .para-fig + .para-txt,
  .para-fig + .para-fig {
    margin-top: 1.6rem;
  }

  #mainbody h2.para-title {
    font-size: 2.4rem;
    margin-bottom: 20px;
    line-height: 1.5;
  }

  .para-question,
  .para-answer,
  .para-cust {
    padding-left: 1em;
    text-indent: -1em;
  }

  .para-question::before {
    background: #fff001;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
  }

  .para-answer::before {
    background: #65ace4;
    content: '';
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
  }

  .para-cust::before {
    background: #d06d8c;
    content: '';
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
  }

  .answer-name {
    font-weight: bold;
  }

  .answer-name::after {
    content: '\FF1A';
  }

  .para-caption {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-top: 8px;
    padding: 0 5px;
  }

  .postscript {
    border: #000 solid 1px;
    padding: 25px 3vw 30px;
  }

  .ps-title {
    font-size: 2.4rem;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 20px;
    text-align: center;
  }

  .notice .para-txt {
    text-indent: -1em;
    padding-left: 1em;
  }

  #footer {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 94vw;
  }

  .footlist {
    margin: 0; /* reset */
    padding: 0; /* reset */
  }
}


/*** sp BP ***/
@media screen and (min-width: 640px) {
  .navbar-toggle {
    right: 15px;
  }

  .article-head {
    padding-bottom: 60px;
  }

  .head-lcltitle {
    height: auto;
    margin-bottom: 60px;
    width: 520px;
  }

  .lcltitle-txt {
    justify-content: space-between;
  }

  span[class*="lcltitle-txt-"] {
    font-size: 5rem;
    transform: none; /* reset */
  }

  span.lcltitle-txt-ka1,
  span.lcltitle-txt-ro {
    transform:
      translateY(-.4em);
  }

  /* .lcltitle-txt-yu {
    transform:
      translateX(0)
      translateX(-.5em)
      translateY(.4em)
      ;
  }

  .lcltitle-txt-ka1 {
    transform:
      translateX(15px)
      translateX(-.2em)
      translateY(.1em)
      ;
  }

  .lcltitle-txt-i {
    transform:
      translateX(.1em)
      translateY(.4em)
      ;
  }

  .lcltitle-txt-na {
    transform:
      translateX(.4em)
      translateY(.4em)
      ;
  }

  .lcltitle-txt-ro {
    transform:
      translateX(.7em)
      translateY(0em)
      ;
  }

  .lcltitle-txt-oo {
    transform:
    translateX(1em)
    translateY(.4em)
      ;
  }

  .lcltitle-txt-ka2 {
    transform:
    translateX(1.3em)
    translateY(.4em)
    ;
  }

  .lcltitle-txt-ru {
    transform:
    translateX(1.6em)
    translateY(.4em)
    ;
  }

  .lcltitle-txt-heart {
    transform:
    translateX(1.9em)
    translateY(.4em)
    ;
  } */

  .head-lcllead {
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
  }

  .head-txtArea {
    transform: rotate(-5deg);
    transform-origin: center;
  }

  .head-title {
    font-size: 1.8rem;
  }

  .head-desc {
    font-size: 2.4rem;
    letter-spacing: 3px;
    line-height: 1.6;
    margin: auto;
  }

  .head-img {
  }
}

/*** md TB ***/
@media screen and (min-width: 768px) {
  #header {
    margin-bottom: 20px;
    margin-left: calc((100vw - 750px) / -2);
    width: 100vw;
  }

  .navbar {
    margin: 0 auto;
    width: 750px; /* align with .container */
  }

  .article {
    padding: 0;
  }

  .article-head {
    padding-bottom: 40px;
  }

  .head-txtArea {
    margin-right: 10px;
  }

  .article-body {
    display: flex;
    justify-content: space-between;
    padding: 45px 15px 50px 20px;
  }

  #mainarea {
    flex: 1;
    margin-bottom: 0; /* reset */
    padding-left: 0; /* reset */
    padding-right: 30px;
    width: auto;
  }

  #feedback {
    margin-bottom: 0; /* reset */
  }

  #subarea {
    width: 200px;
  }

  #footer {
    width: auto; /* reset */
  }
}


/*** lg PC ***/
@media screen and (min-width: 960px) {
  .container {
    max-width: 960px;
    width: 93vw;
  }

  #mainarea {
    padding-right: 50px;
  }

  #header {
    margin-left: calc(7vw / -2);
  }

  .navbar {
    max-width: 960px;
    width: 93vw; /* align with .container */
  }

  .article {
    padding-left: 0;
  }

  .article .kirari-content {
    width: calc(58.3vw + 340px); /* align with .container */
  }

  .article-head {
    margin-left: 0;
    padding: 90px 0 60px;
  }

  .head-lcltitle {
    width: 650px;
  }

  span[class*="lcltitle-txt-"] {
    font-size: 6rem;
  }

  .lcltitle-txt-yu {
    transform:
      translateX(0)
      translateY(.4em)
      ;
  }

  .lcltitle-txt-ka1 {
    transform:
      translateX(20px)
      translateY(.1em)
      ;
  }

  .lcltitle-txt-i {
    transform:
      translateX(35px)
      translateY(.4em)
      ;
  }

  .lcltitle-txt-na {
    transform:
      translateX(50px)
      translateY(.4em)
      ;
  }

  .lcltitle-txt-ro {
    transform:
      translateX(70px)
      translateY(0em)
      ;
  }

  .lcltitle-txt-oo {
    transform:
    translateX(80px)
    translateY(.4em)
      ;
  }

  .lcltitle-txt-ka2 {
    transform:
    translateX(95px)
    translateY(.4em)
      ;
  }

  .lcltitle-txt-ru {
    transform:
    translateX(100px)
    translateY(.4em)
      ;
  }

  .head-lcllead {
  }

  .head-txtArea {
    margin-right: 20px;
    padding-left: 0; /* reset */
  }

  .head-title {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .head-desc {
    font-size: 2.6rem;
  }

  .head-imgArea {
    height: 300px;
    width: 300px;
  }

  .head-img {
    height: 100%;
  }

  .article-body {
    padding-left: calc(5vw - 10px);
    padding-right: 15px;
  }
}

/*** sp BP ***/
@media screen and (min-width: 1033px) {
  .container {
    max-width: none;
    width: 960px;
  }

  #header {
    margin-left: calc((100vw - 960px) / -2);
  }

  .navbar {
    max-width: none;
    width: 960px; /* align with .container */
  }
}


/*** lg PC ***/
@media screen and (min-width: 1200px) {
  .article .kirari-content {
    width: 1040px;
  }

  .article-head {
    margin-bottom: 60px;
  }

  .head-txtArea {
    margin-right: 30px;
  }

  .head-lcllead {
  }

  .article-body {
    padding-left: 50px;
  }

}



/*--------------------*/
/*       */
/*--------------------*/
@media screen {

}


/*** md TB ***/
@media screen and (min-width: 560px) {

}

/*** lg PC ***/
@media screen and (min-width: 960px) {

}

/*** lg PC ***/
@media screen and (min-width: 1200px) {

}