@charset "utf-8"; /* ========================================================= サイト ： CITIZEN Group 100th anniversary website タイプ ： History 更新日 ： 2018-06-29 ========================================================= */ /* 0）その他スタイル ========================================================= */ #history #contentsWrap { font-family: "Verdana", "Arial", sans-serif; } #history #pageTitle { background: url(/cms/cwc/global/history/products/images/page_title_bg.jpg) no-repeat center center; background-size: cover; width: 100%; height: 720px; } #history #pageTitle #pageTitleBox { max-width: 1140px; height: 100%; margin: 0 auto; position: relative; } #history #pageTitle #pageTitleBox #pageTitleH1 { position: absolute; top: 310px; left: 50px; } #history #pageTitle #pageTitleBox #pageTitleH1 #pageTitleTxt1 { display: block; color: #ffffff; font-size: 7.6rem; font-feature-settings: "palt"; line-height: 7.2rem; letter-spacing: 12px; font-family: "Verdana", "Arial", sans-serif; } #history #tlAttTxt { border-bottom: 1px solid #cccccc; text-align: center; padding: 22px 20px 26px 20px; background-color: #ffffff; } #history #tlAttTxt p { display: inline-block; color: #555555; font-size: 1.2rem; font-weight: 500; line-height: 2rem; } @media screen and (max-width: 1024px) { #history #pageTitle { height: 520px; } #history #pageTitle #pageTitleBox #pageTitleH1 { top: 210px; left: 70px; } #history #pageTitle #pageTitleBox #pageTitleH1 #pageTitleTxt1 { font-size: 5.8rem; line-height: 5.6rem; letter-spacing: 10px; } #history #tlAttTxt { text-align: left; padding: 16px 20px 12px 20px; } } @media screen and (max-width: 767px) { #history #pageTitle { height: 340px; } #history #pageTitle #pageTitleBox #pageTitleH1 { top: 70px; left: 30px; } #history #pageTitle #pageTitleBox #pageTitleH1 #pageTitleTxt1 { font-size: 3.8rem; line-height: 3.6rem; letter-spacing: 4px; } } /* 1）セクションの見出し ＆ コンテンツフレーム ========================================================= */ #history #year1Title, #history #year2Title, #history #year3Title, #history #year4Title, #history #year5Title, #history #year6Title, #history #year7Title, #history #year8Title { width: 100%; position: relative; background-color: #000000; cursor: pointer; } #history #year1Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year1_title_bg.jpg) no-repeat center center; } #history #year2Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year2_title_bg.jpg) no-repeat center center; } #history #year3Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year3_title_bg.jpg) no-repeat center center; } #history #year4Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year4_title_bg.jpg) no-repeat center center; } #history #year5Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year5_title_bg.jpg) no-repeat center center; } #history #year6Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year6_title_bg.jpg) no-repeat center center; } #history #year7Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year7_title_bg.jpg) no-repeat center center; } #history #year8Title div { width: 100%; height: 100%; position: absolute; z-index: 11; background: url(/cms/cwc/global/history/products/images/year8_title_bg.jpg) no-repeat center center; } #history #year1Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -292px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year2Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -157px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year3Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -123px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year4Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -206px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year5Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -121px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year6Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -141px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year7Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -138px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year8Title h2 { text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -138px; z-index: 12; text-shadow: 0px 0px 6px rgba(0,0,0,0.3); } #history #year1Title h2 b, #history #year2Title h2 b, #history #year3Title h2 b, #history #year4Title h2 b, #history #year5Title h2 b, #history #year6Title h2 b, #history #year7Title h2 b, #history #year8Title h2 b { color: #ffffff; font-size: 4rem; line-height: 3.2rem; display: inline-block; padding-bottom: 25px; } #history #year1Title h2 i, #history #year2Title h2 i, #history #year3Title h2 i, #history #year4Title h2 i, #history #year5Title h2 i, #history #year6Title h2 i, #history #year7Title h2 i, #history #year8Title h2 i { color: #ffffff; font-style: normal; font-size: 5.6rem; line-height: 6.6rem; } #history #year1Title span, #history #year2Title span, #history #year3Title span, #history #year4Title span, #history #year5Title span, #history #year6Title span, #history #year7Title span, #history #year8Title span { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; opacity: 0; z-index: 13; background-color: #000000; } #history .yearTitleHover { height: 320px; transition: all 0.4s ease; } #history .yearTitleHoverOn { height: 460px; } #history .yearH2Title { transform: scale(1); transition: all 0.4s ease; } #history .yearH2TitleOn { transform: scale(1.4); } /* 表示のオンオフ 【 block ｜ none 】 ------------------------------------------ */ #history #year1Conts { width: 100%; display: none; } #history #year1Conts::before { background: url(/cms/cwc/global/history/products/images/year1_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year2Conts { width: 100%; display: none; } #history #year2Conts::before { background: url(/cms/cwc/global/history/products/images/year2_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year3Conts { width: 100%; display: none; } #history #year3Conts::before { background: url(/cms/cwc/global/history/products/images/year3_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year4Conts { width: 100%; display: none; } #history #year4Conts::before { background: url(/cms/cwc/global/history/products/images/year4_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year5Conts { width: 100%; display: none; } #history #year5Conts::before { background: url(/cms/cwc/global/history/products/images/year5_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year6Conts { width: 100%; display: none; } #history #year6Conts::before { background: url(/cms/cwc/global/history/products/images/year6_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year7Conts { width: 100%; display: none; } #history #year7Conts::before { background: url(/cms/cwc/global/history/products/images/year7_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year8Conts { width: 100%; display: none; } #history #year8Conts::before { background: url(/cms/cwc/global/history/products/images/year8_fixed_bg.jpg) no-repeat; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; content: ""; z-index: -1; } #history #year1ContsBox { width: 100%; } #history #year2ContsBox { width: 100%; } #history #year3ContsBox { width: 100%; } #history #year4ContsBox { width: 100%; } #history #year5ContsBox { width: 100%; } #history #year6ContsBox { width: 100%; } #history #year7ContsBox { width: 100%; } #history #year8ContsBox { width: 100%; } @media screen and (max-width: 1024px) { #history #year1Title div, #history #year2Title div, #history #year3Title div, #history #year4Title div, #history #year5Title div, #history #year6Title div, #history #year7Title div, #history #year8Title div { background-size: 1160px 278px; } #history #year1Title h2 { margin-top: -52px; margin-left: -239px; } #history #year2Title h2 { margin-top: -52px; margin-left: -129px; } #history #year3Title h2 { margin-top: -52px; margin-left: -101px; } #history #year4Title h2 { margin-top: -52px; margin-left: -169px; } #history #year5Title h2 { margin-top: -52px; margin-left: -99px; } #history #year6Title h2 { margin-top: -52px; margin-left: -116px; } #history #year7Title h2 { margin-top: -52px; margin-left: -113px; } #history #year8Title h2 { margin-top: -52px; margin-left: -113px; } #history #year1Title h2 b, #history #year2Title h2 b, #history #year3Title h2 b, #history #year4Title h2 b, #history #year5Title h2 b, #history #year6Title h2 b, #history #year7Title h2 b, #history #year8Title h2 b { font-size: 3rem; line-height: 3rem; padding-bottom: 12px; } #history #year1Title h2 i, #history #year2Title h2 i, #history #year3Title h2 i, #history #year4Title h2 i, #history #year5Title h2 i, #history #year6Title h2 i, #history #year7Title h2 i, #history #year8Title h2 i { font-size: 4.6rem; line-height: 5.2rem; } #history .yearTitleHover { height: 200px; } #history .yearTitleHoverOn { height: 280px; } } @media screen and (max-width: 767px) { #history #year1Title div, #history #year2Title div, #history #year3Title div, #history #year4Title div, #history #year5Title div, #history #year6Title div, #history #year7Title div, #history #year8Title div { background-size: 768px 184px; } #history #year1Title h2 { margin-top: -42px; margin-left: -135px; } #history #year2Title h2 { margin-top: -42px; margin-left: -73px; } #history #year3Title h2 { margin-top: -42px; margin-left: -57px; } #history #year4Title h2 { margin-top: -42px; margin-left: -96px; } #history #year5Title h2 { margin-top: -42px; margin-left: -56px; } #history #year6Title h2 { margin-top: -42px; margin-left: -65px; } #history #year7Title h2 { margin-top: -42px; margin-left: -64px; } #history #year8Title h2 { margin-top: -42px; margin-left: -64px; } #history #year1Title h2 b, #history #year2Title h2 b, #history #year3Title h2 b, #history #year4Title h2 b, #history #year5Title h2 b, #history #year6Title h2 b, #history #year7Title h2 b, #history #year8Title h2 b { font-size: 1.8rem; line-height: 2rem; padding-bottom: 9px; } #history #year1Title h2 i, #history #year2Title h2 i, #history #year3Title h2 i, #history #year4Title h2 i, #history #year5Title h2 i, #history #year6Title h2 i, #history #year7Title h2 i, #history #year8Title h2 i { font-size: 2.6rem; line-height: 3.2rem; } #history .yearTitleHover { height: 130px; } #history .yearTitleHoverOn { height: 180px; } } /* 2）年表タイムライン ========================================================= */ #history .timeLineWrap { padding: 50px 30px 80px 30px; } #history .timeLineWrap .timeLineRead { max-width: 1140px; margin: 0 auto; } #history .timeLineWrap .timeLineRead p { font-size: 1.6rem; line-height: 3rem; text-align: center; margin-bottom: 50px; } #history .timeLineWrap .timeLineMain { max-width: 1140px; margin: 0 auto; padding-bottom: 80px; position: relative; } #history .timeLineWrap .timeLineMainStart { position: relative; } #history .timeLineWrap .timeLineMainStart::after { position: absolute; top: 0; left: 50%; margin-top: 100px; margin-left: -2px; content: ""; width: 3px; height: calc(100% - 100px); background-color: #000000; } #history .timeLineWrap .timeLineMainRoute { position: relative; } #history .timeLineWrap .timeLineMainRoute::after { position: absolute; top: 0; left: 50%; margin-left: -2px; content: ""; width: 3px; height: 100%; background-color: #000000; } #history .timeLineWrap .timeLineMain .timeLineL { width: 50%; position: relative; float: left; clear: left; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear { width: 100%; height: 60px; position: relative; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear::before { position: absolute; top: 95px; left: 100%; z-index: 11; margin-left: -10px; content: ""; width: 19px; height: 19px; background-color: #ffffff; border: 1px solid #000000; border-radius: 50%; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear::after { position: absolute; top: 99px; left: 100%; z-index: 12; margin-left: -6px; content: ""; width: 11px; height: 11px; background-color: #000000; border-radius: 50%; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear div { width: 84.210526%; color: #b19967; font-style: italic; font-size: 4.6rem; line-height: 3.2rem; text-align: right; } #history .timeLineWrap .timeLineMain .timeLineL .timeLinePost { width: 84.210526%; border: 1px solid #000000; border-radius: 6px; padding: 30px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLinePost::before { position: absolute; top: 104px; left: 84.210526%; z-index: 10; content: ""; width: 14.210526%; height: 1px; background-color: #000000; } #history .timeLineWrap .timeLineMain .timeLineR { width: 50%; position: relative; float: right; clear: right; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear { width: 100%; height: 60px; position: relative; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear::before { position: absolute; top: 95px; left: 0; z-index: 11; margin-left: -10px; content: ""; width: 19px; height: 19px; background-color: #ffffff; border: 1px solid #000000; border-radius: 50%; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear::after { position: absolute; top: 99px; left: 0; z-index: 12; margin-left: -6px; content: ""; width: 11px; height: 11px; background-color: #000000; border-radius: 50%; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear div { width: 84.210526%; color: #b19967; font-style: italic; font-size: 4.6rem; line-height: 3.2rem; text-align: left; margin-left: 15.789473%; } #history .timeLineWrap .timeLineMain .timeLineR .timeLinePost { width: 84.210526%; border: 1px solid #000000; border-radius: 6px; padding: 30px; margin-left: 15.789473%; } #history .timeLineWrap .timeLineMain .timeLineR .timeLinePost::before { position: absolute; top: 104px; right: 84.210526%; z-index: 10; content: ""; width: 14.210526%; height: 1px; background-color: #000000; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox { width: 100%; overflow: hidden; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox:not(:last-child) { margin-bottom: 35px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxImg { width: 31.100478%; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt { width: 62.918660%; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3 { font-size: 1.3rem; line-height: 1.8rem; padding: 4px 9px 4px 9px; display: inline-block; background-color: #111111; border-radius: 2px; } /* カテゴリーアイコン ------------------------------------------ */ /* 01 時計 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon1 { color: #ffffff; position: relative; } /* 02 工作機械 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon2 { color: #ffffff; position: relative; } /* 03 自動組立機関連 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon3 { color: #ffffff; position: relative; } /* 04 LED */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon4 { color: #ffffff; position: relative; } /* 05 スイッチ */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon5 { color: #ffffff; position: relative; } /* 06 モータ */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon6 { color: #ffffff; position: relative; } /* 07 水晶 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon7 { color: #ffffff; position: relative; } /* 08 液晶 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon8 { color: #ffffff; position: relative; } /* 09 情報機器 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon9 { color: #ffffff; position: relative; } /* 10 健康機器 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon10 { color: #ffffff; position: relative; } /* 11 電子機器 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon11 { color: #ffffff; position: relative; } /* 12 眼鏡 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon12 { color: #ffffff; position: relative; } /* 13 宝飾 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon13 { color: #ffffff; position: relative; } /* 14 その他 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon14 { color: #ffffff; position: relative; } /* 15 電子部品実装機 */ #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3.tlpBoxIcon15 { color: #ffffff; position: relative; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h4 { font-size: 2rem; font-weight: 700; line-height: 2.8rem; margin-top: 12px; margin-bottom: 6px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h4 span { font-size: 1.4rem; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt p { font-size: 1.4rem; line-height: 2.4rem; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeNN .tlPostBoxTxt { width: 100%; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeLR .tlPostBoxImg { float: left; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeLR .tlPostBoxTxt { float: right; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeRL .tlPostBoxImg { float: right; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeRL .tlPostBoxTxt { float: left; } #history .timeLineWrap .timeLineMain .timeLineEnd { clear: both; } @media screen and (max-width: 1024px) { #history .timeLineWrap { padding: 40px 25px 50px 25px; } #history .timeLineWrap .timeLineRead p { font-size: 1.5rem; line-height: 2.6rem; margin-bottom: 35px; } #history .timeLineWrap .timeLineMain { padding-bottom: 50px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear { height: 52px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear div { font-size: 4rem; } #history .timeLineWrap .timeLineMain .timeLineL .timeLinePost { padding: 25px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear { height: 52px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear div { font-size: 4rem; } #history .timeLineWrap .timeLineMain .timeLineR .timeLinePost { padding: 25px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox:not(:last-child) { margin-bottom: 30px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h4 { font-size: 1.8rem; line-height: 2.6rem; margin-top: 11px; margin-bottom: 5px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h4 span { font-size: 1.3rem; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt p { font-size: 1.3rem; line-height: 2.2rem; } } @media screen and (max-width: 767px) { #history .timeLineWrap { padding: 18px 20px 25px 20px; } #history .timeLineWrap .timeLineRead p { font-size: 1.4rem; line-height: 2.4rem; text-align: left; margin-bottom: 25px; } #history .timeLineWrap .timeLineRead p br { display: none; } #history .timeLineWrap .timeLineMain { padding-bottom: 32px; } #history .timeLineWrap .timeLineMainStart::after { left: 7px; margin-top: 86px; height: calc(100% - 86px); } #history .timeLineWrap .timeLineMainRoute::after { left: 7px; } #history .timeLineWrap .timeLineMain .timeLineL { width: 100%; float: none; clear: none; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear { height: 46px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear::before { top: 76px; left: 7px; margin-left: -10px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear::after { top: 80px; left: 7px; margin-left: -6px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLineYear div { width: calc(100% - 40px); font-size: 3.3rem; text-align: left; margin-left: 40px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLinePost { width: calc(100% - 40px); padding: 20px; margin-left: 40px; } #history .timeLineWrap .timeLineMain .timeLineL .timeLinePost::before { display: none; } #history .timeLineWrap .timeLineMain .timeLineL .timeLinePost::after { position: absolute; top: 85px; left: 7px; z-index: 10; content: ""; width: 34px; height: 1px; background-color: #000000; } #history .timeLineWrap .timeLineMain .timeLineR { width: 100%; float: none; clear: none; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear { height: 46px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear::before { top: 76px; left: 7px; margin-left: -10px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear::after { top: 80px; left: 7px; margin-left: -6px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLineYear div { width: calc(100% - 40px); font-size: 3.3rem; text-align: left; margin-left: 40px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLinePost { width: calc(100% - 40px); padding: 20px; margin-left: 40px; } #history .timeLineWrap .timeLineMain .timeLineR .timeLinePost::before { display: none; } #history .timeLineWrap .timeLineMain .timeLineR .timeLinePost::after { position: absolute; top: 85px; left: 7px; z-index: 10; content: ""; width: 34px; height: 1px; background-color: #000000; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox:not(:last-child) { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #000000; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxImg { width: 100%; margin-bottom: 18px; text-align: center; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxImg img { max-width: 200px; width: 100%; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt { width: 100%; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h3 { font-size: 1.2rem; line-height: 1.6rem; padding: 4px 9px 3px 9px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt h4 { font-size: 1.6rem; line-height: 2.4rem; margin-top: 7px; margin-bottom: 4px; } #history .timeLineWrap .timeLineMain .timeLinePost .tlPostBox .tlPostBoxTxt p { line-height: 2rem; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeLR .tlPostBoxImg { float: none; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeLR .tlPostBoxTxt { float: none; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeRL .tlPostBoxImg { float: none; } #history .timeLineWrap .timeLineMain .timeLinePost .tlpBoxChangeRL .tlPostBoxTxt { float: none; } } /* 3）年表タイムライン 間隔調整クラス ========================================================= */ /* /* 50 ～ 290（ 10px step ） /* 300 ～ 1500（ 50px step ） /* ========================================================= */ #history .timeLineWrap .timeLineMain .tlMt50 { margin-top: calc(50 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt60 { margin-top: calc(60 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt70 { margin-top: calc(70 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt80 { margin-top: calc(80 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt90 { margin-top: calc(90 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt100 { margin-top: calc(100 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt110 { margin-top: calc(110 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt120 { margin-top: calc(120 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt130 { margin-top: calc(130 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt140 { margin-top: calc(140 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt150 { margin-top: calc(150 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt160 { margin-top: calc(160 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt170 { margin-top: calc(170 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt180 { margin-top: calc(180 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt190 { margin-top: calc(190 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt200 { margin-top: calc(200 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt210 { margin-top: calc(210 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt220 { margin-top: calc(220 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt230 { margin-top: calc(230 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt240 { margin-top: calc(240 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt250 { margin-top: calc(250 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt260 { margin-top: calc(260 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt270 { margin-top: calc(270 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt280 { margin-top: calc(280 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt290 { margin-top: calc(290 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt300 { margin-top: calc(300 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt350 { margin-top: calc(350 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt400 { margin-top: calc(400 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt450 { margin-top: calc(450 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt500 { margin-top: calc(500 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt550 { margin-top: calc(550 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt600 { margin-top: calc(600 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt650 { margin-top: calc(650 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt700 { margin-top: calc(700 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt750 { margin-top: calc(750 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt800 { margin-top: calc(800 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt850 { margin-top: calc(850 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt900 { margin-top: calc(900 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt950 { margin-top: calc(950 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1000 { margin-top: calc(1000 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1050 { margin-top: calc(1050 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1100 { margin-top: calc(1100 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1150 { margin-top: calc(1150 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1200 { margin-top: calc(1200 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1250 { margin-top: calc(1250 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1300 { margin-top: calc(1300 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1350 { margin-top: calc(1350 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1400 { margin-top: calc(1400 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1450 { margin-top: calc(1450 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1500 { margin-top: calc(1500 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1550 { margin-top: calc(1550 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1600 { margin-top: calc(1600 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1650 { margin-top: calc(1650 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1700 { margin-top: calc(1700 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1750 { margin-top: calc(1750 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1800 { margin-top: calc(1800 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1850 { margin-top: calc(1850 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1900 { margin-top: calc(1900 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt1950 { margin-top: calc(1950 / 1140 * 100%); } #history .timeLineWrap .timeLineMain .tlMt2000 { margin-top: calc(2000 / 1140 * 100%); } @media screen and (max-width: 767px) { #history .timeLineWrap .timeLineMain .tlMt50, #history .timeLineWrap .timeLineMain .tlMt60, #history .timeLineWrap .timeLineMain .tlMt70, #history .timeLineWrap .timeLineMain .tlMt80, #history .timeLineWrap .timeLineMain .tlMt90, #history .timeLineWrap .timeLineMain .tlMt100, #history .timeLineWrap .timeLineMain .tlMt110, #history .timeLineWrap .timeLineMain .tlMt120, #history .timeLineWrap .timeLineMain .tlMt130, #history .timeLineWrap .timeLineMain .tlMt140, #history .timeLineWrap .timeLineMain .tlMt150, #history .timeLineWrap .timeLineMain .tlMt160, #history .timeLineWrap .timeLineMain .tlMt170, #history .timeLineWrap .timeLineMain .tlMt180, #history .timeLineWrap .timeLineMain .tlMt190, #history .timeLineWrap .timeLineMain .tlMt200, #history .timeLineWrap .timeLineMain .tlMt210, #history .timeLineWrap .timeLineMain .tlMt220, #history .timeLineWrap .timeLineMain .tlMt230, #history .timeLineWrap .timeLineMain .tlMt240, #history .timeLineWrap .timeLineMain .tlMt250, #history .timeLineWrap .timeLineMain .tlMt260, #history .timeLineWrap .timeLineMain .tlMt270, #history .timeLineWrap .timeLineMain .tlMt280, #history .timeLineWrap .timeLineMain .tlMt290, #history .timeLineWrap .timeLineMain .tlMt300, #history .timeLineWrap .timeLineMain .tlMt350, #history .timeLineWrap .timeLineMain .tlMt400, #history .timeLineWrap .timeLineMain .tlMt450, #history .timeLineWrap .timeLineMain .tlMt500, #history .timeLineWrap .timeLineMain .tlMt550, #history .timeLineWrap .timeLineMain .tlMt600, #history .timeLineWrap .timeLineMain .tlMt650, #history .timeLineWrap .timeLineMain .tlMt700, #history .timeLineWrap .timeLineMain .tlMt750, #history .timeLineWrap .timeLineMain .tlMt800, #history .timeLineWrap .timeLineMain .tlMt850, #history .timeLineWrap .timeLineMain .tlMt900, #history .timeLineWrap .timeLineMain .tlMt950, #history .timeLineWrap .timeLineMain .tlMt1000, #history .timeLineWrap .timeLineMain .tlMt1050, #history .timeLineWrap .timeLineMain .tlMt1100, #history .timeLineWrap .timeLineMain .tlMt1150, #history .timeLineWrap .timeLineMain .tlMt1200, #history .timeLineWrap .timeLineMain .tlMt1250, #history .timeLineWrap .timeLineMain .tlMt1300, #history .timeLineWrap .timeLineMain .tlMt1350, #history .timeLineWrap .timeLineMain .tlMt1400, #history .timeLineWrap .timeLineMain .tlMt1450, #history .timeLineWrap .timeLineMain .tlMt1500, #history .timeLineWrap .timeLineMain .tlMt1550, #history .timeLineWrap .timeLineMain .tlMt1600, #history .timeLineWrap .timeLineMain .tlMt1650, #history .timeLineWrap .timeLineMain .tlMt1700, #history .timeLineWrap .timeLineMain .tlMt1750, #history .timeLineWrap .timeLineMain .tlMt1800, #history .timeLineWrap .timeLineMain .tlMt1850, #history .timeLineWrap .timeLineMain .tlMt1900, #history .timeLineWrap .timeLineMain .tlMt1950, #history .timeLineWrap .timeLineMain .tlMt2000 { margin-top: 30px; } }