/*
* デフォルトのTrixスタイルシート（ツールバー・編集領域の枠線など）について。
*
* このプロジェクトはSprocketsではなくTailwind CLI（tailwindcss-rails）でCSSを
* ビルドしているため、Rails公式ジェネレータが出力する `*= require trix` という
* Sprockets向けディレクティブは機能しない（ただのコメントとして無視され、Trixの
* CSSが一切読み込まれずツールバー・エディタ枠が完全に無装飾になる）。
*
* gemファイルをリポジトリにコピーする方式は「Trixのバージョンを上げても中身が
* 自動で追従しない」ため避け、代わりにflowbite（application.html.erb参照）と
* 同じ方式でCDN（jsdelivr）から直接 で読み込むようにしている。
* 読み込み箇所:
* - app/views/layouts/application.html.erb（記事詳細ページのcontent_for :head内）
* - app/views/admin/application/_stylesheet.html.erb（管理画面全体）
* バージョンは config/importmap.rb の `pin 'trix'` と揃える必要があるため、
* Trixをアップデートする際は上記2箇所のCDN URLのバージョン番号も一緒に更新すること。
*/
/*
* We need to override trix.css’s image gallery styles to accommodate the
* element we wrap around attachments. Otherwise,
* images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
flex-basis: 50%;
max-width: 50%;
}
.trix-content action-text-attachment .attachment {
padding: 0 !important;
max-width: 100% !important;
}
/*
* 記事エディタ（管理画面）のツールバーに追加した、文字色・マーカー・文字サイズの
* プリセットボタン。Administrate はTailwindを読み込まないため、ここに直接記述する。
*
* trix.css側に `trix-toolbar .trix-button { color: rgba(0,0,0,.6); ... }` という
* ルール（詳細度 0,1,1）があり、単なる `.trix-button--text-accent`（詳細度 0,1,0）
* だとCSSの詳細度で負けて常にグレー表示になってしまう。ボタン要素は
* `class="trix-button trix-button--text-accent"` のように両方のクラスを持つ
* （app/javascript/admin/trix_extensions.js参照）ため、`trix-toolbar` を前置し
* 両方のクラスを指定することで詳細度 0,2,1 とし、読み込み順に関わらず勝つようにする。
*/
trix-toolbar .trix-button.trix-button--text-accent,
trix-toolbar .trix-button.trix-button--text-secondary,
trix-toolbar .trix-button.trix-button--text-alert,
trix-toolbar .trix-button.trix-button--marker,
trix-toolbar .trix-button.trix-button--size-large,
trix-toolbar .trix-button.trix-button--size-small {
font-size: 0.75em;
width: auto;
padding: 0 0.5em;
}
trix-toolbar .trix-button.trix-button--text-accent { color: #D0988E; }
trix-toolbar .trix-button.trix-button--text-secondary { color: #AD986D; }
trix-toolbar .trix-button.trix-button--text-alert { color: #EC7560; }
trix-toolbar .trix-button.trix-button--marker { background-color: #FFF3B0; }
.trix-content .attachment {
max-width: 100%;
}
/*
* 記事本文（Trix編集領域・管理画面プレビュー双方）の見出し・リストの最低限のスタイル。
*
* このファイルはTailwindビルドに含まれの前半で読み込まれるが、CDNのtrix.css
* （app/views/articles/show.html.erb・app/views/admin/application/_stylesheet.html.erb
* 参照）はそれより後に読み込まれる。trix.css自身も`.trix-content h1`
* `.trix-content blockquote`という同じ詳細度(0,1,1)のルールを持っているため、
* 詳細度が同点だと読み込み順で後勝ちのtrix.css側に負けてしまう。
* トグルボタンの色指定（下記）と同様にクラスを重複させて詳細度を上げ、
* 読み込み順に関わらずこちらが勝つようにしている。
*/
.trix-content.trix-content h1,
.trix-content.trix-content h2,
.trix-content.trix-content h3 {
font-weight: bold;
margin-top: 1em;
margin-bottom: 0.5em;
}
.trix-content.trix-content h1 { font-size: 1.5em; }
.trix-content.trix-content h2 { font-size: 1.3em; }
.trix-content.trix-content h3 { font-size: 1.1em; }
.trix-content ul,
.trix-content ol {
padding-left: 1.5em;
margin-bottom: 1em;
}
.trix-content ul { list-style-type: disc; }
.trix-content ol { list-style-type: decimal; }
.trix-content.trix-content blockquote {
border-left: 3px solid #D6D5D5;
padding-left: 1em;
color: #555;
margin: 1em 0;
}
@import 'actiontext.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply text-dark;
}
[x-cloak] {
display: none !important;
}
}
@layer components {
.mypage-heading {
@apply text-xl sm:text-2xl md:text-3xl font-shippori mb-8 sm:mb-12 md:mb-16;
}
.content-area {
@apply mb-20 sm:mb-32 md:mb-40 lg:mb-44;
}
.btn-primary {
@apply bg-primary text-white font-sans py-2 px-4 rounded hover:bg-opacity-50;
}
.btn-secondary {
@apply bg-secondary text-white font-sans py-2 px-4 rounded hover:bg-opacity-50;
}
.btn-accent {
@apply bg-accent text-white font-sans py-2 px-4 rounded hover:bg-opacity-50;
}
.btn-white {
@apply text-center px-4 py-4 text-secondary font-sans border border-secondary rounded;
}
.field-container {
@apply flex flex-col w-full max-w-[800px] space-y-8;
}
.field {
@apply px-2 w-full sm:px-0 mx-auto;
}
.field-label {
@apply block text-sm font-sans mb-2;
}
.required-label::after {
content: "（必須）";
@apply text-gray-400 text-xs ml-1;
}
.optional-label::after {
content: "（任意）";
@apply text-gray-400 text-xs ml-1;
}
.field .label-note {
@apply text-gray-400 text-xs ml-1;
}
.field-input {
@apply w-full px-3 py-2 bg-primary bg-opacity-50 border-none rounded-lg shadow-none font-sans text-sm;
}
.field-textarea {
@apply w-full px-3 py-2 bg-primary bg-opacity-50 border-none rounded-lg shadow-none font-sans text-sm resize-none;
}
/* プレースホルダーの色を #C1C1C1 に設定 */
.field-input::placeholder,
.field-textarea::placeholder {
color: #c1c1c1;
}
.checkbox-label {
@apply block text-sm font-sans;
}
.checkbox-input {
@apply mr-2 leading-tight;
}
.radio-group {
@apply mt-2 space-y-2;
}
.radio-input {
@apply mr-2 leading-tight;
}
.form-submit {
@apply w-full h-16 text-white tracking-widest bg-secondary hover:bg-opacity-50 font-sans rounded;
}
.error-message {
@apply text-alert text-xs mt-1;
}
/* テーブル全体のスタイル */
.mp-table {
@apply w-full border-collapse text-sm font-normal;
}
/* テーブルヘッダー (th) の共通スタイル */
.mp-table tbody tr th {
@apply bg-primary text-left border border-[#c8c8c8] p-4 sm:p-6 font-normal w-32 sm:w-64;
}
/* テーブルセル (td) の共通スタイル */
.mp-table tbody tr td {
@apply border border-[#c8c8c8] p-4 sm:p-6 w-auto min-w-32;
}
.font-sans-el {
@apply font-sans font-extralight;
}
.tag-container {
@apply flex flex-wrap gap-2 font-roboto;
.tag-primary {
@apply bg-primary py-2 px-4 rounded-full text-sm;
}
.tag-white {
@apply bg-white py-2 px-4 rounded-full text-sm;
}
}
.dotted01 {
background-image: linear-gradient(to right, #000 1px, transparent 1px);
background-size: 10px 1px;
background-repeat: repeat-x;
background-position: left bottom;
}
.heading-with-icon::before {
content: "●";
margin-right: 0.5rem;
display: inline-block;
}
.heading-with-icon {
@apply text-secondary font-sans-el;
}
.pre-signup-heading {
@apply font-marcellus text-accent text-center mb-4;
}
.pre-signup-heading-jp {
@apply font-shippori bg-accent tracking-widest text-white text-xl py-2 mb-12 w-64 text-center;
}
.fade-out {
width: 100%;
height: 20rem;
background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
pointer-events: none;
}
/* Full-bleed utility to span viewport width inside a constrained container */
.full-bleed {
@apply w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw];
}
.hero-title {
@apply font-shippori font-semibold text-[20px] md:text-[32px] leading-[1.4] tracking-[0.04em] text-center;
}
.hero-description {
@apply font-sans font-normal text-sm leading-[1.4] tracking-[0.06em] text-center;
}
}
.logo img {
display: block;
height: 3rem; /* 具体的な高さを設定 */
}
.logo h1 {
line-height: 3rem; /* 画像の高さに合わせる */
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/