/* CSS Document */ @-ms-viewport { width: device-width; } .main-bg{ padding-top: 128px; padding-bottom: 110px; background: url("../../speedio-navi/img/main-bg.jpg") no-repeat center top / 1366px; } .main-bg .main-logo{ max-width: 315px; width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 0px; } .main-bg .main-txt{ line-height: 1.27; font-size: 22px; color: #fff; text-shadow: 5px 5px 10px rgba(0,0,0,0.7); text-align: center; } .nav-cont{ padding-top: 15px; padding-bottom: 80px; background: #b7d8ee; color: #0d2e9b; } .nav-cont .pankuzu li{ color:#1d1d1d; } .nav-cont .m-box{ margin-top: 60px; } .nav-cont .s-ttl{ margin-bottom: 45px; } .eve-cont{ padding-top: 90px; padding-bottom: 80px; color: #fff; background: #06225d; } .eve-list{ display: flex; justify-content: center; margin-top: 25px; } .eve-list li{ width: 49.3%; margin-right: 1.4%; } .eve-list li:last-child{ margin-right: 0; } .eve-list li a{ display: block; background: #fff; padding: 15px 15px; } .eve-list li .list-bg{ position: relative; } .eve-list li .list-bg .list-icon{ position: absolute; top: 50%; left: 50%; width: 100px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); } .eve-list li .list-bg .ex-obi{ position: absolute; right:36px; bottom: 10%; display: inline-block; padding: 15px 15px; color: #fff; background: #a20017; line-height: 1; } .eve-list li .list-flex{ display: flex; width: 90%; align-items: center; justify-content: space-between; padding-top: 35px; padding-bottom: 15px; margin-left: auto; margin-right: auto; } .eve-list li .list-flex .list-icon{ width: 7%; } .eve-list li .list-flex .list-text{ width: 86%; color: #0d2e9b; } .eve-list li .list-flex .list-text .list-ttl{ font-size: 23px; font-weight: 700; margin-bottom: 10px; line-height: 1.25; } .eve-list li .list-flex .list-text .list-info{ font-size: 15px; font-weight: 400; line-height: 1.25; } .machi-cont{ padding-top: 80px; padding-bottom: 80px; color: #0d2e9b; background: #b7d8ee; } .machi-list{ display: flex; justify-content: center; margin-top: 25px; } .machi-list li{ width: 49.3%; margin-right: 1.4%; } .machilist li:last-child{ margin-right: 0; } .machi-list li a{ display: block; background: #0d2e9b; padding: 15px 15px; } .machi-list li .list-bg{ position: relative; } .machi-list li .list-bg .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 15px 15px; color: #fff; background: #a20017; line-height: 1; } .machi-list li .list-flex{ display: flex; width: 90%; align-items: center; justify-content: space-between; padding-top: 35px; padding-bottom: 15px; margin-left: auto; margin-right: auto; } .machi-list li .list-flex .list-icon{ width: 7%; } .machi-list li .list-flex .list-text{ width: 86%; color: #fff; } .machi-list li .list-flex .list-text .list-ttl{ font-size: 20px; font-weight: 700; line-height: 1.6; word-break: break-all; } .case-cont{ padding-top: 80px; padding-bottom: 80px; color: #0d2e9b; background: #e4e1d0; } .case-cont .case-list{ margin-top: 12px; } .case-cont .link-btn{ margin-top: 60px; } .spe-cont{ padding-top: 80px; padding-bottom: 80px; color: #0d2e9b; background: #fff; } .spe-list{ margin-top: 8px; display: flex; flex-wrap: wrap; } .spe-list li{ width: 49%; margin-right: 2%; margin-top: 26px; } .spe-list li:nth-child(2n){ margin-right: 0; } .spe-list li .bnr-box{ position: relative; margin-bottom: 16px; } .spe-list li .bnr-box .icon{ position: absolute; bottom: 15px; right:15px; width: 28px; } .spe-list li .bnr-box .txt-box{ position: absolute; top:20px; left: 20px; color: #fff; width:80%; } .spe-list li .bnr-box .txt-box .ttl{ font-size: 27px; font-weight: 700; margin-bottom: 5px; line-height: 1.25; } .spe-list li .bnr-box .txt-box .txt{ font-size: 14px; font-weight: 400; line-height: 1.25; } .yajirushitex{ font-size: 14px; line-height: 1; padding-left: 16px; text-indent: -16px; display: inline-block; text-align: left; } .yajirushitex:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-right: 8px; } .line-up{ background: url("../../speedio-navi/img/line-up.jpg") no-repeat center top / cover; padding-top: 80px; padding-bottom: 80px; position: relative; } .line-up .m-ttl{ line-height: 1.38; } .line-up .con-box{ max-width: 705px; width: 90%; margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px; text-align: center; background: rgba(255,255,255,0.87); border-radius: 10px; color: #101d99; } .line-up .con-box .link-btn{ margin-top: 30px; max-width:240px ; } .line-up .ex-obi{ position: absolute; right:60px; bottom: 60px; display: inline-block; padding: 15px 24px; color: #fff; background: #a20017; line-height: 1; font-size: 23px; } .movie-cont{ padding-top: 90px; padding-bottom: 80px; background: #e4e1d0; color: #0d2e9b; } .movie-cont .link-btn{ margin-top: 56px; } .movie-list{ display: flex; flex-wrap: wrap; } .movie-list li{ width: 32%; padding: 0 8px;/*add Togashi 20240725*/ margin-right: 1.3%; margin-top: 28px; } .movie-list li:nth-child(3n){ margin-right: 0; } .movie-list li .pic-box{ margin-bottom: 15px; position: relative; } /* >> add Togashi 20240725*/ .movie-list li .pic-box img { width: 100%; } /* << add Togashi 20240725*/ .movie-list li .pic-box .icon{ position: absolute; /*上下左右中央配置*/ top: 50%; left: 50%; width: 52px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .movie-list li .text-box{ font-size: 15px; line-height: 1.6; color: #000000; font-weight: 700; } .kanren-cont{ padding-top: 106px; padding-bottom: 110px; background: #fff; color: #0d2e9b; } .kanren-cont .m-ttl{ text-align: center; } .kanren-cont .s-ttl{ text-align: center; } .kanren-cont .bnr-box{ position: relative; margin-bottom: 14px; } .kanren-cont .ttl{ font-size: 15px; line-height: 1.57; } .kanren-list{ margin-top: 14px; display: flex; flex-wrap: wrap; } .kanren-list li{ width: 49%; margin-right: 2%; margin-top: 34px; } .kanren-list li:nth-child(2n){ margin-right: 0; } .kanren-list2{ margin-top: 10px; display: flex; flex-wrap: wrap; } .kanren-list2 li{ width: 23.8%; margin-right: 1.5%; margin-top: 14px; } .kanren-list2 li:nth-child(4n){ margin-right: 0; } .kanren-list2 li .icon{ display: inline-block; width: 10px; margin-left: 3px; vertical-align: middle; } .kanren-list2 li .icon img{ display: block; } .kanren-cont .bnr-box .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 15px 15px; color: #fff; background: #a20017; line-height: 1; } @media print, screen and (min-width : 1367px) { .main-bg{ background: url("../../speedio-navi/img/main-bg.jpg") no-repeat center top / cover; } } @media print, screen and (max-width: 900px) { .main-bg{ padding-top: 15.2vw; padding-bottom: 9.1vw; background: url("../../speedio-navi/img/main-bg-sp.jpg") no-repeat center top / cover; } .main-bg .main-logo{ max-width:none; width: 50.2%; margin-left: auto; margin-right: auto; margin-bottom:-0.4vw; } .main-bg .main-txt{ line-height: 1.75; font-size:4.83vw; } .nav-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .nav-cont .m-box{ margin-top: 0px; } .nav-cont .s-ttl{ margin-bottom: 14.49vw; } .eve-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .eve-list{ display: block; justify-content: center; margin-top: 4.83vw; } .eve-list li{ width: 100%; margin-right: 0%; margin-bottom: 2.42vw; } .eve-list li:last-child{ margin-right: 0; margin-bottom: 0; } .eve-list li a{ display: block; padding: 2.9vw 2.9vw; } .eve-list li .list-bg{ position: relative; } .eve-list li .list-bg .list-icon{ position: absolute; top: 50%; left: 50%; width: 17.3vw; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); } .eve-list li .list-bg .ex-obi{ position: absolute; right:36px; bottom: 10%; display: inline-block; padding: 15px 15px; color: #fff; background: #a20017; line-height: 1; } .eve-list li .list-flex{ display: flex; width: 90%; align-items: center; justify-content: space-between; padding-top: 4.3vw; padding-bottom: 2.4vw; margin-left: auto; margin-right: auto; } .eve-list li .list-flex .list-icon{ width: 7%; } .eve-list li .list-flex .list-text{ width: 86%; } .eve-list li .list-flex .list-text .list-ttl{ font-size: 4.59vw; font-weight: 700; margin-bottom: 2.42vw; line-height: 1.25; } .eve-list li .list-flex .list-text .list-info{ font-size: 3.14vw; font-weight: 400; line-height: 1.25; } .machi-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .machi-list{ display: block; justify-content: center; margin-top: 4.83vw; } .machi-list li{ width: 100%; margin-right: 0%; margin-bottom: 2.42vw; } .machilist li:last-child{ margin-right: 0; margin-bottom: 0; } .machi-list li a{ display: block; padding: 2.9vw 2.9vw; } .machi-list li .list-bg{ position: relative; } .machi-list li .list-bg .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 15px 15px; color: #fff; background: #a20017; line-height: 1; } .machi-list li .list-flex{ display: flex; width: 90%; align-items: center; justify-content: space-between; padding-top: 4.3vw; padding-bottom: 2.4vw; margin-left: auto; margin-right: auto; } .machi-list li .list-flex .list-icon{ width: 7%; } .machi-list li .list-flex .list-text{ width: 86%; } .machi-list li .list-flex .list-text .list-ttl{ font-size: 4.11vw; font-weight: 700; line-height: 1.6; word-break: break-all; } .case-cont{ padding-top:9.66vw; padding-bottom: 9.66vw; } .case-cont .case-list{ margin-top: 4.83vw; } .case-cont .link-btn{ margin-top: 7.25vw; } .spe-cont{ padding-top:9.66vw; padding-bottom:9.66vw; } .spe-list{ margin-top: 4.83vw; display: flex; flex-wrap: wrap; } .spe-list li{ width: 100%; margin-right: 0%; margin-top: 2.42vw; } .spe-list li:first-child{ margin-top: 0; } .spe-list li:nth-child(2n){ margin-right: 0; } .spe-list li .bnr-box{ position: relative; margin-bottom: 0vw; } .spe-list li .bnr-box .icon{ position: absolute; bottom: 2.9vw; right:2.9vw; width: 6.2vw; } .spe-list li .bnr-box .txt-box{ position: absolute; top:2.9vw; left: 2.9vw; color: #fff; width:80%; } .spe-list li .bnr-box .txt-box .ttl{ font-size: 4.59vw; font-weight: 700; margin-bottom: 1vw; line-height: 1.25; } .spe-list li .bnr-box .txt-box .txt{ font-size: 3.1vw; font-weight: 400; line-height: 1.25; } .yajirushitex{ font-size: 3.1vw; line-height: 1; padding-left: 3.2vw; text-indent: -3.2vw; display: inline-block; text-align: left; } .yajirushitex:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.5vw; height: 1.5vw; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-right: 1.5vw; } .line-up{ background: url("../../speedio-navi/img/line-up-sp.jpg") no-repeat center top / cover; padding-top: 14.49vw; padding-bottom: 14.49vw; position: relative; } .line-up .con-box{ max-width:none; width: 76%; margin-left: auto; margin-right: auto; padding-top:12vw; padding-bottom: 9.6vw; text-align: center; border-radius:2vw; } .line-up .con-box .link-btn{ margin-top: 7.2vw; max-width:none; width: 76%; } .line-up .ex-obi{ position: absolute; right:60px; bottom: 60px; display: inline-block; padding: 15px 24px; color: #fff; background: #a20017; line-height: 1; font-size: 23px; } .movie-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .movie-cont .link-btn{ margin-top: 7.25vw; } .movie-list{ display: block; flex-wrap: wrap; } .movie-list li{ width: 100%; padding: 0 3px; margin-right:0%; margin-top:4.83vw; } .movie-list li:nth-child(3n){ margin-right: 0; } .movie-list li .pic-box{ margin-bottom: 2.4vw; position: relative; } .movie-list li .pic-box img { /*西岡追加 20240501*/ width: 100%; } .movie-list li .pic-box .icon{ position: absolute; /*上下左右中央配置*/ top: 50%; left: 50%; width: 12vw; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .movie-list li .text-box{ font-size:3.6vw; line-height: 1.6; font-weight: 700; } .kanren-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .kanren-cont .m-ttl{ text-align: left; } .kanren-cont .s-ttl{ text-align: left; } .kanren-cont .bnr-box{ position: relative; margin-bottom: 2.4vw; } .kanren-cont .ttl{ font-size: 3.1vw; line-height: 1.57; } .kanren-list{ margin-top: 4.83vw; display: flex; flex-wrap: wrap; } .kanren-list li{ width: 100%; margin-right: 0%; margin-top: 4.83vw; } .kanren-list li:first-child{ margin-top: 0; } .kanren-list li:nth-child(2n){ margin-right: 0; } .kanren-list2{ margin-top: 0px; display: flex; flex-wrap: wrap; } .kanren-list2 li{ width: 48%; margin-right: 4%; margin-top: 4.83vw; } .kanren-list2 li:nth-child(2n){ margin-right: 0; } .kanren-list2 li:nth-child(4n){ margin-right: 0; } .kanren-list2 li .icon{ display: inline-block; width: 2.1vw; margin-left: 1vw; vertical-align: middle; } .kanren-list2 li .icon img{ display: block; } .kanren-cont .bnr-box .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 15px 15px; color: #fff; background: #a20017; line-height: 1; } } body{ opacity: 0; transition: all 0.3s 0.6s; } body.fadein{ opacity: 1; }