@charset "UTF-8";

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

* Style Index
	#. Cores
	#. Layouts    :prefix[l-]
	#. Components :prefix[c-]
	#. Units
	#. Utilities  :prefix[u-]
	// #. Functions :prefix[js-]

------------------------------------------------ */
/* ------------------------------------------------
# Cores
------------------------------------------------ */
/*!
Last Updated: 2023-05-20
*/
:root {
    --orange: #e63e44; /*rgb 230 62 67 */
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

div{
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
li{
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

nav ul {
	list-style: none;
}

html {
	font-size: 62.5%;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
 

body {
	font-size: 1.3rem;
	font-family:"forma-djr-text", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 300;
	font-style:normal;
	line-height: 1.8;
	letter-spacing: 1px;
	color: #272727;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
	-webkit-text-size-adjust: 100%;
	background:#fff;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration:none;
}

input {
	border-radius: 0;
}

button {
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#272727;
	background: #fff;
	min-width: 11.5em;
	padding: 0.9em 1.3em;
	margin:  auto;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	border: solid 1px #272727;
	background: linear-gradient(90deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 100%) 50%,rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 100%) 100%);
	background-size: 200%;
	background-position: right;
	height: 3em;
}
button.pagelink::after {
	content: '';
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	right: 0.6em;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
	mix-blend-mode: difference;
}
button.pagelink::before {
	content: attr(data-en);
	line-height: 1;
	width: fit-content;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	color: #fff!important;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
}
@media screen and (min-width: 1250px) {
	button.pagelink:active {
		color:#fff;
		background-position: left;
	}
}
h1{
	font-family:"forma-djr-text", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-style:normal;
	font-size: 1.7rem;
	margin-bottom: 0em;
	line-height: 1.8;
	letter-spacing: 2px;
}
h2{
	font-family:"forma-djr-text", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-style:normal;
	font-size: 1.7rem;
	margin-bottom: 1em;
	line-height: 1.8;
	letter-spacing: 2px;
}
h3{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 2.8rem;
	margin-bottom: 0.5em;
	line-height: 1.5;
	letter-spacing: 2px;
}
h4{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 2rem;
	margin-bottom: 1em;
	line-height: 1;
	letter-spacing: 2px;
}
h5{
	font-family:"forma-djr-text", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-style:normal;
	font-size: 1.8rem;
	margin-bottom: 1em;
	line-height: 1.8;
	letter-spacing: 2px;
}
time{
	font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
	font-size: 0.85em;
	color: #bbb;
}
a{
	color: #272727;
}
@media screen and (min-width: 740px) {
	body {
		font-size: 1.5rem;
	}
	h1{
		font-size: 1.9rem;
	}
	h2{
		font-size: 1.9rem;
	}
	h3{
		font-size: 3.3rem;
	}
	h4{
		font-size: 2rem;
	}
}
@media screen and (min-width: 1250px) {
	body {
		font-size: 1.6rem;
	}
	h1{
		font-size: 2.2rem;
	}
	h2{
		font-size: 2.2rem;
	}
	h3{
		font-size: 3.8rem;
	}
	h4{
		font-size: 2.5rem;
	}
}
li{
	list-style: none;
}
small{
	font-size: 0.85em;
}
::placeholder {
  color: #c7c7c7;
}
*:focus {
  outline: none;
}

label{
	display:block;
}
input[type="checkbox"] {
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
 position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #272727;
  vertical-align: -3px;
	margin-right: 2px;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 6px;
  height: 9px;
  border-right: 2px solid #272727;
  border-bottom: 2px solid #272727;
  content: '';
}

input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #272727;
  border-radius: 50%;
	margin-right: 5px;
  vertical-align: -2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #272727;
  content: '';
}


/*new header*/
.new-page-header-fix{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;

	background: linear-gradient(90deg, rgb(230 230 230 / 0%) 0%, rgb(230 230 230 / 0%) 50%,rgb(230 230 230 / 100%) 50%, rgb(230 230 230 / 100%) 100%);
}
.new-page-header{
	position: relative;
	width: 100vw;
	height: 100px;
}
@media screen and (max-width: 1250px) {
	.new-page-header-fix{
	position: relative;
	width: 100vw;

}
}
@media screen and (max-width: 740px) {
	.new-page-header{
	
	}
}


/*--------------------- ロード ----------------------*/

/*ロード　ロードバック*/
#new-loading{
	width: 100vw;
	height: 100vh;
	background: #fff;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 9000;
	display: grid;
	align-content: center;
	align-items: center;
}
#new-loading-top{
	width: 100vw;
	height: 100vh;
	background: #fff;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 9000;
	
}
/*ロード　CXGロゴ*/
.new-loading-cxglogo{
	
	height: auto;
	margin: auto;
	opacity: 0.6;
}
.new-loading-cxglogo img{
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}
.load-cxglogo{
	
}
.load-cxglogo img{
	width: 200px;
	height: 100px;
	object-fit: contain;
}
.new-loading-cxglogo h4{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 0em;
	line-height: 1;
	letter-spacing: 0px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	bottom: 10%;
	left: 50%;
}
.load-icon{
	display: none;
}
.load-icon.load-active{
	display: block;
}
@media screen and (max-width : 740px){
	/*ロード　CXGロゴ*/
	/*
	.new-loading-cxglogo{
		width: 170px;
		padding-bottom: 50px;
	}
	*/
	.new-loading-cxglogo img{
		top: 45%;
	}
	.new-loading-cxglogo h4{
		bottom: 15%;
	}
	.load-cxglogo img{
		width: 160px;
	}
}

/*アクセス*/
#new-access-container{
	width: 100vw;
	overflow: hidden;
}

#new-access-container .access-grid{
	text-align: center;
	overflow: hidden;
}
.access-grid:first-child{
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10vw;
	min-height: 100vh;
}
@media screen and (max-width: 1250px) {
	.access-grid:first-child{
		min-height: 100;
	}
}
.access-grid:nth-child(2){
	width: 100%;
	height: 100vh;
	object-fit: cover;
	padding:0;
	filter:grayscale(100%) ;
	margin: 0;
}
.access-tel{
	text-align: center;
	padding-top: 1em; 
	font-size: 1.2em;
}
.access-mail{
	text-align: center;
	paddingtop: 0.4em; 
	font-size: 1.2em;
}
.mapicon{
	width: 3em;	
	height: auto;
	margin: auto;
	margin-top: 2em;
	margin-bottom: 2em;
}
.mapicon img{
	width: 100%;	
}

/*---------------------------- new-about アバウトシングル -----------------------------*/
/* アバウトシングル アバウトセクション */
.about-section{
	width: 100vw;
	min-height: 100vh;
	padding: 10em 5vw;
	align-content: center;
	align-items: center;
}
/* アバウトシングル アバウトセクション 一番目*/
.about-section:first-child{
	min-height: 100vh;
}
@media screen and (max-width: 1250px) {
	/* アバウトシングル アバウトセクション 一番目*/
	.about-section:first-child{
		min-height: 100vh;
	}
}
/* アバウトシングル アバウトセクション 一番目　オーバービュー*/
.about-section.about-first-section .overview{
	text-align: left;
}
/* アバウトシングル オーバービュー*/
.overview{
	width: 80vw;
	margin: auto;
	margin-top: 2em;
	text-align: center;
}
/* アバウトシングル アイコンメイン*/

.abouticon{
	width: 7em;	
	height: 7em;
	margin: auto;
	margin-bottom: 1.5em;
	display: grid;
	align-content: center;
	align-items: center;
}
.about-section-first .abouticon{
	width: 8em;	
	height: 8em;
}
.abouticon img{
	width: 100%;	
	height: auto;
}
/* アバウトシングル カラム*/
.about-column{
	display: block;
	width: 80vw;
	margin:4em auto 0;
}
.about-column li{
	
	padding: 2em 0em;
	position: relative;
}
.about-column li::after{
	content: '';
	position: absolute;
	width: 0%;
	height: 1px;
	background: #272727;
	left: 0;
	bottom: 0;
}
.about-column li:nth-child(3)::after{
	content: '';
	position: absolute;
	width: 0px;
	height: 0;
	background: #272727;
	left: 0;
	bottom: 0;
}
.fade-up-w{
	display: flex;
	gap: 1em;
}
.fade-up-g{
	display: flex;
	gap: 1em;
}
/* アバウトシングル カラム　テキスト*/
.about-article{
	width: 80vw;
}
.about-article h4{
	text-align: left;
	padding: 0;
}
.about-column p{
	font-size: 0.85em;
}
/* アバウトシングル カラム　テキスト */
.about-column .contacticon{
	width: 4.8em;	
	height: 4.8em;
	margin-left: inherit;
	
	
	padding-bottom: 1.3em;
}
.about-column .contacticon img{
	width: 100%;	
	height: auto;
}

/* アバウトシングル キャリア　タイムライン */

.carrer-timeline{
	width: 70vw;
	max-width: 1100px;
	margin: 4em auto;
}
.carrer-timeline p{
		font-size: 0.85em;
	}
.carrer-article{
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: stretch;
}
ul.carrer-article li.first-timeline{
	position: relative;
}
ul.carrer-article li.first-timeline::before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	height: 50%;
	border-right: solid 1px #272727;
}
ul.carrer-article li.first-timeline::after{
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	background: #272727;
	border-radius: 25px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

ul.carrer-article li.second-timeline{
	position: relative;
}
ul.carrer-article li.second-timeline::before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	border-right: solid 1px #272727;
}
ul.carrer-article li.second-timeline::after{
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	background: #272727;
	border-radius: 25px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
ul.carrer-article li.last-timeline{
	position: relative;
}
ul.carrer-article li.last-timeline::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	height: 50%;
	border-right: solid 1px #272727;
}
ul.carrer-article li.last-timeline::after{
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	background: #272727;
	border-radius: 25px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.timeline-generation{
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 2px;
	color: #ddd;
}
.timeline-icon{
	width: 5em;	
	height: 5em;
	margin: auto;
	display: grid;
	align-content: center;
	align-items: center;
}
.timeline-icon img{
	width: 100%;
	height: auto;
}
.carrer-article li:first-child{
	width: 22%;
}
.carrer-article li:nth-child(2){
	width: 18%;
}
.carrer-article li:nth-child(3){
	width: 60%;
}
.timeline-content{
	display: grid;
	align-content: center;
	align-items: center;
	padding: 4em 0;
}
/* --------------- new-contact コンタクト フッター　----------------------*/
#new-contact{
	width: 100%;
	height: 50vh;
	display: grid;
	align-content: center;
	align-items: center;
	margin-top:100px;
	text-align: center;
	position: relative;
}
#new-contact .contacticon{
	width: 8em;	
	height: 8em;
	margin: auto;
	display: grid;
	align-content: center;
	align-items: center;
}

#new-thanks-container .abouticon{
	width: 8em;	
	height: 8em;
	margin: auto;
	display: grid;
	align-content: center;
	align-items: center;
}

.contacticon{
	width: 7em;	
	height: 7em;
	margin: auto;
	display: grid;
	align-content: center;
	align-items: center;
}
.contacticon img{
	width: 100%;	
	height: auto;
}
@media screen and (max-width: 1250px) {
	
	.timeline-generation{
		font-family: "Castoro", serif;
		font-weight: 400;
		font-style: normal;
		text-align: left;
		font-size: 3rem;
		line-height: 1;
		letter-spacing: 2px;
		color: #ddd;
	}
	h5{
		font-size: 1.7rem;
	}
}
@media screen and (max-width: 740px) {
	.timeline-generation{
		font-family: "Castoro", serif;
		font-weight: 400;
		font-style: normal;
		text-align: left;
		font-size: 2.5rem;
		line-height: 1;
		letter-spacing: 2px;
		color: #ddd;
	}
	h5{
		font-size: 1.5rem;
	}
	.carrer-timeline{
		width: 80vw;
	}
	.timeline-generation{
		font-size: 5vw;
	}
	
	.about-column li{
		padding: 5em 0em;
	}

}

@media screen and (min-width: 740px) {
	/*new about*/
	.overview{
		width: 40vw;
	}
	.about-column{
		display: flex;
		width: 90vw;
		margin:6em auto;
	}
	.about-column li{
		justify-content: center;
	align-items: center;
		border-bottom: none;
		padding: 1em 2em;
		width: calc(100% / 3);
		gap: 0em;
	}

.about-column li::after{
	content: '';
	position: absolute;
	width: 1px;
	height: 0%;
	background: #272727;
	right: 0;
	top: 0;
	left: auto;

}
.about-column li:nth-child(3)::after{
	content: '';
	position: absolute;
	width: 0px;
	height: 100%;
	background: #272727;
	right: 0;
	top: 0;
left: auto;
}
	
	.about-article {
		width: auto;
		text-align: center;
	}
	.about-column li{
		display: block;
	}
	.about-article h4{
		text-align: center;
		padding: 0.3em 0;
	}
	.timeline-icon{
		width: 6em;
		height: 6em;
	}
	.carrer-article li:first-child{
	width: 20%;
}
.carrer-article li:nth-child(2){
	width: 25%;
}
.carrer-article li:nth-child(3){
	width: 55%;
}
	
	ul.carrer-article li.first-timeline::after{
	content: '';
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	background: #272727;
	border-radius: 25px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

	ul.carrer-article li.second-timeline::after{
	content: '';
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	background: #272727;
	border-radius: 25px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
	ul.carrer-article li.last-timeline::after{
	content: '';
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	background: #272727;
	border-radius: 25px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
	
	.about-column .contacticon{

	margin: auto;
	display: grid;
	align-content: center;
	align-items: center;
	padding-bottom: 1.3em;
}
	.fade-up-w{
	display: block;
	gap: 1em;
}
.fade-up-g{
	display: block;
	gap: 1em;
}
}
@media screen and (min-width: 1250px) {
	/*new-about*/
	.overview{
		width: 30vw;
		max-width: 460px;
	}
	.about-column{
		display: flex;
		width: 80vw;
		margin:4em auto 0;
		max-width: 1400px;
	}
	.about-column li{
		
		padding: 1em 6em;
		width: calc(100% / 3);
	}
	.about-column li:nth-child(3){
		border-right: none;
	}
}
/*レイアウト*/
.gallery-container{
	width: 100vw;
	min-height: 100vh;
	
	
}
.gallery-menu{
	width: calc(1.8em + 50px);
	height: auto;
}
.grid-wrapper {
    /*max-width: 500px;*/
    margin: 0 auto;
	column-count: 4;
	column-gap: 1em;

}
.new-grid-item {
	break-inside: avoid;
	display: inline-block;
	margin-bottom: 0.5em;
	/*background: #aaa;*/
	
}
.verticalp {
	flex-basis:150px;
}
.new-grid-item img {
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;

}
.gallery-menu-wrapper {
	display: none;
	width: 0;
	/*display: none;*/
	overflow: hidden;
}

.gallery-icon {
	width: 40px;
	height: 40px;
	margin: 0px 5px 5px 1.8em;

	cursor: pointer;
	background: #fff;
}
.gallery-icon img {
	width: 90%;
	height: auto;
	margin: 5% ;
	mix-blend-mode: difference;
}
.wpga{
	
	background: #aaa;
}
.wgh{
	position: sticky;
	top: 20px;
}
.gallery-side {
	
	flex-flow: column;
	/*background: red;*/
}
.gallery-sort {
	padding: 2em 1em 2em 2em;
	height: auto;
}
label {
margin-right:1em;
}
.checkbox-flex {
	display: flex;
	flex-wrap: wrap;
}
.gallery-section {
	width: 100vw;
	height: 100vh;
}

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

	.grid-wrapper {
		column-count: 3;
	}
}
@media screen and (max-width: 740px) {
	.grid-wrapper {
  		column-count: 2;
	}
	.gallery-icon {
		width: 35px;
		height: 35px;
		margin: 0px 5px 0px 3.7vw;
	}
	.gallery-menu{
		width: calc(4% + 50px);
	}
}
.closemodal{
	width: 50px;
	height: 50px;
	/*background: #000;*/
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	cursor: pointer;
}
.closemodal::after, .closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: #272727;
	position: absolute;
}
.closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
.closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}

.gallery-sort h4{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	font-size: 1.2em;
	margin-bottom: 0.5em;
	line-height: 1;
	letter-spacing: 2px;
}
.gallery-color{
	margin-bottom: 2em;
}
/*-------------------   new-work-single ワークシングル   -----------------*/
/* ワークシングル　コンテナ */
#new-worksingle-container{
	width: 100vw;
	height: 100vh;
	display: grid;
	justify-content: center;	
}
/* ワークシングル 見出し*/
#new-worksingle-container h2{
	margin-bottom: 0;
}
/* ワークシングル フレックスラッパー*/
.worksingle-main{
	display: flex;
	justify-content: center;

}
/* ワークシングル テキストラッパー */
.worksingle-column-text{
	width: 50%;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 3em 10% 3em 5em;
}
/* ワークシングル スライドラッパー */
.worksingle-column-image{
	width: 50%;
	display: grid;
	align-content: center;
	align-items: center;
	position: relative;
}
/* ワークシングル　カテゴリー */
.new-work-category{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	margin-bottom: 1.2em;
}
/* ワークシングル　サイトアドレス */
.new-work-siteadd{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	margin-bottom: 1.8em;
	position: relative;
	width: fit-content;
}
.new-work-siteadd a{
	color: #272727;
}
.new-work-siteadd::before{
	content:'';
	position:absolute;
	width: 100%;
	border-bottom: solid 1px #272727;
	bottom:0px;
	left: 0;
}
/* ワークシングル スライドイメージ ラッパー */
.new-work-gallery-wrapper{
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	
	
}
/* ワークシングル スライドイメージ */
.new-work-gallery-image{
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: absolute;
	right: 100%;
	z-index: 2;
}
.new-work-gallery-wrapper li.new-work-gallery-image{
	top: 0;
	right: 0;
	z-index: 2;
	opacity: 0;
	position: absolute;
}
.new-work-gallery-wrapper li.new-work-gallery-image.new-work-gallery-image-active{
	opacity: 1;
	z-index: 6;
}
.new-work-gallery-wrapper li.new-work-gallery-image.new-work-gallery-image-active img{
	opacity: 1;
}

.new-work-gallery-wrapper li.new-work-gallery-image img{
	opacity: 0;
}
.new-work-gallery-wrapper li.new-work-gallery-image:first-child img{
	opacity: 1;
}

.new-work-gallery-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.work-section{
	width: 90vw;
	max-width: 1800px;
	height: 100vh;
	padding: 3em 0;
	margin: auto;
	display: grid;
	align-items: center;
	align-content: center;
}

.workthumb-active{
	
}
@media screen and (max-width: 1250px) {
	.work-section{
		height: 95vh;
	}
}
.new-work-gallery-thumb{
	display:grid;
	grid-template-columns: repeat(7, 1fr);
    gap: 0;
	margin-top: 2em;
}
.new-work-gallery-thumb li.new-work-thumb{
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
}
.new-work-gallery-thumb li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.new-recommend{
	width: 100vw;
	min-height: 100vh;
	overflow: hidden;
	padding: 10em 0;
	display: grid;
	align-content: center;
	align-items: center;
}
.new-recommend-column{
	display: grid; 
	grid-template-columns: repeat(3, 1fr);
	margin: 4em 0 ;
	gap: 0;
}
.new-recommend-thumb{
	aspect-ratio: 3 / 2;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}
.new-recommend-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.new-recommend-thumb{
	filter: grayscale(100%);
}
.new-work-single-text{
	width: 60%;
	max-width: 850px;
	margin: 5em auto;
}
.work-section .new-blog-tag-wrapper{
	margin:3em 0 3em;
}
@media screen and (max-width: 1250px) {
	#menu-open{
		display: block;
	}
	.MenuBtn-BarFrame{
		opacity: 0;
		display: block;
	}
	.worksingle-main{
		flex-flow: column;
		align-content: center;
		align-items: center;
	}
	.worksingle-column-image{
		order:1;
		width: 60%;
	}
	.work-section{
		width: 100vw;
		max-width: none;
		margin: auto;
		display: grid;
	}
	
	.worksingle-column-text{
		order:2;
		width: 60%;
		display: block;
		padding: 2em 0 0 0;
	}
	.work-section{
		padding: 2em 0;
		width: 100vw;
		align-items:flex-start;
	}
	.new-recommend-column{
		grid-template-columns: repeat(2, 1fr);
	}
	
}
@media screen and (max-width: 740px) {
	.worksingle-column-image{
		width: 80%;
	
	}
	.worksingle-column-text{
		order:2;
		width: 80%;
		padding: 1.5em 0 0 0;
		height: auto;
	}
	.new-work-gallery-thumb{
		grid-template-columns: repeat(7, 1fr);
	}
	.work-section{
		padding: 1em 0;
	}
	.new-recommend-column{
		grid-template-columns: repeat(1, 1fr);
	}
	.new-work-single-text{
		width: 80%;
		margin: 4em auto;
	}
}

/*---------------------  demo single デモシングル   -------------------------------*/

/* デモシングル コンテナ*/
.demo-section{
	width: 100vw;
	min-height: 100vh;
	padding: 3em 0 ;
	margin: auto;

}
/* デモシングル ラッパー*/
.demosingle-main{
	filter: grayscale(100%);
}
/* デモシングル　ダミー */
/*
.demo-damy-img{
	width: 100v;
	height: 100svh;
	overflow: hidden;
}
.demo-damy-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
*/
/*---------------------  new blog archive デモアーカイブ   -------------------------------*/


#new-blog-archive{
	display: flex;
	flex-wrap: wrap;
	padding: 4em 0;
	width: 90%;
	margin: auto;
}
#new-blog-single{
	display: flex;
	flex-wrap: wrap;
	padding: 4em 0;
	width: 90%;
	margin: auto;
}
.new-blog-column-wrapper{
	width: 	77%;
	margin: 0 auto;
}
.new-blog-column{
	/*
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	*/
	
	column-count: 3;
	column-gap: 20px;
	
}
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .new-blog-column{
	
	 
	margin-top: -13px;
}
}
*/
#new-blog-archive .new-blog-column  li:first-child{
	
}
.new-blog-sidebar{
	width: 23%;
	padding-left: 40px;
}
.new-blog-sidebar h3{
	font-size: 1.7em;
	padding-bottom: 0.5em;
}

.new-blog-article{
	/*width: calc((100% - 40px) / 3);*/
	padding: 2em;
	height: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px #ccc;
	margin-bottom: 20px;
	margin-top: 0;
	break-inside: avoid;
	display: inline-block;
	cursor: pointer;
}


.new-blog-article h2{
	font-size: 2rem;
	line-height: 1.6;
	color: #eee;
	mix-blend-mode: difference;
}
.new-blog-article p{
	color: #eee;
	mix-blend-mode: difference;
}
.new-blog-renking{
	padding: 2em;
	height: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px #ccc;
	margin-top: 0;
	position:relative;
	display: inline-block;
	margin: 0;
	overflow: auto;
}

.new-blog-renking h2{
	font-size: 2rem;
	line-height: 1.6
}
	.new-blog-renkings {
		display: flex;
		flex-flow: column;
		gap: 20px;
		overflow: visible;
	}

.new-blog-thumb{
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	mix-blend-mode: difference;
}
.new-blog-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.search-form {
	margin-bottom:2em;
}
.search-form .search-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 40px;
	margin-bottom:2em;
	position: relative;
}
.search-form .search-box .search-input {
	padding: 0 0 0 40px;
	width: 100%;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	border: 1px solid #d0d0d0;
	background-color: transparent;
	outline: none;
}
.search-form .search-box::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 0;
	width: 25px;
	height: 40px;
	background-image: url('../images/icon-new-search.svg');
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center;
}
.new-blog-tag-wrapper{
	margin:2em 0 3em;
}
.new-blog-tag{
	padding-right: 10px;
	display:inline-block;
	color: #aaa;
	cursor: pointer;
}
.new-blog-tag::before{
	content:"#";
	padding-right: 3px;
}
.banner{
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	background: #aaa;
	position: sticky;
	top: 20px;
}
@media screen and (max-width: 1250px) {
	.new-blog-article h2{
		font-size: 1.8rem;
	}
	.new-blog-renking h2{
		font-size: 1.8rem;
	}
	#new-blog-archive{
		flex-flow: column;
		width: 80%;
	}
	#new-blog-single{
		flex-flow: column;
		width: 80%;
		padding: 2em 0 4em
	}
	.new-blog-column{
		width: 100%;
		column-count: 2;
	}
	.new-blog-sidebar{
		width: 100%;
		padding-top: 5em;
		margin: auto;
	}
	.new-blog-sidebar h3{		
		padding: 1em 0 1em;
		font-size: 2em;
	}
	
	.new-blog-renkings {
		display: flex;
		flex-flow:wrap;
		flex-wrap: wrap;
		gap: 20px;
	}
	.new-blog-renkings li{
		width: calc(50% - 15px);
		margin-bottom: 0;
	}
	
	.new-blog-sidebar{
		padding-left: 0px;
	}
}
@media screen and (max-width: 740px) {
	.new-blog-article h2{
		font-size: 1.5rem;
	}
	.new-blog-renking h2{
		font-size: 1.5rem;
	}
	.new-blog-column{
		column-count: 1;
	}
	
	.new-blog-renkings li{
		width: 100%;
	}
	.new-blog-sidebar{
		width: 100%;
	}
}
/*--------------------------------------new-blog-single-----------------------------------*/
.new-blog-single-sns{
	width: 23%;
	/*width: 10%;*/
}
.new-blog-single-content{
	width: 54%;
	/*width: 67%;*/
	margin: 0 auto;
	max-width: 850px;
}
.gray-back{
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #ccc;
	margin: 30px 0;
}
.new-blog-contents{
	margin-top: 4em;
	
}
.new-blog-single-content .new-blog-tag-wrapper{
	margin:0;
}
.new-blog-single-content h2{
	margin-bottom: 0.5em;
}
.new-blog-single-snsicon{
	display: flex;
	flex-flow: column;
	position: fixed;
	top: calc(50% - 76px);
	gap: 10px;
	z-index: 2;
}
.new-blog-single-snsicon li{
	width: 44px;
	height: 44px;
	cursor: pointer;
}
.new-blog-single-snsicon img{
	width: 100%;
	height: auto;
	object-fit: contain;
}
/*blog recommend*/
.new-blog-recommend {
	width: 100vw;
	min-height: 100vh;
	padding: 10em 5vw;
	display: grid;
	align-content: center;
	align-items: center;
	margin: auto;
	text-align: center;
}

.new-blog-recommend .new-recommend-blog-column{
	display: grid;
	 grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 3em 0;
	align-items: stretch;
	
	flex-wrap: wrap;
}

.new-blog-recommend .new-recommend-blog-column .new-blog-article{
	/*width: calc((100% - 40px) / 3);*/
	padding: 2em;
	height: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px #ccc;
	margin-bottom: 20px;
	text-align: left;
	cursor: pointer;
	flex: 1;
	margin: 0;
	
}
.new-blog-article h2{
	font-size: 2rem;
	line-height: 1.6;
	flex-grow: 1;
	text-align: left;
}
.new-blog-article p{
	text-align: left;
}

@media screen and (max-width: 1250px) {
	.new-blog-single-content{
		width: 100%;
		max-width: initial;
		margin: auto;
		position: relative;
	}
	.new-blog-single-snsicon{
		flex-flow:row wrap;
		position: relative;
		top: auto;
		left: auto;
		margin: 2em 0;
		width:200px;
		height: 40px;
		
	}
	.new-blog-single-sns{
		order: 1;
		margin: auto;
		width: 100%;
	}
	.new-blog-single-snsicon li{
		width: 30px;
		height: 30px;
	}
	.new-blog-sidebar{
		width: 100%;
		order: 3;
	}
	.new-blog-recommend {
		order: 2;
		padding: 5em 0;
		width: 80vw;
		min-height: 130vh;
		position: relative;
	}
	.new-blog-recommend .new-blog-article2{
		margin-bottom: 0;
		padding: 0;
	}
	
	.new-blog-recommend .new-recommend-blog-column{
	/*width: calc((100% - 40px) / 3);*/
grid-template-columns: repeat(2, 1fr);

}
}
@media screen and  (max-width: 740px) {
	.new-blog-recommend .new-recommend-blog-column{
		grid-template-columns: repeat(1, 1fr);
	}
}
/*----------------ニュースアーカイブ　new news archive---------------------*/
/*ニュースアーカイブ　コンテナ*/
#new-news-archive{
	margin: auto;
	padding: 5em 0;

	/*max-width: 1000px;*/
}

.new-news-text{
	
}

#new-news-archive .new-news-article{
	margin: auto;
	position: relative;
	padding: 2em 10%;
}

.new-news-article::before{
	
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 80%;
	height: 100%;
	background: linear-gradient(0deg, rgb(221 221 221 / 100%) 0%, rgb(221 221 221 / 100%) 1px,rgb(221 221 221 / 0%) 1px );
}

@media screen and ( max-width: 740px){
	/*ニュースアーカイブ　コンテナ*/
	#new-news-archive{
		padding: 4em 0;
	}
}
/*ニュースアーカイブ　テキスト*/
.new-news-text p{
	padding-top: 0.5em;
}
/*ニュースアーカイブ　サムネ*/
.new-news-thumb{
	width: 6em;
	height: 6em;
	aspect-ratio: 1 / 1;
}
.new-news-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*ニュースアーカイブ　テキスト　コンテナ*/
.new-news-text{
	height: auto;
	position: relative;
	padding-right: 2.5em;
	display: flex;
	/*padding-left: 0.5em;*/
}
/*ニュースアーカイブ　テキスト　アーティクル*/
ul.new-news-column li{
	display: flex;
	margin: auto;
	padding: 2em 0;
	gap: 1em;
	
	position: relative;
	cursor: pointer;
}

.new-news-column{
	
	/*border-top: solid 1px #ddd;*/
	margin-top: 2em;
	position: relative;
}


/*ニュースアーカイブ　テキスト　アーティクル　アロー*/
.new-news-article::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 10%;
	width: 0.7em;
	height: 0.7em;
	border-top: solid 1px #aaa; 
	border-right: solid 1px #aaa; 
	transform: translate(-50%, -50%) rotate(45deg);
}
/*ニュースアーカイブ　テキスト　見出し*/
.new-news-article h2{
	padding: 0;
	line-height: 1.5;
	margin: 0;
	font-size: 1.3em;
	
	order: 2;
	width: calc(100% - 100px);
	text-align: left;
	
}
.new-news-article time{
	order: 1;
	line-height: 2;
	width: 100px;
}

@media screen and  (max-width: 740px) {
	.new-news-article time{
	
	width: 80px;
}
	.new-news-article h2{

	width: calc(100% - 80px);
	
	
}
}

/*------------------ new news single ----------------------*/

#new-news-single{
	margin: auto;
	padding: 4em 0;
	min-height: 80vh;
	width: 80%;
	max-width: 850px;
	/*
	display: grid;
	
	align-content: center;

	align-items: center;
	*/
}
.new-single-button{
	text-align: center;
}

.new-news-single{
	padding-bottom: 3em;
}

.new-news-single h2{
	margin: 0;
	margin-top: 2em;
}

.new-news-single p{
	margin-top: 3em;
}
.new-news-single{
	max-width: 850px;
}
.new-news-single-thumb{
	margin-top: 4em;
	height: auto;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 2 / 1;
	filter: grayscale(100%);
}
.new-news-single-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.new-news-single-content{
	margin-top: 5em;
	margin-bottom: 5em;
}

@media screen and (max-width: 740px){
	#new-news-single{
		padding: 2em 0;
	}
}
/*---------------------　トップメイン top main ---------------------*/
/*トップメイン　container*/
#new-top-main{
	width: 100%;
	height: 100vh;
	position: relative;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 3em 0;
	background-image: linear-gradient(90deg, rgb(230 230 230 / 0%) 0%, rgb(230 230 230 / 0%) 50%,rgb(230 230 230 / 100%) 50%, rgb(230 230 230 / 100%) 100%);
}
/*ヘッダー　ロゴ*/
#cxg-logo{
	position: absolute;
	left: 63px;
	top: 31px;
	z-index: 10;
	margin: 0;
	padding: 0;
	width: 150px;
	height:auto;
	cursor: pointer;
	mix-blend-mode: difference;
}

#cxg-logo img{
	width: 100%;
	height: auto;
	padding: 0;
}
@media screen and (max-width: 740px){
	#new-top-main{
		height: 90vh;
	}
}

@media screen and (max-width: 740px){
	/*ヘッダー　ロゴ*/
	#cxg-logo{
		position: absolute;
		left: 10vw;
		top: 31px;
		width: 140px;
		height: auto;
	}
}

/*--------------  メニュー  --------------*/
.menu-list{
	display: flex;
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 0.85em;
	margin-bottom: 1em;
	line-height: 1;
	letter-spacing: 2px;
}

.menu-list a{
	color: #272727;
}
#menu-panel{
	display: block;
	
	margin:30px 30px 0 0;
}

.menu-sns{
	display: none;
	margin-left: -10px;
}
.menu-logo{
	display: none;
}
.menutext{
	width: auto;
	padding: 0.5em 1em 0.3em;
	border-left: solid 1px #ccc;
	mix-blend-mode: difference;
}
.menutext.menutext-active{
	color: red!important;
	mix-blend-mode:normal;
}

#new-main-menu{
	position: absolute;
	top:0;
	right: 0;
	z-index: 20;
}

/*ハンバーガー*/
#new-menu{
	display: none;
}

@media screen and (max-width: 1250px) {
	.menu-panel-wrapper{
		position: fixed;
		top: 0; 
		left: 0;
		width: 0;
		height: 100vh;
		overflow: hidden;
	}
	/*メニューパネル*/
	#menu-panel{
		position: fixed;
		top: 0; 
		left: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: rgba(255, 255, 255, 1);
		margin:0;
		padding: 5em 10vw 0;
		color: #fff;
		display: none;
		animation: fadeInAnimation 800ms ease-out;
	}
	/*メニューパネル　アクティブ*/
	#menu-panel.menuopen{
		display: block;
	}
	/*メニュー*/	
	#new-menu{
		display: block;
		position: fixed;
		top: 1em;
		right: 1em;
		width: 50px;
		height: 50px;
		z-index: 200;
		cursor: pointer;
	}
	/*ハンバーガー*/
	ul li.hamburger{
		height: 1px;
		width: 25px;
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background: #272727;
		mix-blend-mode:difference;
		z-index: 10;
	}
	ul li.hamburger:first-child{
		left: 50%;
		top: 35%;
	}
	ul li.hamburger:nth-child(2){
		left: 50%;
		top: 50%;
	}
	ul li.hamburger:nth-child(3){
		left: 50%;
		top: 65%;
	}
	/* ハンバーガー　アクティブ */
	ul li.hamburger.menuopen:first-child{
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%)  rotate(45deg);
		transform: translate(-50%, -50%) rotate(45deg);
	}
	ul li.hamburger.menuopen:nth-child(2){
		left: 50%;
		top: 50%;
		opacity: 0;
	}
	ul li.hamburger.menuopen:nth-child(3){
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%)  rotate(135deg);
		transform: translate(-50%, -50%) rotate(135deg);
	}
	/*メニュー　テキスト　ラッパー*/
	.menu-list{
		display: flex;
		flex-flow: column;	
		font-family: "Castoro", sans-serif;
		font-weight: 400;
		font-style: normal;
		text-align: center;
		font-size: 0.85em;
		margin-bottom: 1em;
		line-height: 1;
		letter-spacing: 2px;	
	}
	/*メニュー　テキスト*/
	.menu-list a{
		color: #ddd;
	}
	.menutext {
		color: #272727;
		font-size: 1.2em;
		padding: 0;
		text-align: left;
		border-bottom: solid 1px #ddd;
		border-left: none;
		display: flex;
	}
	ul.menu-list .menutext a{
		/*color: #fff;*/
		padding: 1.6em 35em 1.6em 0;
		
	}
	/*メニュー　SNS*/
	.menu-sns{
		display: flex;
		padding-top: 10px;
	}
	.menu-sns li{
		width: 40px;
		height: 40px;
	}
	.menu-sns li img{
		width: 100%;
		height:auto;
		object-fit: contain;
	}
}

/*--------------  メインスライド --------------*/

/*メインラッパー*/
.new-top-main-wrapper{
	display: flex;
}
/*メイン バー */
.new-main-bar{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	display:inline-block;
	line-height: 1;
	position: absolute;
	font-size: 0.85em;
	-webkit-transform: translate(-50%, -50%) rotate(90deg);
	transform: translate(-50%, -50%) rotate(90deg);
	left: 30px;
	height: 30px;
	width: 30px;
	top: 50%;
	transform-origin: left ;
	z-index: 6;
}
.new-main-bar::before{
	content: '';
	width: 300px;
	height: 1px;
	position: absolute;
	left: -160px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%,-50%);
	top: 5px;
	background: #272727;
	z-index: -1;
}
.new-main-bar::after{
	content: '';
	width: 300px;
	height: 3px;
	position: absolute;
	left: -160px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%,-50%);
	top: 5px;
	background: #fff;
	z-index: -1;
}
/*スクロールバー　scroll bar*/
.new-main-scrollbar-wrapper{
	overflow: hidden;
	position: absolute;
	width: 4px;
	height: 60px;
	left: 50%;
	bottom: 0px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.new-main-scrollbar-text{
	overflow: hidden;
	position: absolute;
	width: 70px;
	left: 50%;
	bottom: 65px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	z-index: 5;
	text-align: center;
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.85em;
}
.new-main-scrollbar{
	position: absolute;
	width: 1px;
	height: 50px;
	left: 50%;
	bottom: 0px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	background: #272727;
	z-index: 5;
}
/*メインヘッド*/
#new-top-main h3{
	text-align: left;
}
/*メインテキスト*/
.new-main-text{
	width: calc(50% - 40px);
	display: grid;
	align-content: center;
	align-items: center;
}
.new-main-text-wrapper{
	margin: auto;
}
.new-main-text-wrapper li{
	display: none;
}
.new-main-text-wrapper li.textlink-active{
	display: block;
}
/*ページリンク　detailボタン*/
button.main-pageling{
	color:#272727;
	background: rgba(255, 255, 255, 0);
	width: 5.5em;
	min-width:0;
	padding: 0.5em 1.5em 0.3em 0;
	margin: inherit;
	margin-top: 1em;
	position: relative;
	line-height: 0;
	letter-spacing: 1px;
	height:2em;
	text-align: left;
	display: inline-block;
	border: none;
}
button.main-pageling::after {
	content: '';
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	right: 0.6em;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}
/*メインスライドサイズ*/
.new-main-slide{
	width: calc(50% + 40px);
	position: relative;
	aspect-ratio: 2 / 1;
	max-width: 1000px;
}
/*メインスライド*/
.new-main-slides{
	width: 100%;
	aspect-ratio: 2 / 1;
	position: absolute;
}
/*メインスライド イメージ*/
.new-main-slideimage{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	filter: grayscale(100%);
	/*display: none;*/
	opacity: 0;
	
}
.new-main-slideimage:first-child{	
	display: block;
}
.new-main-slideimage img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* メインスライドイメージ　アクティブ */
.new-main-slideimage.slideactive{
	display: block;
	opacity: 1;
	z-index: 5;
	/*animation: fadeInAnimation 800ms ease-out;*/
}
/*メインスライド prevボタン*/
.new-main-prevbtn{
	position: absolute;
	width: 40px;
	height: 40px;
	left: 0px;
	bottom: -40px;
	z-index: 6;
	background: #fff;
	cursor: pointer;
}
.new-main-prevbtn::before {
	position: absolute;
	width: 10px;
	height: 10px;
	border-right: 1px solid #272727;
	border-bottom: 1px solid #272727;
	content: '';
	top: 50%;
	left: 55%;
	-webkit-transform: translate(-50%, -50%) rotate(135deg);
	transform: translate(-50%, -50%) rotate(135deg);
}
/*メインスライド nextボタン*/
.new-main-nextbtn{
	position: absolute;
	background: #fff;
	width: 40px;
	height: 40px;
	left: 40px;
	bottom: -40px;
	z-index: 6;
	cursor: pointer;
}
.new-main-nextbtn::before {
	position: absolute;
	width: 10px;
	height: 10px;
	border-right: 1px solid #272727;
	border-top: 1px solid #272727;
	content: '';
	top: 50%;
	left: 45%;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}
/* メイン　インジケーター ラッパー*/
.new-main-slide-indicator{
	position: absolute;
	right: 45px;
	bottom: -60px;
	display: flex;
	gap: 2em;
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	color: #aaa;
}
/* メイン　インジケーター */
.new-main-slide-indicator li{
	position: relative;
	cursor: pointer;
}
ul li.new-main-slide-indicator-n::before{
	content: '';
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform:  translate(-50%, -50%);
	width: 0px;
	height: 1px;
	left: 50%;
	top: -10px;
	background: #272727;
}
ul li.new-main-slide-indicator-n:first-child::before{
	width: 30px;
}
/* メイン　インジケーター アクティブ*/
.new-main-slide-indicator li.top-main-active{
	color: #272727;
}

@media screen and (max-width: 1250px) {
	/*メイン*/
	.new-top-main-wrapper{
		display: flex;
		flex-flow: column;
		gap: 50px;
	}
	/*スライドテキスト*/
	.new-main-text{
		width: 60vw;
	
		padding: 0;
		margin: auto;
		order: 2;
		position: relative;
	}
	/*スライドメイン*/
	.new-main-slide{
		width: 60vw;
		height: 60vw;
		position: relative;
		order: 1;
		margin: auto;
		max-width: none;
		max-height: none;
	}
	/*スライドメイン*/
	.new-main-slides{
		aspect-ratio: 1 / 1;
	}
	/*スライドprevボタン*/
	.new-main-prevbtn{
		left: -40px;
		bottom:0;
		cursor: pointer;
	}
	/*スライドnextボタン*/
	.new-main-nextbtn{
		left: 0px;
		bottom: 0;
		cursor: pointer;
	}
	/*スライドインジケーター*/
	.new-main-slide-indicator{
		right:7px;
		bottom:-40px;
	}
	.new-main-slide-indicator li::before{
		content: '';
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform:  translate(-50%, -50%);
		width: 30px;
		height: 1px;
		left: 50%;
		top: -10px;
		background: #272727;
	}
	/*メイン　テキストラッパー*/
	.new-main-text-wrapper{
		margin: 0;
	}
}

@media screen and (max-width: 740px) {
	/* トップメイン　ラッパー */
	.new-top-main-wrapper{
		/*position: absolute;*/
		top: 80px;
		left: 15vw;
		gap: 70px;
	}
	/* トップメイン　テキスト　ヘッド */
	/*
	.new-top-main-wrapper h3{
		font-size: 2.7rem;
		margin-bottom: 0.3em;
		line-height: 1.4;
	}
	*/
	/* メインスライド　ラッパー */
	.new-main-slide{
		width: 70vw;
		height: 70vw;
		margin: auto;
	}
	/* メインスライド　*/
	.new-main-slides{
		height: 100%;
		width: 100%;
	}
	/* メインスライド　イメージ */
	.new-main-slideimage{
		width: 100%;
		height: 100%;		
	}
	/* メインスライド　テキストラッパー */
	.new-main-text{
		width: 70vw;
		max-width: 450px;
	}
	/* メインバー */
	.new-main-bar{	
		/* left: 12vw; */
		/* display: none; */
	}
	.new-main-bar::before{
		width: 240px;
		left: -130px;
	}
	.new-main-bar::after{
		width: 240px;
		left: -130px;
	}
	/* トップメイン　インジケーター */
	.new-main-slide-indicator{
		left: auto;
		right: 0px;
	}
	/* インジケーター */
	.new-main-slide-indicator{
		right: 8px;
		bottom:-40px;
		gap: 2em;
		line-height: 1;
	}
	/* メイン prevボタン */
	.new-main-prevbtn{
		left: 0px;
		bottom:0;
		display: none;
	}
	/* メイン nextボタン */
	.new-main-nextbtn{
		left: 40px;
		bottom: 0;
		display: none;
	}
	/* メインスクロールバー */
	.new-main-scrollbar-wrapper{
		height: 40px;
	}
	.new-main-scrollbar-text{
		bottom: 45px;
	}
	.new-main-scrollbar{
		height: 40px;
	}
}

/*------------  top about  ------------ */

#new-top-about{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	text-align: center;
}
.new-top-abouticon{
	width: 200px;
	height: 150px;
	margin: 0 auto;
	position:relative;
}
.new-top-pcicon{
	width: 200px;
	height: 150px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
/*------------------------------------top works--------------------------------------*/
#new-top-works{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	text-align: center;
}
#new-top-works .new-work-slidecontainer{
	width: 100vw;
	height: auto;
	overflow: auto;
	margin-top: 1em;
	padding: 0 5em;
	box-sizing: border-box;
	scroll-snap-type: x mandatory;
	/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
	position: relative
}
#new-top-works .new-work-slidecontainer::-webkit-scrollbar{
	display: none;
}
@media screen and (min-width: 1250px) {
#works-prev-arrow{
	position: absolute;
	left: 0;
	transform: translateY(-50%);
	top: 50%;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	
}
#works-prev-arrow::before{
	content: '';
	position: absolute;
	-webkit-transform: translate(-50%, -50%)  rotate(-45deg);
	transform: translate(-50%, -50%)  rotate(-45deg);
	transform-origin: center;
	left: 60%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-top: solid 1px #272727;
	border-left: solid 1px #272727;
}
#works-next-arrow{
	position: absolute;
	right: 0;
	transform: translateY(-50%);
	top: 50%;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	
}
#works-next-arrow::before{
	content: '';
	position: absolute;
	-webkit-transform: translate(-50%, -50%)  rotate(45deg);
	transform: translate(-50%, -50%)  rotate(45deg);
	transform-origin: center;
	left: 40%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
}
}
.new-work-slides{
	display: flex;
	margin: 2em 0;
	margin-right: 2em;
	align-items: stretch;
}
.new-work-slide{
	width: 17vw;
	max-width: 400px;
	
	border-radius: 10px;
	box-shadow: 0 0 10px #ccc;
	padding-bottom: 1em;
	margin-left: 1em;
}
.new-work-slide-r{
	scroll-snap-align: start;
	cursor: pointer;
}
.new-work-slide h2{
	font-size: 1.2em;
	margin: 0;
}
.new-work-slide .new-work-category{
	font-size: 0.8em;
}
.new-work-slide img{
	width: 100%;
	height: auto;
	object-fit: contain;
	-webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
	padding: 1em 1em 0 1em;
}

#new-top-works .new-work-slide{
	opacity: 0;
}
ul li.new-work-slide-r:last-child .new-work-slide{
	margin-right: 1em;
}
@media screen and (max-width: 1250px) {
	.new-work-slide{
		width: 33vw;
	}
	.new-work-slide{
		max-width:none;
	}
}
@media screen and (max-width: 740px) {
	.new-work-slide{
		width: 50vw;	
	}	
}
/*---------------------------top movie-------------------------------------*/
#new-top-movie{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	text-align: center;
}
#target{
	position: relative;
	width: 100vw;
	height: auto;
}
#new-top-movie .new-work-slidecontainer{
	width: 100vw;
	height: auto;
	overflow: auto;
	margin-top: 1em;
	padding: 0 5em;
	box-sizing: border-box;
	scroll-snap-type: x mandatory;
	/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);	
	cursor: pointer;

}
#new-top-movie .new-work-slidecontainer::-webkit-scrollbar{
		display: none;
	}

@media screen and (max-width: 1250px) {
	#new-top-movie .new-work-slidecontainer{
		/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
		-ms-overflow-style: none;
		/*Firefoxへの対応*/
		scrollbar-width: none;
	}
	
}


#new-top-movie .new-work-slides{
	display: flex;
	margin: 2em 0;
	margin-right: 2em;
	align-items: stretch;
}
#new-top-movie .new-work-slide{
	width: 32vw;
	max-width:1000px;
	
	box-shadow: none;
	border-radius: 10px;
	padding-bottom: 1em;
	margin-left: 2em;
}
.new-movie-slideimg{
	position: relative;
	width:100%;
	height: 100%;
	background: #ccc;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
@media screen and (max-width: 1250px) {
.new-movie-slideimg::before{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	/*transform: translate(-50%, -50%);*/
	z-index: 5;
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-play.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.new-movie-slideimg::after{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	z-index: 5;
	/*transform: translate(-50%, -50%);*/
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-playmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
}
.new-movie-slideimg-mask{
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);	
}

#new-top-movie .new-work-slide-r{
	scroll-snap-align: start;
}
#new-top-movie .new-work-slide {
	border-radius: 0;
}
#new-top-movie .new-work-slide h2{
	font-size: 1.3em;
	margin: 0;
	text-align: left;
}
#new-top-movie .new-work-slide .new-work-category{
	font-size: 0.8em;
}
#new-top-movie .new-work-slide img{
	width: 100%;
	height: auto;
	object-fit: contain;
	-webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
	padding: 0;
}
#new-top-movie ul li.new-work-slide-r:last-child .new-work-slide{
	margin-right: 2em;
}

@media screen and (max-width: 1250px) {
	#new-top-movie .new-work-slide{
		width: 60vw;
	}
	#new-top-movie .new-work-slide{
		max-width:none;
	}
	.new-movie-slideimg::before{
		content: '';
		position: absolute;
		top: calc(50% - 40px);
		left: calc(50% - 40px);
		/*transform: translate(-50%, -50%);*/
		z-index: 5;
		width: 80px;
		height: 80px;
		background-image: url('../images/icon-movie-play.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	.new-movie-slideimg::after{
		content: '';
		position: absolute;
		top: calc(50% - 40px);
		left: calc(50% - 40px);
		z-index: 5;
		/*transform: translate(-50%, -50%);*/
		width: 80px;
		height: 80px;
		background-image: url('../images/icon-movie-playmark.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
}
@media screen and (max-width: 740px) {
	#new-top-movie .new-work-slide{
		width: 70vw;	
	}	
	.new-movie-slideimg::before{
		content: '';
		position: absolute;
		top: calc(50% - 30px);
		left: calc(50% - 30px);
		/*transform: translate(-50%, -50%);*/
		z-index: 5;
		width: 60px;
		height: 60px;
		background-image: url('../images/icon-movie-play.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	.new-movie-slideimg::after{
		content: '';
		position: absolute;
		top: calc(50% - 30px);
		left: calc(50% - 30px);
		z-index: 5;
		/*transform: translate(-50%, -50%);*/
		width: 60px;
		height: 60px;
		background-image: url('../images/icon-movie-playmark.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
}

/*top news*/
#new-top-news{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	text-align: center;
}
#new-top-news .new-news-single-thumb{
	margin-top: 0.1em;
	margin-bottom: 1em;
	height: auto;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 2 / 1;
	
}
.top-news-column{
	width: 80%;
	max-width: 850px;
	margin: 3em auto;
	text-align: left;
}
.top-news-column h2{
	line-height: 1.3;
	margin-bottom: 0.2em;
	font-size: 1.3em;
}
.top-news-text{
	padding-top: 2em ;
	padding-bottom: 2em ;
	padding-right: 2.5em;
	position: relative;
	cursor: pointer;

}
.top-news-text::after{
	content: '';
	width: 0.8em;
	height: 0.8em;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	transform: translate(-50%, -50%) rotate(135deg);
	position: absolute;
	top: 48%;
	right: 0;
}
.top-news-article{
	width:100%;
	height: auto;
	display: flex;
	flex-flow: column;
	border-bottom: solid 1px #272727;
	/*margin: 1em 0 ;*/
	position: relative;
	opacity: 0;
}
.top-news-content img{
	width: 100%;
	height: auto;
}
.top-news-content{
	height: 0;
	width: 100%;
	overflow: hidden;
	
	
}
.top-news-content p{
	padding: 1em 0;
}
.top-news-content.top-news-active{
	height: auto;
}
.close-wrapper{
	width: 200px;
	posision: relative;
	margin-bottom: 30px;
	display: flex;
}
.top-news-mask{
	/*clip-path: polygon(0% 0%, 0% 0%, 0% 0%,  0% 0%);*/
}
/*.news-wrapper-mask{
	clip-path: polygon(0% 0%, 0% 0%, 0% 0%,  0% 0%);
}*/
.top-news-closebtn{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: right;
	font-size: 1em;
	margin-bottom: 1em;
	line-height: 1;
	letter-spacing: 2px;
	position:absolute;
}
.top-news-closebtn-icon{
	position:relative;
	width: 20px;
	height: 20px;
}
.cross {
	width: 18px;
	height: 18px;
	text-align: right;
	display: inline-block;
	position: relative;
	margin-right:auto;
	padding-left: 20px;
	line-height: 1;
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.4rem;
	cursor: pointer;
	letter-spacing: 2px;
	margin-bottom: 1.5em;
}
.cross::before,
.cross::after {
	content: "";
	position: absolute;
	top: 34.5%;
	left: 50%;
	width: 14px;
	height: 1px;
}
.cross::before {	
	background-color: #272727;
	transform: translate(-50%, -50%) rotate(45deg);
}
.cross::after {
	background-color: #272727;
	transform: translate(-50%, -50%) rotate(-45deg);
}
.cross:hover {
	opacity: 0.8;
}
.cosoo{
	width: 80px;
	margin-left: auto;
}
@media screen and (max-width: 740px) {
	
	.cross {
		width: 15px;
  		height: 15px;
		text-align: right;
		display: inline-block;
 		position: relative;
		margin-right:auto;
		padding-left: 18px;
		line-height: 1;
		font-family: "Castoro", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.3rem;
		cursor: pointer;
		letter-spacing: 2px;
	}
	.cross::before,
	.cross::after {
 		content: "";
  		position: absolute;
  		top: 34.5%;
  		left: 50%;
		width: 13px;
		height: 1px;
	}
	.cross::before {
		background-color: #272727;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.cross::after {
  		background-color: #272727;
  		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.cosoo{
		width: 73px;
		margin-left: auto;
	}
}	
/*top blog*/
#new-top-blog{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	text-align: center;
}
#new-top-blog .new-blog-column{
	padding-top: 3em;
	width: 90%;
	margin: 0 auto;
	column-count: 4;
	column-gap: 20px;
	margin-top: 0px;
}
/*
#new-top-blog .new-blog-column li:first-child{
	margin-top: 15px;
}
*/

_::-webkit-full-page-media, _:future, :root  .new-blog-column li:first-child {
	margin-top: 15px;
}
_::-webkit-full-page-media, _:future, :root  .new-blog-column{
	margin-top: -13px;
}


/*ヘッダー　ロゴ*/

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome,  .new-blog-column li:first-child {
		margin-top: 15px;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome,  .new-blog-column{
		margin-top: -13px;
	}
}

#new-top-blog button.top-blog-readmore {
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#272727;
	background: rgba(255, 255, 255, 0);
	width: 100%;
	height: 50vw;
	margin:  auto;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	margin-top: -50vw;
	background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%,  rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 0%) 100%);
	display: none;
}
#new-top-blog button.top-blog-readmore::after {
	content: '';
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	right: 50%;
	top: calc(50% + 20px);
	-webkit-transform: translateY(-50%) rotate(135deg);
	transform: translateY(-50%) rotate(135deg);
}
#new-top-blog button.top-blog-readmore-close {
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#272727;
	width: 100%;
	height: 20vw;
	margin:  auto;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	margin-top: 0;
	background:#fff;
	display: none;
}
#new-top-blog button.top-blog-readmore-close::after {
	content: '';
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	right: 50%;
	top: calc(50% + 20px);
	-webkit-transform: translateY(-50%) rotate(-45deg);
	transform: translateY(-50%) rotate(-45deg);
}
#new-top-blog button.top-blog-readmore.blog-readmore-active {
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#272727;
	background: rgba(255, 255, 255, 0);
	width: 100%;
	height: 30vw;
	margin:  auto;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	margin-top: 0;
	background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%,  rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 0%) 100%);
}
#new-top-blog button.top-blog-readmore.blog-readmore-active::after {
	content: '';
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	right: 50%;
	top: calc(50% + 20px);
	-webkit-transform: translateY(-50%) rotate(-45deg);
	transform: translateY(-50%) rotate(-45deg);
}

/*
#new-top-blog .new-blog-article img{
	opacity: 0;
}
*/

@media screen and (max-width: 1250px) {
	#new-top-blog .new-blog-column{
		column-count: 2;
		width: 80%;
	}
}
@media screen and (max-width: 740px) {
	#new-top-blog .new-blog-column{
		padding-top: 3em;
		margin: 0 auto;
		column-count: 1;
	}
	#new-top-blog .new-blog-article.top-blog-close{
		display: none;
	}
	#new-top-blog button.top-blog-readmore {
		display: block;
	}
	#new-top-blog ul li.new-blog-article:nth-child(7){
		pointer-events: none;
	}
	#new-top-blog ul li.new-blog-article.blog-event-active:nth-child(7){
		pointer-events: auto;
	}
	
}
/* new top demo */
#new-top-demo{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	
	position: relative;
}
#new-top-demo::after{
content: '';
	position: absolute;
	background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 50%,rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 100%) 100%);

	width: 100vw;
	height: 100%;
	right: 0;
	top: 0;
	z-index: -1;
}
#new-top-demo h3{
	
}

#new-top-demo button{
	/*
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#fff;
	background: #272727;
	width: 12em;
	padding: 1em 1.5em;
	margin:  0;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	*/
}

.new-top-demo-textcontainer{
	width: auto;
	margin: auto;
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}
/*バック*/
.new-top-demo-background{
	width: 80vw;
	min-height: 100vh;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0.7;
}

/*
.new-top-demo-background::after{
	content: '';
	position: absolute;
	background: linear-gradient(90deg, rgb(255 255 255 / 100%) 0%,rgb(255 255 255 / 0%) 80%, rgb(255 255 255 / 0%) 80%);
	width: 80vw;
	height: 100%;
	right: 0;
	top: 0;
	mix-blend-mode: lighten;
}
*/
.new-top-demo-back01{
	display: flex;
	flex-flow: column;
	position: absolute;
	right: 0;
	top: -100px;
	z-index: -30;
	gap: 0;
	width: 30%;
	filter: grayscale(100%);
	opacity: 0;
}
.new-top-demo-back01 li {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: -3px;
}
.new-top-demo-back01 img{
	width: 100%;
	margin: 0;
	padding: 0;
}
.new-top-demo-back02{
	display: flex;
	flex-flow: column;
	position: absolute;
	right: calc(30% + 6px);
	top: -100px;
	z-index: -30;
	gap: 0px;
	width: 30%;
	filter: grayscale(100%);
	opacity: 0;
}
.new-top-demo-back02 li {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: -3px;
}
.new-top-demo-back02 img{
	width: 100%;
	margin: 0;
	padding: 0;
}
.new-top-demo-back03{
	display: flex;
	flex-flow: column;
	position: absolute;
	right: calc(60% + 12px);
	top: -100px;
	z-index: -30;
	gap: 0px;
	width: 30%;
	filter: grayscale(100%);
	opacity: 0;
}
.new-top-demo-back03 li {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: -3px;
}
.new-top-demo-back03 img{
	width: 100%;
	margin: 0;
	padding: 0;
}
.demo-background-container{
z-index: 0;
	transform: rotate(-10deg);
}
@media screen and (max-width: 1250px) {
.new-top-demo-textcontainer{
	width: auto;
	margin: auto;
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}
}
@media screen and (max-width: 740px) {
	#new-top-demo{
	width: 100%;
	min-height: 100vh;
	display: grid;
	align-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}
	/*バック*/
	.new-top-demo-background{
	width: 100vw;
	min-height: 100vh;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0.4;
	}
	
	#new-top-demo h3{
	text-align: center;
}
	
#new-top-demo button{
	/*
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#fff;
	background: #272727;
	width: 12em;
	padding: 1em 1.5em;
	margin:  auto;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	*/
	background: linear-gradient(90deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 100%) 50%,rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 0%) 100%);
	background-size: 200%;
	background-position: right;
}
	#new-top-demo button::before{
	content: attr(data-en);
	color: #272727!important;
	mix-blend-mode: normal;
}
	#new-top-demo button::after{
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
}

	.new-top-demo-back01{
		width: 40%;
	}
	.new-top-demo-back02{
		width: 40%;
		right: calc(40% + 6px);
	}
	.new-top-demo-back03{
		width: 40%;
		right: calc(80% + 12px);
	}
	
	.new-top-demo-textcontainer{
	width: auto;
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
}

/*top gallery*/
#new-top-gallery{
	width: 100%;
	min-height: 110vh;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10em 0;
	text-align: center;
}

#new-top-gallery .top-gallery-wrapper{
    /*max-width: 1500px;*/
    margin: 0 auto;
	padding: 5px;
	width: 70%;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	margin-top: 3em;
	gap: 0.5em;
}

#new-top-gallery .new-top-grid-item{
	cursor: pointer;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	filter:grayscale(100%) ;
}
#new-top-gallery .new-top-grid-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

@media screen and (max-width: 1250px) {
	#new-top-gallery .top-gallery-wrapper{
   	width: 50%;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 4em;
}
}

@media screen and (max-width: 740px) {
	#new-top-gallery .top-gallery-wrapper{
   		width: 70%;
	}
}

/* new footer*/

#footer{
	padding: 8em ;
	width: 100vw;
	font-size: 0.85em;
	margin: auto;
	border-top: solid 1px #272727;
	margin-top: 10em;
}
#footer a{
	color: #272727;
}
#footer .footer-logo img{
	width: 100%;
	height: auto;
}
#footer .footer-logo{
	padding-bottom: 1.5em;
	width: 150px;
	height: auto;
	padding-left: 0;
	margin-left: -2px;
}
#footer .footermenu-list {
    display: flex;
	 flex-wrap: wrap;
	margin-top: 1.7em;
	font-size: 1em;
	gap: 0.7em;
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
}

#footer .footermenu-list li{
	padding-right:0.7em;
	line-height: 1;
	border-right: 1px solid #272727;

}
.teladd{
	padding-left: 0.7em;
	
	font-size: 1.1em;
}
.mailadd{

	font-size: 1.1em;
}
.cstro{
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
}
.shop-banner ul{
	display: flex;
	margin-top: 0.3em;
	margin-left: -10px;
}
.footer-sns-button{
	width: 40px;
	heiht: 40px;
	mix-blend-mode: difference;
}
.shop-banner img{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 1250px){
	#footer{
		padding: 8em 10vw;
		width: 100vw;
	}
}

/*パンクズリスト*/
.new-bread-wrapper{

	position: absolute;
	top: 60px;
	width: 100vw;
	left: 0;
	z-index: 5;
	overflow-x: scroll;
	/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
}
.new-bread-wrapper::-webkit-scrollbar{
	display: none;
}

.bread-list{
	
	font-size: 1.3rem;
	color: #555;
	margin-left: 4vw;
}
.breadlist{
	position: absolute;
	left: 4vw;
	top:100px;
	padding-right: 15px;
	padding-left: 5px;
	white-space: nowrap;
}
.breadlist::after{
	content: "";
	width: 8px;
	height: 8px;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	transform: translate(-50%, -50%) rotate(45deg);
	position: absolute;
	top: 52.5%;
	right: 0;
}
.bread-list li.breadlist:first-child{
	padding-left: 0.3em; 
}
.bread-list li.breadlist:last-child{
	color: #ccc;
}
.bread-list li.breadlist:last-child::after{
	content: "";
	width: 0;
	height: 0;
	border-top: solid 0px #272727;
	border-right: solid 0px #272727;
	transform: translate(-50%, -50%) rotate(45deg);
	position: absolute;
	top: 52.5%;
	right: 0;
}
@media screen and (max-width: 740px){
	.bread-list{
		margin-left: 10vw;
	}
	.new-bread-wrapper{
		top: 53px;
	}
}



/*---------------　トップギャラリーギャラリー　---------------*/

/* トップギャラリー　モダール　toggleクラス */
.thumbopen{
	display: none;
}
.top-gallery-wrapper.thumb li.thumb-active{
	pointer-events: none;
}
/* トップギャラリー　モダール　サムネイル */
.top-gallery-wrapper.thumb{
	margin: 0;
	padding: 0; 
	flex-flow: column;
	position: fixed;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	top: 50%;
	z-index: 200;
	width: 10vw;
	height: 100vh;
	cursor: pointer;
	flex-wrap: wrap;
	overflow-y: auto;
			/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
}
.top-gallery-wrapper.thumb::-webkit-scrollbar{
	display: none;
}
/* トップギャラリー　モダール　サムネイルイメージ*/
.top-gallery-wrapper.thumb li{
	width: 5vw;
	height: 5vw;
	max-width: 70px;
	max-height: 70px;
	padding: 0;
	margin: 0;
	max-width: none;
	max-height: none;
	overflow: hidden;	
	filter: grayscale(100%);
}
.top-gallery-wrapper.thumb li img{
	opacity: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* トップギャラリー　モダール　*/
.modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	cursol: pointer;
	opacity: 0;
}
/* トップギャラリー　モダール　スライド　*/
.inner {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	/*background-color: rgba(255, 255, 255, 0.9);*/
	position: fixed;
	text-align: center;
	height: 80vh;
	width: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	animation: fadeInAnimation 800ms ease-out;
	z-index: 30;
	/*filter: grayscale(100%);*/
}
.inner img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* トップギャラリー　モダール　クローズアイコン　*/
.closemodal{
	width: 50px;
	height: 50px;
	/*background: #000;*/
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	cursor: pointer;
	background: rgb(0 0 0 / 0.5); 
}
.closemodal::after, .closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	opacity: 0.5;
	top: 50%;
	left: 50%;
	background: #fff;
	position: absolute;
}
.closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
.closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}
/* トップギャラリー　サムネイル　*/
.thumb-icon{
	width: 50px;
	height: 50px;
	position: fixed;
	top: 0;
	right: 50px;
	z-index: 200;
	cursor: pointer;
	background: rgb(0 0 0 / 0.5); 
}
.thumb-icon-none{
	display: none;
}
.thumb-icon::before{
	position: absolute;
	content: '';
	width: 30px;
	height: 30px;
	opacity: 0.5;
	transform: translate(-50%,-50%) ;
	top: 50%;
	left: 50%;
	background-image: url('../images/icon-thumb-wiite.svg');
	background-repeat: no-repeat;
	background-position:center;
	background-size: contain;
}

@media screen and (max-width: 1050px) {
	/* トップギャラリー　モダール　クローズアイコン　*/
	.closemodal{
		width: 40px;
		height: 40px;
	}
	.closemodal::after, .closemodal::before{
		content: '';
		width: 25px;
	}
	/* トップギャラリー　モダール　サムネイルアイコン　*/
	.thumb-icon{
		width: 40px;
		height: 40px;
		right: 40px;
	}
	.thumb-icon::before{
		width: 25px;
		height: 25px;
	}
	
	.inner {
		position: fixed;
		text-align: center;
		width: 80vw;
		aspect-ratio: 1 / 1;
		height: 80vw;
	}
	
	.top-gallery-wrapper.thumb{
	margin: 0;
	padding: 0; 
	flex-flow: column;
	position: fixed;
	transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
	top: 0;
	left: 0;
	z-index: 200;
	width: 7vw;
	height: 100vh;
	overflow-y: auto;
			/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
}
	
	
.top-gallery-wrapper.thumb::-webkit-scrollbar{
	display: none;
}
	
	.top-gallery-wrapper.thumb{
	
	}

	.top-gallery-wrapper.thumb li{
		width: 7vw;
		height: 7vw;
		max-width:inherit;
		max-height:inherit;
	}
}

@media screen and (max-width: 740px) {
	.top-gallery-wrapper.thumb {
		width: 12vw;
		
	}
	.top-gallery-wrapper.thumb li{
		width: 12vw;
		height: 12vw;
		
	}
	.top-gallery-wrapper.thumb{
	margin: 0;
	padding: 0; 
	flex-flow: column;
	position: fixed;
	transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
	top: 0;
	left: 0;
	z-index: 200;
	width: 12vw;
	height: 100vh;
	overflow-y: auto;
			/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
}
	
	
.top-gallery-wrapper.thumb::-webkit-scrollbar{
	display: none;
}
	/*
	.inner {
	
	width: 70vw;
	max-height: 70vw;
	
	}
	*/
	
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInAnimation2 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.7;
  }
}

/*blog single snsボタン非表示*/


.hidden {
 animation: fade .2s ease-in-out forwards;
 pointer-events: none;
}

@keyframes fade {
 from {
  opacity: 1;
 }

 to {
  opacity: 0;
 }
}

.visible {
 animation: fadeOut .2s ease-in-out forwards;
 pointer-events:all;
}

@keyframes fadeOut {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}
/*---------------------------------- workアーカイブ -------------------------------*/
#new-workarchive-container{
	width: 100vw;
	min-height: 100vh;
	display: grid;
	justify-content: center;
	align-items: stretch;
}

#new-workarchive-container .new-demo-column li{
	aspect-ratio: 3 / 2;
}

/*demo archive デモアーカイブ*/
#new-demoarchive-container{
	width: 100vw;
	min-height: 100svh;
	display: grid;
	justify-content: center;
	align-items: stretch;
}

.new-demo{
	width: 100vw;
	min-height: 100vh;
	overflow: hidden;
	padding: 4em 0;
}

.new-demo-column{
	display: grid; 
	 grid-template-columns: repeat(3, 1fr);
}
.new-demo-column li{
	aspect-ratio: 3 / 2;
	overflow: hidden;
	filter: grayscale(100%);
	padding: 0;
	margin: 0;
}
.new-demo-column li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 1250px) {
	.new-demo-column{
	 	grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 740px) {
	.new-demo-column li{
		width: 100%;
	}
	.new-demo-column{
	 	grid-template-columns: repeat(1, 1fr);
	}
}
/*movie archive ムービーアーカイブ*/

.new-movie-column{
	display: flex; 
	flex-wrap: wrap;
	padding-top: 4em;
	width: 80%;
	margin: auto;
	gap: 2em;
}
.new-movie-column li{
	width: calc((100% - 4em) / 3);
	
	overflow: hidden;
}
.new-movie-column li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.new-movie-column li h2{
	padding: 0;
	margin: 0;
	font-size: 1.2em;
}

.new-movie-thumb-img{
	width: 100%;
	aspect-ratio: 16 / 9;
	filter: grayscale(100%);
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.new-movie-thumb-img::before{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	/*transform: translate(-50%, -50%);*/
	z-index: 5;
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-play.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.new-movie-thumb-img::after{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	z-index: 5;
	/*transform: translate(-50%, -50%);*/
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-playmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.new-movie-thumb-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1250px) {
	.new-movie-column li{
		width: calc((100% - 2em) / 2);
	}
	
	.new-movie-thumb-img::before{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	/*transform: translate(-50%, -50%);*/
	z-index: 5;
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-play.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.new-movie-thumb-img::after{
	content: '';
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	z-index: 5;
	/*transform: translate(-50%, -50%);*/
	width: 100px;
	height: 100px;
	background-image: url('../images/icon-movie-playmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
}
@media screen and (max-width: 740px) {
	.new-movie-column li{
		width: 100%;
	}
	.new-movie-thumb-img::before{
	content: '';
	position: absolute;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	/*transform: translate(-50%, -50%);*/
	z-index: 5;
	width: 60px;
	height: 60px;
	background-image: url('../images/icon-movie-play.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.new-movie-thumb-img::after{
	content: '';
	position: absolute;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	z-index: 5;
	/*transform: translate(-50%, -50%);*/
	width: 60px;
	height: 60px;
	background-image: url('../images/icon-movie-playmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
}

/*----------------- テキストスプリット --------------------*/



.split-boxx{
	overflow: hidden;
	height: 2.8em;
	margin-bottom: 1.4em;
}
.text22,.text55,.text66,.text77,.text88,.text99,.text1010,.text1111,.text1212,.text1313,.text1414,.text1515,.text1616,.text1717,.text1818{
	display: inline-block;
	transform: translateY(1.1em);
	padding: 0 0.01em;
}
.spbox {
	margin: auto;
	width: fit-content;
}
.spbox h3{
	margin-bottom: 0em;
	padding-bottom: 0;
}
.spbox .split-boxx{
	margin-bottom: 0em;
	display: inline-block;
}
.text14,.text16{
	margin-right: 0.1em;
}

/*---------------  モダールムービー  -----------------*/

.textcontent{
	opacity: 0;
	text-transform: uppercase;
}
.jazz-gallery{
	display: flex;
	margin: auto;
	
}
.jazz-gallery li{
	width: 20vw;
	height: 20vw;
	max-width: 200px;
	max-height: 200px;
	overflow: hidden;
	list-style: none;
}
.jazz-gallery li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.yt-modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	cursor: pointer;
}
.yt-inner {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	/*background-color: rgba(255, 255, 255, 0.9);*/
	min-width: 350px;
	position: fixed;
	text-align: center;
	max-width: 1000px;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/*animation: fadeInAnimation 800ms ease-out;*/
	z-index: 30;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.yt-inner iframe {
  width: 100%;
  height: 100%;
}
.yt-modal .yt-inner img{
	width: 100%;
	height: auto;
}
.yt-closemodal{
	width: 50px;
	height: 50px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	cursor: pointer;
	background: rgb(0 0 0 / 0.5); 
}
.yt-closemodal::after, .yt-closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: #fff;
	opacity: 0.5;
	position: absolute;
}
.yt-closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
.yt-closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 1050px) {
	/* トップギャラリー　モダール　クローズアイコン　*/
	.yt-closemodal{
		width: 40px;
		height: 40px;
	}
	.yt-closemodal::after, .yt-closemodal::before{
		content: '';
		width: 25px;
	}
}

/*----------ムービーアーカイブ ---------------*/
#new-movie-archive .new-movie-slideimg-mask{
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);	
	cursor: pointer;
}

#new-movie-archive .new-movie-slideimg{
	position: relative;
	width:100%;
	height: auto;
	background: #ccc;
	overflow: hidden;
	
}


/*--------------------------- ギャラリーアーカイブ -----------------------------*/

/* ギャラリーアーカイブ コンテナ */
.gallery-container{
	width: 100vw;
	
}
/* ギャラリーアーカイブ フレックスボックス */
.gallery-container .top-gallery-wrapper {
	column-count: 4;
	column-gap: 0.6em;
}
/* ギャラリーアーカイブ フレックスボックス イメージ*/
.gallery-container .new-top-grid-item {
	margin: 0;
	padding: 0;
	filter: grayscale(100%);
	cursor: pointer;
	display: none;
}
.gallery-container .new-top-grid-item img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
	margin: 0;
	padding: 0;	
}
.gallery-container .new-top-grid-item{
	cursor: pointer;
	

	margin: 0;
	padding: 0;
	overflow: hidden;
	
}
.gallery-container .new-top-grid-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*
.grid-wrapper.thumb li.thumb-active{
	pointer-events: none;
}
/* トップギャラリー　モダール　サムネイル */
/*
.grid-wrapper.thumb{
	margin: 0;
	padding: 0; 
	flex-flow: column;
	position: fixed;
	transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
	top: 0%;
	left: 0;
	z-index: 200;
	height: 100vh;
	cursor: pointer;
	flex-wrap: wrap;
	overflow:auto;
	column-count:auto;
	-ms-overflow-style: none;
	
	scrollbar-width: none;
}
.grid-wrapper.thumb::-webkit-scrollbar{
	display: none;
}
/* トップギャラリー　モダール　サムネイルイメージ*/
/*
.grid-wrapper.thumb li{
	width: 3.2vw;
	height: 3.2vw;
	max-width: 70px;
	max-height: 70px;
	padding: 0;
	margin: 0;
	max-width: none;
	max-height: none;
	overflow: hidden;	
}
.grid-wrapper.thumb li img{
	opacity: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
*/
@media screen and (max-width: 1250px) {
	/* ギャラリーアーカイブ フレックスボックス */
	.gallery-container .top-gallery-wrapper {
		column-count: 3;
	}
}
@media screen and (max-width: 740px) {
	/* ギャラリーアーカイブ フレックスボックス */
	.gallery-container .top-gallery-wrapper {
		column-count: 2;
	}
}

/*-------------------- 404  -----------------------*/

#new-404-container h3{
	font-size: 3.1em;
	line-height: 1;
	padding: 0;
	margin-bottom: 0.3em;
}
#new-404-container h4{
	font-size: 1.5em;
}
#new-404-container p{
	text-align: center;
}

#new-404-container .about-section{
	width: 100vw;
	height: 85vh;
	min-height: auto;
	padding: 3em 5vw;
	align-content: center;
	align-items: center;
	text-align: center;
}

@media screen and (max-height: 1250px){
	#new-404-container .about-section{
		height: 75vh;
	}
}

/* ----------------------- サーチ --------------------------------- */

#new-result{
	width: 100%;
}

#new-result h4{
	text-align: left;
}


#new-result .new-result-text{
	width: 100%;
	padding-bottom: 0.5em;
	text-align: left;
	border-bottom: solid 1px #272727;
	margin-bottom: 2.5em; 
}

.new-blog-column-wrapper{
	width: 77%
}

@media screen and (max-width: 1250px){
	.new-blog-column-wrapper{
		width: 100%
	}
}

/*コンタクトフォーム*/


#new-contact-container .about-section{
	width: 100vw;
	padding: 5em 10vw;
	min-height: 100vh;
	max-width: 1000px;
	align-content: center;
	align-items: center;
	margin: auto;
	text-align: center;
}

@media screen and (min-width: 740px) {
	#new-contact-container .about-section{
		padding: 5em 3vw;
	}
}
@media screen and (min-width: 1250px) {
	#new-contact-container .about-section{
		padding: 5em 0;
	}
}
#pg-contact {
	text-align: center;
	
}



#pg-contact .lead strong {
	font-weight: 500;
}

#pg-contact .form-inner {
	margin: 8% auto 5%;
	width: 90%;
}

#pg-contact .form-inner .contact-form {
	margin: auto;
}

#pg-contact .form-inner .contact-form .input-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	text-align: left;
}

#pg-contact .form-inner .contact-form .input-box:not(:first-child) {
	margin-top: 5.5%;
}

#pg-contact .form-inner .contact-form .input-box .label-area {
	padding: 14px 10px 14px 0;
	width: 25%;
	font-size: 1.6rem;
}

#pg-contact .form-inner .contact-form .input-box .input-area {
	width: 75%;
	color: #404040;
	position: relative;
}

#pg-contact .form-inner .contact-form .input-box .input-area input {
	padding: 14px 14px;
	width: 100%;
	font-size: 1.6rem;
	color: #838383;
	border-radius: 5px;
	/*border: none;*/
	background-color:#eee;
	/*border: 1px solid #272727;*/
}

#pg-contact .form-inner .contact-form .input-box .input-area textarea {
	resize: none;
	padding: 14px 12px;
	width: 100%;
	height: 243px;
	font-size: 1.6rem;
	color: #838383;
	border: none;
	background-color:#eee;
	border-radius: 5px;
	/*border: 1px solid #272727;*/
	margin-bottom:-5px;
}

#pg-contact .form-inner .contact-form .input-box .input-area input:focus,
#pg-contact .form-inner .contact-form .input-box .input-area textarea:focus {
	outline: none;
	color: #272727;
	/*box-shadow: inset 2px 2px 3px rgba(0,0,0,.3);*/
}

#pg-contact .form-inner .contact-form .input-box .input-area .input-error {
	display: none;
	position: absolute;
	bottom: -30px;
	left: 0;
	color: #c00;
}

#pg-contact .form-inner .contact-form .input-box .input-area .input-error.wpcf7-not-valid-tip {
	display: block;
}

#pg-contact .form-inner .contact-form .action-box {
	margin-top: 5em;
	margin-bottom: 5em;
}

#pg-contact .form-inner .note {
	margin-top: 4%;
}

#pg-contact .form-inner .note small {
	font-size: 1.5rem;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-align: left;
}

.wpcf7 form.sent .wpcf7-response-output { /* 送信ボタン下完了時 */
    font-size: 0.1rem;
	font-family:"forma-djr-text", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-style:normal;
	padding:0.1em ;
	border-color: #eee;
	color:#eee;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { /* 送信ボタン下未入力警告 */
    border-color: var(--orange);
	padding:1em ;
	color: var(--orange);
}

.wpcf7-not-valid-tip { /* 必須未入力項目下の文章 */
    color: var(--orange);
    font-size: 1.5rem;	
}

/*フォーム終わり*/

#pg-contact .form-inner .contact-form .input-box .conform-area {
	width: 75%;
	height:100px;
	color: #272727;
	position: relative;
}

#pg-contact .section-buttons{
	width:260px;
	margin:auto;
}

/*フォーム*/
/* --------------------------------
 * smart phone
 * -------------------------------- */
@media screen and (max-width: 740px) {


	#pg-contact .form-inner {
	margin: 8% 0% 5% 0%;
	width: 100%;
	border-radius: 0;	
	}

	#pg-contact .form-inner .contact-form .input-box {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	#pg-contact .form-inner .contact-form .input-box:not(:first-child) {
		margin-top: 6.7%;
	}

	#pg-contact .form-inner .contact-form .input-box .label-area {
		padding: 6px 0;
		width: 100%;
		font-size: 1.6rem;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area {
		width: 100%;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area input {
		padding: 13px 18px;
		font-size: 1.6rem;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area textarea {
		padding: 13px 18px;
		height: 160px;
		font-size: 1.6rem;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area .input-error {
		padding: 0 18px;
		bottom: -20px;
		font-size: 1.1rem;
	}

	#pg-contact .form-inner .contact-form .action-box {
		margin-top: 5em;
	margin-bottom: 5em;
	}

	#pg-contact .form-inner .note {
		margin-top: 10%;
		
	}

	#pg-contact .form-inner .note small {
		font-size: 1.3rem;
		line-height: 1;
		letter-spacing: 1px;
	}
	
}
/*アスタリスク*/
.contact-aster{
	color: var(--orange);
}
/*チェックボックス変更*/

.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-form-control.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
}
span .wpcf7-checkbox .wpcf7-list-item {
  position: relative;
  margin: 8px 50px 0 0 ;/*項目ごとの余白を調整*/
}
.wpcf7-checkbox .wpcf7-list-item-label {/*項目の色や文字サイズ*/
  /*color: #fff;*/
  cursor: pointer;
  font-size: 16px;
}
#new-contact-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;/*既存のチェックボックスを見えなくする*/
}

.wpcf7-checkbox .wpcf7-list-item-label:before {/*チェックボックスの枠*/
  content: '';
  height: 25px;
  width: 25px;
  display: inline-block;
  background: #fff;
  position: relative;
  top: -2px;
  left: -5px;
  margin-right: 1em;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
	background-color:#fff;
	border:1px solid #ddd;
	/*border-radius:5px;*/
	z-index: 5;
}

input[type="checkbox"]:checked +  .wpcf7-list-item-label:after {/*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  bottom: 5px;
  left: -4px;
  width: 23px;
  height: 23px;
  /*border-radius: 5px;*/
border:1px solid #272727;
  background-image:url(../images/common/contact-check01.svg);
  background-repeat: no-repeat;
  background-size: cover;
 background-color:#272727;
  	border: none;
	z-index: 20;
}

input[type="checkbox"]:checked +  .wpcf7-list-item-label:before {/*チェックアイコン*/
  content: "";
background-color:#272727;
  
 border:1px solid #272727;
}



#pg-contact .agree_box{
	margin-top:4px;
}

/*フォーム*/
/* --------------------------------
 * smart phone
 * -------------------------------- */
@media screen and (max-width: 740px) {
.wpcf7-checkbox .wpcf7-list-item-label:before {/*チェックボックスの枠*/
 
  left: 0px;

}
	input[type="checkbox"]:checked +  .wpcf7-list-item-label:after {/*チェックアイコン*/

  left: 1px;
 
}

	#pg-contact .form-inner {
	margin: 8% 0% 5% 0%;
	width: 100%;
	border-radius: 0;	
	}

	#pg-contact .form-inner .contact-form .input-box {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	#pg-contact .form-inner .contact-form .input-box:not(:first-child) {
		margin-top: 6.7%;
	}

	#pg-contact .form-inner .contact-form .input-box .label-area {
		padding: 6px 0;
		width: 100%;
		font-size: 1.6rem;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area {
		width: 100%;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area input {
		padding: 13px 18px;
		font-size: 1.6rem;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area textarea {
		padding: 13px 18px;
		height: 160px;
		font-size: 1.6rem;
	}

	#pg-contact .form-inner .contact-form .input-box .input-area .input-error {
		padding: 0 18px;
		bottom: -20px;
		font-size: 1.1rem;
	}

	#pg-contact .form-inner .contact-form .action-box {
		margin-top: 5em;
	margin-bottom: 5em;
	}

	#pg-contact .form-inner .note {
		margin-top: 10%;
		
	}

	#pg-contact .form-inner .note small {
		font-size: 1.3rem;
		line-height: 1;
		letter-spacing: 1px;
	}
	
}
/*アスタリスク*/
.contact-aster{
	color: var(--orange);
	font-size: 0.3em;
	vertical-align: top;
	padding-left: 0.2em;
}


.contact-label{
	
	
}

.contact-label::after{
	
}


/*フォーム終わり*/




/*サブミットボタン*/

input[type="submit"] {
	transition: all 0.3s ease 0.2s;
	color: #fff;
	border: 1px solid #fff;
	background: var(--orange);
	-webkit-transition: all 0.3s ease 0.2s;
	z-index: 1;
	padding:15px 0;
	width:230px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;

}

/*
input[type="submit"]:hover {
	color: var(--orange);
	border: 1px solid var(--orange);
}

input[type="submit"]::after {
	
}
*/

#pg-contact .section-buttons{
	width:260px;
	margin:auto;
}

/*サンクス*/

#pg-thanks {
	
	color: #272727;
	padding-top:50px;
}


#pg-thanks .wrapper{
	min-height:250px;
}


/*-----------------------サンクス-----------------------------*/


#new-thanks-container .about-section{
	
	min-height: 100vh;
	max-width: 1000px;
	align-content: center;
	align-items: center;
	margin: auto;
	text-align: center;
}

/*------------------パンクズりすと--------------------*/
/*
.Breadcrumbs {
	background: #272727;
	position: relative;
	padding:0px 10% 13px 5%;
	vertical-align: middle;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	letter-spacing:0.1em;
	font-size: 1.5rem;
	font-family: "forma-djr-text",'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #999;
	
	white-space:nowrap;
	overflow-x: auto;
	
}

.Breadcrumbs2 {

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	letter-spacing:0.1em;
	cursor: pointer;
	font-family: "forma-djr-text",'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #999;
	overflow-x: auto;
	
	
	
}
/*
@media screen and (max-width: 1024px) {
.Breadcrumbs {
	padding:0px 10% 13px 10%;
}
	.Breadcrumbs2 {
	padding:0px 10% 13px 10%;
	top: 90px;
}
}
.Breadcrumbs a{
	color: var(--orange); 
	
}

 .Breadcrumbs a:hover{
	color:#E96F00;
	
}

.page-contents .page-container .Breadcrumbs2 a{
	color: var(--orange); 
	
}

.page-contents .page-container .Breadcrumbs2 a:hover{
	color:#E96F00;
	
}
.page-contents .page-container .Breadcrumbs-item {
	margin-right: 15px;
	z-index: 1;
}

.page-contents .page-container .Breadcrumbs-item:not(:first-child) {
	padding-left: 20px;
	position: relative;
}

.page-contents .page-container .Breadcrumbs-item:not(:first-child)::before {
	content: '>';
	position: absolute;
	color:#555;
	left: 0;
	text-decoration: none;
}

.page-contents .page-container .Breadcrumbs-item .page-name {
	font-size: 1.3rem;
	
}

.page-contents .page-container .Breadcrumbs-item .page-name.active {
	color: #787878;
	pointer-events: none;
}

.page-contents .page-container .Breadcrumbs-item .page-name:hover {
	
}

::-webkit-full-page-media, :future, :root.bread-list {
  padding-left: 100px;
}

*/
.Breadcrumbs2 {
	margin-left: 63px;
	font-size: 0.85em;
	color: #aaa;
white-space:nowrap;
	overflow-x: auto;
	
}
.bread_crumb{
	white-space:nowrap;
	overflow-x: auto;
}

 /*Google Chrome、Safariへの対応*/
.new-page-header{
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
/*
.new-bread-wrapper::-webkit-scrollbar {   
    background-color:red; 
}
*/
.new-bread-wrapper::-webkit-scrollbar{
  display: none;
}
.new-bread-wrapper::-webkit-scrollbar{
  display: none;
}
@media screen and (max-width: 740px) {
	.Breadcrumbs2 {
	margin-left: 10vw;
	}
}

.arooo{
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-bottom: 0.1em; 
	margin-right: 0.5em;
	margin-left: 0.1em;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	transform: rotate(45deg);
}


.bread_crumb .page-name.active {
	pointer-events: none;
}

_::-webkit-full-page-media, _:future, :root #cxg-logo img{
   margin-left: -5px;
}


.page-name.active {
	color: #787878;
	pointer-events: none;
}
.Breadcrumbs2 a{
	color:#272727; /*オレンジ*/
	
}



/*ページャー*/

 .pager {
	margin: 12% auto 0;
	color:#272727;
	
}

 .pager .pagerList {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	
}

.pager .pagerList-item {
	margin: 0 6.5px;
	width: 50px;
	height: 50px;
	text-align: center;
	border: 1px solid #d0d0d0;
	position: relative;
	
}

.pager .pagerList-item.current {
	/*border: 1px solid #343434;*/
	background-color: #fff;
	
}

.pager .pagerList-item.current a {
	color: #fff;
}

.pager .pagerList-item.ellipsis a,
.pager .pagerList-item.ellipsis span,
.pager .pagerList-item.next a,
.pager .pagerList-item.next span {
	text-indent: -9999em;
	background-position: center;
	background-repeat: no-repeat;
}

.pager .pagerList-item.ellipsis {
	width: 14px;
	border: none;
}

.pager .pagerList-item.ellipsis span {
	display: block;
	width: inherit;
	height: inherit;
	background-image: url(../images/svg/icon-three-dots.svg);
	background-size: contain;
}

.pager .pagerList-item.next a {
	background-image: url(../images/svg/icon-rightArrow-black.svg);
	background-size: 6px 11px;
}

.pager .pagerList-item a {
	width: 100%;
	height: 100%;
	font-size: 1.4rem;
	line-height: 50px;
}


.nav-links {
	text-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-family: forma-djr-deck,sans-serif;
	font-weight: 500;
	font-style: normal;
	color: var(--orange);
	
}

.nav-links a,
.nav-links span {
	margin: 0 0.3em;
	width: 3em;
	height: 3em;
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background:transparent;
	/*border: 1px solid #272727;*/
	color: #272727;
}

.nav-links span{
	color: #272727!important;
}

.nav-links a {
	cursor: pointer;
	background: #272727;
	color: #fff;
}

.nav-links a:hover {
	opacity: 0.95;
}

.nav-links .current {
	color: var(--orange);
	border: none;
	/*background:#272727;*/
	
}

.nav-links  .dots{
	color: var(--orange);
	background:transparent;
	border: none;
}

/*ページャーここまで*/


/*ページャーニュース*/


.more-news {
	margin-top: 1.5%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	padding-bottom: 4em;
}

.more-news .prev .another-link,
.more-news .next .another-link {
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing:0.05em;
}
.more-news .prev{
	position: relative;
	padding-left: 0.8em;
}
.more-news .prev::before{
	content: '';
	position: absolute;
	width: 0.9rem;
	height: 0.9rem;
	border-top: solid 1px #272727; 
	border-right: solid 1px #272727;
	transform: translateY(-50%) rotate(-135deg);
	line-height: 1;
	top: 45%;
	left: 0;
}
.more-news .next{
	position: relative;
	padding-right: 0.8em;
}
.more-news .next::before{
	content: '';
	position: absolute;
	width: 0.9rem;
	height: 0.9rem;
	border-top: solid 1px #272727; 
	border-right: solid 1px #272727;
	transform: translateY(-50%) rotate(45deg);
	line-height: 1;
	top: 45%;
	right: 0;
}
.more-news .prev .another-link {
	
}
.more-news .prev .another-link::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
}
.more-news .prev .another-link:hover {
	color: #404040;
}
.more-news .prev .another-link:hover::before {
	
}
.more-news .next .another-link {
	
}

.more-news .next .another-link::after {
	content: '';
	position: absolute;
	top: 8px;
	right: 0;
}

.more-news .next .another-link:hover {
	color: #404040;
}

.more-news .next .another-link:hover::after {
	
}

@media screen and (max-width: 740px) {
	.more-news .prev .another-link,
.more-news .next .another-link {
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing:0.05em;
}
.more-news .prev{
	position: relative;
	padding-left: 0.8em;
}
.more-news .prev::before{
	content: '';
	position: absolute;
	width: 0.7rem;
	height: 0.7rem;
	border-top: solid 1px #272727; 
	border-right: solid 1px #272727;
	transform: translateY(-50%) rotate(-135deg);
	line-height: 1;
	top: 45%;
	left: 0;
}
.more-news .next{
	position: relative;
	padding-right: 0.8em;
}
.more-news .next::before{
	content: '';
	position: absolute;
	width: 0.7rem;
	height: 0.7rem;
	border-top: solid 1px #272727; 
	border-right: solid 1px #272727;
	transform: translateY(-50%) rotate(45deg);
	line-height: 1;
	top: 45%;
	right: 0;
}
	
}

/*----------------------------  タグリンク ------------------------------*/

.tags-links{
	margin-top:1.5em;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	color: var(--orange);
	padding-bottom: 5em;
}

.tags-links li{
	display: inline-block;
    font-size: var(--font-sm);
    border: 1px solid var(--light-grey);
    padding:0.3em 0.5em 0 0;
    margin-right: 0.5em;
    margin-bottom: 0;
	
	border-radius: 50px;
	color: #272727;
	line-height: 1;
}

.tags-links li::before{
	content: "#";
	padding-right: 3px;
	color: #272727;
}

.tags-links a::before {
    
    color: #272727;
    margin-right: .25rem;
	
}
/*タグリンク　ホバー*/
.tags-links a:hover {
    color: #3E3E3E;
	
}
.tags-links li:hover::before{
	color: #3E3E3E;
}

/*ブログ一覧サファリ間隔調整*/

_::-webkit-full-page-media, _:future, :root  .new-blog-article {
	margin-bottom: 5px!important;
}


/*---------------------ブログシングル-----------------------------*/



.new-blog-single-content　time{
	padding-bottom: 2em;
}
.new-blog-single-content .new-blog-tag-wrapper{
	
	width: 100%;
	height: auto;
	padding-top: 1em;
}
@media screen and (max-width: 1250px) {
#new-blog-single .more-news{
	padding:3em 0 1em;	
}
}
/*-----------------------------------------------------------------*/
.blog_tax{
	color: #272727;
	
	
padding-right: 10px;
	line-height:1;
	margin-bottom: 10px;
	display: inline-block;
}
.blog_tax::before{
	content: '#';
	width: 15px;
	height:15px;
	padding-right:3px;
}

.wpp-list {
	display: flex;
	flex-flow: column;
	padding: 1em 0;
}

/* LI - Post container styles */

    .wpp-list li {
        overflow: visible;
    	width: 100%;
		padding: 2em 1.5em 0 1.5em;
        margin-bottom: 20px;
    }


    .wpp-list li:last-of-type {
        margin-bottom: 0;
    }

    /* Styles for the popular post in view */

    .wpp-list li.current {
overflow: auto;
    }

.wpp-list li{ 
	position: relative;
}
.wpp-list li:first-child::before{
	content: '';
	position: absolute;
	width: 100px;
	height: 50px;
	top: -10px;
	left: -10px;
	z-index: 3;
	background-image: url('../images/icon-blog-no1.svg');
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:contain;
}
.wpp-list li:nth-child(2)::before{
	content: '';
	position: absolute;
	width: 100px;
	height: 50px;
	top: -10px;
	left: -10px;
	z-index: 3;
	background-image: url('../images/icon-blog-no2.svg');
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:contain;
}
.wpp-list li:nth-child(3)::before{
	content: '';
	position: absolute;
	width: 100px;
	height: 50px;
	top: -10px;
	left: -10px;
	z-index: 3;
	background-image: url('../images/icon-blog-no3.svg');
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:contain;
}

@media screen and (max-width: 1250px) {
	.wpp-list li {
        overflow: visible;
    	width: 100%;
		padding: 2em 2em 0.3em 2em;
        margin-bottom: 20px;
    }
	
.wpp-list {
	display: flex;
	flex-flow: row wrap;
	padding: 0em 0 ;
	gap: 20px;
	margin: auto;
}
	.wpp-list li {
        
    	width: 48.314%;
		margin-bottom: 0px;
    }
}



@media screen and (max-width: 740px) {
	.wpp-list li {
        
    	width: 100%;
		margin-bottom: 0px;
    }
}


/*メニュー表示非表示*/
#scrollArea{
	width: 100vw;
	height: 100px;
}
@media screen and (max-width: 1250px) {
#new-top-main #scrollArea{
	width: 100vw;
	height: 0px;
}
}

#new-about-container{
	margin-top: -100px;
}
	#new-access-container{
	margin-top: -100px;
}


.work-section{
	margin-top: -100px;
}
@media screen and (min-width: 1250px) {
.hide{
	transform: translateY(-100%); /* 上に消えるようにする */
	/*background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%,  rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 100%);*/
}
#scrollArea{
    /*background-color: rgb(255, 0, 0); /* 見やすいように背景色を赤に */
    position: fixed; /* 固定して表示されるようにする */
    top: 0; /* 表示場所を一番上に */
    transition: .5s; /* スクロール時に一瞬で消えると物足りないので.hideの処理を0.5秒で行う */
    z-index: 10; /* 前面に表示されるようにする */
	width: 100vw;
	height: 100px;
	/*background: linear-gradient(180deg, rgb(255 255 255 / 50%) 0%,  rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 0%) 100%);*/
	mix-blend-mode:difference;
}
#container{
	margin-top: 100px;
}
	
	
#new-about-container{
	margin-top: -100px;
}
	#new-access-container{
	margin-top: -100px;
}
	.menu-list a{
	color: #ccc;
}
	ul li.hamburger{
	
		background: #ccc;
	}
.Breadcrumbs2 a{
	color:#ccc; /*オレンジ*/
	
}
	.arooo{
	
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
	
	.Breadcrumbs2 {
	
	color: #444;

}
}


/*
#scrollArea::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100px;
	background: rgba(255, 255, 255, 0.5);
	filter: blur(100px);
	z-index: 50; 
	width: 100vw;
}
*/


/*-------------------- page gallery -------------------*/

#sort-btn{
	width: 30px;
	height: 30px;
	/*background: red;*/
	cursor: pointer;
	background-image: url('../images/icon-gallery-sort.svg');
	background-repeat: no-repeat;
	background-position: top ;
	position: relative;
}
#sort-btn.sort-btn-open::after{
	content: '';
	top: 0;
	left: 0;
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: 0;
	background: #eee;
	mix-blend-mode: multiply;
	border-radius: 3px;
}
#gallery-container{
	display: flex;
	padding: 3em 0;
	/*min-height: 100vh;*/
}
/* ギャラリーアーカイブ コンテナ */
.gallery-container{
	width: 100vw;
	/* height: 1000px; */
	/* background: blue; */
	height: auto;
}
.colorsort-wrapper{
	display:none;
	width: 10vw;
	min-width: 130px;
	padding-top: 0.3em;
}
@media screen and (max-width: 740px) {
	.colorsort-wrapper{
		min-width: 115px;
	}	
}
.sortbbb{
	position: sticky;
	top: 100px;
	display: flex;
	gap: 1em;
}

@media screen and (max-width: 1250px) {
	.sortbbb{
		/*top: 1em;*/
	}
}
.gallery-sort{
	
	
	/*min-width: 170px;*/
	/* height: 1000px; */
	/* background: red; */
	padding: 0 1em;
	/*display: none;*/
}
.colorsort-wrapper.sort-open{
	display: block;
}
.colorsort{
	padding-bottom: 2em;
}
.sort-h{
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
	margin-bottom: 0.5em;
	line-height: 1;
	letter-spacing: 1px;
}
.aspect-active.color-active.theme-active{
	display: block!important;
}

@media screen and (min-width: 1250px) {
	.new-movie-slideimg-mask{
	
	cursor: none;
}
	#new-top-movie .new-work-slidecontainer{
	
	cursor: none;
}
.stoker {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
 font-size: 2rem;
	z-index: 10;
	mix-blend-mode: difference;
	color: #fff;
	cursor: none;
}

.stoker::before{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	/*transform: translate(-50%, -50%);*/
	z-index: 5;
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-play.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.stoker::after{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	z-index: 5;
	/*transform: translate(-50%, -50%);*/
	width: 80px;
	height: 80px;
	background-image: url('../images/icon-movie-playmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
}


.top-gallery-thumb{
	display: flex;
}
#top-gallery-thumb-wrapper{
	width: 100vw;
	height: 70px;
	
	position: fixed;
	bottom: 0;
	left: 0;
	display: none;
	z-index: 30;
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
	/*animation: fadeOutAnimation 800ms ease-out;*/
}

#top-gallery-thumb-wrapper::-webkit-scrollbar{
	display: none;
}
#top-gallery-thumb-wrapper.gallery-thumb-open{
	display: block;
	overflow: auto;
}




.new-top-grid-thumb{
	width: 70px;
	height: 70px;
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
	display: none;
	filter: grayscale(100%);
}
.new-top-grid-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.new-top-grid-thumb.new-top-grid-thumb-active{
	/*opacity: 0.5!important;*/
	pointer-events: none;
	cursor: auto;
	filter: grayscale(0%); 
}

/**/
.work-pager-wrapper{
	width: 30px;
	height: 30px;
	/*background: red;*/
	position: absolute;
	right: 13px;
	bottom: 10px;
	z-index: 6;
	mix-blend-mode:difference;
	
}
.work-pager-p{
	width: 30px;
	height: 30px;
	/*background: blue;*/
	text-align: right;
	vertical-align: bottom;
	/*clip-path: polygon(100% 0%, 100% 100%, 0% 100%);*/
	position: absolute;
	right: 0;
	bottom: 0;
	color: #ccc;
	display:grid;
	align-content: flex-end;
	font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
	font-size: 0.6em;
	line-height: 1;
	letter-spacing: 2px;
	/*overflow: hidden;*/
	padding: 1px;
	text-align: right;
	
}

.work-pager-c{
	width: 30px;
	height: 30px;
	/*background: green;*/
		
	position: absolute;
	left: 0;
	top: 0;
	color: #ccc;
	display:grid;
	font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
	font-size: 0.8em;
	line-height: 1;
	text-align: center;
	letter-spacing: 2px;
	padding: 0 2px;
	z-index: 7;
	/*overflow: hidden;*/
	
	
}

.work-pager-wrapper::before{
	content: '';
	height: 1px;
	width: 30px;
	background: #ccc;
	transform: rotate(-45deg);
	transform-origin: top right;
	position: absolute;
	left: 0;
	top: 4px;
	z-index: 8;
}


/*work single active*/
.new-work-thumb.workthumb-active{
	opacity: 0.5;
	pointer-events: none;
	cursor: auto!important;
}

/*demo-banner*/

.blogdemo-bnr{
	width:100%;
		aspect-ratio: 16 / 9;
	border-radius:10px;
	overflow:hidden;
	margin-top:1em;
	object-position: 50% 50%;
	will-change: transform;
	position: sticky;
	top: 30px;
	font-family: "Castoro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	line-height: 1;
	filter: grayscale(100%);
}

.blogdemo-bnr img{
	width:100%;
	height:100%;
	object-fit: cover;
	
}
.demobnr2:after{
	content:"DEMO";
	position:absolute;
	font-size: 2em;
	color:#fff;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	/*background-image:url('../images/demobannerlogo01.svg');*/
}


/*デモバナー*/
@media screen and (max-width: 1250px) {	
	.blogdemo-bnr{
		aspect-ratio: 12 / 5;

		
		position:relative;
	}
	
	.demobnr2{
		aspect-ratio: 12 / 5;
	}
}

/*デモバナー*/
@media screen and (max-width: 740px) {	
	.blogdemo-bnr{
		aspect-ratio: 16 / 9;
		position:relative;
	}
	
	.demobnr2{
		aspect-ratio: 16 / 9;
	}
}

/*about fadein*/
.fade-up-w{
	opacity: 0;	
}
.fade-up-g{
	opacity: 0;	
}
.fade-in, .fade-left, .fade-right, .fade-bottom, .fader{
	opacity: 0;
}

/*movie navi*/

@media screen and (min-width: 1250px) {	
.movie-navi{
	width: 360px;
	height: 10px;
	display: flex;
	position: absolute;
	left: 0;
	bottom: 0;
}
.movie-navi-list{
	background: #aaa;
	width: 90px;
	height: 10px;
	cursor: pointer;
}
.movie-navi-list.active-list{
	background: #272727;
	pointer-events: none;
}
.new-top-movie-wrapper{
	position: relative;
}
}

.loadlogo{
	display: inline-block;
	padding: 0;
	margin: 0;
}
.new-fadein{
	opacity: 0;
}

	
.grecaptcha-badge { visibility: hidden; }




/**/


.js-parallax-elm-box {
  overflow: hidden;
	position: absolute;
}
.js-parallax-elm-box img {
  display: block;
}

.test-area06 {
  width: 100%;
  height: 460px;
	background: #272727;
}
.test-area06 img{
  width: 100%;
  height: auto;
opacity: 0.5;
	object-position: 50% 50%;
}
.contact-texts{
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	
	
}
@media screen and (max-width: 1250px){
	.test-area06 {
  width: 100%;
  height: 350px;
	background: #272727;
}
	
	.test-area06 img{
  width: 130%;
  height: auto;
}
	.contact-texts{
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	
}
}
@media screen and (max-width: 740px){

	
	.test-area06 img{
  width: 160%;
  height: auto;
}
}


.text1111{
	
}

#new-contact button{
	/*
	font-family: "Castoro", serif;
	font-weight: 400;
	font-style: normal;
	border: none;
	cursor: pointer;
	outline: none;
	color:#fff;
	background: #272727;
	width: 12em;
	padding: 1em 1.5em;
	margin:  auto;
	margin-top: 2em;
	position: relative;
	line-height: 1;
	letter-spacing: 1px;
	*/
	border: solid 1px #272727;
	background: linear-gradient(90deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 100%) 50%,rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 100%) 100%);
	background-size: 200%;
	background-position: right;
	pointer-events: none;
}

/* Simple Parallax Vanilla JS ベース設定 */
.js-parallax-elm-box {
  overflow: hidden;
	position: absolute;
	top: 0; 
	left: 0;
}
.js-parallax-elm-box img {
  display: block;
	height: auto;
  width: 120%;
	height: auto;
}



.test-area01-box {
  position: relative;
  width: 300px;
  margin: 0 0 200px 20vw;
}
.test-area01 {
  height: 400px;
  border-radius: 99em;
}
.test-area02 {
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 150px;
  height: 200px;
  border-radius: 99em;
}
.test-area02-box {
  position: relative;
  display: block;
  width: 300px;
  margin: 0 10vw 200px auto;
}
.test-area03 {
  height: 400px;
}
.test-area04 {
  position: absolute;
  left: -50px;
  bottom: -50px;
  width: 150px;
  height: 200px;
}
.test-area05 {
  height: 500px;
  margin: 0 0 200px;
}
@media screen and (max-width: 1250px){
	.test-area05 {
  height: 400px;
  margin: 0!important;
}
	.js-parallax-elm-box {
  overflow: hidden;
	position: relative;
	top: 0; 
	left: 0;
}
	.js-parallax-elm-box img {
  display: block;
	height: auto;
  width: 130%;
}
}
@media screen and (max-width: 740px){
	.test-area05 {
  height: 350px;
  margin: 0!important;
}
	.js-parallax-elm-box img {
  display: block;
	height: auto;
  width: 180%;
}
}

.test-area06 {
  width: 800px;
  height: 460px;
  margin: 0 auto;
}