@charset "UTF-8";
/*utf-8ですよ*/
/***************************************************/
.about_top {
  max-width: 930px;
  width: 100%;
  margin: 0 auto;
  padding: 70px 0 80px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: relative; }
  .about_top:before {
    position: absolute;
    content: "";
    bottom: 80px;
    left: 0;
    width: 430px;
    height: 430px;
    display: block;
    background: url("../images/common/bg_logo.svg");
    background-size: contain;
    z-index: 0; }
  .about_top h2 {
    font: 46px/180% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    margin: 0 90px 0 130px;
    position: relative; }
  .about_top p {
    font: 20px/180% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    margin-left: 30px;
    position: relative; }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  .about_top {
    max-width: 930px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 50px 120px;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    position: relative; }
    .about_top:before {
      position: absolute;
      content: "";
      bottom: auto;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      /* Safari用 */
      transform: translate(-50%, -50%);
      width: 430px;
      height: 430px;
      display: block;
      background: url("../images/common/bg_logo.svg");
      background-size: contain;
      z-index: 0; }
    .about_top h2 {
      font: 46px/180% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
      margin: 0 auto 40px;
      position: relative;
      text-align: center; }
    .about_top p {
      font: 20px/180% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
      margin: 0 auto;
      position: relative;
      text-align: justify;
      text-justify: inter-ideograph;
      max-width: 600px;
      width: 100%; }
      .about_top p br {
        display: none; }
      .about_top p span {
        display: block; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .about_top {
    max-width: 930px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 90px;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    position: relative; }
    .about_top:before {
      position: absolute;
      content: "";
      bottom: auto;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      /* Safari用 */
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      display: block;
      background: url("../images/common/bg_logo.svg");
      background-size: contain;
      z-index: 0; }
    .about_top h2 {
      font: 40px/180% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
      margin: 0 auto 40px;
      position: relative;
      text-align: center; }
    .about_top p {
      font: 18px/180% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
      margin: 0 auto;
      position: relative;
      text-align: justify;
      text-justify: inter-ideograph;
      max-width: 600px;
      width: 100%; }
      .about_top p br {
        display: none; }
      .about_top p span {
        display: block; } }
/*max-width:480px*/
/***************************************************/
.meet_header {
  width: 100%;
  height: 500px;
  background: url("../images/about/tb-mv.jpg") top 28% center no-repeat;
  background-size: cover; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .meet_header {
    background: url("../images/about/mv.jpg") top 44% center no-repeat;
    background-size: cover; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .meet_header {
    height: 300px;
    background: url("../images/about/tb-mv.jpg") center center no-repeat;
    background-size: cover; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .meet_header {
    height: 250px; } }
/*max-width:480px*/
/***************************************************/
.meet_intro {
  background: #000;
  position: relative;
  padding: 180px 0 180px;
  color: #fff;
  text-align: center; }
  .meet_intro h2 {
    font: 35px/100% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    position: relative;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: center;
    margin: -170px auto 60px;
    display: block;
    background-color: #000;
    padding: 15px 5px 20px 8px;
    color: #fff;
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    /* Safari用 */
    transform: translate(-50%, 0%); }
  .meet_intro h3 {
    font: 46px/100% "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    position: relative;
    text-align: center;
    margin: 0 0 70px; }
  .meet_intro ul {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto 130px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .meet_intro li {
    width: calc((100% - 80px)/3);
    max-width: 340px; }
    .meet_intro li .txt {
      text-align: left;
      font: 16px/1.8em "m+c2_Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
    .meet_intro li .name {
      text-align: center;
      font: 27px/1.3em "m+c2_Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      margin: 0 0 20px;
      position: relative; }
      .meet_intro li .name:before {
        position: absolute;
        content: "";
        display: block;
        width: 122px;
        height: 70px;
        top: -85px;
        left: 0; }
  .meet_intro .other {
    display: inline-block;
    text-align: center;
    font: 23px/1.3em "m+c2_Medium","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    border-bottom: 1px solid #fff;
    padding: 0 0 10px 10px; }
    .meet_intro .other br {
      display: none; }
  .meet_intro .meet01:before {
    background: url("../images/about/ushi-kuri.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet02:before {
    background: url("../images/about/ushi-togarashi.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet03:before {
    background: url("../images/about/ushi-uchimomo.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet04:before {
    background: url("../images/about/ushi-kainomi.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet05:before {
    background: url("../images/about/ushi-marushin.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet06:before {
    background: url("../images/about/ushi-ramu.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet07:before {
    background: url("../images/about/ushi-tomosan.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet08:before {
    background: url("../images/about/ushi-ichibo.png") center center no-repeat;
    background-size: contain; }
  .meet_intro .meet09:before {
    background: url("../images/about/ushi-misuji.png") center center no-repeat;
    background-size: contain; }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  .meet_intro h3 {
    font: 40px/100% "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    position: relative;
    text-align: center;
    margin: 0 0 70px; }
  .meet_intro ul {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto 90px; }
  .meet_intro li {
    width: calc((100% - 40px)/2);
    max-width: 340px;
    margin: 0 0 50px; }
    .meet_intro li img {
      max-width: 100%; }
  .meet_intro .other {
    display: inline-block;
    text-align: center;
    font: 23px/1.3em "m+c2_Medium","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    border-bottom: 1px solid #fff;
    padding: 0 0 10px 10px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .meet_intro {
    padding: 130px 0 180px; }
    .meet_intro h2 {
      font: 30px/100% "hannari_font", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; }
    .meet_intro h3 {
      font: 35px/100% "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
      position: relative;
      text-align: center;
      margin: 0 0 45px; }
    .meet_intro ul {
      width: calc(100% - 40px);
      max-width: 1200px;
      margin: 0 auto 90px; }
    .meet_intro li {
      width: 100%;
      max-width: 340px;
      margin: 0 0 50px; }
      .meet_intro li .name {
        text-align: center;
        font: 27px/1.3em "m+c2_Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
        margin: 0 0 20px;
        position: relative; }
        .meet_intro li .name:before {
          position: absolute;
          content: "";
          display: block;
          width: 95px;
          height: 62px;
          top: -75px;
          left: 0; }
      .meet_intro li img {
        max-width: 80%;
        display: block;
        margin: 0 auto; }
    .meet_intro .other {
      display: inline-block;
      text-align: center;
      font: 20px/1.5em "m+c2_Medium","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      border-bottom: 1px solid #fff;
      padding: 0 0 10px 10px; }
      .meet_intro .other br {
        display: block; } }
/*max-width:480px*/