@charset "UTF-8"; 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: #251e1c; } img{ height: auto; max-width: 100%; } 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; } /*------------------------------------------ cmn ------------------------------------------*/ img{ vertical-align: top; } .hoverBtn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover{ } @media screen and (max-width: 768px) { img{ } } /*------------------------------------------ body ------------------------------------------*/ body{ padding-top: 90px; } #wrapper{ min-width: 980px; overflow-x: hidden; } @media screen and (max-width: 909px) { body{ padding-top: 60px; } } @media screen and (max-width: 768px) { body{ width: auto; min-width: inherit; } #wrapper{ min-width: inherit; overflow-x: hidden; } } /*------------------------------------------ header nav ------------------------------------------*/ /*PC*/ @media screen and (min-width: 910px) { header{ width: 100%; height: 90px; padding: 0; transition: 0.8s; position: fixed; left: 0; top: 0; z-index: 1000; background: #000; .headerInner{ .logoBox{ width: 92px; height: 80px; position: fixed; top: 5px; left: 30px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; transition: 0.3s; img{ transition: 0.3s; } } .headerTop{ display: none; } nav{ position: fixed; height: 90px; right: 0; top: 0; transition: 0.3s; display: block !important; .navInner{ ul{ width: 1000px; height: 90px; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; transition: 0.3s; @media screen and (max-width: 1109px) { width: 800px; } li:not(.btn){ -ms-flex: 1; flex: 1; text-align: center; a{ height: 100%; padding-top: 25px; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: flex-start; align-items: flex-start; } } li.btn{ margin-left: 50px; a{ width: 150px; height: 90px; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; text-align: center; font-size: 18px; font-weight: 500; color: #000; background: #d6782e; transition: 0.3s; &:hover{ opacity: 0.8; } } } } } } } &.fix{ box-shadow: 0 0 10px rgba(0,0,0,0.5); .headerInner{ .logoBox{ height: 90px; } nav{ height: 90px; .navInner{ ul{ height: 90px; } } } } } } } /*SP*/ @media screen and (max-width: 909px) { header{ width: 100%; height: 60px; padding: 0; position: fixed; top: 0; left: 0; z-index: 1000; transition: 0.3s; background: #000; .headerInner{ width: 100%; height: 100%; display: -ms-flex; display: flex; align-items: -ms-center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; .logoBox{ width: 200px; height: 35px; line-height: 1; opacity: 1; top: 0; right: 50%; transform: translate(50%, 0); position: fixed; text-align: center; img{ width: auto; height: 60px; } } .headerTop{ width: 40px; display: block; position: absolute; right: 5%; top: 18px; cursor: pointer; transition: 0.3s; .menuBtn{ width: 40px; height: 26px; position: relative; z-index: 1001; } } .headerBtn{ display: none; } nav{ display: none; width: 100%; height: 100vh; background: #000; position: fixed; left: 0; top: 0; .navInner{ height: 100%; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; ul{ width: 100%; padding: 0 5%; display: block; li{ display: block; width: 100%; max-width: 315px; margin: 0 auto 30px auto !important; text-align: center; &.btn{ display: block; a{ width: 100%; max-width: 280px; height: 60px; margin: 0 auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 18px; font-weight: 700; background: #d6782e; position: relative; border-radius: 10px; span{ position: relative; z-index: 2; color: #000; } .pc{ display: none; } } } } } } } } &.fix{ height: 60px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ .logoBox{ } .topBtn{ top: 16px; ul{ li{ a{ height: 40px; } } } } .headerTop{ } } } } } /*------------------------------------------ menuTrigger ------------------------------------------*/ .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 40px; height: 14px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background: #d6782e; } .menu-trigger.active span { background: #d6782e; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { bottom: 0; width: 100%; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg); } .menu-trigger.active span:nth-of-type(2) { -webkit-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg); /*-webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards;*/ } @-webkit-keyframes active-menu-bar02 { 100% { height: 0; } } @keyframes active-menu-bar02 { 100% { height: 0; } } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-14px) rotate(-45deg); transform: translateY(-14px) rotate(-45deg); } /*------------------------------------------ #cmn ------------------------------------------*/ .innerBox{ max-width: 980px; margin: 0 auto; position: relative; z-index: 100; } @media screen and (max-width: 768px) { } /*------------------------------------------ #mv ------------------------------------------*/ .mvWrapper{ .mv{ height: 860px; background: url("../img/mv.jpg") no-repeat center / cover; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; } } @media screen and (max-width: 768px) { .mvWrapper{ .mv{ height: 100vh; padding: 0 20px; h1{ img{ max-width: 300px; } } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .ttlBox{ text-align: center; height: 144px; background: url("../img/ttl_bg.jpg") repeat-x center top / 1600px; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; } .btnBlack{ width: 100%; max-width: 350px; height: 80px; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; color: #FFF; font-size: 18px; font-weight: 500; position: relative; background-color: #000; transition: 0.3s; &:before, &:after{ content: ""; width: calc(100% - 10px); height: 1px; display: block; background: #FFF; position: absolute; right: 50%; transform: translate(50%, 0); } &:before{ top: 5px; } &:after{ bottom: 5px; } &:hover{ opacity: 0.8; } } @media screen and (max-width: 768px) { .ttlBox{ } } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ background: url("../img/bg_con_01.jpg") no-repeat center / cover; .contents_01{ padding: 75px 0 135px 0; .ttlBox_type_01{ margin-bottom: 50px; text-align: center; .imgBox{ margin-bottom: 50px; } h2{ font-size: 38px; font-weight: 500; color: #FFF; } } .contents{ p{ margin-bottom: 50px; text-align: center; font-size: 18px; font-weight: 500; color: #FFF; line-height: 1.8; } .bannerBox{ ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; li{ &:not(:last-child){ margin-right: 40px; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_01{ background: url("../img/bg_con_01.jpg") no-repeat center / cover; .contents_01{ padding: 50px 20px; .ttlBox_type_01{ margin-bottom: 30px; text-align: center; .imgBox{ margin-bottom: 30px; } h2{ font-size: 30px; font-weight: 500; color: #FFF; } } .contents{ p{ margin-bottom: 50px; text-align: left; font-size: 16px; font-weight: 500; color: #FFF; line-height: 1.8; } .bannerBox{ ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; li{ text-align: center; &:not(:last-child){ margin-right: 40px; } &:first-child{ min-width: 100%; margin: 0 0 20px 0; } &:nth-child(1) img{ max-width: 200px; } &:nth-child(2) img{ max-width: 100px; } &:nth-child(3) img{ max-width: 100px; } } } } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ background: url("../img/bg_con_02.jpg") no-repeat center top / cover; .contents_02{ .contents{ .box_01{ padding: 110px 0 90px 0; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; li{ max-width: 350px; min-width: 350px; &:not(:last-child){ margin-right: 65px; } .btnBlack{ background-image: url("../img/arrow_right_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 7px 12px; } } } .sttlBox{ text-align: center; &.type_01{ margin-bottom: 75px; } &.type_02{ margin-bottom: 75px; } } .selectWrapper{ width: 100%; max-width: 350px; height: 80px; margin: 0 auto 80px auto; position: relative; background-color: #000; transition: 0.3s; &:hover{ opacity: 0.8; } &:before, &:after{ content: ""; width: calc(100% - 10px); height: 1px; display: block; background: #FFF; position: absolute; right: 50%; transform: translate(50%, 0); } &:before{ top: 5px; } &:after{ bottom: 5px; } background-image: url("../img/arrow_down_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 7px; } .select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; outline: none; background: transparent; &::-ms-expand { display: none; } width: 100%; max-width: 350px; height: 80px; padding-left: calc(50% - 2em); color: #FFF; font-size: 18px; font-weight: 500; position: relative; cursor: pointer; option{ color: #000; } } .bannerBox{ margin-bottom: 90px; text-align: center; } .box_02{ padding: 0 0 80px 0; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ max-width: 260px; min-width: 260px; margin: 0 50px 40px 0; &:nth-child(3n), &:last-child{ margin-right: 0; } .btnBlack{ height: 60px; background-image: url("../img/arrow_right_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 7px 12px; } } } } } } @media screen and (max-width: 768px) { .contents_bg_02{ background: url("../img/bg_con_02.jpg") no-repeat center top / cover; .contents_02{ padding: 0 20px; .contents{ .box_01{ padding: 50px 0; display: block; li{ max-width: 350px; margin: 0 auto 0 auto; min-width: inherit; &:not(:last-child){ margin: 0 auto 20px auto; } .btnBlack{ background-image: url("../img/arrow_right_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 7px 12px; } } } .sttlBox{ text-align: center; &.type_01{ margin-bottom: 50px; } &.type_02{ margin-bottom: 50px; } } .selectWrapper{ width: 100%; max-width: 350px; height: 80px; margin: 0 auto 50px auto; position: relative; background-color: #000; transition: 0.3s; &:hover{ opacity: 0.8; } &:before, &:after{ content: ""; width: calc(100% - 10px); height: 1px; display: block; background: #FFF; position: absolute; right: 50%; transform: translate(50%, 0); } &:before{ top: 5px; } &:after{ bottom: 5px; } background-image: url("../img/arrow_down_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 7px; } .select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; outline: none; background: transparent; &::-ms-expand { display: none; } width: 100%; max-width: 350px; height: 80px; padding-left: calc(50% - 2em); color: #FFF; font-size: 18px; font-weight: 500; position: relative; cursor: pointer; } .bannerBox{ margin-bottom: 90px; text-align: center; } .box_02{ padding: 0 0 50px 0; display: block; li{ max-width: 260px; min-width: 260px; margin: 0 auto 20px auto; &:nth-child(3n), &:last-child{ margin-right: auto; } .btnBlack{ height: 60px; background-image: url("../img/arrow_right_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 7px 12px; } } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ background: url("../img/bg_con_03_01.jpg") no-repeat center / cover; .contents_03{ .innerBox{ padding: 90px 0 120px 0; .contents{ ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-justify-content: center; justify-content: center; li{ max-width: 296px; min-width: 296px; padding: 12px; background: url("../img/bg_con_03_02.png") no-repeat center / 100% 100%; &:not(:nth-child(3n)){ margin-right: 46px; } >div{ border: 1px solid #000; height: 100%; padding: 20px; } .txt_01{ margin-bottom: 13px; text-align: center; } .txt_02{ min-height: 3em; margin-bottom: 10px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 18px; font-weight: 500; text-align: center; color: #000; background: url("../img/icon_star.png") no-repeat left center / 19px , url("../img/icon_star.png") no-repeat right center / 19px; } .imgBox{ min-height: 80px; margin-bottom: 10px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ background: url("../img/bg_con_03_01.jpg") no-repeat center / cover; .contents_03{ .innerBox{ padding: 50px 0; .contents{ ul{ display: block; li{ max-width: 296px; min-width: 296px; padding: 12px; margin: 0 auto 20px auto; background: url("../img/bg_con_03_02.png") no-repeat center / 100% 100%; &:not(:nth-child(3n)){ margin-right: auto; } >div{ border: 1px solid #000; height: 100%; padding: 20px; } .txt_01{ margin-bottom: 13px; text-align: center; } .txt_02{ min-height: 3em; margin-bottom: 10px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 18px; font-weight: 500; text-align: center; color: #000; background: url("../img/icon_star.png") no-repeat left center / 19px , url("../img/icon_star.png") no-repeat right center / 19px; } .imgBox{ min-height: 80px; margin-bottom: 10px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; } } } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ background: url("../img/frame_con_04_01_tl.png") no-repeat left 10px top 10px / 89px , url("../img/frame_con_04_01_tr.png") no-repeat right 10px top 10px / 89px , url("../img/frame_con_04_01_br.png") no-repeat right 10px bottom 10px / 89px , url("../img/frame_con_04_01_bl.png") no-repeat left 10px bottom 10px / 89px , url("../img/bg_con_04.jpg") repeat center / 120px; position: relative; &:before, &:after{ content: ""; width: 10px; height: calc(100% - 250px); display: block; position: absolute; top: 50%; transform: translate(0, -50%); background: url("../img/frame_con_04_03.png") repeat-y center / 10px; } &:before{ right: 15px; } &:after{ left: 15px; transform: translate(0, -50%) rotate(180deg); } .contents_04{ position: relative; &:before, &:after{ content: ""; width: calc(100% - 250px); height: 10px; display: block; position: absolute; right: 50%; transform: translate(50%, 0); background: url("../img/frame_con_04_02.png") repeat-x center / 1350px; } &:before{ top: 15px; } &:after{ bottom: 15px; transform: translate(50%, 0) rotate(180deg); } .innerBox{ padding: 95px 0 125px 0; .ttlBox_type_02{ margin-bottom: 30px; text-align: center; } ul{ text-align: center; li{ &:not(:last-child){ margin-bottom: 20px; } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ background: url("../img/frame_con_04_01_tl.png") no-repeat left 5px top 5px / 50px , url("../img/frame_con_04_01_tr.png") no-repeat right 5px top 5px / 50px , url("../img/frame_con_04_01_br.png") no-repeat right 5px bottom 5px / 50px , url("../img/frame_con_04_01_bl.png") no-repeat left 5px bottom 5px / 50px , url("../img/bg_con_04.jpg") repeat center / 120px; position: relative; &:before, &:after{ content: ""; width: 5px; height: calc(100% - 120px); display: block; position: absolute; top: 50%; transform: translate(0, -50%); background: url("../img/frame_con_04_03.png") repeat-y center / 5px; } &:before{ right: 8px; } &:after{ left: 8px; transform: translate(0, -50%) rotate(180deg); } .contents_04{ position: relative; &:before, &:after{ content: ""; width: calc(100% - 120px); height: 5px; display: block; position: absolute; right: 50%; transform: translate(50%, 0); background: url("../img/frame_con_04_02.png") repeat-x center / 675px; } &:before{ top: 8px; } &:after{ bottom: 8px; transform: translate(50%, 0) rotate(180deg); } .innerBox{ padding: 70px 20px; .ttlBox_type_02{ margin-bottom: 30px; text-align: center; } ul{ text-align: center; li{ &:not(:last-child){ margin-bottom: 20px; } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ .contents_05{ .btnToggle{ width: 100%; max-width: 260px; height: 50px; margin: 0 auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; position: relative; font-size: 18px; font-weight: 500; color: #FFF; background: #d6782e; transition: 0.3s; cursor: pointer; &:hover{ opacity: 0.8; } >span{ width: 14px; height: 14px; display: block; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); >span{ position: relative; width: 100%; height: 100%; display: block; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; background: #FFF; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:after{ transform: translate(50%, -50%) rotate(90deg); } } } } .box{ .topImg{ .innerBox{ height: 500px; .imgBox{ display: none; } .txtBox{ height: 100%; width: 404px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; .btnBox{ padding: 40px 0 0 0; } } } } &.box_01{ .topImg{ background: url("../img/img_con_05_01.png") no-repeat center bottom / 373px , url("../img/bg_con_05_01.jpg") no-repeat center / cover; background-position: calc(50% - 210px) bottom , center center; } .txtBox{ margin: 0 100px 0 auto; } } &.box_02{ .topImg{ background: url("../img/img_con_05_02.png") no-repeat center bottom / 545px , url("../img/bg_con_05_02.jpg") no-repeat center / cover; background-position: calc(50% + 290px) bottom , center center; } .txtBox{ margin: 0 auto 0 100px; } } .toggleInterview{ display: none; padding: 60px 0 80px 0; background: url("../img/bg_con_05_03.jpg") no-repeat center bottom / cover; .innerBox{ margin-bottom: 55px; background: url("../img/bg_con_05_04.jpg") repeat center / 120px; } } .timeLine{ padding: 30px 45px 45px 45px; h3{ height: 30px; width: 100%; max-width: 663px; margin: 0 auto 10px auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 16px; font-weight: 500; color: #FFF; background: url("../img/bg_sttl_con_05.png") no-repeat center / 663px; } >ul{ min-height: 150px; padding: 20px 37px 0 37px; background: url("../img/frame_con_05_l.png") no-repeat left center / 25px , url("../img/frame_con_05_r.png") no-repeat right center / 25px; display: -ms-flex; display: flex; >li{ -ms-flex: 1; flex: 1; position: relative; &:not(:last-child){ margin-right: 35px; &:after{ content: ""; width: 26px; height: 13px; display: block; background: url("../img/icon_hand.png") no-repeat center / 26px; position: absolute; right: -30px; top: 7px; } } .time{ background: #000; font-size: 16px; font-weight: 500; color: #FFF; padding: 2px 5px; } ul{ padding: 5px 0 0 0; li{ padding: 0 0 0 1em; position: relative; &:before{ content: "・"; position: absolute; left: 0; top: 0; } } } } } } &.active{ .btnToggle{ >span{ >span{ &:after{ transform: translate(50%, -50%) rotate(180deg); } } } } } } } } @media screen and (max-width: 768px) { .contents_bg_05{ .contents_05{ .btnToggle{ width: 100%; max-width: 260px; height: 50px; margin: 0 auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; position: relative; font-size: 18px; font-weight: 500; color: #FFF; background: #d6782e; transition: 0.3s; cursor: pointer; &:hover{ opacity: 0.8; } >span{ width: 14px; height: 14px; display: block; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); >span{ position: relative; width: 100%; height: 100%; display: block; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; background: #FFF; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:after{ transform: translate(50%, -50%) rotate(90deg); } } } } .box{ .topImg{ .innerBox{ height: auto; .imgBox{ padding: 20px 20px 0 20px; display: block; text-align: center; background: url("../img/bg_con_05_03.jpg") no-repeat center bottom / 800px; img{ width: 100%; max-width: 250px; } } .txtBox{ height: 100%; padding: 10px 20px 30px 20px; width: auto; display: block; text-align: center; .btnBox{ padding: 40px 0 0 0; } } } } &.box_01{ .topImg{ background: url("../img/bg_con_05_01.jpg") no-repeat center bottom / 1600px; .innerBox{ .imgBox{ img{ max-width: 200px; } } } } .txtBox{ margin: 0 auto; } } &.box_02{ .topImg{ background: url("../img/bg_con_05_02.jpg") no-repeat center bottom / 1600px; } .txtBox{ margin: 0 auto 0 auto; } } .toggleInterview{ display: none; padding: 0 0 40px 0; background: #000; .innerBox{ margin-bottom: 40px; background: url("../img/bg_con_05_04.jpg") repeat center / 120px; } } .timeLine{ padding: 30px 20px; h3{ height: 30px; width: 100%; max-width: 663px; margin: 0 auto 10px auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 16px; font-weight: 500; color: #FFF; background: url("../img/bg_sttl_con_05.png") no-repeat center / 663px; } >ul{ min-height: 150px; padding: 20px 37px 0 37px; background: url("../img/frame_con_05_l.png") no-repeat left center / 25px , url("../img/frame_con_05_r.png") no-repeat right center / 25px; display: block; >li{ position: relative; &:not(:last-child){ margin: 0 0 50px 0; &:after{ content: ""; width: 26px; height: 13px; display: block; background: url("../img/icon_hand.png") no-repeat center / 26px; position: absolute; right: 50%; top: inherit; bottom: -30px; transform: translate(50%, 0) rotate(90deg); } } .time{ background: #000; font-size: 16px; font-weight: 500; color: #FFF; padding: 2px 5px; } ul{ padding: 5px 0 0 0; li{ padding: 0 0 0 1em; position: relative; &:before{ content: "・"; position: absolute; left: 0; top: 0; } } } } } } &.active{ .btnToggle{ >span{ >span{ &:after{ transform: translate(50%, -50%) rotate(180deg); } } } } } } } } } .qaWrapper{ dl{ border-bottom: 1px solid #000; dt{ padding: 15px 40px 15px 40px; font-size: 14px; font-weight: 500; letter-spacing: 0.025em; cursor: pointer; position: relative; background: url("../img/icon_q.svg") no-repeat left 10px center / 22px 26px; >span{ width: 14px; height: 14px; position: absolute; right: 15px; 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: #000; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); transition: 0.3s; } &:after{ transform: translate(50%, -50%) rotate(90deg); } } } } dd{ padding: 15px 40px 15px 40px; font-size: 14px; letter-spacing: 0.025em; background: url("../img/icon_a.svg") no-repeat left 10px center / 22px 21px , url("../img/dot.png") repeat-x left top / 10px; } &.active{ dt{ >span{ >span{ &:after{ transform: translate(50%, -50%) rotate(180deg); } } } } } } &.type_01{ dd{ display: none; } } &.type_02{ dt{ cursor: inherit; padding-right: 20px; } dd{ padding-right: 20px; } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .contents_bg_06{ background: url("../img/bg_con_06.jpg") no-repeat center / cover; .contents_06{ .innerBox{ padding: 75px 0 80px 0; .contents{ background: url("../img/bg_con_05_04.jpg") repeat center / 120px; } } } } @media screen and (max-width: 768px) { .contents_bg_06{ background: none; .contents_06{ .innerBox{ padding: 0 0; .contents{ background: url("../img/bg_con_05_04.jpg") repeat center / 120px; } } } } } /*------------------------------------------ #contents_07 ------------------------------------------*/ .contents_bg_07{ background:url("../img/frame_con_04_02.png") repeat-x center top / 1350px , url("../img/bg_con_07.jpg") repeat center / 120px; padding: 80px 0 100px 0; .contents_07{ .ttlBox_type_03{ padding: 0 20px 65px 20px; margin-bottom: 20px; font-size: 32px; font-weight: 700; letter-spacing: 0.05em; text-align: center; color: #000; background: url("../img/ttl_bg_con_07.svg") no-repeat center bottom / 530px 38px; } .slideBottom { background-image: url("../img/img_slide.png"); background-repeat: repeat-x; background-size: 1939px; background-position: top left; height: 455px; animation: photo-gallery 50s linear infinite; } @keyframes photo-gallery { 0% { background-position: top left; } 100% { background-position: top left -1939px; } } @media screen and (max-width: 768px) { .slideBottom { background-size: 1000px; height: 235px; animation: photo-gallery_sp 30s linear infinite; } @keyframes photo-gallery_sp { 0% { background-position: top left; } 100% { background-position: top left -1000px; } } } .btnBox{ padding: 100px 0 0 0; .btnBlack{ margin: 0 auto; background-image: url("../img/arrow_right_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 7px 12px; } } } } @media screen and (max-width: 768px) { .contents_bg_07{ background:url("../img/frame_con_04_02.png") repeat-x center top / 1350px , url("../img/bg_con_07.jpg") repeat center / 120px; padding: 50px 0 50px 0; .contents_07{ .ttlBox_type_03{ padding: 0 20px 65px 20px; margin-bottom: 20px; font-size: 28px; font-weight: 700; letter-spacing: 0.05em; text-align: center; background: url("../img/ttl_bg_con_07.svg") no-repeat center bottom / 530px 38px; } .btnBox{ padding: 50px 20px 0 20px; .btnBlack{ margin: 0 auto; background-image: url("../img/arrow_right_white.svg"); background-repeat: no-repeat; background-position: right 15px center; background-size: 7px 12px; } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ position: fixed; right: 20px; bottom: 62px; display: none; z-index: 200; } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop{ right: 0; bottom: 0; img{ width: 29px; } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 20px 40px; background: #000; } footer *{ color: #FFF; font-size: 13px; } footer .innerBox{ max-width: 100%; } footer #links{ float: left; font-size: 15px; } footer #links a{ display: inline-block; font-size: 15px; } footer #links a:last-child{ margin-right: 0; } footer #links a:hover{ text-decoration: underline; } footer #copy{ float: right; } footer #copy small{ font-size: 13px; } @media screen and (max-width: 768px) { footer{ padding: 20px 5% 50px 5%; min-width: inherit; text-align: center; display: block; } footer #links{ padding: 30px 5% 0 5%; margin-bottom: 0; float: inherit; text-align: center; font-size: 12px; a{ display: inline-block; margin: 0 10px 20px 10px; &:last-child{ margin: 0 10px 20px 10px; } } } footer #copy{ float: inherit; small{ font-size: 12px; } } }