
#header {
	border-bottom: 1px solid #d9dde5;
  background-color: var(--color_white);
	.header_inner {
		height: 80px;
    display: grid;
    grid-template-columns: 270px auto;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 60px);
    max-width: 1340px;
    margin:0 auto;
	}
	.header_tel {
    display: grid;
    justify-items: end;
    font-size: 1.3rem;
    grid-row-gap: .33em;
    margin-right: calc(min(50vw,670px) - 550px);
    justify-self: end;
		p {
      color: #797979;
      line-height: 1.5;
    }
		a {
      color: var(--color_main);
      font-size: 2.3rem;
      font-weight: 600;
    }
	}
}

@media (max-width: 1400px) {

  #header {
    .header_tel {
    margin-right: calc(50vw - 580px);
    }
  }

}

@media (max-width: 1160px) {

  #header {
    .header_tel {
    margin-right: 0;
    }
  }

}
/* タイトル・お知らせ */
#notice_title {
	.wrap {
    background: var(--color_main);
    padding:70px 0;
    .contents {
      h1 {
        color: var(--color_white);
        font-size: min(3.6vw,3.6rem);
        line-height: 1.5;
      }
    }
  }
}

#page_link {
  .wrap {
    background-color: #F5F6F8;
    .contents {
      .page_link_list {
        grid-template-columns: repeat(4,1fr);
        grid-column-gap: 1%;
        li {
          a {
            justify-content: start;
            padding:0 1.5em;
            background-color: var(--color_white);
            font-size: min(2.0vw,1.6rem);
          }
        }
      }
    }
  }
}

#information {
  .wrap {
    padding-top: 0;
    background-color: #F5F6F8;
    .contents {
      .notice_box {
        padding: 3.5em 4em;
        border: 1px solid #d9dde5;
        background-color: var(--color_white);
        p {
          &:not(:last-child) {
            margin-bottom: 1.5em;
            &.release_date {
              padding: 1em 1.5em;
              background: #e7eefa;
              color: var(--color_main);
              font-size: 1.7rem;
              font-weight: 600;
            }
            &.signature {
              text-align: right;
            }
          }
        }
      }
    }
  }
}
/* 会社概要 */
#company {
  .wrap {
    background-color: #F5F6F8;
    .contents {
      table {
          width:100%;
          border-collapse:collapse;
          font-size:1.6rem;
          background-color:var(--color_white);
          border-top:1px solid #D9DDE5;
          tr {
              border-bottom:1px solid #D9DDE5;
          }
          th,td {
              line-height:2;
              padding:1.5em;
          }
          th {
              color:var(--color_main);
              background-color:#EEF1F7;
              text-align:left;
              width:15em;
          }
          td {
              h3 {
                  margin-bottom:1em;
                  &:not(:first-child) {
                      margin-top:1.5em;
                  }
              }
              img {
                width: 100%;
                max-width:380px;
              }
              a {
                color:var(--color_main);
                display: inline-grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                grid-column-gap: .33em;
              }
          }
      }
    }
  }
}
/* 事業所一覧 */
#offices {
  .wrap {
    .contents {
      h2 {
        margin-bottom: 4em;
      }
      .office_category {
        color: #797979;
        margin-bottom: 2em;
      }
      .office_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:25px;
        &:not(:last-child) {
          margin-bottom: 50px;
        }
        & > li {
          padding: 2em 2.5em;
          border: 1px solid #d9dde5;
          h4 {
            margin-bottom: .66em;
            color: var(--color_main);
            font-size: 2.2rem;
            line-height: 1.5;
            .font_en {
              margin-left: 1.3rem;
              color: #797979;
              font-size: 1.3rem;
            }
          }
          .office_data {
            display: grid;
            grid-template-columns: 4em 1fr;
            grid-row-gap: .5em;
            font-size: 1.5rem;
            dt,dd {
              line-height: 1.6;
              a {
                color:var(--color_main);
              }
            }
            dt {
              color: #797979;
            }
          } 
          .access {
            margin-top: 1.33em;
            padding-top: 1.5em;
            border-top: 1px dashed #d9dde5;
            dt {
              font-size: 1.3rem;
              font-weight: 700;
              margin-bottom: .66em;
            }
            dd {
              color: #797979;
              font-size: 1.4rem;
              line-height: 1.8;
            }
          }
        } 
      }

    }
  }
  
}
/* お問い合わせ先 */
#contact {
  .wrap {
    .contents {
      .contact_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 2%;
        li {
          display: grid;
          justify-items: center;
          padding:3em;
          border: 1px solid #d9dde5;
          grid-row-gap: 1em;
          h3 {
            font-size: 2.0rem;
          }
          .free_call {
            padding: .5em 1em;
            color: var(--color_white);
            background: var(--color_main);
            font-size: 1.2rem;
            font-weight: 600;
          }
          .tel {
            display: grid;
            grid-template-columns: repeat(2,auto);
            align-items: center;
            justify-content: center;
            color: var(--color_main);
            font-size: min(5vw,4.8rem);
            grid-column-gap: .33em;
            .icon {
              width: .66em;
            }
          }
          .hours {
            color: #797979;
            font-size: 1.4rem;
            line-height: 1.5;
          }
        }
      }
      .contact_note {
        margin-top: 3em;
        font-size: 1.5rem;
      }
    }
  }
  
}
/* フッター */
#footer {
  background: var(--color_main);
  .wrap {
    padding: 60px 0 30px;
  }
  p,
  a {
    color: var(--color_white);
  }
  .company_name {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: .5em;
  }
  .address {
    font-size: 1.4rem;
    line-height: 1.7;
  }
  .copyright {
    margin-top: 4em;
    padding-top: 1.5em;
    border-top: 1px solid rgb(255,255,255,.25);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.;
  }
}

@media (max-width: 1024px) {

  #information {
    .wrap {
      .contents {
        .notice_box {
          padding: 2.5em 3em;
        }
      }
    }
  }

  /* 事業所一覧 */
  #offices {
    .wrap {
      .contents {
        .office_list {
          & > li {
            padding: 2em 2em;
          } 
        }
      }
    }
  }

}
/* スマートフォン */
@media (max-width: 768px) {

  #header {
    .header_inner {
      height: 50px;
      grid-template-columns: 1fr;
      justify-content: center;
      width: calc(100% - 40px);
    }
    .logo {
      max-width: 240px;
      justify-self: center;
    }
    .header_tel {
      font-size: mini(3.6vw,1.3rem);
      position: fixed;
      z-index: 99;
      left: 0;
      bottom:0;
      background-color: var(--color_white);
      width: 100%;
      grid-template-columns: repeat(2,auto);
      align-items: center;
      justify-content: center;
      grid-column-gap: 1em;
      padding:1em;
      border-top:1px solid var(--color_main);
      a {
        font-size: min(7vw,2.8rem);
      }
    }
  }

  /* タイトル・お知らせ */
  #notice_title {
    .wrap {
      padding:min(7vw,70px) 0;
      .contents {
        h1 {
          font-size: min(5.4vw,3.0rem);
          text-align: center;
        }
      }
    }
  }

  #page_link {
    .wrap {
      background-color: #F5F6F8;
      .contents {
        .page_link_list {
          grid-template-columns: repeat(2,1fr);
          grid-gap: 2vw;
          li {
            a {
              height: 3em;
              padding:0 1em;
              font-size: min(4vw,1.6rem);
            }
          }
        }
      }
    }
  }

  #information {
    .wrap {
      .contents {
        .notice_box {
          padding: 1.5em;
          border: 1px solid #d9dde5;
          background-color: var(--color_white);
          p {
            &:not(:last-child) {
              &.release_date {
                padding: 1em;
                font-size: 1.5rem;
              }
            }
          }
        }
      }
    }
  }
  /* 会社概要 */
  #company {
    .wrap {
      .contents {
        table {
            font-size:1.4rem;
            th,td {
                line-height:1.7;
                padding:1em;
                display: block;
                width: 100%;
            }
            th {
                width: 100%;
            }
        }
      }
    }
  }
  /* 事業所一覧 */
  #offices {
    .wrap {
      .contents {
        h2 {
          margin-bottom: 3em;
        }
        .office_category {
          margin-bottom: 1.5em;
        }
        .office_list {
          grid-template-columns: 1fr;
          grid-gap:20px;
          & > li {
            padding: 1.5em;
            border: 1px solid #d9dde5;
            h4 {
              font-size: 1.8rem;
              .font_en {
                margin-left: 1rem;
                font-size: 1.2rem;
              }
            }
            .office_data {
              font-size: 1.4rem;
            }
          } 
        }

      }
    }
    
  }
  /* お問い合わせ先 */
  #contact {
    .wrap {
      .contents {
        max-width: 400px;
        .contact_list {
          grid-template-columns: 1fr;
          grid-row-gap: 20px;
          li {
            padding:2em 1em;
            h3 {
              font-size: 2.0rem;
            }
            .tel {
              font-size: min(10vw,4.8rem);
            }
            .hours {
              font-size: 1.3rem;
            }
          }
        }
        .contact_note {
          margin-top: 2em;
          font-size: 1.4rem;
        }
      }
    }
    
  }
  /* フッター */
  #footer {
    background: var(--color_main);
    .wrap {
      padding: 40px 0 80px;
    }
    .company_name {
      font-size: 1.7rem;
    }
    .address {
      font-size: 1.3rem;
    }
    .copyright {
      margin-top: 2em;
      font-size: 1.0rem;
    }
  }

}
