/* =======================================================
* #sub_main
* ======================================================= */
#sub_main .sub_bg {
  background: url(../images/bg_about.jpg) no-repeat center /cover;
}

/* =======================================================
* philosophy
* ======================================================= */
/* philosophy_txt */
#philosophy .philosophy_txt {
  width: 35%;
  padding-left: 40px;
}

#philosophy .philosophy_txt .philosophy_txt_inner {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  line-height: 2.5;
  margin: 30px auto 10%;
}

#philosophy .philosophy_txt .philosophy_ttl {
  font-size: 2.6rem;
  font-family: ten-mincho, serif;
  font-weight: 400;
  margin-left: 20px;
}

#philosophy .philosophy_txt img {
  width: 85%;
  margin: 0 auto 50px;
}

/* philosophy_img */
#philosophy .philosophy_img {
  width: 58%;
}

#philosophy .philosophy_img .philosophy_img_item {
  margin-bottom: 140px;
}

@media screen and (max-width: 768px) {

  /* philosophy_txt */
  #philosophy .philosophy_txt {
    width: calc(100% - 20px);
    padding: 0;
  }

  #philosophy .philosophy_txt .philosophy_txt_inner {
    -webkit-writing-mode: unset;
    -ms-writing-mode: unset;
    writing-mode: unset;
    margin: 0 0 20px 20px;
    line-height: 1.8;
  }

  #philosophy .philosophy_txt .philosophy_ttl {
    font-size: 2.1rem;
    margin-left: 0;
  }

  #philosophy .philosophy_txt img {
    width: 90%;
    margin: 0 auto;
  }

  /* philosophy_img */
  #philosophy .philosophy_img {
    width: 90%;
    margin: 0px auto;
  }

  #philosophy .philosophy_img .philosophy_img_item {
    width: 73%;
    margin: 20px 0 10px auto;
  }
}


/* =======================================================
* message
* ======================================================= */
/* message_left */
#message .messageArea .message_left {
  width: 30%;
  position: relative;
}

#message .messageArea .message_left .message_name {
  position: absolute;
  content: "";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
top: -10%;
  right: 4%;
  color: #fff;
  background: var(--color-accent);
  padding: 20px 5px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1.7rem;
}

#message .messageArea .message_left .message_name span {
  font-size: 12px;
  margin-bottom: 15px;
}

/* message_right */
#message .messageArea .message_right {
  width: 63%;
}


@media screen and (max-width: 768px) {

  /* message_left */
  #message .messageArea .message_left {
    width: 70%;
    margin: 10px auto 20px;
  }

  /* message_right */
  #message .messageArea .message_right {
    width: 100%;
  }

}

/* =======================================================
* overview
* ======================================================= */
#overview {
  background-color: rgba(255, 255, 255, 0.4);
  padding-bottom: 0;
}

#overview dl {
  margin: 50px auto 30px;
  max-width: 700px
}

#overview dl dt {
  width: 30%;
  text-align: center;
  vertical-align: bottom;
  border-bottom: 1px dotted #c8b3a1;
  margin-bottom: 15px;
  padding: 10px;
  box-sizing: border-box;
}

#overview dl dd {
  width: 70%;
  border-bottom: 1px dotted #c8b3a1;
  margin-bottom: 15px;
  padding: 10px;
  box-sizing: border-box;
}

#overview iframe {
  width: 100%;
  height: 400px;
  display: block;
  border-radius: 20px;
}

.linkBtn.about_link {
  margin: 90px auto;
}

@media screen and (max-width: 768px) {
  #overview dl {
    margin: 0px auto 20px;
    max-width: 700px;
  }

  #overview iframe {
    width: 100%;
    height: 250px;
  }
}


/* =======================================================
* affiliates
* ======================================================= */
#affiliates .flex {
  margin-top: 50px;
}

#affiliates .flex .affiliates_item {
  width: 47%;
  position: relative;
}

#affiliates .flex .affiliates_item p.affiliates_name {
  position: absolute;
  content: "";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  top: -11%;
  right: 3%;
  color: #fff;
  background: #9cc832;
  padding: 15px 4px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1.4rem;
}

#affiliates .flex .affiliates_item p.affiliates_txt {
  padding: 30px 0 0;
  color: #222;
}

@media screen and (max-width: 768px) {
  #affiliates .flex {
    margin-top: 0;
  }

  #affiliates .flex .affiliates_item {
    width: 100%;
    margin-top: 50px;
  }

  #affiliates .flex .affiliates_item p.affiliates_name {
    top: -19%;
    right: 3%;
    padding: 10px 4px;
    font-size: 1.3rem;
  }

  #affiliates .flex .affiliates_item p.affiliates_txt {
    padding: 20px 10px 0;
  }

}