* { box-sizing: border-box; } html { color: #000; font-family: Lato, Helvetica, Arial, sans-serif; font-size: 62.5%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; background-color: transparent; } #html { margin: 0  !important; } body { font-weight: 400; line-height: 1.5; position: relative; color: #000; padding: 0; margin: 0; background-color: #fff; } @media screen and (min-width: 780px) { body { min-width: 1100px; width: 100%; font-size: 2rem; } } @media screen and (max-width: 780px) { body { font-size: 1.6rem; } } p { margin: 0; text-justify: inter-ideograph; font-weight: 400; line-height: 1.8; } p a { color: #294e95  !important; } dl, dt, dd { padding: 0; margin: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } table, table th, table td { border-collapse: collapse; } img { max-width: 100%; max-height: 100%; } a, a:link, a:visited, a:active, input[type=submit]:hover { cursor: pointer; text-decoration: none; color: #000; } .bg_active a, .bg_active a:link, .bg_active a:visited, .bg_active a:active, .bg_active input[type=submit]:hover { color: #fff; } a:hover, a:focus, *:focus { outline: none; } a:hover { text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.5; } #wrap { width: 100%; position: relative; } .bt_wrap { text-align: center; } .news_box .bt_wrap { margin-top: 30px; } .bt { display: inline-block; text-align: center; border-radius: 4px; color: #294e95  !important; border: solid 1px #294e95  !important; height: 53px; line-height: 51px; font-size: 1.6rem; padding: 0 30px; background-color: #fff  !important; white-space: nowrap; } .bt:hover { transition: .3s ease all; background-color: #294e95  !important; color: #fff  !important; } @media screen and (min-width: 780px) { .bt { margin-top: 30px; } } @media screen and (max-width: 780px) { .bt { margin-top: 20px; } } #fv_box .bt { background-color: #c73d00  !important; border-color: #c73d00  !important; color: #fff  !important; } #fv_box .bt:hover { background-color: #000  !important; border-color: #000  !important; } #find_sec .bt, #lineup_sec .bt, #foot_sec .bt { background-color: #294e95  !important; color: #fff  !important; } #find_sec .bt:hover, #lineup_sec .bt:hover, #foot_sec .bt:hover { background-color: #000  !important; border-color: #000  !important; } .bt_wrap .bt { max-width: 389px; } .modal_wrapper .bt { background-color: #c73d00  !important; max-width: 309px  !important; margin-top: 0  !important; } .modal_wrapper .bt:hover { background-color: #000  !important; } .bt_modal .bt { background-color: #fff; color: #000  !important; } .bt_modal .bt:hover { background-color: #000; color: #fff  !important; } .bt_modal .bt:hover span svg { fill: #fff  !important; } .bt_modal .bt span { display: inline-block; position: relative; padding-right: 17px; } .bt_modal .bt span svg { fill: #000  !important; position: absolute; top: 50%; right: 0; width: 22px; height: 22px; transform: rotate(45deg) translateY(-50%); margin-top: -3px; } .bt_story .bt { margin-top: 20px; background-color: #b8322e; } .bt_story .bt:hover { background-color: #000; } #life_view .bt:hover span svg { fill: #fff  !important; transition: .3s ease all; } #life_view .bt span { display: inline-block; position: relative; padding-right: 25px; } #life_view .bt span svg { fill: #294e95  !important; position: absolute; top: 50%; right: 0; width: 18px; height: 18px; transform: rotate(0deg) translateY(-50%); margin-top: 0px; } .find_box .bt { margin-top: 0; position: absolute; bottom: 20px; transform: translateX(-50%); left: 50%; background-color: #294e95; } @media screen and (max-width: 780px) { .find_box .bt { max-width: calc(100% - 40px); } } .find_box .bt:hover { background-color: #000; } @media screen and (min-width: 780px) { .cont { padding-left: 80px; padding-right: 80px; } } @media screen and (max-width: 780px) { .cont { padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 780px) { .pc_br { display: none; } } @media screen and (min-width: 780px) { .sp_br { display: none; } } #fv_sec { width: 100%; height: 100vh; margin-top: -100vh; position: relative; display: flex; z-index: 11; } #fv_img { width: 100%; height: 100%; position: sticky; top: 0; left: 0; max-height: 100vh; overflow: hidden; } #fv_img:before { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #000; opacity: .3; } #fv_img img { min-height: 100vh; width: 100%; object-fit: cover; } #fv_box { z-index: 3; position: absolute; left: 0; } @media screen and (min-width: 780px) { #fv_box { top: 50%; transform: translateY(-50%); width: 100%; padding-left: 7%; } } @media screen and (max-width: 780px) { #fv_box { width: 100%; padding: 0 20px; bottom: 30px; padding-bottom: env(safe-area-inset-bottom); } } #fv_box #fv_text { color: #fff; font-weight: 800; line-height: 1.5; } @media screen and (min-width: 780px) { #fv_box #fv_text { font-size: 4.8rem; } } @media screen and (max-width: 780px) { #fv_box #fv_text { font-size: 2.4rem; } } #fv_tag { position: absolute; z-index: 2; } @media screen and (min-width: 780px) { #fv_tag { right: 80px; top: 80px; text-align: right; width: 275px; } } @media screen and (max-width: 780px) { #fv_tag { right: 20px; top: 20px; text-align: right; width: 100px; } } #fv_tag img { display: inline-block; height: auto; line-height: 1; } @media screen and (min-width: 780px) { #fv_tag img { width: 228px; } } @media screen and (max-width: 780px) { #fv_tag img { width: 110px; } } @media screen and (min-width: 780px) { #fv_tag img:last-child { display: none; } } @media screen and (max-width: 780px) { #fv_tag img:last-child { display: none; } } #main_area { position: relative; z-index: 12; pointer-events: none; } #main_area>* { pointer-events: auto; } #main_area_in { position: relative; background-color: #f5f5f5; } #main_area_in::before { content: ""; position: absolute; right: 0; background-image: url(//p2-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/corner.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } @media screen and (min-width: 780px) { #main_area_in::before { width: 160px; height: 160px; top: -160px; } } @media screen and (max-width: 780px) { #main_area_in::before { width: 45px; height: 45px; top: -45px; } } #find_sec { overflow: hidden; } @media screen and (min-width: 780px) { #find_sec { padding-top: 100px; padding-bottom: 100px; } } @media screen and (max-width: 780px) { #find_sec { padding-top: 60px; padding-bottom: 60px; padding-right: 0; } } @media screen and (min-width: 780px) { #find_wrap { margin-bottom: 100px; } } @media screen and (max-width: 780px) { #find_wrap { margin-bottom: 60px; width: 100%; overflow-x: scroll; } } #find_wrap_in { display: flex; } @media screen and (min-width: 780px) { #find_wrap_in { gap: 30px; } } @media screen and (max-width: 780px) { #find_wrap_in { margin-bottom: 60px; width: 1290px; gap: 10px; } } .find_box { background-color: #fff; padding: 20px; position: relative; } @media screen and (max-width: 780px) { .find_box { width: 284px; } } .find_box .find_box_img { margin: 20px 0; } .find_box h3 { font-weight: 400; } @media screen and (min-width: 780px) { .find_box h3 { font-size: 2rem; min-height: 60px; } } @media screen and (max-width: 780px) { .find_box h3 { font-size: 1.6rem; min-height: 48px; } } @media screen and (min-width: 780px) { .find_box ul { font-size: 1.6rem; padding-bottom: 85px; } } @media screen and (max-width: 780px) { .find_box ul { font-size: 1.2rem; padding-bottom: 70px; } } .find_box ul li { background-color: #f5f5f5; border-radius: 40px; padding: 8px 8px 8px 35px; position: relative; } .find_box ul li:not(:first-child) { margin-top: 5px; } .find_box ul li::before { content: ""; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); background-image: url(//p3-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/check.png); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 16px; height: 16px; } @media screen and (min-width: 780px) { #find_area { padding-top: 120px; } } @media screen and (max-width: 780px) { #find_area { padding-top: 80px; } } @media screen and (min-width: 780px) { #about_sec { padding-top: 100px; padding-bottom: 100px; } } @media screen and (max-width: 780px) { #about_sec { padding-top: 60px; padding-bottom: 60px; } } @media screen and (min-width: 780px) { .about_box { display: flex; } } @media screen and (min-width: 780px) { .about_box:nth-child(2n) { flex-direction: row-reverse; } #foot_sec .about_box:nth-child(2n) { flex-direction: row; } } @media screen and (min-width: 780px) { #foot_sec .about_box:nth-child(2n-1) { flex-direction: row-reverse; } } @media screen and (min-width: 780px) { .about_box:not(:first-child) { margin-top: 70px; } } @media screen and (max-width: 780px) { .about_box:not(:first-child) { margin-top: 40px; } } .about_box .about_box_img { position: relative; line-height: 1; display: block; border-radius: 16px; overflow: hidden; } @media screen and (min-width: 780px) { .about_box .about_box_img { width: 50%; } } .about_box .about_box_img .about_box_img_in { object-fit: cover; } @media screen and (min-width: 780px) { .about_box .about_box_img .about_box_img_in { min-height: 100%; width: 100%; } } @media screen and (max-width: 780px) { #find_area .about_box .about_box_img .about_box_img_in { min-height: 190px; width: 100%; } } .about_box .about_box_info { font-size: 2rem; } @media screen and (min-width: 780px) { .about_box .about_box_info { width: 50%; padding: 60px; } } @media screen and (max-width: 780px) { .about_box .about_box_info { padding: 30px 0; } } @media screen and (min-width: 780px) { .about_box .about_box_info .about_box_title { font-size: 4rem; } } @media screen and (max-width: 780px) { .about_box .about_box_info .about_box_title { font-size: 2.4rem; } } @media screen and (min-width: 780px) { .about_box .about_box_info .about_box_title span { font-size: 2rem; } } @media screen and (max-width: 780px) { .about_box .about_box_info .about_box_title span { font-size: 1.2rem; } } @media screen and (min-width: 780px) { .about_box .about_box_info .about_box_text { margin-top: 30px; } } @media screen and (max-width: 780px) { .about_box .about_box_info .about_box_text { margin-top: 20px; font-size: 1.2rem; } } @media screen and (min-width: 780px) { #point_wrap { display: flex; gap: 30px; } } @media screen and (min-width: 780px) { #point_wrap .point_box { flex: 1; } } @media screen and (max-width: 780px) { #point_wrap .point_box:not(:first-child) { margin-top: 40px; } } #point_wrap .point_box .point_box_img { line-height: 1; } #point_wrap .point_box .point_box_img img { width: 100%; height: auto; border-radius: 16px; overflow: hidden; } #point_wrap .point_box .point_box_info { margin-top: 20px; } #point_wrap .point_box .point_box_info .point_box_title { text-align: center; font-size: 2.3rem; font-weight: 700; } #point_wrap .point_box .point_box_info .point_box_text { font-size: 1.6rem; margin-top: 20px; } #story_wrap { position: relative; } @media screen and (min-width: 780px) { #story_wrap { padding-top: 160px; } } @media screen and (max-width: 780px) { #story_wrap { padding-top: 110px; } } #story_wrap #story_circle { text-align: center; z-index: 2; text-align: center; } @media screen and (min-width: 780px) { #story_wrap #story_circle { display: flex; align-items: center; justify-content: center; width: 290px; height: 290px; border-radius: 100%; position: absolute; top: 50%; left: 50%; background-color: #fff; transform: translate(-50%, -50%); } } @media screen and (max-width: 780px) { #story_wrap #story_circle { margin-bottom: 30px; } } #story_wrap #story_circle #story_circle_title { font-weight: 800; line-height: 1; position: relative; display: inline-block; position: relative; } @media screen and (min-width: 780px) { #story_wrap #story_circle #story_circle_title { font-size: 5.8rem; letter-spacing: 6px; } } @media screen and (max-width: 780px) { #story_wrap #story_circle #story_circle_title { font-size: 3.6rem; letter-spacing: 5px; } } #story_wrap #story_circle #story_circle_title:before, #story_wrap #story_circle #story_circle_title:after { content: ""; position: absolute; width: 100%; height: 1px; background-color: #000; left: 0; z-index: 1; } @media screen and (min-width: 780px) { #story_wrap #story_circle #story_circle_title:before { bottom: -10px; } } @media screen and (max-width: 780px) { #story_wrap #story_circle #story_circle_title:before { bottom: -7px; } } @media screen and (min-width: 780px) { #story_wrap #story_circle #story_circle_title:after { bottom: -14px; } } @media screen and (max-width: 780px) { #story_wrap #story_circle #story_circle_title:after { bottom: -13px; } } #story_wrap #story_circle #story_circle_text { line-height: 1; margin-top: 30px; } @media screen and (min-width: 780px) { #story_wrap #story_circle #story_circle_text { margin-top: 30px; font-size: 1.7rem; } } @media screen and (max-width: 780px) { #story_wrap #story_circle #story_circle_text { font-size: 1.2rem; margin-top: 25px; } } @media screen and (min-width: 780px) { #story_wrap #story_wrap_in { display: flex; flex-wrap: wrap; box-sizing: content-box; margin: 0 -40px; } } @media screen and (min-width: 780px) { .story_box { width: 50%; padding: 0 20px; margin-top: 40px; } } @media screen and (min-width: 780px) { .story_box:nth-child(1), .story_box:nth-child(2) { margin-top: 0; } } @media screen and (max-width: 780px) { .story_box:nth-child(1) { margin-top: 0; } } @media screen and (max-width: 780px) { .story_box:not(:first-child) { margin-top: 30px; } } .story_box .story_box_in { position: relative; height: 100%; } .story_box_cover { position: relative; top: 0; left: 0; width: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; transition: .3s ease all; } @media screen and (min-width: 780px) { .story_box_cover { opacity: 0; transform: translateY(10%); } } @media screen and (min-width: 780px) { .story_box_in:hover .story_box_cover { opacity: 1; transform: translateY(0); transition: .3s .15s ease all; } } @media screen and (max-width: 780px) { .story_box:nth-child(1) .story_box_cover { background-color: #7a126b; } } @media screen and (max-width: 780px) { .story_box:nth-child(2) .story_box_cover { background-color: #871c23; } } @media screen and (max-width: 780px) { .story_box:nth-child(3) .story_box_cover { background-color: #11184f; } } @media screen and (max-width: 780px) { .story_box:nth-child(4) .story_box_cover { background-color: #285d50; } } .story_box_cover .story_box_cover_in { text-align: center; color: #fff; } @media screen and (min-width: 780px) { .story_box_cover .story_box_cover_in { padding: 60px 60px; } } @media screen and (max-width: 1600px) { .story_box_cover .story_box_cover_in { padding: 80px 60px; } } @media screen and (max-width: 780px) { .story_box_cover .story_box_cover_in { padding: 20px; } } .story_box_cover .story_box_cover_in .story_box_in_title { font-weight: 700; line-height: 1.3; } @media screen and (min-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_title { font-size: 2.8rem; } } @media screen and (max-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_title { font-size: 1.8rem; } } .story_box_cover .story_box_cover_in .story_box_in_title_sub { font-weight: 700; margin-top: 5px; } @media screen and (min-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_title_sub { font-size: 2rem; } } @media screen and (max-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_title_sub { font-size: 1.4rem; } } .story_box_cover .story_box_cover_in .story_box_in_text1 { margin-top: 10px; } @media screen and (min-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_text1 { font-size: 1.6rem; } } @media screen and (max-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_text1 { font-size: 1.2rem; } } .story_box_cover .story_box_cover_in .story_box_in_text2 { margin-top: 5px; } @media screen and (min-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_text2 { font-size: 1.6rem; } } @media screen and (max-width: 780px) { .story_box_cover .story_box_cover_in .story_box_in_text2 { font-size: 1.2rem; } } .story_box_img { top: 0; left: 0; width: 100%; display: block; background-repeat: no-repeat; background-size: cover; background-position: center center; } @media screen and (min-width: 780px) { .story_box_img { position: absolute; height: 100%; } } @media screen and (max-width: 780px) { .story_box_img { position: relative; max-height: 229px; overflow: hidden; } } .story_box_img img { object-fit: cover; } @media screen and (min-width: 780px) { .story_box_img img { min-height: 100%; width: 100%; } } @media screen and (max-width: 780px) { .story_box_img img { min-height: 229px; width: 100%; } } .story_box_img:before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; transition: .3s ease all; } @media screen and (min-width: 780px) { .story_box_img:before { opacity: 0; } } @media screen and (max-width: 780px) { .story_box_img:before { display: none; } } @media screen and (min-width: 780px) { .story_box_in:hover .story_box_img:before { opacity: .8; } } .story_box:nth-child(1) .story_box_img:before { background-color: #7a126b; } .story_box:nth-child(2) .story_box_img:before { background-color: #871c23; } .story_box:nth-child(3) .story_box_img:before { background-color: #11184f; } .story_box:nth-child(4) .story_box_img:before { background-color: #285d50; } @media screen and (min-width: 780px) { .sec_title_wrap { margin-bottom: 50px; } } @media screen and (max-width: 780px) { .sec_title_wrap { margin-bottom: 30px; } } .sec_title_wrap p { text-align: center; width: 100%; max-width: 520px; margin: 0 auto; } @media screen and (min-width: 780px) { .sec_title_wrap p { margin-top: 30px; } } @media screen and (max-width: 780px) { .sec_title_wrap p { margin-top: 15px; } } .sec_title { text-align: center; font-weight: 800; line-height: 1.5; } @media screen and (min-width: 780px) { .sec_title { font-size: 4.8rem; margin-bottom: 50px; } } @media screen and (max-width: 780px) { .sec_title { font-size: 2.6rem; padding-bottom: 30px; } } .sec_title_wrap .sec_title { margin-bottom: 0; } @media screen and (min-width: 780px) { #find_sec .sec_title br { display: none; } } @media screen and (min-width: 780px) { #life_bot .sec_title { font-size: 4rem; } } @media screen and (max-width: 780px) { #life_bot .sec_title { font-size: 2.4rem; } } @media screen and (min-width: 780px) { .sec_title span { font-size: 2rem; } } @media screen and (max-width: 780px) { .sec_title span { font-size: 1.2rem; } } .width_m { width: 100%; max-width: 1200px; margin: 0 auto; } @media screen and (min-width: 780px) { #lineup_sec { padding-top: 120px; } } @media screen and (max-width: 780px) { #lineup_sec { padding-top: 80px; } } @media screen and (min-width: 780px) { #news_sec { padding-top: 160px; padding-bottom: 160px; } } @media screen and (max-width: 780px) { #news_sec { padding-top: 110px; padding-bottom: 110px; } } @media screen and (min-width: 780px) { #news_wrap { display: flex; flex-wrap: wrap; margin: 0 -20px; } } @media screen and (min-width: 780px) { #news_wrap .news_box { width: 50%; margin-top: 40px; padding: 0 20px; } } @media screen and (max-width: 780px) { #news_wrap .news_box { margin-top: 40px; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3)); } } @media screen and (min-width: 780px) { #news_wrap .news_box:nth-child(1), #news_wrap .news_box:nth-child(2) { margin-top: 0; } } @media screen and (max-width: 780px) { #news_wrap .news_box:nth-child(1) { margin-top: 0; } } #news_wrap .news_box .news_box_in { background-color: #fff; height: 100%; border-radius: 16px; overflow: hidden; } #news_wrap .news_box .news_box_img { width: 100%; overflow: hidden; } @media screen and (min-width: 780px) { #news_wrap .news_box .news_box_img { max-height: 326px; } } @media screen and (max-width: 780px) { #news_wrap .news_box .news_box_img { max-height: 229px; } } #news_wrap .news_box .news_box_img img { width: 100%; object-fit: cover; } @media screen and (min-width: 780px) { #news_wrap .news_box .news_box_img img { min-height: 326px; } } @media screen and (max-width: 780px) { #news_wrap .news_box .news_box_img img { min-height: 229px; } } #news_wrap .news_box .news_box_info { padding: 30px; } #news_wrap .news_box .news_box_info .news_box_title { font-size: 2.3rem; font-weight: 700; } #news_wrap .news_box .news_box_info .news_box_text { font-size: 1.6rem; margin-top: 20px; } .modal_wrapper { z-index: 999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 60px 10px; text-align: center; } .modal_wrapper:not(:target) { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .modal_wrapper:target { opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s; } .modal_wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; vertical-align: middle; content: ""; } .modal_wrapper .modal_window { display: inline-block; z-index: 20; position: relative; border-radius: 2px; background: #f5f5f5; box-shadow: 0 0 30px rgba(0, 0, 0, .6); vertical-align: middle; } @media screen and (min-width: 780px) { .modal_wrapper .modal_window { width: 70%; max-width: 1200px; padding: 50px; } } @media screen and (max-width: 780px) { .modal_wrapper .modal_window { width: calc(100% - 40px); padding: 20px; } } .modal_wrapper .modal_window .modal_content { max-height: 80vh; overflow-y: auto; } @media screen and (max-width: 780px) { .modal_wrapper .modal_window .modal_content { padding: 10px 0; } } .modal_wrapper .modal_window .modal_content .modal_youtube { position: relative; width: 100%; padding-top: 56.25%; } .modal_wrapper .modal_window .modal_content .modal_youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .modal_overlay { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .8); } .modal_close_bt_wrap { margin-top: 20px; text-align: center; } .modal_close_bt_wrap .modal_close_bt { letter-spacing: 3px; } .modal_close_circle { z-index: 20; position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 100%; text-align: center; color: #fff  !important; background-color: #000; text-align: center; text-decoration: none; text-indent: 0; } @media screen and (min-width: 780px) { .modal_close_circle { top: -55px; right: -55px; width: 110px; height: 110px; } } @media screen and (max-width: 780px) { .modal_close_circle { top: -20px; right: -20px; width: 40px; height: 40px; } } .modal_close_circle img { width: 40%; height: auto; } @media screen and (min-width: 780px) { .modal_box { display: flex; } } @media screen and (min-width: 780px) { .modal_box:not(:first-child) { margin-top: -30px; } } @media screen and (max-width: 780px) { .modal_box:not(:first-child) { margin-top: 60px; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n) { flex-direction: row-reverse; } } .modal_box .modal_box_img { overflow: hidden; } @media screen and (min-width: 780px) { .modal_box .modal_box_img { width: 40%; max-height: 326px; } } @media screen and (max-width: 780px) { .modal_box .modal_box_img { margin-top: 5px; max-height: 350px; } } .modal_box .modal_box_img img { border-radius: 4px; width: 100%; object-fit: cover; } @media screen and (min-width: 780px) { .modal_box .modal_box_img img { min-height: 326px; } } @media screen and (max-width: 780px) { .modal_box .modal_box_img img { min-height: 350px; } } .modal_box .modal_info { flex: 1; } .modal_info_title { font-weight: 700; } @media screen and (min-width: 780px) { .modal_info_title { font-size: 1.8rem; } } @media screen and (max-width: 780px) { .modal_info_title { font-size: 1.4rem; display: none; } } @media screen and (min-width: 780px) { .speechBubble_sp .modal_info_title { display: none; } } @media screen and (max-width: 780px) { .speechBubble_sp .modal_info_title { display: block; } } .modal_info_text { margin-top: 5px; } @media screen and (min-width: 780px) { .modal_info_text { font-size: 1.4rem; } } @media screen and (max-width: 780px) { .modal_info_text { font-size: 1.2rem; } } .modal_info_text span { display: block; margin-top: 5px; } @media screen and (min-width: 780px) { .modal_info_text span { font-size: 1.2rem; } } @media screen and (max-width: 780px) { .modal_info_text span { font-size: 1.1rem; } } @media screen and (min-width: 780px) { .speechBubble_sp { display: none; } } .speechBubble, .speechBubble_in { position: relative; display: inline-block; border: 2px solid #000; background-color: #000; border-radius: 4px; text-align: left; font-size: 16px; font-weight: 400; line-height: 1.5; color: #000; z-index: 3; width: calc(100% - 10px); } .speechBubble:before, .speechBubble_in:before { content: ""; position: absolute; border-style: solid; } @media screen and (min-width: 780px) { .modal_info .speechBubble:before, .modal_info .speechBubble_in:before { top: 30%; } } @media screen and (max-width: 780px) { .modal_info .speechBubble:before, .modal_info .speechBubble_in:before { top: 0; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble:before, .modal_box:nth-child(2n-1) .modal_info .speechBubble_in:before { left: 0; border-width: 40px 40px 0 0; border-color: transparent #000 transparent transparent; translate: -100% -50%; } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble:before, .modal_box:nth-child(2n-1) .modal_info .speechBubble_in:before { left: 50px; border-width: 0 0 30px 30px; border-color: transparent transparent #000; translate: -50% -100%; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble:before, .modal_box:nth-child(2n) .modal_info .speechBubble_in:before { right: 0; border-width: 0 0 40px 40px; border-color: transparent transparent transparent #000; translate: 100% -50%; } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble:before, .modal_box:nth-child(2n) .modal_info .speechBubble_in:before { right: 45px; border-width: 0 30px 30px 0; border-color: transparent transparent #000; translate: -50% -100%; } } .speechBubble_sp .speechBubble:before, .speechBubble_sp .speechBubble_in:before { bottom: 0; } .modal_box:nth-child(2n-1) .speechBubble_sp .speechBubble:before, .modal_box:nth-child(2n-1) .speechBubble_sp .speechBubble_in:before { right: 45px; border-width: 30px 30px 0 0; border-color: #000 transparent transparent; translate: -50% 100%; } .modal_box:nth-child(2n) .speechBubble_sp .speechBubble:before, .modal_box:nth-child(2n) .speechBubble_sp .speechBubble_in:before { left: 50px; border-width: 30px 0 0 30px; border-color: #000 transparent transparent; translate: -50% 100%; } .speechBubble:after, .speechBubble_in:after { content: ""; position: absolute; border-style: solid; } @media screen and (min-width: 780px) { .modal_info .speechBubble:after, .modal_info .speechBubble_in:after { top: 30%; } } @media screen and (max-width: 780px) { .modal_info .speechBubble:after, .modal_info .speechBubble_in:after { top: 0; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble:after, .modal_box:nth-child(2n-1) .modal_info .speechBubble_in:after { left: 0; border-width: 35.2px 35.2px 0 0; translate: -100% calc(-50% + .4px); } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble:after, .modal_box:nth-child(2n-1) .modal_info .speechBubble_in:after { left: 50px; border-width: 0 0 25.2px 25.2px; translate: calc(-50% + .4px) -100%; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble:after, .modal_box:nth-child(2n) .modal_info .speechBubble_in:after { right: 0; border-width: 0 0 35.2px 35.2px; translate: 100% calc(-50% - .4px); } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble:after, .modal_box:nth-child(2n) .modal_info .speechBubble_in:after { right: 50px; border-width: 0 25.2px 25.2px 0; translate: calc(-50% - .4px) -100%; } } .speechBubble_sp .speechBubble:after, .speechBubble_sp .speechBubble_in:after { bottom: 0; } .modal_box:nth-child(2n-1) .speechBubble_sp .speechBubble:after, .modal_box:nth-child(2n-1) .speechBubble_sp .speechBubble_in:after { right: 50px; border-width: 25.2px 25.2px 0 0; translate: calc(-50% - .4px) 100%; } .modal_box:nth-child(2n) .speechBubble_sp .speechBubble:after, .modal_box:nth-child(2n) .speechBubble_sp .speechBubble_in:after { left: 50px; border-width: 25.2px 0 0 25.2px; translate: calc(-50% + .4px) 100%; } @media screen and (min-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble { top: 20px; left: -20px; } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble { top: 20px; left: 0; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble { right: -20px; top: 60px; } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble { right: 0; top: 15px; } } .modal_box:nth-child(2n-1) .modal_info .speechBubble:after { border-color: transparent #000 transparent transparent; } .modal_box:nth-child(2n) .modal_info .speechBubble:after { border-color: transparent transparent transparent #000; } .modal_box:nth-child(2n-1) .speechBubble_sp .speechBubble:after { border-color: #000 transparent transparent; } .modal_box:nth-child(2n) .speechBubble_sp .speechBubble:after { border-color: #000 transparent transparent; } .speechBubble_in { padding: 16px; position: relative; width: 100%; background-color: #fff; } @media screen and (min-width: 780px) { .speechBubble_in { top: -10px; left: -10px; } } @media screen and (max-width: 780px) { .speechBubble_in { top: -5px; left: -5px; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble_in:after { border-color: transparent #fff transparent transparent; } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n-1) .modal_info .speechBubble_in:after { border-color: transparent transparent #fff; } } @media screen and (min-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble_in:after { border-color: transparent transparent transparent #fff; } } @media screen and (max-width: 780px) { .modal_box:nth-child(2n) .modal_info .speechBubble_in:after { border-color: transparent transparent #fff; } } .modal_box:nth-child(2n-1) .speechBubble_sp .speechBubble_in:after { border-color: #fff transparent transparent; } .modal_box:nth-child(2n) .speechBubble_sp .speechBubble_in:after { border-color: #fff transparent transparent; } #side_banner { display: inline-block; display: none; position: fixed; right: 0; line-height: 1; z-index: 13; } @media screen and (min-width: 780px) { #side_banner { top: 50%; transform: translateY(-50%); } } @media screen and (max-width: 780px) { #side_banner { bottom: 20px; } } #side_banner a { display: block; } #side_banner a:hover { transition: .3s ease all; opacity: .7; } #side_banner a img { height: auto; } @media screen and (min-width: 780px) { #side_banner a img { width: 184px; } } @media screen and (max-width: 780px) { #side_banner a img { width: 197px; } } @media screen and (max-width: 780px) { #side_banner a img:first-child { display: none; } } @media screen and (min-width: 780px) { #side_banner a img:last-child { display: none; } } #side_banner_bt_label { width: 30px; height: 30px; border-radius: 100%; background-color: #fff; position: absolute; display: flex; justify-content: center; align-items: center; line-height: 1; top: -10px; left: -10px; z-index: 2; } #side_banner_bt_label:hover { cursor: pointer; } #side_banner_bt_label img { line-height: 1; width: 50%; height: auto; } #side_banner_bt:checked~#side_banner_bt_label_img, #side_banner_bt:checked~#side_banner_bt_label { display: none  !important; } #page_top { display: inline-block; position: fixed; bottom: 20px; right: 20px; line-height: 1; z-index: 10; } @media screen and (max-width: 780px) { #page_top { display: none; } } #page_top:hover { transition: .3s ease all; opacity: .7; } #page_top img { width: 55px; height: auto; } .bg_sec { position: relative; background-size: contain; background-repeat: repeat-y; background-position: center center; } @media screen and (min-width: 780px) { .bg_sec { padding-top: 120px; padding-bottom: 120px; } } @media screen and (max-width: 780px) { .bg_sec { padding-top: 80px; padding-bottom: 80px; } } .bg_sec::before, .bg_sec::after { content: ""; position: absolute; background-image: url(//p2-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/corner.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } @media screen and (min-width: 780px) { .bg_sec::before, .bg_sec::after { width: 160px; height: 160px; } } @media screen and (max-width: 780px) { .bg_sec::before, .bg_sec::after { width: 45px; height: 45px; } } .bg_sec::before { left: 0; top: 0; transform: rotate(180deg); } .bg_sec::after { right: 0; bottom: 0; } #life_sec { background-image: url(//p3-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/bg.jpg); color: #fff; } #life_top { position: relative; } @media screen and (min-width: 780px) { #life_top_img { width: 50%; position: absolute; top: 0; right: 0; } } @media screen and (max-width: 780px) { #life_top_img { margin-top: 10px; } } .life_img { line-height: 1; } .life_img a { display: block; position: relative; overflow: hidden; } @media screen and (min-width: 780px) { .life_img a { border-radius: 16px; } } @media screen and (max-width: 780px) { .life_img a { border-top-left-radius: 8px; border-top-right-radius: 8px; } } #life_bot_wrap .life_img a { background-color: rgba(255, 255, 255, .35); } .life_img a::before { content: ""; position: absolute; background-image: url(//p1-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/start.png); background-size: contain; background-repeat: no-repeat; background-position: center center; top: 50%; left: 50%; transform: translate(-50%); z-index: 2; } @media screen and (min-width: 780px) { .life_img a::before { width: 94px; height: 49px; margin-top: -62px; } } @media screen and (max-width: 780px) { .life_img a::before { width: 39px; height: 21px; } } .life_img a img { max-height: 450px; display: block; height: auto; position: relative; border-radius: 16px; } @media screen and (min-width: 780px) { #life_top_info { width: 100%; max-width: 70%; padding-top: 80px; } } #life_top_info_in { background-color: rgba(255, 255, 255, .2); } @media screen and (min-width: 780px) { #life_top_info_in { border-top-left-radius: 64px; border-bottom-right-radius: 64px; padding: 60px; } } @media screen and (max-width: 780px) { #life_top_info_in { border-top-left-radius: 32px; border-bottom-right-radius: 32px; padding: 30px 20px; } } @media screen and (min-width: 780px) { #life_top_info_in h2, #life_top_info_in p { width: 65%; } } @media screen and (min-width: 780px) { #life_top_info_in p { margin-top: 30px; } } @media screen and (max-width: 780px) { #life_top_info_in p { margin-top: 20px; } } .life_title { position: relative; background-size: contain; background-repeat: repeat-y; background-position: center center; background-image: url(//p1-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/bg_title.jpg); filter: drop-shadow(0px 0px 10px rgba(65, 94, 232, .6)); } @media screen and (min-width: 780px) { .life_title { padding: 15px 20px; border-top-right-radius: 62px; border-bottom-right-radius: 62px; width: calc(100% - 15px); margin-top: -62px; } } @media screen and (max-width: 780px) { .life_title { padding: 30px 20px; border-bottom-right-radius: 48px; } } .life_title h3 { font-size: 2rem; } .life_title p { margin-top: 5px; font-size: 1.6rem; } @media screen and (min-width: 780px) { #life_bot { padding-top: 120px; } } @media screen and (max-width: 780px) { #life_bot { padding-top: 80px; } } #life_bot_wrap { display: flex; flex-wrap: wrap; margin: 0 -10px; } @media screen and (min-width: 780px) { .life_bot_box { width: 50%; margin-top: 60px; padding: 0 10px; } } @media screen and (max-width: 780px) { .life_bot_box { margin-top: 60px; } } .life_bot_box:nth-child(1) { margin-top: 0; } @media screen and (min-width: 780px) { .life_bot_box:nth-child(2) { margin-top: 0; } } @media screen and (min-width: 780px) { .life_bot_box .life_bot_box_info { margin-top: 30px; } } @media screen and (max-width: 780px) { .life_bot_box .life_bot_box_info { padding: 0 20px; margin-top: 20px; } } .life_bot_box .life_bot_box_info h4 { font-size: 1.8rem; } .life_bot_box .life_bot_box_info p { margin-top: 5px; font-size: 1.6rem; } #foot_sec { background-image: url(//p1-ofp.static.pub/ShareResource/JPResource/JP-Images/aipc/2025/bg2.jpg); } @media screen and (min-width: 780px) { #life_zu { padding-top: 100px; padding-bottom: 100px; } } @media screen and (max-width: 780px) { #life_zu { padding-top: 60px; padding-bottom: 60px; } } @media screen and (min-width: 780px) { #life_zu_title { text-align: center; } } #life_zu_img { flex: 1; } #life_zu_img img { width: 100%; height: auto; } #bot_sec { font-size: 1.2rem; } @media screen and (min-width: 780px) { #bot_sec { padding-top: 70px; padding-bottom: 70px; } } @media screen and (max-width: 780px) { #bot_sec { padding-top: 40px; padding-bottom: 40px; } } @media screen and (min-width: 780px) { #life_view { border-top-left-radius: 64px; border-bottom-right-radius: 64px; padding: 60px; display: flex; align-items: center; background-color: rgba(255, 255, 255, .2); } } #life_view_img { line-height: 1; } @media screen and (min-width: 780px) { #life_view_img { width: 40%; } } #life_view_img img { width: 100%; display: block; height: auto; } @media screen and (min-width: 780px) { #life_view_img img { border-radius: 16px; } } @media screen and (max-width: 780px) { #life_view_img img { border-top-left-radius: 8px; border-top-right-radius: 8px; } } #life_view_info { flex: 1; } @media screen and (min-width: 780px) { #life_view_info { padding-left: 60px; } } @media screen and (max-width: 780px) { #life_view_info { background-color: rgba(255, 255, 255, .2); border-bottom-right-radius: 48px; padding: 30px 20px; } } #life_view_info h2 { font-size: 2.4rem; } #life_view_info p { font-size: 1.6rem; } #story_wrap #story_wrap_in .bt { display: inline-block; text-align: center; border-radius: 4px; width: 100%; border: none  !important; } #story_wrap #story_wrap_in .bt_modal .bt { background-color: #fff  !important; color: #000  !important; } #story_wrap #story_wrap_in .bt_modal .bt:hover { background-color: #000  !important; color: #fff  !important; } #story_wrap #story_wrap_in .bt_story .bt { margin-top: 20px; background-color: #b8322e  !important; color: #fff  !important; } #story_wrap #story_wrap_in .bt_story .bt:hover { background-color: #000  !important; transition: .3s ease all; } @media screen and (min-width: 780px) { #life_view_info p { margin-top: 30px; } #story_wrap #story_wrap_in .bt { margin-top: 30px; height: 59px; line-height: 59px; max-width: 292px; } } @media screen and (max-width: 780px) { #life_view_info p { margin-top: 20px; } #story_wrap #story_wrap_in .bt { margin-top: 20px; height: 40px; line-height: 40px; max-width: 100%; } }