/*******************************************************
 * for STUDIO PAGE ( category: access studio )
 *******************************************************/

/*-------------------------------------------------------------
  each Studio page: Header
--------------------------------------------------------------*/
.studio-info {
 margin: 0 auto !important;
 max-width: 740px !important;
}
.basic-hd .entry-header h1 {
 font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
 font-weight: 500;
}
.basic-hd .entry-header h1::before {
 display: block;
 content: "ACCESS";
 font-size: clamp(1.75rem, 1.068rem + 3.41vw, 3.625rem);
 font-family: "Montserrat", sans-serif;
 letter-spacing: 0.06em;
}
.access .basic-hd .entry-header .section-inner,
.access_abeno .basic-hd .entry-header .section-inner,
.access_kyoto .basic-hd .entry-header .section-inner,
.access_nagoya .basic-hd .entry-header .section-inner {
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.access .basic-hd .entry-header .section-inner {
 background-image: url(/wp/wp-content/themes/twentytwenty-child/img/access/osaka-main.jpg);
}
.access_abeno .basic-hd .entry-header .section-inner {
 background-image: url(/wp/wp-content/themes/twentytwenty-child/img/access/abeno-main.jpg);
}
.access_kyoto .basic-hd .entry-header .section-inner {
 background-image: url(/wp/wp-content/themes/twentytwenty-child/img/access/kyoto-main.jpg);
}
.access_nagoya .basic-hd .entry-header .section-inner {
 background-image: url(/wp/wp-content/themes/twentytwenty-child/img/access/nagoya-main.jpg);
}
.access_tokyo .entry-content h2 strong {
 display: inline-block;
 margin-bottom: 0.8rem;
 padding: 0.3rem 1.4rem;
 border: 1px solid #403f34;
 border-radius: 40px;
 font-size: 45%;
 font-weight: 500;
 letter-spacing: 0.1em; 
}


@media screen and (min-width: 768px) {
.basic-hd .entry-header .section-inner {
 padding: clamp(80px, 14vw, 200px) clamp(1.5rem, 6vw, 5rem) clamp(18px, 11vw, 140px);
}
}


/*------------------------------------------------------
  Studio Gallery
-------------------------------------------------------*/
.bg-dgray { background-color: #f0f1f0; }
.entry-content > .fullw.bg-dgray { paddin-bottom: 6rem; }
.parent-pageid-87 .entry-content h2 {
	margin-bottom: 3rem;
 font-size: clamp(1.375rem, 0.966rem + 2.05vw, 2.5rem);
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: normal;
 line-height: 1.4;
 letter-spacing: 0.1em;
}
.parent-pageid-87 .entry-content h2.tsp { margin-bottom: 2rem; }
.access-gallery .access-gallery__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  text-align: center;
}
.access-gallery .access-gallery__inner h3 {
	margin: 0 0 1.5rem;
 padding-left: 0;
 border-left: 0;
	font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
 font-weight: normal;
	position: relative;
	z-index: 1;
}
.access-gallery .access-gallery__list {
	position: relative;
	list-style-type: none;
 margin: 0;
	padding: 0;
}
.access-gallery .access-gallery__list span {
 padding: 0 400px 0 30px;
 background-color: #f0f1f0;
 width: 100%;
 color: #565656;
 font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
 text-align: left;
 position: absolute;
	bottom: -50px;
	left: 0;
}
.access-gallery .access-gallery__image {
 margin: 0;
	position: relative;
 transition-duration: 1s;
 transition-property: opacity;
}
.access-gallery .access-gallery__image.is-fade-out {
  opacity: 0;
}
.access-gallery .access-gallery__image:not(:first-child) {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.access-gallery__image-wrapper { position: relative; }
.access-gallery__disc-list {
	list-style: none;
	background: #fff;
	width: 340px;
	height: 70px;
	position: absolute;
	right: 0;
	bottom: -80px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	z-index: 10;
}
.access-gallery__disc-list .disc-button {
	margin: 0 12px;
	display: flex;
	order: 2;
}
.access-gallery__disc-list .disc-button a {
	border: 1px solid #d2b8a4;
	width: 9px;
	height: 9px;
	border-radius: 100%;
	background: #fff;
}
.access-gallery__disc-list .disc-button.is-active a {
	border: 1px solid #d2b8a4;
	background: #d2b8a4;
}
.access-gallery__disc-list .prev {
	width: 20px;
	height: 20px;
	order: 1;
	position: absolute;
	left: 20px;
 top: 30%;
}
.access-gallery__disc-list .prev a {
	width: 20px;
	height: 20px;
	display: block;
 border-bottom: 0;
}
.access-gallery__disc-list .prev a::before {
	border-right: 1px solid #d2b8a4;
	border-top: 1px solid #d2b8a4;
	content: "";
	display: block;
	height: 14px;
	left: 50%;
	margin-left: -5px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	width: 14px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.access-gallery__disc-list .next {
	width: 20px;
	height: 20px;
	order: 3;
	position: absolute;
	right: 20px;
 top: 30%;
}
.access-gallery__disc-list .next a {
	width: 20px;
	height: 20px;
	display: block;
 border-bottom: 0;
}
.access-gallery__disc-list .next a::before {
	border-right: 1px solid #d2b8a4;
	border-top: 1px solid #d2b8a4;
	content: "";
	display: block;
	height: 14px;
	left: 50%;
	margin-left: -5px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	width: 14px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
.access-gallery .access-gallery__list span {
	position: relative;
	width: 100%;
	padding: 20px 0 15px;
	text-align: center;
	bottom: 0;
	font-size: 0.875rem;
 display: block;
}
.access-gallery__disc-list {
	position: relative;
	bottom: 0;
	right: 0;
 margin: 0 0 1rem;
	width: auto;
}
.access-gallery .access-gallery__inner { margin-bottom: 0 !important; }

}

@media screen and (min-width: 768px) {
.parent-pageid-87 .entry-content h2 { margin-bottom: 6rem; }
.parent-pageid-87 .entry-content h2.tsp { margin-top: 4rem; }
}

/*------------------------------------------------------
  Map
-------------------------------------------------------*/
iframe.map { height: 300px !important; }


/*------------------------------------------------------
  Access
-------------------------------------------------------*/
.studio-info li { margin-bottom: 0.3rem; }
.studio-info details.direction > div {
 margin: 0 auto 2.5rem;
 width: 90%;
}
.studio-info details.direction > div iframe {
 width: 100%;
 height: auto !important;
 aspect-ratio: 9 / 16;
}
.studio-info details + details {
 margin: 0;
 border-top: 1px dashed #d5d5d5;
}
.studio-info details summary {
 margin: 0;
 padding: 1.1rem 2.5rem 1.1rem 0.7rem;
 font-size: 1rem;
 font-weight: bold;
 position: relative;
 display: flex;
 align-items: center;
}
.studio-info summary::before {
 margin-right: 5px;
 font-size: 140%;
 font-family: "Material Symbols Outlined";
 content: "\e1c4";
 font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24;
}
.studio-info details.dir-guide summary::before {
	font-family: "Material Symbols Outlined";
	content: "\e0c8";
	font-variation-settings:
	'FILL' 0,
 'wght' 400,
 'GRAD' 0,
 'opsz' 24;
}
.studio-info summary::after {
 position: absolute;
 top: 6px;
 right: 15px;
 font-size: 200%;
 font-family: "Material Symbols Outlined";
 content: "\e313";
 font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24;
 transition: .3s;
}
.studio-info details[open] summary::after {
 font-family: "Material Symbols Outlined";
 content: "\e316";
 font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}

.access .studio-info summary::before { content: ""; }
.access .studio-info details {
 margin: -1px 0 0;
 border-bottom: 1px solid #a6a7a7;
}
.access .studio-info details + details { border-top: 0; }
.access .studio-info details summary { border-top: 1px solid #a6a7a7; }

.studio-info details ol {
 margin: 0;
 padding: 0 1.2rem;
 list-style: none;
}
.studio-info details li { margin: 0 0 1.5rem; }
.studio-info details li:last-child { margin-bottom: 2.5rem; }
.studio-info details li:not(:last-child){
 margin-bottom: 50px;
 position: relative;
}
.studio-info details li:not(:last-child)::after {
 display: block;
 content: "";
 height: 27px;
 width: 7px;
 background-image: url(/wp/wp-content/themes/twentytwenty-child/img/access/route-point.svg);
 position: absolute;
 bottom: -39px;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
}

.studio-info details.dir-guide p {
	margin-bottom: 0;
	padding: 0 0.7rem;
}
.studio-info details.dir-guide .wp-block-columns:not(.alignwide):not(.alignfull) {
	margin-top: clamp(0.5rem, 1vw, 1rem);
	margin-bottom: clamp(2rem, 5vw, 3rem);
	padding: 0 0.7rem;
	gap: 1rem;
 position: relative;
}
.studio-info details.dir-guide .wp-block-columns.arrows::after {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 z-index: 3;
 color: #666;
 font-size: clamp(2.375rem, 1.92rem + 2.27vw, 3.625rem);
 font-family: "Material Symbols Outlined";
 content: "\eaaa";
 font-variation-settings:
  'FILL' 1,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}
.studio-info details.dir-guide .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
	margin-top: 0;
	margin-bottom: 0;
}



@media screen and (max-width: 500px){
.studio-info ul { margin-left: 0; }
.studio-info li { margin-left: 1rem; }
}

@media screen and (min-width: 681px){
.studio-info details.direction > div {
 margin: 0.3rem auto 2rem;
 width: calc((100% - 40px) / 2);
}
}

/*------------------------------------------------------
  Information
-------------------------------------------------------*/
.studio-info h3 {
 margin: 3rem 0 12px;
 padding: 0 0 0.5rem 1rem;
 border-left: 0;
 border-bottom: 1px solid #808080;
 color: #808080;
 font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
 font-weight: 700;
 line-height: 1;
 position: relative;
}
.studio-info h3::after {
 content: "";
 width: 5px;
 height: calc(100% - .4em);
 background-color: #808080;
 position: absolute;
 top: 0;
 left: 0;
}
.studio-info p + h3 { margin-top: 2.5rem; }


/* Access 撮影メニュー ------------*/
ul.acc_menu {
 margin: 1.2rem 0 0;
 padding: 0 0 0.6rem 1.5rem;
}
ul.acc_menu > li {
 margin: 0;
 padding: 0;
 list-style-type: disc;
}
ul.acc_menu > li strong {
 display: block;
 margin: 0 0 0.2rem -5px;
}
ul.acc_menu li ul {
 margin: 0 0 1.875rem -5px;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
}
.acc_menu li li {
 margin: 0;
 padding: 0;
 line-height: 1.7;
 list-style: none;
}
.acc_menu li li:not(:last-child)::after {
 content: "/";
 margin: 0;
 padding: 0 15px;
 color: #bbb;
}
.entry-content .acc_menu li li a { color: #403f34; border-bottom: 0; }
.entry-content .acc_menu li li a:hover { color: #23527c; }

.studio-info h5 {
 margin: 4rem 0 1rem;
 font-size: clamp(1.375rem, 1.33rem + 0.23vw, 1.5rem);
 font-weight: normal;
}
.studio-info .telno {
 margin: 0 0 0.5rem;
 padding: 2rem 0;
 width: 100%;
 border: 2px solid #f2f2f2;
 font-size: clamp(1.063rem, 0.994rem + 0.34vw, 1.25rem);
 font-weight: bold;
 text-align: center;
 line-height: 1.3;
}
.studio-info .telno span,
.studio-info .telno a {
 color: #bd956e;
 font-size: 160%;
}
.studio-info .telno a {
	text-decoration: none;
	pointer-events:none;
}


@media screen and (min-width: 768px){
.studio-info h3 { margin-top: 4rem; }

}



/*------------------------------------------------------
  Banner area
-------------------------------------------------------*/
.wp-block-columns.access-ban:not(.alignwide):not(.alignfull) {
 margin-top: 1rem;
 margin-bottom: 0;
}
p + .wp-block-columns.access-ban:not(.alignwide):not(.alignfull) { margin-top: 3rem; }
.wp-block-columns.access-ban { gap: 1rem; }
.access-ban .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
 margin-top: 0;
 margin-bottom: 0;
}


@media screen and (min-width: 768px){
.wp-block-columns.access-ban:not(.alignwide):not(.alignfull) { margin-top: 2rem; }
.wp-block-columns.access-ban { gap: 2rem; }
p + .wp-block-columns.access-ban:not(.alignwide):not(.alignfull) { margin-top: 4rem; }

}