/* Theme Name: Astra Child Theme URI: https://wpastra.com/ Template: astra Author: Brainstorm Force Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/ Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog Version: 4.11.13.1760371863 Updated: 2025-10-14 01:11:03 */ /* このCSSコードをWordPressの「外観」->「カスタマイズ」->「追加CSS」 または、お使いのテーマの style.css ファイルに貼り付けてください。 Google Fontsの読み込みは別途HTMLの内で行う必要があります。 */ /* --- Google Fonts カスタムスタイル --- */ .font-brand { font-family: 'Pinyon Script', cursive; } body { font-family: 'Noto Sans JP', sans-serif; --tw-gradient-from: #fff1f2; /* from-rose-50 */ --tw-gradient-to: #f3f4f6; /* to-gray-100 */ background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); } /* --- 全体レイアウト --- */ .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } .mx-auto { margin-left: auto; margin-right: auto; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } /* --- 変更点: フォームの横幅を大幅に縮小 --- */ .max-w-2xl { max-width: 21rem; /* 32remから21rem (336px)に変更 */ } .bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur); } .p-8 { padding: 2rem; } .rounded-2xl { border-radius: 1rem; } .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } /* --- ヘッダー部分 --- */ .text-center { text-align: center; } .mb-10 { margin-bottom: 2.5rem; } .flex { display: flex; } .justify-center { justify-content: center; } .items-center { align-items: center; } .gap-2 { gap: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .text-pink-500 { color: #ec4899; } .h-8 { height: 2rem; } .w-8 { width: 2rem; } .text-5xl { font-size: 3rem; line-height: 1; } .tracking-wider { letter-spacing: 0.05em; } .tracking-tight { letter-spacing: -0.025em; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .text-gray-800 { color: #1f2937; } .text-gray-700 { color: #374151; } .text-gray-500 { color: #6b7280; } .mt-6 { margin-top: 1.5rem; } .mt-4 { margin-top: 1rem; } /* --- フォームの基本レイアウト --- */ .block { display: block; } .relative { position: relative; } .absolute { position: absolute; } .mb-1 { margin-bottom: 0.25rem; } .pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } /* --- Grid & Flex --- */ .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gap-x-4 { column-gap: 1rem; } .gap-y-4 { row-gap: 1rem; } .flex-col { flex-direction: column; } /* --- フォームのテキストスタイル --- */ .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .font-medium { font-weight: 500; } .text-gray-600 { color: #4b5563; } .text-gray-400 { color: #9ca3af; } .text-red-500 { color: #ef4444; } .text-white { color: #ffffff; } /* --- 入力欄 --- */ .form-input { border: 1px solid #d1d5db; width: 100%; border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); padding: 0.625rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .form-input:focus { box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5); /* ピンク色のフォーカスリング */ border-color: #EC4899; outline: none; /* デフォルトのアウトラインを消す */ } .pl-10 { padding-left: 2.5rem; } textarea.form-input { padding: 0.625rem; /* textareaにはpl-10が不要なため上書き */ } /* --- アイコン --- */ .pointer-events-none { pointer-events: none; } .inset-y-0 { top: 0; bottom: 0; } .left-0 { left: 0; } .pl-3 { padding-left: 0.75rem; } .h-5 { height: 1.25rem; } .w-5 { width: 1.25rem; } /* --- 送信ボタン (サイズはHTML側で調整) --- */ .w-full { width: 100%; } .inline-flex { display: inline-flex; } .justify-center { justify-content: center; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .px-12 { padding-left: 3rem; padding-right: 3rem; } .border { border-width: 1px; } .border-transparent { border-color: transparent; } .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .rounded-full { border-radius: 9999px; } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(236 72 153 / 0)); } .to-rose-500 { --tw-gradient-to: #f43f5e; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .duration-300 { transition-duration: 300ms; } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); } .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } .focus\:ring-pink-500:focus { --tw-ring-color: #ec4899; } /* --- レスポンシブ対応 --- */ @media (min-width: 640px) { .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; } .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; } } @media (min-width: 768px) { .md\:w-auto { width: auto; } .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } } /* 「カートに追加」または「詳しく見る」ボタンを非表示 */ /* aタグを指定して、より具体的にボタンを選択します */ selector a.add_to_cart_button { display: none !important; } .tg-inquiry-button { position: relative; z-index: 10; }