@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: 500; line-height: 1.5; -webkit-text-size-adjust: 100%; color: #000; } 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{ width: 100vw; min-width: 980px; padding-top: 90px; overflow-x: hidden; } @media screen and (max-width: 1169px) { body{ padding-top: 60px; } } @media screen and (max-width: 768px) { body{ min-width: inherit; } } /*------------------------------------------ header nav ------------------------------------------*/ /*PC*/ /*@media screen and (min-width: 1461px) {*/ @media screen and (min-width: 1170px) { header{ nav{ display: block !important; } } } header{ width: 100%; height: 90px; padding: 0 30px; transition: 0.8s; position: fixed; left: 0; top: 0; z-index: 1000; background: #87061e; .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{ display: block; } .headerTop{ display: none; } nav{ .navInner{ ul{ display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; li{ &:not(.btn){ margin-right: 35px; position: relative; a{ font-size: 15px; color: #FFF; letter-spacing: 0.1em; transition: 0.3s; &:hover{ opacity: 0.8; text-decoration: underline; } } &:after{ content: ""; width: 1px; height: 33px; display: block; background: #FFF; position: absolute; right: -12px; top: -4px; transform: rotate(200deg); } &:last-child{ margin-right: 0; &:after{ content: none; } } } /*&.btn{ a{ width: 150px; height: 42px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; border: 1px solid #029cb6; color: #029cb6; font-size: 15px; position: relative; &:after{ content: ""; width: 15px; height: 1px; display: block; background: #029cb6; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); transition: 0.3s; } &:hover{ &:after{ width: 5px; } } } }*/ } } } } } &.fix{ height: 70px; box-shadow: 0 0 10px rgba(0,0,0,0.5); } } /*SP*/ @media screen and (max-width: 1169px) { header{ width: 100%; height: 60px; padding: 10px 0; position: fixed; top: 0; left: 0; z-index: 1000; transition: 0.3s; .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{ display: block; padding-left: 20px; line-height: 1; a{ width: 150px; height: 41px; img{ max-width: 150px; } } } .headerTop{ width: 30px; display: block; position: absolute; right: 5%; top: 17px; cursor: pointer; transition: 0.3s; .menuBtn{ width: 30px; height: 26px; position: relative; z-index: 1001; } } nav{ width: 100%; height: 100vh; padding-right: 0; margin-left: inherit; display: none; position: fixed; top: 0; left: 0; background: rgba(255,255,255,0.9); .navInner{ width: 100%; height: 100%; padding-top: 50px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; ul{ width: 100%; padding: 0 5%; display: block; li{ display: block; width: 100%; max-width: 315px; margin: 0 auto 20px auto !important; text-align: center; a{ font-size: 18px; color: #000 !important; } } } } } } &.fix{ height: 60px; padding: 10px 0; .headerInner{ .topBtn{ top: 16px; ul{ li{ a{ height: 40px; } } } } .headerTop{ top: 17px; } } } } } /*------------------------------------------ menuTrigger ------------------------------------------*/ .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 26px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background: #FFF; } .menu-trigger.active span { background: #a00118; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 12px; width: 100%; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } .menu-trigger.active span:nth-of-type(2) { -webkit-transform: translateY(-2px) rotate(45deg); transform: translateY(-2px) 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{ height: calc(100vh - 90px); min-height: 775px; .mv{ height: 100%; position: relative; ul{ height: 100%; li{ width: 100%; height: calc(100vh - 90px); min-height: 775px; &.mv_01{ background: url("../img/mv_01.jpg") no-repeat center top / cover; } &.mv_02{ background: url("../img/mv_02.jpg") no-repeat center top / cover; } } } h1{ position: absolute; left: 50px; bottom: 50px; z-index: 100; } .entry{ position: fixed; right: 45px; bottom: 45px; z-index: 500; a{ display: block; transition: 0.3s; &:hover{ opacity: 0.7; } } .sp{ display: none; } } } } @media screen and (max-width: 1000px) { .mvWrapper{ .mv{ h1{ max-width: 60%; } } } } @media screen and (max-width: 768px) { .mvWrapper{ height: auto; min-height: inherit; .mv{ height: 100%; position: relative; ul{ height: 100%; li{ width: 100%; height: auto; min-height: inherit; &.mv_01{ background: none; } &.mv_02{ background: none; } } } h1{ max-width: 50%; position: absolute; left: 5%; bottom: 5%; } .entry{ max-width: inherit; width: 100vw; padding: 5px 0; text-align: center; right: 0; bottom: 0; background: #009cb6; text-align: center; >a{ display: none; } .sp{ display: block; a{ color: #FFF; font-weight: 700; } } } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .ttlBox{ position: relative; text-align: center; .fukidashi{ position: absolute; top: 0; right: 50%; transform: translate(50%, 0); } } .btn_01{ width: 100%; max-width: 300px; height: 70px; font-size: 22px; font-weight: 700; color: #FFF; border-radius: 70px; background: #e8380d; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; cursor: pointer; transition: 0.3s; &:hover{ opacity: 0.6; } } @media screen and (max-width: 768px) { } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ border: 3px solid #000; position: relative; &:before, &:after{ content: ""; width: 150px; height: 150px; display: block; background: url("../img/bg_con_01.svg") no-repeat center / 150px 150px; position: absolute; } &:before{ left: 0; top: 0; } &:after{ right: 0; bottom: 0; transform: rotate(180deg); } .contents_01{ padding: 115px 0 120px 0; p{ text-align: center; &.txt_01{ margin-bottom: 20px; } &.txt_02{ font-size: 31px; font-weight: 700; line-height: 1.8; } } } } @media screen and (max-width: 768px) { .contents_bg_01{ &:before, &:after{ width: 75px; height: 75px; background: url("../img/bg_con_01.svg") no-repeat center / 75px 75px; } .contents_01{ padding: 80px 5%; p{ &.txt_02{ font-size: 4.5vw; } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ background: url("../img/bg_con_02.jpg") no-repeat center / cover; .contents_02{ padding: 100px 0 30px 0; position: relative; .topArrow{ position: absolute; top: -50px; right: 50%; transform: translate(50%, 0); } .ttlBox{ margin-bottom: 100px; .fukidashi{ top: -140px; transform: translate(-120%, 0); } } ul{ padding: 0 10px; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ margin: 0 35px 100px 0; padding: 70px 10px 50px 10px; -ms-flex-basis: 300px; flex-basis: 300px; border: 3px solid #000; border-radius: 25px; background: #FFF; position: relative; .num{ position: absolute; right: 50%; top: -70px; transform: translate(50%, 0); } .imgBox{ height: 140px; margin-bottom: 30px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; } h3{ margin-bottom: 15px; text-align: center; font-size: 24px; font-weight: 900; color: #e8380d; } p{ padding: 0 10px; font-weight: 400; } } } } } @media screen and (max-width: 768px) { .contents_bg_02{ .contents_02{ padding: 80px 5% 10px 5%; .ttlBox{ margin-bottom: 70px; .fukidashi{ width: 100px; top: -90px; transform: translate(-60%, 0); } h2 img{ max-width: 250px; } } ul{ padding: 0; display: block; li{ padding: 50px 10px 30px 10px; margin: 0 auto 60px auto; .num{ max-width: 60px; top: -32px; } .imgBox{ height: auto; margin-bottom: 20px; } h3{ font-size: 22px; } &:nth-child(1){ .imgBox{ img{ max-width: 78px; } } } &:nth-child(2){ .imgBox{ img{ max-width: 79px; } } } &:nth-child(3){ .imgBox{ img{ max-width: 117px; } } } &:nth-child(4){ .imgBox{ img{ max-width: 80px; } } } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ border: 3px solid #000; background: #ebebeb; position: relative; &:before, &:after{ content: ""; width: 150px; height: 150px; display: block; background: url("../img/bg_con_03.svg") no-repeat center / 150px 150px; position: absolute; } &:before{ left: 0; top: 0; } &:after{ right: 0; bottom: 0; transform: rotate(180deg); } .contents_03{ padding: 100px 0 210px 0; .ttlBox{ margin-bottom: 80px; .fukidashi{ top: -115px; transform: translate(170%, 0); } } .tabBox{ border: 3px solid #000; border-radius: 25px; background: #FFF; box-shadow: 10px 10px 0 #bcbcbc; .tab_01{ display: -ms-flex; display: flex; li{ padding: 25px 10px; font-size: 22px; font-weight: 700; color: #FFF; letter-spacing: 0.075em; cursor: pointer; -ms-flex: 1; flex: 1; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; border-bottom: 3px solid #000; border-right: 3px solid #000; &:nth-child(1){ background: #e8380d; border-radius: 22px 0 0 0; } &:nth-child(2){ background: #ffd100; } &:nth-child(3){ background: #08a349; } &:nth-child(4){ background: #009cb6; border-radius: 0 22px 0 0; border-right: none; } } } .data_01{ >div{ display: none; padding: 50px 25px 50px 45px; .boxLR{ display: -ms-flex; display: flex; .imgBox{ min-width: 440px; } .txtBox{ margin-left: 65px; -ms-flex: 1; flex: 1; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; >div{ width: 100%; } h3{ margin-bottom: 15px; font-size: 30px; font-weight: 700; letter-spacing: 0.075em; } p{ margin-bottom: 65px; font-size: 20px; font-weight: 400; } .btnBox{ } } } &.show{ display: block; } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ &:before, &:after{ width: 75px; height: 75px; background: url("../img/bg_con_03.svg") no-repeat center / 75px 75px; } .contents_03{ padding: 70px 5%; .ttlBox{ margin-bottom: 50px; .fukidashi{ width: 100px; top: -90px; transform: translate(130%, 0); } h2 img{ max-width: 140px; } } .tabBox{ .tab_01{ li{ padding: 25px 5px; font-size: 4vw; text-align: center; letter-spacing: 0; } } .data_01{ >div{ padding: 30px 10px; .boxLR{ max-width: 440px; margin: 0 auto; display: block; .imgBox{ min-width: inherit; } .txtBox{ margin: 20px 0 0 0; >div{ width: 100%; } h3{ font-size: 20px; } p{ margin-bottom: 30px; font-size: 16px; } } .btnBox{ a{ margin: 0 auto; } } } } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ background: url("../img/bg_con_04.jpg") no-repeat center / cover; .contents_04{ padding: 80px 0 100px 0; .ttlBox{ margin-bottom: 65px; .fukidashi{ top: -140px; transform: translate(-80%, 0); } } ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ padding: 25px 10px 10px 10px; margin: 0 2% 2% 0; border: 3px solid #000; background: #FFF; border-radius: 25px; h3{ max-width: 405px; padding-bottom: 5px; margin: 0 auto 20px auto; font-size: 20px; font-weight: 900; border-bottom: 1px solid #000; text-align: center; letter-spacing: 0.1em; } .imgBox{ display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; } &.w2{ min-width: 49%; max-width: 49%; } &.w3{ min-width: 32%; max-width: 32%; h3{ max-width: 258px; } } &.box_01{ h3{ background: url("../img/num_con_04_01.png") no-repeat left center / 53px; } .imgBox{ -ms-align-items: flex-end; align-items: flex-end; } } &.box_02{ h3{ background: url("../img/num_con_04_02.png") no-repeat left center / 53px; } margin-right: 0; .imgBox{ padding-bottom: 20px; } } &.box_03{ h3{ background: url("../img/num_con_04_03.png") no-repeat left center / 53px; } .imgBox{ padding-bottom: 40px; } } &.box_04{ h3{ background: url("../img/num_con_04_04.png") no-repeat left center / 53px; } margin-right: 0; .imgBox{ padding-bottom: 40px; } } &.box_05{ h3{ text-align: right; background: url("../img/num_con_04_05.png") no-repeat left center / 53px; } .imgBox{ padding-bottom: 20px; } } &.box_06{ h3{ background: url("../img/num_con_04_06.png") no-repeat left center / 53px; } .imgBox{ padding-bottom: 20px; } } &.box_07{ h3{ padding-left: 53px; background: url("../img/num_con_04_07.png") no-repeat left center / 53px; } margin-right: 0; .imgBox{ padding-bottom: 20px; } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ .contents_04{ padding: 70px 5% 50px 5%; .ttlBox{ margin-bottom: 50px; .fukidashi{ width: 115px; top: -100px; transform: translate(-30%, 0); } h2 img{ max-width: 270px; } } ul{ display: block; li{ padding: 25px 10px 25px; margin: 0 auto 20px auto; border: 3px solid #000; background: #FFF; border-radius: 25px; .imgBox{ display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; img{ max-width: 250px; } } h3{ padding-left: 20px !important; background-size: 40px auto !important; letter-spacing: 0; font-size: 20px; } &.w2{ min-width: 100%; max-width: 100%; } &.w3{ min-width: 100%; max-width: 100%; h3{ max-width: 405px; } } &.box_01{ .imgBox{ -ms-align-items: flex-start; align-items: flex-start; } } &.box_02{ margin-right: auto; .imgBox{ padding-bottom: 0; } } &.box_03{ .imgBox{ padding-bottom: 0; } } &.box_04{ margin-right: auto; .imgBox{ padding-bottom: 0; } } &.box_05{ h3{ text-align: center; } .imgBox{ padding-bottom: 0; } } &.box_06{ .imgBox{ padding-bottom: 0; } } &.box_07{ margin-right: auto; .imgBox{ padding-bottom: 0; } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ border: 3px solid #000; background: #fff6d7; position: relative; &:before, &:after{ content: ""; width: 150px; height: 150px; display: block; background: url("../img/bg_con_01.svg") no-repeat center / 150px 150px; position: absolute; } &:before{ left: 0; top: 0; } &:after{ right: 0; bottom: 0; transform: rotate(180deg); } .contents_05{ padding: 85px 0 110px 0; .ttlBox{ margin-bottom: 85px; .fukidashi{ top: -165px; transform: translate(220%, 0); } } .prof{ max-width: 650px; margin: 0 auto; border: 3px solid #000; border-radius: 25px; background: #ebebeb; box-shadow: 4px 4px 0 #ccc5aa; .boxLR{ display: -ms-flex; display: flex; .imgBox{ position: relative; min-width: 45%; max-width: 45%; img{ width: 88%; position: absolute; left: 3%; bottom: 0; } } .txtBox{ padding: 3% 1% 3% 0; min-width: 55%; max-width: 55%; h3{ margin-bottom: 2%; font-size: 36px; font-weight: 700; letter-spacing: -0.06em; } p{ font-size: 15px; line-height: 2.3; } } } } h3.q{ max-width: 650px; padding: 22px 80px; margin: 55px auto 55px auto; border: 3px solid #000; border-radius: 25px; background: url("../img/icon_q_con_05.svg") no-repeat left 15px center / 58px 51px #FFF; font-size: 19px; font-weight: 500; text-align: center; } .interview{ .boxL, .boxR{ max-width: 855px; margin-bottom: 40px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; .imgBox{ min-width: 150px; text-align: center; p{ padding: 5px 0 0 0; font-size: 18px; font-weight: 700; color: #666; span{ font-weight: 500; font-size: 16px; } } } .txtBox{ width: 100%; padding: 25px; border-radius: 15px; position: relative; -ms-flex: 1; flex: 1; &:after{ content: ""; width: 14px; height: 17px; display: block; position: absolute; top: 50%; transform: translate(0, -50%); } p{ font-weight: 400; letter-spacing: 0.05em; } } } .boxL{ .txtBox{ margin-left: 25px; background: #ffd100; &:after{ left: -14px; background: url("../img/fukidashi_con_05_yellow.png") no-repeat left center / cover; } } } .boxR{ margin-left: auto; .imgBox{ -ms-order: 2; order: 2; } .txtBox{ -ms-order: 1; order: 1; margin-right: 25px; background: #FFF; &:after{ right: -14px; background: url("../img/fukidashi_con_05_white.png") no-repeat left center / cover; } } } .btnBox{ .arrow{ margin-bottom: 20px; text-align: center; } a{ margin: 0 auto; } .closeBox{ .arrow{ transform: rotate(180deg); } } } .hiddenInterview{ padding-top: 1px; display: none; } } } } @media screen and (max-width: 768px) { .contents_bg_05{ &:before, &:after{ width: 75px; height: 75px; background: url("../img/bg_con_01.svg") no-repeat center / 75px 75px; } .contents_05{ padding: 70px 5%; .ttlBox{ margin-bottom: 60px; .fukidashi{ width: 97px; top: -90px; transform: translate(150%, 0); } h2 img{ max-width: 230px; } } .prof{ .boxLR{ .txtBox{ h3{ font-size: 5vw; } p{ font-size: 1.9vw; } } } } @media screen and (max-width: 500px) { h3.q{ max-width: 650px; padding: 15px 10px 15px 65px; margin: 55px auto 55px auto; text-align: left; font-size: 18px; background: url("../img/icon_q_con_05.svg") no-repeat left 15px center / 40px 35px #FFF; } .interview{ .boxL, .boxR{ .imgBox{ min-width: 70px; img{ width: 58px; } p{ font-size: 14px; span{ font-size: 12px; } } } .txtBox{ padding: 15px; p{ letter-spacing: 0; } } } .boxL{ .txtBox{ margin-left: 15px; } } .boxR{ .txtBox{ margin-right: 15px; } } } } } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .contents_bg_06{ background: url("../img/bg_con_06.jpg") no-repeat center / cover; .contents_06{ padding: 115px 0 150px 0; .ttlBox{ margin-bottom: 40px; .fukidashi{ top: -175px; transform: translate(-50%, 0); } } .qaWrapper{ dl{ background: #FFF; border-top: 1px solid #000; letter-spacing: 0.025em; &:last-child{ border-bottom: 1px solid #000; } dt{ padding: 30px 60px 30px 90px; position: relative; font-size: 16px; background: url("../img/icon_q_con_06.svg") no-repeat left 30px center / 36px 41px; cursor: pointer; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; >span{ width: 20px; height: 20px; display: block; position: absolute; right: 20px; 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; top: 50%; right: 50%; transform: translate(50%, -50%); } &:after{ transform: translate(50%, -50%) rotate(90deg); transition: 0.3s; } } } } dd{ display: none; padding: 25px 60px 25px 90px; background: url("../img/icon_a_con_06.svg") no-repeat left 35px center / 32px 36px , url("../img/dot_01.png") repeat-x center top / 10px; } &.active{ dt{ >span{ >span{ &:after{ transform: translate(50%, -50%) rotate(0deg); } } } } } } } } } @media screen and (max-width: 768px) { .contents_bg_06{ .contents_06{ padding: 70px 5%; .ttlBox{ margin-bottom: 50px; .fukidashi{ max-width: 100px; top: -90px; transform: translate(-40%, 0); } h2 img{ max-width: 170px; } } .qaWrapper{ dl{ dt{ padding: 30px 50px 30px 60px; background: url("../img/icon_q_con_06.svg") no-repeat left 10px center / 36px 41px; } dd{ display: none; padding: 25px 10px 25px 60px; background: url("../img/icon_a_con_06.svg") no-repeat left 14px center / 32px 36px , url("../img/dot_01.png") repeat-x center top / 10px; } } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ position: fixed; right: 10px; bottom: 10px; display: none; z-index: 200; } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop{ right: 0; bottom: 34px; img{ width: 40px; } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 20px 5%; background: #a00118; } footer *{ color: #FFF; font-size: 13px; font-weight: 400; } footer .innerBox{ max-width: 100%; } footer #links{ float: right; } footer #links a{ display: inline-block; } footer #links a:hover{ text-decoration: underline; } footer #copy{ float: left; } footer #copy small{ } @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%; float: inherit; text-align: center; font-size: 12px; a{ display: inline-block; } } footer #copy{ float: inherit; small{ font-size: 12px; } } }