#chart_lead { margin-top: 3rem; } #chart_lead .lead_txt { font-size: 1.8rem; line-height: 2.2; text-align: center; margin-top: 3rem; } #chart_lead .lead_img { text-align: center; } #chart_detail { margin: 8rem 0; } #chart_detail .chart_box { padding: 3rem 4rem 4rem; background: url(../img/management_bg.jpg) no-repeat center/cover; border-radius: 40px; position: relative; } #chart_detail .label { color: #fff; font-size: 1.8rem; font-weight: bold; line-height: 1; padding: 0.5rem 1rem; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } #chart_detail .chart_ttl { font-size: 2.8rem; font-weight: bold; text-align: center; } #chart_detail .chart_ttl span { font-size: 80%; } #chart_detail .chart_list { margin-top: 2rem; display: flex; flex-wrap: wrap; } #chart_detail .chart_list li { width: 32%; margin: 0 2% 3% 0; border-radius: 5px; } #chart_detail .chart_list li:nth-child(3n) { margin-right: 0; } #chart_detail .chart_list li a, #chart_detail .chart_list li span { display: block; font-size: 2rem; font-weight: bold; padding: 3rem 5rem; background-color: #fff; border: 1px solid #8c8c8c; border-radius: 5px; position: relative; } #chart_detail .chart_list li a::before, #chart_detail .chart_list li span::before { content: ''; width: auto; position: absolute; } #chart_detail .chart_list li span::before { content: none; height: 60%; aspect-ratio: 1 / 1; background: url(/recruit/common/img/icon_symbol.png) no-repeat center/100%; right: 2rem; bottom: 50%; transform: translateY(50%); opacity: 0.6; } #chart_detail .chart_list li a { background: #fff url(/recruit/common/img/arrow_g01.png) no-repeat center left 2rem/1.6rem; } #chart_detail .chart_list li a::before { background: no-repeat center / 100%; height: 110%; right: 1rem; bottom: 0; } #chart_detail .chart_btn { text-align: center; } #chart_detail .chart_btn a { display: inline-block; font-size: 1.6rem; padding: 1.5rem 0 1.5rem 4.8rem; background: url(/recruit/common/img/arrow_g03.png) no-repeat center left/3.8rem; } #chart_detail .chart_btn a span { font-size: 120%; font-weight: bold; border-bottom: 1px solid #000; } #chart_detail .chart_bnn { margin-top: 1rem; text-align: center; } #chart_detail .chart_bnn a { display: inline-block; margin: 0 1rem; } #chart_detail .management_area { background-image: url(../img/management_bg.jpg); } #chart_detail .management_area .label { background-color: #07a33e; } #chart_detail .management_area .chart_ttl { color: #07a33e; } #chart_detail .production_area { background-image: url(../img/production_bg.jpg); } #chart_detail .production_area .label { background-color: #0c739b; } #chart_detail .production_area .chart_ttl { color: #0c739b; } #chart_detail .sales_area { background-image: url(../img/sales_bg.jpg); } #chart_detail .sales_area .label { background-color: #d55770; } #chart_detail .sales_area .chart_ttl { color: #d55770; } #chart_detail .sales_area .chart_list a.link01::before { aspect-ratio: 126 / 152; background-image: url(../img/sales_img01.png); } #chart_detail .sales_area .chart_list a.link02::before { aspect-ratio: 136 / 154; background-image: url(../img/sales_img02.png); } #chart_detail .research_area { background-image: url(../img/research_bg.jpg); } #chart_detail .research_area .label { background-color: #bc922c; } #chart_detail .research_area .chart_ttl { color: #bc922c; } #chart_detail .research_area .chart_list a.link01::before { aspect-ratio: 173 / 150; background-image: url(../img/research_img01.png); } #chart_detail .research_area .chart_list a.link02::before { aspect-ratio: 151 / 155; background-image: url(../img/research_img02.png); } #chart_detail .research_area .chart_list a.link03::before { aspect-ratio: 197 / 151; background-image: url(../img/research_img03.png); } #chart_detail .research_area .chart_list a.link04::before { aspect-ratio: 176 / 154; background-image: url(../img/research_img04.png); } #chart_detail .research_area .chart_list a.link05::before { aspect-ratio: 137 / 158; background-image: url(../img/research_img05.png); } #chart_detail .logistics_area { margin: 3rem 0; padding-bottom: 2rem !important; background: none; border: 1px solid #000; } #chart_detail .logistics_area .label { background-color: #000; } #chart_detail .logistics_area .chart_ttl { color: #000; line-height: 1.2; } #chart_detail .arrow_area { padding: 3rem 0 22rem; background: url(../img/bg.jpg) no-repeat center top/cover; position: relative; } #chart_detail .arrow_area .chart_box { padding: 3rem 3rem 4rem; } #chart_detail .arrow_area .chart_wrap { width: 38%; margin: 0 11.5% 0 auto; } #chart_detail .arrow_area .chart_list li { width: 100%; margin: 0 0 6%; } #chart_detail .arrow_area .arrow_txt { color: #011542; font-size: 1.6rem; padding: 0.5rem 1rem; background-color: #fff; border: 2px solid #011542; position: absolute; } #chart_detail .arrow_area .arrow_txt.txt01 { top: 25%; left: 0; } #chart_detail .arrow_area .arrow_txt.txt02 { top: 11%; left: 17%; } #chart_detail .arrow_area .arrow_txt.txt03 { top: 6%; left: 33%; } #chart_detail .arrow_area .arrow_txt.txt04 { top: 22%; left: 36%; } #chart_detail .arrow_area .arrow_txt.txt05 { top: 40%; left: 27%; } #chart_detail .arrow_area .arrow_txt.txt06 { bottom: 3%; left: 52%; } #chart_detail .arrow_area .arrow_txt.txt07 { bottom: 3%; left: 70%; padding: 1.8rem 1rem; } #chart_detail .arrow_area .arrow_txt.txt08 { top: 18%; right: 0; } #chart_detail .arrow_area .arrow_txt.txt09 { top: 47%; left: 34.5%; } #learnmore { padding: 8rem 0; background-color: #e8f6ee; } #learnmore .more_list { margin-top: 5rem; display: flex; justify-content: space-between; } #learnmore .more_list li { width: 32%; padding: 2.5rem; background-color: #fff; border-radius: 20px; text-align: center; } #learnmore .more_list li.active { background-color: #07a33e; } #learnmore .more_list li.active .ttl, #learnmore .more_list li.active .txt { color: #fff; } #learnmore .more_list .ttl { margin-top: 2rem; font-size: 2.2rem; font-weight: bold; background: url(/recruit/common/img/arrow_g01.png) no-repeat center right/1.6rem; } #learnmore .more_list .txt { margin-top: 1.5rem; font-size: 1.6rem; text-align: left; } @media screen and (min-width: 768px) and (max-width: 1224px) { #chart_lead .lead_txt { font-size: 1.4vw; } #chart_detail { margin: 6rem 0; } #chart_detail .chart_box { padding: 2rem 2rem 3rem; border-radius: 20px; } #chart_detail .label { font-size: 1.4vw; } #chart_detail .chart_ttl { font-size: 2.2vw; } #chart_detail .chart_list { margin-top: 1rem; } #chart_detail .chart_list li { margin-bottom: 2%; } #chart_detail .chart_list li a, #chart_detail .chart_list li span { font-size: 1.6vw; padding: 1.2rem 2rem; } #chart_detail .chart_list li a::before { height: 90%; } #chart_detail .chart_btn a { font-size: 1.3vw; padding-left: 2.8rem; background-size: 1.8rem auto; } #chart_detail .chart_bnn { margin: 0; } #chart_detail .management_area .chart_bnn a img, #chart_detail .research_area .chart_bnn a img { width: 80%; } #chart_detail .arrow_area { padding: 2rem 0 12.5rem; background-size: 100% auto; } #chart_detail .arrow_area .arrow_txt { font-size: 1.3vw; padding: .5rem; border-width: 1px; } #chart_detail .arrow_area .arrow_txt.txt01 { left: -2%; } #chart_detail .arrow_area .arrow_txt.txt03 { left: 30%; top: 5%; } #chart_detail .arrow_area .arrow_txt.txt04 { left: 34%; } #chart_detail .arrow_area .arrow_txt.txt05 { left: 26%; } #chart_detail .arrow_area .arrow_txt.txt06 { left: 49%; } #chart_detail .arrow_area .arrow_txt.txt07 { padding: 1.3rem .5rem; } #chart_detail .arrow_area .arrow_txt.txt09 { left: 34%; } #chart_detail .arrow_area .chart_box { padding: 2rem 1.5rem; } #chart_detail .logistics_area { margin: 2rem 0 3rem; } } @media screen and (max-width: 767px) { #chart_lead { margin-top: 2rem; } #chart_lead .lead_txt { font-size: 4vw; text-align: left; margin-top: 1rem; } #chart_detail { margin: 5rem 0; } #chart_detail .chart_box { padding: 2.5rem 2rem; border-radius: 20px; } #chart_detail .label { font-size: 3.7vw; white-space: nowrap; } #chart_detail .chart_ttl { font-size: 5.8vw; } #chart_detail .chart_list { margin-top: 1.5rem; } #chart_detail .chart_list li { width: 100%; margin: 0 0 1.5rem; } #chart_detail .chart_list li a, #chart_detail .chart_list li span { font-size: 4.5vw; padding: 2rem 3rem; } #chart_detail .chart_list li a { background-size: 1.2rem; background-position: center left 1rem; } #chart_detail .chart_btn a { font-size: 4vw; padding: 1.5rem 0 1.5rem 3.8rem; background-size: 3rem; } #chart_detail .chart_bnn { margin-top: 1rem; } #chart_detail .chart_bnn a { margin: 0; } #chart_detail .management_area { background-image: url(../img/management_bg_sp.jpg); } #chart_detail .production_area { background-image: url(../img/production_bg_sp.jpg); } #chart_detail .sales_area { background-image: url(../img/sales_bg_sp.jpg); } #chart_detail .research_area { background-image: url(../img/research_bg_sp.jpg); } #chart_detail .logistics_area { margin: 32vw 0 40vw; padding-bottom: 1rem !important; padding-top: 1.7rem !important; } #chart_detail .logistics_area .chart_ttl { line-height: 1; } #chart_detail .arrow_area { padding: 34vw 0 41vw; background-image: url(../img/bg_sp.jpg); background-size: contain; } #chart_detail .arrow_area .chart_box { padding: 2.5rem 1.5rem 2rem; } #chart_detail .arrow_area .chart_wrap { width: 70%; margin: 0 11.5% 0 auto; } #chart_detail .arrow_area .chart_list li { margin: 0 0 1.5rem; } #chart_detail .arrow_area .chart_btn { text-align: left; } #chart_detail .arrow_area .chart_btn a { padding-top: 0.5rem; padding-bottom: 0.5rem; } #chart_detail .arrow_area .arrow_txt { font-size: 3.4vw; border-width: 1px; } #chart_detail .arrow_area .arrow_txt.txt01 { top: 31%; left: 0; } #chart_detail .arrow_area .arrow_txt.txt02 { top: 12%; left: 8%; } #chart_detail .arrow_area .arrow_txt.txt03 { top: 1.5%; left: 35%; } #chart_detail .arrow_area .arrow_txt.txt04 { top: 36.2%; left: 41%; } #chart_detail .arrow_area .arrow_txt.txt05 { top: 46.2%; left: 61%; } #chart_detail .arrow_area .arrow_txt.txt06 { bottom: 2.5%; left: 17%; } #chart_detail .arrow_area .arrow_txt.txt07 { bottom: 2.5%; left: 60%; padding: 0.5em; line-height: 1.5; } #chart_detail .arrow_area .arrow_txt.txt08 { top: 24%; right: 0; } #chart_detail .arrow_area .arrow_txt.txt09 { top: 46.2%; left: 16%; } #chart_detail .arrow_area .arrow_txt.vertical { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 0.5em 0.1em; } #learnmore { padding: 6rem 0; } #learnmore .more_list { margin-top: 3rem; display: block; } #learnmore .more_list li { width: 100%; margin-bottom: 1rem; padding: 1.5rem 2rem; border-radius: 10px; text-align: left; } #learnmore .more_list .list_wrap { display: flex; align-items: center; } #learnmore .more_list .list_wrap img { width: 25%; margin-right: 2rem; } #learnmore .more_list .ttl { margin-top: 0; font-size: 4.53vw; padding-right: 2.5rem; background-size: 1.3rem auto; } #learnmore .more_list .txt { margin-top: 1rem; font-size: 3.46vw; } } /*# sourceMappingURL=chart.css.map */