@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

html[lang="ja"] {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
background: #fff;
color: #000;
}

/* header */
.header {
padding: 16px 40px;
max-width: 1600px;
margin: 0 auto;
position: fixed;
top: 0;
background: white;
width: 100%;
z-index: 1000;
}

.header-menu {
display: flex;
justify-content: space-between;
align-items: center;
}

.header-logo a {
font-weight: bold;
font-size: 24px;
text-decoration: none;
color: #000;
}

.header-link {
display: flex;
gap: 20px;
}

.header-link a {
text-decoration: none;
font-size: 16px;
color: #000;
}

/* fv: メインビジュアル */
.fv {
text-align: right;
padding: 160px 40px 160px;
max-width: 1600px;
margin: 0 auto;
}

.fv .fv-txt {
display: inline-block;
text-align: right;
}

.fv .fv-txt img {
max-width: 70%;
height: auto;
}

/* philosophy: メインビジュアル */
.philosophy {
padding: 80px 40px;
max-width: 1600px;
margin: 0 auto;
}

.philosophy-ttl {
margin-bottom: 24px;
}

._ttl {
font-size: 24px;
font-weight: bold;
margin-bottom: 12px;
}

._subttl {
font-size: 14px;
color: #333;
}

._text {
font-size: 16px;
line-height: 1.5;
color: #000;
padding-bottom: 24px;
}

/* service: メインビジュアル */
.service {
padding: 0px 40px 80px;
max-width: 1600px;
margin: 0 auto;
}

.service-ttl {
margin-bottom: 40px;
}

.service-txtbox {
display:flex;
justify-content: center;
align-items: center;
gap:80px;
}

.service-img {
width:40%;
}

.service-img img {
width:100%;
}

/* company: メインビジュアル */
.company {
padding: 0px 40px 80px;
max-width: 1600px;
margin: 0 auto;
}

.company-map {
margin: 40px auto;
width: 100%;
max-width: 800px;     /* お好みで調整可能 */
height: 300px;        /* 明示的に高さを設定 */
overflow: hidden;
border-radius: 8px;   /* 任意：デザイン的に角丸をつける */
position: relative;
}

iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

.map--gray iframe{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}

table {
border-collapse: collapse;
margin: 40px auto;
width: 100%;
max-width: 800px;     /* お好みで調整可能 */
}
th, td {
border-bottom: 1px solid #ddd;
padding: 10px;
vertical-align: top;
}
th {
border-bottom: 5px solid #222;
/*background-color: #f2f2f2;*/
width: 25%;
text-align: left;
}


/* ローディング画面 */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 1s ease, visibility 1s ease;
}

/* ロゴ全体 */
.logo {
display: flex;
align-items: center;
gap: 16px;
animation: fadeScale 2s ease-in-out infinite;
}

/* 丸部分 */
.circle {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #222;
}

/* テキスト部分 */
.text {
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
color: #222;
font-family: 'Arial', sans-serif;
}

/* アニメーション */
@keyframes fadeScale {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}

/* ローディング非表示 */
.loader-hidden {
opacity: 0;
visibility: hidden;
}

.fade-lines p {
opacity: 0;
transform: translateY(20px);
transition: all 1.4s ease;
}
.fade-lines p.fade-in {
opacity: 1;
transform: translateY(0);
}

/* メインコンテンツ初期状態（非表示） */
.fade-in-target {
opacity: 0;
transition: opacity 1.2s ease;
}

/* 表示時にフェードイン */
.fade-in-active {
opacity: 1;
}

/* ▼ スマホ対応レスポンシブCSS追加 */

@media (max-width: 768px) {

/* ヘッダー */
.header {
padding: 12px 20px;
flex-direction: column;
align-items: flex-start;
}
.header-menu {
flex-direction: column;
gap: 10px;
}
.header-link {
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.header-logo a {
font-size: 20px;
}

._br-pc {
display:none;
}

/* メインビジュアル */
.fv {
display:none;
padding: 120px 20px 0px;
text-align: center;
}
.fv svg {
width: 90%;
max-width: 320px;
}

/* philosophy */
.philosophy {
padding: 160px 20px 60px;
}
._ttl {
font-size: 20px;
}
._subttl {
font-size: 13px;
}
._text {
font-size: 15px;
padding-bottom: 20px;
}

/* service */
.service {
padding: 0 20px 60px;
}
.service-txtbox {
flex-direction: column;
gap: 40px;
}
.service-img {
width: 100%;
}

/* company */
.company {
padding: 0 20px 60px;
}
.company-map {
height: 250px;
}

table {
font-size: 14px;
width: 100%;
}
th {
width: 100%;
display: block;
border-bottom: 1px solid #ddd;
padding-top: 12px;
}
td {
display: block;
padding-bottom: 12px;
}

}