@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");

/* --------------------------------------------
FLUID MV
--------------------------------------------- */
#fluidMV{
	position : relative;
}
#fluidMV > picture{
	overflow : hidden;
}
#fluidMV > picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#fluidMV .title{
	position : absolute;
	top : 50%;
	left : 50%;
	color : #fff;
	text-shadow : 1px 1px 0 rgb( 0 0 0 / .5 ) , -1px -1px 0 rgb( 0 0 0 / .5 ) , -1px 1px 0 rgb( 0 0 0 / .5 ) , 1px -1px 0 rgb( 0 0 0 / .5 ) , 0 1px 0 rgb( 0 0 0 / .5 ) , 0-1px 0 rgb( 0 0 0 / .5 ) , -1px 0 0 rgb( 0 0 0 / .5 ) , 1px 0 0 rgb( 0 0 0 / .5 );
	letter-spacing : .1em;
	transform : translateX( -50% ) translateY( -50% );
}
@media screen and ( max-width : 768px ){
	#fluidMV{
		height : calc( 560 * 100vw / 768 );
	}
	#fluidMV picture{
		height : calc( 560 * 100vw / 768 );
	}
	#fluidMV .title{
		font-size : 8rem;
	}
}
@media print , screen and ( min-width : 769px ){
	#fluidMV .title{
		font-size : 8rem;
	}
}
@media screen and ( min-width : 769px ) and ( max-width : 1279px ){
	#fluidMV{
		height : calc( 560 * 100vw / 1280 );
	}
	#fluidMV picture{
		height : calc( 560 * 100vw / 1280 );
	}
}
@media print , screen and ( min-width : 1280px ){
	#fluidMV{
		height : 560px;
	}
	#fluidMV picture{
		height : 560px;
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
#column > .sidebar{
	background-color : #fff;
}
@media screen and ( max-width : 768px ){
	#column{
		padding-left : 0;
		padding-right : 0;
	}
}
@media print , screen and ( min-width : 769px ){
	#column{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
	}
	#column > .sidebar{
		position : sticky;
	}
}
@media screen and ( min-width : 769px ) and ( max-width : 1279px ){
	#column{
		padding-top : calc( 80 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
	#column > .article{
		width : calc( 900 * 100% / 1240 );
	}
	#column > .sidebar{
		top : calc( 64 * 100vw / 1280 );
		width : calc( 320 * 100% / 1240 );
	}
}
@media print , screen and ( min-width : 1280px ){
	#column{
		padding-top : 80px;
		padding-bottom : 80px;
	}
	#column > .article{
		width : 900px;
	}
	#column > .sidebar{
		top : 64px;
		width : 320px;
	}
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebarForm .end{
	width : 100%;
	color : #fff;
	text-align : center;
	background-color : var( --body );
}
#sidebarForm .title{
	display : flex;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	color : #fff;
	text-align : center;
	background-color : var( --bg03 );
}
#sidebarForm .title02{
	font-weight : 500;
	border-bottom : 1px solid var( --border );
}
#sidebarForm .nologin{
	display : flex;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	text-align : center;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
#sidebarForm .nologin::before{
	display : block;
	width : 1.2em;
	height : 1.2em;
	margin-right : .25em;
	content : "";
	background : url( "../images/ui/icon/login.svg" ) 0 0 / contain no-repeat;
}
#sidebarForm .tophoto{
	display : flex;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	text-align : center;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
#sidebarForm .tophoto::before{
	display : block;
	width : 1.2em;
	height : 1.2em;
	margin-right : .25em;
	content : "";
	background : url( "../images/ui/icon/camera.svg" ) 0 0 / contain no-repeat;
}
#sidebarForm .msg-limit{
	line-height : 1.4;
}
#sidebarForm .msg-limit strong{
	font-weight : 500;
	color : #d6562f;
}
#sidebarForm .check01 li{
	position : relative;
}
#sidebarForm .check01 li input[type="checkbox"]{
	position : absolute;
	top : 0;
	left : 0;
	opacity : 0;
}
#sidebarForm .check01 label{
	display : flex;
	flex-direction : row-reverse;
	align-items : center;
	justify-content : space-between;
	width : 100%;
	cursor : default;
}
#sidebarForm .check01 label span:nth-of-type( 1 ){
	position : relative;
	display : block;
	flex-shrink : 0;
	margin-left : .5em;
	background-color : var( --bg02 );
	border-color : var( --bg02 );
	border-style : solid;
}
#sidebarForm .check01 label span:nth-of-type( 1 )::before , #sidebarForm .check01 label span:nth-of-type( 1 )::after{
	position : absolute;
	top : 0;
	left : 0;
	display : flex;
	flex-shrink : 0;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100%;
	text-align : center;
}
#sidebarForm .check01 label span:nth-of-type( 1 )::before{
	border : solid 1px transparent;
}
#sidebarForm .check01 label span:nth-of-type( 1 )::after{
	color : #fff;
	background-color : #d6562f;
}
#sidebarForm .check01 label span:nth-of-type( 2 ){
	display : flex;
	align-items : center;
	font-weight : 500;
}
#sidebarForm .check01 label span:nth-of-type( 2 ) img{
	width : 1.2em;
	height : 1.2em;
	margin-right : .1em;
}
#sidebarForm .check01 input[type="checkbox"]:not( :checked ) + label span:nth-of-type( 1 )::before{
	content : attr( data-unchecked );
}
#sidebarForm .check01 input[type="checkbox"]:checked + label span:nth-of-type( 1 )::after{
	content : attr( data-checked );
}
#sidebarForm .check01 input[type="checkbox"]:checked + label span:nth-of-type( 2 ){
	display : flex;
	align-items : center;
}
#sidebarForm .check01 input[type="checkbox"]:checked + label span:nth-of-type( 2 )::before{
	flex-shrink : 0;
	width : 1.2em;
	height : 1.2em;
	margin-top : -.125em;
	margin-right : .25em;
	content : "";
	background : url( "../images/ui/icon/good.svg" ) 0 0 / contain no-repeat;
}
#sidebarForm input[type="submit"]{
	display : flex;
	align-items : center;
	justify-content : center;
	margin-left : auto;
	margin-right : auto;
	font-weight : 500;
	color : #fff;
	text-align : center;
	letter-spacing : .1em;
	background-color : #d6562f;
}
#sidebarForm .check02 label{
	display : grid;
}
#sidebarForm .check02 label span{
	position : relative;
	display : grid;
	align-items : center;
	cursor : pointer;
}
#sidebarForm .check02 label span::before{
	display : flex;
	flex-shrink : 0;
	align-items : center;
	justify-content : center;
	font-size : 0;
	text-align : center;
	content : "";
}
#sidebarForm .check02 label input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#sidebarForm .check02 span::before{
	flex-shrink : 0;
	font-weight : 500;
	color : #d6562f;
	border : 1px solid var( --border );
}
#sidebarForm .attention h5{
	padding-bottom : .5em;
	font-weight : 500;
	text-align : center;
	border-bottom-color : var( --border );
	border-bottom-style : solid;
}
#sidebarForm #join span{
	margin-left : .5em;
	margin-right : .25em;
	font-weight : 500;
	color : var( --bg03 );
}
@media screen and ( max-width : 768px ){
	#sidebarForm .end{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		margin-left : auto;
		margin-right : auto;
		font-size : 2.8rem;
		line-height : 1.6;
	}
	#sidebarForm .title{
		height : calc( 80 var( --remBase ) );
		padding-left : calc( 24 var( --viewportBase ) );
		padding-right : calc( 24 var( --viewportBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
		font-size : 3.2rem;
	}
	#sidebarForm .title02{
		padding-bottom : calc( 12 var( --remBase ) );
		padding-left : calc( 24 var( --viewportBase ) );
		padding-right : calc( 24 var( --viewportBase ) );
		font-size : 3.2rem;
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm .nologin{
		padding-bottom : calc( 40 var( --remBase ) );
		font-size : 2.6rem;
	}
	#sidebarForm .tophoto{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		font-size : 2.6rem;
	}
	#sidebarForm .msg-limit{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		padding-left : calc( 24 var( --viewportBase ) );
		padding-right : calc( 24 var( --viewportBase ) );
		font-size : 2.6rem;
	}
	#sidebarForm .check01{
		padding-left : calc( 24 var( --viewportBase ) );
		padding-right : calc( 24 var( --viewportBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#sidebarForm .check01 li + li{
		margin-top : calc( 28 var( --remBase ) );
	}
	#sidebarForm .check01 + .title02{
		margin-top : calc( 56 var( --remBase ) );
	}
	#sidebarForm .check01 label span:nth-of-type( 1 ){
		width : calc( 120 var( --remBase ) );
		height : calc( 56 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm .check01 label span:nth-of-type( 1 )::before , #sidebarForm .check01 label span:nth-of-type( 1 )::after{
		font-size : 2.4rem;
	}
	#sidebarForm .check01 label span:nth-of-type( 2 ){
		font-size : 2.8rem;
	}
	#sidebarForm .attention{
		padding-left : calc( 24 var( --viewportBase ) );
		padding-right : calc( 24 var( --viewportBase ) );
		margin-top : calc( 64 var( --remBase ) );
	}
	#sidebarForm .attention h5{
		font-size : 2.8rem;
		text-align : center;
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm .check02{
		margin-top : calc( 40 var( --remBase ) );
	}
	#sidebarForm .check02 li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sidebarForm .check02 span{
		font-size : 2.4rem;
		line-height : 1.4;
	}
	#sidebarForm .check02 span::before{
		width : calc( 36 var( --remBase ) );
		height : calc( 36 var( --remBase ) );
		margin-right : calc( 12 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm input[type="submit"]{
		width : calc( 720 var( --viewportBase ) );
		height : calc( 88 var( --remBase ) );
		margin-top : calc( 64 var( --remBase ) );
		font-size : 2.4rem;
	}
	#sidebarForm #join{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 32 var( --remBase ) );
		padding-left : calc( 24 var( --viewportBase ) );
		padding-right : calc( 24 var( --viewportBase ) );
	}
	#sidebarForm #join p{
		font-size : 2.4rem;
		line-height : 1.6;
	}
	#sidebarForm #join span{
		font-size : 2.8rem;
	}
}
@media print , screen and ( min-width : 769px ){
	#sidebarForm .end{
		padding-top : calc( 36 var( --remBase ) );
		padding-bottom : calc( 36 var( --remBase ) );
		padding-left : calc( 12 * 100% / 320 );
		padding-right : calc( 12 * 100% / 320 );
		font-size : 1.6rem;
		line-height : 1.6;
	}
	#sidebarForm .title{
		height : calc( 80 var( --remBase ) );
		padding-left : calc( 12 * 100% / 320 );
		padding-right : calc( 12 * 100% / 320 );
		margin-bottom : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
	}
	#sidebarForm .title02{
		padding-bottom : calc( 8 var( --remBase ) );
		padding-left : calc( 12 * 100% / 320 );
		padding-right : calc( 12 * 100% / 320 );
		font-size : 2rem;
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm .nologin{
		padding-top : calc( 12 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		font-size : 1.8rem;
	}
	#sidebarForm .tophoto{
		padding-top : calc( 36 var( --remBase ) );
		padding-bottom : calc( 36 var( --remBase ) );
		font-size : 1.8rem;
	}
	#sidebarForm .msg-limit{
		padding-top : calc( 36 var( --remBase ) );
		padding-bottom : calc( 36 var( --remBase ) );
		padding-left : calc( 12 * 100% / 320 );
		padding-right : calc( 12 * 100% / 320 );
		font-size : 1.8rem;
	}
	#sidebarForm .check01{
		padding-left : calc( 12 * 100% / 320 );
		padding-right : calc( 12 * 100% / 320 );
		margin-top : calc( 20 var( --remBase ) );
	}
	#sidebarForm .check01 li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#sidebarForm .check01 label span:nth-of-type( 1 ){
		width : calc( 64 var( --remBase ) );
		height : calc( 36 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm .check01 label span:nth-of-type( 1 )::before , #sidebarForm .check01 label span:nth-of-type( 1 )::after{
		font-size : 1.6rem;
	}
	#sidebarForm .check01 label span:nth-of-type( 2 ){
		font-size : 1.6rem;
	}
	#sidebarForm .check01 + .title02{
		margin-top : calc( 36 var( --remBase ) );
	}
	#sidebarForm .attention{
		margin-top : calc( 36 var( --remBase ) );
	}
	#sidebarForm .attention h5{
		font-size : 1.8rem;
		text-align : center;
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarForm .check02{
		padding-left : calc( 12 var( --remBase ) );
		padding-right : calc( 12 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
	}
	#sidebarForm .check02 li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#sidebarForm .check02 span{
		font-size : 1.6rem;
		line-height : 1.4;
	}
	#sidebarForm .check02 span::before{
		width : calc( 20 var( --remBase ) );
		height : calc( 20 var( --remBase ) );
		margin-right : calc( 8 var( --remBase ) );
	}
	#sidebarForm input[type="submit"]{
		width : calc( 296 var( --remBase ) );
		height : calc( 56 var( --remBase ) );
		font-size : 2rem;
	}
	#sidebarForm #join{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		padding-left : calc( 12 var( --remBase ) );
		padding-right : calc( 12 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
		border-top : 1px solid var( --border );
	}
	#sidebarForm #join p{
		font-size : 1.6rem;
		line-height : 1.6;
	}
	#sidebarForm #join span{
		font-size : 2rem;
	}
}
@media print , screen and ( min-width : 1280px ){
	#sidebarForm input[type="submit"]{
		margin-top : 32px;
	}
}

/* --------------------------------------------
SIDEBAR INFORMATION
--------------------------------------------- */
#sidebarInformation h4{
	font-weight : 500;
	border-bottom : 1px solid var( --border );
}
#sidebarInformation li a{
	display : flex;
	align-items : flex-start;
}
#sidebarInformation li a::before{
	flex-shrink : 0;
	width : 1em;
	text-align : center;
	content : "・";
}
@media screen and ( max-width : 768px ){
	#sidebarInformation{
		padding-top : calc( 32 * 100vw / 768 );
		padding-bottom : calc( 32 * 100vw / 768 );
		margin-top : calc( 56 * 100vw / 768 );
	}
	#sidebarInformation h4{
		padding-bottom : calc( 12 * 100vw / 768 );
		padding-left : calc( 48 * 100% / 768 );
		padding-right : calc( 48 * 100% / 768 );
		font-size : 2.8rem;
	}
	#sidebarInformation li a{
		font-size : 2.4rem;
		line-height : 1.6;
	}
	#sidebarInformation li{
		margin-top : calc( 12 * 100vw / 768 );
	}
	#sidebarInformation li a{
		padding-left : calc( 48 * 100% / 768 );
		padding-right : calc( 48 * 100% / 768 );
	}
}
@media print , screen and ( min-width : 769px ){
	#sidebarInformation h4{
		font-size : 2rem;
	}
	#sidebarInformation li a{
		font-size : 1.6rem;
		line-height : 1.6;
	}
}
@media screen and ( min-width : 769px ) and ( max-width : 1279px ){
	#sidebarInformation{
		padding-top : calc( 16 * 100vw / 1280 );
		padding-bottom : calc( 16 * 100vw / 1280 );
	}
	#sidebarInformation h4{
		padding-bottom : calc( 12 * 100vw / 1280 );
		padding-left : calc( 24 * 100% / 320 );
		padding-right : calc( 24 * 100% / 320 );
	}
	#sidebarInformation li{
		margin-top : calc( 12 * 100vw / 1280 );
	}
	#sidebarInformation li a{
		padding-left : calc( 24 * 100% / 320 );
		padding-right : calc( 24 * 100% / 320 );
	}
}
@media print , screen and ( min-width : 1280px ){
	#sidebarInformation{
		padding-top : 16px;
		padding-bottom : 16px;
	}
	#sidebarInformation h4{
		padding-bottom : 12px;
		padding-left : 24px;
		padding-right : 24px;
	}
	#sidebarInformation li{
		margin-top : 12px;
	}
	#sidebarInformation li a{
		padding-left : 24px;
		padding-right : 24px;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	border-top : solid 1px var( --border );
}
#footer ul{
	display : flex;
	align-items : center;
	justify-content : center;
}
#footer li a{
	display : block;
	padding-left : 1.5em;
	padding-right : 1.5em;
}
#footer p{
	line-height : 1.2;
	text-align : center;
}
@media screen and ( max-width : 768px ){
	#footer{
		padding-top : calc( 56 * 100vw / 768 );
		padding-bottom : calc( 40 * 100vw / 768 );
		margin-top : calc( 80 * 100vw / 768 );
	}
	#footer ul{
		flex-wrap : wrap;
	}
	#footer li a{
		font-size : 2.2rem;
		line-height : 1.8;
	}
	#footer p{
		margin-top : calc( 48 * 100vw / 768 );
		font-size : 2rem;
	}
}
@media print , screen and ( min-width : 769px ){
	#footer li a{
		font-size : 1.6rem;
	}
	#footer p{
		font-size : 1.6rem;
	}
}
@media screen and ( min-width : 769px ) and ( max-width : 1279px ){
	#footer{
		padding-top : calc( 56 * 100vw / 1280 );
		padding-bottom : calc( 24 * 100vw / 1280 );
		margin-top : calc( 40 * 100vw / 1280 );
	}
	#footer p{
		padding-top : calc( 8 * 100vw / 1280 );
		padding-bottom : calc( 8 * 100vw / 1280 );
		margin-top : calc( 24 * 100vw / 1280 );
	}
}
@media print , screen and ( min-width : 1280px ){
	#footer{
		padding-top : 56px;
		padding-bottom : 24px;
		margin-top : 40px;
	}
	#footer p{
		padding-top : 8px;
		padding-bottom : 8px;
		margin-top : 24px;
	}
}

/* --------------------------------------------
WISH
--------------------------------------------- */
#wish{
	position : fixed;
	bottom : 0;
	right : 0;
}
@media screen and ( max-width : 768px ){
	#wish img{
		height : calc( 50 * 100vw / 768 );
		margin-bottom : calc( 12 * 100vw / 750 );
		margin-right : calc( 12 * 100vw / 750 );
	}
}
@media screen and ( min-width : 769px ) and ( max-width : 1279px ){
	#wish img{
		height : calc( 50 * 100vw / 1240 );
		margin-bottom : calc( 12 * 100vw / 1240 );
		margin-right : calc( 12 * 100vw / 1240 );
	}
}
@media print , screen and ( min-width : 1280px ){
	#wish img{
		height : 50px;
		margin-bottom : 12px;
		margin-right : 12px;
	}
}