@charset "UTF-8"; /* 初期設定 */ html { font-size: 62.5%; } body { width: 100%; font-size: 1.6rem; font-family: 'メイリオ', 'Meiryo', 'MS ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; color: #000; background-color: #F7F5F2; } body, header, nav, h1, h2, h3, h4, h5, h6, p, ol, ul, li, a, dl, dd, dt, div, span, time, figure, figcaption, article, section, aside { margin: 0px; padding: 0px; box-sizing: border-box; font-weight: normal; letter-spacing: .15rem; } h2 { margin-bottom: 4rem; font-size: 3rem; } h3 { font-size: 2.4rem; font-weight: bold; margin-bottom: 2rem; } p { line-height: 3rem; } .wrapper { width: 100%; } .container { // display: inline-block; max-width: 1280px; margin: 0 auto; // text-align: center; // background-color: rgb(255, 228, 238); } .content { max-width: 1040px; padding: 120px 0; margin: 0 auto; @media screen and (max-width: 480px) { padding: 60px 0; } } h2 { text-align: center; font-size: 32px; position: relative; } h2::before { font-size: 12px; font-weight: bold; color: #F04444; position: absolute; top: -20px; left: 0; right: 0; } .SPbr, #sp-menu { display: none; } .header { color: #fff; background-color: #000; padding: 0 4%; h1 { text-align: center; font-size: 12px; padding: 8px 0; } .headerInner { height: 80px; // display: flex; // text-align: center; // justify-content: space-between; position: relative; &__logo { // text-align: center; height: 80px; margin: auto; width: 200px; a { img { width: auto; object-fit: cover; } } } &__contact { position: absolute; top: 0; right: 0; .headerContactBlock { width: 240px; &__tel { font-size: 18px; color: #fff; display: inline-block; height: 24px; i { padding-right: 8px; } } .headerContactButton { color: #fff; text-align: center; font-size: 14px; padding: 10px 30px; border: 1px solid #fff; transition: 0.3s; } .headerContactButton:hover { background-color: rgb(255, 255, 255); color: rgb(214, 18, 18); transition: 0.3s; } } } } } .headerMenu { height: 60px; &__nav { height: 60px; background-color: #F0EFEF; margin: 0; display: flex; align-items: center; justify-content: center; li { font-size: 16px; padding: 10px 2%; margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; transition: 0.3s; } li:hover { background-color: rgb(255, 255, 255); transition: 0.3s; } } } .fvWrapper { width: 100%; height: auto; display: inline-block; } .fv { width: 100%; height: 36vw; // background-image: url(../img/fvPC.png); // background-size: cover; // background-repeat: no-repeat; // img { // position: relative; // width: 100%; // top: 0; // } } .sp, #SP-nav { display: none; } @media screen and (max-width: 480px) { .pc { display: none; } .sp { display: block; } .headerInner__contact, .headerMenu { display: none; } /* ハンバーガーメニュー */ .openButton { position: absolute; top: 10px; right: 10px; cursor: pointer; width: 50px; height: 50px; border-radius: 5px; border: 1px solid #fff; position: fixed; z-index: 10; } .openButton span { display: inline-block; transition: all .4s; /*アニメーションの設定*/ position: absolute; left: 14px; height: 3px; border-radius: 2px; background: #fff; width: 45%; } .openButton span:nth-of-type(1) { top: 15px; } .openButton span:nth-of-type(2) { top: 23px; } .openButton span:nth-of-type(3) { top: 31px; } /*activeクラスが付与されると線が回転して×に*/ .openButton.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; } .openButton.active span:nth-of-type(2) { opacity: 0; /*真ん中の線は透過*/ } .openButton.active span:nth-of-type(3) { top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; } #SP-nav { display: block; position: fixed; z-index: 999; top: 68px; right: -100%; width: 80%; height: 100vh; background: #333; transition: all 0.6s; } /*アクティブクラスがついたら位置を0に*/ #SP-nav.panel-active { right: 0; } /*ナビゲーション*/ #SP-nav ul { /*ナビゲーション天地中央揃え*/ position: absolute; z-index: 999; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 100%; } /*リストのレイアウト設定*/ #SP-nav li { list-style: none; text-align: center; } #SP-nav li a { color: #fff; font-size: 20px; text-decoration: none; padding: 20px 10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; transition: all .5s; } #SP-nav li:hover { color: rgb(138, 138, 138); } } // ============================== // about // ============================== h2 { position: relative; } h2::before { content: "about"; } .aboutInner { max-width: 1040px; display: flex; margin: 0 auto; padding-bottom: 4rem; &__img { width: 30%; height: auto; } &__contents { width: 70%; margin-left: 30px; } } .more { width: 300px; height: 40px; display: inline-block; line-height: 40px; text-align: center; background-color: #BE3717; color: #fff; margin-top: 4rem; box-shadow: 0 3px 5px rgb(0 0 0 / 50%); } .more::after { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; // margin-left: 20%; float: right; padding-right: 8px; } .more:hover { box-shadow: none; transform: scale(0.99, 0.99) translateY(2px); } .btn-center { text-align: center; } // 取扱商品 .partsContent { padding: 0; } .border { padding: 4%; max-width: 1040px; height: auto; border: 3px solid #D8D8D8; border-radius: 20px; background-color: #F0F0F0; text-align: center; margin: 0 auto; } .partsInner { display: flex; margin-bottom: 2rem; &__item { width: auto; } } .partsItem p { margin-bottom: 2rem; } .partsImage { width: 80%; height: auto; } .gridGroup { max-width: 1040px; margin: 0 auto; display: flex; margin-bottom: 8rem; height: 20rem; &__img { width: 40%; height: 20rem; } &__content { width: 60%; position: relative; margin-left: 4%; background-image: url(../img/01.png); background-repeat: no-repeat; top: 0; right: 0; background-size: 30%; background-position: right 0 top 0; // background-position: top; // z-index: 10; // .backnumber { // position: absolute; // top: 0; // right: 0; // width: 30%; // z-index: 20; // } } } .gridGroup2n { flex-direction: row-reverse; &__content { margin-left: 0; margin-right: 4%; background-image: url(../img/02.png); } } .gridGroup3n { &__content { background-image: url(../img/03.png); } } // ============================== // contact // ============================== #contact { background-image: url(../img/contactback-sm.png); background-size: cover; } .contactContent { padding-bottom: 12rem; .contactHeading { text-align: center; margin: 24px 0; font-size: 20px; p { line-height: 2; } } } @media screen and (max-width: 480px) { #contact { background-position: center; margin-top: 20px; } .contactContent { padding-bottom: 16rem; .contactHeading { font-size: 1.6rem; } } } .contactInner { width: 100%; display: flex; justify-content: center; margin: 0 auto; } .contactButton { width: 100%; height: 80px; display: inline-block; line-height: 80px; text-align: center; background-color: #5F5F5F; color: #fff; border: 2px solid #fff; margin-top: 1.6rem; font-size: 2.4rem; border-radius: 10px; box-shadow: 0 3px 5px rgb(0 0 0 / 50%); } .contactButton:hover { box-shadow: none; transform: scale(0.99, 0.99) translateY(2px); } .telButton::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095"; padding-right: 8px; } .mailButton::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0"; padding-right: 8px; } .button { margin: 0 2%; width: 50%; } // ============================== // footer // ============================== footer, footer a { background-color: #000; color: #fff; } .footerContent { display: flex; padding: 40px 0; } .footer-logo { width: 70%; img { width: 160px; height: 40px; margin-bottom: 20px; } } .footerMenu ul li { line-height: 2; a { font-size: 16px; } a:hover { text-decoration: underline; } } // ============================== // サービス // ============================== .service { margin-bottom: 20rem; } .serviceHeading::before { content: "service"; } .serviceContent { display: flex; &__text { width: 50%; margin-right: 4%; } &__img { width: 50%; height: 24rem; } } .serviceItemOuter { display: flex; } .serviceItem { width: 30%; margin-right: 6%; .arrow_box { position: relative; width: 300px; height: 80px; background: #669CDB; padding: 10px; text-align: center; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 20px; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; line-height: 28px; margin-bottom: 10%; } .arrow_box:after { border: solid transparent; content: ''; height: 0; width: 0; pointer-events: none; position: absolute; border-color: rgba(102, 156, 219, 0); border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; margin-left: -10px; border-top-color: #669CDB; top: 100%; left: 50%; } img { width: 300px; height: 200px; margin-bottom: 8%; } } .serviceItem:nth-of-type(3) { margin-right: 0; } .service__attentionContent { padding: 0 10%; } .service__attention { margin-bottom: 4rem; } .service__attention__title { width: auto; text-align: center; margin-bottom: 2rem; h4 { padding-bottom: 4px; border-bottom: 3px solid #CE4141; display: inline; width: auto; // text-align: center; font-size: 2.4rem; // text-decoration: underline; // border-bottom: 2px solid #F04444; } .titleIconSet::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0ad"; // margin-left: 20%; padding-right: 8px; color: #CE4141; } .titleIconCalendar::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0ad"; // margin-left: 20%; padding-right: 8px; color: #CE4141; } .titleIconCar::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0ad"; // margin-left: 20%; padding-right: 8px; color: #CE4141; } } .serviceBanner { color: #fff; padding: 8%; background-color: rgb(209, 66, 54, 0.9); border-radius: 20px; .service__banner { text-shadow: 3px 3px 6px #000; text-align: center; } } // ============================== // カンパニー // ============================== .companyHeading::before { content: "company"; } .informationHeading::before { content: "information"; } table { width: 80%; margin: 0 auto; tr { line-height: 2; border-bottom: 1px solid #8B8B8B; th { padding-left: 10px; padding-right: 100px; text-align: left; font-weight: 300; vertical-align: middle; } } } .map { margin-top: 8rem; height: 40rem; } .mapInner { display: flex; width: 80%; margin: 0 auto; .map_content { height: 0; width: 50%; // margin: 0 40px; h3 { font-size: 20px; } .mapArea { position: relative; width: 100%; height: 0; padding-top: 75%; /* 比率を4:3に固定 */ iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } } .map-tcoat { margin-right: 4%; } } // ============================== // プライバシー // ============================== .privacy { width: 80%; margin: 0 auto; padding: 4rem 0; &__inner { background-color: #fff; padding: 8rem 4rem; border-radius: 20px; p { margin-bottom: 4rem; } } } .privacyHeading::before { content: "privacy"; } // ============================== // サイトマップ // ============================== .sitemap__inner { width: 80%; margin: 0 auto; } .sitemapLink { display: flex; flex-wrap: wrap; a { // width: 30rem; width: 48%; height: 4rem; border: 1px solid #CE4141; display: flex; align-items: center; padding: 0 2rem; margin: 1%; transition: 0.3s; } a::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f04b"; padding-right: 8px; color: #CE4141; transition: 0.3s; } a:hover { background-color: #CE4141; color: #fff; transition: 0.3s; } a:hover::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f04b"; padding-right: 8px; color: #fff; transition: 0.3s; } } // ============================== // お問い合わせ // ============================== .contactFormHeading::before { content: "contact"; } .contactText { width: 80rem; margin: 0 auto; text-align: center; @media screen and (max-width: 1024px) { width: 80%; } } form { margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 720px; } @media screen and (max-width: 480px) { .Form { margin-top: 40px; } } .Form-Item { padding-top: 24px; padding-bottom: 24px; width: 100%; display: flex; align-items: center; } @media screen and (max-width: 480px) { .Form-Item { padding-left: 14px; padding-right: 14px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; } } label { width: 100%; max-width: 248px; letter-spacing: 0.05em; // font-weight: bold; font-size: 18px; line-height: 1.6em; } @media screen and (max-width: 480px) { .Form-Item-Label { max-width: inherit; display: flex; align-items: center; font-size: 15px; } } .Form-Item-Label.isMsg { margin-top: 8px; margin-bottom: auto; } @media screen and (max-width: 480px) { .Form-Item-Label.isMsg { margin-top: 0; } } .Form-Item-Label-Required { border-radius: 4px; margin-right: 8px; padding-top: 0.2rem; padding-bottom: 0.2rem; width: 48px; display: inline-block; text-align: center; background: #DB1515; color: #fff; font-size: 14px; } @media screen and (max-width: 480px) { .Form-Item-Label-Required { border-radius: 4px; padding-top: 4px; padding-bottom: 4px; width: 32px; font-size: 10px; } } .Form-Item-Input { border: 1px solid #ddd; border-radius: 4px; // margin-left: 40px; // margin: 2rem 0; margin-top: 2rem; margin-bottom: 4rem; padding-left: 1em; padding-right: 1em; height: 48px; flex: 1; width: 100%; // max-width: 410px; background: #fff; font-size: 18px; @media screen and (max-width: 1024px) { padding: 0; font-size: 14px; } } @media screen and (max-width: 480px) { .Form-Item-Input { margin-left: 0; margin-top: 18px; height: 40px; flex: inherit; font-size: 15px; } } .Form-Item-Textarea { border: 1px solid #ddd; border-radius: 6px; margin-top: 4rem; padding-left: 1em; padding-right: 1em; height: 216px; flex: 1; width: 100%; background: #fff; font-size: 18px; @media screen and (max-width: 1024px) { padding: 0; } } @media screen and (max-width: 480px) { .Form-Item-Textarea { margin-top: 18px; margin-left: 0; height: 200px; flex: inherit; font-size: 15px; } } .Form-Btn { border-radius: 6px; margin-top: 32px; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; width: 280px; display: block; letter-spacing: 0.05em; background: #545454; color: #fff; font-weight: bold; font-size: 20px; } .copyright { text-align: center; padding: 8px 0; } small { color: #fff; font-size: 14px; } // 404 .error { text-align: center; padding: 20px 0; margin: 0 auto; } .errorTitle { font-size: 20px; margin-bottom: 20px; } @media screen and (max-width: 480px) { .Form-Btn { margin-top: 24px; padding-top: 8px; padding-bottom: 8px; width: 160px; font-size: 16px; } } // タブレット @media screen and (max-width: 1024px) { h2 { font-size: 18px; margin-bottom: 2rem; } h3 { font-size: 16px; text-align: center; } p { line-height: 2; font-size: 12px; } .content { padding: 60px 0; } .fvWrapper { margin-bottom: 40px; } .header { padding-left: 4%; h1 { text-align: left; font-size: 10px; padding: 6px 0; } .headerInner { height: 60px; // display: flex; // text-align: center; // justify-content: space-between; // position: relative; &__logo { margin-left: 20px; width: 20%; a { img { width: auto; height: 40px; object-fit: cover; } } } &__contact { // margin-left: auto; position: absolute; top: 0; right: 0; .headerContactBlock { width: 160px; // margin-left: auto; a { font-size: 14px; color: #fff; // margin-bottom: 10px; display: inline-block; i { padding-right: 8px; } } .headerContactButton { font-size: 10px; padding: 6px 20px; } .headerContactButton:hover { background-color: rgb(255, 255, 255); color: rgb(214, 18, 18); transition: 0.3s; } } } } } .headerMenu__nav li { font-size: 12px; } // お問合せ .container { max-width: 1023px; margin: 0 4%; } .contactInner { display: block; .button { text-align: center; margin: 0 auto; width: auto; .contactButton { width: 80%; font-size: 14px; height: 56px; line-height: 56px; } } } .aboutInner { display: block; .aboutInner__img { width: 50%; height: 200px; margin: 0 auto; padding: 20px 0; } .aboutInner__contents { width: 100%; margin: 0 auto; .moreButton { text-align: center; margin: 0 auto; } } } } // スマホ @media screen and (max-width: 480px) { h2 { font-size: 2.6rem; z-index: -1; } h3 { font-size: 2rem; text-align: center; line-height: 1.5; } .SPbr { display: block; } .more-center { margin-top: 0; } // コンタクト .contactInner { width: auto; display: block; } .contactButton { width: 90%; font-size: 2rem; text-align: center; } .button { text-align: center; } .aboutInner { max-width: 100vw; display: inline; } .aboutInner__contents { width: 90vw; margin: 0 auto; padding: 4% 0; } .aboutInner__img { width: 90vw; height: 150px; margin: 0 auto; } .moreButton { text-align: center; } .content { padding: 80px 0; } .border { margin: 0 8%; } .partsInner { display: block; } .partsItem p { margin-bottom: 2rem; font-size: 2rem; } .partsImage { width: 60%; } .partsItem { margin-bottom: 40px; } .gridGroup { /* max-width: 1040px; */ margin: 0 auto; display: flex; flex-direction: column-reverse; /* margin-bottom: 8rem; */ height: auto; margin-bottom: 80px; } .gridGroup__img { width: 90vw; margin: 0 5vw; } .gridGroup__content, .gridGroup2n__content { width: 90%; margin: 0 auto; margin-bottom: 20px; } .contactHeading { font-size: 1.6rem; } // ヘッダー header { height: 68px; position: sticky; /*固定する*/ position: -webkit-sticky; /*Safari用ベンダープレフィックス*/ top: 0; /*ブラウザの上からの距離はゼロ*/ } .header { height: 68px; position: relative; } .header .headerInner__logo { height: 40px; } // 要素の重なり .gridGroup__content { position: inherit; } small { font-size: 10px; } // fv .fv { width: 100vw; height: auto; // height: 320px; // background-image: url(../img/fvSP.png); } // 取扱商品 .partsContent { padding: 40px 0; } // フッター .footerContent { padding: 40px 0; flex-flow: column-reverse; display: flex; } .footer-logo { width: 90vw; margin: 0 auto; } .footerMenu { display: none; } #sp-menu { display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; z-index: 10; } .btn-area { display: flex; height: 100%; } .btn-area a, .btn-area span { display: block; // float: left; width: 50%; height: 100%; line-height: 25px; text-align: center; font-size: 16px; background: #3e58ac; color: #fff; padding-top: 9px; } .btn-area a:hover, .btn-area span:hover { text-decoration: none; color: #fff; } .btn-area i { display: block; font-size: 130%; padding-bottom: 2px; } // スマホボタンの幅 .copyright { margin-bottom: 70px; } // ==================== // 業務内容 // ==================== .serviceContent { flex-flow: column-reverse; } .serviceContent__text, .serviceContent__img { margin: 0 auto; width: 90vw; margin: 0 auto; } .serviceContent__text { padding-top: 20px } .service { margin-bottom: 8rem; } .serviceItemOuter { display: block; width: 90vw; margin: 0 auto; } .serviceItem { width: 100%; margin-right: 0; margin-bottom: 60px; } .arrow_box { width: 80%; line-height: 1.4; margin: 0 auto 8%; z-index: -1; } .serviceItem img { width: 100%; height: 200px; /* margin-bottom: 8%; */ margin: 0 auto 4%; /* display: inline-block; */ } .service__attentionContent { /* padding: 0 10%; */ width: 90vw; margin: 0 auto; padding: 0; } .service__attention__title { line-height: normal; } .service__attention__title h4 { display: inline; font-size: 2rem; } .serviceBanner { padding: 6%; } .serviceBanner { padding: 6%; width: 90vw; margin: 0 auto; } // 会社概要 table { width: 90vw; tr { display: flex; flex-wrap: wrap; th { width: 100%; } td { padding-left: 10%; } } } .map { width: 90vw; height: auto; margin: 0 auto; padding-top: 80px; .mapInner { width: 100%; display: block; // flex-wrap: wrap; .map_content { width: 100%; height: auto; padding: 20px 0; .mapArea { z-index: -1; } } } } .privacy { margin: 0 auto; width: 90vw; &__inner { padding: 4rem 2rem; } } .contactText { width: 90vw; margin: 0 auto; text-align: left; } form { width: 90vw; } .Form-Item-Input { width: 80vw; } .Form-Item-Textarea { width: 80vw; } .sitemapLink a { width: 100%; margin: 4% 0; } // .404title { // font-size: 20px; // } }