@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


     1	/* ========================================
     2	   BuddiCare WordPress Custom CSS
     3	   ======================================== */
     4	
     5	/* カラースキーム（grouphome-map.buddicare.comを参考） */
     6	:root {
     7	  --primary-color: #2C5F8D;      /* メインブルー */
     8	  --secondary-color: #4A90E2;    /* ライトブルー */
     9	  --accent-color: #FF8C42;       /* アクセントオレンジ */
    10	  --text-color: #333333;         /* テキスト */
    11	  --text-light: #666666;         /* サブテキスト */
    12	  --bg-light: #F5F7FA;           /* 背景グレー */
    13	  --white: #FFFFFF;
    14	  --border-color: #E0E0E0;
    15	}
    16	
    17	/* リセット・基本スタイル */
    18	* {
    19	  margin: 0;
    20	  padding: 0;
    21	  box-sizing: border-box;
    22	}
    23	
    24	body {
    25	  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    26	  color: var(--text-color);
    27	  line-height: 1.8;
    28	  font-size: 16px;
    29	}
    30	
    31	img {
    32	  max-width: 100%;
    33	  height: auto;
    34	  display: block;
    35	}
    36	
    37	a {
    38	  color: var(--primary-color);
    39	  text-decoration: none;
    40	  transition: all 0.3s ease;
    41	}
    42	
    43	a:hover {
    44	  color: var(--secondary-color);
    45	}
    46	
    47	/* コンテナ */
    48	.bc-container {
    49	  max-width: 1200px;
    50	  margin: 0 auto;
    51	  padding: 0 20px;
    52	}
    53	
    54	.bc-container-narrow {
    55	  max-width: 800px;
    56	  margin: 0 auto;
    57	  padding: 0 20px;
    58	}
    59	
    60	/* セクション */
    61	.bc-section {
  padding: 60px 0;
}
    64	
    65	.bc-section-gray {
    66	  background-color: var(--bg-light);
    67	}
    68	
    69	.bc-section-primary {
    70	  background-color: var(--primary-color);
    71	  color: var(--white);
    72	}
    73	
    74	/* 見出し */
    75	.bc-heading {
    76	  text-align: center;
    77	  margin-bottom: 50px;
    78	}
    79	
    80	.bc-heading h2 {
    81	  font-size: 2.5rem;
    82	  font-weight: 700;
    83	  color: var(--primary-color);
    84	  margin-bottom: 15px;
    85	  position: relative;
    86	  display: inline-block;
    87	  padding-bottom: 15px;
    88	}
    89	
    90	.bc-heading h2::after {
    91	  content: '';
    92	  position: absolute;
    93	  bottom: 0;
    94	  left: 50%;
    95	  transform: translateX(-50%);
    96	  width: 60px;
    97	  height: 3px;
    98	  background-color: var(--accent-color);
    99	}
   100	
   101	.bc-heading p {
   102	  font-size: 1rem;
   103	  color: var(--text-light);
   104	  margin-top: 10px;
   105	}
   106	
   107	/* ボタン */
   108	.bc-btn {
   109	  display: inline-block;
   110	  padding: 15px 40px;
   111	  font-size: 1rem;
   112	  font-weight: 600;
   113	  text-align: center;
   114	  border-radius: 50px;
   115	  transition: all 0.3s ease;
   116	  cursor: pointer;
   117	  border: none;
   118	  text-decoration: none;
   119	}
   120	
   121	.bc-btn-primary {
   122	  background-color: var(--primary-color);
   123	  color: var(--white);
   124	}
   125	
   126	.bc-btn-primary:hover {
   127	  background-color: var(--secondary-color);
   128	  transform: translateY(-2px);
   129	  box-shadow: 0 4px 15px rgba(76, 144, 226, 0.3);
   130	}
   131	
   132	.bc-btn-accent {
   133	  background-color: var(--accent-color);
   134	  color: var(--white);
   135	}
   136	
   137	.bc-btn-accent:hover {
   138	  background-color: #ff7a2e;
   139	  transform: translateY(-2px);
   140	  box-shadow: 0 4px 15px rgba(255, 140, 66, 0.3);
   141	}
   142	
   143	.bc-btn-outline {
   144	  background-color: transparent;
   145	  color: var(--primary-color);
   146	  border: 2px solid var(--primary-color);
   147	}
   148	
   149	.bc-btn-outline:hover {
   150	  background-color: var(--primary-color);
   151	  color: var(--white);
   152	}
   153	
   154	.bc-btn-white {
   155	  background-color: var(--white);
   156	  color: var(--primary-color);
   157	}
   158	
   159	.bc-btn-white:hover {
   160	  background-color: var(--bg-light);
   161	}
   162	
   163	/* ファーストビュー（ヒーローセクション） */
   164	.bc-hero {
   165	  position: relative;
   166	  height: 600px;
   167	  display: flex;
   168	  align-items: center;
   169	  justify-content: center;
   170	  text-align: center;
   171	  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
   172	  color: var(--white);
   173	  overflow: hidden;
   174	}
   175	
   176	.bc-hero::before {
   177	  content: '';
   178	  position: absolute;
   179	  top: 0;
   180	  left: 0;
   181	  right: 0;
   182	  bottom: 0;
   183	  background: rgba(0, 0, 0, 0.3);
   184	  z-index: 1;
   185	}
   186	
   187	.bc-hero-content {
   188	  position: relative;
   189	  z-index: 2;
   190	  max-width: 800px;
   191	  padding: 0 20px;
   192	}
   193	
   194	.bc-hero h1 {
   195	  font-size: 3rem;
   196	  font-weight: 700;
   197	  margin-bottom: 20px;
   198	  line-height: 1.3;
   199	}
   200	
   201	.bc-hero p {
   202	  font-size: 1.3rem;
   203	  margin-bottom: 40px;
   204	  opacity: 0.95;
   205	}
   206	
   207	.bc-hero-buttons {
   208	  display: flex;
   209	  gap: 20px;
   210	  justify-content: center;
   211	  flex-wrap: wrap;
   212	}
   213	
   214	/* カードレイアウト */
   215	.bc-cards {
   216	  display: grid;
   217	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   218	  gap: 30px;
   219	  margin-top: 40px;
   220	}
   221	
   222	.bc-card {
   223	  background: var(--white);
   224	  border-radius: 10px;
   225	  overflow: hidden;
   226	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   227	  transition: all 0.3s ease;
   228	}
   229	
   230	.bc-card:hover {
   231	  transform: translateY(-5px);
   232	  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
   233	}
   234	
   235	.bc-card-image {
   236	  width: 100%;
   237	  height: 200px;
   238	  background-color: var(--bg-light);
   239	  display: flex;
   240	  align-items: center;
   241	  justify-content: center;
   242	  color: var(--text-light);
   243	  font-size: 0.9rem;
   244	}
   245	
   246	.bc-card-body {
   247	  padding: 25px;
   248	}
   249	
   250	.bc-card-title {
   251	  font-size: 1.4rem;
   252	  font-weight: 700;
   253	  color: var(--primary-color);
   254	  margin-bottom: 15px;
   255	}
   256	
   257	.bc-card-text {
   258	  color: var(--text-light);
   259	  margin-bottom: 20px;
   260	  line-height: 1.7;
   261	}
   262	
   263	.bc-card-meta {
   264	  font-size: 0.9rem;
   265	  color: var(--text-light);
   266	  margin-bottom: 10px;
   267	}
   268	
   269	.bc-card-meta strong {
   270	  color: var(--text-color);
   271	}
   272	
   273	/* 2カラムレイアウト */
   274	.bc-two-column {
   275	  display: grid;
   276	  grid-template-columns: 1fr 1fr;
   277	  gap: 50px;
   278	  align-items: center;
   279	}
   280	
   281	/* リスト */
   282	.bc-list {
   283	  list-style: none;
   284	  padding: 0;
   285	}
   286	
   287	.bc-list li {
   288	  padding: 12px 0;
   289	  padding-left: 30px;
   290	  position: relative;
   291	  border-bottom: 1px solid var(--border-color);
   292	}
   293	
   294	.bc-list li:last-child {
   295	  border-bottom: none;
   296	}
   297	
   298	.bc-list li::before {
   299	  content: '✓';
   300	  position: absolute;
   301	  left: 0;
   302	  color: var(--accent-color);
   303	  font-weight: 700;
   304	  font-size: 1.2rem;
   305	}
   306	
   307	/* テーブル */
   308	.bc-table {
   309	  width: 100%;
   310	  border-collapse: collapse;
   311	  margin: 30px 0;
   312	  background: var(--white);
   313	}
   314	
   315	.bc-table th,
   316	.bc-table td {
   317	  padding: 15px;
   318	  text-align: left;
   319	  border: 1px solid var(--border-color);
   320	}
   321	
   322	.bc-table th {
   323	  background-color: var(--bg-light);
   324	  font-weight: 700;
   325	  color: var(--primary-color);
   326	  width: 200px;
   327	}
   328	
   329	.bc-table td {
   330	  color: var(--text-color);
   331	}
   332	
   333	/* CTA（Call to Action） */
   334	.bc-cta {
   335	  text-align: center;
   336	  padding: 80px 20px;
   337	  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
   338	  color: var(--white);
   339	}
   340	
   341	.bc-cta h2 {
   342	  font-size: 2.2rem;
   343	  margin-bottom: 20px;
   344	  font-weight: 700;
   345	}
   346	
   347	.bc-cta p {
   348	  font-size: 1.2rem;
   349	  margin-bottom: 40px;
   350	  opacity: 0.95;
   351	}
   352	
   353	/* フォーム */
   354	.bc-form-group {
   355	  margin-bottom: 25px;
   356	}
   357	
   358	.bc-form-label {
   359	  display: block;
   360	  font-weight: 600;
   361	  margin-bottom: 8px;
   362	  color: var(--text-color);
   363	}
   364	
   365	.bc-form-label .required {
   366	  color: #e74c3c;
   367	  margin-left: 5px;
   368	}
   369	
   370	.bc-form-input,
   371	.bc-form-select,
   372	.bc-form-textarea {
   373	  width: 100%;
   374	  padding: 12px 15px;
   375	  border: 2px solid var(--border-color);
   376	  border-radius: 5px;
   377	  font-size: 1rem;
   378	  font-family: inherit;
   379	  transition: border-color 0.3s ease;
   380	}
   381	
   382	.bc-form-input:focus,
   383	.bc-form-select:focus,
   384	.bc-form-textarea:focus {
   385	  outline: none;
   386	  border-color: var(--primary-color);
   387	}
   388	
   389	.bc-form-textarea {
   390	  min-height: 150px;
   391	  resize: vertical;
   392	}
   393	
   394	/* テキストセンター */
   395	.bc-text-center {
   396	  text-align: center;
   397	}
   398	
   399	/* マージン・パディング調整 */
   400	.bc-mt-20 { margin-top: 20px; }
   401	.bc-mt-40 { margin-top: 40px; }
   402	.bc-mt-60 { margin-top: 60px; }
   403	.bc-mb-20 { margin-bottom: 20px; }
   404	.bc-mb-40 { margin-bottom: 40px; }
   405	.bc-mb-60 { margin-bottom: 60px; }
   406	
   407	/* レスポンシブ対応 */
   408	@media (max-width: 768px) {
   409	  .bc-hero {
   410	    height: 500px;
   411	  }
   412	
   413	  .bc-hero h1 {
   414	    font-size: 2rem;
   415	  }
   416	
   417	  .bc-hero p {
   418	    font-size: 1.1rem;
   419	  }
   420	
   421	  .bc-hero-buttons {
   422	    flex-direction: column;
   423	    align-items: center;
   424	  }
   425	
   426	  .bc-heading h2 {
   427	    font-size: 2rem;
   428	  }
   429	
   430	  .bc-section {
  padding: 40px 0;
}
   433	
   434	  .bc-cards {
   435	    grid-template-columns: 1fr;
   436	  }
   437	
   438	  .bc-two-column {
   439	    grid-template-columns: 1fr;
   440	    gap: 30px;
   441	  }
   442	
   443	  .bc-table th {
   444	    width: 120px;
   445	    font-size: 0.9rem;
   446	  }
   447	
   448	  .bc-table th,
   449	  .bc-table td {
   450	    padding: 10px;
   451	    font-size: 0.9rem;
   452	  }
   453	
   454	  .bc-cta h2 {
   455	    font-size: 1.8rem;
   456	  }
   457	
   458	  .bc-cta p {
   459	    font-size: 1rem;
   460	  }
   461	}
   462	
   463	@media (max-width: 480px) {
   464	  .bc-hero h1 {
   465	    font-size: 1.6rem;
   466	  }
   467	
   468	  .bc-hero p {
   469	    font-size: 1rem;
   470	  }
   471	
   472	  .bc-btn {
   473	    padding: 12px 30px;
   474	    font-size: 0.95rem;
   475	  }
   476	
   477	  .bc-heading h2 {
   478	    font-size: 1.6rem;
   479	  }
   480	
   481	  .bc-table {
   482	    font-size: 0.85rem;
   483	  }
   484	
   485	  .bc-table th,
   486	  .bc-table td {
   487	    padding: 8px;
   488	    display: block;
   489	    width: 100%;
   490	  }
   491	
   492	  .bc-table tr {
   493	    display: block;
   494	    margin-bottom: 15px;
   495	    border: 1px solid var(--border-color);
   496	  }
   497	
   498	  .bc-table th {
   499	    background-color: var(--primary-color);
   500	    color: var(--white);
   501	  }
   502	}
   503