@charset "utf-8";
/*************************************************************************************/ @media only screen and (max-width: 1280px) {
/*********************************
header
.nav-area
*********************************/
.nav-area h1.logo { width: 120px; }
.nav-area ul.global-navi {
	left: calc(3% + 150px);
	width: calc(94% - 300px);
}
.nav-area ul.global-navi li { padding: 0 0.75vw; }
.nav-area ul.global-navi li a {
	font-size: 1.6rem;
	line-height: 1.6rem;
	padding-bottom: 3px;
}
.nav-area ul.global-navi li a span {
	font-size: 1.1rem;
	line-height: 1.6rem;
}



/****************************************
header
.ht-right
****************************************/
.ht-right,
.ht-right.action {
	width: 120px;
	font-size: 2.4rem;
}
.ht-right span,
.ht-right.action span {
	padding-top: 2px;
	font-size: 1rem;
}



/****************************************
WORKS-SINGLE
****************************************/
.single-work-area .flexslider {}/**flexslider.cssに記述**/
.single-work-area .info-area { width: calc(92.5% - 480px); }
}





/*************************************************************************************/ @media only screen and (max-width: 1023px) {
/****************************************
PEOPLE-SINGLE
people-list-area
****************************************/
.single-people-area .people-list-area {
	width: 180px;
	margin-right: 60px;
}



/****************************************
PEOPLE-SINGLE
people-con-area
****************************************/
.single-people-area .people-con-area { width: calc(100% - 240px); }
}





/*************************************************************************************/ @media only screen and (max-width: 960px) {
/*********************************
header
.nav-area
*********************************/
.nav-area.action { background: none; }
.nav-area ul.global-navi { display: none; }
.nav-area h1.logo { left: calc((100% - 120px) / 2); }



/****************************************
header
.ht-right
****************************************/
.ht-right { display: none; }
body.home .ht-right {
	display: block;
	position: absolute;
}



/****************************************
共通項目
****************************************/
.contents {
	margin: 60px auto;
	padding: 30px 0;
}
.contents:first-of-type { margin-top: 90px; }
.contents#about:first-of-type { margin-top: 60px; }



/****************************************
TOP
about-koisago
koisago-slider
****************************************/
#koisago-slider .slick-list .slick-slide,
#koisago-slider .slick-list .slick-slide .img {
	width: 300px;
	height: 203px;
}



/****************************************
PEOPLE-SINGLE
people-list-area
****************************************/
.single-people-area .people-list-area { display: none; }



/****************************************
PEOPLE-SINGLE
people-con-area
****************************************/
.single-people-area .people-con-area { width: 100%; }



/****************************************
PEOPLE-SINGLE
back-link-box
****************************************/
.back-link-box {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 80px auto;
	background: #000;
	border: 2px solid #000;
	-webkit-transition: margin .5s, background .5s;
	transition: margin .5s, background .5s;
}
.back-link-box p {
	padding: 30px;
	text-align: center;
}
.back-link-box p span.text:before {
	font-weight: bold;
	color: #f5d01f;
	-webkit-transition: color .5s;
	transition: color .5s;
}
.back-link-box p span.left-yajirushi:before {
	text-align: center;
	color: #000;
	background: #f5d01f;
	-webkit-transition: background .5s, color .5s;
	transition: background .5s, color .5s;
}
.back-link-box:hover { background: #f5d01f; }
.back-link-box:hover p span.text:before { color: #000; }
.back-link-box:hover p span.left-yajirushi:before {
	color: #f5d01f;
	background: #000;
}
.back-link-box p.people span.text:before { content: "PEOPLE/人の一覧"; }
.back-link-box p.works span.text:before { content: "WORKS/作品の一覧"; }
.back-link-box p.activity span.text:before { content: "ACTIVITY/活動の一覧"; }



/****************************************
WORKS-SINGLE
****************************************/
.single-work-area { display:block; }
.single-work-area .flexslider {}/**flexslider.cssに記述**/
.single-work-area .info-area {
	width: 100%;
	margin-left: 0;
	margin-top: 80px;
	padding-bottom: 80px;
	border-bottom: 1px solid #000;
}



/***************************************
sns-list
****************************************/
.sns-list { display: none; }
}





/*************************************************************************************/ @media only screen and (max-width: 800px) {
/****************************************
TOP
whatsnew
****************************************/
#whatsnew table th,
#whatsnew table td { display: block; }
#whatsnew table th {
	width: 100%;
	padding-right: 0;
	padding-bottom: 0!important;
	font-size: 1.4rem;
	font-weight: bold;
}
#whatsnew table td {
	width: calc(100% - 10px);
	padding-left: 10px;
	padding-bottom: 20px!important;
}



/****************************************
TOP
activity
****************************************/
ul.ectangle-list li { width: 49%; }
ul.ectangle-list li:not(:nth-child(3n)){ margin-right: 0; }
ul.ectangle-list li:not(:nth-child(2n)){ margin-right: 2%; }
}





/*************************************************************************************/ @media only screen and (max-width: 767px) {
/*********************************
PEOPLE
*********************************/
ul.circle-list li { width: 49%; }
ul.circle-list li:not(:nth-child(3n)){ margin-right: 0; }
ul.circle-list li:not(:nth-child(2n)){ margin-right: 2%; }
}





/*************************************************************************************/ @media only screen and (max-width: 600px) {
/*********************************
header
.nav-area
*********************************/
.nav-area { height: 80px; }
.nav-area h1.logo,
.nav-area h1.logo.action {
	width: 80px;
	left: calc((100% - 80px) / 2);
}



/****************************************
header
.ht-right
****************************************/
.ht-right,
.ht-right.action {
	width: 120px;
	font-size: 2rem;
	right: 1.5%;
}
.ht-right span,
.ht-right.action span {
	padding-top: 2px;
	font-size: 1rem;
}



/****************************************
共通項目
****************************************/
.contents { padding: 0; }
.contents:first-of-type { margin-top: 90px; }
.contents#about:first-of-type { margin-top: 30px; }
.contents h2 {
	font-size: 2.4rem;
	line-height: 2.4rem;
}
.contents h2 span {
	font-size: 1.2rem;
	line-height: 1.2rem;
	padding-top: 0;
}



/****************************************
TOP
SLIDER
****************************************/
#top-slider { margin: 80px auto; }



/****************************************
TOP
about-koisago
koisago-slider
****************************************/
#koisago-slider .slick-list .slick-slide,
#koisago-slider .slick-list .slick-slide .img {
	width: 200px;
	height: 135px;
}



/****************************************
NEWS
****************************************/
ul.news-list li h3 {
	font-size: 1.6rem;
	text-decoration: underline;
}



/****************************************
PEOPLE-SINGLE
people-con-area
****************************************/
.people-con { align-items: center; }
.people-con h2.mobile-title {
	display: block;
	font-size: 2.4rem;
	line-height: 2.4rem;
	width: calc(100% - 150px);
	margin-bottom: 0;
	-webkit-writing-mode: horizontal-tb;
	-moz-writing-mode:    horizontal-tb;
	-ms-writing-mode:     lr-tb;
	writing-mode:         horizontal-tb;
}
.people-con .text-area {
	margin-top: 30px;
	width: 100%;
}
.people-con h2.mobile-title span { line-height: 1.2rem; }
.people-con .text-area h2 { display: none; }



/****************************************
PEOPLE-SINGLE
back-link-box
****************************************/
.back-link-box { margin: 30px auto; }



/****************************************
WORKS-SINGLE
.artist-info-area大元
.relate-link-area大元
****************************************/
.artist-info-area,
.relate-link-area {
	margin-top: 30px;
	display: block;
}
.relate-link-area {
	margin-top: 30px;
	padding-top: 30px;
}
.artist-info-area h3,
.relate-link-area h3 {
	width: 100%;
	min-height: inherit;
	margin-right: 0;
	font-size: 2rem;
	line-height: 2rem;
	-webkit-writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
}
.artist-info-area h3 span,
.relate-link-area h3 span {
	font-size: 1.2rem;
	line-height: 2.4rem;
	padding-top: 0;
}
.artist-info-area ul,
.relate-link-area ul {
	width: 100%;
	margin-top: 30px;
}



/****************************************
WORKS-SINGLE
****************************************/
.single-work-area .info-area {
	margin-top: 30px;
	padding-bottom: 30px;
}



/****************************************
WORKS-SINGLE
.artist-info-area詳細
****************************************/
.artist-info-area ul.circle li h4 { font-size: 1.8rem; }
.artist-info-area ul.circle li h4 span { font-size: 1.4rem; }
.artist-info-area ul.circle li h4 span.tate-br:before {
	content: "\A";
	white-space: pre;
}



/****************************************
ACTIVITY-ARCHIVE
TOP
activity
****************************************/
ul.ectangle-list li .excerpt { display: none; }



/****************************************
ACTIVITY-SINGLE
****************************************/
.single-activity-area .info-area h3,
.single-activity-area .pr-area h3,
.single-activity-area .event-area h3,
.single-activity-area .etcimg-area h3 {
	width: 100%;
	min-height: inherit;
	margin-right: 0;
	font-size: 2rem;
	line-height: 2rem;
	-webkit-writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
}
.single-activity-area .info-area h3 span,
.single-activity-area .pr-area h3 span,
.single-activity-area .event-area h3 span,
.single-activity-area .etcimg-area h3 span {
	font-size: 1.2rem;
	line-height: 2.4rem;
	padding-top: 0;
}
.single-activity-area .info-area table,
.single-activity-area .pr-area ul.pr-list,
.single-activity-area .event-area ul.event-list,
.single-activity-area .etcimg-area ul.etcimg-list {
	width: 100%;
	margin-top: 30px;
}
.single-activity-area .info-area table th,
.single-activity-area .info-area table td { display: block; }
.single-activity-area .info-area table th {
	width: 100%;
	padding-bottom: 0!important;
	font-size: 1.4rem;
	font-weight: bold;
}
.single-activity-area .info-area table td {
	width: calc(100% - 10px);
	padding-left: 10px;
	padding-bottom: 20px!important;
}



.single-activity-area .event-area ul.event-list li:not(:last-child) { margin-bottom: 60px; }
.single-activity-area .event-area ul.event-list li h4 {
	font-size: 1.6rem;
	line-height: 1.6rem;
}



.single-activity-area .pr-area ul.pr-list li { width: 31.33%; }
.single-activity-area .pr-area ul.pr-list li:not(:nth-child(4n)) { margin-right: 0; }
.single-activity-area .pr-area ul.pr-list li:not(:nth-child(3n)) { margin-right: 3%; }



.single-activity-area .event-area ul.event-list li table th,
.single-activity-area .event-area ul.event-list li table td { display: block; }
.single-activity-area .event-area ul.event-list li table th{
	width: 100%;
	padding-bottom: 0!important;
	font-size: 1.2rem;
	font-weight: bold;
}
.single-activity-area .event-area ul.event-list li table td {
	width: calc(100% - 10px);
	padding-left: 10px;
	padding-bottom: 20px!important;
}


/****************************************
modal-area共通
****************************************/
.modalLink  { margin: 30px auto; }
.modal-area .modal-close {
	top: 15px;
	width: 40px;
	height: 40px;
}
.modal-area .modal-close span:before,
.modal-area .modal-close span:after { width: 40px; }
.modal-inner h3 {
	top: 75px;
	left: 5.5%;
	width: 40px;
	font-size: 2rem;
	line-height: 2.2rem;
}
.modal-inner h3 span {
	font-size: 1rem;
	line-height: 2rem;
}
.modal-inner .report-con {
	width: calc(100% - 80px);
	margin: 90px 0 90px 80px;
}
.modal-area .report-con p,
.modal-area .report-con .movie-wrap { margin-bottom: 5px; }


.single-report-area {
	padding-top: 30px;
	margin: 30px auto 0 auto;
}







/****************************************
FOOTER
****************************************/
.contact-area h3 span::before {
	content: "\A";
	white-space: pre;
}


/****************************************
pagetop
****************************************/
.pagetop.display,
.open-navi-btn-area.display	{ bottom: 10px; }
.pagetop.display:hover { bottom: 20px; }
}





/*************************************************************************************/ @media only screen and (max-width: 480px) {
/*********************************
PEOPLE / ACTIVITY-SINGLE
*********************************/
ul.circle-list li,
#single-activity ul.circle-list li	{
	width: 300px;
	margin-left: auto!important;
	margin-right: auto!important;
}
.open-navi-list li { padding: 5px 0; }
.open-navi-list li,
.open-navi-list li a { line-height: 20px; }
}