@charset "utf-8";

#container {
	width: auto;
	color: #362c2c;
 }
 
#topic_path {
	width: 1220px;
	padding: 10px 0 0;
 }
 
#header {
	clear: both;
	margin: 10px auto 0;
	overflow: hidden;
	width: 1220px;
	text-align: center;
}

#header .bx-wrapper img {
	display: inline;
	max-width: 100%;
}

#header .bx-wrapper .bx-viewport {
	background: none;
	border: none;
	box-shadow: none;
	left: auto;
}
#header .bx-wrapper{
	max-width: 1220px !important;
	margin: 0 auto !important;
	position: relative;
}
#header .bx-wrapper .bx-viewport{
	overflow: visible!important;
}


#header .bx-pager-item {
	display: inline-block;
	margin: 10px 5px 0;
}

#header .bx-pager-item a {
	display: block;
	width: 7px;
	height: 7px;
	overflow: hidden;
	background: #e5e5e4;
	border-radius: 50%;
	text-indent: 120%;
	white-space: nowrap;
}
#header .bx-pager-item a.active {
	background: #989898;
}

#header h1 {
	margin: 30px auto 0;
	font-weight: normal;
	font-size: 2.3em;
	line-height: 1.7em;
	letter-spacing: 0.1em;
}
#header h1 img {
	margin: 24px 0 0;
}

#global_topics {
	margin-top: 54px;
}

#about {
	box-sizing: border-box;
	margin: 64px auto 0;
	padding: 40px 0 0;
	border-top: double 3px #b0b0b1;
	width: 1160px;
	overflow: hidden;
	text-align: center;
}

#about h2 {
	margin: 0 0 0px;
}

#about_title_bottom {
	width: 366px;
	margin: 20px auto 0;
	border-top: solid 1px #d7d8d8;
	font-size: 1.4em;
	line-height: 1.0em;
	position: relative;
}
#about_title_bottom span {
	display: inline-block;
	box-sizing: border-box;
	background: #fff;
	padding: 0 13px 0 15px;
	position: relative;
	top: -8px;
}

#about ul {
	list-style: none;
	margin: 10px auto 0;
	padding: 0;
}

#about ul li {
	display: block;
	box-sizing: border-box;
	margin: 0 0 0;
	padding: 20px 0;
	overflow: hidden;
	border-bottom: dashed 1px #b0b0b1;
}
#about ul li:last-child {
	border-bottom: none;
}

#about ul li img {
	vertical-align: top;
	float: left;
}

#about .about_detail {
	float: right;
	width: 586px;
}

#about .about_detail h3 {
	box-sizing: border-box;
	margin: 35px auto 0;
	padding: 0 0 30px;
	font-weight: normal;
	font-size: 2.5em;
	line-height: 1.0em;
	background: url("../img/index/about_title_line.png") no-repeat center bottom;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {
	#about .about_detail h3 {
		background: url("../img/index/about_title_line@2x.png") no-repeat center bottom;
		background-size: 268px auto;
	}
}

#about .about_detail p {
	box-sizing: border-box;
	margin: 35px auto 0;
	padding: 0 52px 0;
	text-align: left;
	font-size: 1.5em;
	line-height: 2.0em;
}

#about .about_detail a {
	box-sizing: border-box;
	display: block;
	border: solid 1px #878787;
	border-radius: 3px;
	width: 318px;
	margin: 45px auto 0;
	padding: 16px 0;
	text-align: center;
	color: #302c2e;
	font-size: 1.7em;
	position: relative;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#about .about_detail a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-top: 1px solid #302c2e;
	border-right: 1px solid #302c2e;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#about .about_detail a:hover {
	background: #302c2e;
	color: #fff;
	border-color: #302c2e;
}

#about .about_detail a:hover:before {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}





#artist {
	box-sizing: border-box;
	width: 1160px;
	margin: 64px auto 0;
	padding: 38px 0 0;
	border-top: double 3px #b1b1b2;
}

#artist_title {
	margin: 0px auto 0;
	text-align: center;
	font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	font-weight: normal;
	font-size: 3.1em;
	line-height: 1.0em;
	letter-spacing: 0.1em;
	color: #3c3c3c;
}
#artist_title span {
	font-size: 0.4em;
	position: relative;
	display: inline-block;
}
#artist_title span:before,
#artist_title span:after {
	content: "";
	display: block;
	width: 50px;
	height: 1px;
	background: #000;
	position: absolute;
	top: 50%;
}
#artist_title span:before {
	left: -60px;
}
#artist_title span:after {
	right: -60px;
}

#artist ul {
	list-style: none;
	margin: 38px auto 0;
	padding: 0 0 0;
	overflow: hidden;
	display: -webkit-box; /*--- Androidブラウザ用 ---*/
	display: -ms-flexbox; /*--- IE10 ---*/
	display: -webkit-flex; /*--- safari（PC）用 ---*/
	display: flex;

	box-lines: multiple; /*--- Androidブラウザ用 ---*/
	box-pack: justify; /*---webkit-box対応*/
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;

	-ms-flex-wrap: wrap; /*--- IE10用 ---*/
	-webkit-flex-wrap: wrap; /*--- safari（PC）用 ---*/
	flex-wrap: wrap;
}

#artist ul li {
	display: block;
	float: left;
	margin: 3px 0;
}

#artist ul li a {
	box-sizing: border-box;
	display: block;
	width: 576px;
	height: 374px;
	overflow: hidden;
	position: relative;
	background: #f7f4f3;
/*
background: -moz-linear-gradient(left, #faf9f8 0%, #f4efee 75%, #f4efee 100%);
background: -webkit-linear-gradient(left, #faf9f8 0%,#f4efee 75%,#f4efee 100%);
background: linear-gradient(to right, #faf9f8 0%,#f4efee 75%,#f4efee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf9f8', endColorstr='#f4efee',GradientType=1 );
*/
/*
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
*/
}
/*
#artist ul li a:hover {
	opacity: 0.7;
}
*/

#artist .artist_detail {
	float: left;
	width: 234px;
	height: 374px;
	text-align: center;
}

#artist .artist_detail h3 {
	display: table-cell;
	vertical-align: middle;
	width: 234px;
	height: 82px;
	padding: 5px 0 0;
	color: #362c2c;
	font-weight: normal;
	font-size: 1.9em;
	line-height: 1.4em;
}
#artist .artist_detail .artist_rest_icon {
	display: inline-block;
	color: #ca3427;
}

#artist .artist_detail .artist_photo {
	width: 132px;
	height: auto;
}

#artist .artist_detail p {
	width: 174px;
	margin: 20px auto 0;
	text-align: left;
	word-break: break-all;
	color: #5d5555;
	font-size: 1.2em;
	line-height: 1.7em;
	letter-spacing: 0;
}

#artist .board_sample {
	position: absolute;
	top: 27px;
	right: 18px;
}

#artist .board_sample img {
	width: 339px;
	height: auto;
}

#artist ul li a span {
	box-sizing: border-box;
	display: inline-block;
	border: solid 1px #878787;
	border-radius: 3px;
	margin: 10px 0 0;
	padding: 6px 40px 6px 30px;
	color: #302c2e;
	font-size: 1.3em;
	position: absolute;
	bottom: 18px;
	right: 27px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
    background: #fff;
}

#artist ul li a span:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 1px solid #302c2e;
	border-right: 1px solid #302c2e;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#artist ul li a:hover span:before {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
#artist ul li a:hover span {
	background: #302c2e;
	color: #fff;
	border-color: #302c2e;
}

/*
	2枠使用作家
*/
#artist .artist_2block a {
	width: 1160px !important;
	height: 340px !important;
}

#artist .artist_2block .artist_detail {
	width: 454px !important;
}

#artist .artist_2block .artist_2block_detail_top {
	overflow: hidden;
	margin: 52px 0 0 52px;
}

#artist .artist_2block .artist_2block_detail_top img {
	float: left;
}

#artist .artist_2block .artist_2block_detail_top h3 {
	text-align: left;
	height: 134px;
	padding: 0 0 0 32px;
}

#artist .artist_2block p {
	width: 324px;
	margin-left: 28px;
}

#artist .artist_2block .board_sample {
	top: 27px;
	right: 118px;

}
#artist .artist_2block .board_sample img {
	width: 600px;
	height: auto;
}



/*
	記念日の豆知識
*/
#tips {
	text-align: center;
	width: 100%;
	max-width: 1160px;
	margin: 60px auto 0;
	padding: 60px 0;
	background: url("../img/content_border.png") repeat-x center top, url("../img/content_border.png") repeat-x center bottom;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {
	#tips {
		background: url("../img/content_border@2x.png") repeat-x center top, url("../img/content_border@2x.png") repeat-x center bottom;
		background-size: 32px auto, 32px auto;
	}
}

#tips h2 {
	margin: 0px auto 0;
	color: #3c3c3c;
	font-weight: normal;
	font-size: 3.0em;
	line-height: 1.4em;
	letter-spacing: 0.1em;
}

#tips h2 span {
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	top: -7px;
	margin: 0px 0 0;
	padding: 0 80px;
	font-weight: bold;
	font-size: 0.55em;
	line-height: 1.0em;
	letter-spacing: 1px;
	font-family: "ＭＳ Ｐ明朝", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", serif;
}

#tips h2 span:before,
#tips h2 span:after {
	content: "";
	display: inline-block;
	width: 62px;
	height: 20px;
	position: absolute;
	top: -3px;
}

#tips h2 span:before {
	left: 0;
	background: url("../img/anniversary_tips/title_sub_before.png") no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {
	#tips h2 span:before {
		background: url("../img/anniversary_tips/title_sub_before@2x.png") no-repeat;
		background-size: contain;
	}
}

#tips h2 span:after {
	right: 0;
	background: url("../img/anniversary_tips/title_sub_after.png") no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {
	#tips h2 span:after {
		background: url("../img/anniversary_tips/title_sub_after@2x.png") no-repeat;
		background-size: contain;
	}
}

#tips_block_area {
	width: 1040px;
	margin: 0 auto 0;
}

#tips_block_area .tips_block {
	box-sizing: border-box;
	padding: 20px 0 30px;
	border-bottom: dashed 1px #d8d9d9;
	text-align: left;
	overflow: hidden;
	position: relative;
}

#tips_block_area .tips_block h3 {
	font-weight: normal;
	font-size: 1.6em;
	margin: 0;
	color: #362c2c;
	text-align: center;
}

#tips_block_area .tips_block .tips_text {
	margin: 14px 0 0;
	height: 100px;
	overflow: hidden;
	position: relative;
}
#tips_block_area .tips_block .tips_text:after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70%;
	background: linear-gradient(to bottom,rgba(255,255,255,0) 0,white 80%);
}
#tips_block_area .tips_block .tips_text_open:after {
	display: none;
}

#tips_block_area .tips_block .tips_text p {
	font-size: 1.3em;
	line-height: 1.8em;
	color: #5d5555;
	margin: 14px 0;
}
#tips_block_area .tips_block .tips_text p:first-child {
	margin-top: 0;
}

#tips_block_area .tips_block .b_tips_open {
/*	float: right;*/
	position: absolute;
	bottom: 20px;
	right: 0;
	background: #fff;
	box-sizing: border-box;
	padding: 0px 0 0px 96px;
	margin: 0px 0 0;
	font-size: 1.2em;
	line-height: 1.0em;
	text-decoration: underline;
	cursor: pointer;
}
#tips_block_area .tips_block .b_tips_open img {
	vertical-align: middle;
	margin: 0 0 0 10px;
}

#tips #tips_list {
	width: 1040px;
	margin: 15px auto 0;
	overflow: hidden;
}

#tips #tips_list a {
	float: right;
	box-sizing: border-box;
	display: inline-block;
	border: solid 1px #878787;
	border-radius: 3px;
	margin: 0px 0 0;
	padding: 8px 50px 8px 40px;
	color: #302c2e;
	font-size: 1.4em;
	position: relative;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
}

#tips #tips_list a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 1px solid #302c2e;
	border-right: 1px solid #302c2e;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#tips #tips_list a:hover:before {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
#tips #tips_list a:hover {
	background: #302c2e;
	color: #fff;
	border-color: #302c2e;
}