@charset "UTF-8";
.intro-eyecatch{
  padding-top: 16px;
  margin-bottom: 104px;

  picture,img{
    width: 100%;
    max-width: none;
  }
}
section#outline{
  position: relative;
  padding-bottom: 184px;

  .inner{
    width: min(1120px,100%);
    padding: 0 16px;
    margin-inline: auto;
  }
  ul.outline-list{
    margin-bottom: 56px;

    border-bottom: solid 1px #D3D3D3;

    li{
      border-top: solid 1px #D3D3D3;
      dl{
        display: grid;
        grid-template-columns: 190px 1fr;
      }
      dt,dd{
        padding: 24px 0;

        line-height: 1.6;
      }
      dt{
        text-align: center;
        color: #fff;

        background: #1359E8;
      }
      dd{
        padding-left: 64px;
      }
    }
  }
  .imgCON{
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  .float{
    position: absolute;
    z-index: 0;
    bottom: -6dvw;
    right: -3.4dvw;
  }
}
section#philosophy,
section#message{
  --bg-color: #FFFFFF;

  background: var(--bg-color);
  border-image-source: linear-gradient(var(--bg-color), var(--bg-color));
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
}
section#philosophy{
  padding: 96px 16px 120px;
}
section#philosophy .intro{
  margin-bottom: 80px;

  p.heading{
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;

    font-size: 42px;
    font-family: 'LINE Seed JP_OTF Bold';
    color: #1359E8;
    text-align: center;
  }
  p.heading::before{
    content: attr(data-ENG);

    font-size: 120px;
    font-family: 'LINE Seed JP_OTF ExtraBold';

    -webkit-text-stroke: 1px #1359E8;
    color: transparent;
    text-shadow: -7px -7px #135ae818;
  }
  p.text{
    font-size: 22px;
    font-family: 'LINE Seed JP_OTF Bold';
    text-align: center;
  }
}
section#philosophy .hospitarity-list{
  width: min(720px,100%);
  margin-inline: auto;
  >*+*{
    margin-block-start: 56px;
  }
  li{
    dl{
      display: grid;
      grid-template-columns: auto 1fr;
    }
    dt{
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: 120px;
      height: 120px;

      font-size: 70px;
      font-family: 'LINE Seed JP_OTF Bold';
      color: #1359E8;

      border-right: solid 1.4px #3333335d;
    }
    dd{
      padding-top: 8px;
      padding-left: 24px;

      .title{
        margin-bottom: 8px;
        font-size: 30px;
        font-family: 'LINE Seed JP_OTF Bold';
      }
      .title::after{
        content: attr(data-ENG);

        margin-left: .6em;
        
        font-size: 22px;
        color: #1359E8;
        opacity: 0.4;
      }
    }
  }
}
section#message{
  width: min(1120px,100%);
  padding: 0 16px;
  padding-bottom: 144px;

  margin-inline: auto;

  div.textContent{
    p.heading{
      margin-bottom: 8px;

      font-size: 32px;
      font-family: 'LINE Seed JP_OTF Bold';
    }
    p.text{
      margin-bottom: 40px;

      line-height: 2;
    }
    p.name{
      text-align: right;
      span{
        margin-left: 0.6em;
        font-size: 26px;
        font-family: 'LINE Seed JP_OTF Bold';
      }
    }
  }
}
section#history{
  position: relative;
  padding: 140px 16px 144px;

  ul.history-list{
    position: relative;
    z-index: 1;

    width: min(840px,100%);
    margin-inline: auto;
    >*+*{
      margin-block-start: 40px;
    }
    li dl{
      display: grid;
      grid-template-columns: 168px 1fr;
      column-gap: 32px;
    }
    li dt{
      position: relative;

      color: #1359E8;
      font-family: 'LINE Seed JP_OTF Bold';
    }
    li dt::before{
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      z-index: 3;


      display: inline-block;
      width: 10px;
      height: 10px;

      border-radius: 50%;
      background: #fff;
      border: solid 2px #1359E8;
    }
    li dt::after{
      content: '';
      position: absolute;
      top: 50%;
      right: 4px;
      z-index: 2;


      display: inline-block;
      width: 2px;
      height: calc(50% + 64px);

      background: #1359E8;
    }
    li:last-child dt::after{
      display: none;
    }
  }
  .float{
    position: absolute;
    z-index: 0;
    top: 0.5dvw;
    left: -3.4dvw;
  }
}
@media (min-width : 1200px){
}
@media (max-width : 1200px){
  section#philosophy .intro{
    p.heading::before{
      font-size: 11dvw;
    }
  }
}
@media (max-width : 599px){
  .intro-eyecatch{
    padding-top: 3.2dvw;
    margin-bottom: 10.8dvw;
  }
  section#outline{
    padding-bottom: 36dvw;
  
    .inner{
      padding: 0 3.2dvw;
    }
    ul.outline-list{
      margin-bottom: 11.2dvw;

  
      li{
        dl{
          display: grid;
          grid-template-columns: 8em 1fr;
        }
        dt,dd{
          padding: 4dvw 0;
        }
        dd{
          padding-left: 1.6em;
        }
      }
    }
    .float{
      width: 17dvw;
    }
  }
  section#philosophy{
    padding: 19.2dvw 3.2dvw 24dvw;
  }
  section#philosophy .intro{
    margin-bottom: 80px;
  
    p.heading{
      margin-bottom: 3.2dvw;
  
      font-size: 8dvw;
    }
    p.heading::before{
      text-shadow: -1.4dvw -1.4dvw #135ae818;
    }
    p.text{
      font-size: 4.4dvw;
    }
  }
  section#philosophy .hospitarity-list{
    >*+*{
      margin-block-start: 11.2dvw;
    }
    li{
      dt{
        width: 20dvw;
        height: 20dvw;
  
        font-size: 14dvw;
      }
      dd{
        padding-top: 1.6dvw;
        padding-left: 4.8dvw;

        font-size: 3.2dvw;
  
        .title{
          margin-bottom: 1.6dvw;
          font-size: 5dvw;
        }
        .title::after{
          margin-left: .6em;
          
          font-size: 4dvw;
        }
      }
    }
  }
  section#message{
    padding: 0 3.2dvw;
    padding-bottom: 28dvw;
  
    div.textContent{
      p.heading{
        margin-bottom: 2dvw;
  
        font-size: 6dvw;
      }
      p.text{
        margin-bottom: 8dvw;
      }
      p.name{
        span{
          margin-left: 0.6em;
          font-size: 5.2dvw;
        }
      }
    }
  }
  section#history{
    padding: 28dvw 3.2dvw 28dvw;
  
    ul.history-list{
      >*+*{
        margin-block-start: 8dvw;
      }
      li dl{
        grid-template-columns: 8em 1fr;
        column-gap: 4dvw;
      }
      li dt{
        display: flex;
        align-items: center;
      }
      li dt::before{
        width: 2dvw;
        height: 2dvw;
      }
      li dt::after{
        content: '';
        position: absolute;
        top: 50%;
        right: 4px;
        z-index: 2;
  
  
        display: inline-block;
        width: 2px;
        height: calc(50% + 64px);
  
        background: #1359E8;
      }
    }
    .float{
      top: -5dvw;
      width: 17dvw;
    }
  }
}