@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

img{width:100%;}
main *{box-sizing: border-box;}
main{
	font-family: "Noto Sans JP", sans-serif;
	padding:0 30px;
}


main h1{
	font-size:36px;
	font-weight:200;
	letter-spacing:.1em;
	padding-top:30px;
}
main h2{
	font-size:30px;
	font-weight:200;
	letter-spacing:.2em;
	padding:30px 0 10px .2em;
}

section{padding:60px 0 40px;}


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


.intro_main{
	margin: auto;
	max-width:1200px;
	text-align:left;
}

.intro_term{
	padding-bottom:25px;
}
.intro_term p{
	color:#9B0001;
}

.intro_term_detail{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding:15px 0 8px;
}
.intro_term_detail span{display:block;}
.intro_term_detail span:nth-child(1){
	background-color:#333;
	color:#fff;
	font-size:80%;
	letter-spacing:0.1em;
	padding:2px 10px 2px calc(10px + 0.1em);
}
.intro_term_detail span:nth-child(2){
	padding:0 10px;
}

.intro_term p{
	font-size:90%;
}

.scope_text p{
	padding-bottom: 20px;
}

.scope_text ul{
	display: flex;
	flex-wrap: wrap;
	gap:4px;
	justify-content: center;
	margin: auto;
	max-width:800px;
}
.scope_text ul li{
	display: block;
	padding:2px 8px;
	list-style:none;
	border:1px solid rgba(0,0,0,.15);
	border-radius:5px;
}

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

.intro_text p{padding-bottom:15px;}

.intro_text a{transition:.2s}

@media only screen and (min-width: 768px) {
	.intro_text a:hover{opacity:.5}
}

/*-----------------------*/
.photo_wrap{
	margin: auto;
	max-width:1200px;
	display: flex;
	flex-wrap: wrap;
}
.photo_wrap a{
	line-height:0;
	width:calc(100% / 6);
	transition: .2s;
}

@media only screen and (min-width: 768px) {
	.photo_wrap a:hover{
		opacity:.5;
	}
}




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

.flyer_wrap{
	margin: auto;
	max-width:1200px;
	display: flex;
	flex-wrap: wrap;
}
.flyer_wrap a{
	line-height:0;
	width:calc(100% / 6);
	transition: .2s;
}

@media only screen and (min-width: 768px) {
	.flyer_wrap a:hover{
		opacity:.5;
	}
}


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

.web_intro{
	margin: auto;
	max-width:1600px;
	padding-bottom:30px;
}

.web_wrap{
	margin: auto;
	max-width:1300px;
	display: flex;
	flex-wrap: wrap;
	gap:10px 1%;
	padding-bottom:30px;
}
.web_wrap img{
	width:calc((100% - 3%)/ 4);
}

.web_long_wrap{
	margin: auto;
	max-width:800px;
	display: flex;
	flex-wrap: wrap;
	gap:10px;
	padding-bottom:30px;
}
.web_long_wrap img{
	width:calc((100% - 30px)/ 4);
}


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

.cd_design_img{
	margin: auto;
	max-width:1100px;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}

.cd_design_img > div:nth-child(1){
	width:calc(47% - 20px);
}
.cd_design_img > div:nth-child(2){
	width: 53%;
}

.cd_inner_img{
	margin: auto;
	max-width:1300px;
	display: flex;
	flex-wrap: wrap;
	padding-bottom:30px;
}
.cd_inner_img > div{width:50%;}

.cd_web_wrap{
	margin: auto;
	max-width:1100px;
	display: flex;
	flex-wrap: wrap;
	gap:1%;
	padding-bottom:30px;
}
.cd_web_wrap img{
	width:calc((100% - 4%)/ 5);
	border:1px solid rgba(0,0,0,.05);
}

.cd_goods_img{
	margin: auto;
	max-width:1000px;
	display: flex;
	flex-wrap: wrap;
}

.cd_goods_img > div{
	width:50%;
}



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


.goods_wrap{
	margin: auto;
	max-width:800px;
	display: flex;
	flex-wrap: wrap;
}

.goods_wrap div{width:50%;line-height:0;margin: auto 0;}
.goods_wrap div.one{width:100%;}


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

.youtube iframe{
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
}

.movie_wrap{
	margin: auto;
	max-width:1200px;
	display: flex;
	flex-wrap: wrap;
	gap:10px;
}

.movie_inner{
	width:calc((100% - 10px)/ 2);
}



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

.project_box h2{
	padding-bottom:0;
	line-height:1.2em;
}
.project_box h3{
	font-size:22px;
	font-weight:200;
	letter-spacing:.1em;
	padding-bottom:10px;
}

.project_intro{
	margin: auto;
	max-width:1200px;
	text-align:left;
	padding:20px 0 ;
}
.project_intro p{
	padding-bottom:10px;
}

.project_rakugolady_wrap{
	margin: auto;
	max-width:1100px;
	display: flex;
	flex-wrap: wrap;
	gap:1%;
	padding-bottom:30px;
}
.project_rakugolady_wrap img{
	width:calc((100% - 4%)/ 5);
}

.project_imgwrap{
	margin: auto;
	max-width:1200px;
	display: flex;
	flex-wrap: wrap;
}
.project_imgwrap a{
	line-height:0;
	width:calc(100% / 4);
	transition: .2s;
}
@media only screen and (min-width: 768px) {
	.project_imgwrap a:hover{
		opacity:.5;
	}
}


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

.event_box h2{
	padding-bottom:0;
	line-height:1.2em;
}
.event_box h3{
	font-size:22px;
	font-weight:200;
	letter-spacing:.1em;
	padding:0 0 10px;
}

.event_box h4{
	font-size:18px;
	font-weight:400;
	letter-spacing:.1em;
	padding:40px 0 10px;
}


.event_flyer_img{
	margin: auto;
	max-width:1000px;
	display: flex;
	flex-wrap: wrap;
}
.event_flyer_img > div{width:50%;}

.event_ticket_img{
	margin: auto;
	max-width:800px;
}

.event_webad_img{
	margin: auto;
	max-width:800px;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}
.event_webad_img > div{
	margin-top:auto;
	width:calc((100% - 20px)/ 2);}

.event_goods_img{
	margin: auto;
	max-width:800px;
}

.event_goods_img > div{
	line-height: 0;
}

.event_goods_img.triple{
	max-width:1400px;
	display: flex;
	flex-wrap: wrap;
}
.event_goods_img.triple > div{
	width:calc(100% / 3);
}

.event_goods_img.double{
	max-width:1100px;
	display: flex;
	flex-wrap: wrap;
}
.event_goods_img.double > div{
	width:calc(100% / 2);
}

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

@media only screen and (max-width: 1100px) {
	
	.photo_wrap a {width: calc(100% / 5);}
	
	.web_wrap{max-width:600px;}
	.web_wrap img{width: calc((100% - 1%) / 2);}

}

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

	main{overflow:hidden;}
	section {padding:40px 0 30px;}
	main h1{font-size: 30px;}
	
	.web_intro{
		width:calc(100% + 60px);
		margin-left:-30px;
		position:relative;
		overflow:hidden;
	}
	.web_intro img{
		margin-left:-6%;
		width:112%;
	}
	
	.photo_wrap a {width: calc(100% / 4);}
	
	.cd_design_img{max-width:500px;}
	.cd_design_img > div:nth-child(1){width:100%;}
	.cd_design_img > div:nth-child(2){width:100%;}
	
	.cd_inner_img > div{width:100%;}
	
	.flyer_wrap a {width: calc(100% / 5);}
	

}

@media only screen and (max-width:580px) {
	main{padding: 0 5vw;}
	main h1 {font-size: 24px;line-height:1.2em;padding-top: 8vw;}
	section {padding: 6vw 0;}
	.intro_main{font-size:14px;}
	main h2{font-size:7vw;padding:3vw 0 2vw .2em;}
	.web_intro{width:calc(100% + 10vw);margin-left:-5vw;}
	
	.scope_text ul li{font-size:14px;}
	
	.flyer_wrap a {width: calc(100% / 4);}
	
	.cd_web_wrap{justify-content:center;gap:0 1%;}
	.cd_web_wrap img {width: calc((100% - 1%) / 2);}
	
	.cd_web_wrap img:nth-child(1){order:1;}
	.cd_web_wrap img:nth-child(2){order:3;}
	.cd_web_wrap img:nth-child(3){order:2;}
	.cd_web_wrap img:nth-child(4){order:4;}
	.cd_web_wrap img:nth-child(5){order:5;width:100%;}
	
	.photo_wrap a {width: calc(100% / 3);}
	
	
	.web_wrap img{width:100%;}
	
	.web_long_wrap img {width: calc((100% - 10px) / 2);}
	
	.project_rakugolady_wrap{justify-content:center;gap:1vw 1%;}
	.project_rakugolady_wrap img{width: calc((100% - 1vw) / 2);}
	
	.event_webad_img > div{width:100%;}
	
	.event_goods_img.double > div{width:100%;}
	.event_goods_img.triple > div{width:100%;}
	
	.event_flyer_img > div{width:100%;line-height:0;}
	
	.project_imgwrap a{width:50%;}
}

@media only screen and (max-width:520px) {
	main h1 {font-size:7vw;padding-top: 0;}
}