@charset "UTF-8";

/* popupBox
-------------------------------------------------- */
.popupBox {
	position: fixed;
	bottom: 0;
}
.popupBoxBody {
	width: 100%;
	position: relative;
}
@media screen and (min-width: 960px) {
	.popupBox {
		width: 348px;
		right: 30px;
		z-index: 999;
	}
}

@media screen and (max-width: 959px) {
	.popupBox {
		width: 261px;
		right: 10px;
		z-index: 1000;
	}
}

/* popup
-------------------------------------------------- */

.popup {
	display: inline-block;
	position: absolute;
/*	position: fixed;
	right: 30px;*/
	top: 100%;
	font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo;
	font-weight: bold;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	background-color: #ffffff;
/*	z-index: 999;*/
	overflow: hidden;
	z-index: 10;
}

.popupTtlWrap {
	width: 348px;
/*	display: table;
	vertical-align: middle;
*/
	display: -webkit-flex; /* Safari */
	display: flex;
	overflow: hidden;
	cursor: pointer;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.popupOpen {
	width: 301px;
	height: 47px;
/*	padding-left: 8px;*/
	padding-left: 12px;
/*	display: table-cell;*/
	vertical-align: middle;
	border-right: 1px rgba(0, 0, 0, 0.1) solid;
	position: relative;
}
.popupOpen .jsArrow {
	content: '';
	width: 11px;
	height: 11px;
	display: block;
	position: absolute;
	top: 22px;
	right: 16px;
	transform: rotate(-45deg);
}

.popupOpen .jsArrow.jsArrowActive {
	top: 15px;
	transform: rotate(135deg);
}

.popupOpen:hover {
	opacity: 0.8;
}

.popupTtl {
	width: 250px;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	line-height: 47px;
}

.before .popupTtl {
	letter-spacing: -0.03em;
}


.popupClose {
	width: 47px;
	height: 47px;
/*	display: table-cell;*/
	position: relative;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}
.popupClose:before {
	content: '';
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	top: 19px;
	left: 25px;
	transform: rotate(225deg);
}
.popupClose:after {
	content: '';
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	top: 19px;
	left: 13px;
	transform: rotate(45deg);
}

.popupClose:hover {
	opacity: 0.8;
}

.popupContent {
	display: inline-block;
}

.popupContent:hover {
	text-decoration: none;
}

.popupContentLink {
	height: 100%;
	font-size: 0;/* 画像の場合 */
}

@media screen and (max-width: 959px) {

	.popupOpenBtn {
		width: 35px;
	}

	.popupOpen {
		width: 226px;
/*		padding-left:4px;　文字数通常*/
		padding-left:10px;
	}
	.popupOpen .jsArrow {
		width: 8px;
		height: 8px;
		top: 15px;
		right: 12px;
	}
	
	.popupOpen .jsArrow.jsArrowActive {
		top: 9px;
	}

	.popupOpen:hover {
		opacity: 1;
	}

	.popupClose {
		width: 35px;
		height: 35px;
	}
	.popupClose:before {
		width: 6px;
		height: 6px;
		top: 13px;
		left: 17px;
	}
	.popupClose:after {
		width: 6px;
		height: 6px;
		top: 13px;
		left: 9px;
	}

	.popupTtl {
		width: 195px;
/*		width: 191px;　文字数通常*/
		font-size: 11px;
		font-size: 1.1rem;
		letter-spacing: -0.085em;
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		line-height: 35px;
	}

	.popupContentLink:hover {
		opacity: 1;
	}
}

/* popup
-------------------------------------------------- */
.popup {
	width: 348px;
	height: 417px;
}

.popupTtlWrap {
	height: 47px;
}

.popupClose:hover {
	opacity: 0.8;
}

.popupContent {
	width: 348px;
	height: 370px;
}

.popupContentLink {
	height: 100%;
	font-size: 0;/* 画像の場合 */
}

.popupImgTxt {
	width: 100%;
}

@media screen and (max-width: 959px) {
	.popup {
		width: 261px;
		height: 313px;
	}

	.popupTtlWrap {
		width: 100%;
		height: 35px;
	}

	.popupContent {
		width: 261px;
		height: 278px;
	}

	.popupImgTxt {
		width: 261px;
	}
}

/*以下、デザインによって変更
-------------------------------------------------- */
/*goto201211*/
.goto201211 {
	background-color: #027f77;
}
/* @media screen and (min-width: 960px) {
	.goto201211 .popupTtl {
		font-size: 1.6rem;
	}
} */
.goto201211 .popupOpen {
	background-color: #027f77;
	color: #fff;
}
.goto201211 .popupOpen .jsArrow {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.goto201211 .popupClose {
	background-color: #027f77;
}
.goto201211 .popupClose:before {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.goto201211 .popupClose:after {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.goto201211 .popupContentLinkContent {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

/*pha201202*/
.pha201202 {
	background-color: #b58428;
}
@media screen and (min-width: 960px) {
	.pha201202 .popupTtl {
		font-size: 1.6rem;
	}
}
.pha201202 .popupOpen {
	background-color: #b58428;
	color: #fff;
}
.pha201202 .popupOpen .jsArrow {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.pha201202 .popupClose {
	background-color: #c59030;
}
.pha201202 .popupClose:before {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.pha201202 .popupClose:after {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.pha201202 .popupContentLinkContent {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

/*aaip200221*/
.aaip200221 {
	background-color: #e5da3b;
}
@media screen and (min-width: 960px) {
	.aaip200221 .popupTtl {
		font-size: 1.4rem;
	}
}
.aaip200221 .popupOpen {
	background-color: #e5da3b;
	color: #002eb0;
}
.aaip200221 .popupOpen .jsArrow {
	border-top: 1px solid #0210c1;
	border-right: 1px solid #0210c1;
}
.aaip200221 .popupClose {
	background-color: #ece36c;
}
.aaip200221 .popupClose:before {
	border-top: 1px solid #0210c1;
	border-right: 1px solid #0210c1;
}
.aaip200221 .popupClose:after {
	border-top: 1px solid #0210c1;
	border-right: 1px solid #0210c1;
}
.aaip200221 .popupContentLinkContent {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.aaip200221 .popupContentLinkContentItem {
	width: 100%;
}
.aaip200221 .popupContentLinkContentItem img {
	width: 100%;
	vertical-align: top;
}