/*
Theme Name: kurosawa kawara-ten
Theme URI: https://kurosawakawaraten.com/
Description: kurosawa kawara-ten
Version: 1.0
Author: kurosawa kawara-ten
Author URI: https://kurosawakawaraten.com/
*/

@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	background-position: center center;
	box-sizing: border-box;
	outline: none;
}

html {
	-webkit-text-size-adjust: 100%;
	height: 100%;
	font-size: 62.5%;
}

@media screen and (max-width:1340px) {
	html {
		font-size: 56.25%;
	}
}

@media screen and (min-width:1780px) {
	html {
		font-size: 68.75%;
	}
}

body {
	position: relative;
	font-family: Roboto,'fot-cezanne-pron','FOT-Cezanne ProN','FOT-セザンヌ Pro M',sans-serif;
	font-weight: 400;
	color: #081734;
	font-size: 1.6rem;
	line-height: 1.6;
	margin: auto;
	text-align: left;
	letter-spacing: 0.04em;
	background: #d8dccf;
	/* background: #fff; */
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.noscroll {
	overflow: hidden;
}


/*言語変更ボタン*/

#gt_float_wrapper {
	right: 140px !important;
	top: 35px !important;
	
	right: 25px !important;
	top: auto !important;
	bottom: 20px !important;
	
	font-size: 1.6rem !important;
	width: 100px !important;
	z-index: 120 !important;
}

#gt_float_wrapper img {
	display: none !important;
}

.gt_float_switcher {
	box-shadow: none !important;
	color: #081734 !important;
	background: none !important;
}

.gt_float_switcher .gt-selected {
	background: none !important;
	transition: 0.6s ease-in-out !important;
	text-align: left !important;
	width: 80px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
	background: none !important;
	transition: 0.6s ease-in-out !important;
	width: 90px !important;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	padding: 8px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
	font-size: 1.6rem !important;
	font-weight: 400 !important;
}

.gt_float_switcher .gt_options a,
.gt_float_switcher .gt_options a:hover {
	color: #081734 !important;
	background: none !important;
	font-size: 1.6rem !important;
	font-weight: normal !important;
}

.gt_float_switcher .gt_options a {
	padding: 5px 8px !important;
}

.gt_float_switcher .gt_options a:first-child:after {
	content: '(Google Translate)';
	font-size: 1.0rem;
	display: block;
	letter-spacing: 0;
	
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
	margin-top: 4px;
}

/*言語変更ボタン*/


li {
	list-style: none;
}

/*基本パーツ*/

p {
	text-align: justify;
	line-height: 1.8;
	letter-spacing: 0.04em;
	font-weight: 500;
}

img {
	width: 100%;
	height: auto;
	border: 0;
	vertical-align: top;
}

*::selection {
	background: #081734;
	color: #d8dccf;
}

h1, h2, h3, h4 {
	line-height: 1.6;
	font-size: 100%;
	font-weight: 400;
	letter-spacing: 0.06em;
}

table {
	border-collapse: collapse;
}

.sp_only {
	display: none;
}

.pc_only {
	display: block;
}

/*リンク*/

a {
	text-decoration: none;
	color: #081734;
	transition: 0.2s ease-in-out;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;

}

a.child:hover {
	color: inherit;
}

a img {
	transition: 0.6s ease-in-out;
}

a:hover img {
	
}

.link_img {
	overflow: hidden;
}

.link_img .img {
	transition: 0.4s ease-in-out;
}

a:hover .link_img img {
	transform: scale(1.07);
	filter: brightness(0.8);
}

p a {
	text-decoration: underline;
}

/*文字詰め*/

.kern01 {
	letter-spacing: 0.1em;
}

.kern02 {
	letter-spacing: 0.2em;
}

.kern03 {
	letter-spacing: 0.3em;
}

.kern04 {
	letter-spacing: 0.4em;
}

.kern05 {
	letter-spacing: 0.5em;
}

.kern-005 {
	letter-spacing: -0.05em;
}

.kern-01 {
	letter-spacing: -0.1em;
}

.kern-02 {
	letter-spacing: -0.2em;
}

.kern-03 {
	letter-spacing: -0.3em;
}

.kern-04 {
	letter-spacing: -0.4em;
}

.kern-05 {
	letter-spacing: -0.5em;
}

/*Google map*/

.gmap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.gmap iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}




.border_top {
	background: url(images/ui/line_a.png) no-repeat center top;
	background-size: 100% auto;
	padding-top: 120px;
}



.border_bottom {
	background: url(images/ui/line_b.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 120px;
}


/*----------------------------------------------------

	loading
	
----------------------------------------------------*/

.loading {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	pointer-events: none;
	overflow: hidden;
	transition: 0.4s ease-in-out;
}

.loading.fade {
	opacity: 0;
}

.loading.hide {
	display: none;
}


.loading div.cover01{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 60;
	background: #d8dccf;
	transition: 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}

.loading div.cover01.hide {
	top: -100%;
}


.load_anime {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -30px;
	margin-top: -30px;
	

	transition: 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
/* 	filter: brightness(5000%); */
}

.load_anime.hide {
/*
	margin-top: -45px;
	margin-left: -15px;
*/
	opacity: 0;
}

.loading img {
	width: 60px;
	opacity: 1;

}

.loading .load_anime01 img {
    animation: loadspin 2.7s linear infinite;
}

.loading .load_anime02 img,
.loading .load_anime04 img {
    animation: loadspin02 3.6s linear infinite;
}

.loading .load_anime03 img,
.loading .load_anime05 img {
    animation: loadspin 4.5s linear infinite;
}


@keyframes loadspin {
	0% {transform: rotate(0deg);}
	40% {transform: rotate(360deg);}
	60% {transform: rotate(0deg);}
	75% {transform: rotate(360deg);}
	90% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@keyframes loadspin02 {
	0% {transform: rotate(0deg);}
	10% {transform: rotate(-360deg);}
	25% {transform: rotate(0deg);}
	50% {transform: rotate(-360deg);}
	70% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}




/*--------------------------------------
	
	header
	
--------------------------------------*/

header .logo {
	width: 280px;
	position: fixed;
	left: 38px;
	top: 38px;
	z-index: 100;
}

.home header .logo {
	position: absolute;
	top: auto;
	bottom: 38px;
}

/*--------------------------------------
	
	navi
	
--------------------------------------*/



.toggle {
	display: block ;
	position: fixed;
	z-index: 300;
	top: 32px;
	right: 32px;
	width: 80px;
	height: 52px;
	transition: 0.3s ease-in-out;
	opacity: 1;
	cursor: pointer;
}

/*
.toggle.fix {
	opacity: 1;
}
*/

.toggle span {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.toggle .info {
	transition: 0.4s ease-in-out;
	text-align: center;
}

.toggle .close {
	transition: 0.4s ease-in-out;
	opacity: 0;
}

.toggle.active .info {
	opacity: 0;
}

.toggle.active .close {
	opacity: 1;
}

.toggle .info img {
	display: block;
	margin-bottom: 8px;
}

.toggle .close img {
	display: block;
	margin-top: -10px;
}




.navi_area {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
	z-index: 20;
	overflow: scroll;

}

.navi_area,
.navi_area a {
	color: #d8dccf;
}

header .navi,
header .navi_sub {

}

header .navi .st {
	margin-bottom: 10px;
	margin-top: 60px;
	height: 100px;
}


header .navi .content:first-child .st {
	margin-top: 0;
}


header .navi .st img {
	width: auto;
	height: 100%;
}

header .navi ul {
	
	padding-left: 4.347vw;
	max-height: 4.5em;
	overflow: hidden;
}

header .navi .content:nth-child(2) ul {
	margin-bottom: 20px;
}



header .navi ul li {
 	display: inline-block;
 	margin: 0 15px 0 0;
 	font-size: 1.6rem;

}



header .navi {
	margin-left: 4.347vw;
}

header .navi_sub {
	margin-right: 4.347vw;

}

header .navi_sub li {
 	height: 35px;
}

header .navi_sub li.menu_en {
 	height: 85px;
 	margin-top: 30px;
 	padding-top: 30px;
 	position: relative;
}

header .navi_sub li.menu_en:before {
	content: '';
	display: block;
	width: 30px;
	height: 1px;
	position: absolute;
	left: 0;
	top: 0;
	background: #d8dccf;
}


header .navi_sub ul li a img {
	height: 100%;
	width: auto;
}

.navi .content {

}


header .navi_sub {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
}

header .navi_sub li {
	margin-bottom: 15px;
}

header .navi_sub .news .date {
	display: block;
	font-size: 1.4rem;
}

header .navi_sub .news a {
	display: block;
	font-size: 1.4rem;

}


header .navi_area a {
	text-decoration: underline;
}





#menu:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url(images/ui/nois_dark.gif) #081734;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: 0.6s ease-in-out;
	opacity: 0;
}

header.normal #menu:before {
	opacity: 1;
}

#menu {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;

	z-index: 230;

	pointer-events: none;
	padding: 0;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: 0.6s ease-in-out;
}

.menu_show #menu {
	opacity: 1;
	transition: 0.6s ease-in-out;
}

header.normal #menu {
	opacity: 1;
	pointer-events: auto;
	transition: 0.6s ease-in-out;
}

/*--------------------------------------
	
	footer
	
--------------------------------------*/

footer .bottom {
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
	padding: 300px 50px 50px 50px;
	
	
	flex-direction: row;
	justify-content: flex-start;
}

footer .bottom .copyright {
	font-size: 1.0rem;
	display: none;
}

footer .bottom .logo {
	width: 54px;
}


/*--------------------------------------
	
	Wide / layout
	
--------------------------------------*/

.wide_center {
	margin-left: auto;
	margin-right: auto;
}

.wide_1 {
	width: 4.347vw;
}

.wide_2 {
	width: calc(4.347vw * 2);
}

.wide_3 {
	width: calc(4.347vw * 3);
}

.wide_4 {
	width: calc(4.347vw * 4);
}

.wide_5 {
	width: calc(4.347vw * 5);
}

.wide_6 {
	width: calc(4.347vw * 6);
}

.wide_7 {
	width: calc(4.347vw * 7);
}

.wide_8 {
	width: calc(4.347vw * 8);
}

.wide_9 {
	width: calc(4.347vw * 9);
}

.wide_10 {
	width: calc(4.347vw * 10);
}

.wide_11 {
	width: calc(4.347vw * 11);
}

.wide_12 {
	width: calc(4.347vw * 12);
}

.wide_13 {
	width: calc(4.347vw * 13);
}

.wide_14 {
	width: calc(4.347vw * 14);
}

.wide_15 {
	width: calc(4.347vw * 15);
}

.wide_16 {
	width: calc(4.347vw * 16);
}

.wide_17 {
	width: calc(4.347vw * 17);
}

.wide_18 {
	width: calc(4.347vw * 18);
}

.wide_19 {
	width: calc(4.347vw * 19);
}

.wide_20 {
	width: calc(4.347vw * 20);
}

.wide_21 {
	width: calc(4.347vw * 21);
}

.wide_22 {
	width: calc(4.347vw * 22);
}

.wide_23 {
	width: calc(4.347vw * 23);
}



/*--------------------------------------
	
	key
	
--------------------------------------*/






.key {
	width: 100%;
	height: 100%;
	position: relative;
	margin-bottom: 20px;
	
}

.key .content {
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	text-align: center;
}

.key .content .tag {
	width: 38.0%;
}

.key .content .tag img {
	width: 78%;
	max-width: 440px;
}

.key .content .ph {
	width: 24.0%;
}

.key .content .ph div {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.frame {
	position: relative;
}

.key .frame .thumb {
	opacity: 0;
	transform: scale(1.1);
	transition: 0.6s ease-in-out;
}

.key .frame.show .thumb {
	opacity: 1;
	transform: scale(1.0);
}

.frame img {
	filter: sepia(5%);
}

.list_frag li .ph:after,
.frame:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(images/ui/nois2.gif) center center;
	background-size: 560px auto;
	mix-blend-mode: multiply;
	
}

.frame span.line {
	display: block;
	position: absolute;

}

.frame span.line span {
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	transition: 0.6s ease-in-out;
}

.frame .right.line span {
	height: 0%;
	right: 0;
	top: 0;
	width: 3vw;
}

.frame .bottom.line span {
	width: 0%;
	height: 3vw;
	left: 0;
	top: 0;
}

.frame .left.line span {
	height: 0%;
	width: 3vw;
	top: 0;
	right: 0;
}

.frame .top.line span {
	width: 0%;
	height: 3vw;
}





body.load .frame .right.line span {
	height: 100%;
}

body.load .frame .bottom.line span {
	width: 100%;
}

body.load .frame .left.line span {
	height: 100%;

}

body.load .frame .top.line span {
	width: 100%;
}







.frame .top {
	width: 107.1%;
	top: -12px;
	left: -20px;
}


.frame .right {
	height: 100.07%;
	top: 0;
	right: -22px;
}


.frame .bottom {
	width: 123.6%;
	bottom: 15px;
	right: -30px;
}


.frame .left {
	height: 103.3%;
	bottom: 0;
	left: 18px;
}




.frame .top img {
	width: 25.704vw;
	height: auto;
}


.frame .right img {
	height: 35.71vw;
	width: auto;
}


.frame .bottom img {
	width: 29.62vw;
	height: auto;
}


.frame .left img {
	height: 37.03vw;
	width: auto;
}






.key .content .day {
	width: 24.0%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.date_style {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.date_style .dd {
	width: 28.8%;
}

.date_style .dot {
	width: 4.25%;
}

.date_style .mm {
	width: 28.8%;
}

.sub .date_style .dd {
	width: 46.8%;
}

.sub .date_style .dot {
	width: 6.25%;
}

.sub .date_style .mm {
	width: 46.8%;
}



.keymodal {
	cursor: pointer;
}

.keymodal_win {
	width: 100%;
	height: 100%;
	background: url(images/ui/nois_dark.gif) #081734;
	position: fixed;
	top: 0;
	left: 0;

	transition: 0.6s ease-in-out;
	color: #fff;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	z-index: 600;
	opacity: 0;
	pointer-events: none;
}

.keymodal_win.show {
	opacity: 1;
	pointer-events: auto;
}

.keymodal_win .close {
	display: block ;
	position: fixed;
	z-index: 300;
	top: 32px;
	right: 32px;
	width: 80px;
	height: 52px;
	transition: 0.3s ease-in-out;
	opacity: 1;
	cursor: pointer;
}

.keymodal_win .close img {
	display: block;
	margin-top: -10px;
}

.keymodal_win .img {
	width: auto;
	height: 100vh;
	position: fixed;


	opacity: 0.5;
	
	filter: saturate(0);
	mix-blend-mode: hard-light;
}

.keymodal_win .img img {
	height: 100%;
	width: auto;
}

.keymodal_win .win {
	max-height: 86svh;
	overflow: scroll;
}

.keymodal_win p {
	width: 36em;
	font-size: 2.4rem;
	position: relative;
	z-index: 700;

}

.keymodal_win p a {
	color: #fff;
}


/*--------------------------------------
	
	Studio
	
--------------------------------------*/


.key_studio .content {
	justify-content: center;
}

.key_studio .content .tag {
	width: 42.0%;
	margin-right: 10%;
}

.key_studio .content .tag img {
	width: 100%;
	max-width: 100%;
}

.key_studio .content .ph {
	width: 24.0%;
	margin-right: 5%;
}



.studio_outline {
	margin-bottom: 80px;
}

.studio_outline .title {
	font-size: 2.4rem;
	margin-bottom: 35px;
}

.studio_outline p {
	margin-bottom: 80px;
}

.studio_outline .profile {
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
}

.studio_outline .profile .img,
.studio_outline .profile .text {
	align-self: flex-end;
}

.studio_outline .profile .st {
	font-size: 1.8rem;
	margin-bottom: 20px;
}

.studio_outline .profile p {
	margin: 0;
	font-size: 1.4rem;
}



.tag_title {
	padding: 200px 0 100px 0;
	width: 28%;
	margin: 0 auto;
}



/*--------------------------------------
	
	Fragments
	
--------------------------------------*/


.tag_filter {
	display: flex;
	align-content: flex-end;
	align-items: flex-end;
	justify-content: center;

	padding: 80px 0 50px 0;
	position: sticky;
	top: -50px;
	z-index: 10;
	max-width: 100vw;
	overflow: hidden;
	border-top: 1px solid #081734;
}

.tag_filter .st {
	margin-right: 1.0em;
	font-size: 1.4rem;
	line-height: 1;
}

.tag_filter a {
	font-size: 1.1rem;
	display: inline-block;
	margin-right: 1em;
	text-decoration: underline;
	line-height: 1.1;
}

.tag_filter a:hover {
	text-decoration: none;

}




.list_frag {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}

.home .list_frag {
	padding-top: 180px;
}

.list_frag:after {
	content: '';
	display: block;
	width: calc(4.347vw * 5);
}

.list_frag li {
	margin-bottom: 140px;
}

.list_frag li .ph {
	width: 80%;
	margin: 0 auto 80px auto;
	position: relative;
}

.list_frag li .ph div {
	width: 100%;
	height: 100%;
	overflow: hidden;
	aspect-ratio: 67/100;
}

.list_frag li .ph .thumb {
	opacity: 0;
	transform: scale(1.1);

	transition: 0.6s ease-in-out;
	
	height: 100%;
	width: auto;
	
}

.list_frag li.load .ph .thumb {
	transform: scale(1);
	opacity: 1;

}

.list_frag li .ph .gra {
	width: 0;
	position: absolute;
	left: 24%;
	bottom: -15%;
	overflow: hidden;
	transition: 0.3s ease-in-out;
}

.list_frag li.show .ph .gra {
	width: 18.78vw;
}

.list_frag li .ph .gra img {
	width: 18.78vw;
}



.list_frag li .text .sub {
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
}

.list_frag li .text .sub .date_style {
	width: 33%;

	margin-bottom: -10px;
	margin-left: -10px;

}

.list_frag li .text .sub .data {
	width: 66%;
	font-size: 1.1rem;
	text-align: right;
}

.list_frag li .text .sub .data a {
	display: inline-block;
	margin-right: 0.75em;
}

.list_frag li .text .sub .data a:last-child {
	margin-right: 0;
}

/*--------------------------------------
	
	page title
	
--------------------------------------*/

.cate_title {
	padding: 120px 4.347vw 90px 4.347vw;
}

.cate_title.page_title {
	padding-top: 200px;
}

.cate_title .title {
	height: 100px;
}

.cate_title .title img {
	height: 100%;
	width: auto;
}

.cate_title .more {
	display: block;
	width: 90px;
	text-align: right;
	margin-top: -50px;
	margin-left: auto;
	background: url(images/ui/underline.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 10px;
}

/*--------------------------------------
	
	works list
	
--------------------------------------*/


.list_works {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 0 0 0;
	padding-left: calc(4.347vw * 2);
}

.list_works li {
	margin-bottom: 4.347vw;
	overflow: hidden;
}

.list_works li a {
	display: block;
	position: relative;
}

.list_works li a img {
	transition: 0.6s ease-in-out;
}

.list_works li a:hover img {
	transform: scale(1.05);
}

.list_works li a .st {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.6);
	color: #fff;
	opacity: 0;
	z-index: 10;
	transition: 0.6s ease-in-out;
}

.list_works li a:hover .st {
	opacity: 1;
}


/*--------------------------------------
	
	works detail
	
--------------------------------------*/

.key_detail {
	padding: 220px 0 200px 0;
}

.works_detail .content {
	display: flex;
}

.works_detail .content .img {
	padding: 0 4.347vw;
	background: url(images/ui/line_vert_a.png) repeat-y right top;
	background-size: 10px auto;
}

.works_detail .content .img img {
	margin-bottom: 4.347vw;
}

.works_detail .content .img img:last-child {
	margin-bottom: 0;
}

.works_detail .content .text {
	flex: 1;
	margin-left: 4.347vw;
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	align-items: flex-end;
	justify-content: space-between;

}

.works_detail .content .text .title {
	font-size: 2.4rem;
	margin: 0 0 40px 0;
}

.works_detail .content .text .title .sub {
	font-size: 1.2rem;
}

.works_detail .content .text .title .sub span {
	display: inline-block;
	margin-bottom: 10px;
}

.works_detail .content .text .title .sub span:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 1.1em;
	background: #081734;
	margin: 0 8px;
	vertical-align: middle;
}

.works_detail .content .text .title .sub span:last-child:after {
	display: none;
}



.works_detail .content .text p {
	margin-bottom: 30px;
	max-width: calc(4.347vw * 14);
}

.works_detail .content .text .body {
	margin-bottom: 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.works_detail .content .text .data {
	margin: 0;
	text-align: right;
	font-size: 1.2rem;
}

/*--------------------------------------
	
	About us
	
--------------------------------------*/

.about_detail {
	margin-top: 60px;
	margin-left: calc(4.347vw * 2);
}

.about_detail .title {
	font-size: 2.4rem;
	margin-bottom: 35px;
}

.about_detail .sub {
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
	margin-top: 100px;

}



.about_detail .sub p,
.about_detail .sub table {
	margin-bottom: 40px;
	font-size: 88%;
}

.about_detail .sub table th,
.about_detail .sub table td {
	vertical-align: top;
}

.about_detail .sub table th {
	width: 5em;
	font-weight: 400;
}

ul.sns {
	display: flex;
	
}

ul.sns li {
	width: 32px;
	margin-right: 15px;
}


/*--------------------------------------
	
	news
	
--------------------------------------*/



.news_list li a {
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	padding: 20px 0;
}

.news_list li .date {
	width: 10em;
	font-size: 1.2rem;
}

.news_list li a .text {
	text-decoration: underline;
}

.news_list li a {
	padding: 40px calc(4.347vw * 2)
}

.news_list li a:hover {
	background-color: rgba(0,0,0,0.05);
}


.news_detail {
	margin-top: 60px;
	margin-left: calc(4.347vw * 2);
}

.news_detail .title {
	font-size: 2.4rem;
	margin-bottom: 35px;
}

.news_detail .title .date {
	display: block;
	font-size: 1.6rem;
	margin-bottom: 10px;
}

.linkback {
	margin-top: 120px;
	font-size: 1.4rem;
}

.linkback a {
	text-decoration: underline;
}

.linkback a:hover {
	text-decoration: none;
}


/*--------------------------------------
	
	contact form
	
--------------------------------------*/

.grecaptcha-badge {
	display: none !important;
}

.page-template-page-contact .grecaptcha-badge {
	display: block !important;
}

.page-template-page-contact #gt_float_wrapper {
	display: none;
}

.contactform7 {
	margin: 60px auto 20px auto;
}

.contactform7 p {
	text-align: center;
}

.contactform7 ul {
	margin-bottom: 80px;
}


.contactform7 ul li {
	padding: 25px 0;
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
}



.contactform7 ul li span {
	display: inline-block;
	vertical-align: top;
}

.contactform7 ul li span.label {
	font-size: 1.6rem;
	width: 35%;
	padding: 4px 20px 4px 0;
	display: flex;
	justify-content: space-between;
}

.contactform7 ul li span.label .icon {
	font-size: 1.1rem;
	color: #fff;
	display: inline-block;
	padding: 3px 4px 3px 4px;
	line-height: 1;
	background: #bd1a1a;
	border-radius: 2px;
	margin: 0 0 0 2px;
	vertical-align: baseline;
	align-self: center;
}



.contactform7 ul li span.form {
	width: 65%;
}






.contactform7 ul li span.form input {
	background: #fff;
	border: none;
	font-size: 16px;
	padding: 7px;
	width: 70%;
/*	border-radius: 4px;*/
}

.contactform7 ul li span.wpcf7-form-control-wrap {
	width: 100%;
}

.contactform7 ul li span.form textarea {
	background: #fff;
	border: none;
	font-size: 16px;
	padding: 7px;
	width: 100% !important;
}


input.type {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}






.submit_area {
	text-align: center;
	margin-bottom: 60px;
}


.wpcf7-submit {

	background: #081734;
	color: #fff;
	font-size: 16px;
	width: 320px;
	padding: 20px;
	margin: 0 auto;
	border: 1px solid #081734;
	cursor: pointer;

	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	


}

.wpcf7-submit:hover {
	background: #ebebe6;
	color: #081734;
}



.wpcf7-not-valid-tip {
	display: block;
	background: #ebbcbc;
	color: #bd1a1a !important;
	width: 100%;
	padding: 5px;
	margin: 6px 0 0 0;
	line-height: 1:
}



.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border: #bd1a1a 2px solid !important;
	padding: 15px !important;
	color: #bd1a1a !important;
}


.wpcf7 form.sent .wpcf7-response-output {
	border: #081734 2px solid !important;
	padding: 30px !important;
	margin-bottom: 60px;
}

.wpcf7 form .wpcf7-response-output {
	margin-left: 0 !important;
	margin-right: 0 !important;
}



/*------------------------------------------------------------------------------------------------------------------------------------

	スマホここから
	
------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:768px){

html {
	font-size: 62.5%;
	width: 100%;
}

body {
	font-size: 1.4rem;
}

body, html {
	min-width: 100%;
	height: 100%;
}

p {
	font-size: 1.4rem;
	text-align: left;
}

h1,h2,h3,h4 {
	font-size: 1.6rem;
}

.sp_only {
	display: block;
}

.pc_only {
	display: none;
}

.gmap {
	padding-top: 150%;
}



.border_top {
	padding-top: 12vw;
}


.border_bottom {
	padding-bottom: 12vw;
}



/*言語変更ボタン*/

#gt_float_wrapper {

	top: auto !important;
	bottom: -7px !important;
	right: 0 !important;
	font-size: 1.3rem !important;
	border-radius: 8px 0 0 0 !important;
	overflow: hidden;
}

#gt_float_wrapper img {
	display: none !important;
}

.gt_float_switcher {
	box-shadow: none !important;
	color: #081734 !important;
	background: #d8dccf !important;
}

.gt_float_switcher .gt-selected {
	background: #d8dccf !important;
	transition: 0.6s ease-in-out !important;
	text-align: left !important;
	width: 105px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
	background: #d8dccf !important;
	padding: 8px 8px 12px 12px !important;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
	font-size: 1.3rem !important;

}

.gt_float_switcher .gt_options a,
.gt_float_switcher .gt_options a:hover {
	color: #081734 !important;
	background: #d8dccf !important;
	font-size: 1.3rem !important;
	font-weight: 400 !important;
}

.gt_float_switcher .gt_options a {
	padding: 8px 5px 0 10px !important;
	line-height: 1.3;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {

	width: 8px !important;
	height: 20px !important;
}

.gt_float_switcher {
	width: 150px !important;
}

/*言語変更ボタン*/




/*----------------------------------------------------

	loading
	
----------------------------------------------------*/




.load_anime {
	margin-left: -20px;
	margin-top: -20px;
	
}



.loading img {
	width: 40px;

}



/*--------------------------------------
	
	Wide / layout
	
--------------------------------------*/

.wide_center {
	padding-left: 8vw;
	padding-right: 8vw;
}

.wide_sp {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.wide_1 {
	width: 48%;
}

.wide_2 {
	width: 48%;
}

.wide_3 {
	width: 48%;
}

.wide_4 {
	width: 48%;
}

.wide_5 {
	width: 48%;
}

.wide_6 {
	width: 48%;
}

.wide_7 {
	width: 100%;
}

.wide_8 {
	width: 100%;
}

.wide_9 {
	width: 100%;
}

.wide_10 {
	width: 100%;
}

.wide_11 {
	width: 100%;
}

.wide_12 {
	width: 100%;
}

.wide_13 {
	width: 100%;
}

.wide_14 {
	width: 100%;
}

.wide_15 {
	width: 100%;
}

.wide_16 {
	width: 100%;
}

.wide_17 {
	width: 100%;
}

.wide_18 {
	width: 100%;
}

.wide_19 {
	width: 100%;
}

.wide_20 {
	width: 100%;
}

.wide_21 {
	width: 100%;
}

.wide_22 {
	width: 100%;
}

.wide_23 {
	width: 100%;
}


/*--------------------------------------
	
	header
	
--------------------------------------*/

header .logo {
	width: 240px;

	left: 6vw;
	top: 6vw;
}

.home header .logo {
	top: 6vw;
	bottom: auto;
	position: absolute;
}











/*--------------------------------------
	
	footer
	
--------------------------------------*/

footer .bottom {
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
	padding: 24vw 5vw 5vw 5vw;
}


footer .bottom .logo {
	width: 12vw;
}



/*--------------------------------------
	
	navi
	
--------------------------------------*/



.toggle {

	top: 5vw;
	right: 5vw;
	width: 50px;
	height: 52px;

}

/*
.toggle.fix {
	opacity: 1;
}
*/

.toggle .close img {
	margin-top: 0;
}

.navi_area {
	padding: 0 0;
	display: block;
/* 	justify-content: space-between; */
/*
	width: 100%;
	position: relative;
	z-index: 20;
	overflow: scroll;
*/

}

/*
.navi_area,
.navi_area a {
	color: #d8dccf;
}

header .navi,
header .navi_sub {

}
*/

header .navi {
	margin-bottom: 8vw;
	padding: 10vw 6vw 6vw 6vw;
}

header .navi .st {
/* 	margin-bottom: 10px; */
	height: 15vw;
}

header .navi .content:first-child .st {
	margin-top: 0;
}

header .navi .st img {
/*
	width: auto;
	height: 100%;
*/
}

header .navi ul {
	
	padding-left: 5vw;
	padding-right: 6vw;
	max-height: 7.5em;

}




header .navi ul li {

 	margin: 0 1em 0 0;
 	font-size: 1.2rem;
}


header .navi {
	margin-left: 0;
}

header .navi_sub {

}


.navi .content {

}


header .navi_sub {
	width: 100%;
	display: block;
	background: url(images/ui/line_a_white.png) no-repeat center top;
	background-size: 100% auto;


}

header .navi_sub ul {
	padding: 8vw 6vw 12vw 6vw;
}

header .navi_sub li {
	width: 75%;
}

header .navi_sub .news {
	margin-top: 0;

	background: url(images/ui/line_a_white.png) no-repeat center top;
	background-size: 100% auto;
	padding: 12vw 6vw;
}


header .navi_sub .news .date {

	font-size: 1.1rem;
}

header .navi_sub .news a {

	font-size: 1.3rem;

}


header .navi_area a {
	text-decoration: underline;
}





#menu:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #081734;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: 0.6s ease-in-out;
	opacity: 0;
}

header.normal #menu:before {
	opacity: 1;
}

#menu {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;

	z-index: 230;

	pointer-events: none;
	padding: 0;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;

}

.menu_show #menu {
	opacity: 1;
	transition: 0.6s ease-in-out;
}

header.normal #menu {
	opacity: 1;
	pointer-events: auto;
	transition: 0.6s ease-in-out;
}




/*--------------------------------------
	
	key
	
--------------------------------------*/


.key {
	padding-top: 10vw;
	margin-bottom: 12vw;
	
}

.key .content {
/*
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	text-align: center;
*/
	
	justify-content: center;
	flex-direction: column;
}

.key .content .tag {

	height: 20vh;
	width: 100%;
	margin-top: 3vh;

}

.key .content .tag img {
	width: auto;
	height: 100%;

}

.key .content .ph {
	height: 40vh;
	width: 26.6vh;
	margin: 3vh auto;
}

/*
.key .content .ph div {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
*/

/*
.frame {
	position: relative;
}

.key .frame .thumb {
	opacity: 0;
	transform: scale(1.1);
	transition: 0.6s ease-in-out;
}

.key .frame.show .thumb {
	opacity: 1;
	transform: scale(1.0);
}

.frame img {
	filter: sepia(5%);
}
*/

.home .post_archive {
	padding-top: 2vw;
}

.list_frag li .ph:after,
.frame:after {
/*
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(images/ui/nois2.gif) center center;
	background-size: 560px auto;
	mix-blend-mode: multiply;
*/
	background-size: 150% auto;
	
}




.frame span.line {
/*
	display: block;
	position: absolute;
*/

}

/*
.frame span.line span {
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	transition: 0.6s ease-in-out;
}
*/

.frame .right.line span {
/*
	height: 0%;
	right: 0;
	top: 0;
*/
	width: 8vw;
}

.frame .bottom.line span {
/* 	width: 0%; */
	height: 8vw;
/*
	left: 0;
	top: 0;
*/
}

.frame .left.line span {
/* 	height: 0%; */
	width: 8vw;
/*
	top: 0;
	right: 0;
*/
}

.frame .top.line span {
/* 	width: 0%; */
	height: 8vw;
}



/*


.home.load .frame .right.line span {
	height: 100%;
}

.home.load .frame .bottom.line span {
	width: 100%;
}

.home.load .frame .left.line span {
	height: 100%;

}

.home.load .frame .top.line span {
	width: 100%;
}
*/







.frame .top {

/*
	top: -12px;
	left: -20px;
*/
	top: -6px;
}

.frame .right {

/*
	top: 0;
	right: -22px;
*/
	right: -15px;
}

.frame .bottom {

/*
	bottom: 15px;
	right: -30px;
*/
}

.frame .left {

/*
	bottom: 0;
	left: 18px;
*/
}




.frame .top img {
	width: 28.46vh;
/* 	height: auto; */
}

.frame .right img {
	height: 40vh;
/* 	width: auto; */
}

.frame .bottom img {
	width: 32.87vh;
/* 	height: auto; */
}

.frame .left img {
	height: 41.32vh;
/* 	width: auto; */
}








.key .content .day {

	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 12vh;
}








/*

.date_style {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.date_style .dd {
	width: 28.8%;
}

.date_style .dot {
	width: 4.25%;
}

.date_style .mm {
	width: 28.8%;
}

.sub .date_style .dd {
	width: 46.8%;
}

.sub .date_style .dot {
	width: 6.25%;
}

.sub .date_style .mm {
	width: 46.8%;
}
*/



.keymodal_win p {
	width: 80vw;
	font-size: 1.6rem;
	position: relative;
	z-index: 700;
}

.keymodal_win .close {
	top: 5vw;
	right: 5vw;
	width: 50px;
	height: 52px;
}

.keymodal_win .close img {
	margin-top: 0;
}


/*--------------------------------------
	
	Studio
	
--------------------------------------*/


.key_studio .content {
	justify-content: center;
	

}


.key_studio .content .tag {

	margin-right: auto;
	margin-bottom: 8vw;
	margin-top: -12vw;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.key_studio .content .tag img {
	width: 80%;
	height: auto;
}

.key_studio .content .ph {

	margin-right: auto;
}


.studio_outline {
	margin-bottom: 8vw;
}


.studio_outline .title {
    font-size: 2.0rem;
    margin: 0 0 8vw 0;
}

.studio_outline p {
	margin-bottom: 8vw;
}



.studio_outline .profile .st {
	font-size: 1.6rem;
	margin-bottom: 4vw;
}

.studio_outline .profile p {
	font-size: 1.2rem;
}



.tag_title {
	padding: 100px 0 50px 0;
	width: 42%;
	margin: 0 auto;
}




/*--------------------------------------
	
	Fragments
	
--------------------------------------*/


.tag_filter {
/* 	display: flex; */
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-start;
 	flex-wrap: wrap;
	overflow: scroll;

	padding: 9vw 5vw 0 5vw;
	position: sticky;
	top: -5vw;
	z-index: 10;
	max-width: 100vw;
	text-align: center;
	justify-content: center;

/* 	background-position: center top; */
}

.tag_filter .st {

	margin-right: 0.6em;
	font-size: 1.1rem;

}

.tag_filter a {
	font-size: 1.0rem;

	margin-right: 0.6em;
	margin-bottom: 0.4em;
}





.home .list_frag {

	padding-top: 24vw;
}



.list_frag li {
	width: 100%;
	margin-bottom: 24vw;
	
	background: url(images/ui/line_a.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 16vw;
	
	padding-left: 8vw;
	padding-right: 8vw;
}

.list_frag li:last-child {
	background-image: none;
	padding-bottom: 0;
}

.home .list_frag li:last-child {
	background-image: url(images/ui/line_a.png);
	padding-bottom: 16vw;
}

.list_frag li .ph {
	width: 70%;
	margin: 0 auto 16vw auto;
}

/*
.list_frag li .ph div {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
*/
/*

.list_frag li .ph .thumb {
	opacity: 0;
	transform: scale(1.1);

	transition: 0.6s ease-in-out;
}

.list_frag li.load .ph .thumb {
	transform: scale(1);
	opacity: 1;

}
*/

.list_frag li .ph .gra {
	width: 0;
	position: absolute;
	left: 24%;
	bottom: -15%;
	overflow: hidden;
	transition: 0.3s ease-in-out;
}

.list_frag li.show .ph .gra {
	width: 60vw;
}

.list_frag li .ph .gra img {
	width: 60vw;
}

.list_frag li .text {

}


.list_frag li .text .sub {
	margin-top: 8vw;

}

/*
.list_frag li .text .sub .date_style {
	width: 33%;

	margin-bottom: -10px;
	margin-left: -10px;

}
*/

.list_frag li .text .sub .data {
	width: 60%;
}


/*--------------------------------------
	
	page title
	
--------------------------------------*/

.cate_title {
	padding: 20vw 6vw 12vw 6vw;
	width: 100%;
	overflow: hidden;
}

.cate_title.page_title {
	padding-top: 40vw;
}

.cate_title .title {
	height: 16vw;
}

.cate_title .more {
	display: block;
	width: 50px;

	margin-top: -30px;
	margin-left: auto;

}


/*--------------------------------------
	
	works list
	
--------------------------------------*/


.list_works {
	padding-left: 8vw;
}

.list_works li {
	width: 100%;
	margin-bottom: 8vw;
}

.list_works li a {
	display: block;
	position: relative;
}

.list_works li a img {
	transition: 0.6s ease-in-out;
}

.list_works li a:hover img {
	transform: scale(1.05);
}

.list_works li a .st {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.6);
	color: #fff;
	opacity: 0;
	z-index: 10;
	transition: 0.6s ease-in-out;
}

.list_works li a:hover .st {
	opacity: 1;
}




/*--------------------------------------
	
	works detail
	
--------------------------------------*/

.key_detail {
	padding: 18vw 0 16vw 0;
}

.works_detail .content {
	display: block;
	margin-bottom: -12vw;
	
	background: url(images/ui/line_a.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 16vw;

}

.works_detail .content .img {
	padding: 0 10vw;
	background: none;;
}

.works_detail .content .img img {
	margin-bottom: 6vw;
}

.works_detail .content .img img:last-child {
	margin-bottom: 18vw;
}

.works_detail .content .text {
	flex: 1;
	margin-left: 0;
	padding: 0 8vw;


}

.works_detail .content .text .title {
	font-size: 2.0rem;
	margin: 0 0 8vw 0;
	width: 100%;
}

.works_detail .content .text p {
	margin-bottom: 6vw;
	max-width: 100%;

}

.works_detail .content .text .body {
	margin-bottom: 12vw;
}

.works_detail .content .text .data {
	margin: 0;
	text-align: right;
	font-size: 1.0rem;
}


/*--------------------------------------
	
	About us
	
--------------------------------------*/

.about_detail {
	margin-top: 8vw;
	margin-left: 0;
	padding: 0 8vw;
}

.about_detail .title {
	font-size: 1.7rem;
	margin-bottom: 8vw;
}

.about_detail .sub {
	display: block;
	margin-top: 12vw;
}

.about_detail .sub p,
.about_detail .sub table {
	margin-bottom: 6vw;
}

.about_detail .sub table th {
	width: 4.5em;
}

.about_detail .sub .text {
	margin-bottom: 12vw;
}

ul.sns li {
	margin-right: 25px;
}



/*--------------------------------------
	
	news
	
--------------------------------------*/



.news_list li a {
	display: block;

	padding: 4vw 0;
}

.news_list li .date {
	display: block;
	margin-bottom: 10px;
}


.news_list li a {
	padding: 4vw 8vw;
}

.news_list li a:hover {
	background-color: rgba(0,0,0,0.05);
}


.news_detail {
	margin-top: 8vw;
	margin-left: 0;
	padding: 0 8vw;
}

.news_detail .title {
	font-size: 2.0rem;
	margin-bottom: 8vw;
}

.news_detail .title .date {
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.linkback {
	margin-top: 12vw;
	font-size: 1.2rem;
}


/*--------------------------------------
	
	contact form
	
--------------------------------------*/





.contactform7 {
	width: 100%;
	margin-top: 0;
	padding: 8vw 6.6vw;
}


.contactform7 ul {
	margin-bottom: 6vw;
}



















input[type="submit"],
input[type="button"],
input[type="email"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;

}



input[type="submit"] {
	border-radius: 0;
	border: 1px solid #111;
}



input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}



.contactform7 ul {
	margin-bottom: 35px;
	padding-top: 10px;

}

.contactform7 ul li {
	width: 100%;
	padding: 10px 0;
	display: block;
}


.contactform7 ul li span {
	display: block;
}



.contactform7 ul li span.label {
	width: 100%;
	padding: 0 0 3vw 0;
}

.contactform7 ul li span.form {
	width: 100%;
}

.contactform7 ul li span.title .icon {
	padding: 4px 3px 3px 3px;
}

.contactform7 ul li span.form input {
	font-size: 1.5rem;
	width: 100%;
}

.form_content {
	width: 100%;
	display: block;
}

.submit_area {
	text-align: center;
	margin-bottom: 8vw;
}

.wpcf7-submit:hover {
	border: 1px solid #777;
	background: #777;
	color: #fff;
	
}


.mw_wp_form select {
/* 	border: 0.7px solid #a19885; */
	padding: 10px;
	background:  none;

	width: 100%;
	font-size: 1.3rem;
}

.contactform7 ul .form .text {
	margin-top: 8px;
	font-size: 1.1rem;
}






ul.myform,
ul.myform li,
.mw_wp_form select {
	border-width: 0.7px;
}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border: #bd1a1a 2px solid !important;
	padding: 15px !important;
	color: #bd1a1a !important;
}


.wpcf7 form.sent .wpcf7-response-output {
	border: #081734 2px solid !important;
	padding: 30px !important;
}


.wpcf7 form .wpcf7-response-output {
	margin-left: 0;
	margin-right: 0;
}



















}