@charset "UTF-8";
/*
Theme Name: op
Theme URI: https://officepartner.synology.me/op
Description: 株式会社オフィスパートナーのコーポレートサイトテーマ
Author: Office Partner Co.,Ltd.
*/
:root {
  /* vw */
  --vw: 1vw;
  /* vh */
  --vh: 1vh;
  /* 色 */
  --base-white: #fefefe;
  --base-lgray: #eeeeee;
  --corporate-red: #d90000;
  --base-black: #292424;
  --base-gray: #9b9191;
  /* 文字間隔 */
  --l-space-00: normal;
  --l-space-50: 0.05em;
  --l-space-100: 0.1em;
  --l-space-200: 0.2em;
  /* px rem*/
  --px-4: 0.25rem;
  --px-8: 0.5rem;
  --px-12: 0.75rem;
  --px-14: 0.875rem;
  --px-16: 1rem;
  --px-18: 1.125rem;
  --px-24: 1.5rem;
  --px-32: 2rem;
  --px-40: 2.5rem;
  --px-48: 3rem;
  --px-56: 3.5rem;
  --px-64: 4rem;
  --px-72: 4.5rem;
  --px-80: 5rem;
  --px-120: 7.5rem;
  --px-160: 10rem;
}
html,
body {
  background-color: #fefefe;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #292424;
  font-family: "overpass-variable", "ryo-gothic-plusn", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  letter-spacing: 0.05em;
  margin: 0;
  min-height: 100vh;
  min-height: calc(var(--vh) * 100);
  height: calc(var(--vh) * 100);
  padding: 0;
  width: calc(var(--vw) * 100);
  line-break: strict; /* 禁則処理を厳格に適用 */
}
body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html {
  visibility: hidden;
}
html.wf-active,
html.wfno-load {
  visibility: visible;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
@media screen and (width >= 1025px) {
  .home main {
    width: calc(100vw - 94px);
  }
}
h1,
h2,
h3,
h4,
h5 {
  margin-block-start: 0;
  margin-block-end: 0;
}
ul {
  list-style: none;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  padding: 0;
}

li {
  list-style: none;
  /* text-indent: -1em;
	padding-left: 1em; */
}

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

/* anchor */
a {
  color: var(--base-black);
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

a:visited {
  text-decoration: none;
}
/* コンテンツ幅まわり */
.breaking__padding {
  padding-inline: calc(50dvw - 50%);
}
/* display指定 */
.flex__row {
  display: flex;
}
.flex__column {
  display: flex;
  flex-direction: column;
}
.width__100 {
  width: 100% !important;
}
/* ルビまわり */
rt {
  font-size: 0.2em;
}
@media screen and (max-width: 768px) {
  rt {
    font-size: 0.15em;
  }
}

/* ------------------------------ */
/* -------- テキスト 関連 -------- *
/* ------------------------------ */
/* 文字間隔調整 */
/* default setting : 0.05em */
.l-sp--200 {
  letter-spacing: var(--l-space-200);
}
.l-sp--100 {
  letter-spacing: var(--l-space-100);
}
.l-sp--50 {
  letter-spacing: var(--l-space-50);
}
.l-sp--00 {
  letter-spacing: var(--l-space-00);
}
/* フォント 種類 */
.font__en {
  font-family: "overpass-variable", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.1em;
}
.font__ita {
  font-style: italic;
}
/* フォント 色まわり */
/* default setting : #292424--base-black*/
.font__c--w {
  color: var(--base-white);
}
.font__c--red {
  color: var(--corporate-red);
}
.font__c--gray {
  color: var(--base-gray);
}
.font__hl--96 {
  /* max 96px min 56px */
  font-size: clamp(56px, 45.8058px + 2.7184vw, 98px);
}
.font__headline--42 {
  /* max 42px min 26px */
  font-size: clamp(1.625rem, calc(var(--vw) * 2) + 1rem, 2.625rem);
  font-weight: 500;
}
.font__headline--30 {
  /* max 30px min 22px */
  font-size: clamp(1.375rem, calc(var(--vw) * 1.5) + 1rem, 1.875rem);
  font-weight: 600;
}
.font__headline--24 {
  /* max 24px min 20px */
  font-size: clamp(1.25rem, calc(var(--vw) * 1) + 0.75rem, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--l-space-50);
}
.font__headline--20 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: var(--l-space-50);
}
.font__sub-headline--14 {
  /* max 14px min 11px */
  font-size: clamp(0.688rem, calc(var(--vw) * 1) + 0.25rem, 0.875rem);
  font-weight: 500;
  letter-spacing: var(--l-space-50);
}
.font__text--26 {
  font-size: clamp(1.375rem, 1.325rem + 0.25vw, 1.625rem);
}
.font__text--20 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: var(--l-space-50);
}
.font__text--18 {
  /* max 18px min 16px */
  font-size: clamp(1rem, calc(var(--vw) * 1) + 0.5rem, 1.125rem);
}
.font__text--16 {
  /* max 16px min 12px */
  font-size: clamp(0.75rem, calc(var(--vw) * 1) + 0.5rem, 1rem);
}
.font__text--14 {
  /* max 14px min 12px */
  font-size: clamp(0.75rem, calc(var(--vw) * 1) + 0.25rem, 0.875rem);
}
.font__text--12 {
  font-size: 0.75rem;
}
.font__text--11 {
  font-size: 0.6875rem;
}
.font__caption {
  /* max 12px min 9px */
  font-size: clamp(0.688rem, calc(var(--vw) * 1) + 0.25rem, 0.875rem);
}

/* フォント 太さ */
.font__w--500 {
  font-weight: 500;
}
.font__W--600 {
  font-weight: 600;
}
.font__w--700 {
  font-weight: 700;
}
/* テキストまわり */
.span__nowrap {
  white-space: nowrap;
}
/* 準備中 */
/* .company__box.on_prepare {
  position: relative;
}
.on_prepare::before {
  content: "準 備 中";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(4px);
  z-index: 3;
} */
/* ----------------------------------- */
/* ---------- ローディング画面 --------- */
/* ----------------------------------- */
/* ローディング背景画面設定　*/
.loading {
  background-color: #fefefe;
  height: calc(var(--vh) * 100);
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  transition: all 1s;
  visibility: visible;
  width: calc(var(--vw) * 100);
  z-index: 100000;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
}
.loading-animation {
  align-items: center;
  display: flex;
  height: calc(var(--vh) * 100);
  justify-content: center;
  opacity: 0;
  transition: all 1s;
  visibility: hidden;
  width: calc(var(--vw) * 100);
  z-index: 100000;
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}
.loading__animation img {
  width: 260px;
}

/* ------------------------------ */
/* ---------- 共通パーツ --------- */
/* ------------------------------ */
.bg__lgray {
  background-color: var(--base-lgray);
}
.br-sp {
  display: none;
}
@media screen and (max-width: 430px) {
  .br-sp {
    display: block;
  }
}
/* scrolldown */
.js-scrolldown {
  position: fixed;
  z-index: 9999;
  transform: translateY(-50%);
  top: 50%;
  bottom: initial !important;
}
.header__container.panelactive .js-scrolldown {
  display: none !important;
}
.scrolldown {
  display: flex;
  align-items: center;
  padding: 0.875rem;
  transform: rotate(90deg) translateX(-24px);
}
.scrolldown .line {
  width: var(--px-40);
  margin-right: 8px;
  transform-origin: center;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
.scrolldown .line::before {
  content: "";
  position: absolute;
  width: var(--px-40);
  height: 0.75px;
  background-color: var(--base-lgray);
  border-radius: 0.75px;
  animation: scrolldown 2s ease-in-out infinite;
}
@keyframes scrolldown {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* view more リンク */
.morebtn {
  align-self: center;
  border-top: 0.5px solid var(--base-gray);
  border-bottom: 0.5px solid var(--base-gray);
  padding: 7.2px 0;
  transition: 0.3s;
  overflow: hidden;
}
.morebtn__arrow {
  background-color: var(--corporate-red);
  content: "";
  display: inline-block;
  height: 0.75px;
  margin-left: var(--px-8);
  position: relative;
  vertical-align: middle;
  width: var(--px-16);
}
.morebtn__arrow::before {
  display: none;
  content: "";
  background-color: var(--corporate-red);
  height: 0.75px;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: right bottom;
  transform: rotate(33deg);
  width: var(--px-8);
}
/* PCデバイス用の「:hover」用のスタイル */
@media (any-hover: hover) {
  .morebtn:hover .morebtn__arrow {
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    width: var(--px-40);
  }
  .morebtn:hover .morebtn__arrow::before {
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    display: inline-block;
  }
}
/* タッチデバイス用 */
.touchstart .morebtn .morebtn__arrow {
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  width: var(--px-40);
}
.touchstart .morebtn .morebtn__arrow::before {
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  display: inline-block;
}

/* 円形リンクボタン */
.link__circle--width {
  border: 0.5px solid var(--base-gray);
  border-radius: 50%; /* ←円 */
  width: var(--px-56);
  position: relative;
  transition: all 0.3s;
}
.link__circle--height {
  position: relative; /* 内包する要素の基準にする */
  padding-top: 100%;
  height: 0; /*要素自体の高さがあるとずれるので高さを０にする */
  display: block;
}
.arrow-area {
  position: absolute;
  bottom: 25%;
  left: 15%;
  transition: 0.3s ease-in-out;
}
.arrow-area .link__arrow {
  background-color: var(--base-gray);
  display: inline-block;
  height: 0.75px;
  margin-left: var(--px-12);
  position: relative;
  vertical-align: middle;
  width: var(--px-16);
  transition: 0.3s ease-in-out;
}
.arrow-area .link__arrow:before {
  background-color: var(--base-gray);
  content: "";
  display: block;
  height: 0.75px;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: right bottom;
  transform: rotate(33deg);
  width: 6.4px;
  transition: 0.3s ease-in-out;
}
/* PCデバイス用の「:hover」用のスタイル */
@media (any-hover: hover) {
  .link__circle--width:hover {
    border: 0.5px solid var(--corporate-red);
    transition: 0.3s ease-in-out;
  }
  .link__circle--width:hover .arrow-area {
    left: 32%;
    transition: 0.3s ease-in-out;
  }
  .link__circle--width:hover .arrow-area .link__arrow,
  .link__circle--width:hover .arrow-area .link__arrow:before {
    background-color: var(--corporate-red);
    transition: 0.3s ease-in-out;
  }
}
/* タッチデバイス用 */
.link__circle--width.touchstart {
  border: 0.5px solid var(--corporate-red);
  transition: 0.3s ease-in-out;
}
.link__circle--width.touchstart .arrow-area {
  left: 32%;
  transition: 0.3s ease-in-out;
}
.link__circle--width.touchstart .arrow-area .link__arrow,
.link__circle--width.touchstart .arrow-area .link__arrow:before {
  background-color: var(--corporate-red);
  transition: 0.3s ease-in-out;
}
/* ------------------------------- */
/* ---------- footer.php --------- */
/* ------------------------------- */
/*footerまでスクロールしたら消す*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}
.ft__wrapper {
  background-color: var(--base-black);
  color: var(--base-white);
  padding: var(--px-80) 10% var(--px-120);
}
.ft__wrapper a {
  color: var(--base-white);
}
.ft__container {
  display: flex;
  justify-content: space-between;
}
.ft__container img {
  max-width: 25rem;
}
.ft__container--upper {
  display: flex;
  justify-content: center;
  height: 15rem;
  position: relative;
}
.scroll__toTop {
  align-items: center;
  display: flex;
  padding: 0.875rem;
  position: absolute;
  top: 16%;
  transform-origin: center;
  transform: rotate(90deg);
}
.line {
  background-color: var(--base-white);
  height: 1px;
  width: var(--px-80);
}
#footer .line {
  background-color: transparent;
}
#footer .line::before {
  content: "";
  position: absolute;
  width: var(--px-80);
  height: 1px;
  background-color: var(--base-white);
}
.scroll__toTop span {
  display: inline-block;
  padding-left: var(--px-16);
}
.ft__box {
  margin-top: 24px;
  width: 45%;
}
.ft__innerbox.ft__info--os {
  min-width: 50%;
}
.ft__corporate--name {
  margin-bottom: var(--px-40);
}
.ft__innerbox.ft__info--tamuya .ft__corporate--name,
.ft__innerbox.ft__info--os .ft__corporate--name {
  margin-bottom: var(--px-16);
}
.ft__cprporate--tel {
  display: flex;
}
.ft__corporate--info .tel {
  margin-right: 16px;
}
.ft__innerbox.ft__info--op {
  margin-bottom: 80px;
}
.ft__innerbox.ft__info--os {
  margin-right: 56px;
}
.ft__address a img {
  vertical-align: text-bottom;
}
.ft__address span {
  display: block;
}
#footer .number {
  color: var(--base-white);
  font-weight: 400;
}
#footer .link__arrow {
  margin-top: 8px;
}
.link__arrow span {
  background-color: var(--base-white);
  border-radius: 0.75px;
  display: inline-block;
  height: 0.75px;
  margin-left: 6px;
  margin-top: 4.8px;
  position: relative;
  transform-origin: left bottom;
  transform: rotate(-45deg);
  transition: all 0.2s ease-in-out;
  vertical-align: middle;
  width: var(--px-12);
}
.link__arrow span::before,
.link__arrow span::after {
  content: "";
  display: block;
  width: var(--px-8);
  height: 0.75px;
  border-radius: 0.75px;
  background-color: var(--base-white);
  position: absolute;
  right: -0.1rem;
}
.link__arrow span::before {
  top: -2.75px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.link__arrow span::after {
  top: 2.75px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/*PCの「:hover」用のスタイル */
@media (any-hover: hover) {
  .link__arrow:hover span {
    margin-left: var(--px-8);
    margin-top: 0.1rem;
  }
  .detail__link:hover .link__arrow span {
    margin-left: var(--px-8);
    margin-top: 0.1rem;
  }
}
.link__arrow.touchstart span {
  margin-left: var(--px-8);
  margin-top: 0.1rem;
}

/* --------------- その他 --------------- */
.works__latest--box figure,
.works__thumbnail figure {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  overflow: hidden;
}
.works__latest--box figure img,
.works__thumbnail figure img {
  transition: all 0.3s;
}
.works__latest--box figure:hover img,
.works__latest--box figure:active img {
  transform: scale(1.2);
  transition: all 0.5s;
}
.works__thumbnail figure img {
  width: auto;
  transition: all 0.3s;
}
.works__thumbnail figure:hover img,
.works__thumbnail figure:active img {
  transform: translate(-50%);
  transition: all 2s;
}
.news__list a.news__item {
  display: block;
}
.news__list a.news__item li.news__content {
  display: flex;
  padding: 24px 16px 24px 0;
  border-bottom: 0.75px solid var(--base-lgray);
  position: relative;
}
.news__list .news__tag {
  min-width: 64px;
}
.news__list .news__tag span {
  padding: 6px 12px 4px;
  background: var(--base-lgray);
  display: flex;
  border-radius: 4px;
  align-items: center;
  width: fit-content;
  height: fit-content;
}
.news__list .news__date {
  margin: 0 24px 0 16px;
  line-height: 2.25;
}

a.news__item li.news__content::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  transition: all 0.3s;
  width: 0;
  height: 0.75px;
  background-color: var(--corporate-red);
}
a.news__item:hover {
  opacity: unset;
}
a.news__item:hover li.news__content::after {
  transition: all 0.3s;
  width: 100%;
}
/* ---------------------------------------------- */
/* ---------- 404.php, content-none.php --------- */
/* ---------------------------------------------- */

#content-none_content {
  padding: 160px 0px 80px calc((var(--vw) * 100 - 1600px) / 2);
  max-width: 1600px;
}
@media screen and (width <= 1920px) {
  #content-none_content {
    padding: 160px 9.6% 80px;
  }
}
#content-none_content .morebtn {
  width: fit-content;
  margin: var(--px-40) 0;
}
#content-none_content a.btn__back {
  align-items: center;
  display: inline-flex;
}
/* --------------------------------------- */
/* ------------ メディアクエリ ------------ */
/* --------------------------------------- */

/* ---- min ---- */
@media screen and (width > 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
@media screen and (width > 1024px) {
  .home footer {
    width: calc(100vw - 94px);
  }
}
/* ---- max ---- */
@media screen and (max-width: 1440px) {
  .ft__wrapper {
    padding: var(--px-64) 5.6%;
  }
  .ft__box {
    width: 48%;
  }
  .ft__innerbox.ft__info--os {
    margin-right: var(--px-32);
  }
}
@media screen and (max-width: 1180px) {
  .ft__container {
    flex-direction: column;
  }
  .ft__wrapper {
    padding: var(--px-64) 10%;
  }
  .ft__box {
    padding-left: 2%;
    width: auto;
  }
}
@media screen and (max-width: 1024px) {
  .ft__container {
    flex-direction: column;
  }
  .ft__box {
    width: auto;
  }
  /* scrolldown */
  .js-scrolldown {
    top: initial;
    left: 50%;
    bottom: 0 !important;
    transform: translateY(0) translateX(-50%);
  }
  .scrolldown {
    align-items: center;
    transform: rotateZ(90deg) translate(-32px, -10px);
  }
  .scrolldown .line {
    transform-origin: center;
    transform: unset;
  }
}
@media screen and (max-width: 768px) {
  .news__list a.news__item li.news__content {
    flex-direction: column;
  }
  .news__content .news__title {
    margin: 16px 0 0 8px;
  }
  .ft__box .flex__row {
    flex-direction: column;
  }
  .ft__innerbox.ft__info--os {
    margin-bottom: var(--px-48);
    margin-right: 0;
  }
}
@media screen and (max-width: 500px) {
  .font__text--16 {
    font-size: var(--px-14);
  }
  .ft__corporate--name {
    margin-bottom: var(--px-16);
  }
  .ft__innerbox.ft__info--tamuya .ft__corporate--name,
  .ft__innerbox.ft__info--os .ft__corporate--name {
    margin-bottom: var(--px-8);
  }
  .ft__cprporate--tel {
    flex-direction: column;
  }
  .ft__container img {
    width: 96%;
    max-width: 96dvw;
  }
  .ft__corporate--info {
    font-size: var(--px-14);
  }
}