@charset "utf-8";
/*+++++++++++++++++
creative header
+++++++++++++++++*/



header.creative {
	display: block;
	padding: 20px;
}
header.creative .logo {
	width: 300px;
	display: block;
	margin: auto;
	padding: 10px 0 15px;
	transition: none;
}
header.creative p {
	text-align: center;
	font-size: var(--font-mc);
}
header.creative.is-animation {
	display: none;
}

nav a.drw_logo {
	max-width: 130px;
	display: block;
	margin: 0 75px 0 30px;
	border: 1px solid var(--opa-white02);
	padding: 30px;
}


/*+++++++++++++++++
creative footer
+++++++++++++++++*/
aside.creative {
	background: none;
}
aside.creative .drawer-hamburger {
	margin: 10px;
	background: none;
}
aside.creative .aside-fixed {
	display:none;
}
aside.creative .drawer-hamburger-icon,
aside.creative .drawer-hamburger-icon:before,
aside.creative .drawer-hamburger-icon:after {
	background:var(--black);
}

footer.creative {
	padding: 20px 0;
	text-align: center;
	width: var(--flex-100);
}

footer.creative .logo {
    max-width: 120px;
    margin: 20px auto 0;
    display: block;
}

/*+++++++++++++++++
creative top
+++++++++++++++++*/
#creative .wp-block-columns {
    gap: 1px;
    margin: 1px;
}

.page-template-creative #wrapper {
	grid-template-columns: 1fr;
}
#creative .member {
	display: grid;
	grid-template-columns: repeat(2,1fr);
}
#creative .member li a{
	display: block;
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
#creative .member li a .h5-title {
	font-size: var(--font-mc) !important;
}
#creative .member li a .h3-title {
	font-size: var(--font-h5) !important;
}
#creative .member li a figcaption {
	position: absolute;
	bottom: 0;
	padding: 20px;
	box-sizing: border-box;
	width: var(--flex-100);
	transition: .5s;
	opacity: 1;
	pointer-events: none;
}
#creative .member li a figcaption  {
	opacity: 1;
	transition: .5s;
	background: linear-gradient(rgba(0,0,0,0),var(--opa-black05));
}
#creative .member li a:hover figcaption  {
	opacity:1
}
/*+++++++++++++++++
creative single
+++++++++++++++++*/
#creative .template_contents {
	padding:8rem 0 0;
}
#creative .creative_singlebox {
	grid-template-columns: 1fr;
	max-width: var(--flex-100);
	contain: paint;
	display: block;
	margin: 0;
}
#creative .creative_singlebox > figure {
	position: relative;
}
#creative .creative_singlebox figure img{
	width: var(--flex-100);
}

#creative .creative_singlebox .wp-block-columns {
    grid-template-columns: repeat(2,1fr);
    display: grid;
}

#creative .creative_member {
	/* height: 3000px; */
	padding: 0 30px 0;
	margin: 0;
}
#creative .creative_member .h3-title {
	font-size:var(--font-h5) !important;
}
#creative .creative_member .h1-title {
	font-size:var(--font-h3) !important;
}
#creative .creative_member dl {
	padding: 35px 30px 30px;
	background: var(--lightgray);
}
#creative .creative_member dt {
	margin: 0;
	max-width: max-content;
	padding: 0 20px 10px 0;
}
#creative .creative_member dd {
	padding: 0;
}


.creative_team-template-default .others_member {
	
}
.creative_team-template-default .others_member ol{
	max-width: var(--small-inner);
	grid-template-columns: repeat(2,1fr);
}
.creative_team-template-default .others_member li{
	
}
.creative_team-template-default .others_member li figure {
	position: relative;
	overflow: hidden;
	height: auto;
}
.creative_team-template-default .others_member li figure img{
	object-fit: cover;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 0;
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
}

@media screen and (min-width: 1024px) {
/*+++++++++++++++++
creative header
+++++++++++++++++*/
header.creative p {
	
font-size: inherit;
}	
header.creative {
	display: flex;
	padding: 0;
	justify-content: center;
	gap: 0;
	top: 0 !important;
}
header.creative .logo {
	width: auto;
	display: block;
	margin: 0;
	padding: 40px 30px;
	transition: none;
}
header.creative.is-animation {
	display: none;
}

nav a.drw_logo {
	max-width: 130px;
	display: block;
	margin: 0 75px 0 30px;
	border: 1px solid var(--opa-white02);
	padding: 30px;
}


/*+++++++++++++++++
creative footer
+++++++++++++++++*/
aside.creative {
	background: none;
}
aside.creative .drawer-hamburger {
	margin: 30px;
}
aside.creative .aside-fixed {
	display:none;
}
aside.creative .drawer-hamburger-icon,
aside.creative .drawer-hamburger-icon:before,
aside.creative .drawer-hamburger-icon:after {
	background:var(--black);
}

footer.creative {
	padding: 20px 0;
	text-align: center;
	width: var(--flex-100);
}
/*+++++++++++++++++
creative top
+++++++++++++++++*/
.page-template-creative #wrapper {
	grid-template-columns: 1fr;
}
#creative .member {
	display: flex;
}
#creative .member li a{
	display: block;
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
#creative .member li a figcaption {
	padding: 40px 30px 30px;
	opacity:0;
}
#creative .member li a .h3-title {
	font-size:var(--font-h3) !important;
}	
#creative .member li a .h5-title {
	font-size:var(--font-h5) !important;
}		
#creative .member li a:hover figcaption  {
	opacity: 1;
	transition: .5s;
	background: linear-gradient(rgba(0,0,0,0),var(--opa-black05));
}
/*+++++++++++++++++
creative single
+++++++++++++++++*/
#creative .template_contents {
	padding:8rem 0 0;
}
#creative .creative_singlebox {
	grid-template-columns: 45% 50%;
	max-width: var(--flex-95);
	contain: paint;
	margin: 0 0 150px;
}
#creative .creative_singlebox > figure {
	position: sticky;
	top: 0;
	height: 100vh;
}
#creative .creative_singlebox figure img{
	width: var(--flex-100);
}
    
#creative .creative_singlebox .wp-block-columns {
    grid-template-columns: repeat(4,1fr);
}    
    
#creative .creative_member .h3-title {
	font-size: var(--font-h3) !important;
}
#creative .creative_member .h1-title {
	font-size: var(--font-h1) !important;
}
#creative .creative_member dl {
	/* border: 1px solid var(--black); */
	padding: 45px 40px 30px;
	background: var(--lightgray);
}
#creative .creative_member dt {
	margin: 0;
	max-width: max-content;
	padding: 0 20px 10px 0;
}
#creative .creative_member dd {
	padding: 0;
}


.creative_team-template-default .others_member {
	
}
.creative_team-template-default .others_member ol{
	max-width: var(--small-inner);
	grid-template-columns: repeat(3,1fr);
}
.creative_team-template-default .others_member li{
	
}
.creative_team-template-default .others_member li figure {
	position: relative;
	overflow: hidden;
	height: 300px;
}
.creative_team-template-default .others_member li figure img{
	position: absolute;
	top: 3rem;
}
}