@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/* ======================================
   Font
======================================== */
html {
  scroll-behavior: smooth;
  font-size: 15px; }
  @media screen and (min-width: 640px) {
    html {
      font-size: 17px; } }

body {
  font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "メイリオ", sans-serif;
  color: #333333;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.4px;
  font-feature-settings: "palt" 1; }

h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; }

a {
  transition: 0.15s;
  text-decoration: none; }

a, a:focus, a:active {
  color: #000000; }

a:hover {
  color: #000000; }

/* ======================================
   Base
======================================== */
#wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative; }
  #wrapper.hide::before {
    opacity: 0; }

.container {
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0; }

.contents {
  padding: 0;
  margin: auto;
  width: 1100px;
  max-width: 90% !important; }

/* ======================================
   Anchor Link
======================================== */
#back-to-top {
  display: block;
  width: 6rem;
  padding: 0 0 1.5rem 0;
  position: fixed;
  bottom: 1rem;
  right: 0;
  z-index: 999999;
  opacity: 0;
  transition: .5s; }
  #back-to-top.show {
    opacity: 1; }
  #back-to-top span {
    white-space: nowrap;
    display: block;
    width: 100%;
    font-size: 0.7rem;
    position: absolute;
    bottom: 0;
    letter-spacing: 0;
    color: #ed6c00;
    text-align: center; }
  #back-to-top p {
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 5px;
    background-color: #ed6c00;
    background-image: url("../images/angle_up_sw.svg");
    background-size: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto; }

/* ======================================
   Header
======================================== */
#header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 99999;
  transition: 1s;
  background-color: #FFFFFF; }
  #header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9); }
  #header .logo {
    width: 370px;
    max-width: 70%;
    margin: 0;
    padding: 0 0 0 1rem;
    z-index: 999999; }
    #header .logo a {
      display: block; }
    #header .logo img {
      width: 100%;
      height: 100%; }

.main_visual {
  position: relative; }
  .main_visual .contents {
    width: 1100px;
    max-width: 100%;
    margin: auto;
    position: absolute;
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99; }
    .main_visual .contents p {
      font-family: "Noto Serif JP", serif;
      font-size: 3rem;
      font-weight: 600;
      letter-spacing: 8px;
      color: #FFFFFF;
      text-shadow: 5px 5px 10px #000000; }
      .main_visual .contents p br {
        display: block; }
        @media screen and (min-width: 640px) {
          .main_visual .contents p br {
            display: none; } }
  .main_visual .swiper-wrapper {
    width: 100%;
    height: 70vh;
    overflow: hidden; }
    @media screen and (min-width: 640px) {
      .main_visual .swiper-wrapper {
        height: 700px; } }
    .main_visual .swiper-wrapper .swiper-slide {
      width: 100%;
      height: 100%; }
      .main_visual .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; }
      .main_visual .swiper-wrapper .swiper-slide p {
        font-family: "Noto Serif JP", serif;
        font-size: 3rem;
        font-weight: 600;
        letter-spacing: 8px;
        color: #FFFFFF;
        text-shadow: 5px 5px 10px #000000;
        position: absolute;
        top: 30%;
        left: 10%;
        z-index: 9999; }
        .main_visual .swiper-wrapper .swiper-slide p br {
          display: block; }
          @media screen and (min-width: 640px) {
            .main_visual .swiper-wrapper .swiper-slide p br {
              display: none; } }

/* ======================================
   Main
======================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem; }
  .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 12em;
    min-height: 3.2rem;
    border-radius: 3rem;
    background-color: #FFFFFF;
    color: #ed6c00;
    transition: 0.5s;
    border: 2px solid #ed6c00;
    font-weight: 700;
    font-size: 1.2rem; }
    .btn a:hover {
      color: #FFFFFF;
      background-color: #ed6c00; }

h2.mid {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; }
  h2.mid::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99; }
  h2.mid img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0; }
  h2.mid em {
    position: relative;
    z-index: 999;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #FFFFFF; }

h3.mid {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  letter-spacing: 4px; }
  h3.mid span {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    margin-top: 1rem;
    font-weight: 500; }

.line {
  width: 1100px;
  max-width: 100%;
  margin: auto;
  height: 2px;
  line-height: 0;
  background-color: #ed6c00; }

#top_company {
  margin: 2rem auto; }
  #top_company .grid {
    grid-gap: 4rem; }
  #top_company .ph {
    order: 2; }
    @media screen and (min-width: 960px) {
      #top_company .ph {
        order: 1; } }
  #top_company .txt {
    order: 1; }
    @media screen and (min-width: 960px) {
      #top_company .txt {
        order: 2; } }
    #top_company .txt img {
      width: 200px;
      margin: 0 auto 3rem auto; }
    #top_company .txt h3 {
      margin: 2rem 0;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: 0.2em; }
  #top_company .link {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-top: 4rem; }
    #top_company .link a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 12em;
      min-height: 3.2rem;
      border-radius: 3rem;
      background-color: #FFFFFF;
      color: #ed6c00;
      transition: 0.5s;
      border: 2px solid #ed6c00;
      font-weight: 700;
      font-size: 1.2rem; }
      #top_company .link a:hover {
        color: #FFFFFF;
        background-color: #ed6c00; }

#top_news {
  padding: 6rem 0 0 0; }

#top_business {
  padding: 6rem 0 0 0; }
  #top_business .grid {
    grid-gap: 3rem;
    width: 960px;
    max-width: 80%;
    margin: 3rem auto; }
    @media screen and (min-width: 640px) {
      #top_business .grid {
        max-width: 100%; } }
    #top_business .grid div p {
      text-align: center;
      margin-top: 0.5rem;
      font-weight: 600; }
    #top_business .grid div a {
      overflow: hidden;
      display: block;
      aspect-ratio: 4 / 3; }
      #top_business .grid div a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: 0.5s; }
      #top_business .grid div a:hover img {
        transform: scale(1.1); }
      #top_business .grid div a.sizai-bg {
        background-color: #FBD6B4; }

#top_portfolio {
  padding: 6rem 0; }
  #top_portfolio .grid {
    grid-gap: 1rem;
    width: 960px;
    max-width: 100%;
    margin: 3rem auto; }
    #top_portfolio .grid div p {
      text-align: center;
      margin-top: 0.5rem;
      font-weight: 600; }
    #top_portfolio .grid div a {
      overflow: hidden;
      display: block;
      aspect-ratio: 1 / 1; }
      #top_portfolio .grid div a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: 0.5s; }
      #top_portfolio .grid div a:hover img {
        transform: scale(1.1); }

#top_access {
  padding: 6rem 0; }
  #top_access dl dt {
    font-size: 1.1rem;
    font-weight: 600; }
  #top_access dl dd + dt {
    margin-top: 2rem; }
  #top_access .grid {
    grid-gap: 3rem;
    width: 960px;
    max-width: 100%;
    margin: 3rem auto 0 auto; }
  #top_access .txt {
    padding-left: 2rem; }
    @media screen and (min-width: 960px) {
      #top_access .txt {
        padding-left: 0; } }
  #top_access .map iframe {
    width: 100%;
    aspect-ratio: 3 / 4; }

#top_contact {
  background-color: #f8f7f0;
  padding: 6rem 0; }
  #top_contact .grid {
    grid-gap: 3rem;
    width: 960px;
    max-width: 100%;
    margin: 3rem auto 0 auto;
    align-items: stretch; }
    #top_contact .grid div a {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      background-color: #FFFFFF;
      padding: 1rem;
      border-radius: 20px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); }
      #top_contact .grid div a p {
        text-align: center; }
        #top_contact .grid div a p span {
          display: block;
          font-size: 1.4rem;
          font-weight: 500; }

ul.news_list {
  border-top: 2px solid #ed6c00;
  border-bottom: 2px solid #ed6c00;
  width: 960px;
  max-width: 100%;
  margin: auto;
  padding: 1rem 0; }
  @media screen and (min-width: 640px) {
    ul.news_list {
      padding: 2rem; } }
  ul.news_list li a {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    transition: 0.5s; }
    ul.news_list li a:hover {
      background-color: #f8f7f0; }
    ul.news_list li a p:nth-child(1) {
      width: 8rem;
      font-size: 0.9rem;
      flex-shrink: 0; }
    ul.news_list li a p:nth-child(2) {
      width: 8rem;
      flex-shrink: 0; }
      ul.news_list li a p:nth-child(2) span {
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6rem;
        height: 1.4rem;
        background-color: #ed6c00;
        color: #FFFFFF;
        margin-top: 0.1rem; }
    ul.news_list li a p:nth-child(3) {
      width: 100%;
      margin-top: 0.2rem; }
      @media screen and (min-width: 640px) {
        ul.news_list li a p:nth-child(3) {
          width: auto;
          margin-top: 0; } }

#main {
  padding-top: 80px; }
  #main #main_title {
    padding: 2rem 0;
    background-color: #ed6c00; }
    #main #main_title h2 {
      font-weight: 600;
      color: #FFFFFF;
      text-align: center;
      line-height: 1.4; }
      #main #main_title h2 em {
        display: block;
        font-size: 2rem; }
      #main #main_title h2 span {
        display: block;
        font-family: "Roboto", sans-serif;
        font-size: 1rem;
        letter-spacing: 4px; }

#contact .container {
  padding-top: 5rem; }
#contact .contents {
  width: 960px;
  max-width: 100%;
  margin: auto; }
#contact h3 {
  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.2rem;
  margin-top: 2rem; }
  #contact h3 p {
    display: inline-block;
    position: relative;
    letter-spacing: 2px; }
    #contact h3 p::after {
      content: '';
      width: 100%;
      height: 2px;
      background-color: #ed6c00;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 999; }
  #contact h3::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #dddabe;
    position: absolute;
    bottom: 3px;
    left: 0;
    z-index: 99; }
#contact ul.tel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0 3rem 0; }
  @media screen and (min-width: 960px) {
    #contact ul.tel {
      gap: 2rem; } }
  #contact ul.tel li:nth-child(1) {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: "Roboto", sans-serif; }
  #contact ul.tel li:nth-child(2) {
    font-size: 1.2rem;
    font-weight: 600; }

#news .container {
  padding: 5rem 0 2rem 0; }
#news .contents {
  width: 960px;
  max-width: 100%;
  margin: auto; }
#news h3 {
  text-align: center;
  margin: 0 auto 2rem auto; }
  #news h3 span {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 4px; }
#news .pages {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 960px;
  max-width: 90%;
  margin: 1rem auto;
  gap: 5px; }
  #news .pages a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: #ed6c00;
    border-radius: 50%;
    color: #FFFFFF;
    font-family: "Roboto", sans-serif;
    line-height: 1; }
    #news .pages a.prev img, #news .pages a.next img {
      width: 0.6rem;
      height: 0.8rem; }
    #news .pages a.prev img {
      transform: rotate(180deg); }
#news #detail h3 {
  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.2rem;
  margin-bottom: 4rem;
  text-align: left; }
  #news #detail h3 em {
    display: inline-block;
    position: relative;
    letter-spacing: 2px; }
    #news #detail h3 em::after {
      content: '';
      width: 100%;
      height: 2px;
      background-color: #ed6c00;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 999; }
  #news #detail h3::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #dddabe;
    position: absolute;
    bottom: 3px;
    left: 0;
    z-index: 99; }
#news #detail h4 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600; }
  #news #detail h4 span {
    width: 6rem;
    font-size: 0.9rem;
    background-color: #ed6c00;
    color: #FFFFFF;
    text-align: center; }
#news #detail .ph_sub {
  width: 80%;
  margin: auto; }
  @media screen and (min-width: 960px) {
    #news #detail .ph_sub {
      width: 100%; } }
#news #detail ul.link {
  margin-top: 3rem; }
  #news #detail ul.link li a {
    display: inline-block;
    position: relative; }
    #news #detail ul.link li a::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 10px;
      background-color: #ed6c00;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      margin-right: 0.5rem; }

#business .container {
  padding: 5rem 0 2rem 0; }
#business .contents {
  max-width: 100%;
  margin: auto;
  padding: 2rem 0; }
  #business .contents.lg {
    width: 1100px; }
  #business .contents.md {
    width: 960px; }
#business .main_img {
  width: 1200px;
  max-width: 100%;
  margin: auto; }
  #business .main_img img {
    height: 300px;
    object-fit: cover;
    object-position: center; }
#business .n-ism {
  width: 200px;
  max-width: 50%;
  margin: auto;
  margin-bottom: 2rem; }
#business .lead {
  grid-template-columns: 1fr;
  grid-gap: 2rem; }
  @media screen and (min-width: 960px) {
    #business .lead {
      grid-template-columns: 18rem auto; } }
  #business .lead h3 {
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.6rem;
    text-align: center; }
#business h4.ul {
  padding: 0 0 8px 0;
  margin-bottom: 1.8rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.4rem; }
  #business h4.ul::after {
    content: '';
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: #ed6c00;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99; }
#business h5 {
  text-align: center;
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 1.8rem; }
#business .center {
  text-align: center; }
#business small {
  display: inline-block;
  text-align: left;
  margin-top: 0.5rem;
  text-align: center; }
#business .grid.col-3 {
  max-width: 80%;
  margin: auto; }
  @media screen and (min-width: 960px) {
    #business .grid.col-3 {
      max-width: 90%; } }
#business #doboku, #business #kankyo, #business #sizai, #business #chiiki {
  padding-top: 5rem; }
#business #sizai .sizai-btn {
  display: block;
  border-radius: 10px;
  background-color: #FBD6B4;
  padding: 20px;
  margin-top: 20px;
  transition: 0.5s; }
  #business #sizai .sizai-btn:hover {
    background-color: #FEC48F; }
#business #sizai .sizai-img {
  width: 400px;
  margin: auto;
  max-width: 100%; }
#business #work h3 {
  margin-bottom: 4rem; }
#business #work #archive dl {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  align-items: start;
  margin: 0 0 3rem 0;
  animation: fadein 0.5s both; }
  #business #work #archive dl + dl {
    padding-top: 3rem;
    border-top: 1px dotted #DDDDDD; }
  @media screen and (min-width: 960px) {
    #business #work #archive dl {
      grid-gap: 4rem;
      grid-template-columns: 200px auto; } }
  #business #work #archive dl.is-hidden {
    display: none;
    opacity: 0; }
  #business #work #archive dl dt {
    width: 200px;
    margin: 0; }
    #business #work #archive dl dt img {
      width: 100%; }
  #business #work #archive dl dd h4 {
    font-weight: 600;
    font-size: 1.2rem; }
    @media screen and (min-width: 960px) {
      #business #work #archive dl dd h4 {
        margin-bottom: 2rem; } }
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
#business #work .more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem; }
  #business #work .more p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10em;
    min-height: 3rem;
    border-radius: 3rem;
    background-color: #FFFFFF;
    color: #ed6c00;
    transition: 0.5s;
    border: 2px solid #ed6c00;
    font-weight: 600;
    font-size: 1.2rem; }
    #business #work .more p:hover {
      color: #FFFFFF;
      background-color: #ed6c00; }

#about .container {
  padding-top: 5rem; }
#about .contents {
  max-width: 100%;
  margin: auto; }
  #about .contents.lg {
    width: 1100px; }
  #about .contents.md {
    width: 960px; }
#about #message .grid {
  grid-gap: 4rem;
  margin-top: 4rem; }
  #about #message .grid li.txt h3 {
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2rem; }
  #about #message .grid li.txt h4 {
    font-weight: 500;
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 2rem; }
#about #message .president {
  text-align: right;
  margin-top: 2rem; }
#about #company {
  padding-top: 5rem; }
#about #history {
  padding-top: 5rem; }
  #about #history .grid {
    width: 960px;
    max-width: 90%;
    margin: 4rem auto;
    grid-gap: 4rem; }
    #about #history .grid li p {
      margin-top: 2rem; }
#about table {
  width: 100%;
  margin: 2rem auto;
  border-top: 2px solid #DDDDDD;
  border-bottom: 2px solid #DDDDDD; }
  #about table th, #about table td {
    padding: 8px 1rem;
    border-bottom: 1px solid #DDDDDD;
    display: block; }
    @media screen and (min-width: 960px) {
      #about table th, #about table td {
        display: table-cell; } }
  #about table th {
    background-color: #f8f7f0;
    width: 100%;
    border-bottom: 0;
    text-align: left; }
    @media screen and (min-width: 960px) {
      #about table th {
        width: 25%;
        min-width: 11em;
        border-bottom: 1px solid #DDDDDD; } }
  #about table td ul.flex {
    margin-left: 1rem;
    gap: 0 2rem;
    flex-wrap: wrap; }
  #about table td ul.grid {
    grid-gap: 0 2rem; }

#recruit .txt {
  font-size: 1.2rem; }
#recruit .chara {
  width: 200px;
  max-width: 30%;
  float: right; }
#recruit .grid.message {
  grid-gap: 5rem;
  margin: 5rem auto; }

.grid.map {
  grid-template-columns: 1fr;
  align-items: center;
  grid-gap: 1rem !important; }
  @media screen and (min-width: 640px) {
    .grid.map {
      grid-template-columns: 4fr 1fr; } }
  .grid.map li.ind {
    text-indent: -1em;
    padding-left: 1em; }
    @media screen and (min-width: 640px) {
      .grid.map li.ind {
        text-indent: -3em;
        padding-left: 3em; } }
  .grid.map li a {
    display: block;
    width: 160px;
    max-width: 100%;
    margin: 0 0 0 auto; }
    .grid.map li a img {
      width: 100%; }

.area-map {
  width: 960px;
  max-width: 100%;
  margin: auto; }

/*table {
width: $medium-screen;
max-width: 100%;
margin: auto;
margin-top: 2rem;
border-top: 2px solid $gray;
border-bottom: 2px solid $gray;
font-size: 1rem!important;
@media screen and (min-width: $medium-screen) {
margin-top: 3rem;
}
th, td {
padding: 8px 3%;
border-bottom: 1px solid $gray;
display: block;
font-size: 1rem!important;
@media screen and (min-width: $medium-screen) {
display: table-cell;
}
}
th {
background-color: $ivory;
width: 100%;
border-bottom: 0;
text-align: left;
@media screen and (min-width: $medium-screen) {
width: 25%;
min-width: 11em;
border-bottom: 1px solid $gray;
}
}
td {
ul.flex {
margin-left: 1rem;
gap: 0 2rem;
flex-wrap: wrap;
}
ul.grid {
grid-gap: 0 2rem;
}
}
}*/
/* ======================================
   Navigation
======================================== */
.global_nav {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
  transition: 0.5s;
  padding: 100px 40px;
  margin: auto;
  background-color: white; }
  @media screen and (min-width: 960px) {
    .global_nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      transform: translateX(0);
      background-color: transparent;
      padding: 0; } }

#header.open .global_nav {
  transform: translateX(0); }

ul.menu {
  display: block;
  padding: 0; }
  @media screen and (min-width: 960px) {
    ul.menu {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 2rem 0 0; } }
  ul.menu > li.sp {
    display: block; }
    @media screen and (min-width: 960px) {
      ul.menu > li.sp {
        display: none; } }
  ul.menu > li > a {
    height: auto;
    display: block;
    padding: 0; }
    @media screen and (min-width: 960px) {
      ul.menu > li > a {
        height: 80px;
        display: flex;
        align-items: center;
        padding: 0 1rem; } }
    ul.menu > li > a > p {
      display: flex;
      color: #000000;
      font-size: 1.5rem;
      font-weight: 700;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 0;
      position: relative;
      z-index: 99; }
      @media screen and (min-width: 960px) {
        ul.menu > li > a > p {
          color: #000000;
          font-size: 1rem;
          font-weight: 600;
          height: 40px; } }
      ul.menu > li > a > p::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: #ed6c00;
        margin: 0;
        transition: 0.5s; }
        @media screen and (min-width: 960px) {
          ul.menu > li > a > p::after {
            width: 0; } }
      ul.menu > li > a > p:hover::after, ul.menu > li > a > p.here::after {
        width: 100%; }
  ul.menu > li.has_child .submenu {
    display: block; }
    @media screen and (min-width: 960px) {
      ul.menu > li.has_child .submenu {
        position: absolute;
        left: 0;
        top: 60px;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.5s ease, visibility 0s linear 0.5s;
        background-color: rgba(27, 39, 103, 0.9);
        padding: 1.5rem 1rem;
        z-index: 0; } }
    ul.menu > li.has_child .submenu li a {
      display: block;
      color: #FFFFFF;
      text-align: left;
      padding: 1rem 0 0 0;
      font-size: 0.9em; }
      @media screen and (min-width: 960px) {
        ul.menu > li.has_child .submenu li a {
          padding: 0.5rem 1rem; } }
      ul.menu > li.has_child .submenu li a p {
        white-space: nowrap;
        display: block;
        position: relative;
        padding-bottom: 0.3rem; }
        ul.menu > li.has_child .submenu li a p::before {
          content: '';
          width: 100%;
          height: 1px;
          background-color: #AAAAAA;
          position: absolute;
          bottom: 0;
          left: 0;
          transition: 0.5s; }
          @media screen and (min-width: 960px) {
            ul.menu > li.has_child .submenu li a p::before {
              width: 1em; } }
      @media screen and (min-width: 960px) {
        ul.menu > li.has_child .submenu li a:hover p::before {
          width: 100%;
          background-color: #ed6c00; } }
    ul.menu > li.has_child .submenu.open {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.5s ease 0.1s, visibility 0s linear 0s; }
  @media screen and (min-width: 960px) {
    ul.menu > li.has_child:hover .submenu {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.5s ease 0.1s, visibility 0s linear 0s; } }

.hamburger_menu {
  cursor: pointer;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 60px;
  height: 60px;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  z-index: 999999;
  transition: 0.5s;
  background-color: #ed6c00; }
  .hamburger_menu span {
    display: block;
    margin: 0 !important;
    padding: 0;
    height: 4px;
    width: 1.5rem;
    background-color: #FFFFFF;
    position: relative;
    transition: 0.5s; }
    .hamburger_menu span::before, .hamburger_menu span::after {
      content: '';
      display: block;
      margin: 0 !important;
      padding: 0;
      height: 4px;
      width: 1.5rem;
      background-color: #FFFFFF;
      position: absolute;
      top: 0;
      transform: translateY(0);
      transform-origin: center center 0;
      transition: 0.5s; }
    .hamburger_menu span::before {
      transform: translateY(-8px); }
    .hamburger_menu span::after {
      transform: translateY(8px); }
  .hamburger_menu:hover span::before {
    transform: translateY(-8px); }
  .hamburger_menu:hover span::after {
    transform: translateY(8px); }
  .hamburger_menu.close span {
    background-color: transparent; }
    .hamburger_menu.close span::before {
      transform: rotate(135deg); }
    .hamburger_menu.close span::after {
      transform: rotate(-135deg); }
  @media screen and (min-width: 960px) {
    .hamburger_menu {
      display: none; } }

/* ======================================
   Footer
======================================== */
#footer {
  background-color: #FFFFFF;
  padding: 2rem 0;
  position: relative;
  border-top: 14px solid #fce5ce;
  margin-top: 2.5rem; }
  #footer .grid {
    margin-bottom: 2rem; }
  #footer .foot_name {
    text-align: center; }
    #footer .foot_name .logo {
      width: 300px;
      margin: auto; }
      #footer .foot_name .logo img {
        width: 100%; }
    #footer .foot_name address {
      margin-top: 1rem; }
    @media screen and (min-width: 960px) {
      #footer .foot_name {
        text-align: left; }
        #footer .foot_name .logo {
          margin: 0; } }
  #footer .foot_link .sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    padding: 0.5rem;
    width: 14rem;
    margin: 2rem auto 0 auto; }
  #footer .foot_link .sns img {
    width: 2rem;
    margin-right: 1rem; }
  #footer small {
    font-size: 0.9rem;
    display: block;
    text-align: center; }

/* ======================================
   Animation
======================================== */
.fadeIn {
  will-change: opacity, transform;
  /* GPU に事前通知 */
  opacity: 0;
  transform: translate(0); }

.fadeIn.Up {
  opacity: 0;
  transform: translateY(30px); }

.fadeIn.Down {
  opacity: 0;
  transform: translateY(-30px); }

.fadeIn.Left {
  opacity: 0;
  transform: translateX(30px); }

.fadeIn.Right {
  opacity: 0;
  transform: translateX(-30px); }

.fadeIn.chain li {
  opacity: 0;
  transform: translateY(30px); }

.fadeIn.chain.show li {
  animation: fadeIn 0.5s ease forwards 1s; }
  .fadeIn.chain.show li:nth-child(1) {
    animation-delay: 0.0s; }
  .fadeIn.chain.show li:nth-child(2) {
    animation-delay: 0.5s; }
  .fadeIn.chain.show li:nth-child(3) {
    animation-delay: 1.0s; }
  .fadeIn.chain.show li:nth-child(4) {
    animation-delay: 1.5s; }
  .fadeIn.chain.show li:nth-child(5) {
    animation-delay: 2.0s; }
  .fadeIn.chain.show li:nth-child(6) {
    animation-delay: 2.5s; }
  .fadeIn.chain.show li:nth-child(7) {
    animation-delay: 3.0s; }
  .fadeIn.chain.show li:nth-child(8) {
    animation-delay: 3.5s; }
  .fadeIn.chain.show li:nth-child(9) {
    animation-delay: 4.0s; }
  .fadeIn.chain.show li:nth-child(10) {
    animation-delay: 4.5s; }

.fadeIn.show {
  animation: fadeIn 0.5s ease forwards 1s; }
  .fadeIn.show.late1 {
    animation-delay: 0.5s; }
  .fadeIn.show.late2 {
    animation-delay: 1s; }
  .fadeIn.show.late3 {
    animation-delay: 1.5s; }
  .fadeIn.show.late4 {
    animation-delay: 2s; }

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0); } }