@charset "utf-8";

/******************************************************************** structure
*/

.rizinHeadView { background: url(../rizin/img/rizin_image_bg.png) #000 no-repeat 50% 85%; background-size: 1200px auto; padding-bottom: 800px; position: relative;}
.rizinHeadView .inner { max-width: 1200px; padding: 100px 50px 0;}
.rizinHeadView .inner p { padding: 0; text-align: center;}
.rizinHeadView .image { position: absolute; left: 0; width: 100%; text-align: center; bottom: 0;}
.rizinHeadView .image img { width: 1200px;}

.rizinHeadAllView { background: #000; padding-top: 90px; padding-bottom: 50px;}
.rizinHeadAllView .inner { max-width: 1200px;}
.rizinHeadAllView p { padding: 0;}
.rizinHeadAllView p.image { padding-bottom: 60px;}
.rizinHeadAllView p:last-child { padding-top: 30px;}

.rizinView { padding-bottom: 70px;}
.rizinView .inner { max-width: 1200px; padding: 0 20px;}
.rizinView p { text-align: center;}
.rizinView p.text { font-size: 60px; line-height: 1;}
.rizinView p.text span { font-size: 60%;}

.rizinMessageView { padding-bottom: 5px; background: #111; color: #fff; padding-top: 5px;}
.rizinMessageView h2 { text-align: center; font-size: 44px; margin: 30px 0;}
.rizinMessageView p { margin: 30px 0 5px; font-size: 16px; font-weight: 300;}
.rizinMessageView .inner { max-width: 1200px;}

.famousItemsView.rizinPickupView { padding-top: 30px; background: #111; padding-bottom: 30px;}
.famousItemsView.rizinPickupView .inner { background: none;}

.rizinContentsView { padding: 50px 0; background: #D6318B;}
.rizinContentsView .inner { max-width: 1200px;}
.rizinContentsView .headerBox h2 { text-align: center; font-size: 44px;}
.rizinContentsView .headerBox p { text-align: center; padding: 0; margin: 10px 0; font-size: 18px;}
.rizinContentsView .headerBox ul { list-style: none; margin: 30px 0 50px; padding: 0; text-align: center; font-size: 18px;}
.rizinContentsView .headerBox ul li { display: inline-block; width: 32%; margin-right: 1.4%;}
.rizinContentsView .headerBox ul li:last-child { margin-right: 0;}
.rizinContentsView .headerBox a { background: #fff; color: #000 !important; display: block; text-decoration: none; line-height: 2.8;}
.rizinContentsView .headerBox a.fcs { background: #FFF4FD; color: #D6318B !important; transition: background 0.3s, color 0.3s;}

.rizinContentsView .contBox { margin: 40px 0; padding: 40px; border-radius: 20px; position: relative; background: #fff; font-size: 16px;}
.rizinContentsView .contBox dl { margin: 0; padding: 0;}
.rizinContentsView .contBox dt { font-size: 28px; font-weight: 500; color: #000; font-weight: bold;}
.rizinContentsView .contBox dd { font-size: 20px; margin: 10px 0; color: #333;}
.rizinContentsView .contBox .textSide { width: 48%;}
.rizinContentsView .contBox#contBox2 { padding-left: 52%;}
.rizinContentsView .contBox#contBox2 .textSide { width: auto;}
.rizinContentsView .contBox#contBox2 dt { font-size: 22px;}
.rizinContentsView .contBox#contBox3 dt { font-size: 20px;}
.rizinContentsView .contBox#contBox3 dd { font-size: 16px;}
.rizinContentsView .contBox p { font-weight: 300; padding: 0; margin: 10px 0 20px; font-size: 14px;}
.rizinContentsView .contBox p.catMark { position: absolute; right: 20px; top: 20px; margin: 0; font-weight: bold; background: #D6318B; color: #fff; text-align: center; border-radius: 50%; line-height: 4; width: 4em; font-size: 18px;}
.rizinContentsView .contBox#contBox2 p.catMark { left: 20px; right: unset; line-height: 6; width: 6em; font-size: 12px;}
.rizinContentsView .contBox h3 { margin: 20px 0 5px; font-size: 18px; padding: 0;}

.rizinContentsView .contBox .imageSide { position: absolute; top: 50%; transform: translateY(-50%); min-width: 48%;}
.rizinContentsView .contBox .imageSide p { padding: 0; text-align: center;}
.rizinContentsView .contBox#contBox1 .imageSide { right: 0;}
.rizinContentsView .contBox#contBox2 .imageSide { left: 0;}
.rizinContentsView .contBox#contBox3 .imageSide { right: 0;}

.rizinPresentView { padding: 50px 0; text-align: center;}
.rizinPresentView .inner { max-width: 1200px;}
.rizinPresentView ul { list-style: none; margin: 0 0 40px; padding: 0;}
.rizinPresentView ul li { display: inline-block; width: 48%; margin-right: 3%;}
.rizinPresentView ul li:last-child { margin-right: 0;}
.rizinPresentView ul a:hover { opacity: 0.6; transition: 0.3s;}

.rizinPresentView .eventBox { background: #000; color: #fff;}
.rizinPresentView .leftSide { float: left; width: 540px; padding: 20px 20px 0;}
.rizinPresentView .rightSide { padding: 20px 30px 0 600px; text-align: left;}
.rizinPresentView .rightSide dl { margin: 30px 0; padding: 0; font-size: 18px;}
.rizinPresentView .rightSide dl dt { float: left;}
.rizinPresentView .rightSide p { margin: 20px 0; padding: 0; font-size: 18px;}
.rizinPresentView .rightSide .attention { color: #FFBE00;}
.rizinPresentView .rightSide .box { position: relative;}
.rizinPresentView .rightSide .box p { margin: 0; padding: 0; position: absolute; right: 0; bottom: 0;}
.rizinPresentView .clearfix { border-left: 20px solid #FFBE00; border-right: 20px solid #FFBE00; border-top: 20px solid #FFBE00; padding-bottom: 5px;}
.rizinPresentView .fullButton { padding: 0;}

@media screen and (max-width: 1400px){
	.rizinHeadView .inner { padding-top: 90px;}

	.rizinMessageView { padding-left: 20px; padding-right: 20px;}
	.rizinContentsView { padding-left: 20px; padding-right: 20px;}
}

@media screen and (max-width: 1200px){
	.rizinHeadView { background-size: 1000px auto; padding-bottom: 650px; background-position: 50% 90%;}
	.rizinHeadView .inner { padding-top: 80px;}
	.rizinHeadView .image img { width: 850px;}
	.rizinContentsView .contBox .imageSide { width: 50%;}
	.rizinContentsView .contBox dt { font-size: 26px;}
	.rizinContentsView .contBox dd { font-size: 20px;}
	.rizinContentsView .contBox#contBox3 dt { font-size: 20px;}
	.rizinContentsView .contBox#contBox3 dd { font-size: 16px;}

	.rizinHeadAllView p { padding: 0 20px;}

	.rizinPresentView .eventBox { width: calc(100% - 20px); margin-left: auto; margin-right: auto;}
	.rizinPresentView .clearfix { border-width: 10px;}
	.rizinPresentView .rightSide .box p { position: static; text-align: right;}
}

@media screen and (max-width: 1050px){
	.rizinHeadView { background-size: contain; padding-bottom: 60vw;}
	.rizinHeadView .inner { padding-top: 70px;}
	.rizinHeadView .image img { width: 85vw;}

	.rizinMessageView h2 { font-size: 40px;}
	.rizinContentsView .headerBox h2 { font-size: 36px;}
	.rizinContentsView .headerBox p { font-size: 16px;}
	.rizinContentsView .contBox p { font-size: 12px;}

	.rizinHeadAllView p.image { padding-bottom: 40px;}

	.rizinHeadAllView p:last-child { padding-top: 20px;}

	.rizinPresentView .leftSide { width: calc(50% - 60px);}
	.rizinPresentView .rightSide { padding-left: 50%;}
	.rizinPresentView .rightSide p { margin: 10px 0; font-size: 14px;}
	.rizinPresentView .rightSide dl { margin: 10px 0;}
}

@media screen and (max-width: 800px){
	.rizinMessageView h2 { font-size: 28px;}
	.rizinMessageView p { font-size: 14px;}
	.rizinContentsView .headerBox h2 { font-size: 28px;}
	.rizinContentsView .headerBox p { font-size: 12px;}
	.rizinContentsView .contBox .textSide { width: auto;}
	.rizinContentsView .contBox .imageSide { display: none;}
	.rizinContentsView .contBox#contBox2 { padding-left: 40px;}

	.rizinContentsView .contBox p.catMark { font-size: 16px; right: 10px; top: 10px;}
	.rizinContentsView .contBox#contBox2 p.catMark { left: unset; right: 10px;}

	.rizinHeadAllView p { padding: 0 10px;}

	.rizinHeadAllView p.image { padding-bottom: 20px;}

	.rizinContentsView.rizinContentsHome { padding-top: 5px;}

	.rizinHeadAllView p:last-child { padding-top: 10px;}

	.rizinPresentView ul { padding: 0 10px;}
	.rizinPresentView ul li { display: block; margin-right: 0; padding-bottom: 20px; width: auto;}

	.rizinPresentView .rightSide { padding: 20px;}
}

@media screen and (max-width: 640px){
	.rizinView { padding-bottom: 50px;}
	.rizinView p.text { font-size: 30px;}
	.rizinHeadView .title { margin-bottom: 40px;}
	.rizinHeadView .inner { padding-left: 5px; padding-right: 5px; padding-top: 100px;}
	.rizinHeadView .image img { width: 100%;}

	.rizinMessageView h2 { font-size: 24px; margin: 20px 0;}
	.rizinMessageView p { margin: 15px 0; font-size: 12px;}
	.rizinContentsView .headerBox h2 { font-size: 24px;}
	.rizinContentsView .headerBox p { text-align: left;}
	.rizinContentsView .headerBox ul li { margin: 10px 0; width: auto; display: block;}
	.rizinContentsView .contBox { margin: 20px 0; padding: 12px;}
	.rizinContentsView .contBox#contBox2 { padding: 12px;}
	.rizinContentsView .contBox#contBox2 dt { font-size: 20px;}

	.rizinContentsView .contBox dt { font-size: 24px;}
	.rizinContentsView .contBox dd { font-size: 16px; margin: 5px 0;}
	.rizinContentsView .contBox#contBox3 dd { font-size: 16px;}
	.rizinContentsView .contBox dd br { display: none;}
	.rizinContentsView .contBox h3 { font-size: 16px;}

	.rizinContentsView .buttonBlack { font-size: 14px;}
	.rizinContentsView .headerBox ul { font-size: 14px;}

	.rizinHeadAllView p.image { padding-bottom: 20px;}

	.rizinPresentView .rightSide { padding: 10px;}
	.rizinPresentView .rightSide dl { font-size: 14px;}
	.rizinPresentView .rightSide .box p.zoom { text-align: left;}
	.rizinPresentView .rightSide .box p.zoom img { width: 120px;}

	.rizinPresentView .button { font-size: 14px;}
}