@charset "UTF-8"; @import url("fontawesome.min.css"); @import url("animate.css"); @import url("jquery.mmenu.all.css") screen and (max-width: 767px); @import url("https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"); @import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700|Roboto+Condensed:400,400i,700,700i|Roboto:400,500,700&display=swap"); /* line 91, ../scss/_module.scss */ #page-top { overflow: hidden; text-indent: 100%; white-space: nowrap; } /* reset ----------------------------------------------------------------------------------*/ /* line 97, ../scss/_module.scss */ html, body, #wrapper { width: 100%; max-height: 100%; } /* line 98, ../scss/_module.scss */ body { -webkit-text-size-adjust: 100%; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; line-height: 1; word-break: break-all; font-display: swap; font-weight: 400; color: #000; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; letter-spacing: 0.05em; font-feature-settings: "pkna" 1; } /* line 100, ../scss/_module.scss */ ul, ol { font-size: 0; } /* line 101, ../scss/_module.scss */ ul li, ol li { display: inline-block; vertical-align: top; font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; } /* line 102, ../scss/_module.scss */ p, p a, div, ul, ol, li, li a, dl, dt, dt a, dd, dd a, section, span, em, i, strong, b { box-sizing: border-box; } /* line 103, ../scss/_module.scss */ i { font-style: normal; } /* line 106, ../scss/_module.scss */ h1, h2, h3, h4, h5, h6, strong, b { font-size: 100%; /*font-weight: normal;*/ } /* line 107, ../scss/_module.scss */ h1, h2, h3, h4, h5, h6, p, span, em, b, i, dl, dt, dd, ol, ul, li, tr, th, td { margin: 0; padding: 0; border: none; vertical-align: baseline; background: transparent; } /* line 108, ../scss/_module.scss */ div, object, iframe, blockquote, pre, abbr, address, cite, code, del, dfn, img, ins, kbd, q, samp, small, sub, sup, var, fieldset, label, legend, table, caption, tbody, tfoot, thead, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: none; font-size: 100%; /*font-weight: normal;*/ vertical-align: baseline; background: transparent; } /* line 110, ../scss/_module.scss */ img { width: 100%; height: auto; vertical-align: top; line-height: 0; -webkit-backface-visibility: hidden; } /* line 111, ../scss/_module.scss */ article, aside, details, figcaption, figure, footer, header, menu, nav, section, div, address, iframe, canvas, hr, textarea, a { display: block; /* line-height: 1;*/ } /* line 112, ../scss/_module.scss */ a, label { cursor: pointer; } /* line 113, ../scss/_module.scss */ blockquote { padding: 0; margin: 0; display: block; } /* line 114, ../scss/_module.scss */ address, em { font-style: normal; } /* line 115, ../scss/_module.scss */ hr { border: 0; margin: 0; padding: 0; } /* line 116, ../scss/_module.scss */ ul, ol, li { list-style: none; } /* line 117, ../scss/_module.scss */ table { border-collapse: collapse; } /*Android、Xperiaで途中改行されるバグfix*/ /*p { background-image:url(1px-transparent.gif);}*/ /* line 123, ../scss/_module.scss */ .flexImg { overflow: hidden; position: relative; } /* line 124, ../scss/_module.scss */ .flexImg img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* ------------------------------- PCのみの設定 ------------------------------- */ @media print, screen and (min-width: 768px) { /* line 131, ../scss/_module.scss */ .sp, .spOnly, .tbOnly { display: none !important; } /* line 132, ../scss/_module.scss */ .pc, .pc-tb { display: inline-block !important; vertical-align: top !important; } /* line 133, ../scss/_module.scss */ .pc-sp { display: inline-block !important; vertical-align: top !important; } /* スマホのみtellink有効（init.jsにも要設定） */ /* line 135, ../scss/_module.scss */ a[href^="tel:"] { cursor: default; } } /* ------------------------------- タブレットのみの設定 ------------------------------- */ @media screen and (min-width: 600px) and (max-width: 959px) { /* line 143, ../scss/_module.scss */ .pc, .spOnly { display: none !important; margin: 0; padding: 0; width: 0; height: 0; } /* line 144, ../scss/_module.scss */ .sp, .tbOnly, .pc-tb { display: inline-block !important; vertical-align: top !important; } /* line 145, ../scss/_module.scss */ .pc-sp { display: none !important; margin: 0; padding: 0; width: 0; height: 0; } } /* ------------------------------- スマホのみの設定 ------------------------------- */ @media only screen and (max-width: 767px) { /* line 153, ../scss/_module.scss */ .pc, .tbOnly, .pc-tb { display: none !important; margin: 0; padding: 0; width: 0; height: 0; } /* line 154, ../scss/_module.scss */ .sp, .spOnly { display: inline-block !important; vertical-align: top !important; } /* line 155, ../scss/_module.scss */ .pc-sp { display: inline-block !important; vertical-align: top !important; } } /* -------------------------------------------------------- layout -------------------------------------------------------- */ /* wrapper系 ----------------------------------------------------------------------------------*/ /* line 9, ../scss/_layout.scss */ #wrapper { text-align: center; background: #fff; overflow: hidden; transition: 0.5s; } /* line 10, ../scss/_layout.scss */ main { padding: 100px 0 200px; } /* line 11, ../scss/_layout.scss */ .inner { width: 1024px; margin: auto; } /* header ----------------------------------------------------------------------------------*/ /* line 17, ../scss/_layout.scss */ header { width: 100%; position: fixed; background: rgba(255, 255, 255, 0.95); z-index: 1000; transition: 1.5s; } /* line 18, ../scss/_layout.scss */ header #header { width: 96%; max-width: 1600px; min-width: 1024px; height: 100px; margin: auto; display: flex; justify-content: space-between; align-items: center; transition: 0.5s; } /* line 19, ../scss/_layout.scss */ header #header h1, header #header #h1 { width: 226px; } /* line 21, ../scss/_layout.scss */ header.fixed { background: rgba(255, 255, 255, 0); } /* line 22, ../scss/_layout.scss */ header.fixed #header { height: 60px; } /* line 25, ../scss/_layout.scss */ #home header.fixed { background: rgba(255, 255, 255, 0.9); } /* grobalNav ----------------------------------------------------------------------------------*/ /* line 29, ../scss/_layout.scss */ nav#grobalNav { position: relative; width: 100%; } /* line 30, ../scss/_layout.scss */ nav#grobalNav ul { display: flex; justify-content: space-between; align-items: center; } /* line 31, ../scss/_layout.scss */ nav#grobalNav ul li { font-family: "Roboto Condensed"; font-weight: 700; font-size: 24px; font-size: 1.5rem; line-height: 1.5rem; letter-spacing: 0; } /* line 32, ../scss/_layout.scss */ nav#grobalNav ul li a { color: #000; display: flex; justify-content: space-between; padding: 10px 20px; position: relative; } /* line 33, ../scss/_layout.scss */ nav#grobalNav ul li a:after { content: ""; width: 0%; height: 2px; background: #ff6699; position: absolute; top: 100%; left: 0; right: 0; margin: auto; transition: 0.25s; } /* line 34, ../scss/_layout.scss */ nav#grobalNav ul li a:hover:after { width: calc(100% - 40px); } /* line 35, ../scss/_layout.scss */ nav#grobalNav ul li a:hover { /*opacity: 0.5;*/ } /* ドロワーメニュー */ /* line 42, ../scss/_layout.scss */ .drawer-hamburger { width: 30px !important; padding: 8px 8px 18px !important; } /* line 43, ../scss/_layout.scss */ .drawer-toggle { z-index: 100; } /* line 45, ../scss/_layout.scss */ .drawer-toggle .drawer-hamburger-icon:before, .drawer-toggle .drawer-hamburger-icon::after { background-color: #000; transition: .6s !important; } /* line 47, ../scss/_layout.scss */ .drawer-toggle .drawer-hamburger-icon::after { top: 9px !important; } /* line 48, ../scss/_layout.scss */ .drawer-toggle .drawer-hamburger-icon::before { top: -9px !important; } /* line 51, ../scss/_layout.scss */ .drawer-open { overflow: auto !important; } /* line 52, ../scss/_layout.scss */ .drawer-open .drawer-hamburger-icon { height: 3px !important; background-color: rgba(0, 0, 0, 0) !important; } /* line 53, ../scss/_layout.scss */ .drawer-open .drawer-hamburger-icon::before, .drawer-open .drawer-hamburger-icon::after { top: 0 !important; background-color: #000; transition: .6s !important; } @media print, screen and (min-width: 768px) { /* line 60, ../scss/_layout.scss */ .drawer-hamburger { position: relative !important; top: 0% !important; right: 0% !important; float: right; } /* line 61, ../scss/_layout.scss */ .drawer-nav { width: auto !important; position: absolute !important; left: auto !important; right: 90px; background-color: transparent !important; color: #000 !important; overflow: visible; } /* line 62, ../scss/_layout.scss */ .drawer--top .drawer-nav { top: -4px !important; display: none; opacity: 0; } /* line 63, ../scss/_layout.scss */ .drawer-open .drawer-nav { display: block; opacity: 1; animation: fade-in 1s linear 0s 1; } /* line 64, ../scss/_layout.scss */ .drawer-close .drawer-nav { /*display: block;*/ display: none; opacity: 0; animation: fade-out .5s linear 0s 1; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fade-out { 0% { display: block !important; opacity: 1; z-index: -1; } 1% { display: none; opacity: 1; } 100% { display: none; opacity: 0; } } } /* 現在地 */ /* line 79, ../scss/_layout.scss */ #home nav#grobalNav a.current:after, #business nav#grobalNav .business a:after, #recruit nav#grobalNav .recruit a:after, #contact nav#grobalNav .contact a:after { width: calc(100% - 40px); } /* footer ----------------------------------------------------------------------------------*/ /* line 87, ../scss/_layout.scss */ footer { background: linear-gradient(30deg, #ffffc4, #ff6699, #ff6699, #ffffc4); background-size: 600% 600%; animation: bgAnimation 15s ease infinite; } /* line 88, ../scss/_layout.scss */ footer #footer { width: 940px; margin: auto; padding: 90px 0 0px; display: flex; justify-content: space-between; flex-wrap: wrap; } /* line 89, ../scss/_layout.scss */ footer #footer p, footer #footer div { width: 48%; text-align: left; letter-spacing: 0; } /* line 90, ../scss/_layout.scss */ footer #footer .copyright { width: 100%; text-align: center; font-family: "Roboto"; font-weight: 500; font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding: 60px 0 60px; letter-spacing: 0.05em; } /* line 94, ../scss/_layout.scss */ #footer .logo, #spAddress .logo { width: 100%; margin-bottom: 50px; } /* line 95, ../scss/_layout.scss */ #footer .logo a, #spAddress .logo a { width: 300px; } /* line 97, ../scss/_layout.scss */ #footer .mail, #spAddress .mail { font-size: 20px; font-size: 1.25rem; line-height: 2.25rem; text-align: center; height: 80px; } /* line 98, ../scss/_layout.scss */ #footer .mail a, #spAddress .mail a { background: #000; padding: 21px 10px; position: relative; color: #fff; height: 100%; } /* line 99, ../scss/_layout.scss */ #footer .mail a:before, #spAddress .mail a:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; right: 18px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-top: -4px; transition: 0.25s; } /* line 100, ../scss/_layout.scss */ #footer .mail a:after, #spAddress .mail a:after { content: ""; background: url("../img/icMail.svg") no-repeat; background-size: contain; width: 40px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); left: 30px; } /* line 102, ../scss/_layout.scss */ #footer .mail a:hover, #spAddress .mail a:hover { opacity: 0.7; } /* line 103, ../scss/_layout.scss */ #footer .mail a:hover:before, #spAddress .mail a:hover:before { right: 14px; } /* line 105, ../scss/_layout.scss */ #footer .address, #spAddress .address { font-size: 16px; font-size: 1rem; line-height: 1.8rem; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; } /* line 106, ../scss/_layout.scss */ #footer .address a, #spAddress .address a { text-decoration: underline; } /* line 107, ../scss/_layout.scss */ #footer .address .list, #spAddress .address .list { font-weight: 500; } /* line 108, ../scss/_layout.scss */ #footer .address .list.headoffice, #spAddress .address .list.headoffice { width: calc(48% - 80px); } /* line 109, ../scss/_layout.scss */ #footer .address .list.kantooffice, #spAddress .address .list.kantooffice { width: 48%; } /* line 111, ../scss/_layout.scss */ #footer .address:before, #spAddress .address:before { background-image: url("../img/icCompany.svg"); background-size: 37.5% auto; } /* line 112, ../scss/_layout.scss */ #footer .address span, #spAddress .address span { display: block; } /* line 114, ../scss/_layout.scss */ #footer .tel, #spAddress .tel { text-align: left; display: flex; justify-content: space-between; align-items: center; } /* line 115, ../scss/_layout.scss */ #footer .tel:before, #spAddress .tel:before { background-image: url("../img/icPhone.svg"); background-size: 45% auto; } /* line 116, ../scss/_layout.scss */ #footer .tel em, #spAddress .tel em { font-size: 36px; font-size: 2.25rem; line-height: 2.475rem; font-family: "Roboto"; font-weight: 700; } /* line 118, ../scss/_layout.scss */ #footer .address, #footer .tel, #spAddress .address, #spAddress .tel { display: flex; justify-content: space-between; align-content: center; } /* line 119, ../scss/_layout.scss */ #footer .address p, #footer .tel p, #spAddress .address p, #spAddress .tel p { width: calc(100% - 100px); } /* line 120, ../scss/_layout.scss */ #footer .address::before, #footer .tel::before, #spAddress .address::before, #spAddress .tel::before { content: ""; width: 80px; height: 80px; background-color: #000; background-repeat: no-repeat; background-position: center; display: block; margin-top: 5px; } /* line 121, ../scss/_layout.scss */ #footer a, #spAddress a { color: inherit; } /* line 122, ../scss/_layout.scss */ #footer a:hover, #spAddress a:hover { color: #fff; } @keyframes bgAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* page-top */ /* line 134, ../scss/_layout.scss */ #page-top { position: fixed; bottom: 0px; right: 0px; z-index: 10; width: 60px; height: 60px; /*@include bR100;*/ z-index: 1000; } /* line 135, ../scss/_layout.scss */ #page-top a { display: block; width: 100%; height: 100%; /*background:$main-color;*/ background: #000; } /* line 136, ../scss/_layout.scss */ #page-top a:hover { opacity: 0.7; } /* line 137, ../scss/_layout.scss */ #page-top a:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; top: calc(50% - 4px); width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); } /* hover ----------------------------------------------------------------------------------*/ /* line 144, ../scss/_layout.scss */ a, a:link, a:visited { color: #ff6699; text-decoration: none; outline: none; transition: 0.5s; } /* line 145, ../scss/_layout.scss */ a:hover { color: rgba(255, 102, 153, 0.5); text-decoration: none; } /* line 146, ../scss/_layout.scss */ a img { transition: 0.5s; } /* line 147, ../scss/_layout.scss */ a:hover img { opacity: 0.6; } /* line 148, ../scss/_layout.scss */ *::selection { background: #ff6699; color: #fff; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 調整 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 1400px) { /* line 159, ../scss/_layout.scss */ nav#grobalNav li.home { display: none; } /* line 161, ../scss/_layout.scss */ .drawer-nav { right: 40px; } } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- スマホ設定 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* wrapper系 ----------------------------------------------------------------------------------*/ /* line 176, ../scss/_layout.scss */ main { padding: 50px 0 80px; } /* line 177, ../scss/_layout.scss */ .inner { width: 90%; } /* header ----------------------------------------------------------------------------------*/ /* line 184, ../scss/_layout.scss */ header #header { width: 92%; max-width: 100%; min-width: 90%; height: 50px; } /* line 185, ../scss/_layout.scss */ header #header h1, header #header #h1 { width: 113px; } /* line 188, ../scss/_layout.scss */ header.fixed #header { height: 50px; } /* line 191, ../scss/_layout.scss */ #home header.fixed { background: rgba(255, 255, 255, 0); } /* line 192, ../scss/_layout.scss */ .drawer-open header, .drawer-open header.fixed { background: white !important; transition: 0.25s; } /* grobalNav ----------------------------------------------------------------------------------*/ /* line 197, ../scss/_layout.scss */ nav#grobalNav { width: auto; background: white; } /* line 198, ../scss/_layout.scss */ nav#grobalNav ul { display: flex; justify-content: space-between; flex-wrap: wrap; } /* line 199, ../scss/_layout.scss */ nav#grobalNav ul li { font-size: 18px; font-size: 1.125rem; line-height: 1.125rem; width: 100%; border-top: 1px solid rgba(255, 102, 153, 0.5); } /* line 200, ../scss/_layout.scss */ nav#grobalNav ul li:last-child { border-bottom: 1px solid rgba(255, 102, 153, 0.5); } /* line 201, ../scss/_layout.scss */ nav#grobalNav ul li a { color: #000; display: flex; justify-content: space-between; padding: 15px 20px; position: relative; } /* line 202, ../scss/_layout.scss */ nav#grobalNav ul li a:after { content: none; } /* ドロワーメニュー */ /* line 206, ../scss/_layout.scss */ .drawer-hamburger { width: 30px !important; padding: 8px 8px 18px !important; } /* line 211, ../scss/_layout.scss */ .drawer-toggle .drawer-hamburger-icon::after { top: 8px !important; } /* line 212, ../scss/_layout.scss */ .drawer-toggle .drawer-hamburger-icon::before { top: -8px !important; } /* line 217, ../scss/_layout.scss */ .drawer-open .drawer-hamburger-icon::before, .drawer-open .drawer-hamburger-icon::after { top: 0 !important; } /* line 222, ../scss/_layout.scss */ .drawer-hamburger { top: 1.0% !important; right: 2.5% !important; } /* line 223, ../scss/_layout.scss */ .drawer-open .drawer-nav { height: calc(100vh - 50px) !important; top: 50px !important; padding: 0px 0 0; } /* line 224, ../scss/_layout.scss */ .drawer-nav { overflow-y: auto; } /* 現在地 */ /* line 227, ../scss/_layout.scss */ #home nav#grobalNav a.current, #business nav#grobalNav .business a, #recruit nav#grobalNav .recruit a, #contact nav#grobalNav .contact a { background: #ff6699; color: #fff !important; } /* footer ----------------------------------------------------------------------------------*/ /* line 235, ../scss/_layout.scss */ footer { background-size: 600% 600%; animation: bgAnimation 15s ease infinite; height: 50px; } /* line 236, ../scss/_layout.scss */ footer #footer { width: 92%; padding: 0px; } /* line 238, ../scss/_layout.scss */ footer #footer .logo { display: none; } /* line 239, ../scss/_layout.scss */ footer #footer .mail { display: none; } /* line 240, ../scss/_layout.scss */ footer #footer .address { display: none; } /* line 241, ../scss/_layout.scss */ footer #footer .tel { display: none; } /* line 242, ../scss/_layout.scss */ footer #footer .copyright { font-size: 9px; font-size: 0.5625rem; line-height: 1.0125rem; padding: 18px 0 0px; text-align: left; } /* line 245, ../scss/_layout.scss */ #spAddress { width: 260px; margin: auto; text-align: left; padding: 2.2rem 0; } /* line 246, ../scss/_layout.scss */ #spAddress .logo { width: 180px; margin: 50px auto 0px; position: relative; left: -3%; } /* line 247, ../scss/_layout.scss */ #spAddress .logo a { width: 100%; } /* line 249, ../scss/_layout.scss */ #spAddress .logo svg { fill: #ff6699; } /* line 250, ../scss/_layout.scss */ #spAddress .mail { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; height: auto; margin-bottom: 25px; } /* line 251, ../scss/_layout.scss */ #spAddress .mail a { padding: 12px 10px 12px 20px; } /* line 252, ../scss/_layout.scss */ #spAddress .mail a:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; right: 15px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin-top: -3px; transition: 0.25s; } /* line 253, ../scss/_layout.scss */ #spAddress .mail a:after { width: 24px; height: 18px; left: 20px; } /* line 255, ../scss/_layout.scss */ #spAddress .address { font-size: 12px; font-size: 0.75rem; line-height: 1.125rem; } /* line 256, ../scss/_layout.scss */ #spAddress .address:before { background-size: 37.5% auto; } /* line 257, ../scss/_layout.scss */ #spAddress .address span { display: inline-block; } /* line 258, ../scss/_layout.scss */ #spAddress .address a { display: inline-block; } /* line 259, ../scss/_layout.scss */ #spAddress .address a { text-decoration: underline; } /* line 261, ../scss/_layout.scss */ #spAddress .address .list.headoffice, #spAddress .address .list.kantooffice { width: calc(100% - 65px); } /* line 263, ../scss/_layout.scss */ #spAddress .address .list.kantooffice { margin: 20px 0 0 65px; } /* line 264, ../scss/_layout.scss */ #spAddress .address .list a { margin-top: 6px; } /* line 268, ../scss/_layout.scss */ #spAddress .tel:before { background-size: 45% auto; } /* line 269, ../scss/_layout.scss */ #spAddress .tel p { line-height: 1; } /* line 270, ../scss/_layout.scss */ #spAddress .tel em { font-size: 18px; font-size: 1.125rem; line-height: 1.125rem; } /* line 271, ../scss/_layout.scss */ #spAddress .tel span { font-size: 12px; font-size: 0.75rem; line-height: 0.9rem; } /* line 272, ../scss/_layout.scss */ #spAddress .tel small { display: block; font-size: 10px; font-size: 0.625rem; line-height: 0.625rem; } /* line 274, ../scss/_layout.scss */ #spAddress .address, #spAddress .tel { margin-top: 15px; } /* line 275, ../scss/_layout.scss */ #spAddress .address p, #spAddress .tel p { width: calc(100% - 65px); } /* line 276, ../scss/_layout.scss */ #spAddress .address:before, #spAddress .tel:before { width: 42px; height: 42px; margin-top: 1px; } /* line 277, ../scss/_layout.scss */ #spAddress a { color: inherit; } /* line 278, ../scss/_layout.scss */ #spAddress a:hover { color: #ff6699; } /* page-top */ /* line 282, ../scss/_layout.scss */ #page-top { width: 50px; height: 50px; } /* line 284, ../scss/_layout.scss */ #page-top a:after { top: calc(50% - 4px); width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; } } /* ------------------------------- PCのみの設定 ------------------------------- */ @media print, screen and (min-width: 768px) { /* line 295, ../scss/_layout.scss */ #spbar, #spmenu { display: none !important; } /* line 296, ../scss/_layout.scss */ #mm-menu { display: none !important; } /* line 297, ../scss/_layout.scss */ .spMenu span { display: none; } } /* ------------------------------- タブレットのみの設定 ------------------------------- */ @media screen and (min-width: 600px) and (max-width: 959px) { /*.spMenu { top: 20% !important;} nav#grovalNav #nav ul li{ font-size: 10px !important;} nav#grovalNav #nav ul li a{ padding-top:28px !important;}*/ } /* ------------------------------- スマホのみの設定 ------------------------------- */ @media only screen and (max-width: 767px) { /*.spMenu { top: 16% !important;} nav#grovalNav #nav ul li{ font-size: 10px !important;} nav#grovalNav #nav ul li a{ padding-top:28px !important;}*/ } /* -------------------------------------------------------- style -------------------------------------------------------- */ /* 下層共通 ----------------------------------------------------------------------------------*/ /* line 9, ../scss/_style.scss */ #title { display: flex; justify-content: space-between; flex-direction: column-reverse; justify-content: center; color: #fff; height: 300px; margin: 0 auto 80px; background-size: 600% 600% !important; animation: bgAnimation 10s ease infinite !important; } /* line 10, ../scss/_style.scss */ #title em { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; } /* line 11, ../scss/_style.scss */ #title span { font-size: 48px; font-size: 3rem; line-height: 3rem; font-family: "Roboto Condensed"; font-weight: 700; font-style: italic; display: block; margin: 0 auto 5px; } /* line 14, ../scss/_style.scss */ .bgChecker::after { content: ""; position: absolute; z-index: 0; background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%); background-color: #f2f2f2; background-size: 26px 26px; background-position: 0 0, 13px 13px; } /* line 19, ../scss/_style.scss */ .bgStripe::after { content: ""; position: absolute; z-index: 0; background: repeating-linear-gradient(45deg, #f2f2f2 0px, #f2f2f2 13px, #fff 13px, #fff 26px); } /* ---------------------------------------------------------------------------------- 下層共通 スマホ設定 ---------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* line 28, ../scss/_style.scss */ #title { height: 100px; margin: 0 auto 5%; background-size: 600% 600% !important; animation: bgAnimation 10s ease infinite !important; } /* line 29, ../scss/_style.scss */ #title em { font-size: 13px; font-size: 0.8125rem; line-height: 1.4625rem; } /* line 30, ../scss/_style.scss */ #title span { font-size: 25px; font-size: 1.5625rem; line-height: 1.5625rem; margin: 0 auto 2px; } /* line 33, ../scss/_style.scss */ .bgChecker::after { background-size: 14px 14px; background-position: 0 0, 7px 7px; } /* line 36, ../scss/_style.scss */ .bgStripe::after { background: repeating-linear-gradient(45deg, #f2f2f2 0px, #f2f2f2 7px, #fff 7px, #fff 14px); } } /* -------------------------------------------------------- home -------------------------------------------------------- */ /* line 8, ../scss/_home.scss */ #home #mainImg .sp-layer { height: 100%; } /* line 10, ../scss/_home.scss */ #home #mainImg ul li { cursor: default; } /* line 11, ../scss/_home.scss */ #home #mainImg ul li img { width: auto !important; height: 100% !important; } /* line 12, ../scss/_home.scss */ #home #mainImg ul li.ph01 { background: #f0f0f0; } /* line 13, ../scss/_home.scss */ #home #mainImg ul li.ph02 { background: linear-gradient(30deg, #ffffc4, #ff6699, #ffffc4); background-size: 200% 200%; animation: bgAnimation 10s ease infinite; } /* line 14, ../scss/_home.scss */ #home #mainImg ul li.ph03 { background: #fff; } /* line 15, ../scss/_home.scss */ #home #mainImg ul li.ph04 { background: linear-gradient(30deg, #d5b8ff, #66b8ff, #d5b8ff, #66b8ff); background-size: 200% 200%; animation: bgAnimation 10s ease infinite; } /* line 16, ../scss/_home.scss */ #home #mainImg ul li.ph04 .ph { z-index: 5; } /* line 19, ../scss/_home.scss */ #home #mainImg ul .catchCopyWrap { width: 90%; max-width: 1024px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; z-index: 10; margin-top: -5%; } /* line 21, ../scss/_home.scss */ #home #mainImg ul .catchCopyWrap .catchCopy + p { width: 45%; position: absolute; top: auto !important; left: auto !important; bottom: -125px !important; right: -20px !important; } /* line 23, ../scss/_home.scss */ #home #mainImg ul .catchCopyWrap img { width: 100% !important; height: auto !important; } /* line 26, ../scss/_home.scss */ #home #mainImg .ob .l { width: 200px; bottom: -40px; left: -80px; } /* line 27, ../scss/_home.scss */ #home #mainImg .ob .m { width: 80px; bottom: 160px; left: -160px; } /* line 29, ../scss/_home.scss */ #home #mainImg .sp-buttons { padding-bottom: 10px; position: absolute !important; left: 0; right: 0; bottom: 0px; } /* line 30, ../scss/_home.scss */ #home #mainImg .sp-button { border: none !important; background: rgba(255, 255, 255, 0.8) !important; margin: 4px 6px !important; width: 10px; height: 10px; } /* line 31, ../scss/_home.scss */ #home #mainImg .sp-selected-button { background: rgba(0, 0, 0, 0.5) !important; } /* line 33, ../scss/_home.scss */ #home .title { font-size: 24px; font-size: 1.5rem; line-height: 2.7rem; font-family: "Roboto Condensed"; font-style: italic; letter-spacing: 0; text-align: left; z-index: 10; } /* line 34, ../scss/_home.scss */ #home .title::after { content: ""; width: 40px; height: 2px; background: #000; display: block; margin: 10px 0 30px; } /* line 36, ../scss/_home.scss */ #home #mainImg, #home #philosophy, #home #business, #home #recruit { position: relative; } /* line 37, ../scss/_home.scss */ #home #mainImg .ob, #home #philosophy .ob, #home #business .ob, #home #recruit .ob { width: 60%; /*min-width: 1024px;*/ min-width: 1024px; max-width: 1600px; height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; } /* line 38, ../scss/_home.scss */ #home #mainImg .ob .l, #home #mainImg .ob .m, #home #mainImg .ob .s, #home #philosophy .ob .l, #home #philosophy .ob .m, #home #philosophy .ob .s, #home #business .ob .l, #home #business .ob .m, #home #business .ob .s, #home #recruit .ob .l, #home #recruit .ob .m, #home #recruit .ob .s { position: absolute; z-index: 50; } /* line 40, ../scss/_home.scss */ #home #philosophy, #home #business, #home #recruit { margin-top: -60px; padding-top: 60px; position: relative; } /* line 41, ../scss/_home.scss */ #home #philosophy .inner, #home #business .inner, #home #recruit .inner { padding: 80px 0 0; position: relative; } /* line 42, ../scss/_home.scss */ #home #philosophy .text, #home #business .text, #home #recruit .text { position: relative; z-index: 100; text-align: left; } /* line 43, ../scss/_home.scss */ #home #philosophy .catchCopy, #home #business .catchCopy, #home #recruit .catchCopy { font-size: 50px; font-size: 3.125rem; line-height: 4.375rem; font-weight: 900; letter-spacing: 0.2em; margin: 0 auto 30px; } /* line 44, ../scss/_home.scss */ #home #philosophy .catchCopy span, #home #business .catchCopy span, #home #recruit .catchCopy span { display: block; text-indent: -0.5em; } /* line 45, ../scss/_home.scss */ #home #philosophy .catchCopy strong, #home #business .catchCopy strong, #home #recruit .catchCopy strong { color: #ff6699; } /* line 46, ../scss/_home.scss */ #home #philosophy .catchCopy + p, #home #business .catchCopy + p, #home #recruit .catchCopy + p { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; font-weight: 500; margin: 0 auto 70px; } /* line 47, ../scss/_home.scss */ #home #philosophy .catchCopy, #home #philosophy .catchCopy + p, #home #business .catchCopy, #home #business .catchCopy + p, #home #recruit .catchCopy, #home #recruit .catchCopy + p { position: relative; z-index: 60; } /* line 48, ../scss/_home.scss */ #home #philosophy .phSet, #home #business .phSet, #home #recruit .phSet { position: absolute; z-index: 10; } /* line 50, ../scss/_home.scss */ #home #philosophy .btn, #home #business .btn, #home #recruit .btn { font-size: 24px; font-size: 1.5rem; line-height: 2.7rem; font-family: "Roboto Condensed"; font-style: italic; letter-spacing: 0; border: 1px solid black; text-align: left; width: 240px; } /* line 51, ../scss/_home.scss */ #home #philosophy .btn a, #home #business .btn a, #home #recruit .btn a { color: #000; background: white; position: relative; padding: 8px 20px; } /* line 52, ../scss/_home.scss */ #home #philosophy .btn a:hover, #home #business .btn a:hover, #home #recruit .btn a:hover { color: #fff; background: #000; } /* line 53, ../scss/_home.scss */ #home #philosophy .btn a:hover::before, #home #business .btn a:hover::before, #home #recruit .btn a:hover::before { right: 16px; border-color: #fff; } /* line 55, ../scss/_home.scss */ #home #philosophy .btn a::before, #home #business .btn a::before, #home #recruit .btn a::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; right: 20px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); margin-top: -4px; transition: 0.25s; } /* line 59, ../scss/_home.scss */ #home #philosophy .inner { padding-bottom: 280px; } /* line 60, ../scss/_home.scss */ #home #philosophy .phSet { width: 620px; top: 288px; left: 565px; display: flex; justify-content: space-between; } /* line 61, ../scss/_home.scss */ #home #philosophy .phSet li:nth-of-type(2) { position: relative; top: -160px; } /* line 63, ../scss/_home.scss */ #home #philosophy .ob .l { width: 240px; bottom: -205px; right: -80px; } /* line 64, ../scss/_home.scss */ #home #philosophy .ob .m { width: 120px; bottom: -85px; right: -100px; } /* line 65, ../scss/_home.scss */ #home #philosophy .ob .s { width: 60px; bottom: -35px; right: -120px; } /* line 68, ../scss/_home.scss */ #home #business .inner { padding-bottom: 510px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } /* line 69, ../scss/_home.scss */ #home #business .title, #home #business .text { width: 540px; display: inline-block; } /* line 71, ../scss/_home.scss */ #home #business .catchCopy + p { text-indent: -0.5em; } /* line 72, ../scss/_home.scss */ #home #business .phSet { top: -180px; left: -230px; display: flex; flex-direction: column; align-items: flex-end; } /* line 74, ../scss/_home.scss */ #home #business .phSet li:nth-of-type(1) { margin-bottom: 50px; } /* line 75, ../scss/_home.scss */ #home #business .phSet li:nth-of-type(2) { width: 360px; } /* line 77, ../scss/_home.scss */ #home #business .ob .l { width: 240px; bottom: 290px; left: -190px; } /* line 78, ../scss/_home.scss */ #home #business .ob .m { width: 120px; bottom: 40px; left: -33px; } /* line 79, ../scss/_home.scss */ #home #business .ob .s { width: 60px; bottom: 240px; left: 80px; } /* line 82, ../scss/_home.scss */ #home #recruit .inner { padding-bottom: 150px; } /* line 83, ../scss/_home.scss */ #home #recruit .ph { top: -350px; right: -285px; position: absolute; } /* line 85, ../scss/_home.scss */ #home #recruit .ob .l { width: 368px; top: 230px; right: -60px; } /* line 87, ../scss/_home.scss */ #home #insta { position: relative; } /* line 88, ../scss/_home.scss */ #home #insta .title { margin-bottom: 30px; letter-spacing: 0; position: relative; z-index: 50; text-align: center; } /* line 89, ../scss/_home.scss */ #home #insta .title::after { margin-left: auto; margin-right: auto; } /* line 90, ../scss/_home.scss */ #home #insta .title + p { margin: 0 auto 80px; position: relative; z-index: 50; font-size: 16px; font-size: 1rem; line-height: 1.8rem; } /* line 92, ../scss/_home.scss */ #home #insta ul.insta-card { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 50; } /* line 93, ../scss/_home.scss */ #home #insta ul.insta-card.ltr { justify-content: flex-start; } /* line 94, ../scss/_home.scss */ #home #insta ul.insta-card.rtl { justify-content: flex-end; } /* line 95, ../scss/_home.scss */ #home #insta ul.insta-card li { width: 240px; } /* line 98, ../scss/_home.scss */ #home .bgChecker::after { top: -200px; left: 0; width: 40%; height: 118%; } /* line 101, ../scss/_home.scss */ #home .bgStripe::after { top: 80px; right: 0; width: 47%; height: 110%; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 調整 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 1400px) { /* line 115, ../scss/_home.scss */ #home #mainImg .ob .l { width: 200px; bottom: -40px; left: 80px; } /* line 116, ../scss/_home.scss */ #home #mainImg .ob .m { width: 80px; bottom: 160px; left: 0px; } /* line 120, ../scss/_home.scss */ #home #philosophy .phSet { width: 50%; top: 270px; left: auto; right: 0; } /* line 121, ../scss/_home.scss */ #home #philosophy .phSet li:nth-of-type(1) { height: 555px; } /* line 122, ../scss/_home.scss */ #home #philosophy .phSet li:nth-of-type(2) { top: -160px; height: 555px; } /* line 124, ../scss/_home.scss */ #home #philosophy .ob .l { width: 240px; bottom: -205px; right: -0px; } /* line 125, ../scss/_home.scss */ #home #philosophy .ob .m { width: 120px; bottom: -85px; right: -20px; } /* line 126, ../scss/_home.scss */ #home #philosophy .ob .s { width: 60px; bottom: -35px; right: -40px; } /* line 129, ../scss/_home.scss */ #home #business .phSet { top: -180px; left: 0px; width: 43%; } /* line 130, ../scss/_home.scss */ #home #business .phSet li:nth-of-type(1) { height: 470px; } /* line 132, ../scss/_home.scss */ #home #business .ob .l { width: 240px; bottom: 290px; left: -20px; } /* line 133, ../scss/_home.scss */ #home #business .ob .m { width: 120px; bottom: 40px; left: 137px; } /* line 134, ../scss/_home.scss */ #home #business .ob .s { width: 60px; bottom: 240px; left: 250px; } /* line 137, ../scss/_home.scss */ #home #recruit .ph { top: -350px; right: 0px; width: 45%; height: 624px; } /* line 139, ../scss/_home.scss */ #home #recruit .ob .l { width: 368px; top: 230px; right: -60px; } /* line 143, ../scss/_home.scss */ #home #insta ul li { width: 16.666666%; } } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- スマホ設定 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* line 160, ../scss/_home.scss */ #home #mainImg ul li .sp-image-container { overflow: hidden; position: relative; } /* line 161, ../scss/_home.scss */ #home #mainImg ul li img { width: 100% !important; height: 100% !important; object-fit: cover; font-family: 'object-fit: cover;'; } /* line 162, ../scss/_home.scss */ #home #mainImg ul li.ph02 { background-size: 200% 200%; animation: bgAnimation 10s ease infinite; } /* line 164, ../scss/_home.scss */ #home #mainImg ul .catchCopyWrap { width: 90%; max-width: 100%; margin-top: -7.5%; } /* line 166, ../scss/_home.scss */ #home #mainImg ul .catchCopyWrap .catchCopy + p { width: 45%; bottom: -40px !important; right: -10px !important; } /* line 170, ../scss/_home.scss */ #home #mainImg .ob .l { width: 96px; bottom: -76px; left: calc(2.5% + 32px); } /* line 171, ../scss/_home.scss */ #home #mainImg .ob .m { width: 32px; bottom: 20px; left: 2.5%; } /* line 173, ../scss/_home.scss */ #home #mainImg .sp-buttons { display: none; } /* line 175, ../scss/_home.scss */ #home .title { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; text-align: center; } /* line 176, ../scss/_home.scss */ #home .title::after { width: 20px; height: 1px; margin: 10px auto 1.5rem; } /* line 179, ../scss/_home.scss */ #home #mainImg .ob, #home #philosophy .ob, #home #business .ob, #home #recruit .ob { width: 100%; min-width: 100%; max-width: 100%; height: 100%; } /* line 182, ../scss/_home.scss */ #home #philosophy, #home #business, #home #recruit { margin-top: 0px; padding-top: 0px; margin-bottom: 4rem; } /* line 183, ../scss/_home.scss */ #home #philosophy .inner, #home #business .inner, #home #recruit .inner { padding: 25px 0 0; z-index: auto; } /* line 184, ../scss/_home.scss */ #home #philosophy .text, #home #business .text, #home #recruit .text { text-align: center; } /* line 185, ../scss/_home.scss */ #home #philosophy .catchCopy, #home #business .catchCopy, #home #recruit .catchCopy { font-size: 22px; font-size: 1.375rem; line-height: 1.925rem; margin: 0 auto 1rem; } /* line 186, ../scss/_home.scss */ #home #philosophy .catchCopy + p, #home #business .catchCopy + p, #home #recruit .catchCopy + p { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; margin: 0 auto 0px; text-align: left; } /* line 187, ../scss/_home.scss */ #home #philosophy .phSet, #home #business .phSet, #home #recruit .phSet { position: relative; } /* line 189, ../scss/_home.scss */ #home #philosophy .btn, #home #business .btn, #home #recruit .btn { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; width: 180px; margin: auto; } /* line 190, ../scss/_home.scss */ #home #philosophy .btn a, #home #business .btn a, #home #recruit .btn a { padding: 5px 18px; } /* line 191, ../scss/_home.scss */ #home #philosophy .btn a::before, #home #business .btn a::before, #home #recruit .btn a::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; right: 15px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); margin-top: -3px; transition: 0.25s; } /* line 195, ../scss/_home.scss */ #home #philosophy .inner { padding-bottom: 0px; display: flex; flex-direction: column; } /* line 196, ../scss/_home.scss */ #home #philosophy .text { order: 2; } /* line 197, ../scss/_home.scss */ #home #philosophy .phSet { width: 100%; top: 0px; left: 0; margin: 0 auto 1.5rem; width: 90%; order: 1; } /* line 198, ../scss/_home.scss */ #home #philosophy .phSet li { height: 100%; } /* line 199, ../scss/_home.scss */ #home #philosophy .phSet li:nth-of-type(1) { margin-top: 25%; } /* line 200, ../scss/_home.scss */ #home #philosophy .phSet li:nth-of-type(2) { top: auto; } /* line 202, ../scss/_home.scss */ #home #philosophy .ob .l { width: 120px; bottom: 0px; bottom: -8%; right: 6%; } /* line 203, ../scss/_home.scss */ #home #philosophy .ob .m { width: 60px; bottom: 0%; right: 4%; } /* line 204, ../scss/_home.scss */ #home #philosophy .ob .s { width: 30px; bottom: 4%; right: 2%; } /* line 207, ../scss/_home.scss */ #home #business .inner { padding-bottom: 0px; text-align: left; display: flex; flex-direction: column; } /* line 208, ../scss/_home.scss */ #home #business .title, #home #business .text { width: 100%; } /* line 209, ../scss/_home.scss */ #home #business .text { order: 2; } /* line 210, ../scss/_home.scss */ #home #business .catchCopy + p { margin-bottom: 3rem; } /* line 211, ../scss/_home.scss */ #home #business .phSet { top: 0px; left: 0px; order: 1; margin-bottom: 3rem; } /* line 213, ../scss/_home.scss */ #home #business .phSet li:nth-of-type(1) { margin-bottom: 1.5rem; } /* line 214, ../scss/_home.scss */ #home #business .phSet li:nth-of-type(2) { width: 55%; } /* line 216, ../scss/_home.scss */ #home #business .ob .l { width: 120px; bottom: 0px; top: 36%; left: 3%; } /* line 217, ../scss/_home.scss */ #home #business .ob .m { width: 60px; bottom: 0px; top: 56%; left: 23%; } /* line 218, ../scss/_home.scss */ #home #business .ob .s { width: 30px; bottom: 0px; top: 48%; left: 39%; } /* line 221, ../scss/_home.scss */ #home #recruit .inner { padding-bottom: 25px; display: flex; flex-direction: column; } /* line 222, ../scss/_home.scss */ #home #recruit .text { order: 2; } /* line 223, ../scss/_home.scss */ #home #recruit .catchCopy + p { margin-bottom: 3rem; } /* line 224, ../scss/_home.scss */ #home #recruit .ph { top: 0; right: 0; position: relative; order: 1; margin-bottom: 2.5rem; } /* line 226, ../scss/_home.scss */ #home #recruit .ob .l { width: 148px; top: 40%; right: 1%; } /* line 229, ../scss/_home.scss */ #home #insta .title { margin-bottom: 1rem; } /* line 231, ../scss/_home.scss */ #home #insta .title + p { margin: 0 auto 2rem; font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; width: 90%; text-align: left; } /* line 236, ../scss/_home.scss */ #home #insta ul.insta-card li { width: 33.333333%; } /* line 239, ../scss/_home.scss */ #home .bgChecker::after { top: 125px; left: 0; width: 60%; height: 83%; } /* line 242, ../scss/_home.scss */ #home .bgStripe::after { top: -50px; right: 0; width: 40%; height: 120%; } } /* -------------------------------------------------------- business -------------------------------------------------------- */ /* line 7, ../scss/_business.scss */ #business #title { background: linear-gradient(30deg, #ffffc4, #ff6699, #ff6699, #ffffc4); } /* line 9, ../scss/_business.scss */ #business #intro .inner, #business #event .inner, #business #staffing .inner { position: relative; } /* line 10, ../scss/_business.scss */ #business #intro .text, #business #event .text, #business #staffing .text { position: relative; z-index: 50; } /* line 12, ../scss/_business.scss */ #business #intro { text-align: right; } /* line 13, ../scss/_business.scss */ #business #intro .inner { padding-top: 80px; } /* line 14, ../scss/_business.scss */ #business #intro .text { display: inline-block; text-align: left; padding-top: 30px; } /* line 15, ../scss/_business.scss */ #business #intro .catchCopy { font-size: 50px; font-size: 3.125rem; line-height: 4.375rem; font-weight: 900; letter-spacing: 0.2em; margin: 0 auto 30px; } /* line 16, ../scss/_business.scss */ #business #intro .catchCopy strong { color: #ff6699; } /* line 17, ../scss/_business.scss */ #business #intro .catchCopy + p { font-size: 16px; font-size: 1rem; line-height: 1.8rem; margin: 0 auto 80px; } /* line 18, ../scss/_business.scss */ #business #intro .ph { position: absolute; top: 0; left: -160px; z-index: 10; } /* line 21, ../scss/_business.scss */ #business .contentsWrap { position: relative; } /* line 22, ../scss/_business.scss */ #business .contentsWrap .inner { text-align: left; } /* line 23, ../scss/_business.scss */ #business .contentsWrap .text { position: relative; width: 42.96875%; } /* line 24, ../scss/_business.scss */ #business .contentsWrap .text::before { font-family: "Roboto Condensed"; font-weight: 400; font-style: italic; color: #ff6699; font-size: 220px; font-size: 13.75rem; line-height: 13.75rem; display: block; margin-bottom: 15px; } /* line 25, ../scss/_business.scss */ #business .contentsWrap .text .enCopy { position: absolute; } /* line 26, ../scss/_business.scss */ #business .contentsWrap .text .catchCopy { background: #ff6699; color: #fff; font-size: 20px; font-size: 1.25rem; line-height: 2.25rem; text-align: center; padding: 2px 0; margin-bottom: 30px; } /* line 27, ../scss/_business.scss */ #business .contentsWrap .text .catchCopy + p { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; font-weight: 500; text-align: left; } /* line 29, ../scss/_business.scss */ #business .contentsWrap .contentsList { width: 39.0625%; z-index: 50; } /* line 30, ../scss/_business.scss */ #business .contentsWrap .contentsList li { display: block; position: relative; margin-bottom: 20px; } /* line 31, ../scss/_business.scss */ #business .contentsWrap .contentsList li p { border: 2px solid #ff6699; background: #fff; font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; text-align: center; padding: 9px 20px; color: #ff6699; font-weight: 600; position: relative; z-index: 20; } /* line 32, ../scss/_business.scss */ #business .contentsWrap .contentsList li::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 6px; left: 6px; border: 2px solid #ff6699; z-index: 10; box-sizing: border-box; background: #fff; } /* line 34, ../scss/_business.scss */ #business .contentsWrap .figureWrap { padding-top: 0; z-index: 50; } /* line 35, ../scss/_business.scss */ #business .contentsWrap figure { position: relative; } /* line 36, ../scss/_business.scss */ #business .contentsWrap figure figcaption { position: absolute; background: rgba(255, 102, 153, 0.8); width: 240px; padding: 30px 20px 20px; z-index: 10; text-align: center; } /* line 37, ../scss/_business.scss */ #business .contentsWrap figure figcaption h3 { display: flex; flex-direction: column-reverse; } /* line 38, ../scss/_business.scss */ #business .contentsWrap figure figcaption h3 em { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; } /* line 39, ../scss/_business.scss */ #business .contentsWrap figure figcaption h3 span { margin: 0 auto 15px; } /* line 44, ../scss/_business.scss */ #business #event .inner { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 130px; } /* line 46, ../scss/_business.scss */ #business #event .text::before { content: "01"; } /* line 47, ../scss/_business.scss */ #business #event .text .enCopy { width: 290px; top: 94px; left: 100px; } /* line 49, ../scss/_business.scss */ #business #event .contentsList { position: relative; bottom: -40px; } /* line 50, ../scss/_business.scss */ #business #event .mainPh { position: absolute; top: 320px; right: 0; width: 50%; height: 450px; z-index: 1; } /* line 51, ../scss/_business.scss */ #business #event .figureWrap { display: block; padding-bottom: 0; } /* line 53, ../scss/_business.scss */ #business #event figure.event { width: 552px; left: -150px; margin-bottom: 120px; } /* line 54, ../scss/_business.scss */ #business #event figure.event figcaption { top: 40px; right: -40px; } /* line 56, ../scss/_business.scss */ #business #event figure.slsp { width: 472px; position: absolute; top: 370px; right: -70px; } /* line 57, ../scss/_business.scss */ #business #event figure.slsp figcaption { top: 325px; left: -40px; } /* line 59, ../scss/_business.scss */ #business #event figure.exhibition { width: 472px; } /* line 60, ../scss/_business.scss */ #business #event figure.exhibition figcaption { top: 225px; left: -70px; } /* line 64, ../scss/_business.scss */ #business #staffing { margin: 0 auto 200px; } /* line 65, ../scss/_business.scss */ #business #staffing .inner { text-align: right; display: flex; flex-direction: column; align-items: flex-end; position: absolute; top: -60px; left: 0; right: 0; margin: auto; } /* line 66, ../scss/_business.scss */ #business #staffing .text { display: inline-block; width: 39.0625%; } /* line 67, ../scss/_business.scss */ #business #staffing .text::before { content: "02"; } /* line 68, ../scss/_business.scss */ #business #staffing .text .enCopy { width: 400px; top: 115px; right: 20px; } /* line 70, ../scss/_business.scss */ #business #staffing .contentsList { margin-top: 40px; } /* line 71, ../scss/_business.scss */ #business #staffing .contentsList li:nth-of-type(1) p { letter-spacing: -0.05em; padding-left: 0; padding-right: 0; } /* line 72, ../scss/_business.scss */ #business #staffing .figureWrap { position: relative; top: auto; left: auto; right: auto; display: block; padding-bottom: 0; padding-top: 230px; } /* line 74, ../scss/_business.scss */ #business #staffing figure.mc { width: 552px; left: -150px; margin-bottom: 120px; } /* line 75, ../scss/_business.scss */ #business #staffing figure.mc figcaption { top: 305px; right: -40px; } /* line 77, ../scss/_business.scss */ #business #staffing figure.companion { width: 472px; position: absolute; top: 640px; right: -70px; } /* line 78, ../scss/_business.scss */ #business #staffing figure.companion figcaption { top: 225px; right: -50px; } /* line 80, ../scss/_business.scss */ #business #staffing figure.staff { width: 472px; } /* line 81, ../scss/_business.scss */ #business #staffing figure.staff figcaption { top: 225px; left: -70px; } /* line 85, ../scss/_business.scss */ #business #otherContent { display: flex; justify-content: space-between; } /* line 86, ../scss/_business.scss */ #business #otherContent .otherContentsWrap { position: relative; width: 47%; display: flex; } /* line 87, ../scss/_business.scss */ #business #otherContent .otherContentsWrap:nth-of-type(1) h4 + p { text-indent: -0.5em; } /* line 88, ../scss/_business.scss */ #business #otherContent .otherContentsWrap::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 6px; left: 6px; border: 2px solid #ff6699; z-index: 10; box-sizing: border-box; background: #fff; } /* line 89, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents { border: 2px solid #ff6699; background: #fff; font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; text-align: center; padding: 15px 20px 15px 130px; position: relative; z-index: 20; text-align: left; width: 100%; } /* line 90, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents::before { font-family: "Roboto Condensed"; font-weight: 400; font-style: italic; color: #ff6699; font-size: 72px; font-size: 4.5rem; line-height: 5.4rem; display: block; position: absolute; top: 5px; left: 25px; letter-spacing: 0; border-bottom: 6px solid #ff6699; } /* line 91, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents h4 { font-size: 26px; font-size: 1.625rem; line-height: 2.925rem; color: #ff6699; font-weight: 600; } /* line 92, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents h4 + p { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; font-weight: 500; } /* line 94, ../scss/_business.scss */ #business #otherContent .otherContentsWrap:nth-of-type(1) .otherContents::before { content: "03"; } /* line 95, ../scss/_business.scss */ #business #otherContent .otherContentsWrap:nth-of-type(2) .otherContents::before { content: "04"; } /* line 98, ../scss/_business.scss */ #business .bgChecker::after { top: 440px; left: 0; width: 30%; height: 75%; } /* line 101, ../scss/_business.scss */ #business .bgStripe::after { top: 415px; right: 0; width: 32.5%; height: 72%; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 調整 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 1400px) { /* line 114, ../scss/_business.scss */ #business #intro .ph { top: 0; left: 0; width: 63%; height: 400px; } /* line 124, ../scss/_business.scss */ #business #event .mainPh { width: 45%; } /* line 126, ../scss/_business.scss */ #business #event figure.event { width: 45%; left: 0; height: 472px; } /* line 127, ../scss/_business.scss */ #business #event figure.event figcaption { top: 40px; right: -40px; } /* line 129, ../scss/_business.scss */ #business #event figure.slsp { width: 45%; height: 392px; right: 0px; } /* line 130, ../scss/_business.scss */ #business #event figure.slsp figcaption { top: 325px; left: -40px; } /* line 132, ../scss/_business.scss */ #business #event figure.exhibition { width: 45%; height: 392px; } /* line 133, ../scss/_business.scss */ #business #event figure.exhibition figcaption { top: 225px; left: 0px; } /* line 139, ../scss/_business.scss */ #business #staffing figure.mc { width: 45%; left: 0px; height: 472px; } /* line 140, ../scss/_business.scss */ #business #staffing figure.mc figcaption { top: 305px; right: -40px; } /* line 142, ../scss/_business.scss */ #business #staffing figure.companion { width: 45%; height: 392px; } /* line 143, ../scss/_business.scss */ #business #staffing figure.companion figcaption { top: 225px; right: 70px; } /* line 145, ../scss/_business.scss */ #business #staffing figure.staff { width: 45%; height: 392px; } /* line 146, ../scss/_business.scss */ #business #staffing figure.staff figcaption { top: 225px; left: 0px; } /* line 150, ../scss/_business.scss */ #business #otherContent { display: flex; justify-content: space-between; } /* line 151, ../scss/_business.scss */ #business #otherContent .otherContentsWrap { position: relative; width: 47%; display: flex; } /* line 152, ../scss/_business.scss */ #business #otherContent .otherContentsWrap:nth-of-type(1) h4 + p { text-indent: -0.5em; } /* line 153, ../scss/_business.scss */ #business #otherContent .otherContentsWrap::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 6px; left: 6px; border: 2px solid #ff6699; z-index: 10; box-sizing: border-box; background: #fff; } /* line 154, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents { border: 2px solid #ff6699; background: #fff; font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; text-align: center; padding: 15px 20px 15px 130px; position: relative; z-index: 20; text-align: left; width: 100%; } /* line 155, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents::before { font-family: "Roboto Condensed"; font-weight: 400; font-style: italic; color: #ff6699; font-size: 72px; font-size: 4.5rem; line-height: 5.4rem; display: block; position: absolute; top: 5px; left: 25px; letter-spacing: 0; border-bottom: 6px solid #ff6699; } /* line 156, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents h4 { font-size: 26px; font-size: 1.625rem; line-height: 2.925rem; color: #ff6699; font-weight: 600; } /* line 157, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents h4 + p { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; font-weight: 500; } /* line 159, ../scss/_business.scss */ #business #otherContent .otherContentsWrap:nth-of-type(1) .otherContents::before { content: "03"; } /* line 160, ../scss/_business.scss */ #business #otherContent .otherContentsWrap:nth-of-type(2) .otherContents::before { content: "04"; } /* line 163, ../scss/_business.scss */ #business .bgChecker::after { top: 440px; left: 0; width: 30%; height: 75%; } /* line 166, ../scss/_business.scss */ #business .bgStripe::after { top: 415px; right: 0; width: 32.5%; height: 72%; } } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- スマホ設定 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* line 185, ../scss/_business.scss */ #business #intro { text-align: left; } /* line 186, ../scss/_business.scss */ #business #intro .inner { padding-top: 0px; display: flex; flex-direction: column-reverse; } /* line 187, ../scss/_business.scss */ #business #intro .text { padding-top: 30px; } /* line 188, ../scss/_business.scss */ #business #intro .catchCopy { font-size: 22px; font-size: 1.375rem; line-height: 1.925rem; margin: 0 auto 1rem; text-align: center; } /* line 189, ../scss/_business.scss */ #business #intro .catchCopy + p { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; margin: 0 auto 2rem; } /* line 190, ../scss/_business.scss */ #business #intro .ph { position: relative; top: auto; left: auto; } /* line 194, ../scss/_business.scss */ #business .contentsWrap .inner { flex-direction: column; } /* line 195, ../scss/_business.scss */ #business .contentsWrap .text { width: 100%; text-align: center; margin: 0 auto 1.5rem; } /* line 196, ../scss/_business.scss */ #business .contentsWrap .text::before { font-size: 88px; font-size: 5.5rem; line-height: 5.5rem; margin-bottom: 5px; font-weight: 500; } /* line 197, ../scss/_business.scss */ #business .contentsWrap .text .enCopy { position: absolute; } /* line 198, ../scss/_business.scss */ #business .contentsWrap .text .catchCopy { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; padding: 2px 0; margin-bottom: 0.75rem; } /* line 199, ../scss/_business.scss */ #business .contentsWrap .text .catchCopy + p { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; } /* line 201, ../scss/_business.scss */ #business .contentsWrap .contentsList { width: 90%; margin: auto; } /* line 202, ../scss/_business.scss */ #business .contentsWrap .contentsList li { margin-bottom: 14px; } /* line 203, ../scss/_business.scss */ #business .contentsWrap .contentsList li p { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; padding: 6px 0px; } /* line 204, ../scss/_business.scss */ #business .contentsWrap .contentsList li::before { top: 5px; left: 5px; } /* line 206, ../scss/_business.scss */ #business .contentsWrap .figureWrap { padding-top: 0; display: flex; justify-content: space-between; flex-wrap: wrap; } /* line 207, ../scss/_business.scss */ #business .contentsWrap figure { width: 100% !important; /*@include dflex;*/ } /* line 208, ../scss/_business.scss */ #business .contentsWrap figure figure img { display: inline-block; } /* line 209, ../scss/_business.scss */ #business .contentsWrap figure figcaption { width: 180px; padding: 20px 15px 15px; top: auto !important; bottom: 25px; box-sizing: border-box; } /* line 211, ../scss/_business.scss */ #business .contentsWrap figure figcaption h3 em { font-size: 10px; font-size: 0.625rem; line-height: 1.125rem; } /* line 212, ../scss/_business.scss */ #business .contentsWrap figure figcaption h3 span { margin: 0 auto 5px; } /* line 213, ../scss/_business.scss */ #business .contentsWrap figure figcaption h3 span img { width: 80%; } /* line 217, ../scss/_business.scss */ #business #event { margin: 0 auto 3.5rem; } /* line 218, ../scss/_business.scss */ #business #event .inner { padding-bottom: 400px; } /* line 220, ../scss/_business.scss */ #business #event .text .enCopy { width: 120px; top: 43px; left: 170px; } /* line 222, ../scss/_business.scss */ #business #event .contentsList { bottom: auto; position: absolute; top: 360px; left: 0; right: 0; margin: auto; } /* line 223, ../scss/_business.scss */ #business #event .mainPh { top: 210px; right: 0; width: 100%; height: 170px; } /* line 224, ../scss/_business.scss */ #business #event .figureWrap { padding-bottom: 0; } /* line 226, ../scss/_business.scss */ #business #event figure.event { left: 0px; margin-bottom: 2.25rem; } /* line 227, ../scss/_business.scss */ #business #event figure.event img { width: 80%; } /* line 228, ../scss/_business.scss */ #business #event figure.event figcaption { right: 0px; } /* line 230, ../scss/_business.scss */ #business #event figure.slsp { position: relative; top: 0px; right: 0px; margin-bottom: 2.25rem; text-align: right; } /* line 231, ../scss/_business.scss */ #business #event figure.slsp img { width: 70%; } /* line 232, ../scss/_business.scss */ #business #event figure.slsp figcaption { left: 0px; } /* line 235, ../scss/_business.scss */ #business #event figure.exhibition img { width: 70%; } /* line 236, ../scss/_business.scss */ #business #event figure.exhibition figcaption { right: 0px; left: auto; } /* line 240, ../scss/_business.scss */ #business #staffing { margin: 0 auto 3.5rem; } /* line 241, ../scss/_business.scss */ #business #staffing .inner { text-align: left; position: relative; top: 0px; } /* line 242, ../scss/_business.scss */ #business #staffing .text { width: 100%; } /* line 243, ../scss/_business.scss */ #business #staffing .text .enCopy { width: 160px; top: 44px; right: auto; left: 45px; } /* line 245, ../scss/_business.scss */ #business #staffing .contentsList { margin-top: 0px; margin-bottom: 2rem; } /* line 246, ../scss/_business.scss */ #business #staffing .figureWrap { padding-top: 0px; } /* line 248, ../scss/_business.scss */ #business #staffing figure.mc { left: 0px; margin-bottom: 2.25rem; } /* line 249, ../scss/_business.scss */ #business #staffing figure.mc img { width: 74%; } /* line 250, ../scss/_business.scss */ #business #staffing figure.mc figcaption { right: 0px; } /* line 252, ../scss/_business.scss */ #business #staffing figure.companion { position: relative; top: 0px; right: 0px; margin-bottom: 2.25rem; text-align: right; } /* line 253, ../scss/_business.scss */ #business #staffing figure.companion img { width: 63%; } /* line 254, ../scss/_business.scss */ #business #staffing figure.companion figcaption { left: 0px; } /* line 257, ../scss/_business.scss */ #business #staffing figure.staff img { width: 63%; } /* line 258, ../scss/_business.scss */ #business #staffing figure.staff figcaption { right: 0px; left: auto; } /* line 262, ../scss/_business.scss */ #business #otherContent { flex-direction: column; } /* line 263, ../scss/_business.scss */ #business #otherContent .otherContentsWrap { width: 100%; display: flex; } /* line 264, ../scss/_business.scss */ #business #otherContent .otherContentsWrap::after { top: 5px; left: 5px; } /* line 265, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; padding: 10px 15px 15px 85px; } /* line 266, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents::before { font-size: 54px; font-size: 3.375rem; line-height: 4.05rem; position: absolute; top: 5px; left: 15px; border-bottom: 4px solid #ff6699; } /* line 267, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents h4 { font-size: 20px; font-size: 1.25rem; line-height: 2.25rem; } /* line 268, ../scss/_business.scss */ #business #otherContent .otherContentsWrap .otherContents h4 + p { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; } /* line 270, ../scss/_business.scss */ #business #otherContent .otherContentsWrap.web { margin-bottom: 2rem; } /* line 274, ../scss/_business.scss */ #business .bgChecker::after { top: 550px; left: 0; width: 48%; height: 45%; } /* line 277, ../scss/_business.scss */ #business .bgStripe::after { top: 285px; right: 0; width: 48%; height: 45%; } } /* -------------------------------------------------------- recruit -------------------------------------------------------- */ /* line 7, ../scss/_recruit.scss */ #recruit #title { background: linear-gradient(30deg, #d5b8ff, #66b8ff, #d5b8ff, #66b8ff); } /* line 8, ../scss/_recruit.scss */ #recruit #intro, #recruit #recruitInfo { width: 900px; margin: auto; } /* line 10, ../scss/_recruit.scss */ #recruit #intro .catchCopy { font-size: 50px; font-size: 3.125rem; line-height: 4.375rem; font-weight: 900; letter-spacing: 0.2em; margin: 0 auto 30px; } /* line 11, ../scss/_recruit.scss */ #recruit #intro .catchCopy strong { color: #ff6699; } /* line 12, ../scss/_recruit.scss */ #recruit #intro .catchCopy + p { font-size: 16px; font-size: 1rem; line-height: 1.8rem; margin: 0 auto 80px; } /* line 14, ../scss/_recruit.scss */ #recruit #recruitInfo { text-align: left; } /* line 15, ../scss/_recruit.scss */ #recruit #recruitInfo h3 { font-size: 24px; font-size: 1.5rem; line-height: 2.7rem; font-weight: 500; margin: 0 auto 15px; letter-spacing: 0.075em; } /* line 17, ../scss/_recruit.scss */ #recruit #recruitInfo table tr { border-top: 1px dotted black; } /* line 18, ../scss/_recruit.scss */ #recruit #recruitInfo table tr:last-child { border-bottom: 1px dotted black; } /* line 19, ../scss/_recruit.scss */ #recruit #recruitInfo table th, #recruit #recruitInfo table td { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; padding: 15px 0; } /* line 20, ../scss/_recruit.scss */ #recruit #recruitInfo table th { width: 160px; font-weight: 500; } /* line 21, ../scss/_recruit.scss */ #recruit #recruitInfo table ol { margin: 0 auto 40px; } /* line 22, ../scss/_recruit.scss */ #recruit #recruitInfo table ol li { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; display: list-item; list-style: decimal; padding-left: .5em; margin-left: 1em; } /* line 24, ../scss/_recruit.scss */ #recruit #recruitInfo table small { display: block; font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; } /* line 26, ../scss/_recruit.scss */ #recruit #recruitInfo.empty { border-top: 1px dotted black; border-bottom: 1px dotted black; padding: 150px 0; text-align: center; } /* line 27, ../scss/_recruit.scss */ #recruit #recruitInfo.empty p { font-size: 16px; font-size: 1rem; line-height: 1.8rem; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- スマホ設定 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* line 39, ../scss/_recruit.scss */ #recruit #intro, #recruit #recruitInfo { width: 92%; } /* line 40, ../scss/_recruit.scss */ #recruit #intro { padding-top: 1rem; } /* line 41, ../scss/_recruit.scss */ #recruit #intro .catchCopy { font-size: 22px; font-size: 1.375rem; line-height: 1.925rem; margin: 0 auto 1rem; } /* line 42, ../scss/_recruit.scss */ #recruit #intro .catchCopy + p { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; margin: 0 auto 3rem; text-align: left; } /* line 45, ../scss/_recruit.scss */ #recruit #recruitInfo h3 { font-size: 16px; font-size: 1rem; line-height: 1.8rem; margin: 0 auto 15px; } /* line 49, ../scss/_recruit.scss */ #recruit #recruitInfo table th, #recruit #recruitInfo table td { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding: 15px 0; } /* line 50, ../scss/_recruit.scss */ #recruit #recruitInfo table th { width: auto; white-space: nowrap; padding-right: 1rem; } /* line 51, ../scss/_recruit.scss */ #recruit #recruitInfo table ol { margin: 0 auto 40px; } /* line 52, ../scss/_recruit.scss */ #recruit #recruitInfo table ol li { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding-left: .5em; margin-left: 1em; } /* line 54, ../scss/_recruit.scss */ #recruit #recruitInfo table small { font-size: 10px; font-size: 0.625rem; line-height: 1.125rem; letter-spacing: 0; } /* line 56, ../scss/_recruit.scss */ #recruit #recruitInfo.empty { padding: 80px 0; } /* line 57, ../scss/_recruit.scss */ #recruit #recruitInfo.empty p { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; } } /* -------------------------------------------------------- contact -------------------------------------------------------- */ /* line 7, ../scss/_contact.scss */ #contact #title { background: linear-gradient(30deg, #f7ffb8, #66ffbd, #66ffbd, #f7ffb8); } /* line 8, ../scss/_contact.scss */ #contact #byTel, #contact #byForm, #contact #mailform, #contact #privacyPolicy { width: 900px; margin: auto; text-align: left; } /* line 9, ../scss/_contact.scss */ #contact .title { font-size: 24px; font-size: 1.5rem; line-height: 2.7rem; font-weight: 500; letter-spacing: 0.1em; padding-bottom: 10px; } /* line 10, ../scss/_contact.scss */ #contact #byTel { margin: 0 auto 60px; } /* line 11, ../scss/_contact.scss */ #contact #byTel .title { border-bottom: 1px dotted rgba(0, 0, 0, 0.8); margin: 0 auto 60px; } /* line 12, ../scss/_contact.scss */ #contact #byTel .tel { display: flex; justify-content: space-between; align-items: center; } /* line 13, ../scss/_contact.scss */ #contact #byTel .tel a { position: relative; } /* line 14, ../scss/_contact.scss */ #contact #byTel .tel a::before { content: ""; background: url("../img/icPhonePink.svg") no-repeat; background-size: contain; width: 36px; height: 40px; display: inline-block; vertical-align: middle; margin: -10px 15px 0 0; } /* line 16, ../scss/_contact.scss */ #contact #byTel .tel em { font-size: 50px; font-size: 3.125rem; line-height: 5.625rem; font-family: "Roboto Condensed"; font-weight: 600; line-height: 1.0; padding-left: 2.5%; /* border-right: 2px solid rgba($black,1);*/ } /* line 17, ../scss/_contact.scss */ #contact #byTel .tel span { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; padding-right: 1.0%; text-align: right; } /* line 18, ../scss/_contact.scss */ #contact #byTel .tel em, #contact #byTel .tel span { width: 50%; } /* line 22, ../scss/_contact.scss */ #contact #byForm .read { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; margin: 0 auto 20px; } /* line 23, ../scss/_contact.scss */ #contact #byForm .read small { display: block; font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; } /* line 26, ../scss/_contact.scss */ #contact #mailform dl { border-top: 1px dotted black; display: flex; justify-content: space-between; } /* line 27, ../scss/_contact.scss */ #contact #mailform dl:last-child { border-bottom: 1px dotted black; } /* line 28, ../scss/_contact.scss */ #contact #mailform dl dt, #contact #mailform dl dd { font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; padding: 15px 0; } /* line 29, ../scss/_contact.scss */ #contact #mailform dl dt { width: 250px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; padding-right: 45px; } /* line 30, ../scss/_contact.scss */ #contact #mailform dl dd { width: calc(100% - 250px); } /* line 31, ../scss/_contact.scss */ #contact #mailform dl .radioSec { display: flex; justify-content: flex-start; flex-wrap: wrap; } /* line 32, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap { width: 40%; } /* line 33, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap:not(:last-child) { margin-bottom: 10px; } /* line 34, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap input[type="radio"] { position: absolute; opacity: 0; } /* line 37, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap input[type="radio"] + span:before, #contact #mailform dl .radioSec .radioWrap input[type="radio"] + input + span:before { content: ''; background: #fff; border-radius: 50%; border: 1px solid #adb5bd; display: inline-block; width: 26px; height: 26px; position: relative; top: 4px; margin-right: 0.9em; vertical-align: top; cursor: pointer; transition: all 250ms ease; } /* line 42, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap input[type="radio"]:checked + span:before, #contact #mailform dl .radioSec .radioWrap input[type="radio"]:checked + input + span:before { background: #ff6699; /*box-shadow: inset 0 0 0 4px $white;*/ } /* line 48, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap input[type="radio"]:focus + span:before, #contact #mailform dl .radioSec .radioWrap input[type="radio"]:focus + input + span:before { outline: none; } /* line 54, ../scss/_contact.scss */ #contact #mailform dl input, #contact #mailform dl textarea { border: 1px solid #adb5bd; font-size: 18px; font-size: 1.125rem; line-height: 2.025rem; font-family: "Noto Sans JP", sans-serif; padding: 5px 15px; box-sizing: border-box; max-width: 100%; width: auto !important; height: auto !important; margin: 0; border-radius: 0 !important; } /* line 55, ../scss/_contact.scss */ #contact #mailform dl input::placeholder, #contact #mailform dl textarea::placeholder { opacity: 0.2; } /* line 56, ../scss/_contact.scss */ #contact #mailform dl input:focus::placeholder, #contact #mailform dl textarea:focus::placeholder { opacity: 0; } /* line 58, ../scss/_contact.scss */ #contact #mailform dl input[name="年齢"] { margin-right: 0.5em; } /* line 59, ../scss/_contact.scss */ #contact #mailform dl label { margin: 0 !important; } /* line 60, ../scss/_contact.scss */ #contact #mailform dl .must { background: #ff6699; color: #fff; font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding: 0 8px; border: none !important; text-shadow: none !important; float: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* line 63, ../scss/_contact.scss */ #contact .formBtn { padding-top: 50px; margin: 0 auto 100px; } /* line 64, ../scss/_contact.scss */ #contact .formBtn button { width: 400px; height: 72px; margin: 0 auto 50px; text-align: center; background: #ff6699; font-size: 20px; font-size: 1.25rem; line-height: 2.25rem; border: none; color: #fff; position: relative; cursor: pointer; font-family: "Noto Sans JP", sans-serif; transition: 0.5s; display: block; border-radius: none; -webkit-appearance: none; border-radius: 0; } /* line 65, ../scss/_contact.scss */ #contact .formBtn button::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; right: 20px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); margin-top: -5px; transition: 0.25s; } /* line 66, ../scss/_contact.scss */ #contact .formBtn button:hover { /*opacity:0.7;*/ } /* line 68, ../scss/_contact.scss */ #contact .formBtn .caption { text-align: center; font-weight: 500; margin: 0 auto 40px; } /* line 70, ../scss/_contact.scss */ #contact .formBtn ul li { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding-left: 1.25em; position: relative; letter-spacing: 0; } /* line 71, ../scss/_contact.scss */ #contact .formBtn ul li::before { content: "●"; position: absolute; top: 1px; left: 0; transform: scale(0.5); } /* line 75, ../scss/_contact.scss */ #contact #privacyPolicy .title { border-bottom: 1px dotted rgba(0, 0, 0, 0.8); margin: 0 auto 20px; } /* line 77, ../scss/_contact.scss */ #contact #privacyPolicy ul > li { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; padding-left: 1.2em; position: relative; letter-spacing: 0; margin-bottom: 5px; } /* line 78, ../scss/_contact.scss */ #contact #privacyPolicy ul > li::before { content: "●"; position: absolute; top: 0px; left: 0; } /* line 80, ../scss/_contact.scss */ #contact #privacyPolicy ul > li ol li { display: list-item; list-style: decimal; margin-left: 1em; } /* mailformpro confirm & thanks pages setting */ /* line 86, ../scss/_contact.scss */ #mfp_confirm_table { margin: 30px auto 50px; } /* line 87, ../scss/_contact.scss */ #mfp_confirm_table tr { border-top: 1px dotted black !important; } /* line 88, ../scss/_contact.scss */ #mfp_confirm_table tr:last-child { border-bottom: 1px dotted black !important; } /* line 90, ../scss/_contact.scss */ #mfp_confirm_table th, #mfp_confirm_table td { font-size: 18px !important; padding: 24px 0 !important; border: none !important; box-sizing: border-box; } /* line 91, ../scss/_contact.scss */ #mfp_confirm_table th { width: 250px !important; font-weight: 500 !important; padding-right: 45px !important; } /* line 92, ../scss/_contact.scss */ #mfp_confirm_table td { width: calc(100% - 250px) !important; } /*.mfp_button_sendWrap{ display: inline-block; margin:0px auto 0; max-width: 100% !important;}*/ /* line 95, ../scss/_contact.scss */ #mfp_button_send { width: 400px; height: 72px; margin: 0 auto 50px; text-align: center; background: #ff6699; font-size: 20px; font-size: 1.25rem; line-height: 2.25rem; border: none; color: #fff; position: relative !important; cursor: pointer; font-family: "Noto Sans JP", sans-serif; transition: 0.5s; display: block; /* ios */ -webkit-appearance: none; border-radius: 0; } /* line 96, ../scss/_contact.scss */ #mfp_button_send::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; right: 20px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); margin-top: -5px; transition: 0.25s; } /* line 97, ../scss/_contact.scss */ #mfp_button_send:hover { /*opacity: 0.7 !important;*/ } /* line 98, ../scss/_contact.scss */ #mfp_button_cancel { background: #999; width: 180px; height: auto; display: block; margin: 0 auto; font-size: 16px; color: #fff; border: none; /* ios */ -webkit-appearance: none; border-radius: 0; } /*#mfp_thanks{ font-size: 24px !important; padding: 40px 0 10px !important;} #mfp_thanks strong{ font-size: 140% !important;}*/ /* line 104, ../scss/_contact.scss */ #contact.thanks #byForm .read { margin: 0 auto 60px; } /* line 105, ../scss/_contact.scss */ #contact.thanks #byForm .read .caption { display: block; margin-top: 10px; } /* line 109, ../scss/_contact.scss */ #contact.thanks #byTel .title { font-size: 21px; margin-bottom: 40px; } /* mailformpro reset */ /* line 114, ../scss/_contact.scss */ .mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev { text-shadow: none !important; } /* line 115, ../scss/_contact.scss */ table#mfp_confirm_table tr.mfp_achroma, .mfp_achroma, table#mfp_confirm_table tr.mfp_colored, .mfp_colored, .mfp_colored { background: none !important; } /* line 116, ../scss/_contact.scss */ .mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password { box-shadow: none !important; } /* line 117, ../scss/_contact.scss */ form#mailformpro label.mfp_checked, form#mailformpro label.mfp_not_checked { padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; } /* line 118, ../scss/_contact.scss */ form#mailformpro dl dt, form#mailformpro dl dd { border: none !important; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- スマホ設定 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* line 127, ../scss/_contact.scss */ #contact #byTel, #contact #byForm, #contact #mailform { width: 92%; } /* line 128, ../scss/_contact.scss */ #contact .title { font-size: 16px; font-size: 1rem; line-height: 1.8rem; padding-bottom: 10px; } /* line 129, ../scss/_contact.scss */ #contact #byTel { margin: 0 auto 2.5rem; padding-top: 1rem; } /* line 130, ../scss/_contact.scss */ #contact #byTel .title { margin: 0 auto 0.75rem; } /* line 131, ../scss/_contact.scss */ #contact #byTel .tel { flex-direction: column; } /* line 133, ../scss/_contact.scss */ #contact #byTel .tel a::before { width: 27px; height: 30px; margin: -5px 10px 0 0; } /* line 135, ../scss/_contact.scss */ #contact #byTel .tel em { font-size: 38px; font-size: 2.375rem; line-height: 3.8rem; padding-left: 0; border: none; text-align: center; text-indent: -0.5em; } /* line 136, ../scss/_contact.scss */ #contact #byTel .tel span { font-size: 13px; font-size: 0.8125rem; line-height: 1.4625rem; padding-right: 0; text-align: center; } /* line 137, ../scss/_contact.scss */ #contact #byTel .tel em, #contact #byTel .tel span { width: 100%; } /* line 141, ../scss/_contact.scss */ #contact #byForm .read { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; margin: 0 auto 20px; } /* line 142, ../scss/_contact.scss */ #contact #byForm .read small { font-size: 10px; font-size: 0.625rem; line-height: 1.125rem; display: block; margin-top: 0.25rem; } /* line 144, ../scss/_contact.scss */ #contact #mailform { width: 100%; } /* line 145, ../scss/_contact.scss */ #contact #mailform dl { flex-direction: column; } /* line 147, ../scss/_contact.scss */ #contact #mailform dl dt, #contact #mailform dl dd { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding: 15px 0; } /* line 148, ../scss/_contact.scss */ #contact #mailform dl dt { width: 100%; padding-right: 0; flex-direction: row-reverse; justify-content: flex-end; padding-bottom: 0; } /* line 149, ../scss/_contact.scss */ #contact #mailform dl dd { width: 100%; padding-top: 10px; } /* line 151, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap { width: auto; } /* line 152, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap:not(:last-child) { margin-bottom: 0px; margin-right: 1.25rem; } /* line 155, ../scss/_contact.scss */ #contact #mailform dl .radioSec .radioWrap input[type="radio"] + span:before, #contact #mailform dl .radioSec .radioWrap input[type="radio"] + input + span:before { width: 12px; height: 12px; top: 5px; margin-right: 0.6em; } /* line 159, ../scss/_contact.scss */ #contact #mailform dl input, #contact #mailform dl textarea { font-size: 14px; font-size: 0.875rem; line-height: 1.575rem; padding: 5px 10px; width: 100% !important; } /* line 161, ../scss/_contact.scss */ #contact #mailform dl input[name="年齢"] { margin-right: 0.5em; width: auto !important; } /* line 162, ../scss/_contact.scss */ #contact #mailform dl input[name="お名前"], #contact #mailform dl input[name="フリガナ"] { width: 100%; } /* line 164, ../scss/_contact.scss */ #contact #mailform dl .must { font-size: 9px; font-size: 0.5625rem; line-height: 0.7875rem; padding: 1px 4px; margin-right: 10px !important; } /* line 167, ../scss/_contact.scss */ #contact .formBtn { padding-top: 3rem; margin: 0 auto 3.5rem; } /* line 168, ../scss/_contact.scss */ #contact .formBtn button { width: 300px; height: 54px; margin: 0 auto 3rem; font-size: 16px; font-size: 1rem; line-height: 1.8rem; } /* line 169, ../scss/_contact.scss */ #contact .formBtn button::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; right: 20px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); margin-top: -5px; transition: 0.25s; } /* line 171, ../scss/_contact.scss */ #contact .formBtn .caption { margin: 0 auto 2rem; font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; text-align: left; } /* line 173, ../scss/_contact.scss */ #contact .formBtn ul li { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding-left: 0.7em; } /* line 174, ../scss/_contact.scss */ #contact .formBtn ul li::before { top: 2px; left: 0; font-size: 30%; } /* line 177, ../scss/_contact.scss */ #contact #privacyPolicy { width: 100%; } /* line 178, ../scss/_contact.scss */ #contact #privacyPolicy .title { margin: 0 auto 1rem; } /* line 180, ../scss/_contact.scss */ #contact #privacyPolicy ul > li { font-size: 12px; font-size: 0.75rem; line-height: 1.35rem; padding-left: 1.2em; margin-bottom: 5px; } /* line 181, ../scss/_contact.scss */ #contact #privacyPolicy ul > li::before { top: 0px; left: 0; } /* line 183, ../scss/_contact.scss */ #contact #privacyPolicy ul > li ol li { margin-left: 1em; } /* mailformpro confirm & thanks pages setting */ /* line 192, ../scss/_contact.scss */ #mfp_confirm_table { margin: 30px auto 50px; } /* line 193, ../scss/_contact.scss */ #mfp_confirm_table tr { border-top: 1px dotted black !important; } /* line 194, ../scss/_contact.scss */ #mfp_confirm_table tr:last-child { border-bottom: 1px dotted black !important; } /* line 196, ../scss/_contact.scss */ #mfp_confirm_table th, #mfp_confirm_table td { width: 100% !important; border: none !important; display: block; } /* line 197, ../scss/_contact.scss */ #mfp_confirm_table th { font-weight: 500 !important; padding: 15px 0 0 !important; font-size: 12px !important; } /* line 198, ../scss/_contact.scss */ #mfp_confirm_table td { padding: 10px 0 15px !important; font-size: 14px !important; } /*.mfp_button_sendWrap{ display: inline-block; margin:0px auto 0; max-width: 100% !important;}*/ /* line 201, ../scss/_contact.scss */ #mfp_button_send { width: 300px !important; height: 54px; margin: 0 auto 1.5rem; font-size: 16px !important; } /* line 202, ../scss/_contact.scss */ #mfp_button_send::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; right: 20px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); margin-top: -5px; transition: 0.25s; } /* line 203, ../scss/_contact.scss */ #mfp_button_send:hover, #mfp_button_cancel:hover { /*opacity: 0.7 !important;*/ } /* line 204, ../scss/_contact.scss */ #mfp_button_cancel { width: 180px; height: auto; font-size: 13px; padding: 8px 0 !important; } /* line 209, ../scss/_contact.scss */ #contact.thanks #byForm .read { margin: 0 auto 30px; } /* line 210, ../scss/_contact.scss */ #contact.thanks #byForm .read .caption { display: block; margin-top: 10px; } /* line 214, ../scss/_contact.scss */ #contact.thanks #byTel .title { font-size: 14px; margin-bottom: 10px; } }