@charset "utf-8";


@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
	/*SP*/
	.top_image{
		margin-bottom:5rem;
		width: 200%;
		margin-left: -50%;
	}
}



/*--------------------------------------------
    Around
--------------------------------------------*/
#around{
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
}


/*--------------------------------------------
    Main
--------------------------------------------*/
#main .main_wrap{
	background:url(../../../files/img/bg_guide_around.jpg);
	background-size:cover;
	background-position:center;
}
/* #main .gradient{
	background: linear-gradient(to right,#fff, #00aa00 60%, #003c00);
} */
h1{
    width: 9%;
    margin-left: 84%;
}
#title{
	fill: #fff;
	filter: drop-shadow(0 0 5px #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_around.jpg);
		background-size:cover;
		background-position:center;
	}
	/* #main .gradient{
		background: linear-gradient(to right,#fff, #00aa00 40%, #003c00);
	} */
	h1{
		width: 30%;
	}
}

/*--------------------------------------------
    Guide
--------------------------------------------*/
#guide{
	padding-top:20rem;
	padding-bottom:10rem;
	background:url(../../../common/img/bg_washi.jpg);
}
#guide .movie{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
#guide .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#guide .read{
	margin: 5rem 0;
}
#guide .contents {
    margin-top: 20rem;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
#guide .contents ul{
	justify-content: space-between;
}
#guide .contents li{
	width:100%;
	/* margin-bottom:8rem; */
	margin-bottom:20rem;
	position:relative;
}
#guide .contents li.right img{
	width:70%;
	/* margin-bottom:8rem; */
}
#guide .contents li.left img{
	width:70%;
	/* margin-bottom:8rem; */
	margin-left:30%;
}
#guide .contents li .text{
    width: 30%;
    /* margin-bottom: 8rem; */
	position: absolute;
    top: 0rem;
    padding: 0rem 4rem 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
	/* height: 100%; */
	top: 50%;
    transform: translateY(-50%);
}
/* #guide .contents li .text{
    width: 35%;
    margin-bottom: 8rem;
    position: absolute;
	bottom: -5rem;
	background: rgba(255,255,255,0.9);
    padding: 4rem;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
} */
#guide .contents li.right .text{
    right: 0%;
}
#guide .contents li.right .text div{
    text-align:left;
}
#guide .contents li.right .text div img{
    width: 140%;
    margin-top: 3rem;
    margin-left: -40%;
}
#guide .contents li.left .text{
    left: 0%;
}
#guide .contents .title{
    font-size: 4rem;
    margin: 0rem auto 5rem;
    justify-content: space-between;
    writing-mode: vertical-lr;
    line-height: 1;
}
#guide .contents .text div:before{
	content:"";
	display:inline-block;
	background:#ccc;
	height:1px;
	width: 110%;
	margin-bottom: 2.5rem;
}
#guide .contents .right .text div:before{
	margin-left: -10%;
}
#guide .contents .left .text div:before{
    margin-right: -10%;
}
#guide .contents .right .title{
	text-align:left;
}
#guide .contents .left .title{
	text-align:right;
}
#guide .contents .undisclosed:after{
	content: "拝観不可";
    font-size: 1.4rem;
    padding: 0.5rem 0.75rem;
    background: #b01c24;
    color: #fff;
    border-radius: 3px;
	line-height: 1;
	font-family:sans-serif;
	margin-top:2rem;
	/* vertical-align: middle; */
}
.link{
	align-items: center;
	justify-content :flex-end;
	margin-top:0.5rem;
}
.link a{
	color:#607f00;
}
.link:after{
	content: "";
    display: inline-block;
    background: url(../../../common/img/img_arrow_g.svg);
    width: 22px;
	height: 4px;
	margin-left:0.5rem;
}

@media screen and (max-width:799px) {
	/*SP-Tablet*/
	#guide .contents .title{
		writing-mode: initial;
		margin: 3rem 0;
		display: flex;
		align-items: center;
	}
	#guide .contents li.right img {
		width: 100%;
	}
	#guide .contents .undisclosed:after {
		margin:0 2rem;
	}
	#guide .contents li.left img {
		width: 100%;
		margin-left: 0%;
	}
	#guide .contents li .text {
		width: 100%;
		position: static;
		height: auto;
	}
	#guide .contents li .text div{
		width: 100%;
	}
    #guide .contents li.right .text div img{
        width:80%;
        margin-left:10%;
    }
}
@media screen and (max-width:479px) {
	/*SP*/
	#guide .read{
		width:90%;
		margin-left:5%;
	}
	#guide .contents {
		width:90%;
		margin-left:5%;
	}
	#guide .contents li{
		width:100%;
		margin-bottom: 5rem;
	}
	#guide .contents li.right img{
		width:100%;
		margin-bottom:0;
	}
	#guide .contents li.left img{
		width:100%;
		margin-bottom:0;
		margin-left:0;
	}
	#guide .contents li .text{
	    width: 100%;
	    margin-bottom: 8rem;
	    position: static;
		bottom: -5rem;
		/* background: rgba(255,255,255,0.9); */
		padding: 0;
		height: auto;
		/* box-shadow: 5px 5px 5px rgba(0,0,0,0.1); */
		transform: translateY(0);
	}
	#guide .contents li.right .text{
	    right: 0;
	}
	#guide .contents li.left .text{
	    left: 0;
	}
	#guide .contents .title{
		text-align:left;
		margin: 2rem 0;
		writing-mode: initial;
		font-size: 3rem;
	}
	#guide .contents .undisclosed:after{
		margin-left:2rem;
		vertical-align: middle;
	}
	#guide .contents .text div:before{
		width: 100%;
		margin-bottom: 1.5rem;

	}
	#guide .contents .right .text div:before{
		margin-left: 0%;
	}
	#guide .contents .left .text div:before{
		margin-right: 0%;
	}
    #guide .contents li.right .text div img{
        width: 100%;
        margin-top: 2rem;
        margin-left: 0;
    }
}


/*--------------------------------------------
    Caution
--------------------------------------------*/
#caution{
	background:#fafafa;
	padding: 13rem 0;
}
#caution .box{
    background: #fff;
    padding: 5rem;
    box-sizing: border-box;
}
#caution .box_s{
margin-top: 5rem;
}
#caution li{
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	margin-bottom:2rem;
}
#caution li:before{
	content:"";
	background:url(../img/icn_exclamation.svg) no-repeat;
	display: inline-block;
	width:40px;
	height:40px;
	margin-right:2rem;
}
#caution li span{
	color:#c80000;
	font-weight:bold;
}
#caution li p{
    width: calc(100% - 63px);
}


@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
	/*SP*/
	#caution .box{
		width:90%;
		padding: 5%;
	}
	#caution .box_s {
		width: 100%;
	}
	#caution li {
		align-items: flex-start;
	}
	#caution li:before{
		width:30px;
		height:30px;
		margin-right:1rem;
	}
	#caution .box_s p {
		width: calc(100% - 40px);
	}
}

/*--------------------------------------------
    Tacchu
--------------------------------------------*/
#tacchu{
	margin-top: 20rem;
	margin-bottom: 20rem;
}
#tacchu li{
	justify-content: space-between;
	margin-bottom:5rem;
	align-items: flex-start;
}
#tacchu li img{
	width:16.5%
}
#tacchu li div{
	width:80%
}
#tacchu li .name{
	font-weight:bold;
	margin-bottom:0.5rem;
}
#tacchu li .text{
	font-size:1.4rem;
}
#tacchu li a{
	font-size:1.4rem;
	border: 1px solid #000;
    padding: 0.75rem 5rem 0.75rem 2rem;
}
#tacchu li a:after{
	content: "";
    display: inline-block;
    background: url(../../../common/img/img_arrow_k.svg) no-repeat;
    width: 22px;
	height: 6px;
	margin-left:1rem;
	vertical-align: middle;
}
#tacchu li .official{
	text-align:right;
	margin-top:1rem;
}

@media screen and (max-width:799px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
	/*SP*/
	#tacchu {
		width: 90%;
		margin-left: 5%;
	}
	#tacchu li{
		align-items: center;
	}
	#tacchu li img{
		width:50%
	}
	#tacchu li div{
		width:100%;
		margin-top:1rem;
	}
	#tacchu li .name{
		width:45%;
		margin-bottom:0;
		line-height: 1;
		text-align:center;
	}
	#tacchu li .official {
		text-align: center;
	}
	#tacchu li a{
		display: inline-block;
		width:100%;
	}
}