@charset "UTF-8"; /* font-family: 'Noto Sans JP', sans-serif; font-family: 'Roboto', sans-serif; */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; } html{ line-height: 1; } .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix{ height: 1%; } .clearfix{ display: block; } /* End hide from IE-mac */ ol, ul{ list-style: none; } table{ border-collapse: collapse; border-spacing: 0; } .clear { clear: both; } caption, th, td{ text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote{ quotes: none; } q:before, q:after, blockquote:before, blockquote:after{ content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{ display: block; } *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ font-family: 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.5; -webkit-text-size-adjust: 100%; color: #000; } img{ height: auto; max-width: 100%; vertical-align: top; } a{ text-decoration: none; } @media screen and (max-width: 768px) { .hidden-sp{ display: none !important; } } @media screen and (min-width: 769px) { .hidden-pc{ display: none !important; } } /*------------------------------------------ サービス別レスポンシブ ------------------------------------------*/ /*youtube*/ .youtubeWrapper{ position: relative; width: 100%; padding-top: 56.25%; } .youtubeWrapper iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 480px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -140px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } /*------------------------------------------ color ------------------------------------------*/ $mainColor: #EFEFEE; $secondaryColor: #EFEFEE; /*------------------------------------------ cmn ------------------------------------------*/ .hoverBtn{ transition: 0.3s; } .loopSlide{ display: flex; width: 100%; height: 208px; overflow: hidden; position: relative; &:before{ content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 2; } img { min-width: calc(7688px / 2); max-width: calc(7688px / 2); height: calc(416px / 2); &:first-child { animation: slide1 120s -60s linear infinite; } &:last-child { animation: slide2 120s linear infinite; } } } @keyframes slide1 { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes slide2 { 0% { transform: translateX(0); } to { transform: translateX(-200%); } } @media screen and (max-width: 768px) { .loopSlide{ display: flex; width: 100%; height: 130px; overflow: hidden; img { min-width: calc(7688px / 3); max-width: calc(7688px / 3); height: calc(416px / 3); &:first-child { animation: slide1 120s -60s linear infinite; } &:last-child { animation: slide2 120s linear infinite; } } } } /*------------------------------------------ body ------------------------------------------*/ #wrapper{ min-width: 980px; padding: 80px 0 0 0; } @media screen and (max-width: 1219px) { #wrapper{ padding: 80px 0 0 0; } } @media screen and (max-width: 768px) { #wrapper{ min-width: inherit; } } /*------------------------------------------ header nav ------------------------------------------*/ /*PC*/ header{ width: 100%; height: 80px; position: fixed; left: 0; top: 0; z-index: 1000; background: rgba(255,255,255,1); transition: 0.3s; .headerInner{ height: 100%; display: flex; justify-content: space-between; .logoBox{ height: 100%; margin-left: 60px; display: flex; align-items: center; font-size: 18px; font-weight: 700; span{ >span{ display: block; color: #da0012; } } } .headerTop{ display: block; position: fixed; right: 20px; top: 2px; z-index: 1000; width: 40px; height: 50px; } nav{ height: 100%; .navInner{ height: 100%; .navBox{ display: none; } ul{ .btn{ min-width: 270px; max-width: 270px; height: 60px; border: 2px solid #da0012; color: #da0012; font-weight: 700; &.link{ background: url("../img/arrow_right_red_01.svg") no-repeat right 10px center #FFF; background-size: 15px auto; &:hover{ background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; background-size: 15px auto; color: #FFF; } } &.rirekisho{ background: url("../img/icon_rirekisho_red.svg") no-repeat right 10px center #FFF; background-size: 24px auto; &:hover{ background: url("../img/icon_rirekisho_white.svg") no-repeat right 10px center #da0012; background-size: 24px auto; color: #FFF; } } } } ul.pc{ height: 100%; margin: 0 90px 0 0; display: flex; >li{ height: 100%; max-height: 100px; display: flex; align-items: center; &:not(:last-child){ margin-right: 12px; } } .snsBox{ min-width: 185px; max-width: 185px; .snsBtn{ display: flex; align-items: center; li{ &:not(:last-child){ margin-right: 12px; } a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } } } } .navBox{ display: none; width: 100%; height: 100%; position: fixed; right: 0; top: 0; z-index: 999; background: #FFF; .inner{ height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; ul{ height: auto; min-width: 270px; display: block; margin: 0; li:not(.sp){ height: auto; &:not(:last-child){ margin: 0 0 15px 0; } a{ height: auto; display: block; padding: 10px; transition: 0.3s; >span{ >span{ display: block; text-align: center; &.jp{ font-size: 15px; color: #000; transition: 0.3s; } } } &:hover{ background: #da0012; >span{ >span{ &.jp{ color: #FFF; } } } } } } } } } } } } &.fix{ height: 80px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ nav{ .navInner{ ul{ } } } } } } /*SP*/ @media screen and (max-width: 1190px) { header{ .headerInner{ .logoBox{ margin-left: 20px; font-size: 14px; @media screen and (max-width: 455px) { .sp{ display: block; } } } nav{ .navInner{ ul.pc{ display: none; } .navBox{ display: none; width: 100%; height: 100%; position: fixed; right: 0; top: 0; z-index: 999; background: #FFF; .inner{ height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; ul{ height: auto; display: block; margin: 0; li{ height: auto; &:not(:last-child){ margin: 0 0 15px 0; } a{ height: auto; display: block; padding: 10px; >span{ >span{ display: block; text-align: center; &.jp{ font-size: 15px; color: #da0012; transition: 0.3s; } } } &:hover{ >span{ >span{ &.jp{ color: #FFF; } } } } } &.sp{ display: block; .snsBox{ .snsBtn{ display: flex; align-items: center; justify-content: center; li{ a{ padding: 0; background: none; transition: 0.3s; &:hover{ opacity: 0.7; } } margin: 0; &:not(:last-child){ margin-right: 15px; } } } } } } } } } } } } &.fix{ height: 80px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ nav{ .navInner{ ul{ } } } } } } } /*------------------------------------------ menuTrigger ------------------------------------------*/ .menuBtn{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .menu-trigger, .menu-trigger span { display: inline-block; transition: 0.3s; box-sizing: border-box; } .menu-trigger { position: relative; width: 40px; height: 18px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background: #da0012; } .menu-trigger.active span { } .menu-trigger span:nth-of-type(1) { top: 0%; } .menu-trigger span:nth-of-type(2) { bottom: 0%; } .menu-trigger.active span:nth-of-type(1) { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); } .menu-trigger.active span:nth-of-type(2) { bottom: 50%; left: 50%; transform: translate(-50%, 50%) rotate(-45deg); } .menu-trigger{ >div{ font-size: 14px; font-weight: 700; font-family: 'Roboto', sans-serif; color: #da0012; position: absolute; right: 50%; transform: translate(50%, 0); bottom: -35px; } .closeTxt{ display: none; } &.active{ .menuTxt{ display: none; } .closeTxt{ display: inline-block; } } } /*------------------------------------------ #cmn ------------------------------------------*/ .innerBox{ max-width: 980px; margin: 0 auto; } @media screen and (max-width: 768px) { } /*------------------------------------------ #mv ------------------------------------------*/ .mvWrapper{ position: relative; z-index: 2; .mv{ .sp{ display: none; } .inner{ padding: 0 0 0 calc(100% / 16); position: relative; .mvTxt{ width: 100%; height: 100%; padding: 0 0 0 calc(100% / 16); position: absolute; right: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; } } .slick-dots{ bottom: 40px; li{ width: 14px; height: 14px; margin: 0 10px; font-size: 0; button{ width: 100%; height: 100%; padding: 0; &:before{ width: 100%; height: 100%; content: ""; background: #FFF; border-radius: 14px; opacity: 1; line-height: 1; } } &.slick-active{ button{ &:before{ background: #da0012; } } } } } } } @media screen and (max-width: 576px) { .mvWrapper{ .mv{ .sp{ display: block; } .pc{ display: none; } .inner{ padding: 0; .mvTxt{ padding: 0; } } .slick-dots{ bottom: 20px; li{ width: 10px; height: 10px; margin: 0 5px; font-size: 0; } } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .ttlBox{ h2{ span{ display: block; line-height: 1; text-align: center; &.en{ margin-bottom: 10px; font-size: 18px; font-family: 'Roboto', sans-serif; } &.jp{ font-size: 32px; font-weight: 500; } } } } .btn{ display: flex; align-items: center; justify-content: center; transition: 0.3s; } .sp{ display: none; } @media screen and (max-width: 768px) { .ttlBox{ h2{ text-align: center; span{ &.en{ margin-bottom: 10px; font-size: 14px; } &.jp{ font-size: 22px; } } } } } @media screen and (max-width: 480px) { } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ padding: 160px 0 100px 0; margin: 0 0 -60px 0; background: url("../img/bg_con_01.jpg") no-repeat center / cover; position: relative; top: -60px; .contents_01{ .ttlBox{ margin-bottom: 50px; h2 span{ color: #FFF; } } .innerBox{ padding: 10px 0 90px 0; position: relative; h3{ margin: 0 0 40px 0; text-align: center; } p{ font-size: 18px; color: #FFF; text-align: center; line-height: 2; } .frame{ width: 100%; height: 56px; position: absolute; .inner{ height: 100%; position: relative; &:before, &:after{ content: ""; width: 56px; height: 56px; display: block; position: absolute; border-top: 1px solid #FFF; border-left: 1px solid #FFF; } } &.top{ left: 0; top: 0; .inner{ &:before{ left: 0; top: 0; } &:after{ right: 0; top: 0; transform: rotate(90deg); } } } &.bottom{ left: 0; bottom: 0; .inner{ &:before{ left: 0; bottom: 0; transform: rotate(270deg); } &:after{ right: 0; bottom: 0; transform: rotate(180deg); } } } } } } } @media screen and (max-width: 768px) { .contents_bg_01{ padding: 100px 2.5% 50px 2.5%; margin: 0 0 -60px 0; background: url("../img/bg_con_01.jpg") no-repeat center / cover; position: relative; top: -60px; .contents_01{ .ttlBox{ margin-bottom: 50px; h2 span{ color: #FFF; } } .innerBox{ padding: 10px 0 60px 0; position: relative; h3{ margin: 0 0 40px 0; padding: 0 5%; text-align: center; } p{ padding: 0 5%; font-size: 16px; color: #FFF; text-align: left; line-height: 2; } .frame{ width: 100%; height: 56px; position: absolute; .inner{ height: 100%; position: relative; &:before, &:after{ content: ""; width: 56px; height: 56px; display: block; position: absolute; border-top: 1px solid #FFF; border-left: 1px solid #FFF; } } &.top{ left: 0; top: 0; .inner{ &:before{ left: 0; top: 0; } &:after{ right: 0; top: 0; transform: rotate(90deg); } } } &.bottom{ left: 0; bottom: 0; .inner{ &:before{ left: 0; bottom: 0; transform: rotate(270deg); } &:after{ right: 0; bottom: 0; transform: rotate(180deg); } } } } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ .contents_02{ padding: 100px 0 100px 0; .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .contents{ .boxWrapper{ max-width: 1100px; margin: 0 auto; >.box{ padding: 55px; border: 4px solid #e9e9e9; &:not(:last-child){ margin-bottom: 20px; } .boxLR{ margin: 0 0 30px 0; display: flex; justify-content: space-between; .txtBox{ width: 100%; max-width: 470px; .sTtl{ padding: 0 0 17px 0; margin: 0 0 30px 0; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; h3{ font-size: 26px; font-weight: 700; color: #da0012; } .iconTxt{ span{ display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 14px; font-weight: 700; color: #FFF; &:not(:last-child){ margin-right: 7px; } &.red{ background: #da0012; } &.gray{ background: #333; } &.pink{ background: #e75d68; } } } } .txt_01{ margin: 0 0 25px 0; font-size: 18px; color: #333; } dl{ padding: 25px; background: #f4eaea; display: flex; justify-content: space-between; dt{ margin: 0 50px 0 0; color: #da0012; font-weight: 700; } dd{ flex: 1; line-height: 1.8; } } } .imgBox{ width: 100%; max-width: 440px; } } .btnBox{ margin: 0 0 40px 0; ul{ display: flex; justify-content: center; li{ &:not(:last-child){ margin: 0 20px 0 0; } a{ width: 380px; height: 70px; border: 2px solid #da0012; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #da0012; background: url("../img/arrow_right_red_01.svg") no-repeat right 10px center #FFF; transition: 0.3s; &:hover{ color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; } } } } } .btnBoxBig{ a{ width: 100%; max-width: 540px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; transition: 0.3s; &:hover{ color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } } } } } } } } @media screen and (max-width: 768px) { .contents_bg_02{ .contents_02{ padding: 50px 0 50px 0; .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .contents{ .boxWrapper{ max-width: 1100px; margin: 0 auto; padding: 0 2.5%; >.box{ padding: 5%; border: 4px solid #e9e9e9; &:not(:last-child){ margin-bottom: 20px; } .boxLR{ margin: 0 0 30px 0; display: block; .txtBox{ width: 100%; max-width: 470px; .sTtl{ padding: 0 0 15px 0; margin: 0 0 20px 0; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; h3{ font-size: 18px; font-weight: 700; color: #da0012; flex: 1; } .iconTxt{ span{ display: inline-block; padding: 4px 5px; border-radius: 20px; font-size: 10px; font-weight: 700; color: #FFF; line-height: 1; &:not(:last-child){ margin-right: 2px; } &.red{ background: #da0012; } &.gray{ background: #333; } &.pink{ background: #e75d68; } } } } .txt_01{ margin: 0 0 25px 0; font-size: 16px; color: #333; } dl{ padding: 5%; margin: 0 0 10px 0; background: #f4eaea; display: block; dt{ margin: 0 0 5px 0; color: #da0012; font-weight: 700; br{ display: none; } } dd{ flex: 1; line-height: 1.8; } } } .imgBox{ width: 100%; max-width: 440px; .sp{ display: inline-block; } .pc{ display: none; } } } .btnBox{ margin: 0 0 20px 0; ul{ display: block; li{ &:not(:last-child){ margin: 0 0 20px 0; } a{ width: 100%; max-width: 380px; height: 70px; border: 2px solid #da0012; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #da0012; background: url("../img/arrow_right_red_01.svg") no-repeat right 10px center #FFF; transition: 0.3s; &:hover{ color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; } } } } } .btnBoxBig{ a{ width: 100%; max-width: 540px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; transition: 0.3s; &:hover{ color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } } } } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ background: #eeefef; .contents_03{ padding: 100px 0 100px 0; .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .tab_01{ margin: 0 0 30px 0; .slick-list{ overflow: inherit !important; } .slick-track{ width: 100% !important; transform: none !important; display: flex; flex-wrap: wrap; li{ width: 312px !important; height: 60px; margin: 0 20px 35px 0; background: #FFF; border-radius: 60px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; border: 2px solid #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.05); &:nth-child(3n){ margin-right: 0; } &.slick-active{ border: 2px solid #da0012; } .icon{ position: absolute; right: 50%; top: 0; transform: translate(50%, -50%); display: flex; span{ min-width: 90px; padding: 3px 10px; font-size: 14px; font-weight: 700; color: #FFF; border-radius: 20px; word-break: keep-all; text-align: center; &.red{ background: #da0012; } &.gray{ background: #333; } &.pink{ background: #e75d68; } &:not(:last-child){ margin-right: 15px; } } } } } } .data_01{ max-width: 1100px; margin: 0 auto; background: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.05); li{ padding: 60px 60px 40px 60px; .boxLR{ margin: 0 0 40px 0; display: flex; justify-content: space-between; .imgBox{ width: 100%; margin: 0 20px 0 0; max-width: 420px; order: 1; } .txtBox{ width: 100%; max-width: 500px; order: 2; .txtTtl{ margin: 0 0 35px 0; font-size: 26px; font-weight: 700; color: #da0012; } .txt_01{ font-size: 18px; color: #333; line-height: 1.8; } } } .btnBox{ a{ width: 100%; max-width: 340px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 20px; font-weight: 700; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; transition: 0.3s; &:hover{ background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } } } } .slick-arrow{ width: 63px; height: 58px; z-index: 3; cursor: pointer; &:before{ content: none !important; } &.slick-prev{ left: -75px; background: url("../img/slick_l.svg") no-repeat center center; } &.slick-next{ right: -75px; background: url("../img/slick_r.svg") no-repeat center center; } @media screen and (max-width: 1280px) { &.slick-prev{ left: 5px; } &.slick-next{ right: 5px; } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ background: #eeefef; .contents_03{ padding: 50px 0 50px 0; .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .tab_01{ display: none; margin: 0 0 30px 0; .slick-list{ overflow: inherit !important; } .slick-track{ width: 100% !important; transform: none !important; display: flex; flex-wrap: wrap; li{ width: 312px !important; height: 60px; margin: 0 20px 35px 0; background: #FFF; border-radius: 60px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; border: 2px solid #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.05); &:nth-child(3n){ margin-right: 0; } &.slick-active{ border: 2px solid #da0012; } span{ position: absolute; right: 50%; top: 0; transform: translate(50%, -50%); padding: 3px 10px; font-size: 14px; font-weight: 700; color: #FFF; border-radius: 20px; &.red{ background: #da0012; } &.gray{ background: #333; } &.pink{ background: #e75d68; } } } } } .data_01{ max-width: 95%; margin: 0 auto; background: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.05); li{ padding: 30px 20px 30px 20px; .boxLR{ margin: 0 0 40px 0; display: block; justify-content: space-between; .imgBox{ width: 100%; margin: 0 auto 0 auto; max-width: 420px; order: 1; } .txtBox{ width: 100%; max-width: 420px; margin: 0 auto 20px auto; order: 2; .txtTtl{ margin: 0 0 20px 0; font-size: 22px; font-weight: 700; color: #da0012; } .txt_01{ font-size: 16px; color: #333; line-height: 1.8; } } } .btnBox{ a{ width: 100%; max-width: 340px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 20px; font-weight: 700; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; transition: 0.3s; &:hover{ background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } } } } .slick-arrow{ width: 50px; height: 58px; cursor: pointer; &:before{ content: none !important; } &.slick-prev{ left: 5px; background: url("../img/slick_l.svg") no-repeat center center / 50px auto; } &.slick-next{ right: 5px; background: url("../img/slick_r.svg") no-repeat center center / 50px auto; } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ padding: 100px 0 100px 0; background: #eeefef; .contents_04{ .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .contents{ .whiteBox{ max-width: 1100px; padding: 60px 60px 45px 60px; margin: 0 auto; background: #FFF; .boxLR{ margin: 0 0 50px 0; display: flex; justify-content: space-between; .imgBox{ width: 100%; max-width: 320px; margin-right: 20px; } ul{ width: 100%; max-width: 610px; display: flex; flex-wrap: wrap; li{ min-width: 300px; margin: 0 10px 10px 0; &:nth-child(even){ margin-right: 0; } a{ width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; font-size: 16px; font-weight: 700; color: #FFF; text-align: center; transition: 0.3s; &:hover{ background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } } } } } .box_map{ padding: 0; max-width: 980px; width: 100%; border: none; background: #eeefef; input[type="text"]{ height: 40px; border: none; border-radius: 0; font-size: 16px; } button[type="submit"]{ height: 40px; background: #da0012; border-radius: 0; font-size: 18px; font-weight: 700; } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ padding: 50px 0 50px 0; background: #eeefef; .contents_04{ .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .contents{ .whiteBox{ max-width: 1100px; padding: 30px 2.5% 50px 2.5%; margin: 0 auto; background: #FFF; .boxLR{ margin: 0 0 30px 0; display: block; .imgBox{ display: none; width: 100%; max-width: 320px; margin-right: 20px; } ul{ width: 100%; max-width: 610px; display: flex; flex-wrap: wrap; li{ min-width: 49%; max-width: 49%; margin: 0 1% 1% 0; &:nth-child(even){ margin-right: 0; } a{ width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; font-size: 13px; font-weight: 700; color: #FFF; text-align: center; transition: 0.3s; &:hover{ background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } .sp{ display: block; } } } } } .box_map{ padding: 0; max-width: 980px; width: 100%; border: none; background: #eeefef; input[type="text"]{ height: 40px; border: none; border-radius: 0; font-size: 16px; } button[type="submit"]{ height: 40px; padding: 0; background: #da0012; border-radius: 0; font-size: 18px; font-weight: 700; } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ padding: 100px 0 50px 0; .contents_05{ .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .boxWrapper{ .box{ padding: 45px; border: 4px solid #e9e9e9; &:not(:last-child){ margin: 0 0 20px 0; } .q{ padding: 0 0 0 40px; font-size: 22px; font-weight: 700; color: #da0012; position: relative; &:before{ content: "Q"; font-family: 'Roboto', sans-serif; font-size: 26px; position: absolute; left: 0; top: 0; } } ul{ margin: 70px 0 0 0; display: flex; li{ min-width: 214px; max-width: 214px; margin: 0 8px 0 0; padding: 60px 15px 25px 15px; position: relative; background: #f4eaea; .num{ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; font-family: 'Roboto', sans-serif; color: #FFF; background: #da0012; border-radius: 60px; position: absolute; right: 50%; top: 0; transform: translate(50%, -50%); } .txt_01{ height: 60px; margin: 0 0 30px 0; font-size: 20px; font-weight: 700; color: #da0012; text-align: center; } .imgBox{ height: 70px; margin: 0 0 20px 0; display: flex; align-items: center; justify-content: center; } .txt_02{ color: #333; } } } .baseTxt{ margin: 25px 0 0 40px; font-size: 18px; color: #333; line-height: 1.8; } } } } } @media screen and (max-width: 768px) { .contents_bg_05{ padding: 50px 0 50px 0; .contents_05{ .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #da0012; } } .boxWrapper{ padding: 0 2.5%; .box{ padding: 5%; border: 4px solid #e9e9e9; &:not(:last-child){ margin: 0 0 20px 0; } .q{ padding: 0 0 0 30px; font-size: 18px; font-weight: 700; color: #da0012; position: relative; &:before{ content: "Q"; font-family: 'Roboto', sans-serif; font-size: 22px; position: absolute; left: 0; top: 0; } } ul{ margin: 50px 0 0 0; display: block; li{ min-width: 214px; max-width: 500px; margin: 0 auto 0 auto; padding: 50px 5% 25px 5%; position: relative; background: #f4eaea; &:not(:last-child){ margin-bottom: 50px; } .num{ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; font-family: 'Roboto', sans-serif; color: #FFF; background: #da0012; border-radius: 60px; position: absolute; right: 50%; top: 0; transform: translate(50%, -50%); } .txt_01{ height: inherit; margin: 0 0 15px 0; font-size: 18px; font-weight: 700; color: #da0012; text-align: center; } .imgBox{ height: 70px; margin: 0 0 20px 0; display: flex; align-items: center; justify-content: center; } .txt_02{ color: #333; } } } .baseTxt{ margin: 20px 0 0 30px; font-size: 16px; color: #333; line-height: 1.8; } } } } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .contents_bg_06{ padding: 50px 0 50px 0; background: #eeefef; .contents_06{ .btnBox{ margin: 0 0 50px 0; a{ width: 100%; max-width: 380px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #FFF; background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #da0012; transition: 0.3s; &:hover{ background: url("../img/arrow_right_white_01.svg") no-repeat right 10px center #000; } } } .snsBtn{ display: flex; align-items: center; justify-content: center; li{ &:not(last-child){ margin-right: 18px; } a{ transition: 0.3s; &:hover{ opacity: 0.6; } } } } } } @media screen and (max-width: 768px) { .contents_bg_06{ padding: 50px 2.5% 50px 2.5%; } } /* ------------------------------ トップへ戻る ------------------------------ */ #kyujin{ position: fixed; right: 20px; bottom: 20px; z-index: 200; a{ width: 160px; height: 160px; border: 2px solid #FFF; border-radius: 160px; background: #1a1a1a; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 700; color: #FFF; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.05); transition: 0.3s; &:hover{ background: #FFF; color: #1a1a1a; border: 2px solid #1a1a1a; } } } @media screen and (max-width: 768px) { #kyujin{ position: fixed; right: 10px; bottom: 10px; z-index: 200; a{ width: 85px; height: 85px; border: 2px solid #FFF; border-radius: 160px; background: #1a1a1a; display: flex; justify-content: center; align-items: center; font-size: 13px; font-weight: 700; color: #FFF; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.05); transition: 0.3s; &:hover{ background: #FFF; color: #1a1a1a; border: 2px solid #1a1a1a; } } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 50px 5%; text-align: center; *{ color: #000; font-size: 14px; } #links{ margin-bottom: 20px; a{ display: inline-block; &:hover{ text-decoration: underline; } } } #copy{ small{ font-size: 14px; } } } @media screen and (max-width: 768px) { footer { #links{ a{ } } #copy{ small{ } } } } /*------------------------------------------ モーダル ------------------------------------------*/ .modalContents{ display: none; } .modaal-container{ max-width: 100%; background: none; box-shadow: inherit; } .modaal-content-container{ padding: 0; } .modaal-outer-wrapper{ } .modaal-inner-wrapper{ } .modaal-overlay{ background: rgba(255,255,255,0.9) !important; opacity: 1 !important; z-index: 1000; } /*.modaal-inner-wrapper{ padding: 200px 0 100px 0; }*/ .modalInner{ .modaal-close.layer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .box{ min-width: 680px; max-width: 680px; margin: 0 auto; padding: 0; .contents{ .contentsInner{ position: relative; background: #FFF; padding: 60px 40px; box-shadow: 0 0 15px rgba(0,0,0,0.2); .btnCloseBox{ a{ width: 50px; height: 50px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #da0012; border-radius: 50px; cursor: pointer; transition: 0.3s; &:hover{ background: #333; } } } h3{ margin: 0 0 30px 0; font-size: 22px; font-weight: 700; color: #333; } .imgBox{ margin: 0 0 35px 0; text-align: center; } .schedule{ h4{ margin: 0 0 30px 0; font-size: 18px; font-weight: 700; color: #da0012; } .timeLine{ margin: 0 0 60px 0; position: relative; &:before{ content: ""; width: 3px; height: 100%; display: block; background: #da0012; position: absolute; left: 50px; top: 0; } dl{ position: relative; z-index: 3; &:not(:last-child){ margin: 0 0 20px 0; } display: flex; dt{ min-width: 100px; max-width: 100px; height: 24px; margin: 0 15px 0 0; font-size: 14px; font-weight: 700; color: #FFF; background: #da0012; border-radius: 20px; display: flex; align-items: center; justify-content: center; } dd{ flex: 1; font-size: 15px; color: #333; } } } } } } } } @media screen and (max-width: 768px) { .modaal-inner-wrapper{ padding: 50px 2%; } .modalInner{ .modaal-close.layer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .box{ min-width: inherit; max-width: 980px; margin: 0 auto; padding: 0; .contents{ padding: 50px 0; .contentsInner{ position: relative; border: 6px solid #0a958d; background: #FFF; .btnCloseBox{ a{ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #0a958d; cursor: pointer; transition: 0.3s; } } .topBox{ position: relative; background: #e6f4f4; &:before{ content: ""; width: 100%; height: 165px; display: block; background: #FFF; position: absolute; left: 0; top: 0; } >p{ padding: 10px 0 0 0; margin: 0 0 5px 5%; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1; color: #0a958d; span{ font-size: 14px; } strong{ font-size: 30px; } } .imgBox{ padding: 0 0 20px 0; position: relative; .txtBox{ padding: 0 5% 0 0; text-align: right; color: #0a958d; position: inherit; right: inherit; bottom: inherit; .position{ margin-bottom: 5px; font-size: 20px; } .name{ font-size: 22px; span{ font-size: 18px; } } .year{ font-size: 18px; } } } } .bottomBox{ max-width: 740px; padding: 50px 5%; margin: 0 auto; dl{ dt{ margin-bottom: 25px; font-size: 22px; font-weight: 700; color: #0a958d; } dd{ padding: 0; line-height: 1.7; &:not(:last-child){ margin-bottom: 60px; } } } .btnCloseBox{ .modaal-close{ margin: 40px auto 0 auto; } } } } } } } } /*/////////////////////アニメーション/////////////////////*/ .ani{ transition: .8s; } /* 2つ目:opacity*/ .list-mv02{ opacity: 0; -webkit-transform: translate(0,100px); -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .mv02{ opacity: 1.0; -webkit-transform: translate(0,0); }