@charset "UTF-8";

/* mainここから
================================================ */
.box{
    display: flex;/* フレキシブルボックスに */
    position: relative;
}

.box_img_top {
    position: absolute;
    top: 140px;
    left: 40px;
    right: 40px;
    bottom: 60px;
}

@media screen and (min-width:601px) {
    .box_img_top {
        position: absolute;
        top: 150px;
        left: 90px;
        right: 90px;
        bottom: 70px;
    }
}

.box_img {
    position: absolute;
    top: 80px;
    left: 40px;
    right: 40px;
    bottom: 60px;
    color: #FFF;/* 文字色 */
    display: flex;/* フレキシブルボックスに */
    justify-content: center;/* 横方向 中央配置 */
    align-items: center;/* 縦方向 中央配置 */
    text-align: center;/* 水平方向揃え方指定 */
    font-weight: 600;/* 文字太さ */
}

.box_img h2 {
    font-size: clamp(1.976rem, 1.976rem + ((1vw - 0.2rem) * 2.771), 3.5rem);/* 文字サイズ */
    font-weight: 400;/* 文字太さ */
}

@media screen and (min-width:601px) {
    .box_img {
    position: absolute;
    top: 110px;
    left: 90px;
    right: 90px;
    bottom: 70px;
    color: #FFF;/* 文字色 */
    display: flex;/* フレキシブルボックスに */
    justify-content: center;/* 横方向 中央配置 */
    align-items: center;/* 縦方向 中央配置 */
    text-align: center;/* 水平方向揃え方指定 */
    font-weight: 600;/* 文字太さ */
    }
}

#box_img_home {
    display: block;
    text-align: center;
    width: auto;
    height: auto;
    /* min-width: 100%;
    max-width: 100%; */
    background-color: #000;
    /* background: url("../img/home_home.jpg") no-repeat center;/* 背景プロパティの一括指定 */
    /*background-size: cover;/* 縦横比そのまま、表示領域全体をカバーする最小サイズ */
}

#box_img_home video {
    width: auto;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    object-fit: cover;
}

@media screen and (min-width:601px) {
    #box_img_home video {
        width: auto;
        height: 100%;
        min-width: auto;
        max-width: 100%;
        object-fit: cover;
    }
}

.site_discription h2{
    position: absolute;/* 絶対配置モードに */
    color: black;
    font-family: "Source Serif Pro", serif;/* フォントを指定 */
    font-size: clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.255), 30px);/* 文字サイズ */
    line-height: 1.2;/* 行間 */
    text-align: start;/* 行揃え位置指定 */
    top: 70px;/* 上の空間 */ 
    left: 30px;/* 左の空間 */ 
}

@media screen and (min-width:601px) {
    .site_discription h2 {
        left: 50px;/* 左の空間 */
    }
    
}

.next_exhibition {
    display: grid;
    position: absolute;/* 絶対配置モードに */
    color: #FFF;
    background-color: rgb(255 255 255 / 5%);
    backdrop-filter: blur(1px);
    margin: 5px;
    padding: 5px;
    top: 0px;/* 下の空間 */ 
    right: 0px;/* 右の空間 */ 
}

.next_exhibition h3 {
    text-align: right;
    margin-bottom: 0px;
    font-size: 1.4em;
    /* line-height: 1em; */
}

.next_exhibition table {
    /* border-spacing: 5px; */
    width: 100%
}

.next_exhibition th, td {
    display: block;
    font-size: 0.9em;
    font-weight: normal;
    text-align: right;
    left: 0px;
}

.next_exhibition th {
    margin-top: 10px;
}

/* .next_exhibition td {
    position: relative;
    border-spacing: 10px;
    left: 5px;
}

.next_exhibition a {
    margin-left: 10px;
} */

@media screen and (min-width:601px) {
    .next_exhibition  {
        margin: 10px;
    }
}

#box_img_about{
    background: url("../img/home_about.jpg") no-repeat center;
    background-size: cover;
}

#box_img_works{
    background: url("../img/home_works.jpg") no-repeat 0% 80%;;
    background-size: cover;
}

#box_img_journal{
    background: url("../img/home_journal.jpg") no-repeat center;
    background-size: cover;
}

#box_img_contact{
    background: url("../img/home_contact.jpg") no-repeat center;
    background-size: cover;
}


/*===========================================================*/
/* 印象編　6-1　スクロールすると1画面移動*/
/*===========================================================*/




/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:3px;
	top: 50%;
  	transform: translateY(-50%);
	font-size: 0.9em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#000;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.7s ease;
	transition: opacity 0.7s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*600px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:600px) { 
	.pagination a .hover-text{
		display: none;
	}	
}