@charset "UTF-8";

/* userSpecialtyNavi */
.userSpecialtyNaviBlock01 {
	background: #fff;
	border: solid 1px #713104;
	border-width: 1px 0;
}
.userSpecialtyNaviList01 {
	display: flex;
	width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.userSpecialtyNaviList01 .listItem {
	flex: 1;
}
.userSpecialtyNaviList01 .listItem > * {
	height: 100%;
}
.userSpecialtyNaviList01 .naviLink {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 21px 20px;
	background: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
	color: #000;
	text-align: center;
	transition: 0.4s;
	box-sizing: border-box;
}
.userSpecialtyNaviList01 .naviLink:hover {
	background: #fbf8ef;
}
.userSpecialtyNaviList01 .naviLink::before,
.userSpecialtyNaviList01 .listItem:last-child .naviLink::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 63%;
	background: url(/kojin/column/jutaku/user_specialty/images/index_gnav_dott_01.svg) repeat-y 0 0;
	background-size: 2px 4px;
}
.userSpecialtyNaviList01 .naviLink::before {
	left: 0;
}
.userSpecialtyNaviList01 .listItem:last-child .naviLink::after {
	right: 0;
}
.userSpecialtyNaviList01 [class*="naviIcon"] > span {
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	position: relative;
	height: 100%;
	padding-left: 60px;
}
.userSpecialtyNaviList01 [class*="naviIcon"] > span::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 39px;
	height: 39px;
	background-repeat: no-repeat;
	background-size: cover;
}
.userSpecialtyNaviList01 .naviIcon01 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/index_gnav_ico_01.svg);
}
.userSpecialtyNaviList01 .naviIcon02 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/index_gnav_ico_02.svg);
}
.userSpecialtyNaviList01 .naviIcon03 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/index_gnav_ico_03.svg);
}
.userSpecialtyNaviList01 .naviIcon04 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/index_gnav_ico_04.svg);
}
.userSpecialtyNaviList01 .naviIcon05 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/index_gnav_ico_05.svg);
}

/* userSpecialtyMainContent */
.userSpecialtyMainContent {
	padding: 20px 0 70px;
	background: #fbf8ef;
	box-sizing: border-box;
}
.userSpecialtyMainContentInner {
	width: 1200px;
	margin: 0 auto;
}

/* userSpecialtyTopColumn */
.userSpecialtyTopColumn01 {
	display: flex;
}
.userSpecialtyTopColumn01 > * {
	flex: 1;
}

/* userSpecialtyTopMvBlock */
.userSpecialtyTopMvBlock01 {
	position: relative;
}
.userSpecialtyTopMvInner {
	position: relative;
	width: 419px;
	height: 615px;
	background-image: url(/kojin/column/jutaku/user_specialty/images/index_mv_bg_01.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.userSpecialtyTopMvInner.fixed {
	position: fixed;
	top: 20px;
}
.userSpecialtyTopMvInner.fixed.stopped {
	position: absolute;
	top: auto;
	bottom: 0;
}
.userSpecialtyTopMvTtl {
	padding-top: 30px;
	text-align: center;
}
.userSpecialtyTopMvTtl > img {
	width: 201px;
}
[class*="userSpecialtyTopMvBalloon"] {
	display: inline-block;
	position: absolute;
	padding: 4px 7px 2px;
	background: #713104;
	border-radius: 6px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff !important;
	transform: translatey(0);
	animation: floatAnime 3s ease-in-out infinite;
	transition: 0.4s;
	box-sizing: border-box;
}
[class*="userSpecialtyTopMvBalloon"]:hover {
	opacity: 0.8;
}
[class*="userSpecialtyTopMvBalloon"] > span {
	display: inline-block;
	position: relative;
	padding-left: 22px;
}
[class*="userSpecialtyTopMvBalloon"]::before,
[class*="userSpecialtyTopMvBalloon"] > span::before {
	content: "";
	display: block;
	position: absolute;
}
[class*="userSpecialtyTopMvBalloon"]::before {
	bottom: -12px;
	left: 50%;
	width: 14px;
	height: 14px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
	background: #713104;
	z-index: 1;
}
[class*="userSpecialtyTopMvBalloon"] > span::before {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 17px;
	height: 18px;
	background: url(/kojin/column/jutaku/user_specialty/images/index_search_ico_01.png) no-repeat 0 0;
	background-size: cover;
}
.userSpecialtyTopMvBalloon01 { top: 199px; left: 29px;}
.userSpecialtyTopMvBalloon02 { top: 178px; left: 188px;}
.userSpecialtyTopMvBalloon03 { top: 146px; right: 22px;}
.userSpecialtyTopMvBalloon04 { top: 267px; right: 40px;}
@keyframes floatAnime {
		0% {transform: translatey(0);}
	 45% {transform: translatey(-5px);}
	100% {transform: translatey(0);}
}
.userSpecialtyMvBoardBlock {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 322px;
	height: 203px;
	padding: 24px 20px 20px;
	background: url(/kojin/column/jutaku/user_specialty/images/index_board_img_01.png) no-repeat 0 0;
	background-size: cover;
	box-sizing: border-box;
}
.userSpecialtyMvBoardBlock .boardTtl {
	margin-bottom: 8px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	color: #713104;
	text-align: center;
}
.userSpecialtyMvBoardBlock .boardTtl > span {
	display: inline-block;
	position: relative;
	padding: 0 15px;
}
.userSpecialtyMvBoardBlock .boardTtl > span::before,
.userSpecialtyMvBoardBlock .boardTtl > span::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -1px;
	background: #713104;
}
.userSpecialtyMvBoardBlock .boardTtl > span::before {
	left: 0;
	transform: rotate(45deg) translateY(-50%);
}
.userSpecialtyMvBoardBlock .boardTtl > span::after {
	right: 0;
	transform: rotate(-45deg) translateY(-50%);
}
.userSpecialtyMvBoardArticle01 {
	display: flex;
}
.userSpecialtyMvBoardArticle01 > * {
	flex: 1;
}
.userSpecialtyMvBoardArticle01 .thumbnailImg {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-width: 80px;
	max-width: 80px;
	height: 80px;
	margin-right: 15px;
	background: #fff;
	border: solid 1px #713104;
	border-radius: 6px;
	box-sizing: border-box;
}
.userSpecialtyMvBoardArticle01 .thumbnailImg > img {
	display: block;
	width: auto;
	max-height: 100%;
	transition: 0.5s cubic-bezier(0.23, 1, 0.58, 1);
}
.userSpecialtyMvBoardArticle01:hover .thumbnailImg > img {
	transform: scale(1.08);
}
.userSpecialtyMvBoardArticle01 .articleTtl {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.42;
	color: #000;
}
.userSpecialtyMvBoardArticle01:hover .articleTtl {
	text-decoration: underline;
}

/* userSpecialtyTopContent */
.userSpecialtyTopContent01 {
	max-width: 736px;
	min-width: 736px;
	margin-left: 45px;
}
.userSpecialtyTopContentInner {
	box-sizing: border-box;
}

/* userSpecialtyMoreArticle */
.userSpecialtyMoreArticle01 {
	display: none;
}
.userSpecialtyMoreLink01 {
	color: #713104 !important;
}
.userSpecialtyMoreLink01:hover > span {
	text-decoration: underline;
}

/* userSpecialtyTopCardBlock */
.userSpecialtyTopCardBlock01 {
	display: block;
	padding: 10px;
	background: #fff;
	border: solid 1px #713104;
	border-radius: 20px;
	transition: transform 0.2s cubic-bezier(0.23, 1, 0.58, 1);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}
a.userSpecialtyTopCardBlock01:hover {
	transform: scale(1.04);
}
.userSpecialtyTopCardBlock01 .cardLabel {
	margin-bottom: 5px;
	font-size: 0;
}
.userSpecialtyTopCardBlock01 .cardLabel > span {
	display: inline-block;
	padding: 3px 9px;
	background: #fff;
	border: solid 1px #000;
	border-radius: 20px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
	color: #000;
	letter-spacing: 0;
	box-sizing: border-box;
}
.userSpecialtyTopCardBlock01 .cardText {
	margin-top: 5px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #713104;
	letter-spacing: 0;
}
.userSpecialtyTopCardBlock01 .cardText > span {
	padding-left: 12px;
}

/* userSpecialtyMenuBlock */
.userSpecialtyMenuBlock01 {
	padding: 20px 15px;
	background: #f2e9d1;
	box-sizing: border-box;
}

/* userSpecialtyNewsItem */
.userSpecialtyNewsItem {
	display: flex;
	margin-bottom: 15px;
	padding-bottom: 15px;
	font-size: 1.6rem;
	font-weight: bold;
	border-bottom: dotted 1px #713104;
}
.userSpecialtyNewsItem > dt {
	white-space: nowrap;
}
.userSpecialtyNewsItem > dd {
	flex-grow: 1;
	margin-left: 10px;
}
.userSpecialtyNewsItem > dd > a {
	color: #713104;
}
.userSpecialtyNewsItem > dd > a:hover > span {
	text-decoration: underline;
}
.userSpecialtyNewsItem > dd > a.glyphArrowTriangleRight > span {
	display: inline-block;
	position: relative;
	padding-left: 20px;
}
.userSpecialtyNewsItem > dd > a.iconNewWindow > span::after,
.userSpecialtyNewsItem > dd > a.glyphArrowTriangleRight > span::before {
	content: "";
	display: inline-block;
}
.userSpecialtyNewsItem > dd > a.iconNewWindow > span::after {
	position: relative;
	top: 1px;
	width: 17px;
	height: 16px;
	margin: 0 5px;
	background: url(/kojin/column/jutaku/user_specialty/common/images/common_window_ico_01.svg) no-repeat 0 0;
	background-size: cover;
}
.userSpecialtyNewsItem > dd > a.glyphArrowTriangleRight > span::before {
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 6px;
	height: 6px;
	transform: rotate(-45deg);
	background: transparent;
	border: 2px solid #713104;
	border-width: 0 2px 2px 0;
}

/* js */
[class*="jsUserSpecialtyInsertBnr"],
[class*="jsUserSpecialtyInsertScrollBnr"] {
	display: none;
}

/*-------------------------------------------
modal
-------------------------------------------*/
/* userSpecialtyModalRate */
[class*="userSpecialtyModalRate"] {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1;
	color: #ff811c;
	text-align: center;
}
[class*="userSpecialtyModalRate"] > span {
	display: inline-block;
	position: relative;
	padding: 0 35px 0 100px;
}
[class*="userSpecialtyModalRate"] > span::before,
[class*="userSpecialtyModalRate"] > span::after {
	content: "";
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
}
[class*="userSpecialtyModalRate"] > span::before {
	bottom: -5px;
	left: 0;
	width: 91px;
	height: 61px;
}
[class*="userSpecialtyModalRate"] > span::after {
	bottom: 5px;
	right: 0;
	width: 29px;
	height: 41px;
	background-image: url(/kojin/column/jutaku/user_specialty/images/modal_arrow_down_01.png);
}
[class*="userSpecialtyModalRate"] .text {
	font-size: 2rem;
	line-height: 1.5;
}
[class*="userSpecialtyModalRate"] .num {
	font-size: 4.8rem;
}
.userSpecialtyModalRate01 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/modal_ico_01.png);
}
.userSpecialtyModalRate02 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/modal_ico_02.png);
}
.userSpecialtyModalRate03 > span::before {
	background-image: url(/kojin/column/jutaku/user_specialty/images/modal_ico_03.png);
}


@media screen and (max-width: 767px) {
	/* userSpecialtyNavi */
	.userSpecialtyNaviList01 {
		width: auto;
	}
	.userSpecialtyNaviList01 .naviLink {
		padding: 6px 8px;
		font-size: 1.2rem;
		line-height: 1.333;
	}
	.userSpecialtyNaviList01 .naviLink:hover {
		background: #fff;
	}
	.userSpecialtyNaviList01 .naviLink::before {
		left: auto;
		right: 0;
		height: 81%;
	}
	.userSpecialtyNaviList01 .listItem:last-child .naviLink::before,
	.userSpecialtyNaviList01 .listItem:last-child .naviLink::after {
		content: none;
	}
	.userSpecialtyNaviList01 [class*="naviIcon"] > span {
		padding: 40px 0 0;
	}
	.userSpecialtyNaviList01 [class*="naviIcon"] > span::before {
		top: 0;
		left: 50%;
		transform: translateX(-50%) translateY(0);
	}

	/* userSpecialtyMainContent */
	.userSpecialtyMainContent {
		padding: 0 0 80px;
	}
	.userSpecialtyMainContentInner {
		width: auto;
		margin: 0 auto;
	}

	/* userSpecialtyTopColumn */
	.userSpecialtyTopColumn01 {
		display: block;
	}

	/* userSpecialtyTopMvBlock */
	.userSpecialtyTopMvBlock01 {
		height: 430px;
		background-image: linear-gradient(to bottom, #dfebf9 0px, #dfebf9 317px, #000 317px, #000 318px, #c6e2b1 318px, #c6e2b1 429px, #000 429px, #000 430px);
	}
	.userSpecialtyTopMvInner {
		top: 0;
		left: 50%;
		max-width: 375px;
		min-width: 375px;
		height: 430px;
		margin: 0 0 0 -187px;
		background-image: url(/kojin/column/jutaku/user_specialty/images/index_mv_bg_01_sp.png);
	}
	.userSpecialtyTopMvTtl {
		padding-top: 15px;
	}
	[class*="userSpecialtyTopMvBalloon"]:hover {
		opacity: 1;
	}
	.userSpecialtyTopMvBalloon01 { top: 168px; left: 13px;}
	.userSpecialtyTopMvBalloon02 { top: 146px; left: 165px;}
	.userSpecialtyTopMvBalloon03 { top: 115px; right: 6px;}
	.userSpecialtyTopMvBalloon04 { top: 236px; right: 22px;}
	@media screen and (max-width: 320px) {
		.userSpecialtyTopMvBalloon01 { left: 30px;}
		.userSpecialtyTopMvBalloon03 { right: 30px;}
		.userSpecialtyTopMvBalloon04 { right: 30px;}
	}
	.userSpecialtyMvBoardBlock {
		top: auto;
		bottom: -103px;
	}
	.userSpecialtyMvBoardArticle01:hover .thumbnailImg > img {
		transform: scale(1);
	}
	.userSpecialtyMvBoardArticle01:hover .articleTtl {
		text-decoration: none;
	}

	/* userSpecialtyTopContent */
	.userSpecialtyTopContent01 {
		max-width: 100%;
		min-width: 0;
		margin-left: 0;
	}
	.userSpecialtyTopContentInner {
		padding: 120px 10px 0;
	}

	/* userSpecialtyMoreArticle */
	.userSpecialtyMoreLink01:hover > span {
		text-decoration: none;
	}

	/* userSpecialtyTopCardBlock */
	a.userSpecialtyTopCardBlock01:hover {
		transform: scale(1);
	}

	/* userSpecialtyMenuBlock */
	.userSpecialtyMenuBlock01 {
		margin: 30px -10px 0;
		padding: 20px 10px;
	}

	/*-------------------------------------------
	modal
	-------------------------------------------*/
	.mcs-boxModal .mcs-itemModal .userSpecialtyCustomModal01 {
		margin: 0 -10px;
	}
}

@media print {
	.userSpecialtyNaviList01 {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
}
