@charset "utf-8";

/* =========================================================
  サイト ： CITIZEN Group 100th anniversary website
  タイプ ： Genealogy
  更新日 ： 2018-05-22
========================================================= */

#genealogy #pageTitle { width: 100%; height: 320px; background: url(../../genealogy/images/genealogy_page_title_bg.jpg) no-repeat center center; background-size: cover; padding-right: 30px; padding-left: 30px; }
#genealogy #pageTitle #pageTitleBox { max-width: 1140px; margin: 0 auto; }
#genealogy #pageTitle #pageTitleBox #pageTitleH1 { color: #ffffff; padding-top: 136px; margin-left: 50px; }
#genealogy #pageTitle #pageTitleBox #pageTitleH1 #pageTitleTxt1 { display: block; font-size: 4.6rem; font-weight: 400; line-height: 4.6rem; margin-bottom: 9px; }

#genealogy #genealogyOriginWrap { font-weight: 400; padding-top: 105px; padding-bottom: 100px; padding-right: 30px; padding-left: 30px; }
#genealogy #genealogyOriginWrap .genealogyOriginBox { max-width: 940px; margin-right: auto; margin-left: auto; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline { max-width: 800px; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 70px; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h2 { font-size: 2rem; font-weight: 600; line-height: 2.6rem; position: relative; display: inline-block; margin-bottom: 60px; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h2::after { position: absolute; bottom: -6px; left: 0; content: ""; width: 100%; height: 1px; background-color: #000000; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h3 { font-size: 3.2rem; line-height: 3.8rem; text-align: center; padding-left: 1px; margin-bottom: 36px; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline p { font-size: 1.7rem; line-height: 3rem; text-align: left }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder { max-width: 940px; margin-right: auto; margin-left: auto; overflow: hidden; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder1 { width: 26.596%; float: left; margin-right: 10.106%; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder2 { width: 26.596%; float: left; margin-right: 10.106%; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder3 { width: 26.596%; float: left; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder dl dt { font-size: 1.4rem; line-height: 2.1rem; margin-top: 18px; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder dl dt span { font-size: 2.5rem; line-height: 3.6rem; display: block; padding-top: 20px; padding-bottom: 10px; }
#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder dl dd { font-size: 1.4rem; line-height: 2.5rem; text-align: left; }

#genealogy #genealogyGroupWrap { font-weight: 400; width: 100%; background: url(../../genealogy/images/genealogy_group_bg.jpg) no-repeat left top; background-size: cover; text-align: center; padding-top: 120px; padding-bottom: 120px; padding-right: 30px; padding-left: 30px; }
#genealogy #genealogyGroupWrap .genealogyGroupBox { max-width: 1100px; margin-right: auto; margin-left: auto; background-color: rgba(255,255,255,0.85); padding-top: 90px; padding-bottom: 100px; padding-right: 30px; padding-left: 30px; }
#genealogy #genealogyGroupWrap .genealogyGroupBox h2 { font-size: 2.8rem; line-height: 4.2rem; padding-left: 1px; margin-bottom: 30px; }
#genealogy #genealogyGroupWrap .genealogyGroupBox p { max-width: 800px; font-size: 1.7rem; line-height: 3rem; margin-right: auto; margin-left: auto; text-align: left; margin-bottom: 60px; }
#genealogy #genealogyGroupWrap .genealogyGroupBtn { max-width: 560px; margin-right: auto; margin-left: auto; }
#genealogy #genealogyGroupWrap .genealogyGroupBtn a { width: 100%; height: 0; background: url(../../genealogy/images/genealogy_group_btn_r.gif) no-repeat left top; background-size: 100% 100%; padding-top: 32.1428%; display: block; position: relative; }
#genealogy #genealogyGroupWrap .genealogyGroupBtn a img { position: absolute; top: 0; left: 0; opacity: 1; transition: opacity 0.3s ease; }

@media screen and (min-width: 769px) {
	#genealogy #genealogyGroupWrap .genealogyGroupBtn a:hover img { opacity: 0; }
}

@media screen and (max-width: 1280px) {
	#genealogy #pageTitle { height: 220px; }
	#genealogy #pageTitle #pageTitleBox #pageTitleH1 { padding-top: 92px; margin-left: 35px; }
	#genealogy #pageTitle #pageTitleBox #pageTitleH1 #pageTitleTxt1 { font-size: 3.5rem; line-height: 3.5rem; margin-bottom: 8px; }
	
	#genealogy #genealogyOriginWrap { padding-top: 60px; padding-bottom: 55px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline { margin-bottom: 36px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h2 { font-size: 1.7rem; line-height: 2.3rem; margin-bottom: 56px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h2::after { bottom: -4px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h3 { font-size: 3.2rem; line-height: 4.2rem; margin-bottom: 22px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline p { font-size: 1.7rem; line-height: 3rem; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder { max-width: 800px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder1 { width: 28.6%; margin-right: 7.1%; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder2 { width: 28.6%; margin-right: 7.1%; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder3 { width: 28.6%; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder dl dt { font-size: 1.3rem; line-height: 2rem; margin-top: 12px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder dl dt span { font-size: 2.4rem; line-height: 3.2rem; padding-top: 12px; padding-bottom: 7px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder dl dd { font-size: 1.3rem; line-height: 2.2rem; }
	
	#genealogy #genealogyGroupWrap { padding-top: 70px; padding-bottom: 70px; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox { max-width: 940px; padding-top: 50px; padding-bottom: 70px; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox h2 { font-size: 2.4rem; line-height: 3.6rem; letter-spacing: 0; padding-left: 0; margin-bottom: 18px; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox p { font-size: 1.6rem; line-height: 2.6rem; margin-bottom: 36px; }
	#genealogy #genealogyGroupWrap .genealogyGroupBtn { max-width: 480px; }
}

@media screen and (max-width: 767px) {
	#genealogy #pageTitle { height: 140px; padding-right: 20px; padding-left: 20px; }
	#genealogy #pageTitle #pageTitleBox #pageTitleH1 { padding-top: 57px; margin-left: 5px; }
	#genealogy #pageTitle #pageTitleBox #pageTitleH1 #pageTitleTxt1 { font-size: 2.5rem; line-height: 2.5rem; margin-bottom: 6px; }
	
	#genealogy #genealogyOriginWrap { padding-top: 30px; padding-bottom: 40px; padding-right: 20px; padding-left: 20px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline { margin-bottom: 25px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h2 { font-size: 1.5rem; line-height: 2.2rem; margin-bottom: 36px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h2::after { bottom: -3px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline h3 { font-size: 2.5rem; line-height: 3.4rem; margin-bottom: 18px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginOutline p { font-size: 1.6rem; line-height: 2.6rem; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder { max-width: 280px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder1 { width: 100%; float: none; margin-right: 0; margin-bottom: 35px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder2 { width: 100%; float: none; margin-right: 0; margin-bottom: 35px; }
	#genealogy #genealogyOriginWrap .genealogyOriginBox .genealogyOriginFounder .genealogyOriginFounder3 { width: 100%; float: none; }
	
	#genealogy #genealogyGroupWrap { padding-top: 50px; padding-bottom: 50px; padding-right: 20px; padding-left: 20px; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox { padding-top: 25px; padding-bottom: 25px; padding-right: 20px; padding-left: 20px; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox h2 { font-size: 1.9rem; line-height: 3rem; margin-bottom: 12px; text-align: left; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox h2 br { display: none; }
	#genealogy #genealogyGroupWrap .genealogyGroupBox p { font-size: 1.5rem; line-height: 2.6rem; margin-bottom: 15px; }
}