#fkoshiennews {
	background-color: #FCF2F6;
}
.sharearea {
	margin: 40px 0 12px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.sharetitle {
	letter-spacing: .5px;
	margin-bottom: 5px;
	font-size: 13px;
	line-height: 23px;
	color: #9E9E9E;
}
.shareiconarea {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.shareitem {
	margin: 0 40px;
}
.shareicon {
	width: 55px;
	height: 55px;
	cursor: pointer;
}
.shareicon:hover {
	opacity: .7;
}
.contentcontainer_blog {
	padding: 5px 5% 0px 0;
}
.contentboxcontainer_blog {
	min-height: 720px;	/* For CLS */
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.blogbox {
	width: auto;
	margin: 0 0 30px 20px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.blogbox a {
	color: inherit;
	text-decoration: none;
}
.blogmaininfoarea {
	width: 240px;
	margin-left: 5px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
}
.blogpostsarea {
	max-width: 270px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.blogpostbox {
	margin-bottom: 3px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.blognamearea {
	text-align: center;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: .3px;
}
.blognameoutlinearea {
	font-size: 14px;
	line-height: 22px;
	color: #424242;
	text-align: center;
}
.blogpostdate {
	font-size: 12px;
	line-height: 18px;
	color: #9E9E9E;
}
.blogposttitle {
	font-size: 14px;
	line-height: 20px;
	color: #616161;
}
.contentareaheader_sub_bloglist, .contentareaheader_sub_small {
	font-size: 16px;
	font-weight: normal;
}
.blognewicon {
	font-size: 9px;
	line-height: 9px;
	padding: 2px;
	margin-right: 5px;
	white-space: nowrap;
	color: #2979FF;
	border: 1px solid #2979FF;
}
/* MEDIA START **********************************************/
@media (max-width: 1700px) {
.blogbox {
	margin-left: 7px;
	margin-bottom: 20px;
}
.blogmaininfoarea {
	width: 200px;
	margin-left: 2px;
}
.blogpostsarea {
	max-width: 220px;
}
} /* MEDIA END **********************************************/
/* MEDIA START **********************************************/
@media (max-width: 1360px) {
.blogbox {
	margin-left: 20px;
	margin-bottom: 30px;
}
.blogmaininfoarea {
	width: 240px;
	margin-left: 5px;
}
.blogpostsarea {
	max-width: 270px;
}
} /* MEDIA END **********************************************/
/* MEDIA START **********************************************/
@media (max-width: 1130px) {
.blogbox {
	margin-left: 20px;
}
.contentboxcontainer_blog {
	min-height: 320px;	/* For CLS */
	flex-wrap: nowrap;
}
.blogbox {
	margin-bottom: 10px;
}
} /* MEDIA END **********************************************/
/* MEDIA START **********************************************/
@media (max-width: 480px) {
.contentboxcontainer_blog {
	min-height: 320px;	/* For CLS */
	flex-wrap: nowrap;
}
.blogbox {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	margin-bottom: 10px;
}
.blogmaininfoarea {
	width: 240px;
	margin-left: 0px;
}
.blogpostsarea {
	width: 240px;
	max-width: 240px;
}
.contentimage_blog {
	width: 120px;
	height: 120px;
}
.blogpostbox {
	margin-bottom: 3px;
}
.blogpostdate {
	font-size: 8px;
	line-height: 12px;
}
.blogposttitle {
	font-size: 11px;
	line-height: 14px;
}
.shareitem {
	margin: 0 20px;
}
.shareicon {
	width: 40px;
	height: 40px;
	cursor: pointer;
}
} /* MEDIA END **********************************************/
/* searchtag */
.contentboxcontainer_searchtag {
	flex-wrap: wrap;
}
.searchtagbox {
	width: auto;
	margin: 0 10px 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
}
.searchtagicon {
	width: 80px;
	height: 80px;
	opacity: .6;
}
.searchtagnamearea {
	text-align: center;
	width: 100px;
	font-size: 13px;
	line-height: 19px;
}
.searchtaganchor {
	text-decoration: none;
	color: inherit;
}
/* materialtag */
.contentboxcontainer_materialtag {
	flex-wrap: wrap;
}
.materialtagbox {
	width: auto;
	margin: 0 6px 9px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
}
.materialtagicon {
	border: solid 2px #BCAAA4;
	background: radial-gradient(white, #FAF8F7);
	color: #BCAAA4;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	padding: 5px 9px;
	border-radius: 5px;
}
.materialtagnamearea {
	width: auto;
	margin-top: 2px;
	max-width: 60px;
	text-align: center;
	font-size: 11px;
	line-height: 14px;
	color: #757575;
}
.materialtaganchor {
	text-decoration: none;
	color: inherit;
}
/* collectiontag */
.contentboxcontainer_collectiontag {
	flex-wrap: wrap;
	min-height: 80px;
}
.collectiontagbox {
	width: auto;
	margin: 0 6px 9px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
}
.collectiontagicon {
	border: solid 2px #9E9E9E;
	background: radial-gradient(#FAFAFA, #FAFAFA);
	color: #9E9E9E;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	padding: 5px 9px;
	border-radius: 0;
}
.collectiontagnamearea {
	width: auto;
	margin-top: 2px;
	/* max-width: 80px; */
	text-align: center;
	font-size: 11px;
	line-height: 14px;
	color: #757575;
}
.collectiontaganchor {
	text-decoration: none;
	color: inherit;
}
.reviewstarcontainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
.createreviewstar, .createreviewdetailstar {
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
}
.createreviewstar {
	width: 40px;
	height: 40px;
	padding: 0 3px;
}
.createreviewstar {
	background-image: url('/img/createreviewstar_off.png');
}
.createreviewstar.star_on {
	background-image: url('/img/createreviewstar_on.png');
}
/* MEDIA START **********************************************/
@media (max-width: 1300px) {
.createreviewstar {
	width: 35px;
	height: 35px;
	padding: 0 1px;
}
} /* MEDIA END **********************************************/
/* MEDIA START **********************************************/
@media (max-width: 480px) {
.createreviewstar {
	width: 30px;
	height: 30px;
	padding: 0 1px;
}
} /* MEDIA END **********************************************/
/* MEDIA START **********************************************/
@media (max-width: 350px) {
.createreviewstar {
	width: 24px;
	height: 24px;
	padding: 0 1px;
}
} /* MEDIA END **********************************************/
.textoncarousel {
	position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
	color: #FFF;
	font-size: 9px;
	line-height: 15px;
	text-align: center;
	user-select: none;
	pointer-events: none;
}
.actiononcarousel {
	position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
	color: #FFF;
	font-size: 9px;
	line-height: 15px;
	text-align: center;
}

/* SPECIAL CAROUSEL **********************************************/
.textoncarousel[carouselid='oemstart'] {
	width: 100%;
	/* pointer-events: auto; */
}
.carousel_oemstartcontainer {
	top: 60px;
	right: 29%;
	width: 60%;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.carousel_oemstarttitle {
	color: #000;
	font-size: 52px;
	line-height: 62px;
	font-weight: bold;
	text-align: right;
}
.carousel_oemstartsubtitle {
	text-align: right;
	color: #000;
	font-size: 24px;
	line-height: 40px;
}
.carousel_oemstartcontainer .highlight {
	color: #C26CA1;
}
.carousel_oemstartbutton {
	margin-top: 50px;
    font-size: 14px;
    line-height: 14px;
    width: auto;
    height: 56px;
    padding: 20px 35px;
    background-color: #C26CA1;
    color: #FFF;
    font-weight: 700;
}
/* MEDIA START **********************************************/
@media (max-width: 500px) {
	.carousel_oemstartcontainer {
		top: 30px;
		right: 16%;
		width: 60%;
	}
	.carousel_oemstarttitle {
		font-size: 28px;
		line-height: 32px;
	}
	.carousel_oemstartsubtitle {
		margin-top: 5px;
		font-size: 14px;
		line-height: 20px;
	}
	.carousel_oemstartbutton {
		margin: 20px 0 0;
		font-size: 12px;
		height: auto;
		line-height: 12px;
		padding: 15px 20px;
	}
} /* MEDIA END **********************************************/
	
/* カルーセルの切り替えは margin-left ではなく transform で動かす(レイアウトが動かないので CLS に数えられない)。
   位置(margin-left)はどの状態も ax_style.css の中央寄せのままにし、状態ごとのずれを箱の幅(100%)の translateX で表す */
.carouselbox {
	transition: transform 300ms ease-in-out;
}
.carouselbox[carouselcontrol='readytoleft'], .carouselbox[carouselcontrol='readytoright'],
.carouselbox.slideouttoleft, .carouselbox.slideintoleft, .carouselbox.slideouttoright, .carouselbox.slideintoright {
	margin-right: -750px;
}
.carouselbox[carouselcontrol='readytoleft'], .carouselbox.slideouttoright {
	transform: translateX(-100%);
}
.carouselbox[carouselcontrol='readytoright'], .carouselbox.slideouttoleft {
	transform: translateX(100%);
}
.carouselbox.slideintoleft, .carouselbox.slideintoright {
	transform: none;
}
@media (min-width: 1500px) {
	/* JS(apparelX.initCarousel)が読み込み後に合わせる高さ(幅の 1/5)と矢印の位置を最初から当て、JS が動いたときに下の欄が動かないようにする */
	.carouselwindow {
		height: 20vw;
	}
	.carouselarrow {
		margin-top: calc(-10vw - 25px);
	}
	.carouselbox[carouselcontrol='readytoleft'], .carouselbox[carouselcontrol='readytoright'],
	.carouselbox.slideouttoleft, .carouselbox.slideintoleft, .carouselbox.slideouttoright, .carouselbox.slideintoright {
		margin-right: -50%;
	}
}
@media (max-width: 600px) {
	.carouselbox[carouselcontrol='readytoleft'], .carouselbox[carouselcontrol='readytoright'],
	.carouselbox.slideouttoleft, .carouselbox.slideintoleft, .carouselbox.slideouttoright, .carouselbox.slideintoright {
		margin-right: -500px;
	}
}
@media (max-width: 480px) {
	.carouselbox[carouselcontrol='readytoleft'], .carouselbox[carouselcontrol='readytoright'],
	.carouselbox.slideouttoleft, .carouselbox.slideintoleft, .carouselbox.slideouttoright, .carouselbox.slideintoright {
		margin-right: -250px;
	}
}

/* カルーセルの画像のリンク(docs/apparelx-banner-manager/plan.md §20)。共通の a img:hover の半透明は打ち消し、キーボードで選んだときだけ画像の内側に枠を出す */
.carousellink {
	display: block;
}
.carousellink img:hover {
	opacity: 1;
}
.carousellink:focus-visible img {
	outline: 3px solid #424242;
	outline-offset: -3px;
}