お問合せ・お見積り

@charset "UTF-8"; /* =================================== タグマネージャー =================================== */ /* =================================== 基本設定 =================================== */ html { overflow-y: scroll; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { padding: 0; margin: 0; font-style: normal; font-weight: normal; } li { list-style: none; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } /* =================================== 共通 =================================== */ /* フォント */ body { font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; } select, input, button, textarea { font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; } @media all and (-ms-high-contrast: none) { body { font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } } /* =================================== 画面全体のレイアウト =================================== */ /* 画面全体の表示設定 */ body { /* color: #333; text-align: center; */ /* フォームエリアを中央に表示 */ } /* フォームエリア全体の設定 */ div.container { /* フォントの初期サイズ */ margin: 0 auto; font-size: 16px; /* 画面の中央に表示 */ text-align: left; /* 左寄せ */ } /* =================================== 設問エリアのレイアウト =================================== */ /* 設問エリア全体の設定 */ div.wrapper { width: 940px; /* 画面の横幅 */ margin: 0 auto; /* 中央に表示 */ } /* 設問の行 */ tr.item { /* border-bottom: 1px solid #c9c9c9; */ } /* 必要であれば行のデザインを設定することができます */ /*設問名のセルのデザイン */ td.label { /* width: 200px; */ /* 実際の設問名の文字の長さに合わせて調整してください */ /* padding: 12px 12px; font-size: 16px; font-weight: bold; vertical-align: middle; */ /* ラベルの配置 セルの上部に表示したい場合は top */ } /* 設問の入力セルおよび表示セルのデザイン */ td.value { /* width: 500px; */ /* 入力コントロールの幅に合わせて調整してください */ /* padding: 12px 12px; */ } /* 設問の入力例/説明セルのデザイン */ td.comment { /* padding-left: 10px; color: DarkSlateGray; font-size: 14px; background: White; */ } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { /* padding-right: 5px; color: DarkSlateGray; font-size: 85%; font-weight: bold; */ } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { font-size: 110%; } /* ボタンの表示エリアの設定 */ div.button_area { /* width: 940px; */ /* padding: 10px 0 10px 0; */ /* margin: 10px auto 10px auto; */ /* ボタンとの上下の隙間のサイズ */ /* text-align: center; */ /* 中央に表示、上下に10pxの余白 */ /* background: GhostWhite; */ /* 中央にボタンを表示 */ } /* 入力エラーメッセージのデザイン */ div.message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; color: OrangeRed; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; background: LightYellow; } /* 公開終了メッセージのデザイン */ div.finished-message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; color: Crimson; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; background: MistyRose; } /* =================================== 入力コントロールのデザイン =================================== */ /* 確認／送信／戻る／登録ボタン */ .button_area { text-align: center; margin: 4rem 0; } @media screen and (min-width: 1024px) { .button_area input + input { margin-left: 2rem; } } @media screen and (max-width: 1023px) { .button_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .button_area input + input { margin-top: 1.25rem; } } input[type=button] { /* ボタンの色 */ /* padding: 5px 10px 2px 10px; */ /* ボタンの文字の 上 右 下 左 の隙間のサイズ */ /* margin: 0 10px 0 10px; */ /* ボタンに枠線をつけたい場合は、ここを設定してください */ /* color: white; font-size: 18px; */ /* 文字の色 */ /* font-weight: bold; background: SteelBlue; */ /* 確認画面に表示される2つのボタンの左右の余白サイズ */ border: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 0.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 4.0625rem; position: relative; border-radius: 0.75rem; background: #009E9F; -webkit-box-shadow: 0rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.1); box-shadow: 0rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.1); font-weight: bold; font-size: 0.875rem; text-align: center; color: #fff35b; -webkit-transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1); transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1); } input[type=button]#button_confirm_back { background: #ccc; color: #8d8d8d; } @media screen and (min-width: 1024px) { input[type=button] { width: 23.4375rem; padding-right: 1.25rem; height: 5rem; font-size: 1.125rem; } #frm_formthanks input[type=button] { width: 38.4375rem; } } input[type=button]:hover { cursor: pointer; border-color: #009E9F; background-color: #fff; color: #009E9F; } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type="text"]:focus { background-color: LightYellow; } /* テキストボックス */ select:focus { background-color: LightYellow; } /* プルダウン */ textarea:focus { background-color: LightYellow; } /* テキストエリア */ /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { float: right; margin-right: 4px; color: OrangeRed; font-size: 60%; font-weight: bold; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content: "※必須"; } /* 必須項目についての説明文 */ p.required_msg { margin-right: 4px; color: OrangeRed; font-size: 80%; font-weight: bold; text-align: right; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content: "「※必須」となっている項目は必ず入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin: 5px 0 1px 0; color: DarkSlateGray; font-size: 85%; font-weight: bold; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content: "確認のため、もう一度メールアドレスを入力してください"; } /* =================================== スマートフォン表示用のレイアウト =================================== */ /* スマートフォンとして認識する画面の横幅のサイズ */ @media screen and (max-width: 479px) { /* フォームエリア全体の設定 */ div.container { width: 100%; } /* 設問エリア全体の設定 */ div.wrapper { width: 100%; } /* 設問の表 */ table.items { width: 100%; } /*設問名のセルのデザイン */ td.label { /* float: left; width: 95%; height: 40px; padding-top: 10px; */ } /* 必須項目のマーク */ span.required { /* float: initial; */ } /* 設問の入力セルおよび表示セルのデザイン */ td.value { /* float: left; width: 95%; */ /* 入力コントロールの幅に合わせて調整してください */ /* padding-bottom: 0; */ } /* 設問の入力例/説明セルのデザイン */ td.comment { /* float: left; width: 95%; padding: 0 2px 10px 2px; */ } /* 設問の入力例/テキストボックス */ input[type="text"] { /* width: 95% !important; font-size: 120%; */ } /* 設問の入力例/テキストエリア */ textarea { /* width: 95%; */ height: 100px; } /* ボタンの表示エリアの設定 */ div.button_area { /* width: 95%; */ } } /* =================================== 上書き =================================== */ /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } /* change border colour to suit your needs */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } svg, img { max-width: 100%; vertical-align: middle; } li { list-style: none; } h1, h2, h3, h4, h5, h6, th, dt { font-weight: inherit; } article, main, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture { display: block; } .___ { -webkit-transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1); transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1); } :root { --color: $color; --header-height: 3.125rem; } @media screen and (min-width: 1024px) { :root { --header-height: 8rem; } :root .is-scrolled { --header-height: 5.375rem; } } .is-section-dark, .is-nav-open { --color: #fff; } /*---------------------------------------------------- フォーム ----------------------------------------------------*/ [hidden] { display: none !important; } [disabled] { cursor: not-allowed; } :focus:not(:focus-visible) { outline: none; } .sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); left: -9999px; top: -9999px; } input, select, label { vertical-align: middle; color: #363636; } [type=text] { line-height: normal; } input[type=text], input[type=email], input[type=tel], button { -webkit-appearance: none; padding: 0; border: none; border-radius: 0; outline: none; background: none; color: #363636; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif; } input[type=submit], button { cursor: pointer; } textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; } *:focus { outline: none; } /*---------------------------------------------------- フォント ----------------------------------------------------*/ html { font-size: 16px; } @media screen and (max-width: 640px) { html { font-size: 4.2666666667vw; } } @media screen and (min-width: 641px) and (max-width: 1023px) { html { font-size: 2.1333333333vw; } } @media screen and (min-width: 1024px) { html { font-size: 1.1713030747vw; } } @media screen and (min-width: 1521px) { html { font-size: 17.803806735px; } } body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; word-wrap: break-word; color: #363636; } .serif { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif; } /*---------------------------------------------------- レスポンシブ ----------------------------------------------------*/ @media screen and (min-width: 641px) { .sp { display: none; } } @media screen and (min-width: 1024px) { .sp-tab { display: none; } } @media screen and (max-width: 1023px) { .pc { display: none; } } @media screen and (max-width: 640px) { .pc-tab { display: none; } } @media screen and (max-width: 640px) { .tab { display: none; } } @media screen and (min-width: 1024px) { .tab { display: none; } } /*---------------------------------------------------- リンク ----------------------------------------------------*/ a { color: #363636; text-decoration: none; -webkit-transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1); transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1); transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1); transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1); } a img { -webkit-transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0, 0.63, 1); transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0, 0.63, 1); transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), transform 0.3s cubic-bezier(0.37, 0, 0.63, 1); transition: color 0.3s cubic-bezier(0.37, 0, 0.63, 1), background 0.3s cubic-bezier(0.37, 0, 0.63, 1), border 0.3s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.3s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), transform 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-box-shadow 0.3s cubic-bezier(0.37, 0, 0.63, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0, 0.63, 1); } @media (hover: hover) { a[href^="tel:"] { pointer-events: none; } } @media (hover: none) { a, button { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } } [data-scroll-target], [anchor-target] { content: ""; display: block; position: relative; pointer-events: none; top: calc(-1 * var(--header-height)); } /*---------------------------------------------------- コンテナ ----------------------------------------------------*/ .l-container,div.wrapper,div.button_area { margin-left: auto; margin-right: auto; width: 100%; max-width: 1520px; } @media screen and (max-width: 640px) { .l-container,div.wrapper,div.button_area { padding-left: 4vw; padding-right: 4vw; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .l-container,div.wrapper,div.button_area { padding-left: 8vw; padding-right: 8vw; } } @media screen and (min-width: 1024px) { .l-container,div.wrapper,div.button_area { padding-left: 13.3967789165vw; padding-right: 13.3967789165vw; } } @media screen and (min-width: 1521px) { .l-container,div.wrapper,div.button_area { padding-left: 203.6310395315px; padding-right: 203.6310395315px; } } @media screen and (min-width: 1024px) { .l-container,div.wrapper,div.button_area--foot { padding-left: 2.5rem; padding-right: 2.5rem; } } @media screen and (min-width: 1521px) { .l-container,div.wrapper,div.button_area--foot { padding-left: 44.5095168375px; padding-right: 44.5095168375px; } } @media screen and (min-width: 1024px) { .l-container--wide,div.wrapper,div.button_area--foot { padding-left: 8.3125rem; padding-right: 8.3125rem; } } @media screen and (min-width: 1521px) { .l-container--wide,div.wrapper,div.button_area--foot { padding-left: 147.9941434846px; padding-right: 147.9941434846px; } } div.wrapper { margin-top: 3rem; } /*---------------------------------------------------- ヘッダー ----------------------------------------------------*/ .l-header { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-align: center; align-items: center; -ms-flex-align: center; padding: 2.25rem 1.25rem; /* position: relative; left: 0; top: 0; width: 100%; height: 100px; */ background-color: #fff; } .is-front-page:not(.is-scrolled) .l-header { background-color: transparent; } @media screen and (max-width: 641px) { .l-header { padding: 1rem; } } @media screen and (min-width: 1024px) { /* .l-header { position: absolute; } */ } .l-header-logo { /* position: absolute; left: 0.9375rem; top: 0.6875rem; */ } .l-header-logo img { width: 9.4125rem; } @media screen and (min-width: 1024px) { .l-header-logo { /* left: 1.25rem; top: 3.0625rem; */ } .l-header-logo img { width: 11rem; } } .l-header-nav-tel { display: none; } @media screen and (min-width: 641px) { .l-header-nav-tel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 0.5rem; /* position: absolute; right: 17.25rem; top: 1.5625rem; */ } .l-header-nav-tel figure { width: 15.125rem; } .l-header-nav-tel ._open { font-size: 0.75rem; color: #363636; } .l-header-nav-tel svg { stroke: #009e9f; fill: #009e9f; } .is-front-page:not(.is-scrolled) .l-header-nav-tel ._open { color: #fff; } .is-front-page:not(.is-scrolled) .l-header-nav-tel svg { stroke: #fff; fill: #fff; } .is-scrolled .l-header-nav-tel { display: none; } } /*---------------------------------------------------- cm-main ----------------------------------------------------*/ .cm-main-header { position: relative; overflow: hidden; } .cm-main-header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 7.125rem; text-align: center; } @media screen and (min-width: 1024px) { .cm-main-header { height: 15.5rem; } } .cm-main-header__bg { background-color: #009E9F; width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; } .cm-main-header__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cm-main-header__body { position: relative; } .cm-main-header__type { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: "Prata", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif; font-size: 3.25rem; letter-spacing: 0.1em; text-align: center; color: rgba(255, 255, 255, 0.1); pointer-events: none; line-height: 0.95; } @media screen and (min-width: 1024px) { .cm-main-header__type { font-size: 9.1875rem; } } .cm-main-header__en { font-family: "Prata", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif; font-size: 2.375rem; letter-spacing: 0.1em; color: #fff35b; } @media screen and (min-width: 1024px) { .cm-main-header__en { font-size: 3.625rem; } } .cm-main-header__ja { font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif; font-weight: bold; font-size: 1.25rem; letter-spacing: 0.2em; color: #fff; } @media screen and (min-width: 1024px) { .cm-main-header__ja { font-size: 1.25rem; } } /*---------------------------------------------------- フッター ----------------------------------------------------*/ .l-footer { position: relative; } /*::::::::::::::::::::::::::::::::::::::::::::::::::*/ .l-footer-content { color: #fff; background: #3c7170; } .l-footer-content a { color: #fff; } .l-footer-content__wrap { border-right: 1px solid rgba(255, 255, 255, 0.2); border-left: 1px solid rgba(255, 255, 255, 0.2); margin-inline: 0.9375rem; } @media screen and (min-width: 1024px) { .l-footer-content__wrap { /* display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -ms-flex-pack: center; -ms-flex-align: center; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; */ display: -ms-grid; display: grid; grid-template-areas: "logo nav" "group nav" "copyrigh nav"; -ms-grid-columns: 16.5rem 1fr; grid-template-columns: 16.5rem 1fr; -ms-grid-rows: auto auto 1fr; grid-template-rows: auto auto 1fr; margin-inline: 0; } } .l-footer-logo { padding: 2.5rem 0 1.875rem; text-align: center; } .l-footer-logo img { width: 10.5625rem; } @media screen and (min-width: 1024px) { .l-footer-logo { grid-area: logo; padding: 3.75rem 0 0 2.5rem; text-align: left; } .l-footer-logo img { width: 9.875rem; } } .l-footer-group { padding-top: 2.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.625rem; } .l-footer-group img { height: 1.125rem; } @media screen and (max-width: 1023px) { .l-footer-group { border-top: 1px solid rgba(255, 255, 255, 0.2); } } @media screen and (min-width: 1024px) { .l-footer-group { grid-area: group; padding-top: 0.375rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.625rem; padding-left: 2.5rem; } .l-footer-group img { height: 1rem; } } .l-footer-copyright { padding: 1.25rem 0 3.125rem; font-size: 0.625rem; text-align: center; } @media screen and (min-width: 1024px) { .l-footer-copyright { padding: 6.625rem 0 3.125rem 2.5rem; text-align: left; grid-area: copyrigh; } } @media screen and (min-width: 1024px){ .l-footer-logo { -ms-grid-row: 1; -ms-grid-column: 1; } .l-footer-nav { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 2; } .l-footer-group { -ms-grid-row: 2; -ms-grid-column: 1; } .l-footer-copyright { -ms-grid-row: 3; -ms-grid-column: 1; } } .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid #ccc; } @media screen and (min-width: 1024px) { .item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media screen and (max-width: 1023px) { .item { padding-top: 2.25rem; } } @media screen and (max-width: 641px) { .item { padding-top: 1.25rem; padding-bottom: 1.25rem; gap: 0.5rem; } } /* .item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.25rem; font-size: 1rem; } */ td.label { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; -ms-flex-align: center; gap: 1rem; } td.label span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 4.375rem; height: 1.5rem; border-radius: 0.9375rem; font-size: 0.75rem; color: #fff; background: #76b55c; } @media screen and (min-width: 1024px) { td.label { padding-top: 1rem; width: 13.125rem; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-pack: justify; /* gap: 2.5rem; */ /* font-size: 1.125rem; */ } td.label span { height: 1.875rem; font-size: 0.875rem; } } td.value,td.comment { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center; -ms-flex-align: center; /* -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; */ gap: 0.625rem; } td.comment { width: 16rem; } td.value input[type=text], td.value input[type=email], td.value textarea { width: 100%; height: 3.125rem; border-radius: 0.625rem; background: #f5f9e7; padding: 0.625rem 1.25rem; border: 1px solid transparent; font-size: 1rem; } td.value input[type=text]:focus, td.value input[type=email]:focus, td.value textarea:focus { border: 1px solid #009E9F; } td.value dd textarea { height: 18.0625rem; } @media screen and (min-width: 1024px) { td.value { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 1rem; } td.value input[type=text], td.value input[type=email], td.value textarea { height: 4rem; padding: 1.25rem 1.25rem; font-size: 1.125rem; } td.value textarea { height: 18.0625rem; } td.value { padding-top: 2.25rem; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------------ 以下、このフォームのみで使用するCSS　※コピペする場合は削除してください ------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #item_16 td.value { display: block; line-height: 2.5rem; } #item_16 textarea { width: 100% !important; height: 5rem; }