@charset "UTF-8"; @keyframes LoopSlideLeft { 0% { transform: translate(0, 0); } 100% { transform: translate(-400%, 0); } } .top-notice { z-index: 1; } #carseat_wrap_2025 { font-family: "Noto Sans JP"; line-height: 1; position: relative; z-index: 0; } #carseat_wrap_2025 > section a:hover { text-decoration: none; } #carseat_wrap_2025 img { width: 100%; height: auto; } #carseat_wrap_2025 .inner { width: 100%; } #carseat_wrap_2025 .sectit_area { text-align: center; } #carseat_wrap_2025 .sectit_area .sectit { margin: auto; } #carseat_wrap_2025 .page_btn { position: relative; margin: auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; background-color: #FF6600; color: #fff; border: 2px solid #FF6600; } #carseat_wrap_2025 .page_btn::after { content: ""; display: block; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); aspect-ratio: 20.26/15.76; position: absolute; top: 50%; z-index: 0; translate: 0 -50%; } #carseat_wrap_2025 .link_btn { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; border: 1px solid #000; } #carseat_wrap_2025 .link_btn::after { content: ""; display: block; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.586%22%20height%3D%2211.352%22%20viewBox%3D%220%200%2014.586%2011.352%22%3E%3Cpath%20d%3D%22M-8371.432%2C348.4a.751.751%2C0%2C0%2C1%2C0-1.06l3.646-3.647h-10.964a.75.75%2C0%2C0%2C1-.75-.749.751.751%2C0%2C0%2C1%2C.75-.751h10.965l-3.646-3.647a.751.751%2C0%2C0%2C1%2C0-1.06.751.751%2C0%2C0%2C1%2C1.061%2C0l5.457%2C5.455-5.457%2C5.457a.748.748%2C0%2C0%2C1-.53.221A.745.745%2C0%2C0%2C1-8371.432%2C348.4Z%22%20transform%3D%22translate(8379.5%20-337.265)%22%2F%3E%3C%2Fsvg%3E"); aspect-ratio: 14.58/11.35; } @media print, screen and (min-width: 768px) { #carseat_wrap_2025 .inner { max-width: 1232px; margin: 0 auto; } #carseat_wrap_2025 .sp { display: none; } #carseat_wrap_2025 .sectit_area .sectit_jp { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.05em; margin-top: 2.2rem; } #carseat_wrap_2025 .page_btn { width: 40rem; height: 8rem; font-size: 1.7rem; font-weight: 500; letter-spacing: 0.03em; transition: all 0.5s ease-in-out 0s; } #carseat_wrap_2025 .page_btn::after { transition: all 0.5s ease-in-out 0s; width: 2.026rem; right: 3.22rem; } #carseat_wrap_2025 .page_btn:hover { background-color: #fff; color: #FF6600; text-decoration: none; } #carseat_wrap_2025 .page_btn:hover::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23FF6600%22%2F%3E%3C%2Fsvg%3E"); } #carseat_wrap_2025 .link_btn { width: 21.2rem; height: 5.6rem; transition: all 0.5s ease-in-out 0s; padding: 0 2.12rem 0 2.2rem; @incldue fontSet($fs:rem(14),$fw:500,$ls:0.03em); } #carseat_wrap_2025 .link_btn::after { transition: all 0.5s ease-in-out 0s; width: 1.458rem; } #carseat_wrap_2025 a.link_btn:hover { text-decoration: none; background: #000; color: #fff; } #carseat_wrap_2025 a.link_btn:hover::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } #carseat_wrap_2025 a:hover .link_btn { text-decoration: none; background: #000; color: #fff; } #carseat_wrap_2025 a:hover .link_btn::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } } @media only screen and (max-width: 767px) { #carseat_wrap_2025 .pc { display: none; } #carseat_wrap_2025 .sectit_area .sectit_jp { font-size: 2.9333333333vw; font-weight: 500; letter-spacing: 0.05em; margin-top: 3.6vw; } #carseat_wrap_2025 .page_btn { width: 78.6666666667vw; height: 14.9333333333vw; font-size: 3.7333333333vw; font-weight: 500; letter-spacing: 0.03em; } #carseat_wrap_2025 .page_btn::after { width: 3.752vw; right: 5.4vw; } #carseat_wrap_2025 .page_btn:active { background-color: #fff; color: #FF6600; text-decoration: none; } #carseat_wrap_2025 .page_btn:active::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23FF6600%22%2F%3E%3C%2Fsvg%3E"); } #carseat_wrap_2025 .link_btn { width: 43.7333333333vw; height: 11.7333333333vw; padding: 0 4.3066666667vw 0 4.8vw; @incldue fontSet($fs:vw(24),$fw:500,$ls:0.03em); } #carseat_wrap_2025 .link_btn::after { transition: all 0.5s ease-in-out 0s; width: 3.236vw; } #carseat_wrap_2025 a.link_btn:active { text-decoration: none; background: #000; color: #fff; } #carseat_wrap_2025 a.link_btn:active::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } #carseat_wrap_2025 a:active .link_btn { text-decoration: none; background: #000; color: #fff; } #carseat_wrap_2025 a:active .link_btn::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } } /*パンクずカスタム ------------------------*/ @media print, screen and (min-width: 768px) { .pane-topic-path { font-size: 1.4rem; } .pane-topic-path .block-topic-path { margin-top: 0; background: #E6E6E6; height: 3.1rem; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; justify-content: center; } .pane-topic-path .block-topic-path--list { width: 100%; max-width: 1232px; margin: 0 auto; } } @media only screen and (max-width: 767px) { .pane-topic-path .block-topic-path { padding-left: 4.2666666667vw; } } /*MV --------------------------*/ #mv .page_tit { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; line-height: 1; } #mv .page_tit .jp { order: 1; } #mv .txt_area .copy_box .mv_copy { text-align: center; } #mv .img_loop_wrap { width: 100%; overflow: hidden; } #mv .img_loop_wrap .img_loop { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #mv .img_loop_wrap .img_loop .loop_img { animation: LoopSlideLeft 25s linear 0s infinite normal forwards; } @media print, screen and (min-width: 768px) { #mv { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; position: relative; } #mv .page_tit { position: absolute; top: 4rem; left: 2.5974025974%; -webkit-flex-direction: column; flex-direction: column; } #mv .page_tit img { width: 1.952rem; } #mv .page_tit .jp { margin-top: 2rem; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.01em; } #mv .page_tit .jp span { writing-mode: vertical-rl; line-height: 0.5em; } #mv .mv_img { order: 1; width: 61.1688311688%; } #mv .txt_area { width: 38.8311688312%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: column; flex-direction: column; padding-top: 2.6rem; } #mv .txt_area .copy_box { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; margin-top: auto; } #mv .txt_area .copy_box .page_subtit { width: 26.552rem; margin-bottom: 4.7rem; } #mv .txt_area .copy_box .mv_copy { font-size: 1.8rem; font-weight: 600; letter-spacing: 0.15em; line-height: 2; margin-top: calc(0px - (((1em*2) - 1em)/2)); margin-bottom: calc(0px - (((1em*2) - 1em)/2)); } #mv .img_loop_wrap { margin-top: auto; } #mv .img_loop_wrap .img_loop .loop_img { padding-right: 1.3377926421%; width: 35.9531772575%; min-width: 35.9531772575%; } } @media only screen and (max-width: 767px) { #mv .page_tit { padding: 4.7866666667vw 0 4.96vw 4.5733333333vw; align-items: flex-end; } #mv .page_tit img { width: 26.168vw; } #mv .page_tit .jp { margin-left: 3.2533333333vw; font-size: 2.6666666667vw; font-weight: 500; letter-spacing: 0.05em; } #mv .mv_img { width: 100%; margin-bottom: 12.7466666667vw; } #mv .txt_area { width: 100%; } #mv .txt_area .copy_box { margin-bottom: 12.5333333333vw; } #mv .txt_area .copy_box .page_subtit { line-height: 1; width: 78.3013333333vw; margin: 0 auto 4.5333333333vw; } #mv .txt_area .copy_box .mv_copy { font-size: 3.7333333333vw; font-weight: 600; letter-spacing: 0.15em; line-height: 1.6428571429; margin-top: calc(0px - (((1em*1.6428571429) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.6428571429) - 1em)/2)); } #mv .img_loop_wrap .img_loop .loop_img { padding-right: 2.1333333333vw; width: 34.1333333333vw; min-width: 34.1333333333vw; } } /*about --------------------------*/ #about { position: relative; z-index: 0; } #about::before { content: ""; display: block; width: 100%; position: absolute; left: 0; bottom: 0; background: #E6E6E6; z-index: -1; } #about .cont_tit_area { text-align: center; } #about .cont_tit_area .cont_tit_en { margin: auto; } #about .about_list a:hover { text-decoration: none; } #about .about_list a:hover img { opacity: 1; } #about .about_list .txt_area .tit { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; } #about .about_list .txt_area .tit::after { content: ""; display: block; background-size: 100% 100%; aspect-ratio: 7.24/12.22; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.244%22%20height%3D%2212.217%22%20viewBox%3D%220%200%207.244%2012.217%22%3E%0A%20%20%3Cpath%20id%3D%22vector01%22%20d%3D%22M-8333%2C1.081l4.974-4.973L-8333-8.865l1.136-1.136%2C6.108%2C6.109-6.108%2C6.109Z%22%20transform%3D%22translate(8333.001%2010.001)%22%2F%3E%0A%3C%2Fsvg%3E"); } @media print, screen and (min-width: 768px) { #about { padding: 17.7rem 0 5.1rem; } #about::before { height: 38.3rem; } #about .cont_tit_area { margin-bottom: 7.7rem; } #about .cont_tit_area .cont_tit { font-size: 2.6rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2.1rem; } #about .cont_tit_area .cont_tit_en { width: 22.568rem; } #about .about_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; width: 67.5324675325%; margin: 0 auto 8rem; } #about .about_list li { width: 28.8461538462%; } #about .about_list li:not(:nth-child(3n)) { margin-right: 6.7307692308%; } #about .about_list li a:hover .list_img img { scale: 1.05 1.05; } #about .about_list li a:hover .txt_area .tit::after { translate: 50% 0; } #about .about_list .list_img { overflow: hidden; margin-bottom: 3rem; } #about .about_list .list_img img { transition: all 0.5s ease-in-out 0s; } #about .about_list .txt_area .tit { font-size: 1.8rem; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 2.2rem; } #about .about_list .txt_area .tit::after { transition: all 0.5s ease-in-out 0s; margin-left: 1.56rem; width: 0.724rem; } #about .about_list .txt_area .txt { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1.625; margin-top: calc(0px - (((1em*1.625) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.625) - 1em)/2)); } #about .note { text-align: center; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.05em; } } @media only screen and (max-width: 767px) { #about { padding: 16.8vw 0 6.9333333333vw; } #about::before { height: 56.8vw; } #about .cont_tit_area { margin-bottom: 8.4vw; } #about .cont_tit_area .cont_tit { font-size: 4.2666666667vw; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2.9333333333vw; } #about .cont_tit_area .cont_tit_en { width: 41.3746666667vw; } #about .list_wrap { width: 100%; overflow: auto; padding: 0 7.4666666667vw; } #about .about_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 101.3333333333vw; margin: 0 0 10vw; } #about .about_list li { width: 32vw; } #about .about_list li:not(:last-child) { margin-right: 2.6666666667vw; } #about .about_list li a:active { opacity: 0.7; } #about .about_list li a:active .txt_area .tit::after { translate: 50% 0; } #about .about_list .list_img { margin-bottom: 4.5333333333vw; } #about .about_list .txt_area .tit { font-size: 3.2vw; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 2.9333333333vw; } #about .about_list .txt_area .tit::after { transition: all 0.1s ease-in-out 0s; margin-left: 2.6133333333vw; width: 1.516vw; } #about .about_list .txt_area .txt { font-size: 2.9333333333vw; font-weight: 400; letter-spacing: 0.03em; line-height: 1.3636363636; margin-top: calc(0px - (((1em*1.3636363636) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.3636363636) - 1em)/2)); } #about .note { font-size: 2.6666666667vw; font-weight: 400; letter-spacing: 0.05em; padding-left: 32vw; } } /*about_modal --------------------------*/ .modal_area { background: #fff; margin: auto; position: relative; } .modal_area img { width: 100%; height: auto; } .modal_area .modal_txt_area .subtit { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; align-items: center; } .modal_area .mfp-close { background: #84D3C8; aspect-ratio: 1/1; border-radius: 50%; opacity: 1; } .modal_area .mfp-close::after { content: "×"; font-family: "Noto Sans JP"; color: #fff; position: absolute; top: 50%; left: 50%; z-index: 0; translate: -50% -50%; } @media print, screen and (min-width: 768px) { .modal_area { width: 87.4025974026%; max-height: 80%; border-radius: 3rem; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; padding: 7.2rem 0; } .modal_area .sp { display: none; } .modal_area .modal_tit { font-size: 3.4rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.6470588235; margin-top: calc(0px - (((1em*1.6470588235) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.6470588235) - 1em)/2)); width: 28.3060921248%; text-align: center; } .modal_area .modal_img { width: 33.6552748886%; margin: 0 3.5661218425% 0 0; } .modal_area .modal_txt_area { width: 34.4725111441%; align-self: flex-end; } .modal_area .modal_txt_area .subtit { font-size: 2.6rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.6153846154; margin-top: calc(0px - (((1em*1.6153846154) - 1em)/2)); margin-bottom: calc(4.4rem - (((1em*1.6153846154) - 1em)/2)); } .modal_area .modal_txt_area .subtit .icon { margin-right: 1.8rem; width: 8rem; } .modal_area .modal_txt_area .modal_txt { width: 83.1896551724%; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.75; margin-top: calc(0px - (((1em*1.75) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.75) - 1em)/2)); } .modal_area .mfp-close { width: 7.2rem; height: 7.2rem; top: 3.6rem; right: 3.6rem; transition: all 0.5s ease-in-out 0s; } .modal_area .mfp-close::after { font-size: 3.2rem; font-weight: 600; } .modal_area .mfp-close:active { top: 3.6rem; } .modal_area .mfp-close:hover { opacity: 0.7; } } @media only screen and (max-width: 767px) { .modal_area { width: 91.4666666667vw; border-radius: 4vw; padding: 16vw 6.4vw 12.8vw; } .modal_area .pc { display: none; } .modal_area .modal_tit { font-size: 5.3333333333vw; font-weight: 600; letter-spacing: 0.1em; line-height: 1.6470588235; margin-top: calc(0px - (((1em*1.6470588235) - 1em)/2)); margin-bottom: calc(6.4vw - (((1em*1.6470588235) - 1em)/2)); } .modal_area .modal_img { width: 100%; margin: 0 auto 5.4vw; } .modal_area .modal_txt_area .subtit { height: 19.4666666667vw; text-align: center; justify-content: center; font-size: 4vw; font-weight: 600; letter-spacing: 0.12em; line-height: 1.5333333333; border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: 4.9333333333vw; } .modal_area .modal_txt_area .subtit .icon { width: 11.7333333333vw; margin-right: 4vw; } .modal_area .modal_txt_area .modal_txt { font-size: 3.7333333333vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.6428571429; margin-top: calc(0px - (((1em*1.6428571429) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.6428571429) - 1em)/2)); } .modal_area .mfp-close { transition: all 0.1s ease-in-out 0s; width: 13.8666666667vw; height: 13.8666666667vw; top: 4.8vw; right: 4.8vw; } .modal_area .mfp-close::after { font-size: 6.4vw; font-weight: 600; } .modal_area .mfp-close:active { top: 4.8vw; opacity: 0.7; } .modal_area#about01 .modal_img { width: 72.5333333333vw; } .modal_area#about01 .modal_txt_area .subtit { text-align: left; } } /*find --------------------------*/ #find .cont_tit_area { text-align: center; } #find .cont_tit_area .cont_tit_en { margin: auto; } #find .box_wrap { margin: auto; text-align: center; } #find .box .box_tit { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } #find .box .box_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: center; } #find .box .box_list li a { height: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; } #find .box .box_list .txt_area { margin-top: auto; } #find .age .box_list .tit::after { content: "〜"; } @media print, screen and (min-width: 768px) { #find { padding: 17rem 0 16.3rem; } #find .cont_tit_area { margin-bottom: 7.7rem; } #find .cont_tit_area .cont_tit { font-size: 2.6rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2.1rem; } #find .cont_tit_area .cont_tit_en { width: 19.784rem; } #find .box_wrap { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; width: 87.5811688312%; } #find .box_wrap::after { content: ""; display: block; width: 1px; background-image: repeating-linear-gradient(to bottom, #000 0, #000 3px, transparent 3px, transparent 11px); } #find .box { width: 46.3392029657%; } #find .box .box_tit { height: 7.2rem; font-size: 2rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 5rem; } #find .box .box_list a:hover img { scale: 1.05 1.05; } #find .box .box_list figure { margin-bottom: 4rem; } #find .box .box_list figure img { transition: all 0.5s ease-in-out 0s; } #find .box .box_list .tit { font-size: 1.8rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.3333333333; margin-top: calc(0px - (((1em*1.3333333333) - 1em)/2)); } #find .box .box_list .tit:last-child { margin-bottom: calc(0px - (((1em*1.3333333333) - 1em)/2)); } #find .box .box_list .tit:not(:last-child) { margin-bottom: calc(2rem - (((1em*1.3333333333) - 1em)/2)); } #find .box .box_list .txt { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1.6428571429; margin-top: calc(0px - (((1em*1.6428571429) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.6428571429) - 1em)/2)); } #find .age .age00 { padding-top: 0.82rem; } #find .age .age00 .age_list_img { width: 5.23rem; } #find .age .age01 { padding-top: 0.84rem; margin-left: 7.8rem; margin-right: 8.76rem; } #find .age .age01 .age_list_img { width: 6.99rem; } #find .age .age03 { padding-top: 0.32rem; } #find .age .age03 .age_list_img { width: 6.617rem; } #find .spec { order: 1; } #find .spec .spec01 { padding-top: 0.14rem; } #find .spec .spec01 .spec_list_img { width: 6.789rem; } #find .spec .spec02 { margin-left: 4.9rem; margin-right: 4.1rem; } #find .spec .spec02 .spec_list_img { width: 7.175rem; } #find .spec .spec03 { padding-top: 0.14rem; } #find .spec .spec03 .spec_list_img { width: 8.425rem; } } @media only screen and (max-width: 767px) { #find { padding: 16.8vw 0 17.6vw; } #find .cont_tit_area { margin-bottom: 7.7333333333vw; } #find .cont_tit_area .cont_tit { font-size: 4.2666666667vw; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2.6666666667vw; } #find .cont_tit_area .cont_tit_en { width: 36.2706666667vw; } #find .box_wrap { width: 85.0666666667vw; } #find .box { width: 100%; } #find .box:not(:last-child) { margin-bottom: 8.5333333333vw; } #find .box .box_tit { height: 7.2vw; font-size: 2.9333333333vw; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 5.3333333333vw; } #find .box .box_list img { transition: all 0.1s ease-in-out 0s; } #find .box .box_list a:active { opacity: 0.7; } #find .box .box_list a:active img { scale: 1.05 1.05; } #find .box .box_list figure { margin-bottom: 4.1333333333vw; } #find .box .box_list .tit { font-size: 3.2vw; font-weight: 500; letter-spacing: 0.1em; line-height: 1.25; margin-top: calc(0px - (((1em*1.25) - 1em)/2)); } #find .box .box_list .tit:last-child { margin-bottom: calc(0px - (((1em*1.25) - 1em)/2)); } #find .box .box_list .tit:not(:last-child) { margin-bottom: calc(3.3333333333vw - (((1em*1.25) - 1em)/2)); } #find .box .box_list .txt { font-size: 2.8vw; font-weight: 400; letter-spacing: 0.03em; line-height: 1.4285714286; margin-top: calc(0px - (((1em*1.4285714286) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.4285714286) - 1em)/2)); } #find .age .age00 { padding-top: 0.9333333333vw; } #find .age .age00 .age_list_img { width: 9.26vw; } #find .age .age01 { padding-top: 0.9333333333vw; margin-left: 15.9466666667vw; margin-right: 17.1466666667vw; } #find .age .age01 .age_list_img { width: 12.376vw; } #find .age .age03 .age_list_img { width: 11.7173333333vw; } #find .spec .spec01 { padding-top: 0.9333333333vw; } #find .spec .spec01 .spec_list_img { width: 12.9253333333vw; } #find .spec .spec02 { padding-top: 0.9333333333vw; margin-left: 8.2666666667vw; margin-right: 7.0666666667vw; } #find .spec .spec02 .spec_list_img { width: 13.6613333333vw; } #find .spec .spec03 { padding-top: 0.9333333333vw; } #find .spec .spec03 .spec_list_img { width: 15.948vw; } } /*#pickup ----------------------------*/ #pickup .picup_list .slick-track { display: flex; } #pickup .picup_list .slick-slide { height: auto !important; } #pickup .picup_list .slick-arrow { all: unset; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; font-size: inherit; border-radius: 0; box-sizing: border-box; position: absolute; top: 50%; z-index: 3; translate: 0 -50%; aspect-ratio: 1/1; border-radius: 50%; background-color: #84D3C8; font-size: 0; } #pickup .picup_list .slick-arrow::after { position: absolute; top: 50%; left: 50%; z-index: 0; translate: -50% -50%; content: ""; display: block; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); aspect-ratio: 23.57/17.95; } #pickup .picup_list .slick-prev { scale: -1 1; } #pickup .pickup_item a { border: 1px solid #000; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: column; flex-direction: column; position: relative; } #pickup .txt_area .itme_logo { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; } #pickup .txt_area .itme_logo img { width: auto; margin: auto; } #pickup .txt_area .note { opacity: 0.8; } #pickup .txt_area .copy { text-align: center; } #pickup .txt_area .copy span { display: inline-block; text-align: left; text-indent: -1em; padding-left: 1em; } #pickup .slide_btn { margin: auto auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; background: #E6E6E6; } #pickup .slide_btn::after { content: ""; display: block; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.586%22%20height%3D%2211.352%22%20viewBox%3D%220%200%2014.586%2011.352%22%3E%3Cpath%20d%3D%22M-8371.432%2C348.4a.751.751%2C0%2C0%2C1%2C0-1.06l3.646-3.647h-10.964a.75.75%2C0%2C0%2C1-.75-.749.751.751%2C0%2C0%2C1%2C.75-.751h10.965l-3.646-3.647a.751.751%2C0%2C0%2C1%2C0-1.06.751.751%2C0%2C0%2C1%2C1.061%2C0l5.457%2C5.455-5.457%2C5.457a.748.748%2C0%2C0%2C1-.53.221A.745.745%2C0%2C0%2C1-8371.432%2C348.4Z%22%20transform%3D%22translate(8379.5%20-337.265)%22%2F%3E%3C%2Fsvg%3E"); aspect-ratio: 14.59/11.35; } @media print, screen and (min-width: 768px) { #pickup { padding: 18.2rem 0 0; } #pickup .sectit_area { margin-bottom: 7.5rem; } #pickup .sectit_area .sectit { width: 18.082rem; } #pickup .picup_list { width: 89.6103896104%; margin: 0 auto 6.4rem; } #pickup .picup_list .slick-arrow { width: 5.3rem; transition: all 0.5s ease-in-out 0s; } #pickup .picup_list .slick-arrow::after { width: 2.357rem; } #pickup .picup_list .slick-arrow:hover { opacity: 0.8; } #pickup .picup_list .slick-prev { right: 100%; margin-right: 1.1rem; } #pickup .picup_list .slick-next { left: 100%; margin-left: 1.1rem; } #pickup .pickup_item { margin: 0 1.6rem; } #pickup .pickup_item a { border-radius: 2rem; padding: 1rem 0 3.1rem; } #pickup .pickup_item a:hover { text-decoration: none; } #pickup .pickup_item a:hover .item_img img { scale: 1.05 1.05; } #pickup .pickup_item a:hover .slide_btn { background: #3E3A39; color: #fff; } #pickup .pickup_item a:hover .slide_btn::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } #pickup .item_img { width: 65.8682634731%; margin-left: 17.9640718563%; } #pickup .item_img img { transition: all 0.5s ease-in-out 0s; } #pickup .txt_area { padding: 0 11.6766467066%; margin-bottom: 2.6rem; } #pickup .txt_area .itme_logo { height: 8.7rem; } #pickup .txt_area .itme_logo img { height: 4.7rem; } #pickup .txt_area .copy { font-size: 1.7rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.4705882353; margin-top: calc(0px - (((1em*1.4705882353) - 1em)/2)); margin-bottom: calc(1.9rem - (((1em*1.4705882353) - 1em)/2)); } #pickup .txt_area .txt { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5714285714; margin-top: calc(0px - (((1em*1.5714285714) - 1em)/2)); margin-bottom: calc(1.8rem - (((1em*1.5714285714) - 1em)/2)); } #pickup .txt_area .note { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.2; margin-top: calc(0px - (((1em*1.2) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.2) - 1em)/2)); } #pickup .slide_btn { width: 19.2rem; height: 5.6rem; padding: 0 2.02rem 0 2.2rem; transition: all 0.5s ease-in-out 0s; font-size: 1.4rem; font-weight: 500; } #pickup .slide_btn::after { transition: all 0.5s ease-in-out 0s; width: 1.459rem; } } @media only screen and (max-width: 767px) { #pickup { padding: 20.4533333333vw 0 0; } #pickup .sectit_area { margin-bottom: 7.4666666667vw; } #pickup .sectit_area .sectit { width: 29.276vw; } #pickup .picup_list { width: 100%; margin: 0 auto 7.4666666667vw; } #pickup .picup_list .slick-arrow { width: 13.8666666667vw; transition: all 0.1s ease-in-out 0s; } #pickup .picup_list .slick-arrow::after { width: 5.82vw; } #pickup .picup_list .slick-arrow:active { opacity: 0.8; } #pickup .picup_list .slick-prev { left: 4.1333333333vw; } #pickup .picup_list .slick-next { right: 4.1333333333vw; } #pickup .picup_list .slick-list { padding: 0 11.0666666667vw; } #pickup .pickup_item { margin: 0 2.1333333333vw; } #pickup .pickup_item a { border-radius: 2.6666666667vw; padding: 4.2666666667vw 0 7.4666666667vw; } #pickup .pickup_item a:active .item_img img { scale: 1.05 1.05; } #pickup .pickup_item a:active .slide_btn { background: #3E3A39; color: #fff; } #pickup .pickup_item a:active .slide_btn::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.256%22%20height%3D%2215.76%22%20viewBox%3D%220%200%2020.256%2015.76%22%3E%3Cpath%20d%3D%22M-9242.579-3913.3a1%2C1%2C0%2C0%2C1%2C0-1.414l5.17-5.172h-15.426a1%2C1%2C0%2C0%2C1-1-1%2C1%2C1%2C0%2C0%2C1%2C1-1h15.428l-5.172-5.174a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l7.585%2C7.587-.683.682c-.016.017-.032.034-.05.05l-6.853%2C6.855a1%2C1%2C0%2C0%2C1-.709.293A.993.993%2C0%2C0%2C1-9242.579-3913.3Z%22%20transform%3D%22translate(9253.836%203928.767)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } #pickup .item_img { transition: all 0.1s ease-in-out 0s; width: 51.8666666667vw; margin-left: 10.6vw; } #pickup .txt_area { padding: 0 5.7333333333vw; margin-bottom: 5.0666666667vw; } #pickup .txt_area .itme_logo { height: 13.6vw; margin-bottom: 2.9333333333vw; } #pickup .txt_area .itme_logo img { height: 9.3333333333vw; } #pickup .txt_area .copy { font-size: 4vw; font-weight: 600; letter-spacing: 0.03em; line-height: 1.4666666667; margin-top: calc(0px - (((1em*1.4666666667) - 1em)/2)); margin-bottom: calc(4.8vw - (((1em*1.4666666667) - 1em)/2)); } #pickup .txt_area .txt { font-size: 3.2vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5; margin-top: calc(0px - (((1em*1.5) - 1em)/2)); margin-bottom: calc(3.8666666667vw - (((1em*1.5) - 1em)/2)); } #pickup .txt_area .note { font-size: 2.6666666667vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.2; margin-top: calc(0px - (((1em*1.2) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.2) - 1em)/2)); } #pickup .slide_btn { width: 43.7333333333vw; height: 11.7333333333vw; padding: 0 4.2666666667vw 0 4.8vw; font-size: 3.2vw; font-weight: 500; } #pickup .slide_btn::after { transition: all 0.5s ease-in-out 0s; width: 3.2373333333vw; } } /*#rankin ----------------------------*/ #rankin .block-category-list--event { margin-top: 0; } #rankin .section-title { display: none; } #rankin .block-top-event--goods { margin-top: 0; } #rankin .block-ranking-r--goods-image .block-ranking-r--rank { line-height: 1.5; } @media print, screen and (min-width: 768px) { #rankin { padding: 18.2rem 0 0; } #rankin .sectit_area { margin-bottom: 7.5rem; } #rankin .sectit_area .sectit { width: 20.698rem; } #rankin .block-category-list--event { margin-bottom: 8.9rem; } #rankin .swiper-pointer-events { padding-top: 0.2rem; } } @media only screen and (max-width: 767px) { #rankin { padding: 20.4533333333vw 0 0; } #rankin .sectit_area { margin-bottom: 11.3333333333vw; } #rankin .sectit_area .sectit { width: 33.5106666667vw; } #rankin .block-category-list--event { margin-bottom: 11.8666666667vw; } #rankin .block-ranking-r--items > li { margin-top: 0; } } /*#series ----------------------------*/ #series .series_box:hover { text-decoration: none; } #series .series_box:hover img { opacity: 1; } #series .series_img { overflow: hidden; } @media print, screen and (min-width: 768px) { #series { padding: 17.64rem 0 16.8rem; } #series .sectit_area { margin-bottom: 8.4rem; } #series .sectit_area .sectit { width: 15.501rem; } #series .series_wrap { margin-bottom: 8.8rem; } #series .series_box { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; } #series .series_box:nth-child(odd) .series_img { border-radius: 0 3rem 3rem 0; margin-right: 12.5324675325%; } #series .series_box:nth-child(even) { justify-content: flex-end; } #series .series_box:nth-child(even) .series_img { order: 1; border-radius: 3rem 0 0 3rem; margin-left: 5.7792207792%; } #series .series_box:not(:last-child) { margin-bottom: 4.8rem; } #series .series_box:hover { text-decoration: none; } #series .series_box:hover .series_img img { scale: 1.05 1.05; } #series .series_img { width: 47.4675324675%; } #series .series_img img { transition: all 0.5s ease-in-out 0s; } #series .txt_area { width: 38.6rem; } #series .txt_area .name { font-size: 3rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 4.4rem; } #series .txt_area .txt { font-size: 1.8rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5555555556; margin-top: calc(0px - (((1em*1.5555555556) - 1em)/2)); } #series .txt_area .txt:last-child { margin-bottom: calc(0px - (((1em*1.5555555556) - 1em)/2)); } #series .txt_area .txt:not(:last-child) { margin-bottom: calc(2rem - (((1em*1.5555555556) - 1em)/2)); } #series .txt_area .note { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5555555556; margin-top: calc(0px - (((1em*1.5555555556) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.5555555556) - 1em)/2)); } #series .txt_area .link_btn { margin-top: 5.2rem; } } @media only screen and (max-width: 767px) { #series { padding: 19.7466666667vw 0 18.1333333333vw; } #series .sectit_area { margin-bottom: 8.9333333333vw; } #series .sectit_area .sectit { width: 25.096vw; } #series .series_wrap { margin-bottom: 12.2666666667vw; } #series .series_box { display: block; position: relative; } #series .series_box:not(:last-child) { margin-bottom: 10.6666666667vw; } #series .series_box::after { content: ""; display: block; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.586%22%20height%3D%2211.352%22%20viewBox%3D%220%200%2014.586%2011.352%22%3E%3Cpath%20d%3D%22M-8371.432%2C348.4a.751.751%2C0%2C0%2C1%2C0-1.06l3.646-3.647h-10.964a.75.75%2C0%2C0%2C1-.75-.749.751.751%2C0%2C0%2C1%2C.75-.751h10.965l-3.646-3.647a.751.751%2C0%2C0%2C1%2C0-1.06.751.751%2C0%2C0%2C1%2C1.061%2C0l5.457%2C5.455-5.457%2C5.457a.748.748%2C0%2C0%2C1-.53.221A.745.745%2C0%2C0%2C1-8371.432%2C348.4Z%22%20transform%3D%22translate(8379.5%20-337.265)%22%2F%3E%3C%2Fsvg%3E"); width: 3.8666666667vw; aspect-ratio: 29/22.57; position: absolute; top: 69.4666666667vw; right: 9.4666666667vw; } #series .series_box:active { opacity: 0.7; } #series .series_box:active .series_img img { scale: 1.05 1.05; } #series .series_img { width: 80vw; border-radius: 0 4vw 4vw 0; margin-bottom: 4.1333333333vw; } #series .series_img img { transition: all 0.1s ease-in-out 0s; } #series .txt_area { width: 100%; padding-left: 7.4666666667vw; } #series .txt_area .name { font-size: 4.1333333333vw; font-weight: 600; letter-spacing: 0.05em; width: 1em; position: absolute; top: 11.2vw; right: 7.4666666667vw; } #series .txt_area .name > span { writing-mode: vertical-rl; text-orientation: upright; line-height: 0.5em; } #series .txt_area .name > span span { margin-top: -0.5em; } #series .txt_area .txt { width: 73.3333333333vw; font-size: 3.2vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5; margin-top: calc(0px - (((1em*1.5) - 1em)/2)); } #series .txt_area .txt:last-child { margin-bottom: calc(0px - (((1em*1.5) - 1em)/2)); } #series .txt_area .txt:not(:last-child) { margin-bottom: calc(2.6666666667vw - (((1em*1.5) - 1em)/2)); } #series .txt_area .note { font-size: 2.8vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5555555556; margin-top: calc(0px - (((1em*1.5555555556) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.5555555556) - 1em)/2)); } } /*#function ----------------------------*/ #function { background: #E6E6E6; } #function .function_area .intro_no { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: baseline; background: #84D3C8; } #function .function_area .intro_no .tit_no { width: auto; } #function .function_area .intro_txt { text-align: center; } #function .function_area .box01 .txt_area .tit { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; } #function .function_area .box01 .txt_area .tit .icon { aspect-ratio: 94/116; } #function .function_area .box03 .box03_list .box03_list_img { position: relative; width: 100%; aspect-ratio: 348/212; } #function .function_area .box03 .box03_list .box03_list_img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit:cover; object-position:50% 50%; "; transition: all 0.5s ease-in-out 0s; } #function .function_area .box03 .box03_list .box03_list_img img:first-child { position: relative; z-index: 1; } #function .function_area .box03 .box03_list .box03_list_img img:not(:first-child) { opacity: 0; position: absolute; top: 0; left: 0; z-index: 0; } #function .function_area .box03 .box03_list .box03_list_img img:not(.active) { opacity: 0; } #function .function_area .box03 .box03_list .box03_list_img img.active { z-index: 2; opacity: 1; } #function .function_box:not(:last-child) { border-bottom: 1px solid #000; } #function .function_box .box_cont .box_tit { text-align: center; } #function .function_box .box_cont .sub { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; border: 1px solid #000; } @media print, screen and (min-width: 768px) { #function { padding: 12.55rem 0 0; } #function .sectit_area { margin-bottom: 6.7rem; } #function .sectit_area .sectit { width: 61.617rem; } #function .inner { padding: 10rem 5% 10.4rem; position: relative; z-index: 0; } #function .inner::before { content: ""; display: block; background: #fff; position: absolute; left: 50%; z-index: -1; translate: -50% 0; top: 0; width: 109.2532467532%; height: 100%; border-radius: 3rem; } #function .function_area { margin-bottom: 7.7rem; } #function .function_area .intro_area { margin-bottom: 8rem; } #function .function_area .intro_no { width: 30.4rem; height: 4.4rem; padding-top: 1.28rem; border-radius: 2.2rem; margin: 0 auto 4.6rem; } #function .function_area .intro_no .tit_img { width: 19.805rem; margin-right: 1.79rem; } #function .function_area .intro_no .tit_no { height: 1.812rem; } #function .function_area .intro_txt { font-size: 2rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1.8; margin-top: calc(0px - (((1em*1.8) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.8) - 1em)/2)); } #function .function_area .box01 .intro_area { margin-bottom: 8.5rem; } #function .function_area .box01 .box_cont { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-end; } #function .function_area .box01 .function01_img { width: 47.8896103896%; } #function .function_area .box01 .txt_area { width: 39.7222222222%; } #function .function_area .box01 .txt_area .tit { font-size: 3rem; font-weight: 500; letter-spacing: 0.05em; line-height: 1.6; margin-top: calc(0px - (((1em*1.6) - 1em)/2)); margin-bottom: calc(4.6rem - (((1em*1.6) - 1em)/2)); } #function .function_area .box01 .txt_area .tit .icon { margin-right: 3.9rem; width: 9.4rem; } #function .function_area .box01 .txt_area .txt { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.07em; line-height: 1.75; margin-top: calc(0px - (((1em*1.75) - 1em)/2)); margin-bottom: calc(3.5rem - (((1em*1.75) - 1em)/2)); } #function .function_area .box02 .box02_list { margin: 5.6rem 0 3.6rem; } #function .function_area .box02 .box02_list li { width: 47.7777777778%; } #function .function_area .box02 .box02_list li:not(:nth-child(2n)) { margin-right: 4.4444444444%; } #function .function_area .box02 .link_btn { margin: auto; } #function .function_area .box03 .box03_list { margin: 6.3rem 0 0; } #function .function_area .box03 .box03_list li { width: 32.2222222222%; } #function .function_area .box03 .box03_list li:not(:nth-child(3n)) { margin-right: 1.6666666667%; } #function .function_box:not(:last-child) { padding-bottom: 8.78rem; margin-bottom: 8.8rem; } #function .function_box .box_cont .box_tit { font-size: 3rem; font-weight: 500; letter-spacing: 0.05em; line-height: 1.6; margin-top: calc(0px - (((1em*1.6) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.6) - 1em)/2)); } #function .function_box .box_cont .sub { width: 18.4rem; height: 3rem; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; border-radius: 1.5rem; margin: 2.5rem auto 0; } #function .function_box .box_cont .list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #function .function_box .box_cont .list figure { margin-bottom: 3.1rem; } #function .function_box .box_cont .list .list_txt { text-align: center; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.75; margin-top: calc(0px - (((1em*1.75) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.75) - 1em)/2)); } } @media only screen and (max-width: 767px) { #function { padding: 12.5333333333vw 0 0; } #function .sectit_area { margin-bottom: 7.2vw; } #function .sectit_area .sectit { width: 85.0893333333vw; } #function .inner { width: 91.4666666667vw; margin: auto; padding: 9.6vw 6.4vw 10.9333333333vw; background: #fff; border-radius: 4vw; } #function .inner .link_btn { margin: auto; } #function .function_area { margin-bottom: 12.4vw; } #function .function_area .intro_area { margin-bottom: 7.3333333333vw; } #function .function_area .intro_no { width: 47.4666666667vw; height: 5.8666666667vw; padding-top: 1.5333333333vw; border-radius: 2.9333333333vw; margin: 0 auto 5.4666666667vw; } #function .function_area .intro_no .tit_img { width: 32.276vw; margin-right: 1.72vw; } #function .function_area .intro_no .tit_no { height: 2.788vw; } #function .function_area .intro_txt { font-size: 3.2vw; font-weight: 400; letter-spacing: 0.1em; line-height: 1.5; margin-top: calc(0px - (((1em*1.5) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.5) - 1em)/2)); } #function .function_area .box01 .intro_area { margin-bottom: 5.4666666667vw; } #function .function_area .box01 .box_cont { position: relative; padding-top: 21.3333333333vw; } #function .function_area .box01 .function01_img { width: 100%; margin-bottom: 4.8vw; } #function .function_area .box01 .txt_area { width: 100%; } #function .function_area .box01 .txt_area .tit { position: absolute; top: 0; left: 0; z-index: 0; justify-content: center; width: 100%; font-size: 4.5333333333vw; font-weight: 500; letter-spacing: 0.05em; line-height: 1.4411764706; margin-top: calc(0px - (((1em*1.4411764706) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.4411764706) - 1em)/2)); } #function .function_area .box01 .txt_area .tit .icon { margin-right: 5.3333333333vw; width: 13.8666666667vw; } #function .function_area .box01 .txt_area .txt { font-size: 3.2vw; font-weight: 400; letter-spacing: 0.07em; line-height: 1.5833333333; margin-top: calc(0px - (((1em*1.5833333333) - 1em)/2)); margin-bottom: calc(6.9333333333vw - (((1em*1.5833333333) - 1em)/2)); } #function .function_area .box02 .box02_list { margin: 7.4666666667vw 0 7.2vw; } #function .function_area .box03 .box03_list { margin: 7.2vw 0 0; text-align: center; } #function .function_box:not(:last-child) { padding-bottom: 9.5733333333vw; margin-bottom: 9.6266666667vw; } #function .function_box .box_cont .box_tit { font-size: 4.5333333333vw; font-weight: 500; letter-spacing: 0.05em; line-height: 1.4411764706; margin-top: calc(0px - (((1em*1.4411764706) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.4411764706) - 1em)/2)); } #function .function_box .box_cont .sub { width: 32vw; height: 5.0666666667vw; font-size: 2.6666666667vw; font-weight: 400; letter-spacing: 0.05em; border-radius: 2.5333333333vw; margin: 3.2vw auto 0; } #function .function_box .box_cont .list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #function .function_box .box_cont .list li:not(:last-child) { margin-bottom: 8.1333333333vw; } #function .function_box .box_cont .list figure { margin-bottom: 4.1333333333vw; } #function .function_box .box_cont .list .list_txt { font-size: 3.2vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5833333333; margin-top: calc(0px - (((1em*1.5833333333) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.5833333333) - 1em)/2)); } } /*#function ----------------------------*/ #message { background: #E6E6E6; } #message .notebook .scrollListItem { display: block; } @media print, screen and (min-width: 768px) { #message { padding: 14.5rem 0 11.9rem; } #message .message_tit { font-size: 2.5rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2.2rem; } #message .message_tit_en { width: 7.852rem; } #message .box { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; margin-top: 7.84rem; } #message .box .txt_area { width: 35.0649350649%; } #message .box .txt_area .message_box_tit { width: 49.482rem; margin-left: 4.9074074074%; margin-bottom: 3.67rem; } #message .box .txt_area .notebook { padding-bottom: 7.525rem; padding-left: 4.4444444444%; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.4) 1px, transparent 1px, transparent 5.4rem); } #message .box .txt_area .notebook .tit { font-size: 2.2rem; font-weight: 600; letter-spacing: 0.15em; line-height: 2.4545454545; margin-top: calc(0px - (((1em*2.4545454545) - 1em)/2)); margin-bottom: calc(9.336rem - (((1em*2.4545454545) - 1em)/2)); } #message .box .txt_area .notebook .txt { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 3.375; margin-top: calc(0px - (((1em*3.375) - 1em)/2)); margin-bottom: calc(0px - (((1em*3.375) - 1em)/2)); } #message .box .message_img { width: 47.5324675325%; margin-left: 7.4025974026%; } } @media only screen and (max-width: 767px) { #message { padding: 14vw 0 0; } #message .message_tit { text-align: center; font-size: 4.2666666667vw; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 2.8vw; } #message .message_tit_en { width: 12.7946666667vw; margin: auto; } #message .box { margin-top: 8.8vw; } #message .box .txt_area { width: 85.0666666667vw; margin: 0 auto 7.6666666667vw; } #message .box .txt_area .message_box_tit { width: 77.7573333333vw; margin: 0 auto 4.9866666667vw; } #message .box .txt_area .notebook { padding-top: 9.7333333333vw; padding-bottom: 10.2666666667vw; padding-left: 3.2vw; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.4) 1px, transparent 1px, transparent 7.7333333333vw); } #message .box .txt_area .notebook .tit { font-size: 4vw; font-weight: 600; letter-spacing: 0.15em; line-height: 1.9; margin-top: calc(0px - (((1em*1.9) - 1em)/2)); margin-bottom: calc(12.4vw - (((1em*1.9) - 1em)/2)); } #message .box .txt_area .notebook .txt { font-size: 2.9333333333vw; font-weight: 400; letter-spacing: 0.1em; line-height: 2.6363636364; margin-top: calc(0px - (((1em*2.6363636364) - 1em)/2)); margin-bottom: calc(0px - (((1em*2.6363636364) - 1em)/2)); } #message .box .message_img { width: 100%; } } /*#visumo ----------------------------*/ #visumo .section_voice { margin: auto; } #visumo .ecbn-selection-page-wrapper .ecbn-selection-footer2 .ecbn-selection-powered-name .ecbn-visumo-logo { width: 55px; } @media print, screen and (min-width: 768px) { #visumo { padding: 17.64rem 0 0; } #visumo .sectit_area { margin-bottom: 6rem; } #visumo .sectit_area .sectit { width: 27.266rem; } #visumo .section_voice { width: 87.5811688312%; } } @media only screen and (max-width: 767px) { #visumo { padding: 19.7466666667vw 0 0; } #visumo .sectit_area { margin-bottom: 8vw; } #visumo .sectit_area .sectit { width: 44.1453333333vw; } #visumo .section_voice { width: 86.4vw; } } /*#special ----------------------------*/ #special .special_list { margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #special .special_list a:hover { text-decoration: none; } @media print, screen and (min-width: 768px) { #special { padding: 17.5rem 0; } #special .sectit_area { margin-bottom: 7.5rem; } #special .sectit_area .sectit { width: 43.215rem; } #special .special_list { width: 87.6623376623%; } #special .special_list li.small { width: 22.7777777778%; } #special .special_list li.large { width: 48.5185185185%; } #special .special_list li:not(:nth-child(-n + 2)) { margin-top: 6rem; } #special .special_list a:hover img { scale: 1.05 1.05; } #special .special_list .list_img { overflow: hidden; margin-bottom: 3rem; } #special .special_list .list_img img { transition: all 0.5s ease-in-out 0s; } #special .special_list .txt { font-size: 1.9rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.4736842105; margin-top: calc(0px - (((1em*1.4736842105) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.4736842105) - 1em)/2)); } } @media only screen and (max-width: 767px) { #special { padding: 19.3866666667vw 0 21.8666666667vw; } #special .sectit_area { margin-bottom: 8.1333333333vw; } #special .sectit_area .sectit { width: 69.968vw; } #special .special_list { width: 85.0666666667vw; } #special .special_list li.small { width: 40.4vw; } #special .special_list li.large { width: 100%; } #special .special_list li:not(:first-child) { margin-top: 7.2vw; } #special .special_list a { transition: all 0.1s ease-in-out 0s; } #special .special_list a:active { opacity: 0.7; } #special .special_list a:active img { scale: 1.05 1.05; } #special .special_list .list_img { overflow: hidden; margin-bottom: 4.4vw; } #special .special_list .list_img img { transition: all 0.1s ease-in-out 0s; } #special .special_list .txt { font-size: 3.2vw; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5833333333; margin-top: calc(0px - (((1em*1.5833333333) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.5833333333) - 1em)/2)); } } .separator_img { background-image: url("../separator_img01.png"); background-repeat: no-repeat; background-size: cover; } @media print, screen and (min-width: 768px) { .separator_img { height: 27.5324675325vw; } } @media only screen and (max-width: 767px) { .separator_img { height: 42.6666666667vw; } } /*youtube_popUP ---------------------------------------------------------------------------*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { background-size: auto; width: 49px; height: 52px; top: -62px; right: 0px; margin-right: 0; background: url(../btn_close_01.png) no-repeat top right; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /* オーバーレイ 初期状態 */ .mfp-fade.mfp-bg { opacity: 0; transition: all 0.5s ease-in-out 0s; } /* オーバーレイ 表示アニメーション */ .mfp-fade.mfp-bg.mfp-ready { opacity: .8; } /* オーバーレイ 非表示アニメーション */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* コンテンツ 初期状態 */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all 0.5s ease-in-out 0s; } /* コンテンツ 表示アニメーション */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* コンテンツ 非表示アニメーション */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /*js -----------------------------------------------------------------------------*/ .tran, .scrollListItem, .scrollItem, .scrollAllList > * { transition: all 0.5s ease-in-out 0s; } .fadein { opacity: 0; } .fadein.scrollActive { opacity: 1; } .fadeout { opacity: 1; } .fadeout.scrollActive { opacity: 0; } .fadeTop { translate: 0 2.5rem; } .fadeTop.scrollActive { translate: 0 0; } .fadeBottom { translate: 0 -2.5rem; } .fadeBottom.scrollActive { translate: 0 0; } .fadeRight { translate: 2.5rem 0; } .fadeRight.scrollActive { translate: 0 0; } .fadeRight100 { translate: 100% 0; } .fadeRight100.scrollActive { translate: 0 0; } .fadeLeft { translate: -2.5rem 0; } .fadeLeft.scrollActive { translate: 0 0; } .fadeLeft100 { translate: -100% 0; } .fadeLeft100.scrollActive { translate: 0 0; } .scaleUp { scale: 0.97 0.97; } .scaleUp.scrollActive { scale: 1 1; } .scaleUp00 { scale: 0 0; } .scaleUp00.scrollActive { scale: 1 1; } .scaleUp02 { scale: 0.8 0.8; } .scaleUp02.scrollActive { scale: 1 1; } .scaleX00 { scale: 0 1; } .scaleX00.scrollActive { scale: 1 1; } .scaleY00 { scale: 1 0; } .scaleY00.scrollActive { scale: 1 1; } .scaleDown { scale: 1.1 1.1; } .scaleDown.scrollActive { scale: 1 1; } .panelX { scale: 0 1; } .panelX.scrollActive { scale: 1 1; } .panel { transform: translate(0, 2rem) rotate(0deg) scale(0, 0.9) skew(0deg, 7.5deg); } .panel.scrollActive { transform: translate(0, 0) rotate(0deg) scale(1, 1) skew(0deg, 0deg); } .scrollAllList.allFadeIn > * { opacity: 0; } .scrollAllList.allFadeIn > *.scrollActive { opacity: 1; } .scrollAllList.allFadeTop > * { translate: 0 2.5rem; } .scrollAllList.allFadeTop > *.scrollActive { translate: 0 0; } .scrollAllList.allFadeRight > * { translate: 2.5rem 0; } .scrollAllList.allFadeRight > *.scrollActive { translate: 0 0; } .scrollAllList.allFadeLeft > * { translate: -2.5rem 0; } .scrollAllList.allFadeLeft > *.scrollActive { translate: 0 0; } .scrollAllList.allFadeRight100 > * { translate: 100% 0; } .scrollAllList.allFadeRight100 > *.scrollActive { translate: 0 0; } .scrollAllList.allFadeLeft100 > * { translate: -100% 0; } .scrollAllList.allFadeLeft100 > *.scrollActive { translate: 0 0; } .scrollAllList.allScaleDown > * { scale: 1.1 1.1; } .scrollAllList.allScaleDown > *.scrollActive { scale: 1 1; }