@charset "UTF-8";

/* style.cssの修正目的で、上書き用のclassオプションを記載する。
*/

/* スタッフ紹介ページ内、ULリストのインライン化 */
#AboutUsStaffIndex .list li a {
  display: inline;
}

/* ラジオボタンの縦並びレイアウト用 */
.checkbox, .radio-box {
  display: flex;
  align-items: center;
}
.radio-box {
  margin-right: 5px;
}
div.radio-box {
  margin-right: 15px;
}
/* 縦並びにしたいラジオボタンのフィールドのid（例：#FieldMessageSex）を以下のように指定する */
/*
#FieldMessageSex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: initial;
  -ms-flex-align: initial;
  align-items: initial;
}
*/

/* プロフィール画像のトップマージンおよびサイズの調整 */
.profile-img {
  margin-top: calc(1.6em * 3);
}
@media only screen and (max-width: 499px) {
  .profile-img {
    margin-top: 0;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
}

/*** 202403 追加、変更内容 *******/

/* 記事および固定ページ内、width設定用 */
.w1k {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (max-width: 999px) {
  .w1k {
    max-width: calc(100vw - 40px);
  }
}

.w900 {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (max-width: 899px) {
  .w900 {
    max-width: calc(100vw - 40px);
  }
}

.w800 {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (max-width: 799px) {
  .w800 {
    max-width: calc(100vw - 40px);
  }
}

.w700 {
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (max-width: 699px) {
  .w700 {
    max-width: calc(100vw - 40px);
  }
}

@media only screen and (max-width: 499px) {
  .w1k,
  .w900,
  .w800,
  .w700 {
    max-width: calc(100vw - 30px);
  }
}

/* フローティングバナー用 */
.floating-banner {
  position: fixed;
  bottom: unset;
  right: 20px;
  top: 210px;
  -webkit-transition: 0.3s 0s;
  transition: 0.3s 0s;
  opacity: 0;
}
@media only screen and (max-width: 999px) {
  .floating-banner {
    top: 106px !important;
  }
  .floatingImg {
    height: 150px !important;
  }
}
@media only screen and (max-width: 787px) {
  .floating-banner {
    top: 96px !important;
    right: -70px;
  }
}
@media only screen and (max-width: 499px) {
  .floating-banner {
    top: 86px !important;
  }
}
.floating-banner.visible {
  opacity: 1;
  -webkit-transition: 0.3s 0s;
  transition: 0.3s 0s;
  z-index: 9;
}
.floatingImg {
  height: 180px;
  width: auto !important;
  transition: filter .3s ease;
}
a:hover .floatingImg {
  filter: brightness(1.05);
  opacity: 1 !important;
}
body {
  scroll-padding-top: 150px;
}

@media only screen and (max-width: 999px) {
  .nav-menu__box {
    overscroll-behavior-y: contain;
    overflow-y: auto;
  }
}

/* メディアクエリに対応した強制改行用クラス */
.br-sp {
  display: none;
}
@media only screen and (max-width: 999px) {
  .br-tablet {
    display: block;
  }
}
@media only screen and (max-width: 787px) {
  .br-tablet {
    display: block;
  }
}
@media only screen and (max-width: 499px) {
  .br-sp {
    display: block;
  }
}

/* トップスライダー画像のローディング設定 */
.mainVisual {
  position: relative;
}
.is-hide {
  display: none;
}
.fadeout-bg {
  transition-property: opacity;
  transition-delay: .3s;
  transition-duration: .5s;
  opacity: 0;
  pointer-events: none;
}
.fadeout-loader {
  transition-property: opacity;
  transition-delay: .3s;
  transition-duration: .3s;
  opacity: 0;
  pointer-events: none;
}
#loader-bg {
  background: #fff;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}
#loader {
  height: 200px;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  position: absolute;
  top: 50%;
  width: 200px;
}
#loader img {
  width: 200px;
}

/*** 20240430 追加、変更内容 *******/

/* 画像横並びレイアウト時のトップマージン調整 */
@media only screen and (min-width: 500px) {
  .boxInner p:first-child {
    margin-top: 0;
  }
}

.preContents {
  overflow-x: scroll;
}
.preContents code {
  white-space: unset;
}

.logo-color {
  -webkit-mask: url("/files/theme_configs/logo.png") no-repeat center center / cover;
  mask-image: url("/files/theme_configs/logo.png");
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  height: 76px;
  aspect-ratio: 200 / 76;
  vertical-align: bottom;
}
@media only screen and (min-width: 788px) and (max-width: 999px) {
  .logo-color {
    max-height: 66px;
  }
}
@media only screen and (min-width: 500px) and (max-width: 787px) {
  .logo-color {
    max-height: 56px;
  }
}
@media only screen and (max-width: 499px) {
  .logo-color {
    max-height: 44px;
  }
}

/*** 20250113 追加、変更内容 *******/
 
#post-detail a[href^="http"]:not(.dis-exlink)::after,
#post-detail a[href^="//"]:not(.dis-exlink)::after,
#post-detail a.exlink::after,
.main-content a[href^="http"]:not(.dis-exlink)::after,
.main-content a[href^="//"]:not(.dis-exlink)::after,
.main-content a.exlink::after {
  margin: 0 3px;
  font-family: "Font Awesome 6 Free";
  content: '\f08e';
  font-weight: 900;
}

#post-detail a[href^="https://urushitech.gussan-beedan.work/"]:not(.dis-exlink)::after,
.main-content a[href^="https://urushitech.gussan-beedan.work/"]:not(.dis-exlink)::after {
  margin: inherit;
  font-family: inherit;
  content: '';
  font-weight: inherit;
}