@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
///// 全ページ共通CSS ///////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////// */
/* ==================================================
FONT SETTING
================================================== */
html {
  font-size: 2.97vw;
}
@media screen and (min-width: 769px) {
  html {
    font-size: 2.47vw;
  }
}
@media screen and (min-width: 961px) {
  html {
    font-size: 1.35vw;
  }
}
@media screen and (min-width: 1281px) {
  html {
    font-size: 17px;
  }
}

body {
  /*ゴシック系*/
  font-family: "Space Mono", monospace;
  font-weight: 400;
  /*明朝系
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;*/
  letter-spacing: 0.05em;
  background: #fff;
  line-height: 1.7;
  -ms-font-feature-settings: "normal";
  font-feature-settings: "palt";
  overflow-x: hidden;
}
/* .enSerif {
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
} */
/* .enGothic {
  font-family: urw-din, sans-serif;
  font-weight: 500;
  font-style: normal;
} */
.enGothic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.jpSerif {
  font-family: "游明朝", "Yu Mincho", YuMincho, serif;
  font-weight: 400;
  font-style: normal;
}
.jpSerif.fwBold {
  font-weight: 700;
}
.pagerTxt,
.mbTitle {
  line-height: 0.9;
  letter-spacing: -0.05em;
}
:root {
  --STxt: 1.25vw;
  --MTxt: 1.563vw;
  --LTxt: 2.188vw;
  --StrongTtl: 20.313vw;
}
@media screen and (min-width: 769px) {
  :root {
    --STxt: 0.833vw;
    --MTxt: 1.042vw;
    --LTxt: 1.458vw;
    --StrongTtl: 13.542vw;
  }
}
@media screen and (min-width: 961px) {
  :root {
    --STxt: 0.625vw;
    --MTxt: 0.781vw;
    --LTxt: 1.094vw;
    --StrongTtl: 10.156vw;
  }
}
.STxt {
  font-size: clamp(4px, var(--STxt), 8px);
  line-height: 1.2;
}
.MTxt {
  font-size: clamp(5px, var(--MTxt), 10px);
  line-height: 1.1;
}
.LTxt {
  font-size: clamp(7px, var(--LTxt), 15px);
  line-height: 1;
}
.StrongTtl {
  font-size: var(--StrongTtl);
  line-height: 1;
}
.fwBold {
  font-weight: 600;
}
@media screen and (min-width: 961px) {
  .pcFBig {
    font-size: 120%;
  }
}

/* ==================================================
font line height
================================================== */
.js-setLoad .spinner {
  width: 84vw;
  height: 10vw;
  max-width: 420px;
  max-height: 50px;
}
/* ==================================================
color
================================================== */

:root {
  --mainClr: var(--txt_clr);
}
body {
  color: var(--mainClr);
}
.mainColor {
  color: var(--mainClr);
}
.titColor {
  color: var(--mainClr);
}
.weakColor {
  color: var(--mainClr);
}
.backColor {
  color: var(--mainClr);
}
.attention {
  color: var(--mainClr);
}
/* ==================================================
link
 ================================================== */

a:link {
  color: var(--mainClr);
  text-decoration: underline;
}
a:visited {
  color: var(--mainClr);
  text-decoration: underline;
}
a:active {
  color: var(--mainClr);
  text-decoration: underline;
}
.weakColor a:link {
  color: var(--mainClr);
  text-decoration: underline;
}
.weakColor a:visited {
  color: var(--mainClr);
  text-decoration: underline;
}
.weakColor a:active {
  color: var(--mainClr);
  text-decoration: underline;
}
.backColor a:link {
  color: var(--mainClr);
  text-decoration: underline;
}
.backColor a:visited {
  color: var(--mainClr);
  text-decoration: underline;
}
.backColor a:active {
  color: var(--mainClr);
  text-decoration: underline;
}
.swiper-slide a,
.FMANaviList a,
.mainMenuList a,
.btnCenter a {
  text-decoration: none;
}
.NewsLists .NewsList a {
  text-decoration: none;
}
.NewsLists .NewsList a .NewsLStxtObj {
  text-decoration: underline;
}
/* ==================================================
common
================================================== */
.new::after {
  color: #d83232;
  font-family: "Work Sans", sans-serif;
  padding: 0 0 0 1rem;
}
.stckrCircle {
  background: #d4510f;
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bdrCnts {
  border-bottom: 1px solid #aeaeae;
}

svg {
  fill: var(--mainClr);
}

input {
  -webkit-appearance: none;
}

.scrollArrow span {
  width: 1px;
}

.js-appSlidein {
  transition:
    transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-nowPage {
  position: relative;
}

.js-nowPage::after {
  content: "";
  display: none;
  background: #000;
  width: 70%;
  height: 1px;
  position: absolute;
  bottom: 5px;
  left: 8vw;
}

@media screen and (min-width: 769px) {
  .js-nowPage::after {
    left: 4vw;
  }
}

@media screen and (min-width: 961px) {
  .js-nowPage::after {
    bottom: -5px;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
  }
}

@media screen and (min-width: 1281px) {
  .menuOnline {
    display: none;
  }
}

/* ==================================================
BtnSet
================================================== */
.btnObj {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.6em;
  box-sizing: border-box;
  transition: 0.8s all ease-in;
  line-height: 1;
}

.btnObj svg {
  height: 2em;
  width: 2em;
  margin: 0 10px 0 0;
}

.btnObj a {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

/* ==================================================
js-setLoad
================================================== */

/* ==================================================
header
================================================== */
#hdrSct {
  position: fixed;
  left: 2.5%;
  top: min(2%, 40px);
  width: 95%;
  z-index: 100;
}

#hdrSct .mainMenuLists {
  display: flex;
  align-items: center;
}
#hdrSct .mainMenuLists .mainMenuList {
  cursor: pointer;
  padding: 0 0.5em;
}
#hdrSct .mainMenuLists .mainMenuList.is-active {
  color: var(--selected_txt);
}
#hdrSct .mainMenuLists .mainMenuList:hover {
  background: var(--hover_txtClr);
  color: #fff;
}
#hdrSct .mainMenuLists .mainMenuList + .mainMenuList {
  margin: 0 0 0 4em;
}
#hdrSct .mainMenuLists .mainMenuList.snsBlk {
  margin: 0 0 0 auto;
  padding: 0;
}
#hdrSct .mainMenuLists .mainMenuList.snsBlk .snsSet {
  width: 2.5em;
  height: 100%;
}
#hdrSct .mainMenuLists .mainMenuList.snsBlk .snsSet a {
}
#hdrSct .mainMenuLists .mainMenuList.snsBlk .snsSet svg {
  width: 100%;
  height: 100%;
}

#hdrSct .biography {
  text-align: left;
  margin: 5% auto 0;
  position: absolute;
  width: 99%;
  left: 0;
  right: 0;
}
#hdrSct .biography .ttlObj {
}
#hdrSct .biography .aboutArea {
  margin: 2em 0 0;
}
#hdrSct .biography .aboutArea .a-ttlObj {
  margin: 0 0 1em;
  cursor: pointer;
  display: inline-block;
}
#hdrSct .biography .aboutArea .a-ttlObj::before {
  content: "[-]";
  padding: 0 0.5em 0 0;
}

#hdrSct .biography .aboutArea .aboutBlk {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
#hdrSct .biography .aboutArea .aboutBlk .txtSet {
  width: 100%;
  margin: 0;
}
#hdrSct .biography .aboutArea .aboutBlk .txtSet + .txtSet {
  margin-top: 8%;
  width: 48%;
}
#hdrSct .biography .aboutArea .aboutBlk .txtSet .sttlObj {
}
#hdrSct .biography .aboutArea .aboutBlk .txtSet .txtObj {
}
#hdrSct .biography .aboutArea .aboutBlk .txtSet .txtObj a {
  color: var(--about_txt);
}
#hdrSct .biography .aboutArea .a-ttlObj.is-active {
}
#hdrSct .biography .aboutArea .a-ttlObj.is-active:hover {
  background: var(--about_bg);
  color: var(--about_txt);
}
#hdrSct .biography .aboutArea .a-ttlObj.is-active::before {
  content: "[+]";
}
#hdrSct .biography .aboutArea .aboutBlk.is-hide {
  display: none;
}

@media screen and (max-width: 768px) {
  #hdrSct .biography .aboutArea {
    background: var(--about_bg);
    color: var(--about_txt);
    padding: 0.5em 0.5em;
  }
  #hdrSct .biography .aboutArea.js-toggle {
    background: none;
    color: var(--txt_clr);
  }
}
@media screen and (min-width: 769px) {
  #hdrSct .biography {
  }
  #hdrSct .biography .aboutArea {
    padding: 0;
    position: relative;
    margin: 2em 0 0;
    display: inline-block;
  }
  #hdrSct .biography .aboutArea:hover::before {
    content: "";
    background: var(--about_bg);
    color: var(--about_txt);
    padding: 1em;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: -1em;
    top: -1em;
    /* background: red; */
  }
  #hdrSct .biography .aboutArea:hover {
    color: var(--about_txt);
  }
  #hdrSct .biography .aboutArea .aboutBlk .txtSet .txtObj a {
    color: var(--txt_clr);
  }
  #hdrSct .biography .aboutArea:hover .aboutBlk .txtSet a {
    color: var(--about_txt);
  }
  #hdrSct .biography .aboutArea.js-toggle:hover::before {
    background: none;
  }
  #hdrSct .biography .aboutArea.js-toggle:hover {
    /* color: var(--hover_txtClr); */
  }
  #hdrSct .biography .aboutArea.js-toggle {
    background: none;
    color: var(--txt_clr);
  }
  #hdrSct .biography .aboutArea .aboutBlk .txtSet {
    width: 24%;
  }
  #hdrSct .biography .aboutArea .aboutBlk .txtSet + .txtSet {
    width: 24%;
    margin-top: 0;
  }
}
@media screen and (min-width: 961px) {
  #hdrSct .biography {
    width: 75%;
    margin: 5% auto 0 0;
  }
}
/* ==================================================
footer
================================================== */

#FtrSct {
  background: var(--footer_bg);
}
#FtrSct .ftrCnt {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}
#FtrSct .ftrCnt p {
  color: var(--footer_txt);
}
#FtrSct .ftrCnt .nameObj {
}
#FtrSct .ftrCnt .occName {
}

/* ==================================================
popupArea
================================================== */
body.js-modalOn {
  overflow: hidden;
}
body.js-modalOn::before {
  content: "";
}
.popupWrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100svh;
  z-index: 100;
  opacity: 1;
  margin: 0;
  /* background: rgba(255, 255, 255, 0.8); */
}
.popupWrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--popup_bg);
  opacity: 1;
}

.popupWrap.js-popupOn {
  z-index: 1000000;
  opacity: 1;
  display: block;
  max-width: 600px;
}
.popupBlk {
  position: fixed;
  top: 50%;
  left: 0;
  width: min(90%, 800px);
  max-height: 90svh;
  z-index: 100;
  transform: translate(0, -50%);
  right: 0;
  margin: 0 auto;
  overflow-y: scroll;
  border-top: 1em solid #fff;
  border-bottom: 1em solid #fff;
  padding: 0 1em;
  background: #fff;
}
.popupWrap .popupSet {
  right: 0;
  margin: 0 auto;
  width: 100%;
  /* overflow-y: scroll; */
  height: 100%;
  background: #fff;
  padding: 4em 0;
  text-align: left;
}

.js-btnClose {
  position: fixed;
  top: 8px;
  right: 10px;
  width: 25px;
  height: 25px;
  background: none;
  cursor: pointer;
  left: auto;
  padding-top: 0;
  position: fixed;
}
.js-btnClose::before,
.js-btnClose::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--mainClr);
  left: 0;
  top: 50%;
  transform: rotate(45deg) translate(0, -50%);
}
.js-btnClose::after {
  transform: rotate(-45deg) translate(0, -50%);
}

.popupSet .txtObj {
}
.popupSet .popObj {
  display: block;
}
.popupSet .popObj + .popObj {
  margin: 2.5% auto 0;
}

@media screen and (min-width: 961px) {
  .popupWrap.js-popupOn {
    max-width: 1000px;
  }
  .popupWrap {
  }
  .popupBlk {
    /* padding: 0 0 0 1em; */
  }
  .popupWrap .popupSet {
    margin: 0 auto;
    overflow: auto;
    padding: 0;
  }
  .js-btnClose {
    top: 12px;
    right: 25px;
  }
}