@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Cormorant+Infant&family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap");
/*
font-family: $font-gothic;
300 400 500 700
*/
/*
font-family: $font-min;
300 400 500 600 700
*/
/*
font-family: $font-en;
400
*/
/*@include font-gothic();*/
/*@include font-min();*/
/*@include font-en();*/
/*@include incImg100();*/
/*@include incSmooth();*/
/*@include dropshadow;*/
/*@include boxshadow;*/
/*@include fs();*/
/*@include btm();*/
.header {
  background: none;
  box-shadow: 0 7px 7px -3px rgba(0, 0, 0, 0); }

.header .hdL {
  position: relative;
  z-index: 1; }

.sdgsMv {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%; }
  .sdgsMv .title {
    display: flex;
    align-items: center;
    align-content: center;
    padding: 0 7vw 30px;
    position: absolute;
    bottom: 5vw;
    left: 0;
    z-index: 2; }
    .sdgsMv .title .en {
      display: inline-block;
      font-family: "Cormorant Infant", serif;
      font-size: 120px;
      font-size: 12rem;
      line-height: 2;
      line-height: 1.8;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.01em; }
      @media only screen and (max-width: 960px) {
        .sdgsMv .title .en {
          font-size: 102px;
          font-size: 10.2rem; } }
      .sdgsMv .title .en span {
        display: inline-block;
        opacity: 0;
        transform: translate(20px, 10px); }
        .sdgsMv .title .en span.mfade {
          -webkit-animation: mojiFade 0.5s ease 0.1s 1 forwards;
          animation: mojiFade 0.5s ease 0.1s 1 forwards; }
      .sdgsMv .title .en.action {
        -webkit-animation: mojiFade3 0.8s ease-out 0.8s 1 forwards;
        animation: mojiFade3 0.8s ease-out 0.8s 1 forwards; }
        .sdgsMv .title .en.action:before {
          width: 80px; }
    .sdgsMv .title .ja {
      color: #FFF;
      display: inline-block;
      font-size: 20px;
      font-size: 2rem;
      line-height: 2;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.15em;
      padding: 25px 0 0 125px;
      position: relative;
      opacity: 0; }
      @media only screen and (max-width: 960px) {
        .sdgsMv .title .ja {
          font-size: 17px;
          font-size: 1.7rem; } }
      .sdgsMv .title .ja:before {
        background: #FFF;
        content: '';
        display: inline-block;
        height: 1px;
        width: 1px;
        position: absolute;
        bottom: 5px;
        left: 20px;
        transition: 2s;
        transition-duration: ease-out; }
      .sdgsMv .title .ja.action {
        -webkit-animation: mojiFade2 0.8s ease-out 0.8s 1 forwards;
        animation: mojiFade2 0.8s ease-out 0.8s 1 forwards; }
        .sdgsMv .title .ja.action:before {
          width: 80px; }
  .sdgsMv picture {
    background: url("/biwakohotel/assets/img/environment/mv_bg.jpg") center top no-repeat;
    background-size: cover;
    display: block;
    height: 100vh;
    width: 100%;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0; }
    .sdgsMv picture.action {
      -webkit-animation: imgFade 1s ease 1s 1 forwards;
      animation: imgFade 1s ease 1s 1 forwards; }

@-webkit-keyframes mojiFade3 {
  0% {
    color: #000;
    100% {
      color: #FFF; } } }
@keyframes mojiFade3 {
  0% {
    color: #000; }
  100% {
    color: #FFF; } }
.fadeContents {
  background: white;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 7%);
  margin-top: 100vh;
  position: relative;
  z-index: 1; }

.startSec .inr {
  margin: 0 auto;
  max-width: 1000px;
  padding-top: 120px; }
  .startSec .inr .breadChumbs {
    background-color: transparent;
    top: 0;
    bottom: auto;
    right: 0; }
  .startSec .inr h2 {
    display: block;
    font-size: 30px;
    font-size: 3rem;
    line-height: 2;
    line-height: 1.8;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.15em;
    margin-bottom: 80px;
    padding: 0;
    position: relative;
    text-align: center; }
    @media only screen and (max-width: 960px) {
      .startSec .inr h2 {
        font-size: 26px;
        font-size: 2.6rem; } }
  .startSec .inr p {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2;
    line-height: 2.4;
    letter-spacing: 0.15em;
    margin: 0 auto 60px;
    max-width: 680px;
    padding: 0; }
    @media only screen and (max-width: 960px) {
      .startSec .inr p {
        font-size: 15px;
        font-size: 1.5rem; } }

.head02Sdgs .en {
  font-size: 56px;
  font-size: 5.6rem;
  line-height: 2;
  line-height: 1.8;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em; }
  @media only screen and (max-width: 960px) {
    .head02Sdgs .en {
      font-size: 48px;
      font-size: 4.8rem; } }
.head02Sdgs .ja {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 500;
  line-height: 1; }
  @media only screen and (max-width: 960px) {
    .head02Sdgs .ja {
      font-size: 15px;
      font-size: 1.5rem; } }

.anchorSec {
  margin-bottom: 150px; }
  .anchorSec .inr {
    max-width: 1400px; }
    .anchorSec .inr .sdgsAnchor {
      display: flex;
      justify-content: space-between; }
      .anchorSec .inr .sdgsAnchor li {
        width: 23%; }
        .anchorSec .inr .sdgsAnchor li a {
          display: block;
          position: relative;
          width: 100%; }
          .anchorSec .inr .sdgsAnchor li a p {
            background: rgba(0, 0, 0, 0);
            color: #FFF;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            transition: 0.3s; }
            .anchorSec .inr .sdgsAnchor li a p .num {
              font-family: "Cormorant Infant", serif;
              font-size: 20px;
              font-size: 2rem;
              line-height: 2;
              margin-bottom: 10px;
              text-align: center;
              width: 100%; }
              @media only screen and (max-width: 960px) {
                .anchorSec .inr .sdgsAnchor li a p .num {
                  font-size: 17px;
                  font-size: 1.7rem; } }
            .anchorSec .inr .sdgsAnchor li a p .name {
              font-family: "Cormorant Infant", serif;
              font-size: 22px;
              font-size: 2.2rem;
              line-height: 2;
              line-height: 1.8;
              line-height: 1.7;
              text-align: center;
              width: 100%; }
              @media only screen and (max-width: 960px) {
                .anchorSec .inr .sdgsAnchor li a p .name {
                  font-size: 19px;
                  font-size: 1.9rem; } }
            .anchorSec .inr .sdgsAnchor li a p:after {
              background: #FFF;
              content: '';
              display: block;
              height: 40px;
              width: 1px;
              position: absolute;
              bottom: 0;
              transition: 0.6s; }
            .anchorSec .inr .sdgsAnchor li a p:hover {
              background: rgba(0, 0, 0, 0.4); }
              .anchorSec .inr .sdgsAnchor li a p:hover:after {
                height: 70px; }

.sdgsHead {
  display: block;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 2;
  line-height: 1.8;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.15em;
  margin-bottom: 45px;
  padding: 0;
  text-align: center; }
  @media only screen and (max-width: 960px) {
    .sdgsHead {
      font-size: 27px;
      font-size: 2.7rem; } }
  .sdgsHead span {
    display: inline-block;
    padding: 0 50px;
    position: relative; }
    .sdgsHead span:before {
      content: '“';
      font-size: 80px;
      font-size: 8rem;
      line-height: 2;
      line-height: 1.8;
      line-height: 1;
      position: absolute;
      top: -15px;
      left: 0;
      z-index: 2; }
      @media only screen and (max-width: 960px) {
        .sdgsHead span:before {
          font-size: 68px;
          font-size: 6.8rem; } }
    .sdgsHead span:after {
      content: attr(data-txt);
      color: rgba(0, 0, 0, 0.08);
      display: block;
      font-family: "Cormorant Infant", serif;
      font-size: 100px;
      font-size: 10rem;
      line-height: 2;
      line-height: 1.8;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.01em;
      position: absolute;
      top: -25px;
      right: -5px;
      z-index: 2; }
      @media only screen and (max-width: 960px) {
        .sdgsHead span:after {
          font-size: 85px;
          font-size: 8.5rem; } }

.cmnAnc {
  display: block;
  padding-top: 70px;
  margin-top: -70px; }

.cmnFlex .img01 {
  max-width: 220px;
  margin: 0 auto 20px; }

.zyusyouBox {
  border: 1px solid #ddd;
  padding: 50px;
  max-width: 800px;
  margin: auto; }
  .zyusyouBox dl {
    display: flex;
    margin-bottom: 5px; }
    .zyusyouBox dl dt {
      width: 20%; }
    .zyusyouBox dl dd {
      width: 80%; }

.sec02Img p {
  max-width: 800px;
  margin: auto;
  width: 100%; }

.gBorder {
  border: 1px solid #ddd;
  padding: 25px 30px; }
  .gBorder ul li {
    display: inline-block;
    margin-right: 20px; }

.cGray .enList > li {
  margin-bottom: 60px; }
  .cGray .enList > li:last-child {
    margin-bottom: 0; }

.last {
  margin-bottom: 0;
  padding-bottom: 130px; }

/* Responsive Start */
@media only screen and (max-width: 960px) {
  .sdgsMv picture {
    background-image: url("/biwakohotel/assets/img/environment/mv_bg_sp.jpg") !important;
    background-size: cover !important;
    background-position: left bottom; }
  .sdgsMv .title {
    flex-wrap: wrap;
    padding: 0 7vw 0;
    position: absolute;
    top: 40%;
    bottom: auto; }
    .sdgsMv .title .en {
      font-size: 60px; }
    .sdgsMv .title .ja {
      font-size: 15px;
      padding: 25px 0 0 20px; }
      .sdgsMv .title .ja:before {
        display: none; }

  .fadeContents {
    background: white;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 5%); }

  .startSec {
    padding: 0 5vw; }
    .startSec .inr {
      padding-top: 60px; }
      .startSec .inr h2 {
        font-size: 20px;
        letter-spacing: 0.05em;
        margin-bottom: 30px; }
      .startSec .inr p {
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.05em;
        margin: 0 auto 30px;
        padding: 0; }

  .head02Sdgs .en {
    font-size: 36px; }
  .head02Sdgs .ja {
    font-size: 13px; }

  .anchorSec {
    margin-bottom: 100px; }
    .anchorSec .inr .sdgsAnchor {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      .anchorSec .inr .sdgsAnchor li {
        margin-bottom: 15px;
        width: 48%; }
        .anchorSec .inr .sdgsAnchor li a p .num {
          font-family: "Cormorant Infant", serif;
          font-size: 20px;
          font-size: 2rem;
          line-height: 2;
          margin-bottom: 0;
          text-align: center;
          width: 100%; } }
        @media only screen and (max-width: 960px) and (max-width: 960px) {
          .anchorSec .inr .sdgsAnchor li a p .num {
            font-size: 17px;
            font-size: 1.7rem; } }
@media only screen and (max-width: 960px) {
        .anchorSec .inr .sdgsAnchor li a p .name {
          font-family: "Cormorant Infant", serif;
          font-size: 16px;
          line-height: 1.5;
          text-align: center;
          width: 100%; }
        .anchorSec .inr .sdgsAnchor li a p:after {
          background: #FFF;
          content: '';
          display: block;
          height: 30px;
          width: 1px;
          position: absolute;
          bottom: 0;
          transition: 0.6s; }
        .anchorSec .inr .sdgsAnchor li a p:hover {
          background: rgba(0, 0, 0, 0); }
          .anchorSec .inr .sdgsAnchor li a p:hover:after {
            height: 30px; }

  .sdgsHead {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 45px;
    padding: 0;
    text-align: center; }
    .sdgsHead span {
      display: inline-block;
      padding: 0 30px;
      position: relative; }
      .sdgsHead span:before {
        content: '“';
        font-size: 40px;
        line-height: 1;
        position: absolute;
        top: -15px;
        left: 0;
        z-index: 2; }
      .sdgsHead span:after {
        content: attr(data-txt);
        color: rgba(0, 0, 0, 0.08);
        display: block;
        font-family: "Cormorant Infant", serif;
        font-size: 65px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.01em;
        position: absolute;
        top: -25px;
        right: -15px;
        z-index: 2; }

  .sdgs {
    margin-bottom: 70px; }

  .cmnFlex .img01 {
    max-width: 150px;
    margin: 50px auto 20px; }

  .zyusyouBox {
    padding: 25px; }
    .zyusyouBox dl {
      display: block;
      margin-bottom: 20px; }
      .zyusyouBox dl dt {
        width: 100%; }
      .zyusyouBox dl dd {
        width: 100%; }

  .gBorder {
    padding: 20px; }
    .gBorder ul li {
      margin-right: 15px; }

  .cGray .enList > li {
    margin-bottom: 30px; }
    .cGray .enList > li:last-child {
      margin-bottom: 30px; }

  .last {
    margin-bottom: 0;
    padding-bottom: 40px; } }