@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

html { scroll-behavior: smooth }
body {
	background-image: none;
	padding: 0;
	margin: 0;
	height: 100%;
	-webkit-text-size-adjust: none;
	min-width: initial
}
main {
	margin-top: 100px;
	font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal;
	font-weight: 600;
	color: #000;
	overflow: hidden;
	font-size:min(3.4vw,20px);
	line-height: 1.7
}
#TOP { padding-top: 100px; margin-top: -100px }
a[name] { display: block; margin-top:-100px; padding-top:100px }
i { font-style: normal }

/* header */
div.spHeader { min-width:1000px }
div.spHeader > h1 {
	background-image: url(../image/2026/join/mainView.jpg);
	background-repeat:no-repeat;
	background-position: center top;
	background-size: cover;
	text-indent: -99999px;
	overflow: hidden;
	height: 56.25vw;
	margin: 100px auto 0;
	text-align: center;
}
div.spHeader > h1::after { display: none }

/* contents */
.inner { width: 100%; max-width:780px; margin:auto; padding:min(6vw,2em) min(3vw,1em); box-sizing:border-box }
.memoLine { border-width:min(0.2vw,2px); border-style:solid; padding: 0.8rem; border-color: #d9e8f4 }
.memoDashT { border-top-width:min(0.2vw,2px); border-top-style: dashed; padding-top: 1rem }

/* カラー */
.textBoBu,.textBu { color: #033c8e }
.textBoRe,.textRe { color: #be0500 }
.textBoBr,.textBr { color: #4c2f00 }

/* ボタン */
a { text-decoration: none!important }
a.btn { background-color: #033c8e; color: #FFF; border-radius: 50px; padding: min(4vw,25px) min(4vw,15px); font-size: min(3.7vw,28px); display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; line-height: 1 }
a.btn.brown { background-color: #4c2f00 }
a.btn.white { background-color: #FFF }
a.btn.line { background-color: #FFF; border: #033c8e min(0.2vw,2px) solid; color: #033c8e; box-sizing: border-box }
a.btn.bar { background-color: #FFF; border-top: #033c8e min(0.2vw,2px) solid; border-bottom: #033c8e min(0.2vw,2px) solid; color: #033c8e; border-radius: 0; box-sizing: border-box }
a.btnS { font-size:min(3.4vw,26px); padding: min(3vw,15px) }
a.btnSS { font-size:min(3vw,24px); padding: min(2vw,10px) }
.btn.soon { background-color: #444; border-radius: 50px; color: #FFF; font-size:min(3.4vw,26px); padding: min(3vw,15px); margin-left: auto; margin-right: auto }

/* TITLE */
h1 {
	font-size: min(5.8vw,36px);
	margin: 2rem 0;
	text-align: center;
	color: #033c8e;
}
h1:after { content: ""; width: min(30vw,230px); border-bottom: #00b4f0 min(1.5vw,10px) solid; display: block; margin: auto; margin-top: min(2.2vw,1rem) }
h2 {
	margin: 0 0 2rem;
	border-left: none;
	padding: 0;
	min-height: initial;
	font-size: min(5.8vw,36px);
	font-weight: bold;
	line-height: initial;
	color: #033c8e;
	background-color:transparent
}
h3 {
	margin: 0 0 10px;
	padding: 0.5rem 0;
	min-height: initial;
	font-size:min(4.6vw,28px);
	line-height: 1.5;
	position: relative;
	border: none;
	text-align: center
}

/* joinTop：募集TOP */
#joinTop #read { background: linear-gradient(to bottom, #FFF, #d4c175); border-bottom:#033c8e solid min(2vw,10px) }

/* joinTop：会員種別 */
#joinTop #topCat { background: #dcffff; border-bottom:#d4c175 solid min(2vw,10px) }
#joinTop #topCat a.catBtn { display: flex; flex-direction: column; border-radius: min(6vw,12px); color: #FFF; font-size: min(3.7vw,28px); padding: min(2vw,10px); text-decoration: none; width:min(30vw,230px); margin: 0 10px 10px 0; box-sizing: border-box }
#joinTop #topCat a.catBtn.ex { background-color: var(--fcex-color) }
#joinTop #topCat a.catBtn.gd { background-color: var(--fcgd-color) }
#joinTop #topCat a.catBtn.rg { background-color: var(--fcrg-color) }
#joinTop #topCat a.catBtn.jr { background-color: var(--fcjr-color) }
#joinTop #topCat a.catBtn.ca { background-color: var(--fcca-color); margin-right: 0 }
#joinTop #topCat .flexBox:first-of-type::after{ content:"";display: block;width:min(30vw,230px) }

/* joinTop：入会方法 */
#joinTop #topHow { background: linear-gradient(to bottom, #FFF, #FFF 70%, #d4c175); border-bottom:#033c8e solid min(2vw,10px) }
#joinTop #topHow .inCont { background-color: #fffae6; border: #4c2f00 2px solid; padding: 1rem }

/* joinTop：FCユニホーム */
#joinTop #topUni { background: #444; border-bottom:#d4c175 solid min(2vw,10px); color: #FFF }
#joinTop #topUni h2 { color: #d4c175 }

/* joinTop：入会特典 */
#joinTop #topBen { background: linear-gradient(to bottom, #FFF, #FFF 70%, #d4c175) }
#joinTop #topBen .inCont { border:#d4c175  min(0.2vw,2px) solid; padding: 1rem; margin-bottom: min(6vw,2em) }
#joinTop #topBen .inCont .num { font-size:min(4.6vw,28px); color: #033c8e; border-bottom: #d4c175  min(0.2vw,2px) solid; padding:0 min(7vw,60px) 10px 0; margin-bottom: 10px }
#joinTop #topBen .inCont .num::before { background-color: #d4c175; display: block; float: left; color: #FFF; border-radius: 100%; width: min(7vw,60px); height: min(7vw,60px); line-height: min(7vw,60px) }
#joinTop #topBen .inCont:nth-of-type(1) .num:before { content: "1" }
#joinTop #topBen .inCont:nth-of-type(2) .num:before { content: "2" }
#joinTop #topBen .inCont:nth-of-type(3) .num:before { content: "3" }

/*------ ページ切り替えタブ ------*/
ul.tabList { display: flex }
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:min(4.6vw,28px);
	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共通 */
article[id^="member"] .inCont,
article[id^="join"] .inCont { border-width:2px; border-style: solid; padding: min(2.2vw,1rem) }
article[id^="member"] .inCont .inCont2,
article[id^="join"] .inCont .inCont2,
article[id^="benefit"] .inCont .inCont2 { border-bottom-width:min(0.2vw,2px); border-bottom-style:solid; padding: 0.5rem; margin-bottom: 1rem; text-align: center }
article[id^="member"] .inCont .inCont3,
article[id^="join"] .inCont .inCont3 { padding: min(2.2vw,1rem) }
article[id^="member"] .inCont .inCont3 .inDoc,
article[id^="join"] .inCont .inCont3 .inDoc,
article[id^="benefit"] .inCont .inDoc { border-radius: min(2vw,20px); background-color: #FFF; padding: min(2.2vw,1rem); text-align: center; box-sizing: border-box }
article[id^="member"] .inCont .inCont3.flexBox .inDoc { position: relative; padding-bottom: min(7vw,60px) }
article[id^="member"] .inCont .inCont3.flexBox .inDoc > .btnSS { position: absolute; bottom: 0.8rem; left: 0; right: 0 }
/* member：エグゼクティブ */
article[id$="Ex"] a.btn.white { color: var(--fcex-color) }
article[id$="Ex"] ul.tabList li.ex { opacity: 1 }
article[id$="Ex"] .inCont { border-color: var(--fcex-color) }
article[id$="Ex"] .inCont i { color: var(--fcex-color) }
article[id$="Ex"] .inCont .inCont2 { border-bottom-color: var(--fcex-color) }
article[id$="Ex"] .inCont .inCont3 { background-color:#f0e0e0 }
/* member：ゴールド */
article[id$="Gd"] ul.tabList li.gd { opacity: 1 }
article[id$="Gd"] a.btn.white { color: var(--fcgd-color) }
article[id$="Gd"] .inCont { border-color: var(--fcgd-color) }
article[id$="Gd"] .inCont i { color: var(--fcgd-color) }
article[id$="Gd"] .inCont .inCont2 { border-bottom-color: var(--fcgd-color) }
article[id$="Gd"] .inCont .inCont3 { background-color:#f2eedd }
/* member：レギュラー */
article[id$="Rg"] ul.tabList li.rg { opacity: 1 }
article[id$="Rg"] a.btn.white { color: var(--fcrg-color) }
article[id$="Rg"] .inCont { border-color: var(--fcrg-color) }
article[id$="Rg"] .inCont i { color: var(--fcrg-color) }
article[id$="Rg"] .inCont .inCont2 { border-bottom-color: var(--fcrg-color) }
article[id$="Rg"] .inCont .inCont3 { background-color:#d9e8f4 }
article[id$="Rg"] .tabsIn { border-top-color: var(--fcrg-color) }
article[id$="Rg"] label.tab_item { background-color: var(--fcrg-color) }
article[id$="Rg"] a.list::before { color: var(--fcrg-color) }
/* member：ジュニア */
article[id$="Jr"] ul.tabList li.jr { opacity: 1 }
article[id$="Jr"] a.btn.white { color: var(--fcjr-color) }
article[id$="Jr"] .inCont { border-color: var(--fcjr-color) }
article[id$="Jr"] .inCont i { color: var(--fcjr-color) }
article[id$="Jr"] .inCont .inCont2 { border-bottom-color: var(--fcjr-color) }
article[id$="Jr"] .inCont .inCont3 { background-color:#cdeaef }
article[id$="Jr"] .tabsIn { border-top-color: var(--fcjr-color) }
article[id$="Jr"] label.tab_item { background-color: var(--fcjr-color) }
article[id$="Jr"] a.list::before { color: var(--fcjr-color) }
/* member：カジュアル */
article[id$="Ca"] ul.tabList li.ca { opacity: 1 }
article[id$="Ca"] a.btn.white { color: var(--fcca-color) }
article[id$="Ca"] .inCont { border-color: var(--fcca-color) }
article[id$="Ca"] .inCont i { color: var(--fcca-color) }
article[id$="Ca"] .inCont .inCont2 { border-bottom-color: var(--fcca-color) }
article[id$="Ca"] .inCont .inCont3 { background-color:#ddedbb }
article[id$="Ca"] .tabsIn { border-top-color: var(--fcca-color) }
article[id$="Ca"] label.tab_item { background-color: var(--fcca-color) }
/* join：共通 */
#notice { background-color: #dcffff }
.joinNotice { padding: min(3vw,1.5rem) }
.joinNotice > .inDoc { border-radius: min(2vw,20px); background-color: #FFF; padding: min(3vw,1.5rem); text-align: center; box-sizing: border-box }
.joinNotice > .inDoc > h5 { color: #033c8e; border-bottom-color: #033c8e; border-bottom-width:min(0.2vw,2px); font-size:min(4.2vw,28px); padding-bottom:0.8em; }

/* 特典一覧 */
#benefit #read,
#benefit #bonus { background: linear-gradient(to bottom,#FFF, #FFF 60%, #d4c175) }
#benefit h2 { font-size:min(4.6vw,28px); text-align: center; padding: 0.3rem 0; margin-bottom: 1rem }
#benefit h3 { border-bottom-width: min(0.2vw,2px); border-bottom-style: solid; padding-bottom: 1rem; color: #000 }
.numberLine { display: flex; align-items: center; font-size: min(5.5vw,40px); line-height: 1; font-weight: bold }
.numberLine:before,
.numberLine:after { content: ""; height: min(0.2vw,2px); flex-grow: 1; background-color: #666 }
.numberLine:before { margin-right: 2rem }
.numberLine:after { margin-left: 2rem }
#benefit #bonus .inCont { border:#4c2f00 2px solid; padding: min(2.2vw,1rem); background-color: #fffae6; position: relative }
article[id^="benefit"] #bonus .inCont > i[class$="plus"] { background-color: #FFF; border-radius: 50%; font-size:min(10vw,50px);color:#d4c175;position:absolute;top:-25px;left:calc(50% - min(5vw,25px));right:calc(50% - min(5vw,25px)); width: min(10vw,50px) }
article[id^="benefit"] .inCont .inCont2 { border-color: #d4c175 }

/* 特典一覧：エグゼクティブ */
.inner#ex .numberLine { color: var(--fcex-color) }
.inner#ex .numberLine:before,
.inner#ex .numberLine:after { background-color: var(--fcex-color) }
h2[class$="Ex"] { background-color:#f0e0e0; color: var(--fcex-color) }
h3[class$="Ex"] { border-bottom-color: var(--fcex-color) }
.inner#ex .memoDashT { border-color: var(--fcex-color) }
/* 特典一覧：ゴールド */
.inner#gd .numberLine { color: var(--fcgd-color) }
.inner#gd .numberLine:before,
.inner#gd .numberLine:after { background-color: var(--fcgd-color) }
h2[class$="Gd"] { background-color:#f2eedd; color: var(--fcgd-color) }
h3[class$="Gd"] { border-bottom-color: var(--fcgd-color) }
.inner#gd .memoDashT { border-color: var(--fcgd-color) }
/* 特典一覧：レギュラー */
.inner#rg .numberLine { color: var(--fcrg-color) }
.inner#rg .numberLine:before,
.inner#rg .numberLine:after { background-color: var(--fcrg-color) }
h2[class$="Rg"] { background-color:#d9e8f4; color: var(--fcrg-color) }
h3[class$="Rg"] { border-bottom-color: var(--fcrg-color) }
.inner#rg .memoDashT { border-color: var(--fcrg-color) }
/* 特典一覧：ジュニア */
.inner#jr .numberLine { color: var(--fcjr-color) }
.inner#jr .numberLine:before,
.inner#jr .numberLine:after { background-color: var(--fcjr-color) }
h2[class$="Jr"] { background-color:#cdeaef; color: var(--fcjr-color) }
h3[class$="Jr"] { border-bottom-color: var(--fcjr-color) }
.inner#jr .memoDashT { border-color: var(--fcjr-color) }

/*FONT*/
.lh102 { line-height:1.2 }
.lh108 { line-height:1.8 }
.f22 { font-size:min(3.8vw,22px); line-height: 1.6 }
.f24 { font-size:min(4vw,24px); line-height: 1.4 }
.f26 { font-size:min(4.4vw,26px); line-height: 1.4 }
.f28 { font-size:min(4.6vw,28px); line-height: 1.4 }
.f30 { font-size:min(5vw,30px); line-height: 1.4 }
.f36 { font-size:min(5.8vw,36px); line-height: 1.4 }
.f40 { font-size:min(9vw,40px); line-height: 1.4 }
.f42 { font-size:min(5.2vw,42px); line-height: 1.4 }
.f44 { font-size:min(5.6vw,44px); line-height: 1.4 }
.f50 { font-size:min(9vw,50px)!important }
.f180 { font-size: min(4.9vw,180%) }

/*==================================================
～1040
==================================================*/
@media screen and ( max-width:1040px) {
	main { margin-top:80px }
	main article { padding:0 }
	a[name] { display: block; margin-top:-80px; padding-top:80px }
	/* header */
	div.spHeader { min-width:initial }
	div.spHeader > h1 { margin-top: 80px }
/*～1040 END*/
}
/*==================================================
～670
==================================================*/
@media screen and ( max-width:670px ){
	main { margin-top:50px }
	a[name] { display: block; margin-top:-50px; padding-top:50px }
	/* header */
	div.spHeader { min-width:initial; margin-top: 0 }
	div.spHeader > h1 { margin-top:50px; background-image:url(../image/2026/join/mainView_sp.jpg); height: 100vw }
/*～670 END*/
}

/*==================================================
余白
==================================================*/
.mg1e  { margin:        min(5vw,1em)!important }
.mgT05e { margin-top:   min(2.5vw,0.5em)!important }
.mgB05e { margin-bottom:min(2.5vw,0.5em)!important }
.mgT1e { margin-top:    min(5vw,1em)!important }
.mgB05e { margin-bottom:min(2.5vw,0.5em)!important }
.mgB1e { margin-bottom: min(5vw,1em)!important }
.mgB15e { margin-bottom:min(6.5vw,1.5em)!important }
.mgT2e { margin-top:    min(6vw,2em)!important }
.mgB2e { margin-bottom: min(6vw,2em)!important }
.mgT3e { margin-top:    min(7vw,3em)!important }
.mgB3e { margin-bottom: min(7vw,3em)!important }
.pd025e { padding:      min(1vw,0.25em)!important }
.pd05e  { padding:      min(2.5vw,0.5em)!important }
.pd1e   { padding:      min(5vw,1em)!important }
.pdT05e { padding-top:  min(2.5vw,0.5em)!important }
.pdT1e { padding-top:   min(5vw,1em)!important }
.pdT3e { padding-top:min(7vw,3em)!important }
.pdB05e { padding-bottom:min(2.5vw,0.5em)!important }
.pdB3e { padding-bottom:min(7vw,3em)!important }
.pd1e  { padding:min(5vw,1em)!important }

/*==================================================
カジュアル会員ページ
==================================================*/


/*==================================================
ジュニア会員ページ
==================================================*/



/*==================================================
FONT
==================================================*/
/*会員募集：Noto Serif JP*/
.fontNoto { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal }
.fontNoto-sb { font-weight: 600 }/*SemiBold*/
.fontNoto-b { font-weight: 700 }/*Bold*/

/*カジュアル会員：源ノ角ゴシック*/
/*カジュアル会員：Dela Gothic One*/
/*カジュアル会員：Murecho*/
/*ジュニア会員：M PLUS 1p*/