@charset "UTF-8"; /* font-family: 'Noto Sans JP', sans-serif; font-family: 'Poppins', 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{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover{ } .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: 145px 0 0 0; } @media screen and (max-width: 1219px) { #wrapper{ padding: 60px 0 0 0; } } @media screen and (max-width: 768px) { #wrapper{ min-width: inherit; } } /*------------------------------------------ header nav ------------------------------------------*/ /*PC*/ header{ width: 100%; height: 145px; 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: 50px; display: flex; align-items: center; @media screen and (max-width: 1449px) { margin-left: 20px; } } .headerTop{ display: none; } nav{ height: 100%; @media screen and (min-width: 1220px) { display: block !important; } .navInner{ height: 100%; ul{ height: 100%; margin: 0 20px 0 0; display: flex; align-items: center; li{ height: 100%; max-height: 100px; &:not(:last-child){ margin-right: 10px; } a{ height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: center; transition: 0.3s; border-radius: 10px; >span{ >span{ display: block; text-align: center; color: #000; transition: 0.3s; &.en{ font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 500; } &.jp{ font-size: 14px; } } } } &:nth-child(1) a{ background: #fff2f2; &:hover{ background: #ff7c7a; } } &:nth-child(2) a{ background: #fdffbf; &:hover{ background: #fcff80; } } &:nth-child(3) a{ background: #e6f4f4; &:hover{ background: #0a958d; } } &:nth-child(4) a{ background: #f2f8ff; &:hover{ background: #79b9ff; } } &:nth-child(5){ margin-right: 40px; a{ background: #f2f2ff; &:hover{ background: #7c7aff; } } } &:nth-child(6) a{ background: #0a958d; &:hover{ background: #3dada5; } >span{ >span{ color: #FFF; &.en{ font-size: 23px; } &.jp{ font-size: 18px; } } } } } @media screen and (max-width: 1449px) { li{ a{ padding: 0 10px; } &:nth-child(5){ margin-right: 10px; } &:nth-child(6) a{ >span{ >span{ &.en{ font-size: 14px; } &.jp{ font-size: 14px; } } } } } } } } } } &.fix{ height: 80px; padding: 10px 0; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ nav{ .navInner{ ul{ li{ &:nth-child(6) a{ >span{ >span{ &.en{ font-size: 14px; } &.jp{ font-size: 18px; } } } } } @media screen and (max-width: 1449px) { li{ &:nth-child(6) a{ >span{ >span{ &.en{ font-size: 14px; } &.jp{ font-size: 14px; } } } } } } } } } } } } /*SP*/ @media screen and (max-width: 1219px) { header{ width: 100%; height: 60px; position: fixed; left: 0; top: 0; z-index: 1000; background: rgba(255,255,255,1); transition: 0.3s; .headerInner{ height: 100%; .logoBox{ width: 200px; height: 100%; margin-left: 1vw; display: flex; align-items: center; a{ font-size: 14px; line-height: 1; } } .headerTop{ display: block; position: fixed; right: 0px; top: 0px; z-index: 1000; width: 60px; height: 60px; } nav{ display: none; width: 100%; height: 100%; position: fixed; right: 0; top: 0; z-index: 999; background: #FFF; .navInner{ 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; &.en{ font-size: 14px; font-family: 500; } &.jp{ font-size: 14px; } } } } } } } } } &.fix{ height: 60px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } } } /*------------------------------------------ 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: all .3s; box-sizing: border-box; } .menu-trigger { position: relative; width: 25px; height: 13px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background: #0a958d; } .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); } /*------------------------------------------ #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); } } } @media screen and (max-width: 576px) { .mvWrapper{ .mv{ .sp{ display: block; } .pc{ display: none; } .inner{ padding: 0 0 0 10px; } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .ttlBox{ h2{ span{ display: block; line-height: 1; &.en{ margin-bottom: 10px; font-size: 21px; font-family: 'Poppins', sans-serif; } &.jp{ font-size: 48px; } } } } .btn{ height: 80px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #FFF; border-radius: 10px; background: url("../img/arrow_right_white_01.svg") no-repeat right 15px center; transition: 0.3s; &:hover{ opacity: 0.8; } &.pink{ background-color: #ff7c7a; } &.orange{ background-color: #ffbc77; } &.purple{ background-color: #7c7aff; } } .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: 26px; } } } } } @media screen and (max-width: 480px) { } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ padding: 370px 0 140px 0; margin-bottom: -250px; background: url("../img/bg_ttl_con_01.svg") no-repeat right 0 top 350px, #fff8f8; position: relative; top: -250px; .contents_01{ .ttlBox{ margin-bottom: 50px; h2 span{ &.en{ color: #ff7c7a; } } } .whiteBox{ max-width: 1200px; margin: 0 auto; padding: 50px; background: #FFF; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); &:not(:last-child){ margin-bottom: 40px; } h3{ margin-bottom: 40px; font-size: 21px; &.pink{ color: #ff7c7a; } &.orange{ color: #ffbc77; } } .tab_01{ margin-bottom: 70px; .slick-track{ width: 100% !important; transform: none !important; display: flex; flex-wrap: wrap; } li{ width: auto !important; height: 80px; margin: 0 4px 4px 0; border: 2px solid #ff7c7a; border-radius: 10px; background-color: #ff7c7a !important; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; color: #FFF; cursor: pointer; transition: 0.3s; &:nth-child(4), &:nth-child(7){ margin-right: 0; } &:nth-child(-n+4){ min-width: calc((100% - 12px) / 4 ); } &:nth-child(n+5){ min-width: calc((100% - 8px) / 3 ); } &:nth-child(1){ background: url("../img/icon_01.svg") no-repeat left 12px center; } &:nth-child(2){ background: url("../img/icon_02.svg") no-repeat left 25px center; } &:nth-child(3){ background: url("../img/icon_03.svg") no-repeat left 9px center; } &:nth-child(4){ background: url("../img/icon_04.svg") no-repeat left 12px center; } &:nth-child(5){ background: url("../img/icon_05.svg") no-repeat left 25px center; } &:nth-child(6){ background: url("../img/icon_06.svg") no-repeat left 23px center; } &:nth-child(7){ background: url("../img/icon_07.svg") no-repeat left 24px center; } &.slick-active{ background-color: #FFF !important; color: #ff7c7a; &:nth-child(1){ background: url("../img/icon_01_active.svg") no-repeat left 12px center; } &:nth-child(2){ background: url("../img/icon_02_active.svg") no-repeat left 25px center; } &:nth-child(3){ background: url("../img/icon_03_active.svg") no-repeat left 9px center; } &:nth-child(4){ background: url("../img/icon_04_active.svg") no-repeat left 12px center; } &:nth-child(5){ background: url("../img/icon_05_active.svg") no-repeat left 25px center; } &:nth-child(6){ background: url("../img/icon_06_active.svg") no-repeat left 23px center; } &:nth-child(7){ background: url("../img/icon_07_active.svg") no-repeat left 24px center; } } } } .data_01{ >div{ .boxLR{ display: flex; justify-content: space-between; .boxL{ min-width: 465px; max-width: 465px; h4{ padding: 10px 0; margin: 0 0 35px 0; font-size: 32px; line-height: 1; color: #ff7c7a; position: relative; &:before{ content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } &.icon_01{ padding-left: 60px; &:before{ width: 40.84px; height: 26.93px; background: url("../img/icon_01_active.svg") no-repeat center; } } &.icon_02{ padding-left: 60px; &:before{ width: 43.48px; height: 26.66px; background: url("../img/icon_02_active.svg") no-repeat center; } } &.icon_03{ padding-left: 60px; &:before{ width: 39px; height: 35.35px; background: url("../img/icon_03_active.svg") no-repeat center; } } &.icon_04{ padding-left: 70px; &:before{ width: 52.91px; height: 41.97px; background: url("../img/icon_04_active.svg") no-repeat center; } } &.icon_05{ padding-left: 40px; &:before{ width: 19.24px; height: 27.44px; background: url("../img/icon_05_active.svg") no-repeat center; } } &.icon_06{ padding-left: 70px; &:before{ width: 52.46px; height: 28.73px; background: url("../img/icon_06_active.svg") no-repeat center; } } &.icon_07{ padding-left: 60px; &:before{ width: 35.67px; height: 37.49px; background: url("../img/icon_07_active.svg") no-repeat center; } } } >p{ margin-bottom: 60px; font-size: 18px; } .graphBox{ dl{ min-height: 30px; display: flex; align-items: center; &:not(:last-child){ margin-bottom: 15px; } dt{ min-width: 80px; margin-right: 20px; font-size: 15px; font-weight: 700; color: #ff7c7a; } dd{ flex: 1; display: flex; align-items: center; >span{ min-width: 50px; max-width: 50px; font-size: 12px; text-align: center; display: block; line-height: 1.2; &.txtL{ margin-right: 14px; } &.txtR{ margin-left: 14px; } } ul{ flex: 1; display: flex; align-items: center; justify-content: space-between; position: relative; &:before{ content: ""; width: 100%; height: 1px; display: block; background: #CCC; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } li{ min-width: 1px; max-width: 1px; position: relative; &:before{ content: ""; width: 1px; height: 11px; display: block; background: #CCC; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); z-index: 2; } img{ min-width: 16px; position: absolute; top: 50%; right: 50%; z-index: 3; transform: translate(50%, -50%); } } } } } } } .boxR{ min-width: 480px; max-width: 480px; .imgBox{ margin-bottom: 35px; } .btnBox{ .btn{ max-width: 440px; margin: 0 auto; } } } } } } .slick-arrow{ width: 60px; height: 60px; 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: 1130px) { display: none !important; } } .list_01{ display: flex; li{ flex: 1; margin: 0 4px 0 0; min-width: calc((100% - 8px) / 3); } } } } } @media screen and (max-width: 768px) { .contents_bg_01{ padding: 320px 0 40px 0; margin-bottom: -250px; background: #fff8f8; position: relative; top: -250px; .contents_01{ .ttlBox{ margin-bottom: 50px; h2 span{ &.en{ color: #ff7c7a; } } } .whiteBox{ max-width: 1200px; margin: 0 2%; padding: 50px 5%; background: #FFF; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); &:not(:last-child){ margin-bottom: 20px; } h3{ margin-bottom: 40px; font-size: 21px; &.pink{ color: #ff7c7a; } &.orange{ color: #ffbc77; } } .tab_01{ margin-bottom: 30px; .slick-track{ width: 100% !important; transform: none !important; display: flex; flex-wrap: wrap; } li{ width: auto !important; min-width: 49% !important; max-width: 49% !important; height: 60px; margin: 0 2% 2% 0; border: 2px solid #ff7c7a; border-radius: 10px; background-color: #ff7c7a !important; display: flex; justify-content: flex-start; align-items: center; font-size: 13px; font-weight: 700; color: #FFF; cursor: pointer; transition: 0.3s; &:nth-child(4), &:nth-child(7){ margin-right: 2%; } &:nth-child(n+5){ min-width: 49%; } &:nth-child(even){ margin-right: 0; } &:nth-child(1){ padding-left: 50px; background: url("../img/icon_01.svg") no-repeat left 10px center / calc(40.84px * 0.7); } &:nth-child(2){ padding-left: 50px; background: url("../img/icon_02.svg") no-repeat left 10px center / calc(43.48px * 0.7); } &:nth-child(3){ padding-left: 50px; background: url("../img/icon_03.svg") no-repeat left 9px center / calc(39px * 0.7); } &:nth-child(4){ padding-left: 50px; background: url("../img/icon_04.svg") no-repeat left 8px center / calc(52.91px * 0.6); } &:nth-child(5){ padding-left: 50px; background: url("../img/icon_05.svg") no-repeat left 15px center / calc(19.24px * 0.6); } &:nth-child(6){ padding-left: 50px; background: url("../img/icon_06.svg") no-repeat left 8px center / calc(52.46px * 0.7); } &:nth-child(7){ padding-left: 50px; background: url("../img/icon_07.svg") no-repeat left 10px center / calc(35.67px * 0.7); } &.slick-active{ background-color: #FFF !important; color: #ff7c7a; &:nth-child(1){ background: url("../img/icon_01_active.svg") no-repeat left 10px center / calc(40.84px * 0.7); } &:nth-child(2){ background: url("../img/icon_02_active.svg") no-repeat left 10px center / calc(43.48px * 0.7); } &:nth-child(3){ background: url("../img/icon_03_active.svg") no-repeat left 9px center / calc(39px * 0.7); } &:nth-child(4){ background: url("../img/icon_04_active.svg") no-repeat left 8px center / calc(52.91px * 0.6); } &:nth-child(5){ background: url("../img/icon_05_active.svg") no-repeat left 15px center / calc(19.24px * 0.6); } &:nth-child(6){ background: url("../img/icon_06_active.svg") no-repeat left 8px center / calc(52.46px * 0.7); } &:nth-child(7){ background: url("../img/icon_07_active.svg") no-repeat left 10px center / calc(35.67px * 0.7); } } } } .iconSlide{ margin-bottom: 30px; text-align: center; } .data_01{ >div{ .boxLR{ display: block; .boxL{ min-width: inherit; max-width: inherit; margin-bottom: 40px; h4{ margin: 0 0 20px 0; font-size: 20px; line-height: 1; color: #ff7c7a; position: relative; &:before{ content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } &.icon_01{ padding-left: 60px; &:before{ content: url("../img/icon_01_active.svg"); } } &.icon_02{ padding-left: 60px; &:before{ content: url("../img/icon_02_active.svg"); } } &.icon_03{ padding-left: 60px; &:before{ content: url("../img/icon_03_active.svg"); } } &.icon_04{ padding-left: 70px; &:before{ content: url("../img/icon_04_active.svg"); } } &.icon_05{ padding-left: 40px; &:before{ content: url("../img/icon_05_active.svg"); } } &.icon_06{ padding-left: 70px; &:before{ content: url("../img/icon_06_active.svg"); } } &.icon_07{ padding-left: 60px; &:before{ content: url("../img/icon_07_active.svg"); } } } >p{ margin-bottom: 40px; font-size: 16px; } .graphBox{ dl{ min-height: inherit; display: block; &:not(:last-child){ margin-bottom: 25px; } dt{ min-width: inherit; margin: 0 0 10px 0; font-size: 15px; font-weight: 700; color: #ff7c7a; text-align: center; } dd{ flex: 1; display: flex; align-items: center; >span{ min-width: 50px; max-width: 50px; font-size: 12px; text-align: center; display: block; line-height: 1.2; &.txtL{ margin-right: 14px; } &.txtR{ margin-left: 14px; } } ul{ flex: 1; display: flex; align-items: center; justify-content: space-between; position: relative; &:before{ content: ""; width: 100%; height: 1px; display: block; background: #CCC; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } li{ min-width: 1px; max-width: 1px; position: relative; &:before{ content: ""; width: 1px; height: 11px; display: block; background: #CCC; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); z-index: 2; } img{ min-width: 16px; position: absolute; top: 50%; right: 50%; z-index: 3; transform: translate(50%, -50%); } } } } } } } .boxR{ min-width: inherit; max-width: inherit; .imgBox{ margin-bottom: 35px; } .btnBox{ .btn{ max-width: 440px; margin: 0 auto; text-align: center; } } } } } } .slick-arrow{ width: 60px; height: 60px; 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: 1130px) { display: none !important; } } .list_01{ display: block; li{ max-width: 440px; margin: 0 auto 20px auto; min-width: inherit; &:last-child{ margin-bottom: 0; } } } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ background: url("../img/bg_ttl_con_02.svg") no-repeat left calc(50% - 350px) top 0 , url("../img/bg_color_01.png") no-repeat left 0 top 0 / 100% 65px ,#fcff80; .contents_02{ padding: 150px 0 85px 0; .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #bdad00; } } .contents{ ul{ display: flex; flex-wrap: wrap; li{ margin: 0 25px 25px 0; min-width: calc((100% - 50px) / 3); flex: 1; &:nth-child(3), &:nth-child(6), &:nth-child(8){ margin-right: 0; } &:nth-child(7){ min-width: 645px; } } } } } } @media screen and (max-width: 768px) { .contents_bg_02{ background: #fcff80; .contents_02{ padding: 40px 0 40px 0; .ttlBox{ margin-bottom: 50px; h2 span.en{ color: #bdad00; } } .contents{ ul{ display: block; li{ margin: 0 auto 25px auto; min-width: inherit; text-align: center; &:nth-child(3), &:nth-child(6), &:nth-child(8){ margin-right: auto; } &:nth-child(7){ min-width: inherit; } &:last-child{ margin-bottom: 0px; } } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ position: relative; &:before{ content: ""; width: 100%; height: 675px; display: block; background: #f3faf9; position: absolute; left: 0; top: 0; } .contents_03{ padding: 160px 0 130px 0; position: relative; z-index: 2; background: url("../img/bg_ttl_con_03.svg") no-repeat top 125px right -10px; .ttlBox{ margin-bottom: 215px; text-align: right; h2 span.en{ color: #0a958d; } } .contents{ padding: 0 20px; ul{ display: flex; justify-content: center; li{ margin: 0 20px 80px 0; position: relative; &:last-child{ margin-right: 0; } &:nth-child(even){ top: -50px; } p{ margin: 0 0 5px 0; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1; color: #0a958d; span{ font-size: 14px; } strong{ font-size: 40px; } } a{ transition: 0.3s; &:hover{ opacity: 0.6; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ &:before{ content: none; } .contents_03{ padding: 40px 0 40px 0; background: none; .ttlBox{ margin-bottom: 50px; text-align: right; h2 span.en{ color: #0a958d; } } .contents{ ul{ display: block; justify-content: center; flex-wrap: wrap; li{ max-width: 284px; margin: 0 auto 50px auto; position: relative; &:last-child{ margin-right: auto; } &:nth-child(even){ top: inherit; } p{ margin: 0 0 5px 0; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1; color: #0a958d; span{ font-size: 14px; } strong{ font-size: 40px; } } .imgBox{ text-align: center; } a{ transition: 0.3s; &:hover{ opacity: 0.6; } } } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ background: url("../img/bg_ttl_con_04.svg") no-repeat left 0 top 0 , url("../img/bg_color_02.png") no-repeat left 0 top 0 / 100% 85px ,#f2f8ff; .contents_04{ padding: 265px 0 0 0; .ttlBox{ h2 span.en{ color: #79b9ff; } } .contents{ .boxLR{ margin-bottom: 100px; display: flex; justify-content: space-between; .boxL{ min-width: 400px; } .boxR{ min-width: 530px; padding: 50px 0 0 0; p{ font-size: 18px; line-height: 2.1; } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ background: #f2f8ff; .contents_04{ padding: 40px 0 0 0; .ttlBox{ h2 span.en{ color: #79b9ff; } } .contents{ .boxLR{ margin-bottom: 40px; display: block; .boxL{ min-width: inherit; } .boxR{ min-width: inherit; padding: 50px 5% 0 5%; p{ font-size: 16px; line-height: 2.1; } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ padding: 295px 0 100px 0; background: url("../img/bg_ttl_con_05.svg") no-repeat top 100px left calc(50% + 400px) , #f2f2ff; .contents_05{ .ttlBox{ margin-bottom: 155px; text-align: right; h2 span.en{ color: #7c7aff; } } .qaWrapper{ margin-bottom: 100px; dl{ padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #7c7aff; dt{ padding: 2px 60px 2px 75px; background: url("../img/icon_q.svg") no-repeat left center; font-size: 30px; font-weight: 700; color: #7c7aff; cursor: pointer; position: relative; >span{ width: 30px; height: 30px; display: block; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); >span{ width: 100%; height: 100%; display: block; position: relative; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; background: #7c7aff; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:after{ transform: translate(50%, -50%) rotate(90deg); } } &.active{ >span{ &:after{ transform: translate(50%, -50%) rotate(360deg); } } } } } dd{ display: none; padding: 30px 60px 15px 75px; background: url("../img/icon_a.svg") no-repeat left top 25px; } } } .btnBox{ .btn{ max-width: 440px; margin: 0 auto; } } } } @media screen and (max-width: 768px) { .contents_bg_05{ padding: 60px 0 50px 0; background: #f2f2ff; .contents_05{ .ttlBox{ margin-bottom: 50px; text-align: right; h2 span.en{ color: #7c7aff; } } .qaWrapper{ padding: 0 5%; margin-bottom: 50px; dl{ padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #7c7aff; dt{ padding: 2px 60px 2px 60px; background: url("../img/icon_q.svg") no-repeat left center / 30px; font-size: 20px; font-weight: 700; color: #7c7aff; cursor: pointer; position: relative; >span{ width: 30px; height: 30px; display: block; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); >span{ width: 100%; height: 100%; display: block; position: relative; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; background: #7c7aff; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:after{ transform: translate(50%, -50%) rotate(90deg); } } &.active{ >span{ &:after{ transform: translate(50%, -50%) rotate(360deg); } } } } } dd{ display: none; padding: 30px 0 15px 60px; background: url("../img/icon_a.svg") no-repeat left top 25px / 30px; } } } .btnBox{ padding: 0 5%; .btn{ max-width: 440px; margin: 0 auto; } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ width: 130px; position: fixed; right: 0px; bottom: 0px; display: none; z-index: 200; text-align: center; .weboubo{ display: block; margin-bottom: 20px; } } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop{ width: 60px; right: 0px; bottom: 0px; img{ width: 60px; } } } /*------------------------------------------ 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.5) !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: 900px; max-width: 900px; margin: 0 auto; padding: 0; .contents{ .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; .btnCloseBox{ position: absolute; right: -6px; top: -6px; z-index: 2; } &: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 45px; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1; color: #0a958d; span{ font-size: 14px; } strong{ font-size: 40px; } } .imgBox{ padding: 0 45px 20px 45px; position: relative; .txtBox{ text-align: right; color: #0a958d; position: absolute; right: 45px; bottom: 20px; .position{ margin-bottom: 5px; font-size: 20px; } .name{ font-size: 22px; span{ font-size: 18px; } } .year{ font-size: 18px; } } } } .bottomBox{ max-width: 740px; padding: 60px 20px; margin: 0 auto; dl{ dt{ margin-bottom: 25px; font-size: 22px; font-weight: 700; color: #0a958d; } dd{ padding: 0 0 0 45px; line-height: 1.7; &:not(:last-child){ margin-bottom: 60px; } } } } } } } } @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); }