@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --Col-Navy:#002142;
  --Col-InNavy:#053152;
  --Col-InYellow:#faeeb0;
  --Col-InBlue:#2f83bb;
  --White:#FFF;
  --Red:#9b0000;
  --Gray:#dcd4c3;
  --Navy:#00437a;
  --btnNavy:#00406f;
  --h2BgColor:linear-gradient(90deg, #d5d5d5, #f6f6f6 50%, #d5d5d5);
  --btnYellowBorder:#f5da78;
  --btnYellowBg:linear-gradient(90deg, #a06e00, #d3a116);
  --btnYellow2Border:#f4c57a;
  --btnYellow2Bg:#fff5e0;
  --bgRB:#5faadc;
  --contTitleBg:radial-gradient(#2f83bb, #053152);
  --inDoc:#f1eee7;
  --inDocExBg:#f0e0e0;
  --inDocGdBg:#f2eedd;
  --inDocRgBg:#d9e8f4;
  --inDocJrBg:#cdeaef;
  --inDocCaBg:#ddedbb;
  --size18:min(3.0vw,18px);
  --size20:min(3.5vw,20px);
  --size22:min(3.8vw,22px);
  --size24:min(4.1vw,24px);
  --size26:min(4.2vw,26px);
  --size28:min(4.8vw,28px);
  --size30:min(4.9vw,30px);
  --size34:min(5.2vw,34px);
  --size40:min(6vw,40px);
  --size100:min(18vw,100px);
  --size130:min(20vw,130px);
  --size150:min(24vw,150px);
  --size500:min(60vw,500px);
}
html { scroll-behavior: smooth }
aside { background-color: var(--Col-Navy); padding: 0 }
aside.pcLeft { background-position: left bottom }
aside.pcLeft a.draLogo { width: min(10vw,100px) }
aside.pcLeft a.cLogo > img { width:min(90%,170px) }
aside.pcNavi { background-position: right bottom; display: block; overflow-y: scroll }
aside.pcNavi::-webkit-scrollbar { display: none }
main {
  overflow: hidden;
  background-color: var(--Col-InNavy);
  font-size: var(--size24);
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  position: relative
}
section { position: relative; box-sizing: border-box; padding: min(4vw,100px) min(4vw,100px) }
a[name] { margin-top: -33px; padding-top: 33px }
.full-image > img { display: inline-block; margin-left: auto; margin-right: auto }
.textRe,.textBoRe { color: var(--Red) }
.textRed { color: #F00 }
ul.textKome li:before { color: var(--Red); font-weight: normal!important }
main details { margin-bottom: 0 }
main details > summary {
  display: block;
  align-items: center;
  width: auto;
  max-width: 100%;
  background-color: transparent;
  border-bottom: none;
  color: initial;
  margin: 0;
  padding: min(2vw, 7px) min(3vw, 20px);
  min-height: initial;
  box-sizing: border-box;
}

/*ボタン*/
a.btn { border-radius: 50px; display: inline-block; color: var(--White); box-sizing: border-box; text-decoration: none; font-weight: 700; text-align: center }
a.btnR { background-color: var(--Red); border: var(--Gray) solid 2px }
a.btnN { background-color: var(--btnNavy); border: var(--Gray) solid 2px }
a.btnW { background-color: var(--White); border: var(--Gray) solid 2px; color: var(--Navy) }
a.btnCat { border-radius: 20px; color: var(--White); font-weight: 700; display: flex; align-items: center; justify-content: center; padding:min(5vw,2rem) 0; text-decoration: none; margin-bottom: 1rem; position: relative }
a.btnCat::after { font-family: 'Material Symbols Outlined'; content: '\f591'; font-size: min(6vw,32px); position: absolute; right: 1rem }
a.btnCat > span { text-align: center; font-size: min(5vw,32px); line-height: 1.3 }
a.btnCat > span > span { font-size: var(--size24); display: block; margin-top: 10px }
a.btnSquare {
  border: var(--btnYellowBorder) 6px solid;
  background-image: var(--btnYellowBg);
  color: var(--White);
  font-weight: 700;
  display: block;
  text-align: center;
  font-size: min(4.45vw,32px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size130);
  line-height: 1.2;
  text-decoration: none
}

/* TITLE */
h1 { font-family: "wanpaku-ruika", sans-serif; font-weight: 100; font-size: min(5.2vw,30px); text-align: center; color: var(--Navy); margin-bottom: min(4vw,1em) }
h2 { font-family: "wanpaku-ruika", sans-serif; font-weight: 100; font-size: var(--size28); text-align: center; color: var(--Navy); margin-bottom: min(4vw,1em) }
section#topCategoryWrap h2,
section#topHowtoWrap h2,
section#topUniformWrap h2,
section#topBenefitsWrap h2 { background-image: var(--h2BgColor); display: inline-block; width: 245px }
.contTitle { background-image: var(--contTitleBg); padding: 1rem 0; text-align: center }
.contTitle h1 { background-image: var(--h2BgColor); display: inline-block; width: min(80vw,420px) }

/* CONTENTS */
.inner { box-sizing: border-box }
img[src*="Title.webp"] { width:auto; max-width: 100%; height: min(15vw,122px) }
img[src*="svg"] { display: block }
.c180 { transform: rotate(180deg) }
.bgY { background-color: var(--Col-InYellow); padding:min(2vw,50px) min(2vw,50px) }
.bgB { background-color: var(--Col-InBlue); color: var(--White) }
.bgN { background-color: var(--Col-InNavy); color: var(--White) }
.bgRB { background-color: var(--bgRB); color: var(--White) }
.grid { display: grid; gap: 1rem }
.grid2 { grid-template-columns: repeat(2, 1fr) }
.grid.center > * { place-content: center; place-items:center }

/* スライダーエリア */
section#sliderWrap { margin-bottom: 0 }
section#sliderWrap .slick-prev:before,
section#sliderWrap .slick-next:before { color:var(--White); font-size:30px }
section#sliderWrap .slick-dots li.slick-active button:before { background-color:var(--Col-Navy); opacity: 1; content:"" }
section#sliderWrap .slick-dots li button:before { background-color: var(--White); content:""; opacity: 1 }
section#sliderWrap .movieWrap { width: 100%; max-width: 960px }

/* ページ内リンク */
section#btnNavi { background: url(../image/2027/join/btnNaviBg.webp); background-size: cover; padding: 5dvw min(2vw,50px) 8dvw }
section#btnNavi .inner { display: flex; justify-content: center; gap: min(2vw,20px) }
section#btnNavi .inner img { width: auto; max-width: 100% }
/* 会員種別 */
/* 入会方法 */
section#topHowtoWrap ul.textKome li:before { color: var(--White) }
/* FCユニホーム */
.slash { display: flex; justify-content: center; align-items: flex-end; line-height: 1; color: var(--White) }
.slash::before,.slash::after { width: 2px; height: var(--size24); content: ""; background-color: var(--White) }
.slash::before { margin-right: 0.5em; transform: rotate(-40deg) }
.slash::after { margin-left: 0.5em; transform: rotate(40deg) }
/* 特典一覧 */
/*========================
about-benefit
========================*/
#benefit .inCont { background-color: var(--White); padding: 1rem; color: initial; margin-bottom: 1rem }
#benefit .inCont .itemTitle { font-size: var(--size30); font-weight: 700 }
#benefit .inCont .itemTitle > i { font-size: var(--size40); font-family: "wanpaku-ruika", sans-serif; font-weight: 100; font-style: normal; color: var(--Navy); padding-right: .3rem }
#benefit .inCont .itemTitle > div span { font-size: var(--size20); background-color: var(--Col-InBlue); padding: .2rem .5rem; color: var(--White); white-space: nowrap }
#benefit .inCont > p { color: var(--btnNavy); font-weight: 700 }
#benefit .inDoc { background-color: var(--inDoc); padding: .4rem }


/*========================
about-contents
========================*/
/*------------ 共通 ------------*/
/* ページ切り替えタブ */
ul.tabList { display: flex; font-weight: 700 }
ul.tabList li { flex-grow: 1; font-size:min(3vw,18px); line-height: 3; color: #FFF; text-align: center; opacity: 0.4 }
ul.tabList li a { color: #FFF }
ul.tabList li.ex { background-color: var(--fcex-color) }
ul.tabList li.gd { background-color: var(--fcgd-color) }
ul.tabList li.rg { background-color: var(--fcrg-color) }
ul.tabList li.jr { background-color: var(--fcjr-color) }
ul.tabList li.ca { background-color: var(--fcca-color) }
/* 新規＆継続タブ */
input[name="tab_item"] { display: none }/*ラジオボタンを全て消す*/
label.tab_item {
	width: calc(100%/2);
	color: #FFF;
	padding:min(1vw,0.5rem) 0;
	font-size:var(--size28);
	line-height: 1.2;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	opacity: 0.4;
	border-radius: min(2vw,20px) min(2vw,20px) 0 0
}
/*タブ切り替え全体のスタイル*/
#newCont,
#keizokuCont { display:none }
/*タブ切り替えの中身のスタイル*/
.tab_content { display: none;clear: both;overflow: hidden }
/*選択されているタブのコンテンツのみを表示*/
#new:checked ~ #newCont,
#keizoku:checked ~ #keizokuCont { display:block }
/*選択されているタブのスタイルを変える*/
#new:checked ~ .flexBox label[for="new"],
#keizoku:checked ~ .flexBox label[for="keizoku"] { opacity: 1 }
.tabsIn { background-color: #FFF; border-radius: 0 0 min(2vw,20px) min(2vw,20px); border-top-style: solid; border-top-width: min(0.2vw,2px); padding: min(2.2vw,1rem) }
/* member共通 */
main[id^="member"] .inCont,
main[id^="join"] .inCont { border-width:2px; border-style: solid; padding: min(2.2vw,1rem); background-color: var(--White); color: #000 }
main[id^="member"] .inDoc { background-color: var(--inDoc); border-radius: 20px; padding: 1rem; font-size: var(--size26) }
main[id^="member"] .inDoc dt { background-color: var(--Navy); color: var(--White); font-size: var(--size22); font-weight: 700; white-space: nowrap; width: var(--size100); text-align: center }
main[id^="member"] .inDoc dd { width: 78%; padding-left: min(2.2vw,1rem); box-sizing: border-box; line-height: 1.4; margin-bottom: 1.2rem }
main[id^="member"] h2,
main[id^="join"] h2 { border-bottom-width: 2px; border-bottom-style: solid; padding-bottom: 0.5rem; font-size: var(--size28); font-family: "Noto Sans JP", sans-serif; font-weight: 700 }
main[id^="member"] h3 { padding: 0.5rem; font-size: var(--size26); font-weight: 700; text-align: center; padding: 0.2rem; margin-bottom: 1rem }
main[id^="member"] .bgB h3 { background-color: var(--Navy); color: var(--White) }
main[id^="member"] .flexBox .square { color: var(--White); font-size: var(--size22); font-weight: 700; white-space: nowrap; width: var(--size150); text-align: center; margin-right: 0.5rem }
main[id^="member"] .flexBox > div { width: 67% }
main[id^="member"] .or { text-align: center }
main[id^="member"] .or::after { font-size: var(--size26); border-style: dashed; border-width: 2px; display: inline-block; content: "OR"; font-weight: 700; border-radius: 20px; width: 80px; line-height: 1.2 }
main[id^="member"] .bgB a.btnSquare { background-image: none; background-color: var(--btnYellow2Bg); border-color: var(--btnYellow2Border); color: var(--Navy); font-size: var(--size26); height: var(--size100) }
/*スライダー*/
main[id^="member"] #sliderWrap { width:min(80vw,550px); margin: auto }
main[id^="member"] .slider { height: 310px }
main[id^="member"] .slick-prev:before, .slick-next:before,
main[id^="member"] .slick-dots li.slick-active button:before { color: var(--Col-Navy) }
main[id^="member"] .slick-dots li.slick-active button:before { background-color:var(--Col-Navy); opacity: 1; content:"" }
main[id^="member"] .slick-dots li button:before { background-color: var(--inDoc); content:""; opacity: 1 }
main[id^="member"] .slick-prev, .slick-next { top: 50% }
main[id^="member"] #sliderWrap img { max-width: 300px }
/* member：エグゼクティブ */
main[id$="Ex"] h2 { border-bottom-color: var(--fcex-color); color: var(--fcex-color) }
#benefit h3.ex,
main#memberEx .block h3 { background-color:var(--inDocExBg); color: var(--fcex-color) }
main#memberEx .flexBox .square { background-color: var(--fcex-color) }
main#memberEx .or::after { border-color: var(--fcex-color); color: var(--fcex-color) }
main[id$="Ex"] ul.tabList li.ex { opacity: 1 }
main[id$="Ex"] .inCont { border-color: var(--fcex-color) }
main[id$="Ex"] label.tab_item { background-color: var(--fcex-color) }
/* member：ゴールド */
main[id$="Gd"] h2 { border-bottom-color: var(--fcgd-color); color: var(--fcgd-color) }
#benefit h3.gd,
main#memberGd .block h3 { background-color:var(--inDocGdBg); color: var(--fcgd-color) }
main#memberGd .flexBox .square { background-color: var(--fcgd-color) }
main#memberGd .or::after { border-color: var(--fcgd-color); color: var(--fcgd-color) }
main[id$="Gd"] ul.tabList li.gd { opacity: 1 }
main[id$="Gd"] .inCont { border-color: var(--fcgd-color) }
main[id$="Gd"] label.tab_item { background-color: var(--fcgd-color) }
/* member：レギュラー */
main[id$="Rg"] h2 { border-bottom-color: var(--fcrg-color); color: var(--fcrg-color) }
#benefit h3.rg,
main#memberRg .block h3 { background-color:var(--inDocRgBg); color: var(--fcrg-color) }
main#memberRg .flexBox .square { background-color: var(--fcrg-color) }
main#memberRg .or::after { border-color: var(--fcrg-color); color: var(--fcrg-color) }
main[id$="Rg"] ul.tabList li.rg { opacity: 1 }
main[id$="Rg"] .inCont { border-color: var(--fcrg-color) }
main[id$="Rg"] label.tab_item { background-color: var(--fcrg-color) }
/* member：ジュニア */
main[id$="Jr"] h2 { border-bottom-color: var(--fcjr-color); color: var(--fcjr-color) }
#benefit h3.jr,
main#memberJr .block h3 { background-color:var(--inDocJrBg); color: var(--fcjr-color) }
main#memberJr .flexBox .square { background-color: var(--fcjr-color) }
main#memberJr .or::after { border-color: var(--fcjr-color); color: var(--fcjr-color) }
main[id$="Jr"] ul.tabList li.jr { opacity: 1 }
main[id$="Jr"] .inCont { border-color: var(--fcjr-color) }
main[id$="Jr"] label.tab_item { background-color: var(--fcjr-color) }
/* member：カジュアル */
main[id$="Ca"] h2 { border-bottom-color: var(--fcca-color); color: var(--fcca-color) }
main#memberCa .block h3 { background-color:var(--inDocCaBg); color: var(--fcca-color) }
main#memberCa .flexBox .square { background-color: var(--fcca-color) }
main#memberCa .or::after { border-color: var(--fcca-color); color: var(--fcca-color) }
main[id$="Ca"] ul.tabList li.ca { opacity: 1 }
main[id$="Ca"] .inCont { border-color: var(--fcca-color) }
main[id$="Ca"] label.tab_item { background-color: var(--fcca-color) }
/* join：共通 */
main[id^="join"] .inDoc { border-radius: var(--size20); border-width: 2px; border-style: solid }
main[id^="join"] .inDoc h3 { border-radius:  var(--size18)  var(--size18) 0 0; font-size: var(--size20); padding: 0.5rem min(2vw,1rem) }
main[id^="join"] .inDoc .inner { font-size: var(--size22); padding: 0.5rem min(2vw,1rem) }
main[id^="join"] .inDoc2 { padding: 1rem; font-size: var(--size22) }
main[id^="join"] .inDoc2 .inner { border-width: 2px; border-style: solid; border-radius:var(--size20); padding:0.8rem 0.5rem; font-size: var(--size24); text-align: center }
main[id^="join"] .inDoc2 .flexBox > span { white-space: nowrap }
main[id^="join"] .inDoc2 h5 { font-size: var(--size22); line-height: 1.4 }
.accordion { padding-bottom: 1px }
.accordion summary {
  text-align: center;
  position: relative;
  padding: 1em 2em;
  font-weight: 600;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none }
.accordion summary::after {
  font-family: "Font Awesome 6 Free";
  content: "\2b";
  font-weight: 900;
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: var(--size20);
  line-height: 1;
}
.accordion[open] summary::after { content: "\f068" }
.inDoc2.accordion summary + div { border-top: 2px solid; margin: .3rem min(4vw,1.5rem) min(4vw,1.5rem); color: initial; padding: 1rem 0 0.7rem  }
.notice { background-color: var(--White); border-radius: var(--size20); padding-bottom: 1px }
.notice h4,
.notice.accordion summary { color: var(--Navy) }
.notice h4 { text-align: center; position: relative; padding: 1em 2em; font-weight: 600 }
.notice.acdIn.accordion summary { padding: 0; text-align: left; color: initial; font-weight: 400 }
.notice.acdIn.accordion summary::after { right: 0; color: var(--Navy) }
.notice.acdIn.accordion summary > div { padding-right: 1rem }
.notice.acdIn { background-color: var(--inDoc); margin: .3rem min(4vw,1.5rem) min(4vw,1.5rem); color: initial; padding: 1rem 1rem 0.7rem }
.notice.acdIn.accordion summary,
.notice.acdIn > dt { display: flex; align-items: flex-start }
.notice.acdIn.accordion summary + div,
.notice.acdIn > dd { display: flex; border-top: var(--Gray) 1px solid; padding-top: 0.5rem; margin-top: 0.5rem }
.notice.acdIn.accordion summary > span,
.notice.acdIn.accordion summary + div > span,
.notice.acdIn > dt > span,
.notice.acdIn > dd > span { font-family: "wanpaku-ruika", sans-serif; font-weight: 100; padding-right: 0.5rem }
.notice.acdIn.accordion summary > span,
.notice.acdIn > dt > span { color: var(--btnNavy) }
.notice.acdIn.accordion summary + div > span,
.notice.acdIn > dd > span { color: var(--Red) }
.notice.acdIn > .textKome li { margin-bottom: 10px }
.inDoc2 table th { white-space: nowrap }
/* join：エグゼクティブ */
main#joinEx .inDoc,
main#joinEx .inDoc2 .inner { border-color: var(--fcex-color) }
main#joinEx .inDoc h3 { background-color: var(--fcex-color); color: var(--White) }
main#joinEx .inDoc2 { background-color: var(--inDocExBg) }
/* join：ゴールド */
main#joinGd .inDoc,
main#joinGd .inDoc2 .inner { border-color: var(--fcgd-color) }
main#joinGd .inDoc h3 { background-color: var(--fcgd-color); color: var(--White) }
main#joinGd .inDoc2 { background-color: var(--inDocGdBg) }
/* join：レギュラー */
main#joinRg .inDoc,
main#joinRg .inDoc2 .inner,
main#joinRg .inDoc2 h5,
main#joinRg .inDoc2.accordion summary + div { border-color: var(--fcrg-color) }
main#joinJr .inDoc2 h5 a,
main#joinJr .inDoc2 h5 a:link,
main#joinJr .inDoc2 h5 a:visited { color: var(--fcrg-color) }
main#joinRg .inDoc h3 { background-color: var(--fcrg-color); color: var(--White) }
main#joinRg .inDoc2 { background-color: var(--inDocRgBg) }
main#joinRg .inDoc2 h5 { color: var(--fcrg-color) }
/* join：ジュニア */
main#joinJr .inDoc,
main#joinJr .inDoc2 .inner,
main#joinJr .inDoc2 h5,
main#joinJr .inDoc2.accordion summary + div { border-color: var(--fcjr-color) }
main#joinJr .inDoc2 h5 a,
main#joinJr .inDoc2 h5 a:link,
main#joinJr .inDoc2 h5 a:visited { color: var(--fcjr-color) }
main#joinJr .inDoc h3 { background-color: var(--fcjr-color); color: var(--White) }
main#joinJr .inDoc2 { background-color: var(--inDocJrBg) }
main#joinJr .inDoc2 h5 { color: var(--fcjr-color) }
/* join：カジュアル */
main#joinCa .inDoc,
main#joinCa .inDoc2 .inner,
main#joinCa .inDoc2 h5,
main#joinCa .inDoc2.accordion summary + div { border-color: var(--fcca-color) }
main#joinCa .inDoc2 h5 a,
main#joinCa .inDoc2 h5 a:link,
main#joinCa .inDoc2 h5 a:visited { color: var(--fcca-color) }
main#joinCa .inDoc h3 { background-color: var(--fcca-color); color: var(--White) }
main#joinCa .inDoc2 { background-color: var(--inDocCaBg) }
main#joinCa .inDoc2 h5 { color: var(--fcca-color) }
/*------------ ページ単体 ------------*/




/*==================================================
FONT
==================================================*/
*[class^="font"] { font-style: normal }/*fontで始まる*/
.f24 { font-size:var(--size24)  }
.f26 { font-size:var(--size26) }
.f28 { font-size:var(--size28) }
.f40 { font-size:var(--size40) }
.lh14 { line-height: 1.4 }

/* WanpakuRuika 08 */
.fontWanpaku {
  font-family: "wanpaku-ruika", sans-serif;
  font-weight: 100;
  font-style: normal;
}
/*
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
400 R
500 M
600 SB
700 B
800 EB
900 BL
*/

/*==================================================
～960
==================================================*/
@media screen and ( max-width:960px) {
  a[name] { margin-top: -20.5vw; padding-top: 20.5vw }
  img[src*="Title.webp"] { max-width: 80% }
  aside.pcNavi { display: none }
  section#btnNavi { padding: 8dvw 0 20dvw }
  main[id^="member"] .inDoc dd { width: 76% }
  main[id^="member"] .flexBox > div { width: 67% }
}
@media screen and ( max-width:500px) {
  section#btnNavi { padding: 8dvw 0 17dvw }
}

@media screen and (max-width: 1040px) {
  a[class^="btn"] {
    margin-left: revert;
    margin-right: revert;
  }
}