@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; } em.red{ color: #d4145a; } 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{ color: #000; font-family: 'Noto Sans JP', sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; } 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: 390px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -200px; 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{ width: 100%; } } /*------------------------------------------ body ------------------------------------------*/ body{ } @media screen and (max-width: 768px) { } #wrapper{ position: relative; } .en{ font-family: 'Oswald', sans-serif; } /*------------------------------------------ header nav ------------------------------------------*/ /*PC*/ @media screen and (min-width: 769px) { header{ width: 100%; background: #FFF; position: fixed; top: 0; z-index: 1000; .logoBox{ padding: 20px 0 20px 30px; float: left; } nav{ float: right; li{ padding: 10px 55px; float: left; text-align: center; a{ color: #000; font-size: 12px; font-weight: 700; display: block; span{ margin-bottom: 3px; display: block; font-size: 18px; font-weight: 400; } &:hover{ opacity: 0.6; } } } } } } /*SP*/ @media screen and (max-width: 1080px) { header{ width: 100%; padding: 0; position: fixed; z-index: 100; background: #FFF; top: 0; box-shadow: 0 0 5px rgba(0,0,0,0.2); .btnList{ display: block; width: 100%; right: inherit; top: inherit; ul{ position: inherit; } li{ float: inherit; margin-right: 5px; &:last-child{ margin-right: 0; } a{ width: inherit; height: inherit; background: none; color: #000; text-decoration: none; font-size: 12px; font-weight: bold; display: block; span{ display: inherit; text-align: center; vertical-align: inherit; } } } } } nav .navInner{ width: 100%; margin: 0 auto; } nav .menuBtn{ width: 30px; float: inherit; position: fixed; right: 5%; top: 16px; } nav .menuBtn img.close{ display: none; } nav .menuBtn.active img.open{ display: none; } nav .menuBtn.active img.close{ display: inline-block; } nav .navInner{ width: 100%; padding: 30px 0 0 0; display: none; background: rgba(255,255,255,0.9); position: absolute; left: 0; top: 60px; z-index: 10; } nav .navInner ul li{ height: inherit; float: inherit; margin: 0 0 30px 0; text-align: center; display: block; } nav .navInner ul li img{ width: 100px; } nav .navInner ul li span{ display: block; } nav .navInner ul li:last-child{ margin-right: 0; } nav .navInner ul li a{ text-decoration: none; font-size: 20px; font-weight: bold; color: #000; display: block; } nav .navInner ul li a:hover{ text-decoration: underline; } .navInner > a{ width: 100%; height: 72px; padding: 10px 0 0 0; background: #22bab4; float: right; text-align: center; color: #FFF; text-decoration: none; font-size: 14px; &:hover{ opacity: 0.6; } span{ display: block; padding-top: 5px; } } header .logoBox{ padding: 22px 4%; float: left; line-height: 1; } header .logoBox a{ vertical-align: top; } header .logoBox img{ width: 100px; position: relative; z-index: 2; } } /*------------------------------------------ mv ------------------------------------------*/ .mvWrapper{ } #mv{ padding-top: 70px; } @media screen and (max-width: 768px) { #mv{ padding-top: 60px; } } /*------------------------------------------ pageNavi ------------------------------------------*/ .recruitWrap .pageNavi{ max-width: 980px; margin: 0 auto -86px auto; background: #e41f1f; position: relative; top: -43px; ul{ padding: 10px; li{ width: 20%; padding: 20px 0; float: left; text-align: center; &:not(:last-child){ border-right: 1px solid #FFF; } a{ display: block; color: #FFF; font-size: 18px; &:hover{ opacity: 0.6; } } } } } @media screen and (max-width: 768px) { .recruitWrap .pageNavi{ max-width: 980px; margin: 0 auto 0 auto; background: #e41f1f; position: relative; top: 0; ul{ padding: 0; li{ width: 50%; padding: 15px 0; float: left; text-align: center; &:not(:last-child){ border-right: none; border-bottom: 1px solid #FFF; } &:nth-child(odd){ border-right: 1px solid #FFF; } &:last-child{ width: 100%; border-right: none; } a{ font-size: 16px; } } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .recruitWrap .ttlBox{ margin-bottom: 65px; text-align: center; .en{ display: block; font-size: 54px; font-weight: 400; } .jp{ font-size: 18px; font-weight: bold; color: #e41f1f; } } @media screen and (max-width: 768px) { .recruitWrap .ttlBox{ margin-bottom: 65px; text-align: center; .en{ display: block; font-size: 40px; font-weight: 400; } .jp{ font-size: 12px; font-weight: bold; color: #e41f1f; } } } /*------------------------------------------ #contents_01 ------------------------------------------*/ .recruitWrap .contents_bg_01{ padding: 110px 0 80px 0; background: #f9f5f1; } .recruitWrap .contents_01{ .innerBox{ max-width: 980px; padding: 80px 0 0 0; margin: 0 auto; border: 1px solid #000; background: #FFF; } .mapBox{ padding-bottom: 40px; .box_map{ border: none; padding-top: 0; } .box_map form{ background: none; } .box_map input[type="text"]{ margin-right: 0; border: 1px solid #000; border-radius: 0; height: 64px; font-size: 18px; } .box_map label{ font-size: 18px; font-weight: 700; } .box_map button[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; padding: 0; width: 134px; height: 64px; border-radius: 0; &:hover{ opacity: 0.6; } } .box_map button[type="submit"] img{ width: 100%; } } .btnList{ max-width: 920px; margin: 0 auto; li{ float: left; margin: 0 2% 2% 0; a{ width: 100%; display: table; background: #000; color: #FFF; span{ padding: 0 25px; display: table-cell; position: relative; text-align: center; vertical-align: middle; font-size: 22px; &:after{ content: ">"; position: absolute; right: 10px; top: 50%; -ms-transform: translate(0, -50%) scaleX(0.5); -webkit-transform: translate(0, -50%) scaleX(0.5); -moz-transform: translate(0, -50%) scaleX(0.5); transform: translate(0, -50%) scaleX(0.5); } } &:hover{ opacity: 0.6; } } } &.big{ margin-bottom: 70px; li{ width: 32%; &:nth-child(3n){ margin-right: 0; } a{ height: 140px; span{ letter-spacing: 0.1em; } } } } &.small{ margin-bottom: 30px; li{ width: 23.5%; &:nth-child(4n){ margin-right: 0; } a{ height: 110px; } } } } } @media screen and (max-width: 768px) { .recruitWrap .contents_bg_01{ padding: 40px 0; background: #f9f5f1; } .recruitWrap .contents_01{ .innerBox{ max-width: 980px; padding: 40px 0 0 0; margin: 0 auto; border: 1px solid #000; background: #FFF; } .mapBox{ padding-bottom: 40px; .box_map{ border: none; padding-top: 0; } .box_map form{ background: none; } .box_map input[type="text"]{ margin-right: 0; border: 1px solid #000; border-radius: 0; height: 64px; font-size: 18px; } .box_map label{ font-size: 18px; font-weight: 700; } .box_map button[type="submit"]{ background: #000; border: none; cursor: pointer; outline: none; padding: 0; margin-right: 0; appearance: none; padding: 0; width: 100%; height: 64px; border-radius: 0; } .box_map button[type="submit"] img{ width: 132px; } .box_map form{ margin-top: 20px; } } .btnList{ max-width: 920px; margin: 0 auto; li{ float: left; margin: 0 2% 2% 0; a{ width: 100%; display: table; background: #000; color: #FFF; span{ padding: 0 25px; display: table-cell; position: relative; text-align: center; vertical-align: middle; font-size: 22px; &:after{ content: ">"; position: absolute; right: 10px; top: 50%; -ms-transform: translate(0, -50%) scaleX(0.5); -webkit-transform: translate(0, -50%) scaleX(0.5); -moz-transform: translate(0, -50%) scaleX(0.5); transform: translate(0, -50%) scaleX(0.5); } } &:hover{ opacity: 0.6; } } } &.big{ margin-bottom: 70px; padding: 0 5%; li{ width: 100%; margin-left: 0 !important; a{ height: 70px; span{ letter-spacing: 0.1em; } } } } &.small{ padding: 0 5%; margin-bottom: 30px; li{ width: 100%; margin-right: 0 !important; a{ height: 70px; } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .recruitWrap .contents_bg_04{ } .recruitWrap .contents_04{ padding: 160px 0 80px 0; .innerBox{ max-width: 980px; margin: 0 auto; .interviewBox{ position: relative; .txtBox{ max-width: 580px; padding: 40px 20px 20px 30px; background: #e41f1f; color: #FFF; position: absolute; .txt_01{ margin-bottom: 35px; font-size: 28px; font-weight: 700; } .txt_02{ margin-bottom: 90px; font-size: 18px; } .txt_03{ text-align: right; a{ color: #FFF; font-weight: 700; font-size: 24px; &:after{ content: " >"; font-family: 'Noto Sans JP', sans-serif; display: inline-block; -ms-transform: scaleX(0.5); -webkit-transform: scaleX(0.5); -moz-transform: scaleX(0.5); transform: scaleX(0.5); } &:hover{ opacity: 0.6; } } } } &.box_01{ margin-bottom: 45px; .imgBox{ float: right; } .txtBox{ position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } &.box_02{ margin-bottom: 95px; .imgBox{ float: left; } .txtBox{ position: absolute; right: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } } } } .modalContents{ display: none; } .modaal-overlay{ z-index: 9999; } .modaal-wrapper{ z-index: 10000; } .modaal-container{ max-width: 980px; border: 6px solid #e41f1f; } .modaal-content-container{ padding: 0; } .modalBox{ h3{ padding: 50px 50px 35px 50px; font-size: 43px; font-weight: 700; } .name{ padding-left: 50px; margin-bottom: 30px; font-size: 21px; font-weight: 700; } .boxLR{ background: url("../img/modal_bg.png") no-repeat center top / 100% 144px #e41f1f; .boxL{ max-width: 500px; padding: 150px 0 0 50px; float: left; dl{ margin-bottom: 50px; color: #FFF; dt{ padding: 10px 0 10px 60px; margin-bottom: 20px; font-size: 18px; font-weight: 700; position: relative; &:before{ content: "Q"; font-size: 38px; font-weight: 400; font-family: 'Oswald', sans-serif; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } dd{ padding: 30px 0 0 60px; font-size: 16px; border-top: 1px solid #FFF; } } } .boxR{ float: right; } } } @media screen and (max-width: 768px) { .recruitWrap .contents_04{ padding: 40px 0; .innerBox{ max-width: 980px; margin: 0 auto; .interviewBox{ position: relative; .txtBox{ max-width: 580px; padding: 40px 20px 20px 20px; background: #e41f1f; color: #FFF; position: inherit; .txt_01{ margin-bottom: 35px; font-size: 20px; font-weight: 700; } .txt_02{ margin-bottom: 40px; font-size: 16px; } .txt_03{ text-align: right; a{ color: #FFF; font-weight: 700; font-size: 18px; &:after{ content: " >"; font-family: 'Noto Sans JP', sans-serif; display: inline-block; -ms-transform: scaleX(0.5); -webkit-transform: scaleX(0.5); -moz-transform: scaleX(0.5); transform: scaleX(0.5); } &:hover{ opacity: 0.6; } } } } &.box_01{ margin-bottom: 45px; .imgBox{ float: inherit; } .txtBox{ position: inherit; left: inherit; top: inherit; -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); transform: translate(0,0); } } &.box_02{ margin-bottom: 95px; .imgBox{ float: inherit; } .txtBox{ position: inherit; right: inherit; top: inherit; -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); transform: translate(0,0); } } } } } .modalContents{ display: none; } .modaal-overlay{ z-index: 9999; } .modaal-wrapper{ z-index: 10000; } .modaal-container{ max-width: 980px; border: 6px solid #e41f1f; } .modaal-content-container{ padding: 0; } .modalBox{ h3{ padding: 20px 20px 35px 20px; font-size: 20px; font-weight: 700; } .name{ padding-left: 20px; margin-bottom: 30px; font-size: 14px; font-weight: 700; } .boxLR{ padding-top: 40px; padding-bottom: 1px; background: url("../img/modal_bg.png") no-repeat center top / 100% 30px #e41f1f; .boxL{ max-width: 500px; padding: 40px 0 0 0; float: inherit; dl{ margin-bottom: 40px; color: #FFF; dt{ padding: 10px 0 10px 30px; margin-bottom: 10px; font-size: 18px; font-weight: 700; position: relative; &:before{ content: "Q"; font-size: 30px; font-weight: 400; font-family: 'Oswald', sans-serif; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } dd{ padding: 20px 0 0 30px; font-size: 16px; border-top: 1px solid #FFF; } } } .boxR{ float: inherit; } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .recruitWrap .contents_bg_05{ } .recruitWrap .contents_05{ >.innerBox{ max-width: 980px; margin: 0 auto; ul{ margin-bottom: 80px; li{ margin-bottom: 30px; &:last-child{ margin-bottom: 0; } dl{ padding: 70px 0 70px 0; border-top: 1px solid #000; &:last-child{ border-bottom: 1px solid #000; } dt{ padding: 10px 100px 10px 110px; position: relative; background: url("../img/icon_open.png") no-repeat right center / 36px; font-size: 16px; font-weight: bold; cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; &.active{ background: url("../img/icon_close.png") no-repeat right center / 36px; } &:hover{ opacity: 0.6; } &:before{ content: "Q"; width: 72px; height: 72px; padding-top: 6px; font-size: 38px; font-family: 'Oswald', sans-serif; font-weight: 400; color: #FFF; text-align: center; background: #000; border-radius: 100px; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } dd{ display: none; padding: 10px 0 10px 110px; margin-top: 60px; position: relative; font-size: 16px; color: #e41f1f; &:before{ content: "A"; width: 72px; height: 72px; padding-top: 6px; font-size: 38px; font-family: 'Oswald', sans-serif; font-weight: 400; color: #FFF; text-align: center; background: #e41f1f; border-radius: 100px; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } } } } } .bottomLink{ .innerBox{ max-width: 1090px; height: 420px; margin: 0 auto; background: url("../img/img_foot.jpg") no-repeat left bottom / 560px; .boxR{ padding: 80px 0 30px 50px; float: right; background: rgba(255,255,255,0.8); .imgBox{ margin-bottom: 40px; } .btnBox{ a{ display: table; width: 420px; height: 90px; background: #e41f1f; color: #FFF; &:hover{ opacity: 0.6; } span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 24px; letter-spacing: 0.1em; position: relative; &:after{ content: " >"; position: absolute; right: 20px; top: 50%; display: inline-block; -ms-transform: translate(0, -50%) scaleX(0.5); -webkit-transform: translate(0, -50%) scaleX(0.5); -moz-transform: translate(0, -50%) scaleX(0.5); transform: translate(0, -50%) scaleX(0.5); } } } } } } } } @media screen and (max-width: 768px) { .recruitWrap .contents_05{ >.innerBox{ max-width: 980px; margin: 0 auto; ul{ margin-bottom: 40px; li{ margin-bottom: 30px; &:last-child{ margin-bottom: 0; } dl{ padding: 50px 5% 50px 5%; border-top: 1px solid #000; &:last-child{ border-bottom: 1px solid #000; } dt{ padding: 10px 30px 10px 70px; position: relative; background: url("../img/icon_open.png") no-repeat right center / 20px; font-size: 16px; font-weight: bold; cursor: pointer; &.active{ background: url("../img/icon_close.png") no-repeat right center / 20px; } &:before{ content: "Q"; width: 50px; height: 50px; padding-top: 2px; font-size: 30px; font-family: 'Oswald', sans-serif; font-weight: 400; color: #FFF; text-align: center; background: #000; border-radius: 100px; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } dd{ display: none; padding: 10px 0 10px 70px; margin-top: 30px; position: relative; font-size: 16px; color: #e41f1f; &:before{ content: "A"; width: 50px; height: 50px; padding-top: 2px; font-size: 30px; font-family: 'Oswald', sans-serif; font-weight: 400; color: #FFF; text-align: center; background: #e41f1f; border-radius: 100px; display: block; position: absolute; left: 0; top: 50%; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } } } } } } .bottomLink{ .innerBox{ max-width: 1090px; height: auto; margin: 0 auto; background: url("../img/img_foot.jpg") no-repeat center bottom / 560px; .boxR{ padding: 20px 5% 50px 5%; float: inherit; background: rgba(255,255,255,0.6); .imgBox{ margin-bottom: 240px; text-align: center; img{ width: 80%; max-width: 280px; } } .btnBox{ a{ display: table; max-width: 420px; width: 100%; height: 90px; background: #e41f1f; color: #FFF; &:hover{ opacity: 0.8; } span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 24px; letter-spacing: 0.1em; position: relative; &:after{ content: " >"; position: absolute; right: 20px; top: 50%; display: inline-block; -ms-transform: translate(0, -50%) scaleX(0.5); -webkit-transform: translate(0, -50%) scaleX(0.5); -moz-transform: translate(0, -50%) scaleX(0.5); transform: translate(0, -50%) scaleX(0.5); } } } } } } } } } /*------------------------------------------ #corp cmn ------------------------------------------*/ .corpWrap .ttlBox{ .en{ display: block; font-size: 54px; font-weight: 400; } .jp{ font-size: 18px; font-weight: bold; } } @media screen and (max-width: 768px) { .corpWrap .ttlBox{ text-align: center; .en{ font-size: 40px; } .jp{ font-size: 12px; } } } /*------------------------------------------ #corp contents_01 ------------------------------------------*/ .corpWrap .contents_bg_01{ max-width: 1520px; margin: 40px auto 0 auto; background: url("../img/corp/bg_message.jpg") no-repeat center top / cover; } .corpWrap .contents_01{ padding: 70px 0 60px 0; .boxLR{ max-width: 980px; margin: 0 auto; color: #FFF; .boxL{ width: 23%; float: left; } .boxR{ width: 72%; float: right; p{ font-weight: bold; font-size: 16px; line-height: 2em; } .hidden{ padding: 50px 0 0 0; display: none; } .btnBox{ padding-top: 30px; a{ display: block; max-width: 600px; padding: 15px 0; text-align: center; font-family: 'Oswald', sans-serif; font-size: 24px; background: #000; cursor: pointer; &:before{ content: ">"; display: inline-block; padding: 0 10px; font-size: 24px; position: relative; -ms-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); transform: translate(0, 0) scaleY(0.5) rotate(-270deg); } &:hover{ opacity: 0.6; } .close{ display: none; } .more{ display: inline; } &.active{ .close{ display: inline; } .more{ display: none; } &:before{ -ms-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); transform: translate(0, 0) scaleY(0.5) rotate(-90deg); } } } } } } } @media screen and (max-width: 768px) { .corpWrap .contents_bg_01{ max-width: 1520px; margin: 0 auto 0 auto; padding: 0 5%; background: url("../img/corp/bg_message.jpg") no-repeat center top / cover; } .corpWrap .contents_01{ padding: 40px 0 40px 0; .ttlBox{ margin-bottom: 40px; } .boxLR{ max-width: 980px; margin: 0 auto; color: #FFF; .boxL{ width: 100%; float: inherit; } .boxR{ width: 100%; float: inherit; p{ font-weight: bold; font-size: 16px; line-height: 2em; } .hidden{ padding: 50px 0 0 0; display: none; } .btnBox{ padding-top: 30px; a{ display: block; max-width: 600px; padding: 15px 0; text-align: center; font-family: 'Oswald', sans-serif; font-size: 24px; background: #000; cursor: pointer; &:before{ content: ">"; display: inline-block; padding: 0 10px; font-size: 24px; position: relative; -ms-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); transform: translate(0, 0) scaleY(0.5) rotate(-270deg); } .close{ display: none; } .more{ display: inline; } &.active{ .close{ display: inline; } .more{ display: none; } &:before{ -ms-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); transform: translate(0, 0) scaleY(0.5) rotate(-90deg); } } } } } } } } /*------------------------------------------ #corp contents_02 ------------------------------------------*/ .corpWrap .contents_bg_02{ background: url("../img/corp/bg_service_01.jpg") no-repeat center top / 100% auto; } .corpWrap .contents_02{ .innerBox.top{ max-width: 980px; margin: 0 auto; padding: 55px 0 0 0; } .innerBox.bottom{ max-width: 980px; margin: 0 auto; } .topBox{ border: 1px solid #000; .boxLR{ padding: 60px 40px 40px 40px; .boxR{ width: 42%; float: right; h2{ margin-bottom: 40px; } p{ font-size: 14px; } } .boxL{ width: 54%; float: left; } } } .bgWrap{ padding-bottom: 60px; } .bgWrap.active{ background: url("../img/corp/bg_service_02.png") no-repeat right bottom / 1069px; } ul{ padding: 50px 0 0 0; border: 1px solid #000; border-top: none; display: none; li{ p{ font-size: 14px; line-height: 1.7; } .boxLR > div{ width: 50%; } .txtBox{ padding: 20px 20px 0 40px; h3{ margin-bottom: 10px; font-size: 24px; font-weight: bold; span{ position: relative; left: 20px; top: -10px; } } } &:nth-child(odd){ .txtBox{ float: right; } .imgBox{ float: left; } } &:nth-child(even){ .txtBox{ float: left; } .imgBox{ float: right; } } } } .btnBox{ max-width: 980px; padding: 30px 20px; margin: 0 auto; border: 1px solid #000; border-top: none; a{ display: block; max-width: 600px; padding: 15px 0; margin: 0 auto; text-align: center; font-family: 'Oswald', sans-serif; font-size: 24px; background: #000; color: #FFF; cursor: pointer; &:before{ content: ">"; display: inline-block; padding: 0 10px; font-size: 24px; position: relative; -ms-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); transform: translate(0, 0) scaleY(0.5) rotate(-270deg); } &:hover{ opacity: 0.6; } .close{ display: none; } .more{ display: inline; } &.active{ .close{ display: inline; } .more{ display: none; } &:before{ -ms-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); transform: translate(0, 0) scaleY(0.5) rotate(-90deg); } } } } } @media screen and (max-width: 768px) { .corpWrap .contents_bg_02{ background: url("../img/corp/bg_service_01.jpg") no-repeat center top / 100% auto; } .corpWrap .contents_02{ padding: 0; .innerBox.top{ max-width: 980px; margin: 0 auto; padding: 40px 0 0 0; } .innerBox.bottom{ max-width: 980px; margin: 0 auto; } .topBox{ border: 1px solid #000; .boxLR{ padding: 5%; .boxR{ width: 100%; float: inherit; h2{ margin-bottom: 40px; } p{ font-size: 14px; } } .boxL{ width: 100%; float: inherit; } } } .bgWrap{ padding: 0 5% 60px 5%; } .bgWrap.active{ background: url("../img/corp/bg_service_02.png") no-repeat right bottom / 1069px; } ul{ padding: 50px 0 0 0; border: 1px solid #000; border-top: none; display: none; li{ padding-bottom: 50px; p{ font-size: 14px; line-height: 1.7; } .boxLR > div{ width: 100%; } .txtBox{ padding: 20px 5% 20px 5%; h3{ margin-bottom: 10px; font-size: 20px; font-weight: bold; text-align: center; span{ position: relative; left: inherit; top: 10px; display: block; text-align: center; img{ height: 60px; width: auto; } } } } &:nth-child(odd){ .txtBox{ float: inherit; } .imgBox{ float: inherit; } } &:nth-child(even){ .txtBox{ float: inherit; } .imgBox{ float: inherit; } } } } .btnBox{ max-width: 980px; padding: 30px 20px; margin: 0 auto; border: 1px solid #000; border-top: none; a{ display: block; max-width: 600px; padding: 15px 0; margin: 0 auto; text-align: center; font-family: 'Oswald', sans-serif; font-size: 24px; background: #000; color: #FFF; cursor: pointer; &:before{ content: ">"; display: inline-block; padding: 0 10px; font-size: 24px; position: relative; -ms-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-270deg); transform: translate(0, 0) scaleY(0.5) rotate(-270deg); } .close{ display: none; } .more{ display: inline; } &.active{ .close{ display: inline; } .more{ display: none; } &:before{ -ms-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -webkit-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); -moz-transform: translate(0, 0) scaleY(0.5) rotate(-90deg); transform: translate(0, 0) scaleY(0.5) rotate(-90deg); } } } } } } /*------------------------------------------ #corp contents_03 ------------------------------------------*/ .corpWrap .contents_bg_03{ background: #000; } .corpWrap .contents_03{ padding: 85px 0; .ttlBox{ margin-bottom: 60px; color: #FFF; text-align: center; } .innerBox{ max-width: 980px; margin: 0 auto; } .boxLR{ position: relative; .boxR{ width: 605px; float: right; /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 605px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -200px; left: 0; width: 100%; height: 1200px; } .ggmapWrapper iframe{ height: 1000px; } } .boxL{ width: 435px; padding: 35px 20px; position: absolute; left: 0; top: 50%; z-index: 100; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); background: #e41f1f; dl{ margin-bottom: 10px; font-size: 14px; font-weight: 700; color: #FFF; &:last-child{ margin-bottom: 0; } dt{ width: 120px; float: left; } dd{ padding-left: 120px; } a{ color: #FFF; &:hover{ text-decoration: underline; } } } } } } @media screen and (max-width: 768px) { .corpWrap .contents_bg_03{ background: #000; } .corpWrap .contents_03{ padding: 40px 0; .ttlBox{ margin-bottom: 60px; color: #FFF; text-align: center; } .innerBox{ max-width: 980px; margin: 0 auto; } .boxLR{ position: relative; .boxR{ width: 100%; float: inherit; /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 290px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -250px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } } .boxL{ width: 100%; padding: 5%; position: inherit; left: inherit; top: inherit; z-index: 1; -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); background: #e41f1f; dl{ margin-bottom: 20px; font-size: 14px; font-weight: 700; color: #FFF; &:last-child{ margin-bottom: 0; } dt{ width: 100%; margin-bottom: 5px; float: inherit; } dd{ padding-left: 0; font-weight: 400; } a{ color: #FFF; &:hover{ text-decoration: underline; } span{ img{ width: 17px; } } } } } } } } /*------------------------------------------ #corp contents_04 ------------------------------------------*/ .corpWrap .contents_bg_04{ background: url("../img/corp/bg_access.jpg") no-repeat center bottom / cover; } .corpWrap .contents_04{ padding: 85px 0; .ttlBox{ margin-bottom: 30px; color: #FFF; text-align: center; } .innerBox{ max-width: 980px; margin: 0 auto; } .tab-group{ li{ width: 32.6666%; height: 80px; padding: 25px 0 0 0; text-align: center; font-size: 18px; font-weight: 700; float: left; margin: 0 1% 1% 0; background: #FFF; cursor: pointer; &:nth-child(3n){ margin-right: 0; } &:hover{ background: #e41f1f; color: #FFF; } } } .panel{ display:none; } .tab.is-active{ background:#e41f1f; color:#FFF; transition: all 0.2s ease-out; } .panel.is-show{ display:block; } .boxLR{ padding: 60px; background: #FFF; .boxL{ width: 37.2%; float: left; line-height: 2; p{ margin-bottom: 10px; } .lp{ padding-left: 50px; margin-bottom: 0; } } .boxR{ width: 60%; float: right; /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 290px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -250px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } } } } @media screen and (max-width: 768px) { .corpWrap .contents_bg_04{ background: url("../img/corp/bg_access.jpg") no-repeat center bottom / cover; } .corpWrap .contents_04{ padding: 40px 0; .ttlBox{ margin-bottom: 30px; color: #FFF; text-align: center; } .innerBox{ max-width: 980px; margin: 0 auto; } .tab-group{ li{ width: 32.6666%; height: 80px; padding: 27px 0 0 0; text-align: center; font-size: 15px; font-weight: 700; float: left; margin: 0 1% 1% 0; background: #FFF; cursor: pointer; &:nth-child(3n){ margin-right: 0; } } } .panel{ display:none; } .tab.is-active{ background:#e41f1f; color:#FFF; transition: all 0.2s ease-out; } .panel.is-show{ display:block; } .boxLR{ padding: 5%; background: #FFF; .boxL{ width: 100%; float: inherit; line-height: 2; margin-bottom: 20px; p{ margin-bottom: 10px; } .lp{ padding-left: 30px; margin-bottom: 0; } } .boxR{ width: 100%; float: inherit; /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 290px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -250px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ position: fixed; right: 0; bottom: 0; display: none; z-index: 100; } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop img{ width: 80px; } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 110px 0 45px 0; background: #000; color: #FFF; text-align: center; } .corpWrap footer{ padding: 0 0 45px 0; background: none; } footer .innerBox{ max-width: 980px; margin: 0 auto; } footer a{ color: #FFF; &:hover{ text-decoration: underline; } } footer #links{ margin-bottom: 45px; font-size: 18px; } footer #copy{ margin-bottom: 45px; font-size: 14px; } footer #privacy{ font-size: 12px; font-weight: 700; } @media screen and (max-width: 768px) { footer{ padding: 45px 5% 45px 5%; background: #000; color: #FFF; text-align: center; } footer .innerBox{ max-width: 980px; margin: 0 auto; } footer a{ color: #FFF; &:hover{ text-decoration: underline; } } footer #links{ margin-bottom: 45px; font-size: 18px; } footer #copy{ margin-bottom: 45px; font-size: 14px; } footer #privacy{ font-size: 12px; font-weight: 700; } }