/* ==========================================================================
   ABOUT PAGE SPECIFIC STYLES
   ========================================================================== */

/* Message Section */
.message-section {
    padding: 96px 0 120px;
}

.message-content {
    display: flex;
    gap: 64px;
    align-items: flex-end;
}



.member-section .section-title {
    text-align: center;
}
.message-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
	margin-top: 1em;
}

.message-body p {
    font-size: 1rem;
    line-height: 1.8;
    color: #444444;
    margin: 0;
}

.signature {
    text-align: right !important;
    font-weight: normal !important;
    margin-top: 16px !important;
}

.message-image {
    flex: 1;
    max-width: 544px;
    display: flex;
    justify-content: center;
}
 .message-text,
    .message-image {
        width: 50%;
    }
.ceo-image {
    width: 100%;
    height: auto;
    aspect-ratio: 544/526;
    object-fit: cover;
    border-radius: 8px;
}

/* Overview Section */
.overview-section {
    background-color: #f5f5f5;
    padding: 120px 0 0;
    position: relative;
}

.overview-content {
    display: flex;
    gap: 80px;
    align-items: start;
    padding-bottom: 80px;
}

.overview-header {
    width: 254px;
    flex-shrink: 0;
}

.overview-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    border-bottom: 1px solid #d5d5d5;
    min-height: 60px;
}

.detail-label {
    width: 180px;
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.8;
    color: #444444;
    flex-shrink: 0;
}

.detail-value {
    flex: 1;
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.8;
    color: #444444;
}

.overview-image {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.office-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9d9d9;
}

/* Technology Section */
.technology-section {
    height: 400px;
    background-image: url(../images/about_bg01.jpg);
    background-position: center center;
    background-size: cover;
}

/* Member Section */
        .member-section {
            padding: 120px 0;
        }

        .member-grid {
            display: grid;
            /* 1fr は max-width: 7xl のコンテナ内で自動的に幅を調整します */
            grid-template-columns: repeat(auto-fit, minmax(257px, 1fr));
            gap: 32px;
            max-width: 860px;
            margin: 30px auto 0;
        }

        
        .member-card {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: center;
            max-width: 352px;
            justify-self: center;
            
            /* 注: 視覚的装飾 (background, shadow, radius, transition) は削除し、
               純粋なレイアウトの定義のみを残しました。 */
        }
        
        .member-card:hover {
            /* 注: ホバー時の視覚的装飾 (shadow, transform) は削除しました。 */
        }

        .member-avatar {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #e0e0e0;
            background: white;
        }

        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .member-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
        }

        .member-role {
            font-family: "Jost", sans-serif;
            font-size: 12px;
            line-height: 1.2;
            color: #444444;
            text-transform: uppercase;
        }

        .member-name {
            font-family: "Jost", sans-serif;
            font-size: 20px;
            line-height: 1.2;
            color: #444444;
            font-weight: 500;
        }

        .member-link {
            display: flex;
            gap: 10px;
            align-items: center;
            color: #444444;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            transition: color 0.3s ease;
            font-weight: 600;
        }

        .member-link:hover {
            color: #ff3a4c;
        }
        
        /* --- モーダル機能のための純粋なCSS (変更なし) --- */
        .modal-wrapper {
            position: fixed;
            inset: 0;
            z-index: 50;
            padding: 1rem;
            background-color: rgba(17, 24, 39, 0.9);
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-out, visibility 0s 0.3s;
            display: flex; /* 中央寄せのために追加 */
            align-items: center;
            justify-content: center;
        }

        .modal-wrapper:target {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.3s ease-in;
        }
        
        .modal-content-container {
            transform: scale(0.95);
            transition: transform 0.3s ease-out;
            max-width: 90%; /* レスポンシブ対応 */
            width: 800px; /* Max width */
            
            /* モーダルコンテンツの視覚的スタイル */
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            padding: 30px;
            position: relative;
        }
        
        .modal-wrapper:target .modal-content-container {
            transform: scale(1);
        }
.page-title.policy-title {
  font-family: "Jost", sans-serif;
  font-size: 3rem;
}
/* About Page Responsive */

@media (max-width: 768px) {
    .technology-section {
  height: 250px;
}
    
    .message-section {
        padding: 60px 0;
    }
    
    .message-content {
        flex-direction: column;
        align-items: center;
    }
    
    .message-text,
    .message-image {
        width: 100%;
        max-width: 100%;
    }
    
    .overview-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .overview-header {
        width: 100%;
        text-align: center;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: start;
    }
    
    .detail-label {
        width: 100%;
        font-weight: bold;
        border-bottom: none;
        padding-bottom: 5px;
    }
    
    .detail-value {
        padding-left: 20px;
        padding-top: 0;
    }
    
    .member-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
    }
    
    .member-card {
        max-width: 100%;
    }
    
    .member-avatar {
        width: 150px;
        height: 150px;
    }
   .page-title.policy-title {
  font-size: 2.5rem;
}
	.policy-section .section-title {
font-size: 30px;
}
}

@media (max-width: 480px) {
    .member-section,.overview-section {
  padding: 60px 0;
}
	
	  .message-text h2 {
    text-align: center;
		  margin-bottom: 20px;
  }
 .technology-section {
  height: 200px;
}
	  .overview-content {
    flex-direction: column;
    gap: 20px;
  }
    .member-grid {
        grid-template-columns: 1fr;
    }
    
    .member-avatar {
        width: 200px;
        height: 200px;
    }
	 .page-title.policy-title {
  font-size: 6vw;
}
	.policy-section .section-title {
 font-size: 5vw;
}
}

/* Message Section */
.policy-section {
    padding: 96px 0 120px;
}

.policy-content {
    display: flex;
    gap: 32px;
    align-items: start;
}



.policy-section .section-title {
    text-align: center;
}
.policy-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.policy-body p {
    font-size: 1rem;
    line-height: 1.8;
    color: #444444;
    margin: 0;
}

.law-display-list {
			margin-top: 20px;
			border-top: 1px solid #ccc;
		}
		.law-display-list dt {
			font-weight: bold;
			padding: 15px 0 5px 0;
			margin-top: 20px;
			border-bottom: 1px solid #eee;
			color: #333;
			font-size: 1.1rem;
		}
		.law-display-list dd {
			padding: 10px 0 15px 0;
			margin-left: 0;
			line-height: 1.8;
			font-size: 1rem;
			color: #555;
		}
		.law-display-list dd ul {
			list-style-type: none;
			padding-left: 0;
		}
		.law-display-list dd li {
			margin-bottom: 5px;
			padding-left: 1.2em;
		}
		.law-display-list dd li::before {
			content: "・";
			color: #007bff; /* Primary color hint */
			font-weight: bold;
			display: inline-block;
			width: 1.2em;
		}
		
		/* --- 決済方法のスタイリングをインラインから移動 --- */
		/* クレジットカード決済のタイトル */
		.payment-method-title {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
		}

		/* クレジットカード決済の詳細（インデント） */
		.payment-method-details {
			margin-left: 20px;
		}

		/* サービス解約リンクのスタイル */
		.termination-link {
			color: #007bff;
			text-decoration: underline;
		}
.privacy-policy-body ul{
	margin-left: 2rem;
}
		
		/* レスポンシブ対応 (モバイル向け調整) */
		@media (max-width: 768px) {
			.law-display-list dt {
				font-size: 1rem;
			}
			.law-display-list dd {
				font-size: 0.9rem;
			}
		}