1	/* ===================================
     2	   書籍一覧ページ・サービスページ・お問い合わせページ用CSS
     3	   =================================== */
     4	
     5	/* ==================
     6	   ページヘッダー
     7	   ================== */
     8	.page-header {
     9	    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    10	    color: white;
    11	    padding: 8rem var(--spacing-sm) 4rem;
    12	    text-align: center;
    13	    margin-top: 70px;
    14	}
    15	
    16	.page-title {
    17	    font-family: var(--font-heading);
    18	    font-size: 3rem;
    19	    font-weight: 700;
    20	    margin-bottom: var(--spacing-sm);
    21	}
    22	
    23	.page-subtitle {
    24	    font-size: 1.2rem;
    25	    opacity: 0.95;
    26	    margin-bottom: var(--spacing-md);
    27	}
    28	
    29	.breadcrumb {
    30	    display: flex;
    31	    justify-content: center;
    32	    align-items: center;
    33	    gap: var(--spacing-xs);
    34	    font-size: 0.9rem;
    35	    opacity: 0.9;
    36	}
    37	
    38	.breadcrumb a {
    39	    color: white;
    40	    text-decoration: none;
    41	    transition: var(--transition);
    42	}
    43	
    44	.breadcrumb a:hover {
    45	    opacity: 0.8;
    46	}
    47	
    48	/* ==================
    49	   書籍フィルター
    50	   ================== */
    51	.books-filter {
    52	    padding: var(--spacing-md) 0;
    53	    background: var(--bg-white);
    54	    border-bottom: 1px solid var(--border-color);
    55	    position: sticky;
    56	    top: 70px;
    57	    z-index: 100;
    58	}
    59	
    60	.filter-tabs {
    61	    display: flex;
    62	    gap: var(--spacing-sm);
    63	    justify-content: center;
    64	    flex-wrap: wrap;
    65	}
    66	
    67	.filter-btn {
    68	    padding: 0.6rem 1.5rem;
    69	    background: white;
    70	    border: 2px solid var(--border-color);
    71	    border-radius: var(--radius-md);
    72	    color: var(--text-dark);
    73	    font-weight: 500;
    74	    cursor: pointer;
    75	    transition: var(--transition);
    76	}
    77	
    78	.filter-btn:hover,
    79	.filter-btn.active {
    80	    background: var(--primary-color);
    81	    color: white;
    82	    border-color: var(--primary-color);
    83	}
    84	
    85	/* ==================
    86	   書籍一覧
    87	   ================== */
    88	.books-list {
    89	    padding: var(--spacing-xl) 0;
    90	    background: var(--bg-light);
    91	}
    92	
    93	.books-category {
    94	    margin-bottom: var(--spacing-xl);
    95	}
    96	
    97	.category-title {
    98	    font-size: 2rem;
    99	    color: var(--primary-color);
   100	    margin-bottom: var(--spacing-md);
   101	    padding-bottom: var(--spacing-sm);
   102	    border-bottom: 3px solid var(--primary-light);
   103	    display: flex;
   104	    align-items: center;
   105	    gap: var(--spacing-sm);
   106	}
   107	
   108	.category-title i {
   109	    font-size: 1.5rem;
   110	}
   111	
   112	.books-grid {
   113	    display: grid;
   114	    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   115	    gap: var(--spacing-md);
   116	}
   117	
   118	.book-item {
   119	    background: white;
   120	    border-radius: var(--radius-lg);
   121	    overflow: hidden;
   122	    box-shadow: var(--shadow-md);
   123	    transition: var(--transition);
   124	    display: flex;
   125	    flex-direction: column;
   126	}
   127	
   128	.book-item:hover {
   129	    transform: translateY(-8px);
   130	    box-shadow: var(--shadow-lg);
   131	}
   132	
   133	.book-overlay {
   134	    position: absolute;
   135	    top: 0;
   136	    left: 0;
   137	    right: 0;
   138	    bottom: 0;
   139	    background: rgba(30, 91, 168, 0.95);
   140	    display: flex;
   141	    align-items: center;
   142	    justify-content: center;
   143	    opacity: 0;
   144	    transition: var(--transition);
   145	}
   146	
   147	.book-item:hover .book-overlay {
   148	    opacity: 1;
   149	}
   150	
   151	.btn-preview {
   152	    color: white;
   153	    text-decoration: none;
   154	    padding: 0.8rem 1.5rem;
   155	    border: 2px solid white;
   156	    border-radius: var(--radius-md);
   157	    font-weight: 600;
   158	    transition: var(--transition);
   159	}
   160	
   161	.btn-preview:hover {
   162	    background: white;
   163	    color: var(--primary-color);
   164	}
   165	
   166	.book-details {
   167	    padding: var(--spacing-md);
   168	}
   169	
   170	.book-tag {
   171	    display: inline-block;
   172	    background: var(--primary-light);
   173	    color: white;
   174	    padding: 0.3rem 0.8rem;
   175	    border-radius: var(--radius-sm);
   176	    font-size: 0.8rem;
   177	    font-weight: 600;
   178	    margin-bottom: var(--spacing-sm);
   179	}
   180	
   181	.book-details h3 {
   182	    font-size: 1.2rem;
   183	    color: var(--primary-color);
   184	    margin-bottom: var(--spacing-sm);
   185	    line-height: 1.4;
   186	}
   187	
   188	.book-excerpt {
   189	    color: var(--text-light);
   190	    font-size: 0.9rem;
   191	    line-height: 1.6;
   192	    margin-bottom: var(--spacing-sm);
   193	}
   194	
   195	.load-more-section {
   196	    text-align: center;
   197	    padding: var(--spacing-lg) 0;
   198	}
   199	
   200	.small-text {
   201	    font-size: 0.85rem;
   202	    color: var(--text-light);
   203	    margin-top: var(--spacing-sm);
   204	}
   205	
   206	/* ==================
   207	   サービス詳細
   208	   ================== */
   209	.services-intro {
   210	    padding: var(--spacing-xl) 0;
   211	    text-align: center;
   212	    background: var(--bg-light);
   213	}
   214	
   215	.intro-content h2 {
   216	    font-size: 2.5rem;
   217	    color: var(--primary-color);
   218	    margin-bottom: var(--spacing-sm);
   219	    line-height: 1.3;
   220	}
   221	
   222	.intro-content p {
   223	    font-size: 1.1rem;
   224	    color: var(--text-light);
   225	    max-width: 800px;
   226	    margin: 0 auto;
   227	    line-height: 1.8;
   228	}
   229	
   230	.services-detail {
   231	    padding: var(--spacing-xl) 0;
   232	    background: var(--bg-white);
   233	}
   234	
   235	.service-detail-card {
   236	    background: white;
   237	    border-radius: var(--radius-lg);
   238	    box-shadow: var(--shadow-md);
   239	    margin-bottom: var(--spacing-lg);
   240	    overflow: hidden;
   241	    border: 2px solid var(--border-color);
   242	    transition: var(--transition);
   243	}
   244	
   245	.service-detail-card:hover {
   246	    border-color: var(--primary-light);
   247	    box-shadow: var(--shadow-lg);
   248	}
   249	
   250	.service-detail-card {
   251	    display: grid;
   252	    grid-template-columns: 150px 1fr 250px;
   253	    gap: var(--spacing-md);
   254	    padding: var(--spacing-md);
   255	    align-items: start;
   256	}
   257	
   258	.service-detail-icon {
   259	    width: 120px;
   260	    height: 120px;
   261	    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
   262	    border-radius: var(--radius-lg);
   263	    display: flex;
   264	    align-items: center;
   265	    justify-content: center;
   266	    margin: 0 auto;
   267	}
   268	
   269	.service-detail-icon i {
   270	    font-size: 3rem;
   271	    color: white;
   272	}
   273	
   274	.service-detail-content h2 {
   275	    font-size: 2rem;
   276	    color: var(--primary-color);
   277	    margin-bottom: var(--spacing-xs);
   278	}
   279	
   280	.service-lead {
   281	    font-size: 1.1rem;
   282	    color: var(--text-light);
   283	    margin-bottom: var(--spacing-md);
   284	}
   285	
   286	.service-description h3 {
   287	    font-size: 1.3rem;
   288	    color: var(--primary-dark);
   289	    margin: var(--spacing-md) 0 var(--spacing-sm);
   290	}
   291	
   292	.service-description h3 i {
   293	    margin-right: var(--spacing-xs);
   294	    color: var(--primary-color);
   295	}
   296	
   297	.service-list {
   298	    list-style: none;
   299	    margin: var(--spacing-sm) 0;
   300	}
   301	
   302	.service-list li {
   303	    padding: var(--spacing-xs) 0;
   304	    padding-left: var(--spacing-md);
   305	    position: relative;
   306	    line-height: 1.7;
   307	}
   308	
   309	.service-list li::before {
   310	    content: '✓';
   311	    position: absolute;
   312	    left: 0;
   313	    color: var(--primary-color);
   314	    font-weight: bold;
   315	}
   316	
   317	.service-price {
   318	    background: var(--bg-light);
   319	    padding: var(--spacing-md);
   320	    border-radius: var(--radius-md);
   321	    text-align: center;
   322	}
   323	
   324	.price-label {
   325	    font-size: 0.9rem;
   326	    color: var(--text-light);
   327	    margin-bottom: var(--spacing-xs);
   328	}
   329	
   330	.price-value {
   331	    font-size: 1.5rem;
   332	    font-weight: 700;
   333	    color: var(--primary-color);
   334	    margin-bottom: var(--spacing-md);
   335	}
   336	
   337	/* ==================
   338	   制作の流れ
   339	   ================== */
   340	.workflow {
   341	    padding: var(--spacing-xl) 0;
   342	    background: var(--bg-light);
   343	}
   344	
   345	.workflow-steps {
   346	    display: flex;
   347	    align-items: center;
   348	    justify-content: center;
   349	    gap: var(--spacing-sm);
   350	    flex-wrap: wrap;
   351	}
   352	
   353	.workflow-step {
   354	    background: white;
   355	    padding: var(--spacing-md);
   356	    border-radius: var(--radius-lg);
   357	    box-shadow: var(--shadow-md);
   358	    text-align: center;
   359	    max-width: 180px;
   360	    position: relative;
   361	}
   362	
   363	.step-number {
   364	    position: absolute;
   365	    top: -15px;
   366	    left: 50%;
   367	    transform: translateX(-50%);
   368	    width: 35px;
   369	    height: 35px;
   370	    background: var(--primary-color);
   371	    color: white;
   372	    border-radius: 50%;
   373	    display: flex;
   374	    align-items: center;
   375	    justify-content: center;
   376	    font-weight: 700;
   377	    font-size: 1.1rem;
   378	}
   379	
   380	.step-icon {
   381	    width: 60px;
   382	    height: 60px;
   383	    background: linear-gradient(135deg, var(--primary-light), var(--accent-color));
   384	    border-radius: 50%;
   385	    display: flex;
   386	    align-items: center;
   387	    justify-content: center;
   388	    margin: var(--spacing-md) auto var(--spacing-sm);
   389	}
   390	
   391	.step-icon i {
   392	    font-size: 1.5rem;
   393	    color: white;
   394	}
   395	
   396	.workflow-step h3 {
   397	    font-size: 1.1rem;
   398	    color: var(--primary-color);
   399	    margin-bottom: var(--spacing-xs);
   400	}
   401	
   402	.workflow-step p {
   403	    font-size: 0.85rem;
   404	    color: var(--text-light);
   405	    line-height: 1.5;
   406	}
   407	
   408	.workflow-arrow {
   409	    font-size: 1.5rem;
   410	    color: var(--primary-light);
   411	}
   412	
   413	/* ==================
   414	   FAQ
   415	   ================== */
   416	.faq {
   417	    padding: var(--spacing-xl) 0;
   418	    background: var(--bg-white);
   419	}
   420	
   421	.faq-list {
   422	    max-width: 900px;
   423	    margin: 0 auto;
   424	}
   425	
   426	.faq-item {
   427	    background: white;
   428	    border-radius: var(--radius-md);
   429	    box-shadow: var(--shadow-sm);
   430	    margin-bottom: var(--spacing-sm);
   431	    overflow: hidden;
   432	}
   433	
   434	.faq-question {
   435	    display: flex;
   436	    align-items: center;
   437	    gap: var(--spacing-sm);
   438	    padding: var(--spacing-md);
   439	    cursor: pointer;
   440	    transition: var(--transition);
   441	    background: var(--bg-light);
   442	}
   443	
   444	.faq-question:hover {
   445	    background: var(--primary-light);
   446	    color: white;
   447	}
   448	
   449	.faq-question i {
   450	    color: var(--primary-color);
   451	    font-size: 1.5rem;
   452	}
   453	
   454	.faq-question:hover i {
   455	    color: white;
   456	}
   457	
   458	.faq-question h3 {
   459	    flex: 1;
   460	    font-size: 1.1rem;
   461	    font-weight: 600;
   462	}
   463	
   464	.faq-toggle {
   465	    font-size: 1.2rem;
   466	    transition: var(--transition);
   467	}
   468	
   469	.faq-item.active .faq-toggle {
   470	    transform: rotate(180deg);
   471	}
   472	
   473	.faq-answer {
   474	    padding: 0 var(--spacing-md);
   475	    max-height: 0;
   476	    overflow: hidden;
   477	    transition: var(--transition);
   478	}
   479	
   480	.faq-item.active .faq-answer {
   481	    padding: var(--spacing-md);
   482	    max-height: 500px;
   483	}
   484	
   485	.faq-answer p {
   486	    line-height: 1.7;
   487	    color: var(--text-dark);
   488	}
   489	
   490	/* ==================
   491	   お問い合わせページ
   492	   ================== */
   493	.contact-section {
   494	    padding: var(--spacing-xl) 0;
   495	    background: var(--bg-light);
   496	}
   497	
   498	.contact-intro {
   499	    text-align: center;
   500	    margin-bottom: var(--spacing-lg);
   501	}
   502	
   503	.contact-intro h2 {
   504	    font-size: 2.5rem;
   505	    color: var(--primary-color);
   506	    margin-bottom: var(--spacing-sm);
   507	}
   508	
   509	.contact-intro p {
   510	    font-size: 1.1rem;
   511	    color: var(--text-light);
   512	    line-height: 1.8;
   513	}
   514	
   515	.contact-layout {
   516	    display: grid;
   517	    grid-template-columns: 2fr 1fr;
   518	    gap: var(--spacing-md);
   519	}
   520	
   521	.contact-form-wrapper,
   522	.contact-info-wrapper {
   523	    background: white;
   524	    border-radius: var(--radius-lg);
   525	    box-shadow: var(--shadow-md);
   526	    padding: var(--spacing-md);
   527	}
   528	
   529	.contact-form-wrapper h3,
   530	.contact-info-card h3,
   531	.contact-sns-card h3,
   532	.contact-tips-card h3 {
   533	    font-size: 1.5rem;
   534	    color: var(--primary-color);
   535	    margin-bottom: var(--spacing-md);
   536	}
   537	
   538	.contact-form-wrapper h3 i,
   539	.contact-info-card h3 i,
   540	.contact-sns-card h3 i,
   541	.contact-tips-card h3 i {
   542	    margin-right: var(--spacing-xs);
   543	}
   544	
   545	.form-group {
   546	    margin-bottom: var(--spacing-md);
   547	}
   548	
   549	.form-group label {
   550	    display: block;
   551	    font-weight: 600;
   552	    color: var(--text-dark);
   553	    margin-bottom: var(--spacing-xs);
   554	}
   555	
   556	.required {
   557	    color: var(--danger-color);
   558	    font-weight: 700;
   559	}
   560	
   561	.form-group input,
   562	.form-group select,
   563	.form-group textarea {
   564	    width: 100%;
   565	    padding: 0.8rem;
   566	    border: 2px solid var(--border-color);
   567	    border-radius: var(--radius-md);
   568	    font-family: var(--font-primary);
   569	    font-size: 1rem;
   570	    transition: var(--transition);
   571	}
   572	
   573	.form-group input:focus,
   574	.form-group select:focus,
   575	.form-group textarea:focus {
   576	    outline: none;
   577	    border-color: var(--primary-color);
   578	    box-shadow: 0 0 0 3px rgba(30, 91, 168, 0.1);
   579	}
   580	
   581	.checkbox-label {
   582	    display: flex;
   583	    align-items: center;
   584	    gap: var(--spacing-xs);
   585	    cursor: pointer;
   586	}
   587	
   588	.checkbox-label input[type="checkbox"] {
   589	    width: auto;
   590	}
   591	
   592	.privacy-link {
   593	    color: var(--primary-color);
   594	    text-decoration: none;
   595	}
   596	
   597	.privacy-link:hover {
   598	    text-decoration: underline;
   599	}
   600	
   601	.form-submit {
   602	    text-align: center;
   603	    margin-top: var(--spacing-md);
   604	}
   605	
   606	.form-message {
   607	    margin-top: var(--spacing-md);
   608	    padding: var(--spacing-sm);
   609	    border-radius: var(--radius-md);
   610	    text-align: center;
   611	    display: none;
   612	}
   613	
   614	.form-message.success {
   615	    display: block;
   616	    background: #d4edda;
   617	    color: var(--success-color);
   618	    border: 1px solid var(--success-color);
   619	}
   620	
   621	.form-message.error {
   622	    display: block;
   623	    background: #f8d7da;
   624	    color: var(--danger-color);
   625	    border: 1px solid var(--danger-color);
   626	}
   627	
   628	/* お問い合わせ情報カード */
   629	.contact-info-card,
   630	.contact-sns-card,
   631	.contact-tips-card {
   632	    background: white;
   633	    border-radius: var(--radius-lg);
   634	    box-shadow: var(--shadow-sm);
   635	    padding: var(--spacing-md);
   636	    margin-bottom: var(--spacing-md);
   637	}
   638	
   639	.info-item {
   640	    display: flex;
   641	    gap: var(--spacing-sm);
   642	    margin-bottom: var(--spacing-md);
   643	}
   644	
   645	.info-icon {
   646	    width: 50px;
   647	    height: 50px;
   648	    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
   649	    border-radius: 50%;
   650	    display: flex;
   651	    align-items: center;
   652	    justify-content: center;
   653	    flex-shrink: 0;
   654	}
   655	
   656	.info-icon i {
   657	    font-size: 1.3rem;
   658	    color: white;
   659	}
   660	
   661	.info-content h4 {
   662	    font-size: 1.1rem;
   663	    color: var(--primary-color);
   664	    margin-bottom: var(--spacing-xs);
   665	}
   666	
   667	.info-content p {
   668	    font-size: 0.95rem;
   669	    color: var(--text-light);
   670	    line-height: 1.6;
   671	}
   672	
   673	.info-content a {
   674	    color: var(--primary-color);
   675	    text-decoration: none;
   676	}
   677	
   678	.info-content a:hover {
   679	    text-decoration: underline;
   680	}
   681	
   682	/* SNSボタン */
   683	.sns-buttons {
   684	    display: flex;
   685	    flex-direction: column;
   686	    gap: var(--spacing-sm);
   687	    margin-top: var(--spacing-md);
   688	}
   689	
   690	.sns-btn {
   691	    display: flex;
   692	    align-items: center;
   693	    justify-content: center;
   694	    gap: var(--spacing-xs);
   695	    padding: 0.8rem;
   696	    border-radius: var(--radius-md);
   697	    text-decoration: none;
   698	    color: white;
   699	    font-weight: 600;
   700	    transition: var(--transition);
   701	}
   702	
   703	.twitter-btn { background: #1DA1F2; }
   704	.facebook-btn { background: #4267B2; }
   705	.instagram-btn { background: #E4405F; }
   706	.amazon-btn { background: #FF9900; }
   707	
   708	.sns-btn:hover {
   709	    transform: translateY(-2px);
   710	    box-shadow: var(--shadow-md);
   711	}
   712	
   713	/* ヒントカード */
   714	.contact-tips-card ul {
   715	    list-style: none;
   716	    margin-top: var(--spacing-sm);
   717	}
   718	
   719	.contact-tips-card li {
   720	    padding: var(--spacing-xs) 0;
   721	    padding-left: var(--spacing-md);
   722	    position: relative;
   723	    line-height: 1.6;
   724	    font-size: 0.95rem;
   725	    color: var(--text-light);
   726	}
   727	
   728	.contact-tips-card li::before {
   729	    content: '💡';
   730	    position: absolute;
   731	    left: 0;
   732	}
   733	
   734	/* FAQ Mini */
   735	.faq-mini {
   736	    padding: var(--spacing-xl) 0;
   737	    background: var(--bg-white);
   738	}
   739	
   740	.faq-mini h2 {
   741	    text-align: center;
   742	    font-size: 2rem;
   743	    color: var(--primary-color);
   744	    margin-bottom: var(--spacing-lg);
   745	}
   746	
   747	.faq-mini-grid {
   748	    display: grid;
   749	    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   750	    gap: var(--spacing-md);
   751	    margin-bottom: var(--spacing-md);
   752	}
   753	
   754	.faq-mini-card {
   755	    background: white;
   756	    padding: var(--spacing-md);
   757	    border-radius: var(--radius-lg);
   758	    box-shadow: var(--shadow-sm);
   759	    transition: var(--transition);
   760	}
   761	
   762	.faq-mini-card:hover {
   763	    transform: translateY(-5px);
   764	    box-shadow: var(--shadow-md);
   765	}
   766	
   767	.faq-mini-card h3 {
   768	    font-size: 1.1rem;
   769	    color: var(--primary-color);
   770	    margin-bottom: var(--spacing-sm);
   771	    display: flex;
   772	    align-items: center;
   773	    gap: var(--spacing-xs);
   774	}
   775	
   776	.faq-mini-card h3 i {
   777	    font-size: 1.3rem;
   778	}
   779	
   780	.faq-mini-card p {
   781	    font-size: 0.95rem;
   782	    color: var(--text-light);
   783	    line-height: 1.6;
   784	}
   785	
   786	/* プライバシーポリシー */
   787	.privacy-policy {
   788	    padding: var(--spacing-xl) 0;
   789	    background: var(--bg-light);
   790	}
   791	
   792	.privacy-policy h2 {
   793	    text-align: center;
   794	    font-size: 2rem;
   795	    color: var(--primary-color);
   796	    margin-bottom: var(--spacing-lg);
   797	}
   798	
   799	.privacy-content {
   800	    max-width: 900px;
   801	    margin: 0 auto;
   802	    background: white;
   803	    padding: var(--spacing-lg);
   804	    border-radius: var(--radius-lg);
   805	    box-shadow: var(--shadow-md);
   806	}
   807	
   808	.privacy-content h3 {
   809	    font-size: 1.5rem;
   810	    color: var(--primary-color);
   811	    margin-bottom: var(--spacing-sm);
   812	}
   813	
   814	.privacy-content h4 {
   815	    font-size: 1.2rem;
   816	    color: var(--primary-dark);
   817	    margin: var(--spacing-md) 0 var(--spacing-sm);
   818	}
   819	
   820	.privacy-content p {
   821	    line-height: 1.8;
   822	    margin-bottom: var(--spacing-sm);
   823	}
   824	
   825	.privacy-content ul {
   826	    margin: var(--spacing-sm) 0 var(--spacing-md) var(--spacing-md);
   827	    line-height: 1.8;
   828	}
   829	
   830	/* ==================
   831	   追加のレスポンシブ
   832	   ================== */
   833	@media (max-width: 968px) {
   834	    .service-detail-card {
   835	        grid-template-columns: 1fr;
   836	        text-align: center;
   837	    }
   838	    
   839	    .contact-layout {
   840	        grid-template-columns: 1fr;
   841	    }
   842	    
   843	    .workflow-steps {
   844	        flex-direction: column;
   845	    }
   846	    
   847	    .workflow-arrow {
   848	        transform: rotate(90deg);
   849	    }
   850	}
   851	
   852	@media (max-width: 640px) {
   853	    .page-title {
   854	        font-size: 2rem;
   855	    }
   856	    
   857	    .page-subtitle {
   858	        font-size: 1rem;
   859	    }
   860	    
   861	    .filter-tabs {
   862	        flex-direction: column;
   863	    }
   864	    
   865	    .filter-btn {
   866	        width: 100%;
   867	    }
   868	    
   869	    .books-grid {
   870	        grid-template-columns: 1fr;
   871	    }
   872	}