@charset "UTF-8";
@media only screen and (min-width: 768px) {
  .sp {
    display: none; }

  .pc {
    display: inline-block; } }
@media only screen and (max-width: 767px) {
  .pc {
    display: none; }

  .sp {
    display: inline-block; } }
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
/* CSS Document */
html {
  margin: 0;
  padding: 0;
  color: #222222;
  font-size: 62.5%;
  font-feature-settings: "palt" 1;
  font-family: "游ゴシック", YuGothic, "Yu Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; }

body {
  font-size: 1.6rem; }

body, div, span,
dl, dt, dd,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, p, blockquote, address,
table, tr, th, td, img {
  margin: 0;
  padding: 0;
  border: none; }

.t-center {
  text-align: center; }

.t-right {
  text-align: right; }

.t-left {
  text-align: left; }

.note {
  font-size: 0.8em; }

.disnone {
  display: none; }

img {
  vertical-align: bottom; }

h1, h2, h3, h4, h5, h6 {
  text-align: center; }

ul, li, dl, dt, dd, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

body {
  background: #cc56b2; }

@media only screen and (min-width: 768px) {
  #mainvisual {
    position: relative; }
    #mainvisual .haishin {
      position: absolute;
      left: 60%;
      top: 35%;
      width: 23%; } }
#about {
  width: 750px;
  margin: auto auto 60px auto; }
  @media only screen and (max-width: 767px) {
    #about {
      width: 90%;
      margin-bottom: 40px; } }

#profile {
  color: #fff; }
  #profile .inner {
    width: 800px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      #profile .inner {
        width: 90%;
        margin: auto; } }
    #profile .inner .prof {
      margin-top: 50px;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -moz-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      justify-content: space-between; }
      @media only screen and (max-width: 767px) {
        #profile .inner .prof {
          display: block;
          margin-top: 0; } }
      #profile .inner .prof h2 {
        margin-bottom: 20px; }
      #profile .inner .prof .photo {
        width: 350px; }
        @media only screen and (max-width: 767px) {
          #profile .inner .prof .photo {
            float: left;
            width: 40%;
            margin: auto 20px auto auto; }
            #profile .inner .prof .photo img {
              margin-bottom: 10px; } }
      #profile .inner .prof .summary {
        width: 400px;
        text-align: justify;
        font-weight: bold; }
        @media only screen and (max-width: 767px) {
          #profile .inner .prof .summary {
            width: auto; }
            #profile .inner .prof .summary img {
              display: inline; } }
    #profile .inner #prof_harada {
      flex-direction: row-reverse !important; }
      @media only screen and (max-width: 767px) {
        #profile .inner #prof_harada {
          margin-top: 50px; } }
      #profile .inner #prof_harada .photo img {
        margin-top: -60px; }
        @media only screen and (max-width: 767px) {
          #profile .inner #prof_harada .photo img {
            margin-top: 0px; } }

#interview {
  width: 800px;
  margin: auto auto 80px auto; }
  @media only screen and (max-width: 767px) {
    #interview {
      width: 90%;
      margin-top: 80px; } }
  #interview ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (max-width: 767px) {
      #interview ul {
        display: block; } }
    #interview ul li {
      width: 49%;
      margin-bottom: 2%; }
      @media only screen and (max-width: 767px) {
        #interview ul li {
          width: 100%; } }
  #interview h2 {
    text-align: center;
    width: 200px;
    margin-bottom: 20px;
    margin-right: auto; }
    @media only screen and (max-width: 767px) {
      #interview h2 {
        width: 100%;
        text-align: center !important;
        width: 50%;
        margin: auto auto 20px auto; } }

#youtube {
  width: 800px;
  margin: 30px auto 70px auto; }
  @media only screen and (max-width: 767px) {
    #youtube {
      width: 100%;
      margin: 80px 0 40px 0; } }
  #youtube h2 {
    text-align: center;
    width: 200px;
    margin-bottom: 20px;
    margin-right: auto; }
    @media only screen and (max-width: 767px) {
      #youtube h2 {
        width: 100%;
        text-align: center !important;
        width: 50%;
        margin: auto auto 20px auto; } }
  #youtube .inner {
    background: #000;
    text-align: center;
    padding: 40px 0; }

#banner {
  width: 800px;
  margin: auto; }
  @media only screen and (max-width: 767px) {
    #banner {
      width: 90%; } }
  #banner ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (max-width: 767px) {
      #banner ul {
        display: block; } }
    #banner ul li {
      width: 49%;
      margin-bottom: 2%; }
      @media only screen and (max-width: 767px) {
        #banner ul li {
          width: 100%; } }

#footer {
  color: #fff;
  font-weight: bold;
  padding: 70px 0 100px 0;
  text-align: center; }