@charset "utf-8";

#fv{ background: url(../images/about-toyokawainari/fv_bg.jpg) right center/cover no-repeat; }
#bread{ margin-bottom: 26px; }
.cta{ padding-bottom: 85px; }


.main-title { margin-bottom: 41px; position: relative; padding: 0 0 21px;}

.gold-lead{position: relative; margin: 0 auto; max-width: 1600px; padding: 105px 0 88px;}
.gold-box{position: relative;}
.gold-box:before{content: ""; display: block; position: absolute; left: 0px; width: 53%; height: 93.3%; background: #ECDCBB url(../images/about-toyokawainari/bg_13.jpg) no-repeat left top; background-size: 392px; bottom: 0px;}
.gold-box .gold-inner{width: 1250px; padding: 0 25px; margin: 0 auto;}
.gold-box .gold-img{position: absolute; right: 50px; top: 0px; width: calc(100% - 53.13%); height: auto; z-index: 1;}
.gold-box .gold-img:before{content: ""; display: block; width: 100%; height: 100%; background: #AA8E56; position: absolute; bottom: -14px; right: -14px;}
.gold-box .gold-img figure{position: relative; z-index: 1;}
.gold-box .gold-img figure img{width: 100%; height: auto;}
/* --------------------------------------------------------------------------- lead */
#lead { padding: 0px 0 104px; background: url(../images/about-toyokawainari/bg_09.jpg) center top/ 100% no-repeat; position: relative;}
#lead .main-title { }

.lead__box { padding: 0 0 51px; }
.lead__image-item { width: 100%; }

.lead__body { width: 100%; }
.lead__title { margin-bottom: 46px; font-family: "Zen Old Mincho", serif; font-weight:600; font-style: normal;font-size: 36px; line-height: 150%; text-align: center;}
.lead__text { line-height: 220%; }


/* --------------------------------------------------------------------------- history */
#history { padding: 0 0 130px; overflow: hidden;}
#history .history-inner{margin: 0 auto; padding: 0 25px; width: 1250px;}
#history .history-bg{position: relative;}
#history .history-bg:before{content: ""; display: block; width: 328px; height: 163px; background: url(../images/about-toyokawainari/bg_08.png) no-repeat center center; background-size: 100%; position: absolute; right: -33px; top: -4px;}
.history-lead { text-align: center; margin-bottom: 70px; }
.history-lead__head { width: 100%;}
.history-lead__body { width: 1100px; margin: 0 auto; text-align: left; padding: 34px 0 0;}
.history-lead__title { font-family: "Zen Old Mincho", serif; font-weight:600; font-style: normal;font-size: 36px; line-height: 150%; }
.history-lead__text { line-height: 200%; }

.history-timeline-outline_bg{position: relative;}
.history-timeline-outline_bg:before{content: ""; display: block; background: url(../images/about-toyokawainari/bg_05.png) center/cover no-repeat; background-size: 100%; position: absolute; right: -289px; top: -22px; width: 635px; height: 198px; opacity: 0.4; mix-blend-mode: multiply;}
.history-timeline-outline_bg:after{content: ""; display: block; background: url(../images/about-toyokawainari/bg_12.png) center/cover no-repeat; background-size: 100%; position: absolute; left: -335px; top:  207px; width: 507px; height: 116px; mix-blend-mode: multiply;}
.history-timeline-outline{ display: flex;padding: 72px 50px 109px;background: url(../images/about-toyokawainari/bg_01.jpg) center/cover no-repeat;}
.history-timeline-outline:after{content: ""; display: block; background: url(../images/about-toyokawainari/bg_07.png) center/cover no-repeat; background-size: 100%; position: absolute; right: -142px; bottom: 82px; width: 678px; height: 145px; mix-blend-mode: multiply;}
.history-timeline-outline:before{}
.history-timeline { position: relative; width: 50%; }
.history-timeline-right{padding: 132px 0 0;}

.history-timeline__item { position: relative; display: flex; align-items: flex-start; gap: 45px; padding: 0 123px 0 0; height: auto;}
.history-timeline__item::before { content: ""; position: absolute; top: 5%; right: -2px; height: 100%; width: 1px; border: 2px solid #9D9D9D; }
.history-timeline__item::after{width: 125px; border-radius: 100px; border: 2px solid #C6A456; content: ""; display: block; top: 19px; right: 0px; position: absolute; }
.history-timeline-right .history-timeline__item::after{ right: auto; left: 0px; width: 100px;}
.history-timeline__item:last-of-type::before{ height: 100%; border: 2px dashed #9D9D9D; }
.history-timeline-right .history-timeline__item{ padding: 0 0 0 123px; }
.history-timeline-right .history-timeline__item::before { right: auto; left: -2px;}



.history-timeline__dot { position: absolute; right: -14.5px; top: 6px; z-index: 1; width: 29px; height: 29px; border-radius: 50%; background: #C6A456; }
.history-timeline-right .history-timeline__item .history-timeline__dot{left: -14.5px; right: auto;}
.history-timeline__content { width: 425px; text-align: right;}
.history-timeline-right .history-timeline__item .history-timeline__content { margin: 0 0 0 auto; text-align: left;}

.history-timeline__title { margin-bottom: 5px; font-family: "Zen Old Mincho", serif; font-weight:600; font-style: normal;font-size: 24px; line-height: 150%; }
.history-timeline__text { line-height: 200%; font-size: 16px; text-align: left}

.history-timeline-left .history-timeline__item:nth-child(1){padding-bottom: 104px;}
.history-timeline-left .history-timeline__item:nth-child(2){padding-bottom: 101px;}
.history-timeline-left .history-timeline__item:nth-child(3){padding-bottom: 73px;}
.history-timeline-left .history-timeline__item:nth-child(4){padding-bottom: 69px;}

.history-timeline-right .history-timeline__item:nth-child(1){padding-bottom: 102px;}
.history-timeline-right .history-timeline__item:nth-child(2){padding-bottom: 142px;}
.history-timeline-right .history-timeline__item:nth-child(3){padding-bottom: 69px;}

/* --------------------------------------------------------------------------- about culture */
#about{padding: 0 0 169px;}
#archive{padding: 0 0 169px}
#archive .gold-box::before { left: auto; right: 0px; background: #ECDCBB url(../images/about-toyokawainari/bg_13.jpg) no-repeat right top; background-size: auto; background-size: 397px; height: 73.9%;}
#archive .gold-box .gold-img{right: auto; left: 50px;}
#archive .gold-box .gold-inner .archive__body{margin: 0 0 0 auto; width: 42.5%;}
.about-block__body{width: 43%; position: relative; z-index: 1;}

/* .about-article{ padding-bottom: 169px; } */
.about-block { position: relative; }

.about-block .main-title { padding-bottom: 115px; }
.about-block__lead { margin-bottom: 55px; }
.about-block__title { margin-bottom: 18px; font-family: "Zen Old Mincho", serif; font-weight:600; font-style: normal;font-size: 33px; line-height: 166.7%; }
.about-block__text { line-height: 225%; font-size: 16px;}
.about-block__caption{ padding: 28px 0 0; }

.about-block__image-list { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.about-block__image-item { width: calc((100% - 36px) / 4); }
.about-block__image-item img { display: block; width: 100%; height: auto; }

/* reverse */
.about-block--reverse .about-block__lead { flex-direction: row; }

.about-block--reverse.about-block::after{ background: url(../images/about-toyokawainari/bg_03.png) left top/445px no-repeat, url(../images/about-toyokawainari/bg_02.png) right bottom/600px no-repeat; }
.about-block--reverse .about-block__lead::before { left: -8%; right: auto; background-position: left top; }

.about-block:not(.about-block--reverse) .about-block__lead::before { left: auto; right: -8%; background-position: right top; }

#culture{position: relative; padding: 0 0 145px;}
#culture:before{content: ""; display: block; background: url(../images/about-toyokawainari/bg_10.jpg) no-repeat right top; background-size: auto; background-size: 100%; width: 421px; height: 423px; position: absolute; top: 453px; left: 0px;}
#culture:after{content: ""; display: block; background: url(../images/about-toyokawainari/bg_11.jpg) no-repeat right top; background-size: auto; background-size: 100%; width: 421px; height: 423px; position: absolute; bottom: -166px; right: 0px;}
#culture .gold-box::before { left: auto; right: 0px; background: #ECDCBB url(../images/about-toyokawainari/bg_14.jpg) no-repeat right top; background-size: auto; background-size: 397px;}
#culture .gold-box .gold-img{right: auto; left: 50px;}
#culture .gold-box .gold-inner .about-block__body{margin: 0 0 0 auto; width: 42.5%;}
.about-article{position: relative; z-index: 1;}
#culture .about-article:not(.last-about-article){padding: 0 0 63px;}

.last-about-article .last-about-inner{width: 1250px; margin: 0 auto; padding: 0 25px;}
.last-about-article .about-block__lead{background: #ECDCBB; padding: 76px 50px 77px; display: flex; align-items: center; justify-content: space-between; margin: 0px;}
.last-about-article .about-block__lead .main-img{width: 370px; height: auto;}
.last-about-article .about-block__lead .main-img .about-block__title{margin-bottom: 36px;}
.last-about-article .about-block__lead .main-img .about-block__main-image figcaption{font-size: 12px; padding: 15px 0 0;}
.last-about-article .about-block__lead .about-block__body{width: calc(100% - 370px - 73px); height: auto;}
.last-about-article .about-block__lead .about-block__body .about-block__text{line-height: 225%;}
/* --------------------------------------------------------------------------- precinct */
#precinct { padding: 0 0 120px; }

.precinct__map { margin: 0 0 50px; }
.precinct__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 5%; margin-bottom: 90px; }
.precinct__title { width: 30%; font-family: "Zen Old Mincho", serif; font-weight:600; font-style: normal;font-size: 31px; line-height: 170%; }
.precinct__text-box { width: 75%; }
.precinct__text { line-height: 220%; }

/* gallery */
.precinct-gallery + .precinct-gallery{ padding-top: 80px; }
.precinct-gallery__title { margin-bottom: 20px; font-family: "Zen Old Mincho", serif; font-weight:600; font-style: normal;font-size: 25px; line-height: 150%; text-align: center; }
.precinct-gallery__list { display: flex; flex-wrap: wrap; gap: 36px 24px; }
.precinct-gallery__item { width: calc((100% - 72px) / 4); }
.precinct-gallery__item img{ width: 100%; height: auto; }
.precinct-gallery__caption { margin-top: 12px; text-align: center; font-size: 20px; line-height: 150%; }




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

	.cta { padding-bottom: 50px; }

	.main-title { margin-bottom: 22px; padding-bottom: 12px; }

	#fv{ background: url(../images/about-toyokawainari/fv_bg_sp.jpg) right center/cover no-repeat; }


/* --------------------------------------------------------------------------- gold-box 共通 (about-opening 流用) */
	.gold-lead { max-width: 100%; padding: 0; }
	.gold-box:before { display: none; }
	.gold-box .gold-inner { width: 90%; margin: 0 auto; padding: 0; }
	.gold-box .gold-img { position: relative; right: auto; left: auto; width: 95%; margin: 0 0 28px auto; }
	.gold-box .gold-img:before { bottom: -8px; right: auto; left: -8px; width: calc(100% + 8px); }


/* --------------------------------------------------------------------------- lead */
	#lead { padding: 0 0 26%; z-index: 1; background: url(../images/about-toyokawainari/bg_09_sp.jpg) center top/ 100% no-repeat;}

	.lead__box { padding: 0 0 62px; }
	.lead__body { width: 100%; }
	.lead__title { margin-bottom: 30px; font-size: 20px; line-height: 150%;}
	.lead__text { font-size: 14px; line-height: 200%; }
	.lead__image-item { width: 100%; }


/* --------------------------------------------------------------------------- history */
	#history { padding: 0 0 calc(76px - 5%);; overflow: initial;position: relative;}
	#history::before { width: 100%; height: auto; background: url(../images/about-toyokawainari/bg_08_sp.jpg) no-repeat center center; background-size: 100%; right: -0px; top: -6%; padding: 20% 0; content: ""; display: block; position: absolute;}
	#history .history-bg::before{display: none;}
	#history .history-inner{margin: 0 auto; padding: 0 0 5%; width: 100%;overflow: hidden;}
	#history .main-title{width: 90%; margin: 0 auto 22px;}
	.history-lead { display: block; text-align: center; width: 90%; margin: 0 auto 60px;}
	.history-lead__head { width: 100%; padding: 0 0 14px; }
	.history-lead__body { width: 100%; padding: 0; text-align: left; }
	.history-lead__title { font-size: 20px; }
	.history-lead__text { font-size: 14px; }

	.history-timeline-outline_bg:before{right: -23%; top: 37%; width: 57%; height: auto; padding: 9% 0 8.8%;}
	.history-timeline-outline_bg:after{ padding: 7.1% 0; left: -14%; top: -1.5%; width: 63%; height: auto;}
	.history-timeline-outline:after {right: -11%; bottom: -0.95%; width: 76%; height: auto; padding: 8% 0;}
	
	.history-timeline-outline { display: block; padding: 0;background: url(../images/about-toyokawainari/bg_01_sp.jpg) center/cover no-repeat; background-size: cover; }
	.history-timeline { width: 100%; padding: 12% 5% 8%; }
	.history-timeline__item { display: block; padding: 0 0 0 50px; }
	.history-timeline__item:not(:last-child) { padding-bottom: 32px; }
	.history-timeline__item::before { left: 8px; right: auto; top: 2px; }
	.history-timeline__item::after{width: 43px; top: 9px; left: 0px; right: auto;}
	.history-timeline__dot { left: 0; right: auto; top: 2px; width: 18px; height: 18px; }
	.history-timeline__content { width: 100%; text-align: left; }
	.history-timeline__title { font-size: 18px; line-height: 111.1%; }
	.history-timeline__text {font-size: 14px; line-height: 179%;}
/* --------------------------------------------------------------------------- about / culture */
	#about { padding: 0 0 62px; position: relative;}
	#about:before{content: ""; display: block; width: 30.1%; height: auto; padding: 21% 0; position: absolute; right: 0px; top: 1%; background: url(../images/about-toyokawainari/bg_15_sp.jpg) no-repeat center center; background-size: 100%;}
	#about:after{content: ""; display: block; width: 32.5%; height: auto; padding: 15% 0 17%; position: absolute; left: 0px; top: 19.9%; background: url(../images/about-toyokawainari/bg_17_sp.jpg) no-repeat center center; background-size: 100%;}
	#culture { padding: 0 0 50px; }
	#culture:before,
	#culture:after { display: none; }
	#culture .gold-box::before { display: none; }
	#culture .gold-box .gold-img { left: auto; margin: 0 auto 28px 0;}
	#culture .gold-box .gold-imgmg::before { right: -8px; left: auto;}
	#culture .gold-box .gold-inner .about-block__body { width: 100%; margin: 0; }

	.about-article { padding-bottom: 0; }
	#culture .about-article:not(.last-about-article) { padding: 0 0 35px; }
	#culture{position: relative;}
	#culture:before{content: ""; display: block; width: 43.6%; height: auto; padding: 21% 0 20.7%; position: absolute; left: auto; right: 0px; top: -0.3%; background: url(../images/about-toyokawainari/bg_16_sp.jpg) no-repeat center center; background-size: 100%;}
	.about-block__lead { display: block; margin-bottom: 0; }
	.about-block__body { width: 100%; padding: 0; text-align: left; }
	.about-block__title { margin-bottom: 15px; font-size: 26px; line-height: 138.5%; }
	.about-block__text { font-size: 16px; line-height: 169%;}
	.about-block__main-image { position: static; width: 100%; left: auto; margin: 0; }
	.about-block__caption { padding: 10px 0 0; font-size: 12px; }

	.about-block__image-list { flex-wrap: wrap; gap: 6px; margin-top: 45px; }
	.about-block__image-item { width: calc((100% - 6px) / 2); }

	/* 武将 (last-about-article) */
	.last-about-article .last-about-inner{width: 100%; margin: 0 auto; padding: 0;}
	.last-about-article .about-block__lead { display: block; padding: 42px 5% 48px; }
	.last-about-article .about-block__lead .main-img { width: 100%; }
	.last-about-article .about-block__lead .main-img .about-block__title { margin-bottom: 33px; text-align: center; line-height: 115.4%; }
	.last-about-article .about-block__lead .about-block__body { width: 100%; padding: 35px 0 0; }
	.last-about-article .about-block__lead .about-block__body .about-block__text { line-height: 169%; }
	.last-about-article .about-block__lead .main-img .about-block__main-image figcaption {font-size: 10px; padding: 13px 0 0;}

/* --------------------------------------------------------------------------- precinct */
	#precinct { padding: 0 0 22px; }

	.precinct__map { margin: 0 0 25px; }
	.precinct__body { display: block; margin-bottom: 50px; }
	.precinct__title { width: 100%; padding: 0 0 18px; font-size: 26px; text-align: center; line-height: 139%;}
	.precinct__text-box { width: 100%; }
	.precinct__text { font-size: 16px; line-height: 169%; }

	.precinct-gallery + .precinct-gallery { padding-top: 35px; }
	.precinct-gallery__title { margin-bottom: 24px; font-size: 22px; line-height: 118.2%;}
	.precinct-gallery__list { gap: 10px; }
	.precinct-gallery__item { width: calc((100% - 20px) / 3); }
	.precinct-gallery__caption { margin-top: 3px; font-size: 12px; line-height: 142%; }
	.precinct-gallery + .precinct-gallery .precinct-gallery__title { font-size: 14px; line-height: 122%; margin-bottom: 16px;}
}