@charset "UTF-8";
/************************************************

Theme Name:タカハシサッシ
Theme URL:https://takahashisash.com
Description:タカハシサッシ専用テーマです。
Author:うぶ
version:ver1.0

************************************************/
/*all*/
* {
  font-family: "Sawarabi Mincho"; }

a {
  text-decoration: none; }

li {
  list-style: none; }

.pc-sl {
  text-align: center; }
  @media screen and (max-width: 576px) {
    .pc-sl {
      text-align: left; } }

.img-center {
  display: block;
  margin: auto; }

.img-radius {
  border-radius: 10px; }

.w60 {
  width: 60%;
  margin-right: auto;
  margin-left: auto; }
  @media screen and (max-width: 576px) {
    .w60 {
      width: 100%; } }

.w70 {
  width: 70%; }
  @media screen and (max-width: 576px) {
    .w70 {
      width: 100%; } }

.sd {
  box-shadow: 0 1rem 1rem -0.5rem rgba(0, 0, 0, 0.8);
  transition: .5s; }
  .sd.btn:hover, .sd.card:hover, .sd.product-items:hover, .sd.header-btn:hover {
    box-shadow: 0 1rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
    transition: .5s; }

.btn {
  width: 200px;
  color: #ffffff;
  background: #e9953f;
  border: solid 1px #e9953f; }
  .btn:hover {
    color: #e9953f;
    background: #ffffff; }

.access-map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 37.5%; }
  .access-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*color*/
.bc {
  background-image: url("./assets/img/main_bg.png"); }

.bc-bl {
  background: #00993f; }
  .bc-bl .main-h3 {
    color: #ffffff;
    text-align: center;
    position: relative; }
    .bc-bl .main-h3:before {
      content: "";
      position: absolute;
      bottom: -1rem;
      display: inline-block;
      width: 60px;
      height: 5px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      border-radius: 2px;
      background: #ffffff; }
  .bc-bl .btn {
    color: #e9953f;
    background: #ffffff;
    border: solid 1px #e9953f; }
    .bc-bl .btn:hover {
      background: #e9953f;
      color: #ffffff; }

.bc-wh {
  background: #ffffff; }

.bc-bk {
  background: #111111; }
  .bc-bk .main-h3 {
    color: #ffffff; }

.bc-lgy {
  background: #e9e9e9; }

/*h*/
.main-h3 {
  text-align: center;
  position: relative; }
  .main-h3:before {
    content: "";
    position: absolute;
    bottom: -1rem;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 2px;
    background: #00993f; }

.sub-h3 {
  padding-left: 1rem;
  border-left: solid 5px; }

.sub-h3 {
  border-color: #00993f; }

.greeting-h4 {
  text-align: right; }

.video {
  margin: auto;
  width: 100%;
  aspect-ratio: 16 / 9; }
  .video iframe {
    width: 100%;
    height: 100%; }

/*card*/
.card .card-header {
  color: #e9953f;
  text-align: center;
  background: #ffffff; }
.card-body .card-title {
  color: #e9953f; }
.card-footer {
  padding: .5rem 1rem 1rem;
  background: #ffffff;
  border-top: none; }

/*table*/
.table {
  border-collapse: separate;
  border-spacing: 0; }
  .table tr th {
    font-weight: bold; }
    .table tr th .rd {
      background: #f00; }
    .table tr th .bl {
      background: #00f; }
    .table tr th .rd,
    .table tr th .bl {
      margin-left: 10px;
      color: #ffffff;
      padding: 5px 8px;
      font-size: 14px; }
  .table tr td input,
  .table tr td select,
  .table tr td textarea {
    width: 100%; }
  .table tr th,
  .table tr td {
    vertical-align: middle;
    border-top: solid 2px #dbebbf;
    padding: 1rem; }
    @media screen and (max-width: 576px) {
      .table tr th,
      .table tr td {
        display: block; } }
  .table tr:last-child th,
  .table tr:last-child td {
    border-bottom: solid 2px #dbebbf; }

#privacy h4 {
  text-align: center; }
#privacy .privacy-text {
  width: 60%;
  height: 300px;
  margin-right: auto;
  margin-left: auto;
  overflow: auto;
  border: solid 1px #111111; }
  @media screen and (max-width: 767px) {
    #privacy .privacy-text {
      width: 100%; } }

/*header*/
@media screen and (max-width: 576px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 99; } }
#header .pc-header-img img {
  width: 350px; }
#header .pc-header-link .header-btn.header-btn-gr {
  background-color: #00993f; }
#header .pc-header-link .header-btn.header-btn-ol {
  background-color: #e9953f; }
#header .pc-header-link .header-btn a {
  color: #ffffff; }
#header .pc-header-link .header-btn i {
  margin-right: .5rem; }

.pc-menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: solid 2px #00993f; }
  .pc-menu .g-nav {
    padding-left: 0; }
    .pc-menu .g-nav li {
      position: relative;
      width: 100%;
      float: left;
      text-align: center;
      border-left: solid 1px;
      margin-top: .5rem;
      margin-bottom: .5rem;
      border-color: #00993f; }
      .pc-menu .g-nav li:last-child {
        border-right: solid 1px;
        border-color: #00993f; }
      .pc-menu .g-nav li:hover .d-nav {
        display: block;
        transition: 0.5s;
        z-index: 500; }
      .pc-menu .g-nav li a {
        display: block;
        color: #111111;
        display: block;
        transition: .5s;
        padding: .5rem 1rem; }
        .pc-menu .g-nav li a:hover {
          color: #00993f; }
        .pc-menu .g-nav li a .caret {
          display: inline-block;
          width: 0;
          height: 0;
          margin-left: 2px;
          vertical-align: middle;
          border-top: 4px dashed;
          border-top: 4px solid\9;
          border-right: 4px solid transparent;
          border-left: 4px solid transparent; }
      .pc-menu .g-nav li .d-nav {
        position: absolute;
        display: none;
        padding-left: 0;
        width: 100%; }
        .pc-menu .g-nav li .d-nav li {
          margin-bottom: 0 !important;
          border-left: solid 2px;
          border-right: solid 2px;
          border-color: #00993f;
          background-color: rgba(255, 255, 255, 0.8); }

#site-header {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: all 1s ease-in-out;
  background: #fff; }
  #site-header #site-logo h1 {
    margin: 0 0 0 .75rem;
    font-size: 1em; }
    #site-header #site-logo h1 a {
      display: block;
      text-decoration: none;
      color: inherit; }
  #site-header #header-menu nav ul {
    list-style: none; }
    #site-header #header-menu nav ul li a {
      position: relative;
      display: inline-block;
      padding: 0 1rem;
      text-decoration: none;
      color: inherit; }
      #site-header #header-menu nav ul li a:before {
        content: "";
        position: absolute;
        left: 1rem;
        bottom: 0;
        width: calc(100% - 2rem);
        height: .1rem;
        background: #111111;
        transition: transform .3s;
        transform: scale(0, 1);
        transform-origin: right top; }
      #site-header #header-menu nav ul li a:hover:before {
        transform: scale(1, 1);
        transform-origin: left top; }
  #site-header #header-menu .mobile-menu a {
    position: relative;
    display: block;
    width: 4rem;
    padding: .75rem 0;
    line-height: 1.2em;
    text-align: center;
    text-decoration: none;
    font-size: .875rem;
    transition: all .5s ease-in-out; }
  #site-header #header-menu .mobile-menu a {
    display: block;
    background: #00993f;
    color: #ffffff; }
    #site-header #header-menu .mobile-menu a:hover {
      background: rgba(255, 255, 255, 0.75);
      color: #111111; }

.mobile-menu span.menu-icn {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1rem;
  margin: 0 auto; }
  .mobile-menu span.menu-icn:before, .mobile-menu span.menu-icn:after {
    transition: all .5s ease-in-out; }
  .mobile-menu span.menu-icn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff; }
  .mobile-menu span.menu-icn:after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #ffffff; }
.mobile-menu a:hover span.menu-icn:before,
.mobile-menu a:hover span.menu-icn:after {
  border-color: #111111; }

#mobileMenuModal .modal-header {
  padding: 0 1rem; }
#mobileMenuModal .modal-body {
  padding: 0; }
  #mobileMenuModal .modal-body ul {
    padding-left: 0; }
    #mobileMenuModal .modal-body ul li {
      border-bottom: solid 1px #e9953f; }
      #mobileMenuModal .modal-body ul li a {
        display: block;
        font-weight: bold;
        padding: 1rem;
        color: #00993f; }
#mobileMenuModal .modal-footer .btn {
  background: #e9953f; }

/*footer*/
footer .footer-content {
  background: url("./assets/img/footer-cover.jpg"); }
  footer .footer-content .footer-cover {
    background: rgba(255, 255, 255, 0.7); }
    footer .footer-content .footer-cover .contact-card {
      background: #ffffff;
      border: solid 1px; }
      footer .footer-content .footer-cover .contact-card h4 {
        text-align: center; }
      footer .footer-content .footer-cover .contact-card.card-gr {
        border-color: #00993f; }
        footer .footer-content .footer-cover .contact-card.card-gr .btn {
          background: #00993f;
          border-color: #00993f; }
          footer .footer-content .footer-cover .contact-card.card-gr .btn:hover {
            color: #00993f;
            background: #ffffff; }
      footer .footer-content .footer-cover .contact-card.card-line {
        border-color: #00B900; }
        footer .footer-content .footer-cover .contact-card.card-line .btn {
          background: #00B900;
          border-color: #00B900; }
          footer .footer-content .footer-cover .contact-card.card-line .btn:hover {
            color: #00B900;
            background: #ffffff; }
      footer .footer-content .footer-cover .contact-card.card-ol {
        border-color: #e9953f; }
        footer .footer-content .footer-cover .contact-card.card-ol .btn {
          background: #e9953f;
          border-color: #e9953f; }
          footer .footer-content .footer-cover .contact-card.card-ol .btn:hover {
            color: #e9953f;
            background: #ffffff; }
footer ul {
  flex-wrap: nowrap;
  background-color: #dbebbf;
  font-size: .75rem; }
  footer ul li {
    width: 100%;
    text-align: center;
    border-right: solid 1px #00993f; }
    @media screen and (max-width: 576px) {
      footer ul li {
        width: 50%; } }
    footer ul li:last-child {
      border-right: none; }
    footer ul li a {
      color: #00993f;
      transition: .5s; }
      footer ul li a:hover {
        color: #e9953f;
        transition: .5s; }
footer .cr {
  background: #00993f;
  color: #ffffff;
  text-align: center; }

/*top*/
.main {
  overflow: hidden; }

.mainv {
  position: relative; }
  .mainv .mainv-slider {
    width: 100%;
    position: relative;
    overflow: hidden; }
    .mainv .mainv-slider .swiper-wrapper {
      transition-timing-function: linear; }
      .mainv .mainv-slider .swiper-wrapper .swiper-slide {
        height: 60vh;
        width: auto !important; }
        .mainv .mainv-slider .swiper-wrapper .swiper-slide img {
          width: auto;
          height: 100%; }
  .mainv .mainv-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 5;
    width: 40%;
    height: fit-content;
    background: rgba(86, 152, 106, 0.9); }
    @media screen and (max-width: 576px) {
      .mainv .mainv-caption {
        width: 80%; } }
    .mainv .mainv-caption img {
      display: block;
      width: 30%;
      margin: auto; }
      @media screen and (max-width: 576px) {
        .mainv .mainv-caption img {
          width: 70%; } }
    .mainv .mainv-caption h2 {
      text-align: center;
      color: #ffffff; }

.top-service-box {
  position: relative;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer; }
  .top-service-box img {
    width: 100%;
    height: 200px;
    object-fit: cover; }
  .top-service-box .top-service-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(86, 152, 106, 0.5);
    transition: .5s; }
    .top-service-box .top-service-cover:hover {
      background: rgba(86, 152, 106, 0.3);
      transition: .5s; }
    .top-service-box .top-service-cover .top-service-inner {
      height: -webkit-fill-available;
      border: solid 5px rgba(255, 255, 255, 0.8);
      border-radius: 10px; }
      .top-service-box .top-service-cover .top-service-inner i {
        font-size: 2rem; }
      .top-service-box .top-service-cover .top-service-inner h4,
      .top-service-box .top-service-cover .top-service-inner i {
        color: #ffffff;
        font-weight: bold; }

.gallery-slider .swiper-wrapper {
  width: 100%;
  height: 300px; }
  @media screen and (max-width: 576px) {
    .gallery-slider .swiper-wrapper {
      height: 180px; } }
  .gallery-slider .swiper-wrapper .swiper-slide {
    width: 300px;
    height: 100%; }
    .gallery-slider .swiper-wrapper .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
.gallery-slider .swiper-button-next,
.gallery-slider .swiper-button-prev {
  color: #e9953f; }
.gallery-slider .swiper-pagination-bullet {
  background-color: #00993f; }
  .gallery-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #e9953f; }

.top-news li {
  border-bottom: solid 1px #e9953f; }
  .top-news li a {
    display: block;
    color: #111111;
    padding: 1rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    .top-news li a:hover {
      background: rgba(86, 152, 106, 0.3); }
    .top-news li a span {
      color: #00993f;
      padding: 0 3rem; }
      @media screen and (max-width: 576px) {
        .top-news li a span {
          padding: 0; } }

/*page*/
.subv {
  background: url("./assets/img/achieve3.jpg") center/cover no-repeat; }
  .subv .cover {
    background: rgba(0, 0, 0, 0.7);
    height: 60vh; }
    @media screen and (max-width: 576px) {
      .subv .cover {
        height: 30vh; } }
    .subv .cover h2 {
      color: #ffffff;
      text-align: center; }
      .subv .cover h2 span {
        color: #e9953f; }

.gallery-img {
  position: relative;
  width: 100%;
  padding-top: 75%; }
  .gallery-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

/*about*/
.policy-text {
  text-align: center;
  color: #ffffff;
  font-size: 3rem; }
  @media screen and (max-width: 576px) {
    .policy-text {
      font-size: 2rem; } }

/*product*/
.product-items {
  border: solid 1px #777; }
  .product-items img {
    height: 50px;
    object-fit: contain; }