@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
body,.font_serif,.font_jp, .con_title, #page_title p, .cate_title, .box_title1, .box_title{font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;font-weight: 400;}
.font_bold{font-weight: 700;}

.font1,.font_en,a[href^="tel:"],#page_title h2,.cate_title.font1,.cate_list::before,.more,.pager,.date{
font-family: "Fjalla One", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;
letter-spacing: 0;
}
.width_1000-min{min-width: 700px;}

.textSplitLoad {
    display: none;
}
.txtanim {
    visibility: hidden;
}

/* 画像リスト用のスタイル */
.webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}

.webgl-canvas__body {
  width: 100%;
  height: 100%;
}
/*
#top_works .container{
position: relative;
top: 0;
left: 0;
}
*/
.image-wrapper {
  display: block;
  width: 100%;
}

.image-wrapper > img {
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.glitch_txt{
transition: text-shadow .1s ease-in-out;
text-shadow: 0 0 0 #00FFFF, 
			 0 0 0 #FF00FF, 
			 0 0 0 #FFFF00;
}


#intro2 {
  height: 100vh;
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.group {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.item {
  width: 15vw;
  height: 75vh;
  background-position: center;
  background-size: 75vh;
  margin: 1vw;
  border-radius: 3vw;
  display: inline-block;
  cursor: pointer;
}
/*--------------------------------
全体
--------------------------------*/
.map_wrap iframe{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
height: 100%!important;
margin-top: 0;
}
#map.width_70per{    width: 58%!important;}
#top_info .width_90per{    width: 100%!important;}
#mapDiv button.gm-control-active.gm-fullscreen-control{    display: block!important;}
#under_page .map_wrap{height: 500px;}

.displacement-img {
	width: 250px;
}

.img-distortion {
	position: relative;
	overflow: hidden;
}

.displacement-hover {
	display: flex;
	width: 100%;
	height: 100%;
}

/*body,a,header .menu_stick,#page-top{cursor: none;}*/
.cursor, .follower{
	border-radius: 50%;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10000;
	transition: 0.3s;
	transition-property: opacity,background,background-image,width,height,transform;
	mix-blend-mode: exclusion;
}
.cursor{
	width: 8px;
	height: 8px;
	background-color: #fff;
}
.cursor::before,.cursor::after{
    content: " ";
    display: block;
    width: 150px;
    height: 150px;
    position: relative;
    top: -70px;
    left: -65px;
    opacity: 0;
    transition: 0.3s;
	transition-property: opacity,background,background-image,width,height,transform;
    background-size: contain;
    background-repeat: no-repeat;
}
.cursor::after{top: -220px;}

.cursor.is-active{
	background-color: transparent;
	mix-blend-mode: normal;
}
.cursor.is-active::before{
    opacity: 1;
	background-image: url("./Dup/img/cursor_hover.png");
}
.cursor.is-active::after{
    opacity: 1;
	background-image: url("./Dup/img/cursor_hover2.png");
	animation: rotate 10s linear infinite;
}
@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.follower {
	width: 40px;
	height: 40px;
	border: solid 1px #fff;
}
.follower.is-active{
	border: none;
}

#loading_bg{
mix-blend-mode: screen;
}
#header{pointer-events: none;}
header .menu_stick,.header_txt,#sp_nav,.scrolldown2{pointer-events: auto;}

#wrap{
    background-color: #1a1a1a;
    opacity: 0;
}

#bg_video{
position: fixed;
top: 0;
left: 0;
}
#bg_video span{
width: 100%;
height: 100vh;
filter: blur(30px);
}

#bg_video iframe{
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}


#bg_video .bg_box{
background: -moz-radial-gradient(transparent 50%, rgba(0,0,0,0.8));
background: -webkit-radial-gradient(transparent 50%, rgba(0,0,0,0.8)); 
background: radial-gradient(transparent 50%, rgba(0,0,0,0.8));
width: 100%;
height: 100vh;
opacity: 1;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}


#logo{
width: 80px;
top: 20px;
left: 20px;
z-index: 3;
}

#header{
width: 120px!important;
height: 100vh;
right: 0;
border-left: 2px solid #fff;
}
#header::before{display: none;}

#header .inner{
width: 100%;
height: 100%;
}

header .menu_stick{
height: 30px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#sp_nav li a:hover .en{
    opacity: 0.5;
}

.header_txt{
width: 200px;
height: 70px;
font-size: 40px;
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%) rotate(90deg);
-webkit-transform: translate(-50%,-50%) rotate(90deg);
transform: translate(-50%,-50%) rotate(90deg);
}

/*スクロールダウン全体の場所*/
.scrolldown1,.scrolldown2{
/*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:10px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
/*全体の高さ*/
height:50px;
z-index: 2;
}
.scrolldown2{width: 70px;}

/*Scrollテキストの描写*/
.scrolldown1 span,.scrolldown2 span{
color: #fff;
font-size: 20px;
letter-spacing: 0;
transform: rotate(90deg);
display: block;
}

/* 線の描写 */
.scrolldown1::after,.scrolldown2::after{
content: "";
/*描画位置*/
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
/*線の形状*/
width: 1px;
height: 20px;
background: #eee;
opacity:0;
}
.scrolldown1::after{
/*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
top: 50px;
}
.scrolldown2::after{
/*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove2 1.4s ease-in-out infinite;
bottom: 80px;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top: 50px;
		opacity: 0;
	}
	30%{
		height:20px;
		opacity: 1;
	}
	100%{
		height:0;
		top: 80px;
		opacity: 0;
	}
}
@keyframes pathmove2{
	0%{
		height:0;
		bottom: 80px;
		opacity: 0;
	}
	30%{
		height:20px;
		opacity: 1;
	}
	100%{
		height:0;
		bottom: 110px;
		opacity: 0;
	}
}

main{background-color: rgba(0,0,0,0.95);}
main.over_hide{
padding-top: 300px;
position: relative;
overflow: visible;
background: -moz-linear-gradient(top, transparent, rgba(0,0,0,0.95) 300px);
background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.95) 300px);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.95) 300px);
}
main.top.over_hide{padding-top: 500px;}

#intro,#top_works,#top_banner,#top_info,footer,#page_title,#under_page{
padding-left: 0;
padding-right: 120px;
}

/*
main:before{
content: "";
display: block;
background: -moz-linear-gradient(top, transparent, rgba(0,0,0,0.95) 90%);
background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.95) 90%);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.95) 90%);
width: 100%;
height: 500px;
position: absolute;
top: -499px;
left: 0;
}
*/

#cms_4-b .cate_title,#top_works .cate_title{font-size: 80px;line-height: 1;}

#top_works .cate_box{
width: 80%!important;
box-sizing: border-box;
margin: 0 auto 2%;
}
#cms_4-b .cate_box{
width: calc(33% - 2%)!important;
box-sizing: border-box;
margin: 0 1% 2%;
}
#top_works .cate_box{perspective: 300px;}
#top_works .cate_box{
-webkit-transition: transform 300ms ease;
-moz-transition: transform 300ms ease;
-ms-transition: transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
opacity: 0.5;
transform: perspective(0) translateY(0) scale(1.0);
}
#top_works .cate_box:hover{
opacity: 1;
transform: perspective(200px) translateY(-50px) scale(1.2);
}


footer{
position: relative;
z-index: 1;
}
.footer_logo.width_200-max{max-width: 100px;}
#page-top,.footer_logo a{transition:opacity 0.3s;}
#page-top:hover,.footer_logo a:hover{
    opacity: 0.5;
}

/*--------------------------------
TOP
--------------------------------*/
.main_logo{z-index: 2;}

#top_blog .cate_box{
position: fixed;
bottom: 20px;
left: 20px;
width: 100%;
max-width: 400px;
z-index: 1;
}
#top_blog .cate_box a{background-color: rgba(0,0,0,0.8);}

.flex-container {
height: 100vh;
width: 100%;
display: -webkit-flex;
/* Safari */
display: flex;
overflow: hidden;
}
@media screen and (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}
.flex-slide .box_photo{height: 100%;}
.flex-title{
color: #f1f1f1;
position: relative;
font-size: 50px;
/*letter-spacing: 0;*/
text-align: center;
white-space: nowrap;
margin: auto;
top: 40%;
transform: rotate(90deg);
  -webkit-transition: all 1000ms cubic-bezier(0.5, 0, 0, 0.99);
  -moz-transition: all 1000ms cubic-bezier(0.5, 0, 0, 0.99);
  -ms-transition: all 1000ms cubic-bezier(0.5, 0, 0, 0.99);
  -o-transition: all 1000ms cubic-bezier(0.5, 0, 0, 0.99);
  transition: all 1000ms cubic-bezier(0.5, 0, 0, 0.99);
z-index: 1;
}
.flex-title2{
opacity: 0;
font-size: 50px;
letter-spacing: 20px;
text-align: center;
position: relative;
top:20%;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
  -webkit-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  -moz-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  -ms-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  -o-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
filter: blur(10px);
text-shadow: 0 3px 10px rgba(0,0,0,0);
z-index: 1;
}

.flex-about {
  opacity: 0;
  color: #f1f1f1;
  position: relative;
  width: 35vw;
  padding: 5%;
  top: 30%;
  border: 2px solid #f1f1f1;
  line-height: 1.3;
  margin: auto;
  text-align: left;
  transform: rotate(0deg);
  -webkit-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  -moz-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  -ms-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  -o-transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  transition: all 1500ms 100ms cubic-bezier(0.5, 0, 0, 0.99);
  z-index: 1;
  filter: blur(10px);
}
.flex-slide.active .r,
.flex-slide.active .g,
.flex-slide.active .b{filter: blur(5px);}
.flex-title2.active{
    letter-spacing: 0;
	filter: blur(0);
	text-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.flex-about.active{
	filter: blur(0);
}

@media screen and (max-width: 768px) {
  .flex-about {
    padding: 0%;
    border: 0px solid #f1f1f1;
  }
}


.flex-slide {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  -webkit-transition: all 700ms cubic-bezier(0.85, 0, 0.15, 1);
  -moz-transition: all 700ms cubic-bezier(0.85, 0, 0.15, 1);
  -ms-transition: all 700ms cubic-bezier(0.85, 0, 0.15, 1);
  -o-transition: all 700ms cubic-bezier(0.85, 0, 0.15, 1);
  transition: all 700ms cubic-bezier(0.85, 0, 0.15, 1);
  /*filter: grayscale(1);*/
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .flex-slide {
    overflow: auto;
    overflow-x: hidden;
  }
}
.flex-slide:before{
content: "";
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,1.0));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,1.0));
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,1.0));
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.flex-slide:hover {
  -webkit-flex-grow: 3;
  flex-grow: 3;
  filter: none;
}



.box1,.box2,.box3,.box4{
  height: 100vh;
  background-size: cover!important;
  background-position: center center!important;
  background-attachment: fixed!important;
}
@media screen and (min-width: 768px) {
  .box1 {
    animation: aboutFlexSlide 3s 1;
    animation-delay: 0s;
  }
}

@keyframes aboutFlexSlide {
  0% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
  50% {
    -webkit-flex-grow: 3;
    flex-grow: 3;
  }
  100% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
}

@keyframes box1Flextitle {
  0% {
    transform: rotate(90deg);
    top: 25%;
  }
  50% {
    transform: rotate(0deg);
    top: 25%;
  }
  100% {
    transform: rotate(90deg);
    top: 25%;
  }
}

.flex-about-box1 {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .flex-about-box1 {
    animation: aboutFlexSlide 3s 1;
    animation-delay: 0s;
  }
}

@keyframes flexAboutbox1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*
.r, .g, .b {
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-size: cover;
background-position: center center;
mix-blend-mode: screen;
background-blend-mode: darken;
-webkit-transition: filter 1000ms ease;
-moz-transition: filter 1000ms ease;
-ms-transition: filter 1000ms ease;
-o-transition: filter 1000ms ease;
transition: filter 1000ms ease;
filter: blur(0);
}
.r {
  background-color: red;
}
.g {
  background-color: lime;
}
.b {
  background-color: blue;
}
*/

.r,
.g,
.b {
background-size: cover;
mix-blend-mode: screen;
background-blend-mode: darken;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100%;
overflow: hidden;
-webkit-transition: filter 1000ms ease;
-moz-transition: filter 1000ms ease;
-ms-transition: filter 1000ms ease;
-o-transition: filter 1000ms ease;
transition: filter 1000ms ease;
}
.r {
	background-color: red;
}
.g {
	background-color: lime;
}
.b {
	background-color: blue;
}

#top_works .r, #top_works .g, #top_works .b{  mix-blend-mode: lighten;}
#cms_4-b .r, #cms_4-b .g, #cms_4-b .b{  mix-blend-mode: lighten;}

#top_works .cate:nth-of-type(1) .left{margin-left: -5vw;}
#top_works .cate:nth-of-type(2) .left{margin-left: -10vw;}
#top_works .cate:nth-of-type(3) .left{margin-left: -10vw;}
#top_works .cate:nth-of-type(1) .box_wrap{margin-right: -3vw;}
#top_works .cate:nth-of-type(2) .box_wrap{margin-right: -3vw;}
#top_works .cate:nth-of-type(3) .box_wrap{margin-right: -3vw;}

/*--------------------------------
下層
--------------------------------*/

#page_title,.under_box.bg_color3{background-color: transparent;}

/* モーダル */
html.modalset{
	overflow: hidden;
}
.modal{
    color: #fff!important;
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	transition: transform 1.0s;
}
.modal-bg.active{
    animation: bg 3s linear forwards;
}
@keyframes bg {
	0% {background-color: rgba(0,0,0,0);backdrop-filter: blur(0);}
	35% {background-color: rgba(0,0,0,0.9);backdrop-filter: blur(0);}
	70%,100% {background-color: rgba(0,0,0,0.9);backdrop-filter: blur(30px);}
}

.modal-wrap {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.modal-wrap::-webkit-scrollbar {
	display: none;
}
.modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100vh;
}
.modal-bg{
	position: absolute;
	left: 0;
	top: 0;
	/*background: rgba(0,0,0,0.7);*/
	width: 100%;
	height: 100vh;
}

.modal-box{
	width: 95%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.modal-box .inner{
	/*background: #fff;*/
	max-height: 880px;
	padding: 5% 0;
	box-sizing: border-box;
	overflow: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.modal-box .inner::-webkit-scrollbar {
	display:none;
}
.modal-box .inner > :first-child {
	margin-top: 0;
}

body.page main,body.page #bg_video,.modal_item,body.page .webgl-canvas{filter: blur(30px);}
body.page.active main,body.page.active #bg_video,body.page.active .webgl-canvas{animation: noblur 0.5s linear forwards;}
.modal_item.active{animation: noblur 1s linear forwards;}
@keyframes noblur{
	0% {filter: blur(30px);}
	100% {filter: blur(0);}
}
body.active2,body.active2 #sp_nav{animation: blur 0.5s linear forwards;}
@keyframes blur{
	0% {filter: blur(0);}
	100% {filter: blur(30px);}
}

.modal-box .modal-close{
	position: absolute;
    top: 0;
    right: 0;
}
.modal-box .modal-close span{
	display: block;
	width: 50px;/*枠の大きさ*/
	height: 50px;/*枠の大きさ*/
	position: relative;
}

.modal-box .modal-close span::before, .modal-box .modal-close span::after{
	content: "";
	display: block;
	width: 100%;/*バツ線の長さ*/
	height: 2px;/*バツ線の太さ*/
	background: #fff;
	transform: rotate(45deg);
	transform-origin:0% 50%;
	position: absolute;
	top: calc(14% - 1px);
	left: 14%;
}

.modal-box .modal-close span::after{
	transform: rotate(-45deg);
	transform-origin:100% 50%;
	left: auto;
	right: 14%;
}
.modal_title_wrap{
transform: rotate(90deg);
}
.modal_title1:before{
content: "";
display: block;
background-color: #fff;
width: 50px;
height: 2px;
position: absolute;
top: 13px;
left: -15px;
}
.modal_title1 span{
font-size: 20px;
padding-left: 50px;
}
.modal_title2{
font-size: clamp(15px,1.5vw,26px);
}
.modal_txt_wrap{padding-right: 50px;}
.modal_txt_wrap.over{position: relative;}
.modal_txt_wrap.over:before{
content: "SCROLL 》";
font-size: 12px;
color: #fff;
position: absolute;
bottom: 5%;
right: -10px;
transform: rotate(90deg);
}

.modal_txt{
overflow-y: auto;
overflow-x: hidden;
max-height: 45vh;
padding-right: 5%;
}
.modal_txt::-webkit-scrollbar{width: 2px;}
.modal_txt::-webkit-scrollbar-track {background-color: #000;}
.modal_txt::-webkit-scrollbar-thumb {background-color: #fff;}

.modal_txt span{display: block;word-wrap: break-word;}

.modal_video{
position: relative;
height: 27vw;
}

.modal_video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media  screen and (max-width: 1366px){
#top_works .left{
width: 50%!important;
margin-bottom: 50px;
}
#top_works .box_wrap{
width: 80%!important;
margin-right: 0;
margin-left: auto;
}
#top_works .cate:nth-of-type(1) .box_wrap{margin-right: -5vw;}
#top_works .cate:nth-of-type(2) .box_wrap{margin-right: -10vw;}
#top_works .cate:nth-of-type(3) .box_wrap{margin-right: -10vw;}
}


@media  screen and (max-width: 1000px){
#header{width: 80px!important;}
#intro,#top_works,#top_banner,#top_info,footer,#page_title,#under_page{padding-right: 80px;}
}


/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

body,a,header .menu_stick,#page-top{cursor: auto;}
.cursor, .follower{display: none;}
.width_1000-min{min-width: 100%;}
#header{
background-color: rgba(0,0,0,0.8);
width: 100%!important;
height: 100px;
border-left: none;
border-bottom: 2px solid #fff;
}
#logo{
width: 60px;
top: 26px;
left: 15px;
z-index: 101;
}
header .menu_stick{
top:50%;
left: auto;
right: 0;
-ms-transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.header_txt{
-ms-transform: translate(-50%,-50%) rotate(0deg);
-webkit-transform: translate(-50%,-50%) rotate(0deg);
transform: translate(-50%,-50%) rotate(0deg);
}
.scrolldown1,.scrolldown2{display: none!important;}
#intro,#top_works,#top_banner,#top_info,footer,#page_title,#under_page{padding-right: 0;}

.flex-title,.flex-about{display: none;}
.flex-title2{
font-size: 40px;
letter-spacing: 2px;
opacity: 1;
filter: blur(0);
}
.flex-container{display: block;height: auto;}
.flex-slide, .flex-slide:hover{
height: auto;
padding: 70px 0;
overflow: hidden;
}
.flex-slide .box_photo{
height: 100%;
width: 100%;
}
.flex-slide .action1 img{
    width: 100%;
    height: auto;
}


main.over_hide{
padding-top: 200px;
background: -moz-linear-gradient(top, transparent, rgba(0,0,0,0.95) 200px);
background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.95) 200px);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.95) 200px);
}
#cms_4-b .cate_title,#top_works .cate_title{font-size: 60px;}
#top_works .box_wrap{width: 90%!important;}
#top_works .cate:nth-of-type(1) .left,
#top_works .cate:nth-of-type(2) .left,
#top_works .cate:nth-of-type(3) .left{margin-left: 0;}
#top_works .cate:nth-of-type(1) .box_wrap,
#top_works .cate:nth-of-type(2) .box_wrap,
#top_works .cate:nth-of-type(3) .box_wrap{margin-right: 0;}
#cms_4-b .cate_box:hover,.cms_4-b .cate_box:hover{
    transform: none;
}

.modal-box .inner{padding: 10% 5%;}
.modal_title_wrap{
    top: -40px!important;
	left: 50%!important;
	-ms-transform: translate(-50%,0) rotate(0deg)!important;
	-webkit-transform: translate(-50%,0) rotate(0deg)!important;
	transform: translate(-50%,0) rotate(0deg)!important;
}
.modal_txt_wrap{padding-left: 50px;}
.modal_title2{font-size: 26px;}
.modal_txt{max-height: 28vh;}
.modal_video{height: 45vw;}

.sitemap_box li a{line-height: 80px;}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
#header{height: 80px;}
#logo{
width: 45px;
top: 19px
}
.header_txt{
width: 152px;
height: 60px;
font-size: 30px;
}
#sp_nav{font-size: 20px;}

.flex-title2{
opacity: 1;
font-size: 30px;
}

.modal-bg{background: rgba(0,0,0,0.85);}
.modal-box{width: 100%;}
.modal-box .inner{
max-height: 800px;
padding: 20% 5% 5%;
}
.modal_txt{max-height: 45vh;}
.modal_title1 span{
font-size: 14px;
padding-left: 30px;
}
.modal_title1:before{
width: 30px;
height: 1px;
top: 9px;
left: -15px;
}
.modal_title2{
font-size: 13px;
letter-spacing: 0;
}
.modal_txt_wrap{
    padding-left: 0;
    padding-right: 0;
}
.modal_txt_wrap.over:before{right: -47px;}

#intro, #top_works, #top_banner, #top_info, footer{
padding-left: 20px;
padding-right: 20px;
}
#page_title, #page_title .page_title_box, #under_page{
padding-left: 0;
padding-right: 0;
}

#top_blog .cate_box{width: calc(100% - 40px);}
#top_works .left{width: 85%!important;}
#cms_4-b .cate_title,#top_works .cate_title{font-size: 50px;}
#cms_4-b .cate_box, #top_works .cate_box{
width: 100%!important;
margin: 0 auto;
}
#top_works .cate_box{transform: scale(0.7);}
#cms_4-b .cate_box:hover,#top_works .cate_box:hover{transform: translateZ(400px) translateY(0) scale(0.7);}
#top_works .cate_box.scroll{transform: scale(1.0);}
#top_works .cate_box.scroll .box_img1{opacity: 1.0;}

.more a{font-size: 16px;}

}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #000000;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #333333;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #1a1a1a;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #ffffff;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #000000;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #333333;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #1a1a1a;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #ffffff;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #000000;}
.border_color2,.hvr_border_color2:hover{border-color: #333333;}
.border_color3,.hvr_border_color3:hover{border-color: #1a1a1a;}
.border_color4,.hvr_border_color4:hover{border-color: #ffffff;}