@charset "UTF-8"; /* font-family: 'Montserrat', sans-serif; font-family: 'Noto Sans JP', 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{ $loopImgHeight: 600px; $loopImgWidth: 6400px; display: flex; width: 100%; height: calc( #{$loopImgHeight / 2} ); 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( #{$loopImgWidth / 2} ); max-width: calc( #{$loopImgWidth / 2} ); height: calc( #{$loopImgHeight / 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: calc( 600px / 3 ); overflow: hidden; img { min-width: calc( 6400px / 3 ); max-width: calc( 6400px / 3 ); height: calc( 600px / 3 ); &:first-child { animation: slide1 120s -60s linear infinite; } &:last-child { animation: slide2 120s linear infinite; } } } } /*------------------------------------------ body ------------------------------------------*/ #wrapper{ min-width: 980px; padding: 225px 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: 140px; 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; position: relative; z-index: 1000; img{ transition: 0.3s; } h1{ font-size: 18px; font-weight: 500; letter-spacing: 0.1em; transition: 0.3s; } } .headerTop{ display: block; position: fixed; right: 35px; top: 35px; z-index: 1000; width: 46px; height: 50px; transition: 0.3s; } nav{ height: 100%; width: 100%; display: none; background: rgba(255,255,255,0.95); position: fixed; left: 0; top: 0; z-index: 900; align-items: center; justify-content: center; .navInner{ ul{ li{ text-align: center; &:not(:last-child){ margin-bottom: 20px; } a{ display: inline-block; position: relative; transition: 0.3s; span{ position: relative; z-index: 2; transition: 0.1s; &.en{ font-size: 20px; font-family: 'Montserrat', sans-serif; color: #ECA3A6; span{ padding: 0 5px; display: inline-block; position: relative; z-index: 2; } &:after{ content: ""; width: 0%; height: 100%; background: #ECA3A6; position: absolute; left: 0; top: 0; transition: 0.3s; } } &.jp{ display: block; font-size: 12px; font-family: 'Noto Sans JP', sans-serif; color: #ECA3A6; } } &:hover{ span{ &.en{ color: #FFF; &:after{ width: 100%; } } } } &.activeBtn{ span{ &.en{ padding: 0 5px; color: #FFF; background: #ECA3A6; border: 2px solid #ECA3A6; transition: 0.3s; &:after{ content: none; } } } &:hover{ span{ &.en{ color: #ECA3A6; background: #FFF; } } } } } } } } } } &.fix{ height: 80px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ .logoBox{ img{ width: calc(383px * 0.7); } h1{ font-size: calc(18px * 0.7); } } nav{ .navInner{ ul{ } } } .headerTop{ transform: scale(70%); top: 10px; } } } } /*SP*/ @media screen and (max-width: 768px) { 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: 20px; display: flex; align-items: center; position: relative; z-index: 1000; img{ max-width: 140px; } h1{ font-size: 10px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.2; .sp{ display: block; } } } .headerTop{ display: block; position: fixed; right: 20px; top: 5px; z-index: 1000; width: 30px; height: 50px; transition: 0.3s; } nav{ height: 100%; width: 100%; display: none; background: rgba(255,255,255,0.95); position: fixed; left: 0; top: 0; z-index: 900; align-items: center; justify-content: center; .navInner{ ul{ li{ text-align: center; &:not(:last-child){ margin-bottom: 20px; } a{ display: inline-block; padding: 0 5px; font-size: 20px; font-family: 'Montserrat', sans-serif; color: #ECA3A6; position: relative; transition: 0.3s; span{ position: relative; z-index: 2; } &:after{ content: ""; width: 0%; height: 100%; background: #ECA3A6; position: absolute; left: 0; top: 0; transition: 0.3s; } &:hover{ color: #FFF; &:after{ width: 100%; } } } } } } } } &.fix{ height: 70px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ .logoBox{ img{ width: 100%; } h1{ font-size: 10px; } } nav{ .navInner{ ul{ } } } .headerTop{ transform: none; top: 5px; } } } } } /*------------------------------------------ menuTrigger ------------------------------------------*/ .menuBtn{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .menu-trigger, .menu-trigger span{ display: block; transition: 0.5s; } .menu-trigger { position: relative; width: 46px; height: 46px; } .menu-trigger span { position: absolute; width: 10px; height: 10px; background: #8B8B8B; transform: translate(0%, 0%) rotate(0deg); } .menu-trigger.active span { } .menu-trigger span:nth-of-type(1) { top: 0%; left: 0%; } .menu-trigger span:nth-of-type(2) { top: 0%; left: calc(50% - 5px); } .menu-trigger span:nth-of-type(3) { top: 0%; right: 0%; } .menu-trigger span:nth-of-type(4) { top: calc(50% - 5px); left: 0%; } .menu-trigger span:nth-of-type(5) { top: calc(50% - 5px); left: calc(50% - 5px); } .menu-trigger span:nth-of-type(6) { top: calc(50% - 5px); right: 0%; } .menu-trigger span:nth-of-type(7) { bottom: 0%; left: 0%; } .menu-trigger span:nth-of-type(8) { bottom: 0%; left: calc(50% - 5px); } .menu-trigger span:nth-of-type(9) { bottom: 0%; right: 0%; } .menu-trigger span:nth-of-type(10) { width: 0%; height: 8px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; } .menu-trigger span:nth-of-type(11) { width: 0%; height: 8px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); opacity: 0; } .menu-trigger.active span:nth-of-type(1), .menu-trigger.active span:nth-of-type(2), .menu-trigger.active span:nth-of-type(3), .menu-trigger.active span:nth-of-type(4), .menu-trigger.active span:nth-of-type(5), .menu-trigger.active span:nth-of-type(6), .menu-trigger.active span:nth-of-type(7), .menu-trigger.active span:nth-of-type(8), .menu-trigger.active span:nth-of-type(9){ width: 0px; height: 0px; opacity: 0; } .menu-trigger.active span:nth-of-type(10) { width: 100%; opacity: 1; } .menu-trigger.active span:nth-of-type(11) { width: 100%; opacity: 1; } .menu-trigger{ >div{ font-size: 14px; font-weight: 700; color: #8B8B8B; position: absolute; right: 50%; transform: translate(50%, 0); bottom: -25px; transition: 0.3s; } .closeTxt{ opacity: 0; } &.active{ .menuTxt{ opacity: 0; } .closeTxt{ opacity: 1; } } } @media screen and (max-width: 768px) { .menu-trigger { position: relative; width: 30px; height: 30px; } .menu-trigger span { position: absolute; width: 7px; height: 7px; background: #8B8B8B; transform: translate(0%, 0%) rotate(0deg); } .menu-trigger.active span { } .menu-trigger span:nth-of-type(1) { top: 0%; left: 0%; } .menu-trigger span:nth-of-type(2) { top: 0%; left: calc(50% - 4px); } .menu-trigger span:nth-of-type(3) { top: 0%; right: 0%; } .menu-trigger span:nth-of-type(4) { top: calc(50% - 4px); left: 0%; } .menu-trigger span:nth-of-type(5) { top: calc(50% - 4px); left: calc(50% - 4px); } .menu-trigger span:nth-of-type(6) { top: calc(50% - 4px); right: 0%; } .menu-trigger span:nth-of-type(7) { bottom: 0%; left: 0%; } .menu-trigger span:nth-of-type(8) { bottom: 0%; left: calc(50% - 4px); } .menu-trigger span:nth-of-type(9) { bottom: 0%; right: 0%; } .menu-trigger span:nth-of-type(10) { width: 0%; height: 5px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; } .menu-trigger span:nth-of-type(11) { width: 0%; height: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); opacity: 0; } .menu-trigger.active span:nth-of-type(1), .menu-trigger.active span:nth-of-type(2), .menu-trigger.active span:nth-of-type(3), .menu-trigger.active span:nth-of-type(4), .menu-trigger.active span:nth-of-type(5), .menu-trigger.active span:nth-of-type(6), .menu-trigger.active span:nth-of-type(7), .menu-trigger.active span:nth-of-type(8), .menu-trigger.active span:nth-of-type(9){ width: 0px; height: 0px; opacity: 0; } .menu-trigger.active span:nth-of-type(10) { width: 100%; opacity: 1; } .menu-trigger.active span:nth-of-type(11) { width: 100%; opacity: 1; } .menu-trigger{ >div{ font-size: 12px; font-weight: 700; color: #8B8B8B; position: absolute; right: 50%; transform: translate(50%, 0); bottom: -20px; transition: 0.3s; } .closeTxt{ opacity: 0; } &.active{ .menuTxt{ opacity: 0; } .closeTxt{ opacity: 1; } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .innerBox{ max-width: 980px; margin: 0 auto; } @media screen and (max-width: 768px) { } /*------------------------------------------ #mv ------------------------------------------*/ .mvWrapper{ position: relative; z-index: 2; &:after{ content: ""; width: 100%; height: calc(100% * 0.8); display: block; background: #212C39; position: absolute; left: 0; bottom: 0; z-index: 1; } .mv{ position: relative; z-index: 3; .sp{ display: none; } .inner{ padding: 0 0 0 calc(100% * 0.13); position: relative; .mvTxt{ width: 100%; height: 100%; padding: 0 0 0 calc(100% * 0.07); position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-start; .mvTxtTop{ margin-bottom: 35px; } .mvTxtBottom{ font-size: 18px; font-weight: 500; color: #FFF; line-height: 2.2; } @media screen and (max-width: 1215px) { .mvTxtTop{ margin-bottom: 20px; img{ max-width: 300px; } } .mvTxtBottom{ font-size: 16px; line-height: 2; } } } } .mvScroll{ position: absolute; right: 50%; bottom: -45px; transform: translate(50%, 0); } } } @media screen and (max-width: 768px) { .mvWrapper{ position: relative; z-index: 2; &:after{ content: ""; width: 100%; height: calc(100% * 0.5); display: block; background: #212C39; position: absolute; left: 0; bottom: 0; z-index: 1; } .mv{ position: relative; z-index: 3; .sp{ display: block; } .pc{ display: none; } .inner{ padding: 0; position: relative; &:after{ content: ""; width: 100%; height: calc(100% - 120px); display: block; background: #212C39; position: absolute; left: 0; bottom: 0; z-index: 1; } ul{ z-index: 3; li{ padding: 0 0 0 60px; } } .mvTxt{ width: 100%; height: 100%; padding: 0 20px 0 20px; position: relative; left: inherit; right: 0px; top: -15px; z-index: 3; display: flex; align-items: center; justify-content: flex-start; .mvTxtTop{ margin-bottom: 20px; img{ max-width: 233px; } } .mvTxtBottom{ font-size: 15px; line-height: 2; } } } .mvScroll{ display: none; } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .ttlBox{ h2{ text-align: center; span{ padding: 0 0 15px 0; line-height: 1; display: inline-block; position: relative; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; position: absolute; left: 0; } &:before{ bottom: 0; } &:after{ bottom: 5px; } &.en{ font-size: 35px; letter-spacing: 0.1em; font-family: 'Montserrat', sans-serif; &.pink{ color: #ECA3A6; &:before, &:after{ background: #ECA3A6; } } &.pink{ color: #ECA3A6; &:before, &:after{ background: #ECA3A6; } } &.white{ color: #FFF; &:before, &:after{ background: #FFF; } } } } } } .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{ padding: 0 0 15px 0; line-height: 1; display: inline-block; position: relative; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; position: absolute; left: 0; } &:before{ bottom: 0; } &:after{ bottom: 5px; } &.en{ font-size: 22px; letter-spacing: 0.1em; font-family: 'Montserrat', sans-serif; &.pink{ color: #ECA3A6; &:before, &:after{ background: #ECA3A6; } } &.pink{ color: #ECA3A6; &:before, &:after{ background: #ECA3A6; } } &.white{ color: #FFF; &:before, &:after{ background: #FFF; } } } } } } } @media screen and (max-width: 480px) { } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ min-height: 826px; padding: 80px 0 0 0; background: url("../img/img_con_01.jpg") no-repeat left calc(50% - 340px) bottom 0 / 919px ,#212C39; .contents_01{ .ttlBox{ margin-bottom: 80px; } .boxLR{ position: relative; .boxL{ position: absolute; right: 50%; top: 0px; transform: translate(-220%, 0); @media screen and (max-width: 1460px) { transform: translate(0%, 0); right: inherit; left: 0; } a{ width: 190px; height: 190px; display: block; position: relative; border-radius: 190px; img{ border-radius: 190px; position: relative; left: 0; bottom: 0; z-index: 2; transition: 0.3s; } &::after{ content: ""; width: 100%; height: 100%; display: block; background: #F0F0F0; border-radius: 100%; position: absolute; left: -5px; bottom: -5px; z-index: 1; } &:hover{ img{ left: -5px; bottom: -5px; } } } } .boxR{ max-width: 445px; min-width: 445px; margin: 0 0 0 auto; h3{ margin: 0 0 50px 0; text-align: center; } p{ font-size: 18px; line-height: 2; color: #FFF; &:not(:last-child){ margin-bottom: 20px; } } } } } } @media screen and (max-width: 768px) { .contents_bg_01{ min-height: 826px; padding: 80px 0 20px 0; background: #212C39; .contents_01{ .ttlBox{ margin-bottom: 80px; } .boxLR{ position: relative; .pc{ display: none; } .boxL{ position: absolute; right: 50%; top: 0px; transform: translate(-220%, 0); @media screen and (max-width: 1460px) { transform: translate(0%, 0); right: inherit; left: 0; } a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } .boxR{ max-width: 445px; min-width: inherit; margin: 0 auto 0 auto; h3{ margin: 0 0 50px 0; text-align: center; img{ max-width: calc(127px * 0.7); } } p{ padding: 0 5%; font-size: 14px; line-height: 2; color: #FFF; position: relative; z-index: 3; &:not(:last-child){ margin-bottom: 20px; } } .sp{ display: block; text-align: center; position: relative; top: -80px; margin-bottom: -80px; .btnBox{ position: absolute; right: 50%; bottom: 10px; transform: translate(100%, 0); } a{ width: 150px; height: 150px; display: block; position: relative; border-radius: 150px; img{ border-radius: 150px; position: relative; left: 0; bottom: 0; z-index: 2; transition: 0.3s; } &::after{ content: ""; width: 100%; height: 100%; display: block; background: #F0F0F0; border-radius: 100%; position: absolute; left: -5px; bottom: -5px; z-index: 1; } &:hover{ img{ left: -5px; bottom: -5px; } } } } } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ padding: 80px 0 110px 0; .contents_02{ .ttlBox{ margin-bottom: 80px; } .boxWrapper{ .box{ display: flex; .imgBox{ min-width: 480px; max-width: 480px; margin: 0 90px 0 0; .inner{ position: relative; .circle{ position: absolute; right: -32px; bottom: -43px; } } } .txtBox{ padding: 0 0 100px 0; flex: 1; position: relative; .logo{ margin: 0 0 30px 0; text-align: center; } p{ line-height: 1.8; } ul{ width: 100%; position: absolute; left: 0; bottom: 0; li{ border-bottom: 1px solid #ECA3A6; &:not(:last-child){ margin-bottom: 22px; } a{ min-height: 24px; padding: 5px 0; display: block; text-align: center; letter-spacing: 0.1em; color: #ECA3A6; font-family: 'Montserrat', sans-serif; font-weight: 500; background: url("../img/arrow_right_pink_01.svg") no-repeat right center; transition: 0.3s; &:hover{ opacity: 0.7; } } } } } &:not(:last-child){ margin-bottom: 100px; } &:nth-child(even){ .imgBox{ order: 2; margin: 0 0 0 90px; .inner{ .circle{ @media screen and (max-width: 1050px) { right: 0px; } } } } .txtBox{ order: 1; } } } } } } @media screen and (max-width: 768px) { .contents_bg_02{ padding: 80px 0 110px 0; .contents_02{ .ttlBox{ margin-bottom: 80px; } .boxWrapper{ .box{ max-width: 480px; display: block; padding: 0 5%; margin: 0 auto; .imgBox{ min-width: inherit; max-width: 480px; margin: 0 auto 30px auto; .inner{ position: relative; .circle{ width: 55vw; max-width: 280px; position: absolute; right: -5%; bottom: -5%; } } } .txtBox{ padding: 0 0 0 0; flex: 1; position: relative; .logo{ margin: 0 0 30px 0; text-align: center; } p{ margin-bottom: 30px; font-size: 14px; line-height: 1.8; } ul{ width: 100%; position: inherit; left: inherit; bottom: inherit; li{ border-bottom: 1px solid #ECA3A6; &:not(:last-child){ margin-bottom: 22px; } a{ min-height: 24px; padding: 5px 0; display: block; text-align: center; letter-spacing: 0.1em; color: #ECA3A6; font-family: 'Montserrat', sans-serif; font-weight: 500; background: url("../img/arrow_right_pink_01.svg") no-repeat right center; transition: 0.3s; &:hover{ opacity: 0.7; } } } } } &:not(:last-child){ margin-bottom: 100px; } &:nth-child(even){ .imgBox{ order: 2; margin: 0 0 30px 0; .inner{ .circle{ right: -5%; } } } .txtBox{ order: 1; } } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ padding: 80px 0 62px 0; background: url("../img/bg_01.png") repeat center top / calc(165px / 2); .contents_03{ .ttlBox{ margin-bottom: 90px; } ul{ display: flex; flex-wrap: wrap; li{ margin: 0 48px 48px 0; &:nth-child(even){ margin-right: 0; } a{ background: #FFF; display: block; img{ transition: 0.3s; } &:hover{ img{ opacity: 0.7; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ padding: 80px 0 62px 0; background: url("../img/bg_01.png") repeat center top / calc(165px / 2); .contents_03{ .ttlBox{ margin-bottom: 90px; } ul{ max-width: 480px; margin: 0 auto; display: flex; flex-wrap: wrap; li{ margin: 0 0 48px 0; padding: 0 5%; &:nth-child(even){ margin-right: 0; } a{ background: #FFF; display: block; img{ transition: 0.3s; } &:hover{ img{ opacity: 0.7; } } } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ padding: 90px 0 110px 0; .contents_04{ .ttlBox{ margin-bottom: 15px; } .imgBox{ margin: 0 0 130px 0; text-align: center; } .boxWrapper{ .box{ padding: 70px 45px 40px 45px; border: 5px solid #C6C1C1; position: relative; &:not(:last-child){ margin-bottom: 72px; } h3{ width: 100%; max-width: 660px; padding: 15px; background: #212C39; border-radius: 40px; text-align: center; position: absolute; top: 0; right: 50%; transform: translate(50%, -50%); span{ font-size: 18px; font-weight: 500; color: #FFF; line-height: 1; position: relative; &:after{ content: ""; width: 13px; height: 10px; display: block; background: url("../img/arrow_fukidashi.svg") no-repeat center bottom 0; position: absolute; right: 50%; bottom: -25px; transform: translate(-50%, 0); } } } .boxLR{ display: flex; .boxL{ min-width: 234px; margin-right: 60px; display: flex; align-items: center; justify-content: flex-start; } .boxR{ flex: 1; p{ line-height: 1.8; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ padding: 90px 0 110px 0; .contents_04{ .ttlBox{ margin-bottom: 15px; } .imgBox{ padding: 0 5%; margin: 0 0 80px 0; text-align: center; .pc{ display: none; } .sp{ display: inline-block; width: 100%; max-width: 400px; } } .boxWrapper{ padding: 0 5%; .box{ padding: 70px 5% 40px 5%; border: 5px solid #C6C1C1; position: relative; &:not(:last-child){ margin-bottom: 72px; } h3{ width: 100%; max-width: 400px; padding: 15px 10px; background: #212C39; border-radius: 40px; text-align: center; position: absolute; top: 0; right: 50%; transform: translate(50%, -50%); span{ font-size: 16px; font-weight: 500; color: #FFF; line-height: 1; position: relative; @media screen and (max-width: 370px) { font-size: 4vw; } &:after{ width: 13px; height: 10px; display: block; background: url("../img/arrow_fukidashi.svg") no-repeat center bottom 0; position: absolute; right: 50%; bottom: -25px; transform: translate(50%, 0); } } } .boxLR{ display: block; .boxL{ min-width: inherit; margin: 0 0 30px 0; display: block; text-align: center; } .boxR{ flex: 1; p{ font-size: 14px; line-height: 1.8; } } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .bg_con_05_06{ background: url("../img/bg_01.png") repeat center top / calc(165px / 2); } .contents_bg_05{ padding: 90px 0; .contents_05{ .ttlBox{ margin-bottom: 80px; } .boxWrapper{ max-width: 672px; margin: 0 auto; border-top: 1px solid #FFF; dl{ padding: 15px 30px; border-bottom: 1px solid #FFF; display: flex; dt{ margin-right: 28px; span{ min-width: 140px; max-width: 140px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 26px; background: #ECA3A6; font-size: 14px; font-weight: 700; line-height: 1; color: #FFF; } } dd{ flex: 1; a{ color: #000; text-decoration: underline; &:hover{ text-decoration: none; } } } } } } } @media screen and (max-width: 768px) { .bg_con_05_06{ background: url("../img/bg_01.png") repeat center top / calc(165px / 2); } .contents_bg_05{ padding: 90px 0; .contents_05{ .ttlBox{ margin-bottom: 80px; } .boxWrapper{ width: 90%; max-width: 672px; margin: 0 auto; border-top: 1px solid #FFF; dl{ padding: 15px 5%; border-bottom: 1px solid #FFF; display: block; dt{ margin: 0 0 15px 0; span{ min-width: 140px; max-width: 140px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 26px; background: #ECA3A6; font-size: 14px; font-weight: 700; line-height: 1; color: #FFF; } } dd{ flex: 1; font-size: 14px; a{ color: #000; text-decoration: underline; &:hover{ text-decoration: none; } } } } } } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .contents_bg_06{ padding: 0 0 110px 0; .contents_06{ .ttlBox{ margin-bottom: 80px; } .boxWrapper{ .box{ &:not(:last-child){ margin-bottom: 48px; } h3{ height: 78px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: #FFf; line-height: 1; background: #212C39; position: relative; cursor: pointer; transition: 0.3s; &:hover{ opacity: 0.7; } >span{ width: 16px; height: 16px; display: block; position: absolute; right: 28px; 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: #FFF; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:before{ transform: translate(50%, -50%) rotate(90deg); } } } &.active{ >span{ >span{ &:before{ transform: translate(50%, -50%) rotate(180deg); } } } } } .searchBox{ display: none; padding: 50px 20px; background: #FFF; .boxLR{ max-width: 690px; margin: 0 auto; display: flex; justify-content: space-between; h4{ padding: 0 0 0 33px; >span{ display: block; line-height: 1; &.en{ margin-bottom: 10px; font-size: 30px; font-weight: 500; color: #ECA3A6; letter-spacing: 0.1em; position: relative; &:before, &:after{ content: ""; width: 27px; height: 1px; display: block; background: #ECA3A6; position: absolute; left: -33px; } &:before{ top: 14px; } &:after{ top: 19px; } } &.jp{ font-size: 16px; font-weight: 500; letter-spacing: 0.05em; } } } .boxR{ min-width: 438px; max-width: 438px; } &.area{ margin-bottom: 55px; .boxR{ select{ width: 100%; height: 50px; padding: 0 0 0 25px; appearance: none; border: 1px solid #707070; border-radius: 0; outline: none; background: url("../img/arrow_pul.svg") no-repeat right 20px center; font-size: 16px; color: #000; cursor: pointer; &::-ms-expand { display: none; } } } } &.brand{ .boxR{ ul{ display: flex; flex-wrap: wrap; li{ flex: 1; margin: 0 10px 10px 0; &:nth-child(even){ margin-right: 0; } a{ min-width: 214px; max-width: 214px; height: 77px; border: 1px solid #707070; display: flex; align-items: center; justify-content: center; transition: 0.3s; &:hover{ opacity: 0.7; } } } } } } } } } } } } @media screen and (max-width: 768px) { .contents_bg_06{ padding: 0 0 110px 0; .contents_06{ .ttlBox{ margin-bottom: 80px; } .boxWrapper{ padding: 0 5%; .box{ &:not(:last-child){ margin-bottom: 30px; } h3{ height: 78px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: #FFf; line-height: 1; background: #212C39; position: relative; cursor: pointer; transition: 0.3s; &:hover{ opacity: 0.7; } >span{ width: 16px; height: 16px; display: block; position: absolute; right: 28px; 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: #FFF; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:before{ transform: translate(50%, -50%) rotate(90deg); } } } &.active{ >span{ >span{ &:before{ transform: translate(50%, -50%) rotate(180deg); } } } } } .searchBox{ display: none; padding: 50px 20px; background: #FFF; .boxLR{ max-width: 690px; margin: 0 auto; display: block; justify-content: space-between; h4{ max-width: 438px; padding: 0 0 0 33px; margin: 0 auto 30px auto; >span{ display: block; line-height: 1; &.en{ margin-bottom: 10px; font-size: 30px; font-weight: 500; color: #ECA3A6; letter-spacing: 0.1em; position: relative; &:before, &:after{ content: ""; width: 27px; height: 1px; display: block; background: #ECA3A6; position: absolute; left: -33px; } &:before{ top: 14px; } &:after{ top: 19px; } } &.jp{ font-size: 16px; font-weight: 500; letter-spacing: 0.05em; } } } .boxR{ min-width: inherit; max-width: 438px; margin: 0 auto; } &.area{ margin-bottom: 55px; .boxR{ select{ width: 100%; height: 50px; padding: 0 0 0 25px; appearance: none; border: 1px solid #707070; border-radius: 0; outline: none; background: url("../img/arrow_pul.svg") no-repeat right 20px center; font-size: 16px; color: #000; cursor: pointer; &::-ms-expand { display: none; } } } } &.brand{ .boxR{ ul{ display: flex; flex-wrap: wrap; li{ flex: 1; margin: 0 10px 10px 0; &:nth-child(even){ margin-right: 0; } a{ min-width: 214px; max-width: 214px; height: 77px; border: 1px solid #707070; display: flex; align-items: center; justify-content: center; transition: 0.3s; &:hover{ opacity: 0.7; } } @media screen and (max-width: 540px) { min-width: 100%; margin: 0 0 10px 0; a{ max-width: inherit; } } } } } } } } } } } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 10px 0 60px 0; background: #212C39; position: relative; #toTop{ position: absolute; right: 35px; top: -48px; } .topBox{ margin-bottom: 60px; .imgBox{ margin-bottom: 40px; text-align: center; } p{ text-align: center; } } #links{ margin-bottom: 10px; font-size: 14px; color: #FFf; text-align: center; *{ color: #FFF; } a{ display: inline-block; &:hover{ text-decoration: underline; } } .topLinks{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #FFF; } } #copy{ text-align: center; small{ font-size: 12px; color: #FFF; } } } @media screen and (max-width: 768px) { footer{ padding: 10px 5% 60px 5%; background: #212C39; position: relative; #toTop{ position: absolute; right: 35px; top: -48px; } .topBox{ margin-bottom: 60px; .imgBox{ margin-bottom: 40px; text-align: center; } p{ text-align: center; } } #links{ margin-bottom: 10px; color: #FFf; text-align: center; *{ color: #FFF; } a{ display: inline-block; &:hover{ text-decoration: underline; } } .topLinks{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #FFF; } } #copy{ text-align: center; small{ font-size: 12px; color: #FFF; } } } } /*------------------------------------------ モーダル ------------------------------------------*/ .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: 950px; max-width: 950px; margin: 0 auto; padding: 0; .contents{ .contentsInner{ position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.2); .btnCloseBoxTop{ position: absolute; right: 18px; top: 18px; z-index: 2; a{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #FFF; cursor: pointer; transition: 0.3s; &:hover{ background: rgba(255,255,255,0.3); } } } .btnCloseBoxBottom{ a{ width: 200px; height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #FFF; font-size: 18px; font-family: 'Montserrat', sans-serif; color: #000; border-radius: 60px; transition: 0.3s; &:hover{ background: rgba(255,255,255,0.3); } } } } &.modal_01{ .contentsInner{ padding: 0 0 70px 0; background: #212C39; .imgBox{ margin-bottom: 40px; } p{ width: calc(720px + 10%); padding: 0 5%; margin: 0 auto 60px auto; font-size: 18px; color: #FFF; line-height: 1.8; } } } &.modal_02{ .contentsInner{ padding: 75px 0 70px 0; background: #C6C1C1; .interviewBox{ max-width: 850px; margin: 0 auto 70px auto; h3, .endTxt p{ padding: 0 0 0 65px; margin: 0 0 50px 0; font-size: 18px; font-weight: 500; color: #FFF; position: relative; &:before{ content: ""; width: 50px; height: 1px; display: block; background: #FFF; position: absolute; left: 0; top: 14px; } } .endTxt p{ margin-bottom: 0; } .talk{ margin: 0 0 70px 0; dl{ display: flex; &:not(:last-child){ margin: 0 0 50px 0; } dt{ min-width: 150px; margin: 0 30px 0 0; text-align: center; display: flex; align-items: center; justify-content: center; .inner{ min-width: 100%; position: relative; span{ display: block; } .imgBox{ margin-bottom: 5px; } .name{ width: 100%; font-size: 14px; font-weight: 500; color: #FFF; position: absolute; left: 0; bottom: -20px; } } } dd{ flex: 1; display: flex; align-items: center; .inner{ min-width: 100%; padding: 20px 30px; border: 2px solid #000; border-radius: 20px; background: #FFF; position: relative; &:before{ content: ""; width: 21px; height: 22px; display: block; background: url("../img/modal_arrow_fukidashi.png") no-repeat right center / 21px; position: absolute; left: -21px; top: 50%; transform: translate(0, -50%); } } } } } } .topTxt{ margin: 0 0 50px 0; font-size: 16px; line-height: 1.8; } .makanaiList{ display: flex; justify-content: space-between; list-style: none; li{ flex: 1; max-width: 180px; min-width: 180px; } } } } } } } @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; box-shadow: 0 0 15px rgba(0,0,0,0.2); .btnCloseBoxTop{ position: absolute; right: 18px; top: 18px; z-index: 2; a{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #FFF; cursor: pointer; transition: 0.3s; &:hover{ background: rgba(255,255,255,0.3); } } } .btnCloseBoxBottom{ a{ width: 200px; height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #FFF; font-size: 18px; font-family: 'Montserrat', sans-serif; color: #000; border-radius: 60px; transition: 0.3s; &:hover{ background: rgba(255,255,255,0.3); } } } } &.modal_01{ .contentsInner{ padding: 0 0 70px 0; background: #212C39; .imgBox{ margin-bottom: 40px; } p{ width: 100%; padding: 0 5%; margin: 0 auto 60px auto; font-size: 14px; color: #FFF; line-height: 1.8; } } } &.modal_02{ .contentsInner{ padding: 75px 0 70px 0; background: #C6C1C1; .interviewBox{ max-width: 850px; margin: 0 auto 70px auto; padding: 0 2.5%; h3, .endTxt p{ padding: 0 0 0 45px; margin: 0 0 50px 0; font-size: 16px; font-weight: 500; color: #FFF; position: relative; &:before{ content: ""; width: 30px; height: 1px; display: block; background: #FFF; position: absolute; left: 0; top: 14px; } } .endTxt p{ margin-bottom: 0; } .talk{ margin: 0 0 70px 0; dl{ display: block; &:not(:last-child){ margin: 0 0 50px 0; } dt{ min-width: 100px; margin: 0 0 20px 0; text-align: center; display: block; .inner{ min-width: 100%; position: relative; span{ display: block; } .imgBox{ margin-bottom: 5px; } .name{ width: 100%; font-size: 12px; font-weight: 500; color: #FFF; position: inherit; left: inherit; bottom: inherit; } } } dd{ flex: 1; display: flex; align-items: center; .inner{ min-width: 100%; padding: 15px 15px; border: 2px solid #000; border-radius: 20px; background: #FFF; position: relative; font-size: 14px; line-height: 1.8; &:before{ content: ""; width: 21px; height: 22px; display: block; background: url("../img/modal_arrow_fukidashi.png") no-repeat right center / 21px; position: absolute; left: inherit; right: 50%; top: -21px; transform: translate(50%, 0) rotate(90deg); } } } } } .imgBottom{ text-align: center; .pc{ display: none; } .sp{ display: inline-block; } } } .topTxt{ margin: 0 0 50px 0; font-size: 14px; line-height: 1.8; } .makanaiList{ max-width: 500px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; li{ flex: inherit; max-width: 48%; min-width: 48%; min-width: inherit; text-align: center; margin: 0 4% 30px 0; &:nth-child(even){ margin-right: 0; } img{ width: 100%; max-width: 180px; } } } } } } } } } /*/////////////////////アニメーション/////////////////////*/ .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); }