﻿@charset "UTF-8";

body {
	background: url(../bg/bg_art.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 40%;
}

main {
	padding-top: 2%;
	width: 70%;
}
.intro__inner {
	margin: 40px 0 100px 8%;
	width: 100%;
}
.intro__inner h3 {
	display: inline-block;
	margin-bottom: 20px;
//	font-family: 'Zen_Kaku_Gothic_Antique',sans-serif;
	font-size:1.6rem;
	line-height:1.2;
	color: #333;
}
.intro__inner p {
	margin-bottom: 20px;
	width: 70%;
	font-size:0.95rem;
	line-height:1.6;
	letter-spacing: 1px;
	color: #666;
}
.intro__inner p.iTop {
	margin-top: 45px;
}
.artArea {
	width: 100%;
}
.artArea h4 {
	margin-left: 7%;
//	font-weight: normal;
	font-size: 2rem;
	line-height: 2;
	color: #333;
}

.artMenu {
	width: 80%;
	background: url(../art/art_base_mono2.jpg);
	background-size: cover;
}
.artmenu__first {
	margin: 2% auto 3%;
	padding: 10px;
	width: 76%;
}
.artmenu__first tr {
	display: flex;
	margin: 5% 0;
}
.artmenu__first th {
	width: 40%;
	font-weight: normal;
}
.artmenu__first td {
	width: 60%;
	font-size: 0.9rem;
	line-height: 1.4;
	letter-spacing: 1px;
}

.art__slide {
	margin: 120px auto 80px;
	width: 90%;
}
.art__slide h4 {
	margin-bottom: 10px;
//	font-weight: normal;
	font-size: 2rem;
	line-height: 2;
	color: #333;
}
.art__slide p {
	margin-top: 10px;
	font-size: 0.75rem;
	line-height: 1.8;
	text-align: center;
}

.art__info {
	margin: 0 0 8% 6%;
	width: 56%;
}
.art__info h4 {
	margin-bottom: 10px;
	font-weight: normal;
	font-size:1.5rem;
	line-height:2;
	color: #333;
}
.art__info p {
	margin: 0 0 20px 2%;
	width: 80%;
	font-size: 0.9rem;
	line-height: 1.8;
	letter-spacing: 2px;
}
.access {
	margin: 0 0 8% 6%;
	width: 60%;
}

/* Response=============================================*/

@media screen and (max-width:1024px){
	.intro__inner {
		margin: 6% 0 40px 4%;
		width: 100%;
	}
	.intro__inner p {
		width: 70%;
	}
}
@media screen and (max-width:980px){
	main {
		width: 100%;
	}
	.intro__inner {
		margin: 80px 0 40px 8%;
		width: 100%;
	}
	.intro__inner p {
		width: 70%;
	}
	.artArea {
		margin-left: 5%;
	}
	.art__gallery {
		margin: 10% auto 0;
		width: 100%;
	}
	.artArea {
		margin: 0;
		width: 98%;
	}
	.artArea h4 {
		margin-left: 10%;
	}
	.artMenu {
		margin: 0 auto;
		width: 90%;
	}
	.artmenu__first {
		width: 90%;
	}
	.art__info {
		margin: 0 auto 6%;
		width: 84%;
	}
	.art__info p {
		width: 100%;
		font-size: 0.95rem;
		text-align: clear;
		overflow-wrap: break-word;
	}
	.access {
		margin: 0 auto 6%;
		width: 80%;
	}
}
@media screen and (max-width:780px){
	.intro__inner {
//		margin: 10% 0 0 8%;
	}
	.intro__inner h3.second {
		margin-left: 10%;
	}
	.artArea {
		margin: 0 auto;
		width: 98%;
	}
	.artMenu {
		margin: 0 auto;
		width: 96%;
	}
	.artMenu table {
		margin: 0 auto;
		width: 90%;
	}
	.artMenu tr {
		flex-direction: column;
	}
	.artArea th,
	.artArea td {
		width: 100%;
	}
	.art__slide p {
		margin-top: 10px;
		font-size: 0.75rem;
		line-height: 1.2;
		text-align: center;
}
}
@media screen and (max-width:500px){
	main {
		margin: 0 auto;
		width: 90%;
	}
	.intro__inner {
		margin: 18% 0 0 0;
		width: 98%;
	}
	.intro__inner p {
		width: 96%;
	}
	.artArea {
		margin: 0;
		width: 98%;
	}

	.art__info {
		margin: 0 auto 6%;
		width: 90%;
	}
/*
	.art__info p {
		width: 100%;
		font-size: 0.95rem;
		text-align: clear;
		overflow-wrap: break-word;
	}*/
}
