@charset "utf-8";

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

header { padding-right: calc( 50 / 1100 * 100% ); padding-left: calc( 50 / 1100 * 100% ); }
header #headerInner { position: relative; max-width: 1200px; height: 100px; margin-right: auto; margin-left: auto; }
header #headerLogo { position: absolute; top: 24px; left: 0; }
header #headerLogo a { display: block; width: 160px; padding: 15px 25px 14px; }
header #headerLogo a span { display: block; background: url(/cms/cwc/research/common/images/header_logo.svg) no-repeat left top; width: 100%; font-size: 0; line-height: 0; padding-top: 20px; }
header #headerTitle { width: 300px; margin-right: auto; margin-left: auto; }
header #headerTitle a { display: block; background-image: url(/cms/cwc/research/common/images/header_title.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: 100px; }
header #headerOpen { display: none; }
header #headerSearch { position: absolute; top: 36px; right: 0; }
header #headerSearch .searchFrame { overflow: hidden; width: 190px; border: solid 1px #9c9c9c; border-radius: 13px; font-size: 0; line-height: 0; padding-left: 10px; }
header #headerSearch .searchFrame input { border: 0; }
header #headerSearch .searchFrame input.searchTxt { width: calc( 100% - 34px ); font-size: 1.6rem; line-height: 1; }
header #headerSearch .searchFrame input.searchTxt::placeholder { color: #b3b3b3; }
header #headerSearch .searchFrame input.searchBtn { width: 34px; height: 26px; background: url(/cms/cwc/research/common/images/header_search.svg) no-repeat center center; background-size: 12px 12px; cursor: pointer; }

@media screen and (min-width: 821px) {
	header #headerSearch { display: block !important; }
}

@media screen and (max-width: 767px) {
	header { padding-right: 0; padding-left: 0; }
	header #headerInner { height: 50px; }
	header #headerLogo { top: 5px; left: calc( 50% - 250px ); }
	header #headerLogo a { width: 84px; padding: 5px 10px; }
	header #headerLogo a span { padding-top: 12px; }
	header #headerTitle { width: 150px; }
	header #headerTitle a { padding-top: 50px; }
	header #headerOpen { position: absolute; top: 0; right: calc( 50% - 240px ); display: block; width: 50px; height: 50px; background: url(/cms/cwc/research/common/images/header_search.svg) no-repeat center center; background-size: 20px 20px; font-size: 0; line-height: 0; }
	header #headerOpen.openSearch { background-image: none; }
	header #headerOpen.openSearch::before,
	header #headerOpen.openSearch::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 20px; height: 3px; background-color: #000000; content: ""; margin: auto; }
	header #headerOpen.openSearch::before { transform: rotate(45deg); }
	header #headerOpen.openSearch::after { transform: rotate(-45deg); }
	header #headerSearch { display: none; top: 50px; width: 100%; background-color: #ffffff; z-index: 10000; padding-right: calc( 15 / 320 * 100% ); padding-left: calc( 15 / 320 * 100% ); }
	header #headerSearch .searchFrame { margin: 35px auto 45px; }
	header #headerSearch .searchFrame { max-width: 448px; width: 100%; border-radius: 18px; }
	header #headerSearch .searchFrame input.searchTxt { width: calc( 100% - 54px ); line-height: 3.6rem; }
	header #headerSearch .searchFrame input.searchBtn { width: 48px; height: 36px; background-size: 20px 20px; }
}

@media screen and (max-width: 500px) {
	header #headerLogo { left: 0; }
	header #headerOpen { right: 10px; }
}





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

main { background-color: #f5f5f5; font-size: 1.8rem; line-height: 2.8rem; font-feature-settings: "palt"; padding: 70px calc( 50 / 1100 * 100% ) 100px; }
main .mainInner { max-width: 1150px; background-color: #ffffff; padding-top: 80px; margin-right: auto; margin-left: auto; }
main .mainInner:last-child { padding-bottom: 180px; }
main .mainContents { max-width: 900px; margin-right: auto; margin-left: auto; }
main .menuInner { max-width: 1150px; background-color: #ffffff; padding-top: 120px; padding-bottom: 180px; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 1265px) {
	main .mainInner { padding-right: calc( 50 / 1150 * 100% ); padding-left: calc( 50 / 1150 * 100% ); }
}

@media screen and (max-width: 767px) {
	main { font-size: 1.4rem; line-height: 2.2rem; padding: 20px 0 50px; }
	main .mainInner { max-width: 500px; padding: 15px 26px 45px; }
	main .mainInner:last-child { padding-bottom: 20px; }
	main .menuInner { max-width: 500px; padding-top: 15px; padding-bottom: 20px; }
}

@media screen and (max-width: 500px) {
	main .mainInner { padding-right: calc( 15 / 320 * 100% ); padding-left: calc( 15 / 320 * 100% ); }
}



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

.contents600,
.contents800,
.contents940,
.contents1000,
.contents1040,
.contents1200 { margin-right: auto; margin-left: auto; }
.contents600  { max-width: 600px; }
.contents800  { max-width: 800px; }
.contents940  { max-width: 940px; }
.contents1000 { max-width: 1000px; }
.contents1040 { max-width: 1040px; }
.contents1200 { max-width: 1200px; }

@media screen and (max-width: 767px) {
	.contents600,
	.contents800,
	.contents940,
	.contents1000,
	.contents1040,
	.contents1200 { max-width: 500px; }
}





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

footer { padding: 70px calc( 50 / 1100 * 100% ); }
footer #footerInner { max-width: 1200px; margin-right: auto; margin-left: auto; }
footer #pageTop { position: fixed; right: calc( 50% - 680px ); z-index: 10000; }
footer #pageTop a { position: relative; overflow: hidden; display: block; width: 64px; height: 64px; background-color: #000000; border: solid 1px #000000; border-radius: 50%; font-size: 0; line-height: 0; margin-right: auto; margin-left: auto; }
footer #pageTop a::before,
footer #pageTop a::after { position: absolute; top: -6px; bottom: 0; display: block; width: 15px; height: 3px; background-color: #ffffff; content: ""; margin: auto; }
footer #pageTop a::before { right: 9px; left: 0; transform: rotate(-45deg);  }
footer #pageTop a::after { right: 0; left: 9px; transform: rotate(45deg); }
footer #footerBanner { max-width: 730px; font-feature-settings: "palt"; margin: 0 auto 70px; }
footer #footerBanner a { position: relative; display: block; border: solid 4px #514642; text-decoration: none; }
footer #footerBanner a::before,
footer #footerBanner a::after { position: absolute; top: 0; bottom: 0; display: block; content: ""; margin-top: auto; margin-bottom: auto; }
footer #footerBanner a::before { right: 23px; width: 20px; height: 20px; background-color: #514642; border-radius: 50%; }
footer #footerBanner a::after { right: 30px; width: 8px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
footer #footerBanner a dl { display: table; width: 100%; height: 112px; background: url(/cms/cwc/research/common/images/footer_banner.gif) no-repeat left top; background-size: auto 100%; }
footer #footerBanner a dl dt { display: table-cell; width: 310px; font-size: 2.4rem; line-height: 3.4rem; color: #514642; font-weight: 700; vertical-align: middle; padding-left: 120px; }
footer #footerBanner a dl dd { display: table-cell; font-size: 1.8rem; line-height: 2.8rem; color: #333333; vertical-align: middle; padding-right: 60px; }
footer #footerNav { font-size: 0; line-height: 0; text-align: center; margin-bottom: 40px; }
footer #footerNav a { position: relative; display: inline-block; font-size: 1.6rem; line-height: 3rem; color: #333333; font-weight: 700; text-decoration: none; font-feature-settings: "palt"; padding: 20px 40px; }
footer #footerNav a.navArr::before,
footer #footerNav a.navArr::after { position: absolute; display: block; content: ""; }
footer #footerNav a.navArr::before { top: 34px; left: 23px; width: 10px; height: 1px; background-color: #000000; }
footer #footerNav a.navArr::after { top: 31px; left: 26px; width: 7px; height: 7px; border: solid #000000; border-width: 0 1px 1px 0; transform: rotate(-45deg); }
footer #footerNav a.navOut::before,
footer #footerNav a.navOut::after { position: absolute; display: block; border: solid #000000; content: ""; }
footer #footerNav a.navOut::before { top: 30px; left: 25px; width: 10px; height: 8px; border-width: 1px; }
footer #footerNav a.navOut::after { top: 35px; left: 23px; width: 5px; height: 5px; border-width: 0 0 1px 1px; }
footer #footerCopy { font-size: 1.5rem; line-height: 1; text-align: center; }
footer #footerCopy span { font-weight: 700; }

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

@media screen and (min-width: 821px) {
	footer #pageTop a,
	footer #pageTop a::before,
	footer #pageTop a::after { transition: 0.2s ease; }
	footer #footerNav a:hover { text-decoration: underline; }
	footer #pageTop a:hover { background-color: #ffffff; }
	footer #pageTop a:hover::before,
	footer #pageTop a:hover::after { background-color: #000000; }
}

@media screen and (max-width: 767px) {
	footer { padding: 45px calc( 15 / 320 * 100% ) 25px; }
	footer #footerInner { position: relative; max-width: 500px; }
	footer #pageTop { position: static !important; margin-top: -74px; margin-bottom: 20px; }
	footer #pageTop a { width: 56px; height: 56px; }
	footer #pageTop a::before,
	footer #pageTop a::after { top: -3px; }
	footer #footerBanner { margin-bottom: 30px; }
	footer #footerBanner a { max-width: 290px; border-width: 2px; margin-right: auto; margin-left: auto; }
	footer #footerBanner a::before { right: 8px; }
	footer #footerBanner a::after { right: 15px; }
	footer #footerBanner a dl { display: block; padding: 10px 35px 0 105px; }
	footer #footerBanner a dl dt { display: block; width: 100%; font-size: 1.4rem; line-height: 2rem; padding-left: 0; margin-bottom: 5px; }
	footer #footerBanner a dl dd { display: block; font-size: 1.2rem; line-height: 1.6rem; padding-right: 0; }
	footer #footerNav { border-top: solid 1px #bcbcbc; text-align: left; margin-bottom: 25px; }
	footer #footerNav a { display: block; border-bottom: solid 1px #bcbcbc; font-size: 1.4rem; line-height: 3rem; padding: 3px 5px 3px 25px; }
	footer #footerNav a.navArr::before { top: 17px; left: 8px; }
	footer #footerNav a.navArr::after { top: 14px; left: 11px; }
	footer #footerNav a.navOut::before { top: 13px; left: 10px; }
	footer #footerNav a.navOut::after { top: 18px; left: 8px; }
	footer #footerCopy { font-size: 1.3rem; }
}