@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: #E95900; /*rgb 233 89 0 */
}

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);
}

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.4rem;
	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: #fff;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
	-webkit-text-size-adjust: 100%;
	background: #272727;
}

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

input {
	border-radius: 0;
}
button {
	font-size: 1.375rem;
	font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	background: linear-gradient(90deg, rgb(233 89 0 / 0%) 0%,rgb(233 89 0 / 0%) 100%);
	cursor: pointer;
	outline: none;
	padding: 0;
	color:#ffffff;
	border-radius:60px;
	border: 1px solid #fff;
	width: 250px;
	padding-right: 2em;
	padding-left: 2em;
	height: 70px;
	letter-spacing: 1px;
	background-position: 0 0;
	background-size: 100%;
}

li{
	list-style: none;
}

*:focus {
  outline: none;
}


/*Google Font*/

.teko-test {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
}

.rubik-mono-one-regular {
  font-family: "Rubik Mono One", monospace;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.bevan-regular {
  font-family: "Bevan", serif;
  font-weight: 400;
  font-style: normal;
}


.dancing-script-test {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.bitter-test{
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.playwrite-it-moderna-test{
  font-family: "Playwrite IT Moderna", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/*　ヘッダー　*/

#header1{
	height:100px;
}

#header2{
	
	height:100px;
}


.header-inner{
	padding-left:10%;
	height:auto;
	margin:auto;	
	padding-top:30px;
}

.logo-header{
	
	position:absolute;
	color:#eee;
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
	z-index:50;
	mix-blend-mode:difference;
}



.logo-header h1{
	width:195px;
	margin-top:10px;
	margin-bottom:-5px;
	
}

.site-description{
	line-height: 1;
	letter-spacing:0.12em;
}

/*　トップページメイン　*/

#keyvisual{
	
	
}

#keyvisual a{
	color:#ffffff;
}




/* --------------------------------
  1：swiper
  スライダーのスタイル
-------------------------------- */

.swiper-container{
	margin-top:-100px;
	 height: 100svh;
	background:#eee;
}

.swiper-wrapper .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100svh;
  opacity: 0;
  overflow: hidden;
	margin-top:-100px;
	
}

/* ------ catch area ------- */
.catch-area {
  color: white;
  position: absolute;
  text-align: center;
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

.catch-title {
  font-size: 40px;
  padding-bottom: 10px;
}

.catch-text {
  font-size: 21px;
}

/* ------ Transparent layer ------- */
.swiper-slide::before {
  background: rgba(0, 0, 0, 0.2);
  bottom: 0;
  content: "";
  height: 100svh;
  left: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.swiper-slide.swiper-slide-active::before {
  opacity: 1;
}

/* --------------------------------
  ２：Top Lazy Load
  遅延ロード用スタイル
-------------------------------- */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    z-index: -1;
  }
}



#loader.loaded {
  animation: fadeOut 0.5s forwards;
}
/*　コンテンツ　*/
/*　About　*/

#about{
	

	margin-bottom:10px;
	box-shadow: 0 5px  3px  #aaa ;
}

#about p{
	margin-bottom:1rem;
}

#about .wrapper{
	width:100%;
}

#about .about-wrapper{
	width:80%;
	margin:auto;
	text-align:center;
	
}



.section-buttons{
	font-size:1.6rem;
	letter-spacing: 0.1em;
}

.section-contents h2{
	font-size:3.5rem;
	text-align:center;
	line-height:1;
	letter-spacing: 0.1em;
}


#about .about-main-image {
	width:100%;
	
	
	border-radius:0%;
	overflow: hidden;
	margin:auto;
	will-change: transform;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: cover;
}



#about .about-main-image img{
	width:100%;
	height:auto;
	border-radius:0%;
}







.wrapper{
	width:80%;
	margin:auto;
	padding-top:80px;
	padding-bottom:80px;
	text-align:center;
	
}

.excerpt{
	text-align:left;
	margin-top:50px;
	letter-spacing:0.1em;
}

#about .excerpt{
		margin: auto;	
		margin-top:50px;
		text-align:left;
		width:100%;
	}

#about .section-lead{
	margin-bottom:50px;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	text-align: center!important;
}


.section-lead{
	padding-top:15px;
	margin-bottom:70px;
	font-size:1.6rem;
	letter-spacing:0.1em;
}


.section-title-en{
	letter-spacing: 0.1em;
}


/*about split*/
.text-splits{
	opacity: 0;
	display:inline-block;
}

/* about ボタン */



/*　Works　*/

#works{
	box-shadow: 0 5px  3px  #aaa ;
	margin-bottom:10px;
}

#works a{
	color:#fff;
}


#works .section-lead{
	margin-bottom:50px;
}

.works{
	text-align:left;
	margin-bottom:50px;
	width:100%;

}

.about-works-icon {
	width:100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	float:left;
	background: #000;
	object-position:50% 50%;
	margin-bottom:12px;
	will-change: transform;

}
/*worksテキストスプリット*/
.text-splits2{
	opacity: 0;
	display:inline-block;
}

/*　画像の拡大　*/


.about-works-icon img{
	width:100%;
	height:100%;
	object-fit: cover;
}



	



.works .title{
	font-size:1.9rem;
	font-weight:500;
	padding-top:1rem;
	
	line-height:1.4;
	letter-spacing:0.1em;
	clear:left;	
	
}


.works .news-text{
	overflow: hidden;
	color:#fff;
	letter-spacing:0.05em;
}

.works .news-text span{
	margin-right:1em;
}


/* works ボタン */




/*　Movie　*/

#movie{
	box-shadow: 0 5px  3px  #aaa ;
	margin-bottom:10px;
}

#movie a{
	color:#fff;
}


#movie .section-lead{
	margin-bottom:50px;
}

.movie{
	text-align:left;
	margin-bottom:50px;
	width:100%;
	
}

.about-movie-icon {
	width:100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	float:left;
	object-position:50% 50%;
	margin-bottom:12px;
	border-radius: 0px;
	will-change: transform;
	background: #000;
}
/*movieテキストスプリット*/
.text-splits3{
	opacity: 0;
	display:inline-block;
}

.movies{
	cursor: pointer;
}
.movie-thumb img{
	opacity:0.7;
}

.movie-thumb2 img{
	opacity:0.7;
/*	filter: grayscale(100%);*/
}

.about-movie-icon:before{
	content:"";
	position:absolute;
	width:4.5em;
	height:4.5em;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	background-image:url('../images/common/playicon01.svg');
}



/*　画像の拡大　*/


.about-movie-icon img{
	width:100%;
	height:100%;
	object-fit: cover;
}



	



.movie .title{
	font-size:1.9rem;
	font-weight:500;
	padding-top:1rem;
	
	line-height:1.4;
	letter-spacing:0.1em;
	clear:left;	
	
}


.movie .news-text{
	overflow: hidden;
	color:#fff;
	letter-spacing:0.05em;
}

.movie .news-text span{
	margin-right:1em;
}


/* movie ボタン */




/*　News　*/

#news{
	color:#fff;
	margin-bottom:10px;
	box-shadow: 0 5px  3px  #aaa ;
}

#news a{
	color:#fff;
}

#news .section-lead{
	margin-bottom:50px;
}

.news{
	text-align:left;
	margin-bottom:15px;
	
	display: inline-block;
}

.about-news-icon {
	width:100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	float:left;
	margin-right:20px;
	object-position:50% 50%;
	margin-bottom:12px;
	will-change: transform;
}

/*news textsplit*/
.text-splits4{
	opacity: 0;
	display:inline-block;
}


/*　画像の拡大　*/


.about-news-icon img{
	width:100%;
	height:100%;
	object-fit: cover;
}


.news .post-category{
	float:left;
	font-size:1.2rem;
	
	padding-left: 7px;
	padding-right: 7px;
	padding-top:4px;
	margin-right:1rem;
	border:solid 1px #272727;
		
}

.workkinds{
	float:left;
	background:#272727;
	color:#555555;
	padding-left: 7px;
	padding-right: 7px;
	padding-top:4px;
	margin-right:1rem;
	border:solid 1px #272727;
		
}
.workkinds{
		color:#555555;
		
}


.news .new-tag{
	float:left;
	background:#272727;
	color:#FFFFFF;
	padding-left: 7px;
	padding-right: 7px;
	padding-top:4px;
	margin-right:1rem;
	font-size:1.2rem;
	border:solid 1px #272727;

}

.news .title{
	font-size:1.9rem;
	font-weight:500;
	padding-top:1rem;
	padding-bottom:1rem;
	line-height:1.4;
	letter-spacing:0.1em;
	clear:left;	
	
}

.news .time{
	font-size:1.8rem;
	float:left;
	margin-right:1rem;
	padding-top:-30px;
	color:#aaa;
	line-height:1;
	margin-top:0.5em;
	clear:left;		
		
}



.news .news-text{
	
	color:#fff;
	letter-spacing:0.05em;
}

.tags-links{
	margin-top:0.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.7em 0.2em 0;
    margin-right: 0.5em;
    margin-bottom: 0.25rem;
	margin-top: 0.8em;
	border-radius: 50px;
	color: var(--orange);
}

.tags-links li::before{
	content: "#";
	padding-right: 3px;
	color: var(--orange);
}

.tags-links a::before {
    
    color: #272727;
    margin-right: .25rem;
	
}

.tags-links a:hover {
    color: #3E3E3E;
	opacity:0.8;
}




/* News ボタン */



/*　Contact　*/

#contact{
	color:#fff;
	background-image: url("../images/contact08.jpg");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: cover;
	
}

#contact .section-lead{
	margin-bottom:2em;
	text-align: center !important;
}


/*　BLOG　*/

	#blog{
	
	margin-bottom:10px;
		box-shadow: 0 5px  3px  #aaa ;
}

#blog{
	color:#272727;
}

#blog a{
	color:#272727;
	
}

/*blog textsplit*/
.text-splits5{
	opacity: 0;
	display:inline-block;
}

.time2{
	color:#aaa;
}

.blog-article time{
	color:#aaa;	
}

.blog-grid{
	display:grid;
	 grid-template-columns: repeat(2, 1fr);
    gap: 1em;
	border-bottom:1px solid #444;
	padding-bottom:1em;
}




.blog-article{
	text-align:left;
}


#blog .blog-icon {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	float:left;
	margin-right:1.5em;
	object-position:50% 50%;
	margin-bottom:12px;
	will-change: transform;
}

#pg-blog .blog-icon {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	float:left;
	margin-right:1.5em;
	object-position:50% 50%;
	margin-bottom:12px;
	will-change: transform;
}

#pg-blogDetail .blog-icon {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	float:left;
	margin-right:1.5em;
	object-position:50% 50%;
	margin-bottom:12px;
	will-change: transform;
}

.blog-icon img{
	width:100%;
	height:100%;
	object-fit: cover;
}

.blog-container{
	display:grid;
	 grid-template-columns: repeat(1, 1fr);
    gap: 1.5em;
}

.blog-main{
	width:80%;
	padding-top:70px;
	padding-bottom:70px;
	margin-left:auto;
	margin-right:auto;
}

.blog .title{
	font-size:1.9rem;
	font-weight:500;
	
	padding-bottom:1rem;
	line-height:1.4;
	letter-spacing:0.1em;
	clear:left;	
	
}



/*　画像の拡大　*/








/* ------------------------------------------------
#. Components :prefix[c-]
------------------------------------------------ */



.c-button {
    -webkit-writing-mode: horizontal-tb !important;
    -webkit-appearance: button;
    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
    text-rendering: auto;
    color: initial;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
}

/*　demo　*/

#demo{
	
	
	
}

#demo a{
	color:#fff;
}


#demo .section-lead{
	margin-bottom:50px;
}

/*demo split*/
.text-splits6{
	opacity: 0;
	display:inline-block;
}

/*About*/




.page-contents .page-head .wrapper .page-title {
	font-size:3.5rem;
	text-align:center;
	line-height:1;
}

.page-contents .page-container .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;
	
}
.page-contents .page-container .Breadcrumbs2 {
font-size: 1.5rem;
	position: absolute;
	z-index: 15;
	top: 107px;
	left: 0;
	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;
	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;
	
	white-space:nowrap;
	overflow-x: auto;
	
}

@media screen and (max-width: 1024px) {
.page-contents .page-container .Breadcrumbs {
	padding:0px 10% 13px 10%;
}
	.page-contents .page-container .Breadcrumbs2 {
	padding:0px 10% 13px 10%;
	top: 90px;
}
}
.page-contents .page-container .Breadcrumbs a{
	color: var(--orange); /*オレンジ*/
	
}

.page-contents .page-container .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 {
	
}

/*About コンテンツ*/





.work-english{
	font-size:3.5rem;
	text-align:center;
	line-height:1;

	letter-spacing: 0.08em;
}

.work-category{
	margin-top:-5px;
	padding-top:0.3em;
	position: relative;
	z-index:2;
	text-align:center;
}

.work-list{


	margin-left:auto;
	margin-right:auto;
	
}



#pg-about a{
	color:#ffffff;
}

#pg-about .about-main-image2{

	width:100%;
	height:250px;
	border-radius:0%;
	overflow: hidden;
	margin:auto;
	will-change: transform;
	object-position:50% 50%;
	
}



#pg-about .about-main-image2 img{
	width:100%;
	height:100%;
	object-fit: cover;
}



#pg-about .worktitle{
	text-align:center;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	border-bottom:2px  solid #272727;
	font-weight:500;
	margin-bottom:3em;
	font-size:1.9rem;
	padding-bottom:2em;
}



.work-english{
	font-size:3.5rem;
	text-align:left;
	
	margin-top:2em;
}

#pg-about .profile{
	margin: auto;
	width: 90%;
	}

#pg-about .profile p{
	margin-bottom:2em;
	}

#pg-about .work3 .excerpt{
	text-align:center;
}

#pg-about .work-list .text-split{
	text-align:center;
}

#pg-about .work3 h5{
	font-size:2em;
	color:#ccc;
	padding-top:0.3em;
	padding-top:0.1em;
	font-family: "interstate-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
}

/*News コンテンツ*/

#pg-news{
	
}

#pg-news a{
	color:#fff;
}

#pg-news .news-grid{
	 display: block;
  
}


#pg-news .news{
	margin-bottom:2.5em;
	padding-bottom: 2.5em;
	  border-bottom: 1px solid #444;
}



/*ページャー*/

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

#pg-news .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;
	
}

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

#pg-news .pager .pagerList-item.current {
	border: 1px solid #343434;
	background-color: #343434;
	
}

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

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

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

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

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

#pg-news .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;
	
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	
	border: 1px solid var(--orange);
	color: var(--orange)!important;
}

.nav-links a {
	cursor: pointer;
}

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

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

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

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

/*ニュースシングル*/

#pg-newsDetail{
}

#pg-newsDetail a{
	color: #fff;
}

#pg-newsDetail article{
	margin-bottom:50px;
	min-height: 270px;
}

#pg-newsDetail .news .title{
	font-size:1.7em;
	font-weight:500;
	padding-top:1.5em;
	padding-bottom:1.5em;
	line-height:1.4;
	letter-spacing:0.1em;
}

#pg-newsDetail button{
	margin-top: 3em;
}


#pg-newsDetail .news-text .wp-block-image{
	padding-bottom:30px;
	overflow: hidden;
}

#pg-newsDetail .news-text img{
}

#pg-newsDetail  .news-text p {
   margin: 0px  0px 1em 0px;
}

#pg-newsDetail  .news-text {
   clear:left;
}

#pg-newsDetail .news-text .photo-leaf01 img{
}




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


#pg-newsDetail .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;
}

#pg-newsDetail .more-news .prev .another-link,
#pg-newsDetail .more-news .next .another-link {
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing:0.05em;
}

#pg-newsDetail .more-news .prev .another-link {
	
}
#pg-newsDetail .more-news .prev .another-link::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
}
#pg-newsDetail .more-news .prev .another-link:hover {
	color: #404040;
}
#pg-newsDetail .more-news .prev .another-link:hover::before {
	
}
#pg-newsDetail .more-news .next .another-link {
	
}

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

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

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





/*ワークシングル*/

/*モダール*/
#works-modal{
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background: rgb(0 0 0 / 70%);
	visibility: hidden;
	opacity: 0;
	cursor: pointer;
}

#works-modal-container{
position: fixed;
	z-index: 1001;
	opacity: 0;
	visibility: hidden;
	width: 100vw;
}


.works-modal-img{
	width: 70%;
	height: auto;
	max-width: 1200px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: fixed;
	z-index: 1001;
}
.works-modal-img img{
	width: 100%;
	height: auto;
}

@media (max-width: 1250px) {
	.works-modal-img{
	width: 100%;
	height: auto;
}
}

#works-closemodal{
	width: 50px;
	height: 50px;
	/*background: #000;*/
	position: fixed;
	top: 0;
	right: 0;

	z-index: 200;
	cursor: pointer;
}
#works-closemodal::after, #works-closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: var(--orange);
	position: absolute;
}
#works-closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
#works-closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}

@media (max-width: 740px) {
	#works-closemodal{
		width: 40px;
		height: 40px;
	}
	#works-closemodal::after{
		content: '';
		width: 25px;
	} 
	#works-closemodal::before{
		content: '';
		width: 25px;
	}  
}


#pg-workDetail h3{
	text-align:center;
	line-height:1;
	margin-top:1.3em;
	 letter-spacing: 0.08em;
	font-size: 8vw;
		 margin-bottom:1.6em;
}
/*ワークタグ*/
#pg-workDetail .tags-links li{
	line-height: 1;
    padding:0.3em 0.7em 0em 0;
    margin-right: 0.5em;
    margin-bottom: 0;
	margin-top: 0.1em;
	border-radius: 0;
	color: var(--orange);
}

.web-arrrow{
	width:50px;
	height:50px;
	position: relative;
	border-radius:50%;
	background: #eee;
	box-shadow: 0 0px  3px  #aaa ;
	text-align:center;
	vertical-align: middle;
	padding:7px;
	margin-left:0.5em;
}

#pg-workDetail .detail-link a{
	color: var(--orange);
}

#pg-workDetail .content2 a{
	color: #fff;
}


#pg-workDetail article{
	margin-bottom:50px;
	min-height: 200px;
}

#pg-workDetail .content{
	
}


#pg-workDetail .content .works{
	width:100%;
	max-width:800px;
	margin:0 auto 4em auto;
}


#pg-workDetail .content2{
	padding-bottom:40px;
	background: #000;
}

#pg-workDetail{
	
	
	
}

#pg-workDetail .title{
	font-size:2.5rem;
	font-weight:500;
	margin-right:auto;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	padding-top:3em;
	margin-bottom:1em;
}


.works-address{
	text-align:center;
	margin-bottom:50px;
	width:100%;
	display:table;
}



#pg-workDetail .works-address .post-works{
	background: var(--orange);
	padding-left: 10px;
	padding-right: 10px;
	padding-top:2px;
	border:solid 1px var(--orange);
	border-radius: 100px;
	display: inline-block;
    margin: 0 auto;

	
}

#pg-workDetail .works-address .post-works a{
	color: #272727;
}

#pg-workDetail .works-address.post-works a:hover {
	opacity: 0.9;
}

.post-worksout{
	color:#fff;
	margin:0 auto;
	text-align: center;
}


#pg-workDetail .site-address{
	font-size:1.8rem;
	font-weight:500;
	line-height:1.4;
	letter-spacing:0.1em;
	white-space:nowrap;
	margin-top:0.7em;
	color:#fff;
	margin-bottom:0.5em;
}

#pg-workDetail .site-address a .ling_green{
	color: var(--orange);
		border-bottom:solid 1px var(--orange);
}

#pg-workDetail .post-workimage{
	width:100%;
	height:auto;
	margin-top:0px;

	padding-top:8px;
}


#pg-workDetail  .wrapper{
	margin-top:0px;
	padding-bottom:30px;
}


#pg-workDetail  .news-text p {
   margin: 0px  0px 1em 0px;
}

#pg-workDetail  .news-text {
   clear:left;

}


#pg-workDetail .other-window{
	display:inline-block;
	margin-left:0.2em;
	width:1.2em;
	height:auto;
}

#pg-workDetail .other-window img{
	width:1.2em;
	height:auto;
	vertical-align: middle;
}



#pg-workDetail .site-link{
	font-size:2rem;
	font-weight:500;
	line-height:1.4;
	letter-spacing:0.1em;
	white-space:nowrap;
	margin-top:1em;
	color:#272727;
	float:right;
	
}

#pg-workDetail .site-link .other-window {
	width:1.2em;
	height:auto;
}

#pg-workDetail .site-link .other-window img{
	margin-top:-0.3em;
}

#pg-workDetail .content2 h3{
		font-size:2em;
		max-width: 80vw;
	}



/* works その他カテゴリー */

#pg-workDetail  .workbox .works {
	position:relative;	
	text-align: left;
	margin-bottom:50px;
	width:100%;
	}

#pg-workDetail .workbox .works .title{
		position:relative;
		margin-bottom:0em;
		text-align: left;
		margin-top:2em;
		padding-top:0.5em;
		font-size:1.9rem;
	}


/* works ムービーサムネイル */

.works-movie-icon {
	width:100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	float:left;
	object-position:50% 50%;

	border-radius: 0px;
	will-change: transform;
	background: #000;
	margin-bottom:2em;
}

.works-movie-icon:before{
	content:"";
	position:absolute;
	width:4.5em;
	height:4.5em;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	background-image:url('../images/common/playicon01.svg');
}

.works-movie-icon img{
	width:100%;
	height:100%;
	object-fit: cover;
}



#pg-workDetail  .content .wrapper{
	padding-top:1em;
	width:80%;
	margin-top:-10px;
}


#pg-workDetail .content2 .wrapper{
	padding-top:3em;
}


/*blogコンテンツ*/

#pg-blog{
		color:#fff;
	background: #272727;
}

#pg-blog a{
	color:#fff;
}



#pg-blog .blogcontent{
	color:#fff;
	padding-bottom:70px;
}

#pg-blog .content2 h2{
	text-align:center;
	line-height:1;
	margin-bottom:1.5em;
	letter-spacing: 0.08em;
	font-size:3.5rem;
}


#pg-blog .content{
	width:100%;
	margin:0 auto;
}

#pg-blog h4{
	text-align:center;
	line-height:1;
	letter-spacing: 0.08em;
	font-size: 3.5rem;
	margin-bottom:1.6em;
}

.content-side{
	width:80%;
	margin-left: auto;
	margin-right:auto;
}

.content-side h4{
	width:100%;
	font-weight:500;
	border-bottom:1px solid #ccc;
	margin-bottom:2em;
	font-size:1.9rem;
	margin-top:-6px;
}

.sub_navi{
	width:100%;
}

.sub_navi li{
	display: inline-block;
    font-size: var(--font-sm);
    border: 1px solid var(--light-grey);
    padding:0.3em 0.7em 0.2em 0.7em;
    margin-right: 0.5em;
    margin-bottom: 1em;
	background: #D3D3D3;
	border-radius: 50px;
}

.sub_navi a::before {
    color: #272727;
    margin-right: .25rem;
}

.sub_navi a:hover {
    color: #3E3E3E;
	opacity:0.8;
}

.blogdemo-bnr{
	width:100%;
	aspect-ratio: 12 / 5;
	border-radius:5px;
	overflow:hidden;
	margin-top:3em;
	object-position: 50% 50%;
	will-change: transform;
	
}

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

.demobnr2 img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.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');*/
}

.blogdemo-bnr img{
	width:100%;
	height:100%;
	object-fit: cover;
	
}

.demobnr{
	position:absolute;
	bottom:0;
	left:0;
}

/*ブログ検索*/

/* ------------------------------------------------
#. Layouts :prefix[l-]
------------------------------------------------ */
#pg-error .search-form {
	margin-top: 5%;
}

#pg-error .search-form .search-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 40px;
}

#pg-error .search-form .search-box .search-input {
	padding: 0 18px;
	width: 412px;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	border: 1px solid #d0d0d0;
	background-color: transparent;
	outline: none;
}

#pg-error .search-form .search-box .button-submit {
	margin-left: 10px;
	padding: 0;
	width: auto;
	min-width: 90px;
	font-size: 1.6rem;
	color: #fff;
	background-color: #333;
}



/* --------------------------------
 * smart phone
 * -------------------------------- */
@media screen and (max-width: 769px) {
	#pg-error .search-form {
		margin-top: 11.4%;
	}

	#pg-error .search-form .search-box {
		height: 35.5px;
	}

	#pg-error .search-form .search-box .search-input {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		padding: 0 14px;
		width: auto;
		font-size: 1.4rem;
	}

	#pg-error .search-form .search-box .button-submit {
		min-width: 80px;
		font-size: 1.4rem;
	}
}

#pg-blog .search-form {
	margin-bottom:2em;
}

#pg-blog .search-form .search-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 40px;
	margin-bottom:2em;
	
}

#pg-blog .search-form .search-box .search-input {
	padding: 0 0 0 32px;
	width: 100%;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #d0d0d0;
	background-color: transparent;
	outline: none;

	
}

#pg-blog .search-form .search-box .button-submit {
	margin-left: 10px;
	padding: 0;
	width: auto;
	min-width: 90px;
	font-size: 1.6rem;
	color: #fff;
	background-color: #333;
}

#pg-blog .search-form .search-box::before {
	content: '';
	position: absolute;
	width: 25px;
	height: 40px;
	background-image: url('../images/svg/icon-search-black.svg');
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center;
}

/*サーチ*/

#pg-blog  .searchResult-head {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: 20px;
	border-bottom: 1px solid #d0d0d0;
	line-height: 1.4;
	margin-bottom:2em;
}

#pg-blog .searchResult-head .title {
	font-size: 3rem;
	font-weight: 500;
	line-height:1;
}

#pg-blog .searchResult-head .total {
	margin-left: 29px;
	font-size: 1.6rem;
	letter-spacing: 0.18em;
	padding-bottom:2px;
}

#pg-blog .searchResult-head .result_text{
	text-align:left;
	line-height:1;
	letter-spacing: 0.08em;
	font-size: 2rem;
	margin-bottom:1.6em;
	
}

#pg-blog .searchResult-head h3{
	font-size: 3rem;
	font-weight: 500;
	padding-top:0.5em;
	line-height:1.3;
}

#pg-blog .blog-container h3{
	font-weight:500;
}

/*blogシングル*/

#pg-blogDetail .postthumbnail{
	width:100%;
	height:auto;
	overflow: hidden;
}

#pg-blogDetail .post-thumbnail img{
	width:100%;
	height:auto;
	padding:0;
}


#pg-blogDetail{
	
}

#pg-blogDetail a{
	color: #fff;
}



#pg-blogDetail .news .title{
	font-size:2.2rem;
	font-weight:500;
	padding-top:1.5em;
	
	line-height:1.4;
	letter-spacing:0.1em;
}

#pg-blogDetail .news .time{
	font-size: 1em;
	font-weight: 300;
	font-style:normal;
	line-height: 1;
	letter-spacing: 1px;
	color: #aaa;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
	-webkit-text-size-adjust: 100%;
	padding-bottom:2.5em;	
}




#pg-blogDetail  .news-text p {
   margin: 0px  0px 1em 0px;
}

#pg-blogDetail  .news-text {
   clear:left;
}

#pg-blogDetail .news-text .photo-leaf01 img{
}



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

 .page-contents{
	
}

#pg-blogDetail .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;
}

#pg-blogDetail .more-news .prev .another-link,
#pg-blogDetail .more-news .next .another-link {
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing:0.05em;
}

#pg-blogDetail .more-news .prev .another-link {
	
}
#pg-blogDetail .more-news .prev .another-link::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
}
#pg-blogDetail .more-news .prev .another-link:hover {
	color: #404040;
}
#pg-blogDetail .more-news .prev .another-link:hover::before {
	
}
#pg-blogDetail .more-news .next .another-link {
	
}

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

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

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

#pg-blogDetail .blog_tax_box{
	clear:left;
	margin-bottom:2em;
}


#pg-blogDetail  .wrapper{
	max-width:1500px;
}

.side-inner{
	
}

.sns__container {
    float:left;
	margin-bottom:1em;
	margin-top:2em;
}

.sns__container a {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 1em 0 ;
	margin-right: 1em;
}

.sns__container a:hover {
    opacity: 0.8;
}

.fa-square-x-twitter {
	color:#fff;
}

.fa-facebook-square {
	color:#fff;
}

.fa-square-pinterest {
	color:#fff;
}

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

#pg-contact {
	text-align: center;
	color:#fff;
}



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

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

#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: none;
	background-color:#333;
	/*border: 1px solid #fff;*/
}

#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:#333;
	/*border: 1px solid #fff;*/
	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: #fff;
	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: 7%;
	
}

#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;
}



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

input[type="submit"] {
	transition: all 0.3s ease 0.2s;
	color: #fff;
	border: 1px solid #fff;
	background: #272727;
	-webkit-transition: all 0.3s ease 0.2s;
	z-index: 1;
	padding:20px 0;
	width:260px;
	
	overflow: hidden;
	position: relative;
	border-radius: 40px;
}


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 {
	background: #272727;
	color: #fff!important;
	padding-top:50px;
}


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


/*404*/

#pg-404 {
	background: #272727;
	padding-top:50px;
	padding-bottom: 3em;
	min-height: 80vh;
	width: 100vw;
	display: grid;
	align-content: center;
	align-items: center;
}

#pg-404 .wrapper h3{
	font-size:8em;
	text-align:center;
	line-height:1;
	letter-spacing:0;
	color: #ccc;
}

#pg-404 .wrapper h4{
	font-size:2.5em;
	text-align:center;
	line-height:1;
	margin-bottom:1.5em;
	color: #ccc;
}

#pg-404 .wrapper p{
	padding-bottom: 3em;
}



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


	#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: 9%;
	}

	#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;
}
input[type="checkbox"] {
  position: absolute;
  opacity: 0;/*既存のチェックボックスを見えなくする*/
}

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

input[type="checkbox"]:checked +  .wpcf7-list-item-label:after {/*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 0px;
  width: 23px;
  height: 23px;
  /*border-radius: 5px;*/

  background-image:url(../images/common/contact-check01.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color:#fff;
  	border: none;
}

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


/*フォーム終わり*/





/* フェードダウン */
.fade-in {
  opacity: 0; 
}

.fader {
  opacity: 0;
}

.fade-left{
	opacity: 0;
}

.fade-right{
	opacity: 0;
}

.fade-bottom{
	opacity: 0;
}

#pg-workDetail h3{
	text-align:center;
	line-height:1;
	margin-top:1.3em;
	 letter-spacing: 0.08em;
	font-size: 8vw;
		 margin-bottom:1.6em;
}

.web-arrrow{
	width:50px;
	height:50px;
	position: relative;
	border-radius:50%;
	background: #eee;
	box-shadow: 0 0px  3px  #aaa ;
	text-align:center;
	vertical-align: middle;
	padding:7px;
	margin-left:0.5em;
}

/* slide */

.slide {
  position: relative;
  margin: 0;
  padding: 0;
	background: #fff;
}

.slide .item {
  position: relative;
  height: 100%;
}
.slide .item a {
  display: block;
}
.slide .item::before {
  display: block;
  padding-top: 78%;
  content: "";
}
.slide .item .image {
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

.slide  .cover-photo img {
	width:100%;
	height:100%;
	object-fit: cover;
}

/* slide-navigation */

.slide-navigation {
  line-height: 0;
  position: relative;
  margin: 0;
  padding: 0;
	margin-bottom:1.5em;
	width: 100%;
	margin-top:-1px;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slide-navigation .item .image::before {
  display: block;
  padding-top: 80%;
  content: "";
	
}
.slide-navigation .item .image::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
 
}

.slide-navigation .slick-current .image::after {
	border:solid 1pt #272727;
}

.slide-navigation .item .image {
	position: relative;
	overflow: hidden;
}

.slide-navigation .item .image img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	height:100%;
	width: 100%;
	object-fit: cover;
	background: #fff;
}





.blog-main .blog-container{
	margin-bottom:70px;
}

.content-side .blog-container{
	padding-bottom:70px;
}

.blog_tax{
	color: var(--orange);
	
	
padding-right: 10px;
	line-height:1;
	margin-bottom: 10px;
	display: inline-block;
}
.blog_tax::before{
	content: '#';
	width: 15px;
	height:15px;
	padding-right:3px;
}

.rankingcontent{
	width:100%;
	background: #000;
	padding: 7em 10% 8em;
}

#pg-blogDetail .rankingcontent .wpp-list .blog-grid{
	gap:0.5em;
	
}

#pg-blogDetail .rankingcontent .wpp-list .blog-icon{
	margin-top:1em;
	
}

#pg-blogDetail{
	background: #ccc;
}

#pg-blogDetail .content{
	background: #272727;
}

#pg-blogDetail .content2{
	background: #000;
}

#pg-blogDetail .content2 h3{
	text-align:center;
	line-height:1;
	letter-spacing: 0.08em;
	font-size: 2em;
	margin-bottom:1.6em;
}



#pg-blogDetail  .rankingcontent .blog-grid {
	display:grid;
	 grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
	border-bottom:1px solid #ccc;
	padding-bottom:1em;
}


.wpp-list li {
       
        margin-bottom: 2rem;
    }


/*デモシングル*/


#pg-demoDetail a{
	color: #272727;
}

#pg-demoDetail h1{
	font-size:4em;
	font-weight:500;
	padding-top:1rem;
	padding-bottom:1rem;
	line-height:1.4;
	letter-spacing:0.1em;
}

#pg-demoDetail h2{
	font-size:3em;
	font-weight:500;
	padding-top:1rem;
	padding-bottom:1rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-demoDetail h3{
	font-size:2em;
	font-weight:500;
	line-height:1.2;
	letter-spacing:0.1em;
}



#pg-demoDetail h4{
	font-size:1.5em;
	font-weight:400;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-demoDetail h5{
	font-size:1.2em;
	font-weight:400;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-demoDetail h6{
	font-size:1em;
	font-weight:400;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-demoDetail .content p{
	margin-bottom:1em;
}

#pg-demoDetail .content2 h3{
	text-align:center;
	line-height:1;
	margin-top:1.3em;
	 letter-spacing: 0.08em;
	font-size: 8vw;
		 margin-bottom:1.6em;
	linear-gradient(0deg, rgb(0 0 0 / 100%) 0%,rgb(39 39 39 / 100%) 100%);
}

#pg-demoDetail article{
	margin-bottom:50px;
	min-height: 200px;
}

#pg-demoDetail .content{


}


#pg-demoDetail .content2{
	padding-bottom:40px;
	background: #000;
}

#pg-demoDetail{

}

#pg-demoDetail .title{
	font-size:2.5rem;
	font-weight:500;
	margin-right:auto;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	padding-top:1em;
	margin-bottom:1em;
}


#pg-demoDetail  .wrapper{
	margin-top:0px;
}


#pg-demoDetail  .news-text p {
   margin: 0px  0px 1em 0px;
}

#pg-demoDetail  .news-text {
   clear:left;

}


#pg-demoDetail .other-window{
	display:inline-block;
	margin-left:0.2em;
	width:1.2em;
	height:auto;
}

#pg-demoDetail .other-window img{
	width:1.2em;
	height:auto;
	vertical-align: middle;
}


/* works その他カテゴリー */

#pg-demoDetail  .workbox .works {
	position:relative;	
	text-align: left;
	margin-bottom:50px;
	width:100%;
	}

#pg-demoDetail .workbox .works .title{
		position:relative;
		margin-bottom:0em;
		text-align: left;
		margin-top:2em;
		padding-top:0.5em;
		font-size:1.9rem;
	}



#pg-demoDetail  .content {
	width: 100%;
	/*padding-bottom: 10em;*/
}


#pg-demoDetail .content2 .wrapper{
	padding-top:3em;
}

#pg-demoDetail  .calsonpro{
	font-family: "adobe-caslon-pro", serif;
font-weight: 600;
font-style: normal;
}



#pg-demoDetail  .postergothic{
	font-family: "poster-gothic-cond-atf", sans-serif;
font-weight: 400;
font-style: normal;
	
}

#pg-demoDetail  .jewelsaphyr{
	font-family: "ff-scala-jewel-saphyr", sans-serif;
font-weight: 400;
font-style: normal;
}


#pg-demoDetail  .jewelcrystal{
	font-family: "ff-scala-jewel-crystal", sans-serif;
font-weight: 400;
font-style: normal;
}
#pg-demoDetail  .mixtadidonealt{

font-family: "mixta-didone-alt", serif;
font-weight: 600;
font-style: normal;
	}

#pg-demoDetail  .abrilfatface{
	font-family: 'Abril Fatface', serif;
}
/*コードアーカイブ*/



.pg-code .postthumbnail{
	width:100%;
	height:150px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
	object-position: 50% 50%;
	object-fit:cover;

	
}

.pg-code .postthumbnail img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.pg-code   .searchform-blog {
	position: absolute;
	z-index:9999;
	
}

.searchformcodes{
	
	height:300px;
	width:100%;
}

#pg-news .search-form {
	margin-bottom:2em;
}

#pg-news .search-form .search-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 40px;
	margin-bottom:2em;
	
}

#pg-news .search-form .search-box .search-input {
	padding: 0 0 0 40px;
	width: 100%;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #d0d0d0;
	background-color: transparent;
	outline: none;

	
}

#pg-news .search-form .search-box .button-submit {
	margin-left: 10px;
	padding: 0;
	width: auto;
	min-width: 90px;
	font-size: 1.6rem;
	color: #fff;
	background-color: #333;
}

#pg-news .search-form .search-box::before {
	content: '';
	position: absolute;
	width: 25px;
	height: 40px;
	background-image: url('../images/svg/icon-search-black.svg');
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center;
}

/*サーチ*/

#pg-blog .content-side a{
	color: var(--orange);
}

#pg-news  .searchResult-head {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: 20px;
	border-bottom: 1px solid #d0d0d0;
	line-height: 1.4;
	margin-bottom:2em;
}

#pg-news .searchResult-head .title {
	font-size: 3rem;
	font-weight: 500;
	line-height:1;
}

#pg-news .searchResult-head .total {
	margin-left: 29px;
	font-size: 1.6rem;
	letter-spacing: 0.18em;
	padding-bottom:2px;
}

#pg-news .searchResult-head .result_text{
	text-align:center;
	line-height:1;
	letter-spacing: 0.08em;
	font-size: 2rem;
	margin-bottom:1.6em;
	
}

#pg-news .searchResult-head h3{
	font-size: 3rem;
	font-weight: 500;
	padding-top:0.5em;
	line-height:1.3;
}

.codesearch{
	width:80%;
	margin:auto;
	padding-top:5em;

}

.codeichiran.wrapper{
	padding-top:1em;
	min-height:400px;
}

.codeichiran.wrapper h5{
	font-size:1.2em;
	font-weight:500;
	white-space: nowrap;
	text-align:left;
}


/*コードシングル*/


#pg-codeDetail .postthumbnail{
	width:100%;
	height:150px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
	object-position: 50% 50%;
	object-fit:cover;
	backgroung:#eee;
}

#pg-codeDetail .post-thumbnail img{
	width:100%;
	height:100%;
	object-fit:cover;
}

#pg-codeDetail .codecontent .title {
	
	margin-top: 2em;
	padding-bottom: 0.8em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}


#pg-codeDetail a{
	color: #272727;
}

#pg-codeDetail h1{
	max-width:80vw;
	font-size:4em;
	font-weight:500;
	padding-top:1rem;

	line-height:1;
	letter-spacing:0.1em;
}

#pg-codeDetail h2{
	font-size:3em;
	font-weight:500;
	padding-top:1rem;
	padding-bottom:1rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-codeDetail h3{
	font-size:2em;
	font-weight:500;
	line-height:1.2;
	letter-spacing:0.1em;
}



#pg-codeDetail h4{
	font-size:1.5em;
	font-weight:400;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-codeDetail h5{
	font-size:1.2em;
	font-weight:400;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-codeDetail h6{
	font-size:1em;
	font-weight:400;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	line-height:1.2;
	letter-spacing:0.1em;
}

#pg-codeDetail .content p{
	margin-bottom:1em;
}


#pg-codeDetail .content2 h3{
	text-align:center;
	line-height:1;
	margin-top:1.3em;
	letter-spacing: 0.08em;
	font-size: 8vw;
	margin-bottom:1.6em;
}

#pg-codeDetail article{
	margin-bottom:50px;
	min-height: 200px;
}

#pg-codeDetail .content{
	background: #eee;
	
}


#pg-codeDetail .content2{
	padding-bottom:40px;
}

#pg-codeDetail{
	background: #ccc;
}

#pg-codeDetail .title{
	font-size:2.5rem;
	font-weight:500;
	margin-right:auto;
	line-height:1;
	letter-spacing:0.1em;
	text-align:center;
	padding-top:1em;	
}


#pg-codeDetail  .wrapper{
	margin-top:0px;
	
}


#pg-codeDetail  .news-text p {
   margin: 0px  0px 1em 0px;
}

#pg-codeDetail  .news-text {
   clear:left;

}






/* code その他カテゴリー */

#pg-codeDetail  .workbox .works {
	position:relative;	
	text-align: left;
	margin-bottom:50px;
	width:100%;
	}

#pg-codeDetail .workbox .works .title{
		position:relative;
		margin-bottom:0em;
		text-align: left;
		margin-top:2em;
		padding-top:0.5em;
		font-size:1.9rem;
	}




#pg-codeDetail  .content {
	width: 100%;
	padding-bottom:80px;
}


#pg-codeDetail .content2 .wrapper{
	padding-top:3em;
}

#pg-codeDetail  .calsonpro{
	font-family: "adobe-caslon-pro", serif;
font-weight: 600;
font-style: normal;
}



#pg-codeDetail  .postergothic{
	font-family: "poster-gothic-cond-atf", sans-serif;
font-weight: 400;
font-style: normal;
	
}

#pg-codeDetail  .jewelsaphyr{
	font-family: "ff-scala-jewel-saphyr", sans-serif;
font-weight: 400;
font-style: normal;
}


#pg-codeDetail  .jewelcrystal{
	font-family: "ff-scala-jewel-crystal", sans-serif;
font-weight: 400;
font-style: normal;
}

#pg-codeDetail  .mixtadidonealt{

font-family: "mixta-didone-alt", serif;
font-weight: 600;
font-style: normal;
	}

#pg-codeDetail  .abrilfatface{
	font-family: 'Abril Fatface', serif;
}

#pg-codeDetail  .post-category{
	float:left;
	font-size:1.2rem;
	margin:0 auto;
	padding-left: 7px;
	padding-right: 7px;
	padding-top:4px;
	margin-right:1rem;
	border:solid 1px #272727;
	text-align:center;
		
}

#pg-codeDetail  .post-category2{
	font-size:1.3rem;
	width:fit-content;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top:4px;
	margin-right:1rem;
	border:solid 1px #272727;
	text-align:center;
	margin:0 auto 4em auto;
}

#pg-codeDetail .detail-link{
	margin:auto;
}

#pg-codeDetail .workbox{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
    gap: 2rem; 
	padding-top:1.5em;
	padding-bottom:1em;
}



.acf-map {
    width: 100%;
}

.acf-map img {
   max-width: inherit !important;
}

#to_top_scrollup {
    z-index: 9 !important;
}

.google-map{
	width:100%;
	height:900px;
}

/*パイチャート*/

#my-paichart {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
	padding:5em 0 2em;
}
#my-paichart caption{
	font-size:2em;
	font-weight: 400;
	padding: 1em 0.5em;
	line-height: 1.2;
}

#my-paichart .pie tr td {
	font-weight: 400;
	text-align: center;
	font-size:1.5em;
}



.piechart_legend {
	margin: auto;
	text-align: center;
	padding-bottom: 10em;
}

.piechart_legend li{
	display: inline-block;
	padding:0 0.3em ;
	font-size: 1.3em;
}

@media screen and (min-width: 740px) {
	
	body {
		font-size: 1.6rem;
	}
	
	.page-contents .page-head .wrapper .page-title {
		font-size:4.5rem;
	}
	
	

	

	.workbox{
		display:grid;
		grid-template-columns: repeat(2, 1fr);
    	gap: 3rem;    
	}
	

	.works .title{
		font-size:2.2rem;
	}
	
	/*movie*/
	
	.moviebox{
		
	}
	
	
	
	.movie .title{
		font-size:2.2rem;
	}
	
	
	/*workシングル*/
	
	#pg-workDetail .workbox .works .title{
		font-size:2.2rem;
	}
	
	
	/*news*/
	
	
	
	/*blog*/
	


	#blog .blog-icon {
		margin-right: 0;
	}
	
	
	
	#blog .blog-grid{
		display:grid;
		grid-template-columns: repeat(1, 1fr);
    	gap:0.5em ;
		border-bottom:none;
		padding-bottom:1em;
	}
	
	
	
	#blog .blog-container{
		display:grid;
	 	grid-template-columns: repeat(4, 1fr);
    	gap: 1.5em;
		margin-bottom:2em;
		top:0;
	}
	
	
	.blog-content{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	
	.blog-main{
		padding-top:0px;
	padding-bottom:0px;
		width:100%;
	}
	
	/*demo*/
	
	/*contact*/
	
	#contact{
		text-align: center !important;
	}
	
	
	#contact .footerlead{
		margin: auto;
		text-align:center;
	}

	#pg-news .news-grid{
		 
	}

	
	#primary .page-head{
		height:260px;
	}
	
	
	
	.section-contents h2{
		font-size:4.5rem;	
	}
	
	.logo-header h1{
		width:220px;	
	}
	

	.section-lead{
		font-size:1.8rem;
		
	}
	
	.work-number{
		font-size: 25rem;	
	}
	
	#news .section-lead{
		margin-bottom:60px;
	}
	
	.news .title{
		font-size:2.2rem;
	}
	
	#pg-newsDetail .news .title{
		
	}
	


	
	.wrapper{
		padding-top:100px;
		padding-bottom:100px;
	}
	
	#pg-about {
		padding-bottom:100px;
	}

	
	#pg-workDetail .title{
		font-size:3rem;
	}
	

	
	
	
	 #pg-about h3{
		font-size:4.5rem;
		 
	}
	
	 #pg-about h4{
		font-size:2.2rem;
	}
	
	
	
	#pg-news .news .time{
		clear:left;	
	}
	
	
	.news .time{
		margin-top:0.6em
	}
	
	/*about*/

	.excerpt{
		width:100%;
	}
	

	
	.work-number{
		font-size: 55rem;
		margin-right:-7px;
		line-height:1;
		position:relative
	}
	
	.work-english{
		font-size:4.5rem;
	
		line-height:1;
		
	}

	
	

	.work-list{
		margin:auto;
		padding-bottom: 3em;
	}
	

	
	 .section-title{
		margin-left:0px;
		text-align: left;
	}
	
	
	#pg-about .worktitle{
		font-size: 2.2rem;
		width: 80%;
	}
	
	 #pg-about h4{
		text-align: left;
	}
	
	.work-contents{
		
	}
	
	#pg-about .section-lead{
		padding-top:100px;
	}
	
	#pg-about .profile{   
		width:90%;
	}
	
	#pg-newsDetail article{
		margin-bottom:70px;
	}
	
	#pg-newsDetail .more-news .prev .another-link,
	#pg-newsDetail .more-news .next .another-link {
		font-size: 1.5rem;

	}

	
	
	#pg-workDetail .content2{
		padding-bottom:70px;
	}
	
	
	#pg-workDetail .site-link {
		font-size:2.2rem;	
	}
	#pg-workDetail .content2 h3{
		font-size:3em;
		max-width: 80vw;
	}

	#pg-workDetail .site-address {
		font-size:2.2rem;	
	}
	
	#pg-about .workall{
    	width:80%;

	}
	
	.slide .item::before {
  		padding-top: 80%;
	}

	.slide-navigation .item .image::before {
  		padding-top: 100%;
	}
	
	.news .new-tag{
		font-size:1.4rem;
	}
	
	.news .post-category{
		font-size:1.4rem;
	}
	
	.exterior{
		height:200px;
	}
	
	/*blogコンテンツ*/
	
	#pg-blog .blogcontent-wrapper{
		width:80%;
		display:flex;
		max-width:1500px;
		margin:0 auto;
	}
	
	#pg-blog .content{
		padding-top:100px;
		margin:0 auto;
	}
	
	#pg-blog .blog-main .blog-icon {
		margin-right:1.5em;
	}
	
	#pg-blog .blogcontent{
		padding-bottom:100px;
	}
	
	.blog-main .blog .title{
		font-size:2.2rem;
	}
	
	.content-side{
		width:300px;
		margin-left:50px;
		margin-top: -10px;
	}
	
	#pg-blog  .content-side .blog-grid{
		display:grid;
		grid-template-columns: repeat(1, 1fr);
    	gap: 0.5em;
		border-bottom:none;
		padding-bottom:1em;
		background: blue;
	}
	
	#pg-blog  .content-side .blog-container{
		display:grid;
	 	grid-template-columns: repeat(1, 1fr);
    	gap: 1.5em;
		margin-bottom:2em;
	}
	
	#pg-blog .content-side .blog-icon {
		margin-right:0px;
	}
	
	#pg-blog .content-side h2{
		font-size:3rem;
	}
	
	.content-side h4{
		font-size:2.2rem;
	}
	
	#pg-blog h4{
		font-size: 4.5rem;
	}
	
	#pg-blog .rankingcontent .blog-icon {
		margin-right:0px;
	}
	
	/*デモバナー*/
	
	.blogdemo-bnr{
	aspect-ratio: 16 / 9;
		margin-top:2em;
	}
	
	.demobnr2{
		aspect-ratio: 16 / 9;
	}

	
	/*サーチ*/
	#pg-blog .searchResult-head h3{
		font-size: 3.5rem;
	}

	/*blogシングル*/
	#pg-blogDetail .news .title{
		font-size:2.2rem;
	}
	
	
	#pg-blogDetail article{
		margin-bottom:70px;
	}
	
	#pg-blogDetail .more-news .prev .another-link,
	#pg-blogDetail .more-news .next .another-link {
		font-size: 1.5rem;
	}
	
	#pg-blogDetail .blog-icon {
		margin-right:0;
	}
	
	
	
	.content-side .blog-container{
		padding-bottom:0px;
	}
	.rankingcontent-box{
		max-width: 1500px;
		margin: auto;
	}

	.rankingcontent-box .blog-grid{
		display:grid;
		grid-template-columns: repeat(1, 1fr);
		border-bottom:none;
		padding-bottom:1em;
		padding-top:1em;
		gap: 0em !important;
	}
	

	
	.blog_tax_box{
		margin-bottom:1em;
	}
	
	.sticky-item {
  		position: webkit-sticky;
  		position: sticky;
  		top: 80px;
  		width: 100%;
  		/* z-index: 10; */
	}
	
	
	
	
	.wpp-list li{
		display:inline-block;
		vertical-align: top;

	
		padding-top: 0;
		
	}
	
.rankingcontent	.wpp-list li{
		display:inline-block;
		vertical-align: top;
		width:23.5%;
		margin-right:1.8%;
		padding-top: 0;
		
	}

	.wpp-list li:nth-child(4) {
		margin-right:-10px;
	}
	
	
	#pg-blogDetail .content2 h3{
		font-size: 2.5em;	
	}
	
	#pg-blogDetail .workbox{
		display:grid;
		grid-template-columns: repeat(4, 1fr);
    	gap: 3rem;    
	}
	
	#pg-blogDetail .blog-grid{
		display:grid;
		grid-template-columns: repeat(1, 1fr);
    	gap: 0.5em;
		border-bottom:none;
		padding-bottom:1em;
	}
	
	#pg-blogDetail .blog-container{
		display:grid;
	 	grid-template-columns: repeat(4, 1fr);
    	gap: 1.5em;
		
		top:0;
	}
	
	.rankingcontent-box .blog-grid{
	 
}

	
	/*デモシングル*/
	
	#pg-demoDetail .workbox .works .title{
		font-size:2.2rem;
	}
	
	
	#pg-demoDetail .content2 h3{
		font-size:4.5rem;
	}
	
	#pg-demoDetail .content2{
		
	}
	
	
	#pg-demoDetail .site-link {
		font-size:2.2rem;	
	}

	#pg-demoDetail .site-address {
		font-size:2.2rem;	
	}
	
	/*コードアーカイブ*/
	
	.pg-code .postthumbnail{
		height:270px;
	}
	
	#pg-news .codeichiran .news-grid{
		
	}
	

	
	/*コードシングル*/
	
	#pg-codeDetail .postthumbnail{
		height:270px;
	}
	
	#pg-codeDetail .workbox .works .title{
		font-size:2.2rem;
	}
	
	
	#pg-codeDetail .content2 h3{
		font-size:4.5rem;
	}
	
	#pg-codeDetail .content2{
		padding-bottom:70px;
	}
	
	
	#pg-codeDetail .site-link {
		font-size:2.2rem;	
	}

	#pg-codeDetail .site-address {
		font-size:2.2rem;	
	}
	
	#pg-codeDetail .workbox{
		display:grid;
		grid-template-columns: repeat(2, 1fr);
    	gap: 2rem;    
	}
	

	
	#pg-codeDetail  .content {
		padding-bottom:100px;
	}
	
	/*コードサーチ*/
	#pg-news .searchResult-head h3{
		
		font-size: 3.5rem;
	}
	
	/*404*/
	#pg-404 .wrapper h3{
		font-size:13em;
	}
	
}

@media screen and (min-width: 1250px) {
	
	body {
		font-size: 1.7rem;
	}
	
	.wrapper{
		padding-top:120px;
		padding-bottom:120px;
	}
	
	 .home .wrapper{
		padding-top:140px;
		padding-bottom:140px;
	}
	
	 #pg-contact .wrapper{
		padding-top:120px;
		padding-bottom:100px;
	}
	
	
	
	.section-lead{
		font-size: 2rem;
		
	}
	
	.section-contents h2{
		font-size: 5.5rem;	
	}
	
	.page-contents .page-head .wrapper .page-title {
		font-size: 5.5rem;
	}
	
	.news .title{
		font-size:2.3rem;
	}
	

	
	.workbox{
		grid-template-columns: repeat(3, 1fr);
	}
	
	
	.slidermovie{
		max-width:750px;
	}
	
	/*ニュースシングル*/
	
	#pg-newsDetail .news .title{
		
	}
	
	/*ワークシングル*/
	
	#pg-workDetail  .title{
		font-size:3.5rem;
	}
	
	
	
	
	#blog .blog-icon {
		margin-right: 0;
	}
	
	
	
	.blog .title{
		font-size:2.2rem;
	}
	
	.blog-container{
		max-width:1500px;
		margin:auto;
	}
	
	#blog .blog-container{
		max-width:none;
		margin:auto;
	}
	
	
	/*aboutコンテンツ*/
	
	#pg-about .workall{
    	grid-template-columns: repeat(3, 1fr);
    	gap: 4em;
		width:80%;
		max-width:1500px;

	}
	
	
	#pg-about h3{
		font-size:5.3rem;
	}
	
	#pg-about .wrapper{
		max-width: none;
	}
	
	#pg-about .worktitle{
		width:80%;
		max-width:1500px;
		margin-top:5em;
		font-size:2.4rem;
	}
	
	#pg-about .profile{   
		width:80%;
		max-width: 1500px;
	}
	
	
	/*ニュース*/

	#pg-news .news-grid{
		max-width: 950px;
		margin: auto;
	}
	
	
	
	/*ワークシングル*/
	
	#pg-newsDetail .news{
		width:70%;
		position:relative;
		margin:0 auto 70px auto;
	}
	
	#pg-newsDetail  .news{
		max-width:800px;
	}

	#pg-newsDetail  .more-news{
		max-width:800px;
	}
	
	#pg-workDetail .works{
		width:70%;
		position:relative;
		margin:3em auto 70px auto;
		
	}
	
	/*タグ*/
	
	.tags-links{
		width:100%;
	}
	
	/*ワークシングル*/
	
	#pg-workDetail .workbox .work{
		
		margin:0 auto 70px auto;
	}
	
	/*ニュース*/
	.more-news{
		width:70%;
		position:relative;
		margin:0 auto;
	}
	
	.news .time{
		margin-top:0.7em
	}
	
	
	

	
	
	#pg-contact .wrapper {
		width: 50%;
	}
	
	input[type="submit"] {
		width:280px;
	}
	
	

	/*about*/

	.work{
		width:100%;
		margin: 0 auto;
		display:flex;
		flex-flow: column;
	}
	
	.excerpt{
		width:100%;
	}
	
	 .section-title{
		margin-left:0px;
		text-align: left;
	}
	
	.section-title{
		text-align: left;	
	}
	
	 #pg-about h4{
		text-align: left;
	}
	
	#primary .page-head{
		height:270px;
	}
	
	#about .about-contents{
		margin:0 auto;
	}
	
	#about .excerpt{
		margin:50px auto 0 auto;
		text-align:left;
	}
	
	
	.work-contents{
		margin-top:110px;
		
	}
	
	
	#pg-about .about-excerpt{
		max-width:1200px;
		margin-bottom:8em;
	}
	
	#pg-about .work2{
		max-width:1500px;
		margin:auto;
	}
	
	#pg-about .about-main-image {
	
	}
	
	#pg-about .about-main-image2{
		width:80%;
		height: 600px;
		max-width: 1500px;
		will-change: transform;
	}
	
	/*thanks*/
	
	#pg-thanks{
		padding-top:70px;
	}
	
	
	#pg-thanks .wrapper{
		min-height:400px;
	}
	
	
	/*thanks*/
	
	
	
	#pg-404{
		padding-top:70px;
	}
	
	
	#pg-404 .wrapper{
		min-height:400px;
	}
	
	
	/*ワークシングル*/
	
	
	
	#pg-workDetail .post-workimage img{
		width:50%;
		margin-left:25%
	}
	
	/*access*/
	
	
	.exterior{
		height:300px;
		width:100%;
		overflow:hidden;
	}
	
		/*access*/
	
	#pg-access .wrapper{
		max-width:800px;	
	}
	
	#pg-access .access-office{
		height:600px;
	}
	
	
	#pg-access .parking img{	
		width:50%;
		margin-left:25%;
	}
	
	#pg-access .accesslist{
		font-size:2.4rem;
	}
	
	#pg-access .access-box{
		margin-bottom:4em;
	}
	
	#pg-access .access-grid{
		margin-top:-50px;
	}
	
	.page-contents .page-container .Breadcrumbs-item:not(:first-child)::before {
		margin-top:2px;
	}
	
	#pg-newsDetail .more-news .prev .another-link,
	#pg-newsDetail .more-news .next .another-link {
		font-size: 1.6rem;

	}

	
	
	#pg-workDetail .content2 {
		padding-bottom:100px;
		background: #000;
	}
	
	#pg-workDetail  .content .wrapper{
		margin-top:-60px;
		
	}
	
	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
		width:80%;
		margin:0 auto;
	}
	.slide-navigation {
    	grid-template-columns: repeat(8, 1fr);
		margin-bottom:3em;
		
	}
	
	.slide .item::before {
  		padding-top: 39%;
	}
	
	.slide .products img {
		width:60%;
	}
	
	.slide-navigation .item .image::before {
  		padding-top: 47%;
	}
	
	#pg-workDetail .site-address{
		margin-bottom:3.7em;
	}
	
	#pg-workDetail .content2 h3{
		font-size:3.5em;
		margin-bottom:50px;
	}
	
	/*blogコンテンツ*/	
	
	
	
	.content-side{
	
		width:300px;
	}
	
	
	.content-side h4{
		font-size:2.5rem;
	}
	
	#pg-blog h4{
		font-size: 5.5rem;
	}
	
	
	#pg-blog .content{
		padding-top:140px;
		
	}
	
	
	#pg-blog .blogcontent{
		padding-bottom:140px;
	}
	/*blogシングル*/
	
	
	#pg-blogDetail .news .title{
		font-size:2.5rem;
	}
	
	#pg-blogDetail .more-news .prev .another-link,
	#pg-blogDetail .more-news .next .another-link {
		font-size: 1.6rem;
	}
	
	#pg-blogDetail .news{
		width:70%;
		position:relative;
		margin:0 auto 70px auto;
	}
	
	#pg-blogDetail  .news{
		max-width:800px;
	}

	#pg-blogDetail  .more-news{
		max-width:800px;
	}
	
	
	.blog-main{

		width:100%;
	}
	
	.blog-main .blog-container{
		margin-bottom:70px;
	}
	
	.content-side{
	
	}

	#pg-blogDetail .content2 h3{
	
		font-size: 3em;
		
	}
	
	
	.blog-main .blog .title{
		font-size:2.5rem;
	}
	
	/*サーチ*/
	#pg-blog .searchResult-head h3{
		font-size: 4rem;
	}
	
	/*デモシングル*/
	
	#pg-demoDetail .works{
		width:70%;
		position:relative;
		margin:3em auto 70px auto;
	}
	
	#pg-demoDetail .workbox .work{
		
		margin:0 auto 70px auto;
	}
	
	#pg-demoDetail  .title{
		font-size:3.5rem;
	}
	
	#pg-demoDetail .site-address{
		margin-bottom:2em;
	}
	
	#pg-demoDetail .content2 h3{
		margin-bottom:50px;
		font-size:5.5rem;
	}
	
	#pg-demoDetail .content2 {
		
	}
	
	#pg-demoDetail  .content .wrapper{
	}
	
	
	#pg-demoDetail h1{
		font-size:6em;
		font-weight:500;
		padding-top:1rem;
		padding-bottom:1rem;
		line-height:1.4;
		letter-spacing:0.1em;
	}
	
	/*コードアーカイブ*/
	.pg-code .postthumbnail{
		height:350px;
	}
	
	.codeichiran.wrapper{
	padding-top:1em;
	}
	
	#pg-news .codeichiran .news-grid{
		display: grid;
    	grid-template-columns: repeat(4, 1fr);
    	gap: 2rem;    
	}
	

	
	
	/*コードシングル*/
	#pg-codeDetail .codecontent{
		max-width:1500px;
		margin:auto;
	}
	
	#pg-codeDetail .postthumbnail{
		height:350px;
	}
	
	

	
	#pg-codeDetail  .title{
		font-size:3.5rem;
	}
	
	#pg-codeDetail .site-address{
		margin-bottom:2em;
	}
	
	#pg-codeDetail .content2 h3{
		margin-bottom:50px;
		font-size:5.5rem;
	}
	
	#pg-codeDetail .content2 {
		padding-bottom:100px;
	}
	
	#pg-codeDetail  .content {
		padding-bottom:150px;
	}
	
	
	#pg-codeDetail h1{
		font-size:6em;
		font-weight:500;
		padding-top:1rem;
		line-height:1.4;
		letter-spacing:0.1em;
	}
	
	#pg-codeDetail .workbox{
		display:grid;
		grid-template-columns: repeat(4, 1fr);
    	gap: 2rem;    
	}
	

	
	#pg-codeDetail  .post-category2{
	font-size:1.5rem;
	}
	
	#pg-codeDetail  .post-category{
		font-size:1.4rem;
		
	}
	
	/*コードサーチ*/
	#pg-news .searchResult-head h3{
	
		font-size: 4rem;
	}
	
	#contact{
		text-align: center !important;
		margin: auto;
	}
	
	
	
}





/*google font*/

.orbitron-black {
  font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.orbitron-bold {
  font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.orbitron-mediumbold {
  font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.orbitron-medium {
  font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*トップロゴ*/
/* safari */
_::-webkit-full-page-media, _:future, :root #cxg-logo img{
   margin-left: -6px;
}


#cxg-logo{
	position: absolute;
	left: 5%;
	top: 3em;
	z-index: 10;
}
#cxg-logo h1{
	font-size: 1em;
	font-weight: 300;
	color: #fff;
	line-heigh: 1;
	letter-spacing: 2px;
	padding-bottom: 0.5rem;
	opacity: 0;
}
#cxg-logo img{
	width: 190px;
	
	height: auto;
	opacity: 0;
}
@media(max-width: 1024px){
#cxg-logo{
	position: absolute;
	left: 10%;
	top: 2.5rem;
}	
	#cxg-logo h1{
	
	margin-top: 0;
}
}


/*
navi
================================================ */
@media(min-width: 1024px){
.menu-list {
   display: flex;
	position: absolute;
	right: 5vw;
	top: 3em;
	font-size: 1em;
	font-weight: 400;
	text-align: center;
	z-index: 7;
	
}

.menu-list li {

	padding: 0 0 0.2em 1.8em;
	opacity: 0;
	text-align: center;
	margin: auto;
	display: grid;
	align-content: center;
}


.menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
	font-weight: 500;
	
}
	
	
}
@media(max-width: 1024px){
	
	/*
SLIDE MENU
================================================ */
/*ハンバーガー*/
	#menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
   
}
	
.MenuBtn.Style01 {
    position: fixed;
	right: 0;
    top: 0;
    width: 100px;
    height: 100px;
	padding: 25px 10px;
	background: #000;
	display: flex;
    justify-content: right;
    align-items: top;
	z-index:10;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
.MenuBtn.Style01 .MenuBtn-BarFrame {
    position: relative;
    display: block;
    width: 40px;
    height: 3px;
}
.MenuBtn.Style01 .MenuBtn-BarFrame-FirstBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all .15s linear;
}
.MenuBtn.Style01 .MenuBtn-BarFrame-SecondBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all .30s ease;
    transform: translateY(-12px) rotate(0deg);
}
.MenuBtn.Style01 .MenuBtn-BarFrame-ThirdBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all .30s ease;
    transform: translateY(12px) rotate(0deg);
}
.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-FirstBar {
    opacity: 0;
}
.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-SecondBar {
    transform: translateY(0) rotate(45deg);
}
.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-ThirdBar {
    transform: translateY(0) rotate(-45deg);
}
	/* 開閉ボタン */
.btn-menu {
    transition: .4s;
}
/* スライドメニューパネル */
#menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 11;
    padding: 5rem 2.7rem 2rem;
    width: 100vw;
    height: 100vh;
    /*translate: 100vw;*/
	visibility: hidden;
	opacity: 0;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	letter-spacing: 0.1em;
}
.menu-list {
    list-style: none;
	position: absolute;
	right: 2.7rem;
	width: auto;
}

.menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
	
	
}
	.menu-list li {
    margin: 1rem auto;
    opacity: 0;
	height:25px;
	width:100%;
		text-align: right;
}
}




/* CSS Document */
.box {
  padding: 25px 0;
}
.text-animation {
  &.show {
    .text-animation-span {
      display: inline-block;
      overflow: hidden;
    }
    span {
      display: inline-block;
      animation: showText 1.5s backwards;
    }
  }
}
@keyframes showText {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}



#container {
	
	/*-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;*/
	width: 100vw;
	height:100svh;
}
#loadingblock-container {
	height: 100svh;
    width: 100vw;
	position: relative;
	overflow: hidden;
}
/*scroll*/
.scroll-text{
	transform: rotate(90deg);
	transform-origin: top left;
	margin-left: 15px;
	font-size: 1.5rem;
	height: 77px;
	width: 10px;
	line-height: 1;
}
#scroll{
	width: 15px;
	height:140px;
	position: absolute;
	z-index: 6;
	bottom: 2em;
	right: 2em;
	display:flex;
	flex-flow: column;

}
.scroll-arrow{
	width:15px;
	height:11px;
}
#scroll img{
	width: 100%;
	height: auto;
}
ul li.scroll-arrow:first-child{
	

}
ul li.scroll-arrow:nth-child(2){

}
ul li.scroll-arrow:nth-child(3){
	
}
/*totop*/
#to-top{
	width: 30px;
	height:50px;
	position: fixed;
	z-index: 7;
	bottom: 1.5em;
	right: 1.5em;
	mix-blend-mode: difference;
	
	display:none;
	cursor: pointer;
}
#to-top img{
	width: 100%;
	height: auto;
}
.to-top-arrow{
	position: absolute;
opacity:0;
	visibility: hidden;
}


ul li.to-top-arrow:first-child{
	fill: #fff;
}
ul li.to-top-arrow:nth-child(2){
	top: 15px;
	left: 0;
}
ul li.to-top-arrow:nth-child(3){
	top: 30px;
	left: 0;
}

@media (max-width: 740px) {
	#to-top{
		display: none;
	}
}
/*
/*
LOADING
=============================================== */
#loadingblock {
	height: 100svh;
    width: 100vw;
    overflow: hidden;
    display: grid;
    place-items: center;
	grid-template-columns: repeat(8, 1fr);
    gap: 0;
}
.loadbox{
	display: grid;
    gap: 0em;
	list-style: none;
	overflow: hidden;
	aspect-ratio: 1/1;
	width:  calc(100vw / 8);
	height:  calc(100vw / 8);
	position: relative;
}
.circle{
	border-radius: 50%;
}

@media (max-width: 1024px) {
	#loadingblock {
		grid-template-columns: repeat(5, 1fr);
	}
	.loadbox{	
		width: calc(100vw / 5);
		height: calc(100vw / 5);
	}
}

@media (max-width: 740px) {
	#loadingblock {
		grid-template-columns: repeat(4, 1fr);
	}
	.loadbox{
		width: calc(100vw / 4);
		height: calc(100vw / 4);
	}
}

/* 1 クロスボックス */
.box-l{
	width: 0%;
	height: 0%;
	background: #111;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	top: 50%;
	left: 50%;
	transform-origin:top left ;
}
.box-s{
	width:0%;
	height: 0%;
	background: #333;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	top: 50%;
	left: 50%;
	transform-origin:top left ;
}
.bar-bslash{
	width: 160%;
	height: 20%;
	background: #444;
	position: absolute;
	transform-origin:50% 50%;
	transform: rotate(90deg);
	top:40%;
	left:-30%;
	opacity:0;
}
.bar-slash{
	width: 160%;
	height: 20%;
	background: #222;
	position: absolute;
	transform-origin:50% 50%;
	transform: rotate(90deg);
	top:40%;
	left:-30%;
	opacity:0;
}


/* 2 fan7 */
.fan{
	width: 100%;
	height: 100%;
	position: absolute;
	transform-origin: 50% 50%;
	opacity: 0;
}
ul li.fan:first-child{
	clip-path: polygon(0% 50%,0% 0% ,50% 50%);
	background: #111;
}
ul li.fan:nth-child(2){
	clip-path: polygon(0% 0%,50% 0% ,50% 50%);
	background: #555;
}
ul li.fan:nth-child(3){
	clip-path: polygon(50% 0%,100% 0% ,50% 50%);
	background: #222;
}
ul li.fan:nth-child(4){
	clip-path: polygon(100% 0%,100% 50% ,50% 50%);
	background: #000;
}
ul li.fan:nth-child(5){
	clip-path: polygon(100% 50%,100% 100% ,50% 50%);
	background: #333;
}
ul li.fan:nth-child(6){
	clip-path: polygon(100% 100%,50% 100% ,50% 50%);
	background: #111;
}
ul li.fan:nth-child(7){
	position: absolute;
	clip-path: polygon(50% 100%,0% 100% ,0% 50%, 50% 50%);
	background: #444;
}

/* 3 ボーダーー */
ul li.bar-beside:first-child{
	width: 0%;
	height: 20%;
	position: absolute;
	top: 0%;
	background: #000;
	opacity: 0;
}
ul li.bar-beside:nth-child(2){
	width: 0%;
	height: 20%;
	position: absolute;
	top: 20%;
	background: #222;
	opacity: 0;
}
ul li.bar-beside:nth-child(3){
	width: 0%;
	height: 20%;
	position: absolute;
	top: 40%;
	background: #111;
	opacity: 0;
}
ul li.bar-beside:nth-child(4){
	width: 0%;
	height: 20%;
	position: absolute;
	top: 60%;
	background: #333;
	opacity: 0;
}
ul li.bar-beside:last-child{
	width: 0%;
	height: 20%;
	position: absolute;
	top: 80%;
	background: #222;
	opacity: 0;
}

/* 4 トライアングル小 */
.tribox{
	width:100px;
	height:auto;
	aspect-ratio: 1 /1;
}
.tri-s{
	opacity: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	transform-origin: 50% 50%;
}
ul li.tri-s:first-child{
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #000;
}
ul li.tri-s:nth-child(2){
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #333;
}
ul li.tri-s:nth-child(3){
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #222;
}
ul li.tri-s:nth-child(4){
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #555;
}
ul li.tri-s:nth-child(5){
	left: 50%;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #111;
}
ul li.tri-s:nth-child(6){
	left: 50%;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #222;
}
ul li.tri-s:nth-child(7){
	left: 50%;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #555;
}
ul li.tri-s:nth-child(8){
	left: 50%;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #444;
}
ul li.tri-s:nth-child(9){
	top: 50%;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #333;
}
ul li.tri-s:nth-child(10){
	top: 50%;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #111;
}
ul li.tri-s:nth-child(11){
	top: 50%;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #555;
}
ul li.tri-s:nth-child(12){
	top: 50%;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #222;
}
ul li.tri-s:nth-child(13){
	top: 50%;
	left: 50%;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #111;
}
ul li.tri-s:nth-child(14){
	top: 50%;
	left: 50%;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #000;
}
ul li.tri-s:nth-child(15){
	top: 50%;
	left: 50%;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #444;
}
ul li.tri-s:nth-child(16){
	top: 50%;
	left: 50%;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #222;
}

/* 5 グリッド16 */
.box16{
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 0em;
}
.box16 .grids{
	opacity: 0;	
}
.box16 li:first-child {
  background: #111;
}
.box16 li:nth-child(2) {
  background: #555;
}
.box16 li:nth-child(3) {
  background: #222;
}
.box16 li:nth-child(4) {
  background: #333;
}
.box16 li:nth-child(5) {
  background: #444;
}
.box16 li:nth-child(6) {
  background: #000;
}
.box16 li:nth-child(7) {
  background: #555;
}
.box16 li:nth-child(8) {
  background: #111;
}
.box16 li:nth-child(9) {
  background: #333;
}
.box16 li:nth-child(10) {
  background: #222;
}
.box16 li:nth-child(11) {
  background: #111;
}
.box16 li:nth-child(12) {
  background: #000;
}
.box16 li:nth-child(13) {
  background: #444;
}
.box16 li:nth-child(14) {
  background: #111;
}
.box16 li:nth-child(15) {
  background: #333;
}
.box16 li:last-child {
  background: #222;
}

/* 6 ファンLL */
.fanlll{
	width: 200%;
	height: 200%;
	position: absolute;
	transform-origin:50% 50%;
	border-radius: 50%;
	opacity: 0;
}
ul li.fanlll:first-child{
	clip-path: polygon(0% 50%,0% 40% ,50% 50%);
	background: #111;	
}
ul li.fanlll:nth-child(2){
	clip-path: polygon(0% 40%,0% 28% ,50% 50%);
	background: #555;
}
ul li.fanlll:nth-child(3){
	clip-path: polygon(0% 28%,0% 11% ,50% 50%);
	background: #222;
}
ul li.fanlll:nth-child(6){
	clip-path: polygon(0% 11%,11% 0% ,50% 50%);
	background: #333;
}
ul li.fanlll:nth-child(7){
	clip-path: polygon(11% 0%,28% 0% ,50% 50%);
	background: #111;
}
ul li.fanlll:nth-child(9){
	clip-path: polygon(28% 0%,40% 0% ,50% 50%);
	background: #222;
}
ul li.fanlll:nth-child(10){
	clip-path: polygon(40% 0%,50% 0% ,50% 50%);
	background: #444;
}

/* 7 ストライプ */
.bar-vertical{
	width: 20%;
	height: 100%;
	position: absolute;
	opacity: 0;
}
ul li.bar-vertical:first-child{
	top: 0%;
	background: #333;	
}
ul li.bar-vertical:nth-child(2){
	left: 20%;
	background: #000;
}

ul li.bar-vertical:nth-child(3){
	left: 40%;
	background: #222;
}

ul li.bar-vertical:nth-child(4){
	left: 60%;
	background: #555;
}

ul li.bar-vertical:nth-child(5){
	left: 80%;
	background: #111;
}

/* 8 ドット4 */
.dot-ll{
	opacity: 0;
}
.dot-back01{
	position: absolute;
	top: 15%;
	left: 15%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #111;
	visibility: hidden;
	z-index: 2;
}
.dot-back02{
	position: absolute;
	top: 15%;
	left: 55%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #555;
	visibility: hidden;
	z-index: 2;
}
.dot-back03{
	position: absolute;
	top: 55%;
	left: 15%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #333;
	visibility: hidden;
	z-index: 2;
}

.dot-back04{
	position: absolute;
	top: 55%;
	left: 55%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #000;
	visibility: hidden;
	z-index: 2;
}

.dot-back-zindex{
	z-index: 1;
}

ul li.dot-ll:first-child{	
	position: absolute;
	top: 15%;
	left: 15%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #111;
	z-index: 6;
}

ul li.dot-ll:nth-child(2){	
	position:absolute;
	top: 15%;
	left: 55%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #555;
	z-index: 6;
}

ul li.dot-ll:nth-child(3){	
	position: absolute;
	top: 55%;
	left: 15%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #333;
	z-index: 6;
}

ul li.dot-ll:nth-child(4){	
	position: absolute;
	top: 55%;
	left: 55%;
	border-radius: 50%;
	transform-origin: 50% 50%;
	width: 30%;
	height: 30%;
	background: #000;
	z-index: 6;
}

/* 9 ボーダークオーター */
.circlell2{
	width: 200%;
	height: 200%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	top: 0;
	left: -100%;
}
.bar-beside3{
	width: 100%;
	height: 5%;
	position: absolute;
	opacity: 0;
}
ul li.bar-beside3:first-child{
	top: 0%;
	background: #111;
}
ul li.bar-beside3:nth-child(2){
	top: 5%;
	background: #555;
}
ul li.bar-beside3:nth-child(3){
	top: 10%;
	background: #000;
}
ul li.bar-beside3:nth-child(4){
	top: 15%;
	background: #222;
}
ul li.bar-beside3:nth-child(5){
	top: 20%;
	background: #000;
}
ul li.bar-beside3:nth-child(6){
	top: 25%;
	background: #333;
}
ul li.bar-beside3:nth-child(7){
	top: 30%;
	background: #222;
}
ul li.bar-beside3:nth-child(8){
	top: 35%;
	background: #111;
}
ul li.bar-beside3:nth-child(9){
	top: 40%;
	background: #333;
}
ul li.bar-beside3:nth-child(10){
	top: 45%;
	background: #000;
}

/* 10 ドット9 */
.dot-s02{
	width: 0%;
	height: 0%;
	border-radius: 50%;
	position: absolute;
	overflow: hidden;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	z-index: 5;
}
ul li.dot-s02:first-child{
	background: #444;
	top: 25%;
	left: 50%;
}
ul li.dot-s02:nth-child(2){
	background: #555;
	top: 50%;
	left: 25%;
}
ul li.dot-s02:nth-child(3){
	background: #222;
	top: 50%;
	left: 75%;
}
ul li.dot-s02:nth-child(4){
	background: #555;
	top: 75%;
	left: 50%;
}
ul li.dot-s02:nth-child(5){
	background: #222;
	top: 50%;
	left: 50%;
}
ul li.dot-s02:nth-child(6){
	background: #222;
	top: 25%;
	left: 25%;
}
ul li.dot-s02:nth-child(7){
	background: #111;
	top: 25%;
	left: 75%;
}
ul li.dot-s02:nth-child(8){
	background: #222;
	top: 75%;
	left: 25%;
}
ul li.dot-s02:last-child{
	background:#111;
	top: 75%;
	left: 75%;
}
.dotsbox{
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0%;
	left: 0%;
}

/* 11 グリッド9 */
.grids9-wrapper {
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    gap: 0em;
}
.grids9{
	opacity: 0;	
}
ul li.grids9:first-child {
  background: #111;
}
ul li.grids9:nth-child(2) {
  background: #333;
}
ul li.grids9:nth-child(3) {
  background: #000;
}
ul li.grids9:nth-child(4) {
  background: #222;
}
ul li.grids9:nth-child(5) {
  background: #444;
}
ul li.grids9:nth-child(6) {
  background: #555;
}
ul li.grids9:nth-child(7) {
  background: #222;
}
ul li.grids9:nth-child(8) {
  background: #333;
}
ul li.grids9:last-child {
  background: #000;
}

/* 12 円 */
.duct2{
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	border-radius: 50%;
	transform-origin: 50% 50%;
}

ul li.duct2:first-child{
	width: 100%;
	height: 100%;
	background: #111;
}

ul li.duct2:nth-child(2){
	border-radius: 50%;
	width: 80%;
	height: 80%;
	background: #444;
}

ul li.duct2:nth-child(3){
	width: 60%;
	height: 60%;
	background: #000;
}

ul li.duct2:last-child{
	width: 40%;
	height: 40%;
	background: #333;
}

/* 13 トライアングル大 */
.tri-l{
	width: 100%;
	height: 100%;
	position: absolute;
	transform-origin:50% 50%;
}
ul li.tri-l:first-child{
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);	
}
.tri-in01{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #000;
	transform: translate(0, 50%);
}
ul li.tri-l:nth-child(2){
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
}
.tri-in02{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #222;
	transform: translate(-50%, 0);
}
ul li.tri-l:nth-child(3){
	
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	
}
.tri-in03{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #444;
	top:0;
	transform: translate(0, -50%);
}
ul li.tri-l:nth-child(4){
	
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);

}
.tri-in04{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: #333;
	transform: translate(50%, 0);
}

/* 14 ドット5 */
.dot-s2{
	width: 0%;
	height: 0%;
	position: absolute;
	border-radius: 50%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}
ul li.dot-s2:first-child{
	background: #000;
	top: 50%;
	left: 50%;
}
ul li.dot-s2:nth-child(2){
	background: #222;
	top: 25%;
	left: 25%;
}
ul li.dot-s2:nth-child(3){
	background: #111;
	top: 25%;
	left: 75%;
}
ul li.dot-s2:nth-child(4){
	background: #333;
	top: 75%;
	left: 25%;
}
ul li.dot-s2:last-child{
	background: #444;
	top: 75%;
	left: 75%;
}

/* 15 トライアングルウィンドウ */
.tri-win{
	position: absolute;
	opacity: 0;
}

ul li.tri-win:first-child{
	width: 50%;
	height: 50%;
	left: 0;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,50% 100%);
}
ul li.tri-win:nth-child(2){
	width: 50%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #444;
	clip-path: polygon(0% 100%, 100% 100% ,50% 0%);
}
ul li.tri-win:nth-child(3){
	width: 25%;
	height: 50%;
	left: 0;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win:nth-child(4){
	width: 25%;
	height: 50%;
	left: 25%;
	top: 0;
	background: #333;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win:nth-child(5){
	width: 25%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
ul li.tri-win:nth-child(6){
	width: 25%;
	height: 50%;
	left: 25%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
ul li.tri-win:nth-child(7){
	width: 50%;
	height: 50%;
	left: 50%;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,50% 100%);
}
ul li.tri-win:nth-child(8){
	width: 50%;
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #222;
	clip-path: polygon(0% 100%, 100% 100% ,50% 0%);
}
ul li.tri-win:nth-child(9){
	width: 25%;
	height: 50%;
	left: 50%;
	top: 0;
	background: #444;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win:nth-child(10){
	width: 25%;
	height: 50%;
	left: 75%;
	top: 0;
	background: #000;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win:nth-child(11){
	width: 25%;
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
ul li.tri-win:nth-child(12){
	width: 25%;
	height: 50%;
	left: 75%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}

/* 16 クオーター */
.circle-l012{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #000;
	position: absolute;
	top: 100%;
	left: 100%;
	z-index: 3;
	transform-origin: bottom right;
}
.circle-l022{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #222;
	position: absolute;
	top: -100%;
	left: -100%;
	z-index: 1;
	transform-origin: top left;
}
.circle-s012{
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background: #333;
	position: absolute;
	overflow: hidden;
	top: 100%;
	left: 100%;
	z-index: 4;
	transform-origin: bottom right;
}

/* 17 ファン4 */
.fanl{
	width: 100%;
	height: 100%;
	position: absolute;
	transform-origin:50% 50%;
	opacity: 0;
}
ul li.fanl:first-child{
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #222;
}
ul li.fanl:nth-child(2){
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #333;
}
ul li.fanl:nth-child(3){
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #111;
}
ul li.fanl:nth-child(4){
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #000;
}

/* 18 ドット16 */
.dot-ss{
	width: 16%;
	height: 16%;
	border-radius: 50%;
	position: absolute;
	opacity: 0;
}
ul li.dot-ss:first-child{
	background: #111;
	top: 9%;
	left: 9%;
}
ul li.dot-ss:nth-child(5){
	background: #111;
	top: 9%;
	left: 31%;
}
ul li.dot-ss:nth-child(12){
	background: #000;
	top: 9%;
	left: 53%;
}
ul li.dot-ss:nth-child(4){
	background: #111;
	top: 9%;
	left: 75%;
}
ul li.dot-ss:nth-child(15){
	background: #111;
	top: 31%;
	left: 9%;
}
ul li.dot-ss:nth-child(6){
	background: #000;
	top: 31%;
	left: 31%;
}
ul li.dot-ss:nth-child(10){
	background: #000;
	top: 31%;
	left: 53%;
}
ul li.dot-ss:nth-child(9){
	background: #111;
	top: 31%;
	left: 75%;
}
ul li.dot-ss:nth-child(8){
	background: #111;
	top: 53%;
	left: 9%;
}
ul li.dot-ss:nth-child(7){
	background: #000;
	top: 53%;
	left: 31%;
}
ul li.dot-ss:nth-child(11){
	background: #000;
	top: 53%;
	left: 53%;
}
ul li.dot-ss:nth-child(3){
	background: #222;
	top: 53%;
	left: 75%;
}
ul li.dot-ss:nth-child(13){
	background: #111;
	top: 75%;
	left: 9%;
}
ul li.dot-ss:nth-child(14){
	background: #000;
	top: 75%;
	left: 31%;
}
ul li.dot-ss:nth-child(2){
	background: #111;
	top: 75%;
	left: 53%;
}
ul li.dot-ss:nth-child(16){
	background: #000;
	top: 75%;
	left: 75%;
}
.dot-ssbox{
	width: 100%;
	height: 100%;
	background: #333;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -1;
	opacity: 0;
}

/* 19 ハシゴ */
.hashigo-l{
	position: absolute;
	top:0;
	left: 0;
	width: 20%;
	height: 100%;
	background: #000;
	z-index: 2;
	opacity: 0;
}
.hashigo-r{
	position: absolute;
	top:0;
	right: 0;
	width: 20%;
	height: 100%;
	background: #111;
	z-index: 2;
	opacity: 0;
}
.hashigo-y{
	position: absolute;
	width: 100%;
	height: 20%;
	left: 0;
	opacity: 0;
}
.hashigo-y:first-child{
	top: 0%;
	background: #444;
}
.hashigo-y:nth-child(2){
	top: 40%;
	background: #333;
}
.hashigo-y:nth-child(3){
	top: 80%;
	background: #222;
}

/* 20 ボーダークオーター */
.circlell{
	width: 200%;
	height: 200%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
}
.bar-beside2{
	width: 0%;
	height: 5%;
	position: absolute;
	opacity:0;
}
ul li.bar-beside2:first-child{
	top: 0%;
	background: #111;	
}
ul li.bar-beside2:nth-child(2){
	top: 5%;
	background: #555;
}
ul li.bar-beside2:nth-child(3){
	top: 10%;
	background: #000;
}
ul li.bar-beside2:nth-child(4){
	top: 15%;
	background: #222;
}
ul li.bar-beside2:nth-child(5){
	top: 20%;
	background: #000;
}
ul li.bar-beside2:nth-child(6){
	top: 25%;
	background: #333;
}
ul li.bar-beside2:nth-child(7){
	top: 30%;
	background: #222;
}
ul li.bar-beside2:nth-child(8){
	top: 35%;
	background: #111;
}
ul li.bar-beside2:nth-child(9){
	top: 40%;
	background: #333;
}
ul li.bar-beside2:nth-child(10){
	top: 45%;
	background: #000;
}

/* 21 ストライプダクト */
.stripeduct-box{
	width: 100%;
	height: 100%;
	background: #222;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -10;
	opacity: 0;
}
.stripeduct{
	width: 10%;
	height: 70%;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	z-index: 5;
	background: #111;
	opacity: 0;
}
ul li.stripeduct:first-child{	
	top: 50%;
	left: 20%;
}
ul li.stripeduct:nth-child(2){
	top: 50%;
	left: 35%;
}
ul li.stripeduct:nth-child(3){
	top: 50%;
	left: 50%;
}
ul li.stripeduct:nth-child(4){
	top: 50%;
	left: 65%;
}
ul li.stripeduct:nth-child(5){
	top: 50%;
	left: 80%;
}

/* 22 ウィンドウ */
.window01{
	width: 40%;
	height: 0%;
	position: absolute;
	top: 0%;
	left: 0%;
	background: #111;
}
.window02{
	width: 40%;
	height: 0%;
	position:absolute;
	top: 0%;
	left: 60%;
	background: #555;
}

/* 23 トライアングルボックス */
.tri-m01{
	width: 50%;
	height: 50%;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%, 100% 0%);
	transform-origin:50% 50%;
	overflow:hidden;
}
.tri-min01{
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(0% 0%,100% 0% ,100% 100%);
	background: #000;
	transform-origin:50% 50%;
	transform: translate(-100%, -100%);
} 
.tri-m02{
	width: 50%;
	height: 50%;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%, 100% 0%);
	transform-origin:50% 50%;
	overflow:hidden;
}
.tri-min02{
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
	background: #555;
	transform-origin:50% 50%;
	transform: translate(100%, 100%);
}
.tri-m03{
	width: 50%;
	height: 50%;
	bottom: 0;
	right: 0;
	position: absolute;
	clip-path: polygon(0% 0%,100% 0% ,100% 100%, 0% 100%);
	transform-origin:50% 50%;
}
.tri-min03{
	width: 100%;
	height: 100%;
	bottom: 0;
	right: 0;
	position: absolute;
	clip-path: polygon(0% 0%,100% 0% ,100% 100%);
	background: #222;
	transform-origin:50% 50%;
	transform: translate(-100%, -100%);
}
.tri-m04{
	width: 50%;
	height: 50%;
	bottom: 0;
	right: 0;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
	transform-origin:50% 50%;
}
.tri-min04{
	width: 100%;
	height: 100%;
	bottom: 0;
	right: 0;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
	background: #333;
	transform-origin:50% 50%;
	transform: translate(100%, 100%);
}
.box-ss01{
	width: 50%;
	height: 50%;
	left: 50%;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%, 100% 0%);
	transform-origin:50% 50%;
}
.box-ssin01{
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%, 100% 0%);
	background: #111;
	transform-origin:50% 50%;
	transform: translate(100%, -100%);
}
.box-ss02{
	width: 50%;
	height: 50%;
	bottom: 0;
	position: absolute;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%, 100% 0%);
	transform-origin:50% 50%;
}
.box-ssin02{
	width: 100%;
	height: 100%;
	bottom: 0;
	position: absolute;
	background: #444;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%, 100% 0%);
	transform-origin:50% 50%;
	transform: translate(-100%, 100%);
}

/* 24 ウッド */
.wood{
	height: 20%;
	position: absolute;
	opacity: 0;
}
ul li.wood:first-child{
	width: 100%;
	top: 0%;
	background: #111;
}
ul li.wood:nth-child(2){
	width: 50%;
	top: 20%;
	background: #555;
}
ul li.wood:nth-child(3){
	width: 50%;
	top: 20%;
	left: 50%;
	background: #222;
}
ul li.wood:nth-child(4){
	width: 100%;
	top: 40%;
	background: #000;
}
ul li.wood:nth-child(5){
	width: 50%;
	top: 60%;
	background: #333;
}
ul li.wood:nth-child(6){
	width: 50%;
	top: 60%;
	left: 50%;
	background: #444;
}
ul li.wood:nth-child(7){
	width: 100%;
	top: 80%;
	background: #111;
}

/* 25 ファンLL逆 */
.fanlll-r{
	width: 200%;
	height: 200%;
	position: absolute;
	top: -100%;
	transform-origin: 50% 50%;
	border-radius: 50%;
	opacity: 0;
}
ul li.fanlll-r:first-child{
	clip-path: polygon(0% 50%,0% 40% ,50% 50%);
	background: #111;
	transform: rotate(270deg);
}
ul li.fanlll-r:nth-child(2){
	clip-path: polygon(0% 40%,0% 28% ,50% 50%);
	background: #555;
	transform: rotate(270deg);
}
ul li.fanlll-r:nth-child(3){
	clip-path: polygon(0% 28%,0% 11% ,50% 50%);
	background: #222;
	transform: rotate(270deg);
}
ul li.fanlll-r:nth-child(6){
	clip-path: polygon(0% 11%,11% 0% ,50% 50%);
	background: #333;
	transform: rotate(270deg);
}
ul li.fanlll-r:nth-child(7){
	clip-path: polygon(11% 0%,28% 0% ,50% 50%);
	background: #111;
	transform: rotate(270deg);
}
ul li.fanlll-r:nth-child(9){
	clip-path: polygon(28% 0%,40% 0% ,50% 50%);
	background: #222;
	transform: rotate(270deg);
}
ul li.fanlll-r:nth-child(10){
	clip-path: polygon(40% 0%,50% 0% ,50% 50%);
	background: #444;
	transform: rotate(270deg);
}

/* 26 網6 */
.bar6{
	width: 180%;
	height: 20%;
	position: absolute;
	transform-origin: 50% 50%;
	opacity: 0;
}
ul li.bar6:first-child{
	background: #000;
	transform: rotate(45deg);
	top: 40%;
	left: -40%;
}
ul li.bar6:nth-child(2){
	background: #555;
	transform: rotate(315deg);
	top: 40%;
	left: -40%;
}
ul li.bar6:nth-child(3){
	background: #111;
	transform: rotate(45deg);
	top: 40%;
	left: 10%;
}
ul li.bar6:nth-child(4){
	background: #333;
	transform: rotate(315deg);
	top: 40%;
	left: 10%;
}
ul li.bar6:nth-child(5){
	background: #111;
	transform: rotate(45deg);
	top: 40%;
	left: -90%;
}
ul li.bar6:last-child{
	background: #444;
	transform: rotate(315deg);
	top: 40%;
	left: -90%;
}

/* 27 グリッド16-2*/
.loadbox28{
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 0em;
}

.loadbox28 .grids{
	opacity: 0;	
}

.loadbox28 li:first-child {
  background: #000;
}

.loadbox28 li:nth-child(2) {
  background: #444;
}

.loadbox28 li:nth-child(3) {
  background: #111;
}

.loadbox28 li:nth-child(4) {
  background: #333;
}

.loadbox28 li:nth-child(5) {
  background: #222;
}

.loadbox28 li:nth-child(6) {
  background: #111;
}

.loadbox28 li:nth-child(7) {
  background: #555;
}

.loadbox28 li:nth-child(8) {
  background: #000;
}

.loadbox28 li:nth-child(9) {
  background: #444;
}

.loadbox28 li:nth-child(10) {
  background: #333;
}

.loadbox28 li:nth-child(11) {
  background: #111;
}

.loadbox28 li:nth-child(12) {
  background: #222;
}

.loadbox28 li:nth-child(13) {
  background: #000;
}

.loadbox28 li:nth-child(14) {
  background: #111;
}

.loadbox28 li:nth-child(15) {
  background: #222;
}

.loadbox28 li:last-child {
  background: #555;
}

/* 28 トライアングルウィンドウ横 */
.tri-winy{
	position: absolute;
	width: 50%;
	opacity: 0;
}
.tri-winy:first-child{
	height: 50%;
	left: 0;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 50% ,0% 100%);
}
.tri-winy:nth-child(2){
	height: 50%;
	left: 50%;
	top: 0;
	background: #444;
	clip-path: polygon(100% 0%, 100% 100% ,0% 50%);
}
.tri-winy:nth-child(3){
	height: 25%;
	left: 0;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
.tri-winy:nth-child(4){
	height: 25%;
	left: 0;
	top: 25%;
	background: #333;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}

.tri-winy:nth-child(5){
	height: 25%;
	left: 50%;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
.tri-winy:nth-child(6){
	height: 25%;
	left: 50%;
	top: 25%;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100%,100% 100%);
}
.tri-winy:nth-child(7){
	height: 50%;
	left: 0%;
	top: 50%;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 50%);
}
.tri-winy:nth-child(8){
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #222;
	clip-path: polygon(100% 0%, 100% 100% ,0% 50%);
}
.tri-winy:nth-child(9){
	height: 25%;
	left: 0%;
	top: 50%;
	background: #444;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
.tri-winy:nth-child(10){
	height: 25%;
	left: 0%;
	top: 75%;
	background: #000;
	clip-path: polygon(100% 0%, 100% 100% ,0% 100%);
}
.tri-winy:nth-child(11){
	height: 25%;
	left: 50%;
	top: 50%;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
.tri-winy:nth-child(12){
	height: 25%;
	left: 50%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}

/* 29 網4 */
.bar4{
	width: 180%;
	height: 20%;
	position: absolute;
	transform-origin: 50% 50%;
	top: 40%;
	opacity: 0;
}
ul li.bar4:first-child{
	background: #222;
	transform: rotate(45deg);
	left: -10%;
}
ul li.bar4:nth-child(2){
	background: #000;
	transform: rotate(315deg);
	left: -10%;
}
ul li.bar4:nth-child(3){
	background: #333;
	transform: rotate(45deg);
	left: -70%;
}
ul li.bar4:nth-child(4){
	background: #111;
	transform: rotate(315deg);
	left: -70%;
}

/* 30 クロスボックス2 */
.box-l2{
	width: 0%;
	height: 0%;
	background: #333;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	top: 50%;
	left: 50%;
	transform-origin:top left ;
	opacity: 0;
}
.box-s2{
	width:0%;
	height: 0%;
	background: #444;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	top: 50%;
	left: 50%;
	transform-origin:top left ;
}
.bar-bslash2{
	width: 160%;
	height: 20%;
	background: #222;
	position: absolute;
	transform-origin:50% 50%;
	transform: rotate(90deg);
	top:40%;
	left:-30%;
	opacity:0;
}
.bar-slash2{
	width: 160%;
	height: 20%;
	background: #111;
	position: absolute;
	transform-origin:50% 50%;
	transform: rotate(90deg);
	top:40%;
	left:-30%;
	opacity:0;
}

/* 31 ストライプ2 */
.bar-vertical2{
	width: 20%;
	height: 100%;
	position: absolute;
	opacity: 0;
}
ul li.bar-vertical2:first-child{
	top: 0%;
	background: #333;	
}
ul li.bar-vertical2:nth-child(2){
	left: 20%;
	background: #555;
}
ul li.bar-vertical2:nth-child(3){
	left: 40%;
	background: #111;
}
ul li.bar-vertical2:nth-child(4){
	left: 60%;
	background: #222;
}
ul li.bar-vertical2:nth-child(5){
	left: 80%;
	background: #000;
}

/* 32 ドット9-2*/
.dot-s022{
	width: 0%;
	height: 0%;
	border-radius: 50%;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}
ul li.dot-s022:first-child{
	background: #444;
	top: 25%;
	left: 50%;
}
ul li.dot-s022:nth-child(2){
	background: #555;
	top: 50%;
	left: 25%;
}
ul li.dot-s022:nth-child(3){
	background: #222;
	top: 50%;
	left: 75%;
}
ul li.dot-s022:nth-child(4){
	background: #555;
	top: 75%;
	left: 50%;
}
ul li.dot-s022:nth-child(5){
	background: #000;
	top: 50%;
	left: 50%;
}
ul li.dot-s022:nth-child(6){
	background: #222;
	top: 25%;
	left: 25%;
}
ul li.dot-s022:nth-child(7){
	background: #111;
	top: 25%;
	left: 75%;
}
ul li.dot-s022:nth-child(8){
	background: #222;
	top: 75%;
	left: 25%;
}
ul li.dot-s022:last-child{
	background:#111;
	top: 75%;
	left: 75%;
}

/* 33 ウッド2*/
.wood2{
	height: 20%;
	position: absolute;
	opacity: 0;
}
ul li.wood2:first-child{
	width: 100%;
	top: 0%;
	background: #000;
}
ul li.wood2:nth-child(2){
	width: 50%;
	top: 20%;
	background: #333;
}
ul li.wood2:nth-child(3){
	width: 50%;
	top: 20%;
	left: 50%;
	background: #555;
}
ul li.wood2:nth-child(4){
	width: 100%;
	top: 40%;
	background: #111;
}
ul li.wood2:nth-child(5){
	width: 50%;
	top: 60%;
	background: #000;
}
ul li.wood2:nth-child(6){
	width: 50%;
	top: 60%;
	left: 50%;
	background: #222;
}
ul li.wood2:nth-child(7){
	width: 100%;
	top: 80%;
	background: #111;
}

/* 34 トライアングルウィンドウ */
.tri-win2{
	position: absolute;
	opacity: 0;
}

ul li.tri-win2:first-child{
	width: 50%;
	height: 50%;
	left: 0;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,50% 100%);
}
ul li.tri-win2:nth-child(2){
	width: 50%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #444;
	clip-path: polygon(0% 100%, 100% 100% ,50% 0%);
}
ul li.tri-win2:nth-child(3){
	width: 25%;
	height: 50%;
	left: 0;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win2:nth-child(4){
	width: 25%;
	height: 50%;
	left: 25%;
	top: 0;
	background: #333;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win2:nth-child(5){
	width: 25%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
ul li.tri-win2:nth-child(6){
	width: 25%;
	height: 50%;
	left: 25%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
ul li.tri-win2:nth-child(7){
	width: 50%;
	height: 50%;
	left: 50%;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,50% 100%);
}
ul li.tri-win2:nth-child(8){
	width: 50%;
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #222;
	clip-path: polygon(0% 100%, 100% 100% ,50% 0%);
}
ul li.tri-win2:nth-child(9){
	width: 25%;
	height: 50%;
	left: 50%;
	top: 0;
	background: #444;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win2:nth-child(10){
	width: 25%;
	height: 50%;
	left: 75%;
	top: 0;
	background: #000;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win2:nth-child(11){
	width: 25%;
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
ul li.tri-win2:nth-child(12){
	width: 25%;
	height: 50%;
	left: 75%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}

/* 35 ボーダークオーター */
.circlell3{
	width: 200%;
	height: 200%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	top: 0;
	left: -100%;
}
.bar-beside4{
	width: 100%;
	height: 5%;
	position: absolute;
	opacity: 0;
}
ul li.bar-beside4:first-child{
	top: 0%;
	background: #111;
}
ul li.bar-beside4:nth-child(2){
	top: 5%;
	background: #555;
}
ul li.bar-beside4:nth-child(3){
	top: 10%;
	background: #000;
}
ul li.bar-beside4:nth-child(4){
	top: 15%;
	background: #222;
}
ul li.bar-beside4:nth-child(5){
	top: 20%;
	background: #000;
}
ul li.bar-beside4:nth-child(6){
	top: 25%;
	background: #333;
}
ul li.bar-beside4:nth-child(7){
	top: 30%;
	background: #222;
}
ul li.bar-beside4:nth-child(8){
	top: 35%;
	background: #111;
}
ul li.bar-beside4:nth-child(9){
	top: 40%;
	background: #333;
}
ul li.bar-beside4:nth-child(10){
	top: 45%;
	background: #000;
}

/* 36 グリッド9-2*/
.grids9-2{
	opacity: 0;	
}

ul li.grids9-2:first-child {
  background: #000;
}

ul li.grids9-2:nth-child(2) {
  background: #333;
}

ul li.grids9-2:nth-child(3) {
  background: #444;
}

ul li.grids9-2:nth-child(4) {
  background: #111;
}

ul li.grids9-2:nth-child(5) {
  background: #444;
}

ul li.grids9-2:nth-child(6) {
  background: #000;
}

ul li.grids9-2:nth-child(7) {
  background: #222;
}

ul li.grids9-2:nth-child(8) {
  background: #333;
}

ul li.grids9-2:last-child {
  background: #444;
}

/* 37 ドット16-2 */
.dot-ss2{
	width: 16%;
	height: 16%;
	border-radius: 50%;
	position: absolute;
	opacity: 0
}
ul li.dot-ss2:first-child{
	top: 9%;
	left: 9%;
	background: #222;
}
ul li.dot-ss2:nth-child(13){
	top: 9%;
	left: 31%;
	background: #333;
}
ul li.dot-ss2:nth-child(5){
	top: 9%;
	left: 53%;
	background: #222;
}
ul li.dot-ss2:nth-child(16){
	top: 9%;
	left: 75%;
	background: #444;
}
ul li.dot-ss2:nth-child(3){
	top: 31%;
	left: 9%;
	background: #222;
}
ul li.dot-ss2:nth-child(6){
	top: 31%;
	left: 31%;
	background: #222;
}
ul li.dot-ss2:nth-child(7){
	top: 31%;
	left: 53%;
	background: #333;
}
ul li.dot-ss2:nth-child(11){
	top: 31%;
	left: 75%;
	background: #222;
}
ul li.dot-ss2:nth-child(9){
	top: 53%;
	left: 9%;
	background: #222;
}
ul li.dot-ss2:nth-child(10){
	top: 53%;
	left: 31%;
	background: #333;
}
ul li.dot-ss2:nth-child(8){
	top: 53%;
	left: 53%;
	background: #444;
}
ul li.dot-ss2:nth-child(12){
	top: 53%;
	left: 75%;
	background: #222;
}
ul li.dot-ss2:nth-child(2){
	top: 75%;
	left: 9%;
	background: #333;
}
ul li.dot-ss2:nth-child(14){
	top: 75%;
	left: 31%;
	background: #222;
}
ul li.dot-ss2:nth-child(15){
	top: 75%;
	left: 53%;
	background: #222;
}
ul li.dot-ss2:nth-child(4){
	top: 75%;
	left: 75%;
	background: #222;
}
.dot-ss2box{
	width: 100%;
	height: 100%;
	background: #111;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -1;
	opacity: 0;
}

/* 38 円 */
.duct{
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	border-radius: 50%;
	transform-origin: 50% 50%;
}
ul li.duct:first-child{
	width: 100%;
	height: 100%;
	background: #222;
}
ul li.duct:nth-child(2){
	border-radius: 50%;
	width: 80%;
	height: 80%;
	background: #333;
}
ul li.duct:nth-child(3){
	width: 60%;
	height: 60%;
	background: #000;
}
ul li.duct:last-child{
	width: 40%;
	height: 40%;
	background: #111;
}

/* 39 トライアングル小 */
.tribox2{
	width:100px;
	height:auto;
	aspect-ratio: 1 /1;
}
.tri-s2{
	opacity: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	transform-origin: 50% 50%;
}
ul li.tri-s2:first-child{
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #000;
}
ul li.tri-s2:nth-child(2){
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #333;
}
ul li.tri-s2:nth-child(3){
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #222;
}
ul li.tri-s2:nth-child(4){
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #555;
}
ul li.tri-s2:nth-child(5){
	left: 50%;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #111;
}
ul li.tri-s2:nth-child(6){
	left: 50%;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #222;
}
ul li.tri-s2:nth-child(7){
	left: 50%;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #555;
}
ul li.tri-s2:nth-child(8){
	left: 50%;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #444;
}
ul li.tri-s2:nth-child(9){
	top: 50%;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #333;
}
ul li.tri-s2:nth-child(10){
	top: 50%;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #111;
}
ul li.tri-s2:nth-child(11){
	top: 50%;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #555;
}
ul li.tri-s2:nth-child(12){
	top: 50%;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #222;
}
ul li.tri-s2:nth-child(13){
	top: 50%;
	left: 50%;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #111;
}
ul li.tri-s2:nth-child(14){
	top: 50%;
	left: 50%;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #000;
}
ul li.tri-s2:nth-child(15){
	top: 50%;
	left: 50%;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #444;
}
ul li.tri-s2:nth-child(16){
	top: 50%;
	left: 50%;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #222;
}

/* 40 ファンLL-2 */
.fanlll3{
	width: 200%;
	height: 200%;
	position: absolute;
	transform-origin:50% 50%;
	border-radius: 50%;
	opacity: 0;
}
ul li.fanlll3:first-child{
	clip-path: polygon(0% 50%,0% 40% ,50% 50%);
	background: #111;	
}
ul li.fanlll3:nth-child(2){
	clip-path: polygon(0% 40%,0% 28% ,50% 50%);
	background: #555;
}
ul li.fanlll3:nth-child(3){
	clip-path: polygon(0% 28%,0% 11% ,50% 50%);
	background: #222;
}
ul li.fanlll3:nth-child(6){
	clip-path: polygon(0% 11%,11% 0% ,50% 50%);
	background: #333;
}
ul li.fanlll3:nth-child(7){
	clip-path: polygon(11% 0%,28% 0% ,50% 50%);
	background: #111;
}
ul li.fanlll3:nth-child(9){
	clip-path: polygon(28% 0%,40% 0% ,50% 50%);
	background: #222;
}
ul li.fanlll3:nth-child(10){
	clip-path: polygon(40% 0%,50% 0% ,50% 50%);
	background: #444;
}

/* 41 ストライプダクト */
.stripeduct-box2{
	width: 100%;
	height: 100%;
	background: #111;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -10;
	opacity: 0;
}
.stripeduct2{
	width: 10%;
	height: 70%;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	z-index: 5;
	background: #222;
	opacity: 0;
}
ul li.stripeduct2:first-child{	
	top: 50%;
	left: 20%;
}
ul li.stripeduct2:nth-child(2){
	top: 50%;
	left: 35%;
}
ul li.stripeduct2:nth-child(3){
	top: 50%;
	left: 50%;
}
ul li.stripeduct2:nth-child(4){
	top: 50%;
	left: 65%;
}
ul li.stripeduct2:nth-child(5){
	top: 50%;
	left: 80%;
}

/* 42 網4 */
.bar4-2{
	width: 180%;
	height: 20%;
	position: absolute;
	transform-origin: 50% 50%;
	top: 40%;
	opacity: 0;
}
ul li.bar4-2:first-child{
	background: #222;
	transform: rotate(45deg);
	left: -10%;
}
ul li.bar4-2:nth-child(2){
	background: #000;
	transform: rotate(315deg);
	left: -10%;
}
ul li.bar4-2:nth-child(3){
	background: #333;
	transform: rotate(45deg);
	left: -70%;
}
ul li.bar4-2:nth-child(4){
	background: #111;
	transform: rotate(315deg);
	left: -70%;
}

/* 43 クオーター2 */
.circle-l01{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #222;
	position: absolute;
	top: 100%;
	left: 100%;
	z-index: 3;
	transform-origin: bottom right;
}
.circle-l02{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #000;
	position: absolute;
	top: -100%;
	left: -100%;
	z-index: 1;
	transform-origin: top left;
}
.circle-s01{
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background: #333;
	position: absolute;
	overflow: hidden;
	top: 100%;
	left: 100%;
	z-index: 4;
	transform-origin: bottom right;
}

/* 44 ファンLL逆 */
.fanlll-r2{
	width: 200%;
	height: 200%;
	position: absolute;
	top: -100%;
	transform-origin: 50% 50%;
	border-radius: 50%;
	opacity: 0;
}
ul li.fanlll-r2:first-child{
	clip-path: polygon(0% 50%,0% 40% ,50% 50%);
	background: #111;
	transform: rotate(270deg);
}
ul li.fanlll-r2:nth-child(2){
	clip-path: polygon(0% 40%,0% 28% ,50% 50%);
	background: #555;
	transform: rotate(270deg);
}
ul li.fanlll-r2:nth-child(3){
	clip-path: polygon(0% 28%,0% 11% ,50% 50%);
	background: #222;
	transform: rotate(270deg);
}
ul li.fanlll-r2:nth-child(6){
	clip-path: polygon(0% 11%,11% 0% ,50% 50%);
	background: #333;
	transform: rotate(270deg);
}
ul li.fanlll-r2:nth-child(7){
	clip-path: polygon(11% 0%,28% 0% ,50% 50%);
	background: #111;
	transform: rotate(270deg);
}
ul li.fanlll-r2:nth-child(9){
	clip-path: polygon(28% 0%,40% 0% ,50% 50%);
	background: #222;
	transform: rotate(270deg);
}
ul li.fanlll3:nth-child(10){
	clip-path: polygon(40% 0%,50% 0% ,50% 50%);
	background: #444;
	transform: rotate(270deg);
}

/* 45 ハシゴ */
.hashigo-l2{
	position: absolute;
	top:0;
	left: 0;
	width: 20%;
	height: 100%;
	background: #000;
	z-index: 2;
}
.hashigo-r2{
	position: absolute;
	top:0;
	right: 0;
	width: 20%;
	height: 100%;
	background: #111;
	z-index: 2;
}
.hashigo-y2{
	position: absolute;
	width: 100%;
	height: 20%;
	left: 0;
}
.hashigo-y2:first-child{
	top: 0%;
	background: #444;
}
.hashigo-y2:nth-child(2){
	top: 40%;
	background: #333;
}
.hashigo-y2:nth-child(3){
	top: 80%;
	background: #222;
}

/* 46 トライアングルウィンドウ横 */
.tri-winy2{
	position: absolute;
	width: 50%;
	opacity: 0;
}
.tri-winy2:first-child{
	height: 50%;
	left: 0;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 50% ,0% 100%);
}
.tri-winy2:nth-child(2){
	height: 50%;
	left: 50%;
	top: 0;
	background: #444;
	clip-path: polygon(100% 0%, 100% 100% ,0% 50%);
}
.tri-winy2:nth-child(3){
	height: 25%;
	left: 0;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
.tri-winy2:nth-child(4){
	height: 25%;
	left: 0;
	top: 25%;
	background: #333;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
.tri-winy2:nth-child(5){
	height: 25%;
	left: 50%;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
.tri-winy2:nth-child(6){
	height: 25%;
	left: 50%;
	top: 25%;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100%,100% 100%);
}
.tri-winy2:nth-child(7){
	height: 50%;
	left: 0%;
	top: 50%;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 50%);
}
.tri-winy2:nth-child(8){
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #222;
	clip-path: polygon(100% 0%, 100% 100% ,0% 50%);
}
.tri-winy2:nth-child(9){
	height: 25%;
	left: 0%;
	top: 50%;
	background: #444;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
.tri-winy2:nth-child(10){
	height: 25%;
	left: 0%;
	top: 75%;
	background: #000;
	clip-path: polygon(100% 0%, 100% 100% ,0% 100%);
}
.tri-winy2:nth-child(11){
	height: 25%;
	left: 50%;
	top: 50%;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
.tri-winy2:nth-child(12){
	height: 25%;
	left: 50%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}

/* 47 ドット6*/
ul li.dot-six:first-child{
	width: 23%;
	height: 23%;
	border-radius: 50%;
	background: #444;
	position:absolute;
	top: 23%;
	left: 34%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}

ul li.dot-six:nth-child(2){
	width: 23%;
	height: 23%;
	border-radius: 50%;
	background: #333;
	position:absolute;
	top: 23%;
	left: 66%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}

ul li.dot-six:nth-child(3){
	width: 23%;
	height: 23%;
	border-radius: 50%;
	background: #222;
	position:absolute;
	top: 50%;
	left: 34%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}

ul li.dot-six:nth-child(4){
	width: 23%;
	height: 23%;
	border-radius: 50%;
	background: #000;
	position:absolute;
	top: 50%;
	left: 66%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}

ul li.dot-six:nth-child(5){
	width: 23%;
	height: 23%;
	border-radius: 50%;
	background: #111;
	position:absolute;
	top: 77%;
	left: 34%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}

ul li.dot-six:nth-child(6){
	width: 23%;
	height: 23%;
	border-radius: 50%;
	background: #444;
	position:absolute;
	top: 77%;
	left: 66%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}

/* 48 ボーダークオーター */
.circlell3{
	width: 200%;
	height: 200%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	top: 0;
	left: -100%;
}
.bar-beside5{
	width: 100%;
	height: 5%;
	position: absolute;
	opacity: 1;
}
ul li.bar-beside5:first-child{
	top: 0%;
	background: #111;
}
ul li.bar-beside5:nth-child(2){
	top: 5%;
	background: #555;
}
ul li.bar-beside5:nth-child(3){
	top: 10%;
	background: #000;
}
ul li.bar-beside5:nth-child(4){
	top: 15%;
	background: #222;
}
ul li.bar-beside5:nth-child(5){
	top: 20%;
	background: #000;
}
ul li.bar-beside5:nth-child(6){
	top: 25%;
	background: #333;
}
ul li.bar-beside5:nth-child(7){
	top: 30%;
	background: #222;
}
ul li.bar-beside5:nth-child(8){
	top: 35%;
	background: #111;
}
ul li.bar-beside5:nth-child(9){
	top: 40%;
	background: #333;
}
ul li.bar-beside5:nth-child(10){
	top: 45%;
	background: #000;
}

/* 49 クオーター */
.circle-l013{
	width: 200%;
	height: 200%;
	border-radius: 50%;
	background: #222;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 1;
	transform-origin: bottom right;
}
.circle-l023{
	width: 200%;
	height: 200%;
	border-radius: 50%;
	background: #000;
	position: absolute;
	top: -100%;
	left: -100%;
	z-index: 2;
	transform-origin: top left;
}
.circle-s013{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #333;
	position: absolute;
	overflow: hidden;
	top: -50%;
	left: -50%;
	z-index: 3;
	transform-origin: bottom right;
}

/* 47 網6-2 */
.bar6-2{
	width: 180%;
	height: 20%;
	position: absolute;
	transform-origin: 50% 50%;
}
ul li.bar6-2:first-child{
	background: #000;
	transform: rotate(45deg);
	top: 40%;
	left: -40%;
}
ul li.bar6-2:nth-child(2){
	background: #555;
	transform: rotate(315deg);
	top: 40%;
	left: -40%;
}
ul li.bar6-2:nth-child(3){
	background: #111;
	transform: rotate(45deg);
	top: 40%;
	left: 10%;
}
ul li.bar6-2:nth-child(4){
	background: #333;
	transform: rotate(315deg);
	top: 40%;
	left: 10%;
}
ul li.bar6-2:nth-child(5){
	background: #111;
	transform: rotate(45deg);
	top: 40%;
	left: -90%;
}
ul li.bar6-2:last-child{
	background: #444;
	transform: rotate(315deg);
	top: 40%;
	left: -90%;
}

/*ファン2*/
ul li.fanl2:first-child{
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(0% 0%,100% 0% ,50% 50%);
	background: #222;
	transform-origin:50% 50%;
	opacity: 0;
}

ul li.fanl2:nth-child(2){
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(100% 0%,100% 100% ,50% 50%);
	background: #333;
	transform-origin:50% 50%;
	opacity: 0;
}

ul li.fanl2:nth-child(3){
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(100% 100%,0% 100% ,50% 50%);
	background: #111;
	transform-origin:50% 50%;
	opacity: 0;
}

ul li.fanl2:nth-child(4){
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(0% 0%,0% 100% ,50% 50%);
	background: #000;
	transform-origin:50% 50%;
	opacity: 0;
}

/* 51 ドット16 */
.dot-ss3{
	width: 16%;
	height: 16%;
	border-radius: 50%;
	position: absolute;
}
ul li.dot-ss3:first-child{
	background: #111;
	top: 9%;
	left: 9%;
}
ul li.dot-ss3:nth-child(2){
	background: #111;
	top: 9%;
	left: 31%;
}
ul li.dot-ss3:nth-child(3){
	background: #000;
	top: 9%;
	left: 53%;
}
ul li.dot-ss3:nth-child(4){
	background: #111;
	top: 9%;
	left: 75%;
}
ul li.dot-ss3:nth-child(5){
	background: #111;
	top: 31%;
	left: 9%;
}
ul li.dot-ss3:nth-child(6){
	background: #000;
	top: 31%;
	left: 31%;
}
ul li.dot-ss3:nth-child(7){
	background: #000;
	top: 31%;
	left: 53%;
}
ul li.dot-ss3:nth-child(8){
	background: #111;
	top: 31%;
	left: 75%;
}
ul li.dot-ss3:nth-child(9){
	background: #111;
	top: 53%;
	left: 9%;
}
ul li.dot-ss3:nth-child(10){
	background: #000;
	top: 53%;
	left: 31%;
}
ul li.dot-ss3:nth-child(11){
	background: #000;
	top: 53%;
	left: 53%;
}
ul li.dot-ss3:nth-child(12){
	background: #222;
	top: 53%;
	left: 75%;
}
ul li.dot-ss3:nth-child(13){
	background: #111;
	top: 75%;
	left: 9%;
}
ul li.dot-ss3:nth-child(14){
	background: #000;
	top: 75%;
	left: 31%;
}
ul li.dot-ss3:nth-child(15){
	background: #111;
	top: 75%;
	left: 53%;
}
ul li.dot-ss3:nth-child(16){
	background: #000;
	top: 75%;
	left: 75%;
}
.dot-ssbox3{
	width: 100%;
	height: 100%;
	background: #333;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -1;
}

/* 52 トライアングルウィンドウ3 */
.tri-win3{
	position: absolute;
}

ul li.tri-win3:first-child{
	width: 50%;
	height: 50%;
	left: 0;
	top: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,50% 100%);
}
ul li.tri-win3:nth-child(2){
	width: 50%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #444;
	clip-path: polygon(0% 100%, 100% 100% ,50% 0%);
}
ul li.tri-win3:nth-child(3){
	width: 25%;
	height: 50%;
	left: 0;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win3:nth-child(4){
	width: 25%;
	height: 50%;
	left: 25%;
	top: 0;
	background: #333;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win3:nth-child(5){
	width: 25%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
ul li.tri-win3:nth-child(6){
	width: 25%;
	height: 50%;
	left: 25%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}
ul li.tri-win3:nth-child(7){
	width: 50%;
	height: 50%;
	left: 50%;
	top: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,50% 100%);
}
ul li.tri-win3:nth-child(8){
	width: 50%;
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #222;
	clip-path: polygon(0% 100%, 100% 100% ,50% 0%);
}
ul li.tri-win3:nth-child(9){
	width: 25%;
	height: 50%;
	left: 50%;
	top: 0;
	background: #444;
	clip-path: polygon(0% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win3:nth-child(10){
	width: 25%;
	height: 50%;
	left: 75%;
	top: 0;
	background: #000;
	clip-path: polygon(100% 0%, 0% 100% ,100% 100%);
}
ul li.tri-win3:nth-child(11){
	width: 25%;
	height: 50%;
	left: 50%;
	bottom: 0;
	background: #000;
	clip-path: polygon(0% 0%, 100% 0% ,0% 100%);
}
ul li.tri-win3:nth-child(12){
	width: 25%;
	height: 50%;
	left: 75%;
	bottom: 0;
	background: #111;
	clip-path: polygon(0% 0%, 100% 0% ,100% 100%);
}

/* 53 ドット3 */
.dot-lll{
	width: 28%;
	height: 28%;
	border-radius: 50%;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}
ul li.dot-lll:first-child{
	background: #111;
	top: 50%;
	left: 50%;
}
ul li.dot-lll:nth-child(2){
	background: #000;
	top: 25%;
	left: 75%;
}
ul li.dot-lll:nth-child(3){
	background: #333;
	top: 75%;
	left: 25%;
}

/* 55 ボーダーダクト */
.borderduct-box{
	width: 100%;
	height: 100%;
	background: #111;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -10;
}
.borderduct{
	width: 70%;
	height: 10%;
	background: #333;
	position: absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
	z-index: 4;
}
ul li.borderduct:first-child{
	top: 20%;
	left: 50%;
}
ul li.borderduct:nth-child(2){
	top: 35%;
	left: 50%;
}
ul li.borderduct:nth-child(3){
	top: 50%;
	left: 50%;
}
ul li.borderduct:nth-child(4){
	top: 65%;
	left: 50%;
}
ul li.borderduct:nth-child(5){
	top: 80%;
	left: 50%;
}

/*58 ドット2*/
.dot-two{
	width: 33%;
	height: 33%;
	border-radius: 50%;
	position:absolute;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}
ul li.dot-two:first-child{
	background: #000;
	top: 33%;
	left: 33%;	
}
ul li.dot-two:nth-child(2){
	background: #444;
	top: 67%;
	left: 67%;
}

/* 59 ウィンドウ2 */
.window03{
	width: 40%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	background: #333;
}
.window04{
	width: 40%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 60%;
	background: #111;
}

/* 62 ドット1 */
.dot-one{
	width: 40%;
	height: 40%;
	border-radius: 50%;
	background: #111;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	transform: translate(-50% , -50%);
}


.loading-fadein{
	opacity: 0;
}
/*
NEW TOPICS
================================================ */
#newtopics-container{
	position: absolute;
	left: 5vw;
	top: 74svh;
	width: 45vw;
	text-align: left;
	z-index: 10;
	color: #fff;
	overflow: hidden;
}

#newtopics-container a{
	color: #fff;
}

#newtopics-container .newtopics-title{
	line-height: 1;
	position: relative;
	font-size: 1.8em;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px #FFF;
  	text-stroke: 1px #FFF;
	margin-bottom: 1.5rem;
	letter-spacing: 2px;
	background-image: linear-gradient(45deg, rgb(255 255 255 / 0%) 0%,rgb(255 255 255 / 0%) 13%,rgb(255 255 255 / 100%) 13%,rgb(255 255 255 / 100%) 15%,rgb(255 255 255 / 0%) 15%,rgb(255 255 255 / 0%) 17%, rgb(255 255 255 / 100%) 17%,rgb(255 255 255 / 100%) 19%,rgb(255 255 255 / 0%) 19%,rgb(255 255 255 / 0%) 21%,rgb(255 255 255 / 100%) 21%,rgb(255 255 255 / 100%) 23%,rgb(255 255 255 / 0%) 23%,rgb(255 255 255 / 0%) 25%,rgb(255 255 255 / 100%) 25%,rgb(255 255 255 / 100%) 65%,rgb(255 255 255 / 0%) 65%,rgb(255 255 255 / 0%) 67%,rgb(255 255 255 / 100%) 67%,rgb(255 255 255 / 100%) 69%,rgb(255 255 255 / 0%) 69%,rgb(255 255 255 / 0%) 71%,rgb(255 255 255 / 100%) 71%,rgb(255 255 255 / 100%) 73%,rgb(255 255 255 / 0%) 73%,rgb(255 255 255 / 0%) 75%,rgb(255 255 255 / 100%) 75%,rgb(255 255 255 / 100%) 77%,rgb(255 255 255 / 0%) 77%,rgb(255 255 255 / 0%) 100%);
 	background-clip: text;
	background-position: 112% 0;
	background-size: 400%;
 	-webkit-background-clip: text;
}

#newtopics-container .titlemask{
	overflow: hidden;
	transform: translate(-20%, 0);
	opacity: 0;
}

#newtopics-container .newtopics-article-wrapper{
	height:300px;
	position: relative;
	margin-top:1em;
}

#newtopics-container .newtopics-spec{
	display: flex;
	
	opacity: 0;
}

#newtopics-container time{
	letter-spacing: 1px;
	padding-left: 1em;
	font-size: 0.9em;
}

#newtopics-container .newtopics-catrgory{
	color: #E95900;
	padding: 0.4em 6px 0 7px;
	line-height: 1;
	border: 1px solid #E95900;
	font-size: 0.8em;
}
#newtopics-container .newtopics-catrgory a{
	color: #E95900;
}


#newtopics-container h3{
	padding-top: 0.5em;
	font-size: 1.3em;
	font-weight: 500;
	opacity: 0;
}

#newtopics-container p{
	font-size: 1em;
	font-weight: 300;
	padding-top: 0.5em;
	opacity: 0;
}

#newtopics-container .newtopics-article:first-child{
	position: absolute;
	top: 0;
	opacity: 0;
	
}

#newtopics-container .newtopics-article:nth-child(2){
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(130px);
	visibility: hidden;
}

#newtopics-container .newtopics-article:nth-child(3){
	position: absolute;
	transform: translateY(130px);
	top: 0;
	opacity: 0;
	visibility: hidden;
}

@media screen and (max-width: 1024px) {
	#newtopics-container{
		position: absolute;
		left: 10vw;
		width: 75vw;
		text-align: left;
		z-index: 10;
		color: #fff;
	}
	
}
@media screen and (max-width: 740px) {
	#newtopics-container{
		top: 68svh;
	}
	#newtopics-container .newtopics-catrgory{
	padding: 0.45em 6px 0 7px;
	}
}

/*
LOADING
================================================ */
#loading {
    background-color: var(--light-grey);
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
}
#loading-screen {
    background-color: var(--light-green);
    position: fixed;
    inset: 0;
    z-index: 9998;
    translate: 0 100vh;
}

#load-orangeback{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: var(--orange); /*オレンジ*/
	z-index: 400;
	opacity: 0.7;
}

#load-grayback{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #000;
	z-index: 400;
}

#load-darkgrayback{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #272727;
	z-index: 500;
}

.col-sm-2 {
  padding: 10px;
  border-radius: 4px;
  height: 125px;
  margin-bottom: 10px;
	position: fixed;
	z-index: 2000;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.sp {
  width: 70px;
  height: 70px;
  clear: both;
  margin: 10px auto;
}

/* Spinner Circle Rotation */
.sp-circle {
  border: 4px rgba(0, 0, 0, 0.25) solid;
  border-top: 4px black solid;
	border-right: 4px black solid;
border-image-slice: 1;
  border-radius: 50%;
 
}

.loadingbox{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    gap: 3px;
	list-style: none;
	position: absolute;
	z-index: 1000;
	mix-blend-mode:lighten;
}

.loadingbox .loadingbox-box{
	width: 30px; 
	height: 30px;
	opacity: 0;
}

.load-maru{
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 15px;
}
.load-maru-d{
	width: 100%;
	height: 100%;
	background: #aaa;
	border-radius: 15px;
}
.load-shikaku{
	width: 100%;
	height: 100%;
	background: #555;
	border-radius: 15px;
}
.load-shikaku-d{
	width: 100%;
	height: 100%;
	background: #aaa;
}
.load-shikaku2{
	width: 100%;
	height: 100%;
	background: #fff;
}
.load-shikaku2-d{
	width: 100%;
	height: 100%;
	background: #555;
}
.load-sankaku1{
	width: 100%;
	height: 100%;
	background: #fff;
	clip-path: polygon(0 0, 100% 0%, 100% 100%);
}
.load-sankaku2{
	width: 100%;
	height: 100%;
	background: #aaa;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.load-sankaku3{
	width: 100%;
	height: 100%;
	background: #555;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.load-sankaku4{
	width: 100%;
	height: 100%;
	background: #aaa;
	clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/*about*/
#about-container{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

#about-container h3{
	padding: 0;
	font-size: 4.5em;
}
#aboutslide-bar{
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 0;
	background: var(--orange); /*オレンジ*/
	z-index: 2;
}

@media (max-width: 740px) {
	#aboutslide-bar{
	
	width: 3px;
	
	}
	
	
}

.migikara-in{
	opacity: 0;
}
#about-container .button {
	font-size: 1.375rem;
    color: #fff;
    padding:inherit;
	width: 250px;
	padding-right: 2em;
	padding-left: 2em;
	height: 70px;
	border: solid 1px;

	margin-top: 30px;
	border-color: #fff;
	border-radius: 35px;
	background: transparent;
	opacity: 0;
			letter-spacing: 1px;
}
#slideconatner{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
  	background-position: center center;	
	opacity: 0.8;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
	/* 背景画像が読み込まれる前に表示される背景のカラー */
	background-color: #272727;
	position: relative;
}
#about-container .slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	transform-origin:bottom right;
	transform: rotate(45deg);
	z-index: 0;
}
#about-container ul li.slide:first-child{
	opacity: 1;
	transform: rotate(0deg);
}
#about-container .slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumb-all{
	margin-top: 2em;
}
.thumb-container h3{
	font-size:4em;
	opacity: 0;
}
.thumb-container{
	position: absolute;
	right:5%;
	top: 5%;
	width: 640px;
	color: #fff;
	z-index: 2;
}
.thumb-l{
	width: 200px;
	height: 300px;
	position: absolute;
	right: 440px;
	overflow: hidden;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	
}
ul li.thumb-l:nth-child(2){
	visibility: visible;
	transform: rotateY(-90deg);
}
.thumb-l img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.thumb-m{
	width: 200px;
	height: 300px;
	position: absolute;
	right: 220px;
	overflow: hidden;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
}
ul li.thumb-m:nth-child(3){
	visibility: visible;
	transform: rotateY(-90deg);
}
.thumb-m img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.thumb-r{
	width: 200px;
	height: 300px;
	right: 0px;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
}

@media (max-width: 1250px) {	
	.thumb-container h3{
		font-size:4em;
	}
	.thumb-container{
		position: absolute;
		right:5%;
		top: 5%;
		padding-right:0em;
		width: 490px;
		color: #fff;
	}
	.thumb-l{
		width: 150px;
		height: 225px;
		position: absolute;
		right: 340px;
		overflow: hidden;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
	ul li.thumb-l:nth-child(2){
		visibility: visible;
		transform: rotateY(-90deg);
	}
	.thumb-l img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.thumb-m{
		width: 150px;
		height: 225px;
		position: absolute;
		right: 170px;
		overflow: hidden;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
	ul li.thumb-m:nth-child(3){
		visibility: visible;
		transform: rotateY(-90deg);
	}
	.thumb-m img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.thumb-r{
		width: 150px;
		height: 225px;
		position: absolute;
		right: 0px;
		overflow: hidden;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
}

@media (max-width: 740px) {
	.thumb-container{
		position: absolute;
		left:10%;
		top: 5%;
		padding-right:0em;
		width: 80%;
		color: #fff;
	}
	.thumb-l{
		width: 25%;
		height: 30vw;
		position: absolute;
		left: 0px;
		overflow: hidden;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
	ul li.thumb-l:nth-child(2){
		visibility: visible;
		transform: rotateY(-90deg);
	}
	.thumb-l img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.thumb-m{
		width: 25%;
		height: 30vw;
		position: absolute;
		left: 27%;
		overflow: hidden;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
	ul li.thumb-m:nth-child(3){
		visibility: visible;
		transform: rotateY(-90deg);
	}
	.thumb-m img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.thumb-r{
		width: 25%;
		height: 30vw;
		position: absolute;
		right: auto;
		left: 54%;
		overflow: hidden;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
	/* ボタン */
	#about-container .button {
		opacity: 0;
	}
}

ul li.thumb-r:nth-child(4){
	visibility: visible;
	transform: rotateY(-90deg);
}
.thumb-r img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.thumbitem{
	opacity: 0;
	cursor: pointer;
}
/*重なり*/
.kasanari01{
	z-index: 5;
}

.kasanari02{
	z-index: 6;
}
/*アクティブ*/
.thumb-active{
	position: relative;
	opacity:0.5;
	pointer-events: none;
}
.thumb-active::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:2;
	background: #272727;
	opacity:0.5;
	pointer-events: none;
}
/*ページャー*/
#slidepager{
	position: absolute;
	clip-path: polygon(0 0, 100% 0%, 0 100%);
	line-height:1;
	height:4rem;
	width:4rem;
	bottom: 2rem;
	left: 3rem;
	overflow: hidden;
	padding: 0;
	background-image: linear-gradient(to left top, transparent 50%, var(--orange) 50%, var(--orange) 51%, transparent 51%);
	
	color:#fff;
}
.slash{
	position: absolute;
	clip-path: polygon( 100% 0%, 100% 100%, 0% 100%);
	line-height:1;
	height:4rem;
	width:4rem;
	bottom: 2rem;
	left: 3rem;
	overflow: hidden;
	padding: 0;
	text-align:right;
	vertical-align: bottom;
	/*mix-blend-mode: difference;*/
	color:#fff;
	z-index: 1;
}
.slash2{
	position: absolute;
	line-height:1;
	height:4rem;
	width:4rem;
	bottom: 2rem;
	left: 3rem;
	
	padding: 0;
	z-index: 0;
	text-align:right;
	vertical-align: bottom;
	/*mix-blend-mode: difference;*/
	color: var(--orange); /*オレンジ*/
}
.page{
	position: absolute;
	bottom: 2rem;
	left: 3rem;
	font-size: 2rem;
	
	opacity: 0;
}
.allpage{
	font-size: 2.5rem;
	position: absolute;
	bottom: 3px;
	right: 3px;
	mix-blend-mode: difference;
	font-weight: 700;
}
.allpage2{
	font-size: 2.5rem;
	position: absolute;
	bottom: 3px;
	right: 3px;
	font-weight: 700;
}
.pagerlargenext{
	font-size: 2.5rem;
	font-weight: 700;
	position: absolute;
	bottom: 1.4rem;
	left:0;
	padding-left:5px;
	color: var(--orange); /*オレンジ*/
}
.pagerlarge{
	font-size: 2.5rem;
	font-weight: 700;
	position: absolute;
	bottom: 1.4rem;
	left:0;
	padding-left:5px;
	color: var(--orange); /*オレンジ*/
}
/*グラデーションマスク*/
.mask1{
	position:absolute;
	width: 220vw;
	height:100vh;
	background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
	top:0;
	left:-100vw;
	z-index: 1;
}
#about-slidepager{
	opacity: 0;
}
/* モバイル版
------------------------------- */
@media (max-width: 740px) {
	/*ページャー*/
	#slidepager{
		height:3.5rem;
		width:3.5rem;
		bottom: 1rem;
		left: 1.5rem;
	}
	.slash{
		height:3.5rem;
		width:3.5rem;
		bottom: 1rem;
		left: 1.5rem;
	}
	.slash2{
		height:3.5rem;
		width:3.5rem;
		bottom: 1rem;
		left: 1.5rem;
	}
	.page{
		bottom: 1rem;
		left: 1.5rem;
		font-size: 1.5rem;
	}
	.allpage{
		font-size: 2rem;
		bottom: 3px;
		right: 3px;
	}
	.allpage2{
		font-size: 2rem;
		bottom: 3px;
		right: 3px;
	}
	.pagerlargenext{
		font-size: 2rem;
		bottom: 1.3rem;
		left:0;
		padding-left:5px;
	}
	.pagerlarge{
		font-size: 2rem;
		bottom: 1.3rem;
		left:0;
		padding-left:5px;
		color: var(--orange); /*オレンジ*/;
	}  
}

/*WORKS*/
/* ボタン */
#lightbox-slideconatner .button {
	display:block;
	opacity: 0;
}
#modal{
	width:100vw;
	height:100vh;
	overflow: hidden;
	background: rgb(0 0 0 / 0.7);
	position: fixed;
	z-index: 14;
	opacity:0;
	visibility: hidden;
	top: 0;
	left: 0;
	cursor: pointer;
}
#closemodal{
	width: 50px;
	height: 50px;
	/*background: #000;*/
	position: fixed;
	top: 0;
	right: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 200;
	cursor: pointer;
}
#closemodal::after, #closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: var(--orange);
	position: absolute;
}
#closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
#closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}
.lightbox-container{
	display:flex;
}
.lightbox-article{
	width: 35%;
	color: #fff;
}
.lightbox-article h4{
	font-weight: 400;
	font-size: 2em;
	line-height: 1.2;
}
.lightbox-article h5{
	font-weight: 400;
	font-size: 1.1em;
	padding: 1.5em 0 2em 0;
}
.lightbox-article p{
	padding-bottom: 1em;
}
.lightbox-image-wrapper{
	width: 65%;
	display: grid;
	place-content: center;
	place-items: center;
}
.lightbox-image{
	top: 50%;
	width: 65%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
}
.lightbox-text{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
}
#lightbox-slideconatner{
	width:90%;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 130;
	top: 50%;
	left: 50%;
	position: fixed;

	opacity:0;
	visibility: hidden;
	display:none;
}
.lightbox-slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	visibility: hidden;
	transform: translate(100vw, 0) ;
	z-index: 0;
}
.view{
	visibility: visible;
	opacity: 1;
	transform: translate(0, 0) 
}
#sliders{
	visibility: hidden;
	opacity: 0;
	display: none;
	z-index: 10;
}
.lightbox-slide img{
	width: 100%;
	height: auto;
}
.sliderthumb {
	position:fixed;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	left:50%;
	bottom: 0;
    gap: 0em;
	z-index: 150;
	visibility: hidden;
	
}
.sliderthumb2 {
	height:50vw;
	width:100vw;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	position: absolute;
	z-index: 2;
	cursor: pointer;
	left:50%;
	top: 50%;
    gap: 0em;
}
.thumbitem{
	opacity: 0;
	aspect-ratio: 1/1;
	min-width: 70px;
	max-width:100px;
	overflow: hidden;
	cursor: pointer;
	filter: blur(5px);
}

.thumbitem img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
}
.thumbitem2{
	opacity: 100;
	overflow: hidden;
	cursor: pointer;
}
.thumbitem2 img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
}
ul li.thumbitem2:first-child{
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
ul li.thumbitem2:nth-child(2){
	grid-column: 3 / 4;
	grid-row: 1 / 3;
}
ul li.thumbitem2:nth-child(5){
	grid-column: 1 / 2;
	grid-row: 3 / 5;
}
ul li.thumbitem2:nth-child(6){
	grid-column: 2 / 3;
	grid-row: 3 / 5;
}
ul li.thumbitem2:last-child{
	grid-column: 3 / 5;
	grid-row: 3 / 5;
}	
#prev{
	width: 50px;
	height: 50px;
	position: fixed;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: rgb(0 0 0 / 0.7);
	cursor:pointer;
	z-index: 130;
	opacity:0;
	visibility: hidden;
}
#prev::after{
	content: '';
	width: 30px;
	height:30px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	position: absolute;
	background-image: url(../images/slide-arrow-prev01.svg);
	background-position: center;
	background-size:cover;
}
#next{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: rgb(0 0 0 / 0.7);
	display:grid;
	place-content: center;
	z-index: 130;
	opacity:0;
	visibility: hidden;
	cursor:pointer;
}
#next::after{
	content: '';
	width: 30px;
	height:30px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	background-image: url(../images/slide-arrow-next01.svg);
	background-position: center;
	background-size:cover;
}
.fa-solid{
	font-size:2rem;
	line-height: 1;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	position: absolute;
	left:50%;
	top:17%;
	color: rgb(255 255 255 / 0.3);
}
.thumbitem{
	opacity: 0;
}
/*重なり*/
.kasanari01{
	z-index: 5;
}
/*アクティブ*/
.thumb-active{
	position: relative;
	opacity:0.5;
	pointer-events: none;
}
.thumb-active::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:2;
	background: #272727;
	opacity:0.5;
	pointer-events: none;
}
/*アクティブ*/
.thumb-active2{
	position: relative;
	opacity:0;
	pointer-events: none;
}
.thumb-active2::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:2;
	background: #272727;
	opacity:0.5;
	pointer-events: none;
}
.big-box {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* タブレット版
------------------------------- */
@media (max-width: 1024px) {
	#lightbox-slideconatner .button {
		margin: auto;
	}
	#lightbox-slideconatner{
		width:80%;
		height:90%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 130;
		top: 50%;
		left: 50%;
		position: fixed;
		visibility: hidden;
	}
	
	.lightbox-slide{
		display:grid;
		place-content: center;
		place-items: center;
		object-fit:contain;
		position:absolute;
		opacity: 0;
	}
	.lightbox-container{
		display:grid;
		place-content: center;
		place-items: center;
	}
	.lightbox-image-wrapper{
		width: 100%;
		display: grid;
  		place-content: center;
 		place-items: center;
	}
	.lightbox-image{
		top: 0;
		width: 100%;
		padding-bottom:1em;
		-webkit-transform: translateY(0);
  		transform: translateY(0);
		position: relative;
	}
	.lightbox-text{
		position: relative;
  		top: 0%;
		transform: translateY(0%);
		-webkit- transform: translateY(0%);
	}
	.lightbox-article{
		width: 100%;
		height: 40svh;
		color: #fff;
	}
	.lightbox-article h4{
		font-weight: 400;
		font-size: 1.7em;
		line-height: 1.2;
		text-align: center;
	}
	.lightbox-article h5{
		font-weight: 400;
		font-size: 1em;
		padding: 1em 0 1.3em 0;
		text-align: center;
	}
	.lightbox-article p{
		text-align: center;
	}
}
/* モバイル版
------------------------------- */
@media (max-width: 740px) {
	#prev{
		width: 40px;
		height: 40px;
		position: fixed;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		background: rgb(0 0 0 / 0.7);
		cursor:pointer;
		z-index: 130;
		opacity:0;
		visibility: hidden;
	}
	#prev::after{
		content: '';
		width: 25px;
		height:25px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
  		transform: translate(-50%, -50%);
		position: absolute;
		background-image: url(../images/slide-arrow-prev01.svg);
		background-position: center;
		background-size:cover;
	}
	#next{
		width: 40px;
		height: 40px;
		position: fixed;
		right: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		background: rgb(0 0 0 / 0.7);
		display:grid;
		place-content: center;
		z-index: 130;
		opacity:0;
		visibility: hidden;
		cursor:pointer;
	}
	#next::after{
		content: '';
		width: 25px;
		height:25px;	
	}
	#closemodal{
		width: 40px;
		height: 40px;
	}
	#closemodal::after{
		content: '';
		width: 25px;
	} 
	#closemodal::before{
		content: '';
		width: 25px;
	}  
}
#diamond-container{
	padding: 2em 0 4em;
	min-height: 100vh;
	width: 100vw;
	display: grid;
	 place-content: center;
  place-items: center;
	overflow:hidden;

}
#diamond-container h3{
	font-size: 4.5em;
	text-align: center;
	margin-top: 5%;
	color: #fff;
	opacity: 0;
}
#diamond-container p{
	text-align: center;
	color: #fff;
	padding-left: 10%;
	padding-right: 10%;
	opacity: 0;
}
/* ボタン */
#diamond-container .button {
    font-size: 1.375rem;
    background: transparent;
    color: #fff;
    border-radius: 50px;
    padding: 18px 32px;
	display:block;
	border: 1px solid #fff;
	opacity: 0;
  	width:250px;
}
#works-heading {
	width: 100%;
}
#works-heading .button {
	margin: auto;
	margin-top:2em;

}
.lightbox-slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	visibility: hidden;
	transform: translate(100vw, 0) ;
	z-index: 0;
}
.view{
	visibility: visible;
	opacity: 1;
	transform: translate(0, 0) 
}
#sliders{
	visibility: hidden;
	opacity: 0;
	display: none;
	z-index: 10;
}
.lightbox-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sliderthumb {
	position:fixed;

	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	left:50%;
	bottom: 0;
    gap: 0em;
	z-index: 150;
	visibility: hidden;
}
.thumbitem{
	opacity: 0;
	overflow: hidden;
	cursor: pointer;
}
.thumbitem img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
}
.diamond{
	width: 30vw;
	height: 30vw;
	overflow: hidden;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	opacity: 0;
	/*background-image: url(../images/triangle-pattern-r01.svg);*/
	background: linear-gradient(200deg, rgba(50,50,50,1), rgba(50,50,50,1) 50%, rgba(0,0,0,1) 50%,  rgba(0,0,0,1) 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}
.diamond img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
	/*opacity: 0;*/
}
ul li.diamond:first-child{
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	transform-origin: 0px 0px;
}
ul li.diamond:nth-child(2){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: calc(50% - 15vw);
	left: calc(50% + 15vw);
	transform-origin: 0px 0px;
}
ul li.diamond:nth-child(3){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: calc(50% + 30vw);
	transform-origin: 0px 0px;
}
ul li.diamond:nth-child(4){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: calc(50% + 15vw);
	left: calc(50% + 15vw);
	transform-origin: 0px 0px;
}
ul li.diamond:nth-child(5){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: calc(50% + 30vw);
	left: 50%;
	transform-origin: 0px 0px;	
}
ul li.diamond:nth-child(6){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: calc(50% + 15vw);
	left: calc(50% - 15vw);
	transform-origin: 0px 0px;
}
ul li.diamond:nth-child(7){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top:50%;
	left: calc(50% - 30vw);
	transform-origin: 0px 0px;
}
ul li.diamond:nth-child(8){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: calc(50% - 15vw);
	left: calc(50% - 15vw);
	transform-origin: 0px 0px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
ul li.diamond:nth-child(9){
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: calc(50% - 30vw);
	left: 50%;
	transform-origin: 0px 0px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.diamond-wrapper{
	position: relative;
	width:100vw;
	height:85vw;
	margin: auto;
	margin-top: 2em;
	margin-bottom: 3em;
	max-width: 1500px;
	background: transparent;
}
/* PC版
------------------------------- */
@media screen and (min-width: 1050px) {
	.diamond{
		width: 18vw;
		height: 18vw;
		overflow: hidden;
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
		opacity: 0;
		transform-origin: center;
	}
	.diamond img{
		width:100%;
		height:100%;
		object-fit: cover;
		overflow: hidden;
	}
	ul li.diamond:first-child{
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
	}
	ul li.diamond:nth-child(2){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: calc(50% - 9vw);
		left: calc(50% + 9vw);
	}
	ul li.diamond:nth-child(6){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: 50%;
		left: calc(50% + 18vw);
	}
	ul li.diamond:nth-child(5){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: calc(50% + 9vw);
		left: calc(50% + 9vw);
	}
	ul li.diamond:nth-child(4){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: calc(50% + 9vw);
		left: calc(50% - 9vw);
	}
	ul li.diamond:nth-child(7){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top:50%;
		left: calc(50% - 18vw);
	}
	ul li.diamond:nth-child(3){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: calc(50% - 9vw);
		left: calc(50% - 9vw);
	}	
	ul li.diamond:nth-child(8){
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: calc(50% - 9vw);
		left: calc(50% + 27vw);
	}
	ul li.diamond:nth-child(9){
		visibility: visible;
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: calc(50% - 9vw);
		left: calc(50% - 27vw);
	}
	.diamond-wrapper{
		position: relative;
		width:80vw;
		height:40vw;
		margin: auto;
		padding-bottom: 6em;
		max-width: 1500px;
	}
}
/*SPサムネイル*/
@media (max-width: 740px) {
	.sliderthumb {
	position:fixed;
	flex-wrap: wrap;
	bottom: 0;
	display: flex;
	justify-content:start;
	align-items:start;
	opacity: 0;
    gap: 0;
	z-index: 150;
	visibility: hidden;
		width:100vw;
}
	
	.thumbitem{
	opacity: 0;
	aspect-ratio: 1/1;
		min-width:auto;
	width: calc(100vw / 9);
	/*	width: calc(100vw / 6);*/
	box-sizing: border-box;
	max-width:none;
	overflow: hidden;
	cursor: pointer;
}
	.lightbox-container{
		/* margin-top: -15vw; */
	}
}

/*movie*/

video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/*ビデオ*/
#video-area video{
	filter:grayscale(100%);
}
.mask2{
	position:absolute;
	width: 100vw;
	height:200%;
	background: linear-gradient(200deg, rgba(0,0,0,0), rgba(0,0,0,0) 25%, rgba(0,0,0,1) 50%,  rgba(0,0,0,1) 100%);
	top:-100%;
	left:0;
	z-index: 3;
}
/*header設定*/
#video-container{
	position:relative;
    width: 100vw;
    height: 100vh;/*高さを全画面にあわせる*/
	display: grid;
	align-items: center;
	align-content: center;
	overflow: hidden;
	padding-bottom: 3em;
} 
#video-area{
    position: absolute;
    z-index: -3;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}
#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100vh;
    min-width: 100vw;
}


.movie-container h3{
	font-size: 4.5em;
	text-align: center;
	color: #fff;
	opacity: 0;
}
.movie-container h4{
	font-size: 1.3em;
	margin-top: 0.5em;
	line-height: 1;
	color: #fff;
	font-weight: 400;
	letter-spacing: 0.1em;
	cursor: pointer;
}
.movie-container p{
	text-align: center;
	color: #fff;
	padding-left: 10%;
	padding-right: 10%;
	opacity: 0;
}
.movie-container{
	z-index:3;
}
/* ボタン */
.movie-button {
    font-size: 1.375rem;
    background: transparent;
    color: #fff;
    border-radius: 50px;
    padding: 18px 32px;
	width:250px;
	border: 1px solid #fff;
	display:block;
	margin: auto;
	margin-top:2em;
	opacity: 0;
}
#slide-wrapper{
	width:600px;
	height:auto;
	margin: auto;
	position: relative;
	margin-top: 3em;
	opacity: 0;
}
.movie-thumbitem{
	width:600px;
	height:337px;
	overflow: hidden;
	cursor: pointer;
	background: #272727;
}
.movie-thumbitem img{
	width:100%;
	height:100%;
	object-fit: cover;
}
#movie-slideconatner::before{
	content:"▶︎";
	position:absolute;
	width:0rem;
	height:0rem;
	overflow: hidden;
	top: 44%;
    left: 50%;
	padding-left:0.8rem;
	padding-top:0.6rem;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	font-size:3.5rem;
	line-height: 1;
	 -webkit-text-stroke: 2px var(--orange);
	text-stroke: 3px var(--orange);
	z-index: 1;
	pointer-events: none;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	display: grid;
	align-items: center;
	align-content: center;
	text-align: center;
	background-image: linear-gradient(45deg, rgb(233 89 0 / 0%) 0%,rgb(233 89 0 / 0%) 13%,rgb(233 89 0 / 100%) 13%,rgb(233 89 0 / 100%) 15%,rgb(233 89 0 / 0%) 15%,rgb(233 89 0 / 0%) 17%, rgb(233 89 0 / 100%) 17%,rgb(233 89 0 / 100%) 19%,rgb(233 89 0 / 0%) 19%,rgb(233 89 0 / 0%) 21%,rgb(233 89 0 / 100%) 21%,rgb(233 89 0 / 100%) 23%,rgb(233 89 0 / 0%) 23%,rgb(233 89 0 / 0%) 25%,rgb(233 89 0 / 100%) 25%,rgb(233 89 0 / 100%) 65%,rgb(233 89 0 / 0%) 65%,rgb(233 89 0 / 0%) 67%,rgb(233 89 0 / 100%) 67%,rgb(233 89 0 / 100%) 69%,rgb(233 89 0 / 0%) 69%,rgb(233 89 0 / 0%) 71%,rgb(233 89 0 / 100%) 71%,rgb(233 89 0 / 100%) 73%,rgb(233 89 0 / 0%) 73%,rgb(233 89 0 / 0%) 75%,rgb(233 89 0 / 100%) 75%,rgb(233 89 0 / 100%) 77%,rgb(233 89 0 / 0%) 77%,rgb(233 89 0 / 0%) 100%);
	background-position: 110% 0;
	background-size: 600%;
	border: 2px solid var(--orange);
	border-radius: 50%;
	opacity: 0;
}
#movie-slideconatner::after{
	content:"";
	position:absolute;
	width:7rem;
	height:7rem;
	top: 44%;
    left: 50%;
	padding-left:0.7rem;
	padding-bottom:0.2rem;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	z-index: 111;
	pointer-events: none;
	color: transparent;
	text-align: center;
	border: 2px solid var(--orange);
	border-radius: 50%;
	opacity: 0;
}
#movie-slideconatner{
	width:600px;
	height:calc(337px + 2.5em);
	overflow: hidden;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
	/* 背景画像が読み込まれる前に表示される背景のカラー */
	position:relative;
}
.movie-slide{
	width:100%;
	height:100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	visibility: hidden;
	transform: translate(100%, 0) ;
}
.view{
	visibility: visible;
	opacity: 1;
	transform: translate(0, 0) ;
}
#movie-prev{
	width: 50px;
	height: 50px;
	position: absolute;
	left: -50px;
	top: calc(50% - 1.3em);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: rgb(0 0 0 / 0.5);
	cursor:pointer;
}
#movie-prev::after{
	content: '';
	width: 30px;
	height:30px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	position: absolute;
	background-image: url(../images/slide-arrow-prev01.svg);
	background-position: center;
	background-size:cover;
}
#movie-next{
	width: 50px;
	height: 50px;
	position: absolute;
	right: -50px;
	top: calc(50% - 1.3em);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
	display:grid;
	place-content: center;
	background: rgb(0 0 0 / 0.5);
}
#movie-next::after{
	content: '';
	width: 30px;
	height:30px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	background-image: url(../images/slide-arrow-next01.svg);
	background-position: center;
	background-size:cover;
}
/*アクティブ*/
.thumb-active{
	position: relative;
	opacity:0.5;
	pointer-events: none;
}
.thumb-active::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:2;
	background: #272727;
	opacity:0.5;
	pointer-events: none;
}
/* ↓ インジケーター */
#video-container .indicator {
	width: 100%;
	text-align: right;
	display: flex;
	z-index: 10;
	justify-content: flex-end;
}
#video-container .indicator li {
	width: 30px;
	height: 5px;
	list-style: none;
	background-color: #000;
}
#video-container .indicator li:first-of-type {
	background-color: #E95900;
}
/* モバイル版
------------------------------- */
@media (max-width: 740px) {
	#slide-wrapper{
		width:80vw;
	}
	#movie-slideconatner{
		width:80vw;
		height:calc(50vw + 2.7em);
	}
    .movie-thumbitem{
		aspect-ratio: 16 / 9;
		width:80vw;
		height:auto;
	}
	#movie-next{
		width: 40px;
		height: 40px;
		top: 37%;
		right: 0px;
	}
	#movie-prev{
		width: 40px;
		height: 40px;
		top: 37%;
		left: 0px;
	}
	#movie-next::after{
		width: 25px;
		height:25px;
	}
	#pmovie-rev::after{
		width: 25px;
		height:25px;
	}
	#movie-slideconatner::before{
		top: 39%;
    	left: 50%;
	}
	#movie-slideconatner::after{
		top: 39%;
    	left: 50%;
	}
}

/*NEWS*/

#topnews-container .top-title{
	opacity: 0;
}
#topnews-container .work-text{
	opacity: 0;
}
#topnews-container .work-button{
	opacity: 0;
}
#topnews-container{
	width: 100vw;
	min-height: 100vh;
	overflow: hidden;
	padding: 2em 0 6em 0;
	display: grid;
	align-content: center;
	align-items: center;
	background-image: linear-gradient(180deg, rgb(39 39 39 / 100%) 50%,rgb(233 89 0 / 100%) 200%);
	background-position: 0 0;
	background-size: 100%;
	position: relative;
}
#topnews-mask{
	width: 100vw;
	height: 100vh;
	background: #272727;
	z-index:0;
	position: absolute;
	top: 0;
	left: 0;
}
#topnews-container h3{
	font-size: 4.5em;
	text-align: center;
	margin-top: 5%;
	color: #fff;
}
#topnews-container p{
	text-align: center;
	color: #fff;
	padding-left: 5%;
	padding-right: 5%;
}
/* ボタン */
#topnews-container  .button {
    font-size: 1.375rem;
    background: transpalent;
    color: #fff;
    padding: 18px 32px;
	display:block;
	width:150px;
	margin:0 auto;
	border-radius: 50px;
	border:1px solid #fff;
}
#topnews-container .button{	
	margin-top:2.5em;
	display:flex;
	justify-content:center;
	width:250px;
}
/* タブ
------------------------------- */
.topnews-tab-wrapper{
	display: flex;
	width: 100vw;
	height:4em;
	margin: auto;
	margin-top:3em;
	visibility: hidden;
	display: none;
	opacity: 0;
}
.topnews-tab{
	flex:1;
	display: grid;
	align-content: center;
	align-items: center;
	text-align: center;
	border-left: 1px solid var(--orange); /*オレンジ*/;
	cursor: pointer;
}
ul li.topnews-tab:first-child{
	background: var(--orange); /*オレンジ*/;
	border-left: none;
}
/* 記事
------------------------------- */
#topnews-container .newtopics-article-wrapper{
	margin-top:5em;
}
#topnews-container .newtopics-spec{
	display:flex;
	gap: 1em;
	padding-left: 20px;
}
#topnews-container .newtopics-spec::before{
	content:"";
	width:11px;
	height: 0;
	border-bottom: 1px solid var(--orange); /*オレンジ*/;
	position: absolute;
	top: 0.8em;
	left: 0;
}
#topnews-container .topnews-catrgory{
	border: 1px solid #E95900;
	color: #E95900;
	padding: 0.3em 6px 0 7px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	font-size: 0.8em;
}
/* モバイル版
------------------------------- */
@media screen and (max-width: 740px) {
#topnews-container .topnews-catrgory{
	padding: 0.35em 6px 0 7px;
}
}
#topnews-container time{
	letter-spacing: 1px;
	opacity: 0;
	font-size: 0.8em;
}
#topnews-container h4{

	font-size: 1.3em;
	font-weight: 500;
	cursor: pointer;
	opacity: 0;
}
#topnews-container .topnews-article{
	margin: auto;
	padding:0 1em 1em 0;
	margin-bottom: 2em;
	opacity: 0;
}

#topnews-container .news-article-wrapper{
	text-align: left;
	color: #fff;
	margin: auto;
	display: block;
	gap: 1em;
}
#topnews-container .article-text{
	margin-top: 1em;
	flex: 1;
	padding-left:20px;
	border-left: 1px solid  var(--orange); /*オレンジ*/ ;
}
#topnews-container .article-text::before{
	content: "";
	height: 90%;
	width: 20px;
	position: absolute;
	top: 0;
	left: 0;
}
#topnews-container .article-thumb{
	width: 100px;
	height: 100px;
	border-radius: 50px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
}
#topnews-container .article-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#topnews-container .news-article-wrapper p{
	text-align: left;
	padding: 0.5em 0;
	cursor: pointer;
	opacity: 0;
}
.article-thumb::before{
	content:"";
	position:absolute;
	width: 100px;
	height: 100px;
	overflow: hidden;
	top: 0;
    left: 0;
	z-index: 5;
	background-image: linear-gradient(45deg, rgb(39 39 39 / 0%) 0%,rgb(39 39 39 / 0%) 13%,rgb(39 39 39 / 100%) 13%,rgb(39 39 39 / 100%) 15%,rgb(39 39 39 / 0%) 15%,rgb(39 39 39 / 0%) 16%, rgb(39 39 39 / 100%) 16%,rgb(39 39 39 / 100%) 18%,rgb(39 39 39 / 0%) 18%,rgb(39 39 39 / 0%) 19%,rgb(39 39 39 / 100%) 19%,rgb(39 39 39 / 100%) 21%,rgb(39 39 39 / 0%) 21%,rgb(39 39 39 / 0%) 22%,rgb(39 39 39 / 100%) 22%,rgb(39 39 39 / 100%) 24%,rgb(39 39 39 / 0%) 24%,rgb(39 39 39 / 0%) 69%,rgb(39 39 39 / 100%) 69%,rgb(39 39 39 / 100%) 71%,rgb(39 39 39 / 0%) 65%,rgb(39 39 39 / 0%) 67%,rgb(39 39 39 / 100%) 67%,rgb(39 39 39 / 100%) 69%,rgb(39 39 39 / 0%) 71%,rgb(39 39 39 / 0%) 72%,rgb(39 39 39 / 100%) 72%,rgb(39 39 39 / 100%) 74%,rgb(39 39 39 / 0%) 74%,rgb(39 39 39 / 0%) 75%,rgb(39 39 39 / 100%) 75%,rgb(39 39 39 / 100%) 77%,rgb(39 39 39 / 0%) 77%,rgb(39 39 39 / 0%) 100%);
	background-position: 110% 0;
	background-size: 700%;
}
.topnews-grid{
	display:flex;
	margin: auto;
    gap: 5em;
	width: 85vw;
}
.topnews-category-wrapper{
	flex: 1;
}
#topnews-container .news-newtopics-title{
	line-height: 1;
	position: relative;
	font-size: 1.8em;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px #FFF;
  	text-stroke: 1px #FFF;
	margin-bottom: 1.5rem;
	letter-spacing: 2px;
	background-image: linear-gradient(135deg, rgb(255 255 255 / 0%) 0%,rgb(255 255 255 / 0%) 13%,rgb(255 255 255 / 100%) 13%,rgb(255 255 255 / 100%) 15%,rgb(255 255 255 / 0%) 15%,rgb(255 255 255 / 0%) 17%, rgb(255 255 255 / 100%) 17%,rgb(255 255 255 / 100%) 19%,rgb(255 255 255 / 0%) 19%,rgb(255 255 255 / 0%) 21%,rgb(255 255 255 / 100%) 21%,rgb(255 255 255 / 100%) 23%,rgb(255 255 255 / 0%) 23%,rgb(255 255 255 / 0%) 25%,rgb(255 255 255 / 100%) 25%,rgb(255 255 255 / 100%) 65%,rgb(255 255 255 / 0%) 65%,rgb(255 255 255 / 0%) 67%,rgb(255 255 255 / 100%) 67%,rgb(255 255 255 / 100%) 69%,rgb(255 255 255 / 0%) 69%,rgb(255 255 255 / 0%) 71%,rgb(255 255 255 / 100%) 71%,rgb(255 255 255 / 100%) 73%,rgb(255 255 255 / 0%) 73%,rgb(255 255 255 / 0%) 75%,rgb(255 255 255 / 100%) 75%,rgb(255 255 255 / 100%) 77%,rgb(255 255 255 / 0%) 77%,rgb(255 255 255 / 0%) 100%);
 	background-clip: text;
	background-position: 112% 0;
	background-size: 400%;
 	-webkit-background-clip: text;
	
}
#topnews-container .newstitlemask{
	overflow: hidden;
	position:absolute;
	left: -20px;
	top: 0;

	transform-origin: left top 0;
	transform: rotate(90deg);
	display: block;
}
/* モバイル版
------------------------------- */
@media screen and (max-width: 1024px) {	
	
	#topnews-container{
		width: 100vw;
		min-height:auto;
		overflow: hidden;
		padding: 2em 0 7em 0;
		display:block;
		background-image: linear-gradient(rgb(39 39 39 / 100%) 50%, rgb(233 89 0 / 100%) 200%);
		background-position: 0 0;
		background-size: 100%;
		position: relative;
	}
	#topnews-container .topnews-article{
		margin: auto;
		width: 80vw;
		margin-bottom: 2em;
		max-width: none;
	}
	.topnews-tab-wrapper{
		display: flex;
		visibility: visible;
		opacity: 0;
	}
	.topnews-grid{
		display:block;
		margin: auto;
		width: 90vw;
	}
	#topnews-container .news-newtopics-title{
		display:none;
	}

	#topnews-container .newstitlemask{
		display:none;
	}
	.topnews-category-wrapper:nth-child(2){
		display:none;
		opacity: 0;
	}
	.topnews-category-wrapper:nth-child(3){
		display:none;
		opacity: 0;
	}	
}

/*BLOG*/

#blogslide-container{
	width: 100vw;
	height: auto;
	overflow: hidden;
	position: relative;
}

#blogslide-container .blogslide-speck{
	width:calc(90% - 20px);
	margin: auto;
	display:block;
	background: #272727;
}
#blogslide-container .l-slidebar{
	width: 10px;
	height: 100%;
	background: #272727;
	position: absolute;
	left: 5%;
	top: 0;
	z-index: 3;
}
#blogslide-container .r-slidebar{
	width: 10px;
	height: 100%;
	background: #272727;
	position: absolute;
	right: 5%;
	top: 0;
	z-index: 3;
}
#blog-slide{
	opacity: 0;
}
#blog-slide2{
	opacity: 0;
}
#blog-slide3{
	opacity: 0;
}
#blog-prev{
	opacity: 0;
}
#blog-next{
	opacity: 0;
}
#blog-prev2{
	opacity: 0;
}
#blog-next2{
	opacity: 0;
}
#blog-prev3{
	opacity: 0;
}
#blog-next3{
	opacity: 0;
}
#blog-indicator{
	opacity: 0;
}
#blog-indicator2{
	opacity: 0;
}
#blog-indicator3{
	opacity: 0;
}
.blog-title{
	opacity: 0;
}
.blog-button{
	opacity: 0;
}
.blog-text{
	opacity: 0;
	padding-bottom: 1em;
}
.topblog-heading{
	padding-left: calc(5% + 10px);
	padding-right: calc(5% + 10px);
}
#blogslide-container .button {
	padding-right: 2em;
	padding-left: 2em;
	margin-top:1em;
	margin-bottom:2em;
}
#blogslide-container h3{
	font-size: 4.5em;
	color: #fff;
}
#blogslide-container p{
	color: #fff;
}
#blogslide-container{
	padding: 4em 0;
	position: relative;
}
#blogslide-container .slide-wrapper-l{
	display:flex;
}
/* ↓ スライドの外枠 */
#blogslide-container .slide-wrapper {
	width: 90vw;
	margin: auto;
	height:auto;
	position: relative;
	overflow: hidden; /* はみ出したスライドを隠す */
	color: #fff;
	margin-top:1em;
	margin-bottom:3em;
}
/*  ↓ スライド（コンテンツ） */
#blogslide-container .news-slide { /*スライド全体 */
	width: 400%;
	align-items: stretch;
	display: flex;
	transition: all 0.3s;
}
#blogslide-container .blog-slider { /* スライド */
	width: 6.25%;
	height: 100%;
	padding: 10px;
	background: transparent;
}
#blogslide-container h4{
	font-weight: 400;
	padding-top: 0.3em;
	font-size: 1.2em;
	padding-bottom: 0.3em;
	cursor: pointer;
	color: #fff;
}
#blogslide-container h4 a{
	color: #fff;
}
.blog-thumbitem{
	width:100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
}
.blog-thumbitem img{
	width:100%;
	height:100%;
	object-fit: cover;
}


#blogslide-container .slide1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}
#blogslide-container .slide2 { /* スライドさせるために必要なクラス */
  transform: translateX(-25%);
}
#blogslide-container .slide3 { /* スライドさせるために必要なクラス */
  transform: translateX(-50%);
}
#blogslide-container .slide4 { /* スライドさせるために必要なクラス */
  transform: translateX(-75%);
}
/* ↓ 左右のボタン */
#blogslide-container .prev {
	position: absolute;
	width: 35px;
	height: 35px;
	right:calc(5% + 55px);
	cursor:auto;
	background: #000;
	/*border-radius: 50%;*/
	
	z-index:13;
}
#blogslide-container .prev::after {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	left: 18px;
	top: 4px;
	cursor: pointer;
	border-top: solid 1px var(--orange);
	border-right: solid 1px var(--orange);
	-webkit-transform: rotate(-135deg) translateY(-50%);
	transform: rotate(-135deg) translateY(-50%);
}
#blogslide-container .titlemask{
	margin-right: auto;
}
#blogslide-container .next {
	position: absolute;
	width: 35px;
	height: 35px;
	right:calc(5% + 10px);
	cursor: pointer;
	background: #000;
	/*border-radius: 50%;*/
	z-index:13;
}
#blogslide-container .next::after {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	top: 15px;
	left: 2px;
	cursor: pointer;
	border-top: solid 1px var(--orange);
	border-right: solid 1px var(--orange);
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%);
}
#blogslide-container .next4{
	pointer-events: none;
}
#blogslide-container .prev1{
	pointer-events: none;
}
/* ↓ インジケーター */
#blogslide-container .indicator {
	width: 100%;
	text-align: right;
	display: flex;
	z-index: 10;
	justify-content: flex-end;
	padding-right:10px;
}
#blogslide-container .indicator li {
	width: 30px;
	height: 5px;
	list-style: none;
	background-color: #000;
}
#blogslide-container .indicator li:first-of-type {
	background-color: var(--orange);
}
@media screen and (max-width: 1024px) {
	#blogslide-container .blogslide-speck{
		width:calc(80% - 20px);
		margin: auto;
		display:block;
		background: #272727;
	}
	.topblog-heading{
		padding-left: calc(10% + 10px);
		padding-right: 10%;
	}
	#blogslide-container .l-slidebar{
		left: 9.8%;
		background: #272727;
	}
	#blogslide-container .r-slidebar{
		visibility: hidden;
		opacity:0;
	}
	/* ↓ スライドの外枠 */
	#blogslide-container .slide-wrapper {
		width: 90vw;
	margin-left: 10vw;
		height: auto;
		position: relative;
		overflow: hidden; /* はみ出したスライドを隠す */
		overflow-x: scroll;
		
	margin-bottom:0em;
	}
	/*  ↓ スライド（コンテンツ） */
	#blogslide-container .news-slide { /*スライド全体 */
		width: 1000%;
		height: 100%;
		display: flex;
		transition: all 0.3s;
	}
	#blogslide-container .blog-slider { /* スライド */
  		width: 6.25%;
  		height: 100%;
  		font-size: 16px;
		justify-content: center;
		align-items: center;
		display: block;
	}
	#blogslide-container .prev {
		visibility: hidden;
	}
	#blogslide-container .next {
		visibility: hidden;
	}
	#blogslide-container .indicator{
		visibility: hidden;
	}
	#blogslide-container .slide-wrapper {
		padding-bottom:20px;
	}
	#blogslide-container .slide-wrapper::-webkit-scrollbar {
  		height: 10px; /* スクロールバーの高さ */
	}
	#blogslide-container .slide-wrapper::-webkit-scrollbar-thumb {
 		background: rgb(0,0,0, 0); /* ツマミの色 */
		border-radius: 0; /* ツマミ両端の丸み */
	}
	#blogslide-container .slide-wrapper::-webkit-scrollbar-track {
		background: rgb(200,200,200, 0); /* ツマミの色 */
		border-radius: 0; /* トラック両端の丸み */
	}
}
/*
NEW TOPICS
================================================ */
#blogslide-container .blogcategory-title{
	line-height: 1;
	position: relative;
	font-size: 2em;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px #FFF;
  	text-stroke: 1px #FFF;
	margin-bottom: 1.5rem;
	letter-spacing: 2px;
	background-image: linear-gradient(45deg, rgb(255 255 255 / 0%) 0%,rgb(255 255 255 / 0%) 13%,rgb(255 255 255 / 100%) 13%,rgb(255 255 255 / 100%) 15%,rgb(255 255 255 / 0%) 15%,rgb(255 255 255 / 0%) 17%, rgb(255 255 255 / 100%) 17%,rgb(255 255 255 / 100%) 19%,rgb(255 255 255 / 0%) 19%,rgb(255 255 255 / 0%) 21%,rgb(255 255 255 / 100%) 21%,rgb(255 255 255 / 100%) 23%,rgb(255 255 255 / 0%) 23%,rgb(255 255 255 / 0%) 25%,rgb(255 255 255 / 100%) 25%,rgb(255 255 255 / 100%) 65%,rgb(255 255 255 / 0%) 65%,rgb(255 255 255 / 0%) 67%,rgb(255 255 255 / 100%) 67%,rgb(255 255 255 / 100%) 69%,rgb(255 255 255 / 0%) 69%,rgb(255 255 255 / 0%) 71%,rgb(255 255 255 / 100%) 71%,rgb(255 255 255 / 100%) 73%,rgb(255 255 255 / 0%) 73%,rgb(255 255 255 / 0%) 75%,rgb(255 255 255 / 100%) 75%,rgb(255 255 255 / 100%) 77%,rgb(255 255 255 / 0%) 77%,rgb(255 255 255 / 0%) 100%);
	background-clip: text;
	background-position: 300% 0;
	background-size: 300%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
}
.blog-category1{
	opacity: 0;
}
.blog-category2{
	opacity: 0;
}
.blog-category3{
	opacity: 0;
}


/*demo*/



.scroll_container {
  height: 300svh;
}

.horizontal_scroll {
  position: absolute;
  top: 0;
  height: 100%;
  width: 300svw;
  will-change: transform;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 ;
	background-image: linear-gradient(0deg, rgb(0 0 0 / 100%) 0%,rgb(39 39 39 / 100%) 100%);
}

.sticky_wrap {
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
}

.demo-container{
	padding:5vw;
}

@media(max-width: 740px){
	.demo-container{
		padding:10vw;
	}
}
.demo-text-wrapper{
	width: 300px;
}
.demo-container h3{
	font-size: 4.5em;
	text-align: center;
	margin-top: 5%;
	color: #fff;

	
	margin: auto;
}
.demo-container p{
	text-align: center;
	color: #fff;
	padding-left: 5%;
	padding-right: 5%;
	opacity: 0;
}
/* ボタン */
#demo-container .button {
    font-size: 1.375rem;
    background: transparent;
    color: #fff;
    border-radius: 50px;
    padding: 18px 32px;
	display:block;
	margin:0 auto;
	border: 1px solid #fff;
	opacity: 0;
	margin-top:2.5em;
	width:100%;
	max-width:300px;
	
}
.masonry-items {
	
  margin-top: 0;
  margin-bottom: 0.5em;
	line-height: 0;
  opacity: 0;
 break-inside: avoid;
	overflow: hidden;
}
.masonry-items img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
#masonrypost-demo{
	overflow-x: auto;
}


.demogallery{
     margin: 0 auto;
 
  
  column-count: 9;
  column-gap: 1em;
}



@media only screen and (max-width: 1250px) {
	.demogallery{
	columns: 7;
	}	
}

@media only screen and (max-width: 740px) {
	.demogallery{
	columns: 5;
	}	
}

/*
================================================ */

/*コンタクト*/
.contact-wipe{
	width: 50vw;
	height: 100%;
	background: #272727;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	transform: translate(0, -100%);
}
.contact-black-wipe{
	width: 50vw;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.map-black-wipe{
	width: 50vw;
	height: 100%;
	background: #000;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 5;
}
.map-wipe{
	width: 50vw;
	height: 100%;
	background:  var(--orange); /*オレンジ*/
	position: absolute;
	top: 0;
	right: 0;
	z-index: 6;
	transform: translate(0, 100%);
}
/*.contact-wrapper .contact-title::before{
	content: "";
	position: absolute;
	width: 6em;
	height: 1.5em;
	z-index:2;
	background: var(--orange); 
}*/
.map-wrapper{
	overflow:hidden;
}
/*.map-wrapper .contact-title::before{
	content: "";
	position: absolute;
	width: 6em;
	height: 1.5em;
	z-index:2;
	background: #272727;
}*/
/*.contact-wrapper .contact-text::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 5em;
	left:0;
	z-index:2;
	background: var(--orange);
}*/
/*.map-wrapper .contact-text::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 5em;
	z-index:2;
	background: #272727;
	left:0;
}*/
.contact-button-wrapper{
	width:250px;
	margin: auto;
	position: relative;
	overflow: hidden;
}
.contact-button::before{
	content: "";
	position: absolute;
	top: 0;
	left: -2vw;
	margin-left: -300px;
	width: 850px;
	height: 120px;
	z-index:2;
	background-image: linear-gradient(45deg, rgb(233 89 0 / 0%) 0%,rgb(233 89 0 / 0%) 13%,rgb(233 89 0 / 100%) 13%,rgb(233 89 0 / 100%) 15%,rgb(233 89 0 / 0%) 15%,rgb(233 89 0 / 0%) 17%, rgb(233 89 0 / 100%) 17%,rgb(233 89 0 / 100%) 19%,rgb(233 89 0 / 0%) 19%,rgb(233 89 0 / 0%) 21%,rgb(233 89 0 / 100%) 21%,rgb(233 89 0 / 100%) 23%,rgb(233 89 0 / 0%) 23%,rgb(233 89 0 / 0%) 25%,rgb(233 89 0 / 0%) 25%,rgb(233 89 0 / 0%) 100%);
	background-size: 120%;
}
.map-button-wrapper{
	width:250px;
	margin: auto;
	position: relative;
	overflow: hidden;
}
.map-button::before{
	content: "";
	position: absolute;
	top: 0;
	left: -2vw;
	margin-left: -300px;
	width: 850px;
	height: 120px;
	z-index:0;
	background-image: linear-gradient(45deg, rgb(39 39 39 / 0%) 0%,rgb(39 39 39 / 0%) 13%,rgb(39 39 39 / 100%) 13%,rgb(39 39 39 / 100%) 15%,rgb(39 39 39 / 0%) 15%,rgb(39 39 39 / 0%) 17%, rgb(39 39 39 / 100%) 17%,rgb(39 39 39 / 100%) 19%,rgb(39 39 39 / 0%) 19%,rgb(39 39 39 / 0%) 21%,rgb(39 39 39 / 100%) 21%,rgb(39 39 39 / 100%) 23%,rgb(39 39 39 / 0%) 23%,rgb(39 39 39 / 0%) 25%,rgb(39 39 39 / 0%) 25%,rgb(39 39 39 / 0%) 100%);
	background-size: 120%;
}
.contact-wrapper .contact-button{
}
#contact-container .contact-title{
	opacity: 1;
}
#contact-container .contact-text{
	opacity: 1;
}
#contact-container .contact-button{
	pointer-events: none;
	opacity: 1;
}
#contact-container{
	width: 100vw;
	min-height: 80svh;
	position:relative;
	overflow: hidden;
	background: #272727;
	color: #272727;
	display: flex;
	 justify-content:space-between;
}
#contact-container .contact-wrapper{
	flex:1;
	display: grid;
	align-content: center;
	align-items: center;
	padding: 4em 0 ;
	background: var(--orange); /*オレンジ*/
	overflow: hidden;
	position: relative;
	width: 50vw;
}
#contact-container .map-wrapper{
	flex:1;
	display: grid;
	align-content: center;
position: relative;
	align-items: center;
	padding: 2em 0;
	color: var(--orange); /*オレンジ*/
	overflow: hidden;
		width: 50vw;

}
#contact-container h3{
	font-size:2.5em;
	text-align: center;
	margin: 0.5em 0;
}
#contact-container .map-wrapper h3{
	color: var(--orange); /*オレンジ*/
}
#contact-container p{
	text-align: center;
	padding-left: 20%;
	padding-right: 20%;
}
#contact-container .contact-icon{
	margin: auto;	
	display: grid;
	align-content: center;
	align-items: center;
}
#contact-container .contact-icon  img{
	width: 100%;
	height: auto;
	object-fit: contain;
}

#contact-container  .button {
    font-size: 1.375rem;
    background: transparent;
    color: #272727;
    border-radius: 50px;
    padding: 18px 32px;
	margin:0 auto;
	border: 1px solid #272727;
	margin-top:2.5em;
	width:250px;
}

#contact-container .map-wrapper .button {
    font-size: 1.375rem;
    background: transparent;
    color: var(--orange);　/*オレンジ*/
    border-radius: 50px;
    padding: 18px 32px;
	margin:0 auto;
	border: 1px solid var(--orange); /*オレンジ*/
	margin-top:2.5em;
	width:250px;
}
/* Loading背景画面設定　*/
#splash {   
	width: 12vw;
	height:auto;
	margin: auto;
}
#splash2 {   
	width: 12vw;
	height:auto;
	margin: auto;
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img{
	width: 100%;
	height: auto;
	margin: auto;
}
#splash_logo2 img{
	width: 100%;
	height: auto;
	margin: auto;
}

#splash_logo2{
	display: grid;
	align-content: center;
}

#splash_logo{
	display: grid;
	align-content: center;
}

@media(max-width: 1024px){
/* Loading背景画面設定　*/
#splash {   
	width: 18vw;
	height:auto;
}
#splash2 {   
	width: 18vw;
	height:auto;
}
}
@media(max-width: 740px){
	#contact-container p{
		padding-left: 10%;
		padding-right: 10%;
	}
	#contact-container{
		display: grid;
	}
	#contact-container .contact-wrapper{
		min-height: 80svh;
	}
	#contact-container .map-wrapper{
		min-height: 80svh;
	}
	#contact-container .contact-icon{
		width: 100vw;
	}

	
	.contact-wipe{
	width: 100vw;
	height: 100%;
	background: #272727;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	transform: translate( -100vw, 0);
	}
	
	.contact-black-wipe{
	width: 100vw;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	}
	.map-black-wipe{
	width: 100vw;
	height: 100%;
	background: #000;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 5;
	}
	.map-wipe{
	width: 100vw;
	height: 100%;
	background:  var(--orange);　/*オレンジ*/
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 6;
	transform: translate( 100vw, 0);
	}
	
	/*.contact-wrapper .contact-text::before{
	content: "";
	position: absolute;
	width: 80%;
	height: 5em;
	z-index:2;
	background: var(--orange);
	}*/
	
	/*.map-wrapper .contact-text::before{
	content: "";
	position: absolute;
	width: 80%;
	height: 5em;
	z-index:2;
	background: #272727;
	}*/
	
	#contact-container .contact-wrapper{

	width: 100vw;
	}
	
	#contact-container .map-wrapper{

	width: 100vw;
	}
	
	#splash {   
	width: 30vw;
	height:auto;
	}
	#splash2 {   
	width: 30vw;
	height:auto;
	}
}


/*フッター*/
/* safari */
_::-webkit-full-page-media, _:future, :root #footer .footer-logo img{
   margin-left: -6px;
}
#footer{
	padding: 7em 5vw;
	background: #000;
	width: 100vw;
}
#footer a{
	color: #fff;
}
#footer .footer-logo img{
	width: 190px;
	height: auto;
}
#footer .footer-logo{
	padding-bottom: 1.5em;
}
#footer .footermenu-list {
    display: flex;
	 flex-wrap: wrap;
	margin-top: 1.7em;
	font-size: 1em;
	gap: 0.7em;
}

#footer .footermenu-list li{
	padding-right:0.7em;
	line-height: 1;
	border-right: 1px solid #fff;
}
.teladd{
	padding-left: 0.7em;
}
.shop-banner ul{
	display: flex;
	margin-top: 0.3em;
	margin-left: -10px;
}
.footer-sns-button{
	width: 50px;
	heiht: 50px;
}
.shop-banner img{
	width: 100%;
	height: auto;
}

@media(max-width: 740px){
	#footer{
	padding: 7em 10vw;


}
}


/* styles.css */
#scrollTopButton {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#scrollTopButton:hover {
    background-color: #0056b3;
}


/*page access*/

#access-container{
	width: 100vw;
	overflow: hidden;
}
#access-container .access-grid-wrapper{
	display: flex;
	flex-wrap: wrap;
}
#access-container .access-grid{
	aspect-ratio: 1 / 1;
	width: 50vw;
	overflow: hidden;
}
.access-grid:first-child{
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10vw;
	background: #000;
}
.access-grid h4{
	text-align: center;
	font-size: 2.5em;
	padding-bottom: 1.3em;
}

.access-grid:nth-child(2) img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.access-grid:nth-child(3){
	padding:0;
	filter:grayscale(100%) invert(100%);
	margin: 0;
}

.access-grid:nth-child(4){
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10vw;
	background: var(--orange); /*オレンジ*/
	color: #000;
	text-align: center;
}
.access-grid:nth-child(5){
	display: grid;
	align-content: center;
	align-items: center;
	padding: 10vw;
	background: #272727;
	text-align: center;
}
.access-tel{
	text-align: center;
	padding-top: 1em; 
}
.access-tel a{
	color: #fff;
}
.access-mail{
	text-align: center;
	paddingtop: 0.4em; 
}
.access-mail a{
	color: #fff;
}

.access-grid:nth-child(6) img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media(max-width: 1024px){
	.access-grid:first-child{
		padding: 5vw;
	}
	.access-grid:nth-child(4){
		padding: 5vw;
	}
	.access-grid:nth-child(5){
		padding: 5vw;
	}
}

@media(max-width: 740px){
	#access-container .access-grid-wrapper{
	flex-flow: column;
}
	#access-container .access-grid{
	width: 100vw;
}
	.access-grid:first-child{
		padding: 10vw;
	}
	.access-grid:nth-child(3){
		order: 3;
	}
	.access-grid:nth-child(4){
		padding: 10vw;
		order: 2;
	}
	.access-grid:nth-child(5){
		padding: 10vw;
		order: 4;
	}
	.access-grid:nth-child(6){
		order: 5;
	}
}

/*
navi
================================================ */
/*
page追加分
================================================ */
#page-header{
	width: 100vw;
	height: 107px;
	overflow: hidden;
	position: relative;
}
@media(max-width: 1024px){
	#page-header{
		height: 90px;
	}
}

#page-header2{
	width: 100vw;
	height: 107px;
	z-index: 100;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
@media(max-width: 1024px){
	#page-header2{
		height: 90px;
	}
}
/*
================================================ */
@media(min-width: 1024px){
	
	
.menu-list {
   display: flex;
	position: absolute;
	right: 5vw;
	top: 3em;
	font-size: 1em;
	font-weight: 400;
	text-align: center;
	z-index: 7;
	
}

.menu-list li {

	padding: 0 0 0.2em 1.8em;
	opacity: 0;
	text-align: center;
	margin: auto;
	display: grid;
	align-content: center;
}


.menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
	font-weight: 500;
	
}
	
	
}
@media(max-width: 1024px){
	
	/*
SLIDE MENU
================================================ */
/*ハンバーガー*/
	#main-menu{
		   cursor: pointer;
	}
	#menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;

}
	#main-menu button{
		border-radius: 0; 
	}
.MenuBtn.Style01 {
    position: fixed;
	right: 0;
    top: 0;
    width: 100px;
    height: 100px;
	padding: 25px 10px;
	background: #000;
	display: flex;
    justify-content: right;
    align-items: top;
	z-index:13;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
.MenuBtn.Style01 .MenuBtn-BarFrame {
    position: relative;
    display: block;
    width: 40px;
    height: 3px;
}
.MenuBtn.Style01 .MenuBtn-BarFrame-FirstBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all .15s linear;
}
.MenuBtn.Style01 .MenuBtn-BarFrame-SecondBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all .30s ease;
    transform: translateY(-12px) rotate(0deg);
}
.MenuBtn.Style01 .MenuBtn-BarFrame-ThirdBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all .30s ease;
    transform: translateY(12px) rotate(0deg);
}
.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-FirstBar {
    opacity: 0;
}
.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-SecondBar {
    transform: translateY(0) rotate(45deg);
}
.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-ThirdBar {
    transform: translateY(0) rotate(-45deg);
}
	/* 開閉ボタン */
.btn-menu {
    transition: .4s;
}
/* スライドメニューパネル */
#menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 11;
    padding: 5rem 2.7rem 2rem;
    width: 100vw;
    height: 100vh;
    /*translate: 100vw;*/
	visibility: hidden;
	opacity: 0;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	letter-spacing: 0.1em;
}
.menu-list {
    list-style: none;
	position: absolute;
	right: 2.7rem;
	width: auto;
}

.menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
	
	
}
	.menu-list li {
    margin: 1rem auto;
    opacity: 0;
	height:25px;
	width:100%;
		text-align: right;
}
}




/* CSS Document */
.box {
  padding: 25px 0;
}
.text-animation {
  &.show {
    .text-animation-span {
      display: inline-block;
      overflow: hidden;
    }
    span {
      display: inline-block;
      animation: showText 1.5s backwards;
    }
  }
}
@keyframes showText {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/*トップロゴ*/
#cxg-logo{
	position: absolute;
	left: 5%;
	top: 3em;
	z-index: 10;
}
#cxg-logo h1{
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
	line-heigh: 1;
	letter-spacing: 2px;
	padding-bottom: 0.4rem;
	opacity: 0;
	
}
#cxg-logo img{
	width: 190px;
	height: auto;
	opacity: 0;
}
@media(max-width: 1024px){
#cxg-logo{
	position: absolute;
	left: 10%;
	top: 2.5rem;
}	
	#cxg-logo h1{
	
	margin-top: 0;
}
}

/*about*/
.block---2{
	overflow: hidden;
}

#page-about-back{
	background-image: url("../images/top-about-gallery005.jpg");
	background-size: cover;
	width:100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 1;
	background-position: center center;
	background-repeat: no-repeat;
}
#page-about-back::after{
	content: "";
	position: absolute;
	width:100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	z-index: -1;
	
}
#page-about-back2{
	background-image: url("../images/webdesign002.jpg");
	background-size: cover;
	width:100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0;
	background-position: center center;
	background-repeat: no-repeat;
	
}
#page-about-back2::after{
	content: "";
	position: absolute;
	width:100vw;
	height: 100vh;
	background: rgba(255, 255, 255, 0.7);
	z-index: -1;
	/*mix-blend-mode:soft-light;*/
}
#page-about-back3{
	background-image: url("../images/graphic002.jpg");
	background-size: cover;
	width:100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0;
	background-position: center center;
	background-repeat: no-repeat;
}
#page-about-back3::after{
	content: "";
	position: absolute;
	width:100vw;
	height: 100vh;
	/*background: rgba(39, 39, 39, 0.7);*/
	background: rgba(233, 89, 0, 1);
	mix-blend-mode:overlay;
	z-index: -1;
}
#page-about-back3::before{
	content: "";
	position: absolute;
	width:100vw;
	height: 100vh;
	background: rgba(233, 89, 0, 0.7);
	z-index: -1;
	
}
#page-about-back4{
	background-image: url("../images/about_main002.jpg");
	background-size: cover;
	width:100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0;
	background-position: center center;
	background-repeat: no-repeat;
}
#page-about-back4::after{
	content: "";
	position: absolute;
	width:100vw;
	height: 100vh;
	background: rgba(39, 39, 39, 0.7);
	z-index: -1;
	/*mix-blend-mode:soft-light;*/
}
#page-about-container h1{
	font-size: 4em;
	font-weight: 400;
	color: #fff;
	line-height: 1;
	padding: 0;
	
}
#column1 p{
	padding-top: 1.5em;
}
#column2 h1{
	color: #000;
}

#column2 p{
	padding-top: 1.5em;
	color: #000;
}
#column3 h1{
	color: #272727;

}
#column3 p{
	padding-top: 1.5em;
	color: #272727;
}
#column4 p{
	padding-top: 1.5em;
}

#column1 {
    display: grid;
	place-content: center;
	height: 120svh;
	width: 100vw;
	/*background: rgba(255,0,0,1);*/
	/*background-image: url("../images/topslide006.jpg");*/
	background-repeat: no-repeat;
	background-position:  center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
.block{
			
			color: #eed;
			line-height: 25vh;
			text-align: right;
			/*padding: 0 42pt;*/
			margin-top: 0vh;
			height: 250px;
		margin-left: 70vw;
			position: relative;
		}
.block2{	
			color: #eed;
			line-height: 40svh;
			text-align: right;
			/*padding: 0 42pt;*/
			margin-top: 0vh;
			height: 100px;
	
			position: relative;
		}

.block3{
			color: #eed;
			line-height: 30vh;
			text-align: right;
			/*padding: 0 42pt;*/
			margin-top: -50vh;
			height: 100px;

			position: relative;
		}
.block4{
			
			color: #eed;
			line-height: 40vh;
			text-align: right;
			/*padding: 0 42pt;*/
			margin-top: -40vh;
			height: 100px;

			position: relative;
		}
.block5{
			
			color: #eed;
			line-height: 20svh;
			text-align: right;
			/*padding: 0 42pt;*/
			margin-top: -60vh;
			height: 100px;
	
			position: relative;
		}

/*パララックス画像サイズ変更*/
		#column1 .block .rellax{
			filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			width: 14vw;
			min-width: 150px;
			aspect-ratio: 9 / 16;
			position: absolute;
			top: 0; right: 15%;
			box-sizing: border-box;
		}

#column1 .block2 .rellax{
			filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
			min-height: 150px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: -38vh; right: -2%;
		}

#column1 .block3 .rellax{
			filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
			min-height: 150px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: -10vh; right: 27vw;
		
		}
#column1 .block4 .rellax{
			filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			width: 14vw;
			min-width: 150px;
			aspect-ratio: 9 / 16;
			position: absolute;
			top: -55vh; right: 27vw;
		
		}
#column1 .block5 .rellax{
		filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
			min-height: 150px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: -10vh; right: 6vw;
	
		}
#column2 .block .rellax{
filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			width: 14vw;
		min-width: 170px;
			aspect-ratio: 9 / 16;
			position: absolute;
			top: 10%; right: 250%; 
			box-sizing: border-box;
		}
#column2 .block2 .rellax{
		filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
		min-height: 170px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: -370%; left: 5%;
			box-sizing: border-box;
		}
#column2 .block4 .rellax{
filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
		min-height: 170px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: -50%; left: 25%;
			box-sizing: border-box;
		}

#column3 .block .rellax{
			filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
			min-height: 170px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: 28%; right: 15%;
			box-sizing: border-box;
		}
#column3 .block2 .rellax{
		filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			width: 14vw;
			min-width: 170px;
			aspect-ratio: 9 / 16;
			position: absolute;
			top: -440%; right: 5%;
			box-sizing: border-box;
		}
#column3 .block3 .rellax{
		filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			z-index: -1;
			display: block;
			height: 14vw;
			min-height: 170px;
			aspect-ratio: 16 / 9;
			position: absolute;
			top: 70%; right: 20%;
			box-sizing: border-box;
		}

#column4 .block .rellax{
			filter: blur(10px);
			color: #223;
			opacity: 0;
			text-align: left;
			
			display: block;
			width: 14vw;
			min-width: 170px;
			aspect-ratio: 9/16;
			position: absolute;
			top: 40%; left: -60vw;
			box-sizing: border-box;
	z-index: -1;
		}


.textcontent{
	opacity: 0;
	filter: blur(4rem);
	text-transform: uppercase;
}
.textcontent-top{
	opacity: 0;
	filter: blur(4rem);
	text-transform: uppercase;
}

#column1 .textcontent1{
	position: absolute;
  margin-bottom: auto ;
	  margin-top: auto ;
	text-align: left;
	top: 41%;
	left: 10%;
	width: 40%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	color: #fff;
	z-index: 10;
}

#column1 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}

#column2 {
    display: grid;
	place-content: center;
	height: 120vh;
	width: 100vw;
	/*background: rgba(255,0,0,1);
	background-image: url("../images/webdesign003.jpg");*/
	background-repeat: no-repeat;
	background-position: 45% center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#column2 .textcontent2{
	position: absolute;
  margin-bottom: auto ;
	  margin-top: auto ;
	z-index: 10;
	top: 50%;
	right: 10%;
	width: 40%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#column2 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#column3 {
    display: grid;
	place-content: center;
	height: 120vh;
	width: 100vw;
	/*background: rgba(255,0,0,1);
	background-image: url("../images/graphic001.jpg");*/
	background-repeat: no-repeat;
	background-position: 68% 50%;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#column3 .textcontent3{
	position: absolute;
  margin-bottom: auto ;
	  margin-top: auto ;
	z-index: 10;
	top: 50%;
	left: 10%;
	width: 40%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#column3 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}


#column4 {
    display: grid;
	place-content: center;
	height: 120vh;
	width: 100vw;
	/*background: rgba(255,0,0,1);
	background-image: url("../images/about_main002.jpg");*/
	background-repeat: no-repeat;
	background-position: 35% 50%;
	background-size: cover;
	position: relative;
	overflow: hidden;
}


#column4 .textcontent4{
	position: absolute;
  margin-bottom: auto ;
	  margin-top: auto ;
	z-index: 10;
	top: 50%;
	right: 10%;
	width: 40%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#column4 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


#column5{
    display: grid;
	place-content: center;
	width: 100vw;
	background: linear-gradient(180deg, rgba(0,0,0,0)0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%);
	padding: 0 10vw 10em 10vw;
	background-repeat: no-repeat;
	background-position: 70% center;
	background-size: cover;
	position: relative;

}

@media (max-width: 1024px) {
	
	#column1 .textcontent1{
		
		width: 80%;
	}
	#column2 .textcontent2{
		
		width: 80%;
	}
	#column3 .textcontent3{
		width: 80%;
	}
	#column4 .textcontent4{
		width: 80%;
	}
	#column1 .block .rellax{
		top: -30vh; right: 60%;
	}
	#column1 .block2 .rellax{
		top: 0%; right: 0%;
	}
	#column1 .block3 .rellax{
		top: -3vh; right: 30vw;
	}
	#column1 .block4 .rellax{
		top: 10vh; right: 45%;
	}
	#column1 .block5 .rellax{
		top: -9vh; right: 5%;
	}
	#column2 .block .rellax{
		top: -33vh; left: auto; right: 5%;
	}
	#column2 .block2 .rellax{
		top: -40vh; left: 5%;
	}
	#column2 .block4 .rellax{
		top: 35vh; left: auto; right: 5%;
	}
	#column3 .block .rellax{
		top: -20vh; right: 10%;
	}
	#column3 .block2 .rellax{
		top: 7vh; right: 5%;
	}
	#column3 .block3 .rellax{
		top:3vh; right: auto; left: 0;
	}
	#column4 .block .rellax{
		top: 30vh; left: -70vw;
	}
	
	
}



@media (max-width: 740px) {
	
	#column1 .textcontent1{
		
		width: 80%;
	}
	#column2 .textcontent2{
		
		width: 80%;
	}
	#column3 .textcontent3{
		width: 80%;
	}
	#column4 .textcontent4{
		width: 80%;
	}
	#column1 .block .rellax{
		top: -30vh; right: 60%;
	}
	#column1 .block2 .rellax{
		top: 3vh; right: 0%;
	}
	#column1 .block3 .rellax{
		top: 30vh; right: 30vw;
	}
	#column1 .block4 .rellax{
		top: -640%; right: 45%;
		display: none;
	}
	#column1 .block5 .rellax{
		top: 0%; right: 3%;
		display: none;
	}
	#column2 .block .rellax{
		top: -30vh; left: auto; right: 5%;
	}
	#column2 .block2 .rellax{
		top: -40vh; left: 5%;
	}
	#column2 .block4 .rellax{
		top: 30vh; left: auto; right: 5%;
	}
	#column3 .block .rellax{
		top: 40vh; right: 10%;
	}
	#column3 .block2 .rellax{
		top: -60vh; right: 5%;
	}
	#column3 .block3 .rellax{
		top: 40vh; right: auto; left: 0;
	}
	#column4 .block .rellax{
		top: 80%; left: -70vw;
	}
	#column1 .block .rellax{	
			min-width: 120px;
		}

#column1 .block2 .rellax{
			min-height: 120px;
		}

#column1 .block3 .rellax{
			min-height: 120px;
		
		}
#column1 .block4 .rellax{
			min-width: 120px;
		}
#column1 .block5 .rellax{
			min-height: 120px;
		}
#column2 .block .rellax{

		min-width: 120px;
		}
#column2 .block2 .rellax{
		min-height: 120px;
	
		}
#column2 .block4 .rellax{

		min-height: 120px;
		
		}

#column3 .block .rellax{
	
			min-height: 120px;

		}
#column3 .block2 .rellax{
		
			min-width: 120px;
			
		}
#column3 .block3 .rellax{

			min-height: 120px;
		
		}

#column4 .block .rellax{
		
			min-width: 120px;
		
		}

}

.about-timeline-title{
	opacity: 0;
}

#about-timeline{
	position: relative;
	padding:10em 0;
	width: 60vw;
	margin: auto;
}
#about-timeline::before{
	content:"";
	width: 20px;
	height: 20px;
	border-radius: 10px;
	position: absolute;
	top: -20px;
	transform: translateX(-50%);
	left: 50%;
	border: 1px solid var(--orange);
	opacity: 0;
}
#about-timeline::after{
	content:"";
	height: 0%;
	width: 1px;
background: var(--orange);
	position: absolute;
top:0;
	transform: translateX(-50%);
	left: 50%;
	opacity: 0;

}

.timeline-left{
	width: 50%;
	margin-right: 50%;
	flex: 1;
	padding: 3em 0;
	display: grid;
	align-content: center;
	align-items: center;
}
.timeline-right{
	width: 50%;
	margin-left: 50%;
	padding: 3em 0;
	display: grid;
	align-content: center;
	align-items: center;
}
.timeline-right .timeline-time{
	
	margin-top: auto;
	position: relative;
	padding-left: 3rem;
	transform-origin: left;
}
.timeline-left .timeline-time{
	margin-top: auto;
	position: relative;
	padding-right: 3rem;
	transform-origin: right;
}
.timeline-time-h3{
	font-size: 3em;
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 1px var(--orange);
  text-stroke: 1px var(--orange);
}
.timeline-time::after{
	content:'';
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--orange);
}
/*
.timeline-left .timeline-time::before{
	content:"";
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #fff;
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	bottom: -10px;
}
*/
.timeline-right .timeline-title{
	margin-top: auto;
	margin-left: 3rem;
}
.timeline-left .timeline-title{
	margin-top: auto;
	margin-right: 3rem;
}
.timeline-title h4{
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1.2;
	padding-top: 3rem;
	margin-bottom: 2rem;
	color: var(--orange);
}
.timeline-title p{
	color: var(--orange);
}
.timeline-text{
	display: flex;
	padding-left: 3rem;
	padding-top: 1rem;
	min-height: 100px;
	
}
.timeline-box{
	flex:1;
}
.timeline-excerpt{
	flex:1;
}
.timeline-second{
	margin-top: 3rem;
}
@media (max-width: 1024px) {
	#about-timeline{
		width: 80vw;
	}
}

@media (max-width: 740px) {
	#about-timeline{
		padding:5em 0;
		width: 80vw;
		margin: auto;
	}
	
	.about-timeline-wrapper{
		display: block;
	}
	.timeline-right{
		flex: auto;
	}
	.timeline-left{
		flex: auto;
		padding: 0;
	}
	.timeline-left .timeline-time{
		padding-left: 3rem;	
	}
	.timeline-left .timeline-title{
		margin-left: 3rem;
	}
	#about-timeline::before{
	content:"";
	width: 20px;
	height: 20px;
	border-radius: 10px;
	position: absolute;
	top: -20px;
	transform: translateX(-50%);
	left: 0%;
		border: 1px solid var(--orange);
}
#about-timeline::after{
	content:"";
	height: 100%;
	width: 1px;
background: var(--orange);
	position: absolute;
top:0;
	transform: translateX(-50%);
	left: 0%;
}
	
	.timeline-left{
	width: 100%;
	margin-right: 0;
	flex: 1;
	padding: 3em 0;
	display: grid;
	align-content: center;
	align-items: center;
}
.timeline-right{
	width: 100%;
	margin-left: 0;
	padding: 3em 0;
	display: grid;
	align-content: center;
	align-items: center;
}
}

/*work single slider*/


#work-single-slidecontainer{
	width:50vw;
	height:100svh;
	overflow: hidden;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
 opacity: 0.8;
  
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #272727;
		position:absolute;
	top: 0;
	left: 0;
	
}

#slideconatner2{
	width: 50vw;
	height: 50svh;
	overflow: hidden;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
 opacity: 0.8;
  
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #272727;
	position:absolute;
	top: 0;
	right: 0;

}

#slideconatner3{
	width: 25vw;
	height: 50svh;
	overflow: hidden;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
 opacity: 0.8;
  
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #272727;
	position:absolute;
	bottom: 0;
	right: 25vw;
	
}

#slideconatner4{
	width: 25vw;
	height: 50svh;
	overflow: hidden;
	background-repeat: no-repeat;
	/* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
 opacity: 0.8;
  
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #272727;
	position:absolute;
	bottom: 0;
	right: 0;
	
}


.work-single-slide{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	transform: translate(-100vw 0);
	clip-path: inset(0px 0px 0px 0%);
	visibility: hidden;
	cursor: pointer;
}

.work-single-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(10px);
}

ul li.work-single-slide:first-child{
	opacity: 1;
	transform: translate(0 0);
	visibility: visible;
}

.work-single-slides{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	transform: translate(-100vw 0);
	clip-path: inset(0px 0px 0px 0%);
	cursor: pointer;
	visibility: hidden;
}

.work-single-slides img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(10px);
}

ul li.work-single-slides:first-child{
	opacity: 1;
	transform: translate(0 0);
	visibility: visible;
}

.work-single-slidess{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	transform: translate(-100vw 0);
	clip-path: inset(0px 0px 0px 0%);
	cursor: pointer;
	visibility: hidden;
}

.work-single-slidess img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(10px);
}

ul li.work-single-slidess:first-child{
	opacity: 1;
	transform: translate(0 0);
	visibility: visible;
}


.work-single-slidesss{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	transform: translate(-100vw 0);
	clip-path: inset(0px 0px 0px 0%);
	cursor: pointer;
	visibility: hidden;
}

.work-single-slidesss img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(10px);
}

ul li.work-single-slidesss:first-child{
	opacity: 1;
	transform: translate(0 0);
	visibility: visible;
}



.work-single-sliderthumb {
	position:absolute;
	width:70%;
	max-height:600px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
	display: flex;
  justify-content: center;
  align-items: center;
	 
	left:50%;
	  bottom: 0%;
    gap: 0em;
	z-index: 4;
}



/*重なり*/
.workskasanari01{
	z-index: 3;
}


.work-single-thumbitem{
	opacity: 0;
	aspect-ratio: 1/1;
	width:100%;
	height:100%;
	max-width:100px;
	overflow: hidden;
	cursor: pointer;
}

.work-single-thumbitem img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
}

/*アクティブ*/
#work-single-wrapper .thumb-active{
	position: relative;
	opacity:0.5;
	pointer-events: none;
}

#work-single-wrapper .thumb-active::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index:2;
background: #272727;
	opacity:0.5;
	pointer-events: none;
/* 最背面へ */

}




/* モバイル版
------------------------------- */
@media (max-width: 1250px) {
	
#work-single-slidecontainer{
	width:100vw;
	height:50svh;
}

#slideconatner2{
	width: 50vw;
	height: 50svh;
	overflow: hidden;
	top: auto;
	bottom: 0;
	right: auto;
	left: 0;
}

#slideconatner3{
	width: 50vw;
	height: 25svh;
	overflow: hidden;
	top: auto;
	bottom: 25svh;
	right: 0;
	left: auto;
}
	
#slideconatner4{
	width: 50vw;
	height: 25svh;
	overflow: hidden;
	top: auto;
	bottom: 0;
	right: 0;
	left: auto;
}
	
	

}
/*ページャー*/
#work-single-slidepager{
	position: absolute;
	clip-path: polygon(0 0, 100% 0%, 0 100%);
	line-height:1;
	height:4rem;
	width:4rem;
	bottom: 2rem;
	left: 3rem;
	overflow: hidden;
	padding: 0;
	background-image: linear-gradient(to left top, transparent 50%, var(--orange) 50%, var(--orange) 51%, transparent 51%);
	
	color:#fff;
}
.work-single-slash{
	position: absolute;
	clip-path: polygon( 100% 0%, 100% 100%, 0% 100%);
	line-height:1;
	height:4rem;
	width:4rem;
	bottom: 2rem;
	left: 3rem;
	overflow: hidden;
	padding: 0;
	text-align:right;
	vertical-align: bottom;
	/*mix-blend-mode: difference;*/
	color:#fff;
	z-index: 1;
}
.work-single-slash2{
	position: absolute;
	line-height:1;
	height:4rem;
	width:4rem;
	bottom: 2rem;
	left: 3rem;
	
	padding: 0;
	z-index: 0;
	text-align:right;
	vertical-align: bottom;
	/*mix-blend-mode: difference;*/
	color: var(--orange); /*オレンジ*/
}
.work-single-page{
	position: absolute;
	bottom: 2rem;
	left: 3rem;
	font-size: 2rem;
	
	opacity: 0;
}
.work-single-allpage{
	font-size: 2.5rem;
	position: absolute;
	bottom: 3px;
	right: 3px;
	mix-blend-mode: difference;
	font-weight: 700;
}
.work-single-allpage2{
	font-size: 2.5rem;
	position: absolute;
	bottom: 3px;
	right: 3px;
	font-weight: 700;
}
.work-single-pagerlargenext{
	font-size: 2.5rem;
	font-weight: 700;
	position: absolute;
	bottom: 1.4rem;
	left:0;
	padding-left:5px;
	color: var(--orange); /*オレンジ*/
}
.work-single-pagerlarge{
	font-size: 2.5rem;
	font-weight: 700;
	position: absolute;
	bottom: 1.4rem;
	left:0;
	padding-left:5px;
	color: var(--orange); /*オレンジ*/
}
/* タブレット版
------------------------------- */
@media (max-width: 1024px) {
	.work-single-thumbitem{
		max-width:70px;
	}
}

/* モバイル版
------------------------------- */
@media (max-width: 740px) {
	/*ページャー*/
	#work-single-slidepager{
		height:3.5rem;
		width:3.5rem;
		bottom: 1rem;
		left: 1.5rem;
	}
	.work-single-slash{
		height:3.5rem;
		width:3.5rem;
		bottom: 1rem;
		left: 1.5rem;
	}
	.work-single-slash2{
		height:3.5rem;
		width:3.5rem;
		bottom: 1rem;
		left: 1.5rem;
	}
	.work-single-page{
		bottom: 1rem;
		left: 1.5rem;
		font-size: 1.5rem;
	}
	.work-single-allpage{
		font-size: 2rem;
		bottom: 3px;
		right: 3px;
	}
	.work-single-allpage2{
		font-size: 2rem;
		bottom: 3px;
		right: 3px;
	}
	.work-single-pagerlargenext{
		font-size: 2rem;
		bottom: 1.3rem;
		left:0;
		padding-left:5px;
	}
	.work-single-pagerlarge{
		font-size: 2rem;
		bottom: 1.3rem;
		left:0;
		padding-left:5px;
		color: var(--orange); /*オレンジ*/;
	} 
	
	
}

/*ワークシングル*/
#work-single-wrapper{
	position: relative;
	width: 100vw;
	height: 100svh
}

/*ニュースアーカイブ*/
#pg-news .topnews-catrgory{
	border: 1px solid #E95900;
	color: #E95900;
	padding: 0.4em 6px 0.4em 7px;
	line-height: 1;
	cursor: pointer;
	width: auto;
	float:left;
	font-size: 0.8em;
}
#pg-news time{
	font-size: 0.8em;
}
/* モバイル版
------------------------------- */
@media screen and (max-width: 740px) {
#pg-news .topnews-catrgory{
	padding: 0.45em 6px 0.35em 7px;
}
}

#pg-news .topnews-catrgory a{
	color: #E95900;
}

/*ニュースシングル*/
#pg-newsDetail .topnews-catrgory{
	border: 1px solid #E95900;
	color: #E95900;
	padding: 0.35em 6px 4px 7px;
	line-height: 1;
	cursor: pointer;
	width: auto;
	float: left;
	font-size: 0.9em;
}


#pg-newsDetail .topnews-catrgory a{
	color: #E95900;
}

#pg-newsDetail time{
	font-size: 0.9em;
}

/*ブログ　アーカイブ*/
#pg-blog time{
	font-size: 0.9em;
}
/*ブログ　シングル*/
@media screen and (max-width: 740px) {
	#pg-blogDetail button{
		margin-top: 3em;
	}
}
/*デモ　アーカイブ*/
.demo-category{
	font-size: 0.9em;
}

.works-category{
	font-size: 0.9em;
	text-align: left;
}

/*デモシングル*/
#pg-demoDetail .title {
	color: #fff;
}

/* 重要 ブログシングルコードレイアウト */


.news{
	text-align:left;
	margin-bottom:15px;
	width:100%;
	display: inline-block;
}


/*円ロード*/
.sp {
  width: 70px;
  height: 70px;
  clear: both;
  margin: 10px auto;
}

/* Spinner Circle Rotation */
.sp-circle {
 
 
}

svg.load {
  position: relative;
  width: 150px;
  height: 150px;
}

svg circle {
  position: relative;
  fill: none;
  stroke-width: 2;
	stroke: var(--orange);
  stroke-dasharray: 400;
  stroke-dashoffset: 345;
  stroke-linecap: round;
}

svg circle.line {
  
	stroke-dasharray: 200;
  stroke: transparent;
	stroke-linecap: round;
}




@-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*ギャラリー*/

#gallery-container{
	padding: 5em 0 9em;
	min-height: 100svh;
	width: 100vw;
	display: grid;
	place-content: center;
	place-items: center;
	background: #000;
}
#gallery-heading {
	width: 100%;
}
/*#gallery-container .button {
	font-size: 1.375rem;
    color: #fff;
    padding:inherit;
	width: 300px;
	padding-right: 0 2em;
	height: 70px;
	border: solid 1px;
	margin-top: 30px;
	border-color: #fff;
	margin-bottom: 5em;
	background: transparent;
	letter-spacing: 1px;
}*/

#gallery-heading h3{
	font-size:4.5em;
	text-align: center;
	margin-top: 5%;
	color: #fff;
}
#gallery-heading p{
	text-align: center;
	color: #fff;
	padding-left: 5%;
	padding-right: 5%;
}

/*レイアウト*/

#gallery-container .grid-wrapper {
    display:grid;
	grid-template-columns: repeat(6, 1fr);
    gap: 1em;
	padding: 4em 0 3em;
}

#gallery-container .grid-item {
	border:none;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1 / 1;
}

#gallery-container .grid-item img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
	opacity: 0;
}

#gallery-container .button {
    font-size: 1.375rem;
    background: transparent;
    color: #fff;
    border-radius: 50px;
    padding: 18px 32px;
	display:block;
	border: 1px solid #fff;
	opacity: 1;
  	width:250px;
}

@media screen and (max-width: 1024px){
	#gallery-container .grid-wrapper {
		grid-template-columns: repeat(4, 1fr);
    	gap: 1em;
	}
}

@media screen and (max-width: 740px){
	#gallery-container .grid-wrapper {
		grid-template-columns: repeat(3, 1fr);
    	gap: 1em;
	}
}


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

/*レイアウト*/
.text-splits7{
	opacity: 0;
	display:inline-block;
}

.gallery-text{
	opacity: 0;
}

.gallery-button{
	opacity: 0;
}

.gallery-grid-wrapper {
    /*max-width: 1500px;*/
    margin: 0 auto;
    padding: 0 ;	
	/*display:-webkit-box;*/
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
	margin-bottom: 50px;
	flex-shrink:0;
}

.gallery-grid-item {
	border:none;
	overflow: hidden;
	cursor: pointer;
	height: 400px;
	flex-grow: 1;
	-webkit-box-flex:1;
	flex-basis:500px;
}
/*
.grid-item:last-child {
	flex-grow: 0;
	-webkit-box-flex:0;
}
*/
.verticalp{
	flex-basis:200px;
}


.gallery-grid-item img{
	width:100%;
	height:100%;
	object-fit: cover;
	overflow: hidden;
	opacity: 1;
}


@media screen and (max-width: 740px){
	.gallery-grid-item {
	height: 200px;
	flex-basis:200px;
	
}
	.verticalp{
	flex-basis:100px;
}
	
}

.modal2 {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	cursor: pointer;
}
.inner2 {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	min-width: 350px;
	position: fixed;
	text-align: center;
	
	

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	animation: fadeInAnimation 800ms ease-out;
	z-index: 30;
	height: 800px;
	max-width: 90vw;
	/*aspect-ratio: 4 / 3;
	overflow: hidden;*/
}
.inner2 img {
    width: auto;
   	height: 100%;
    /*object-fit: cover;*/
}

@media (max-width: 1250px) {
	.inner2 {
	height: auto;
	width: 70vw;
		
	/*aspect-ratio: 4 / 3;
	overflow: hidden;*/
}
.inner2 img {
    width: 100%;
   	height: auto;
    /*object-fit: cover;*/
}
}


.closemodal2{
	width: 50px;
	height: 50px;
	/*background: #000;*/
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	cursor: pointer;
	background: rgb(0 0 0 / 0.7);
}
.closemodal2::after, .closemodal2::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: var(--orange);
	position: absolute;
}
.closemodal2::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
.closemodal2::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}
@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.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: 200;
}

.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;
	border-radius: 5px;
	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: 300;
	width: 100%;
  aspect-ratio: 16 / 9;
}


.yt-inner iframe {
  width: 100%;
  height: 100%;
}

.yt-modal .yt-inner img{
	width: 100%;
	height: auto;
}

.yt-closemodal{
	width: 50px;
	height: 50px;
	/*background: #000;*/
	position: fixed;
	top: 0;
	right: 0;
	z-index: 210;
	cursor: pointer;
}
.yt-closemodal::after, .yt-closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: var(--orange);
	position: absolute;
}

.yt-closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}

.yt-closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}

.new-fadein{
	opacity: 0;
}