`要素を使うようなセクションの余白を管理します。 * button_bordergap...ボーダーがずれたデザインのボタンコンポーネントです。 * button_flat...フラットデザインのボタンコンポーネントです。 * g-navi_header...ヘッダー内のg-naviのコンポーネントです。 * g-navi_main...メイン内のg-naviのコンポーネントです。 * title...title内のコンポーネントです。 * pick-up_simple...写真とテキストが上下に並んだデザインのpick-up内のコンポーネントです。 * pick-up_overlap...写真にテキストが重なったデザインのpick-up内のコンポーネントです * pick-up_mini-photo...写真が小さいデザインのpick-up内のコンポーネントです * concept_1col...concept内の1カラム用コンポーネントです。 * concept_2cols...concept内の2カラム用コンポーネントです。 * concept_overlap...concept内の画像にテキストをかぶせたデザイン用コンポーネントです。 * concept_alternate...concept内の画像とテキストを交互に入れ替えたデザイン用コンポーネントです。 * news...news内のコンポーネントです。 * access_2cols...access内の2カラム用のコンポーネントです。 * access_3cols...access内の3カラム用コンポーネントです。 * bg-triangle...bg-triangleデザインのコンポーネントです。 * page-top...page-topのスタイルです。 * list_accordion...リストのアコーディオンスタイルです。 * newsletter...速報のスタイルです。 * js-animate...js制御のアニメーションへのスタイルです。 * * CONTENTS * index ...indexのスタイルです。 * company ...companyのスタイルです。 * goods ...goodsのスタイルです。 * question ...questionのスタイルです。 * oroshi ...oroshiのスタイルです。 * */ /** * このスタイルシートは[SMACSS]をベースにしています。 * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。 */ /*============================================================================= #Base ==========================================================================*/ /* =================================== !defaultはデフォルト設定のため基本触らない。修正の場合は上に追加して上書きすること。 ==================================== */ /*=================================== ここまで ====================================*/ /* 上下左右 */ /*3色*/ /*4色*/ /* 円形 */ @keyframes AnimationGradient { 0% { background-position: 0% 30%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 30%; } } @keyframes fade-slider { 0% { opacity: 0; transform: scale(1.15); } 5.55556% { opacity: 1; } 33.33333% { opacity: 1; } 38.88889% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } } /*! sanitize.css v4.0.0 | CC0 License | github.com/10up/sanitize.css */ /* Display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Elements of HTML (https://www.w3.org/TR/html5/semantics.html) ========================================================================== */ /** * 1. Remove repeating backgrounds in all browsers (opinionated). * 2. Add box sizing inheritence in all browsers (opinionated). */ *, ::before, ::after { background-repeat: no-repeat; /* 1 */ box-sizing: inherit; /* 2 */ } /** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritence in all browsers (opinionated). */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; /* 2 */ } /** * 1. Add border box sizing in all browsers (opinionated). * 2. Add the default cursor in all browsers (opinionated). * 3. Add a flattened line height in all browsers (opinionated). * 4. Prevent font size adjustments after orientation changes in IE and iOS. */ html { box-sizing: border-box; /* 1 */ cursor: default; /* 2 */ font-family: sans-serif; /* 3 */ line-height: 1.5; /* 3 */ -ms-text-size-adjust: 100%; /* 4 */ -webkit-text-size-adjust: 100%; /* 5 */ } /* Sections (https://www.w3.org/TR/html5/sections.html) ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Correct the font sizes and margins on `h1` elements within * `section` and `article` contexts in Chrome, Firefox, and Safari. */ /*h1 { font-size: 2em; margin: .67em 0; } */ /* Grouping content (https://www.w3.org/TR/html5/grouping-content.html) ========================================================================== */ /** * 1. Correct font sizing inheritance and scaling in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 1. Correct the height in Firefox. * 2. Add visible overflow in Edge and IE. */ hr { height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * Remove the list style on navigation lists in all browsers (opinionated). */ nav ol, nav ul { list-style: none; } /* Text-level semantics ========================================================================== */ /** * 1. Add a bordered underline effect in all browsers. * 2. Remove text decoration in Firefox 40+. */ abbr[title] { border-bottom: 1px dotted; /* 1 */ text-decoration: none; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct colors in IE 9-. */ mark { background-color: #ffff00; color: #000000; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the font size in all browsers. */ small { font-size: 83.3333%; } /** * Change the positioning on superscript and subscript elements * in all browsers (opinionated). * 1. Correct the font size in all browsers. */ sub, sup { font-size: 83.3333%; /* 1 */ line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } /* * Remove the text shadow on text selections (opinionated). * 1. Restore the coloring undone by defining the text shadow (opinionated). */ ::-moz-selection { background-color: #b3d4fc; /* 1 */ color: #000000; /* 1 */ text-shadow: none; } ::selection { background-color: #b3d4fc; /* 1 */ color: #000000; /* 1 */ text-shadow: none; } /* Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html) ========================================================================== */ /* * Change the alignment on media elements in all browers (opinionated). */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Change the fill color to match the text color in all browsers (opinionated). */ svg { fill: currentColor; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Links (https://www.w3.org/TR/html5/links.html#links) ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove the gaps in underlines in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline when hovering in all browsers (opinionated. */ :hover { outline-width: 0; } /* Tabular data (https://www.w3.org/TR/html5/tabular-data.html) ========================================================================== */ /* * Remove border spacing in all browsers (opinionated). */ table { border-collapse: collapse; border-spacing: 0; } /* transform-style: (https://www.w3.org/TR/html5/forms.html) ========================================================================== */ /** * 1. Remove the default styling in all browsers (opinionated). * 3. Remove the margin in Firefox and Safari. */ /*button,*/ input, select, textarea { background-color: transparent; /* 1 */ border-style: none; /* 1 */ color: inherit; /* 1 */ font-size: 1em; /* 1 */ margin: 0; /* 3 */ } /** * Correct the overflow in IE. * 1. Correct the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance in Edge, Firefox, and IE. * 1. Remove the inheritance in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent the WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Correct the focus styles unset by the previous rule. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the border, margin, and padding in all browsers. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 2 */ white-space: normal; /* 1 */ } /** * 1. Remove the vertical scrollbar in IE. * 2. Change the resize direction on textareas in all browsers (opinionated). */ textarea { overflow: auto; /* 1 */ resize: vertical; /* 2 */ } /** * Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { padding: 0; } /** * Correct the cursor style on increment and decrement buttons in Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari for OS X. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style on placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: .54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria) ========================================================================== */ /** * Change the cursor on busy elements (opinionated). */ [aria-busy="true"] { cursor: progress; } /* * Change the cursor on control elements (opinionated). */ [aria-controls] { cursor: pointer; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements (opinionated). */ [aria-disabled] { cursor: default; } /* User interaction (https://www.w3.org/TR/html5/editing.html) ========================================================================== */ /* * Remove the tapping delay on clickable elements (opinionated). * 1. Remove the tapping delay in IE 10. */ a, area, button, input, label, select, textarea, [tabindex] { -ms-touch-action: manipulation; /* 1 */ touch-action: manipulation; } /* * Change the display on visually hidden accessible elements (opinionated). */ [hidden][aria-hidden="false"] { clip: rect(0, 0, 0, 0); display: inherit; position: absolute; } [hidden][aria-hidden="false"]:focus { clip: auto; } * { padding: 0; margin: 0; } ul li, ol li { list-style: none; } html { font-size: 62.5%; } address { font-style: normal; } /*364行目変更*/ button { cursor: pointer; } /* #Base -------------------------------------------------------------------------- */ /** * Baseレイヤーにはプロジェクトにおける、基本的なベーススタイルを定義します。 * 要素セレクタや属性セレクタなど、詳細度はできるかぎり低く保っておきます。 * 基本的にclass属性は使用しません。 */ /** * `padding`と`border`を`width`に含めます。 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *, *:before, *:after { box-sizing: inherit; } html { font-size: 0.8em; line-height: 1.6; min-height: 100%; box-sizing: border-box; scroll-behavior: smooth; } @media screen and (min-width: 768px) { html { font-size: 1em; } } body { color: #000; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: 400; /* アンチエイリアスを指定する */ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; /* メトリクスカーニングを指定する */ font-kerning: normal; background-color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 600; line-height: 1.4; color: inherit; } /* h1 {} h2 {} h3 {} h4 {} h5 {} h6 {} */ /** * ネストされたリストのマージンをリセットします。 */ li > ul, li > ol { margin-bottom: 0; } /** * `dt`と`dd`の左端を揃えます。 */ dd { margin-left: 0; } table { width: 100%; } th { text-align: left; } a { text-decoration: underline; color: #e25b00; } a:visited { color: #7c3200; } a:hover, a:active, a:focus { text-decoration: underline; color: #ff9249; } /** * フルードイメージにします。 */ img { max-width: 100%; height: auto; vertical-align: middle; } /** * IEでSVGがフルードイメージにならない不具合があります。 * 属性値が`.svg`で終わる要素に適応します。 */ [src$=".svg"], [data$=".svg"] { width: 100%; } /** * 日本語では斜体を使用しないためリセットします。 */ i, cite, em, address, dfn { font-style: normal; } code, pre { font-family: Consolas, Menlo, Courier, monospace; } code { padding: 0.2em; border-radius: 4px; font-size: 1.2em; background-color: rgba(0, 0, 0, 0.06); } pre code { padding: 0; font-size: 1.2em; background-color: inherit; } h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, p, address, hr, table, fieldset, figure, pre { margin-top: 0; margin-bottom: 0; } .l-header { width: 100%; position: relative; background-color: #fff; min-height: 80px; } @media screen and (max-width: 767px) { .l-header { min-height: 64px; } } .l-header-wrap { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: baseline; max-width: 1064px; margin: auto; font-family: "Times New Roman", "游明朝", "YuMincho", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif; font-weight: 400; } @media screen and (max-width: 929px) { .l-header-wrap { justify-content: space-around; } } @media screen and (max-width: 767px) { .l-header-wrap { justify-content: space-between; align-items: center; } } .l-header__logo { padding: 1em 0 0 1em; } .logo-wrap { display: inline-block; text-align: center; text-decoration: none; line-height: 1; } .logo-wrap:visited { color: #e25b00; } .logo-wrap:hover, .logo-wrap:active, .logo-wrap:focus { color: #ff9249; text-decoration: none; } .logo-wrap .sub-title { font-size: 0.8em; } .logo { font-size: 2em; font-weight: 600; line-height: 1.4; } .logo::before { content: ''; background: url(../img/common/logo.png) no-repeat; background-size: 100%; width: 1.5em; height: 1em; display: inline-block; margin-right: 6px; vertical-align: middle; } @media screen and (max-width: 767px) { .logo::before { width: 1.6em; height: 1em; } } .l-footer { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; width: 100%; min-height: 140px; background-color: #F3F3F3; color: #e25b00; font-size: 0.875em; font-family: "Times New Roman", "游明朝", "YuMincho", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif; font-weight: 400; } .l-footer__logo-wrap { position: relative; width: 35%; background: #e25b00; } @media screen and (max-width: 607px) { .l-footer__logo-wrap { width: 100%; } } .l-footer__logo { width: 100%; max-width: 308px; padding: 2em; margin-right: 0; margin-left: auto; color: #fff; } .l-footer__logo .sub-title { font-size: 0.93em; } .l-footer__logo>a { color: #fff; font-size: 1.7em; text-decoration: none; } @media screen and (max-width: 607px) { .l-footer__logo { width: 100%; padding: 1em 1.5em; margin-left: 0; } } .l-footer__items-wrap { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; width: 65%; margin: auto; } @media screen and (max-width: 607px) { .l-footer__items-wrap { display: block; width: 100%; } } .l-footer__item { padding: 1em; margin-left: 0; margin-right: auto; color: #000; line-height: 1.9; } .l-footer__item:first-child { padding-bottom: 0.5em; } .l-footer__item .g-navi__item { display: inline; padding-right: 0; margin: 0.2em; } .l-footer__copyright { width: 100%; padding: 1em; color: #fff; text-align: center; background: #281B10; } .l-main { width: 100%; min-height: calc(100vh - (80px + 140px)); padding-top: 2.5em; background: #FFF8EE; font-family: "Times New Roman", "游明朝", "YuMincho", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif; } .l-section { width: 100%; padding: 0 2.5em 2.5em; text-align: center; } .button { display: block; padding: 1.5em; width: 200px; border: none; border-radius: 4px; color: #fff; font-family: inherit; font-size: inherit; line-height: 1; text-align: center; text-decoration: none; background: #e25b00; cursor: pointer; } .button:hover, .button:active, .button:focus { color: #fff; text-decoration: none; } .button:visited { color: #fff; } .button:disabled, .button.is-disabled { opacity: 0.5; pointer-events: none; } .l-header-wrap .navi-button { display: none; } .l-header-wrap .l-header__g-navi.open { display: block; } .l-header-wrap .l-header__g-navi.close { display: none; } .l-header-wrap .g-navi__item { display: inline-block; font-size: 1.3em; transition: all .3s ease-in-out; } .l-header-wrap .g-navi__item:hover, .l-header-wrap .g-navi__item:active, .l-header-wrap .g-navi__item:focus { background-color: #e25b00; } .l-header-wrap .g-navi__link { display: inline-block; width: 100%; padding: 0.4em; transition: all .3s ease-in-out; } .l-header-wrap .g-navi__link:hover, .l-header-wrap .g-navi__link:active, .l-header-wrap .g-navi__link:focus { color: #fff; } .g-navi__item img.pc, .g-navi__item img.sp{ width: 100%; max-width: 1.429em; } .g-navi__item img.pc { display: inline-block; } .g-navi__item .sp { display: none; } .g-navi__link:hover img.pc, .g-navi__link:active img.pc, .g-navi__link:focus img.pc{ display: none; } .g-navi__link:hover img.sp, .g-navi__link:active img.sp, .g-navi__link:focus img.sp{ display: inline-block; } @media screen and (min-width: 768px) { .l-header-wrap .l-header__g-navi, .l-header-wrap .l-header__g-navi.close { display: block; } } @media screen and (max-width: 767px) { .l-header-wrap { /*メニューボタンのエフェクト*/ } .l-header-wrap .navi-button { display: block; margin: 1.5em 0.8em 1em; cursor: pointer; } .l-header-wrap .navi-button:hover span, .l-header-wrap .navi-button:active span, .l-header-wrap .navi-button:focus span { background: #ff9249; } .l-header-wrap .l-header__g-navi { position: fixed; left: 0; top: 0; display: none; padding-top: 5em; z-index: 10; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; } .l-header-wrap .l-header__g-navi .g-navi { height: 100%; position: relative; overflow-x: hidden; overflow-y: auto; } .l-header-wrap .l-header__g-navi .g-navi__item { display: block; } .l-header-wrap .l-header__g-navi .g-navi__item .g-navi__link { color: #fff; transition: all .3s ease-in-out; } .g-navi__item img.pc, .g-navi__item img.sp{ margin-right: 0.5em; } .g-navi__item .sp.link__label { display: inline; } .l-header-wrap .navi-button, .l-header-wrap .navi-button span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .l-header-wrap .navi-button { z-index: 20; position: relative; width: 32px; height: 24px; } .l-header-wrap .navi-button span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #e25b00; border-radius: 4px; } .l-header-wrap .navi-button span:nth-of-type(1) { top: 0; } .l-header-wrap .navi-button span:nth-of-type(2) { top: 13px; } .l-header-wrap .navi-button span:nth-of-type(3) { bottom: -6px; } .l-header-wrap .navi-button.active span:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); } .l-header-wrap .navi-button.active span:nth-of-type(2) { opacity: 0; } .l-header-wrap .navi-button.active span:nth-of-type(3) { transform: translateY(-13px) rotate(45deg); } } .section-title { position: relative; display: inline-block; text-align: center; padding: 0 2.5em 0.5em; margin: 0 auto 2em; } .section-title::after { position: absolute; content: ''; display: block; width: 100%; height: 2px; -webkit-transition: all .6s linear; transition: all .6s linear; background: transparent; background: -webkit-linear-gradient(90deg, transparent 0%, #e25b00 30%, #e25b00 70%, transparent 100%); background: -ms-linear-gradient(90deg, transparent 0%, #e25b00 30%, #e25b00 70%, transparent 100%); background: linear-gradient(90deg, transparent 0%, #e25b00 30%, #e25b00 70%, transparent 100%); bottom: 0; left: 0; } h1.section-title { font-size: 1.5em; } h2.section-title { font-size: 1.3em; } h3.section-title { font-size: 1.2em; } .js-waypoint.on .section-title::after { width: 0; } .l-pick-up--mini-photo .section-title { font-size: 1.5em; } .l-pick-up--mini-photo .pick-up { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; max-width: 1280px; margin: 0 auto; text-align: left; } @media screen and (min-width: 1100px) { .l-pick-up--mini-photo .pick-up { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; } } .l-pick-up--mini-photo .pick-up__item { width: 100%; max-width: calc(308px - 0.5em); margin: 0 0.25em 1em; border: 1px solid #bbb; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.16); } .l-pick-up--mini-photo .pick-up__item .img { transition: transform 0.3s linear; } .l-pick-up--mini-photo .pick-up__item:hover .img, .l-pick-up--mini-photo .pick-up__item:active .img, .l-pick-up--mini-photo .pick-up__item:focus .img { transform: scale(1.06); } .l-pick-up--mini-photo .pick-up__item, .l-pick-up--mini-photo .pick-up__item:hover, .l-pick-up--mini-photo .pick-up__item:active, .l-pick-up--mini-photo .pick-up__item:focus { text-decoration: none; } .l-pick-up--mini-photo .pick-up__img { width: 100%; height: 14em; overflow: hidden; } .l-pick-up--mini-photo .pick-up__img .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .l-pick-up--mini-photo .pick-up__caption-wrap { height: calc(100% - 14em); padding: 1em; background: #fff; border-bottom: 1px solid #e25b00; color: #000; } .l-pick-up--mini-photo .pick-up__caption-title { padding-bottom: 0.5em; font-weight: 600; } .l-pick-up--mini-photo .pick-up__caption-text { font-size: 0.95em; line-height: 1.4; } .l-pick-up--mini-photo .pick-up__caption-price { color: #b40612; padding-top: 1em; text-align: right; } @media print { .l-pick-up--mini-photo { padding: 0; page-break-after: always; } .l-pick-up--mini-photo:last-of-type { page-break-after: auto !important; } .pick-up__item { width: 32% !important; min-width: 200px !important; } } .l-concept--1col { padding: 0 0 2.5em; } .l-concept--1col .concept__img-wrap { max-width: 1064px; height: 360px; margin: auto; width: 100%; height: 18em; } .l-concept--1col .concept__img-wrap .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .l-concept--1col .concept__text-wrap { position: relative; width: 88%; max-width: 848px; padding: 2em 3em; margin: -2em auto 0; text-align: left; z-index: 1; transition: all .3s; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.16); background: rgba(255, 255, 255, 0.6); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); background: linear-gradient(0, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); background-size: 200%; animation: AnimationGradient 4s ease infinite; } @media screen and (max-width: 767px) { .l-concept--1col .concept__text-wrap { padding: 1.5em; } } .l-concept--1col .section-title { padding: 0.5em; margin: 0px auto 0.5em; } .l-concept--1col .section-title::after { background: #e25b00; background: -webkit-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: -ms-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: linear-gradient(90deg, #e25b00 0%, transparent 100%); } .l-concept--1col .text { padding: 0 1em; line-height: 2.2; } .l-concept--overlup { margin-bottom: 2.5em; } .l-concept--overlup .concept { position: relative; } .l-concept--overlup .concept .image-wrap--full { width: 100%; height: 15.5em; overflow: hidden; } .l-concept--overlup .concept .image-wrap--full .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .l-concept--overlup .concept .image-wrap--full .img { transition: transform 0.3s linear; } .l-concept--overlup .concept .image-wrap--full:hover .img, .l-concept--overlup .concept .image-wrap--full:active .img, .l-concept--overlup .concept .image-wrap--full:focus .img { transform: scale(1.06); } @media screen and (max-width: 607px) { .l-concept--overlup .concept .image-wrap--full { height: 8em; } } .l-concept--overlup .concept-link { color: #000; text-decoration: none; } .l-concept--overlup .concept__item { position: absolute; top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; background: rgba(255, 255, 255, 0.8); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%); background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%); background: linear-gradient(0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%); background-size: 200%; animation: AnimationGradient 4s ease infinite; width: 56%; max-width: 632px; height: 100%; padding: 1em 0; transition: all .3s; } @media screen and (max-width: 607px) { .l-concept--overlup .concept__item { position: relative; width: 100%; max-width: 100%; transform: none; } } .l-concept--overlup .concept__item::after { position: absolute; content: ''; display: inline-block; width: 1em; height: 1em; border: 0; border-top: solid 2px #e25b00; border-right: solid 2px #e25b00; transform: rotate(45deg); top: 50%; right: 16px; } .l-concept--overlup .section-title-wrap, .l-concept--overlup .concept__text { width: 84%; max-width: 524px; margin-right: 20%; margin-left: 6%; } .l-concept--overlup .section-title-wrap { margin-bottom: 0.5em; } .l-concept--overlup .section-title-wrap .sub-section-title { font-size: 0.8em; } .l-concept--overlup .section-title-wrap .section-title { padding: 0 1em 0 0; margin: 0; text-align: left; font-size: 1.5em; } .l-concept--overlup .section-title-wrap .section-title::after { background: #e25b00; background: -webkit-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: -ms-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: linear-gradient(90deg, #e25b00 0%, transparent 100%); } .l-concept--overlup .concept__text { line-height: 1.8; } .l-concept--alternate .concept { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; max-width: 1064px; margin: 0 auto 2.5em; transition: all .3s; } .l-concept--alternate .concept .section-title { position: relative; padding: 0.5em; margin-bottom: -6px; z-index: 2; } @media screen and (max-width: 607px) { .l-concept--alternate .concept .section-title { display: block; } } .l-concept--alternate .concept__img { min-width: 18em; max-width: 524px; width: 49%; height: 100%; } .l-concept--alternate .concept__img .img { height: inherit; width: 100%; object-fit: contain; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: contain; object-position: 50% 50%;'; /* IE・Edge対応 */ } @media screen and (max-width: 607px) { .l-concept--alternate .concept__img { width: 80%; margin: auto; } } .l-concept--alternate .concept:first-of-type .concept__img { max-height: 25em; height: auto; } .l-concept--alternate .concept:first-of-type img { width: auto; height: 100%; } @media screen and (max-width: 607px) { .l-concept--alternate .concept:first-of-type .concept__img { width: 60%; max-height: inherit; } .l-concept--alternate .concept:first-of-type img { width: 100%; height: 100%; } } .l-concept--alternate .concept:nth-of-type(2n) .concept__img { order: 1; } @media screen and (max-width: 767px) { .l-concept--alternate .concept:nth-of-type(2n) .concept__img { order: 0; } } .l-concept--alternate .concept:nth-of-type(2n) .concept__item { order: 0; } @media screen and (max-width: 767px) { .l-concept--alternate .concept:nth-of-type(2n) .concept__item { order: 1; } } .l-concept--alternate .concept img { border: 8px solid #fff; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.16); } .l-concept--alternate .concept__item { width: 50%; padding: 1em 2em; text-align: left; } .l-concept--alternate .concept__item .section-title::after { background: #e25b00; background: -webkit-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: -ms-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: linear-gradient(90deg, #e25b00 0%, transparent 100%); } @media screen and (max-width: 607px) { .l-concept--alternate .concept__item { width: 100%; max-width: 416px; padding: 1em; margin: auto; } } .l-concept--alternate .concept__text { width: 100%; max-width: 492px; line-height: 2; padding: 1em; align-self: center; } @media screen and (max-width: 767px) { .l-concept--alternate .concept__text { width: 100%; max-width: 416px; padding: 1.5em; margin: auto; } } .l-access--2cols { background: #fff; } .l-access--2cols .access__company-info { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; max-width: 848px; margin: auto; font-size: 1.125em; margin-bottom: 2em; } .l-access--2cols .access__item-texts, .l-access--2cols .access__item-img { max-width: 416px; margin-bottom: 2em; } .l-access--2cols .access__item-texts { padding-left: 1em; text-align: left; line-height: 1.8; } .l-access--2cols .access__item-img { width: 100%; height: 15em; } .l-access--2cols .access__item-img .img { height: inherit; width: 100%; object-fit: contain; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: contain; object-position: 50% 50%;'; /* IE・Edge対応 */ } .l-access--3cols { background: #fff; } .l-access--3cols .access__company-info { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; max-width: 1280px; margin: auto; margin-bottom: 2em; } .l-access--3cols .access__item--links, .l-access--3cols .access__item-texts, .l-access--3cols .access__item-img { width: 33%; max-width: 416px; margin-bottom: 2em; } .l-access--3cols .link__banner { position: relative; width: 100%; height: 102px; display: block; margin-bottom: 2em; text-decoration: none; cursor: pointer; } .l-access--3cols .link__banner:last-of-type { margin-bottom: 0; } .l-access--3cols .link__banner--text { position: relative; color: #fff; font-size: 1.2em; line-height: 102px; text-align: center; z-index: 2; } .l-access--3cols .access__item-texts { padding: 0 1em; line-height: 1.8; font-size: 1em; text-align: left; } .l-access--3cols .access__item-texts a { color: #000; } .l-access--3cols .access__item-img { width: 100%; height: 15em; width: 33%; } .l-access--3cols .access__item-img .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } @media screen and (max-width: 767px) { .l-access--3cols .access__item--links, .l-access--3cols .access__item-texts, .l-access--3cols .access__item-img { width: 100%; } } #page-top { position: fixed; bottom: 1em; right: 1em; z-index: 2; } @media print { #page-top { display: none; } } #page-top .button { width: 72px; height: 72px; padding: 0.5em; line-height: 1.2; float: none; border-radius: 0; transition: all 0.3s ease-out; } #page-top .button:hover, #page-top .button:active, #page-top .button:focus { font-weight: 600; background: #fff; border: 2px solid #e25b00; color: #e25b00; } @media screen and (max-width: 767px) { #page-top .button { width: 64px; height: 64px; padding: 1em; } } #page-top .page-top-text { position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; } .reference-wrap { position: relative; overflow: hidden; } .reference-wrap .image-wrap--full { width: 100%; height: 100%; position: absolute; } .reference-wrap .image-wrap--full .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .reference-wrap .image-wrap--full::after { position: absolute; content: ''; width: inherit; height: inherit; top: 0; left: 0; background: rgba(0, 0, 0, 0.48); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); background: linear-gradient(0, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); } .reference-box { position: relative; width: 90%; max-width: 1064px; padding: 1em; margin: 0 auto 2.5em; text-align: center; border: 2px solid #e25b00; z-index: 1; } .reference-box::before, .reference-box::after { position: absolute; content: ''; } .reference-box::before { width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.48); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); background: linear-gradient(0, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); } .reference-box::after { position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: calc(100% - 1em); height: calc(100% - 1em); border: 2px solid #e25b00; } .reference__item--image, .reference__item--text, .reference__item--tel, .reference__item--fax { position: relative; padding-bottom: 0.5em; color: #fff; z-index: 1; } .reference__item--image, .reference__item--text { padding-top: 0.5em; } .reference__item--image { width: 16px; height: 20px; padding: 0; } .reference__item--image .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .reference__item--tel, .reference__item--fax { display: inline-block; padding-right: 0.5em; padding-left: 0.5em; font-size: 1.5em; } .reference__item--tel { text-decoration: none; } .reference__item .reference__item--text { position: relative; display: inline-block; vertical-align: middle; padding-left: 2em; } .reference__item .reference__item--text::before { position: absolute; content: ''; display: inherit; background: url(../img/common/tel.png) no-repeat; background-size: 100%; width: 16px; height: 20px; top: 0; bottom: 0; left: 3px; margin: auto; } @media screen and (max-width: 399px) { .reference__item .reference__item--text { text-align: left; } } @media screen and (max-width: 399px) { .reference__item { max-width: 20em; margin: auto; } .reference__item .text-br { display: inline-block; } } .appeal-box { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; max-width: 1064px; padding: 2.5em 1em; margin: 0 auto; } @media screen and (max-width: 999px) { .appeal-box { justify-content: space-around; } } .appeal__item { position: relative; width: 32%; max-width: 300px; padding: 0.8em; background: #F3BD99; z-index: 1; } @media screen and (max-width: 999px) { .appeal__item { max-width: 220px; } } @media screen and (max-width: 607px) { .appeal__item { width: 100%; max-width: 308px; padding: 0.8em 1.6em; margin: 0 auto 1em; text-align: left; } } .appeal__item--image { width: 64px; height: 64px; } .appeal__item--image .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } @media screen and (max-width: 999px) { .appeal__item--image { width: 56px; height: 56px; display: block; margin: 0 auto 0.5em; } .appeal__item--image .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } } @media screen and (max-width: 607px) { .appeal__item--image { display: inline; margin: 0; } } .appeal__item--text { display: inline-block; vertical-align: middle; padding-left: 0.5em; text-align: left; } @media screen and (max-width: 999px) { .appeal__item--text { display: block; padding-left: 0; text-align: center; } } @media screen and (max-width: 607px) { .appeal__item--text { display: inline-block; padding-left: 0.5em; text-align: left; } } .l-list--accordion { max-width: 848px; padding: 0 2em 2.5em; margin: auto; text-align: left; } .l-list--accordion .accordion__button { position: relative; width: 100%; display: block; background: #fff; padding: 1em 5em; border: 0; border-top: 2px solid #f3f3f3; font-size: 1em; font-family: inherit; text-align: left; cursor: pointer; } .l-list--accordion .accordion__button:last-of-type { border-bottom: 2px solid #f3f3f3; } .l-list--accordion .accordion__button::after { position: absolute; content: ''; display: inline-block; width: 1em; height: 1em; border: 0; border-right: solid 2px #e25b00; border-bottom: solid 2px #e25b00; transform: rotate(45deg); top: 0; right: 2em; bottom: 0; margin: auto; } .l-list--accordion .accordion__button.is-open::after { transform: rotate(225deg); } .l-list--accordion .accordion__button::before, .l-list--accordion .inner__text-wrap::before { position: absolute; width: 2em; height: 2em; display: inline-block; line-height: 2; border-radius: 50%; text-align: center; top: 0; bottom: 0; left: 1.5em; margin: auto; } .l-list--accordion .accordion__button::before { content: '?'; background: #0088e3; color: #fff; } .l-list--accordion .accordion__inner { font-size: 1em; } .l-list--accordion .accordion__inner .text { /* 閉じている状態 */ line-height: 0; opacity: 0; visibility: hidden; /* 閉じるアニメーション */ transition: line-height .3s ease-out, opacity .1s linear, visibility .1s linear; } .l-list--accordion .accordion__inner.is-open .inner__text-wrap { position: relative; width: 100%; display: inline-block; padding: 1em 1.5em 1em 5em; border-bottom: 2px solid #f3f3f3; background: #f3f3f3; transition: border-top .3s ease-out, padding-top .3s ease-out, padding-bottom .3s ease-out; } .l-list--accordion .accordion__inner.is-open .inner__text-wrap:first-of-type { border-top: 2px solid #f3f3f3; } .l-list--accordion .accordion__inner.is-open .inner__text-wrap::before { content: '!'; background: #e25b00; color: #fff; } .l-list--accordion .accordion__inner.is-open .inner__text-wrap .text { display: inline; line-height: 1.5; opacity: 1; visibility: visible; /* 開くアニメーション */ transition: line-height .3s ease-out, opacity .1s linear .1s, visibility .1s linear .1s; } @media screen and (max-width: 399px) { .l-list--accordion .accordion__button { padding: 1em 2.5em 1em 4em; } .l-list--accordion .accordion__button::after { width: 0.8em; height: 0.8em; right: 1.2em; } .l-list--accordion .accordion__button::before, .l-list--accordion .inner__text-wrap::before { left: 1em; } .l-list--accordion .accordion__inner.is-open .inner__text-wrap { padding: 1em 1.5em 1em 4em; } } .newsletter-wrap { width: 100%; background: #FFF8EE; padding: 1em; top: 0; z-index: 1; } .newsletter__box { width: 100%; max-width: 848px; margin: auto; } .newsletter__title, .newsletter__text { display: inline-block; padding: 0.5em; vertical-align: middle; } .newsletter__title { width: 100%; max-width: 6em; font-size: 1.08em; font-weight: 600; text-align: center; } .newsletter__text { position: relative; padding-left: 2em; width: 100%; max-width: calc(100% - 8em); background: #fff; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.16); line-height: 1.8; font-size: 0.9em; } .newsletter__text::before { content: ' '; position: absolute; width: 0; border: 16px solid transparent; border-left-color: #FFF8EE; top: calc(50% - 16px); left: 0; } @media print { .js-animate-bottom, .js-animate-left { opacity: 1 !important; transition: none !important; transform: none !important; } } .index.l-main { padding-top: 0; } .first-view { position: relative; display: flex; justify-content: center; align-items: center; height: auto; padding-bottom: 8em; margin-bottom: 0.5em; background: #fff; overflow: hidden; } @media screen and (max-width: 767px) { .first-view { padding-bottom: 16em; } } .slide { position: absolute; width: 100%; height: 100%; } .slide>img { position: absolute; height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ opacity: 0; animation: fade-slider 18s linear infinite; } .slide>img:nth-child(1) { animation-delay: -1s; } .slide>img:nth-child(2) { animation-delay: 5s; } .slide>img:nth-child(3) { animation-delay: 11s; } .first-view__text { position: relative; width: 100%; max-width: 632px; margin: 4em 0; padding: 2.5em; background: rgba(255, 255, 255, 0.8); line-height: 2; transition: all .3s; } .first-view__text strong { position: relative; display: inline-block; } .first-view__text strong::after { position: absolute; content: ''; display: block; width: 100%; height: 2px; -webkit-transition: all .6s linear; transition: all .6s linear; background: #e25b00; background: -webkit-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: -ms-linear-gradient(0deg, #e25b00 0%, transparent 100%); background: linear-gradient(90deg, #e25b00 0%, transparent 100%); bottom: 0; left: 0; } @media screen and (max-width: 767px) { .first-view__text { max-width: 96%; } } .specially-wrap { position: absolute; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; width: 100%; bottom: 0; } .specially-button { position: relative; text-align: center; width: 100%; height: 8em; width: 25%; overflow: hidden; } .specially-button .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .specially-button .img { transition: transform 0.3s linear; } .specially-button:hover .img, .specially-button:active .img, .specially-button:focus .img { transform: scale(1.06); } @media screen and (max-width: 767px) { .specially-button { width: 50%; } } .specially-text-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; } .specially-text-wrap::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.48); background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); background: linear-gradient(0, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%); } .specially-text-wrap:hover::before, .specially-text-wrap:active::before, .specially-text-wrap:focus::before { background: rgba(226, 91, 0, 0.78); background: -webkit-linear-gradient(90deg, rgba(226, 91, 0, 0.78) 0%, rgba(226, 91, 0, 0.78) 100%); background: -ms-linear-gradient(90deg, rgba(226, 91, 0, 0.78) 0%, rgba(226, 91, 0, 0.78) 100%); background: linear-gradient(0, rgba(226, 91, 0, 0.78) 0%, rgba(226, 91, 0, 0.78) 100%); } .specially-text { position: absolute; top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; color: #fff; font-size: 1.2em; } .l-pick-up--mini-photo .button { transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99); margin: auto; } .l-pick-up--mini-photo .button:hover, .l-pick-up--mini-photo .button:active, .l-pick-up--mini-photo .button:focus { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 32px 32px rgba(0, 0, 0, 0.15), 8px 64px 64px rgba(0, 0, 0, 0.15); transform: scale(1.03) translateY(-0.3rem); } .l-access--3cols { padding-top: 2.5em; } .link__banner { background-size: 100%; } .link__banner:hover::after, .link__banner:active::after, .link__banner:focus::after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(226, 91, 0, 0.78); background: -webkit-linear-gradient(90deg, rgba(226, 91, 0, 0.78) 0%, rgba(226, 91, 0, 0.78) 100%); background: -ms-linear-gradient(90deg, rgba(226, 91, 0, 0.78) 0%, rgba(226, 91, 0, 0.78) 100%); background: linear-gradient(0, rgba(226, 91, 0, 0.78) 0%, rgba(226, 91, 0, 0.78) 100%); z-index: 1; } #about { background: url(../img/pages/rekishi_01_s.jpg) no-repeat; } #question { background: url(../img/pages/question.jpg) no-repeat; } @media screen and (max-width: 607px) { .goods .text-br { display: inline-block; } } .goods .pick-up { max-width: 1064px; } .goods .pick-up__item { width: 32%; min-width: 292px; max-width: 332px; margin-bottom: 2em; } .goods .pick-up__item:hover .img, .goods .pick-up__item:active .img, .goods .pick-up__item:focus .img { transform: none; } .goods .pick-up__img { width: 100%; height: 14em; } .goods .pick-up__img .img { height: inherit; width: 100%; object-fit: cover; /* 他のブラウザ用(＝通常の指定) */ object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */ font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE・Edge対応 */ } .goods .pick-up__caption-wrap { position: relative; max-height: calc(100% - 14em); padding-bottom: 4.4em; } .goods .pick-up__caption-wrap::after { position: absolute; content: ''; width: calc(100% - 2em); height: 1px; background: #ccc; right: 0; bottom: 3.5em; left: 0; margin: auto; } .goods .pick-up__caption-price { position: absolute; right: 1em; bottom: 1em; } .entry { text-align: center; } .entry .l-access--2cols { padding-top: 1em; } .entry .access__company-info, .entry .access__item-texts { margin-bottom: 0; } .question { text-align: center; background: #fff; } @media screen and (max-width: 399px) { .question .text-br { display: inline-block; } } .entry { text-align: center; } .entry .text-only { background: #fff; padding-top: 2em; padding-bottom: 0; } .entry .text-only .concept__text-wrap { max-width: 632px; margin: auto; } .entry .text-only .concept__text-wrap .text { padding: 0 1em; line-height: 2.2; text-align: left; } .entry .reference-wrap { background: #fff; } .entry .reference-wrap .reference__item { max-width: 17em; margin: auto; } .entry .reference-wrap .appeal__item { background: #E87C33; background: -webkit-linear-gradient(-60deg, #E87C33 0%, transparent 100%); background: -ms-linear-gradient(-60deg, #E87C33 0%, transparent 100%); background: linear-gradient(150deg, #E87C33 0%, transparent 100%); font-weight: 600; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.16); } .entry .reference-wrap .appeal__item--number { width: 2.1em; height: 2.1em; display: inline-block; background: #fff; border-radius: 50%; line-height: 2.1; color: #e25b00; font-size: 1.9em; font-family: "Helvetica Neue", Helvetica, "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-style: italic; text-align: center; vertical-align: middle; } /*# sourceMappingURL=style.css.map */