@charset "utf-8";

/*-----------------------------------------
		最新の展覧会 /exhibition/present/
-----------------------------------------*/
#main.present {
}
#main.present .title-style01{
	margin-bottom: 15px;
}
#main.present .period{
	margin-bottom: 60px;
}
#main.present .period span{
background: #9a0c29;
padding: 5px 10px;
margin-right: 15px;
font-weight: bold;
color: #fff;
}
#main.present .btn-style01.pdf a {
	background: url(../img/icon_pdf.png) 94% center no-repeat #dfdbd3;
	background-size: 14px auto;
}
#main.present .column.white-box {
/*padding: 25px 30px;*/
padding:0;
background-color: #fff;
}
#main.present  .title-style02 span{
 font-size: 18px;
}
#main.present .img-box01 .text-left .column02 p{
	margin-bottom: 20px;
}
#main.present .column.white-box h3.title-style02 span{
display: block;
float: left;
color: #9a0c29;
border-right: 5px #dfdbd3 solid;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ ゴシック","MS Gothic","Osaka－等幅",Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 32px;
height: 2em;
line-height: 1;
padding-right: 16px;
margin-right: 16px;
}
#main.present .column.white-box h3.title-style02{
background: #fff;
border-left: none;
font-family: "游明朝体", "Yu Mincho", YuMincho, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ ゴシック","MS Gothic","Osaka－等幅",Verdana,Arial,Helvetica,sans-serif;
font-size: 26px;
margin:25px 30px 30px;
line-height: 115%;
}
#main.present .column.white-box p{
margin:0 30px 25px;
}
#main.present dl{
}
#main.present dd {
 font-weight: bold;
	line-height: 50px;
	background: url(/common/img/icon_line01.png) left 15px no-repeat;
	padding-left: 20px;
	float: left;
	width: 5em;
	font-size: 18px;
}
#main.present dt {
	line-height: 50px;
	margin-bottom: 10px;
	padding-left: 20px;
	font-size: 24px;
}
#main.present dt span{
	font-size: 18px;
}
#main.present .three-column,
#main.present .two-column_small{
	overflow: hidden;
	margin: 11px 0 0;
}
#main.present .three-column .column{
	width: 31.42%;
	float: left;
}
#main.present .two-column_small .column {
	width: 48.38%;
	float: left;
}
#main.present .three-column .column:nth-of-type(3n),
#main.present .two-column_small .column:nth-of-type(2n) {
	float: right;
}
#main.present .three-column .column:nth-of-type(3n+1),
#main.present .two-column_small .column:nth-of-type(2n+1) {
 margin-right: 2.85%;
	clear: both;
}
#main.present .caption{
 display: block;
 padding: 10px 14px;
 font-size: 14px;
 line-height: 1.5;
 background-color: #fff;
}
#main.present .is-sp{
 display: none;
}

@media screen and (max-width: 750px) {
#main.present .column.white-box {
 width: auto;
 margin-bottom: 20px;
}
#main.present .btn-style01.pdf{
	width: 100%;
	margin-top: 20px;
}
#main.present .last{
	margin-bottom: 0!important;
}
}
@media screen and (max-width: 640px) {
#main.present .img-box01 .text-left .title-style01{
 margin-top: 0;
}
#main.present .period {
 margin-bottom: 30px;
}
#main.present .img-box01 .img-right.is-sp img{
	margin: 0 auto;
 display: block;
 width: 100%;
}
#main.present .img-box01 .img-right.is-sp .caption{
	width: auto;
	margin: 0 auto;
}
#main.present .column.white-box {
 padding: 1px 7.813%;
}
#main.present .column.white-box h3.title-style02 span{
display: block;
float: left;
font-size: 28px;
height: 2em;
line-height: 1;
padding-right: 16px;
margin-right: 16px;
}
#main.present .column.white-box h3.title-style02{
background: #fff;
border-left: none;
font-size: 20px;
margin:20px 0 2em;
line-height: 115%;
height: 2.25em;
}
#main.present .column.white-box h3.title-style02 br{
	display: none;
}
#main.present .column.white-box:last-child{
 margin-bottom: 20px;
}
#main.present .column.white-box p{
margin:0 0 25px;
}
#main.present dd {
 background: url(/common/img/icon_line01.png) left 8px no-repeat;
 line-height: 30px;
 font-size: 16px;
}
#main.present dt {
 line-height: 30px;
 font-size: 16px;
}
#main.present dt span {
 font-size: 13px;
}
#main.present .three-column .column,
#main.present .two-column_small .column{
 width: 100%;
	float: none;
}
#main.present .two-column_small .column:last-child{
 margin-bottom: -20px;
}
#main .img-box01 .img-left img,
#main.present .three-column .column img,
#main.present .two-column_small .column img,
#main.present .img-right img{
 display: block;
 margin: 0 auto;
 width: 100%;
}
#main .img-box01 .img-left .caption,
#main.present .three-column .column .caption,
#main.present .two-column_small .column .caption,
#main.present .img-right .caption{
	width: auto;
	margin: 0 auto 20px;
}
#main.present .img-right .caption{
}
#main.present .is-pc{
 display: none;
}
#main.present .is-sp{
 display: block;
}
}
@media screen and (max-width: 435px) {
#main.present .period {
font-size: 13px;
}
}

@media screen and (max-width: 415px) {
#main.present .period span {
 padding: 5px;
 margin-right: 5px;
}
}

@media screen and (max-width: 395px) {
#main.present .period span {
 display: block;
 margin-bottom: 5px;
}
#main.present .title-style02{
padding: 10px;
}
#main.present .column.white-box h3.title-style02 span{
font-size: 24px;
padding-right: 10px;
margin-right: 10px;
}
#main.present .column.white-box h3.title-style02 {
font-size: 18px;
}
}

@media screen and (max-width: 346px) {
#main.present .column.white-box h3.title-style02 span{
font-size: 20px;
}
#main.present .column.white-box h3.title-style02 {
font-size: 16px;
}
}
@media screen and (max-width: 320px) {
#main.present .column.white-box h3.title-style02 span{
font-size: 18px;
}
#main.present .column.white-box h3.title-style02 {
font-size: 15px;
}
}


/*-----------------------------------------
		年間スケジュール
-----------------------------------------*/

#main.year-schedule .sp-show {
	display: none;
}
#main.year-schedule .title{
	margin: 0 0 30px;
	padding: 0 0 15px;
	background: none;
	border-bottom: 1px solid #dfdbd3;
	font-size: 20px;
	color: #000;
}
#main.year-schedule .column01{
	width: 280px;
}
#main.year-schedule .column01 img{
	border: 2px solid #d4cfc6;
	box-sizing: border-box;
}
#main.year-schedule .box-style01 .text-area .column02{
	margin-right: 320px;
}
#main.year-schedule .later .btn-style02.pc-show{
	margin: 0;
}
@media screen and (max-width: 750px) {
	#main.year-schedule .box-style01 .text-area .column02{
		margin-right: 0;
	}
	#main.year-schedule .box-style01 .text-area .column02 .img{
		width: 100%;
		border: 3px solid #d4cfc6;
	}
	#main.year-schedule .box-style01 .text-area .column02 .img img{
		width: 100%;
	}
}
@media screen and (max-width: 640px) {
	#main.year-schedule .later .btn-style02.pc-show {
		display: none;
	}
	#main.year-schedule .sp-show {
		display: inherit;
	}
	#main.year-schedule .title{
		margin: 0 0 20px;
		padding: 0 0 10px;
		font-size: 14px;
	}
}

/*-----------------------------------------
		併設展示
-----------------------------------------*/
#main.hogehoge {
}
#main.establishment strong{
	display: block;
	font-size: 14px;
}
@media screen and (max-width: 750px) {
}
@media screen and (max-width: 640px) {
}

/*-----------------------------------------
		過去の展覧会
-----------------------------------------*/
#main.past-exhibition dd {
font-weight: bold;
	line-height: 1.6;
	background: url(/common/img/icon_line01.png) left 0 no-repeat;
	padding-left: 20px;
}
#main.past-exhibition dt {
	margin-bottom: 10px;
/*	font-weight: bold;*/
	font-size: 14px;
	padding-left: 20px;
}
@media screen and (max-width: 750px) {
}
@media screen and (max-width: 640px) {
	#main.past-exhibition dd {
		font-size: 12px;
	}
}

/*-----------------------------------------
		水曜講演会会員制度
-----------------------------------------*/
#main.kouen-utilization ul{
	margin: 10px 0 20px;
}

/*-----------------------------------------
		出光美術館について
-----------------------------------------*/
#main.outline-about .box-inner{
	overflow: hidden;
}
#main.outline-about .about-list table {
	border: 0;
	border-spacing: 0;
	border-collapse: separate;
	width: 100%;
}
#main.outline-about .about-list th {
	width: 20%;
	padding: 20px 40px 20px 0;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	min-width: 150px;
}
#main.outline-about .about-list td {
	padding: 20px 0 20px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
}

@media screen and (max-width: 640px) {
	#main.outline-about .box-inner .img-box01 .text-left .lead{
	 margin: 20px 0 0;
	}
	#main.outline-about .btn-style02{
	 margin: 15px 0 25px;
	 width: 100%;
	}
#main.outline-about .about-list th {
	width: 20%;
	padding: 20px 0;
	min-width: 120px;
}
}
@media screen and (max-width: 400px) {
#main.outline-about .about-list th {
	width: 20%;
	padding: 20px 0;
	min-width: 80px;
}
}

/*-----------------------------------------
		イベント
-----------------------------------------*/
#main.event #event2 {
	background-color: #f9f8f6;
	padding-bottom: 80px;
	margin-bottom: 0;
}
#main.event .white-box {
	margin-bottom: 80px;
}
#main.event .white-box table {
	border: 0;
	border-spacing: 0;
	border-collapse: separate;
	min-width: 100%;
	border-top: 1px solid #e0e0e0;
	margin-bottom: 10px;
}
#main.event .white-box table th {
	padding: 5px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	color: #7a766e;
}
#main.event .white-box table td {
	padding: 5px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
}
#main.event .white-box h5{
	font-size: 20px;
	font-weight: bold;
	margin: 5px 0 10px;
	text-align: center;
}
#main.event .white-box p{
	font-size: 14px;
}
@media screen and (max-width: 640px) {
#main.event #event2 {
	padding-bottom: 40px;
}
#main.event .btn-style01{
 display: block;
 margin: 0 auto;
 float: none;
}
#main.event .img-box01:nth-child(3){
 margin-top: 20px;
}
#main.event .white-box {
	margin-bottom: 40px;
}
#main.event .white-box table th,
#main.event .white-box table td {
width: 100%;
display: block;
}
#main.event .white-box table th{
border-bottom: none;
}
}
/*-----------------------------------------
		ミュージアムショップ
-----------------------------------------*/
#main.picture-museum h4{
	line-height: 24px;
	font-size: 20px;
}
#main.picture-museum .subtitle{
	display: block;
	font-size: 16px;
}
#main.picture-museum .img-left{
	text-align: right;
}
#main.picture-museum .list-museum{
	border-top: 1px solid #e0e0e0;
}
#main.picture-museum dl{
	border-bottom: 1px solid #e0e0e0;
	padding: 6px 0;
}
#main.picture-museum dt{
	float: left;
	width: 30%;
	vertical-align: top;
	color: #949088;
}
#main.picture-museum dd{
	display: inline-block;
	width: 70%;
}

/*-----------------------------------------
		お知らせ一覧
-----------------------------------------*/
#main.archive-news dl{
	padding: 15px 0;
	border-bottom: 1px solid #e0e0e0;
}
#main.archive-news dt{
	display: inline-block;
	width: 17%;
	padding: 0 0 0 10px;
	vertical-align: top;
}
#main.archive-news dd{
	display: inline-block;
	width: 78%;
	padding-left: 2%;
	border-left: 2px solid #dfdbd3;
}
@media screen and (max-width: 750px) {
	#main.archive-news dt,
	#main.archive-news dd{
		display: block;
		width: 100%;
		padding: 0;
		border: none;
	}
	#main.archive-news dt{
		margin-bottom: 0.5em;
		font-weight: bold;
	}
}
@media screen and (max-width: 640px) {
	
}

/*-----------------------------------------
		お知らせ詳細
-----------------------------------------*/
#main.detail-news p{
	margin: 5px 0;
}
#main.detail-news .box-inner {
	position: relative;
}
#main.detail-news small{
	font-size: smaller;
}
#main.detail-news dl{
	margin-bottom: 15px;
}
#main.detail-news ul{
	margin: 10px 0;
}
#main.detail-news .white-box{
	margin: 15px 0;
}
#main.detail-news .img-box02 .img-left{
	width: 18%;
}
#main.detail-news .date {
	position: absolute;
	top: -50px;
	right: 20px;
}

#main.detail-news .past dd {
	font-weight: bold;
	line-height: 1.6;
	background: url(/common/img/icon_line01.png) left 0 no-repeat;
	padding-left: 20px;
}
#main.detail-news .past dt {
	margin-bottom: 10px;
	font-size: 14px;
	padding-left: 20px;
}
@media screen and (max-width: 640px) {
	#main.detail-news {
		margin-top: 40px;
	}
	#main.detail-news .past dd {
		font-size: 12px;
	}
	#main.detail-news .date {
		top: -35px;
		right: 15px;
	}
}

/*-----------------------------------------
		公益財団法人出光美術館について
-----------------------------------------*/
#main.foundation-about .box-inner{
	overflow: hidden;
}
#main.foundation-about .column{
	margin-bottom: 20px;
}
#main.foundation-about dl{
	width: 100%;
	margin-bottom: 10px;
}
#main.foundation-about dt {
	display: inline-block;
	width: 25%;
	font-weight: bold;
}
#main.foundation-about dd {
	display: inline-block;
}

/*-----------------------------------------
		サイトのご利用にあたって
-----------------------------------------*/
#main.siteuse .white-box{
	margin: 20px 0;
}
#main.siteuse ol{
	margin: 15px 0;
}
#main.siteuse ol li{
	margin-left: 2.5em;;
	margin-bottom: 15px;
	text-indent: -2.5em;
}
#main.siteuse .img-box02 .img-left{
	width: 18%;
}

/*-----------------------------------------
		個人情報保護方針（プライバシーポリシー）
-----------------------------------------*/
#main.index-privacy .white-box{
	margin: 20px 0;
}
#main.index-privacy ol li{
	margin-left: 2.5em;;
	text-indent: -2.5em;
}

/*-----------------------------------------
		個人情報の取り扱いについて
-----------------------------------------*/
#main.opinion-privacy .white-box{
	margin: 20px 0;
}
#main.opinion-privacy ol li{
	margin-left: 2.5em;;
	margin-bottom: 5px;
	text-indent: -2.5em;
}

/*-----------------------------------------
		保有個人データの開示、
		訂正および削除の手続きについて
-----------------------------------------*/
#main.data-privacy .white-box{
	margin: 20px 0;
}
#main.data-privacy ol li{
	margin-left: 2.5em;;
	text-indent: -2.5em;
}
#main.data-privacy .img-box02 .img-left{
	width: 18%;
}

/*-----------------------------------------
		免責事項について
-----------------------------------------*/
#main.responsibility-privacy .white-box{
	margin: 20px 0;
}
#main.responsibility-privacy p{
	margin-bottom: 20px;
}
#main.responsibility-privacy ol li{
	list-style: decimal inside;
	margin-left: 1em;
	margin-bottom: 15px;
	text-indent: -1em;
}
/*-----------------------------------------
		ご利用案内
-----------------------------------------*/
#main.utilization section ul.indent {
	margin:20px 0 15px;
}
#main.utilization section ul.indent li {
	padding-left: 1em;
	text-indent: -1em;
}


/*-----------------------------------------
		ミュージアムショップ
-----------------------------------------*/
#main.museum .box-style01 .column01 img{
border: 1px solid #d4cfc6;	
}
@media screen and (max-width: 750px) {
#main.museum .box-style01 .column01 img{
border: 1px solid #d4cfc6;	
}
}
@media screen and (max-width: 640px) {
#main.museum .box-style01 .column02 .img{
border: 1px solid #d4cfc6;	
}
#main.museum .btn-style01{
	width: 100%;
}
}


/*-----------------------------------------
		ミュージアムショップ 図録
-----------------------------------------*/
#main.museum-sub .box-style01 .column01 img{
border: 1px solid #d4cfc6;	
}
#main.museum-sub .box-style01 .images li img{
box-sizing:border-box;
border: 1px solid #d4cfc6;	
}
#main.museum-sub .box-style01 .title{
margin: 0 0 30px;
padding: 0 0 15px;
background: none;
border-bottom: 1px solid #dfdbd3;
font-size: 20px;
color: #000;
}