CATALOG

カタログ請求

製品名 ViewSizer3000
備考欄
企業名
所属部署
所在地の都道府県
氏名
フリガナ
メールアドレス

@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 { margin: 0; padding: 0; font-weight: normal; font-style: normal; } li { list-style: none; } /* =================================== 共通 =================================== */ /* フォント */ body { font-family: Verdana, Roboto, "Droid Sans", Meiryo, "MS Pゴシック", "Hiragino Kaku Gothic ProN", sans-serif; } select, input, button, textarea { font-family: Verdana, Roboto, "Droid Sans", Meiryo, "MS Pゴシック", "Hiragino Kaku Gothic ProN", sans-serif; } /* =================================== 画面全体のレイアウト =================================== */ /* =================================== 設問エリアのレイアウト =================================== */ /* 設問の行 */ tr.item { border-top: 1px solid #c9c9c9; } tr.item:last-child { border-bottom: 1px solid #c9c9c9; } /*設問名のセルのデザイン */ td.label { vertical-align: top; width: 200px; /* 実際の設問名の文字の長さに合わせて調整してください */ padding: 26px 10px 10px 0; font-weight: bold; } td.value { width: 500px; padding: 20px 0 20px 20px; } /* 設問の入力例/説明セルのデザイン */ td.comment { padding-left: 10px; font-size: 14px; } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { padding-right: 5px; font-size: 85%; font-weight: bold; } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { font-size: 110%; } /* 入力エラーメッセージのデザイン */ div.message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; color: OrangeRed; background: LightYellow; } /* 公開終了メッセージのデザイン */ div.finished-message { padding: 5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin: 10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size: 14px; font-weight: bold; color: Crimson; background: MistyRose; } /* =================================== 入力コントロールのデザイン =================================== */ /* 確認/送信/戻る/登録ボタン */ input[type=button] { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 460px; height: 76px; background-color: #009474; -webkit-box-shadow: 0px 9px 19.95px 1.05px rgba(125, 125, 125, 0.29); box-shadow: 0px 9px 19.95px 1.05px rgba(125, 125, 125, 0.29); border-radius: 38px; cursor: pointer; color: #fff; border: 2px solid #009474; font-size: 20px; font-weight: bold; } input[type=button]:hover { cursor: pointer; } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type=text]:focus { background-color: LightYellow; } /* テキストボックス */ select:focus { background-color: LightYellow; } /* プルダウン */ textarea:focus { background-color: LightYellow; } /* テキストエリア */ .button_area { text-align: center; } /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { float: right; padding-top: 6px; margin-right: 4px; font-size: 60%; font-weight: bold; color: OrangeRed; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content: "※必須"; } /* 必須項目についての説明文 */ p.required_msg { text-align: right; padding-top: 6px; margin-right: 4px; font-size: 80%; font-weight: bold; color: OrangeRed; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content: "「※必須」となっている項目は必ず入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin: 5px 0 1px 0; 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: 25px; padding-top: 10px; } /* 必須項目のマーク */ span.required { float: initial; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { float: left; width: 95%; /* 入力コントロールの幅に合わせて調整してください */ padding-bottom: 0px; } /* 設問の入力例/説明セルのデザイン */ td.comment { float: left; width: 95%; padding: 0px 2px 10px 10px; } /* 設問の入力例/テキストボックス */ input[type=text] { font-size: 120%; width: 95% !important; } /* 設問の入力例/テキストエリア */ 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; } /* 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; } @media screen and (min-width: 1025px) { :root { --header-height: 120px; } } @media screen and (max-width: 1024px) { :root { --header-height: 60px; } } /*---------------------------------------------------- フォーム ----------------------------------------------------*/ [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; } input[type=text], input[type=email], input[type=tel] { padding: 5px 15px; border-width: 2px; border-color: #c9c9c9; border-style: solid; border-radius: 5px; height: 36px; } select { padding: 5px 15px; border-width: 2px; border-color: #c9c9c9; border-style: solid; border-radius: 5px; height: 36px; } textarea { padding: 5px 15px; border-width: 2px; border-color: #c9c9c9; border-style: solid; border-radius: 5px; } *:focus { outline: none; } /*---------------------------------------------------- フォント ----------------------------------------------------*/ html { font-size: 16px; } body { font-family: source-han-sans-japanese, "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: #000; } .serif { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "MS 明朝", serif; } /*---------------------------------------------------- レスポンシブ ----------------------------------------------------*/ @media screen and (min-width: 768px) { .sp { display: none; } } @media screen and (min-width: 1025px) { .sp-tab { display: none; } } @media screen and (max-width: 1024px) { .pc { display: none; } } @media screen and (max-width: 767px) { .pc-tab { display: none; } } @media screen and (max-width: 767px) { .tab { display: none; } } @media screen and (min-width: 1025px) { .tab { display: none; } } /*---------------------------------------------------- リンク ----------------------------------------------------*/ a { color: #0000ff; transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out; -webkit-transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out; transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out; transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out; } a img { transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.3s ease-out; transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.3s ease-out, -webkit-box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; } @media (hover: hover) { a[href^="tel:"] { pointer-events: none; } } @media (hover: none) { a, button { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } } [anchor-target] { content: ""; display: block; position: relative; pointer-events: none; top: calc(-1 * var(--header-height)); } /*---------------------------------------------------- コンテナ ----------------------------------------------------*/ .l-container { position: relative; margin-left: auto; margin-right: auto; width: 100%; padding-left: 40px; padding-right: 40px; max-width: 1180px; } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-container { max-width: initial; padding-left: 15px; padding-right: 15px; } } @media screen and (max-width: 767px) { .l-container { max-width: initial; padding-left: 15px; padding-right: 15px; } } .l-container--l { max-width: 1420px; } /*---------------------------------------------------- body ----------------------------------------------------*/ html { height: 100%; } body { height: 100%; } body.no-scroll { overflow: hidden; height: 100vh; } @-webkit-keyframes bodyLeaving { 0%, 100% { opacity: 1; } 30%, 70% { opacity: 0; } } @keyframes bodyLeaving { 0%, 100% { opacity: 1; } 30%, 70% { opacity: 0; } } .l-body-wrap { width: 100%; min-height: 100%; overflow: hidden; } /*---------------------------------------------------- l-header-drawer ----------------------------------------------------*/ .l-header-drawer { position: relative; background-color: #fff; opacity: 0; pointer-events: none; -webkit-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; visibility: hidden; z-index: 10; } .is-nav-open .l-header-drawer { opacity: 1; visibility: visible; pointer-events: auto; } @media screen and (min-width: 1025px) { .l-header-drawer { display: none; } } .l-header-drawer__nav1 a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 13.4375vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #009474; color: #009474; font-weight: 500; font-size: 5.625vw; } .l-header-drawer__nav1 a .fas { margin-right: 0.25em; } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-header-drawer__nav1 a { height: 43px; font-size: 18px; } } .l-header-drawer__nav2 a { 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 18.125vw; } .l-header-drawer__nav2 ._ja { font-size: 5.625vw; font-weight: bold; line-height: 1.4; } .l-header-drawer__nav2 ._ja i.fas { margin-right: 0.5em; } .l-header-drawer__nav2 ._en { margin-top: 0; font-size: 3.75vw; font-family: futura-pt, sans-serif; font-weight: 500; color: #5bc6fe; letter-spacing: 0.2em; } .l-header-drawer__nav2 .u-btn-blue ._en { color: #5bc6fe; } .l-header-drawer__nav2 .u-btn-green ._en { color: #0ce3af; } .l-header-drawer__nav2 .u-btn-orange ._en { color: #ffac69; } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-header-drawer__nav2 a { height: 58px; } .l-header-drawer__nav2 ._ja { font-size: 18px; } .l-header-drawer__nav2 ._en { font-size: 12px; } } /*---------------------------------------------------- ヘッダー メニュー ----------------------------------------------------*/ @media screen and (max-width: 1024px) { .l-header-menu { position: absolute; right: 0; top: 0px; z-index: 2; width: 15.625vw; height: 18.75vw; cursor: pointer; background-color: #009474; -webkit-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .l-header-menu div { position: relative; } .l-header-menu span { display: block; position: absolute; height: 0.625vw; width: 6.25vw; background: #fff; left: 4.6875vw; -webkit-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .l-header-menu span:nth-child(1) { top: 6.5625vw; } .l-header-menu span:nth-child(2) { top: 9.0625vw; } .l-header-menu span:nth-child(3) { top: 11.5625vw; } .l-header-menu.is-nav-open { background-color: #ccece1; } .l-header-menu.is-nav-open span { background-color: #009474; } .l-header-menu.is-nav-open span:nth-child(1) { top: 9.0625vw; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .l-header-menu.is-nav-open span:nth-child(2) { width: 0; left: 50%; } .l-header-menu.is-nav-open span:nth-child(3) { top: 9.0625vw; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-header-menu { width: 50px; height: 60px; } .l-header-menu span { height: 2px; width: 20px; left: 15px; } .l-header-menu span:nth-child(1) { top: 21px; } .l-header-menu span:nth-child(2) { top: 29px; } .l-header-menu span:nth-child(3) { top: 37px; } .l-header-menu.is-nav-open span:nth-child(1) { top: 29px; } .l-header-menu.is-nav-open span:nth-child(3) { top: 28px; } } .page-front .l-header-menu { display: none; } /*---------------------------------------------------- ヘッダーナビ ----------------------------------------------------*/ @media screen and (min-width: 1025px) { .l-header-nav { margin-left: auto; } .l-header-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-header-nav li + li { margin-left: 10px; } } /*---------------------------------------------------- ヘッダー ----------------------------------------------------*/ .l-header { position: relative; z-index: 9999; width: 100%; height: 144px; } @media screen and (max-width: 1024px) { .l-header { position: fixed; left: 0; top: 0; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-header { height: 60px; } } @media screen and (max-width: 767px) { .l-header { height: 18.75vw; } } .l-header__wrap { position: relative; background: #fff; height: 100%; -webkit-box-shadow: 0px 8px 11.96px 1.04px rgba(95, 95, 95, 0.31); box-shadow: 0px 8px 11.96px 1.04px rgba(95, 95, 95, 0.31); } .l-header__logo { padding: 30px 40px; } .l-header__logo ._wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .l-header__logo ._img { -ms-flex-item-align: start; align-self: flex-start; } .l-header__logo ._img img { width: 180px; height: auto; } .l-header__logo ._name { margin-top: 18px; font-size: 30px; color: #009474; font-weight: bold; line-height: 1; } .page-front .l-header__logo ._img { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .page-front .l-header__logo ._wrap { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 1280px) { .l-header__logo ._name { font-size: 24px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .l-header__logo { padding: 12px 0 0 20px; } .l-header__logo ._wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .l-header__logo ._img img { width: 148px; } .l-header__logo ._name { margin-top: 0px; margin-left: 18px; font-size: 20px; } } @media screen and (max-width: 767px) { .l-header__logo { padding: 2.34375vw 2.34375vw 0; } .l-header__logo ._img img { width: 31.25vw; margin-bottom: 0.9375vw; } .l-header__logo ._name { margin-top: 1.5625vw; font-size: 3.75vw; } } .l-header__action { position: absolute; right: 0; top: 0; } .l-header__action ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-header__action a { 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 200px; height: 82px; } .l-header__action ._ja { font-size: 20px; font-weight: bold; line-height: 1.4; } .l-header__action ._ja i.fas { margin-right: 0.5em; } .l-header__action ._en { margin-top: 5px; font-size: 14px; font-family: futura-pt, sans-serif; font-weight: 500; color: #5bc6fe; letter-spacing: 0.2em; } .l-header__action .u-btn-blue { border: 2px solid #3a82a8; } .l-header__action .u-btn-blue ._en { color: #5bc6fe; } .l-header__action .u-btn-green { border: 2px solid #07ad85; } .l-header__action .u-btn-green ._en { color: #0ce3af; } .l-header__action .u-btn-orange { border: 2px solid #e47538; } .l-header__action .u-btn-orange ._en { color: #ffac69; } @media (hover: hover) { .l-header__action .u-btn-blue:hover { color: #3a82a8; border-color: #3a82a8; background-color: #fff; } .l-header__action .u-btn-green:hover { color: #07ad85; border-color: #07ad85; background-color: #fff; } .l-header__action .u-btn-orange:hover { color: #e47538; border-color: #e47538; background-color: #fff; } } @media screen and (max-width: 1024px) { .l-header__action { display: none; } } .page-front .l-header__action { display: none; } .l-header__nav { position: absolute; right: 35px; top: 100px; } .l-header__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-header__nav li { font-size: 18px; font-weight: 500; } .l-header__nav li a { color: #009474; } .l-header__nav li + li { margin-left: 45px; } @media (hover: hover) { .l-header__nav a:hover { opacity: 0.6; } } @media screen and (max-width: 1024px) { .l-header__nav { display: none; } } .page-front .l-header__nav { display: none; } /*---------------------------------------------------- main ----------------------------------------------------*/ @media screen and (min-width: 768px) and (max-width: 1024px) { .l-main { padding-top: 60px; } } @media screen and (max-width: 767px) { .l-main { padding-top: 18.75vw; } } /*---------------------------------------------------- フッター ----------------------------------------------------*/ .l-footer { padding: 38px 0 50px; color: #fff; background-color: #009474; } .l-footer a { color: #fff; } @media screen and (max-width: 767px) { .l-footer { padding: 6.25vw 0 18.75vw; } } @media screen and (min-width: 768px) { .l-footer__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; } } .l-footer__logo { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .l-footer__logo img { width: 300px; height: auto; } @media screen and (min-width: 768px) { .l-footer__logo { margin-top: 14px; } } @media screen and (max-width: 767px) { .l-footer__logo img { width: 56.25vw; } } .l-footer__link { font-size: 14px; } .l-footer__link .fas { margin-right: 0.25em; font-size: 18px; } .l-footer__link .fas:before { vertical-align: middle; } @media (hover: hover) { .l-footer__link a:hover { text-decoration: underline; } } @media screen and (min-width: 768px) { .l-footer__link { padding-top: 13px; } } @media screen and (max-width: 767px) { .l-footer__link { margin-top: 3.125vw; font-size: 3.75vw; } .l-footer__link .fas { font-size: 3.75vw; } } .l-footer__name { margin-left: 67px; font-size: 18px; font-weight: bold; } @media screen and (min-width: 768px) { .l-footer__name { padding-top: 10px; } } @media screen and (max-width: 767px) { .l-footer__name { margin: 6.25vw 0 0 0; font-size: 5vw; } } .l-footer__copyright { margin-top: 0px; text-align: right; font-size: 14px; } @media screen and (max-width: 767px) { .l-footer__copyright { margin: 1.5625vw 0 0 0; text-align: left; font-size: 3.125vw; } } /*---------------------------------------------------- cm-breadcrumb ----------------------------------------------------*/ .cm-breadcrumb { padding: 30px 0; } .cm-breadcrumb ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; } .cm-breadcrumb ul li:not(:first-child):before { content: ">"; margin: 0 1em; } @media screen and (max-width: 767px) { .cm-breadcrumb { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .cm-breadcrumb::-webkit-scrollbar { display: none; -webkit-appearance: none; } } /*---------------------------------------------------- cm-page-header ----------------------------------------------------*/ .cm-page-header { 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: 166px; text-align: center; background-color: #e6f9f3; } .cm-page-header ._en { font-size: 20px; font-weight: bold; line-height: 1.4; color: #07ad85; letter-spacing: 0.075em; } .cm-page-header ._ja { margin-top: 4px; font-size: 40px; color: #009474; line-height: 1.4; letter-spacing: 0.05em; font-weight: bold; } @media screen and (max-width: 767px) { .cm-page-header { height: 47.0588235294vw; } .cm-page-header ._en { font-size: 5.625vw; } .cm-page-header ._ja { margin-top: 0; font-size: 10vw; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } } /*---------------------------------------------------- xxx ----------------------------------------------------*/ /*---------------------------------------------------- c-btn-chat ----------------------------------------------------*/ .c-btn-chat { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 343px; height: 82px; border-width: 2px; border-color: white; border-style: solid; background-color: #e47538; border-radius: 41px; color: #fff; } @media (hover: hover) { .c-btn-chat:hover { color: #e47538; border-color: #e47538; background-color: #fff; } .c-btn-chat:hover .c-btn-chat__ico img { display: none; } .c-btn-chat:hover .c-btn-chat__ico img._hover { display: block; } } @media screen and (max-width: 767px) { .c-btn-chat { width: 100%; height: 15.625vw; border-radius: 0; border: none; } } .c-btn-chat__ico { margin-right: 3px; } .c-btn-chat__ico ._hover { display: none; } @media screen and (max-width: 767px) { .c-btn-chat__ico { width: 6.25vw; margin-right: 3.125vw; } } .c-btn-chat__txt { text-align: center; } .c-btn-chat__txt1 { font-size: 20px; font-weight: bold; } @media screen and (max-width: 767px) { .c-btn-chat__txt1 { font-size: 5vw; } } .c-btn-chat__txt2 { font-size: 16px; } @media screen and (max-width: 767px) { .c-btn-chat__txt2 { display: none; } } /*---------------------------------------------------- c-btn-detail ----------------------------------------------------*/ .c-btn-detail { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 188px; height: 36px; background-color: white; border-radius: 18px; cursor: pointer; } .c-btn-detail ._txt { position: relative; top: -1px; text-indent: -0.75em; font-size: 16px; font-weight: bold; color: #3f3f3f; } .c-btn-detail i.fas { position: absolute; right: 20px; top: calc(50% - 0.5em); line-height: 1; font-size: 16px; color: #7d7d7d; } @media (hover: hover) { .c-btn-detail:hover ._txt { color: #07ad85; } .c-btn-detail:hover i.fas { color: #07ad85; } } @media screen and (max-width: 767px) { .c-btn-detail { width: 69.53125vw; height: 13.4375vw; border-radius: 6.71875vw; } .c-btn-detail ._txt { font-size: 5vw; } .c-btn-detail i.fas { font-size: 5vw; } } /*---------------------------------------------------- c-btnA ----------------------------------------------------*/ .c-btnA { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 343px; height: 76px; position: relative; background-color: #009474; -webkit-box-shadow: 0px 9px 19.95px 1.05px rgba(125, 125, 125, 0.29); box-shadow: 0px 9px 19.95px 1.05px rgba(125, 125, 125, 0.29); border-radius: 38px; cursor: pointer; color: #fff; border: 2px solid #009474; } .c-btnA ._txt { font-size: 20px; font-weight: bold; } .c-btnA i.fas { position: absolute; right: 38px; top: calc(50% - 0.5em); line-height: 1; font-size: 20px; } .c-btnA.c-btnA--s { width: 237px; height: 64px; } .c-btnA.c-btnA--l { width: 100%; max-width: 460px; } .c-btnA.u-btn-blue { border-color: #3a82a8; } .c-btnA.u-btn-green { border-color: #07ad85; } .c-btnA.u-btn-orange { border-color: #e47538; } @media (hover: hover) { .c-btnA:hover { color: #07ad85; border-color: #07ad85; background-color: #fff; } .c-btnA.u-btn-blue:hover { color: #3a82a8; border-color: #3a82a8; background-color: #fff; } .c-btnA.u-btn-green:hover { color: #07ad85; border-color: #07ad85; background-color: #fff; } .c-btnA.u-btn-orange:hover { color: #e47538; border-color: #e47538; background-color: #fff; } } @media screen and (max-width: 767px) { .c-btnA { width: 100%; height: 13.4375vw; border-radius: 6.71875vw; } .c-btnA ._txt { font-size: 5vw; } .c-btnA i.fas { font-size: 5vw; } .c-btnA.c-btnA--s { height: 13.4375vw; } } /*---------------------------------------------------- c-btnB ----------------------------------------------------*/ .c-btnB { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 300px; height: 82px; position: relative; border-radius: 41px; cursor: pointer; color: #fff; border: 2px solid #fff; } .c-btnB.u-btn-blue { border-color: #3a82a8; } .c-btnB.u-btn-green { border-color: #07ad85; } .c-btnB.u-btn-orange { border-color: #e47538; } .c-btnB ._txt { text-indent: -0.5em; font-size: 20px; font-weight: bold; } .c-btnB ._txt i.fas { margin-right: 0.5em; } .c-btnB i.fa-arrow-right { position: absolute; right: 38px; top: calc(50% - 0.5em); line-height: 1; font-size: 20px; } @media (hover: hover) { .c-btnB.u-btn-blue:hover { color: #3a82a8; border-color: #3a82a8; background-color: #fff; } .c-btnB.u-btn-green:hover { color: #07ad85; border-color: #07ad85; background-color: #fff; } .c-btnB.u-btn-orange:hover { color: #e47538; border-color: #e47538; background-color: #fff; } } @media screen and (max-width: 767px) { .c-btnB { width: 100%; height: 13.4375vw; border-radius: 6.71875vw; } .c-btnB ._txt { font-size: 5vw; } .c-btnB i.fa-arrow-right { right: 5vw; font-size: 5vw; } } /*---------------------------------------------------- c-titleA ----------------------------------------------------*/ .c-titleA { text-align: center; } .c-titleA ._en:after { content: ""; margin: 20px auto 0; display: block; background-color: #3f3f3f; width: 40px; height: 3px; } .c-titleA ._ja { margin-top: 15px; font-size: 18px; color: #7d7d7d; text-align: center; font-weight: 500; } @media screen and (max-width: 767px) { .c-titleA ._en img { height: 8.90625vw; } .c-titleA ._en:after { margin: 15px auto 0; width: 30px; height: 2px; } .c-titleA ._ja { margin-top: 10px; font-size: 3.75vw; } } /* Common Styles */ /* Bullets */ /* Progress */ /*---------------------------------------------------- header下に文言を追加する際に使用 ----------------------------------------------------*/ .middle-text{ position: relative; background: #fff; height: 100%; -webkit-box-shadow: 0px 8px 11.96px 1.04px rgba(95, 95, 95, 0.31); box-shadow: 0px 8px 11.96px 1.04px rgba(95, 95, 95, 0.31); text-align:center; padding:50px; } /*---------------------------------------------------- 汎用クラス ----------------------------------------------------*/ .cm-form { padding-top: 80px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .cm-form { padding-top: 50px; padding-bottom: 50px; } } .cm-form .button_area { margin-top: 50px; } .wrapper { max-width: 940px; margin-left: auto; margin-right: auto; }
プライバシーポリシーに同意の上、送信してください。

同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。