@charset "UTF-8"; /* price : 料金｜経理AIエージェントTOKIUM（WordPress外の独立ページ版） - 全ルールを .prc-wrapper 配下にスコープ（共通ヘッダー/フッター・サイト共通CSSと干渉しない） - クラス名はすべて prc- 接頭辞 - 先頭の .prc-wrapper は、元ページで body から継承していた値（フォント・行間・文字色）を焼き直したもの - 本文フォントは Noto Sans JP + YakuHanJP（いずれもCDN・index.php の で読み込み） 生成: 20260730（文言エディタの部屋 rev11 の最終HTML＋コメント9件の削除反映ぶんから変換） */ /* 共通ヘッダーが画面固定（fixed / sticky）の場合だけ、ヘッダー高さを入れてください（既定 0） */ .prc-wrapper{ padding-top: var(--prc-top-gap, 0); } .prc-wrapper { font-family: YakuHanJP, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.15; letter-spacing: normal; color: rgb(25, 20, 20); text-align: start; word-break: break-all; overflow-wrap: normal; -webkit-text-size-adjust: 100%; font-feature-settings: normal; text-rendering: auto; } .prc-wrapper ul { box-sizing: border-box; } .prc-wrapper, .prc-wrapper *, .prc-wrapper ::before, .prc-wrapper *::before, .prc-wrapper ::after, .prc-wrapper *::after { box-sizing: border-box; border-style: solid; border-width: 0px; } .prc-wrapper p { margin: 0px; } .prc-wrapper h1 { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0px; } .prc-wrapper ul { margin: 0px; padding: 0px; list-style: none; } .prc-wrapper a { background-color: transparent; text-decoration: none; color: inherit; } .prc-wrapper img { vertical-align: bottom; } .prc-wrapper ::-webkit-file-upload-button { appearance: button; font: inherit; } .prc-wrapper img { max-width: 100%; max-height: 100%; object-fit: cover; object-position: center center; } @media screen and (min-width: 769px){ .prc-wrapper .prc-pc-none { display: none !important; } } .prc-wrapper .prc-price__priceCalculation--plus { position: relative; width: 20px; height: 44px; } .prc-wrapper .prc-price__priceCalculation--plus::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 20px; background: rgb(25, 20, 20); } .prc-wrapper .prc-price__priceCalculation--plus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 3px; background: rgb(25, 20, 20); } @media screen and (min-width: 769px){ .prc-wrapper .prc-price__priceCalculation--plus { width: 60px; height: 106px; } .prc-wrapper .prc-price__priceCalculation--plus::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 24px; background: rgb(25, 20, 20); } .prc-wrapper .prc-price__priceCalculation--plus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 3px; background: rgb(25, 20, 20); } } .prc-wrapper .prc-price__priceCalculation--plus { margin-bottom: 40px; } @media screen and (min-width: 769px){ .prc-wrapper .prc-price__priceCalculation--plus { margin-bottom: 0px; } } .prc-wrapper .prc-btn_common { max-width: 408px; width: 100%; padding: 32px 0px; display: inline-block; font-size: 22px; font-weight: 600; border-radius: 50px; text-align: center; position: relative; transition: 0.5s; } .prc-wrapper .prc-btn_common:hover { box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 8px; } .prc-wrapper .prc-btn_orange { background: rgb(249, 137, 56); color: rgb(255, 255, 255); position: relative; } .prc-wrapper .prc-btn_orange:hover { background: rgb(255, 116, 16); } .prc-wrapper .prc-btn_orange::before { content: ""; display: block; position: absolute; inset: 6px; border: 1px solid rgb(255, 255, 255); border-radius: 50px; box-sizing: border-box; } .prc-wrapper .prc-btn_common .prc-btn_arrow { border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); } .prc-wrapper .prc-btn_common .prc-btn_arrow.prc-white_orange { background: rgb(255, 255, 255); } .prc-wrapper .prc-btn_balloon { max-width: 260px; width: 100%; padding: 8px 0px; position: absolute; background: rgb(255, 255, 255); color: rgb(51, 51, 51); font-size: 14px; font-weight: 600; text-align: center; border-radius: 50px; box-sizing: border-box; top: -20px; left: 50%; transform: translateX(-50%); } .prc-wrapper .prc-btn_balloon::after { content: ""; position: absolute; right: 0px; bottom: -10px; left: 0px; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: rgb(255, 255, 255) transparent transparent; border-width: 11px 11px 0px; } @media screen and (max-width: 768px){ .prc-wrapper .prc-btn_common .prc-btn_arrow { right: 18px; } } @media screen and (max-width: 370px){ .prc-wrapper .prc-btn_common .prc-btn_arrow { width: 20px; height: 20px; } } .prc-wrapper .prc-common_title_section { padding: 36px 0px; text-align: center; color: rgb(34, 34, 41); } .prc-wrapper .prc-common_title_section.prc-common_title_section { padding: 68px 0px; } .prc-wrapper .prc-common_title_section .prc-common_title { font-size: 32px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.4; } .prc-wrapper .prc-common_title_section .prc-common_title_en { width: 80px; margin: 0px auto; color: rgb(0, 141, 151); font-size: 18px; font-weight: 600; text-align: center; position: relative; letter-spacing: 0.04em; } .prc-wrapper .prc-common_title_section.prc-common_title_section .prc-common_title_en { width: 180px; } .prc-wrapper .prc-common_title_section .prc-common_title_en::before { content: ""; width: 80px; position: absolute; right: calc(50% - 80px); bottom: -10px; border-bottom: 3px solid rgb(0, 204, 153); transform: translateX(-50%); } .prc-wrapper .prc-common_title_section .prc-common_title_en::after { content: ""; width: 64px; position: absolute; left: calc(50% - 8px); bottom: -10px; border-bottom: 3px solid rgb(0, 141, 151); transform: translateX(-50%); z-index: 100; } @media screen and (max-width: 768px){ .prc-wrapper .prc-common_title_section.prc-common_title_section { padding: 68px 0px 56px; } } @media screen and (max-width: 468px){ .prc-wrapper .prc-common_title_section .prc-common_title { font-size: 24px; } .prc-wrapper .prc-common_title_section .prc-common_title_en { font-size: 14px; } .prc-wrapper .prc-common_title_section .prc-common_title_en::before { width: 52px; right: calc(50% - 52px); } .prc-wrapper .prc-common_title_section .prc-common_title_en::after { width: 36px; left: calc(50% - 8px); } } .prc-wrapper .prc-Price_feature_content { margin: 60px 0px 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .prc-wrapper .prc-Price_feature_content .prc-feature_item { width: 260px; padding: 30px 0px; background: rgb(255, 255, 255); text-align: center; color: rgb(0, 141, 151); font-size: 28px; font-weight: 500; letter-spacing: 0.08em; border: 1px solid rgb(0, 141, 151); box-sizing: border-box; border-radius: 11.8px; position: relative; } .prc-wrapper .prc-Price_feature_content .prc-feature_item .prc-balloon { background-color: rgb(0, 141, 151); border-radius: 50px; width: 85%; padding: 10px 0px; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 16px; letter-spacing: 0.04em; color: rgb(255, 255, 255); font-weight: 500; } .prc-wrapper .prc-Price_feature_content .prc-feature_item .prc-balloon::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; border-top: 8px solid rgb(0, 141, 151); border-right: 9px solid transparent; border-left: 9px solid transparent; } @media screen and (max-width: 1000px){ .prc-wrapper .prc-Price_feature_content .prc-feature_item { width: 25%; font-size: 24px; } .prc-wrapper .prc-Price_feature_content .prc-feature_item .prc-balloon { font-size: 12px; white-space: nowrap; } .prc-wrapper .prc-Price_feature_content .prc-price__priceCalculation--plus { margin: 0px 10px; } } @media screen and (max-width: 768px){ .prc-wrapper .prc-Price_feature_content { display: block; margin: 40px 0px; } .prc-wrapper .prc-Price_feature_content .prc-feature_item { max-width: 327px; width: 100%; margin: 0px auto; font-size: 20px; } .prc-wrapper .prc-Price_feature_content .prc-feature_item .prc-balloon { width: 190px; padding: 8px 0px; top: -15px; } .prc-wrapper .prc-Price_feature_content .prc-price__priceCalculation--plus { margin: 5px auto 25px; } } .prc-wrapper .prc-fee_structure .prc-price_fv { padding: 68px 0px; text-align: center; } .prc-wrapper .prc-fee_structure .prc-price_fv .prc-common_title_en { margin: 8px auto 80px; } .prc-wrapper .prc-fee_structure .prc-price_fv .prc-btn_common .prc-btn_balloon { border: 1px solid rgb(249, 137, 56); } @media screen and (max-width: 468px){ .prc-wrapper .prc-fee_structure .prc-price_fv .prc-btn_common { max-width: 305px; width: 95%; padding: 24px 0px; font-size: 16px; } .prc-wrapper .prc-fee_structure .prc-price_fv .prc-btn_common .prc-btn_balloon { width: 167px; font-size: 12px; } .prc-wrapper .prc-fee_structure .prc-price_fv .prc-btn_common .prc-btn_arrow { width: 20px; height: 20px; } } .prc-wrapper .prc-fee_structure .prc-price_features { max-width: 1000px; margin: 0px auto 60px; background: rgb(246, 246, 246); border-radius: 10px; position: relative; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-innar { padding: 50px 44px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_text { text-align: center; font-size: 18px; font-weight: 500; letter-spacing: 0.04em; line-height: 2; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_left { width: 20%; text-align: right; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_left .prc-left_text { padding-bottom: 4px; font-weight: 600; color: rgb(0, 141, 151); border-bottom: 1px solid rgb(0, 141, 151); letter-spacing: 2.19px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right { width: 68%; margin-left: 47px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list { margin: 30px 0px; display: flex; justify-content: flex-start; align-items: center; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list .prc-list_text { font-size: 23px; line-height: 1.4; letter-spacing: 0.04em; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list img { margin-right: 20px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list .prc-green { color: rgb(0, 141, 151); font-weight: 600; } @media screen and (max-width: 1000px){ .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list { font-size: 20px; } } @media screen and (max-width: 768px){ .prc-wrapper .prc-fee_structure .prc-price_features .prc-innar { padding: 50px 24px 60px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_text { font-size: 14px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_left { width: 100%; text-align: center; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right { width: 40%; margin: 0px auto; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list .prc-list_text { width: 100%; font-size: 18px; white-space: nowrap; } } @media screen and (max-width: 468px){ .prc-wrapper .prc-fee_structure .prc-price_features { margin: 0px auto 100px; border-radius: inherit; } .prc-wrapper .prc-fee_structure .prc-price_features.prc-contract { margin: 0px auto 20px; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right { width: 89%; } .prc-wrapper .prc-fee_structure .prc-price_features .prc-feature_flex .prc-flex_right .prc-feature_list img { margin-right: 14px; } }