@charset "UTF-8";

/* mv
---------------------------------------------------------------------------- */
#stage.u-mv-wrap{
    background: url("../img/works/stage/mv-img.jpg") no-repeat;
	    background-size: cover;
}
#exhibition.u-mv-wrap{
    background: url("../img/works/exhibition/mv-img.jpg") no-repeat;
	    background-size: cover;
}
#festival.u-mv-wrap{
    background: url("../img/works/festival/mv-img.jpg") no-repeat;
	    background-size: cover;
}
#election-office.u-mv-wrap{
    background: url("../img/works/election-office/mv-img.jpg") no-repeat;
	    background-size: cover;
}
#ceremony.u-mv-wrap{
    background: url("../img/works/ceremony/mv-img.jpg") no-repeat;
	    background-size: cover;
}
#shinji.u-mv-wrap{
    background: url("../img/works/shinji/mv-img.jpg") no-repeat;
	    background-size: cover;
}


/* about
---------------------------------------------------------------------------- */
.works-about{padding:60px 0;}
.works-about .con-inner{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.about-image{width:48%;border-radius: 10px}
.about-image img{border-radius: 10px}
.about-desc{width:48%;}
.about-sub{
    font-weight: 700;
    font-size:1.8rem;
}
.about-ttl{
    font-size:2.6rem;
    font-weight: 700;
    color:#237BD0;
}

@media screen and (max-width: 768px){
    .works-about{padding:7vw 0 7vw;}
    .about-image{width:100%;}
    .about-desc{width:100%;}
    .about-sub{
        font-size:3.7vw;
        margin-top:3vw;
    }
    .about-ttl{
        font-size:5vw;
    } 
}

/* detail
---------------------------------------------------------------------------- */
.works-detail{padding:60px 0;}
.detail-image{
    background: #fff;
    text-align: center;
    border-radius: 10px;
	position: relative;
}

.detail-image .item-link {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #237BD0;
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	position: absolute;
	transition: 0.3s ease-in-out;
}
.detail-festival .item-link {
	background: #fff;
	color: #237BD0;
}
@media screen and (min-width: 769px){
	
	.detail-image .item-link:hover {
		background: #fff;
		color: #237BD0;
	}
	.detail-festival .item-link:hover {
		background: #237BD0;
		color: #fff;
	}
}

/*式典*/
.detail-ceremony .item-link-01 { top: 112px; left: 105px;}
.detail-ceremony .item-link-02 { top: 333px; left: 287px;}
.detail-ceremony .item-link-07 { top: 75px; right: 245px;}
.detail-ceremony .item-link-08 { top: 55px; left: 445px;}
.detail-ceremony .item-link-09 { top: 385px; right: 153px;}


/*選挙事務所*/
.detail-election-office .item-link-01 { top: 90px; right: 154px;}
.detail-election-office .item-link-02 { top: 290px; left: 400px;}
.detail-election-office .item-link-08-01 { top: 185px; right: 345px;}
.detail-election-office .item-link-08-02 { top: 50px; left: 200px;}
.detail-election-office .item-link-09-01 { top: 220px; left: 68px;}
.detail-election-office .item-link-09-02 { top: 625px; right: 250px;}

/*展示会*/
.detail-exhibition .item-link-02 { top: 368px; left: 503px;}
.detail-exhibition .item-link-03 { top: 115px; left: 120px;}
.detail-exhibition .item-link-04 { top: 405px; left: 211px;}
.detail-exhibition .item-link-05 { top: 30px; right: 380px;}
.detail-exhibition .item-link-08 { top: 165px; right: 265px;}

/*縁日・お祭り*/
.detail-festival .item-link-01 { top: 447px; right: 360px;}
.detail-festival .item-link-02 { top: 300px; right: 404px;}
.detail-festival .item-link-05 { top: 145px; left: 400px;}
.detail-festival .item-link-09 { top: 205px; right: 275px;}

/*神事*/
.detail-shinji .item-link-01 { top: 84px; left: 272px;}
.detail-shinji .item-link-06 { top: 196px; left: 342px;}
.detail-shinji .item-link-08 { top: 290px; left: 85px;}
.detail-shinji .item-link-09 { top: 440px; right: 325px;}

/*ステージイベント*/
.detail-stage .item-link-01 { top: 332px; right: 92px;}
.detail-stage .item-link-02 { top: 245px; left: 422px;}
.detail-stage .item-link-04 { top: 152px; left: 326px;}
.detail-stage .item-link-05 { top: 100px; right: 371px;}
.detail-stage .item-link-08 { top: 47px; left: 441px;}
.detail-stage .item-link-09 { top: 276px; left: 206px;}


.detail-image img{ width:100%; height: auto; border-radius: 10px;}
.detail-item{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:20px;
}
.detail-item:after {
    content: "";
    width: calc((100% - 20px*2)/3);
}
.detail-item a{
    width:calc((100% - 20px*2)/3);
    background: #fff;
    border-radius: 10px;
    border:2px solid #237BD0;
    color:#237BD0;
    font-weight: 700;
    display: flex;
    align-items: center;
    height:60px;
    line-height: 60px;
    font-size:1.8rem;
    justify-content: flex-start;
    padding:0 20px;
    position: relative;
    margin-top:20px;
}
.detail-item a::after{
    content:'';
    position: absolute;
    background: url("../img/common/arrow-b.svg") no-repeat center;
    background-size: contain;
    width:10px;
    height:20px;
    right:20px;
}
.detail-item a span{
    width:28px;
    height:28px;
    border-radius: 50%;
    background: #237BD0;
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:10px;
}

@media screen and (max-width: 768px){
    .works-detail{padding:7vw 0;}

	.detail-image .item-link {
		width: 5vw;
		height: 5vw;
		font-size: 3.5vw;
		position: absolute;
	}

	/*式典*/
	.detail-ceremony .item-link-01 { top: 8vw; left: 8vw;}
	.detail-ceremony .item-link-02 { top: 26vw; left: 24vw;}
	.detail-ceremony .item-link-07 { top: 7vw; right: 20vw;}
	.detail-ceremony .item-link-08 { top: 4vw; left: 35vw;}
	.detail-ceremony .item-link-09 { top: 30vw; right: 12vw;}


	/*選挙事務所*/
	.detail-election-office .item-link-01 { top: 7vw; right: 10vw;}
	.detail-election-office .item-link-02 { top: 22vw; left: 32vw;}
	.detail-election-office .item-link-08-01 { top: 15vw; right: 28vw;}
	.detail-election-office .item-link-08-02 { top: 3vw; left: 16vw;}
	.detail-election-office .item-link-09-01 { top: 17vw; left: 4vw;}
	.detail-election-office .item-link-09-02 { top: 50vw; right: 20vw;}
	
	/*展示会*/
	.detail-exhibition .item-link-02 { top: 30vw; left: 42vw;}
	.detail-exhibition .item-link-03 { top: 9vw; left: 9vw;}
	.detail-exhibition .item-link-04 { top: 34vw; left: 17vw;}
	.detail-exhibition .item-link-05 { top: 3vw; right: 31vw;}
	.detail-exhibition .item-link-08 { top: 14vw; right: 20vw;}

	/*縁日・お祭り*/
	.detail-festival .item-link-01 { top: 36vw; right: 28vw;}
	.detail-festival .item-link-02 { top: 24vw; right: 32vw;}
	.detail-festival .item-link-05 { top: 11vw; left: 32vw;}
	.detail-festival .item-link-09 { top: 16vw; right: 21vw;}

	/*神事*/
	.detail-shinji .item-link-01 { top: 6vw; left: 21vw;}
	.detail-shinji .item-link-06 { top: 15vw; left: 28vw;}
	.detail-shinji .item-link-08 { top: 23vw; left: 6vw;}
	.detail-shinji .item-link-09 { top: 35vw; right: 26vw;}

	/*ステージイベン*/
	.detail-stage .item-link-01 { top: 26vw; right: 7vw;}
	.detail-stage .item-link-02 { top: 19vw; left: 34vw;}
	.detail-stage .item-link-04 { top: 12vw; left: 25vw;}
	.detail-stage .item-link-05 { top: 7vw; right: 29vw;}
	.detail-stage .item-link-08 { top: 3vw; left: 35vw;}
	.detail-stage .item-link-09 { top: 22vw; left: 16vw;}


    .detail-item{margin-top:3vw;}
    .detail-item a{
        width:100%;
        height:12vw;
        line-height: 12vw;
        font-size:4vw;
        padding:0 3vw;
    }
    .detail-item a+a{margin-top:3vw;}
    .detail-item a span{
        width:7vw;
        height:7vw;
        margin-right:2vw;
    }
    .detail-item a::after{
        width:2.5vw;
        height:5vw;
        right:5vw;
    }
}


/* works-list
---------------------------------------------------------------------------- */
.works-list{justify-content:center;}
.works-list li{margin-right:20px;}
.works-list li:nth-of-type(3),
.works-list li:nth-of-type(5){margin-right:0;}

@media screen and (max-width: 768px){
    .works-list{justify-content:center;}
    .works-list li:nth-of-type(odd){margin-right:3vw;}
    .works-list li:nth-of-type(even){margin-right:0;}
}

/* contact
---------------------------------------------------------------------------- */
#contact.sec-wrap {padding: 80px 0;}

@media screen and (max-width: 768px){
    #contact.sec-wrap {
        padding: 12vw 0;
    }
}