@charset "UTF-8";
#loadWidth {
  max-width: 900px;
  width: 90%;
  margin: 60px auto 0; }
  @media (min-width: 768px) {
    #loadWidth {
      margin: 120px auto 0; } }
  #loadWidth .description {
    margin-bottom: 40px; }
    #loadWidth .description h1 {
      font-size: 1.5em;
      line-height: 1.5em;
      text-align: center;
      margin-bottom: 20px; }
      @media (min-width: 768px) {
        #loadWidth .description h1 {
          font-size: 2em; } }
    #loadWidth .description p {
      font-size: 0.9em;
      line-height: 1.8em;
      text-align: center; }
      @media (min-width: 768px) {
        #loadWidth .description p {
          font-size: 1em; } }
  #loadWidth .Photo {
    margin-bottom: 20px; }
    @media (min-width: 768px) {
      #loadWidth .Photo {
        margin-bottom: 40px; } }
    #loadWidth .Photo img {
      width: 100%;
      height: auto; }
  #loadWidth .Text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 30px);
    margin-bottom: 60px; }
    @media (min-width: 1024px) {
      #loadWidth .Text {
        padding: 20px; } }
    #loadWidth .Text .TextIn {
      position: relative; }
      #loadWidth .Text .TextIn h3 {
        font-size: 1.0em;
        line-height: 1.4em;
        margin-bottom: 10px; }
      #loadWidth .Text .TextIn h2 {
        font-size: 1.25em;
        font-weight: bold;
        line-height: 1.4em;
        margin-bottom: 20px; }
        @media (min-width: 768px) {
          #loadWidth .Text .TextIn h2 {
            margin-bottom: 30px; } }
      #loadWidth .Text .TextIn p {
        font-size: 0.9em;
        line-height: 1.8em;
        text-align: justify; }
  #loadWidth .Zukan {
    margin: 20px auto 120px;
    text-align: center;
    width: 95%; }
    #loadWidth .Zukan h2 {
      font-size: 1.4em;
      line-height: 1.6em; }
    #loadWidth .Zukan p {
      font-size: 0.9em;
      line-height: 1.8em;
      max-width: 560px;
      margin: auto; }
  @media only screen and (min-width: 1024px) {
    #loadWidth .o-6column .col-xl-6 {
      padding: 0 20px; }
    #loadWidth .o-6column {
      margin: 0 -20px; } }

/*
---------------------------------------------------------------------------------------------------------------------
コンセプト
---------------------------------------------------------------------------------------------------------------------
*/
#Concept {
  max-width: 900px;
  margin: auto;
  width: 100%;
  padding: 0 0 40px; }
  @media (min-width: 1024px) {
    #Concept {
      padding: 50px 0 0; } }
  #Concept .ConceptIn {
    width: 100%; }
    @media (min-width: 1024px) {
      #Concept .ConceptIn {
        display: flex; } }
    #Concept .ConceptIn .Title {
      width: 85%;
      margin: auto; }
      @media (min-width: 1024px) {
        #Concept .ConceptIn .Title {
          width: 50%;
          padding: 0 30px; } }
      #Concept .ConceptIn .Title h2 {
        text-align: center;
        font-weight: bold; }
      #Concept .ConceptIn .Title h3 {
        text-align: center;
        margin-top: 20px; }
      #Concept .ConceptIn .Title p {
        font-size: 0.9em;
        line-height: 2.2em;
        text-align: justify;
        margin-top: 40px; }
    #Concept .ConceptIn .Sp {
      margin-bottom: 20px; }
      @media (min-width: 1024px) {
        #Concept .ConceptIn .Sp {
          display: none; } }
    #Concept .ConceptIn .Pc {
      display: none; }
      @media (min-width: 1024px) {
        #Concept .ConceptIn .Pc {
          display: inherit;
          width: 50%; } }
    #Concept .ConceptIn .swiper-container .swiper-slide img {
      width: 100%;
      height: auto;
      border-radius: 20px; }
  #Concept .swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 10px;
    color: #fff; }
  #Concept .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5; }
  #Concept .swiper-pagination-bullet-active {
    background: #333;
    opacity: 1; }

#Archive {
  max-width: 900px;
  width: 90%;
  margin: 20px auto 100px; }
  @media (min-width: 768px) {
    #Archive {
      margin: 0px auto; } }
  #Archive h3 {
    font-size: 1.2em;
    line-height: 1.6em;
    text-align: center;
    margin-bottom: 20px; }
  #Archive .BlogText {
    margin: 20px auto 40px; }
    #Archive .BlogText p {
      font-size: 1em;
      text-align: center; }
    #Archive .BlogText h4 {
      font-size: 1em;
      line-height: 1.6em;
      margin-bottom: 10px;
      text-align: center; }
    #Archive .BlogText .Btn {
      margin-bottom: 120px; }

#ArchiveList {
  border-top: 1px solid #ddd; }
  #ArchiveList .News_archive {
    border-bottom: 1px solid #ddd;
    padding: 20px 0 50px; }
    @media (min-width: 768px) {
      #ArchiveList .News_archive {
        padding: 40px 0; } }
    #ArchiveList .News_archive .News_frame {
      clear: both; }
      @media (min-width: 768px) {
        #ArchiveList .News_archive .News_frame {
          height: 220px; } }
      #ArchiveList .News_archive .News_frame .News_Photo {
        float: left;
        width: 30%;
        max-width: 220px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px; }
        @media (min-width: 768px) {
          #ArchiveList .News_archive .News_frame .News_Photo {
            margin-top: 0px; } }
        #ArchiveList .News_archive .News_frame .News_Photo img {
          width: 100%;
          height: auto; }
      #ArchiveList .News_archive .News_frame .News_Right {
        width: 68%;
        margin-left: 32%;
        position: relative; }
        @media (min-width: 1025px) {
          #ArchiveList .News_archive .News_frame .News_Right {
            padding: 20px 20px 0px 0px; } }
        #ArchiveList .News_archive .News_frame .News_Right .date {
          display: flex; }
          #ArchiveList .News_archive .News_frame .News_Right .date h4 {
            color: #ef858c;
            font-size: 0.9em; }
        #ArchiveList .News_archive .News_frame .News_Right h3 {
          font-size: 1.2em;
          margin-top: 0px;
          line-height: 1.4em;
          font-feature-settings: "palt";
          letter-spacing: 0.04em;
          font-weight: 600;
          text-align: justify; }
          @media (min-width: 768px) {
            #ArchiveList .News_archive .News_frame .News_Right h3 {
              margin-top: 15px;
              font-size: 1.4em; } }
        #ArchiveList .News_archive .News_frame .News_Right p {
          text-align: justify;
          font-size: 0.9em;
          line-height: 1.7em;
          margin-top: 20px;
          color: #666; }
          @media (min-width: 768px) {
            #ArchiveList .News_archive .News_frame .News_Right p {
              font-size: 1em; } }
        #ArchiveList .News_archive .News_frame .News_Right .MORE {
          position: absolute;
          right: 5%; }

.MORE a {
  font-size: 0.9em;
  margin-top: 10px;
  float: right;
  position: relative;
  color: #ef858c; }
  .MORE a.btn-lin::before {
    position: absolute;
    top: 50%;
    right: -20px;
    content: '';
    margin-top: -5px;
    border: 7px solid transparent;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-color: #ef858c;
    transition: all .3s; }
  .MORE a::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: '';
    width: 130%;
    height: 1px;
    background: #ef858c;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s; }
  .MORE a:hover::after {
    transform-origin: left top;
    transform: scale(1, 1); }

.Btn {
  text-align: center;
  margin-top: 30px; }
  .Btn a {
    color: #333;
    display: inline-block;
    width: 280px;
    text-align: center;
    font-size: 0.9em;
    border-radius: 50px;
    padding: 10px;
    border: 1px solid #333;
    font-feature-settings: "palt";
    letter-spacing: 0.08em;
    transition: .5s;
    transform: scale(1); }
    @media (min-width: 768px) {
      .Btn a {
        font-size: 1.1em;
        width: 320px; } }
    .Btn a:hover {
      transform: scale(1.05); }

@media screen and (min-width: 680px) {
  .pc {
    display: inline; }

  .sp {
    display: none; } }
@media screen and (max-width: 680px) {
  .pc {
    display: none; }

  .sp {
    display: inline; } }
