@charset "UTF-8"; /* ---------------------------------------------------------------------- １：mixin ミックスイン ２：setting プロジェクトの設定 ３：foundation 共通 基本のタグ等の初期設定 ４：libs ライブラリー ５：component パーツコンポーネント ６：layout レイアウト ７：component2 レイアウト後の パーツコンポーネント ８：project プロジェクトのみの記述 ９：javascript JSでの状態変化 ---------------------------------------------------------------------- */ /* 共通 ミックスイン ---------------------------------------------------------------------- */ /*====================================================================================================== モジュールレイアウト -------------------------------------------------------------------------------------------------------- ・ ・ ======================================================================================================*/ /* ====================================================================== HTML ------------------------------------------------------------------------ @include break-point("sp") { margin: 2em; } --- ====================================================================== */ /*====================================================================================================== LAYOUT：片側コンテンツ幅スタート、反対側ウィンドウ100% -------------------------------------------------------------------------------------------------------- ・l-inner--l-fix-r-stretch　or .l-inner--r-fix-l-stretch と合わせて使う事を想定 ・ ======================================================================================================*/ /* ====================================================================== HTML & CSS ------------------------------------------------------------------------
.l-flex-fix-stretch-container{ @include l-flex-fix-stretch(488); .l-flex-fix-stretch__fix-item{ } .l-flex-fix-stretch__stretch-item{ } } ====================================================================== */ /*====================================================================================================== LAYOUT：ウィンドウ100%でパネルを敷き詰める -------------------------------------------------------------------------------------------------------- ・ ・ ======================================================================================================*/ /* ====================================================================== HTML & CSS ------------------------------------------------------------------------
.****-sec { @include l-flex-full-w-panel(); .l-flex-full-w-panel__item{ background-size: cover; } } ====================================================================== */ /*---------------------------- カラム　レイアウト https://qiita.com/noqua/items/0dc04aa528269db41a07 書き方 @include col(カラム数,margin値,'セレクタ'); clearfixのmixinを用意 ----------------------------*/ /* ---------------------------------------------------------- 疑似クラス https://gist.github.com/TsubasaHiga/38057c59cff3e4a674bdd8810b4d4a15 ----------------------------------------------------------*/ /* ---------------------------------------------------------- hoge（疑似要素アイコン指定） https://gist.github.com/TsubasaHiga/38057c59cff3e4a674bdd8810b4d4a15 ----------------------------------------------------------*/ /*---------------------------- 疑似要素 ----------------------------*/ /* グローバルの設定 ---------------------------------------------------------------------- */ /*---------------------------- Font Family ----------------------------*/ /*---------------------------- FONT SIE（mixin：fs-ad　で全デバイス設定） // 注意：ここに新たに追加した場合は、「fs-ad」に記載 https://docs.google.com/spreadsheets/d/1EFI-n_b-gnDygtfCTs1xr-WZ3OVrgbxDwtkXDLQRGHA/edit#gid=708385006 ----------------------------*/ /*-------------------------------------------------------- 見出し：通常 --------------------------------------------------------*/ /*-------------------------------------------------------- 見出し：ニュース、ブログ --------------------------------------------------------*/ /*-------------------------------------------------------- 大きい　飾り 英語フォントサイズ --------------------------------------------------------*/ /*-------------------------------------------------------- 大きい　飾り 数字番号　フォントサイズ --------------------------------------------------------*/ /*-------------------------------------------------------- コンテンツサイズ --------------------------------------------------------*/ /*-------------------------------------------------------- ブレイクポイント --------------------------------------------------------*/ /* CONTENTS コンテンツ定数のブレイクポイント この数値から適切なBPを選んで、各プロジェクトで設定する --------------------------------------------------------*/ /* HEADER ヘッダー独自のブレイクポイント ・ロゴとグロナビのサイズに合わせて自由に設定 --------------------------------------------------------*/ /* FOOTER フッター独自のブレイクポイント ・デザインに合わせて自由に設定 --------------------------------------------------------*/ /*-------------------------------------------------------- カラムのサイズ デザインで使用するグリッド数（基本変更しない） --------------------------------------------------------*/ /*-------------------------------------------------------- 余白 --------------------------------------------------------*/ /* 要素の上の余白サイズmixin：pd-ele-ad　で上下全デバイス設定） --------------------------------------------------------*/ /*-------------------------------------------------------- 角丸 --------------------------------------------------------*/ /*---------------------------- デフォルトのCTA　カラー ----------------------------*/ /*---------------------------- TELのCTA　カラー ----------------------------*/ /*====================================================================================================== HEADER デザイン　レイアウト -------------------------------------------------------------------------------------------------------- ・ ・ ======================================================================================================*/ /* レイアウト --------------------------------------------*/ /* 背景色 --------------------------------------------*/ /* グローバルナビ --------------------------------------------*/ /* ロゴ関連 --------------------------------------------*/ /*========================================================================= ハンバーガーアイコン =========================================================================*/ /*========================================================================= パンくず =========================================================================*/ /*---------------------------- ナビボタン（ある場合） ----------------------------*/ /* ====================================================================== Main Visulal ====================================================================== */ /*-------------------------------------------------------------------- 色の再設定 -------------------------------------------------------------------- グローバルナビ https://coco-factory.jp/ugokuweb/move01/5-1-1/ --------------------------------------------------------------------*/ /* ボタンのBGカラー ------------------------------------------------*/ /*-------------------------------------------------------------------- フォントサイズ --------------------------------------------------------------------*/ /* 第一階層 ------------------------------------------------*/ /*-------------------------------------------------------------------- 色の再設定 -------------------------------------------------------------------- グローバルナビ https://coco-factory.jp/ugokuweb/move01/5-1-1/ --------------------------------------------------------------------*/ /* ボタンのBGカラー ---------------------------------- */ /* テキストの色 ---------------------------------- */ /*---------------------------- ANIMATION ----------------------------*/ /* プロジェクトの設定 ---------------------------------------------------------------------- */ /*-------------------------------------------------------- カラムのサイズ デザインで使用するグリッド数（基本変更しない） --------------------------------------------------------*/ /*-------------------------------------------------------- 余白 --------------------------------------------------------*/ /* 要素の上の余白サイズmixin：pd-ele-ad　で上下全デバイス設定） --------------------------------------------------------*/ /*-------------------------------------------------------- 重ねる場合の各サイズ --------------------------------------------------------*/ /*-------------------------------------------------------- 角丸 --------------------------------------------------------*/ /*-------------------------------------------------------- ボタン --------------------------------------------------------*/ /*---------------------------- COLOR ----------------------------*/ /* =============================== 背景色 =============================== */ /* // BODYで設定しているベースカラー $col-font-body:#60696e; // body のフォントカラー $col-font-body: #454c50; // body のフォントカラー $col-bg-body:white; // body 背景色 // body背景を画像にするか $bg-img-flag : false; // body bg img path $bg-body-img:"../images/"; // アクセントカラー $col-ac1: #ff4d00; //$col-ac1: #CF000E; //$col-ac1: #792eea; //$col-ac1: #868179; $col-ac2: #ff6a00; $col-ac3: #18bfc8; $col-ac4: #4077dc; $col-ac5: #792eea; //フォントカラー $col-font-white: #ffffff; $col-font-black: #000000; $col-font-bs1: #48ff00; $col-font-bs2: #444444; $col-font-bs3: #666666; $col-font-bs4: #999999; $col-font-bs5: $col-ac1; $col-font-bs6: #868179; $col-font-bs7: #868ca2; // 淡い薄いブルー $col-font-required: #8d2222; $col-font-required-bg: #fff1f1; // 背景色 $col-bg-white: #ffffff; $col-bg-black: #000000; $col-bg-font-bs: $col-font-body; $col-bg-gray:#fafafa; $col-bg-holo:#f8fafc; $col-bg1: #fdfcfc; // 薄いベージュ $col-bg2: #ddedf5; $col-bg3: #222222; $col-bg4: #111111; $col-bg5: #e2e4ec; $col-bg6: #DEEFF7; // 薄いブルー // 画面遷移のカーテンのカラー $col-page-transition-bg:$col-bg-font-bs; // ラインカラー $col-line1: #e5e5e5; $col-line2: #c9c9c9; $col-line5: rgb(22, 83, 157); $col-line-body-bs:$col-font-body; // コンポーネント //$c-col-bg-stretches-appears1:$col-ac1; $c-col-bg-stretches-appears1:$col-bg-font-bs; // CTAのボタンベースカラー $col-cta:$col-ac1; $col-cta-hover:$col-ac2; */ /*---------------------------- BORDER ----------------------------*/ /*---------------------------- ----------------------------*/ .font-en, .en-ttl { font-family: "Fira Sans", sans-serif; font-weight: 600; font-style: normal; } .en-ttl { font-size: 220px; line-height: 1; letter-spacing: -0.05em; } .en-ttl.--col-beige { color: #efeae0; opacity: 0.6; } .en-ttl.--col-white { color: white; opacity: 0.1; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { .en-ttl { font-size: calc(440 / 1162 * 0.8 * 100 * 1vw); } } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) and (max-width: calc(767 * 1px)) { .en-ttl { font-size: calc(100 / 750 * calc(calc(440 * 2) * 0.8) * 1vw); } } @media only screen and (max-width: calc(767 * 1px)) { .en-ttl { font-size: 20vw; } } /*---------------------------- 文字色 ----------------------------*/ .col-yellow { color: #eaff00; } .col-orange { color: #f38f19; } .col-green { color: #29a49b; } .col-navy { color: #2a5195; } /*---------------------------- 鉤括弧 ----------------------------*/ .txt-kagi-first { margin-left: -0.55em; margin-right: -0.1em; } .txt-kagi-end { margin-left: -0.1em; margin-right: -0.55em; } /*---------------------------- 文字あしらい ----------------------------*/ .txt-small { font-size: 0.8em; } .txt-large { font-size: 1.25em; } .vertical-writing, .vertical-writing-bg-black { writing-mode: vertical-rl; } .vertical-writing-bg-black { color: white; background-color: black; padding: 0.75em 0.5em; } .txt-grid-line { display: inline; border: 1px solid black; padding: 0 0.5em; margin: 0 0.25em; } .txt-grid-line.--col-orange { color: #f38f19; border-color: #f38f19; } .txt-grid-line.--col-blue { color: #059bc0; border-color: #059bc0; } .txt-marker-yellow, .txt-marker-white { position: relative; } .txt-marker-yellow:after, .txt-marker-white:after { content: ""; position: absolute; width: 100%; height: 0.25em; background-color: #eaff00; bottom: -0.1em; left: 0; z-index: -1; } .txt-marker-white:after { background-color: white; } .txt-en-dash-after-black:after, .txt-en-dash-after-white:after, .txt-en-dash-before-black:after, .txt-en-dash-before-white:after { content: ""; position: absolute; width: 2em; height: 1px; top: 50%; transform: translateY(-50%); } .txt-en-dash-after-black:after { right: -2.25em; background-color: #000000; } .txt-en-dash-after-white:after { right: -2.25em; background-color: white; } .txt-en-dash-before-black:after { left: -2.25em; background-color: #000000; } .txt-en-dash-before-white:after { left: -2.25em; background-color: white; } .push-left { margin-left: -0.5em; } .push-right { margin-right: -0.5em; } /* 共通 基本のタグ等の初期設定 ---------------------------------------------------------------------- */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-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 in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 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 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /*---------------------------- 共通 設定 ----------------------------*/ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; height: 100%; scroll-behavior: smooth; } body { margin: 0 auto; background-color: white; font-family: "Fira Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 16px; color: #000000; line-height: 1.75; width: 100%; } body div, body section, body header, body footer, body main { box-sizing: border-box; position: relative; } body .animsition-overlay-slide { position: fixed; z-index: 999999999; background-color: #000000; } body h1, body h2, body h3, body h4, body h5, body h6, body p, body ul, body li, body dd, body dt, body dd { margin: 0; padding: 0; } body header { z-index: 9999; } body #breadcrumb-sec { z-index: 550; } body main, body .content-wrap { z-index: 300; } body .mv-under-content { z-index: 350; } body .mv { z-index: 400; } body footer { z-index: 600; } body ul { list-style: none; } @media only screen and (max-width: calc(767 * 1px)) { body { font-size: calc(100 / 750 * calc(28 * 1) * 1vw); } } body img { width: 100%; height: auto; } body a { box-sizing: border-box; } .sp_only { display: none !important; } .tb_sp_only { display: none !important; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { .tb_sp_only { display: block !important; } .pc_tb_only { display: block !important; } .pc_only { display: none !important; } } @media only screen and (max-width: calc(767 * 1px)) { .sp_only { display: block !important; } .pc_tb_only, .pc_only { display: none !important; } } /* ライブラリー ---------------------------------------------------------------------- */ .grid > .grid__col-1, .grid > .grid__col-2, .grid > .grid__col-3, .grid > .grid__col-4, .grid > .grid__col-5, .grid > .grid__col-6, .grid > .grid__col-7, .grid > .grid__col-8, .grid > .grid__col-9, .grid > .grid__col-10, .grid > .grid__col-11, .grid > .grid__col-12 { margin-bottom: 0 !important; } /*========================================================================= ヘッダー =========================================================================*/ /* SP の形になるブレイクポイント ----------------------------------------------*/ /*========================================================================= フッター =========================================================================*/ /* SP の形になるブレイクポイント ----------------------------------------------*/ /*========================================================================= PAGE =========================================================================*/ /* TB の形になるブレイクポイント ----------------------------------------------*/ /* SP の形になるブレイクポイント ----------------------------------------------*/ @media only screen and (max-width: calc(767 * 1px)) { .grid { flex-direction: column; } } body .swiper-slide .simpleParallax { height: 100%; } /* 共通 パーツコンポーネント プロジェクトの変数　 ---------------------------------------------------------------------- */ /*--------------------------------------------------------------------------------------------------------------------------- タブの装飾 ---------------------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------------------- タブのアイコン ---------------------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------------------- タブの横に来るテキスト ---------------------------------------------------------------------------------------------------------------------------*/ /*========================================================================= JP その他多言語　共通 【注意】c-langSelect.js　を読み込ませる =========================================================================*/ /* 共通 パーツコンポーネント ---------------------------------------------------------------------- */ /* ====================================================================== HTML ------------------------------------------------------------------------ ====================================================================== */ /* ====================================================================== HTML ------------------------------------------------------------------------ ====================================================================== */ body { /* ====================================================================== HTML ------------------------------------------------------------------------ ====================================================================== */ /* ====================================================================== HTML ------------------------------------------------------------------------ ====================================================================== */ /* ====================================================================== HTML ------------------------------------------------------------------------ ====================================================================== */ /* ====================================================================== HTML ------------------------------------------------------------------------ ====================================================================== */ /* ====================================================================== HTML ------------------------------------------------------------------------

*****

： ：
====================================================================== */ } body ul.c-attentions-wrap { margin-top: 1.5em; } body .c-attention { display: table; } body .c-attention:before { display: table-cell; width: 1em; content: "※"; } body .c-attentions { width: 100%; font-size: 14px; line-height: 1.5; color: #444444; } body .c-attentions:nth-child(n + 2) { padding-top: 0.3em; } body .c-attentions.no-margin { padding-top: 0; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { body .c-attentions { font-size: calc(14 / 1162 * 0.87 * 100 * 1vw); } } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) and (max-width: calc(767 * 1px)) { body .c-attentions { font-size: calc(100 / 750 * calc(calc(14 * 2) * 0.87) * 1vw); } } @media only screen and (max-width: calc(767 * 1px)) { body .c-attentions { font-size: calc(100 / 750 * calc(24 * 1) * 1vw); } } body ol.c-attentions-wrap { padding-left: 0; margin-top: 1.5em; list-style: none; } body ol.c-attentions-wrap li.c-attentions { counter-increment: li; } body ol.c-attentions-wrap li.c-attentions::before { content: "※" counter(li) ". "; } body .c-attentions-point { display: inline-block; font-size: 14px; line-height: 1.5; color: #444444; margin-left: 0.5em; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { body .c-attentions-point { font-size: calc(14 / 1162 * 0.87 * 100 * 1vw); } } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) and (max-width: calc(767 * 1px)) { body .c-attentions-point { font-size: calc(100 / 750 * calc(calc(14 * 2) * 0.87) * 1vw); } } body .c-section-btm-shadow:after { display: block; position: absolute; z-index: 1; background: url(../img_section-top-shadow.png); background-repeat: repeat-x; background-position: center top; content: ""; top: 0; left: 0; opacity: 0.1; width: 100%; height: 11px; } body .--md-small { font-size: 0.7em; } body .--md-uppercase { text-transform: uppercase; } body .c-read-line { position: relative; text-align: center; color: white; padding-top: calc(100 / 2 * 1px + 100 * 0.05 * 1px) !important; font-size: 12px; } body .c-read-line:before { position: absolute; content: ""; width: 1px; height: calc(100 * 1px); top: calc(100 * -1px / 2 + 100 * -0.05px / 2); left: 50%; background-color: #efefef; } body .main-copy { font-size: 36px; font-weight: 400; line-height: 1.5; z-index: 20; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { body .main-copy { font-size: calc(36 / 1162 * 1 * 100 * 1vw); } } @media only screen and (max-width: calc(767 * 1px)) { body .main-copy { font-size: calc(100 / 750 * calc(44 * 1) * 1vw); } } body .main-copy__read { margin-top: 40px; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { body .main-copy__read { margin-top: calc(40 / calc(1162 - 1) * 100vw); } } @media only screen and (max-width: calc(767 * 1px)) { body .main-copy__read { margin-top: calc(calc(100 / 750 * 40 * 1vw) / 0.75); } } /*====================================================================================================== ボタンのモジュール -------------------------------------------------------------------------------------------------------- ・lyのIDやClassを記載しない ・Classを当てるだけで完結できる記載をする ・基本的にCSSの入れ子構造にせず、複数クラスを当てる記載にする ・レイアウトに関わるものは※※※に記載する ・サイズなどは※※※に記載する ======================================================================================================*/ /*====================================================================================================== FONTAWESOME 設定 -------------------------------------------------------------------------------------------------------- ・ ======================================================================================================*/ /*====================================================================================================== 全てののボタンのベース -------------------------------------------------------------------------------------------------------- ・基本Aタグに記載 ======================================================================================================*/ .c-btn, body .c-dd-nav__ul > .c-dd-nav__ul__menu-item.header-btn-cta a, .c-basic-btn_form-wrap__formtag, .c-basic-btn_form-wrap__formtag--ac1, .c-basic-btn, .c-basic-btn_form-wrap { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; font-size: inherit; width: 100%; color: #000000; display: inline-block; text-align: center; text-decoration: none; background-color: white; cursor: pointer; transition: all 0.3s ease-out; line-height: 1.2; padding-top: 0.4em; padding-bottom: 0.4em; } /*====================================================================================================== 形のバリエーション違い -------------------------------------------------------------------------------------------------------- ・基本Aタグに記載 ======================================================================================================*/ .c-btn--radius-s { border-radius: 10px; } .c-btn--radius-full, body .c-dd-nav__ul > .c-dd-nav__ul__menu-item.header-btn-cta a, .c-basic-btn_form-wrap__formtag, .c-basic-btn_form-wrap__formtag--ac1, .c-basic-btn, .c-basic-btn_form-wrap { border-radius: 1000px; } /*====================================================================================================== ホバー時にグラデーションに変わる -------------------------------------------------------------------------------------------------------- ・全てののボタンのベースにあるプロパティは記載しない ・基本Aタグに記載 https://coco-factory.jp/ugokuweb/move01/7-1-32/ ======================================================================================================*/ /*====================================================================================================== 押し込む円 -------------------------------------------------------------------------------------------------------- ・全てののボタンのベースにあるプロパティは記載しない ・基本Aタグに記載 https://coco-factory.jp/ugokuweb/move01/7-1-14/ ======================================================================================================*/ .pushcircle { /*周囲の線の起点とするためrelativeを指定*/ position: relative; /*円の形状*/ width: 60px; height: 60px; box-sizing: border-box; padding: 0 10px; text-align: center; background: #000000; border-radius: 50%; color: #fff; text-decoration: none; outline: none; /*天地中央にテキストを配置*/ display: flex; align-items: center; justify-content: center; } .pushcircle.--white { background-color: #ffffff; color: #000000; } .pushcircle.--white:after { border-color: #ffffff; } .pushcircle.--white:after:hover { border-color: #333; } /*内側の線*/ .pushcircle:after { content: ""; /*絶対配置で線の位置を決める*/ position: absolute; top: 50%; left: 50%; /*線の形状*/ width: 85%; height: 85%; border: 1px solid #333; border-radius: 50%; transform: translate(-50%, -50%) scale(1.1); /*アニメーションの指定*/ transition: 0.3s ease; } /*hoverをしたら枠線が小さくなる*/ .pushcircle:hover:after { transform: translate(-50%, -50%) scale(1); border-color: #fff; } /*====================================================================================================== ベージックボタン -------------------------------------------------------------------------------------------------------- 固定幅にする場合： width: 330px; display: block; ======================================================================================================*/ .c-basic-btn, .c-basic-btn_form-wrap { position: relative; border: 1px solid #efefef; display: inline; width: 100%; padding-top: 1.2em; padding-bottom: 1.2em; padding-left: 2em; padding-right: 3em; font-size: 18px; } @media only screen and (max-width: calc(767 * 1px)) { .c-basic-btn, .c-basic-btn_form-wrap { font-size: calc(100 / 750 * calc(32 * 1) * 1vw); } } .c-basic-btn:after, .c-basic-btn_form-wrap:after { font-family: "Font Awesome 6 Free"; content: "\f061"; font-size: 14px; font-weight: 900; color: #009f7a; position: absolute; display: inline-block; top: 50%; right: 2em; transform: translateY(-50%); transition: all 0.3s ease-out; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { .c-basic-btn:after, .c-basic-btn_form-wrap:after { font-size: calc(14 / 1162 * 1 * 100 * 1vw); } } @media only screen and (max-width: calc(767 * 1px)) { .c-basic-btn:after, .c-basic-btn_form-wrap:after { font-size: calc(100 / 750 * calc(24 * 1) * 1vw); } } .c-basic-btn:hover, .c-basic-btn_form-wrap:hover { /*ボタンの形状*/ border-color: transparent; color: #fff; /*背景の色と形状*/ background: linear-gradient(270deg, #fa6c9f 0%, #ffe140 50%, #ff357f 100%); background-size: 200% auto; background-position: right center; /*ボックスの影*/ box-shadow: 0 5px 10px rgba(250, 108, 159, 0.4); } .c-basic-btn:hover:after, .c-basic-btn_form-wrap:hover:after { right: 1em; } .c-basic-btn.--small, .--small.c-basic-btn_form-wrap { padding-top: 1em; padding-bottom: 1em; padding-left: 1.5em; padding-right: 2.5em; font-size: 14px; } @media only screen and (max-width: calc((calc(1162 - 1)) * 1px)) { .c-basic-btn.--small, .--small.c-basic-btn_form-wrap { font-size: calc(14 / 1162 * 1 * 100 * 1vw); } } @media only screen and (max-width: calc(767 * 1px)) { .c-basic-btn.--small, .--small.c-basic-btn_form-wrap { font-size: calc(100 / 750 * calc(24 * 1) * 1vw); } } .c-basic-btn.--small:after, .--small.c-basic-btn_form-wrap:after { right: 1em; } .c-basic-btn.--no-outline, .--no-outline.c-basic-btn_form-wrap { border: none; } .c-basic-btn.--square, .--square.c-basic-btn_form-wrap { border-radius: 0; } .c-basic-btn.--kadomaru, .--kadomaru.c-basic-btn_form-wrap { border-radius: 10px; } .c-basic-btn.--cta-btn-grad, .--cta-btn-grad.c-basic-btn_form-wrap { background-image: linear-gradient(45deg, #caa152 0%, #b68932 80%); color: white !important; } .c-basic-btn.--cta-btn-grad:after, .--cta-btn-grad.c-basic-btn_form-wrap:after { color: white; } .c-basic-btn.--cta-btn-grad:hover, .--cta-btn-grad.c-basic-btn_form-wrap:hover { background-image: linear-gradient(45deg, #caa152 0%, #b68932 80%); background-size: 200% auto; background-position: center; box-shadow: 0 5px 10px rgba(160.0156862745, 101.6509803922, 26.368627451, 0.4); } .c-basic-btn.--tel-number, .--tel-number.c-basic-btn_form-wrap { display: flex !important; align-items: center; justify-content: center; pointer-events: none; cursor: default; color: white; text-decoration: none; background-color: rgba(0, 0, 0, 0); background-image: none; line-height: 1; font-size: 16px; width: auto !important; padding-left: 0; padding-right: 0; } @media only screen and (max-width: calc(767 * 1px)) { .c-basic-btn.--tel-number, .--tel-number.c-basic-btn_form-wrap { font-size: calc(100 / 750 * calc(28 * 1) * 1vw); } } .c-basic-btn.--tel-number:before, .--tel-number.c-basic-btn_form-wrap:before { content: ""; display: inline-block; position: relative; line-height: 1; margin-right: 0.25em; width: 1.1em; height: 1.1em; background-image: url(../_aun-common-module/images/_svg/icon_tel-02_white.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .c-basic-btn.--tel-number:after, .--tel-number.c-basic-btn_form-wrap:after { display: none; } @media only screen and (max-width: calc(767 * 1px)) { .c-basic-btn.--tel-number, .--tel-number.c-basic-btn_form-wrap { pointer-events: auto; cursor: pointer; } .c-basic-btn.--tel-number.--cta-btn-grad, .--tel-number.--cta-btn-grad.c-basic-btn_form-wrap { background-image: linear-gradient(45deg, #caa152 0%, #b68932 80%); color: white; font-size: 18px; } .c-basic-btn.--tel-number.--cta-btn-grad:after, .--tel-number.--cta-btn-grad.c-basic-btn_form-wrap:after { color: white; } } @media only screen and (max-width: calc(767 * 1px)) and (max-width: calc(767 * 1px)) { .c-basic-btn.--tel-number.--cta-btn-grad, .--tel-number.--cta-btn-grad.c-basic-btn_form-wrap { font-size: calc(100 / 750 * calc(32 * 1) * 1vw); } } .c-basic-btn.--black, .--black.c-basic-btn_form-wrap { border: none; background-color: black; color: white; } .c-basic-btn.--black:after, .--black.c-basic-btn_form-wrap:after { color: white; } .c-basic-btn.--bodyfontcolor, .--bodyfontcolor.c-basic-btn_form-wrap { border: none; background-color: #000000; color: white; } .c-basic-btn.--bodyfontcolor:after, .--bodyfontcolor.c-basic-btn_form-wrap:after { color: white; } @media only screen and (max-width: calc(767 * 1px)) { .c-basic-btn, .c-basic-btn_form-wrap { display: block; margin-left: auto !important; margin-right: auto !important; width: 80%; margin-top: 60px; } } @media only screen and (max-width: calc(767 * 1px)) and (max-width: calc((calc(1162 - 1)) * 1px)) { .c-basic-btn, .c-basic-btn_form-wrap { margin-top: calc(60 / calc(1162 - 1) * 100vw); } } @media only screen and (max-width: calc(767 * 1px)) and (max-width: calc(767 * 1px)) { .c-basic-btn, .c-basic-btn_form-wrap { margin-top: calc(calc(100 / 750 * 60 * 1vw) / 0.75); } } /*====================================================================================================== INPUT などAタグに自由にクラスをつけれない場合 -------------------------------------------------------------------------------------------------------- 【　注意 １　】　以下のタグには、疑似要素が使えないので必ずwrapでして疑似要素の代わりのタグを用いる 例： ・ ・