@charset "UTF-8";
/*
Theme Name: fujikougei
Theme URI: https://officepartner.synology.me/fujikougei
Description: 株式会社フジ工芸のHPテーマ
Author: Office Partner
*/

/*---------------------------*/
/*-----ここから　全体共通-----*/
/*--------------------------*/

html,
body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #04140a;
  background-color: #fdfdfd;
  font-family: "Roboto", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

p {
  padding: 0;
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: #04140a;
  transition: 0.5s;
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
section {
  padding: 0;
}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fdfffa;
  text-align: center;
}

/* Loading画像中央配置　*/
#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash-logo img {
  width: 260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

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

/* ここから フォントサイズ コピペ用コード */
.font-size-dummy {
  font-size: 0.75rem; /* 12px */
  font-size: 0.8125rem; /* 13px */
  font-size: 0.875rem; /* 14px */
  font-size: 1rem; /* 16px */
  font-size: 1.25rem; /* 20px */
  font-size: 1.75rem; /* 28px */
}
/* ここまで フォントサイズ コピペ用コード */

/*--------------------------*/
/*-----ここまで 全体共通-----*/
/*-------------------------*/

/*-------------------------------*/
/*------ここから  header.php------*/
/*-------------------------------*/
header {
  overflow: hidden;
  box-shadow: 0px 5px 5px 0px rgba(200, 200, 200, 0.5);
}

/*===== 上部固定させるためのCSS =====*/
/* JSを使いfixedクラスが付与された際の設定 */
#header.fixed {
  position: fixed; /* fixedを設定して固定 */
  z-index: 999; /* 最前面へ */
  top: 0; /* 位置指定 */
  left: 0; /* 位置指定 */
  width: 100%;
  background-color: #fdfdfd;
  box-shadow: 0px 5px 5px 0px rgba(200, 200, 200, 0.5);
}
/*===== ここまで　上部固定させるためのCSS =====*/

.header__wrapper {
  width: 100%;
  height: 100px; /* 高さ指定 */
  display: flex;
  padding-left: 8.27%;
  padding-right: 2rem;
  justify-content: space-between;
  align-items: center;
}

/*------------------------------------*/
/*------ここから  header-nav.php------*/
/*-----------------------------------*/

/* ヘッダー左側 ロゴコンテナ */

.header__logocontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logocontainer img {
  vertical-align: middle;
}

.header__logo {
  display: flex;
  align-items: center;
  max-width: 240px;
  flex: 1 2.5;
}

.header__logocontainer p {
  padding-left: 4%;
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  vertical-align: middle;
}

/* ヘッダーナビ　メニュー */
#gnav {
  width: 60%;
  display: flex;
  letter-spacing: 0.1em;
  font-weight: 500;
  justify-content: flex-end;
}

.gnav__list {
  display: flex;
  width: 57%;
  align-items: center;
}

.gnav__item {
  flex-grow: 1;
  width: 25%;
  display: flex;
  justify-content: center;
}

ul.gnav__list li.gnav__item:last-child a.gnav__link {
  letter-spacing: 0.45em;
}

.gnav__contact {
  width: 50%;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  line-height: 1.1;
}

.display960--none {
  display: none;
}

.span--inline {
  display: none;
}

:where(nav li)::before {
  content: "";
}

.gnav__contact--item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fdfdfd;
  padding: 8px 8px;
}

.gnav__contact--item:nth-child(1) {
  background-color: #009040;
  width: 28%;
}

.gnav__contact--item:nth-child(2) {
  background-color: #04140a;
  width: 53%;
}

.gnav__contact--item:last-child {
  background-color: #04140a;
  width: 17%;
}
.gnav__contact--item:last-child a {
  display: flex;
  justify-content: center;
}
.gnav__contact--item:last-child img {
  width: 70%;
  align-self: center;
}

.gnav__contact--item .number a {
  color: #fdfffa;
}

a.gnav__link {
  text-align: center;
}

a.gnav__link:hover {
  opacity: 0.7;
  color: #2e724d;
}

a.link--Recruit {
  color: #fdfdfd;
  font-weight: 700;
}

a.link--Recruit:hover {
  border-bottom: none;
  opacity: 0.5;
  color: #fdfdfd;
}

.tel {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  font-size: 0.875rem;
}

.number {
  font-size: 1.25rem;
}

.reception {
  font-size: 0.875rem;
}

.display960--none .ft__corporate--info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ここまで ヘッダーナビ */

/*-----------------------------*/
/*---ここから front-page.php---*/
/*----------------------------*/

/* ここからトップカバー */
.top__visual {
  padding: 0;
  position: relative;
  margin-top: 0;
}

.top__overlay--bg {
  position: absolute;
  right: 0;
  top: 39%;
  z-index: 2;
  width: 43.1918%;
  height: 67%;
  background-color: rgba(238, 239, 238, 0.6);
}

.top__overlay--copy {
  padding-top: 3%;
}

.h2__copy {
  z-index: 3;
  font-weight: 500;
  font-size: 2.63vw;
  width: 50%;
}

.visual-p {
  display: flex;
  flex-direction: column;
  position: relative;
  left: -3.7vw;
  top: 2.2vw;
  font-family: "Vujahday Script", cursive;
  font-size: 10vw;
  color: #fdfdfd;
  white-space: nowrap;
  transform-origin: left-top;
  -webkit-transform-origin: left top; /* Chrome,Safari */
  -ms-transform-origin: left top; /* IE */
  transform: rotate(347deg);
  line-height: 1;
  letter-spacing: 0.08em;
}

.visual-p__copy#p--lower {
  color: #666666;
  font-size: 8.7vw;
}

.margin--r20 {
  margin-right: 20px;
}

.swiper {
  width: 100%;
}
/* ここまで トップカバー */

/* ここから section 共通 */
section {
  margin-top: 120px;
}

.section__title--jp {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  font-weight: 700;
  /* color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: rgba(55, 61, 57, 0.33); */
  color: #fdfdfd;
  text-shadow: 0.5px 0 0 rgba(161, 170, 164, 0.4), 0 1px 0 rgba(55, 61, 57, 0.4), -1px 0 0 rgba(55, 61, 57, 0.4), 0 -1px 0 rgba(55, 61, 57, 0.4);
  line-height: 1;
  letter-spacing: 0.1em;
  min-width: 245px;
}

.section__title--en {
  font-size: 1rem;
  font-weight: 500;
  color: #009040;
  /* -webkit-text-stroke-width: 0; */
  text-shadow: none;
  letter-spacing: 0.1em;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding: 20px 2px;
  border-bottom: 2px solid #373d39;
}

/* ここまで section 共通 */

/* ここから お知らせInformation */
#information--latest {
  display: flex;
  justify-content: space-between;
  padding-left: 8.27%;
}

.top__info--title {
  display: flex;
  align-items: center;
}

.top__info--area {
  background-color: #2e724d;
  color: #fdfdfd;
  display: flex;
  align-items: center;
  padding: 30px 8.27% 30px 25px;
  min-width: 65%;
}

.top__info--area div {
  padding: 10px 20px;
}

.top__info--date {
  border-right: 1px solid #fdfdfd;
  letter-spacing: 0.1em;
}

a.btn__more {
  padding: 10px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #04140a;
  background-color: #fdfdfd;
  box-shadow: 5px 5px 10px #a4a4a4, -2px -2px 8px #fdfdfd;
  width: 65px;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.1em;
}

a.btn__more:hover {
  box-shadow: inset 2px 2px 8px #a4a4a4, inset -5px -5px 10px #fdfdfd;
}

a.btn__more.green {
  color: #fdfdfd;
  background-color: #2e724d;
  box-shadow: 3px 3px 6px #276141, -3px -3px 6px #358359;
  margin-left: auto;
}

a.btn__more.green:hover {
  box-shadow: inset 3px 3px 6px #276141, inset -3px -3px 6px #358359;
}

.dot--limited {
  display: none;
}

/* ここまで お知らせ */

/* ここから 動画エリア */

.top__movie--area {
  width: 100%;
  background: rgb(238, 239, 238);
  background: linear-gradient(90deg, rgba(238, 239, 238, 1) 0%, rgba(238, 239, 238, 0) 100%);
  position: relative;
  padding-right: 8.27%;
}

.top__movie--bgtext {
  font-size: 12.5rem;
  font-weight: 800;
  color: #373d39;
  opacity: 0.18;
  position: absolute;
  bottom: 0;
  right: 12%;
  line-height: 0.7;
}

.top__movie--container {
  width: 100%;
  padding-top: 40px;
  display: flex;
  justify-content: space-evenly;
}

.frame__wrap {
  position: relative;
  width: 60%;
  aspect-ratio: 16 / 9; /* 動画画面の比率　*/
  margin-left: 13.76%;
  margin-bottom: 80px;
  overflow: hidden;
}

video {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
  video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.top__movie--right {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: flex-end;
  margin-left: 4.4%;
  align-items: center;
}

.top__movie--catchcopy {
  position: absolute;
  top: -60px;
}

.btn__recruit {
  text-align: center;
  letter-spacing: 0.1em;
  color: #fdfdfd;
  padding: 10% 18%;
  background-color: #009040;
  box-shadow: 3px 3px 6px #006c30, -3px -3px 6px #00b450;
}

.btn__recruit:hover {
  box-shadow: inset 3px 3px 6px #006c30, inset -3px -3px 6px #00b450;
}

/* ここまで movie */

/* ここから services */
.top__service--header {
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.top__service--catchcopy {
  display: inline-block;
  position: relative;
  text-align: center;
  z-index: 1;
  font-size: 1.5rem;
  font-weight: 700;
}

.br--limited {
  display: none;
}

.top__service--bgtext {
  position: absolute;
  left: -25%;
  top: 18%;
  z-index: -1;
}

.top__service--wrapper {
  margin-top: 68px;
}

.top__service--container {
  margin-right: 8.27%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.top__service--title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.top__service--textbox {
  color: #fdfdfd;
  background: rgb(55, 61, 57);
  background: linear-gradient(45deg, rgba(55, 61, 57, 0.4) 0%, rgba(55, 61, 57, 1) 45%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 59%;
  padding: 6% 10% 6% 15%;
}

.service__others .top__service--textbox {
  padding: 6% 15% 6% 10%;
}

.top__service--text {
  font-size: 1rem;
  margin-top: 40px;
  letter-spacing: 0.1em;
}

.top__service--imgbox {
  position: absolute;
  /* right: 0; */
  left: 55%;
  width: 45.5%;
  aspect-ratio: 16 / 9;
  max-width: 600px;
  max-height: 337.5px;
}

.service__others .top__service--imgbox {
  position: absolute;
  left: 5%;
  width: 45.5%;
  aspect-ratio: 16 / 9;
}

.top__service--partsbox {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-top: 50px;
  padding: 0 8.27%;
}

.top__service--partsbox::before {
  content: "";
  display: block;
  width: 24%;
  height: 0;
  order: 1;
}

.top__service--partsbox::after {
  content: "";
  display: block;
  width: 24%;
  height: 0;
}

.top__service--partspanel {
  width: 24%;
  aspect-ratio: 1 / 1;
  display: flex;
  max-height: min-content;
}

.top__service--partspanel p {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 10px;
  text-align: center;
}

.top__service--partspanel a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #e0e0e0;
  width: 100%;
  aspect-ratio: 1 / 1;
  justify-content: space-around;
}

.top__service--partspanel img {
  width: 70%;
  aspect-ratio: 1 / 1;
}

.top__service--partspanel a:hover {
  border: 1px solid #009040;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.top__service--partspanel:nth-child(-n + 12) {
  margin-bottom: 10px;
}

.normal-sentence {
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.1em;
  margin-top: 30px;
  padding: 5px 20px;
  text-align: center;
}

.service__others .top__service--container {
  position: relative;
  margin-right: 0;
  margin-left: 8.27%;
  justify-content: flex-end;
}

.service__others .top__service--partspanel:nth-child(2) p {
  font-size: 1rem;
}
/* ここまで Services */

/* ここから Works */

.section__title--container {
  display: flex;
}

#works--abst .section__title--container {
  justify-content: flex-end;
}

#works--abst .section__title--jp {
  margin-right: 8.27%;
}

.works__latest--wrapper {
  width: 100%;
  margin-top: 40px;
  padding: 30px 0;
}

.works__latest--box {
  display: flex;
  justify-content: space-between;
  margin-left: 8.27%;
  margin-right: 8.27%;
}

.works__thumbnail {
  width: 31.25%;
}

a.works__link {
  display: block;
}

figure {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

a.works__link {
  position: relative;
}

a.works__link figure {
  overflow: hidden;
}

a.works__link figcaption {
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  color: #fdfdfd;
  border: solid 1px #fdfdfd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2%;
}

a.works__link img {
  display: block;
  width: 100%;
  transition: 0.3s;
  aspect-ratio: 4/3;
}

a.works__link .text_box {
  position: relative;
  width: 100%;
  height: 100%;
}

a.works__link figcaption p {
  width: 95%;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

a.works__link:hover figure img {
  filter: brightness(50%);
}
a.works__link:hover figcaption {
  opacity: 1;
}

.works__morebtn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* ここまで Works */

/* ここから CompanyInfo */
#company-info {
  width: calc(100% - 16.54%);
  margin-left: auto;
  margin-right: auto;
}

.company-info__container {
  margin-top: 40px;
  padding: 25px 5vw;
  background-color: rgba(46, 114, 77, 0.2);
  display: flex;
  justify-content: space-between;
}

.company-info__lists {
  min-width: 43%;
  display: flex;
  flex-direction: column;
}

.lists--left {
  margin-right: 6vw;
}

.company-info__list {
  display: flex;
  padding: 15px 10px 30px 0;
  line-height: 1.7;
  border-top: 1px solid #fdfdfd;
  position: relative;
}

.company-info__list:before {
  content: "";
  background: #009040;
  width: 30px;
  height: 1px;
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
}

.list--item {
  width: 28%;
  padding-right: 25px;
}

.list--detail {
  width: 69%;
}

.list--contents {
  min-width: 50%;
}

.inner__flexbox {
  display: flex;
}

.license {
  display: flex;
  justify-content: space-between;
}

.license div {
  padding-left: 10px;
}

/* ここまで CompanyInfo */

/* ここから Blog */
#blog--latest {
  width: calc(100% - 24.597%);
  margin-left: auto;
  margin-right: auto;
}

.blog__wrapper {
  margin: 40px 0;
}

.blog__box {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.blog__box img {
  width: 24%;
  aspect-ratio: 7/5;
}

.blog__box--inner {
  width: 72%;
  padding-left: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog__date {
  color: #04140a;
  display: flex;
  line-height: 1;
  align-items: flex-end;
  width: fit-content;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #e0e0e0;
  border-right: 0.5px solid #e0e0e0;
}

.date--ym {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  line-height: 1;
}

.date--y {
  color: #e0e0e0;
}

.date--day {
  font-size: 2.5rem;
  padding: 0 10px 0 5px;
  line-height: 0.9;
}

.blog__title {
  /* font-size: 0.875rem; */
  padding: 3% 0;
  margin: 3%;
}

.blog__box--text {
  width: 100%;
  margin-right: 3%;
  border-bottom: 1px solid #e0e0e0;
}

/* ここまで Blog */

/*--------------------------------*/
/* ------ここから footer.php ------*/
/*--------------------------------*/
.ft__wrapper {
  width: 100%;
}

.ft__container--upper {
  display: flex;
  width: 100%;
  color: #fdfdfd;
  font-weight: 500;
}

.ft__contact {
  width: 50%;
  max-height: 350px;
  background-color: #373d39;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}

.contact--jp {
  font-size: 1.25rem;
}
.contact--en {
  font-size: 4.25rem;
  line-height: 1;
  margin-bottom: 20px;
}

.ft__contact .number {
  font-size: 1.875rem;
}

.ft__contact .number a {
  color: #fdfdfd;
}

.ft__contact .reception {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.ft__recruit {
  width: 50%;
  max-height: 350px;
  background-color: #009040;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}

.recruit--jp {
  font-size: 1.25rem;
}

.recruit--en {
  font-size: 4.25rem;
  color: transparent;
  -webkit-text-stroke: 0.75px #fdfdfd;
  line-height: 1;
  margin-bottom: 20px;
}

.button.link--Recruit {
  padding: 10px 35px;
  background-color: #009040;
  box-shadow: 3px 3px 6px #006c30, -3px -3px 6px #00b450;
}

.button.link--Recruit:hover {
  box-shadow: inset 3px 3px 6px #006c30, inset -3px -3px 6px #00b450;
}

.ft__container--lower {
  width: 100%;
  display: flex;
}

img.ft__logo {
  max-width: 200px;
}

.fuji__shape {
  height: 100%;
}

.ft__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-left: 20px;
}
.ft__box--inner {
  padding: 60px 0;
}

.ft__corporate--name {
  font-size: 1.125rem;
  margin-top: 10px;
}

.ft__corporate--info {
  margin-top: 20px;
  display: block;
}

a.ft__mail {
  display: flex;
  align-items: center;
}

.ft__mail img {
  width: 22px;
  height: 16px;
}

.ft__copyright {
  display: flex;
  font-size: 0.75rem;
}

.privacy {
  margin-left: 20px;
}

/*---------------------------------------*/
/*------ここから archive-works.php------*/
/*--------------------------------------*/
.archive__main {
  margin-left: 8.27%;
}

.archive__cover .section__title--container {
  min-width: 33.76%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.archive__cover {
  display: flex;
  margin-bottom: 80px;
  position: relative;
}

.archive__wholewrapper {
  display: flex;
  justify-content: space-between;
  margin-right: 8.27%;
  margin-bottom: 60px;
}

.archive__wrapper {
  width: 69.55%;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.archive__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.archive__wholewrapper .sidebar__wrapper {
  min-width: 25.87%;
}

.archive__box {
  width: 30%;
}
.archive__box--dummy {
  width: 30%;
}
.archive__box:last-child {
  justify-self: flex-start;
}

.archive__item {
  margin-bottom: 80px;
}
.archive__item figure > img {
  object-fit: cover;
  aspect-ratio: 5/4;
}

.archive__item a.works__link figcaption {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2%;
}

.archive__item--title {
  font-size: 1rem;
  font-weight: 400;
}

.archive__tags {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 0.875rem;
}

.archive__wrapper .post__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009040;
}

.nav-links {
  display: flex;
}

.nav-links a:hover {
  color: #fdfdfd;
  background-color: #009040;
}

.page-numbers {
  font-size: 1rem;
  font-weight: 500;
  padding: 4px 8px;
  margin: 0 1px;
  color: #009040;
  background-color: #fdfdfd;
  border: 0.75px solid #009040;
}

.page-numbers.current {
  color: #fdfdfd;
  background-color: #009040;
}

.next,
.prev {
  border: initial;
}
/*-------------------------------------------*/
/*------ここから archive-information.php-----*/
/*-------------------------------------------*/
.info__index .archive__wrapper {
  width: auto;
}

.info__index .archive__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70%;
}

.info__index .archive__box {
  width: initial;
  padding: 40px 40px 40px 0;
  border-bottom: 0.75px solid #009040;
}

.info__index .archive__box a {
  display: flex;
}
.info__index .archive__box a:hover {
  color: #009040;
}
.info__index .archive__item--date {
  margin-right: 30px;
  letter-spacing: 0.1em;
}

/*-----------------------------------------------*/
/*--------ここから archive-blog.php--------*/
/*-----------------------------------------------*/
.archive__wholewrapper.blog__archive {
  flex-direction: column;
  align-items: center;
}

.blog__archive .archive__wrapper {
  width: 85%;
  align-items: flex-start;
}

.blog__archive .archive__header {
  margin-bottom: 40px;
}

.blog__archive .archive__container {
  width: 100%;
}

.blog__archive .article__header--tags li:last-child {
  margin-left: 0px;
}

.blog__archive .article__header--tags li {
  margin-right: 10px;
  margin-bottom: 10px;
}

.blog__archive .archive__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 27%;
  padding-bottom: 8px;
  margin-bottom: 40px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.blog__archive .archive__box--inner {
  height: 35%;
}

.blog__archive a.blog__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}

.blog__archive .archive__box:hover {
  opacity: 0.5;
  transition: all 0.5s 0s ease;
}

.blog__archive .archive__item--thumb {
  height: 55%;
  max-height: 150px;
}

.blog__archive .archive__item--thumb img {
  object-fit: cover;
  aspect-ratio: 7/5;
  height: 100%;
  max-height: 150px;
}

.blog__archive .archive__box--inner {
  display: flex;
  flex-direction: column;
}

.blog__archive .archive__box--inner span.archive__item--date {
  color: #fdfdfd;
  font-weight: 500;
  background-color: #2e724d;
  padding: 5px 10px;
  display: inline-block;
  letter-spacing: 0.05em;
}

.blog__archive .archive__box--inner .archive__item--title {
  padding: 5px;
  margin: 5px 5% auto;
}

.blog__archive .archive__tags {
  align-items: flex-end;
  justify-content: flex-end;
  font-size: 0.75rem;
  margin-top: auto;
  padding-right: 8px;
}

.blog__archive .archive__tags li {
  background-color: #e0e0e0;
  padding: 5px 15px;
  margin: 5px;
}

.blog__archive .archive__tags li:last-child {
  margin-left: 10px;
}

.blog__archive .post__pagination {
  justify-content: center;
  width: 85%;
}

/*-----------------------------------------*/
/*--------ここから single-works.php--------*/
/*----------------------------------------*/
.article__main {
  margin-left: 8.27%;
}

.article__cover .section__title--container {
  min-width: 33.76%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article__cover {
  display: flex;
  margin-bottom: 80px;
  position: relative;
}

.article__wholewrapper {
  display: flex;
  justify-content: space-between;
  margin-right: 8.27%;
  margin-bottom: 60px;
}

.article__wrapper {
  width: 69.55%;
  margin-bottom: 60px;
}

.article__header {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

.article__header--box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.article__header--title {
  font-size: 1.5rem;
  max-width: 72%;
}

ul.article__header--tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.875rem;
  font-weight: 500;
}

.article__header--tags li {
  background-color: #e0e0e0;
  padding: 5px 15px;
}

.article__header--tags li:first-child {
  margin-right: 10px;
}

.article__header--tags li:last-child {
  margin-left: 10px;
}

.client-name {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 10px 0;
}

.article__contents {
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
  border-bottom: 1px solid #e0e0e0;
}

.single__works--gallery {
  width: 65%;
  margin-right: 3%;
}
.article__img--container img {
  aspect-ratio: 4 / 3;
}
.swiper-wrapper {
  padding-bottom: 20px;
}
.thumb-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.article__img--thumb {
  width: 32%;
  padding-right: auto;
}

.article__img--thumb img {
  aspect-ratio: 7/5;
  object-fit: cover;
}

.article__content {
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.thumb--active {
  opacity: 0.3;
}

/* pagination */
.post__pagination {
  width: 65%;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  font-size: 0.875rem;
}

/*-----------------------------------------*/
/*-----ここから single-information.php-----*/
/*----------------------------------------*/
.article__common .article__header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #009040;
  padding-bottom: 5px;
  margin-bottom: 30px;
}

.article__common .article__header--title {
  max-width: initial;
}

.article__common .article__header--date {
  color: #cccccc;
  margin-bottom: 15px;
}

.article__common .article__contents {
  padding-bottom: 30px;
  flex-direction: column;
  border-bottom: 1px solid #009040;
}

.article__common .article__sentence {
  padding-top: 35px;
}

.article__common .post__pagination {
  width: initial;
}

.article__common .post__pagination a:hover {
  color: #009040;
}
/*-----------------------------------------*/
/*--------ここから single-blog.php--------*/
/*----------------------------------------*/

.article__header--DateTags {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.article__header--DateTags .article__header--date {
  margin-bottom: 0;
  margin-right: 20px;
}

.blog__single .post__pagination {
  padding: 10px;
  border-top: 1px solid rgb(0, 144, 64);
}

/*--------------------------------------*/
/*---ここから sidebar-works.php---*/
/*-------------------------------------*/
.sidebar__wrapper {
  width: 25.87%;
}

.sidebar__category--header {
  background-color: #373d39;
  color: #fdfdfd;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 5px 10px;
}

.tag--area.tag--all {
  margin: 10px 0 10px 0;
}

.tag--area {
  margin: 10px 0 30px 0;
}

.sidebar__category--main a {
  background-color: #009040;
  color: #fdfdfd;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  font-size: 0.875rem;
  width: 100%;
}

.sidebar__category--tag {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 5px 20px;
}

.sidebar__category--tag a {
  background-color: #fdfdfd;
  color: #04140a;
  font-weight: 400;
  padding: 0px 10px;
}

.sidebar__category--main.pulldown {
  margin-bottom: 20px;
  position: relative;
}

ul.tag--area {
  display: none;
}
ul.tag--area.on {
  display: block;
}

.sidebar__category--main.pulldown::before {
  /* 閉じている時 */
  content: "＋";
  color: #fdfdfd;
  position: absolute;
  top: 4px;
  right: 10px;
}

.sidebar__category--main.pulldown.on::before {
  /* 開いている時 */
  content: "―";
}

/*--------------------------------*/
/*---ここから sidebar-blog.php---*/
/*------------------------------*/
.sidebar__wrapper.article__common {
  padding-top: 35px;
}

.sidebar__wrapper.article__common .article__header--tags {
  display: flex;
  flex-wrap: wrap;
}

.sidebar__wrapper.article__common .article__header--tags li {
  margin-right: 10px;
  margin-bottom: 10px;
}

.sidebar__wrapper.article__common .article__header--tags li:last-child {
  margin-left: 0;
}

.sidebar__wrapper.article__common .sidebar__container {
  margin-bottom: 30px;
}

.sidebar__wrapper.article__common .sidebar__category--header {
  margin-bottom: 20px;
}
.sidebar__wrapper.article__common .blog__box img {
  min-width: 36%;
}

.sidebar__wrapper.article__common .blog__box--text {
  margin-left: 3%;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding-bottom: 10px;
}

.sidebar__wrapper.article__common .blog__box--date {
  color: #cccccc;
}

.article__common .sidebar__container {
  margin-bottom: 40px;
}

.article__common :where(button, input, select) {
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.875rem;
}

.blog__box a:hover {
  opacity: 0.6;
}

/*--------------------------------------*/
/*---ここから sidebar-information.php---*/
/*-------------------------------------*/
.info__sidebar :where(button, input, select) {
  margin-left: 3%;
}

/*-------------------------------*/
/*--------ここから 404.php--------*/
/*-------------------------------*/
#_404--contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  color: #fdfdfd;
}

#_404--contents div {
  position: absolute;
  bottom: 17%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.not-found {
  font-size: 1.25rem;
  font-weight: 700;
}
.return-top {
  margin-top: 25%;
  color: #fdfdfd;
}

.return-top:hover {
  color: #00ff00;
}

#js-pagetop {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 40px;
  z-index: 990;
}

/*----------------*/ /*----------------*/ /*----------------*/
/*-----------------ここから レスポンシブ対応------------------*/
/*----------------*/ /*----------------*/ /*----------------*/

/* ===== 1500pxまでの処理 ===== */
@media screen and (max-width: 1500px) {
  .top__service--textbox {
    padding: 6% 15% 6% 9.3%;
  }

  .top__service--textbox {
    padding: 6% 15% 6% 9.3%;
  }

  .top__service--imgbox {
    left: initial;
    right: 0;
  }

  .service__others .top__service--imgbox {
    position: absolute;
    left: 0;
  }
}

/* ===== 1350pxまでの処理 ===== */
@media screen and (max-width: 1350px) {
  /* header-nav.php */
  .header__logo {
    max-width: 180px;
  }

  #gnav {
    width: 78%;
  }

  .gnav__list {
    width: 50%;
  }

  .gnav__contact {
    width: 42%;
  }
  /*-----------------------------------*/
  /*-----ここから front-page.php-----*/
  /*-----------------------------------*/
  .section__title--jp {
    font-size: 6vw;
    letter-spacing: 0.05em;
  }

  .top__service--title {
    font-size: 1.625rem;
  }
  .top__service--textbox {
    padding: 6% 8% 6% 8%;
  }
  .top__service--text {
    margin-top: 25px;
  }

  /*-----------------------------------*/
  /*-----ここから single-works.php-----*/
  /*-----------------------------------*/
  .article__cover .section__title--jp {
    min-width: inherit;
    font-size: 3.2rem;
  }

  /*-------------------------------*/
  /*--------ここから 404.php--------*/
  /*-------------------------------*/

  #_404--contents div {
    bottom: 12%;
  }

  .return-top {
    margin-top: 25%;
    color: #fdfdfd;
  }
}

/* ========== 1199pxまでの処理 =========== */
@media screen and (max-width: 1199px) {
  /*----------------------------------*/
  /*--------ここから header.php-------*/
  /*---------------------------------*/
  .header__wrapper {
    max-width: 1140px;
    padding-left: 8.27%;
    padding-right: 2%;
  }

  /*----------------------------------*/
  /*------ここから header-nav.php------*/
  /*---------------------------------*/
  #gnav {
    font-size: 0.9rem;
  }

  ul.gnav__list {
    width: 52%;
  }

  .gnav__contact--item .tel {
    font-size: 0.9rem;
  }

  .gnav__contact--item .number {
    font-size: 1rem;
  }

  .reception {
    font-size: 0.75rem;
  }

  /*---------------------------------*/
  /*-----ここから front-page.php-----*/
  /*--------------------------------*/
  #information--latest {
    padding-left: 5%;
  }

  .top__info--area {
    padding: 20px 5% 20px 20px;
    margin-left: 20px;
  }

  .top__service--header {
    margin: 0 8.27%;
  }

  .top__service--bgtext {
    left: -20%;
    top: 0;
  }
  .top__service--title {
    font-size: 1.25rem;
  }
  .top__service--text {
    font-size: 0.875rem;
  }

  .inner__flexbox {
    display: column;
  }

  /*-----------------------------------*/
  /*-----ここから archive-blog.php-----*/
  /*-----------------------------------*/
  .blog__archive .archive__box {
    width: 32%;
  }

  /*-----------------------------------*/
  /*-----ここから single-works.php-----*/
  /*-----------------------------------*/
  .article__cover .section__title--jp {
    min-width: inherit;
    font-size: 3rem;
  }
  .article__cover .section__title--en {
    padding: 10px 2px;
  }
  /*---------------------------------*/
  /*-----ここから 404.php-----*/
  /*--------------------------------*/
  .return-top {
    margin-top: 20%;
  }
}

/* ========== ここから 1024pxまでの処理 ========== */
@media screen and (max-width: 1024px) {
  /* -----共通----- */

  /*---------------------------------*/
  /*-----ここから front-page.php-----*/
  /*--------------------------------*/

  /* ここから -動画エリア- */
  .top__movie--catchcopy img {
    width: 95%;
  }
  .top__movie--area {
    padding: 0;
  }
  /* ここまで -動画エリア- */

  /* ここから　-サービス- */
  .service__others .top__service--partspanel:nth-child(2) p {
    font-size: 0.875rem;
  }
  /* ここまで　-サービス- */

  /*-----------------------------------*/
  /*-----ここから single-works.php-----*/
  /*-----------------------------------*/
  .article__cover .section__title--jp {
    font-size: 2.8rem;
  }

  .single__works .article__header--box {
    flex-direction: column;
  }
}
/* ============ ここまで 1024pxまでの処理 ============ */

/* ============ ここから 960pxまでの処理 ============ */
@media screen and (max-width: 960px) {
  /*-----------------------------------*/
  /*------ここから header-nav.php------*/
  /*----------------------------------*/
  .header__wrapper {
    height: 80px;
  }

  .header__logocontainer {
    width: 45%;
    justify-content: flex-start;
  }

  /* ハンバーガーメニュー */
  .Toggle {
    z-index: 1001;
    position: relative;
    /* background-color: rgba(253, 253, 253, 0.4); */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
  }

  .Toggle span {
    display: inline-block;
    position: absolute;
    width: 40%;
    left: 15px;
    border-bottom: solid 2px #2e724d;
    -webkit-transition: 0.35s ease-in-out; /*変化の速度を指定*/
    -moz-transition: 0.35s ease-in-out; /*変化の速度を指定*/
    transition: 0.35s ease-in-out; /*変化の速度を指定*/
  }

  .Toggle span:nth-child(1) {
    top: 15px;
  }

  .Toggle span:nth-child(2) {
    top: 23px;
  }

  .Toggle span:nth-child(3) {
    top: 31px;
  }

  /* 最初のspanをマイナス45度に */
  .Toggle.active span:nth-child(1) {
    top: 18px;
    left: 15px;
    transform: translateY(6px) rotate(-45deg);
    -webkit-transform: translateY(6px) rotate(-45deg);
    -moz-transform: translateY(6px) rotate(-45deg);
  }

  .Toggle.active span:nth-child(2) {
    opacity: 0; /*真ん中の線は透過*/
  }

  /* 3番目のspanを45度に */
  .Toggle.active span:nth-child(3) {
    top: 30px;
    left: 15px;
    transform: translateY(-6px) rotate(45deg);
    -webkit-transform: translateY(-6px) rotate(45deg);
    -moz-transform: translateY(-6px) rotate(45deg);
  }

  /*トグルボタンが押されたときに付与するクラス*/
  #gnav.panelactive {
    transform: translateX(0%);
  }

  /*ナビメニューのスタイルを指定*/
  #gnav {
    position: fixed; /*表示位置を固定*/
    z-index: 1000; /*重ね順を変更*/
    top: 0; /*表示位置を指定*/
    left: 0; /*表示位置を指定*/
    background: #eeefee; /*背景*/
    color: #04140a; /*文字色*/
    text-align: center; /*テキスト中央揃え*/
    height: 100vh;
    min-width: 100vw !important; /*全幅表示*/
    min-height: 100vh !important;
    transform: translateX(100%); /*ナビを上に隠す*/
    transition: all 0.5s ease-in-out; /*アニメーションの時間を指定*/
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .gnav__list {
    width: 100%;
    margin: 12% auto auto;
    flex-direction: column;
    position: static !important;
    left: auto !important;
    top: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    justify-content: space-between !important;
    overflow: auto;
  }

  .gnav__item {
    font-size: clamp(1.25rem, 1.199rem + 0.29vw, 1.375rem) !important;
    list-style-type: none;
    padding: 1rem 0;
    width: 100% !important;
    letter-spacing: 0.45em;
  }

  a.gnav__link {
    display: block; /*クリックできる領域を広げる*/
    width: 100%;
  }

  .gnav__contact {
    flex-direction: column;
    align-items: center;
    min-width: 180px;
    max-width: 240px;
    padding: 0;
  }

  .gnav__contact--item {
    width: 100%;
  }

  .gnav__contact--item:nth-child(1) {
    background-color: #009040;
    width: 100%;
    margin-bottom: 30px;
  }

  .br--none {
    display: none;
  }

  .gnav__contact--item:nth-child(2) {
    background-color: #04140a;
    width: 100%;
  }

  .gnav__link.link--Recruit {
    padding: 0.5em 0;
  }

  .gnav__contact--item:last-child {
    display: none;
  }

  #gnav .ft__box {
    margin-left: 0;
  }

  .span--inline {
    display: inline-block;
    width: 5px;
  }

  .display960--none {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .display960--none img.ft__logo {
    max-width: 200px;
  }

  /*-------------------------------*/
  /*----ここから front-page.php----*/
  /*------------------------------*/

  /* ここから top visual */
  .top__overlay--bg {
    width: 50%;
  }

  /* .swiper {
    max-height: 500px;
  } */

  .h2__copy {
    font-size: 3.6vw;
  }

  .visual-p {
    font-size: 15vw;
    left: -5.5vw;
  }

  .visual-p__copy#p--lower {
    font-size: 12vw;
  }

  /* ここまで top visual */

  /* ここから service */
  .top__service--title {
    font-size: 1.25rem;
  }

  .top__service--textbox {
    align-items: flex-start;
  }

  .btn__recruit {
    padding: 5% 15%;
  }

  /* ここから Movie */
  .top__movie--catchcopy img {
    width: 85%;
  }

  .top__movie--bgtext {
    right: 0;
  }

  /* Services */
  .top__service--header {
    margin: 0 8.27%;
  }

  .top__service--catchcopy {
    font-size: 1.25rem;
  }

  .top__service--partspanel p {
    font-size: 1rem;
  }

  #_404--contents div {
    bottom: 8%;
  }

  /*------------------------------*/
  /*--ここから archive-works.php--*/
  /*-----------------------------*/
  .archive__wholewrapper {
    flex-direction: column;
  }

  .archive__wrapper {
    width: 100%;
  }

  .section__title--jp {
    font-size: 3rem;
  }
  .section__title--en {
    padding: 10px 2px;
    bottom: -5px;
  }

  .archive__wrapper a.works__link figcaption {
    opacity: initial;
    transition: none;
    position: initial;
    left: auto;
    top: auto;
    transform: none;
    width: initial;
    color: #04140a;
    border: none;
    display: flex;
  }

  .archive__tags {
    color: #009040;
  }

  /*------------------------------*/
  /*--ここから archive-blog.php--*/
  /*-----------------------------*/
  .blog__archive .archive__box {
    width: 32%;
  }
  .blog__archive .archive__wrapper {
    width: 100%;
  }
  /*------------------------------*/
  /*--ここから sidebar-works.php--*/
  /*-----------------------------*/
  .archive__wholewrapper .sidebar__wrapper {
    width: 100%;
  }

  /*---------------------------*/
  /*--ここから footer.php--*/
  /*--------------------------*/
  /* footer */
  .ft__box--inner {
    padding: 30px 0;
  }

  .ft__copyright {
    display: block;
  }
}
/* ============ ここまで 960pxまでの処理 ============ */

/* ========== ここから 840pxまでの処理 ========== */

@media screen and (max-width: 840px) {
  /*----------------------------------*/
  /*------ここから front-page.php------*/
  /*----------------------------------*/

  /* ここから movie */
  .top__movie--bgtext {
    font-size: 10rem;
  }

  /* ここから services */
  .top__service--textbox {
    width: 80%;
    padding: 6% 20% 6% 8%;
  }

  .service__others .top__service--textbox {
    width: 80%;
    padding: 6% 8% 6% 20%;
  }

  .top__service--imgbox {
    right: -8.27%;
  }

  .service__others .top__service--imgbox {
    left: -8.27%;
  }

  .service__others .top__service--partspanel:nth-child(2) p {
    font-size: 0.8rem;
    letter-spacing: -0.075em;
    white-space: nowrap;
  }
}
/* ========== ここまで 840pxまでの処理 ========== */

/* ========== ここから 768pxまでの処理 ========== */
@media screen and (max-width: 768px) {
  /* 共通 */
  section {
    margin-top: 60px;
  }

  /*-------------------------------*/
  /*------ここから header.php------*/
  /*------------------------------*/
  .header__wrapper {
    height: 80px;
  }

  .header__logocontainer {
    width: 60%;
  }

  /*----------------------------------*/
  /*------ここから front-page.php------*/
  /*----------------------------------*/

  /* ここから top visual */
  .h2__copy {
    font-size: 3.6vw;
  }

  .visual-p {
    font-size: 12.5vw;
    left: -5.5vw;
  }

  .visual-p__copy#p--lower {
    font-size: 12vw;
  }

  /* ここから Information */

  #information--latest {
    flex-direction: column;
  }
  .top__info--area {
    margin-top: 20px;
    margin-left: 0;
  }
  /* ここまで Information */

  /* ここから movie */
  .top__movie--area {
    padding: 0 8.27%;
  }

  .top__movie--container {
    flex-direction: column;
  }

  .frame__wrap {
    width: 100%;
  }

  .top__movie--bgtext {
    font-size: 8rem;
  }
  .frame__wrap {
    margin: 0;
  }

  .top__movie--right {
    margin-left: 0;
    flex-direction: row;
  }

  .btn__recruit {
    padding: 1% 4%;
    margin-top: 20px;
  }

  .top__movie--catchcopy {
    top: 25%;
    left: 3%;
  }
  /* ここまで movie */

  /* ここから Services */
  .top__service--header {
    padding-top: 30px;
  }

  .top__service--bgtext {
    left: -10%;
    top: 0%;
  }

  .top__service--bgtext img {
    width: 85%;
  }

  .top__service--container {
    align-items: flex-start;
  }

  .top__service--textbox,
  .service__others .top__service--textbox {
    width: 100%;
    padding: 8.27%;
  }

  .top__service--imgbox,
  .service__others .top__service--imgbox {
    width: 80%;
    right: -8.27%;
    top: 95%;
  }

  .top__service--partsbox {
    margin-top: 45%;
  }

  .top__service--partspanel p {
    margin-bottom: 0;
  }

  .top__service--partspanel {
    width: 32%;
  }

  .top__service--partspanel:nth-last-child(2),
  .top__service--partspanel:nth-last-child(3) {
    justify-self: center;
  }
  .panel--dammy01 {
    display: none;
  }
  .normal-sentence {
    font-size: 0.875rem;
  }

  .service__others .top__service--partspanel:nth-child(2) a {
    padding: 10px;
  }

  .service__others .top__service--partspanel:nth-child(2) p {
    font-size: 0.875rem;
  }
  /* ここまで Services */
  /* ここから works */
  .works__latest--wrapper {
    margin-top: 20px;
    padding: 20px 0;
  }
  .works__latest--box {
    flex-direction: column;
    align-items: center;
  }

  .works__thumbnail {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2%;
  }

  a.works__link img {
    aspect-ratio: 4/3;
  }

  .works__morebtn {
    margin-top: 10px;
  }
  /* ここまで works */
  /* ここから Company Info */
  .company-info__container {
    flex-direction: column;
  }

  .lists--left {
    margin-right: 0;
  }
  /* ここまで Company Info */

  /* ここから Blog */
  .blog__date {
    align-items: baseline;
  }
  .date--ym {
    flex-direction: row;
    font-size: 0.875rem;
  }

  .date--day {
    font-size: 1.5rem;
  }
  .blog__title {
    margin: 0;
    padding: 5% 0;
  }
  /* ここまで Blog */

  /*------------------------------*/
  /*------ここから footer.php------*/
  /*------------------------------*/

  .ft__container--upper {
    flex-direction: column;
  }

  .ft__contact,
  .ft__recruit {
    width: 100%;
    padding: 50px 0;
  }
  .ft__container--lower {
    position: relative;
    flex-direction: column;
  }

  #footer .ft__box {
    position: absolute;
    bottom: 5%;
  }

  /*----------------------------------*/
  /*--ここから archive-information.php--*/
  /*---------------------------------*/
  .info__index .archive__container {
    width: 80%;
  }

  .info__index .archive__box {
    padding: 20px 20px 20px 0;
  }

  /*----------------------------------*/
  /*----ここから archive-works.php----*/
  /*---------------------------------*/
  .archive__cover .section__title--container {
    position: absolute;
    bottom: 10%;
    left: 5%;
  }

  .archive__cover .section__title--jp {
    color: #fdfdfd;
  }

  .archive__box {
    width: 48%;
  }

  .archive__item {
    margin-bottom: 40px;
  }

  /*------------------------------*/
  /*--ここから archive-blog.php--*/
  /*-----------------------------*/

  .blog__archive .archive__box {
    width: 48%;
  }

  .blog__archive .archive__item--thumb {
    height: 65%;
    max-height: 200px;
  }
  .blog__archive .archive__item--thumb img {
    max-height: 200px;
  }

  /*-----------------------------------*/
  /*-----ここから single-works.php-----*/
  /*-----------------------------------*/
  .article__cover .section__title--jp {
    font-size: 7vw;
  }

  .article__wholewrapper {
    flex-direction: column;
  }

  .article__wrapper {
    width: 100%;
  }

  .sidebar__wrapper {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: solid 1px #009040;
    margin-bottom: 30px;
  }

  .sidebar__container {
    margin-bottom: 0px;
  }

  .article__wrapper .post__pagination {
    width: 100%;
    padding: 0 10px;
  }
  /*-----------------------------------*/
  /*-----ここから single-blog.php-----*/
  /*-----------------------------------*/
  .article__cover {
    margin-bottom: 40px;
  }
  .article__wholewrapper.article__common {
    flex-direction: column;
  }

  .sidebar__wrapper.article__common {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: solid 1px #009040;
    margin-bottom: 30px;
  }
  .article__common .sidebar__container {
    margin-bottom: 0px;
  }
  .sidebar__container.blog__latest3 {
    width: 70%;
  }
  .sidebar__container.blog__tags {
    width: 100%;
  }

  .article__header ul.article__header--tags {
    font-size: 0.75rem;
  }

  .article__common .article__wrapper {
    width: 100%;
    margin-bottom: 0;
  }

  .


  /*----------------------------*/
  /*------ここから 404.php------*/
  /*---------------------------*/

  .not-found {
    font-size: 1rem;
  }

  .return-top {
    margin-top: 10%;
    font-size: 0.875rem;
  }

  #js-pagetop {
    right: 20px;
  }
}
/* ========== ここまで 768pxまでの処理 ========== */

/* ========== ここから 575pxまでの処理 =========== */
@media screen and (max-width: 575px) {
  .gnav__list {
    margin: 18% auto 8%;
  }

  /* ここから top visual */

  .h2__copy {
    font-size: 5.8vw;
    width: 60%;
  }

  .top__overlay--bg {
    width: 55.6%;
    top: 46%;
    height: 58%;
  }

  .visual-p {
    font-size: 20vw;
    letter-spacing: 0.04em;
    left: -7.4vw;
    top: 8vw;
  }

  .visual-p__copy#p--lower {
    font-size: 17.4vw;
  }
  /* ここまで top visual */

  /* ここから movie */

  .top__movie--right {
    flex-direction: column;
    padding-top: 20px;
  }

  .top__movie--catchcopy {
    position: static;
  }

  .btn__recruit {
    padding: 1% 4%;
  }

  .top__movie--bgtext {
    font-size: 7rem;
  }

  /* ここまで movie */

  /* ここから works */
  .br--limited {
    display: block;
  }

  .top__service--wrapper {
    margin-top: 40px;
  }

  .top__service--bgtext {
    left: -32%;
    top: -15%;
  }

  .top__service--bgtext img {
    width: 70%;
  }

  .top__service--textbox,
  .service__others .top__service--textbox {
    padding: 10%;
  }

  .top__service--partspanel {
    width: 49%;
  }

  .panel--dammy02 {
    display: none;
  }
  /* ここまで works */

  /* ここから blog */
  #blog--latest {
    width: calc(100% - 16.54%);
  }

  /*------------------------------*/
  /*--ここから archive-blog.php--*/
  /*-----------------------------*/

  /*------------------------------*/
  /*--ここから single-blog.php--*/
  /*-----------------------------*/
  .sidebar__container,
  .sidebar__container.blog__latest3 {
    width: 100%;
  }
}
/* ========== ここまで 575pxまでの処理 ========== */
@media screen and (max-width: 376px) {
  #gnav.panelactive {
    justify-content: space-evenly;
  }
}
/* ========== ここから 480pxまでの処理 ========== */

@media screen and (max-width: 480px) {
  /*--------------------*/
  /*--------共通--------*/
  /*--------------------*/
  html,
  body {
    font-size: 3.33333vw;
  }

  /*--------------------*/
  /*-----header.php-----*/
  /*--------------------*/
  .header__wrapper {
    width: 100%;
    height: 55px;
    padding-left: 8.27%;
  }

  .header__logocontainer {
    max-width: 65%;
    min-width: 159px;
  }

  .header__logo {
    min-width: 65px;
  }

  /*---------------------*/
  /*---front-page.php---*/
  /*--------------------*/
  a.btn__more {
    padding: 5px;
    width: 40px;
    text-align: center;
    box-shadow: 2px 2px 4px #a4a4a4, -1px -1px 4px #fdfdfd;
  }

  a.btn__more:hover {
    box-shadow: inset 2px 2px 4px #a4a4a4, inset -2px -2px 4px #fdfdfd;
  }

  a.btn__more p {
    display: none;
  }

  div.dot--limited {
    display: flex;
    padding: 5px;
    justify-content: center;
  }

  .dot--limited span {
    width: 1px;
    height: 1px;
    margin: 2px;
    border-radius: 50%;
    background-color: #04140a;
  }

  .green .dot--limited span {
    background-color: #fdfdfd;
  }

  .section__title--jp {
    font-size: 10vw;
    letter-spacing: 0.025em;
    min-width: 100px;
  }

  .section__title--en {
    padding: 6px 2px;
  }

  /* Information */
  .top__info--area {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 5% 10px 15px;
  }

  .top__info--area div {
    padding: 5px 0;
  }

  a.btn__more.green {
    align-self: end;
  }

  .top__info--date {
    border-right: none;
    border-bottom: 1px solid #fdfdfd;
  }

  /* ここまで お知らせ */

  /* ここから 動画エリア */
  .top__movie--container {
    padding-top: 20px;
  }

  /* ここまで 動画エリア */

  /* ここから Services */
  .top__service--bgtext {
    left: -15%;
    top: 5%;
  }

  .top__service--bgtext img {
    width: 100%;
  }

  /* ここまで Services */

  /* ここから blog */

  .date--day {
    padding: 0 10px 0 2px;
  }

  .blog__box--inner {
    padding-left: 10px;
  }
  .blog__box--text {
    margin-right: 10px;
  }

  .blog__morebtn {
    align-self: flex-end;
    margin-bottom: 10px;
    width: 35px;
  }
  /* ここまで blog */

  .article__cover .section__title--en {
    padding: 6px 2px;
  }

  /*------------------------------*/
  /*--ここから archive-works.php--*/
  /*-----------------------------*/
  .archive__cover {
    margin-bottom: 30px;
  }

  .archive__main {
    margin-left: 0;
  }

  .archive__wholewrapper {
    margin: 0 5%;
  }
  /*------------------------------*/
  /*--ここから archive-blog.php--*/
  /*-----------------------------*/
  .blog__archive .archive__tags {
    display: none;
  }

  .blog__archive .archive__box {
    padding-bottom: 20px;
  }
  .blog__archive .archive__wrapper {
    margin-bottom: 0;
  }

  /*---------------------------------*/
  /* ---ここから single-works.php ---*/
  /*--------------------------------*/

  .article__header {
    padding-bottom: 0;
  }

  .article__contents {
    flex-direction: column;
  }

  .article__content {
    line-height: 1.5;
  }

  .single__works--gallery {
    width: 100%;
    margin-bottom: 20px;
  }

  .article__img--thumb img {
    aspect-ratio: 7/5;
    object-fit: cover;
  }

  #js-pagetop {
    right: -30px;
  }

  #js-pagetop img {
    width: 60%;
  }
}