@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 header 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

header #headerInner { position: relative; }
header #headerConsole { position: relative; box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4); padding-right: calc( 50 / 1100 * 100% ); padding-left: calc( 50 / 1100 * 100% ); }
header #consoleInner { position: relative; max-width: 1300px; height: 95px; margin-right: auto; margin-left: auto; }
header #headerLogo { position: absolute; top: 15px; width: 470px; }
header #headerLogo a { display: block; background-image: url(../images/header_logo1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: 65px; }
header #headerNav { overflow: hidden; max-width: 920px; border-left: solid 1px; font-size: 0; line-height: 0; margin-right: auto; margin-left: auto; }
header #headerNav a { display: inline-block; border-right: solid 1px; width: calc( 100% / 4 ); font-size: 2.2rem; line-height: 3rem; text-align: center; text-decoration: none; padding: 15px; }
header #headerMember { position: absolute; top: 0; right: calc( 50% - 650px ); display: block; width: 240px; background-color: #224374; border: solid #224374; border-width: 0 2px 2px; border-radius: 0 0 20px 20px; font-size: 2rem; line-height: 3rem; color: #ffffff; font-weight: 700; text-align: center; text-decoration: none; padding: 25px 10px 23px; }
header #headerMember span { position: relative; display: inline-block; padding-left: 24px; }
header #headerMember span::before,
header #headerMember span::after { position: absolute; top: 5px; left: 0; display: block; width: 12px; height: 18px; background-size: cover; content: ""; }
header #headerMember span::before { background-image: url(../images/member_key2.svg); opacity: 0; }
header #headerMember span::after { background-image: url(../images/member_key1.svg); }
	#categoryHome header { margin-bottom: -130px; }
	#categoryHome header #headerNav { border-color: #ffffff; }
	#categoryHome header #headerNav a { border-color: #ffffff; color: #ffffff; }
	#categoryNormal header #headerNav { border-color: #224374; }
	#categoryNormal header #headerNav a { border-color: #224374; color: #224374; }
	#categoryMember header #headerClose { background-color: #edf1ee; }
	#categoryMember header #headerNav { border-color: #224374; }
	#categoryMember header #headerNav a { border-color: #224374; color: #224374; }

@media screen and (max-width: 1430px) {
	header #headerMember { right: 0; margin-right: calc( 50 / 1100 * 100% ); }
}

@media screen and (max-width: 1000px) {
	header #headerNav a { font-size: 2.2vw; }
}

@media screen and (min-width: 821px) {
	header #headerNav a { position: relative; transition: 0.2s ease; }
	header #headerNav a::after { position: absolute; opacity: 0; bottom: -100%; left: 0; display: block; width: 100%; height: 100%; content: ""; transition: 0.2s ease; }
	header #headerNav a:hover::after { bottom: 0; opacity: 1; }
	header #headerNav a span { position: relative; z-index: 1; }
		#categoryHome header #headerNav a:hover { color: #224374; }
		#categoryHome header #headerNav a::after { background-color: #ffffff; }
		#categoryNormal header #headerNav a:hover { color: #ffffff; }
		#categoryNormal header #headerNav a::after { background-color: #224374; }
		#categoryMember header #headerNav a:hover { color: #ffffff; }
		#categoryMember header #headerNav a::after { background-color: #224374; }
	header #headerMember,
	header #headerMember span::before,
	header #headerMember span::after { transition: 0.2s ease; }
	header #headerMember:hover { background-color: #ffffff; color: #224374; }
	header #headerMember:hover span::before { opacity: 1; }
	header #headerMember:hover span::after { opacity: 0; }
}

@media screen and (max-width: 800px) {
	header #headerMember { width: 210px; }
}

@media screen and (max-width: 767px) {
	header #headerConsole { padding-right: calc( 10 / 320 * 100% ); padding-left: calc( 10 / 320 * 100% ); }
	header #consoleInner { max-width: 500px; }
	header #headerLogo { width: 266px; }
	header #headerLogo a { background-image: url(../images/header_logo2.gif); }
	header #headerNav { max-width: 320px; border-left: none; margin-bottom: 40px; }
	header #headerNav a { position: relative; display: block; border-right: none; width: 100%; font-size: 2.6rem; line-height: 3.6rem; text-align: left; padding: 20px 0 20px 45px; }
	header #headerNav a::before,
	header #headerNav a::after { position: absolute; top: 0; bottom: 0; display: block; content: ""; margin-top: auto; margin-bottom: auto; }
	header #headerNav a::before { left: 0; width: 20px; height: 2px; background-color: #ffffff; }
	header #headerNav a::after { left: 10px; width: 15px; height: 15px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
	header #headerNav a.navHide { display: none; }
	header #headerMember { position: static; max-width: 320px; width: 100%; border-color: #ffffff; border-width: 1px; border-radius: 40px; padding: 25px; margin-right: auto; margin-left: auto; }
		#categoryHome header { margin-bottom: 0; }
		#categoryNormal header #headerNav a { color: #ffffff; }
		#categoryMember header #headerClose { background-color: #224374; }
		#categoryMember header #headerNav a { color: #ffffff; }
}



/* ――――――――――――――――――――――――――――――
［ header Open Close ］
―――――――――――――――――――――――――――――― */

#headerClose { padding: 30px calc( 50 / 1100 * 100% ) 40px; }
#headerOpen { position: absolute; top: 8px; right: 0; overflow: hidden; width: 80px; height: 80px; font-size: 0; line-height: 0; margin-right: calc( -10 / 300 * 100% ); }
#headerOpen div { position: relative; display: block; width: 56px; height: 26px; margin: 27px auto 0; }
#headerOpen div:before,
#headerOpen div:after,
#headerOpen span { position: absolute; display: block; width: 100%; height: 2px; background-color: #224374; content: ""; transition: 0.5s ease; }
#headerOpen div:before { top: 0; }
#headerOpen div:after { bottom: 0; }
#headerOpen span { overflow: hidden; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
	#headerInner.active #headerOpen div:before { transform: translateY(12px) translateX(0) rotate(-20deg); }
	#headerInner.active #headerOpen div:after { transform: translateY(-12px) translateX(0) rotate(20deg); }
	#headerInner.active #headerOpen span { opacity: 0; }

@media screen and (min-width: 768px) {
	#headerOpen { display: none; }
	#headerClose { display: block !important; }
}

@media screen and (max-width: 767px) {
	#headerClose { position: absolute; top: 95px; right: -100%; overflow: hidden; width: 100%; background-color: #224374; padding: 40px calc( 15 / 320 * 100% ) 90px; margin-left: calc( -15 / 320 * 100% ); transition: 0.4s ease; z-index: 10000; }
	#headerClose #closeInner { max-width: 500px; padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto; }
		#headerInner.active #headerClose { right: 0; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 categoryTitle 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#categoryTitle.titleType1 { background-color: #224374; color: #ffffff; text-align: center; padding: 45px 20px 40px; }
#categoryTitle.titleType1 span { display: block; }
#categoryTitle.titleType1 span:nth-child(1) { font-size: 4rem; line-height: 6rem; margin-bottom: 5px; }
#categoryTitle.titleType1 span:nth-child(2) { font-size: 1.7rem; line-height: 3rem; }

@media screen and (max-width: 767px) {
	#categoryTitle.titleType1 { padding: 25px 10px 20px; }
	#categoryTitle.titleType1 span:nth-child(1) { font-size: 3rem; line-height: 5rem; margin-bottom: 0; }
	#categoryTitle.titleType1 span:nth-child(2) { font-size: 1.4rem; line-height: 2.4rem; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 main 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

main { font-size: 1.8rem; line-height: 2.8rem; }
main .mainInner { padding-right: calc( 50 / 1100 * 100% ); padding-left: calc( 50 / 1100 * 100% ); }
	#categoryNormal main { padding-top: 80px; padding-bottom: 150px; }
	#categoryMember main { background-color: #edf1ee; padding-top: 60px; padding-bottom: 150px; }
	#categoryHome main .mainInner.bgColor { background-color: #edf1ee; }

@media screen and (max-width: 767px) {
	main { font-size: 1.6rem; line-height: 2.4rem; }
	main .mainInner { padding-right: calc( 15 / 320 * 100% ); padding-left: calc( 15 / 320 * 100% ); }
		#categoryNormal main { padding-top: 40px; padding-bottom: 120px; }
		#categoryMember main { padding-top: 40px; padding-bottom: 120px; }
}



/* ――――――――――――――――――――――――――――――
［ contentsArea ］
―――――――――――――――――――――――――――――― */

.contents860,
.contents900,
.contents1000 { margin-right: auto; margin-left: auto; }
.contents860 { max-width: 860px; }
.contents900 { max-width: 900px; }
.contents1000 { max-width: 1000px; }

@media screen and (max-width: 767px) {
	.contents860,
	.contents900,
	.contents1000 { max-width: 500px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 pageTop 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#pageTop { position: fixed; right: calc( 50% - 680px ); z-index: 10000; }
#pageTop a { position: relative; display: block; width: 60px; height: 60px; font-size: 0; line-height: 0; }
#pageTop a::before,
#pageTop a::after { position: absolute; top: 0; left: 0; width: 60px; height: 60px; display: block; content: ""; }
#pageTop a::before { background-color: rgba(255,255,255,0.6); border: solid 2px; border-color: transparent; border-radius: 5px; }
#pageTop a::after { background: url(../images/pagetop.svg) no-repeat left top; background-size: cover; }

@media screen and (max-width: 1440px) {
	#pageTop { right: calc( 40 / 1440 * 100% ); }
}

@media screen and (min-width: 821px) {
	#pageTop a::before { transition: 0.2s ease; }
	#pageTop a:hover::before { background-color: #ffffff; border-color: #224374; }
}

@media screen and (max-width: 767px) {
	#pageTop { position: static !important; }
	#pageTop a { margin: -130px auto 50px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 footer 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

footer { position: relative; color: #224374; padding: 50px calc( 50 / 1100 * 100% ) 40px; }
	#categoryHome footer,
	#categoryNormal footer { background-color: #edf1ee; }
footer #footerInner { max-width: 1000px; margin-right: auto; margin-left: auto; }
footer #footerTitle { font-size: 2rem; line-height: 3rem; font-weight: 700; }
footer #footerLink { overflow: hidden; margin-bottom: 70px; }
footer #footerLink .linkList { float: left; font-size: 1.8rem; line-height: 2.4rem; margin-top: 10px; }
footer #footerLink .linkList:nth-child(1) { margin-right: 60px; }
footer #footerLink .linkList a { position: relative; display: block; color: #224374; text-decoration: none; padding-left: 24px; }
footer #footerLink .linkList a:not(:last-child) { margin-bottom: 4px; }
footer #footerLink .linkList a::before { position: absolute; top: 8px; left: 6px; display: block; width: 8px; height: 8px; border: solid #224374; border-width: 0 1px 1px 0; content: ""; transform: rotate(-45deg);  }
footer #footerLink .linkMember { float: right; width: 340px; }
footer #footerLink .linkMember a { position: relative; display: block; background-color: #224374; border: solid 2px #224374; border-radius: 45px; color: #ffffff; text-align: center; text-decoration: none; padding: 22px 50px 14px 10px; }
footer #footerLink .linkMember a::before,
footer #footerLink .linkMember a::after { position: absolute; top: 0; bottom: 0; display: block; content: ""; margin-top: auto; margin-bottom: auto; }
footer #footerLink .linkMember a::before { right: 34px; width: 15px; height: 2px; background-color: #ffffff; }
footer #footerLink .linkMember a::after { right: 30px; width: 12px; height: 12px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
footer #footerLink .linkMember dl { position: relative; display: inline-block; padding-left: 24px; }
footer #footerLink .linkMember dl::before,
footer #footerLink .linkMember dl::after { position: absolute; top: 5px; left: 0; display: block; width: 12px; height: 18px; background-size: cover; content: ""; }
footer #footerLink .linkMember dl::before { background-image: url(../images/member_key2.svg); opacity: 0; }
footer #footerLink .linkMember dl::after { background-image: url(../images/member_key1.svg); }
footer #footerLink .linkMember dt { font-size: 2.2rem; line-height: 3rem; }
footer #footerLink .linkMember dd { font-size: 1.4rem; line-height: 2rem; }
footer #footerBanner { font-size: 0; line-height: 0; margin: 0 -6px 35px; }
footer #footerBanner a { display: inline-block; width: 241px; background-color: #ffffff; border: solid 1px #224374; color: #224374; font-weight: 700; vertical-align: top; text-decoration: none; margin: 6px; }
footer #footerBanner .bannerType1 { font-size: 1.8rem; line-height: 3rem; text-align: center; padding: 19px 10px; }
footer #footerBanner .bannerType2 { padding: 14px 10px; }
footer #footerBanner .bannerType2 dl { display: table; margin-right: auto; margin-left: auto; }
footer #footerBanner .bannerType2 dt { font-size: 1.2rem; line-height: 2rem; }
footer #footerBanner .bannerType2 dd { font-size: 1.8rem; line-height: 2rem; }
footer #footerBanner .bannerType3 { text-align: center; padding: 19px 10px; }
footer #footerBanner .bannerType3 dl { display: table; margin-right: auto; margin-left: auto; }
footer #footerBanner .bannerType3 dt { display: table-cell; font-size: 1.2rem; line-height: 3rem; vertical-align: middle; padding-right: 5px; }
footer #footerBanner .bannerType3 dd { display: table-cell; font-size: 1.8rem; line-height: 3rem; vertical-align: middle; }
footer #footerBanner .bannerType4 { background-image: url(../images/footer_banner4.gif); background-size: 238px auto; font-size: 0; line-height: 0; padding-top: 68px; }
footer #footerCopy { font-family: "Arial"; font-size: 1.3rem; line-height: 2rem; text-align: center; }

@media screen and (max-width: 1100px) {
	footer #footerInner { max-width: 500px; }
	footer #footerLink { margin-bottom: 60px; }
	footer #footerLink .linkList { float: none; }
	footer #footerLink .linkList:nth-child(1) { border-bottom: solid 1px #224374; padding-bottom: 15px; margin-bottom: 15px; margin-right: 0; }
	footer #footerLink .linkMember { float: none; margin: 40px auto 0; }
	footer #footerBanner a { width: 244px; }
}

@media screen and (min-width: 821px) {
	footer #footerLink .linkList a:hover { text-decoration: underline; }
	footer #footerLink .linkMember a,
	footer #footerLink .linkMember a::before,
	footer #footerLink .linkMember a::after,
	footer #footerLink .linkMember dl,
	footer #footerLink .linkMember dl::before,
	footer #footerLink .linkMember dl::after { transition: 0.2s ease; }
	footer #footerLink .linkMember:hover a { background-color: #ffffff; color: #224374; }
	footer #footerLink .linkMember:hover a::before { background-color: #224374; }
	footer #footerLink .linkMember:hover a::after { border-color: #224374; }
	footer #footerLink .linkMember:hover dl::before { opacity: 1; }
	footer #footerLink .linkMember:hover dl::after { opacity: 0; }
}

@media screen and (max-width: 767px) {
	footer #footerLink { margin-bottom: 40px; }
	footer #footerLink .linkMember { max-width: 340px; width: 100%; margin-top: 30px; }
	footer #footerBanner { width: 256px; margin-right: auto; margin-left: auto; }
}