@charset "UTF-8";
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

#wrap header {
  z-index: 2; }
#wrap #contents section {
  position: relative; }
  #wrap #contents section:nth-child(2) {
    margin: 100px 0 0; }
    @media screen and (max-width: 599px) {
      #wrap #contents section:nth-child(2) {
        margin: 80px 0 0; } }
  #wrap #contents section:last-child {
    margin: 200px 0 0; }
    @media screen and (max-width: 599px) {
      #wrap #contents section:last-child {
        margin: 130px 0 0; } }
  @media screen and (min-width: 1025px) {
    #wrap #contents section .pc_line #line_02 {
      width: 100%;
      z-index: 0;
      position: absolute;
      top: -2%; }
    #wrap #contents section .pc_line #line_01 {
      width: 100%;
      z-index: 0;
      position: absolute;
      top: 7%; }
    #wrap #contents section .pc_line #line_04 {
      width: 100%;
      z-index: 0;
      position: absolute;
      bottom: -3%; }
    #wrap #contents section .pc_line #line_03 {
      width: 100%;
      z-index: 0;
      position: absolute;
      bottom: -2%; } }
  @media screen and (max-width: 1024px) {
    #wrap #contents section .pc_line {
      display: none; } }
  #wrap #contents section .sp_line {
    display: none; }
    @media screen and (max-width: 1024px) {
      #wrap #contents section .sp_line {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%; }
        #wrap #contents section .sp_line #line_02_sp {
          position: absolute;
          top: 6%; }
        #wrap #contents section .sp_line #line_01_sp {
          position: absolute;
          top: 12%; }
        #wrap #contents section .sp_line #line_04_sp {
          position: absolute;
          bottom: -3%; }
        #wrap #contents section .sp_line #line_03_sp {
          position: absolute;
          bottom: 4%; } }
  #wrap #contents section .bubble_01 {
    width: 540px;
    height: 500px;
    position: absolute;
    top: 5%;
    left: 5%;
    background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.5), rgba(236, 231, 252, 0.5));
    animation: bubble_03 20s infinite;
    mix-blend-mode: multiply;
    transform: rotate(85deg);
    pointer-events: none;
    z-index: 1; }
    @media screen and (max-width: 599px) {
      #wrap #contents section .bubble_01 {
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        height: 305px;
        background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.6), rgba(236, 231, 252, 0.6));
        animation: bubble_03 20s infinite;
        z-index: 1; } }
  #wrap #contents section .bubble_02 {
    width: 675px;
    height: 630px;
    position: absolute;
    bottom: 10%;
    right: 10%;
    background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.5), rgba(236, 231, 252, 0.5));
    animation: bubble_04 20s infinite;
    mix-blend-mode: multiply;
    transform: rotate(85deg);
    pointer-events: none;
    z-index: 1; }
    @media screen and (max-width: 599px) {
      #wrap #contents section .bubble_02 {
        bottom: -6%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        height: 308px;
        background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.6), rgba(236, 231, 252, 0.6));
        animation: bubble_04 20s infinite;
        z-index: 1; } }
  #wrap #contents section .bubble_03 {
    width: 670px;
    height: 620px;
    position: absolute;
    bottom: -15%;
    right: 10%;
    transform: rotate(82deg);
    background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.5), rgba(236, 231, 252, 0.5));
    animation: bubble_01 20s infinite;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1; }
    @media screen and (max-width: 599px) {
      #wrap #contents section .bubble_03 {
        bottom: -10%;
        right: auto;
        left: -30%;
        width: 85%;
        height: 350px;
        background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.6), rgba(236, 231, 252, 0.6));
        animation: bubble_01 20s infinite;
        z-index: 1; } }
  #wrap #contents section .sectionInner h2 {
    opacity: 0;
    transition: all 1s; }
    #wrap #contents section .sectionInner h2.active, #wrap #contents section .sectionInner h2.is-show {
      opacity: 1; }
  #wrap #contents section .sectionInner .titleBlock {
    margin: 35px 0 0;
    text-align: center; }
    @media screen and (max-width: 1024px) {
      #wrap #contents section .sectionInner .titleBlock {
        margin: 20px 0; } }
    #wrap #contents section .sectionInner .titleBlock p {
      /*display: inline-block;
      text-align: left;*/
      opacity: 0;
      transition: opacity 1.5s ease; }
      #wrap #contents section .sectionInner .titleBlock p em {
        font-family: "fot-tsukuaoldmin-pr6n", "serif";
        font-weight: 300;
        font-style: normal;
        font-size: 2.4375em;
        line-height: 1.6;
        letter-spacing: 0.18em;
        background: url(/assets/img/philosophy/text_bg.webp) no-repeat 50%/800% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        background-position-x: 100%;
        color: transparent;
        display: block;
        max-width: 845px;
        margin: 0 auto;
        text-align: left;
        /*display: inline-block;*/
        transition: background-position 2.5s ease-in-out; }
        @media screen and (max-width: 599px) {
          #wrap #contents section .sectionInner .titleBlock p em {
            font-size: 2em;
            /*font-size: 1.5em;*/
            text-align: left; } }
        #wrap #contents section .sectionInner .titleBlock p em span {
          display: block; }
          #wrap #contents section .sectionInner .titleBlock p em span:nth-child(2) {
            margin-left: 2.7em; }
            @media screen and (max-width: 599px) {
              #wrap #contents section .sectionInner .titleBlock p em span:nth-child(2) {
                letter-spacing: 0.14em;
                margin-left: 0.6em; } }
          #wrap #contents section .sectionInner .titleBlock p em span:last-child {
            text-align: right;
            /*margin-left: 13.4em;
            @include sp {
             margin-left: 6.5em;
            }*/ }
        #wrap #contents section .sectionInner .titleBlock p em .join {
          display: inline-grid;
          grid-template-columns: auto auto; }
          @media screen and (max-width: 599px) {
            #wrap #contents section .sectionInner .titleBlock p em .join {
              display: block; } }
          #wrap #contents section .sectionInner .titleBlock p em .join span {
            margin: 0; }
            @media screen and (max-width: 599px) {
              #wrap #contents section .sectionInner .titleBlock p em .join span:first-child {
                margin-left: 1.4em; } }
            @media screen and (max-width: 599px) {
              #wrap #contents section .sectionInner .titleBlock p em .join span:last-child {
                text-align: left;
                margin-left: 0.5em; } }
      #wrap #contents section .sectionInner .titleBlock p.is-show {
        opacity: 1; }
        #wrap #contents section .sectionInner .titleBlock p.is-show em {
          background-position-x: 0; }
  #wrap #contents section .sectionInner .headingBlock {
    opacity: 0;
    transition: all 1s; }
    #wrap #contents section .sectionInner .headingBlock.is-show {
      opacity: 1; }
    #wrap #contents section .sectionInner .headingBlock h3 {
      display: grid;
      grid-template-columns: 5px 1fr;
      align-items: center;
      gap: 0 10px;
      font-size: 1em; }
      @media screen and (max-width: 599px) {
        #wrap #contents section .sectionInner .headingBlock h3 {
          font-size: 0.875em; } }
      #wrap #contents section .sectionInner .headingBlock h3::before {
        content: '';
        width: 5px;
        height: 1px;
        background-color: #596072;
        margin-top: 0.25em; }
  #wrap #contents section .sectionInner .textBlock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 1s; }
    #wrap #contents section .sectionInner .textBlock.is-show {
      opacity: 1;
      transform: translateY(0); }
    @media screen and (min-width: 1025px) {
      #wrap #contents section .sectionInner .textBlock {
        margin: 130px 0 0; } }
    #wrap #contents section .sectionInner .textBlock dl {
      margin: 0; }
      #wrap #contents section .sectionInner .textBlock dl dt {
        font-size: 1.5em;
        margin: 0 0 40px; }
        @media screen and (max-width: 599px) {
          #wrap #contents section .sectionInner .textBlock dl dt {
            font-size: 1.125em;
            margin: 0 0 20px; } }
        #wrap #contents section .sectionInner .textBlock dl dt:nth-of-type(2) {
          margin: 40px 0; }
        #wrap #contents section .sectionInner .textBlock dl dt.no-margin {
          font-size: 0;
          margin: 0; }
      #wrap #contents section .sectionInner .textBlock dl dd {
        line-height: 2; }
        @media screen and (max-width: 599px) {
          #wrap #contents section .sectionInner .textBlock dl dd {
            line-height: 1.8; } }
  #wrap #contents section .sectionInner .anchorBlock {
    margin: 80px 0 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s; }
    #wrap #contents section .sectionInner .anchorBlock.is-show {
      opacity: 1;
      transform: translateY(0); }
    @media screen and (max-width: 599px) {
      #wrap #contents section .sectionInner .anchorBlock {
        margin: 40px 0 0; } }
    #wrap #contents section .sectionInner .anchorBlock ul {
      display: grid;
      gap: 0 40px;
      grid-template-columns: 240px 240px;
      justify-content: center; }
      @media screen and (max-width: 599px) {
        #wrap #contents section .sectionInner .anchorBlock ul {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr;
          justify-items: center;
          gap: 20px 0; } }
      #wrap #contents section .sectionInner .anchorBlock ul li {
        list-style: none; }
        #wrap #contents section .sectionInner .anchorBlock ul li a {
          background-color: transparent;
          border: solid 1px #707070;
          width: 240px;
          line-height: 40px;
          font-family: "fot-tsukuaoldmin-pr6n", "serif";
          font-weight: 300;
          font-style: normal;
          font-size: 1em;
          text-align: center;
          display: flex;
          justify-content: center; }
          #wrap #contents section .sectionInner .anchorBlock ul li a .arrow_bottom::before {
            content: '↓';
            display: inline-block;
            margin-right: 5px; }
  #wrap #contents section .sectionInner .solBlock {
    margin: 80px 0 0; }
    @media screen and (max-width: 599px) {
      #wrap #contents section .sectionInner .solBlock {
        margin: 50px 0 0; } }
    #wrap #contents section .sectionInner .solBlock ul {
      display: grid;
      grid-template-columns: 140px 170px 140px 140px 140px 140px;
      grid-template-rows: 255px;
      justify-content: center; }
      @media screen and (max-width: 1024px) {
        #wrap #contents section .sectionInner .solBlock ul {
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          gap: 30px 0;
          justify-items: center; } }
      #wrap #contents section .sectionInner .solBlock ul li {
        width: 140px;
        height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.5), rgba(236, 231, 252, 0.5));
        mix-blend-mode: multiply;
        font-size: 1.125em;
        text-align: center;
        font-family: "fot-tsukuaoldmin-pr6n", "serif";
        font-weight: 300;
        font-style: normal;
        font-size: 1em;
        line-height: 1.3;
        opacity: 0;
        transform: translateY(20px);
        transition: all 1s;
        z-index: 1; }
        @media screen and (max-width: 599px) {
          #wrap #contents section .sectionInner .solBlock ul li {
            background-image: linear-gradient(45deg, rgba(225, 226, 253, 0.6), rgba(236, 231, 252, 0.6)); } }
        #wrap #contents section .sectionInner .solBlock ul li.is-show {
          opacity: 1;
          transform: translateY(0); }
        #wrap #contents section .sectionInner .solBlock ul li:nth-child(2) {
          width: 170px;
          height: 140px; }
          @media screen and (max-width: 599px) {
            #wrap #contents section .sectionInner .solBlock ul li:nth-child(2) {
              width: 115px;
              height: 105px; } }
        @media screen and (max-width: 599px) {
          #wrap #contents section .sectionInner .solBlock ul li {
            width: 115px;
            height: 105px;
            font-size: 0.75em;
            transform: none;
            position: relative;
            z-index: 1; } }
        @media screen and (min-width: 1025px) {
          #wrap #contents section .sectionInner .solBlock ul li:nth-child(even) {
            margin-top: 50%; } }
        #wrap #contents section .sectionInner .solBlock ul li:first-child {
          animation: bubble_01 20s infinite; }
        #wrap #contents section .sectionInner .solBlock ul li:nth-child(2) {
          animation: bubble_02 20s infinite; }
          @media screen and (max-width: 1024px) {
            #wrap #contents section .sectionInner .solBlock ul li:nth-child(2) {
              margin-top: -50px; } }
        #wrap #contents section .sectionInner .solBlock ul li:nth-child(3) {
          animation: bubble_03 20s infinite; }
        #wrap #contents section .sectionInner .solBlock ul li:nth-child(4) {
          animation: bubble_04 20s infinite; }
        #wrap #contents section .sectionInner .solBlock ul li:nth-child(5) {
          animation: bubble_02 20s infinite; }
          @media screen and (max-width: 1024px) {
            #wrap #contents section .sectionInner .solBlock ul li:nth-child(5) {
              margin-top: -50px; } }
        #wrap #contents section .sectionInner .solBlock ul li:last-child {
          animation: bubble_01 20s infinite; }
        #wrap #contents section .sectionInner .solBlock ul li a {
          display: inline-block;
          font-family: "fot-tsukuaoldmin-pr6n", "serif";
          font-weight: 300;
          font-style: normal;
          font-size: 1.125em;
          line-height: 1.3;
          color: #333333;
          text-align: center; }
          @media screen and (max-width: 599px) {
            #wrap #contents section .sectionInner .solBlock ul li a {
              font-size: 0.75em; } }
  #wrap #contents section .sectionInner .txt_wrap .textBlock,
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock {
    display: grid;
    margin: 100px 0 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s; }
    @media screen and (max-width: 599px) {
      #wrap #contents section .sectionInner .txt_wrap .textBlock,
      #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock {
        margin: 60px 0 0; } }
    #wrap #contents section .sectionInner .txt_wrap .textBlock:first-child,
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock:first-child {
      margin: 25px 0 0; }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.is-show,
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.is-show {
      opacity: 1;
      transform: translateY(0); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock dl dt,
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock dl dt {
      font-size: 1.3125em; }
      @media screen and (max-width: 599px) {
        #wrap #contents section .sectionInner .txt_wrap .textBlock dl dt,
        #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock dl dt {
          font-size: 1.125em; } }
  #wrap #contents section .sectionInner .txt_wrap .textBlock.con_01 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.con_01 dl {
      grid-column: 2/3; }
  #wrap #contents section .sectionInner .txt_wrap .textBlock.con_02 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.con_02 dl {
      grid-column: 3/4; }
  #wrap #contents section .sectionInner .txt_wrap .textBlock.con_03 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.con_03 dl {
      grid-column: 4/5; }
  #wrap #contents section .sectionInner .txt_wrap .textBlock.con_04 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.con_04 dl {
      grid-column: 5/6; }
  #wrap #contents section .sectionInner .txt_wrap .textBlock.con_05 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.con_05 dl {
      grid-column: 6/7; }
  #wrap #contents section .sectionInner .txt_wrap .textBlock.con_06 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 720px); }
    #wrap #contents section .sectionInner .txt_wrap .textBlock.con_06 dl {
      grid-column: 7/8; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_01 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 640px); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_01 dl {
      grid-column: 8/9; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_02 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_02 dl {
      grid-column: 7/8; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_03 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_03 dl {
      grid-column: 6/7; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_04 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_04 dl {
      grid-column: 5/6; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_05 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_05 dl {
      grid-column: 4/5; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_06 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_06 dl {
      grid-column: 3/4; }
  #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_07 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    #wrap #contents section .sectionInner .txt_wrap_reverse .textBlock.con_07 p {
      grid-column: 2/3; }
#wrap footer {
  z-index: 1; }
