@charset "utf-8";

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

header { position: relative; margin-top: 30px; margin-bottom: 70px; }
header::before { position: absolute; top: 0; left: 0; display: block; width: 100%; background: url(/adv/okome/images/hf_slash.gif) repeat-x center top; background-size: 29px 30px; padding-top: 30px; content: ""; margin-top: -30px; }
header #headerInner { background: url(/adv/okome/images/hf_bg.jpg) repeat center top; margin-bottom: 45px; }
header #headerTitle { max-width: 1300px; margin-right: auto; margin-left: auto; }
header #headerTitle span { display: block; background-image: url(/adv/okome/images/header_page_main1.jpg); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 240 / 1300 * 100% ); }

@media screen and (max-width: 1300px) {
	header { margin-top: calc( 30 / 1300 * 100% ); }
	header::before { background-size: auto 100%; padding-top: calc( 30 / 1300 * 100% ); margin-top: calc( -30 / 1300 * 100% ); }
}

@media screen and (max-width: 767px) {
	header { margin-top: 15px; margin-bottom: 30px; }
	header::before { background-size: 15px; padding-top: 15px; margin-top: -15px; }
	header #headerInner { background-size: 930px 140px; margin-bottom: 20px; }
	header #headerTitle { background: url(/adv/okome/images/header_page_main2.jpg) no-repeat center top; background-size: auto 100px; }
	header #headerTitle span { max-width: 500px; background-image: none; padding-top: 100px; margin-right: auto; margin-left: auto; }
	header #headerNav { padding-right: calc( 15 / 320 * 100% ); padding-left: calc( 15 / 320 * 100% ); }
}

@media screen and (max-width: 375px) {
	header #headerTitle { background-size: 133% auto; }
	header #headerTitle span { padding-top: calc( 100 / 375 * 100% ); }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 pageNav 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.pageNav { max-width: 1160px; border: solid #000000; border-width: 1px 0; font-size: 0; line-height: 0; text-align: center; margin-right: auto; margin-left: auto; }
.pageNav * { position: relative; display: inline-block; background-size: cover; }
.pageNav *::before,
.pageNav *::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; background-position: center center; background-size: cover; }
.pageNav div::before { opacity: 0; }
.pageNav a::after { opacity: 0; }
.pageNav *:nth-child(1)::before { background-image: url(/adv/okome/images/nav_btn1_1.png); }
.pageNav *:nth-child(1)::after  { background-image: url(/adv/okome/images/nav_btn1_2.png); }
.pageNav a:nth-child(2)::before { background-image: url(/adv/okome/images/nav_btn2_1.png); }
.pageNav *:nth-child(2)::after  { background-image: url(/adv/okome/images/nav_btn2_2.png); }
.pageNav a:nth-child(3)::before { background-image: url(/adv/okome/images/nav_btn3_1.png); }
.pageNav *:nth-child(3)::after  { background-image: url(/adv/okome/images/nav_btn3_2.png); }
.pageNav a:nth-child(4)::before { background-image: url(/adv/okome/images/nav_btn4_1.png); }
.pageNav *:nth-child(4)::after  { background-image: url(/adv/okome/images/nav_btn4_2.png); }
.pageNav a:nth-child(5)::before { background-image: url(/adv/okome/images/nav_btn5_1.png); }
.pageNav *:nth-child(5)::after  { background-image: url(/adv/okome/images/nav_btn5_2.png); }
.pageNav.navhead { margin-bottom: 60px; }
	header .pageNav * { width: 280px; padding-top: 75px; }
	#footer .pageNav * { width: 232px; padding-top: 62px; }

@media screen and (max-width: 1160px) {
	#footer .pageNav * { width: calc( 1 / 5 * 100% ); padding-top: calc( 62 / 1160 * 100% ); }
}

@media screen and (max-width: 1120px) {
	header .pageNav * { width: calc( 1 / 4 * 100% ); padding-top: calc( 75 / 1120 * 100% ); }
}

@media screen and (min-width: 821px) {
	.pageNav *::before,
	.pageNav *::after { transition: 0.2s ease; }
	.pageNav div.navOpacity::before { opacity: 1; }
	.pageNav div.navOpacity::after { opacity: 0; }
	.pageNav a:hover::before { opacity: 0; }
	.pageNav a:hover::after { opacity: 1; }
}

@media screen and (max-width: 767px) {
	.pageNav { max-width: 500px; }
	.pageNav *::before,
	.pageNav *::after { background-size: 130%; }
	.pageNav *:nth-child(1)::after,
	.pageNav *:nth-child(4)::before { background-size: 120%; }
		header .pageNav * { padding-top: calc( 55 / 500 * 100% ); }
		#footer .pageNav { padding-top: 7px; padding-bottom: 7px; }
		#footer .pageNav * { width: calc( 1 / 4 * 100% ); padding-top: calc( 32 / 500 * 100% ); }
}





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

.categoryTitle { font-size: 0; line-height: 0; background-size: cover; margin: 0 auto 40px; }
.categoryTitle.titleTopics { width: 294px; height: 40px; background-image: url(/adv/okome/images/category_topics.gif); }
.categoryTitle.titleTopics1 { width: 520px; height: 100px; background-image: url(/adv/okome/images/category_topics1.gif); }
.categoryTitle.titleTrivia { width: 264px; height: 60px; background-image: url(/adv/okome/images/category_trivia.gif); }
.categoryTitle.titleProject { width: 286px; height: 40px; background-image: url(/adv/okome/images/category_project.gif); }

@media screen and (max-width: 767px) {
	.categoryTitle { margin-bottom: 20px; }
	.categoryTitle.titleTopics { width: 147px; height: 20px; }
	.categoryTitle.titleTopics1 { width: 260px; height: 50px; }
	.categoryTitle.titleTrivia { width: 132px; height: 30px; }
	.categoryTitle.titleProject { width: 143px; height: 20px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 Home 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ homeMain ］
―――――――――――――――――――――――――――――― */

.homeMain { background-image: url(/adv/okome/images/home_main1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 550 / 1000 * 100% ); margin-bottom: 60px; }

@media screen and (max-width: 767px) {
	.homeMain { background-image: url(/adv/okome/images/home_main2.gif); padding-top: calc( 680 / 500 * 100% ); margin-bottom: 30px; }
}



/* ――――――――――――――――――――――――――――――
［ homeLead ］
―――――――――――――――――――――――――――――― */

.homeLead { font-size: 2rem; line-height: 3.5rem; color: #603813; font-weight: 700; text-indent: 1em; }

@media screen and (max-width: 767px) {
	.homeLead { font-size: 1.6rem; line-height: 2.8rem; color: #603813; font-weight: 700; text-indent: 1em; }
}



/* ――――――――――――――――――――――――――――――
［ homeTitle ］
―――――――――――――――――――――――――――――― */

.homeTitle { background-size: cover; font-size: 0; line-height: 0; margin-bottom: 20px; }
.homeTitle.titleNo1 { background-image: url(/adv/okome/images/home_enet1_title1.gif); padding-top: calc( 140 / 1000 * 100% ); }
.homeTitle.titleNo2 { background-image: url(/adv/okome/images/home_enet2_title1.gif); padding-top: calc( 140 / 1000 * 100% ); }
.homeTitle.titleNo3 { background-image: url(/adv/okome/images/home_enet3_title1.gif); padding-top: calc( 100 / 1000 * 100% ); }

@media screen and (max-width: 767px) {
	.homeTitle.titleNo1 { background-image: url(/adv/okome/images/home_enet1_title2.gif); padding-top: calc( 100 / 500 * 100% ); }
	.homeTitle.titleNo2 { background-image: url(/adv/okome/images/home_enet2_title2.gif); padding-top: calc( 140 / 500 * 100% ); }
	.homeTitle.titleNo3 { background-image: url(/adv/okome/images/home_enet3_title2.gif); padding-top: calc( 80 / 500 * 100% ); }
}



/* ――――――――――――――――――――――――――――――
［ homeEvent3 ］
―――――――――――――――――――――――――――――― */

.homeEvent3 { overflow: hidden; max-width: 900px; margin: 0 auto 100px; }
.homeEvent3 .eventImg { float: left; width: calc( 250 / 900 * 100% ); }
.homeEvent3 .eventData { float: right; width: calc( 600 / 900 * 100% ); margin-top: calc( 30 / 900 * 100% ); margin-bottom: calc( 80 / 900 * 100% ); }
.homeEvent3 .eventData span { display: block; background-image: url(/adv/okome/images/home_event3_data1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 105 / 600 * 100% ); }
.homeEvent3 .eventTxt { float: right; width: calc( 600 / 900 * 100% ); }

@media screen and (max-width: 767px) {
	.homeEvent3 { width: 300px; margin-bottom: 30px; }
	.homeEvent3 .eventImg { width: 120px; }
	.homeEvent3 .eventData { width: 163px; margin-bottom: 0; }
	.homeEvent3 .eventData span { background-image: url(/adv/okome/images/home_event3_data2.gif); padding-top: calc( 126 / 163 * 100% ); }
	.homeEvent3 .eventTxt { clear: both; float: none; width: 100%; padding-top: 20px; }
}




/* ――――――――――――――――――――――――――――――
［ homeList ］
―――――――――――――――――――――――――――――― */

.homeList { display: table; margin-right: -12px; margin-left: -12px; }
.homeList .listInner { display: table-cell; width: 25%; padding-right: 12px; padding-left: 12px; }
.homeList .listInner div { max-width: 180px; margin: 0 auto 15px; }
.homeList .listInner:not(:last-child) { border-right: solid 1px #603813; }
.homeList .listInner dl dt { margin-bottom: 10px; }
.homeList .listInner dl dt span { display: block; text-align: center; }
.homeList .listInner dl dt .listName1 { font-size: 2.8rem; line-height: 3.4rem; }
.homeList .listInner dl dt .listName2 { font-size: 1.5rem; line-height: 1.5rem; margin-bottom: 5px; }
.homeList .listInner dl dt .listName3 { font-size: 2rem; line-height: 2.4rem; }
.homeList .listInner dl dd { font-size: 1.6rem; line-height: 2.6rem; }


@media screen and (max-width: 767px) {
	.homeList { display: block; max-width: 400px; margin-right: auto; margin-left: auto; }
	.homeList .listInner { display: table; width: 100%; padding-right: 0; padding-left: 0; }
	.homeList .listInner div { display: table-cell; width: 100px; max-width: none; margin-bottom: 0; }
	.homeList .listInner:not(:last-child) { border-right: none; }
	.homeList .listInner dl { display: table-cell; vertical-align: middle; padding-left: 20px; }
	.homeList .listInner dl dt { margin-bottom: 5px; }
	.homeList .listInner dl dt .listName1 { font-size: 2.4rem; line-height: 2.8rem; }
	.homeList .listInner dl dt .listName2 { font-size: 1rem; line-height: 1.4rem; }
	.homeList .listInner dl dt .listName3 { font-size: 1.5rem; line-height: 2rem; }
	.homeList .listInner dl dd { font-size: 1.3rem; line-height: 2rem; }
}



/* ――――――――――――――――――――――――――――――
［ homeFrame ］
―――――――――――――――――――――――――――――― */

.homeFrame { border: solid 1px #603813; border-radius: 14px; padding: 44px; }
.homeFrame.frameType1 .frameCopy { max-width: 800px; margin: 0 auto 40px; }
.homeFrame.frameType1 .frameCopy span { display: block; background-image: url(/adv/okome/images/home_frame1_copy1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 40 / 800 * 100% ); }
.homeFrame.frameType1 .frameMain { overflow: hidden; margin-bottom: 45px; }
.homeFrame.frameType1 .frameMain .mainImg { float: left; width: calc( 380 / 910 * 100% ); margin-top: 6px; }
.homeFrame.frameType1 .frameMain .mainTxt { float: right; width: calc( 500 / 910 * 100% ); }
.homeFrame.frameType1 .frameLineup { overflow: hidden; }
.homeFrame.frameType1 .frameLineup div { width: calc( 445 / 910 * 100% ); }
.homeFrame.frameType1 .frameLineup div:nth-child(1) { float: left; }
.homeFrame.frameType1 .frameLineup div:nth-child(2) { float: right; }
.homeFrame.frameType2 { margin-bottom: 100px; }
.homeFrame.frameType2 .frameCopy { max-width: 800px; margin: 0 auto 50px; }
.homeFrame.frameType2 .frameCopy span { display: block; background-image: url(/adv/okome/images/home_frame2_copy1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 104 / 800 * 100% ); }
.homeFrame.frameType2 .frameImg { max-width: 640px; margin: 0 auto 40px; }

@media screen and (max-width: 1100px) {
	.homeFrame.frameType1 .frameMain .mainImg { float: none; max-width: 380px; width: 100%; margin: 0 auto 30px; }
	.homeFrame.frameType1 .frameMain .mainTxt { float: none; width: 100%; }
}

@media screen and (max-width: 767px) {
	.homeFrame { border-radius: 8px; padding: 20px 14px; }
	.homeFrame.frameType1 .frameCopy { max-width: 265px; margin-bottom: 15px; }
	.homeFrame.frameType1 .frameCopy span { background-image: url(/adv/okome/images/home_frame1_copy2.gif); padding-top: calc( 50 / 265 * 100% ); }
	.homeFrame.frameType1 .frameMain { margin-bottom: 20px; }
	.homeFrame.frameType1 .frameMain .mainImg { margin-bottom: 15px; }
	.homeFrame.frameType1 .frameLineup div { width: 100%; }
	.homeFrame.frameType1 .frameLineup div:nth-child(1) { float: none; margin-bottom: calc( 40 / 910 * 100% ); }
	.homeFrame.frameType1 .frameLineup div:nth-child(2) { float: none; }
	.homeFrame.frameType2 { margin-bottom: calc( 100 / 500 * 100% ); }
	.homeFrame.frameType2 .frameCopy { max-width: 245px; margin-bottom: 20px; }
	.homeFrame.frameType2 .frameCopy span { background-image: url(/adv/okome/images/home_frame2_copy2.gif); padding-top: calc( 85 / 245 * 100% ); }
	.homeFrame.frameType2 .frameImg { max-width: 250px; margin-bottom: 20px; }
}



/* ――――――――――――――――――――――――――――――
［ homeMore ］
―――――――――――――――――――――――――――――― */

.homeMore { position: relative; background-color: #fbd02b; border-radius: 14px; padding: 30px; margin-bottom: 120px; }
.homeMore .moreCircle { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 50%; width: calc( 212 / 1000 * 100% ); margin-top: calc( 30 / 1000 * 100% ); margin-left: calc( 30 / 1000 * 100% ); }
.homeMore .moreTitle { background-image: url(/adv/okome/images/home_more_title1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 315 / 940 * 100% ); margin-bottom: 30px; }
.homeMore .moreMain { overflow: hidden; max-width: 900px; margin-right: auto; margin-left: auto; }
.homeMore .moreMain .mainImg { float: right; width: calc( 445 / 900 * 100% ); }
.homeMore .moreMain .mainTxt { float: left; width: calc( 445 / 900 * 100% ); font-size: 2rem; line-height: 3.5rem; }

@media screen and (max-width: 1100px) {
	.homeMore .moreMain .mainImg { float: none; width: 445px; margin: 0 auto 30px; }
	.homeMore .moreMain .mainTxt { float: none; width: 100%; }
}

@media screen and (max-width: 767px) {
	.homeMore { padding: calc( 60 / 500 * 100% ) 20px 20px; margin-bottom: 60px; }
	.homeMore .moreCircle { width: calc( 110 / 500 * 100% ); margin-top: calc( -40 / 500 * 100% ); margin-left: calc( 10 / 500 * 100% ); }
	.homeMore .moreTitle { background-image: url(/adv/okome/images/home_more_title2.gif); padding-top: calc( 320 / 460 * 100% ); margin-bottom: 10px; }
	.homeMore .moreMain .mainImg { max-width: 320px; width: 100%; margin-bottom: 20px; }
	.homeMore .moreMain .mainTxt { font-size: 1.5rem; line-height: 2.5rem; }
}



/* ――――――――――――――――――――――――――――――
［ projectTitle ］
―――――――――――――――――――――――――――――― */

.projectTitle { margin-right: auto; margin-left: auto; }
.projectTitle { width: 340px; margin-bottom: 20px; }
.projectTitle span { position: relative; display: block; background-image: url(/adv/okome/images/home_project_title.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 40 / 340 * 100% ); }
.projectTitle span::before,
.projectTitle span::after { position: absolute; top: 0; bottom: 0; display: block; background-color: #603813; width: 70px; height: 1px; content: ""; margin-top: auto; margin-bottom: auto; }
.projectTitle span::before { left: -70px; }
.projectTitle span::after { right: -70px; }

@media screen and (max-width: 767px) {
	.projectTitle { width: 170px; }
	.projectTitle span::before,
	.projectTitle span::after { width: 35px; }
	.projectTitle span::before { left: -35px; }
	.projectTitle span::after { right: -35px; }
}



/* ――――――――――――――――――――――――――――――
［ projectPartner ］
―――――――――――――――――――――――――――――― */

.projectPartner { max-width: 1256px; margin-right: auto; margin-left: auto; }
.projectPartner .partnerLine1,
.projectPartner .partnerLine2,
.projectPartner .partnerLine3 { display: table; margin-right: auto; margin-left: auto; }
.projectPartner .partnerLine1 { width: calc( 404 / 1256 * 100% ); }
.projectPartner .partnerLine2 { width: calc( 770 / 1256 * 100% ); }
.projectPartner a { display: table-cell; vertical-align: middle; }
.projectPartner .partnerLine1 a { padding: calc( 10 / 404 * 100% ) calc( 25 / 404 * 100% ); }
.projectPartner .partnerLine2 a { padding: calc( 10 / 770 * 100% ) calc( 25 / 770 * 100% ); }
.projectPartner .partnerLine3 a { padding: calc( 10 / 1256 * 100% ) calc( 25 / 1256 * 100% ); }
.projectPartner .partnerLine1 a:nth-child(1) { width: 100%; }
.projectPartner .partnerLine2 a:nth-child(1) { width: calc( 250 / 770 * 100% ); }
.projectPartner .partnerLine2 a:nth-child(2) { width: calc( 280 / 770 * 100% ); }
.projectPartner .partnerLine2 a:nth-child(3) { width: calc( 240 / 770 * 100% ); }
.projectPartner .partnerLine3 a:nth-child(1) { width: calc( 276 / 1256 * 100% ); }
.projectPartner .partnerLine3 a:nth-child(2) { width: calc( 250 / 1256 * 100% ); }
.projectPartner .partnerLine3 a:nth-child(3) { width: calc( 210 / 1256 * 100% ); }
.projectPartner .partnerLine3 a:nth-child(4) { width: calc( 240 / 1256 * 100% ); }
.projectPartner .partnerLine3 a:nth-child(5) { width: calc( 280 / 1256 * 100% ); }





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 Topics 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ topicsMenu ］
―――――――――――――――――――――――――――――― */

.topicsMenu { max-width: 1140px; font-size: 0; line-height: 0; text-align: center; margin-right: auto; margin-left: auto; }
.topicsMenu .menuBtn { display: inline-block; width: calc( 530 / 1140 * 100% ); box-shadow: 0px 9px 18px 0px rgba(0,0,0,0.3); }
.topicsMenu .menuBtn:nth-child(even) { margin-left: calc( 80 / 1140 * 100% ); }
.topicsMenu .menuBtn:nth-child(n+3) { margin-top: calc( 80 / 1140 * 100% ); }

@media screen and (min-width: 821px) {
	.topicsMenu a.menuBtn { transition: 0.2s ease; }
	.topicsMenu a.menuBtn:hover { opacity: 0.7; }
}

@media screen and (max-width: 767px) {
	.topicsMenu { max-width: 300px; }
	.topicsMenu .menuBtn { display: block; width: 100%; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3); }
	.topicsMenu .menuBtn:nth-child(even) { margin-left: 0; }
	.topicsMenu .menuBtn:nth-child(n+3) { margin-top: 0; }
	.topicsMenu .menuBtn:not(:last-child) { margin-bottom: 35px; }
}



/* ――――――――――――――――――――――――――――――
［ detail1 ］
―――――――――――――――――――――――――――――― */

/* detail1Main
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ */

.detail1Main { background-image: url(/adv/okome/topics/images/detail1_main1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 350 / 1000 * 100% ); margin-bottom: 50px; }

@media screen and (max-width: 767px) {
	.detail1Main { background-image: url(/adv/okome/topics/images/detail1_main2.gif); padding-top: calc( 180 / 340 * 100% ); margin-bottom: 20px; }
}


/* detail1Tite
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ */

.detail1Tite { position: relative; background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 140 / 1000 * 100% ); margin-bottom: 60px; }
.detail1Tite.titleType1 { background-image: url(/adv/okome/topics/images/detail1_title1_1.gif); }
.detail1Tite.titleType2 { background-image: url(/adv/okome/topics/images/detail1_title1_2.gif); }
.detail1Tite.titleType3 { background-image: url(/adv/okome/topics/images/detail1_title1_3.gif); }
.detail1Tite::after { position: absolute; right: 0; bottom: -30px; left: 0; display: block; width: 200px; height: 1px; background-color: #000000; content: ""; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 767px) {
	.detail1Tite { padding-top: calc( 100 / 340 * 100% ); margin-bottom: 30px; }
	.detail1Tite.titleType1 { background-image: url(/adv/okome/topics/images/detail1_title2_1.gif); }
	.detail1Tite.titleType2 { background-image: url(/adv/okome/topics/images/detail1_title2_2.gif); }
	.detail1Tite.titleType3 { background-image: url(/adv/okome/topics/images/detail1_title2_3.gif); }
	.detail1Tite::after { bottom: -15px; width: 110px; }
}


/* detail1Lead
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ */

.detail1Lead { position: relative; background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 95 / 1000 * 100% ); margin-bottom: 45px; }
.detail1Lead.leadType1 { background-image: url(/adv/okome/topics/images/detail1_lead1_1.gif); }
.detail1Lead.leadType2 { background-image: url(/adv/okome/topics/images/detail1_lead1_2.gif); }
.detail1Lead.leadType3 { background-image: url(/adv/okome/topics/images/detail1_lead1_3.gif); }

@media screen and (max-width: 767px) {
	.detail1Lead { padding-top: calc( 80 / 340 * 100% ); margin-bottom: 20px; }
	.detail1Lead.leadType1 { background-image: url(/adv/okome/topics/images/detail1_lead2_1.gif); }
	.detail1Lead.leadType2 { background-image: url(/adv/okome/topics/images/detail1_lead2_2.gif); }
	.detail1Lead.leadType3 { background-image: url(/adv/okome/topics/images/detail1_lead2_3.gif); }
}



/* ――――――――――――――――――――――――――――――
［ logo ］
―――――――――――――――――――――――――――――― */

.logoMarumiya { width: 173px; margin-right: auto; margin-left: auto; }
.logoZojirushi { width: 452px; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 767px) {
	.logoMarumiya { width: 100px; }
	.logoZojirushi { width: 200px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 Trivia 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ triviaTitle ］
―――――――――――――――――――――――――――――― */

.triviaTitle { background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 545 / 1000 * 100% ); margin-bottom: 60px; }
.triviaTitle.titleType1 { background-image: url(/adv/okome/images/trivia_title1_1.jpg); }
.triviaTitle.titleType2 { background-image: url(/adv/okome/images/trivia_title1_2.jpg); }

@media screen and (max-width: 767px) {
	.triviaTitle { margin-bottom: 30px; }
	.triviaTitle.titleType1 { background-image: url(/adv/okome/images/trivia_title2_1.jpg); }
	.triviaTitle.titleType2 { background-image: url(/adv/okome/images/trivia_title2_2.jpg); }
}



/* ――――――――――――――――――――――――――――――
［ triviaPoint ］
―――――――――――――――――――――――――――――― */

.triviaPoint { width: 300px; margin: 0 auto 30px; }

@media screen and (max-width: 767px) {
	.triviaPoint { width: 160px; margin-bottom: 15px; }
}



/* ――――――――――――――――――――――――――――――
［ triviaProcess ］
―――――――――――――――――――――――――――――― */

.triviaProcess .processInner { overflow: hidden; }
.triviaProcess .processInner:not(:last-child) { margin-bottom: 80px; }
.triviaProcess .processTxt { width: calc( 100% - 420px ); font-size: 2rem; line-height: 4rem; }
.triviaProcess .processImg { width: 380px; margin-top: 8px; }
.triviaProcess *:nth-child(odd) .processTxt,
.triviaProcess *:nth-child(even) .processImg { float: left; }
.triviaProcess *:nth-child(even) .processTxt,
.triviaProcess *:nth-child(odd) .processImg { float: right; }

@media screen and (max-width: 767px) {
	.triviaProcess .processInner:not(:last-child) { margin-bottom: 50px; }
	.triviaProcess .processTxt { width: 100%; font-size: 1.5rem; line-height: 2.5rem; margin-bottom: 20px; }
	.triviaProcess .processImg { width: 230px; margin: 0 auto; }
	.triviaProcess *:nth-child(odd) .processTxt,
	.triviaProcess *:nth-child(even) .processImg,
	.triviaProcess *:nth-child(even) .processTxt,
	.triviaProcess *:nth-child(odd) .processImg { float: none; }
}



/* ――――――――――――――――――――――――――――――
［ triviaColumn ］
―――――――――――――――――――――――――――――― */

.triviaColumn { border: solid 1px #b4272d; padding: 60px 34px 100px; }
.triviaColumn .columnInner { max-width: 760px; margin-right: auto; margin-left: auto; }
.triviaColumn .columnTitle { width: 180px; margin: 0 auto 45px; }
.triviaColumn .columnImg { margin-bottom: 35px; }

@media screen and (max-width: 767px) {
	.triviaColumn { color: #606060; padding: 30px calc( 14 / 290 * 100% ); }
	.triviaColumn .columnTitle { width: 90px; margin-bottom: 15px; }
	.triviaColumn .columnImg { margin-bottom: 15px; }
}



/* ――――――――――――――――――――――――――――――
［ triviaName ］
―――――――――――――――――――――――――――――― */

.triviaName { overflow: hidden; }
.triviaName .nameTxt1 { float: left; width: calc( 100% - 330px ); margin-bottom: 30px; }
.triviaName .nameTxt1 span { display: block; width: 480px; background-image: url(/adv/okome/images/trivia_name_txt1.gif); background-size: cover; font-size: 0; line-height: 0; padding-top: 70px; }
.triviaName .nameImg { float: right; width: 290px; }
.triviaName .nameTxt2 { float: left; width: calc( 100% - 330px ); font-size: 1.5rem; line-height: 3rem; }

@media screen and (max-width: 870px) {
	.triviaName .nameTxt1 span { width: 100%; padding-top: calc( 70 / 480 * 100% ); }
}

@media screen and (max-width: 767px) {
	.triviaName .nameTxt1 { float: none; width: 200px; margin: 0 auto 20px; }
	.triviaName .nameTxt1 span { width: 100%; background-image: url(/adv/okome/images/trivia_name_txt2.gif); padding-top: 55px; }
	.triviaName .nameImg { float: none; width: 160px; margin: 0 auto 20px; }
	.triviaName .nameTxt2 { float: none; width: 100%; font-size: 1.4rem; line-height: 2rem; }
}




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 Project 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.projectMain { max-width: 1300px; margin: 0 auto 120px; }
.projectMain span { display: block; background-image: url(/adv/okome/images/project_main1.jpg); background-size: cover; font-size: 0; line-height: 0; padding-top: calc( 670 / 1300 * 100% ); }

@media screen and (max-width: 767px) {
	.projectMain { max-width: 500px; margin-bottom: 40px; }
	.projectMain span { background-image: url(/adv/okome/images/project_main2.jpg); padding-top: calc( 560 / 500 * 100% ); }
}



/* ――――――――――――――――――――――――――――――
［ projectTxt ］
―――――――――――――――――――――――――――――― */

.projectTxt { text-align: center; margin-bottom: 60px; }
.projectTxt .txtCopy { font-size: 6.3rem; line-height: 9.5rem; color: #603813; margin-bottom: 25px; }
.projectTxt .txtLead { font-size: 2.5rem; line-height: 5.8rem; }

@media screen and (max-width: 767px) {
	.projectTxt { margin-bottom: 30px; }
	.projectTxt .txtCopy { font-size: 2.5rem; line-height: 3.5rem; margin-bottom: 25px; }
	.projectTxt .txtLead { font-size: 1.5rem; line-height: 2.8rem; }
}



/* ――――――――――――――――――――――――――――――
［ projectOkome ］
―――――――――――――――――――――――――――――― */

.projectOkome { width: 160px; margin: 0 auto 100px; }

@media screen and (max-width: 767px) {
	.projectOkome { width: 70px; margin-bottom: 60px; }
}









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

#footer { position: relative; background: url(/adv/okome/images/hf_bg.jpg) repeat center top; margin-top: 30px; }
#footer::before { position: absolute; top: 0; left: 0; display: block; width: 100%; background: url(/adv/okome/images/hf_slash.gif) repeat-x center top; background-size: 29px 30px; padding-top: 30px; content: ""; margin-top: -30px; }
#footer #footerBg { background: url(/adv/okome/images/footer_bg.jpg) repeat-y center top; padding-top: 55px; padding-bottom: 55px; }

@media screen and (max-width: 1300px) {
	#footer { margin-top: calc( 30 / 1300 * 100% ); }
	#footer::before { background-size: auto 100%; padding-top: calc( 30 / 1300 * 100% ); margin-top: calc( -30 / 1300 * 100% ); }
	#footer #footerBg { background-size: 100% auto; padding-top: calc( 55 / 1100 * 100% ); padding-bottom: calc( 55 / 1100 * 100% ); }
}

@media screen and (max-width: 767px) {
	#footer { background-size: 930px 140px; margin-top: 15px; }
	#footer::before { background-size: 15px; padding-top: 15px; margin-top: -15px; }
	#footer #footerBg { background: none; padding: 30px calc( 15 / 320 * 100% ); }
}