@charset "UTF-8";
img {
  -webkit-backface-visibility: hidden; }

a {
  transition: 0.8s;
  text-decoration: none; }
  a:hover {
    opacity: 0.5; }

#nav-toggle span {
  background: #009fb7; }

#main {
  background: url(/common/img/about/oxto_brand/main_bg.svg) no-repeat center center;
  background-size: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (min-width: 768px) {
    #main {
      background-size: 500px;
      margin-top: -10rem; } }
  #main img {
    width: 35%;
    display: block; }
    @media (min-width: 768px) {
      #main img {
        width: 200px; } }
  #main .top_arrow {
    position: absolute;
    width: 6rem;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
    #main .top_arrow img {
      width: 100%; }

#standard h2,
#what h2,
#about h2 {
  line-height: 1.8;
  font-weight: normal; }

#standard h2,
#standard p,
#standard,
#about p,
#about {
  color: #009fb7;
  line-height: 2; }

#standard .wrap,
#what .wrap,
#about .wrap {
  width: 80%; }

.about_icon {
  position: relative;
  margin: 10rem 0 5rem 0; }
  .about_icon img {
    width: 80%;
    display: block;
    margin: -15% auto 0 auto; }
  .about_icon .circle {
    background: url(/common/img/about/oxto_brand/circle_b.svg) no-repeat center center;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 295px;
    height: 295px;
    margin: 0 auto; }
    .about_icon .circle img {
      width: 65%;
      margin: 0; }

#what {
  padding: 5rem 0;
  margin-top: 10rem; }
  @media (min-width: 768px) {
    #what {
      padding: 10rem 0; } }
  #what p {
    line-height: 2; }
  #what .circle {
    background: url(/common/img/about/oxto_brand/circle_w.svg) no-repeat center center;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 343px;
    height: 343px;
    margin: 0 auto 3rem auto; }
    @media (min-width: 768px) {
      #what .circle {
        width: 650px;
        height: 650px; } }
    @media (min-width: 1024px) {
      #what .circle {
        width: 800px;
        height: 800px; } }
    #what .circle img {
      width: 65%;
      margin: 0; }
  @media (min-width: 768px) {
    #what .wrap {
      width: 80%; } }

#standard {
  text-align: center;
  font-size: 1.4rem; }
  #standard strong {
    font-size: 5rem;
    font-weight: normal; }
  #standard p {
    text-align: center; }
  @media (min-width: 768px) {
    #standard {
      width: 80%;
      margin: 10rem auto; }
      #standard .standard_first img {
        display: block;
        margin: 0 auto 4rem auto; }
      #standard .standard_first .title {
        width: 360px; }
      #standard .standard_first h2 {
        font-size: 3rem; }
      #standard .standard_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center; }
        #standard .standard_list .wrap {
          width: 46%; }
        #standard .standard_list h2 {
          font-size: 3rem;
          margin-bottom: 1rem; }
        #standard .standard_list p {
          font-size: 2rem; } }

@media (min-width: 768px) {
  #about .wrap {
    display: flex;
    align-items: center; }
  #about .about_icon {
    width: 50%; }
  #about .about_text {
    width: 50%; }
    #about .about_text h2 {
      font-size: 3rem;
      line-height: 1.6; } }
    @media (min-width: 768px) and (min-width: 1024px) {
      #about .about_text h2 {
        font-size: 4rem; } }
@media (min-width: 768px) {
    #about .about_text p {
      font-size: 1.6rem; } }

#breadcrumb {
  position: absolute;
  top: 10rem;
  left: 0%;
  width: 90%; }

ruby rt {
  font-size: 12px;
  transform: translateY(-0.5em); }
  @media (min-width: 768px) {
    ruby rt {
      font-size: 14px; } }

@media (min-width: 1024px) {
  #what .wrap,
  #about .wrap {
    width: 1000px !important; } }

@media (min-width: 768px) {
  #about {
    padding: 10rem 0 0; } }
@media (min-width: 1024px) {
  #about {
    padding: 0; } }
@media (min-width: 768px) {
  #about div.wrap {
    justify-content: space-between; } }
@media (min-width: 768px) {
  #about div.wrap div.about_icon,
  #about div.wrap div.about_text {
    width: 48%; } }
#about > div:nth-child(even) {
  flex-flow: row-reverse; }
@media (min-width: 768px) {
  #about > div:not(:last-child) {
    margin: 0 auto 50px; } }

@media (min-width: 768px) {
  #what div.circle {
    display: inherit;
    padding: 180px 0;
    box-sizing: border-box;
    margin: 0 auto 5rem auto; } }
@media (min-width: 768px) {
  #what div.circle img.sp_hide {
    width: 60%;
    margin: 30px auto; } }
@media (min-width: 1024px) {
  #what div.circle img.sp_hide {
    margin: 100px auto 50px; } }
#what div.circle h2 {
  margin: 0; }
@media (min-width: 1024px) {
  #what p {
    width: 800px;
    margin: 0 auto; } }

#standard {
  padding: 5rem 0 0; }
  @media (min-width: 768px) {
    #standard {
      width: 100%;
      padding: 0; } }
  @media (min-width: 768px) {
    #standard div.standard_first img.image {
      width: 350px; } }
  #standard div.standard_first img.title {
    margin: 30px 0; }
    @media (min-width: 768px) {
      #standard div.standard_first img.title {
        margin: 30px auto;
        width: 300px; } }
  @media (min-width: 768px) {
    #standard div.standard_list {
      align-items: baseline; } }
  @media (min-width: 1024px) {
    #standard div.standard_list {
      width: 1000px;
      margin: 0 auto; } }
  #standard div.standard_list div.wrap {
    margin: 0px auto 5rem auto; }
    #standard div.standard_list div.wrap img {
      margin: 0 0 30px; }
    #standard div.standard_list div.wrap h2 {
      margin: 0px 0 15px;
      line-height: 1; }

@media (min-width: 768px) {
  #breadcrumb {
    position: static;
    margin: 0 auto;
    padding-top: 10rem; } }
  @media (min-width: 768px) and (min-width: 1024px) {
    #breadcrumb {
      width: 1000px;
      margin: 0 auto; } }

/* 同ページリンク非表示 */
#link_list ul li:nth-child(2) {
  display: none; }

/*# sourceMappingURL=philosophy.css.map */