@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap');

/* 
＝＝＝＝＝＝＝＝＝＝CSS注意事項＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝ベースのCSSについて＝＝＝＝
img {
	width: auto;
	height: 100%;
}
	↑画像の指定が普段と違います。ご注意ください。

＝＝＝＝デザインとの比較＝＝＝＝
iPhoneSE 375×675
デザインの高さが1650pxなので、675/1650＝0.40909090

例：デザインのフォントサイズが36pxの場合
→36 * 0.40909090 = 14.7272px → 1.472rem
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*/


/* 
＝＝＝＝＝＝＝＝＝＝GoogleFonts＝＝＝＝＝＝＝＝＝＝＝＝＝
font-family: "Shippori Mincho", serif;
font-weight: 500;
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*/


/* 変数 */
:root {
	/* 色 */
	--font_color: #333;
	--red: #f90000;
	--blue: #3e526f;
	--belt_yellow: #ae9b1b;
	--white: #fdfdfd;
	--bg_gray: #e6e6e6;

	/* フォント */
	--font_primary: "Noto Serif SC", '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'YuMincho', hiragino-mincho-pron, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	--gothic: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	--en: Helvetica, "Helvetica Neue", Arial, Verdana, "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "YuGothic", "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

/************************************************************************
	base
**************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
	display: block;
}
html {
	line-height: 1;
}
ul, ol, summary{
	list-style-type: none;
}
summary::-webkit-details-marker {
	/* Safari-デフォルトの三角形を削除*/
	display: none;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}

a img {
	border: none;
}
img {
	vertical-align: bottom;
	border: none;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 100%;
}
img[src*=".svg"] {
	width: 100%;
}
picture{
	display: block;
	width: 100%;
	height: 100%;
}
video{
	max-width: 100%;
}
a {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	transition: .4s;
}
table a,
article a{
	word-break: break-all;
}
button{
	display: block;
	color: var(--font_color);
	padding: 0;
	background-color: transparent;
	transition: .4s;
}
*,
:before,
:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input,
button,
select,
textarea {
	-o-appearance: none;/*Opera対応*/
	-webkit-appearance: none;/*Google Chrome/Safari対応*/
	-moz-appearance: none;/*Firefox対応*/
	appearance: none;
	font: inherit;
	border: none;
	border-radius: 0;
	outline: none;
}
input::-webkit-calendar-picker-indicator {/* datalistタグの矢印 （たぶん消えない） */
	display: none; /* iOS対策 */
    appearance: none; /* SafariやChrome用 */
    -webkit-appearance: none; /* Safari用 */
    opacity: 0; /* 念のため */
    pointer-events: none; /* 矢印がクリックできないようにする */
}
input::-webkit-list-button{/* datalistタグの矢印iOS（これで消える） */
	content: none;
}

textarea {
	resize: none;
}
input[type='checkbox'],
input[type='radio'] {
	display: none;
}
input[type='submit'],
input[type='button'],
label,
button,
select,
summary{
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}


/************************************************************************
	PC/SP
**************************************************************************/
.sp{ display: none; }


@media screen and (max-width: 768px) {
	.pc { display: none;}
	.sp { display: block;}
}

/************************************************************************
	全体
**************************************************************************/
/* スクロールバー非表示 */
::-webkit-scrollbar { display: none;}
html,
body {
	overflow-y: hidden;
}
html {
	/* 画面高さ675pxの時1rem=10px ←→ (高さ3倍)2025pxの時1rem=20px */
	font-size: calc(5px + 0.74vh);
	scrollbar-width: none;/* スクロールバー非表示 */
}
@media screen and (max-height: 674px) {
html {
	font-size: calc(1.48vh);
}
}
@media screen and (max-width: 393px) {
  html {
	font-size: calc(1.3vh);
  }
}

/* mini / SE */
@media screen and (max-width: 320px) {
  html {
    font-size: 7px;
  }
}
body.hmb_open, body.modal_open{
	overflow: hidden;
}

.dib{
	display: inline-block;
}
.h_fit-content {
	height: fit-content;
}
.mi_auto {
	margin-inline: auto;
}

/* =====
	body
======================================================== */
body {
	font-family: var(--font_primary);
	color: var(--font_color);
	font-size: 1.472rem;/* デザイン36px * スマホ高さ675px / デザイン高さ1650px */
	font-weight: 500;
	overflow: hidden;
	letter-spacing: .2em;
	line-height: 1.36;
	word-wrap: normal;
	background-color: var(--white);
}

/* =====
	字体
======================================================== */
.gothic{
	font-family: var(--gothic);
}

.reisho{
	font-family: var(--gothic);
}

.en{
	font-family: var(--en);
}

/* =====
	文字サイズ
======================================================== */
.fz22 { font-size: .8999rem; }

/* =====
	文字色
======================================================== */
.white{ color: #fff;}
.red{ color: var(--red);}
.blue{ color: var(--blue);}

/* =====
	文字太さ 装飾
======================================================== */
.font-smooth{
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.bold { font-weight: 700; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw900 { font-weight: 900; }

.italic{ font-style: italic; }
.underline, .u_trance{
	text-decoration: underline;
}
.u_trance:hover{
	text-decoration: none;
}
.lh2 { line-height: 2; }
.ls0 {
	display: inline-block;
	letter-spacing: 0;
	writing-mode: horizontal-tb;
	padding: 0 0 .1227rem 0;
	transform: rotate(90deg);
}

/* =====
	並び 間隔
======================================================== */
.tal { text-align: left; }
.tac, .tac_pc { text-align: center; }
.tar, .tar_pc { text-align: right; }
.taj{ text-align: justify;}

@media screen and (max-width: 768px) {
	.tac_pc { text-align: left; }
	.tar_pc { text-align: left; }
}

/* =====
	文字関係その他
======================================================== */
.vertical{
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
}

.palt{
	font-feature-settings: "palt";
}

.capitalize{
	text-transform: capitalize;
}
.no_capitalize{
	text-transform: none;
}
.uppercase{
	text-transform: uppercase;
}

/* =====
	画像
======================================================== */
.img_drop-shadow {
	-webkit-filter: drop-shadow(0 3px 3px rgba(104, 72, 72, 0.5));
	filter: drop-shadow(0 3px 3px rgba(104, 72, 72, 0.5));
}
.img_w100 {
	width: 100%;
	max-height: inherit;
	height: auto;
}

/************************************************************************
	リンク
**************************************************************************/

@media (min-width: 769px) {
	a[href*="tel:"] {
		pointer-events: none;
		text-decoration: none;
	}
}

/************************************************************************
	フレックス
**************************************************************************/
.flex {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}

.flex_pc{/* 768以下block */
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}

.nowrap {
	flex-wrap: nowrap;
}

.fd_rr {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	flex-direction: row-reverse;
}

.fd_c {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}

.fd_cr {
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	flex-direction: column-reverse;
}

.ai_fs {
	-webkit-box-align: start;
	align-items: flex-start;
}
.ai_fe {
	-webkit-box-align: end;
	align-items: flex-end;
}
.ai_c {
	-webkit-box-align: center;
	align-items: center;
}

.jc_fs {
	-webkit-box-pack: start;
	justify-content: flex-start;
}
.jc_fe {
	-webkit-box-pack: end;
	justify-content: flex-end;
}
.jc_c {
	-webkit-box-pack: center;
	justify-content: center;
}
.jc_sb {
	-webkit-box-pack: justify;
	justify-content: space-between;
}
.jc_sa {
	justify-content: space-around;
}
.order1 {
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.order2 {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}

.fl-g{
	-webkit-box-flex:1;
	flex-grow:1;
}

@media screen and (max-width: 768px) {
	.flex_pc{
		display: block;
	}
}

/************************************************************************
	アニメーション
**************************************************************************/
/* =====
	フェードイン
======================================================== */
.fade,
.fade_in {
	opacity: 0;
}

.animation.fade_in {
	animation: fade-in .8s ease forwards;
}
.animation.fade{/* 下から上へ */
	animation: fade-up .8s ease forwards;
}
.text_animation {
	display: block;
	width: max-content;
	height: max-content;
	overflow: hidden;
}
.text_animation > span {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	transform: translate(-100%);
	transition: .7s;
}
.animation.text_animation > span {
	transform: translate(0);
}
@keyframes fade-up{
	from {
		opacity: 0;
		transform: translateY(2em);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fade-in{
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}

/* =====
	アニメーション時間差
======================================================== */
.animation.delay01{
	animation-delay: .1s !important;
}
.animation.delay02{
	animation-delay: .2s !important;
}
.animation.delay03{
	animation-delay: .3s !important;
}
.animation.delay04{
	animation-delay: .4s !important;
}
.animation.delay05{
	animation-delay: .5s !important;
}
.animation.delay06{
	animation-delay: .6s !important;
}
.animation.delay07{
	animation-delay: .7s !important;
}
.animation.delay08{
	animation-delay: .8s !important;
}
.animation.delay09{
	animation-delay: .9s !important;
}
.animation.delay10{
	animation-delay: 1s !important;
}
.animation.delay11{
	animation-delay: 1.1s !important;
}
.animation.delay12{
	animation-delay: 1.2s !important;
}
.animation.delay13{
	animation-delay: 1.3s !important;
}
.animation.delay14{
	animation-delay: 1.4s !important;
}
.animation.delay15{
	animation-delay: 1.5s !important;
}
.animation.delay16{
	animation-delay: 1.6s !important;
}
.animation.delay17{
	animation-delay: 1.7s !important;
}
.animation.delay18{
	animation-delay: 1.8s !important;
}
.animation.delay19{
	animation-delay: 1.9s !important;
}
.animation.delay20{
	animation-delay: 2s !important;
}
.animation.delay21{
	animation-delay: 2.1s !important;
}
.animation.delay22{
	animation-delay: 2.2s !important;
}
.animation.delay23{
	animation-delay: 2.3s !important;
}
.animation.delay24{
	animation-delay: 2.4s !important;
}
.animation.delay25{
	animation-delay: 2.5s !important;
}
.animation.delay26{
	animation-delay: 2.6s !important;
}
.animation.delay27{
	animation-delay: 2.7s !important;
}
.animation.delay28{
	animation-delay: 2.8s !important;
}
.animation.delay29{
	animation-delay: 2.9s !important;
}
.animation.delay30{
	animation-delay: 3s !important;
}
.animation.delay31{
	animation-delay: 3.1s !important;
}
.animation.delay32{
	animation-delay: 3.2s !important;
}
.animation.delay33{
	animation-delay: 3.3s !important;
}
.animation.delay34{
	animation-delay: 3.4s !important;
}
.animation.delay35{
	animation-delay: 3.5s !important;
}
.animation.delay36{
	animation-delay: 3.6s !important;
}
.animation.delay37{
	animation-delay: 3.7s !important;
}
.animation.delay38{
	animation-delay: 3.8s !important;
}
.animation.delay39{
	animation-delay: 3.9s !important;
}
.animation.delay40{
	animation-delay: 4s !important;
}

/************************************************************************
	ヘッダー
**************************************************************************/
header{
	pointer-events: none;/* mainのスクロールを妨げないように */
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	width: 100%;
	padding: 1.6rem 4%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 70;
}
header::before {
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: .5s;
	z-index: 0;
}
header > h1,
header > div {
	position: relative;
	z-index: 1;
}
.hmb_open header::before {
	opacity: 1;
}
header a,
header button{
	pointer-events: all;
}

header h1 {
	font-size: 0;
	width: 20rem;
	text-shadow: 0 0 .5em var(--bg_gray), 0 0 .3em var(--bg_gray);
}


@media screen and (max-width: 768px) {

}


/* =====
	ボタン
======================================================== */
.hd_btn_wrapper{
	-webkit-box-flex:1;
	flex-grow:1;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	align-items: center;
}

.hd_btn_wrapper .hd_btn{
	height: 2.9rem;/* デザイン1.9rem + padding.5rem */
	padding: .5rem;
	margin-left: 1.5rem;
	transition: opacity .4s;
}
.hd_btn_wrapper .hd_btn:hover{
	opacity: .7;
}

#hd_lang_btn{
	width: 2.9rem;/* デザイン1.9rem + padding.5rem */
	background: url(../img/icon_lang.svg) no-repeat center/calc(100% - 1rem);
}

#hd_sound_btn{
	width: 3.66rem;/* デザイン2.66rem + padding.5rem */
	background: url(../img/icon_sound_off.svg) no-repeat center/calc(100% - 1rem);
}
#hd_sound_btn.is-on{
	background-image: url(../img/icon_sound.svg);
}

/* ハンバーガー
-------------------------------------------------------- */
#hmb{
	width: 1.9rem;
	position: relative;
}
#hmb:hover{
	opacity: .7;
}

#hmb span{
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--font_color);
	position: absolute;
	left: 0;
	transition: top .4s, transform .4s;
}
#hmb span:nth-of-type(1){
	top: 25%;
}
#hmb span:nth-of-type(2){
	top: 50%;
}
#hmb span:nth-of-type(3){
	top: 75%;
}

.hmb_open #hmb span:nth-of-type(1){
	top: 50%;
	transform: rotate(-30deg);
}
.hmb_open #hmb span:nth-of-type(2){
	opacity: 0;
}
.hmb_open #hmb span:nth-of-type(3){
	top: 50%;
	transform: rotate(30deg);
}

@media screen and (max-width: 768px) {
	
}

/************************************************************************
	グローバル
**************************************************************************/
#global{
	overflow: auto;
	width: 100%;
	min-height: 100dvh;
	height: 100%;
	background-color: rgba(0, 0, 0, .1);
	position: fixed;
	right: -120%;
	top: 0;
	z-index: 60;
	transition: right .4s;
}
.hmb_open #global{
	right: 0;
}

#global .container {
	width: 100%;
	max-width: 40rem;/* 最大400px */
	min-height: 100%;
	margin-left: auto;
	background-color: var(--white);
}
.global_top {
	padding: 6.1rem 4% 0;
}
.global_btm {
	background: #333;
	padding: 2.6181rem 4% 2.9454rem;
}


/* ナビ
-------------------------------------------------------- */
#global .gl_nav{
	margin-bottom: 2.6181rem;
}
#global .gl_nav > ul{
	counter-reset: gl_nav;
}
#global .gl_nav > ul > li{
	counter-increment: gl_nav;
	border-top: 1px solid #333;
}
#global .gl_nav > ul > li:nth-last-of-type(1){
	border-bottom: 1px solid #333;
}

#global .gl_nav > ul > li a {
	display: block;
	position: relative;
}
#global .gl_nav > ul > li a::after{
	content: "";
	display: block;
	width: .7em;
	height: .7em;
	background: url(../img/arrow01.svg) no-repeat center/contain;
	position: absolute;
	right: .5em;
	top: calc(50% - .35em);
	z-index: 3;
}
#global .gl_nav > ul > li a > span {
	width: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	padding: .75em 1.25em .75em .5em;
	position: relative;
}
#global .gl_nav > ul > li a > span::before,
#global .gl_nav > ul > li a > span::after {
	content: "";
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: .5s;
}
#global .gl_nav > ul > li a > span::before {
	background-color: #d56521;
	box-shadow: -3px 3px 3px 0px rgba(104, 72, 72, 0.5);
	z-index: 0;
}
#global .gl_nav > ul > li.link_chronology02 a > span::before {
	background-color: #65bbbb;
}
#global .gl_nav > ul > li.link_chronology03 a > span::before {
	background-color: #d3b383;
}
#global .gl_nav > ul > li.link_chronology04 a > span::before {
	background-color: #ba9ce8;
}
#global .gl_nav > ul > li.link_chronology05 a > span::before {
	background-color: #85af8e;
}
#global .gl_nav > ul > li.link_chronology06 a > span::before {
	background-color: #d9a6dd;
}
#global .gl_nav > ul > li.link_chronology07 a > span::before {
	background-color: #b6ba67;
}
#global .gl_nav > ul > li a > span::after {
	background-image: url("../img/gl_nav.png");
	background-repeat: no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	z-index: 1;
}
#global .gl_nav > ul > li a:hover > span::before,
#global .gl_nav > ul > li a:hover > span::after {
	opacity: 1;
}
#global .gl_nav > ul > li a > span > span {
	position: relative;
	z-index: 2;
}
#global .gl_nav > ul > li a .sub {
	font-size: 1.1454rem;
	margin: 0 0 .2454rem;
}

/* 外部リンク
-------------------------------------------------------- */
#global .link_list > li{
	margin-bottom: .5em;
}
#global .link_list > li:nth-last-of-type(1){
	margin-bottom: 0;
}
#global .link_list > li a {
	display: block;
	text-align: center;
	background-color: #333;
	position: relative;
}
#global .link_list > li a::before,
#global .link_list > li a::after {
	content: "";
	display: block;
	position: absolute;
	transition: .5s;
}
#global .link_list > li a::before {
	width: 100%;
	height: 100%;
	background: url(../img/paper.png) repeat;
	top: 0;
	left: 0;
	transition: .5s;
	z-index: 0;
}

#global .link_list > li a::after {
	width: .8em;
	height: .8em;
	background-image: url("../img/icon_blank.svg");
	background-repeat: no-repeat;
	background-size: contain;
	top: calc(50% - .4em);
	right: 1em;
	z-index: 1;
}
#global .link_list > li a > span {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	padding: 1em;
	position: relative;
	z-index: 1;
}
#global .link_list > li a > span .icon {
	width: 4rem;
	margin: 0 1.4727rem 0 0;
}
#global .link_list > li a:hover {
	color: #fff;
}
#global .link_list > li a:hover::before {
	opacity: 0;
}
#global .link_list > li a:hover::after {
	background-image: url("../img/icon_blank_wh.svg");
}

/* SNS
-------------------------------------------------------- */
#global .sns_list{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	margin-top: 2.6181rem;
	margin-bottom: 2.6181rem;
}
#global .sns_list > li{
	margin-right: 4.5%;
}
#global .sns_list > li:nth-last-of-type(1){
	margin-right: 0;
}

#global .sns_list > li a {
	display: block;
	width: 4rem;
	height: 4rem;/* デザイン70px * 0.409090 = 2.86rem + padding.5rem */
}

#global .property_logo {
	width: 16.2818rem;
	margin-inline: auto;
}
#global .property_text {
	color: var(--white);
	font-size: 1.1454rem;
	text-align: center;
	margin: .9818rem 0 0;
}


/* =====
	言語選択
======================================================== */
#lang_list{
	display: none;
	padding: 1rem;
	width: fit-content;
	background-color: var(--bg_gray);
	position: fixed;
	top: 6.1rem;
	right: 9rem;
	z-index: 30;
}

#lang_list > li a{
	display: block;
}

/* 
-------------------------------------------------------- */



/************************************************************************
	カスタムスクロールバー
**************************************************************************/
#scroll_bar{
	cursor: pointer;
	width: 96%;
	height: 6.1rem;
	margin-inline: auto;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
}
#scroll_thumb {
	cursor: grab;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 5.6rem;
	padding-top: 2rem;
	height: calc(100% + 3.6rem);
	background: url(../img/scroll_thumb.png) no-repeat center/100% 100%;
}
#scroll_thumb::after{
	content: "";
	display: block;
	width: 3.2727272rem;
	height: 2.0454545rem;
	background: url(../img/scroll_bar_deco.png) no-repeat center/contain;
	position: absolute;
	bottom: 1.3rem;
	left: calc(50% - 1.6363636rem);
}

#scroll_thumb > p{
	letter-spacing: 0;
	text-align: center;
}

@media screen and (max-width: 768px) {
	
}


/************************************************************************
	メインコンテンツ部分
**************************************************************************/
main{
	/* 縦書き指定+overflow-x:auto; で、右からスクロール開始できるように。 */
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	overflow-y: hidden;
	overflow-x: auto;
	width: 100%;
	height: 100dvh;
	padding: 6.1rem 5.5rem;
}

#scroll_wrap{
	border-top: .65rem solid var(--belt_yellow);
	border-bottom: .65rem solid var(--belt_yellow);
	padding: 1.5rem 4rem 1.5rem 0;
	background: url(../img/paper_mi.png) repeat-x center/auto 100%;
	position: relative;
}
.section_wrap {
	background: url(../img/paper.png) repeat-x center/auto 100%;
}
@media screen and (max-width: 768px) {
	
}

/* 巻物の両端画像
-------------------------------------------------------- */
.scroll_deco{
	position: absolute;
}

.scroll_deco.start{
	height: calc(100% + 2.2rem);
	left: calc(100% - 1px);
	top: -1.1rem;
}

.scroll_deco.string{
	height: 35%;
	left: 100%;
	top: 30%;
	transform: translateX(-10.5%);
}

.scroll_deco.end{
	height: calc(100% + 10rem);
	right: calc(100% - 1px);
	top: -4.5rem;
	z-index: 6;
}

@media screen and (max-width: 768px) {
	
}


/* =====
	薬師寺の物語へようこそ（プロローグ）
======================================================== */
#chronology_prologue {
	position: relative;
	z-index: 10;
}
#chronology_prologue .cloud {
	position: absolute;
}
#chronology_prologue .cloud.cloud01 {
	width: 21.8045rem;
	top: 0;
	right: -7.8545rem;
}
#chronology_prologue .cloud.cloud02 {
	width: 32.6453rem;
	top: -2.6999rem;
	left: -8.1818rem;
}
#chronology_prologue .cloud.cloud03 {
	width: 13.3772rem;
	top: 26.9999rem;
	left: -8.1818rem;
}
#chronology_prologue .cloud.cloud04 {
	width: 40.7454rem;
	bottom: -4.7454rem;
	right: 8.3249rem;
}
#chronology_prologue .cloud.cloud05 {
	width: 21.9681rem;
	bottom: 6.13636rem;
	left: -21.9681rem;
}
#chronology_prologue .container {
	padding: 3rem 8.18rem 3rem 13.3363rem;
}
.img_title {
overflow: hidden;
}
.img_title img {
	height: auto;
	display: block;
	transform: translate(-100%);
	transition: .7s;
}
.animation.img_title img {
transform: translate(0);
}
#chronology_prologue h2 {
	margin-left: 6.9545rem;
}
#chronology_prologue h2 {
	width: 2.76rem;
}

#chronology_prologue .text_wrapper{
	padding-top: 1em;
}
#chronology_prologue .text_wrapper > div:not(:last-child){
	margin-left: 1.5em;
}

/* =====
	現代の薬師寺へ（エピローグ）
======================================================== */
#epilogue_area {
	background: url(../img/paper.png) repeat-x center/auto 100%;
	position: relative;
	z-index: 5;
}

#chronology_epilogue {
	padding: 6.54545rem 8.1818rem 1.63635rem 13.3363rem;
	position: relative;
	z-index: 1;
}
#chronology_epilogue .cloud {
	position: absolute;
}
#chronology_epilogue .cloud.cloud01 {
	width: 21.8045rem;
	top: -2.4545rem;
	right: -18.5909rem;
}
#chronology_epilogue .cloud.cloud02 {
	width: 32.6454rem;
	top: -2.4545rem;
	left: -20.7818rem;
}
#chronology_epilogue .cloud.cloud03 {
	width: 13.3772rem;
	left: .9818rem;
	bottom: 3.9272rem;
}
#chronology_epilogue .cloud.cloud04 {
	width: 30.2727rem;
	right: 16.36363rem;
	bottom: -3.9272rem;
}
#chronology_epilogue h2{
	width: 2.76rem;
	margin-left: 6rem;
}
#chronology_epilogue h2 img{
	max-width: inherit;
	height: auto;
}

#chronology_epilogue .text_wrapper {
	padding: 2.04545rem 0 0;
}
#chronology_epilogue .text_wrapper > div:not(:last-child){
	margin-left: 1.5em;
}
#chronology_epilogue .section_period {
	right: 16.3636rem;
}

#epilogue_area .bg_wrap {
	position: relative;
	z-index: 0;
}
#epilogue_area .bg_wrap .section_note {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	margin: 0 2rem 0 0;
	padding: 2rem 0;
	position: static;
}
#epilogue_area .bg_wrap .parallax_bg__fixed::before {
	background-image: url(../img/epilogue_bg.jpg);
	background-size: cover;
}
#epilogue_area .bg_wrap .content {
	padding: 6.54545rem 0 6.54545rem 12.2727rem;
	position: relative;
}
#epilogue_area .bg_wrap .content::before {
	content: "";
	width: 12.2727rem;
	height: 100%;
	background: #333333;
	background: linear-gradient(90deg, rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
#epilogue_area .bg_wrap .content .cloud {
	position: absolute;
}
#epilogue_area .bg_wrap .content .cloud.cloud01 {
	width: 21.8045rem;
	bottom: -2.3727rem;
	left: 42.5863rem;
	z-index: 1;
}
#epilogue_area .bg_wrap .content .cloud.cloud02 {
	width: 20.659rem;
	top: -2.6181rem;
	left: -1.9636rem;
	z-index: 3;
}

@media screen and (max-width: 768px) {

}

/* SNS
-------------------------------------------------------- */
#epilogue_sns_area{
	margin: 0 8.1818rem;
	position: relative;
}
#epilogue_sns_area > img {
	position: relative;
	z-index: 0;
}
#epilogue_sns_area .container{
	height: 100%;
	padding: 4rem 0 5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
#epilogue_sns_area .container h3{
	font-size: 1.333em;/* 48/36 */
	line-height: 1.75;
	margin-left: .5em;
}
#epilogue_sns_area .container .list{
	margin-top: auto;
}
#epilogue_sns_area .container .list > li {
	width: 4rem;
}
#epilogue_sns_area .container .list > li:not(:nth-child(1)) {
	margin: 1.6363rem 0 0;
}
#epilogue_sns_area .container .list > li a {
	display: block;
	text-align: center;
}
#epilogue_sns_area .container .list > li a:hover {
	opacity: .7;
}

@media screen and (max-width: 768px) {

}

/* リンク
-------------------------------------------------------- */
#epilogue_link_list {
	font-size: 1.333em;/* 48/36 */
	padding: 2rem 0;
	position: relative;
	z-index: 2;
}
#epilogue_link_list > li{
	margin-left: .5em;
}

#epilogue_link_list > li a {
	background: #333;
	display: block;
	position: relative;
}
#epilogue_link_list > li a::before {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/paper.png") repeat;
	position: absolute;
	top: 0;
	left: 0;
	transition: .5s;
}
#epilogue_link_list > li a::after{
	content: "";
	width: 2.945rem;
	height: 2.945rem;
	background-color: #333;
	background-image: url("../img/icon_blank_wh.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.3rem auto;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}
#epilogue_link_list > li a:hover{
	color: var(--white);
}
#epilogue_link_list > li a:hover::before {
	opacity: 0;
}
#epilogue_link_list > li a:hover::after{
	background-color: #4d4d4d;
}

#epilogue_link_list > li a > span{
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	padding: 1.25em 1.4em;
	position: relative;
	z-index: 1;
}
#epilogue_link_list .icon {
	width: 4rem;
	margin: 0 0 .9rem;
}

@media screen and (max-width: 768px) {

}

/* =====
	通常セクション
======================================================== */
.chronology_sec {
	position: relative;
	z-index: 1;
}
.parallax-x {
	will-change: transform;
	transform: translateZ(0);
	 backface-visibility: hidden;
}
.parallax_bg {
	position: relative;
}
.parallax_bg__img {
	overflow: hidden;
	width: 100%;
	height: 100%;
	clip-path: inset(0 2px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.parallax_bg__fixed {
	width: 120%;
	height: 100%;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	right: -20%;
	z-index: -1;
}
.parallax_bg__fixed::before {
	filter: blur(0.001px);
	content: "";
	width: 100%;
	height: 100%;
	transform: translate3d(0,0,0);
  backface-visibility: hidden;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url("../img/chronology02_parallax.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 130%;
	z-index: -1;
}
@media screen and (max-width: 768px) {
.chronology_sec__head .parallax_bg__img {
	width: 100%;
	height: 100%;
	clip-path: inset(0 2px);
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
.chronology_sec__head .parallax_bg__fixed {
	width: inherit;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	position: fixed;
	top: 8rem;
	left: 0;
	height: calc(100% - 16rem);
}
.chronology_sec__head .parallax_bg__fixed::before {
	filter: blur(0.001px);
	content: "";
	width: 100%;
	height: 100%;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../img/chronology02_parallax.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
}



/* 余白 */
.c-pad { padding: 6.54545rem 8.18rem; }
.c-pad.is-small { padding: 3rem 8.18rem; }
@media screen and (max-height: 674px) {
	.c-pad { padding: 3rem 8.18rem; }
}
.u-ml4 { margin-left: 4rem; }
.u-ml943 { margin-left: 39.3954rem; }


/* 章タイトル */
.chronology_sec__head {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 1;
}
.chronology_sec__head__in {
	height: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: 0 14.31818rem;
	position: relative;
}
.chronology_sec__head__in .section_note {
	position: absolute;
	bottom: .5rem;
	left: -3.5rem;
}
.chronology_sec__head__content {
	width: 12.7636rem;
	position: relative;
}
.chronology_sec__head__content > div {
	font-size: 1.9636rem;
	width: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: 3.9272rem 0 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.chronology_sec__head__content .chapter {
	writing-mode: horizontal-tb;
	border-bottom: solid 1px #333;
	margin: 0 0 1.30909rem;
	padding: 0 0 0.490909rem;
}
.chronology_sec__head__title .main {
	font-size: 2.45454rem;
}
.chronology_sec__head__title .sub {
	margin: 2.95rem 0 0;
}
.chronology_sec__head .mask.mask01 {
	height: 100%;
	margin: 0 -1px 0 0;
}
.chronology_sec__head .mask.mask02 {
	margin: 0 0 0 -1px;
}
.chronology_sec__head .cloud {
	width: 20.659rem;
	position: absolute;
	top: 9.6545rem;
	left: 1.6363rem;
}

/* セクションオブジェクト */
.section_object {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: end;
	align-items: flex-end;
	position: absolute;
	right: 12rem;
	bottom: -1.5709rem;
}
.section_object__title {
	background: #d56521;
	border: solid .2045rem #333;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	margin: 0 0 -.1636rem -2.2rem;
	padding: 1.3rem .6545rem;
	position: relative;
	z-index: 1;
}
.section_object__title::after {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/pattern01.png") no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.section_object__title > div {
	position: relative;
	z-index: 1;
}
.section_object__title .sub {
	font-size: 1.1454rem;
}
.section_object__title .main {
	font-size: 1.4727rem;
}
.section_object__illust {
	width: 18.9rem;
	position: relative;
	z-index: 0;
}

@media screen and (max-height: 674px) {
.section_object__title {
	padding: .6545rem;
}
.section_object__illust {
	width: 16rem;
}
}
.section_object__note {
	font-size: .8999rem;
	writing-mode: horizontal-tb;
	opacity: .5;
	letter-spacing: 0;
	margin: 0 -2rem 2rem 0;
}

/* 時代 */
.section_period {
	width: 11.1272rem;
	position: absolute;
	top: -3.32rem;
	right: 7.3636rem;
}
@media screen and (max-width: 768px) {
.chronology_sec__head {
	position: relative;
}
.section_period {
	top: -3.297rem;
}
}

/* 年表 */
.section_timeline {
	width: 10.4727rem;
	position: absolute;
	top: -3.1rem;
}


/* =====
	1章
======================================================== */
#chronology01 {
	position: relative;
	z-index: 9;
}
#chronology01 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology_parallax.jpg");
}
@media screen and (max-width: 768px) {
#chronology01 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology_parallax_sp.jpg");
}
}

/* セクション01
-------------------------------------------------------- */
.chronology01_sec01 {
	position: relative;
	z-index: 2;
}
.chronology01_sec01 .section_object {
	right: 15rem;
}
@media screen and (max-height: 674px) {
.chronology01_sec01 .section_object {
	right: 23rem;
}
}
@media screen and (max-width: 768px) {
.chronology01_sec01 .section_object {
	right: 22rem;
}
}


.chronology01_sec01 .cloud {
	width: 19.8818rem;
	position: absolute;
	top: 3.5999rem;
	right: -16.8954rem;
}


/* セクション02
-------------------------------------------------------- */
.chronology01_sec02 {
	padding-left: 33.6272rem;
	position: relative;
}
.chronology01_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology01_sec02_bg.jpg");
}
.chronology01_sec02 .section_timeline {
	right: -2rem;
}

.chronology01_sec02 .c-detail {
	margin: 0 0 0 4rem;
}
.chronology01_sec02 .section_note.section_note01 {
	right: .8rem;
	bottom: 1rem;
}
.chronology01_sec02 .section_note.section_note02 {
	left: .8rem;
	bottom: .5rem;
}


/* セクション03
-------------------------------------------------------- */
.chronology01_sec03 {
	padding: 6.54545rem 8.18rem;
}


/* セクション04
-------------------------------------------------------- */
.chronology01_sec04 {
	position: relative;
}
.chronology01_sec04 .parallax_bg__fixed::before {
	background-image: url("../img/chronology01_sec04_bg.jpg");
}
.chronology01_sec04__in {
	padding: 6.54545rem 8.18rem 3.272725rem 24.8727rem;
	position: relative;
}
.chronology01_sec04 .section_object {
	right: 8rem;
}
.chronology01_sec04 .section_object__title {
	margin: 0 0 -.1636rem -2.2rem;
}
.chronology01_sec04 .section_object__title .sub {
	display: -webkit-box;
	display: flex;
}
.chronology01_sec04 .section_object__title .sub .ls0 {
	margin-top: -.2rem;
}
.chronology01_sec04 .section_object__note {
	color: #fff;
	margin-right: -4rem;
}
.chronology01_sec04 .c-detail_text {
	min-width: 16.1181rem;
	height: 100%;
	padding-bottom: .5rem;
}
.chronology01_sec04 .section_note {
	white-space: nowrap;
	left: -2rem;
	bottom: .5rem;
}
.chronology01_sec04 .c-imgs {
	margin: 0 4rem 0 0;
}
.chronology01_sec04 .c-img.js-modal_open .c-img__img::before {
	bottom: 3rem;
}
@media screen and (max-height: 674px) {
.chronology01_sec04 .section_object {
	right: 15rem;
}
.chronology01_sec04 .section_object__illust {
	width: 16rem;
}
}


/* セクション05
-------------------------------------------------------- */
.chronology01_sec05 {
	position: relative;
}
.chronology01_sec05 .cloud {
	position: absolute;
}
.chronology01_sec05 .cloud.cloud01 {
	width: 40.7454rem;
	top: -2.7818rem;
	left: -12.6818rem
}
.chronology01_sec05 .cloud.cloud02 {
	width: 13.3772rem;
	top: 16.6909rem;
	right: -2.6181rem
}
.chronology01_sec05 .cloud.cloud03 {
	width: 32.6454rem;
	bottom: 1.6363rem;
	left: -12.559rem
}
.chronology01_sec05 .illust {
	width: 41.6863rem;
	position: absolute;
	bottom: 0;
	right: -40.57727rem;
}


/* =====
	2章
======================================================== */
#chronology02 {
	position: relative;
	z-index: 8;
}
#chronology02 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology02_parallax.jpg");
}
#chronology02 .c-detail_title,
#chronology02 .c-imgSet_title,
#chronology02 .c-img__title {
	background-color: #65bbbb;
}
@media screen and (max-width: 768px) {
#chronology02 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology02_parallax_sp.jpg");
}
}


/* セクション01
-------------------------------------------------------- */
.chronology02_sec01 {
	white-space: nowrap;
	padding: 3rem 8.18rem;
	position: relative;
	z-index: 2;
}
.chronology02_sec01 .illust {
	width: 45.8181rem;
	position: absolute;
	right: 4.3045rem;
	bottom: -3rem;
}
@media screen and (max-height: 674px) {
.chronology02_sec01 .illust {
	width: 39.8181rem;
}
}


/* セクション02
-------------------------------------------------------- */
.chronology02_sec02 {
	padding-right: 40rem;
	position: relative;
}
.chronology02_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology02_sec02_bg.jpg");
}
.chronology02_sec02 .section_timeline {
	right: 35.4272rem;
}
.chronology02_sec02 .c-imgSet_title {
	-webkit-box-align: end;
	align-items: flex-end;
	margin: 5.1136rem 0 0 -5.8090rem;
}
.chronology02_sec02 .c-imgSet_img {
	margin: 0;
}
.chronology02_sec02 .section_note {
	left: .7363rem;
	bottom: .5rem;
}
.chronology02_sec02 .c-imgSet.js-modal_open .c-imgSet_img::before {
	left: 5rem;
}


/* セクション03
-------------------------------------------------------- */
.chronology02_sec03 {
	position: relative;
}
.chronology02_sec03 .illust {
	width: 25.6909rem;
	position: absolute;
	left: -5.7272rem;
	bottom: -3rem;
}
@media screen and (max-height: 674px) {
.chronology02_sec03 .illust {
	width: 20.6909rem;
	position: absolute;
	left: -5.7272rem;
	bottom: -3rem;
}
}

/* セクション04
-------------------------------------------------------- */
.chronology02_sec04 {
	position: relative;
}
.chronology02_sec04 .parallax_bg__fixed::before {
	background-image: url("../img/chronology02_sec04_bg.jpg?260128");
}
.chronology02_sec04 .c-pad {
	position: relative;
}

/* 国宝 聖観世音菩薩像 */
.chronology02_sec04 .c-img__img.img01 {
	width: 8.8363rem;
}
.chronology02_sec04 .c-img.js-modal_open .c-img__img::before {
	bottom: 3rem;
	left: -2.5rem;
}

.chronology02_sec04 .section_note {
	left: 0;
	bottom: .5rem;
}


.chronology_sec_end {
	position: relative;
}
.chronology_sec_end .cloud {
	position: absolute;
}
.chronology_sec_end .cloud.cloud01 {
	width: 40.7454rem;
	top: -2.7818rem;
	left: -12.6818rem
}
.chronology_sec_end .cloud.cloud02 {
	width: 13.3772rem;
	top: 21.1909rem;
	right: -2.6181rem
}
.chronology_sec_end .cloud.cloud03 {
	width: 32.6454rem;
	bottom: 1.6363rem;
	left: -12.559rem
}

.chronology_sec_end .cloud.cloud04 {
	width: 21.8045rem;
	top: 10.5136rem;
	right: -27.286rem
}


/* =====
	3章
======================================================== */
#chronology03 {
	position: relative;
	z-index: 7;
}
#chronology03 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology03_parallax.jpg");
}
#chronology03 .c-detail_title,
#chronology03 .c-imgSet_title,
#chronology03 .c-img__title {
	background-color: #d3b383;
}
@media screen and (max-width: 768px) {
#chronology03 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology03_parallax_sp.jpg");
}
}


/* セクション01
-------------------------------------------------------- */
.chronology03_sec01 {
	position: relative;
}

/* セクション02
-------------------------------------------------------- */
.chronology03_sec02 {
	position: relative;
}
.chronology03_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology03_sec02_bg.jpg");
}
.chronology03_sec02 .c-img__img {
	width: 29.6590rem;
}
.chronology03_sec02 .c-img__title {
	margin: .5rem 0 0;
}
.chronology03_sec02 .section_note {
	left: .7363rem;
	bottom: .5rem;
}


/* セクション03
-------------------------------------------------------- */
.chronology03_sec03 {
	padding-bottom: 0;
	position: relative;
}
.chronology03_sec03 .illust {
	width: 40rem;
	position: absolute;
	right: -8rem;
	bottom: -7.4rem;
}
@media screen and (max-height: 674px) {
}

/* セクション04
-------------------------------------------------------- */
.chronology03_sec04 {
	position: relative;
}
.chronology03_sec04 .parallax_bg__fixed::before {
	background-image: url("../img/chronology03_sec04_bg.jpg");
}
.chronology03_sec04 .section_note {
	left: .7363rem;
	bottom: .5rem;
}
.c-detail.year973 {
	position: relative;
}
.c-detail.year973 .deco {
	position: absolute;
}
.c-detail.year973 .deco.deco01 {
	width: 22.0909rem;
	top: -8rem;
	left: 8rem;
}
.c-detail.year973 .deco.deco02 {
	width: 12.1499rem;
	right: 8rem;
	bottom: -3.5181rem;
}
.c-detail.year973 .c-detail_text {
	margin-top: -2rem;
	padding-top: 6rem;
}


/* セクション05
-------------------------------------------------------- */
.chronology03_sec05 {
	position: relative;
}
.chronology03_sec05 .illust {
	width: 9.8181rem;
	position: absolute;
	left: -8rem;
	bottom: -1.3090rem;
}
@media screen and (max-height: 674px) {
.chronology03_sec05 .illust {
	width: 8.8181rem;
}
}

/* セクション06
-------------------------------------------------------- */
.chronology03_sec06 {
	position: relative;
}
.chronology03_sec06 .parallax_bg__fixed::before {
	background-image: url("../img/chronology03_sec06_bg.jpg");
}
.chronology03_sec06 .c-pad {
	position: relative;
}
.chronology03_sec06 .section_note {
	left: 0;
	bottom: .5rem;
}


/* =====
	4章
======================================================== */
#chronology04 {
	position: relative;
	z-index: 6;
}
#chronology04 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology04_parallax.jpg");
}
#chronology04 .c-detail_title,
#chronology04 .c-imgSet_title,
#chronology04 .c-img__title,
#chronology04 .c-imgSet_img__caption,
#chronology04 .section_object__title {
	background-color: #ba9ce8;
}
@media screen and (max-width: 768px) {
#chronology04 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology04_parallax_sp.jpg");
}
}


/* セクション01
-------------------------------------------------------- */
.chronology04_sec01 {
	position: relative;
}
/* セクション02
-------------------------------------------------------- */
.chronology04_sec02 {
	position: relative;
}
.chronology04_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology04_sec02_bg.jpg");
}
.chronology04_sec02 .section_object__illust {
	width: 28.8818rem;
}
.chronology04_sec02 .c-img__title {
	margin: 0 0 -1.2rem;
}
.chronology04_sec02 .c-img__img {
	width: 18.7772rem;
}
.chronology04_sec02 .section_object.js-modal_open .section_object__illust::before {
	left: 1rem;
	bottom: 3rem;
}
.chronology04_sec02 .section_note {
	left: 3.6818rem;
	bottom: .5rem;
}


/* セクション03
-------------------------------------------------------- */
.chronology04_sec03 {
	position: relative;
}
.chronology04_sec03 .illust {
	width: 16.8136rem;
	position: absolute;
	right: -3.4772rem;
	bottom: -1.2272rem;
}
@media screen and (max-height: 674px) {
.chronology04_sec03 .illust {
	width: 14.8136rem;
}
}


/* セクション04
-------------------------------------------------------- */
.chronology04_sec04 {
	position: relative;
}
.chronology04_sec04 .parallax_bg__fixed::before {
	background-image: url("../img/chronology04_sec04_bg.jpg");
}
.chronology04_sec04 .c-details,
.chronology04_sec04 .c-imgSets {
	position: relative;
}
.chronology04_sec04 .c-details {
	z-index: 0;
}
.chronology04_sec04 .c-imgSets {
	z-index: 2;
}
.chronology04_sec04 .cloud {
	width: 39.8454rem;
	position: absolute;
	top: .9409rem;
	left: 56.2136rem;
	z-index: 1;
}
@media screen and (max-height: 674px) {
.chronology04_sec04 .cloud {
	top: -2.5rem;
}
}
.chronology04_sec04 .illust {
	width: 44.8772rem;
	position: absolute;
	right: 11rem;
	bottom: -3.4363rem;
	z-index: 1;
}
.chronology04_sec04 .section_note {
	left: .9721rem;
	bottom: .5rem;
}
@media screen and (max-width: 768px) {
.chronology04_sec04 .illust {
	right: 12rem;
}
}


/* セクション05
-------------------------------------------------------- */
.chronology04_sec05 {
	position: relative;
}
.chronology04_sec05 .illust {
	width: 12.5999rem;
	position: absolute;
	right: -4rem;
	bottom: 1.5954rem;
}
@media screen and (max-width: 768px) {
.chronology04_sec05 .illust {
	width: 10.5999rem;
	bottom: -1.5954rem;
}
}

/* セクション06
-------------------------------------------------------- */
.chronology04_sec06 {
	padding-left: 20.2rem;
	position: relative;
}
.chronology04_sec06 .parallax_bg__fixed::before {
	background-image: url("../img/chronology04_sec06_bg.jpg");
	background-size: cover;
}
.chronology04_sec06 .section_object {
	right: inherit;
	left: 15rem;
	bottom: 1.5rem;
}
.chronology04_sec06 .section_object__title {
	margin: -4rem -1.8rem 0 0;
}
.chronology04_sec06 .section_object {
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	flex-direction: column-reverse;
	-webkit-box-align: start;
	align-items: flex-start;
}
.chronology04_sec06 .section_object__illust {
	width: 24.9954rem;
}
.chronology04_sec06 .section_object.js-modal_open .section_object__illust::before {
	left: inherit;
	right: 0;
	bottom: 1rem;
}
.chronology04_sec06 .section_note {
	left: .9721rem;
	bottom: .5rem;
}
.chronology04_sec06 .section_period {
	right: inherit;
	left: 21.0272rem;
}


/* セクション08
-------------------------------------------------------- */
.chronology04_sec08 {
	position: relative;
}
.chronology04_sec08 .parallax_bg__fixed::before {
	background-image: url("../img/chronology04_sec08_bg.jpg");
}
.chronology04_sec08 .c-imgSets {
	padding-top: 5.8909rem;
	padding-bottom: 5.8909rem;
}
.chronology04_sec08 .c-imgSets.img01 {
	padding-top: 8.1818rem;
	padding-bottom: 3.9272rem;
}
.chronology04_sec08 .cloud,
.chronology04_sec08 .illust {
	position: absolute;
}
.chronology04_sec08 .cloud.cloud01 {
	width: 41.359rem;
	top: -2.29rem;
	right: 61.2863rem;
}
.chronology04_sec08 .cloud.cloud02 {
	width: 21.9681rem;
	top: 10.6363rem;
	right: 34.4999rem;
}
.chronology04_sec08 .cloud.cloud03 {
	width: 19.8818rem;
	right: 30.1363rem;
	bottom: -5.9727rem;
}
.chronology04_sec08 .illust {
	width: 9.9409rem;
	right: 70.7136rem;
	bottom: 1.6363rem;
}
.chronology04_sec08 .section_note {
	left: 14.8499rem;
	bottom: .5rem;
}


/* =====
	5章
======================================================== */
#chronology05 {
	position: relative;
	z-index: 5;
}
#chronology05 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology05_parallax.jpg");
}

#chronology05 .c-detail_title,
#chronology05 .c-imgSet_title,
#chronology05 .c-img__title,
#chronology05 .c-imgSet_img__caption,
#chronology05 .section_object__title {
	background-color: #85af8e;
}
#chronology05 .chronology_sec__head .cloud {
	top: inherit;
	bottom: 9.2863rem;
}
@media screen and (max-width: 768px) {
#chronology05 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology05_parallax_sp.jpg");
}
}


/* セクション01
-------------------------------------------------------- */
.chronology05_sec01 {
	position: relative;
}
.chronology05_sec01 .ls0 {
	margin-top: -.8rem;
}

/* セクション02
-------------------------------------------------------- */
.chronology05_sec02 {
	position: relative;
}
.chronology05_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology05_sec02_bg.jpg");
	background-size: cover;
}
.chronology05_sec02 .section_note {
	bottom: .5rem;
	left: 14.8499rem;
}


/* =====
	6章
======================================================== */
#chronology06 {
	position: relative;
	z-index: 4;
}
#chronology06 .c-detail_title,
#chronology06 .c-imgSet_title,
#chronology06 .c-img__title,
#chronology06 .c-imgSet_img__caption,
#chronology06 .section_object__title {
	background-color: #d9a6dd;
}
#chronology06 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology06_parallax.jpg");
}
#chronology06 .chronology_sec__head .cloud {
	top: inherit;
	bottom: 9.2863rem;
}
@media screen and (max-width: 768px) {
#chronology06 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology06_parallax_sp.jpg");
}
}

/* セクション01
-------------------------------------------------------- */
.chronology06_sec01 {
	position: relative;
}
.chronology06_sec01 .photo {
	width: 20.4545rem;
	position: absolute;
	bottom: -3.0272rem;
	left: -15.8499rem;
}

/* セクション02
-------------------------------------------------------- */
.chronology06_sec02 {
	position: relative;
}
.chronology06_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology06_sec02_bg.jpg?250209");
	background-size: cover;
}
.chronology06_sec02 .section_note {
	bottom: .5rem;
	left: .8181rem;
}

/* セクション03
-------------------------------------------------------- */
.chronology06_sec03 {
	position: relative;
}
.chronology06_sec03 .photo {
	width: 25rem;
	position: absolute;
	right: 8.7181rem;
	bottom: 1.3727rem;
}


/* セクション04
-------------------------------------------------------- */
.chronology06_sec04 {
	position: relative;
}
.chronology06_sec04 .parallax_bg__fixed::before {
	background-image: url("../img/chronology06_sec04_bg.jpg");
	background-size: cover;
}
.chronology06_sec04 .section_object {
	right: -11.6363rem;
	bottom: -3rem;
}
.chronology06_sec04 .section_object > div {
	height: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: start;
	align-items: flex-start;
}
.chronology06_sec04 .section_object__title {
	margin-top: 2rem;
}
.chronology06_sec04 .illust01 {
	margin-left: 7rem;
}
.chronology06_sec04 .illust01 .section_object__illust {
	width: 29.2909rem;
	margin: 1.4727rem 0 0;
}
.chronology06_sec04 .illust02 {
}
.chronology06_sec04 .illust02 .section_object__title {
	margin-left: -11rem;
}
.chronology06_sec04 .illust02 .section_object__illust {
	width: 23.8909rem;
}
.chronology06_sec04 .section_note {
	bottom: .5rem;
	left: .8181rem;
}

/* セクション05
-------------------------------------------------------- */
.chronology06_sec05 {
	display: -webkit-box;
	display: flex;
	padding-bottom: 2.6181rem;
	position: relative;
}
.chronology06_sec05 .btm {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	margin: 3rem 0 0;
}
.chronology06_sec05 .img {
	width: 18.6136rem;
	position: relative;
	left: -4rem;
}

/* セクション06
-------------------------------------------------------- */
.chronology06_sec06 {
	position: relative;
}
.chronology06_sec06 .parallax_bg__fixed::before {
	background-image: url("../img/chronology06_sec06_bg.jpg");
	background-size: cover;
}
.chronology06_sec06 .section_object {
	right: -10.7999rem;
}
.chronology06_sec06 .section_object__title {
	margin: 0 -7.8954rem -.1636rem 0;
}
.chronology06_sec06 .section_object {
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	flex-direction: column-reverse;
	-webkit-box-align: start;
	align-items: flex-start;
}
.chronology06_sec06 .section_object__illust {
	width: 37.3rem;
}
.chronology06_sec06 .section_note {
	bottom: .5rem;
	left: 13.5rem;
}

/* =====
	7章
======================================================== */
#chronology07 {
	position: relative;
	z-index: 3;
}
#chronology07 .c-detail_title,
#chronology07 .c-imgSet_title,
#chronology07 .c-img__title,
#chronology07 .c-imgSet_img__caption,
#chronology07 .section_object__title {
	background-color: #b6ba67;
}
#chronology07 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology07_bg.jpg");
	background-size: cover;
}
#chronology07 .chronology_sec__head .cloud {
	width: 10.3909rem;
	top: inherit;
	bottom: 6.5454rem;
}
@media screen and (max-width: 768px) {
#chronology07 .chronology_sec__head .parallax_bg__fixed::before {
	background-image: url("../img/chronology07_parallax_sp.jpg");
}
}

/* セクション02
-------------------------------------------------------- */
.chronology07_sec02 {
	position: relative;
}
.chronology07_sec02 .parallax_bg__fixed::before {
	background-image: url("../img/chronology07_sec02_bg.jpg");
	background-size: cover;
}
.chronology07_sec02 .section_object {
	-webkit-box-align: start;
	align-items: flex-start;
	right: inherit;
	right: -4rem;
	bottom: -2.25rem;
/*	transform: translateX(-50%);*/
}
.chronology07_sec02 .section_object__illust {
	width: 28.3499rem;
}
.chronology07_sec02 .section_note {
	bottom: .5rem;
	left: .8181rem;
}

/* セクション03
-------------------------------------------------------- */
.chronology07_sec03 {
	padding-bottom: 3.272725rem;
}

/* セクション04
-------------------------------------------------------- */
.chronology07_sec04 {
	position: relative;
}
.chronology07_sec04 .parallax_bg__fixed::before {
	background-image: url("../img/chronology07_sec04_bg.jpg");
	background-size: cover;
}
.chronology07_sec04 .illust {
	position: absolute;
}
.chronology07_sec04 .illust.illust01 {
	width: 20.0863rem;
	top: -.69545rem;
	left: -6.2727rem;
}
.chronology07_sec04 .illust.illust02 {
	width: 27rem;
	right: -5.7272rem;
	bottom: -1.1045rem;
}
.chronology07_sec04 .section_note {
	bottom: .5rem;
	left: .8181rem;
}

/* セクション06
-------------------------------------------------------- */
.chronology07_sec06 {
	position: relative;
}
.chronology07_sec06 .parallax_bg__fixed::before {
	background-image: url("../img/chronology07_sec06_bg.jpg");
	background-size: cover;
}
.chronology07_sec06 .cloud {
	position: absolute;
	z-index: 0;
}
.chronology07_sec06 .cloud.cloud01 {
	width: 14.5636rem;
	top: -1.9636rem;
	right: 73.1818rem;
}
.chronology07_sec06 .cloud.cloud02 {
	width: 13.7454rem;
	right: 21.3136rem;
	bottom: -1.4727rem;
}
.chronology07_sec06 .content,
.chronology07_sec06 .img_rows {
	display: -webkit-box;
	display: flex;
}
.chronology07_sec06 .content {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	padding: .7rem 8.1818rem 0 4.745rem;
	position: relative;
	z-index: 1;
}
.chronology07_sec06 .img_rows {
	-webkit-box-pack: center;
	justify-content: center;
	margin: 0 0 0 4.745rem;
}
.chronology07_sec06 .img_rows .btm {
	margin: 1.2rem 17.2227rem 0 0;
}
@media screen and (max-height: 667px) {
.chronology07_sec06 .img_rows .btm {
	margin: -1rem 17.2227rem 0 0;
}
}

.chronology07_sec06 .c-imgSets {
	padding: 0;
}
.chronology07_sec06 .c-imgSet_title {
	padding-bottom: .6rem;
}
.chronology07_sec06 .c-imgSet_img {
	margin: 1.5rem 0 0;
}
.chronology07_sec06 .c-imgSet_title .main {
	white-space: nowrap;
}




.section_note {
	color: #fdfdfd;
	font-size: .9818rem;
	letter-spacing: 0;
	opacity: .7;
	writing-mode: horizontal-tb;
	position: absolute;
}
.c-details .c-detail:not(:last-child) {
	margin: 0 0 0 4rem;
}
.c-detail {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	position: relative;
}
.c-detail a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.c-detail a::before {
	content: "";
	width: 2.94545rem;
	height: 2.94545rem;
	background-color: #333;
	background-image: url("../img/icon_blank_wh.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: .981818rem auto;
	position: absolute;
	bottom: 0;
	left: 0;
}
.c-detail > div {
	position: relative;
}
.c-detail_title {
	background: #d56521;
	border: solid .2045rem #333;
	box-shadow: -3px 3px 3px 0px rgba(104, 72, 72, 0.5);
	writing-mode: horizontal-tb;
	text-align: center;
	letter-spacing: .05em;
	white-space: nowrap;
	margin: 0 0 -2rem;
	padding: .8181rem 1.6362rem;
	z-index: 1;
}
.c-detail_title::before {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/pattern02.png") no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.c-detail_title > span {
	display: block;
	position: relative;
	z-index: 1;
}
.c-detail_title > span > span {
	font-size: 1.14545rem;
}
.c-detail_title.is-vertical > span {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	line-height: 1;
}
.c-detail_title.is-vertical > span > span:not(.vertical) {
	font-size: 1.472rem;
}
.c-detail_title.is-vertical > span > span.vertical {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	line-height: 1;
	margin: 4px 0 -2px;
}
.c-detail_title.is-vertical > span > span > span {
	font-size: 1.14545rem;
}
.c-detail_text {
	font-size: 1.4727rem;
	min-width: 9.8181rem;
	background: rgba(255, 255, 255, .85);
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	padding: 3.68181rem 2.61818rem 2.61818rem;
	z-index: 0;
}
.c-detail_text.min_w310 {
	min-width: 12.6818rem;
}
.c-detail_text.min_w410 {
	min-width: 16.7727rem;
}
.c-detail_text.h100 {
	height: 100%;
}
.c-detail_text.max_h560 {
	height: calc(100% - 15rem);
	padding-bottom: 1.3rem;
}
@media screen and (max-height: 674px) {
.c-detail_text.max_h560 {
	height: calc(100% - 20rem);
}
}
.c-imgSets {
	padding: 2.61818rem 0;
}
@media screen and (max-width: 768px) {
.c-imgSets {
	padding: 1.30909rem 0;
}
}

.c-imgSets .c-imgSet:not(:last-child) {
	margin: 0 0 0 4rem;
}
.c-imgSet {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: start;
	align-items: flex-start;
	position: relative;

}
.c-imgSet a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.c-imgSet a::before {
	content: "";
	width: 2.94545rem;
	height: 2.94545rem;
	background-color: #333;
	background-image: url("../img/icon_blank_wh.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: .981818rem auto;
	position: absolute;
	bottom: 0;
	left: 0;
}

.c-imgSet_title {
	background: #d56521;
	border: solid .2045rem #333;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	margin: 0 0 0 .8181rem;
	padding: 1.3rem;
	position: relative;
}
.c-imgSet_title::after {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/pattern03.png") no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.c-imgSet_title > div {
	position: relative;
	z-index: 1;
}
.c-imgSet_title .sub {
	font-size: 1.1454rem;
}
.c-imgSet_title .main {
	margin: .9818rem 0 0;
}
.c-imgSet_title .sub > span > span,
.c-imgSet_title .main > span > span {
	font-size: .8999rem;
}
.c-imgSet_title.is-main_only {
	padding: 1.3rem 1rem;
}
.c-imgSet_title.is-main_only .main {
	margin: 0;
}
.c-imgSet_img {
	max-height: 24.5454rem;
	margin: 1.6363rem 0 0;
	position: relative;
}
.c-imgSet_img.h490 {
	max-height: 20.0454rem;
}
.c-imgSet_img.h614 {
	max-height: 25.1181rem;
}
.c-imgSet_img.h776 {
	max-height: 31.7454rem;
}
.c-imgSet_img.h900 {
	max-height: 36.8181rem;
}
.c-imgSet_img.border {
	border: solid .4rem #000;
}
.c-imgSet_img__caption {
	background: #d56521;
	border: solid .1636rem #333;
	box-shadow: -3px 3px 3px 0px rgba(104, 72, 72, 0.5);
	writing-mode: horizontal-tb;
	text-align: center;
	padding: .8181rem .65454rem;
	position: absolute;
	top: -1.9636rem;
	right: 2.1272rem;
	z-index: 1;
}
.c-imgSet_img__caption::before {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/pattern02.png") no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.c-imgSet_img__caption > span {
	position: relative;
	z-index: 1;
}
.c-detail.js-modal_open .c-detail_text::before,
.c-imgSet.js-modal_open .c-imgSet_img::before,
.c-img.js-modal_open .c-img__img::before,
.section_object.js-modal_open .section_object__illust::before {
	content: "";
	width: 2.94545rem;
	height: 2.94545rem;
	background-color: #333;
	background-image: url("../img/icon_plus_wh.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: .981818rem auto;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.c-detail.js-modal_open.is-zoom .c-detail_text::before,
.c-imgSet.js-modal_open.is-zoom .c-imgSet_img::before {
	width: 2.04545rem;
	height: 2.04545rem;
	background-color: transparent;
	background-image: url("../img/icon_zoom_wh.svg");
	background-size: contain;
	bottom: .8rem;
	left: .8rem;
}
.c-detail.js-modal_open.is-zoom.is-zoom_bk .c-detail_text::before,
.c-imgSet.js-modal_open.is-zoom.is-zoom_bk .c-imgSet_img::before {
	background-image: url("../img/icon_zoom_bk.svg");
}


.c-imgs {
	height: 100%;
	writing-mode: horizontal-tb;
	padding: 2.61818rem 0;
}
.c-img {
	height: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.c-img__img {
	width: 20rem;
	position: relative;
}
.c-img__title {
	background: #d56521;
	border: solid .2045rem #333;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	text-align: center;
	white-space: nowrap;
	margin: -2rem 0 0;
	padding: .6545rem 2.2909rem;
	position: relative;
}
.c-img__title::after {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/pattern03.png") no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.c-img__title span {
	font-size: 1.1454rem;
}
.c-img__title > div {
	position: relative;
	z-index: 1;
}




/* 前景 */


.chronology_sec .title_primary{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	align-items: center;
	font-size: 1.666em;
}
.chronology_sec .title_primary .sub{
	font-size: .8em;
	margin-top: 1.25em;
}

.chronology_sec .guidance{
	margin-left: 2em;
}
#chronology02 .chronology_sec__head .parallax_bg {
	width: 100%;
	background-image: url("../img/chronology02_bg.jpg");
	right: 0;
}

@media screen and (max-width: 768px) {

}

/* モーダルトリガー部分
-------------------------------------------------------- */
.chronology_sec .detail_wrapper{
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	/* ↑縦書きから戻す時（初期値） */

	cursor: pointer;
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto 1fr auto;
	grid-template-rows: auto 1fr auto;/* 1frと組み合わせると、「auto」は子要素の高さに合わせる */
	height: 100%;/* 指定しないとはみ出てしまうので */
	margin-left: 1.5rem;
}

.chronology_sec .detail_wrapper .date{
	font-size: 1em;
	text-align: center;
	letter-spacing: .05em;
	padding-top: .9em;
	margin-bottom: .4em;
}
.chronology_sec .detail_wrapper .date .small{
	font-size: .78em;
}

.chronology_sec .detail_wrapper .box{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;

	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	padding: 1em .9em .8em;
	margin-bottom: .5em;
	border-top: 2px solid #3e516f;
	border-bottom: 2px solid #3e516f;
	background-color: var(--white);
	position: relative;
	transition: background-color .4s;
}
.chronology_sec .detail_wrapper:hover .box{
	background-color: #f4f4f4;
}

.chronology_sec .detail_wrapper .box .deco{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	left: 0;
}
.chronology_sec .detail_wrapper .box .deco01{
	top: 1px;
}
.chronology_sec .detail_wrapper .box .deco02{
	bottom: 1px;
}
.chronology_sec .detail_wrapper .box .deco::before,
.chronology_sec .detail_wrapper .box .deco::after{
	content: "";
	display: block;
	width: .6em;
	height: .6em;
	background: url(../img/detail_wrapper_deco.svg) no-repeat center/contain;
}
.chronology_sec .detail_wrapper .box .deco01::before{
	transform: scale(-1, 1);
}
.chronology_sec .detail_wrapper .box .deco02::before{
	transform: scale(-1, -1);
}
.chronology_sec .detail_wrapper .box .deco02::after{
	transform: scale(1, -1);
}

.chronology_sec .detail_wrapper .button{
	width: 2.22em;
	height: 2.22em;
	margin-inline: auto;
	border-radius: 50%;
	background-color: var(--white);
	position: relative;
	overflow: hidden;
	transition: background-color .4s;
}

.chronology_sec .detail_wrapper .button::before,
.chronology_sec .detail_wrapper .button::after{/* 背景色のグレー部分 */
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: background-color .4s;
}

.chronology_sec .detail_wrapper .button::before{
	background-color: #f4f4f4;
	-webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.chronology_sec .detail_wrapper .button::after{/* + */
	-webkit-mask: url(../img/button_plus.svg) no-repeat center/30%;
	mask: url(../img/button_plus.svg) no-repeat center/30%;
	background-color: var(--font_color);
	z-index: 1;
}

.chronology_sec .detail_wrapper:hover .button,
.chronology_sec .detail_wrapper:hover .button::before{
	background-color: var(--blue);
}
.chronology_sec .detail_wrapper:hover .button::after{
	background-color: var(--white);
}


@media screen and (max-width: 768px) {

}


/* 画像
-------------------------------------------------------- */

.chronology_sec .img_wrapper{
	height: 79%;
	margin-top: 13%;
	margin-right: 3.25rem;
}
.chronology_sec .img_wrapper .img{
	height: 90%;
	max-height: 73%;
	margin-left: 1.5rem;
}
.chronology_sec .img_wrapper .img:nth-of-type(2n+1){
	margin-bottom: auto;
}
.chronology_sec .img_wrapper .img:nth-of-type(2n){
	margin-top: auto;
}
.chronology_sec .img_wrapper .img:nth-last-of-type(1){
	margin-left: 0;
}

/************************************************************************
	
**************************************************************************/


@media screen and (max-width: 768px) {
	
}


/* =====
	
======================================================== */


@media screen and (max-width: 768px) {

}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {

}


/* =====
	
======================================================== */


@media screen and (max-width: 768px) {

}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {

}


/************************************************************************
	
**************************************************************************/


@media screen and (max-width: 768px) {
	
}

/* =====
	
======================================================== */


@media screen and (max-width: 768px) {

}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {

}


/* =====
	
======================================================== */


@media screen and (max-width: 768px) {

}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {

}



/************************************************************************
	
**************************************************************************/
@media screen and (max-width: 768px) {
	
}


/* =====
	
======================================================== */

@media screen and (max-width: 768px) {
	
}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {
	
}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {
	
}



/************************************************************************
	
**************************************************************************/
@media screen and (max-width: 768px) {
	
}


/* =====
	
======================================================== */

@media screen and (max-width: 768px) {
	
}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {
	
}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {
	
}



/************************************************************************
	
**************************************************************************/
@media screen and (max-width: 768px) {
	
}


/* =====
	
======================================================== */

@media screen and (max-width: 768px) {
	
}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {
	
}

/* 
-------------------------------------------------------- */


@media screen and (max-width: 768px) {
	
}
.js-modal {
	max-width: 500px;
	width: 95%;
	max-height: 95vh;
	display: none;
	position: fixed;
	z-index: 500;
}
.js-modal_bg {
	width: 100%;
	height: 100%;
	background: #333;
	opacity: .5;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 400;
}
.js-modal_head,
.js-modal_body {
	position: relative;
}
.js-modal_head {
	flex-shrink: 0;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	margin: 0 0 -20px;
	z-index: 1;
}
.js-modal_open,
.js-modal_close {
	cursor: pointer;
}

.js-modal_close {
	width: 40px;
	height: 40px;
	background: #333;
	border-radius: 50%;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.js-modal_close::before {
	content: "";
	width: 8px;
	height: 8px;
	background: url("../img/icon_times_wh.svg") no-repeat;
	background-size: contain;
}
.js-modal_body {
	max-height: calc(95vh - 60px); /* ← ヘッダー分引く */
	overflow-y: auto;
	z-index: 0;
}
.js-modal.type01 .js-modal_body {
	width: 87%;
	background: #fff;
	border-radius: 10px;
	margin: auto;
	padding: 16px;
	
}
.js-modal.type01 .js-modal_body__img {
	margin: 0 0 16px;
}
.js-modal.type02 {
	max-width: 800px;
}
.js-modal.type02 .js-modal_head {
	margin: 0 0 16px;
}
.js-modal.type02 .js-modal_body {
	text-align: center;
}
.js-modal_tab__btns {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: end;
	align-items: flex-end;
}
.js-modal_tab__btns .js-modal_tab__btn:not(:nth-child(1)) {
	border-left: none;
}
.js-modal_tab__btn {
	color: #999;
	font-size: min(3vw, 18px);
	width: 50%;
	background: #f2f2f2;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px;
	position: relative;
}
.js-modal_tab__btn::after {
	content: "";
	width: calc(100% + 1px);
	height: 100%;
	border: solid 1px #999;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.js-modal_tab__btn.is-active {
	color: #333;
	font-size: min(4vw, 24px);
	background: #fff;
}
.js-modal_tab__btn.is-active::after {
	border-color: #333;
	border-bottom: none;
	z-index: 1;
}
.js-modal_tab__panel {
	display: none;
	padding: 16px 0 0;
}
.js-modal_tab__panel.is-show {
	display: block;
}
.js-modal_body__text {
	font-size: 16px;
	letter-spacing: 0;
}

#loading {
	width: 100%;
	height: 100%;
	background: var(--bg_gray);
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	transition: .5s;
	z-index: 1000;
}
#loading.is-loaded {
	opacity: 0;
	visibility: hidden;
}
.loading_logo {
	height: 92vh;
	position: relative;
	z-index: 1;
}
.loading_text {
	height: 80vh;
	display: none;
	position: absolute;
	top: 50%;
	right: 18.9375vw;
	transform: translateY(-50%);
	z-index: 3;
}
.loading_text img {
	-webkit-filter: drop-shadow(0 0 2px white)
		drop-shadow(0 0 2px white)
		drop-shadow(0 0 2px white);
	filter: drop-shadow(0 0 2px white)
		drop-shadow(0 0 2px white)
		drop-shadow(0 0 2px white);
}
@media screen and (max-width: 390px) {
.loading_logo {
  height: 92%;
}
.loading_text {
	height: 80%;
}
}
.loading_logo img[src*=".svg"] {
	width: auto;
}
.loading_cloud {
	position: absolute;
}
.loading_cloud01 {
	width: 21rem;
	top: 3.3136rem;
	right: -5.7rem;
	animation: rtl 90s linear infinite;
}
.loading_cloud01,
.loading_cloud04 {
	z-index: 2;
}
.loading_cloud02,
.loading_cloud03 {
	z-index: 0;
}
.loading_cloud02 {
	width: 27rem;
	top: 17.5rem;
	left: -10rem;
	animation: ltr 80s linear infinite;
}
.loading_cloud03 {
	width: 22rem;
	bottom: 20rem;
	right: -5.7rem;
	animation: rtl 70s linear infinite;
}
.loading_cloud04 {
	width: 19.5rem;
	bottom: 2.5rem;
	left: -10rem;
	animation: ltr 60s linear infinite;
}
@keyframes rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-102vw);
  }
}

@keyframes ltr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(102vw);
  }
}
.scroll-hint-icon-wrap {
	writing-mode: horizontal-tb;
	z-index: 500;
}
#sound_switch {
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
}
.sound_switch__content {
	font-size: 18px;
	max-width: 325px;
	width: 87%;
	background: #fff;
	border-radius: 20px;
	padding: 32px 16px;
	position: relative;
	z-index: 1;
}
.sound_switch__text {
	text-align: center;
	margin: 0 0 16px;
}
.sound_switch__btns {
	max-width: 280px;
	width: 100%;
	display: -webkit-box;
	display: flex;
	margin: auto;
}
.sound_switch__btns .sound_switch__btn:not(:last-child) {
	margin: 0 4% 0 0;
}
.sound_switch__btn {
	color: #fff;
	width: 48%;
	background: #333;
	border-radius: 25px;
	box-shadow: 0px 3px 3px 0px rgba(104, 72, 72, 0.5);
	padding: 8px 10px 10px;
	position: relative;
	transition: .5s;
}
.sound_switch__btn::before,
.sound_switch__btn::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.sound_switch__btn::before {
	background: url(../img/pattern02.png) no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	z-index: 0;
}
.sound_switch__btn::after {
	border: solid 2px #333;
	border-radius: 25px;
	z-index: 1;
}
.sound_switch__btn span {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.sound_switch__btn span::before {
	content: "";
	width: 33px;
	height: 23px;
	background-image: url("../img/icon_sound_wh.svg");
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 8px 0 0;
}
.sound_switch__btn__off span::before {
	background-image: url("../img/icon_sound_off_wh.svg");
}
.sound_switch__btn:hover {
	color: #333;
	background: #d56521;
}
.sound_switch__btn__on:hover span::before {
	background-image: url("../img/icon_sound.svg");
}
.sound_switch__btn__off:hover span::before {
	background-image: url("../img/icon_sound_off.svg");
}
.sound_switch__bg {
	width: 100%;
	height: 100%;
	background: #333;
	opacity: .7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
@media screen and (max-width: 768px) {
.sound_switch__content {
	font-size: min(4.8vw, 18px);
	border-radius: 10px;
	padding: min(8.5333vw, 32px) min(4.2666vw, 16px);
}
.sound_switch__text {
	margin: 0 0 min(4.2666vw, 16px);
}
.sound_switch__btn span::before {
	width: min(8.8vw, 33px);
	height: min(6.1333vw, 23px);
	margin: 0 min(2.1333vw, 8px) 0 0;
}
}