@charset "utf-8";

:root{
	--color-bg:#F5F5F5;
	--color-author:#917C4A;
}
body{
	font-family: 'Noto Serif JP', serif;
}
.box.wide{
    max-width: 1600px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.box.semiwide{
    max-width: 1200px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
h2{
	font-size: 10rem;
	line-height: 1;
}
h2:before,
h2:after{
	content:none;
}
h3{
	font-size: 4.4rem;
    padding: 0;
    text-align: left;
    line-height: 1;
	letter-spacing: 0;
}
h3:after {
    content:none;
}
section{
	margin-top:30rem;
}
.flex{
	align-items: flex-start;
}
.en{
	font-size:11rem;
	color:#333;
	opacity: 0.05;
}
.overview .spec{
	font-weight: 600;
	text-align: left;
}
.overview .spec li{
	display: inline-block;
	margin-right:1rem;
}
.overview .description{
	margin-top:3rem;
}
.author{
	border:1px solid var(--color-author);
	padding:3rem;
	color:var(--color-author);
}
.author .name{
	font-weight: 700;
	font-size:1.8rem;
}
.author .name .year{
	font-size:1.6rem;
	font-weight: 400;
    display: inline-block;
}
.author.yoko{
	flex-wrap: nowrap;
	align-items: center;
	margin-top:7rem;
}
.author.yoko .name{
	width:100px;
	text-align: center;
}
.author.yoko .content{
	width:calc(100% - 100px);
	border-left:1px solid var(--color-author);
	padding-left:2rem;
	margin-left: 2rem;
}
.author.tate{
	margin-top:3rem;
}
.author.tate .name{
	border-bottom:1px solid var(--color-author);
	margin-bottom: 2rem;
    padding-bottom: 1rem;
}
.author.tate .year{
	margin-left: 2rem;
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
	/*SP*/
	h2{
		writing-mode: vertical-lr;
		font-size: 6rem;
	}
	.box.wide{
		width: 100%;
	}
	.box.semiwide{
		width: 100%;
	}
	.en{
		font-size:2.4rem;
		line-height: 1.8;
	}
	.author.yoko{
		width:90%;
		flex-wrap: wrap;
	}
	.author.yoko .name {
		width: auto;
		margin-bottom: 1.5rem;
		text-align: left;
		border-bottom: 1px solid var(--color-author);
		padding-bottom: 1rem;
	}
	.author.yoko .year {
		margin-left:2rem;
	}
	.author.yoko .content {
		width: 100%;
		border-left: none;
		padding-left: 0;
		margin-left: 0;
	}
}

/*--------------------------------------------
    Main
--------------------------------------------*/
#main{
	margin-top:0;
}
#main .main_wrap{
	background:url(../../../files/img/bg_guide_proud.jpg);
	background-size:cover;
	background-position:center;
}
h1{
	width: 10%;
	margin-left: 7%;
}
#main .index {
	margin-left: 7%;
	}
#title{
	fill: #000;
	min-width:130px;
}
#main .index li {
	width: 100%;
	color: #000;
	text-align: left;
	margin: 1rem 0;
}
#main .index li a{
	filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.8));
	text-align: right;
	display: inline-block;
	color: #000;
	position: relative;
}
#main .index li a::before{
    background:#000;
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
	/*SP*/
	#main .main_wrap{
		background:url((../../../files/img/bg_guide_proud.jpg);
		background-size:cover;
		background-position:center;
	}
	h1{
		width: 25%;
	}

	#main .index li {
		text-align: center;
	}
}

/*--------------------------------------------
    Fujin-raijin-byobu
--------------------------------------------*/
#fujin-raijin-byobu{
    position: relative;
    margin-top: 30rem;
}
#fujin-raijin-byobu:before,
#fujin-raijin-byobu .box.wide.flex:before{
    content: "";
    display: inline-block;
    background-color: var(--color-bg);
    height: 90rem;
    position: absolute;
    z-index: -3;
	top:0;
}
#fujin-raijin-byobu:before{
    width: 50%;
}
#fujin-raijin-byobu .box.wide.flex:before{
    width: 80%;
}
#fujin-raijin-byobu .box.wide.flex.author:before{
	content:none;
}
#fujin-raijin-byobu .title{
    position: absolute;
    top: 18rem;
    margin-bottom: 0;
    width: 100%;
    display: inherit;
    left: -1rem;
}
#fujin-raijin-byobu .title h2{
    margin-bottom:0;
}
#fujin-raijin-byobu .title .en{
    position: absolute;
    top: -11.5rem;
    margin-bottom: 0;
    line-height: 1.5;
    z-index: -1;
    left: -3rem;
}
#fujin-raijin-byobu .fujin,
#fujin-raijin-byobu .raijin{
	width: 52.5%;
    max-width: 1000px;
    height: 600px;
}
#fujin-raijin-byobu .fujin{
    z-index: -1;
    margin-left: 47.5%;
    margin-top: 5rem;
}
#fujin-raijin-byobu .raijin{
    z-index: -2;
    margin-right: 47.5%;
    margin-left: 0;
    margin-top: -20rem;
}
#fujin-raijin-byobu .fujin img,
#fujin-raijin-byobu .raijin img{
	object-fit: cover;
    height: 100%;
    width: 100%;
}
#fujin-raijin-byobu .overview{
	position: absolute;
    bottom: 0;
    right: 5%;
    width: 30%;
}


@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#fujin-raijin-byobu:before{
		content:none;
	}
	#fujin-raijin-byobu .box.wide.flex:before {
		width: 100%;
		height: calc(100% - 18rem);
		top: 12rem;
	}
	#fujin-raijin-byobu .title {
		position: absolute;
		top: 0;
		margin-bottom: 0;
		width: auto;
		display: inherit;
		left: calc(12.5% - 3rem);
	}
	#fujin-raijin-byobu .fujin,
	#fujin-raijin-byobu .raijin{
		width: 87.5%;
		height: 500px;
	}
	#fujin-raijin-byobu .fujin{
		z-index: -1;
		margin-left: 12.5%;
		margin-top: 6rem;
	}
	#fujin-raijin-byobu .raijin{
		z-index: -2;
		margin-right: 12.5%;
		margin-left: 0;
		margin-top: -3rem;
		position: relative;
		order: 3;
	}
	#fujin-raijin-byobu .raijin .en{
		position: absolute;
		bottom: 2.4rem;
		right: 1.6rem;
		writing-mode: vertical-rl;
		color: #fff;
		opacity: 1;
	}
	#fujin-raijin-byobu .overview {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top:-3rem;
		position: static;
		order: 2;
		background-color: #fff;
		padding: 3rem;
	}

}


/*--------------------------------------------
    Soryuzu
--------------------------------------------*/
#soryuzu{
    position: relative;
}
#soryuzu:before{
    content: "";
    display: inline-block;
    background-color: var(--color-bg);
    width: 50%;
	height: calc(100% - 10rem);
    position: absolute;
    z-index: -1;
    top: 13.5rem;
	right:0;
}
#soryuzu .box.wide{
    max-width: 1600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	align-items: stretch;
}
#soryuzu .box.wide:before{
    content: "";
    display: inline-block;
    background-color: var(--color-bg);
    width: 80%;
	height: calc(100% - 10rem);
    margin-left: 20%;
    position: absolute;
    z-index: -1;
    top: 13.5rem;
}
#soryuzu .image{
	width:60%;
	height:1000px;
}
#soryuzu .image img{
	object-fit: cover;
    height: 100%;
}
#soryuzu .text_wrap{
	width:35%;
	margin-left:2.5%;
	margin-right:2.5%;
}
#soryuzu .title{
	position:relative;
}
#soryuzu .title h2{
	text-align: right;
    padding-top: 8rem;
}
#soryuzu .title .en{
    text-align: right;
    position: absolute;
    top: -2.75rem;
    right: 0;
    line-height: 1.5;
}
#soryuzu .overview{
	margin-top:15rem;
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#soryuzu .image{
		width:95%;
		height:100%;
	}
	#soryuzu .text_wrap {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
	#soryuzu .title {
		position: absolute;
		top: -6rem
	}
	#soryuzu .title h2 {
		padding-top: 0rem;
		margin-bottom: 0;
	}
	#soryuzu .title h2 span{
		color:#fff;
	}
	#soryuzu .title .en{
		opacity: 1;
		writing-mode: vertical-lr;
		color: #fff;
		position:relative;
		top: 0;
		margin: 2rem auto 0;
	}
	#soryuzu .overview {
		margin-top: 5rem;
	}
}



/*--------------------------------------------
    Fusumae
--------------------------------------------*/
#fusumae{
	background-color:#ACA28B;
	position:relative;
	padding-bottom: 10rem;
}
#fusumae:before{
	content: "";
    background-image: url(../img/bg_fusumae.jpg);
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: calc(100% + 20rem);
    margin-top: -20rem;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.08;
}
#fusumae .main_img.box.wide{
	width:97.5%;
	margin-left: 2.5%;
	padding-right: 0%;
	display: block;
}
#fusumae .main_img.box.wide img{
	margin-left: 10%;
    width: 90%;
}
#fusumae .title.box.wide{
	padding-left:0;
	padding-right: 0%;
}
#fusumae .box.wide{
	width:95%;
}
#fusumae .box.wide > ul{
	padding-left:10%;
	padding-right: 10%;
}
#fusumae .title h2{
    text-align: right;
    transform: translateY(-5rem);
	margin-bottom: 5rem;
}
#fusumae .title .en{
	writing-mode: vertical-lr;
    color: #fff;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: -0%;
    line-height: 1;
	white-space: nowrap;
}
#fusumae .picture{
	margin-top: 10rem;
}
#fusumae .picture img{
	width:45%;
	margin-right:5%;
}
#fusumae .overview{
	width:50%;
	color:#fff;
}
#fusumae .overview .spec{
	margin-top: 3rem;
}
#fusumae .author.box.wide{
	padding: 3rem;
    width: 100%;
	border-color: #fff;
    color: #fff;
}
#fusumae .author.box.wide .content {
    border-color:#fff;
}

@media screen and (min-width:1600px) {
    /*Main_img*/
	#fusumae .main_img.box.wide{
		width: 95%;
		margin-left: auto;
		display: block;
	}
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#fusumae .title.box.wide {
		position: relative;
		width:90%;
	}
	#fusumae .title h2 {
		margin-left: auto;
		white-space: pre;
	}
	#fusumae .title .en{
		writing-mode: initial;
		opacity: 1;
		bottom: 0;
		height: auto;
		top: initial;
		transform: translateY(-5rem);
		text-align: right;
		right: 8rem;
		line-height: 1.5;
	}
	#fusumae .box.wide {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
	#fusumae .main_img.box.wide{
		display: none;
	}
	#fusumae .picture:first-child {
		margin-top: 0;
	}
	#fusumae .picture:nth-child(odd) img{
		margin-left: 5%;
	}
	#fusumae .picture img {
		width: 95%;
		margin-right: 0%;
	}
	#fusumae .overview {
		width: 90%;
		margin-left:auto;
		margin-right:auto;
		margin-top: 5rem;
	}
	#fusumae .author.box.wide {
		width:90%;
	}
	#fusumae .author.yoko .name {
		border-color: #fff;
	}
}


/*--------------------------------------------
    Karakoyugizu
--------------------------------------------*/
#karakoyugizu{
	background-color: #E6E3DC;
	margin-top: 0;
	padding-bottom: 10rem;
}
#karakoyugizu .title{
	margin-top:20rem;
	position:relative;
	width: 100%;
}
#karakoyugizu .title h2{
	text-align: left;
}
#karakoyugizu .title .en{
	color:#fff;
	position: absolute;
    line-height: 1.2;
    top: -8rem;
    right: 0;
    text-align: right;
	opacity: 0.2;
}
#karakoyugizu .flex.wrap{
	position:relative;
	width: 100%;
}
#karakoyugizu .overview{
	width:33%;
    z-index: 1;
    position: absolute;
	bottom: 0;
}
#karakoyugizu .image{
	width:70%;
	margin-left:30%;
	line-height: 1;
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#karakoyugizu .title{
		width: 90%;
		margin-left:auto;
		margin-right:auto;
		margin-top: 10rem;
	}
	#karakoyugizu .title h2{
		margin-bottom: 0;
		z-index: 1;
	}
	#karakoyugizu .title .en{
		opacity: 1;
		line-height: 1.8;
		top: initial;
		bottom:12rem;
	}
	#karakoyugizu .overview{
		width:90%;
		margin-left:auto;
		margin-right:auto;
		line-height:1.8;
		position: relative;
		order:2;
		margin-top: 5rem;
	}
	#karakoyugizu .image{
		width:100%;
		margin-left:0%;
		order:1;
		margin-top: -10rem;
	}
	#karakoyugizu .author{
		margin-left:auto;
		margin-right:auto;
	}
}


/*--------------------------------------------
    Votive offering
--------------------------------------------*/
#votive-offering{
	background-image: url(../img/bg_votive-offering.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0;
}
#votive-offering .title h2{
	padding-top: 10rem;
}
#votive-offering .title .en{
	writing-mode: vertical-lr;
    line-height: 1.2;
	white-space: nowrap;
	position:absolute;
	top: 30rem;
	left: 0;
}
#votive-offering > .box.semiwide.flex{
	justify-content: space-between;
	padding-left: calc(11rem + 5%);
}
#votive-offering .shosho{
	justify-content: space-between;
}
#votive-offering .overview{
	margin-top:5rem;
}
#votive-offering .shosho .overview,
#votive-offering .shosho .author,
#votive-offering .funade,
#votive-offering .fujin-raijin{
	width:45%;
}
#votive-offering .spec{
	margin-top:3rem;
}
#votive-offering .shosho .author{
	margin-top:5rem;
}
#votive-offering .funade,
#votive-offering .fujin-raijin{
	margin-top:15rem;
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#votive-offering .title{
		justify-content: center;
		display: flex;
	}
	#votive-offering .title .en {
		top: auto;
		left: auto;
		right: calc(50% + 4rem);
		bottom: 10rem;
		opacity: 1;
	}
	#votive-offering > .box.semiwide.flex {
		padding-left: 0;
		width:90%;
	}
	#votive-offering .shosho .overview,
	#votive-offering .shosho .author,
	#votive-offering .funade,
	#votive-offering .fujin-raijin{
		width:100%;
	}
}