@charset "shift_jis";
#gnav_nemu {
	background-color: #B95778;
	z-index: 100;
}
#mystory_60th {
	/*background: -webkit-linear-gradient(rgb(209,147,166) 17%, rgb(185,87,120) 100%);
	background: -o-linear-gradient(rgb(209,147,166) 17%, rgb(185,87,120) 100%);
	background: linear-gradient(rgb(209,147,166) 17%, rgb(185,87,120) 100%);*/
}
#mystory_60th #mv {
	color: #FFFFFF;
	background-color: #B95778;
	background-image: url("../../img/usr/freepage/cbon/60th_mystory/mv_bg02.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: calc(126 / 750 * 100vw);
}
#mystory_60th #mv h1,
#gnav_nemu .title_ {
	font-size: calc(18 / 750 * 100vw);
	letter-spacing: 0.05em;
	/*width: calc(236 / 750 * 100vw);*/
	padding: calc(30 / 750 * 100vw) 0 0 calc(30 / 750 * 100vw);
}
#gnav_nemu .title_ {
	color: #FFFFFF;
	padding: 0;
}
#mystory_60th #mv .mv_box_ {
	width: 100%;
	height: calc(1000 / 750 * 100vw);
	background-image: url("../../img/usr/freepage/cbon/60th_mystory/mv_bg.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: calc(66 / 750 * 100vw) 0 calc(64 / 750 * 100vw);
}
#mystory_60th #mv .mv_box_ p {
	color: #95161C;
	font-size: calc(36 / 750 * 100vw);
	text-align: center;
	line-height: 2.0;
	padding: calc(610 / 750 * 100vw) 0 0;
}
#mystory_60th #mv > p {
	font-size: calc(30 / 750 * 100vw);
	line-height: 2.0;
	letter-spacing: 0.025em;
	text-align: center;
}
#mystory_60th #mv > p + p {
	margin-top: calc(60 / 750 * 100vw);
}
#mystory_60th #mv > p.note_ {
	font-size: calc(16 / 750 * 100vw);
	font-family: "dnp-shuei-gothic-kin-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	line-height: 1.5;
	letter-spacing: 0.025em;
	margin-top: calc(80 / 750 * 100vw);
}

#mystory_60th #gallery {
	
}

#mystory_60th #information {
	text-align: center;
	padding: calc(70 / 750 * 100vw) 0 calc(75 / 750 * 100vw);
}
#mystory_60th #information p {
	color: #333333;
	font-size: calc(28 / 750 * 100vw);
	font-family: "dnp-shuei-gothic-kin-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	line-height: 1.57;
	letter-spacing: 0.05em;
}
#mystory_60th #information .btn_back_ {
	margin-top: calc(74 / 750 * 100vw);
}
#mystory_60th #information .btn_back_ a {
	color: #B95778;
	font-size: calc(28 / 750 * 100vw);
	font-family: "dnp-shuei-gothic-kin-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	letter-spacing: 0.025em;
	text-decoration: none;
	border: 2px solid #B95778;
	width: calc(400 / 750 * 100vw);
	margin: 0 auto;
	padding: calc(14 / 750 * 100vw) 0 calc(12 / 750 * 100vw);
	display: block;
}

@media (min-width: 722px) and (max-width: 1024px) {
    .hacobune-gallery .hacobune-search-menu {
        display: none !important;
    }
    .hacobune-layout-base-main-contents ul.hacobune-tag-list {
        padding: 8px !important;
    }
    ul.hacobune-tag-list li.hacobune-tag-list-item {
        width: 50% !important;
        padding: 0 5px 10px !important;
    }
	.hacobune-tag-list-item:first-child span.hacobune-tag-item-label:after {
        font-size: calc(24 / 1024 * 100vw) !important;
    }
    .hacobune-grid-col[data-v-9dc3b970] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .hacobune-grid-col .hacobune-media-post-list-item-img-wrapper {
        z-index: unset !important;
    }
    .hacobune-video-icon[data-v-465e62b3] {
        top: 10px !important;
        right: 10px !important;
        width: 20px !important;
        height: 20px !important;
    }
	
    .hacobuce-media-post-item-root[data-v-5fd70c87] {
        height: 100vh !important;
        max-height: 100vh !important;
        grid-template-rows: 50px auto 1fr auto !important;
        grid-template-columns: 100% !important;
        grid-template-areas:
        "header"
        "main"
        "side"
        "footer" !important;
    }
    .hacobune-dialog-content .hacobuce-media-post-item-root {
        flex-direction: column !important;
        height: unset !important;
        position: relative !important;
        max-height: none !important;
        grid-template-rows: 0 auto 1fr aut !importanto;
    }
    .hacobuce-media-post-item-root .hacobuce-media-post-item-main {
        min-width: unset !important;
        padding: 30px !important;
    }
    .hacobuce-media-post-item-root .hacobuce-media-post-item-side {
        padding: 30px !important;
        overflow-x: visible !important;
        font-size: calc(28 / 1024 * 100vw) !important;
    }
	.hacobune-dialog-mask .hacobune-dialog-wrapper {
		padding: calc(88 / 1024 * 100vw) 10px 30px !important;
		max-width: 1000px !important;
	}
    .hacobune-dialog-wrapper .hacobune-dialog-content .hacobune-dialog-close-button-container {
        position: absolute !important;
        top: 5px !important;
		right: 5px !important;
    }
	.hacobuce-media-post-item-main .hacobune-slider .hacobune-slider-container {
        height: auto !important;
        aspect-ratio: 1;
	}
	.hacobuce-media-post-item-root .hacobuce-media-post-item-title {
		font-size: calc(36 / 1024 * 100vw) !important;
	}
	.hacobuce-media-post-staff-profile-staff-attrs .hacobuce-media-post-staff-profile-staff-attr > span,
	.hacobune-readmore-wrapper .hacobuce-media-post-item-description {
		font-size: calc(28 / 1024 * 100vw) !important;
	}
	.hacobune-dialog-wrapper .hacobune-dialog-close-button-container .hacobune-icon-button {
		height: calc(68 / 1024 * 100vw) !important;
		width: calc(68 / 1024 * 100vw) !important;
	}
	.hacobune-gallery .hacobune-multi-select-container-param .hacobune-multi-select-item .hacobune-multi-select-label,
	.hacobune-simple-button.hacobune-reset-button.hacobune-snap-side-panel-container-reset-button:after,
	.hacobune-layout-base-main-contents .hacobune-totalCount,
	.hacobune-gallery .hacobune-multi-select-container-label,
	li.hacobune-tag-list-item span.hacobune-tag-item-label,
	.hacobune-media-post-list-item-img-wrapper .hacobune-media-post-list-item-caption,
	.hacobune-media-post-list-item-img-wrapper .hacobune-media-post-list-item-title {
		font-size: calc(28 / 1024 * 100vw) !important;
	}
	.hacobune-tag-list-item:first-child span.hacobune-tag-item-label {
		font-size: 0 !important;
	}
	.hacobune-tag-list:before {
		font-size: calc(24 / 1024 * 100vw) !important;
		line-height: 2.0 !important;
		background-position: 0px calc(8 / 1024 * 100vw) !important;
		background-size: calc(20 / 1024 * 100vw);
	}
	.hacobune-media-post-list-item-img-wrapper .hacobune-media-post-list-item-title {
		height: calc(60 / 1024 * 100vw) !important;
	}
	.hacobune-media-post-list-item-img-wrapper .hacobune-media-post-list-item-caption {
		height: calc(120 / 1024 * 100vw) !important;
	}
	.hacobune-multi-select-container-param .hacobune-multi-select[data-v-0eb446a4] {justify-content: space-between !important;}
    .hacobune-multi-select-container-param .hacobune-multi-select .hacobune-multi-select-item {
        width: calc(50% - 4px) !important;
    }
	.hacobune-gallery .hacobune-multi-select-container.hacobune-snap-side-panel-container-select .hacobune-multi-select-container-param .hacobune-multi-select-item {
		margin: 0 0 8px !important;
	}
}


/* 1025px�ȏ� */
@media screen and (min-width: 1025px) {
	.sp_only_ {
		display: none;
	}
	#mystory_60th {
		height: 100vh;
		background-image: url("../../img/usr/freepage/cbon/60th_mystory/mv_bg_pc.png");
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	#mystory_60th #mv {
		background: none;
		padding: 0;
		width: 100%;
	}
	#mystory_60th #mv h1,
	#gnav_nemu .title_ {
		/*font-size: 20px;*/
		font-size: calc(20 / 1875 * 100vw);
		/*width: 236px;*/
		padding: calc(30 / 1875 * 100vw) 0 0 calc(30 / 1875 * 100vw);
		position: absolute;
		left: 0;
		top: 0;
	}
	#gnav_nemu .title_ {
		margin: 0;
	}
	#mystory_60th #mv .mv_box_ {
		/*width: auto;*/
		height: 62%;
		/*max-width: 670px;*/
		max-height: 670px;
		aspect-ratio: 1;
		margin: 0 auto;
		background-size: auto 100%;
	}
	#mystory_60th #mv > p {
		/*font-size: 20px;*/
		font-size: calc(20 / 1875 * 100vw);
		line-height: 1.6;
	}
	#mystory_60th #mv > p + p {
		margin-top: calc(32 / 1875 * 100vw);
	}
	#mystory_60th #mv > p.note_ {
		font-size: calc(12 / 1875 * 100vw);
		line-height: 1.33;
		letter-spacing: 0;
		margin-top: calc(34 / 1875 * 100vw);
	}
	
	#footer {
		display: none;
	}

	#contents {
		position: sticky;
		top: 0;
		right: 0;
		height: 100vh;
	}
	#leftmenu {
		background: none;
		display: block;
		position: static;
		height: auto;
	}
	#leftmenu .leftmenu_wrap_ {
		width: 100%;
		max-width: none;
		min-width: auto;
		padding: 0;
		position: relative;
		background-color: #D2D2D2;
	}
	#leftmenu .leftmenu_wrap_::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: block;
		background-position: right bottom;
		background-repeat: no-repeat;
		opacity: 0.5;
		z-index: 1;
		mix-blend-mode: multiply;
	}

	#mystory_60th #gallery,
	#mystory_60th #information {
		display: none;
	}

	#leftmenu {
	}
	#leftmenu_gallery {
	}
	#leftmenu_information {
		text-align: center;
		padding: 46px 0;
	}
	#leftmenu_information p {
		color: #333333;
		font-size: calc(16 / 1875 * 100vw);
		font-family: "dnp-shuei-gothic-kin-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
		line-height: 1.57;
		letter-spacing: 0.05em;
	}
	#leftmenu_information .btn_back_ {
		margin-top: calc(27 / 1875 * 100vw);
	}
	#leftmenu_information .btn_back_ a {
		color: #B95778;
		font-size: calc(18 / 1875 * 100vw);
		font-family: "dnp-shuei-gothic-kin-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
		letter-spacing: 0.025em;
		text-decoration: none;
		border: 1px solid #B95778;
		width: calc(400 / 1875 * 100vw);
		margin: 0 auto;
		padding: calc(11 / 1875 * 100vw) 0 calc(10 / 1875 * 100vw);
		display: block;
	}
}

@media screen and (max-height: 600px) {
	#leftmenu .leftmenu_wrap_ {
		padding: 0;
	}

}
@media screen and (min-width: 1875px) {
	#mystory_60th #mv h1,
	#gnav_nemu .title_ {
		font-size: 20px;
		padding: 30px 0 0 30px;
	}
	#mystory_60th #mv > p {
		font-size: 20px;
	}
	#mystory_60th #mv > p + p {
		margin-top: 32px;
	}
	#mystory_60th #mv > p.note_ {
		font-size: 12px;
		margin-top: 34px;
	}
	#leftmenu_information {
		padding: 46px 0;
	}
	#leftmenu_information p {
		font-size: 16px;
	}
	#leftmenu_information .btn_back_ {
		margin-top: 27px;
	}
	#leftmenu_information .btn_back_ a {
		font-size: 18px;
		width: 400px;
		padding: 11px 0 10px;
	}
}