@charset "UTF-8";
/* === メインコンテナの固定幅  === */
/* === 70％縮小のため変更 height: 960→690 === */
.main-container {
    width: 960px; 
    height: 690px; 
    max-width: 960px;
    padding-top: 0; 
    
    position: relative;
    margin: 40px auto;
    overflow: hidden;
}
.main-image {
    /* 画像はコンテナに合わせるため 100% のまま */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}
/* === 1. タイトルエリア全体の配置 === */
.header-title-area {
    position: absolute; /* 親要素 .main-container に対する絶対配置 */
    top: 0px; /* 画像の上端から 50px 下 */
    left: 0px; /* 画像の左端から 50px 右 */
    z-index: 20; /* 画像 (z-index: 10以下) よりも手前に表示 */
    color: black; /* デフォルトの文字色 */
}

/* === 2. タイトル大 (3.2em、黒) === */
.header-title-area .title-large {
    font-size: 2.8em;
    color: black;
    margin: 0; /* デフォルトマージンをリセット */
    /*font-weight: bold;  太字にする場合 */
}

/* === 3. 飾り罫 (7px、333px、#029051) === */
.header-title-area .decoration-line {
    height: 7px; /* 太さ */
    width: 333px; /* 長さ */
    background-color: #029051; /* 色 */
    margin: 8px 0; /* 上下の要素との間に少し間隔を空ける */
}

/* === 4. サブタイトル (2em、line-height: 2、黒) === */
.header-title-area .title-small {
    font-size: 1.8em;
    color: black; /* 色は黒 */
    line-height: 1.5; /* 行間 */
    margin: 0; /* デフォルトマージンをリセット */
    white-space: pre-wrap; /* HTMLの<br>タグを有効にする */
}
/* === 情報ボックスの固定幅 === */
/* === 全体の情報ラッパー (960pxで固定、中央揃え) === */
.info-wrapper-container {
    width: 960px; 
    max-width: 960px;
    margin: 20px auto; /* 画像の下に配置するための上マージン */
}
/* === 1. 新しいタイトルボックスのスタイル === */
.info-title-box {
    /* ライン: 左右いっぱい(960px)で1px、色は #707070 */
    border: 1px solid #707070;
    /* 塗り: #F8E2C2 */
    background-color: #F8E2C2;
    /* パディング: 上下 22px、左右 60px */
    padding: 22px 60px;
    
    /* ボックスの境界線が隣接する情報ボックスと重ならないように、下部の線は今回は設定しない。
       全体を囲む .info-wrapper-container にラインを引くか、個別の要素に線を引くかで調整が必要。
       個別のボックスに線を引く。
    */
    box-sizing: border-box; /* paddingとborderを幅に含める */
    width: 100%; /* 親要素の 960px に合わせる */
}

/* タイトルテキストのスタイル */
.info-title-box .title-text {
    /* 文字: 2行で1.2em */
    font-size: 2em;
    line-height: 1.7; /* 2行表示のための行高調整 */
    /* 文字色: #029051 */
    color: #029051;
    margin: 0; /* <p>タグのデフォルトマージンをリセット */
    white-space: pre-wrap; /* 改行タグ <br> を有効にする */
}

/* === 2. 既存の情報ボックスのスタイル修正 === */
.info-box {
    /* ライン: 1px、色は #707070 */
    border: 1px solid #707070;
    /* 塗り: なし（背景透過） */
    background-color: transparent; 
    
    /* パディング: 上下 44px、左右 64px */
    padding: 44px 64px;

    /* タイトルボックスと情報ボックスの線が重複しないように調整 */
    border-top: none; /* タイトルボックスと連続させるため上側の線を削除 */
    
    box-sizing: border-box; /* paddingとborderを幅に含める */
    width: 100%;
    min-height: 100px;
}
.info-box p {
	    font-size:1.6em;
		line-height:1.7;
}


/* === トリガー円のサイズと配置の修正 === */
.trigger {
    position: absolute; 
    border-radius: 50%;
    z-index: 30;
    cursor: pointer;
	/*background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 0.2s;*/
}

/* サイズは直径 208px (半径104px x 2) で固定 */
/* 70%縮小のため変更　208→142 */
.trigger {
    width: 142px; 
    height: 142px;
}

/* 8つの円の正確な配置 (計算結果をピクセルで設定) */

/* 1. 18度 */
.trigger-1 {
    top: 22.5px;
    left: 492.4px;
}

/* 2. 54度 */
.trigger-2 {
    top: 122.3px;
    left: 622.0px;
}

/* 3. 90度 */
.trigger-3 {
    top: 276.0px;
    left: 673.0px;
}

/* 4. 126度 */
.trigger-4 {
    top: 429.7px;
    left: 622.0px;
}

/* 5. 162度 */
.trigger-5 {
    top: 525.5px;
    left: 492.4px;
}

/* 6. 198度 */
.trigger-6 {
    top: 525.5px;
    left: 326.5px;
}

/* 7. 234度 */
.trigger-7 {
    top: 429.7px;
    left: 196.0px;
}

/* 8. 270度 */
.trigger-8 {
    /* left: -1.0px となるが誤差 */
    top: 276.0px;
    left: 146.0px;
}
/* ============================================== */
/* === SET 2 & 4 のトリガー位置 (6枚, 54度ごと) === */
/* ============================================== */
.trigger.set-2.trigger-1, .trigger.set-4.trigger-1 { top: 61.0px; left: 564.2px; }
.trigger.set-2.trigger-2, .trigger.set-4.trigger-2 { top: 235.1px; left: 669.4px; }
.trigger.set-2.trigger-3, .trigger.set-4.trigger-3 { top: 429.7px; left: 626.0px; }
.trigger.set-2.trigger-4, .trigger.set-4.trigger-4 { top: 537.4px; left: 450.9px; }
.trigger.set-2.trigger-5, .trigger.set-4.trigger-5 { top: 490.0px; left: 254.3px; }
.trigger.set-2.trigger-6, .trigger.set-4.trigger-6 { top: 316.9px; left: 148.6px; }

/* ============================================== */
/* === SET 3 のトリガー位置 (5枚, 58度ごと) === */
/* ============================================== */
.trigger.set-3.trigger-1 {
    top: 29.0px; left: 491.4px;
}
.trigger.set-3.trigger-2 {
    top: 213.8px; left: 664.8px;
}
.trigger.set-3.trigger-3 {
    top: 461.1px; left: 598.7px;
}
.trigger.set-3.trigger-4 {
    top: 535.3px; left: 353.7px;
}
.trigger.set-3.trigger-5 {
    top: 367.6px; left: 161.5px;
}

/* 768px以下のレスポンシブ対応も、上記ピクセル値をパーセンテージに変換してメディアクエリ内に追加してください。
   例: top: 71.0px -> 7.4% */

/* セット間の区切り線 (オプション) */
.separator {
    text-align: center;
    margin: 40px auto;
    width: 960px;
    max-width: 960px;
    border-top: 2px dashed #ccc;
    padding-top: 20px;
}
/* ======================================= */
/* === 768px以下のスマートフォン対応 === */
/* ======================================= */
@media (max-width: 768px) {
    
    /* === 1. メインコンテナの追随と正方形の維持 === */
    .main-container {
        width: 90vw; /* ビューポート幅の90%を使用 */
        height: 0;
        padding-top: 90vw; /* 正方形を維持 (1:1アスペクト比) */
		position: relative; /* 子要素の絶対配置の基準になっていること */
        max-width: none; /* 固定幅の制限を解除 */
		margin:20px auto;
    }

    /* === 2. 情報ボックス/タイトルボックスの追随 === */
    .info-wrapper-container {
        width: 90vw; /* コンテナ幅に合わせる */
        max-width: none;
        margin-top: 20px;
    }
	.info-title-box{
    	padding: 2% 6%;
	}
	.info-box{
		padding: 4% 6%;
	}
    
    /* === 3. トリガーのレスポンシブなサイズと配置 === */
    /* サイズ設定: 直径 208px は 960px の約 21.67% を使用 */
    /* 70%縮小のため変更　21.67%→ */
    .trigger {
        width: 20.00%; 
        height: 20.00%;
        z-index: 30;
        
        /* 配置計算の基準: 
           P = 377px / 960px ≈ 39.27% (円周半径の比率)
           P_trig = 104px / 960px ≈ 10.83% (トリガー半径の比率) 
        */
    }
    
    /* 8つの円の配置をパーセンテージに修正 */
    
    /* 1. 18度 */
    .trigger-1 {
        top: 4.12%;  /* (17.5 / 960) * 100 */
        left: 52.1%; /* (492.4 / 960) * 100 */
    }

    /* 2. 54度 */
    .trigger-2 {
        top: 18.07%;
        left: 70.93%;
    }

    /* 3. 90度 */
    .trigger-3 {
        top: 41.17%;
        left: 78.25%;
    }

    /* 4. 126度 */
    .trigger-4 {
        top: 63.26%;
        left: 70.83%;
    }

    /* 5. 162度 */
    .trigger-5 {
        top: 76.90%;
        left: 52.0%;
    }

    /* 6. 198度 */
    .trigger-6 {
        top: 77.51%;
        left: 28.20%;
    }

    /* 7. 234度 */
    .trigger-7 {
        top: 62.90%;
        left: 9.20%;
    }

    /* 8. 270度 */
    .trigger-8 {
        top: 40.50%;
        left: 1.8%; /* -1.0px / 960px ≈ 0% */
    }
    /* ======================================================= */
    /* === SET 2 & 4 のトリガー位置 (レスポンシブ - 45度ごと) === */
    /* ======================================================= */
    .trigger.set-2.trigger-1, .trigger.set-4.trigger-1 { top: 9.40%; left: 62.26%; }
    .trigger.set-2.trigger-2, .trigger.set-4.trigger-2 { top: 35.03%; left: 77.58%; }
    .trigger.set-2.trigger-3, .trigger.set-4.trigger-3 { top: 62.76%; left: 71.40%; }
    .trigger.set-2.trigger-4, .trigger.set-4.trigger-4 { top: 78.90%; left: 46.10%; }
    .trigger.set-2.trigger-5, .trigger.set-4.trigger-5 { top: 71.94%; left: 17.70%; }
    .trigger.set-2.trigger-6, .trigger.set-4.trigger-6 { top: 46.30%; left: 2.38%; } /* 3.6px/960px ≈ 0.38% */
	/* ======================================================= */
    /* === SET 3 のトリガー位置 (レスポンシブ - 5枚, 58度ごと) === */
    /* ======================================================= */
    .trigger.set-3.trigger-1 { top: 3.82%; left: 52.30%; }
    .trigger.set-3.trigger-2 { top: 31.67%; left: 77.05%; }
    .trigger.set-3.trigger-3 { top: 66.95%; left: 67.47%; }
    .trigger.set-3.trigger-4 { top: 78.64%; left: 32.00%; }
    .trigger.set-3.trigger-5 { top: 53.90%; left: 4.26%; }

    /* === 4. 画像上のタイトルエリアの追随 === */
    .header-title-area {
		/* 親コンテナの幅（90vw）に追随させる */
        width: 100%;
        /* topとleftの基準をパーセンテージに変更 */
        /*top: 5.2%;  50px / 960px 
        left: 5.2%;  50px / 960px */
		top: -1%; /* 50px / 960px */
        left: 0; /* 50px / 960px */
        /* フォントサイズを相対的なvwベースに変更しても良いが、ここではemを維持 */
    }
    
    /* 飾り罫の長さを追随させる */
    .header-title-area .decoration-line {
        width: 34.7%; /* 333px / 960px */
    }
	.header-title-area .title-large {
		font-size: 2em;
	}
	.header-title-area .title-small {
    	font-size: 1.2em;
		line-height: 1.5; /* 行間 */
	}
	.abbr{
		padding-left:8%;
	}
}