/*!
Theme Name: new_art
Theme URI: http://underscores.me/
Author: art
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nat
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

new_art is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
/* resetcss */
html {
    font-size: 62.5%; 
}
    
body { 
margin: 0;
padding: 0;
width: 100%;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}

body * { 
box-sizing: border-box;
position: relative;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
dt,
dd {
margin: 0; 
}

ul,
ol {
margin: 0;
padding: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
width: 100%; 
height: auto;
vertical-align: bottom; 
}

/* reset.cssここまで*/
/*　共通部分 */
.inner {
    max-width: 1240px;
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}
.container {
    display: flex;
	flex-wrap: wrap;
}
.section-title {
    font-size: 3rem;
    text-align: center;
    line-height: 1.5;
	margin: 0 0 40px 0;
	font-family: "Rouge Script", cursive;
  	font-weight: 400;
  	font-style: normal;
}
.section-title::after {
	display: block;
	content:'';
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 36px;
	height: 3px;
	background-color: #0b0c06;
}
section {
	padding: 80px 0;
}
.menu {
    list-style-type: none;
	display: flex;
	justify-content: center;
}
.menu li {
	margin: 0 0 10px 0;
    font-size: 1.8rem;
}
.menu li a {
    text-decoration: none;
    color: inherit;
}
.btn-area {
	text-align: center;
}
.btn {
	display: block;
	width: 120px;
	height: 40px;
	margin: 0 auto;
	color: #fff;
	background-color: #cebb5b;
	font-size: 1.6rem;
	line-height: 2;
	z-index: 3;
}
.btn:hover {
	opacity: .6;
}
.fade {
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: opacity 1s, visibility 1s, transform 1s;
}
.is-fadein {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 1.4rem;
    line-height: 1;
    z-index: 100;
}
#pagetop > a {
    background: #cebb5b;
    color: #fff;
    width: 60px;
    height: 60px;
    padding: 15px 10px;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 50%;
    opacity: .9;
    transition: all .3s ease;
}
@media screen and (max-width: 480px) {
	.container {
		flex-direction: column;
	}
}
/* header */
.site-header {
	background-color: #0b0c06;
	color: #f7f5f3;
	padding: 20px;
    display: flex;
    justify-content: space-between;
	align-items: center;
}
.site-branding {
	font-size: 3.2rem;
}
nav {
	display: flex;
	justify-content: center;
}
.nav-menu {
    display: flex;
	align-items: center;
}
.nav-menu li {
    margin: 0 20px 0 0;
	color: #f7f5f3;
}
.hamburger-btn {
	display: block;
	position: fixed;
	top: 15px;
	right: 5%;
	padding: 0;
	width: 32px;
	height: 25px;
	border: none;
	background: none;
	display: none;
}
.hamburger-btn span{
    display: block;
	width: 100%;
	height: 2px;
	background: #f7f5f3;
	position: absolute;
	transition: all .3s;
}
.hamburge-btnr span:nth-of-type(1) {
	top: 12px;	
}
.hamburger-btn span:nth-of-type(2) {
	top: 24px;
}
.hamburger-btn span:nth-of-type(3) {
	top: 36px;
}
.hamburger-btn.active span:nth-of-type(1) {
    top: 24px;
    transform: rotate(-45deg);
}
.hamburger-btn.active span:nth-of-type(2) {
	opacity: 0;
}
.hamburger-btn.active span:nth-of-type(3){
    top: 24px;
    transform: rotate(45deg);
}
@media screen and (max-width: 480px) {
    .hamburger-btn {
        display: block;
    }
    .nav-menu {
        display: none;
        flex-direction: column;
    }
    .nav-menu li {
        margin: 0 0 20px 0;
        padding: 0 20px;
		color: #f7f5f3;
    }
    .nav-menu.active {
        display: block;
        position: absolute;
        top: 55px;
        right: 0;
        z-index: 20;
		width: 150px;
		height: 180px;
		background-color: #0b0c06;;
    }
}
/* minimg */
.mainimg {
    background: url(/daf/wp-content/uploads/2024/06/top_msg_bg.png) no-repeat center center /cover;
    height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.leadblk {
	display: flex;
	justify-content: center;
	align-items: center;
}
.lead {
    font-size: 3.2rem;
    line-height: 1.7;
	z-index: 2;
}
/* about*/
.about .inner p {
	width: 90%;
	margin: 0 auto;
	font-size: 1.6rem;
	line-height: 1.7;
	margin: 0 0 40px 0;
}
/* artists */
.slider {
    width: 90%;
    margin: 0 auto;
}
.slider li img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.slider .slick-slide {
    margin: 0 10px;
}
.slider.slick-slider {
    padding-left: 0;
}
.slick-before, 
.slick-after {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    height: 15px;
    width: 15px;
}
.slick-before {
    left: -1.5%;
    transform: rotate(-135deg);
}
.slick-after {
    right: -1.5%;
    transform: rotate(45deg);
}
.slider-sub {
    width: 90%;
    margin: 0 auto;
}
.slider-sub li img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.slider-sub .slick-slide {
    margin: 0 10px;
}
.slider-sub.slick-slider {
    padding-left: 0;
}
.slick-prev.slick-arrow::before,
.slick-next.slick-arrow::before {
    color: #333;
}

/* collections */
.collections-slider {
    width: 90%;
    margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}
.collections-slider li img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.collections-slider .slick-slide {
    margin: 0 10px;
}
.collections-slider.slick-slider {
    padding-left: 0;
}
/* info */
.info {
	background-color: #0b0c06;
	color: #f7f7f8;
}
#info .container {
	margin-bottom: 40px;
}
.info .section-title::after {
	background-color: #f7f7f8;
}
.event-info {
	list-style-type: none;
	padding: 0 0 0 60px;
}
.event-info li {
	font-size: 1.4rem;
	margin: 0 0 10px 0;
}
.map {
	width: calc(50% - 60px);
	margin: 0 0 0 80px;
}
.map iframe {
	width: 400px;
	height: 300px;
}
@media screen and (max-width: 767px) {
	.map {
		margin: 0 0 40px 0;
	}
}
@media screen and (max-width: 480px) {
	.event-info {
		width: 90%;
		margin: 0 0 40px 0;
		padding-left: 0;
	}
	.map {
		width: 100%;
		margin: 0;
	}
	.map iframe {
		width: 100%;
		margin-left: 0;
	}
}
footer {
	background: url(/daf/wp-content/uploads/2024/06/footer-scaled.jpg) no-repeat center center /cover;
	padding: 20px 0 0 0; 
	height: 300px;
	color: #0b0c06;
}
footer::after {
	content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .4);
    position: absolute;
    top: 0;
    left: 0;
}
.footer-menu {
	z-index: 2;
	margin: 0 0 100px 0;
	flex-direction: column;
}
.footer-meni li {
	margin: 0 0 40px 0;
}
.copyright {
	font-size: 1.2rem;
	text-align: center;
	z-index: 2;
}
@media screen and (max-width: 480px) {
	.footer-menu {
		margin: 0 0 70px 0;
	}
}

/* 下層ページ */
.page-child {
	height: 40vh;
}
.page-title {
	font-size: 3.2rem;
    text-align: center;
    line-height: 1.5;
	z-index: 2;
}
.page-title::after {
	display: block;
	font-size: 1.8rem;
}

/* アーティスト紹介 */
.artists-page::after {
	content: 'アーティスト紹介';
}
.card-container {
	margin: 80px auto;
}
.card-container a {
	display: block;
}
.card {
    display: flex;
    flex-direction: row;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
	margin: 0 0 40px 0;
}
.card-container a:nth-child(2n) .card {
	flex-direction: row-reverse;
}
.card img {
    width: 30%;
    flex-shrink: 0;
    object-fit: cover;
}
.card-content {
    flex-grow: 1;
    padding: 20px;
}
.card-content h2 {
	font-size: 2.4rem;
	margin: 0 0 20px 0;
}
.card-content p {
	font-size: 1.6rem;
	line-height: 1.7;
}
@media (max-width: 480px) {
    .card {
        flex-direction: column;
    }

    .card.reverse {
        flex-direction: column;
    }

    .card-image {
        width: 100%;
    }
}
/*　コレクション紹介 */
.collections-page::after {
	content: 'コレクション紹介';
}
.gallery {
    display: flex;
	flex-wrap: wrap;
	width: calc(100% + 40px);
	margin-left: -20px;
	margin-bottom: 40px;
}
.gallery a {
	display: block;
	width: calc((100% - 120px) / 3);
	margin: 20px;
}
.gallery a img {
	aspect-ratio: 4/3;
    object-fit: cover;
}
@media screen and (max-width: 480px) {
	.gallery {
		margin: 0 auto;
	}
	.gallery a {
		width: 90%;
	}
}


/*　アーティスト・作品紹介の詳細ページ */
.item-title {
    width: 100px;
    height: auto;
	position: absolute;
	top: 0;
	left: 0;
}
.item-title h3 {
    writing-mode: vertical-lr;
    font-size: 2.6rem;
	padding: 0 0 0 60px;
	border-right: 1px solid #f7f7f8;
}
.item-wrapper {
    width: calc(100% - 240px);
    margin: 0 0 40px 200px;
}
.item-img {
	margin: 0 0 30px 0;
}
.item-img img {
    width: 300px;
    object-fit: cover;
}
.item-profile h4 {
	font-size: 2.4rem;
	margin: 0 0 30px 0;
	font-weight: 600;
}
.item-profile p {
	font-size: 1.6rem;
	line-height: 1.5;
}
@media screen and (max-width: 480px) {
	.item-title {
		width: 90%;
		top: 0;
		left: 0;
	}
	.item-title h3 {
		font-size: 2.4rem;
		writing-mode: horizontal-tb;
		padding: 0;
		display: inline-block;
		border-right: none;
		border-bottom: 1px solid #0b0c06;
	}
	.item-wrapper {
		width: 100%;
		margin: 60px 0 0 0;
	}
	.item-profile {
		margin: 0 0 40px 0;
	}
}