/* ================================================================= LP共通 =================================================================*/ #top-page {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0;} #top-page * {box-sizing: border-box;} #top-page .jp {font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Noto Serif JP", serif;} #top-page .en {font-family: "EB Garamond";} #top-page .main {position: relative; z-index: 2;} #top-page .main-content {background: #fff; min-height: 100vh;} #top-page .cmn-title {font-family: "Hiragino Mincho Pro"; font-size: 30px; line-height: 1; text-align: center;} #top-page .cmn-title .en {display: block; font-size: 14px; font-family: "Libre Caslon Text"; color: #003F8E; margin-top: 18px;} #top-page .blue-bg {background: linear-gradient(90deg, rgba(110, 159, 199, 0.00) 36.68%, rgba(110, 159, 199, 0.40) 100%), #003F8E; color: #fff} /* レスポンシブ用 -------------------------------------------------------------*/ /* pcのみ */ .sp-only {display: none !important;} .pc-only {display: block !important;} /* spのみ */ @media screen and (max-width: 1199px) { .pc-only {display: none !important;} .sp-only {display: block !important;} } /* ================================================================= fvトップ共通 =================================================================*/ #top-page .fv .video-container {position: fixed; inset: 0; width: 100%; height: 100vh; z-index: 0; overflow: hidden; transition: opacity 0.6s ease;} #top-page .fv .video-container.hidden {opacity: 0; pointer-events: none;} #top-page .fv .video-container video {width: 100%; height: 100%; object-fit: cover;} #top-page .fv .video-container .overlay {position: absolute; inset: 0; backdrop-filter: blur(0px); background: rgba(255, 255, 255, 0); transition: backdrop-filter 0.3s ease, background 0.3s ease;} #top-page .fv .fv-image {width: 100%; height: 100vh; object-fit: cover;} #top-page .fv .fv-image img {width: 100%; height: 100vh; object-fit: cover;} #top-page .fv .fv-title {position: fixed; top: 106px; left: 20px; color: white; font-size: 32px; line-height: 1.5; transition: opacity 0.8s ease; z-index: 3; pointer-events: none;opacity: 1; } #top-page .fv .fv-title.fade-out {opacity: 0;} #top-page .fv .fv-title .main-title {display: flex; flex-direction: column; gap: 10px;} #top-page .fv .fv-title .main-title .en {font-size: 16px; font-weight: 400; line-height: 150%;} #top-page .fv-spacer {height: 100vh;} @media screen and (min-width: 1024px) { #top-page .fv .fv-title {top: 138px; left: 80px; color: white; font-size: 40px;} #top-page .fv .fv-title .main-title {gap: 10px;} #top-page .fv .fv-title .main-title .en {font-size: 24px;} } /* ================================================================= メッセージ =================================================================*/ #top-page .message {background: rgba(255, 255, 255, 0); padding: 100vh 0 80px; min-height: 100%; color: white; position: relative;} #top-page .message .inner {width: 100%; max-width: 1080px; padding: 0 20px; margin: auto;} #top-page .message h2 {font-size: 32px; margin-bottom: 20px;} #top-page .message p {font-size: 16px; width: 100%;} @media screen and (min-width: 1024px) { #top-page .message {padding-bottom: 156px;} #top-page .message .inner {display: flex; justify-content: space-between;} #top-page .message h2 {font-size: 40px; flex-shrink: 0;} #top-page .message p {width: 100%; max-width: 560px; font-size: 16px;} } /* ================================================================= 実績 =================================================================*/ #top-page .achievements {width: 100%; background: linear-gradient(90deg, rgba(110, 159, 199, 0.00) 36.68%, rgba(110, 159, 199, 0.40) 100%), #003F8E; color: #fff; padding: 60px 20px;} #top-page .achievements li {border-bottom: 1px solid #A9C0DA; text-align: center; padding: 30px 0;} #top-page .achievements li p {font-size: 28px; font-weight: 300;} #top-page .achievements li .main {font-size: 36px;} #top-page .achievements li .main span {font-size: 28px;} #top-page .achievements li .main strong {font-size: 80px; font-weight: bold; display: inline-block; margin: 0 10px; line-height: 1;} #top-page .achievements li .hosoku {font-size: 16px; margin-top: 20px; line-height: 1;} @media screen and (min-width: 1024px) { #top-page .achievements .list {display: flex; justify-content: center;} #top-page .achievements li {border-bottom: 0; width: 100%; max-width: 400px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 258px;} #top-page .achievements li:nth-child(2) {border-left: 1px solid #A9C0DA; border-right: 1px solid #A9C0DA;} } /* ================================================================= movie =================================================================*/ #top-page .movie {padding: 120px 0px 0;} #top-page .movie .movie-wrapper {padding: 0 20px 40px;} #top-page .movie img {width: 100%;} #top-page .movie video {width: 100%; aspect-ratio: 335/ 224; max-width: 960px; margin: auto; display: block} #top-page .movie h2 { margin-bottom: 0; line-height: 1.3; } .scroll-infinity__wrap {display: flex; overflow: hidden;} .scroll-infinity__list {display: flex; list-style: none; padding: 0} .scroll-infinity__list--left {animation: infinity-scroll-left 80s infinite linear 0.5s both;} .scroll-infinity__item {width: calc(100vw / 2);} .scroll-infinity__item > img {width: 100%;} .scroll-infinity__list--right{animation :infinity-scroll-right 80s infinite linear 0.5s both;} @keyframes infinity-scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes infinity-scroll-right { from { transform: translateX(-100%); } to { transform: translateX(0%); } } @media screen and (min-width: 1024px) { #top-page .movie h2 { margin-bottom: 0; line-height: 1.5; } #top-page .movie .movie-wrapper {padding: 0 0px 80px;} #top-page .movie iframe {max-width: 960px; margin: auto; display: block;} .scroll-infinity__item {width: calc(100vw / 4);} } /* ================================================================= 実績 =================================================================*/ #top-page .machine-list {padding: 80px 0;} #top-page .machine-list h2 {margin-bottom: 20px;} #top-page .machine-list .inner {padding-left: 20px;} #top-page .machine-list .table-container {overflow-x: auto; -webkit-overflow-scrolling: touch;} #top-page .machine-list .responsive-table {width: 100%; min-width: 600px; border-collapse: collapse; } #top-page .machine-list .responsive-table th {background: #003F8E; color: #FFF; font-size: 16px; padding: 5px 10px; border-right: 4px solid #fff; min-width: 160px;} #top-page .machine-list .responsive-table td {border-bottom: 1px solid #fff; background: #F6F7FA; font-size: 13px; padding: 7px 10px; border-right: 4px solid #fff;} #top-page .machine-list .more-row {display: none;} #top-page .machine-list .btnBox {text-align: center; margin-top: 20px;} #top-page .machine-list #toggleMore {width: 240px; height: 48px; border: 1px solid #000; background: #fff; font-size: 16px; display: flex; justify-content: center; align-items: center; margin: auto; text-decoration: none; position: relative;} #top-page .machine-list #toggleMore svg {position: absolute; right: 20px; top: 21px;} #top-page .machine-list #toggleMore.is-open svg {transform: rotate(180deg);} @media screen and (min-width: 1024px) { #top-page .machine-list .inner {padding: 0; max-width: 1080px; margin: auto;} } /* ================================================================= demolition-tech =================================================================*/ #top-page .demolition-tech {padding: 69px 0; background: linear-gradient(90deg, rgba(110, 159, 199, 0.00) 36.68%, rgba(110, 159, 199, 0.40) 100%), #003F8E; overflow: hidden} #top-page .demolition-tech h2.cmn-title {color: #fff; line-height: 1.5; font-size: 28px;} #top-page .demolition-tech h3 {color: #FFF; text-align: center; font-size: 20px; line-height: 180%; text-decoration-line: underline; text-underline-offset: 40%; margin-top: 28px;} #top-page .demolition-tech .swiper01-wrapper {margin-top: 29px; padding-left: 20px; overflow: visible; position: relative;} #top-page .demolition-tech .swiper01-wrapper .inner {width: 69.334%; } #top-page .demolition-tech .swiper {overflow: visible;} #top-page .demolition-tech .swiper-slide img {width: 100%;} #top-page .swiper-button-prev, #top-page .swiper-rtl .swiper-button-next {width: 40px !important; height: 40px !important; left: 4px !important; opacity: 1 !important;} #top-page .swiper-button-next, #top-page .swiper-rtl .swiper-button-prev {width: 40px !important; height: 40px !important; right: 4px !important; opacity: 1 !important;} #top-page .swiper-button-prev:after, #top-page .swiper-rtl .swiper-button-next:after {content: "" !important; display: block; background-size: cover; width: 40px !important; height: 40px !important; background-image: url('../images/top-page/arrow_prev.png');} #top-page .swiper-button-next:after, #top-page .swiper-rtl .swiper-button-prev:after {content: "" !important; display: block; background-size: cover; width: 40px !important; height: 40px !important; background-image: url('../images/top-page/arrow_next.png');} #top-page .demolition-tech .bottom {margin-top: 37px; color: #fff; padding: 0 20px;} @media screen and (min-width: 1024px) { #top-page .demolition-tech .swiper01-wrapper_wrap {width: 100%; overflow: hidden; margin-right: 0;} #top-page .demolition-tech .swiper01-wrapper {padding: 0 120px 0 18px; width: 100%; max-width: 100%; margin: 0 0 0 auto; overflow: hidden; position: relative;} #top-page .demolition-tech .swiper01-wrapper .inner {width: 100%; margin: 0 0 0 auto;} #top-page .demolition-tech .flex-wrap {display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; margin: 33px auto 0; padding-left: calc((100vw - 1200px) / 2)} #top-page .demolition-tech .text {width: 100%; max-width: 350px; flex-shrink: 0; margin-right: 44px; padding-top: 0px;} #top-page .demolition-tech h3 {font-size: 24px; text-align: left; margin-top: 0;} #top-page .demolition-tech .bottom {margin-top: 30px; padding: 0;} #top-page .swiper-button-prev, #top-page .swiper-rtl .swiper-button-next {width: 60px !important; height: 60px !important; left: 0px !important; opacity: 1 !important;} #top-page .swiper-button-next, #top-page .swiper-rtl .swiper-button-prev {width: 60px !important; height: 60px !important; right: 102px !important; opacity: 1 !important;} #top-page .swiper-button-prev:after, #top-page .swiper-rtl .swiper-button-next:after {content: "" !important; display: block; background-size: cover; width: 60px !important; height: 60px !important; background-image: url('../images/top-page/arrow_prev.png');} #top-page .swiper-button-next:after, #top-page .swiper-rtl .swiper-button-prev:after {content: "" !important; display: block; background-size: cover; width: 60px !important; height: 60px !important; background-image: url('../images/top-page/arrow_next.png');} } /* ================================================================= reasons =================================================================*/ #top-page .reasons {padding: 80px 0 0;} #top-page .reasons h2 + p {padding: 0 20px; text-align: center; letter-spacing: -0.16px; margin: 30px auto 44px;} #top-page .reasons .title {background-size: cover; width: 100%; height: auto; aspect-ratio: 375 / 280; display: flex; justify-content: center; align-items: center; margin-bottom: 40px;} #top-page .reasons .title h3 {text-align: center; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; font-size: 28px;} #top-page .reasons .title h3 strong {font-family: "Libre Caslon Text"; font-size: 50px;} #top-page .reasons .title h3 strong:before {content: "REASON"; color: #fff; opacity: 0.3; position: absolute; margin: auto; left: 0; right: 0; top: 0; font-size: 26px; text-align: center;} #top-page .reasons .box .fv {display: none;} #top-page .reasons .contents h4 {font-size: 19px; color: #000; text-align: center; letter-spacing: -1.4px; text-decoration-line: underline; text-underline-offset: 50%;} #top-page .reasons .box01 .title {background-image: url('../images/top-page/reasons_01_title-bg.jpg');} #top-page .reasons .box02 .title {background-image: url('../images/top-page/reasons_02_title-bg.jpg');} #top-page .reasons .box03 .title {background-image: url('../images/top-page/reasons_03_title-bg.jpg');} #top-page .reasons .box04 .title {background-image: url('../images/top-page/reasons_04_title-bg.jpg');} #top-page .reasons .box01 {padding-bottom: 60px;} #top-page .reasons .box01 .contents {padding: 0 20px;} #top-page .reasons .box01 h4 {margin-top: 60px;} #top-page .reasons .box01 .zero-list {margin-top: 30px; display: flex; flex-wrap: wrap; gap: 20px 15px;} #top-page .reasons .box01 .zero-list .item {width: calc((100% - 15px)/2);} #top-page .reasons .box01 .zero-list .item img {width: 100%;} #top-page .reasons .box01 .zero-list .item h5 {margin-top: 5px;} #top-page .reasons .box01 .zero-list .item p {margin-top: 8px; font-size: 16px;} #top-page .reasons .box01 .certificate {border: 1px solid #003F8E; padding: 30px 20px; margin-top: 40px;} #top-page .reasons .box01 .certificate p {font-size: 18px; line-height: 170%; letter-spacing: -0.72px;} #top-page .reasons .box01 .certificate img {margin-top: 20px; display: block;} #top-page .reasons .box02 {padding-bottom: 60px;} #top-page .reasons .box02 .swiper02-wrapper {margin-top: 29px; padding-left: 20px; overflow: visible; position: relative;} #top-page .reasons .box02 .swiper02-wrapper .inner {width: 69.334%;} #top-page .reasons .box02 .swiper {overflow: visible;} #top-page .reasons .box02 .swiper-slide img {width: 100%;} #top-page .reasons .box02 .top-text {padding: 0 20px;} #top-page .reasons .box02 .kaitai-list {background: #F6F7FA; margin-top: 54px; padding: 60px 0 5px; overflow: hidden;} #top-page .reasons .box02 .swiper-button-prev, #top-page .reasons .box02 .swiper-rtl .swiper-button-next {top: 253px !important;} #top-page .reasons .box02 .swiper-button-next, #top-page .reasons .box02 .swiper-rtl .swiper-button-prev {top: 253px !important;} #top-page .reasons .box02 .button a {width: 100%; height: 128px; background: linear-gradient(180deg, rgba(246, 247, 250, 0.00) -17.58%, #F6F7FA 34.77%); margin-top: -30px; display: flex; justify-content: center; align-items: center; text-decoration: none;} #top-page .reasons .box02 .item-inner p {margin-top: 20px;} #top-page .reasons .box02 .swiper-slide p.collapsed { max-height: 150px; overflow: hidden; position: relative; transition: max-height 0.4s ease;} #top-page .reasons .box02 .swiper-slide p.collapsed::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f6f7fa 100%); } #top-page .reasons .box02 h5 {font-size: 20px; font-weight: 700; margin-top: 30px;} #top-page .reasons .box03 .contents {padding: 0 20px 75px;} #top-page .reasons .box04 .contents {padding: 0 20px 40px;} #top-page .reasons .box04 .gomi {margin-top: 40px;} #top-page .reasons .box04 .gomi h4 {margin-bottom: 20px;} #top-page .reasons .box04 .gomi h4 + p {text-align: center; margin-bottom: 40px;} #top-page .reasons .box04 .gomi .list {position: relative; width: 335px; height: 314px; margin: auto;} #top-page .reasons .box04 .item {position: absolute; border: 1px solid #000; border-radius: 100%; width: 175px; height: 175px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 6px;} #top-page .reasons .box04 .item h5 {font-size: 14px; text-align: center; font-weight: 600;} #top-page .reasons .box04 .item p {font-size: 12px; letter-spacing: -1.2px; line-height: 18px; text-align: center;} #top-page .reasons .box04 .item:nth-child(1) {margin: auto; left: 0; right: 0;} #top-page .reasons .box04 .item:nth-child(2) {left: 0; top: 138px;} #top-page .reasons .box04 .item:nth-child(3) {right: 0; top: 138px;} @media screen and (min-width: 1024px) { #top-page .reasons .title {width: 100%; max-width: 1200px; height: 540px; aspect-ratio: auto; display: block; margin: 0px auto; position: relative; display: flex; justify-content: flex-end;} #top-page .reasons .box:nth-child(even) .title {justify-content: flex-start;} #top-page .reasons .title .text {max-width: 570px; padding: 50px; background: #fff;} #top-page .reasons .title h3 {text-align: left; position: relative; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; color: #000; font-size: 32px;} #top-page .reasons .title h3 strong {font-size: 50px; color: #003F8E; padding-left: 95px;} #top-page .reasons .title h3 strong:before {color: #003F8E; opacity: 0.3; left: 0; right: auto; top: 0; font-size: 26px; text-align: center;} #top-page .reasons .title p {margin-top: 20px;} #top-page .reasons .contents h4 {font-size: 24px;} #top-page .reasons .box .fv {position: absolute; left: 0; width: 90%; max-width: 1000px; overflow: hidden; display: block;} #top-page .reasons .box .fv img {width: 100%; height: 540px; object-fit: cover;} #top-page .reasons .box:nth-child(even) .fv {left: auto; right: 0;} #top-page .reasons .box01 .title {background-image: none;} #top-page .reasons .box02 .title {background-image: none;} #top-page .reasons .box03 .title {background-image: none;} #top-page .reasons .box04 .title {background-image: none;} #top-page .reasons .box01 h4 {margin-top: 74px;} #top-page .reasons .box01 .zero-list {margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 30px 14px; width: 100%; max-width: 1200px;} #top-page .reasons .box01 .zero-list .item {width: calc((100% - 14px * 2)/3); position: relative;} #top-page .reasons .box01 .zero-list .item h5 {position: absolute; top: 30px; left: 30px; font-size: 24px; color: #fff;} #top-page .reasons .box01 .certificate {padding: 50px 58px; margin: 62px auto 0; max-width: 840px; display: flex; align-items: center; flex-direction: row-reverse} #top-page .reasons .box01 .certificate img {max-width: 270px; margin-top: 0;} #top-page .reasons .box01 .certificate p {margin-left: 52px; font-size: 24px;} #top-page .reasons .box02 {background: #F6F7FA; padding: 78px 0 0;} #top-page .reasons .box02 .top-text {padding: 0 0px;} #top-page .reasons .box02 .swiper02-wrapper .inner {width: 100%; max-width: 1200px; margin: auto;} #top-page .reasons .box02 h5 {margin-top: 20px;} #top-page .reasons .box02 .item-inner p {margin-top: 15px;} #top-page .reasons .box03 {padding: 80px 0 0;} #top-page .reasons .box03 .contents {padding-bottom: 80px;} #top-page .reasons .box04 {padding: 80px 0 40px; background: #F6F7FA;} #top-page .reasons .box04 .gomi {display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 50px auto 0; padding: 0 60px;} #top-page .reasons .box04 .gomi h4 {text-align: left;} #top-page .reasons .box04 .gomi h4 + p {text-align: left;} #top-page .reasons .box04 .gomi .gomi-title {flex-shrink: 0;} #top-page .reasons .box04 .gomi .list {display: flex; width: 100%; justify-content: flex-end; height: 300px;} #top-page .reasons .box04 .gomi .item {width: 300px; height: 300px; position: static; margin-left: -24px;} #top-page .reasons .box04 .item h5 {font-size: 20px;} #top-page .reasons .box04 .item p {font-size: 16px; line-height: 1.5;} #top-page .reasons .box04 .item:nth-child(1) {margin: 0 0 0 -24px;} .parallax-section { display: flex; width: 100%; height: 540px; position: relative; overflow: hidden; margin: 0px 0; } .parallax-image { width: 100%; height: 100%; overflow: hidden; position: relative; } .parallax-image .bg { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background-size: cover; background-position: center; transform: translateY(0); transition: transform 0.05s linear; } .box01 .parallax-image .bg {background-image: url("../images/top-page/reasons_01_title-image.jpg");} .box02 .parallax-image .bg {background-image: url("../images/top-page/reasons_02_title-image.jpg");} .box03 .parallax-image .bg {background-image: url("../images/top-page/reasons_03_title-image.jpg");} .box04 .parallax-image .bg {background-image: url("../images/top-page/reasons_04_title-image.jpg");} } /* ================================================================= projects =================================================================*/ #top-page .projects {padding: 80px 0 30px;} #top-page .projects h2.cmn-title .en {color: #fff;} #top-page .projects .list {margin-top: 43px; padding: 0 20px;} #top-page .projects .list .box {padding-bottom: 37px;} #top-page .projects .list .box img {width: 100%;} #top-page .projects .list h3 {margin-top: 18px; font-size: 18px;} #top-page .projects .list p {margin-top: 10px; font-size: 16px;} #top-page .projects .list p.clamp {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } #top-page .projects .list p.expanded {display: block; -webkit-line-clamp: unset; overflow: visible; } #top-page .projects .list .button a {color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; text-decoration: none; padding-top: 20px;} @media screen and (min-width: 1024px) { #top-page .projects h2.cmn-title {width: 100%; max-width: 1200px; margin: auto; display: flex; flex-direction: column; align-items: flex-start;} #top-page .projects .list {display: flex; justify-content: center; width: 100%; max-width: 1200px; margin: 35px auto 0; gap: 40px; padding: 0;} #top-page .projects .list .box {width: calc((100% - 40px)/2);} #top-page .projects .list h3 {font-size: 20px;} #top-page .projects .list p {font-size: 16px;} } #top-page .projects .list .box img { aspect-ratio: 1.5; object-fit: cover; } /* ================================================================= other =================================================================*/ #top-page .other {overflow: hidden; padding: 0 0 70px;} #top-page .other h2.cmn-title .en {color: #fff;} #top-page .other .inner {overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */} #top-page .other .inner::-webkit-scrollbar {display: none; /* Chrome / Safari / Edge */} #top-page .other .list {display: flex; align-items: flex-start; gap: 30px; margin-top: 44px; padding: 0 20px 0 20px; width: max-content;} #top-page .other .list .item {flex-shrink: 0; max-width: 260px;} #top-page .other .list .item img {width: 100%;} #top-page .other .list .item h3 {font-size: 18px; margin-top: 18px;} #top-page .other .list .item .tag {margin-top: 20px; display: flex; gap: 20px;} #top-page .other .list .item .tag li {background: #fff; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 9999px; color: #000; font-size: 14px; padding: 10px;} @media screen and (min-width: 1024px) { #top-page .other {width: 100%; max-width: 1200px; margin: auto;} #top-page .other h2.cmn-title {display: flex; flex-direction: column; align-items: flex-start;} #top-page .other .inner {overflow: hidden;} #top-page .other .list {padding: 0; gap: 40px;} #top-page .other .list .item {flex-shrink: 0; max-width:353px;} } /* ================================================================= flow =================================================================*/ #top-page .flow {padding: 80px 20px 54px; height: 810px; background-image: url('../images/top-page/flow_bg.jpg'); background-size: cover; color: #fff;background-position: bottom;} #top-page .flow h2.cmn-title .en {color: #fff;} #top-page .flow h2 + p {margin-top: 34px;} #top-page .flow .list {margin-top: 40px; height: 400px; overflow: scroll;} #top-page .flow .list .item {position: relative; display: flex; align-items: flex-start; gap: 10px; padding-bottom: 30px;} #top-page .flow .list .item:before {content: ""; display: block; width: 1px; height: calc(100% - 54px); background: #fff; position: absolute; top: 54px; left: 27px;} #top-page .flow .list .item:last-child:before {display: none;} #top-page .flow .list .num {display: flex; justify-content: center; align-items: center; width: 54px; height: 54px; border-radius: 100%; border: 1px solid #fff; font-size: 25px; flex-shrink: 0} #top-page .flow .list .text {padding-top: 8px;} #top-page .flow .list .text h3 {font-size: 20px;} #top-page .flow .list .text p {font-size: 14px; margin-top: 5px;} @media screen and (min-width: 1024px) { #top-page .flow {padding: 80px 0 0 0px; height: auto;} #top-page .flow .title {display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1200px; margin: auto;} #top-page .flow .title h2 {flex-shrink: 0; text-align: left; font-size: 40px;} #top-page .flow .title p {max-width: 720px;} #top-page .flow h2 + p {margin-top: 0;} #top-page .flow .list-wrap {overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ height: auto;} #top-page .flow .list-wrap::-webkit-scrollbar {display: none; /* Chrome / Safari / Edge */} #top-page .flow .list {display: flex; width: max-content; min-width: 100%; padding-left: calc((100vw - 1200px) / 2); overflow: hidden;} #top-page .flow .list .item {flex-direction: column; flex-shrink: 0; min-width: 280px; max-width: 340px; padding: 0 40px 0 0;} #top-page .flow .list .item:before {width: calc(100% - 54px); height: 1px; top: 27px; left: 54px;} #top-page .flow .list .text h3 {font-size: 25px;} #top-page .flow .list .text p {font-size: 16px;} #top-page .flow .list-wrap { cursor: grab; } #top-page .flow .list-wrap.dragging { cursor: grabbing; } } /* ================================================================= faq =================================================================*/ #top-page .faq {padding: 76px 20px 80px;} #top-page .faq h2.cmn-title {margin-bottom: 48px;} #top-page .faq .faq-content + .faq-content {margin-top: 20px;} #top-page .faq .faq-question__title {display: flex; align-items: flex-start; position: relative; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0 35px 0 0;} #top-page .faq .faq-question__title::before {content: "Q."; font-family: "Hiragino Mincho Pro"; font-size: 19px; font-weight: normal; flex-shrink: 0; margin-right: 7px; color: #000;} #top-page .faq .faq-question__title::after {content: ""; display: block; width: 15px; height: 15px; background: url('../images/top-page/icon-plus.png'); background-size: cover; flex-shrink: 0; align-self: center; position: absolute; right: 0px;} #top-page .faq .faq-question.is-open .faq-question__title::after {background: url('../images/top-page/icon-minus.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;} #top-page .faq .faq-answer {display: none;} #top-page .faq .faq-answer__wrap {margin-top: 20px; display: flex; padding: 23px; font-weight: 500; font-size: 14px; background: #F6F6F6;} #top-page .faq .faq-answer__wrap::before {content: "A."; font-family: "Hiragino Mincho Pro"; font-size: 19px; font-weight: normal; flex-shrink: 0; margin-right: 16px; color: #000; line-height: 1;margin-top: 3px;} #top-page .faq .faq-answer__wrap a {display: inline;} @media screen and (min-width: 1024px) { #top-page .faq {padding: 80px 20px 130px;} #top-page .faq .faq-content {max-width: 840px; margin: auto;} #top-page .faq .faq-answer__wrap {font-size: 16px;} #top-page .faq .faq-question__title::after {right: 14px;} #top-page .faq .faq-question.is-open .faq-question__title::after {right: 14px;} } .l_header_navi .logo,.l_footer .logo { background-image: url(../images/globalLogo.svg); background-size: contain; } .l_main_navi a { text-decoration: none; } .swiper-button-disabled { display: none !important; }