@charset "UTF-8";
@import url(normalize.css);
/* ----------------------------
  PC用CSS
---------------------------- */
/*-------------
 reset
-------------*/
/* リセット */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote {
  padding: 0;
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; }

ul, ol {
  list-style: none inside; }

img, a img {
  border: 0;
  vertical-align: middle;
  width: auto; }

table, tr, td, th {
  border-collapse: collapse;
  vertical-align: top; }

　
* {
  margin: 0;
  padding: 0; }

html {
  font-size: 10px;
  font-weight: normal;
  font-family: Zen Maru GOthic;
  border-style: none; }

body {
  width: 100%;
  border-style: none;
  background-color: #fff;
  position: relative;
  text-align: center; }

#wrapper {
  text-align: center;
  margin: 0 auto; }

#container {
  position: relative; }

.page-content {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto; }

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto; }

p {
  font-size: 1.6rem;
  font-weight: normal;
  text-align: center;
  color: #333333; }

h1 {
  font-size: 4.0rem;
  font-weight: bold;
  text-align: center;
  color: #f09e67;
  margin-top: 4px;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0px -2px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 3px 3px 6px rgba(0, 0, 0, 0.25); }

h2 {
  font-size: 2.8rem;
  color: #f09e67;
  font-weight: bold;
  font-style: italic;
  text-align: center; }

h3 {
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-top: 10px; }

h4 {
  font-size: 2.0rem;
  color: #f09e67;
  font-weight: bold;
  font-style: italic;
  text-align: center; }

.pc {
  display: block; }

.sp {
  display: none; }

.sp_br {
  display: none; }

/*-------------
 mv
-------------*/
.mv {
  background-image: url(../img/bairinen_pc_top_fv_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding-top: 100px;
  padding-bottom: 40px;
  position: relative; }
  .mv .page-content .mv-img {
    margin: 40px auto 0;
    position: relative;
    width: 1000px;
    height: 610px;
    overflow: hidden; }
    .mv .page-content .mv-img div {
      position: absolute;
      inset: 0; }
    .mv .page-content .mv-img img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0;
      animation: image-switch-animation 20s infinite; }
    .mv .page-content .mv-img .mv-img-01 img {
      animation-delay: 0s; }
    .mv .page-content .mv-img .mv-img-02 img {
      animation-delay: 5s; }
    .mv .page-content .mv-img .mv-img-03 img {
      animation-delay: 10s; }
    .mv .page-content .mv-img .mv-img-04 img {
      animation-delay: 15s; }
@keyframes image-switch-animation {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  25% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0; } }
  .mv .page-content .facility-introduction {
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px; }
    .mv .page-content .facility-introduction .facility-introduction-img {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .mv .page-content .facility-introduction .title-img {
      width: 100%;
      display: flex;
      justify-content: center; }
      .mv .page-content .facility-introduction .title-img img {
        display: block;
        max-width: 100%;
        height: auto; }
    .mv .page-content .facility-introduction .icon-img {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch; }
      .mv .page-content .facility-introduction .icon-img .img-link {
        display: block;
        text-decoration: none;
        line-height: 0;
        border-radius: 10px;
        overflow: hidden; }
        .mv .page-content .facility-introduction .icon-img .img-link img {
          display: block;
          width: 100%;
          height: auto; }
        @media (hover: hover) and (pointer: fine) {
          .mv .page-content .facility-introduction .icon-img .img-link {
            transition: transform .2s ease, filter .2s ease; }
            .mv .page-content .facility-introduction .icon-img .img-link:hover {
              transform: translateY(-2px);
              filter: brightness(1.02); } }

/*-------------
 banner
-------------*/
.banner {
  padding-top: 120px;
  padding-bottom: 70px; }

/*-------------
 philosophy
-------------*/
.philosophy {
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  padding-top: 70px;
  padding-bottom: 140px;
  /* ----------------
     item base
  ---------------- */ }
  .philosophy hr {
    border: none;
    height: 2px;
    background-color: #f09e67;
    margin: 20px auto 0;
    width: 900px;
    max-width: 100%; }
  .philosophy img {
    display: block; }
  .philosophy .philosophy-inner {
    margin-top: 80px;
    display: grid;
    gap: 72px; }
  .philosophy .p-item {
    position: relative;
    min-height: 360px;
    /* テキストを写真の縦中央あたりに配置 */
    /* 写真：右端（デフォルト） */
    /* ----------------
       reverse
    ---------------- */ }
    .philosophy .p-item > .page-content {
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
    .philosophy .p-item .p-item-body {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 20px;
      align-items: flex-start; }
    .philosophy .p-item .p-item-badge {
      width: 100px;
      height: 100px; }
      .philosophy .p-item .p-item-badge img {
        width: 100%;
        height: auto; }
    .philosophy .p-item .p-item-text {
      max-width: 460px;
      position: relative;
      letter-spacing: -0.1em; }
      .philosophy .p-item .p-item-text p {
        margin: 0;
        line-height: 1.9;
        text-align: left; }
      .philosophy .p-item .p-item-text .p-item-brush {
        position: absolute;
        left: 220px;
        top: 0;
        width: auto;
        height: auto;
        z-index: -1;
        pointer-events: none; }
    .philosophy .p-item .p-item-media-bleed {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      max-width: 42%;
      margin: 0; }
      .philosophy .p-item .p-item-media-bleed img {
        width: 100%;
        height: auto; }
    .philosophy .p-item.is-reverse {
      margin-top: 80px;
      /* 写真を左端へ */
      /* 1200枠は中央のまま、中身だけ右寄せ */ }
      .philosophy .p-item.is-reverse .p-item-media-bleed {
        right: auto;
        left: 0; }
      .philosophy .p-item.is-reverse > .page-content {
        padding: 0; }
        .philosophy .p-item.is-reverse > .page-content .p-item-body {
          margin-left: auto;
          width: fit-content; }

/*-------------
 komogomo
-------------*/
.komogomo {
  background-image: url(../img/bairinen_top_pc_komogomo_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative; }
  .komogomo hr {
    border: none;
    height: 2px;
    background-color: #f09e67;
    margin: 20px auto 0;
    width: 900px;
    max-width: 100%; }

/*-------------
 contact
-------------*/
.contact {
  bbackground-color: #fff;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  padding-top: 140px;
  padding-bottom: 120px;
  position: relative; }
  .contact .page-content
  hr {
    border: none;
    height: 2px;
    background-color: #f09e67;
    margin: 20px auto 0;
    width: 900px;
    max-width: 100%; }
  .contact p {
    margin-top: 40px; }
  .contact .contact-img-btn {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; }
    .contact .contact-img-btn > img {
      width: 480px;
      height: auto;
      border-radius: 16px;
      display: block;
      margin: 0; }
    .contact .contact-img-btn .contact-btn {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 380px; }
    .contact .contact-img-btn .img-link {
      display: block;
      text-decoration: none; }
      .contact .contact-img-btn .img-link img {
        width: 100%;
        height: auto;
        display: block; }

/* ----------------------------
  SP用CSS（768px以下）
---------------------------- */
@media screen and (max-width: 768px) {
  /*-------------
   reset
  -------------*/
  /* リセット */
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote {
    padding: 0;
    margin: 0; }

  h1, h2, h3, h4, h5, h6 {
    font-size: 100%; }

  ul, ol {
    list-style: none inside; }

  img, a img {
    border: 0;
    vertical-align: middle;
    width: auto; }

  table, tr, td, th {
    border-collapse: collapse;
    vertical-align: top; }

  /*-------------
   common
  -------------*/
  * {
    margin: 0;
    padding: 0; }

  html {
    font-size: 10px;
    font-weight: normal;
    font-family: Zen Maru GOthic;
    border-style: none; }

  body {
    width: 100%;
    border-style: none;
    background-color: #fff;
    position: relative;
    text-align: center; }

  #wrapper {
    text-align: center;
    margin: 0 auto; }

  #container {
    position: relative; }

  .page-content {
    max-width: 96vw;
    margin-right: auto;
    margin-left: auto; }

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto; }

  p {
    font-size: 1.4rem;
    font-weight: normal;
    text-align: center;
    color: #333333;
    letter-spacing: -0.1em; }

  h1 {
    font-size: 3.2rem;
    font-weight: bold;
    text-align: center;
    color: #f09e67;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0px -2px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 3px 3px 6px rgba(0, 0, 0, 0.25); }

  h2 {
    font-size: 2.0rem;
    color: #f09e67;
    font-weight: bold;
    font-style: italic;
    text-align: center; }

  h3 {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-top: 4px; }

  h4 {
    font-size: 1.6rem;
    color: #f09e67;
    font-weight: bold;
    text-align: center; }

  .pc {
    display: none; }

  .sp {
    display: block; }

  /*-------------
   mv
  -------------*/
  .mv {
    background-image: url(../img/bairinen_sp_fv_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative; }
    .mv .page-content .mv-img {
      margin: 60px auto 0;
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden; }
      .mv .page-content .mv-img div {
        position: absolute;
        inset: 0; }
      .mv .page-content .mv-img img {
        width: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 0;
        animation: image-switch-animation 20s infinite; }
      .mv .page-content .mv-img .mv-img-01 img {
        animation-delay: 0s; }
      .mv .page-content .mv-img .mv-img-02 img {
        animation-delay: 5s; }
      .mv .page-content .mv-img .mv-img-03 img {
        animation-delay: 10s; }
      .mv .page-content .mv-img .mv-img-04 img {
        animation-delay: 15s; }
  @keyframes image-switch-animation {
    0% {
      opacity: 0; }
    5% {
      opacity: 1; }
    25% {
      opacity: 1; }
    30% {
      opacity: 0; }
    100% {
      opacity: 0; } }
    .mv .page-content .facility-introduction {
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px; }
      .mv .page-content .facility-introduction .facility-introduction-img {
        align-items: center; }
      .mv .page-content .facility-introduction .title-img {
        width: 100%;
        display: flex;
        justify-content: center; }
        .mv .page-content .facility-introduction .title-img img {
          display: block;
          height: auto; }
      .mv .page-content .facility-introduction .icon-img {
        margin-top: -6px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch; }
        .mv .page-content .facility-introduction .icon-img .img-link {
          text-decoration: none;
          border-radius: 10px;
          overflow: hidden; }
          .mv .page-content .facility-introduction .icon-img .img-link img {
            width: 100%;
            height: auto; }

  /*-------------
   banner
  -------------*/
  .banner {
    padding-top: 60px;
    padding-bottom: 40px; }

  /*-------------
   philosophy
  -------------*/
  .philosophy {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    padding-top: 40px;
    padding-bottom: 60px;
    /* ----------------
       item base
    ---------------- */ }
    .philosophy hr {
      border: none;
      height: 2px;
      background-color: #f09e67;
      margin: 10px auto 0;
      width: 96%;
      max-width: 100%; }
    .philosophy img {
      display: block; }
    .philosophy .philosophy-inner {
      margin-top: 40px;
      display: grid;
      gap: 20px; }
    .philosophy .p-item {
      min-height: auto;
      margin-top: 0;
      margin-bottom: 50px;
      /* テキストを写真の縦中央あたりに配置 */
      /* 写真：右端（デフォルト） */ }
      .philosophy .p-item > .page-content {
        top: auto;
        transform: none; }
      .philosophy .p-item .p-item-body {
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 10px;
        align-items: flex-start; }
      .philosophy .p-item .p-item-badge {
        width: 70px;
        height: 70px; }
        .philosophy .p-item .p-item-badge img {
          width: 100%;
          height: auto; }
      .philosophy .p-item .p-item-text {
        max-width: none;
        letter-spacing: 0;
        letter-spacing: -0.1em;
        position: relative;
        z-index: 0; }
        .philosophy .p-item .p-item-text p {
          margin: 0;
          line-height: 1.4;
          text-align: left;
          letter-spacing: -0.1em; }
        .philosophy .p-item .p-item-text .p-item-brush {
          position: absolute;
          left: 120px;
          top: -10px;
          width: 180px;
          height: auto;
          z-index: -1;
          opacity: 1;
          display: block; }
      .philosophy .p-item .p-item-media-bleed {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        max-width: 90%;
        width: 100%;
        margin: 30px auto 0 auto; }
        .philosophy .p-item .p-item-media-bleed img {
          width: 100%;
          height: auto; }
      .philosophy .p-item.is-reverse {
        margin-top: 0px; }

  /*-------------
   komogomo
  -------------*/
  .komogomo {
    background-image: url(../img/bairinen_top_sp_komogomo_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding-top: 40px;
    padding-bottom: 100px;
    position: relative; }
    .komogomo hr {
      border: none;
      height: 2px;
      background-color: #f09e67;
      margin: 10px auto 0;
      width: 96%;
      max-width: 100%; }

  /*-------------
   contact
  -------------*/
  .contact {
    bbackground-color: #fff;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    padding-top: 80px;
    padding-bottom: 100px;
    position: relative; }
    .contact .page-content
    hr {
      border: none;
      height: 2px;
      background-color: #f09e67;
      margin: 10px auto 0;
      width: 96%;
      max-width: 100%; }
    .contact p {
      margin-top: 30px; }
    .contact .contact-img-btn {
      margin-top: 30px;
      flex-direction: column;
      align-items: center;
      gap: 20px; }
      .contact .contact-img-btn > img {
        width: 84%;
        height: auto;
        border-radius: 16px;
        margin: 0; }
      .contact .contact-img-btn .contact-btn {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%; }
      .contact .contact-img-btn .img-link {
        display: block;
        text-decoration: none; }
        .contact .contact-img-btn .img-link img {
          width: 100%;
          height: auto;
          display: block; } }

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