@charset "UTF-8";

/*----------------------------------------
  Base
----------------------------------------*/
body {
  height: 100%;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

:root {
  --main-color: #548e8a;
  --sub-color: #e8edea;
  --main-black: #5a5b5b;
  --sub-black: #505050;
  --bg-color: #f2eee7;
}

@media((min-width:768px) and (max-width: 990px)) {

  #g-nav-list button::before,
  #g-nav-list button::after {
    top: 52px;
  }

  #g-nav-list button::before {
    right: 45px;
  }

  #g-nav-list button::after {
    right: 40px;
  }

  .main-logo {
    width: 200px;
    margin: 13px 15px;
  }

  .header .catch-copy {
    display: none;
  }

  .main-logo__bg {
    display: block;
    margin: 19px 30px 11px 75px;
  }

  .menu__list a {
    color: #fff;
    padding: 10px 8px 10px 0;
  }

  div.animation_box {
    top: 22%;
    left: 43%;
    padding-top: 18px;
    height: auto;
    transform: translateY(-40px);
    transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  
  .animation_box.is-active {
    transform: translateY(10);
  }

  .slideimg img,
  .slider-container,
  .main-visual {
    height: auto;
  }

  .scrollbar__container {
    bottom: 0;
  }

  .scrollbar::after {
    bottom: 60spx;
    height: 50px;
  }

  @keyframes circlemove {
    0% {
      bottom: 102px;
    }

    100% {
      bottom: 55px;
    }
  }

  .animation__txt2 {
    font-size: 2rem;
  }

  .scrollbar__text {
    padding-left: 5px;
  }

  .animation__txt {
    font-size: 2.3rem;
    line-height: 1.7;
  }

  .solutions .title,
  .newstopic .title {
    font-size: 1.75rem;
  }

  .solutions .txt,
  .newstopic .txt {
    margin: 5px 0 90px 0;
  }

  .newstopic .container {
    margin-top: 100px;
  }

  .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .img_wrap:hover img {
    transform: scale(1.2);
    transition-duration: .6s;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media(min-width:991px) {

  #g-nav-list button::before,
  #g-nav-list button::after {
    top: 53px;
  }

  #g-nav-list button::before {
    right: 35px;
  }

  #g-nav-list button::after {
    right: 30px;
  }

  .include-accordion {
    top: 30%;
  }

  .main-logo {
    margin: 19px 30px 11px 75px;
  }

  .main-logo__bg {
    display: block;
    margin: 19px 30px 11px 75px;
  }

  .header {
    justify-content: flex-start;
    align-items: center;
  }

  .header .catch-copy {
    display: block;
  }

  .header .catch-copy__2 {
    position: absolute;
    left: 305px;
    display: inline-block;
    margin-top: -45px;
    color: #fff;
  }

  .main-visual {
    width: 90%;
    height: auto;
  }

  .site-visual {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-end;
  }

  .slider-container {
    width: 100%;
    height: auto;
    border-radius: 100px 0 0 0;
  }

  .slideimg img {
    height: auto;
    border-radius: 100px 0 0 0;
  }

  .scrollbar__container {
    display: flex;
    justify-content: center;
}

  .scrollbar__text {
    position: absolute;
    bottom: 100px;
    right: 25px;
  }

  .scrollbar {
    left: -29px;
    top: 26px;
  }

  .scrollbar::before {
    left: -3px;
  }

  @keyframes circlemove {
    0% {
      bottom: 106px;
    }

    100% {
      bottom: 54px;
    }
  }

  div .animation_box {
    position: absolute;
    top: 23%;
    left: 45%;
    transform: translateY(-60px);
    transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .animation__txt {
    font-size: 2.75rem;
    line-height: 2;
  }

  /*========= about-us ===============*/
  .about-us {
    padding: 0;
  }

  .about-us .container {
    background-size: 23%;
    background-position: 90% top;
  }

  .about-us .about-us__content {
    gap: 16px;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: baseline;
    padding: 0 6%;
  }

  .about-us .inner-1 {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    padding: 0 0 100px 30px;
  }

  .top_content img {
    width: 500px;
    height: 320px;
    object-fit: cover;
    border-radius: 0 50px 0 0;
  }

  .about-us p {
    width: 360px;
    margin-top: 3px;
    margin-bottom: 30px;
  }

  .inner-2 {
    position: relative;
  }

  .about-us__btn {
    position: absolute;
    top: 265px;
    left: 110%;
    right: 80px;
    display: block;
  }

  a.btn__1 {
    width: 180px;
    height: 40px;
    border-radius: 8px;
    margin: 0;
    font-size: 1rem;
  }

  a.btn__1::before {
    top: 56%;
  }

  .adouble-content {
    margin: 10px 0 0;
    line-height: 1;
  }

  .double-content {
    font-size: 7rem;
  }

  /*========= solutions ===============*/
  .solutions .content {
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .solutions__bg {
    padding-bottom: 1px;
  }

  .img__item dl {
    display: flex;
    padding: 0 9%;
    justify-content: center;
    gap: 13px;
  }

  .img_wrap {
    padding: 0;
  }

  .img__txtbox:nth-of-type(2) .img_wrap:nth-of-type(2) {
    border-radius: 0 45px 0 0;
  }

  .solutions .inner,
  .newstopic .inner {
    padding: 0 0 0 9%;
  }

  .solutions .en__title,
  .newstopic .en__title {
    font-size: 1.125rem;
  }

  .solutions .img__txtbox {
    padding: 0;
  }

  .solutions .title,
  .newstopic .title {
    position: relative;
    font-size: 1.75rem;
    line-height: 1.3;
    font-size: 1.5rem;
    margin: 3px 0 10px 0;
  }

  .solutions .title::after,
  .newstopic .title::after {
    content: "";
    position: absolute;
    right: -17px;
    top: 9px;
    width: 1px;
    height: 20px;
    background: var(--main-black);
  }

  .solutions .en__title::before,
  .newstopic .en__title::before {
    left: -20px;
    top: 14px;
  }

  .solutions .txt,
  .newstopic .txt {
    position: relative;
    padding: 0;
    margin: 20px 0 0 6px;
    font-size: 1.2rem;
    line-height: 1;
  }

  .solutions__images {
    flex-direction: row;
    padding: 0 9%;
    margin-top: 70px;
  }

  .solutions__images::after {
    top: -80px;
  }

  .service__card:nth-of-type(2) {
    border-radius: 0 50px 0 0;
  }

  /*========= newstopic ===============*/
  .newstopic {
    padding: 50px 0;
  }

  .newstopic .container {
    margin-top: 40px;
  }

  .newstopic .wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid var(--sub-black);
  }

  .news__tag,
  .topic__tag {
    top: 30px;
    left: 60px;
    padding: 1.5% 3%;
  }

  .newstopic__title {
    margin-top: 7px;
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .newstopic .content {
    position: relative;
  }

  .newstopic .txt {
    border-bottom: none;
    position: relative;
    padding: 0;
    margin: 20px 0 0 35px;
    font-size: 1.2rem;
    line-height: 1;
  }

  .img_wrap img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .newstopic__items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 9%;
    margin: 0 -10px;
  }

  .schedule {
    margin-top: 15px;
    font-size: 1.125rem;
  }

  .newstopic .btn {
    position: absolute;
    top: 25px;
    right: 145px;
    width: 115px;
    margin: 0;
    padding: 4px 18px 4px 0;
  }

  .arrow-btn {
    font-size: 0.875rem;
  }

  .newstopicbtn .arrow-icon {
    right: -28px;
    width: 22px;
    height: 20px;
  }

  .newstopicbtn:hover .arrow-icon {
    right: -30px;
  }

  /*----------------------------------------
 footer
----------------------------------------*/
  .footer__content {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 4% 6% 0 6%;
    margin-top: 240px;
  }

  .footer .txt {
    margin-top: 20px;
    font-size: 0.8125rem;
    text-align: left;
  }

  .txt_indent {
    text-indent: -0.5em;
  }

  .footer-logo__inner {
    display: inline-block;
    text-align: left;
  }

  .footer-logo {
    width: 220px;
    margin: 0;
  }

  .footer .box {
    text-align: justify;
    padding-top: 0;
  }

  .footer .txt,
  .footer .txt_indent,
  .business__addess {
    text-align: left;
  }

  .sub_menu,
  .menu__list {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .accordion .sub-menu {
    transition: .5s;
    margin-left: 6px;
  }

  .menu__list a::before {
    left: 0;
    right: 100%;
  }

  .menu__list1 {
    padding: 10px;
  }

  .menu__list1 a::before {
    left: 2%;
  }

  .sub_menu li a::before {
    left: -3%;
  }

  .menu__list a {
    padding: 0;
  }

  summary {
    list-style: none;
  }

  summary::-webkit-details-marker {
  display: none;
  }

  .menu__list2 a::before {
    content: "";
    height: 2px;
    position: absolute;
    background: #fff;
    width: 6px;
    top: 50%;
    left: 0;
  }

  .business__1,
  .business__2 {
    flex-direction: row;
    align-items: flex-start;
  }

  .inner__flexright {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-top: 0;
  }

  .business__item {
    text-align: left;
  }

  .business__photo {
    width: 320px;
    margin: 0 19px 0 0;
  }

  .business__name {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: left;
  }

  .business__addess {
    margin-top: 0;
    text-align: left;
  }

  .business__item span {
    display: block;
  }

  .business__1 .icon__inner,
  .business__2 .icon__inner {
    justify-content: left;
    flex-wrap: wrap;
    gap: 0;
  }

  .footer p,
  .business__addess {
    margin-top: 0;
  }

  .business__2 {
    margin-left: 15px;
  }

  .business__2 .business__photo {
    margin-top: 0;
  }

  .footer__link {
    width: 220px;
  }

  .inner__flexcenter {
    justify-content: space-around;
    align-items: baseline;
    gap: 35px;
    margin-bottom: 60px;
  }

  .telephone__icon {
    margin: 7px 10px 7px 13px;
  }

  .icon__inner a {
    font-size: 1.25rem;
    padding: 0 10px 0 0;
  }

  .icon {
    width: 30px;
    margin: 10px 0 0 5px;
  }

  .accordion {
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: .5s;
  }

  .footer__copy {
    padding-top: 0;
  }

  .footer__copy {
    padding-bottom: 25px;
  }

  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/*========= タブレット=============== */
@media(min-width:991px)and (max-width:1200px) {

  .footer-nav {
    margin-bottom: 27px;
  }

  .business__1,
  .business__2 {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .business__photo {
    width: 340px;
    height: auto;
    margin: 0;
  }

  .business__name,
  .business__addess {
    text-align: center;
  }

  .business__1 .icon__inner,
  .business__2 .icon__inner {
    justify-content: center;
    margin-bottom: 40px;
  }
}

@media((min-width:991px) and (max-width: 1214px)) {
  .accordion .sub-menu {
    margin-left: 0;
  }

  .menu__list1,
  .menu__list2 {
    padding: 3px 0 0 0;
    margin: 0 0 0 9px;
  }

  .menu__list1 {
    padding-left: 3px;
    padding-right: 6px;
  }

  .menu__list1 a::before {
    left: -5%;
  }

  .menu__list2 a::before {
    left: -14%;
  }

  .menu__list2 {
    margin: 0 0 0 9px;
  }
}

@media screen and (max-width:768px) {
  #g-nav {
    padding: 0;
  }

  #g-nav li.has-child ul,
  #g-nav li.has-child ul ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    opacity: 1;
    display: none;
    transition: none;
  }

  #g-nav ul li.has-child::before {
    left: 20px;
  }

  #g-nav ul ul li.has-child::before {
    transform: rotate(135deg);
    left: 20px;
  }

  #g-nav ul li.has-child.active::before {
    transform: rotate(-45deg);
  }
}

@media(min-width:768px)and (max-width:1250px) {

  .news-tab li {
    display: inline-block;
    width: 30%;
  }

  .news-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-list {
    gap: 40px;
    margin-top: 90px;
  }

  .img_wrap img,
  .news-thumb,
  .newstopic__list {
    border-radius: 0 40px 0 0;
  }

  .news-category {
    padding: 5px 13px;
  }
}

@media(min-width:1251px) {
  .news-tab li {
    width: 70%;
  }

  .newstopic {
    margin-bottom: -210px;
  }

  .news-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*========= タブレット=============== */
@media(min-width:769px)and (max-width:1119px) {

  .shop__kind span {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 190%;
    display: block;
    font-size: 2rem;
  }

  .shop__kind {
    font-size: 1.25rem;
  }

  .solutions .txt {
    margin-left: 22px 0 0 13px;
    font-size: 1rem;
  }

  .newstopic .txt {
    font-size: 1rem;
  }

  .newstopic .btn {
    right: 3%;
  }

  .inner__flexcenter {
    gap: 30px;
  }
}

@media((min-width:768px) and (max-width:993px)) {
  .newstopic__title {
    line-height: 1.3;
  }
}