@charset "utf-8";

/* ========================================================================
	Common
======================================================================== */

/* アウトラインチェック */
* {
  /* outline: 1px solid green!important; */
}

/* テキスト */

h2 {
  margin: 50px 0 30px;
  font-size: 60px;
  font-weight: bold;
  scroll-margin-top: 90px;

  @media screen and (max-width:767px) {
    scroll-margin-top: 90px;
  }
}

h3 {
  padding: 20px 0 10px;
  font-size: 24px;
  text-align: center;
}

p {
  padding: 5px 0;
}

ul {
  list-style: none;
}

/* セクション */

section {
  position: relative;
  scroll-margin-top: 90px;

  @media screen and (max-width:767px) {
    scroll-margin-top: 90px;
  }
}

/* ディビジョン */

div {
  scroll-margin-top: 90px;

  @media screen and (max-width:767px) {
    scroll-margin-top: 90px;
  }
}

/* テキスト色 */

.red-text {
  color: #e50000;
}

.green-text {
  color: #60c080;
}

.blue-text {
  color: #2589d0;
}

/* 背景色 */

.red-back {
  background-color: #e50000;
}

.green-back {
  background-color: #60c080;
}

.blue-back {
  background-color: #2589d0;
}

.navy-back {
  background-color: #3a5bff;
}

/* PC、スマホ(sp)表示切り替え */

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

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

  .sp-only {
    display: block;
  }
}

/* 画像 */

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

@media screen and (max-width:767px) {}

@media screen and (min-width:768px) {}

/* ヘッダー */

header .header-wrap {
  height: 124px;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 9999;
  background-color: white;
  border-bottom: 2px solid #bbb;
  justify-content: flex-start;

  @media screen and (max-width:767px) {
    height: 80px;
  }
}

header .hamburger-btn:checked~.header-wrap {
  border-bottom: none;
}

header .space {
  height: 124px;
  width: 100%;

  @media screen and (max-width:767px) {
    height: 80px;
  }
}

/* ロゴ */

header .header-logo {
  position: absolute;
  top: 0;
  left: 0;
}

header img {
  height: 124px;

  @media screen and (max-width:767px) {
    height: 80px;
  }
}

/* ヘッダーナビ */

header {

  a,
  a:focus,
  a:active,
  a:link,
  a:visited {
    color: #0064ff;
  }
}

header .header-nav {
  width: 100%;
  margin-right: 3%;
  display: flex;
  justify-content: right;
}

@media screen and (max-width:767px) {
  header .header-nav {
    display: none;
  }
}

header .header-nav ul {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(100vw - 550px);
  gap: 2vw;
  align-items: center;
}

header .header-nav ul li {
  text-align: center;
}

header .header-nav ul li a {
  color: #444;
}

header .header-nav ul li a:hover {
  color: #00ac97;
  font-weight: 500;
}

header a.contact-link {
  color: white;
  background: #00ac97;
  margin-left: 10px;
  padding: 10px;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  align-items: center;
  height: 40px;
}

/* ハンバーガーメニュー */

header .hamburger-btn {
  display: none;
  position: absolute;
  right: 10px;
}

header .hamburger-menu {
  list-style: none;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  margin-top: 80px;
  padding: 0 0 10px;
  text-align: center;
  clear: both;
  background: white;
  box-shadow: 0 3px 5px gray;
  transition: 0.4s cubic-bezier(0.05, 0.05, 0.1, 0.9) 0.1s;
  transform: scale(1, 0);
  transform-origin: top;
}

header .hamburger-btn:checked~.hamburger-menu {
  transform: scale(1, 1);
  transform-origin: top;
  transition: 0.4s cubic-bezier(0.05, 0.05, 0.1, 0.9) 0.1s;
}

header .hamburger-menu li {
  border-top: 1px solid #00ac97;
  padding: 15px 0;
  margin: 0 40px;
}

header .btn-icon {
  display: none;
}

header .navicon {
  background: #00ac97;
  display: block;
  height: 5px;
  width: 30px;
  position: relative;
  transition: 0.3s cubic-bezier(0.05, 0.05, 0.1, 0.9) 0.1s;
}

header .navicon:before,
header .navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #00ac97;
  transition: 0.3s cubic-bezier(0.05, 0.05, 0.1, 0.9) 0.1s;
}

header .navicon:before {
  top: 9px;
}

header .navicon:after {
  bottom: 9px;
}

header .hamburger-btn:checked~.btn-icon .navicon:before {
  transform: rotate(-45deg);
}

header .hamburger-btn:checked~.btn-icon .navicon:after {
  transform: rotate(45deg);
}

header .hamburger-btn:checked~.btn-icon:not(.steps) .navicon:before {
  top: 0;
}

header .hamburger-btn:checked~.btn-icon:not(.steps) .navicon:after {
  bottom: 0;
}

header .hamburger-btn:checked~.btn-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.05, 0.05, 0.1, 0.9) 0.1s;
}

@media screen and (max-width:767px) {
  header .btn-icon {
    display: inline-block;
    position: absolute;
    right: 0;
    cursor: pointer;
    padding: 24px 14px;
    margin-right: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

/* フッター */
footer {
  padding: 50px 0;
  background: rgba(0, 0, 0, 0.8);
}

footer h2 {
  color: #ffffff;
  font-size: 40px;
  margin: 20px 0;
}

footer a {
  color: #eeeeee;
}

footer a:hover {
  color: #ffffff;
}

footer p {
  color: #ffffff;
}

footer span {
  color: #00ac97;
}

footer .footer-wrap {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

footer .contact-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px auto 50px;
}

footer .contact-foot a {
  color: #eeeeee;
  background: #00ac97;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
}

footer .contact-foot a:hover {
  color: #ffffff;
  font-weight: 600;
}

footer .contact-foot .left,
footer .contact-foot .right {
  flex: 0 0 50%;
}

.sns-icon {
  width: 45px;
}

/* インナー */
.inner {
  max-width: 1260px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width:767px) {
  .inner {
    padding: 0 10px;
  }
}

/* HTMLボタン */
.link-btn {
  padding: 14px 36px;
  color: #333;
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, 0.8),
    inset -4px -4px 8px;
  border: none;
}

/* 事業内容 */
#business h2 {
  font-size: 40px;
  text-align: center;
}

#business h2 span {
  color: #00ac97;
}

#business .first-view img {
  width: 100vw;
  height: calc(70vh - 124px);
  object-fit: cover;
}

#business .buisness-container .content img {

}

/* お問い合わせ */
#contact h2 {
  text-align: center;
  color: #000000;
  font-size: 40px;
}

@media screen and (max-width:435px) {
  #contact h2 {
    font-size: 30px;
  }
}

#contact h2 span {
  color: #00ac97;
}

table.contact-table {
  width: 90%;
  margin: 0 auto;
  border: 3px solid #cccccc;
}

table.contact-table tr {
  border-top: 1px solid #cccccc;
}

.single .entry-content table.contact-table,
.page .entry-content table.contact-table {
  display: table;
}

.entry-content {
  margin: 0 auto;
  padding-top: 200px;

}

table.contact-table input,
table.contact-table textarea {
  resize: vertical;
  width: 100%;
  border: 1px solid #d8d8d8;
}

table.contact-table ::placeholder {
  color: #797979;
}


table.contact-table .req,
table.contact-table .unreq {
  font-size: 0.9em;
  padding: 5px;
  color: #fff;
  border-radius: 3px;
  margin: 0 5px;
}

table.contact-table .req {
  background: #00ac97;
}

table.contact-table .unreq {
  background: #bdbdbd;
}

@media screen and (min-width: 768px) {
  table.contact-table th {
    width: 30%;
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  table.contact-table {
    width: 95%;
  }

  table.contact-table tr,
  table.contact-table td,
  table.contact-table th {
    display: block;
    width: 100%;
    line-height: 2.5rem;
  }

  table.contact-table th {
    background: #ededf5;
  }
}

.wpcf7 input.wpcf7-submit {
  margin: 0 auto;
  border: 0;
  border-radius: 3px;
  padding: 5px 12px;
  background: #00ac97;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
}

.contact-btn {
  text-align: center;
  margin-top: 20px;
}

a.widget-btn:hover {
  color: #00ac97;
}

#friendship .top-view {
  background-image: url('../../img/page/img_friendship_topview.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 90px;
}

#friendship .top-view-block {
  max-width: 1260px;
  margin: 0 auto;
}

#friendship .top-view img {
  width: 1000px;
}

#friendship .container {
  max-width: 1260px;
}

.contact-table {
  max-width: 1000px;
  margin: 0 auto;
  border: 3px #333 solid;
  border-radius: 3px;
}

.contact-table th {
  color: #333;
  background-color: #e1e7fb;
}

.contact-table td {
  color: #000;
  background: white;
}

/* 参画企業一覧 */
#companies h2 {
  text-align: center;
  color: #00ac97;
  font-size: 30px;
}


/* test */
.slider {
  overflow: hidden;
  width: 100%;
}

.slider__track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.slider__track img {
  width: 300px;      /* 画像サイズ調整 */
  height: auto;
  flex-shrink: 0;
  margin-right: 20px;
}

.slider:hover .slider__track {
  animation-play-state: paused;
}

/* アニメーション */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}